diff --git a/resources/views/livewire/availability-calendar.blade.php b/resources/views/livewire/availability-calendar.blade.php
index 907c2d3..d0cd8ac 100644
--- a/resources/views/livewire/availability-calendar.blade.php
+++ b/resources/views/livewire/availability-calendar.blade.php
@@ -187,12 +187,12 @@ new class extends Component
                 <button
                     wire:click="selectDate('{{ $dayData['date'] }}')"
                     @class([
-                        'calendar-cell rounded-lg text-center transition-colors font-medium min-h-[44px]',
-                        'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400 dark:hover:bg-emerald-900/50' => $dayData['status'] === 'available',
-                        'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400 dark:hover:bg-amber-900/50' => $dayData['status'] === 'partial',
-                        'bg-sky-100 text-sky-700 cursor-not-allowed dark:bg-sky-900/30 dark:text-sky-400' => $dayData['status'] === 'user_booked',
-                        'bg-zinc-100 text-zinc-400 cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-600' => in_array($dayData['status'], ['past', 'closed', 'blocked', 'full']),
-                        'ring-2 ring-amber-500 dark:ring-amber-400' => $selectedDate === $dayData['date'],
+                        'calendar-cell rounded-lg text-center transition-colors font-medium min-h-[44px] text-white',
+                        'bg-[#4A5D23]/70 hover:bg-[#4A5D23]/85 dark:bg-[#4A5D23]/60 dark:hover:bg-[#4A5D23]/75' => $dayData['status'] === 'available',
+                        'bg-[#D4A84B]/70 hover:bg-[#D4A84B]/85 dark:bg-[#D4A84B]/60 dark:hover:bg-[#D4A84B]/75' => $dayData['status'] === 'partial',
+                        'bg-sky-400/50 cursor-not-allowed dark:bg-sky-500/40' => $dayData['status'] === 'user_booked',
+                        'bg-zinc-300/50 !text-zinc-400 cursor-not-allowed dark:bg-zinc-700/50 dark:!text-zinc-500' => in_array($dayData['status'], ['past', 'closed', 'blocked', 'full']),
+                        'ring-2 ring-[#A68966] dark:ring-[#C4A882]' => $selectedDate === $dayData['date'],
                     ])
                     @disabled(in_array($dayData['status'], ['past', 'closed', 'blocked', 'full', 'user_booked']))
                 >
@@ -230,21 +230,21 @@ new class extends Component
     <!-- Legend -->
     <div class="flex flex-wrap gap-4 mt-6 text-sm">
         <div class="flex items-center gap-2">
-            <div class="w-4 h-4 rounded bg-emerald-100 dark:bg-emerald-900/30"></div>
+            <div class="w-4 h-4 rounded bg-[#4A5D23]/70 dark:bg-[#4A5D23]/60"></div>
             <span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.available') }}</span>
         </div>
         <div class="flex items-center gap-2">
-            <div class="w-4 h-4 rounded bg-amber-100 dark:bg-amber-900/30"></div>
+            <div class="w-4 h-4 rounded bg-[#D4A84B]/70 dark:bg-[#D4A84B]/60"></div>
             <span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.partial') }}</span>
         </div>
         @if(count($bookedDates) > 0)
             <div class="flex items-center gap-2">
-                <div class="w-4 h-4 rounded bg-sky-100 dark:bg-sky-900/30"></div>
+                <div class="w-4 h-4 rounded bg-sky-400/50 dark:bg-sky-500/40"></div>
                 <span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.user_booked') }}</span>
             </div>
         @endif
         <div class="flex items-center gap-2">
-            <div class="w-4 h-4 rounded bg-zinc-100 dark:bg-zinc-800"></div>
+            <div class="w-4 h-4 rounded bg-zinc-300/50 dark:bg-zinc-700/50"></div>
             <span class="text-zinc-600 dark:text-zinc-400">{{ __('booking.unavailable') }}</span>
         </div>
     </div>