diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index f91a0843f..4642de956 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -25,6 +25,7 @@ export interface DatepickerViewsDaysTheme {
       selected: string;
       disabled: string;
       today: string;
+      outside: string;
     };
   };
 }
@@ -65,6 +66,7 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
+          const isOutside = currentDate.getMonth() !== viewDate.getMonth();
 
           return (
             <button
@@ -76,10 +78,10 @@ export function DatepickerViewsDays() {
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
+                isOutside && !isSelected && theme.items.item.outside,
               )}
               onClick={() => {
                 if (isDisabled) return;
-
                 changeSelectedDate(currentDate, true);
               }}
             >
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index e3394257b..82c377eee 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -50,6 +50,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
           today: "",
+          outside: "text-gray-400 opacity-40",
         },
       },
     },