diff --git a/assets/main.css b/assets/main.css
index 2c7e3dd..7e34d70 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -136,67 +136,125 @@
   @apply text-slate-900 bg-white hover:bg-yellow-200
 }
 
-.event-details-red {
+.dark .event-details-red {
   --base-color: var(--color-red-800);
 }
-.event-details-orange {
+.dark .event-details-orange {
   --base-color: var(--color-orange-800);
 }
-.event-details-amber {
+.dark .event-details-amber {
   --base-color: var(--color-amber-800);
 }
-.event-details-yellow {
+.dark .event-details-yellow {
   --base-color: var(--color-yellow-800);
 }
-.event-details-lime {
+.dark .event-details-lime {
   --base-color: var(--color-lime-800);
 }
-.event-details-green {
+.dark .event-details-green {
   --base-color: var(--color-green-800);
 }
-.event-details-emerald {
+.dark .event-details-emerald {
   --base-color: var(--color-emerald-800);
 }
-.event-details-teal {
+.dark .event-details-teal {
   --base-color: var(--color-teal-800);
 }
-.event-details-cyan {
+.dark .event-details-cyan {
   --base-color: var(--color-cyan-800);
 }
-.event-details-sky {
+.dark .event-details-sky {
   --base-color: var(--color-sky-800);
 }
-.event-details-blue {
+.dark .event-details-blue {
   --base-color: var(--color-blue-800);
 }
-.event-details-indigo {
+.dark .event-details-indigo {
   --base-color: var(--color-indigo-800);
 }
-.event-details-violet {
+.dark .event-details-violet {
   --base-color: var(--color-violet-800);
 }
-.event-details-purple {
+.dark .event-details-purple {
   --base-color: var(--color-purple-800);
 }
-.event-details-fuchsia {
+.dark .event-details-fuchsia {
   --base-color: var(--color-fuchsia-800);
 }
-.event-details-pink {
+.dark .event-details-pink {
   --base-color: var(--color-pink-800);
 }
-.event-details-rose {
+.dark .event-details-rose {
   --base-color: var(--color-rose-800);
 }
-.event-details-black {
+.dark .event-details-black {
   --base-color: var(--color-stone-800);
 }
+.dark .event-details-white {
+  --base-color: var(--color-white);
+}
+
+.event-details-red {
+  --base-color: var(--color-red-300);
+}
+.event-details-orange {
+  --base-color: var(--color-orange-300);
+}
+.event-details-amber {
+  --base-color: var(--color-amber-300);
+}
+.event-details-yellow {
+  --base-color: var(--color-yellow-300);
+}
+.event-details-lime {
+  --base-color: var(--color-lime-300);
+}
+.event-details-green {
+  --base-color: var(--color-green-300);
+}
+.event-details-emerald {
+  --base-color: var(--color-emerald-300);
+}
+.event-details-teal {
+  --base-color: var(--color-teal-300);
+}
+.event-details-cyan {
+  --base-color: var(--color-cyan-300);
+}
+.event-details-sky {
+  --base-color: var(--color-sky-300);
+}
+.event-details-blue {
+  --base-color: var(--color-blue-300);
+}
+.event-details-indigo {
+  --base-color: var(--color-indigo-300);
+}
+.event-details-violet {
+  --base-color: var(--color-violet-300);
+}
+.event-details-purple {
+  --base-color: var(--color-purple-300);
+}
+.event-details-fuchsia {
+  --base-color: var(--color-fuchsia-300);
+}
+.event-details-pink {
+  --base-color: var(--color-pink-300);
+}
+.event-details-rose {
+  --base-color: var(--color-rose-300);
+}
+.event-details-black {
+  --base-color: var(--color-stone-300);
+}
 .event-details-white {
   --base-color: var(--color-white);
 }
 
 .event-details {
-  --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%);
-  --border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%);
+  --bg-color: color-mix(in srgb, var(--base-color), var(--color-white) 80%);
+  --border-color: color-mix(in srgb, var(--base-color), var(--color-white) 50%);
   background-color: var(--bg-color);
   border-color: var(--border-color);
 
@@ -205,6 +263,11 @@
   }
 }
 
+.dark .event-details {
+  --bg-color: color-mix(in srgb, var(--base-color), var(--color-slate-950) 80%);
+  --border-color: color-mix(in srgb, var(--base-color), var(--color-slate-800) 50%);
+}
+
 .fade-enter-active,
 .fade-leave-active {
   transition: all .5s ease;
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 403835e..f92f0eb 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -62,7 +62,7 @@ function deployDeleteModal() {
 
 <template>
   <UiPopoverContent
-    class=" w-96 bg-slate-900 border-slate-800"
+    class=" w-96 "
     :align="'center'"
     :align-offset="50"
     :side="'left'"
@@ -96,15 +96,15 @@ function deployDeleteModal() {
 
       <div class="mb-1 space-y-1">
         <template v-if="event.location">
-          <p class="text-sm italic opacity-75 flex items-center gap-1">
+          <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
             <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
           </p>
         </template>
-        <p class="text-sm italic opacity-75 flex items-center gap-1">
+        <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
           <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
         </p>
         <template v-if="dateDuration">
-          <p class="text-sm italic opacity-75 flex items-center gap-1">
+          <p class="text-sm italic dark:opacity-75 flex items-center gap-1">
             <PhHourglassMedium size="16" weight="fill" /> Pendant {{ dateDuration }}
           </p>
         </template>
@@ -113,13 +113,13 @@ function deployDeleteModal() {
       <template v-if="event.category || event.secondaryCategories">
         <ul class="flex gap-1">
           <li v-if="event.category">
-            <UiBadge class="mix-blend-luminosity font-bold bg-gray-600 lowercase" variant="secondary">
+            <UiBadge class="mix-blend-luminosity font-bold bg-gray-400 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
               {{ event.category?.name }}
             </UiBadge>
           </li>
 
           <li v-for="cat in event.secondaryCategories" :key="cat.id">
-            <UiBadge class="mix-blend-luminosity bg-gray-600 lowercase" variant="secondary">
+            <UiBadge class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 lowercase" variant="secondary">
               {{ cat.name }}
             </UiBadge>
           </li>
@@ -129,7 +129,7 @@ function deployDeleteModal() {
       <template v-if="event.description">
         <hr class="border-slate-500 mt-2" >
 
-        <div class="mt-2 text-sm text-slate-300">
+        <div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
           {{ event.description }}
         </div>
       </template>
@@ -138,7 +138,7 @@ function deployDeleteModal() {
     <menu class="absolute top-4 right-4" :class="cn({ 'top-6': event.hidden })">
       <UiPopover v-model:open="commandMenuOpened">
         <UiPopoverTrigger as-child>
-          <UiButton size="icon" variant="ghost">
+          <UiButton size="icon" variant="outline" class="mix-blend-luminosity bg-gray-300 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600">
             <PhDotsThreeOutlineVertical size="20" weight="fill" />
           </UiButton>
         </UiPopoverTrigger>
@@ -156,7 +156,7 @@ function deployDeleteModal() {
     </menu>
 
     <nav v-if="event.startDate && event.endDate" class="mt-2 flex gap-2">
-      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child>
+      <UiBadge class="hover:opacity-100 hover:bg-indigo-400 dark:hover:bg-slate-300" as-child>
         <button
           class="flex gap-1"
           title="Naviguer au début"
@@ -165,7 +165,7 @@ function deployDeleteModal() {
           <PhHourglassHigh size="16" weight="fill" /> Début
         </button>
       </UiBadge>
-      <UiBadge class="hover:opacity-100 hover:bg-slate-300" as-child title="Naviguer à la fin">
+      <UiBadge class="hover:opacity-100 hover:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
         <button
           class="flex gap-1"
           title="Naviguer à la fin"
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 41153a0..8bd3f67 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -88,7 +88,7 @@ function handleCancel() {
       :collision-padding="60"
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 3112401..22fb55c 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -63,7 +63,7 @@ function handleCancel(): void {
     <UiAlertDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="min-w-96 bg-slate-900 border-slate-800"
+      class="min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
@@ -85,7 +85,7 @@ function handleCancel(): void {
         </div>
 
         <footer class="flex gap-2 justify-between">
-          <UiButton type="button" size="sm" variant="ghost" @click="() => isDeleteEventModalOpen = false">
+          <UiButton type="button" size="sm" variant="outline" @click="() => isDeleteEventModalOpen = false">
             Retour
           </UiButton>
 
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 7dc68c9..732e9e9 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
-import { VisuallyHidden } from "radix-vue"
 
 const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
 const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
@@ -64,19 +63,19 @@ function handleCancel() {
     <UiDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      class="pl-3 min-w-96 border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
       @pointer-down-outside="(e) => e.preventDefault()"
     >
-      <VisuallyHidden>
+      <header class="pl-8 grid gap-y-2">
         <UiDialogTitle> Modifier l'évènement</UiDialogTitle>
 
         <UiDialogDescription>
           Mettre à jour les données de l'évènement
         </UiDialogDescription>
-      </VisuallyHidden>
+      </header>
 
       <form @submit.prevent="handleAction">
         <div class="grid grid-cols-2 gap-y-3">
diff --git a/components/calendar/input/RPGDate.vue b/components/calendar/input/RPGDate.vue
index 3cd9ad2..1b82c93 100644
--- a/components/calendar/input/RPGDate.vue
+++ b/components/calendar/input/RPGDate.vue
@@ -117,7 +117,7 @@ function handleValueReset() {
       v-if="model"
       align="start"
       side="bottom"
-      class="bg-slate-900 border-slate-800"
+      class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
     >
       <div class="grid grid-cols-2 items-center gap-x-2 gap-y-3">
         <UiSelect @update:model-value="handleMonthChange">
@@ -151,8 +151,11 @@ function handleValueReset() {
             <button
               v-for="day in monthData.days"
               :key="`popover-day-grid-${id}-${day}`"
-              class="aspect-square rounded-full text-[.8em] transition-colors hover:bg-slate-700"
-              :class="{'bg-blue-500 hover:bg-blue-700': day === model.day}"
+              class="aspect-square rounded-full text-[.8em] transition-colors"
+              :class="{
+                'hover:bg-indigo-200 dark:hover:bg-indigo-700': day !== model.day,
+                'bg-indigo-500 hover:bg-indigo-700 text-white': day === model.day
+              }"
               @click="setModelDay(day)"
             >
               {{ day }}
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 15d51c9..1973543 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -88,7 +88,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
           class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
           :class="{
             'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
-            'text-white bg-indigo-500 dark:bg-indigo-400': isSelectedDate
+            'text-white bg-indigo-500': isSelectedDate
           }"
         >
           {{ date.day }}