diff --git a/app.vue b/app.vue
index f3eb9f3..4d46a85 100644
--- a/app.vue
+++ b/app.vue
@@ -38,12 +38,20 @@ const useIdFunction = () => useId()
 
     <NuxtLayout>
       <ConfigProvider :use-id="useIdFunction">
-        <div class="h-full grid grid-cols-[auto_1fr]">
+        <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
           <Sidebar />
 
-          <NuxtPage/>
+          <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
+            <NuxtPage />
+          </div>
         </div>
       </ConfigProvider>
     </NuxtLayout>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.wrapper > * {
+  height: 100%;
+}
+</style>
diff --git a/assets/main.css b/assets/main.css
index 381e89a..d457ff6 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -19,8 +19,8 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 245 58% 51%;
+    --primary-foreground: 0 0% 100%;
 
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -37,28 +37,28 @@
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 180 0 4.9%;
     --foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
+    --muted: 244 47% 20%;
     --muted-foreground: 215 20.2% 65.1%;
 
-    --popover: 222.2 84% 4.9%;
+    --popover: 180 0 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
+    --card: 180 0 4.9%;
     --card-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
+    --border: 217 0 10%;
+    --input: 244 47% 20%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 245 58% 51%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 217.2 32.6% 17.5%;
+    --secondary: 244 47% 20%;
     --secondary-foreground: 210 40% 98%;
 
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 244 47% 20%;
     --accent-foreground: 210 40% 98%;
 
     --destructive: 0 62.8% 30.6%;
@@ -133,70 +133,128 @@
   @apply text-white bg-stone-500 hover:bg-stone-700
 }
 .event-white {
-  @apply text-slate-900 bg-white hover:bg-yellow-200
+  @apply text-slate-900 bg-white hover:bg-yellow-200 border-[1px] border-slate-300
+}
+
+.dark .event-details-red {
+  --base-color: var(--color-red-800);
+}
+.dark .event-details-orange {
+  --base-color: var(--color-orange-800);
+}
+.dark .event-details-amber {
+  --base-color: var(--color-amber-800);
+}
+.dark .event-details-yellow {
+  --base-color: var(--color-yellow-800);
+}
+.dark .event-details-lime {
+  --base-color: var(--color-lime-800);
+}
+.dark .event-details-green {
+  --base-color: var(--color-green-800);
+}
+.dark .event-details-emerald {
+  --base-color: var(--color-emerald-800);
+}
+.dark .event-details-teal {
+  --base-color: var(--color-teal-800);
+}
+.dark .event-details-cyan {
+  --base-color: var(--color-cyan-800);
+}
+.dark .event-details-sky {
+  --base-color: var(--color-sky-800);
+}
+.dark .event-details-blue {
+  --base-color: var(--color-blue-800);
+}
+.dark .event-details-indigo {
+  --base-color: var(--color-indigo-800);
+}
+.dark .event-details-violet {
+  --base-color: var(--color-violet-800);
+}
+.dark .event-details-purple {
+  --base-color: var(--color-purple-800);
+}
+.dark .event-details-fuchsia {
+  --base-color: var(--color-fuchsia-800);
+}
+.dark .event-details-pink {
+  --base-color: var(--color-pink-800);
+}
+.dark .event-details-rose {
+  --base-color: var(--color-rose-800);
+}
+.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-800);
+  --base-color: var(--color-red-300);
 }
 .event-details-orange {
-  --base-color: var(--color-orange-800);
+  --base-color: var(--color-orange-300);
 }
 .event-details-amber {
-  --base-color: var(--color-amber-800);
+  --base-color: var(--color-amber-300);
 }
 .event-details-yellow {
-  --base-color: var(--color-yellow-800);
+  --base-color: var(--color-yellow-300);
 }
 .event-details-lime {
-  --base-color: var(--color-lime-800);
+  --base-color: var(--color-lime-300);
 }
 .event-details-green {
-  --base-color: var(--color-green-800);
+  --base-color: var(--color-green-300);
 }
 .event-details-emerald {
-  --base-color: var(--color-emerald-800);
+  --base-color: var(--color-emerald-300);
 }
 .event-details-teal {
-  --base-color: var(--color-teal-800);
+  --base-color: var(--color-teal-300);
 }
 .event-details-cyan {
-  --base-color: var(--color-cyan-800);
+  --base-color: var(--color-cyan-300);
 }
 .event-details-sky {
-  --base-color: var(--color-sky-800);
+  --base-color: var(--color-sky-300);
 }
 .event-details-blue {
-  --base-color: var(--color-blue-800);
+  --base-color: var(--color-blue-300);
 }
 .event-details-indigo {
-  --base-color: var(--color-indigo-800);
+  --base-color: var(--color-indigo-300);
 }
 .event-details-violet {
-  --base-color: var(--color-violet-800);
+  --base-color: var(--color-violet-300);
 }
 .event-details-purple {
-  --base-color: var(--color-purple-800);
+  --base-color: var(--color-purple-300);
 }
 .event-details-fuchsia {
-  --base-color: var(--color-fuchsia-800);
+  --base-color: var(--color-fuchsia-300);
 }
 .event-details-pink {
-  --base-color: var(--color-pink-800);
+  --base-color: var(--color-pink-300);
 }
 .event-details-rose {
-  --base-color: var(--color-rose-800);
+  --base-color: var(--color-rose-300);
 }
 .event-details-black {
-  --base-color: var(--color-stone-800);
+  --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..c09d045 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: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:bg-indigo-400 dark:hover:bg-slate-300" as-child title="Naviguer à la fin">
         <button
           class="flex gap-1"
           title="Naviguer à la fin"
@@ -179,7 +179,7 @@ function deployDeleteModal() {
     <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
       <UiTooltip>
         <UiTooltipTrigger as-child>
-          <UiBadge class="absolute -top-2 right-2 flex gap-1 hover:bg-slate-300 hover:opacity-100">
+          <UiBadge class="absolute -top-2 right-2 flex gap-1">
             <PhEye size="16" weight="fill" /> Évènement privé
           </UiBadge>
         </UiTooltipTrigger>
diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index 008082c..a606a76 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -7,7 +7,7 @@ const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
-  <header class="pt-4 border-slate-700 border-b-[1px]">
+  <header class="pt-4 border-slate-400 dark:border-slate-700 border-b-[1px]">
     <div class="px-6 flex justify-between">
       <menu class="flex items-center gap-2">
         <li class="flex items-center">
diff --git a/components/calendar/CalendarMenuSubnav.vue b/components/calendar/CalendarMenuSubnav.vue
index c7f0199..37137f6 100644
--- a/components/calendar/CalendarMenuSubnav.vue
+++ b/components/calendar/CalendarMenuSubnav.vue
@@ -62,7 +62,7 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
 
 <template>
   <div class="flex gap-2">
-    <div class="grid items-end w-40 px-4 py-2 border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm">
+    <div class="grid items-end w-40 px-4 py-2 border-slate-200 bg-white dark:bg-black dark:border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm text-sm transition-colors">
       <ClientOnly>
         <span>{{ currentDate.currentDateTitle }}</span>
 
@@ -73,14 +73,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
         </template>
       </ClientOnly>
     </div>
-    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+    <div>
       <UiTooltipProvider :delay-duration="250">
         <UiTooltip>
           <UiTooltipTrigger as-child>
             <UiButton
-              variant="ghost"
+              variant="outline"
               size="icon"
-              class="rounded-t-sm rounded-b-none"
+              class="rounded-t-sm rounded-b-none border-b-0"
               @click="handleGotoPreviousEventPage('prev')"
             >
               <PhArrowLineLeft size="22" />
@@ -92,14 +92,14 @@ function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
         </UiTooltip>
       </UiTooltipProvider>
     </div>
-    <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
+    <div>
       <UiTooltipProvider :delay-duration="250">
         <UiTooltip>
           <UiTooltipTrigger as-child>
             <UiButton
-              variant="ghost"
+              variant="outline"
               size="icon"
-              class="rounded-t-sm rounded-b-none"
+              class="rounded-t-sm rounded-b-none border-b-0"
               @click="handleGotoPreviousEventPage('next')"
             >
               <PhArrowLineRight size="22" />
diff --git a/components/calendar/dialog/Delete.vue b/components/calendar/dialog/Delete.vue
index f1accfe..5d396d1 100644
--- a/components/calendar/dialog/Delete.vue
+++ b/components/calendar/dialog/Delete.vue
@@ -47,7 +47,7 @@ function handleClosing() {
     <UiAlertDialogContent
       :disable-outside-pointer-events="true"
       :trap-focus="true"
-      class="min-w-96 bg-slate-900 border-slate-800"
+      class="min-w-96"
       @escape-key-down="handleClosing"
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
@@ -69,7 +69,7 @@ function handleClosing() {
         </div>
 
         <footer class="flex gap-2 justify-between">
-          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+          <UiButton type="button" size="sm" variant="outline" @click="handleClosing">
             Retour
           </UiButton>
 
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/MonthList.vue b/components/calendar/input/MonthList.vue
index e841780..4b3d62e 100644
--- a/components/calendar/input/MonthList.vue
+++ b/components/calendar/input/MonthList.vue
@@ -78,7 +78,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
       </UiButton>
     </div>
     <div class="md:col-span-full">
-      <div class="border-[1px] dark:border-slate-800 p-4 rounded-sm" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''">
+      <div class="border-[1px] dark:border-slate-800 p-4 rounded-sm max-h-80 overflow-y-auto" :class="model.length ? 'md:grid md:grid-cols-12 md:gap-4 md:items-center' : ''">
           <div v-if="model.length" class="hidden md:block col-span-1">
             <ul class="grid gap-y-4 justify-center">
               <li v-for="(m, i) in model" :key="`num-${m.name}`">
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/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index 10bc020..9c7e6cb 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -61,7 +61,7 @@ const dateDuration: string | null = props.event.endDate
         <UiTooltipProvider :delay-duration="250">
           <UiTooltip>
             <UiTooltipTrigger as-child>
-              <UiBadge class="flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100">
+              <UiBadge class="flex gap-1">
                 <PhEye size="16" weight="fill" /> Évènement privé
               </UiBadge>
             </UiTooltipTrigger>
@@ -92,13 +92,13 @@ const dateDuration: string | null = props.event.endDate
     <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
       <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-300 hover:bg-gray-200 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>
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 4c3d5d8..1973543 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -73,10 +73,10 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative text-xs p-2 border-slate-700"
+    class="tile relative text-xs p-2 border-slate-400 dark:border-slate-700 dark:bg-black transition-colors"
     :class="{
-      'text-slate-500': props.faded,
-      'text-slate-300': !props.faded
+      'text-slate-300 dark:text-slate-500': props.faded,
+      'text-slate-500 dark:text-slate-300': !props.faded
     }"
   >
     <button
@@ -85,10 +85,10 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     >
       <ClientOnly>
         <span
-          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-slate-800"
+          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="{
-            'bg-slate-800': isDefaultDate && !isSelectedDate,
-            'text-white bg-blue-500': isSelectedDate
+            'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
+            'text-white bg-indigo-500': isSelectedDate
           }"
         >
           {{ date.day }}
diff --git a/components/calendar/state/yearly/DayTile.vue b/components/calendar/state/yearly/DayTile.vue
index 1d37f5a..ed1e9e6 100644
--- a/components/calendar/state/yearly/DayTile.vue
+++ b/components/calendar/state/yearly/DayTile.vue
@@ -40,14 +40,14 @@ const hasAtLeastOneEvent = computed<boolean>(() => {
   <button
     class="relative grid place-items-center aspect-square rounded-full border-2 border-transparent transition-colors after:content-[''] after:absolute after:top-1 after:right-1 after:w-[.3rem] after:h-[.3rem] after:rounded-full after:transition-colors"
     :class="{
-      'hover:bg-slate-800 hover:border-slate-800': !isDefaultDate && !isSelectedDate,
-      'bg-slate-800 hover:bg-slate-600 hover:border-slate-600': isDefaultDate && !isSelectedDate,
-      'text-white bg-blue-500 hover:bg-blue-600 hover:border-blue-600': isSelectedDate,
+      'text-slate-500 hover:border-indigo-300 hover:text-slate-900': !isDefaultDate && !isSelectedDate,
+      'font-semibold text-white bg-slate-600 dark:bg-slate-800 hover:border-indigo-400': isDefaultDate && !isSelectedDate,
+      'font-semibold text-white bg-indigo-500 hover:bg-indigo-600 hover:border-indigo-500': isSelectedDate,
       'after:bg-green-600': hasAtLeastOneEvent,
       'after:bg-slate-950': hasAtLeastOneEvent && isSelectedDate
     }"
     @click="selectDate(tileDate)"
   >
-    <span ref="tileRef" class="text-slate-300 text-[.85em]">{{ dayNumber }}</span>
+    <span ref="tileRef" class="text-[.85em]">{{ dayNumber }}</span>
   </button>
 </template>
diff --git a/components/calendar/state/yearly/MonthTile.vue b/components/calendar/state/yearly/MonthTile.vue
index 03d82f9..49ce86e 100644
--- a/components/calendar/state/yearly/MonthTile.vue
+++ b/components/calendar/state/yearly/MonthTile.vue
@@ -11,7 +11,7 @@ defineProps<{
     <div class="font-medium">
       {{ month.name }}
     </div>
-    <div class="grid grid-cols-7">
+    <div class="grid grid-cols-7 gap-1">
       <CalendarStateYearlyDayTile
         v-for="day in month.days"
         :key="day"
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index 8b62724..5fdca98 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue"
+import { PhGlobeHemisphereWest, PhList } from "@phosphor-icons/vue"
 import type { SidebarMenuActionType } from "./SidebarProps";
 
 const { revealAdvancedSearch } = useCalendar()
@@ -15,7 +15,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
 </script>
 
 <template>
-  <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid grid-rows-[1fr_auto] justify-center">
+  <nav class="w-16 py-6 border-r-[1px] bg-indigo-700 dark:bg-black text-white border-r-indigo-700 dark:border-r-indigo-950 grid grid-rows-[1fr_auto] justify-center transition-colors">
     <menu class="flex flex-col gap-4">
       <li class="mb-12">
         <UiButton variant="ghost" size="icon" class="rounded-full" @click="console.log">
@@ -23,43 +23,22 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <template v-if="!user">
-        <li>
-          <UiTooltipProvider :delay-duration="50">
-            <UiTooltip>
-              <UiTooltipTrigger as-child>
-                <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                  <RouterLink to="/">
-                    <PhHouse size="24" weight="fill" />
-                  </RouterLink>
-                </UiButton>
-              </UiTooltipTrigger>
-              <UiTooltipContent :side="'right'" :side-offset="6">
-                <p>Accueil</p>
-              </UiTooltipContent>
-            </UiTooltip>
-          </UiTooltipProvider>
-        </li>
-      </template>
-
-      <template v-else>
-        <li>
-          <UiTooltipProvider :delay-duration="50">
-            <UiTooltip>
-              <UiTooltipTrigger as-child>
-                <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
-                  <RouterLink to="/my">
-                    <PhGlobeHemisphereWest size="24" weight="fill" />
-                  </RouterLink>
-                </UiButton>
-              </UiTooltipTrigger>
-              <UiTooltipContent :side="'right'" :side-offset="6">
-                <p>Mondes</p>
-              </UiTooltipContent>
-            </UiTooltip>
-          </UiTooltipProvider>
-        </li>
-      </template>
+      <li v-if="user">
+        <UiTooltipProvider :delay-duration="50">
+          <UiTooltip>
+            <UiTooltipTrigger as-child>
+              <UiButton variant="ghost" size="icon" class="rounded-full" as-child>
+                <RouterLink to="/my">
+                  <PhGlobeHemisphereWest size="24" weight="fill" />
+                </RouterLink>
+              </UiButton>
+            </UiTooltipTrigger>
+            <UiTooltipContent :side="'right'" :side-offset="6">
+              <p>Mondes</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </li>
 
       <li v-for="(item, i) in currentMenu" :key="i">
         <UiTooltipProvider :delay-duration="50">
diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index e3f2062..a6572d0 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed } from "vue"
 
-import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
+import { PhCheckCircle, PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
+import { cn } from "~/lib/utils";
 
 const router = useRouter()
-const { preference } = useColorMode()
 
 const { auth } = useSupabaseClient()
 const user = useSupabaseUser()
@@ -83,24 +83,39 @@ function pushRoute(to: AvailableRoutes) {
           <UiDropdownMenuSeparator />
 
           <UiDropdownMenuSub>
-            <UiDropdownMenuSubTrigger class="p-0">
-              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+            <UiDropdownMenuSubTrigger class="p-0 rounded-none">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center pointer-events-none">
                 <PhPalette size="20" weight="fill" />
                 <span>Apparence</span>
               </UiDropdownMenuItem>
             </UiDropdownMenuSubTrigger>
             <UiDropdownMenuPortal>
               <UiDropdownMenuSubContent>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'dark'">
-                  <PhMoon size="20" />
+                <UiDropdownMenuItem
+                  class="flex gap-[.5ch] items-center rounded-none"
+                  :class="cn({ 'text-emerald-600': $colorMode.preference === 'dark' })"
+                  @select.prevent="$colorMode.preference = 'dark'"
+                >
+                  <PhCheckCircle v-if="$colorMode.preference === 'dark'" size="20" weight="fill" />
+                  <PhMoon v-else size="20" />
                   <span>Sombre</span>
                 </UiDropdownMenuItem>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'">
-                  <PhSun size="20" />
+                <UiDropdownMenuItem
+                  class="flex gap-[.5ch] items-center rounded-none"
+                  :class="cn({ 'text-emerald-600': $colorMode.preference === 'light' })"
+                  @select.prevent="$colorMode.preference = 'light'"
+                >
+                  <PhCheckCircle v-if="$colorMode.preference === 'light'" size="20" weight="fill" />
+                  <PhSun v-else size="20" />
                   <span>Clair</span>
                 </UiDropdownMenuItem>
-                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'">
-                  <PhLaptop size="20" />
+                <UiDropdownMenuItem
+                  class="flex gap-[.5ch] items-center rounded-none"
+                  :class="cn({ 'text-emerald-600': $colorMode.preference === 'system' })"
+                  @select.prevent="$colorMode.preference = 'system'"
+                >
+                  <PhCheckCircle v-if="$colorMode.preference === 'system'" size="20" weight="fill" />
+                  <PhLaptop v-else size="20" />
                   <span>Système</span>
                 </UiDropdownMenuItem>
               </UiDropdownMenuSubContent>
@@ -108,8 +123,8 @@ function pushRoute(to: AvailableRoutes) {
           </UiDropdownMenuSub>
 
           <UiDropdownMenuSub>
-            <UiDropdownMenuSubTrigger class="p-0">
-              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+            <UiDropdownMenuSubTrigger class="p-0 rounded-none">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center pointer-events-none">
                 <PhTranslate size="20" />
                 <span>Langage</span>
               </UiDropdownMenuItem>
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
index e782ef6..e92f470 100644
--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@@ -3,13 +3,13 @@ import { type VariantProps, cva } from "class-variance-authority"
 export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-30",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 79db25e..06d6424 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -85,7 +85,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <main class="p-8">
+    <main class="p-8 after:fill-red-400">
     <Heading>{{ user?.user_metadata.full_name }}</Heading>
 
     <section v-if="worlds" class="mt-4">
@@ -133,3 +133,29 @@ onUnmounted(() => {
     </section>
   </main>
 </template>
+
+<style lang="scss" scoped>
+main {
+  position: relative;
+  isolation: isolate;
+  overflow: clip;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    right: 2.4rem;
+    bottom: -5%;
+    height: 75%;
+    width: 100%;
+    background-image: url('/images/galaxy.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position-y: bottom;
+    background-position-x: right;
+    z-index: -1;
+    mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
+    opacity: .3;
+  }
+}
+</style>
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 9860e36..165a5fb 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -149,8 +149,7 @@ function hideDeleteModal() {
           <ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
             <li v-for="calendar in world.calendars" :key="calendar.id">
               <UiCard
-                v-if="calendar"
-                class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
+                class="w-full transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
                 :link="`/my/calendars/${calendar.id}`"
               >
                 <UiCardHeader>
@@ -160,7 +159,7 @@ function hideDeleteModal() {
                 <UiCardContent>
                   <p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
 
-                  <UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:bg-slate-600" @click="deployDeleteModal(calendar)">
+                  <UiButton size="icon" variant="ghost" class="absolute top-2 right-2 z-20 hover:text-white hover:bg-rose-400 dark:hover:bg-rose-700" @click="deployDeleteModal(calendar)">
                     <PhTrash size="16" />
                   </UiButton>
                 </UiCardContent>
@@ -180,3 +179,29 @@ function hideDeleteModal() {
     <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
   </main>
 </template>
+
+<style lang="scss" scoped>
+main {
+  position: relative;
+  isolation: isolate;
+  overflow: clip;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    right: 2.4rem;
+    bottom: -5%;
+    height: 75%;
+    width: 100%;
+    background-image: url('/images/planet.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position-y: bottom;
+    background-position-x: right;
+    z-index: -1;
+    mask-image: radial-gradient(ellipse 100% 100% at 120% 80%, black, transparent);
+    opacity: .3;
+  }
+}
+</style>
diff --git a/public/images/galaxy.svg b/public/images/galaxy.svg
new file mode 100644
index 0000000..9f7e863
--- /dev/null
+++ b/public/images/galaxy.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#6366f1" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 611.999 611.999" xml:space="preserve">
+    <g>
+        <path d="M611.502,203.367c-3.889-53.216-30.921-100.838-93.276-125.006c-69.361-26.884-151.96-13.033-216.77,16.813
+		c-67.784,31.216-151.313,93.935-171.682,171.605c-7.962,30.357-5.303,63.94,10.093,91.288
+		c19.789,35.152,59.002,56.863,99.094,61.324c55.248,6.147,112.773-16.493,155.435-50.741c24.317-19.521,46.5-44.992,58.997-73.774
+		c11.212-25.821,13.864-56.419,1.925-81.911c-16.243-34.679-54.683-49.835-91.121-44.132c-4.787,0.735-9.337,1.776-13.657,3.016
+		c-4.322,1.234-8.419,2.662-12.295,4.256c-7.765,3.148-14.653,6.919-20.773,10.925c-6.109,4.03-11.447,8.348-16.022,12.747
+		c-1.037,1.043-2.056,2.067-3.054,3.071c-1.08,1.074-2.021,2.094-2.964,3.1c-1.877,2.012-3.588,3.995-5.207,5.882
+		c-3.208,3.799-5.955,7.307-8.307,10.499c-4.731,6.35-8.047,11.323-10.284,14.671c-1.1,1.684-1.934,2.961-2.494,3.817
+		c-0.55,0.863-0.829,1.301-0.829,1.301c-0.92,1.449-0.97,3.367,0.036,4.894c1.366,2.076,4.157,2.652,6.233,1.285
+		c0,0,0.433-0.285,1.288-0.846c0.846-0.567,2.108-1.413,3.772-2.529c3.307-2.238,8.187-5.589,14.48-9.753
+		c6.333-4.129,14.012-9.048,23.248-13.695c2.175-1.069,4.431-2.096,6.846-3.028c2.399-0.946,4.893-1.86,7.522-2.638
+		c5.229-1.598,10.883-2.863,16.803-3.589c2.961-0.352,5.978-0.597,9.027-0.671c3.05-0.067,6.128,0.03,9.183,0.299
+		c10.759,1.003,24.149,4.372,30.659,13.714c4.245,6.092,4.815,14.123,3.391,21.409c-2.471,12.644-10.28,23.585-18.883,33.174
+		c-30.278,33.744-74.119,56.946-119.526,60.718c-37.814,2.947-73.075-14.422-78.121-55.732
+		c-3.607-29.523,10.253-58.809,29.349-81.612c26.954-32.186,60.518-59.114,98.754-76.011c14.09-6.227,28.7-11.46,43.667-15.311
+		c39.803-10.321,86.856-13.345,125.381,3.353c36.924,16.004,60.458,52.144,59.714,92.483c-0.223,11.808-2.412,23.851-6.114,35.878
+		c-3.66,12.037-8.996,24.017-15.499,35.56c-6.539,11.542-14.238,22.664-22.764,33.124C454.222,364.819,387.62,404.605,326.223,430.7
+		c-74.109,31.498-215.664,68.734-268.588-17.843c-27.588-45.131-17.468-102.863-2.502-150.461c0.541-1.722,0.006-3.684-1.497-4.867
+		c-1.942-1.528-4.754-1.193-6.282,0.748c0,0-1.277,1.622-3.752,4.764c-0.624,0.768-1.287,1.718-2.039,2.741
+		c-0.746,1.027-1.563,2.153-2.451,3.375C17.106,299.452,2.396,336.089,0.264,373.622c-1.962,34.546,6.992,69.97,26.952,98.236
+		c23.939,33.9,62.223,55.79,102.375,66.286c63.644,16.637,134.014,11.022,196.48-7.885c14.716-4.454,29.379-9.645,43.893-15.61
+		c14.505-5.984,28.826-12.8,42.955-20.315c51.202-27.233,99.882-64.099,136.409-109.452
+		C588.79,335.885,616.063,265.779,611.502,203.367z" />
+    </g>
+</svg>
diff --git a/public/images/planet.svg b/public/images/planet.svg
new file mode 100644
index 0000000..f632d3d
--- /dev/null
+++ b/public/images/planet.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none" /><path fill="#6366f1" d="M245.11,60.68c-7.65-13.19-27.85-16.16-58.5-8.66A96,96,0,0,0,32.81,140.3C5.09,169,5.49,186,10.9,195.32,16,204.16,26.64,208,40.64,208a124.11,124.11,0,0,0,28.79-4,96,96,0,0,0,153.78-88.25c12.51-13,20.83-25.35,23.66-35.92C248.83,72.51,248.24,66.07,245.11,60.68Zm-13.69,15c-6.11,22.78-48.65,57.31-87.52,79.64-67.81,39-113.62,41.52-119.16,32-1.46-2.51-.65-7.24,2.22-13a80.06,80.06,0,0,1,10.28-15.05,95.53,95.53,0,0,0,6.23,14.18,4,4,0,0,0,4,2.12,122.14,122.14,0,0,0,16.95-3.32c21.23-5.55,46.63-16.48,71.52-30.78s47-30.66,62.45-46.15A122.74,122.74,0,0,0,209.7,82.45a4,4,0,0,0,.17-4.52,96.26,96.26,0,0,0-9.1-12.46c14.21-2.35,27.37-2.17,30.5,3.24C232.19,70.28,232.24,72.63,231.42,75.69Z"/></svg>
diff --git a/tailwind.config.js b/tailwind.config.js
index 9567927..230188b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -58,6 +58,10 @@ module.exports = {
           foreground: "hsl(var(--card-foreground))",
         },
       },
+      boxShadow: {
+        "body-dark": "hsla(250, 50%, 10%, 0.75) 0 0 32px 2px inset",
+        "body-light": "hsl(250, 60%, 85%) 0 0 18px 3px inset",
+      },
       borderRadius: {
       	xl: "calc(var(--radius) + 4px)",
         lg: "var(--radius)",