diff --git a/components/calendar/menu/Menu.vue b/components/calendar/menu/Menu.vue
index 501f7f4..b59c403 100644
--- a/components/calendar/menu/Menu.vue
+++ b/components/calendar/menu/Menu.vue
@@ -5,7 +5,7 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <header class="mt-2 grid gap-3 md:gap-4 border-border border-b-[1px]">
+  <header class="mt-2 grid gap-3 md:gap-4 border-border border-b-[1px] transition-colors">
     <div class="px-4 md:px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center md:gap-2">
         <li>
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index d1b07ca..837fddf 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -81,7 +81,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative p-1 md:p-2"
+    class="tile relative p-1 md:p-2 transition-colors"
     :class="{
       'text-slate-300 dark:text-slate-500': props.faded,
       'text-slate-500 dark:text-slate-300': !props.faded