diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index f91a0843f..fba965467 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -10,6 +10,7 @@ import {
   isDateEqual,
   isDateInRange,
   isDateToday,
+  isMonthEqual,
   Views,
 } from "../helpers";
 
@@ -25,6 +26,7 @@ export interface DatepickerViewsDaysTheme {
       selected: string;
       disabled: string;
       today: string;
+      outside: string;
     };
   };
 }
@@ -46,7 +48,6 @@ export function DatepickerViewsDays() {
 
   const weekDays = getWeekDays(language, weekStart);
   const startDate = getFirstDayOfTheMonth(viewDate, weekStart);
-
   return (
     <>
       <div className={theme.header.base}>
@@ -65,6 +66,7 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
+          const isOutOfMonth = !isMonthEqual(currentDate, viewDate)
 
           return (
             <button
@@ -73,6 +75,7 @@ export function DatepickerViewsDays() {
               type="button"
               className={twMerge(
                 theme.items.item.base,
+                isOutOfMonth && theme.items.item.outside,
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index e3394257b..968880d94 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -49,6 +49,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           base: "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
+          outside: "opacity-40 text-gray-500",
           today: "",
         },
       },