diff --git a/components/booking/DatePicker.tsx b/components/booking/DatePicker.tsx
index c6a49fa0..3dddd1e5 100644
--- a/components/booking/DatePicker.tsx
+++ b/components/booking/DatePicker.tsx
@@ -171,10 +171,13 @@ const DatePicker = ({
         <span className="w-1/2 text-gray-600 dark:text-white">
           {dayjs().month(selectedMonth).format("MMMM YYYY")}
         </span>
-        <div className="w-1/2 text-right">
+        <div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
           <button
             onClick={decrementMonth}
-            className={"mr-4 " + (selectedMonth <= dayjs().tz(inviteeTimeZone).month() && "text-gray-400")}
+            className={
+              "mr-4 " +
+              (selectedMonth <= dayjs().tz(inviteeTimeZone).month() && "text-gray-400 dark:text-gray-600")
+            }
             disabled={selectedMonth <= dayjs().tz(inviteeTimeZone).month()}>
             <ChevronLeftIcon className="w-5 h-5" />
           </button>