diff --git a/app.vue b/app.vue
index 3dfef03..f3eb9f3 100644
--- a/app.vue
+++ b/app.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ConfigProvider } from 'radix-vue'
+import { ConfigProvider } from "radix-vue"
 
 useHead({
   titleTemplate: (titleChunk) => {
-    return titleChunk ? `${titleChunk} — TTTools` : 'TTTools';
+    return titleChunk ? `${titleChunk} — TTTools` : "TTTools";
   },
   htmlAttrs: {
-    lang: 'fr'
+    lang: "fr"
   },
   meta: [
     { name: "charset", content: "UTF-8" },
@@ -18,14 +18,14 @@ useHead({
     { name: "theme-color", content: "00aba9" },
     { name: "og:type", content: "tabletop-tools" },
     { name: "og:url", content: "ttt.alexcreates.fr" },
-    { name: 'robots', content: 'noindex, nofollow'}
+    { name: "robots", content: "noindex, nofollow"}
   ],
   link: [
-    { rel: 'apple-touch-icon', sizes: "76x76", href: '/apple-touch-icon.png' },
-    { rel: 'icon', sizes: "32x32", type: 'image/png', href: '/favicon-32x32.png' },
-    { rel: 'icon', sizes: "16x16", type: 'image/png', href: '/favicon-16x16.png' },
-    { rel: 'manifest', href: '/site.webmanifest' },
-    { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#6595b4' },
+    { rel: "apple-touch-icon", sizes: "76x76", href: "/apple-touch-icon.png" },
+    { rel: "icon", sizes: "32x32", type: "image/png", href: "/favicon-32x32.png" },
+    { rel: "icon", sizes: "16x16", type: "image/png", href: "/favicon-16x16.png" },
+    { rel: "manifest", href: "/site.webmanifest" },
+    { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: "#6595b4" },
   ]
 })
 
diff --git a/components/calendar/Calendar.vue b/components/calendar/Calendar.vue
index cf5c9b8..2dd6b7f 100644
--- a/components/calendar/Calendar.vue
+++ b/components/calendar/Calendar.vue
@@ -1,142 +1,79 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { computed, type Component, type ComputedRef } from 'vue'
+import { useCalendar } from "@/stores/CalendarStore"
+import { computed, type Component, type ComputedRef } from "vue"
 
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
-import MonthlyLayout from './state/monthly/Layout.vue'
-import CenturyLayout from './state/centennially/Layout.vue'
-import DecadeLayout from './state/decennially/Layout.vue'
-import YearLayout from './state/yearly/Layout.vue'
+// import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import MonthlyLayout from "./state/monthly/Layout.vue"
+import CenturyLayout from "./state/centennially/Layout.vue"
+import DecadeLayout from "./state/decennially/Layout.vue"
+import YearLayout from "./state/yearly/Layout.vue"
 
-const route = useRoute()
-const worldId = route.params.id
+import type { Calendar } from "~/models/CalendarConfig"
+import type { Category } from "~/models/Category"
 
-const { setCalendarId, setMonths, setDefaultDate, currentConfig, selectedDate, jumpToDate } = useCalendar()
-const { setEvents, setCategories } = useCalendarEvents()
-const { setCharacters } = useCharacters()
+const props = defineProps<{
+  calendarData: Calendar,
+  categories: Category[]
+}>()
 
-const { data: calendar, pending: calPending, refresh: calRefresh } = await useLazyFetch(`/api/calendars/query?world_id=${worldId}`)
-const { data: characters, pending: charPending, refresh: charRefresh } = await useLazyFetch(`/api/characters/query?world_id=${worldId}`)
-const { data: categories, pending: categoryPending, refresh: categoryRefresh } = await useLazyFetch(`/api/calendars/categories/query`)
+const { setActiveCalendar } = useCalendar()
+setActiveCalendar(props.calendarData, props.categories)
 
-if (!calendar.value) {
-  await calRefresh()
-} else {
-  if (calendar.value?.data?.id) {
-    setCalendarId(calendar.value?.data?.id)
-  }
-  if (calendar.value?.data?.months) {
-    setMonths(calendar.value?.data?.months)
-  }
-  if (calendar.value?.data?.months) {
-    setMonths(calendar.value?.data?.months)
-  }
-  if (calendar.value?.data?.today) {
-    setDefaultDate(calendar.value?.data?.today)
-  }
-  if (calendar.value?.data?.events) {
-    setEvents(calendar.value?.data?.events)
-  }
-}
+const { currentConfig, jumpToDate, selectedDate } = useCalendar()
 
-if (!categories.value) {
-  await categoryRefresh()
-} else {
-  if (categories.value?.data) {
-    setCategories(categories.value?.data)
-  }
-}
-
-if (!characters.value) {
-  await charRefresh()
-} else {
-  if (characters.value?.data) {
-    setCharacters(characters.value?.data)
-  }
-}
-
-watch(calPending, (newStatus) => {
-  if (!newStatus) {
-    if (calendar.value?.data?.id) {
-      setCalendarId(calendar.value?.data?.id)
-    }
-    if (calendar.value?.data?.months) {
-      setMonths(calendar.value?.data?.months)
-    }
-    if (calendar.value?.data?.today) {
-      setDefaultDate(calendar.value?.data?.today)
-    }
-    if (calendar.value?.data?.events) {
-      setEvents(calendar.value?.data?.events)
-    }
-  }
-})
-watch(categoryPending, (newStatus) => {
-  if (!newStatus) {
-    if (categories.value?.data) {
-      setCategories(categories.value?.data)
-    }
-  }
-})
-watch(charPending, (newStatus) => {
-  if (!newStatus) {
-    if (characters.value?.data) {
-      setCharacters(characters.value?.data)
-    }
-  }
-})
+// const { setCharacters } = useCharacters()
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
-    case 'month':
+    case "month":
       return MonthlyLayout
 
-    case 'year':
+    case "year":
       return YearLayout
 
-    case 'decade':
+    case "decade":
       return DecadeLayout
 
-    case 'century':
+    case "century":
     default:
       return CenturyLayout
   }
 })
 
-const { setCurrentMenu } = useUiStore()
-
 onMounted(() => {
   jumpToDate(selectedDate)
-
-  setCurrentMenu([
-    {
-      phIcon: shallowRef(PhMagnifyingGlass),
-      tooltip: 'Recherche avancée',
-      action: 'event-search'
-    }
-  ])
 })
 </script>
 
 <template>
-  <div class="h-full">
-    <template v-if="calPending || charPending || categoryPending">
-      <div class="h-full grid place-items-center">
-        Loading notamment
-      </div>
-    </template>
-    <template v-else>
-      <div class="h-full grid grid-rows-[auto,1fr]">
-        <CalendarMenu />
+  <div class="h-full w-full relative">
+    <div class="h-full grid grid-rows-[auto,1fr]">
+      <CalendarMenu />
 
-        <KeepAlive>
-          <component :is="currentViewComponent"/>
-        </KeepAlive>
-      </div>
+      <component :is="currentViewComponent" />
 
-      <LazyCalendarSearch />
-      <LazyCalendarFormUpdateEvent />
-      <LazyCalendarFormDeleteEvent />
-    </template>
+      <CalendarSearch />
+      <CalendarFormUpdateEvent />
+      <CalendarFormDeleteEvent />
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.screen-move, /* apply transition to moving elements */
+.screen-enter-active,
+.screen-leave-active {
+  transition: all .4s ease-out;
+}
+
+.screen-enter-from,
+.screen-leave-to {
+  opacity: 0;
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.screen-leave-active {
+  position: absolute;
+}
+</style>
diff --git a/components/calendar/CalendarCurrentDate.vue b/components/calendar/CalendarCurrentDate.vue
index 6447d5e..279e514 100644
--- a/components/calendar/CalendarCurrentDate.vue
+++ b/components/calendar/CalendarCurrentDate.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { storeToRefs } from "pinia"
+import { computed } from "vue"
 
-import { PhMapPin } from '@phosphor-icons/vue'
+import { PhMapPin } from "@phosphor-icons/vue"
 
 const { defaultDate, getFormattedDateTitle, getRelativeString } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index 43a59f2..31d9a4d 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '~/models/CalendarEvent'
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "~/models/CalendarEvent"
 
 const props = defineProps<{
   event: CalendarEvent
   tileDate: RPGDate
 }>()
 
-const { areDatesIdentical } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { areDatesIdentical, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())
 
 const spansMultipleDays = computed(() => Boolean(props.event.startDate && props.event.endDate))
 const isStartEvent = computed(() => spansMultipleDays.value && areDatesIdentical(props.tileDate, props.event.startDate))
@@ -40,12 +39,12 @@ function handleClosePopover() {
 
 onMounted(() => {
   // Listen for keydown events
-  window.addEventListener('keydown', (e: KeyboardEvent) => {
+  window.addEventListener("keydown", (e: KeyboardEvent) => {
     // If the popover isn't opened, this is not the event we're trying to delete, so return
     if (!isPopoverDetailsOpen.value) return
 
     // If the key isn't the delete one, return
-    if (e.key !== 'Delete') return
+    if (e.key !== "Delete") return
 
     handleDelete()
   })
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index b01ee2b..403835e 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "@/models/CalendarEvent"
+import { useCalendar } from "@/stores/CalendarStore"
 
 import {
   PhHourglassMedium,
@@ -12,11 +12,10 @@ import {
   PhMapPinArea,
   PhDotsThreeOutlineVertical,
   PhEye
-} from '@phosphor-icons/vue'
+} from "@phosphor-icons/vue"
 
-const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString } = useCalendar()
-const { revealEditEventModal, revealDeleteEventModal } = useCalendarEvents()
-const { lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { defaultDate, getFormattedDateTitle, jumpToDate, getRelativeString, revealEditEventModal, revealDeleteEventModal } = useCalendar()
+const { lastActiveEvent } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   event: CalendarEvent
@@ -28,16 +27,16 @@ const props = defineProps<{
 // Ref for the popover
 const eventDetails = ref<HTMLElement>()
 
-const emit = defineEmits(['query:close-popover'])
+const emit = defineEmits(["query:close-popover"])
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
-  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  ? getRelativeString(props.event.startDate, props.event.endDate, "compact")
   : null
 
 function handleJumpToDate(date: RPGDate) {
   jumpToDate(date)
-  emit('query:close-popover')
+  emit("query:close-popover")
 }
 
 /**
@@ -136,7 +135,7 @@ function deployDeleteModal() {
       </template>
     </div>
 
-    <menu class="absolute top-4 right-4">
+    <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">
diff --git a/components/calendar/CalendarMenu.vue b/components/calendar/CalendarMenu.vue
index 4c84849..008082c 100644
--- a/components/calendar/CalendarMenu.vue
+++ b/components/calendar/CalendarMenu.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
+import { useCalendar } from "@/stores/CalendarStore"
 
-import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 const { revealAdvancedSearch } = useCalendar()
 </script>
@@ -29,7 +29,9 @@ const { revealAdvancedSearch } = useCalendar()
           </UiButton>
         </li>
         <li>
-          <CalendarSwitch />
+          <ClientOnly>
+            <CalendarSwitch />
+          </ClientOnly>
         </li>
       </menu>
     </div>
diff --git a/components/calendar/CalendarMenuNav.vue b/components/calendar/CalendarMenuNav.vue
index 67c9402..45a8ac9 100644
--- a/components/calendar/CalendarMenuNav.vue
+++ b/components/calendar/CalendarMenuNav.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { computed, type ComputedRef } from 'vue'
-import { useCalendar } from '@/stores/CalendarStore'
+import { computed, type ComputedRef } from "vue"
+import { useCalendar } from "@/stores/CalendarStore"
 
 import {
   PhCaretDoubleLeft,
   PhCaretDoubleRight,
   PhCaretLeft,
   PhCaretRight
-} from '@phosphor-icons/vue'
+} from "@phosphor-icons/vue"
 
 interface DirectionLabels {
   pastFar: string
@@ -16,126 +16,126 @@ interface DirectionLabels {
   futureFar: string
 }
 
-const { currentConfig, decrementMonth, incrementMonth, decrementYear, incrementYear } =
+const { currentConfig, decrementViewMonth, incrementViewMonth, decrementViewYear, incrementViewYear } =
   useCalendar()
 
 const activeDirectionLabels: ComputedRef<DirectionLabels> = computed(() => {
   switch (currentConfig.viewType) {
-    case 'month':
+    case "month":
       return {
-        pastFar: 'Année précédente',
-        pastNear: 'Mois précédent',
-        futureNear: 'Mois suivant',
-        futureFar: 'Année suivante'
+        pastFar: "Année précédente",
+        pastNear: "Mois précédent",
+        futureNear: "Mois suivant",
+        futureFar: "Année suivante"
       }
 
-    case 'year':
+    case "year":
       return {
-        pastFar: 'Décennie précédente',
-        pastNear: 'Année précédente',
-        futureNear: 'Année suivante',
-        futureFar: 'Décennie suivante'
+        pastFar: "Décennie précédente",
+        pastNear: "Année précédente",
+        futureNear: "Année suivante",
+        futureFar: "Décennie suivante"
       }
 
-    case 'decade':
+    case "decade":
       return {
-        pastFar: 'Siècle précédent',
-        pastNear: 'Décennie précédente',
-        futureNear: 'Décennie suivante',
-        futureFar: 'Siècle suivant'
+        pastFar: "Siècle précédent",
+        pastNear: "Décennie précédente",
+        futureNear: "Décennie suivante",
+        futureFar: "Siècle suivant"
       }
 
-    case 'century':
+    case "century":
     default:
       return {
-        pastFar: 'Millénaire précédent',
-        pastNear: 'Siècle précédent',
-        futureNear: 'Siècle suivant',
-        futureFar: 'Millénaire suivant'
+        pastFar: "Millénaire précédent",
+        pastNear: "Siècle précédent",
+        futureNear: "Siècle suivant",
+        futureFar: "Millénaire suivant"
       }
   }
 })
 
 function toPastFar(): void {
   switch (currentConfig.viewType) {
-    case 'month':
-      decrementYear()
+    case "month":
+      decrementViewYear()
       break
 
-    case 'year':
-      decrementYear(10)
+    case "year":
+      decrementViewYear(10)
       break
 
-    case 'decade':
-      decrementYear(100)
+    case "decade":
+      decrementViewYear(100)
       break
 
-    case 'century':
+    case "century":
     default:
-      decrementYear(1000)
+      decrementViewYear(1000)
       break
   }
 }
 
 function toPastNear(): void {
   switch (currentConfig.viewType) {
-    case 'month':
-      decrementMonth()
+    case "month":
+      decrementViewMonth()
       break
 
-    case 'year':
-      decrementYear()
+    case "year":
+      decrementViewYear()
       break
 
-    case 'decade':
-      decrementYear(10)
+    case "decade":
+      decrementViewYear(10)
       break
 
-    case 'century':
+    case "century":
     default:
-      decrementYear(100)
+      decrementViewYear(100)
       break
   }
 }
 
 function toFutureNear(): void {
   switch (currentConfig.viewType) {
-    case 'month':
-      incrementMonth()
+    case "month":
+      incrementViewMonth()
       break
 
-    case 'year':
-      incrementYear()
+    case "year":
+      incrementViewYear()
       break
 
-    case 'decade':
-      incrementYear(10)
+    case "decade":
+      incrementViewYear(10)
       break
 
-    case 'century':
+    case "century":
     default:
-      incrementYear(100)
+      incrementViewYear(100)
       break
   }
 }
 
 function toFutureFar(): void {
   switch (currentConfig.viewType) {
-    case 'month':
-      incrementYear()
+    case "month":
+      incrementViewYear()
       break
 
-    case 'year':
-      incrementYear(10)
+    case "year":
+      incrementViewYear(10)
       break
 
-    case 'decade':
-      incrementYear(100)
+    case "decade":
+      incrementViewYear(100)
       break
 
-    case 'century':
+    case "century":
     default:
-      incrementYear(1000)
+      incrementViewYear(1000)
       break
   }
 }
diff --git a/components/calendar/CalendarMenuSubnav.vue b/components/calendar/CalendarMenuSubnav.vue
index aa87fd7..c7f0199 100644
--- a/components/calendar/CalendarMenuSubnav.vue
+++ b/components/calendar/CalendarMenuSubnav.vue
@@ -1,25 +1,22 @@
 <script lang="ts" setup>
-import { type RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
+import { type RPGDate } from "@/models/Date"
 
-import { PhArrowLineLeft, PhArrowLineRight } from '@phosphor-icons/vue'
+import { PhArrowLineLeft, PhArrowLineRight } from "@phosphor-icons/vue"
 
-const { currentDate, currentConfig, jumpToDate } = useCalendar()
-const { getRelativeEventFromDate } = useCalendarEvents()
+const { currentDate, currentConfig, jumpToDate, getRelativeEventFromDate } = useCalendar()
 
-function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
+function handleGotoPreviousEventPage(position: "next" | "prev" = "next") {
   let fromDate: RPGDate
 
   // To modify, obviously
   const daysPerMonth = 32
   const monthsPerYear = 10
 
-  const toDay = position === 'next' ? daysPerMonth : 1
-  const toMonth = position === 'next' ? monthsPerYear : 0
+  const toDay = position === "next" ? daysPerMonth : 1
+  const toMonth = position === "next" ? monthsPerYear : 0
 
   switch (currentConfig.viewType) {
-    case 'month':
+    case "month":
       fromDate = {
         day: toDay,
         month: currentDate.currentMonth,
@@ -27,7 +24,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
       }
       break
 
-    case 'year':
+    case "year":
       fromDate = {
         day: toDay,
         month: toMonth,
@@ -35,7 +32,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
       }
       break
 
-    case 'decade':
+    case "decade":
       fromDate = {
         day: toDay,
         month: currentDate.currentMonth,
@@ -43,7 +40,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
       }
       break
 
-    case 'century':
+    case "century":
     default:
       fromDate = {
         day: toDay,
diff --git a/components/calendar/CalendarMenuToday.vue b/components/calendar/CalendarMenuToday.vue
index 2b8b882..855ef3b 100644
--- a/components/calendar/CalendarMenuToday.vue
+++ b/components/calendar/CalendarMenuToday.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { storeToRefs } from "pinia"
+import { computed } from "vue"
 
-const { defaultDate, areDatesIdentical } = useCalendar()
+const { defaultDate, areDatesIdentical, jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
-const { jumpToDefaultDate, getFormattedDateTitle } = useCalendar()
 
 const defaultDateFormatted: string = getFormattedDateTitle(defaultDate, true)
 
diff --git a/components/calendar/CalendarSwitch.vue b/components/calendar/CalendarSwitch.vue
index 3d97212..164153c 100644
--- a/components/calendar/CalendarSwitch.vue
+++ b/components/calendar/CalendarSwitch.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCalendar } from '@/stores/CalendarStore'
-import { PhCalendarBlank } from '@phosphor-icons/vue'
-import { computed } from 'vue'
+import { useCalendar } from "@/stores/CalendarStore"
+import { PhCalendarBlank } from "@phosphor-icons/vue"
+import { computed } from "vue"
 
 const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
 
diff --git a/components/calendar/SearchMode.ts b/components/calendar/SearchMode.ts
index b565e1c..ae5033c 100644
--- a/components/calendar/SearchMode.ts
+++ b/components/calendar/SearchMode.ts
@@ -1,3 +1,3 @@
 export const searchUnifier = new RegExp(/[^a-zA-Z0-9\-'']/g)
 
-export type SearchMode = 'characters' | 'events' | undefined
+export type SearchMode = "characters" | "events" | undefined
diff --git a/components/calendar/dialog/Create.vue b/components/calendar/dialog/Create.vue
new file mode 100644
index 0000000..c2e68e8
--- /dev/null
+++ b/components/calendar/dialog/Create.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { PhX } from "@phosphor-icons/vue";
+import type { World } from "~/models/World";
+
+defineProps<{
+  world: World,
+  modalState?: boolean
+}>()
+
+const calendarSkeletonName = ref<string>("")
+
+function onChangedName(newName: string) {
+  calendarSkeletonName.value = newName
+}
+
+const emit = defineEmits(["on-close"])
+
+function handleClose() {
+  emit("on-close")
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6">
+      <UiAlertDialogTitle>
+        <span class="text-2xl">
+          <strong class="font-bold">{{ world.name }}</strong>
+          <span class="opacity-30"> — </span>
+          <span v-if="calendarSkeletonName">
+            {{ calendarSkeletonName }}
+          </span>
+          <span v-else>Nouveau calendrier</span>
+        </span>
+      </UiAlertDialogTitle>
+
+      <UiButton size="icon" variant="ghost" class="absolute top-4 right-4" title="Fermer la fenêtre" @click="handleClose">
+        <PhX size="20" />
+      </UiButton>
+
+      <CalendarFormCreate @on-changed-name="onChangedName" @on-close="handleClose" />
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>
diff --git a/components/calendar/dialog/Delete.vue b/components/calendar/dialog/Delete.vue
new file mode 100644
index 0000000..f1accfe
--- /dev/null
+++ b/components/calendar/dialog/Delete.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import type { Calendar } from "~/models/CalendarConfig";
+
+const props = defineProps<{
+  modalState: boolean,
+  calendar: Calendar | null
+}>()
+
+const isLoading = ref<boolean>(false)
+
+const emit = defineEmits(["on-close"])
+
+async function handleAction(): Promise<void> {
+  if (isLoading.value) return
+  if (!props.calendar) return
+
+  isLoading.value = true
+
+  try {
+    await $fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" })
+
+    // isDeleteEventModalOpen.value = false
+  } catch (err) {
+    if (err instanceof Error) {
+      // formErrors.message = err.message
+    }
+  } finally {
+    isLoading.value = false
+  }
+}
+
+/**
+ * Prevents the modal from closing if's still loading
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing() {
+  if (!isLoading.value) {
+    emit("on-close")
+  }
+}
+</script>
+
+<template>
+  <UiAlertDialog :open="modalState">
+    <UiAlertDialogContent
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
+      class="min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
+    >
+      <UiAlertDialogTitle> Êtes-vous sûr de supprimer ce calendrier ?</UiAlertDialogTitle>
+
+      <UiAlertDialogDescription>
+        Les évènements ne seront plus accessibles et vous ne pourrez plus récupérer les données !
+      </UiAlertDialogDescription>
+
+      <form @submit.prevent="handleAction">
+        <div class="grid grid-cols-2 gap-y-4">
+          <div class="text-red-500 ml-8">
+            <span class="text-sm">
+              <!-- {{ formErrors.message }} -->
+            </span>
+          </div>
+        </div>
+
+        <footer class="flex gap-2 justify-between">
+          <UiButton type="button" size="sm" variant="ghost" @click="handleClosing">
+            Retour
+          </UiButton>
+
+          <div class="flex gap-2 justify-end">
+            <Transition name="fade-delay">
+              <UiButton v-if="isLoading" type="button" size="sm" variant="destructive">
+                Annuler
+              </UiButton>
+            </Transition>
+
+            <UiButton v-if="calendar" size="sm" variant="destructive" :disabled="isLoading">
+              <Transition name="fade">
+                <PhCircleNotch v-if="isLoading" size="20" class="animate-spin"/>
+              </Transition>
+
+              Supprimer "{{ calendar?.name }}"
+            </UiButton>
+          </div>
+        </footer>
+      </form>
+    </UiAlertDialogContent>
+  </UiAlertDialog>
+</template>
diff --git a/components/calendar/form/Create.vue b/components/calendar/form/Create.vue
new file mode 100644
index 0000000..f9fbb7d
--- /dev/null
+++ b/components/calendar/form/Create.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { Calendar } from "~/models/CalendarConfig";
+import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
+
+const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: []}
+const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
+
+onMounted(() => {
+  calendarSkeleton.value = { ...defaultSkeleton }
+})
+
+type FormTabs = "global" | "months" | "today"
+const activeTab = ref<FormTabs>("global")
+
+/**
+ * === Current date ===
+ */
+// If the months data change, just reset today's month
+// This is a failsafe mainly because of 1) month positions and 2) month names
+watch(calendarSkeleton.value.months, () => {
+  calendarSkeleton.value.today.month = 0
+}, { deep: true })
+
+/**
+ * === Form Validation ===
+ */
+
+/** Whether the skeleton has valid month data */
+const validSkeletonMonths = computed(() => calendarSkeleton.value.months.length > 0)
+
+/** Whether the skeleton has a valid name */
+const validSkeletonGeneral = computed(() => calendarSkeleton.value.name)
+
+/** Whether all the data checks above are a-ok */
+const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeletonMonths.value)
+
+/** Send the data to the store for validation */
+const isCreatingCalendar = ref<boolean>(false)
+
+async function handleSubmit() {
+  try {
+    isCreatingCalendar.value = true
+    await $fetch("/api/calendars/create", { method: "POST", body: {...calendarSkeleton.value, worldId: 1 } })
+
+    emit("on-close")
+  } catch (err) {
+    console.log(err)
+  } finally {
+    isCreatingCalendar.value = false
+  }
+}
+
+/**
+ * === Watch for name changes to display above ===
+ */
+const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (e: "on-changed-name", calendarName: string): void
+    // eslint-disable-next-line no-unused-vars
+  (e: "on-close"): void
+}>()
+
+/** Hook to emit a debounced event for the changed skeleton name */
+const handleNameChange = useDebounceFn(() => {
+  emit("on-changed-name", calendarSkeleton.value.name)
+}, 400)
+
+function handleFormCancel() {
+  emit("on-close")
+}
+</script>
+
+<template>
+  <template v-if="calendarSkeleton">
+    <form class="h-full grid grid-rows-[1fr_auto]" @submit.prevent="handleSubmit">
+      <UiTabs v-model:model-value="activeTab">
+        <UiTabsList class="grid w-full grid-cols-3 mb-4">
+          <UiTabsTrigger value="global" class="font-bold">
+            <div class="flex items-center gap-1">
+              <PhWrench size="18" weight="fill" />
+              Général
+            </div>
+          </UiTabsTrigger>
+          <UiTabsTrigger value="months" class="font-bold">
+            <div class="flex items-center gap-1">
+              <PhCalendarDots size="18" weight="fill" />
+              Mois de l'année
+            </div>
+          </UiTabsTrigger>
+          <UiTabsTrigger value="today" class="font-bold">
+            <div class="flex items-center gap-1">
+              <PhAlarm size="18" weight="fill" />
+              Aujourd'hui
+            </div>
+          </UiTabsTrigger>
+        </UiTabsList>
+        <UiTabsContent value="global">
+          <input
+            id="new-calendar-name"
+            v-model="calendarSkeleton.name"
+            type="text"
+            name="new-calendar-name"
+            required
+            placeholder="Titre"
+            class="w-full -my-1 py-2 -mx-1 px-1 text-xl border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            @input="handleNameChange"
+          >
+        </UiTabsContent>
+        <UiTabsContent value="months">
+          <CalendarInputMonthList v-model:model-value="calendarSkeleton.months" />
+        </UiTabsContent>
+        <UiTabsContent value="today">
+          <CalendarInputTodaySelect v-model:model-value="calendarSkeleton.today" :available-months="calendarSkeleton.months"/>
+        </UiTabsContent>
+      </UiTabs>
+
+      <footer class="flex justify-end gap-2 mt-6">
+        <UiButton type="button" variant="destructive" @click="handleFormCancel">
+          Annuler
+        </UiButton>
+
+        <UiButton type="submit" :disabled="!validSkeleton || isCreatingCalendar">
+          <Transition name="fade">
+            <PhCircleNotch v-if="isCreatingCalendar" size="20" class="opacity-50 animate-spin"/>
+          </Transition>
+
+          Créer
+        </UiButton>
+      </footer>
+    </form>
+  </template>
+</template>
diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index 755e963..41153a0 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { RPGDate } from '~/models/Date';
-import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from '@phosphor-icons/vue'
+import type { RPGDate } from "~/models/Date";
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
 
-const { eventSkeleton, operationInProgress } = storeToRefs(useCalendarEvents())
-const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendarEvents()
+const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const { resetSkeleton, submitSkeleton, cancelLatestRequest } = useCalendar()
 const popoverOpen = ref(false)
 const isLoading = ref(false)
 
@@ -104,7 +104,8 @@ function handleCancel() {
               name="new-event-title"
               required
               placeholder="Titre de l'évènement"
-              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
+              class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
+            >
           </div>
 
           <div class="col-span-2 my-2 pl-8">
diff --git a/components/calendar/form/DeleteEvent.vue b/components/calendar/form/DeleteEvent.vue
index 3c3ebaf..3112401 100644
--- a/components/calendar/form/DeleteEvent.vue
+++ b/components/calendar/form/DeleteEvent.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-import { PhCircleNotch } from '@phosphor-icons/vue';
+import { PhCircleNotch } from "@phosphor-icons/vue";
 
-const { isDeleteEventModalOpen } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { isDeleteEventModalOpen, eventSkeleton, lastActiveEvent } = storeToRefs(useCalendar())
 
-const { resetSkeleton, deleteEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
-
-const isLoading = ref(false)
+const isLoading = ref<boolean>(false)
 
 const formErrors = reactive<{ message: string | null }>({
   message: null
@@ -19,7 +17,7 @@ watch(isDeleteEventModalOpen, (hasOpened, _o) => {
   }
 })
 
-async function handleAction() {
+async function handleAction(): Promise<void> {
   if (isLoading.value) return
 
   isLoading.value = true
@@ -43,7 +41,7 @@ async function handleAction() {
  *
  * @param e The closing event (can be keydown or click)
  */
-function handleClosing(e: Event) {
+function handleClosing(e: Event): void {
   if (isLoading.value) {
     e.preventDefault()
   }
@@ -54,7 +52,7 @@ function handleClosing(e: Event) {
  *
  * Must cancel the abortController in the store, and stop the loading
  */
-function handleCancel() {
+function handleCancel(): void {
   cancelLatestRequest()
   isLoading.value = false
 }
diff --git a/components/calendar/form/UpdateEvent.vue b/components/calendar/form/UpdateEvent.vue
index 4e4ac16..7dc68c9 100644
--- a/components/calendar/form/UpdateEvent.vue
+++ b/components/calendar/form/UpdateEvent.vue
@@ -1,11 +1,9 @@
 <script lang="ts" setup>
-import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from '@phosphor-icons/vue'
-import { VisuallyHidden } from 'radix-vue'
+import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhPencilSimpleLine, PhTag } from "@phosphor-icons/vue"
+import { VisuallyHidden } from "radix-vue"
 
-const { isEditEventModalOpen } = storeToRefs(useCalendarEvents())
-
-const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendarEvents()
-const { eventSkeleton, lastActiveEvent } = storeToRefs(useCalendarEvents())
+const { resetSkeleton, updateEventFromSkeleton, cancelLatestRequest } = useCalendar()
+const { eventSkeleton, lastActiveEvent, isEditEventModalOpen } = storeToRefs(useCalendar())
 
 const isLoading = ref(false)
 
diff --git a/components/calendar/input/EventCategories.vue b/components/calendar/input/EventCategories.vue
index cfb4bb9..60792e4 100644
--- a/components/calendar/input/EventCategories.vue
+++ b/components/calendar/input/EventCategories.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { Category } from '~/models/Category';
+import type { Category } from "~/models/Category";
 
-import { PhCaretDown, PhCheck } from '@phosphor-icons/vue';
+import { PhCaretDown, PhCheck } from "@phosphor-icons/vue";
 
 const isPopoverOpen = ref<boolean>(false)
 
@@ -17,12 +16,12 @@ watch(modelBuffer.value, () => {
   model.value = [ ...modelBuffer.value ]
 })
 
-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()
 
-const searchTerm = ref<string>('')
+const searchTerm = ref<string>("")
 
 const filteredCategories = computed(() =>
-  searchTerm.value === ''
+  searchTerm.value === ""
     ? availableCategories
     : availableCategories.filter((category) => {
       return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
@@ -70,9 +69,6 @@ const filteredCategories = computed(() =>
               :key="category.id"
               :value="category"
               class="cursor-pointer flex justify-between items-center"
-              :class="cn({
-
-              })"
             >
               <span>
                 {{ category.name }}
diff --git a/components/calendar/input/EventCategory.vue b/components/calendar/input/EventCategory.vue
index 7bf7734..e396380 100644
--- a/components/calendar/input/EventCategory.vue
+++ b/components/calendar/input/EventCategory.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { PhCaretDown } from '@phosphor-icons/vue';
-import type { Category } from '~/models/Category';
+import { PhCaretDown } from "@phosphor-icons/vue";
+import type { Category } from "~/models/Category";
 
 const isPopoverOpen = ref<boolean>(false)
 
@@ -10,16 +10,16 @@ const props = defineProps<{
 
 const model = defineModel<Category>()
 
-const { categories: availableCategories } = useCalendarEvents()
+const { categories: availableCategories } = useCalendar()
 
-const searchTerm = ref<string>('')
+const searchTerm = ref<string>("")
 
 function handleCatSelect() {
   isPopoverOpen.value = false
 }
 
 const filteredCategories = computed(() =>
-  searchTerm.value === ''
+  searchTerm.value === ""
     ? availableCategories
     : availableCategories.filter((category) => {
       return category.name.toLowerCase().includes(searchTerm.value.toLowerCase())
diff --git a/components/calendar/input/MonthList.vue b/components/calendar/input/MonthList.vue
new file mode 100644
index 0000000..e841780
--- /dev/null
+++ b/components/calendar/input/MonthList.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { cn } from "~/lib/utils";
+
+import { useSortable } from "@vueuse/integrations/useSortable";
+import type { CalendarMonth } from "~/models/CalendarMonth";
+
+import { PhList, PhPlus, PhTrash } from "@phosphor-icons/vue";
+
+const model = defineModel<CalendarMonth[]>({ required: true })
+
+/**
+ * Input value for new month's name
+ */
+const monthName: Ref<string | undefined> = ref<string>()
+const monthNameRef = ref<HTMLInputElement>()
+const { focused: monthNameFocused } = useFocus(monthNameRef)
+const validMonthNameDatatypes = ["string"]
+const monthNameIsTaken = computed(() => model.value.find(m => m.name === monthName.value))
+const validMonthName = computed(() => validMonthNameDatatypes.includes(typeof monthName.value) && !monthNameIsTaken.value)
+
+/**
+ * Input value for new month's number of days
+ */
+const monthDays: Ref<number | undefined> = ref<number>()
+const monthDaysRef = ref<HTMLInputElement>()
+const validMonthDaysDatatypes = ["number"]
+const validMonthDays = computed(() => validMonthDaysDatatypes.includes(typeof monthDays.value) && monthDays.value && monthDays.value >= 12)
+
+const validNewMonth = computed(() => validMonthDays.value && validMonthName.value)
+
+/**
+ * Add current month input data to the model list
+ */
+function addMonthToModel(): void {
+  if (!monthDays.value || !monthName.value) return
+
+  // Create month object to add
+  const monthToInsert: CalendarMonth = {
+    name: monthName.value,
+    days: monthDays.value,
+    position: model.value.length
+  }
+
+  model.value.push(monthToInsert)
+
+  // Reset form state
+  monthName.value = ""
+  monthNameFocused.value = true
+}
+
+/**
+ * Remove a specific month from the model
+ *
+ * @param index Index position of the month in the model
+ */
+function removeMonthFromModel(index: number) {
+  if (isNaN(index)) return
+
+  model.value.splice(index, 1)
+}
+
+// Sortable setup
+const monthSortableList = ref<HTMLElement | null>(null)
+useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle" })
+</script>
+
+<template>
+  <div class="grid md:grid-cols-12 gap-4 items-center">
+    <div class="md:col-start-2 md:col-span-5">
+      <UiInput id="new-month-name" ref="monthNameRef" v-model="monthName" type="text" name="newMonthName" placeholder="Nom du mois" :class="cn({ 'border-red-600': monthNameIsTaken })"/>
+    </div>
+    <div class="md:col-span-5">
+      <UiInput id="new-month-days" ref="monthDaysRef" v-model="monthDays" type="number" name="newMonthName" placeholder="Nombre de jours" min="0" step="1" class="invalid:border-red-600" />
+    </div>
+    <div class="md:col-span-1">
+      <UiButton size="icon" class="rounded-full h-8 w-8" :disabled="!validNewMonth" @click.prevent="addMonthToModel">
+        <PhPlus size="17"/>
+      </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 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}`">
+                <UiButton size="icon" variant="secondary" class="h-8 w-8 rounded-full">
+                  <span class="font-bold text-sm">{{ i + 1 }}</span>
+                </UiButton>
+              </li>
+            </ul>
+          </div>
+          <div class="md:col-span-11">
+            <ul ref="monthSortableList" class="grid gap-y-2" :class="model.length ? 'visible' : 'absolute invisible'">
+              <template v-if="model.length">
+                <li v-for="(m, i) in model" :key="m.name" class="grid md:grid-cols-12 gap-4 md:items-center text-slate-900 bg-slate-200 rounded-md">
+                  <div class="md:col-span-1 text-right duration-200 ease-out transition transform origin-top-right">
+                    <UiButton type="button" variant="ghost" size="icon" class="handle rounded-full h-8 w-8">
+                      <PhList size="17" />
+                    </UiButton>
+                  </div>
+                  <div class="md:col-span-3">
+                    <div class="font-bold md:pl-2">
+                      {{ m.name }}
+                    </div>
+                  </div>
+                  <div class="md:col-span-2">
+                    <UiInput :id="`month-days-n${i}`" v-model="m.days" class="bg-transparent border-none" type="number" :name="`monthDays-n${i}`" placeholder="Nombre de jours" min="0" />
+                  </div>
+                  <div class="md:col-span-1">
+                    jour(s)
+                  </div>
+                  <div class="md:col-start-12">
+                    <UiTooltipProvider>
+                      <UiTooltip>
+                        <UiTooltipTrigger as-child>
+                          <UiButton type="button" variant="ghost" size="icon" class="rounded-full h-8 w-8" @click="removeMonthFromModel(i)">
+                            <PhTrash size="17" />
+                          </UiButton>
+                        </UiTooltipTrigger>
+                        <UiTooltipContent>
+                          <p>Supprimer {{ m.name }} du calendrier</p>
+                        </UiTooltipContent>
+                      </UiTooltip>
+                    </UiTooltipProvider>
+                  </div>
+                </li>
+              </template>
+            </ul>
+          </div>
+        <template v-if="!model.length">
+          <p class="col-span-12 text-lg text-center italic opacity-50">Aucun mois pour l'instant</p>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/calendar/input/RPGDate.vue b/components/calendar/input/RPGDate.vue
index a46dccd..3cd9ad2 100644
--- a/components/calendar/input/RPGDate.vue
+++ b/components/calendar/input/RPGDate.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { RPGDate } from '~/models/Date';
+import type { RPGDate } from "~/models/Date";
 
 import {
   PhXCircle
-} from '@phosphor-icons/vue'
+} from "@phosphor-icons/vue"
 
 const model = defineModel<RPGDate | null>()
 
@@ -27,7 +27,7 @@ const inputPlaceholder = computed<string>(() => {
     return props.placeholder
   }
 
-  return ''
+  return ""
 })
 
 const initialDateValue = props.initialDate ? { ...props.initialDate } : null
@@ -37,7 +37,7 @@ const monthTitle = computed<string>(() => {
     return getMonthName(model.value.month)
   }
 
-  return ''
+  return ""
 })
 
 const hasValue = computed<boolean>(() => !!model.value)
diff --git a/components/calendar/input/TodaySelect.vue b/components/calendar/input/TodaySelect.vue
new file mode 100644
index 0000000..cfdfc26
--- /dev/null
+++ b/components/calendar/input/TodaySelect.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { CalendarMonth } from "~/models/CalendarMonth";
+import type { RPGDate } from "~/models/Date";
+
+import { PhCalendarBlank } from "@phosphor-icons/vue";
+
+const model = defineModel<RPGDate>({ required: true })
+
+const props = defineProps<{
+  availableMonths: CalendarMonth[]
+}>()
+
+/**
+ *
+ * @param e The name of today's month
+ */
+function setTodayMonth(e: string) {
+  model.value.month = e
+}
+
+// When the model changes, get the month index from the month name
+watch(model.value, (n, _o) => {
+  // If the month value is already an index, return early
+  if (!isNaN(+model.value.month)) return
+
+  const monthId = props.availableMonths.findIndex((m) => m.name === n.month)
+
+  if (monthId !== -1) {
+    model.value.month = monthId + 1
+  }
+})
+</script>
+
+<template>
+  <div class="flex gap-2 items-stretch">
+    <UiInput id="new-month-current-day" v-model="model.day" type="number" name="newMonthCurrentDay" placeholder="Jour" min="1" step="1" class="invalid:border-red-600" />
+
+    <UiDropdownMenu>
+      <UiDropdownMenuTrigger as-child :disabled="props.availableMonths.length < 1">
+        <UiButton size="sm" variant="secondary">
+          <PhCalendarBlank size="18" weight="fill" />
+
+          <template v-if="props.availableMonths.length < 1">
+            Aucun mois disponible
+          </template>
+          <template v-else-if="model.month && typeof model.month === 'number'">
+            {{ props.availableMonths[model.month - 1].name }}
+          </template>
+          <template v-else>
+            Choisir le mois
+          </template>
+        </UiButton>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent :side="'bottom'" :collision-padding="30">
+        <UiDropdownMenuLabel>Mois disponibles</UiDropdownMenuLabel>
+        <UiDropdownMenuSeparator />
+        <UiDropdownMenuItem
+          v-for="m in props.availableMonths"
+          :key="m.name"
+          @click="setTodayMonth(m.name)"
+        >
+          {{ m.name }}
+        </UiDropdownMenuItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
+
+    <UiInput id="new-month-current-day" v-model="model.year" type="number" name="newMonthCurrentYear" placeholder="Année" step="1" class="invalid:border-red-600" />
+  </div>
+</template>
diff --git a/components/calendar/search/CalendarSearch.vue b/components/calendar/search/CalendarSearch.vue
index 74dba7b..5e9fdb3 100644
--- a/components/calendar/search/CalendarSearch.vue
+++ b/components/calendar/search/CalendarSearch.vue
@@ -2,49 +2,46 @@
 import {
   isCharacter,
   type Character,
-} from '@/models/Characters'
-import type { RPGDateOrder } from '@/models/Date'
+} from "@/models/Characters"
+import type { RPGDateOrder } from "@/models/Date"
 import {
   isCalendarEvent,
   type CalendarEvent,
-} from '~/models/CalendarEvent'
-import { useCharacters } from '@/stores/CharacterStore'
-import { useCalendarEvents } from '@/stores/EventStore'
-import { capitalize } from '@/utils/Strings'
-import { useMagicKeys, useScroll, useStorage, whenever } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
-import { searchUnifier, type SearchMode } from '../SearchMode'
+} from "~/models/CalendarEvent"
+import { capitalize } from "@/utils/Strings"
+import { useMagicKeys, useScroll, useStorage, whenever } from "@vueuse/core"
+import { computed, ref, watch } from "vue"
+import { searchUnifier, type SearchMode } from "../SearchMode"
 
-import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhClockClockwise, PhClockCounterClockwise, PhMagnifyingGlass } from "@phosphor-icons/vue"
 import {
   ComboboxAnchor,
   ComboboxInput,
   ComboboxPortal,
   ComboboxRoot,
   VisuallyHidden
-} from 'radix-vue'
+} from "radix-vue"
 
-import SearchList from './lists/SearchList.vue'
-import type { Category } from '~/models/Category'
+import SearchList from "./lists/SearchList.vue"
+import type { Category } from "~/models/Category"
 
-const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
-const { allEvents } = storeToRefs(useCalendarEvents())
+const { isAdvancedSearchOpen, allEvents } = storeToRefs(useCalendar())
 const { characters } = storeToRefs(useCharacters())
 
-const searchQuery = ref<string>('')
+const searchQuery = ref<string>("")
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
 
-const selectedEntity = useStorage('se', 'events' as SearchMode)
+const selectedEntity = useStorage("se", "events" as SearchMode)
 
 // Order
-const selectedOrder = ref<RPGDateOrder>('asc')
+const selectedOrder = ref<RPGDateOrder>("asc")
 function setOrderAsc() {
-  selectedOrder.value = 'asc'
+  selectedOrder.value = "asc"
   resetPage()
 }
 
 function setOrderDesc() {
-  selectedOrder.value = 'desc'
+  selectedOrder.value = "desc"
   resetPage()
 }
 
@@ -68,9 +65,9 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
 
   // Assign data to loop over and filter
   // They are assigned this way for readability
-  if (selectedEntity.value === 'events') {
+  if (selectedEntity.value === "events") {
     dataToFilter = allEvents.value
-  } else if (selectedEntity.value === 'characters') {
+  } else if (selectedEntity.value === "characters") {
     dataToFilter = characters.value
   } else {
     dataToFilter = [...allEvents.value, ...characters.value]
@@ -83,15 +80,15 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
     // Filter calendar events
     if (isCalendarEvent(item)) {
       const queryString = new String(searchQuery.value)
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
         .toLocaleLowerCase()
 
       const hitTitle = item.title
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
         .toLocaleLowerCase()
         .includes(queryString)
       const hitDesc = item.description
-        ?.replace(searchUnifier, '')
+        ?.replace(searchUnifier, "")
         .toLocaleLowerCase()
         .includes(queryString)
 
@@ -121,11 +118,11 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
     // Filter characters
     if (isCharacter(item)) {
       const queryString = new String(searchQuery.value)
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
         .toLocaleLowerCase()
 
       const hitTitle = item.name
-        .replace(searchUnifier, '')
+        .replace(searchUnifier, "")
         .toLocaleLowerCase()
         .includes(queryString)
 
@@ -160,7 +157,7 @@ const searchResults = computed<(Character | CalendarEvent)[]>(() => {
  * Removes the search query, resets the pagination and removes all selected categories
  */
 function resetSearch() {
-  searchQuery.value = ''
+  searchQuery.value = ""
   resetPage()
   selectedCategories.value = []
 }
@@ -208,7 +205,7 @@ const currentCategories = computed(() => {
 
 const selectedCategories = ref<(Category)[]>([])
 const categoryFilterOpened = ref<boolean>(false)
-const searchCategory = ref<string>('')
+const searchCategory = ref<string>("")
 
 const filteredCategories = computed(() =>
   currentCategories.value.filter((i) => !selectedCategories.value.includes(i))
@@ -220,8 +217,8 @@ const filteredCategories = computed(() =>
  * @param e Radix Change Event
  */
 function handleCategorySelect(e: (Category)) {
-  if (typeof e === 'string') {
-    searchCategory.value = ''
+  if (typeof e === "string") {
+    searchCategory.value = ""
     selectedCategories.value.push(e)
   }
 
diff --git a/components/calendar/search/lists/CharacterCallout.vue b/components/calendar/search/lists/CharacterCallout.vue
index a50649d..70e4d0c 100644
--- a/components/calendar/search/lists/CharacterCallout.vue
+++ b/components/calendar/search/lists/CharacterCallout.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import type { Character } from '@/models/Characters'
-import type { RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
+import type { Character } from "@/models/Characters"
+import type { RPGDate } from "@/models/Date"
+import { useCalendar } from "@/stores/CalendarStore"
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Button } from '@/components/ui/button'
-import { PhArrowSquareOut, PhPlant, PhSkull } from '@phosphor-icons/vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Button } from "@/components/ui/button"
+import { PhArrowSquareOut, PhPlant, PhSkull } from "@phosphor-icons/vue"
 
 const props = defineProps<{
   character: Character
 }>()
 
 defineEmits<{
-  (e: 'query:date-jump', payload: RPGDate): void
+  (e: "query:date-jump", payload: RPGDate): void
 }>()
 
 const { getFormattedDateTitle } = useCalendar()
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index de7e933..10bc020 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -1,26 +1,23 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
+import { cn } from "@/lib/utils"
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "@/models/CalendarEvent"
 
-import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from '@phosphor-icons/vue'
+import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"
 
 const props = defineProps<{
   event: CalendarEvent
 }>()
 
 defineEmits<{
-  (e: 'query:date-jump', payload: RPGDate): void
+  (e: "query:date-jump", payload: RPGDate): void
 }>()
 
-const { getRelativeString } = useCalendar()
-
-const { defaultDate, getFormattedDateTitle } = useCalendar()
+const { getRelativeString, defaultDate, getFormattedDateTitle } = useCalendar()
 
 const dateDifference: string = getRelativeString(defaultDate, props.event.startDate)
 const dateDuration: string | null = props.event.endDate
-  ? getRelativeString(props.event.startDate, props.event.endDate, 'compact')
+  ? getRelativeString(props.event.startDate, props.event.endDate, "compact")
   : null
 </script>
 
@@ -48,18 +45,32 @@ const dateDuration: string | null = props.event.endDate
       </div>
     </div>
 
-    <div class="mb-1">
+    <div class="flex gap-2 items-center justify-between mb-1">
       <template v-if="!event.endDate">
-        <p class="col-span-2 font-semibold text-sm opacity-75">
+        <p class="font-semibold text-sm opacity-75">
           {{ getFormattedDateTitle(event.startDate, true) }}
         </p>
       </template>
       <template v-else>
-        <p class="col-span-2 font-semibold text-sm opacity-75">
+        <p class="font-semibold text-sm opacity-75">
           Du {{ getFormattedDateTitle(event.startDate, true) }} au
           {{ getFormattedDateTitle(event.endDate, true) }}
         </p>
       </template>
+      <div v-if="event.hidden" class="flex justify-end">
+        <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">
+                <PhEye size="16" weight="fill" /> Évènement privé
+              </UiBadge>
+            </UiTooltipTrigger>
+            <UiTooltipContent>
+              <p>Cet évènement est uniquement visible pour vous</p>
+            </UiTooltipContent>
+          </UiTooltip>
+        </UiTooltipProvider>
+      </div>
     </div>
 
     <div class="mb-1 flex gap-x-2 items-center">
@@ -100,18 +111,5 @@ const dateDuration: string | null = props.event.endDate
         {{ event.description }}
       </span>
     </div>
-
-    <UiTooltipProvider v-if="event.hidden" :delay-duration="250">
-      <UiTooltip>
-        <UiTooltipTrigger as-child>
-          <UiBadge class="absolute -top-2 left-2 flex gap-1 border-[1px] border-slate-900 hover:bg-slate-300 hover:opacity-100">
-            <PhEye size="16" weight="fill" /> Évènement privé
-          </UiBadge>
-        </UiTooltipTrigger>
-        <UiTooltipContent>
-          <p>Cet évènement est uniquement visible pour vous</p>
-        </UiTooltipContent>
-      </UiTooltip>
-    </UiTooltipProvider>
   </button>
 </template>
diff --git a/components/calendar/search/lists/SearchList.vue b/components/calendar/search/lists/SearchList.vue
index 257888c..ab43f09 100644
--- a/components/calendar/search/lists/SearchList.vue
+++ b/components/calendar/search/lists/SearchList.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { isCharacter, type Character } from '@/models/Characters'
-import type { RPGDate, RPGDateOrder } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { computed } from 'vue'
-import { isCalendarEvent, type CalendarEvent } from '~/models/CalendarEvent'
-import type { SearchMode } from '../../SearchMode'
+import { isCharacter, type Character } from "@/models/Characters"
+import type { RPGDate, RPGDateOrder } from "@/models/Date"
+import { useCalendar } from "@/stores/CalendarStore"
+import { computed } from "vue"
+import { isCalendarEvent, type CalendarEvent } from "~/models/CalendarEvent"
+import type { SearchMode } from "../../SearchMode"
 
-import CharacterCallout from './CharacterCallout.vue'
-import EventCallout from './EventCallout.vue'
+import CharacterCallout from "./CharacterCallout.vue"
+import EventCallout from "./EventCallout.vue"
 
 const props = defineProps<{
   results: (Character | CalendarEvent)[]
@@ -18,7 +18,7 @@ const props = defineProps<{
   limit?: number
 }>()
 
-const emit = defineEmits(['jumpedToDate'])
+const emit = defineEmits(["jumpedToDate"])
 
 const { jumpToDate, compareDates } = useCalendar()
 
@@ -26,7 +26,7 @@ function handleJumpToDate(date?: RPGDate) {
   if (!date) return
 
   jumpToDate(date)
-  emit('jumpedToDate')
+  emit("jumpedToDate")
 }
 
 // Initial sorting of the results
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index bcd9b15..4c3d5d8 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import type { RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/CalendarEvent'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
-import { useElementBounding } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { computed, ref, type ComputedRef } from 'vue'
+import type { RPGDate } from "@/models/Date"
+import type { CalendarEvent } from "@/models/CalendarEvent"
+import { useElementBounding } from "@vueuse/core"
+import { storeToRefs } from "pinia"
+import { computed, ref, type ComputedRef } from "vue"
 
-import CalendarEventButton from '../../CalendarEvent.vue'
+import CalendarEventButton from "../../CalendarEvent.vue"
 
 const props = defineProps<{
   date: RPGDate
@@ -18,8 +16,7 @@ const calendarTile = ref()
 const calendarEventsList = ref()
 
 const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
 
 /**
  * All events with a startDate / endDate that starts or ends on the tile
diff --git a/components/calendar/state/monthly/Layout.vue b/components/calendar/state/monthly/Layout.vue
index 06ce384..7cf6194 100644
--- a/components/calendar/state/monthly/Layout.vue
+++ b/components/calendar/state/monthly/Layout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { useThrottleFn } from '@vueuse/core'
+import { useCalendar } from "@/stores/CalendarStore"
+import { useThrottleFn } from "@vueuse/core"
 
-const { currentDate, decrementMonth, incrementMonth } = useCalendar()
+const { currentDate, decrementViewMonth, incrementViewMonth } = useCalendar()
 const { currentMonthData } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
@@ -15,24 +15,26 @@ function handleWheel(e: WheelEvent) {
 }
 
 const moveCalendarLeft = useThrottleFn(() => {
-  decrementMonth()
+  decrementViewMonth()
 }, 100)
 
 const moveCalendarRight = useThrottleFn(() => {
-  incrementMonth()
+  incrementViewMonth()
 }, 100)
 </script>
 
 <template>
   <div class="grid grid-cols-10" @wheel="handleWheel">
-    <CalendarStateMonthlyDayTile
-      v-for="day in currentMonthData.days"
-      :key="`layout-month-grid-${day}`"
-      :date="{
-        day: day,
-        month: currentDate.currentMonth,
-        year: currentDate.currentYear
-      }"
-    />
+    <template v-if="currentMonthData">
+      <CalendarStateMonthlyDayTile
+        v-for="day in currentMonthData?.days"
+        :key="`layout-month-grid-${day}`"
+        :date="{
+          day: day,
+          month: currentDate.currentMonth,
+          year: currentDate.currentYear
+        }"
+      />
+    </template>
   </div>
 </template>
diff --git a/components/calendar/state/yearly/DayTile.vue b/components/calendar/state/yearly/DayTile.vue
index 0ea59c8..1d37f5a 100644
--- a/components/calendar/state/yearly/DayTile.vue
+++ b/components/calendar/state/yearly/DayTile.vue
@@ -1,21 +1,16 @@
 <script lang="ts" setup>
-import type { RPGDate } from '@/models/Date'
-import { useCalendar } from '@/stores/CalendarStore'
-import { useCalendarEvents } from '@/stores/EventStore'
-import { storeToRefs } from 'pinia'
-import { computed, type ComputedRef } from 'vue'
+import type { RPGDate } from "@/models/Date"
+import { storeToRefs } from "pinia"
+import { computed, type ComputedRef } from "vue"
 
-const { currentDate, defaultDate, selectDate } = useCalendar()
-const { selectedDate } = storeToRefs(useCalendar())
-const { currentEvents } = storeToRefs(useCalendarEvents())
+const { currentDate, defaultDate, selectDate, areDatesIdentical } = useCalendar()
+const { selectedDate, currentEvents } = storeToRefs(useCalendar())
 
 const props = defineProps<{
   monthNumber: number
   dayNumber: number
 }>()
 
-const { areDatesIdentical } = useCalendar()
-
 const tileDate: ComputedRef<RPGDate> = computed(() => {
   return {
     day: props.dayNumber,
diff --git a/components/calendar/state/yearly/Layout.vue b/components/calendar/state/yearly/Layout.vue
index 3c9273d..28a2ea8 100644
--- a/components/calendar/state/yearly/Layout.vue
+++ b/components/calendar/state/yearly/Layout.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useCalendar } from '@/stores/CalendarStore'
-import { useThrottleFn } from '@vueuse/core'
+import { useCalendar } from "@/stores/CalendarStore"
+import { useThrottleFn } from "@vueuse/core"
 
-const { decrementYear, incrementYear } = useCalendar()
+const { decrementViewYear, incrementViewYear } = useCalendar()
 const { sortedMonths: months } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
@@ -15,11 +15,11 @@ function handleWheel(e: WheelEvent) {
 }
 
 const moveCalendarLeft = useThrottleFn(() => {
-  decrementYear()
+  decrementViewYear()
 }, 100)
 
 const moveCalendarRight = useThrottleFn(() => {
-  incrementYear()
+  incrementViewYear()
 }, 100)
 </script>
 
diff --git a/components/calendar/state/yearly/MonthTile.vue b/components/calendar/state/yearly/MonthTile.vue
index 21f2ad6..03d82f9 100644
--- a/components/calendar/state/yearly/MonthTile.vue
+++ b/components/calendar/state/yearly/MonthTile.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { CalendarMonth } from '~/models/CalendarMonth';
+import type { CalendarMonth } from "~/models/CalendarMonth";
 
 defineProps<{
   month: CalendarMonth
diff --git a/components/global/Spacing.vue b/components/global/Spacing.vue
new file mode 100644
index 0000000..810c86f
--- /dev/null
+++ b/components/global/Spacing.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { cn } from "~/lib/utils";
+
+interface SpacingProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xlg" | "2xl" | "3xl"
+}
+
+const props = defineProps<SpacingProps>()
+
+let spacingClass: string
+
+switch (props.size) {
+  case "lg":
+    spacingClass = "space-y-4"
+    break;
+
+  case "md":
+  default:
+    spacingClass = "space-y-2"
+    break;
+}
+</script>
+
+<template>
+  <div
+    :class="cn(spacingClass)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/global/sidebar/Sidebar.vue b/components/global/sidebar/Sidebar.vue
index fc92882..8b62724 100644
--- a/components/global/sidebar/Sidebar.vue
+++ b/components/global/sidebar/Sidebar.vue
@@ -1,18 +1,14 @@
 <script lang="ts" setup>
-import { PhHouse, PhList } from '@phosphor-icons/vue'
-import type { SidebarMenuActionType } from './SidebarProps';
-
-const route = useRoute()
-
-const isHome = computed<boolean>(() => {
-  return route.fullPath === '/'
-})
+import { PhGlobeHemisphereWest, PhHouse, PhList } from "@phosphor-icons/vue"
+import type { SidebarMenuActionType } from "./SidebarProps";
 
 const { revealAdvancedSearch } = useCalendar()
 const { currentMenu } = storeToRefs(useUiStore())
 
+const user = useSupabaseUser()
+
 function handleMenuItemAction(actionType: SidebarMenuActionType) {
-  if (actionType === 'event-search') {
+  if (actionType === "event-search") {
     revealAdvancedSearch()
   }
 }
@@ -27,25 +23,46 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
         </UiButton>
       </li>
 
-      <li v-if="!isHome">
-        <UiTooltipProvider :delay-duration="100">
-          <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'">
-              <p>Retourner aux outils</p>
-            </UiTooltipContent>
-          </UiTooltip>
-        </UiTooltipProvider>
-      </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-for="(item, i) in currentMenu" :key="i">
-        <UiTooltipProvider :delay-duration="100">
+        <UiTooltipProvider :delay-duration="50">
           <UiTooltip>
             <UiTooltipTrigger as-child>
               <UiButton v-if="item.to" variant="ghost" size="icon" class="rounded-full" as-child>
@@ -57,7 +74,7 @@ function handleMenuItemAction(actionType: SidebarMenuActionType) {
                 <component :is="item.phIcon" size="24" weight="fill" />
               </UiButton>
             </UiTooltipTrigger>
-            <UiTooltipContent :side="'right'">
+            <UiTooltipContent :side="'right'" :side-offset="6">
               <p>{{ item.tooltip }}</p>
             </UiTooltipContent>
           </UiTooltip>
diff --git a/components/global/sidebar/SidebarProps.ts b/components/global/sidebar/SidebarProps.ts
index bb3cd9e..ef80e7e 100644
--- a/components/global/sidebar/SidebarProps.ts
+++ b/components/global/sidebar/SidebarProps.ts
@@ -3,7 +3,7 @@ import type { ShallowRef } from "vue"
 export type SidebarMenuActionType = "event-search"
 
 export interface SidebarMenuItem {
-  phIcon: ShallowRef
+  phIcon: ShallowRef // use shallowRef to build phIcon
   tooltip: string
   action?: SidebarMenuActionType
   to?: string
diff --git a/components/global/user/CTA.vue b/components/global/user/CTA.vue
index d2618db..781967f 100644
--- a/components/global/user/CTA.vue
+++ b/components/global/user/CTA.vue
@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from "vue"
 
-import { PhUserCircle } from '@phosphor-icons/vue'
+import { PhGear, PhGlobeHemisphereWest, PhLaptop, PhMoon, PhPalette, PhSignOut, PhSun, PhTranslate, PhUserCircle } from "@phosphor-icons/vue"
 
 const router = useRouter()
+const { preference } = useColorMode()
 
 const { auth } = useSupabaseClient()
 const user = useSupabaseUser()
 const userMeta = computed(() => user.value?.user_metadata)
+const profileUrl: string = `${useRequestURL().origin}/my/`
 
 const menuOpened = ref<boolean>(false)
 
@@ -19,12 +21,13 @@ watch(user, closeMenu)
 async function handleGoogleLogin() {
   try {
     auth.signInWithOAuth({
-      provider: 'google',
+      provider: "google",
       options: {
         queryParams: {
-          access_type: 'offline',
-          prompt: 'consent'
-        }
+          access_type: "offline",
+          prompt: "consent"
+        },
+        redirectTo: profileUrl
       }
     })
   } catch (err) {
@@ -42,17 +45,20 @@ async function handleLogout() {
   }
 }
 
-function gotoProfilePage() {
-  router.push({ path: '/profile' })
+type AvailableRoutes = "/my" | "/my/settings"
+
+function pushRoute(to: AvailableRoutes) {
+  router.push({ path: to })
 
   closeMenu()
 }
 </script>
 
 <template>
+  {{ preference }}
   <ClientOnly>
-    <UiPopover v-model:open="menuOpened">
-      <UiPopoverTrigger>
+    <UiDropdownMenu v-model:open="menuOpened">
+      <UiDropdownMenuTrigger>
         <UiAvatar v-if="user" class="cursor-pointer">
           <UiAvatarImage
             :src="userMeta?.avatar_url"
@@ -64,20 +70,84 @@ function gotoProfilePage() {
         <UiButton v-else variant="outline" size="icon">
           <PhUserCircle size="18" />
         </UiButton>
-      </UiPopoverTrigger>
-      <UiPopoverContent class="w-fit p-0" :align="'start'" :side="'top'" :collision-padding="20">
-        <UiCommand>
-          <UiCommandList v-if="user">
-            <UiCommandGroup :heading="`Connecté en tant que ${user?.email}`">
-              <UiCommandItem value="profile" @select="gotoProfilePage"> Profil </UiCommandItem>
-              <UiCommandItem value="logout" @select="handleLogout"> Déconnexion </UiCommandItem>
-            </UiCommandGroup>
-          </UiCommandList>
-          <UiCommandList v-else>
-            <UiCommandItem value="logout" @select="handleGoogleLogin"> Connexion </UiCommandItem>
-          </UiCommandList>
-        </UiCommand>
-      </UiPopoverContent>
-    </UiPopover>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-fit p-0" :align="'start'" :side="'top'" :side-offset="10" :align-offset="25" :collision-padding="40">
+
+        <template v-if="user">
+          <p class="p-2 text-xs opacity-75">Connecté en tant que {{ user?.email }}</p>
+
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my')">
+            <PhGlobeHemisphereWest size="20" weight="fill" />
+            <span>Mondes</span>
+          </UiDropdownMenuItem>
+
+          <UiDropdownMenuSeparator />
+
+          <UiDropdownMenuSub>
+            <UiDropdownMenuSubTrigger class="p-0">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-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" />
+                  <span>Sombre</span>
+                </UiDropdownMenuItem>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'light'">
+                  <PhSun size="20" />
+                  <span>Clair</span>
+                </UiDropdownMenuItem>
+                <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="$colorMode.preference = 'system'">
+                  <PhLaptop size="20" />
+                  <span>Système</span>
+                </UiDropdownMenuItem>
+              </UiDropdownMenuSubContent>
+            </UiDropdownMenuPortal>
+          </UiDropdownMenuSub>
+
+          <UiDropdownMenuSub>
+            <UiDropdownMenuSubTrigger class="p-0">
+              <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                <PhTranslate size="20" />
+                <span>Langage</span>
+              </UiDropdownMenuItem>
+            </UiDropdownMenuSubTrigger>
+            <UiDropdownMenuPortal>
+              <UiDropdownMenuSubContent>
+                <UiDropdownMenuSubContent>
+                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                    <span>Français</span>
+                  </UiDropdownMenuItem>
+                  <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none">
+                    <span>English</span>
+                  </UiDropdownMenuItem>
+                </UiDropdownMenuSubContent>
+              </UiDropdownMenuSubContent>
+            </UiDropdownMenuPortal>
+          </UiDropdownMenuSub>
+
+          <UiDropdownMenuSeparator />
+
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="pushRoute('/my/settings')">
+            <PhGear size="20" weight="fill" />
+            <span>Compte</span>
+          </UiDropdownMenuItem>
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleLogout">
+            <PhSignOut size="20" weight="fill" />
+            <span>Déconnexion</span>
+          </UiDropdownMenuItem>
+        </template>
+
+        <template v-else>
+          <UiDropdownMenuItem class="flex gap-[.5ch] items-center rounded-none" @click="handleGoogleLogin">
+            <PhGear size="20" weight="fill" />
+            <span>Connexion</span>
+          </UiDropdownMenuItem>
+        </template>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>
   </ClientOnly>
 </template>
diff --git a/components/ui/alert-dialog/AlertDialog.vue b/components/ui/alert-dialog/AlertDialog.vue
index 8fb30de..93a4623 100644
--- a/components/ui/alert-dialog/AlertDialog.vue
+++ b/components/ui/alert-dialog/AlertDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from "radix-vue"
 
 const props = defineProps<AlertDialogProps>()
 const emits = defineEmits<AlertDialogEmits>()
diff --git a/components/ui/alert-dialog/AlertDialogAction.vue b/components/ui/alert-dialog/AlertDialogAction.vue
index d3414bf..e8d2a70 100644
--- a/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button/index'
+import { type HTMLAttributes, computed } from "vue"
+import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button/index"
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/alert-dialog/AlertDialogCancel.vue b/components/ui/alert-dialog/AlertDialogCancel.vue
index 08302c0..95ff9df 100644
--- a/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button/index'
+import { type HTMLAttributes, computed } from "vue"
+import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button/index"
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/alert-dialog/AlertDialogClose.vue b/components/ui/alert-dialog/AlertDialogClose.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/ui/alert-dialog/AlertDialogContent.vue b/components/ui/alert-dialog/AlertDialogContent.vue
index 9f09909..2695e23 100644
--- a/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/components/ui/alert-dialog/AlertDialogContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -7,10 +7,10 @@ import {
   AlertDialogOverlay,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
 
 const delegatedProps = computed(() => {
@@ -25,13 +25,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogContent
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )
       "
diff --git a/components/ui/alert-dialog/AlertDialogDescription.vue b/components/ui/alert-dialog/AlertDialogDescription.vue
index 9682cbb..60c2da2 100644
--- a/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/alert-dialog/AlertDialogFooter.vue b/components/ui/alert-dialog/AlertDialogFooter.vue
index 55d0a0e..c764e73 100644
--- a/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/alert-dialog/AlertDialogHeader.vue b/components/ui/alert-dialog/AlertDialogHeader.vue
index c61c449..b5e5540 100644
--- a/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/alert-dialog/AlertDialogTitle.vue b/components/ui/alert-dialog/AlertDialogTitle.vue
index 50c583d..0498b1e 100644
--- a/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/alert-dialog/AlertDialogTrigger.vue b/components/ui/alert-dialog/AlertDialogTrigger.vue
index 4f5e2fd..6d876f0 100644
--- a/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from "radix-vue"
 
 const props = defineProps<AlertDialogTriggerProps>()
 </script>
diff --git a/components/ui/alert-dialog/index.ts b/components/ui/alert-dialog/index.ts
index 91d138a..6991bb7 100644
--- a/components/ui/alert-dialog/index.ts
+++ b/components/ui/alert-dialog/index.ts
@@ -1,9 +1,9 @@
-export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
-export { default as AlertDialogAction } from './AlertDialogAction.vue'
-export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
index 5b7b9fb..c479d77 100644
--- a/components/ui/avatar/Avatar.vue
+++ b/components/ui/avatar/Avatar.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'radix-vue'
-import { type AvatarVariants, avatarVariant } from '.'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "radix-vue"
+import { type AvatarVariants, avatarVariant } from "."
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  size?: AvatarVariants['size']
-  shape?: AvatarVariants['shape']
+  class?: HTMLAttributes["class"]
+  size?: AvatarVariants["size"]
+  shape?: AvatarVariants["shape"]
 }>(), {
-  size: 'sm',
-  shape: 'circle',
+  size: "sm",
+  shape: "circle",
 })
 </script>
 
diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
index a671a21..440186b 100644
--- a/components/ui/avatar/AvatarFallback.vue
+++ b/components/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback, type AvatarFallbackProps } from "radix-vue"
 
 const props = defineProps<AvatarFallbackProps>()
 </script>
diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
index 43499fa..2f4eceb 100644
--- a/components/ui/avatar/AvatarImage.vue
+++ b/components/ui/avatar/AvatarImage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+import { AvatarImage, type AvatarImageProps } from "radix-vue"
 
 const props = defineProps<AvatarImageProps>()
 </script>
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
index c4af1a6..9b393a2 100644
--- a/components/ui/avatar/index.ts
+++ b/components/ui/avatar/index.ts
@@ -1,21 +1,21 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
 
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
 
 export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",
   {
     variants: {
       size: {
-        sm: 'h-10 w-10 text-xs',
-        base: 'h-16 w-16 text-2xl',
-        lg: 'h-32 w-32 text-5xl',
+        sm: "h-10 w-10 text-xs",
+        base: "h-16 w-16 text-2xl",
+        lg: "h-32 w-32 text-5xl",
       },
       shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md',
+        circle: "rounded-full",
+        square: "rounded-md",
       },
     },
   },
diff --git a/components/ui/badge/Badge.vue b/components/ui/badge/Badge.vue
index 2e8bdff..5b19716 100644
--- a/components/ui/badge/Badge.vue
+++ b/components/ui/badge/Badge.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { type BadgeVariants, badgeVariants } from '.'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { type BadgeVariants, badgeVariants } from "."
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/badge/index.ts b/components/ui/badge/index.ts
index d90c2ef..9db7cf6 100644
--- a/components/ui/badge/index.ts
+++ b/components/ui/badge/index.ts
@@ -1,23 +1,23 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
 
-export { default as Badge } from './Badge.vue'
+export { default as Badge } from "./Badge.vue"
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
 )
diff --git a/components/ui/button/Button.vue b/components/ui/button/Button.vue
index 6e56542..f366883 100644
--- a/components/ui/button/Button.vue
+++ b/components/ui/button/Button.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'radix-vue'
-import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { Primitive, type PrimitiveProps } from "radix-vue"
+import { type ButtonVariants, buttonVariants } from "."
+import { cn } from "@/lib/utils"
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
   searchSlash?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: 'button'
+  as: "button"
 })
 </script>
 
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
index eba3552..e782ef6 100644
--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@@ -1,30 +1,30 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
 
-export { default as Button } from './Button.vue'
+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-50",
   {
     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',
-        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'
+        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",
+        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"
       },
       size: {
-        default: 'h-10 px-4 py-2',
-        xs: 'h-7 rounded-sm px-2 text-xs',
-        sm: 'h-9 rounded-md px-3 text-sm',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10'
+        default: "h-10 px-4 py-2",
+        xs: "h-7 rounded-sm px-2 text-xs",
+        sm: "h-9 rounded-md px-3 text-sm",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
       }
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: "default",
+      size: "default"
     }
   }
 )
diff --git a/components/ui/card/Card.vue b/components/ui/card/Card.vue
index 18bebb2..ca0812f 100644
--- a/components/ui/card/Card.vue
+++ b/components/ui/card/Card.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
   link?: string
 }>()
 </script>
@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
   <div
     :class="
-      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all', props.class, {
+      cn('rounded-lg border bg-card text-card-foreground shadow-sm transition-all isolate', props.class, {
         'relative outline outline-2 outline-offset-4 outline-transparent hover:-translate-y-[.2rem]':
           props.link
       })
@@ -22,7 +22,7 @@ const props = defineProps<{
     <NuxtLink
       v-if="props.link"
       :to="props.link"
-      class="absolute inset-0 focus-visible:outline-none"
+      class="absolute inset-0 z-10 focus-visible:outline-none"
     />
   </div>
 </template>
diff --git a/components/ui/card/CardContent.vue b/components/ui/card/CardContent.vue
index 785913a..4c4dfc7 100644
--- a/components/ui/card/CardContent.vue
+++ b/components/ui/card/CardContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/card/CardDescription.vue b/components/ui/card/CardDescription.vue
index 52a5c90..ad948d6 100644
--- a/components/ui/card/CardDescription.vue
+++ b/components/ui/card/CardDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/card/CardFooter.vue b/components/ui/card/CardFooter.vue
index 1ed2efe..fad3928 100644
--- a/components/ui/card/CardFooter.vue
+++ b/components/ui/card/CardFooter.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/card/CardHeader.vue b/components/ui/card/CardHeader.vue
index 951d227..119700c 100644
--- a/components/ui/card/CardHeader.vue
+++ b/components/ui/card/CardHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/card/CardTitle.vue b/components/ui/card/CardTitle.vue
index 842e168..d0c0ea7 100644
--- a/components/ui/card/CardTitle.vue
+++ b/components/ui/card/CardTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/card/index.ts b/components/ui/card/index.ts
index 8170483..450fe5c 100644
--- a/components/ui/card/index.ts
+++ b/components/ui/card/index.ts
@@ -1,6 +1,6 @@
-export { default as Card } from './Card.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'
+export { default as Card } from "./Card.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardFooter } from "./CardFooter.vue"
diff --git a/components/ui/checkbox/Checkbox.vue b/components/ui/checkbox/Checkbox.vue
index 4621bf7..6e848aa 100644
--- a/components/ui/checkbox/Checkbox.vue
+++ b/components/ui/checkbox/Checkbox.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue"
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "radix-vue"
+import { Check } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<CheckboxRootEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/checkbox/index.ts b/components/ui/checkbox/index.ts
index 8c28c28..3391a85 100644
--- a/components/ui/checkbox/index.ts
+++ b/components/ui/checkbox/index.ts
@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox.vue'
+export { default as Checkbox } from "./Checkbox.vue"
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
index b1c809c..d1f2494 100644
--- a/components/ui/command/Command.vue
+++ b/components/ui/command/Command.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue"
+import { ComboboxRoot, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(), {
   open: true,
-  modelValue: ''
+  modelValue: ""
 })
 
 const emits = defineEmits<ComboboxRootEmits>()
diff --git a/components/ui/command/CommandDialog.vue b/components/ui/command/CommandDialog.vue
index 2b19c30..3d9e4d9 100644
--- a/components/ui/command/CommandDialog.vue
+++ b/components/ui/command/CommandDialog.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import Command from './Command.vue'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
+import { useForwardPropsEmits } from "radix-vue"
+import type { DialogRootEmits, DialogRootProps } from "radix-vue"
+import Command from "./Command.vue"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/components/ui/command/CommandEmpty.vue b/components/ui/command/CommandEmpty.vue
index 1295d2a..f2d7c11 100644
--- a/components/ui/command/CommandEmpty.vue
+++ b/components/ui/command/CommandEmpty.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxEmptyProps } from 'radix-vue'
-import { ComboboxEmpty } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxEmptyProps } from "radix-vue"
+import { ComboboxEmpty } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/command/CommandGroup.vue b/components/ui/command/CommandGroup.vue
index 3a4422b..a727494 100644
--- a/components/ui/command/CommandGroup.vue
+++ b/components/ui/command/CommandGroup.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxGroupProps } from 'radix-vue'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxGroupProps } from "radix-vue"
+import { ComboboxGroup, ComboboxLabel } from "radix-vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<
   ComboboxGroupProps & {
-    class?: HTMLAttributes['class']
+    class?: HTMLAttributes["class"]
     heading?: string
   }
 >()
diff --git a/components/ui/command/CommandInput.vue b/components/ui/command/CommandInput.vue
index 936f789..f7414d8 100644
--- a/components/ui/command/CommandInput.vue
+++ b/components/ui/command/CommandInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Search } from 'lucide-vue-next'
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { Search } from "lucide-vue-next"
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false
@@ -10,7 +10,7 @@ defineOptions({
 
 const props = defineProps<
   ComboboxInputProps & {
-    class?: HTMLAttributes['class']
+    class?: HTMLAttributes["class"]
   }
 >()
 
diff --git a/components/ui/command/CommandItem.vue b/components/ui/command/CommandItem.vue
index 027fca1..12fc534 100644
--- a/components/ui/command/CommandItem.vue
+++ b/components/ui/command/CommandItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue"
+import { ComboboxItem, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<ComboboxItemEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/command/CommandList.vue b/components/ui/command/CommandList.vue
index 265317b..b9b88de 100644
--- a/components/ui/command/CommandList.vue
+++ b/components/ui/command/CommandList.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue"
+import { ComboboxContent, useForwardPropsEmits } from "radix-vue"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     dismissable: false
   }
diff --git a/components/ui/command/CommandSeparator.vue b/components/ui/command/CommandSeparator.vue
index 2d83d0f..11395f1 100644
--- a/components/ui/command/CommandSeparator.vue
+++ b/components/ui/command/CommandSeparator.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import type { ComboboxSeparatorProps } from 'radix-vue'
-import { ComboboxSeparator } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import type { ComboboxSeparatorProps } from "radix-vue"
+import { ComboboxSeparator } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/command/CommandShortcut.vue b/components/ui/command/CommandShortcut.vue
index 0d4da92..6d95d73 100644
--- a/components/ui/command/CommandShortcut.vue
+++ b/components/ui/command/CommandShortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/command/index.ts b/components/ui/command/index.ts
index 95d4b5f..c59454c 100644
--- a/components/ui/command/index.ts
+++ b/components/ui/command/index.ts
@@ -1,11 +1,11 @@
-export { ComboboxPortal } from 'radix-vue'
+export { ComboboxPortal } from "radix-vue"
 
-export { default as Command } from './Command.vue'
-export { default as CommandDialog } from './CommandDialog.vue'
-export { default as CommandEmpty } from './CommandEmpty.vue'
-export { default as CommandGroup } from './CommandGroup.vue'
-export { default as CommandInput } from './CommandInput.vue'
-export { default as CommandItem } from './CommandItem.vue'
-export { default as CommandList } from './CommandList.vue'
-export { default as CommandSeparator } from './CommandSeparator.vue'
-export { default as CommandShortcut } from './CommandShortcut.vue'
+export { default as Command } from "./Command.vue"
+export { default as CommandDialog } from "./CommandDialog.vue"
+export { default as CommandEmpty } from "./CommandEmpty.vue"
+export { default as CommandGroup } from "./CommandGroup.vue"
+export { default as CommandInput } from "./CommandInput.vue"
+export { default as CommandItem } from "./CommandItem.vue"
+export { default as CommandList } from "./CommandList.vue"
+export { default as CommandSeparator } from "./CommandSeparator.vue"
+export { default as CommandShortcut } from "./CommandShortcut.vue"
diff --git a/components/ui/dialog/Dialog.vue b/components/ui/dialog/Dialog.vue
index 7f26e47..9374bf3 100644
--- a/components/ui/dialog/Dialog.vue
+++ b/components/ui/dialog/Dialog.vue
@@ -4,7 +4,7 @@ import {
   type DialogRootEmits,
   type DialogRootProps,
   useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
diff --git a/components/ui/dialog/DialogClose.vue b/components/ui/dialog/DialogClose.vue
index a64703e..7199c71 100644
--- a/components/ui/dialog/DialogClose.vue
+++ b/components/ui/dialog/DialogClose.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue'
+import { DialogClose, type DialogCloseProps } from "radix-vue"
 
 const props = defineProps<DialogCloseProps>()
 </script>
diff --git a/components/ui/dialog/DialogContent.vue b/components/ui/dialog/DialogContent.vue
index 76ee2f7..8792702 100644
--- a/components/ui/dialog/DialogContent.vue
+++ b/components/ui/dialog/DialogContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DialogClose,
   DialogContent,
@@ -8,11 +8,11 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits
-} from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { X } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/dialog/DialogDescription.vue b/components/ui/dialog/DialogDescription.vue
index 3637b7e..ab1a3f0 100644
--- a/components/ui/dialog/DialogDescription.vue
+++ b/components/ui/dialog/DialogDescription.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/dialog/DialogFooter.vue b/components/ui/dialog/DialogFooter.vue
index c6f5d4e..ab53daf 100644
--- a/components/ui/dialog/DialogFooter.vue
+++ b/components/ui/dialog/DialogFooter.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
diff --git a/components/ui/dialog/DialogHeader.vue b/components/ui/dialog/DialogHeader.vue
index e22a1fd..ee1b66a 100644
--- a/components/ui/dialog/DialogHeader.vue
+++ b/components/ui/dialog/DialogHeader.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/dialog/DialogScrollContent.vue b/components/ui/dialog/DialogScrollContent.vue
index 424fde4..fe9b532 100644
--- a/components/ui/dialog/DialogScrollContent.vue
+++ b/components/ui/dialog/DialogScrollContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DialogClose,
   DialogContent,
@@ -8,11 +8,11 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits
-} from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { X } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/dialog/DialogTitle.vue b/components/ui/dialog/DialogTitle.vue
index 0a1c94c..9608b82 100644
--- a/components/ui/dialog/DialogTitle.vue
+++ b/components/ui/dialog/DialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/dialog/DialogTrigger.vue b/components/ui/dialog/DialogTrigger.vue
index ee0c12f..c624db8 100644
--- a/components/ui/dialog/DialogTrigger.vue
+++ b/components/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue"
 
 const props = defineProps<DialogTriggerProps>()
 </script>
diff --git a/components/ui/dialog/index.ts b/components/ui/dialog/index.ts
index 847e999..d03797d 100644
--- a/components/ui/dialog/index.ts
+++ b/components/ui/dialog/index.ts
@@ -1,9 +1,9 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogFooter } from './DialogFooter.vue'
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
diff --git a/components/ui/dropdown-menu/DropdownMenu.vue b/components/ui/dropdown-menu/DropdownMenu.vue
index 0f9cd7b..2751f86 100644
--- a/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/components/ui/dropdown-menu/DropdownMenu.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuRootEmits,
   type DropdownMenuRootProps,
   useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"
 
 const props = defineProps<DropdownMenuRootProps>()
 const emits = defineEmits<DropdownMenuRootEmits>()
diff --git a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index bd9cf5f..c132cda 100644
--- a/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits
-} from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { Check } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/dropdown-menu/DropdownMenuContent.vue b/components/ui/dropdown-menu/DropdownMenuContent.vue
index fd88f22..e224485 100644
--- a/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
   type DropdownMenuContentProps,
   DropdownMenuPortal,
   useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     sideOffset: 4
   }
diff --git a/components/ui/dropdown-menu/DropdownMenuGroup.vue b/components/ui/dropdown-menu/DropdownMenuGroup.vue
index 3f20135..18d078b 100644
--- a/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue"
 
 const props = defineProps<DropdownMenuGroupProps>()
 </script>
diff --git a/components/ui/dropdown-menu/DropdownMenuItem.vue b/components/ui/dropdown-menu/DropdownMenuItem.vue
index 5774ca5..7631910 100644
--- a/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<
-  DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
+  DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }
 >()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/dropdown-menu/DropdownMenuLabel.vue b/components/ui/dropdown-menu/DropdownMenuLabel.vue
index d95f5eb..ee0eaf7 100644
--- a/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<
-  DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
+  DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
 >()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index b6d1fcc..73ff5be 100644
--- a/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuRadioGroupEmits,
   type DropdownMenuRadioGroupProps,
   useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"
 
 const props = defineProps<DropdownMenuRadioGroupProps>()
 const emits = defineEmits<DropdownMenuRadioGroupEmits>()
diff --git a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index a8fc03e..82b8205 100644
--- a/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits
-} from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { Circle } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>()
 
diff --git a/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index e4953df..5f2b094 100644
--- a/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<
   DropdownMenuSeparatorProps & {
-    class?: HTMLAttributes['class']
+    class?: HTMLAttributes["class"]
   }
 >()
 
diff --git a/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
index abaeda6..9367641 100644
--- a/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
diff --git a/components/ui/dropdown-menu/DropdownMenuSub.vue b/components/ui/dropdown-menu/DropdownMenuSub.vue
index d01e1ae..3567f1d 100644
--- a/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -4,7 +4,7 @@ import {
   type DropdownMenuSubEmits,
   type DropdownMenuSubProps,
   useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"
 
 const props = defineProps<DropdownMenuSubProps>()
 const emits = defineEmits<DropdownMenuSubEmits>()
diff --git a/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 5ba1ec6..5ae0705 100644
--- a/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index cd15395..12cd05b 100644
--- a/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps
-} from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { ChevronRight } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index 8efd5a9..96a1a0f 100644
--- a/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from "radix-vue"
 
 const props = defineProps<DropdownMenuTriggerProps>()
 
diff --git a/components/ui/dropdown-menu/index.ts b/components/ui/dropdown-menu/index.ts
index 6f9446c..7e62fd1 100644
--- a/components/ui/dropdown-menu/index.ts
+++ b/components/ui/dropdown-menu/index.ts
@@ -1,16 +1,16 @@
-export { DropdownMenuPortal } from 'radix-vue'
+export { DropdownMenuPortal } from "radix-vue"
 
-export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenu } from "./DropdownMenu.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
diff --git a/components/ui/input/Input.vue b/components/ui/input/Input.vue
index 808c921..7d85113 100644
--- a/components/ui/input/Input.vue
+++ b/components/ui/input/Input.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { useVModel } from "@vueuse/core"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
   defaultValue?: string | number
   modelValue?: string | number
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
+  (e: "update:modelValue", payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue
 })
@@ -28,5 +28,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
         props.class
       )
     "
-  />
+  >
 </template>
diff --git a/components/ui/input/index.ts b/components/ui/input/index.ts
index a691dd6..9976b86 100644
--- a/components/ui/input/index.ts
+++ b/components/ui/input/index.ts
@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from "./Input.vue"
diff --git a/components/ui/label/Label.vue b/components/ui/label/Label.vue
index 8fba8db..a2eb35f 100644
--- a/components/ui/label/Label.vue
+++ b/components/ui/label/Label.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Label, type LabelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { Label, type LabelProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/label/index.ts b/components/ui/label/index.ts
index 572c2f0..036e35c 100644
--- a/components/ui/label/index.ts
+++ b/components/ui/label/index.ts
@@ -1 +1 @@
-export { default as Label } from './Label.vue'
+export { default as Label } from "./Label.vue"
diff --git a/components/ui/pagination/PaginationEllipsis.vue b/components/ui/pagination/PaginationEllipsis.vue
index a58de39..a9ac15a 100644
--- a/components/ui/pagination/PaginationEllipsis.vue
+++ b/components/ui/pagination/PaginationEllipsis.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
-import { MoreHorizontal } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { PaginationEllipsis, type PaginationEllipsisProps } from "radix-vue"
+import { MoreHorizontal } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/pagination/PaginationFirst.vue b/components/ui/pagination/PaginationFirst.vue
index 65652b7..9fa47b8 100644
--- a/components/ui/pagination/PaginationFirst.vue
+++ b/components/ui/pagination/PaginationFirst.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
-import { ChevronsLeft } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { PaginationFirst, type PaginationFirstProps } from "radix-vue"
+import { ChevronsLeft } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PaginationFirstProps & { class?: HTMLAttributes["class"] }>(),
   {
     asChild: true
   }
diff --git a/components/ui/pagination/PaginationLast.vue b/components/ui/pagination/PaginationLast.vue
index 3c254c2..29a72c3 100644
--- a/components/ui/pagination/PaginationLast.vue
+++ b/components/ui/pagination/PaginationLast.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationLast, type PaginationLastProps } from 'radix-vue'
-import { ChevronsRight } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { PaginationLast, type PaginationLastProps } from "radix-vue"
+import { ChevronsRight } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PaginationLastProps & { class?: HTMLAttributes["class"] }>(),
   {
     asChild: true
   }
diff --git a/components/ui/pagination/PaginationNext.vue b/components/ui/pagination/PaginationNext.vue
index 02c156c..fd4c329 100644
--- a/components/ui/pagination/PaginationNext.vue
+++ b/components/ui/pagination/PaginationNext.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationNext, type PaginationNextProps } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { PaginationNext, type PaginationNextProps } from "radix-vue"
+import { ChevronRight } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PaginationNextProps & { class?: HTMLAttributes["class"] }>(),
   {
     asChild: true
   }
diff --git a/components/ui/pagination/PaginationPrev.vue b/components/ui/pagination/PaginationPrev.vue
index 9821666..8388bfe 100644
--- a/components/ui/pagination/PaginationPrev.vue
+++ b/components/ui/pagination/PaginationPrev.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
-import { ChevronLeft } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { PaginationPrev, type PaginationPrevProps } from "radix-vue"
+import { ChevronLeft } from "lucide-vue-next"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
-  defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PaginationPrevProps & { class?: HTMLAttributes["class"] }>(),
   {
     asChild: true
   }
diff --git a/components/ui/pagination/index.ts b/components/ui/pagination/index.ts
index d42dd72..b7f1503 100644
--- a/components/ui/pagination/index.ts
+++ b/components/ui/pagination/index.ts
@@ -1,6 +1,6 @@
-export { PaginationRoot as Pagination, PaginationList, PaginationListItem } from 'radix-vue'
-export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
-export { default as PaginationFirst } from './PaginationFirst.vue'
-export { default as PaginationLast } from './PaginationLast.vue'
-export { default as PaginationNext } from './PaginationNext.vue'
-export { default as PaginationPrev } from './PaginationPrev.vue'
+export { PaginationRoot as Pagination, PaginationList, PaginationListItem } from "radix-vue"
+export { default as PaginationEllipsis } from "./PaginationEllipsis.vue"
+export { default as PaginationFirst } from "./PaginationFirst.vue"
+export { default as PaginationLast } from "./PaginationLast.vue"
+export { default as PaginationNext } from "./PaginationNext.vue"
+export { default as PaginationPrev } from "./PaginationPrev.vue"
diff --git a/components/ui/popover/Popover.vue b/components/ui/popover/Popover.vue
index 1a5873a..6e28ab9 100644
--- a/components/ui/popover/Popover.vue
+++ b/components/ui/popover/Popover.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from "radix-vue"
+import type { PopoverRootEmits, PopoverRootProps } from "radix-vue"
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()
diff --git a/components/ui/popover/PopoverContent.vue b/components/ui/popover/PopoverContent.vue
index 5136fd6..0bf3a79 100644
--- a/components/ui/popover/PopoverContent.vue
+++ b/components/ui/popover/PopoverContent.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   PopoverContent,
   type PopoverContentEmits,
   type PopoverContentProps,
   PopoverPortal,
   useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false
 })
 
 const props = withDefaults(
-  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
   {
-    align: 'center',
+    align: "center",
     sideOffset: 4
   }
 )
diff --git a/components/ui/popover/PopoverTrigger.vue b/components/ui/popover/PopoverTrigger.vue
index 22f4772..39eb990 100644
--- a/components/ui/popover/PopoverTrigger.vue
+++ b/components/ui/popover/PopoverTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+import { PopoverTrigger, type PopoverTriggerProps } from "radix-vue"
 
 const props = defineProps<PopoverTriggerProps>()
 </script>
diff --git a/components/ui/popover/index.ts b/components/ui/popover/index.ts
index 495d55a..e5a794a 100644
--- a/components/ui/popover/index.ts
+++ b/components/ui/popover/index.ts
@@ -1,3 +1,3 @@
-export { default as Popover } from './Popover.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'
-export { default as PopoverContent } from './PopoverContent.vue'
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
diff --git a/components/ui/progress/Progress.vue b/components/ui/progress/Progress.vue
new file mode 100644
index 0000000..74a5097
--- /dev/null
+++ b/components/ui/progress/Progress.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from "radix-vue"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/components/ui/progress/index.ts b/components/ui/progress/index.ts
new file mode 100644
index 0000000..8598b96
--- /dev/null
+++ b/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
index adc42fd..d5daaef 100644
--- a/components/ui/select/Select.vue
+++ b/components/ui/select/Select.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from "radix-vue"
+import { SelectRoot, useForwardPropsEmits } from "radix-vue"
 
 const props = defineProps<SelectRootProps>()
 const emits = defineEmits<SelectRootEmits>()
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
index 5371217..2b0473f 100644
--- a/components/ui/select/SelectContent.vue
+++ b/components/ui/select/SelectContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   SelectContent,
   type SelectContentEmits,
@@ -7,18 +7,18 @@ import {
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits
-} from 'radix-vue'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false
 })
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
   {
-    position: 'popper'
+    position: "popper"
   }
 )
 const emits = defineEmits<SelectContentEmits>()
diff --git a/components/ui/select/SelectGroup.vue b/components/ui/select/SelectGroup.vue
index 407d8ad..4ebbab5 100644
--- a/components/ui/select/SelectGroup.vue
+++ b/components/ui/select/SelectGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { SelectGroup, type SelectGroupProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/select/SelectItem.vue b/components/ui/select/SelectItem.vue
index c180b2c..7b84e43 100644
--- a/components/ui/select/SelectItem.vue
+++ b/components/ui/select/SelectItem.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   SelectItem,
   SelectItemIndicator,
   type SelectItemProps,
   SelectItemText,
   useForwardProps
-} from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { Check } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/select/SelectItemText.vue b/components/ui/select/SelectItemText.vue
index a0bb5c2..acc28f3 100644
--- a/components/ui/select/SelectItemText.vue
+++ b/components/ui/select/SelectItemText.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+import { SelectItemText, type SelectItemTextProps } from "radix-vue"
 
 const props = defineProps<SelectItemTextProps>()
 </script>
diff --git a/components/ui/select/SelectLabel.vue b/components/ui/select/SelectLabel.vue
index 3d45cdb..87a209d 100644
--- a/components/ui/select/SelectLabel.vue
+++ b/components/ui/select/SelectLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { SelectLabel, type SelectLabelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { SelectLabel, type SelectLabelProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
 </script>
 
 <template>
diff --git a/components/ui/select/SelectScrollDownButton.vue b/components/ui/select/SelectScrollDownButton.vue
index b4122b6..da47c46 100644
--- a/components/ui/select/SelectScrollDownButton.vue
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   SelectScrollDownButton,
   type SelectScrollDownButtonProps,
   useForwardProps
-} from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { ChevronDown } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/select/SelectScrollUpButton.vue b/components/ui/select/SelectScrollUpButton.vue
index 3dffaf7..115c7e5 100644
--- a/components/ui/select/SelectScrollUpButton.vue
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronUp } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from "radix-vue"
+import { ChevronUp } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/select/SelectSeparator.vue b/components/ui/select/SelectSeparator.vue
index 5ae593d..0875aa1 100644
--- a/components/ui/select/SelectSeparator.vue
+++ b/components/ui/select/SelectSeparator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { SelectSeparator, type SelectSeparatorProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/select/SelectTrigger.vue b/components/ui/select/SelectTrigger.vue
index 22f7b75..90c8e61 100644
--- a/components/ui/select/SelectTrigger.vue
+++ b/components/ui/select/SelectTrigger.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from "radix-vue"
+import { ChevronDown } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/select/SelectValue.vue b/components/ui/select/SelectValue.vue
index 4bc37dd..a132b89 100644
--- a/components/ui/select/SelectValue.vue
+++ b/components/ui/select/SelectValue.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue'
+import { SelectValue, type SelectValueProps } from "radix-vue"
 
 const props = defineProps<SelectValueProps>()
 </script>
diff --git a/components/ui/select/index.ts b/components/ui/select/index.ts
index b1d89ee..c8aeb0f 100644
--- a/components/ui/select/index.ts
+++ b/components/ui/select/index.ts
@@ -1,11 +1,11 @@
-export { default as Select } from './Select.vue'
-export { default as SelectValue } from './SelectValue.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
-export { default as SelectContent } from './SelectContent.vue'
-export { default as SelectGroup } from './SelectGroup.vue'
-export { default as SelectItem } from './SelectItem.vue'
-export { default as SelectItemText } from './SelectItemText.vue'
-export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
-export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as Select } from "./Select.vue"
+export { default as SelectValue } from "./SelectValue.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
diff --git a/components/ui/skeleton/Skeleton.vue b/components/ui/skeleton/Skeleton.vue
index b49e3d9..4e0697e 100644
--- a/components/ui/skeleton/Skeleton.vue
+++ b/components/ui/skeleton/Skeleton.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
 
 interface SkeletonProps {
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }
 
 const props = defineProps<SkeletonProps>()
diff --git a/components/ui/skeleton/index.ts b/components/ui/skeleton/index.ts
index be21fad..e5ce72c 100644
--- a/components/ui/skeleton/index.ts
+++ b/components/ui/skeleton/index.ts
@@ -1 +1 @@
-export { default as Skeleton } from './Skeleton.vue'
+export { default as Skeleton } from "./Skeleton.vue"
diff --git a/components/ui/switch/Switch.vue b/components/ui/switch/Switch.vue
index f2ee993..10fc951 100644
--- a/components/ui/switch/Switch.vue
+++ b/components/ui/switch/Switch.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   SwitchRoot,
   type SwitchRootEmits,
   type SwitchRootProps,
   SwitchThumb,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
 
 const emits = defineEmits<SwitchRootEmits>()
 
diff --git a/components/ui/switch/index.ts b/components/ui/switch/index.ts
index 87b4b17..cc081f3 100644
--- a/components/ui/switch/index.ts
+++ b/components/ui/switch/index.ts
@@ -1 +1 @@
-export { default as Switch } from './Switch.vue'
+export { default as Switch } from "./Switch.vue"
diff --git a/components/ui/tabs/Tabs.vue b/components/ui/tabs/Tabs.vue
index 2fa0971..253e5b9 100644
--- a/components/ui/tabs/Tabs.vue
+++ b/components/ui/tabs/Tabs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from "radix-vue"
+import type { TabsRootEmits, TabsRootProps } from "radix-vue"
 
 const props = defineProps<TabsRootProps>()
 const emits = defineEmits<TabsRootEmits>()
diff --git a/components/ui/tabs/TabsContent.vue b/components/ui/tabs/TabsContent.vue
index 475dc94..2d2226b 100644
--- a/components/ui/tabs/TabsContent.vue
+++ b/components/ui/tabs/TabsContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsContent, type TabsContentProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { TabsContent, type TabsContentProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tabs/TabsList.vue b/components/ui/tabs/TabsList.vue
index 4d6c7f7..c1eb4b0 100644
--- a/components/ui/tabs/TabsList.vue
+++ b/components/ui/tabs/TabsList.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsList, type TabsListProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { TabsList, type TabsListProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tabs/TabsTrigger.vue b/components/ui/tabs/TabsTrigger.vue
index 79c4dc9..b582df4 100644
--- a/components/ui/tabs/TabsTrigger.vue
+++ b/components/ui/tabs/TabsTrigger.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tabs/index.ts b/components/ui/tabs/index.ts
index fbea0c6..286abbe 100644
--- a/components/ui/tabs/index.ts
+++ b/components/ui/tabs/index.ts
@@ -1,4 +1,4 @@
-export { default as Tabs } from './Tabs.vue'
-export { default as TabsTrigger } from './TabsTrigger.vue'
-export { default as TabsList } from './TabsList.vue'
-export { default as TabsContent } from './TabsContent.vue'
+export { default as Tabs } from "./Tabs.vue"
+export { default as TabsTrigger } from "./TabsTrigger.vue"
+export { default as TabsList } from "./TabsList.vue"
+export { default as TabsContent } from "./TabsContent.vue"
diff --git a/components/ui/tags-input/TagsInput.vue b/components/ui/tags-input/TagsInput.vue
index d5ed3ee..81a3a58 100644
--- a/components/ui/tags-input/TagsInput.vue
+++ b/components/ui/tags-input/TagsInput.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   TagsInputRoot,
   type TagsInputRootEmits,
   type TagsInputRootProps,
   useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<TagsInputRootEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/components/ui/tags-input/TagsInputInput.vue b/components/ui/tags-input/TagsInputInput.vue
index 399274c..69ce84b 100644
--- a/components/ui/tags-input/TagsInputInput.vue
+++ b/components/ui/tags-input/TagsInputInput.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tags-input/TagsInputItem.vue b/components/ui/tags-input/TagsInputItem.vue
index 0703456..c66856f 100644
--- a/components/ui/tags-input/TagsInputItem.vue
+++ b/components/ui/tags-input/TagsInputItem.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+import { type HTMLAttributes, computed } from "vue"
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from "radix-vue"
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tags-input/TagsInputItemDelete.vue b/components/ui/tags-input/TagsInputItemDelete.vue
index 4401215..d907ba0 100644
--- a/components/ui/tags-input/TagsInputItemDelete.vue
+++ b/components/ui/tags-input/TagsInputItemDelete.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from "radix-vue"
+import { X } from "lucide-vue-next"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tags-input/TagsInputItemText.vue b/components/ui/tags-input/TagsInputItemText.vue
index f714957..e8cec28 100644
--- a/components/ui/tags-input/TagsInputItemText.vue
+++ b/components/ui/tags-input/TagsInputItemText.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from "radix-vue"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes["class"] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/components/ui/tags-input/index.ts b/components/ui/tags-input/index.ts
index 31305f3..8736692 100644
--- a/components/ui/tags-input/index.ts
+++ b/components/ui/tags-input/index.ts
@@ -1,5 +1,5 @@
-export { default as TagsInput } from './TagsInput.vue'
-export { default as TagsInputInput } from './TagsInputInput.vue'
-export { default as TagsInputItem } from './TagsInputItem.vue'
-export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
-export { default as TagsInputItemText } from './TagsInputItemText.vue'
+export { default as TagsInput } from "./TagsInput.vue"
+export { default as TagsInputInput } from "./TagsInputInput.vue"
+export { default as TagsInputItem } from "./TagsInputItem.vue"
+export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue"
+export { default as TagsInputItemText } from "./TagsInputItemText.vue"
diff --git a/components/ui/toggle-group/ToggleGroup.vue b/components/ui/toggle-group/ToggleGroup.vue
index 3ff029e..ba7df9b 100644
--- a/components/ui/toggle-group/ToggleGroup.vue
+++ b/components/ui/toggle-group/ToggleGroup.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { type HTMLAttributes, computed, provide } from 'vue'
+import type { VariantProps } from "class-variance-authority"
+import { type HTMLAttributes, computed, provide } from "vue"
 import {
   ToggleGroupRoot,
   type ToggleGroupRootEmits,
   type ToggleGroupRootProps,
   useForwardPropsEmits
-} from 'radix-vue'
-import type { toggleVariants } from '@/components/ui/toggle'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import type { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
 
 const props = defineProps<
   ToggleGroupRootProps & {
-    class?: HTMLAttributes['class']
-    variant?: ToggleGroupVariants['variant']
-    size?: ToggleGroupVariants['size']
+    class?: HTMLAttributes["class"]
+    variant?: ToggleGroupVariants["variant"]
+    size?: ToggleGroupVariants["size"]
   }
 >()
 const emits = defineEmits<ToggleGroupRootEmits>()
 
-provide('toggleGroup', {
+provide("toggleGroup", {
   variant: props.variant,
   size: props.size
 })
diff --git a/components/ui/toggle-group/ToggleGroupItem.vue b/components/ui/toggle-group/ToggleGroupItem.vue
index af7ca39..5cef441 100644
--- a/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/components/ui/toggle-group/ToggleGroupItem.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { type HTMLAttributes, computed, inject } from 'vue'
-import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
-import { toggleVariants } from '@/components/ui/toggle'
-import { cn } from '@/lib/utils'
+import type { VariantProps } from "class-variance-authority"
+import { type HTMLAttributes, computed, inject } from "vue"
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from "radix-vue"
+import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils"
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>
 
 const props = defineProps<
   ToggleGroupItemProps & {
-    class?: HTMLAttributes['class']
-    variant?: ToggleGroupVariants['variant']
-    size?: ToggleGroupVariants['size']
+    class?: HTMLAttributes["class"]
+    variant?: ToggleGroupVariants["variant"]
+    size?: ToggleGroupVariants["size"]
   }
 >()
 
-const context = inject<ToggleGroupVariants>('toggleGroup')
+const context = inject<ToggleGroupVariants>("toggleGroup")
 
 const delegatedProps = computed(() => {
   const { class: _, variant, size, ...delegated } = props
diff --git a/components/ui/toggle-group/index.ts b/components/ui/toggle-group/index.ts
index 9f89ad7..c6ce2fc 100644
--- a/components/ui/toggle-group/index.ts
+++ b/components/ui/toggle-group/index.ts
@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from './ToggleGroup.vue'
-export { default as ToggleGroupItem } from './ToggleGroupItem.vue'
+export { default as ToggleGroup } from "./ToggleGroup.vue"
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue"
diff --git a/components/ui/toggle/Toggle.vue b/components/ui/toggle/Toggle.vue
index 8092669..188b5e9 100644
--- a/components/ui/toggle/Toggle.vue
+++ b/components/ui/toggle/Toggle.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
-import { type ToggleVariants, toggleVariants } from '.'
-import { cn } from '@/lib/utils'
+import { type HTMLAttributes, computed } from "vue"
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from "radix-vue"
+import { type ToggleVariants, toggleVariants } from "."
+import { cn } from "@/lib/utils"
 
 const props = withDefaults(
   defineProps<
     ToggleProps & {
-      class?: HTMLAttributes['class']
-      variant?: ToggleVariants['variant']
-      size?: ToggleVariants['size']
+      class?: HTMLAttributes["class"]
+      variant?: ToggleVariants["variant"]
+      size?: ToggleVariants["size"]
     }
   >(),
   {
-    variant: 'default',
-    size: 'default',
+    variant: "default",
+    size: "default",
     disabled: false
   }
 )
diff --git a/components/ui/toggle/index.ts b/components/ui/toggle/index.ts
index 6eed09f..06590bb 100644
--- a/components/ui/toggle/index.ts
+++ b/components/ui/toggle/index.ts
@@ -1,24 +1,24 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { type VariantProps, cva } from "class-variance-authority"
 
-export { default as Toggle } from './Toggle.vue'
+export { default as Toggle } from "./Toggle.vue"
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground'
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
       },
       size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2.5',
-        lg: 'h-11 px-5'
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5"
       }
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default'
+      variant: "default",
+      size: "default"
     }
   }
 )
diff --git a/components/ui/tooltip/Tooltip.vue b/components/ui/tooltip/Tooltip.vue
index 3581ace..df39560 100644
--- a/components/ui/tooltip/Tooltip.vue
+++ b/components/ui/tooltip/Tooltip.vue
@@ -4,7 +4,7 @@ import {
   type TooltipRootEmits,
   type TooltipRootProps,
   useForwardPropsEmits
-} from 'radix-vue'
+} from "radix-vue"
 
 const props = defineProps<TooltipRootProps>()
 const emits = defineEmits<TooltipRootEmits>()
diff --git a/components/ui/tooltip/TooltipContent.vue b/components/ui/tooltip/TooltipContent.vue
index fdaaf77..d170d96 100644
--- a/components/ui/tooltip/TooltipContent.vue
+++ b/components/ui/tooltip/TooltipContent.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue"
 import {
   TooltipContent,
   type TooltipContentEmits,
   type TooltipContentProps,
   TooltipPortal,
   useForwardPropsEmits
-} from 'radix-vue'
-import { cn } from '@/lib/utils'
+} from "radix-vue"
+import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false
 })
 
 const props = withDefaults(
-  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
   {
     sideOffset: 4
   }
diff --git a/components/ui/tooltip/TooltipProvider.vue b/components/ui/tooltip/TooltipProvider.vue
index 816505d..acf2a7f 100644
--- a/components/ui/tooltip/TooltipProvider.vue
+++ b/components/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+import { TooltipProvider, type TooltipProviderProps } from "radix-vue"
 
 const props = defineProps<TooltipProviderProps>()
 </script>
diff --git a/components/ui/tooltip/TooltipTrigger.vue b/components/ui/tooltip/TooltipTrigger.vue
index f5b0e57..c7e1ca1 100644
--- a/components/ui/tooltip/TooltipTrigger.vue
+++ b/components/ui/tooltip/TooltipTrigger.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+import { TooltipTrigger, type TooltipTriggerProps } from "radix-vue"
 
 const props = defineProps<TooltipTriggerProps>()
 </script>
diff --git a/components/ui/tooltip/index.ts b/components/ui/tooltip/index.ts
index 82049b4..3b01783 100644
--- a/components/ui/tooltip/index.ts
+++ b/components/ui/tooltip/index.ts
@@ -1,4 +1,4 @@
-export { default as Tooltip } from './Tooltip.vue'
-export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
-export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as Tooltip } from "./Tooltip.vue"
+export { default as TooltipContent } from "./TooltipContent.vue"
+export { default as TooltipTrigger } from "./TooltipTrigger.vue"
+export { default as TooltipProvider } from "./TooltipProvider.vue"
diff --git a/eslint.config.mjs b/eslint.config.mjs
index ad4eda5..782f2be 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,15 +1,16 @@
-import withNuxt from './.nuxt/eslint.config.mjs'
-import stylisticJs from '@stylistic/eslint-plugin-js'
+import withNuxt from "./.nuxt/eslint.config.mjs"
+import stylisticJs from "@stylistic/eslint-plugin-js"
 
 export default withNuxt({
   plugins: {
-    '@stylistic/js': stylisticJs
+    "@stylistic/js": stylisticJs
   },
   rules: {
-    'vue/multi-word-component-names': 'off',
-    'no-unused-vars': 'warn',
-    'space-in-parens': 'off',
-    'computed-property-spacing': 'off',
-    '@stylistic/js/indent': [ 'warn', 2, { SwitchCase: 1 } ],
+    "vue/multi-word-component-names": "off",
+    "no-unused-vars": "warn",
+    "space-in-parens": "off",
+    "computed-property-spacing": "off",
+    "quotes": ["error", "double"],
+    "@stylistic/js/indent": [ "warn", 2, { SwitchCase: 1 } ],
   }
-})
\ No newline at end of file
+})
diff --git a/lib/utils.ts b/lib/utils.ts
index d32b0fe..d084cca 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,5 +1,5 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
diff --git a/models/CalendarConfig.ts b/models/CalendarConfig.ts
index 3cb7984..5958224 100644
--- a/models/CalendarConfig.ts
+++ b/models/CalendarConfig.ts
@@ -1,15 +1,24 @@
+import { z } from "zod"
 import type { CalendarEvent } from "./CalendarEvent"
-import type { CalendarMonth } from "./CalendarMonth"
-import type { RPGDate } from "./Date"
+import { calendarMonthSchema, type CalendarMonth } from "./CalendarMonth"
+import { dateSchema, type RPGDate } from "./Date"
 
 export interface CalendarConfig {
   months: CalendarMonth[]
-  daysPerMonth: number
   today: RPGDate
 }
 
 export interface Calendar extends CalendarConfig {
-  id: number
+  id?: number
   name: string
   events: CalendarEvent[]
+  color?: string
 }
+
+export const postCalendarSchema = z.object({
+  name: z.string(),
+  today: dateSchema.optional().nullable(),
+  color: z.string().optional().nullable(),
+  months: z.array(calendarMonthSchema).min(1),
+  worldId: z.number().int(),
+})
diff --git a/models/CalendarEvent.ts b/models/CalendarEvent.ts
index ca8da54..042b43d 100644
--- a/models/CalendarEvent.ts
+++ b/models/CalendarEvent.ts
@@ -1,6 +1,6 @@
-import { z } from 'zod'
-import { categorySchema, type Category } from './Category'
-import { dateSchema, type RPGDate } from './Date'
+import { z } from "zod"
+import { categorySchema, type Category } from "./Category"
+import { dateSchema, type RPGDate } from "./Date"
 
 export interface CalendarEvent {
   id?: number
@@ -33,5 +33,5 @@ export const postEventBodySchema = z.object({
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isCalendarEvent(object: any): object is CalendarEvent {
-  return 'startDate' in object
+  return "startDate" in object
 }
diff --git a/models/CalendarMonth.ts b/models/CalendarMonth.ts
index bd457c3..4d49a63 100644
--- a/models/CalendarMonth.ts
+++ b/models/CalendarMonth.ts
@@ -1,6 +1,15 @@
+import { z } from "zod"
+
 export interface CalendarMonth {
-  id: number
+  id?: number
   days: number,
   name: string,
   position: number,
 }
+
+export const calendarMonthSchema = z.object({
+  name: z.string().max(64),
+  days: z.number().int().min(12),
+  position: z.number().int().optional().nullable(),
+  calendar_id: z.number().int().optional().nullable()
+})
diff --git a/models/Category.ts b/models/Category.ts
index 2b260e7..af2849a 100644
--- a/models/Category.ts
+++ b/models/Category.ts
@@ -1,5 +1,5 @@
-import { z } from 'zod'
-import type { RPGColor } from './Color'
+import { z } from "zod"
+import type { RPGColor } from "./Color"
 
 export interface Category {
   id: number
diff --git a/models/Characters.ts b/models/Characters.ts
index ca1570e..297500b 100644
--- a/models/Characters.ts
+++ b/models/Characters.ts
@@ -1,5 +1,5 @@
-import type { Category } from './Category'
-import type { RPGDate } from './Date'
+import type { Category } from "./Category"
+import type { RPGDate } from "./Date"
 
 export interface Character {
   name: string
@@ -15,5 +15,5 @@ export interface Character {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isCharacter(object: any): object is Character {
-  return 'birth' in object
+  return "birth" in object
 }
diff --git a/models/Date.ts b/models/Date.ts
index ae2e72c..0447bdd 100644
--- a/models/Date.ts
+++ b/models/Date.ts
@@ -6,7 +6,7 @@ export interface RPGDate {
   year: number
 }
 
-export type RPGDateOrder = 'asc' | 'desc'
+export type RPGDateOrder = "asc" | "desc"
 
 export const dateSchema = z.object({
   day: z.number().int().positive(),
diff --git a/models/World.ts b/models/World.ts
index 0daa2f0..3aabc60 100644
--- a/models/World.ts
+++ b/models/World.ts
@@ -1,7 +1,10 @@
+import type { Calendar } from "./CalendarConfig"
+
 export interface World {
   id: number
   uuid: string
   name: string
   description?: string
-  color?: string
+  color?: string,
+  calendars?: Calendar[]
 }
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 04956d5..5ac0a48 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,15 +3,22 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
 
   modules: [
-    '@nuxtjs/supabase',
-    '@pinia/nuxt',
-    '@vueuse/nuxt',
-    '@nuxtjs/tailwindcss',
-    '@nuxtjs/color-mode',
-    '@nuxt/eslint',
-    'shadcn-nuxt'
+    "@nuxtjs/supabase",
+    "@pinia/nuxt",
+    "@vueuse/nuxt",
+    "@nuxtjs/tailwindcss",
+    "@nuxtjs/color-mode",
+    "@nuxt/eslint",
+    "shadcn-nuxt"
   ],
-  css: ['~/assets/main.css'],
+  css: ["~/assets/main.css"],
+
+  supabase: {
+    redirectOptions: {
+      login: "/",
+      callback: "/my/"
+    }
+  },
 
   postcss: {
     plugins: {
@@ -20,16 +27,13 @@ export default defineNuxtConfig({
     },
   },
   shadcn: {
-    prefix: 'Ui',
-    componentDir: './components/ui'
+    prefix: "Ui",
+    componentDir: "./components/ui"
   },
   colorMode: {
-    classSuffix: '',
-    preference: 'dark',
-    fallback: 'dark',
-  },
-  supabase: {
-    redirect: false
+    classSuffix: "",
+    preference: "dark",
+    fallback: "dark",
   },
   eslint: {}
 })
diff --git a/package.json b/package.json
index 2ce7463..829c3d2 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@phosphor-icons/vue": "^2.2.1",
     "@pinia/nuxt": "^0.5.1",
     "@vueuse/core": "^10.9.0",
+    "@vueuse/integrations": "^10.11.0",
     "@vueuse/nuxt": "^10.9.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -25,6 +26,7 @@
     "pinia": "^2.1.7",
     "radix-vue": "^1.7.4",
     "shadcn-nuxt": "^0.10.4",
+    "sortablejs": "^1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "vue": "^3.4.27",
diff --git a/pages/calendar/[id].vue b/pages/calendar/[id].vue
deleted file mode 100644
index 8b233ee..0000000
--- a/pages/calendar/[id].vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-useHead({
-  title: 'Calendrier'
-})
-definePageMeta({
-  middleware: ['auth-guard']
-})
-
-const user = useSupabaseUser()
-// Redirect user back home when they log out on the page
-watch(user, (n, _o) => {
-  if (!n) {
-    navigateTo('/')
-  }
-})
-</script>
-
-<template>
-  <Calendar />
-</template>
diff --git a/pages/index.vue b/pages/index.vue
index a717792..d3151fa 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 useHead({
-  title: 'Dashboard'
+  title: "TTTools — Calendriers de JDR",
+  titleTemplate: null
 })
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
 </script>
 
 <template>
diff --git a/pages/my/calendars/[id].vue b/pages/my/calendars/[id].vue
new file mode 100644
index 0000000..70a766e
--- /dev/null
+++ b/pages/my/calendars/[id].vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { PhCircleNotch } from "@phosphor-icons/vue";
+import type { Calendar } from "~/models/CalendarConfig";
+import type { Category } from "~/models/Category";
+
+definePageMeta({
+  middleware: ["auth-guard"]
+})
+
+const user = useSupabaseUser()
+// Redirect user back home when they log out on the page
+watch(user, (n) => {
+  if (!n) {
+    navigateTo("/")
+  }
+})
+
+const route = useRoute()
+const id = route.params.id
+
+const { data: calendarData, pending: calPending } = await useLazyFetch("/api/calendars/query", { key: `calendar-${id}`, query: { id, full: true } })
+const { data: catData, pending: catPending } = await useLazyFetch("/api/calendars/categories/query", { key: `categories-${id}` })
+
+const cal = computed<Calendar>(() => calendarData?.value?.data as Calendar)
+const categories = computed<Category[]>(() => catData?.value?.data as Category[])
+
+if (cal.value) {
+  useHead({
+    title: cal.value.name
+  })
+}
+
+watch(cal, (n) => {
+  useHead({
+    title: n.name
+  })
+})
+</script>
+
+<template>
+  <div v-if="calPending || catPending" class="h-full w-full grid place-items-center">
+    <div class="grid gap-2 justify-items-center opacity-50">
+      <p>Chargement du calendrier</p>
+      <PhCircleNotch size="50" class="animate-spin"/>
+    </div>
+  </div>
+
+  <Calendar v-else-if="cal && categories" :calendar-data="cal" :categories />
+</template>
diff --git a/components/profile/Dashboard.vue b/pages/my/index.vue
similarity index 68%
rename from components/profile/Dashboard.vue
rename to pages/my/index.vue
index 17b9a6f..79db25e 100644
--- a/components/profile/Dashboard.vue
+++ b/pages/my/index.vue
@@ -1,23 +1,103 @@
 <script lang="ts" setup>
+import type { RealtimeChannel } from "@supabase/supabase-js"
+import type { World } from "~/models/World";
+
+useHead({
+  title: "Mondes"
+})
+
+const supabase = useSupabaseClient()
+
+const { data: res } = await useFetch("/api/worlds/query")
+
+const worlds = ref<World[]>(res.value?.data as World[])
+
+definePageMeta({
+  middleware: ["auth-guard"]
+})
+
 const user = useSupabaseUser()
 
-const { data: worlds } = await useLazyFetch('/api/worlds')
+// Redirect user back home when they log out on the page
+watch(user, (n) => {
+  if (!n) {
+    navigateTo("/")
+  }
+})
+
+/**
+ * === World subscriptions ===
+ */
+/** Active world channel */
+let worldChannel: RealtimeChannel
+
+/** Handles world insertion realtime events */
+function handleInsertedWorld(newWorld: World) {
+  try {
+    worlds.value.push(newWorld)
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+/** Handles world deletion realtime events */
+function handleDeletedWorld(id: number) {
+  try {
+    worlds.value.splice(worlds.value.findIndex(w => w.id === id))
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+onMounted(() => {
+  worldChannel = supabase.channel("custom-insert-channel")
+    .on(
+      "postgres_changes",
+      { event: "*", schema: "public", table: "worlds" },
+      async (payload) => {
+        switch (payload.eventType) {
+          case "INSERT":
+            handleInsertedWorld(payload.new as World)
+            break
+
+          case "DELETE":
+            handleDeletedWorld(payload.old.id)
+            break
+
+          case "UPDATE":
+            worlds.value = (await $fetch("/api/worlds/query")).data as World[]
+            break
+
+          default:
+            console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
+            console.log(payload)
+            break
+        }
+      }
+    )
+    .subscribe()
+})
+
+onUnmounted(() => {
+  // Unsubscribe from realtime
+  supabase.removeChannel(worldChannel)
+})
 </script>
 
 <template>
-  <main class="p-8">
+    <main class="p-8">
     <Heading>{{ user?.user_metadata.full_name }}</Heading>
 
-    <section v-if="worlds?.data" class="mt-4">
+    <section v-if="worlds" class="mt-4">
       <h2 class="mb-4 text-lg font-bold">
         Mondes
       </h2>
 
-      <ul class="grid md:grid-cols-3 gap-2">
-        <li v-for="(world, i) in worlds.data" :key="i">
+      <ul class="grid lg:grid-cols-2 gap-2">
+        <li v-for="world in worlds" :key="world.id">
           <UiCard
             class="w-full transition-all"
-            :link="`/calendar/${world.id}`"
+            :link="`/my/worlds/${world.id}`"
             :class="{
               'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !world.color,
               'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': world.color === 'red',
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
new file mode 100644
index 0000000..9860e36
--- /dev/null
+++ b/pages/my/worlds/[id].vue
@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import type { RealtimeChannel } from "@supabase/supabase-js"
+import type { World } from "~/models/World";
+import type { Calendar } from "~/models/CalendarConfig";
+import { PhPlus, PhTrash } from "@phosphor-icons/vue";
+
+const supabase = useSupabaseClient()
+const route = useRoute()
+const id = route.params.id
+
+const { data: res, pending } = await useFetch("/api/worlds/query", { query: { id, full: true } })
+
+const world = ref<World>(res.value?.data as World)
+
+if (world.value) {
+  useHead({
+    title: world.value.name
+  })
+}
+
+watch(world, (n) => {
+  if (n) {
+    useHead({
+      title: n.name
+    })
+  }
+}, { deep: true })
+
+definePageMeta({
+  middleware: ["auth-guard"]
+})
+
+const user = useSupabaseUser()
+
+// Redirect user back home when they log out on the page
+watch(user, (n) => {
+  if (!n) {
+    navigateTo("/")
+  }
+})
+
+const isCreateEventModalOpen = ref<boolean>(false)
+
+function hideCreateDialog() {
+  isCreateEventModalOpen.value = false
+}
+
+/**
+ * === Calendar subscriptions ===
+ */
+
+/** Active calendar channel */
+let calendarChannel: RealtimeChannel
+
+/** Handles calendar insertion realtime events */
+function handleInsertedCalendar(newCalendar: Calendar) {
+  try {
+    world.value.calendars?.push(newCalendar)
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+/** Handles calendar deletion realtime events */
+function handleDeletedCalendar(id: number) {
+  try {
+    world.value.calendars?.splice(world.value.calendars.findIndex(c => c.id === id))
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+onMounted(() => {
+  calendarChannel = supabase.channel("custom-insert-channel")
+    .on(
+      "postgres_changes",
+      { event: "*", schema: "public", table: "calendars" },
+      (payload) => {
+        switch (payload.eventType) {
+          case "INSERT":
+            handleInsertedCalendar(payload.new as Calendar)
+            break
+
+          case "DELETE":
+            handleDeletedCalendar(payload.old.id)
+            break
+
+          default:
+            console.log("Unknown event has been triggered. This should not happen unless Supabase added one somehow.")
+            break
+        }
+      }
+    )
+    .subscribe()
+})
+
+onUnmounted(() => {
+  // Unsubscribe from realtime
+  supabase.removeChannel(calendarChannel)
+})
+
+const markedCalendar = ref<Calendar | null>(null)
+const isDeleteEventModalOpen = ref<boolean>(false)
+
+function deployDeleteModal(calendar: Calendar) {
+  isDeleteEventModalOpen.value = true
+  markedCalendar.value = calendar
+}
+
+function hideDeleteModal() {
+  isDeleteEventModalOpen.value = false
+  markedCalendar.value = null
+}
+</script>
+
+<template>
+  <main class="p-8">
+    <template v-if="pending">
+      <Heading>Chargement...</Heading>
+    </template>
+    <template v-else-if="world">
+      <header class="lg:w-1/2 mb-8">
+        <Spacing>
+          <Heading>{{ world.name }}</Heading>
+
+          <p>{{ world.description }}</p>
+        </Spacing>
+      </header>
+
+      <section>
+        <Spacing size="lg">
+          <div class="flex items-center gap-3">
+            <Heading>Calendriers</Heading>
+
+            <UiTooltipProvider :delay-duration="250">
+              <UiTooltip>
+                <UiTooltipTrigger as-child>
+                  <UiButton size="icon" class="rounded-full h-8 w-8" @click="() => isCreateEventModalOpen = true">
+                    <PhPlus size="17"/>
+                  </UiButton>
+                </UiTooltipTrigger>
+                <UiTooltipContent :side-offset="10">
+                  <p>Ajouter un calendrier</p>
+                </UiTooltipContent>
+              </UiTooltip>
+            </UiTooltipProvider>
+          </div>
+
+          <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"
+                :link="`/my/calendars/${calendar.id}`"
+              >
+                <UiCardHeader>
+                  <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
+                </UiCardHeader>
+
+                <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)">
+                    <PhTrash size="16" />
+                  </UiButton>
+                </UiCardContent>
+              </UiCard>
+            </li>
+          </ul>
+          <template v-else>
+            <p class="pl-6 opacity-75 italic">
+              Aucun calendrier pour ce monde
+            </p>
+          </template>
+        </Spacing>
+      </section>
+    </template>
+
+    <CalendarDialogCreate :world :modal-state="isCreateEventModalOpen" @on-close="hideCreateDialog" />
+    <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteEventModalOpen" @on-close="hideDeleteModal" />
+  </main>
+</template>
diff --git a/pages/profile.vue b/pages/profile.vue
deleted file mode 100644
index 7b62bc0..0000000
--- a/pages/profile.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-const user = useSupabaseUser()
-
-useHead({
-  title: 'Profil'
-})
-
-definePageMeta({
-  middleware: ['auth-guard']
-})
-
-// Redirect user back home when they log out on the page
-watch(user, (n, _o) => {
-  if (!n) {
-    navigateTo('/')
-  }
-})
-
-const { setCurrentMenu } = useUiStore()
-setCurrentMenu([])
-</script>
-
-<template>
-  <ProfileDashboard />
-</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6078893..0ca7842 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@nuxt/eslint':
         specifier: ^0.3.12
-        version: 0.3.12(eslint@8.57.0)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+        version: 0.3.12(eslint@8.57.0)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       '@phosphor-icons/vue':
         specifier: ^2.2.1
         version: 2.2.1(vue@3.4.27(typescript@5.4.5))
@@ -20,9 +20,12 @@ importers:
       '@vueuse/core':
         specifier: ^10.9.0
         version: 10.9.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/integrations':
+        specifier: ^10.11.0
+        version: 10.11.0(focus-trap@7.5.4)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.5))
       '@vueuse/nuxt':
         specifier: ^10.9.0
-        version: 10.9.0(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vue@3.4.27(typescript@5.4.5))
+        version: 10.9.0(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vue@3.4.27(typescript@5.4.5))
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
@@ -34,7 +37,7 @@ importers:
         version: 0.364.0(vue@3.4.27(typescript@5.4.5))
       nuxt:
         specifier: ^3.7.0
-        version: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+        version: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       pinia:
         specifier: ^2.1.7
         version: 2.1.7(typescript@5.4.5)(vue@3.4.27(typescript@5.4.5))
@@ -44,6 +47,9 @@ importers:
       shadcn-nuxt:
         specifier: ^0.10.4
         version: 0.10.4(rollup@4.17.2)
+      sortablejs:
+        specifier: ^1
+        version: 1.15.2
       tailwind-merge:
         specifier: ^2.3.0
         version: 2.3.0
@@ -1466,24 +1472,27 @@ packages:
   '@vueuse/components@10.9.0':
     resolution: {integrity: sha512-BHQpA0yIi3y7zKa1gYD0FUzLLkcRTqVhP8smnvsCK6GFpd94Nziq1XVPD7YpFeho0k5BzbBiNZF7V/DpkJ967A==}
 
+  '@vueuse/core@10.11.0':
+    resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
+
   '@vueuse/core@10.9.0':
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
 
-  '@vueuse/integrations@10.9.0':
-    resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==}
+  '@vueuse/integrations@10.11.0':
+    resolution: {integrity: sha512-Pp6MtWEIr+NDOccWd8j59Kpjy5YDXogXI61Kb1JxvSfVBO8NzFQkmrKmSZz47i+ZqHnIzxaT38L358yDHTncZg==}
     peerDependencies:
-      async-validator: '*'
-      axios: '*'
-      change-case: '*'
-      drauu: '*'
-      focus-trap: '*'
-      fuse.js: '*'
-      idb-keyval: '*'
-      jwt-decode: '*'
-      nprogress: '*'
-      qrcode: '*'
-      sortablejs: '*'
-      universal-cookie: '*'
+      async-validator: ^4
+      axios: ^1
+      change-case: ^4
+      drauu: ^0.3
+      focus-trap: ^7
+      fuse.js: ^6
+      idb-keyval: ^6
+      jwt-decode: ^3
+      nprogress: ^0.2
+      qrcode: ^1.5
+      sortablejs: ^1
+      universal-cookie: ^6
     peerDependenciesMeta:
       async-validator:
         optional: true
@@ -1510,6 +1519,9 @@ packages:
       universal-cookie:
         optional: true
 
+  '@vueuse/metadata@10.11.0':
+    resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
+
   '@vueuse/metadata@10.9.0':
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
 
@@ -1518,6 +1530,9 @@ packages:
     peerDependencies:
       nuxt: ^3.0.0
 
+  '@vueuse/shared@10.11.0':
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
+
   '@vueuse/shared@10.9.0':
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
 
@@ -4044,6 +4059,9 @@ packages:
     resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
+  sortablejs@1.15.2:
+    resolution: {integrity: sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -4596,6 +4614,17 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-demi@0.14.8:
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-devtools-stub@0.1.0:
     resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==}
 
@@ -5360,12 +5389,12 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@1.3.1(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))':
+  '@nuxt/devtools-kit@1.3.1(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))':
     dependencies:
       '@nuxt/kit': 3.11.2(rollup@4.17.2)
       '@nuxt/schema': 3.11.2(rollup@4.17.2)
       execa: 7.2.0
-      nuxt: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+      nuxt: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       vite: 5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)
     transitivePeerDependencies:
       - rollup
@@ -5384,13 +5413,13 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.2
 
-  '@nuxt/devtools@1.3.1(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+  '@nuxt/devtools@1.3.1(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(sortablejs@1.15.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@antfu/utils': 0.7.8
-      '@nuxt/devtools-kit': 1.3.1(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+      '@nuxt/devtools-kit': 1.3.1(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       '@nuxt/devtools-wizard': 1.3.1
       '@nuxt/kit': 3.11.2(rollup@4.17.2)
-      '@vue/devtools-applet': 7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+      '@vue/devtools-applet': 7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(sortablejs@1.15.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-core': 7.1.3(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-kit': 7.1.3(vue@3.4.27(typescript@5.4.5))
       birpc: 0.2.17
@@ -5408,7 +5437,7 @@ snapshots:
       launch-editor: 2.6.1
       local-pkg: 0.5.0
       magicast: 0.3.4
-      nuxt: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+      nuxt: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       nypm: 0.3.8
       ohash: 1.1.3
       pacote: 18.0.6
@@ -5481,10 +5510,10 @@ snapshots:
       - supports-color
       - typescript
 
-  '@nuxt/eslint@0.3.12(eslint@8.57.0)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))':
+  '@nuxt/eslint@0.3.12(eslint@8.57.0)(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(typescript@5.4.5)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))':
     dependencies:
       '@eslint/config-inspector': 0.4.8(eslint@8.57.0)
-      '@nuxt/devtools-kit': 1.3.1(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+      '@nuxt/devtools-kit': 1.3.1(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       '@nuxt/eslint-config': 0.3.12(eslint@8.57.0)(typescript@5.4.5)
       '@nuxt/eslint-plugin': 0.3.12(eslint@8.57.0)(typescript@5.4.5)
       '@nuxt/kit': 3.11.2(rollup@4.17.2)
@@ -6507,12 +6536,12 @@ snapshots:
 
   '@vue/devtools-api@6.6.1': {}
 
-  '@vue/devtools-applet@7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
+  '@vue/devtools-applet@7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(sortablejs@1.15.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@vue/devtools-core': 7.1.3(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-kit': 7.1.3(vue@3.4.27(typescript@5.4.5))
       '@vue/devtools-shared': 7.1.3
-      '@vue/devtools-ui': 7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vue@3.4.27(typescript@5.4.5))
+      '@vue/devtools-ui': 7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(sortablejs@1.15.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vue@3.4.27(typescript@5.4.5))
       lodash-es: 4.17.21
       perfect-debounce: 1.0.0
       shiki: 1.3.0
@@ -6562,13 +6591,13 @@ snapshots:
     dependencies:
       rfdc: 1.3.1
 
-  '@vue/devtools-ui@7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vue@3.4.27(typescript@5.4.5))':
+  '@vue/devtools-ui@7.1.3(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(sortablejs@1.15.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@unocss/reset': 0.60.2
       '@vue/devtools-shared': 7.1.3
       '@vueuse/components': 10.9.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.5))
-      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/integrations': 10.11.0(focus-trap@7.5.4)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.5))
       colord: 2.9.3
       floating-vue: 5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5))
       focus-trap: 7.5.4
@@ -6620,6 +6649,16 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@10.11.0(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.0
+      '@vueuse/shared': 10.11.0(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@10.9.0(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -6630,26 +6669,29 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.4.27(typescript@5.4.5))':
+  '@vueuse/integrations@10.11.0(focus-trap@7.5.4)(sortablejs@1.15.2)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.5))
-      '@vueuse/shared': 10.9.0(vue@3.4.27(typescript@5.4.5))
-      vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/core': 10.11.0(vue@3.4.27(typescript@5.4.5))
+      '@vueuse/shared': 10.11.0(vue@3.4.27(typescript@5.4.5))
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
     optionalDependencies:
       focus-trap: 7.5.4
+      sortablejs: 1.15.2
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/metadata@10.11.0': {}
+
   '@vueuse/metadata@10.9.0': {}
 
-  '@vueuse/nuxt@10.9.0(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vue@3.4.27(typescript@5.4.5))':
+  '@vueuse/nuxt@10.9.0(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       '@nuxt/kit': 3.11.2(rollup@4.17.2)
       '@vueuse/core': 10.9.0(vue@3.4.27(typescript@5.4.5))
       '@vueuse/metadata': 10.9.0
       local-pkg: 0.5.0
-      nuxt: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
+      nuxt: 3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))
       vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -6657,6 +6699,13 @@ snapshots:
       - supports-color
       - vue
 
+  '@vueuse/shared@10.11.0(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.27(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/shared@10.9.0(vue@3.4.27(typescript@5.4.5))':
     dependencies:
       vue-demi: 0.14.7(vue@3.4.27(typescript@5.4.5))
@@ -8616,10 +8665,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
-  nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)):
+  nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)):
     dependencies:
       '@nuxt/devalue': 2.0.2
-      '@nuxt/devtools': 1.3.1(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
+      '@nuxt/devtools': 1.3.1(@unocss/reset@0.60.2)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(nuxt@3.11.2(@opentelemetry/api@1.8.0)(@parcel/watcher@2.4.1)(@types/node@20.12.11)(@unocss/reset@0.60.2)(encoding@0.1.13)(eslint@8.57.0)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.17.2))(vue@3.4.27(typescript@5.4.5)))(ioredis@5.4.1)(optionator@0.9.4)(rollup@4.17.2)(sass@1.77.1)(sortablejs@1.15.2)(terser@5.31.0)(typescript@5.4.5)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(rollup@4.17.2)(sortablejs@1.15.2)(unocss@0.60.2(postcss@8.4.38)(rollup@4.17.2)(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0)))(vite@5.2.11(@types/node@20.12.11)(sass@1.77.1)(terser@5.31.0))(vue@3.4.27(typescript@5.4.5))
       '@nuxt/kit': 3.11.2(rollup@4.17.2)
       '@nuxt/schema': 3.11.2(rollup@4.17.2)
       '@nuxt/telemetry': 2.5.4(rollup@4.17.2)
@@ -9480,6 +9529,8 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
+  sortablejs@1.15.2: {}
+
   source-map-js@1.2.0: {}
 
   source-map-support@0.5.21:
@@ -10083,6 +10134,10 @@ snapshots:
     dependencies:
       vue: 3.4.27(typescript@5.4.5)
 
+  vue-demi@0.14.8(vue@3.4.27(typescript@5.4.5)):
+    dependencies:
+      vue: 3.4.27(typescript@5.4.5)
+
   vue-devtools-stub@0.1.0: {}
 
   vue-eslint-parser@9.4.2(eslint@8.57.0):
diff --git a/server/api/calendars/[id].delete.ts b/server/api/calendars/[id].delete.ts
new file mode 100644
index 0000000..f5710b4
--- /dev/null
+++ b/server/api/calendars/[id].delete.ts
@@ -0,0 +1,41 @@
+import { z } from "zod"
+import { serverSupabaseClient } from "#supabase/server"
+import type { Calendar } from "~/models/CalendarConfig"
+
+const paramsSchema = z.object({
+  id: z.number({ coerce: true }).positive().int()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const { data: params, error: paramsError} = await getValidatedRouterParams(event, paramsSchema.safeParse)
+
+  if (paramsError) {
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "L'identifiant du calendrier est manquant ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from("calendars")
+      .delete()
+      .eq("id", params.id)
+      .maybeSingle<Calendar>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    throw createError({
+      cause: "Serveur",
+      status: 500,
+      fatal: false,
+      message: "Une erreur inconnue est survenue."
+    })
+  }
+})
diff --git a/server/api/calendars/categories/query.get.ts b/server/api/calendars/categories/query.get.ts
index 25abe89..8239d95 100644
--- a/server/api/calendars/categories/query.get.ts
+++ b/server/api/calendars/categories/query.get.ts
@@ -1,15 +1,27 @@
 import { serverSupabaseClient } from "#supabase/server";
+import { z } from "zod"
 import type { Category } from "~/models/Category";
 
+const querySchema = z.object({
+  id: z.number({ coerce: true }).positive().int().optional(),
+})
+
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
+  const query = await getValidatedQuery(event, querySchema.parse)
+
+  setHeader(event, "Cache-Control", "public, max-age=3600, s-maxage=7200")
 
   const output = client
-    .from('calendar_event_categories')
+    .from("calendar_event_categories")
     .select(`
       id,
       name
     `)
 
+  if (query.id) {
+    return output.eq("id", query.id).limit(1).single<Category>()
+  }
+
   return output.returns<Category[]>()
 })
diff --git a/server/api/calendars/create.post.ts b/server/api/calendars/create.post.ts
new file mode 100644
index 0000000..f4190d3
--- /dev/null
+++ b/server/api/calendars/create.post.ts
@@ -0,0 +1,101 @@
+import { serverSupabaseClient } from "#supabase/server";
+// import type { Calendar} from "~/models/CalendarConfig";
+import type { Calendar} from "~/models/CalendarConfig";
+import { postCalendarSchema } from "~/models/CalendarConfig";
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+  const { data: bodyData, error: schemaError } = await readValidatedBody(event, body => postCalendarSchema.safeParse(body))
+
+  if (schemaError) {
+    console.log(schemaError)
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  // Store calendarId for rollback / links
+  let calendarId: number | null = null
+
+  // First insert the calendar
+  try {
+    const { data, error } = await client
+      .from("calendars")
+      .insert(
+        {
+          name: bodyData.name,
+          today: bodyData.today,
+          color: bodyData.color,
+          world_id: bodyData.worldId
+        } as never
+      )
+      .select("id")
+      .single()
+
+    if (data?.id) {
+      calendarId = data.id
+    }
+
+    if (error) throw error
+  } catch (err) {
+    console.log(err)
+    throw createError({
+      cause: "Serveur",
+      fatal: false,
+      message: "Une erreur inconnue s'est produite pendant la création du calendrier.",
+      status: 500,
+    })
+  }
+
+  // Setup months data
+  for (let i = 0; i < bodyData.months.length; i++) {
+    bodyData.months[i].calendar_id = calendarId
+    bodyData.months[i].position = i
+  }
+
+  // Bulk insert the months
+  try {
+    const { error } = await client
+      .from("calendar_months")
+      .insert(bodyData.months as never)
+
+    if (error) throw error
+  } catch (err) {
+    // If we found an error, rollback the calendar
+    if (calendarId) {
+      await client
+        .from("calendars")
+        .delete()
+        .eq("id", calendarId)
+        .single()
+    }
+
+    throw createError({
+      cause: "Serveur",
+      fatal: false,
+      message: "Une erreur inconnue s'est produite pendant la création des mois du calendrier.",
+      status: 500,
+    })
+  }
+
+  if (calendarId) {
+    try {
+      return client
+        .from("calendars")
+        .select("*")
+        .eq("id", calendarId)
+        .limit(1)
+        .single<Calendar>()
+    } catch (err) {
+      throw createError({
+        cause: "Serveur",
+        fatal: false,
+        message: "Impossible de récupérer les données du calendrier créé.",
+        status: 500,
+      })
+    }
+  }
+})
diff --git a/server/api/calendars/events/[id].delete.ts b/server/api/calendars/events/[id].delete.ts
index 7a15913..2934682 100644
--- a/server/api/calendars/events/[id].delete.ts
+++ b/server/api/calendars/events/[id].delete.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { z } from "zod"
 import { serverSupabaseClient } from "#supabase/server"
 import type { CalendarEvent } from "~/models/CalendarEvent"
 
@@ -13,7 +13,7 @@ export default defineEventHandler(async (event) => {
 
   if (paramsError) {
     throw createError({
-      cause: 'Utilisateur',
+      cause: "Utilisateur",
       fatal: false,
       message: "L'identifiant de l'évènement est manquant ou mal renseigné.",
       status: 401,
@@ -22,20 +22,20 @@ export default defineEventHandler(async (event) => {
 
   try {
     const { data, error } = await client
-      .from('calendar_events')
+      .from("calendar_events")
       .delete()
-      .eq('id', params.id)
-      .single<CalendarEvent>()
+      .eq("id", params.id)
+      .maybeSingle<CalendarEvent>()
 
     if (error) throw error
 
     return data
   } catch (err) {
     throw createError({
-      cause: 'Serveur',
+      cause: "Serveur",
       status: 500,
       fatal: false,
-      message: 'Une erreur inconnue est survenue.'
+      message: "Une erreur inconnue est survenue."
     })
   }
 })
diff --git a/server/api/calendars/events/[id].patch.ts b/server/api/calendars/events/[id].patch.ts
index adfb7fa..f0ab3d9 100644
--- a/server/api/calendars/events/[id].patch.ts
+++ b/server/api/calendars/events/[id].patch.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod'
+import { z } from "zod"
 import { serverSupabaseClient } from "#supabase/server"
 import { postEventBodySchema, type CalendarEvent } from "~/models/CalendarEvent"
 
@@ -14,7 +14,7 @@ export default defineEventHandler(async (event) => {
 
   if (paramsError) {
     throw createError({
-      cause: 'Utilisateur',
+      cause: "Utilisateur",
       fatal: false,
       message: "L'identifiant de l'évènement est manquant ou mal renseigné.",
       status: 401,
@@ -23,7 +23,7 @@ export default defineEventHandler(async (event) => {
 
   if (bodyError) {
     throw createError({
-      cause: 'Utilisateur',
+      cause: "Utilisateur",
       fatal: false,
       message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
       status: 401,
@@ -32,7 +32,7 @@ export default defineEventHandler(async (event) => {
 
   try {
     const { data, error } = await client
-      .from('calendar_events')
+      .from("calendar_events")
       .update(
         {
           start_date: bodyData?.event.startDate,
@@ -45,7 +45,7 @@ export default defineEventHandler(async (event) => {
           calendar_id: bodyData?.calendarId
         } as never
       )
-      .eq('id', params.id)
+      .eq("id", params.id)
       .select(`
         id,
         title,
@@ -65,10 +65,10 @@ export default defineEventHandler(async (event) => {
     return data
   } catch (err) {
     throw createError({
-      cause: 'Serveur',
+      cause: "Serveur",
       status: 500,
       fatal: false,
-      message: 'Une erreur inconnue est survenue.'
+      message: "Une erreur inconnue est survenue."
     })
   }
 })
diff --git a/server/api/calendars/events/create.post.ts b/server/api/calendars/events/create.post.ts
index 1d311a0..780aa46 100644
--- a/server/api/calendars/events/create.post.ts
+++ b/server/api/calendars/events/create.post.ts
@@ -8,7 +8,7 @@ export default defineEventHandler(async (event) => {
 
   if (schemaError) {
     throw createError({
-      cause: 'Utilisateur',
+      cause: "Utilisateur",
       fatal: false,
       message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
       status: 401,
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
 
   try {
     const { data, error } = await client
-      .from('calendar_events')
+      .from("calendar_events")
       .insert(
         {
           start_date: bodyData?.event.startDate,
@@ -49,10 +49,10 @@ export default defineEventHandler(async (event) => {
     return data
   } catch (err) {
     throw createError({
-      cause: 'Serveur',
+      cause: "Serveur",
       status: 500,
       fatal: false,
-      message: 'Une erreur inconnue est survenue.'
+      message: "Une erreur inconnue est survenue."
     })
   }
 })
diff --git a/server/api/calendars/events/query.get.ts b/server/api/calendars/events/query.get.ts
index 1a87410..4167b6a 100644
--- a/server/api/calendars/events/query.get.ts
+++ b/server/api/calendars/events/query.get.ts
@@ -1,9 +1,9 @@
 import { serverSupabaseClient } from "#supabase/server";
-import { z } from 'zod'
+import { z } from "zod"
 import type { CalendarEvent } from "~/models/CalendarEvent";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  calendarId: z.number({ coerce: true }).positive().int()
 })
 
 export default defineEventHandler(async (event) => {
@@ -11,17 +11,21 @@ export default defineEventHandler(async (event) => {
   const query = await getValidatedQuery(event, querySchema.parse)
 
   const output = client
-    .from('calendar_events')
+    .from("calendar_events")
     .select(`
       id,
       title,
       description,
       location,
-      world_calendars (id, world_id)
+      startDate:start_date,
+      endDate:end_date,
+      wiki,
+      category:calendar_event_categories!calendar_events_category_fkey (*),
+      secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
     `)
 
-  if (query.world_id) {
-    output.eq('world_calendars.world_id', query.world_id)
+  if (query.calendarId) {
+    output.eq("calendar_id", query.calendarId)
   }
 
   return output.returns<CalendarEvent[]>()
diff --git a/server/api/calendars/months/[id].delete.ts b/server/api/calendars/months/[id].delete.ts
new file mode 100644
index 0000000..3536f16
--- /dev/null
+++ b/server/api/calendars/months/[id].delete.ts
@@ -0,0 +1,41 @@
+import { z } from "zod"
+import { serverSupabaseClient } from "#supabase/server"
+import type { CalendarMonth } from "~/models/CalendarMonth"
+
+const paramsSchema = z.object({
+  id: z.number({ coerce: true }).positive().int()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const { data: params, error: paramsError} = await getValidatedRouterParams(event, paramsSchema.safeParse)
+
+  if (paramsError) {
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "L'identifiant de l'évènement est manquant ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from("calendar_months")
+      .delete()
+      .eq("id", params.id)
+      .maybeSingle<CalendarMonth>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    throw createError({
+      cause: "Serveur",
+      status: 500,
+      fatal: false,
+      message: "Une erreur inconnue est survenue."
+    })
+  }
+})
diff --git a/server/api/calendars/months/[id].patch.ts b/server/api/calendars/months/[id].patch.ts
new file mode 100644
index 0000000..428c517
--- /dev/null
+++ b/server/api/calendars/months/[id].patch.ts
@@ -0,0 +1,68 @@
+import { z } from "zod"
+import { serverSupabaseClient } from "#supabase/server"
+import { calendarMonthSchema, type CalendarMonth } from "~/models/CalendarMonth"
+
+const paramsSchema = z.object({
+  id: z.number({ coerce: true }).positive().int()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+
+  const { data: params, error: paramsError} = await getValidatedRouterParams(event, paramsSchema.safeParse)
+  const { data: bodyData, error: bodyError } = await readValidatedBody(event, body => calendarMonthSchema.safeParse(body))
+
+  if (paramsError) {
+    console.log(paramsError)
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "L'identifiant du mois est manquant ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  if (bodyError) {
+    console.log(bodyData)
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from("calendar_months")
+      .update(
+        {
+          name: bodyData?.name,
+          days: bodyData.days,
+          position: bodyData?.position,
+          calendar_id: bodyData.calendar_id,
+        } as never
+      )
+      .eq("id", params.id)
+      .select(`
+        id,
+        name,
+        days,
+        position,
+        calendar_id
+      `)
+      .single<CalendarMonth>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    console.log(err)
+    throw createError({
+      cause: "Serveur",
+      status: 500,
+      fatal: false,
+      message: "Une erreur inconnue est survenue."
+    })
+  }
+})
diff --git a/server/api/calendars/months/create.post.ts b/server/api/calendars/months/create.post.ts
new file mode 100644
index 0000000..789c19a
--- /dev/null
+++ b/server/api/calendars/months/create.post.ts
@@ -0,0 +1,50 @@
+import { serverSupabaseClient } from "#supabase/server";
+import { calendarMonthSchema, type CalendarMonth } from "~/models/CalendarMonth"
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+  const { data: bodyData, error: schemaError } = await readValidatedBody(event, body => calendarMonthSchema.safeParse(body))
+
+  if (schemaError) {
+    console.log(schemaError)
+    throw createError({
+      cause: "Utilisateur",
+      fatal: false,
+      message: "Le schéma de la requête n'est pas complet ou mal renseigné.",
+      status: 401,
+    })
+  }
+
+  try {
+    const { data, error } = await client
+      .from("calendar_months")
+      .insert(
+        {
+          name: bodyData?.name,
+          days: bodyData.days,
+          position: bodyData?.position,
+          calendar_id: bodyData.calendar_id,
+        } as never
+      )
+      .select(`
+        id,
+        name,
+        days,
+        position,
+        calendar_id
+      `)
+      .single<CalendarMonth>()
+
+    if (error) throw error
+
+    return data
+  } catch (err) {
+    console.log(err)
+    throw createError({
+      cause: "Serveur",
+      status: 500,
+      fatal: false,
+      message: "Une erreur inconnue est survenue."
+    })
+  }
+})
diff --git a/server/api/calendars/months/query.get.ts b/server/api/calendars/months/query.get.ts
new file mode 100644
index 0000000..b2d7c24
--- /dev/null
+++ b/server/api/calendars/months/query.get.ts
@@ -0,0 +1,28 @@
+import { serverSupabaseClient } from "#supabase/server";
+import { z } from "zod"
+import type { CalendarMonth } from "~/models/CalendarMonth";
+
+const querySchema = z.object({
+  calendarId: z.number({ coerce: true }).positive().int()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+  const query = await getValidatedQuery(event, querySchema.parse)
+
+  const output = client
+    .from("calendar_months")
+    .select(`
+      id,
+      name,
+      days,
+      position,
+      calendar_id
+    `)
+
+  if (query.calendarId) {
+    output.eq("calendar_id", query.calendarId)
+  }
+
+  return output.returns<CalendarMonth[]>()
+})
diff --git a/server/api/calendars/query.get.ts b/server/api/calendars/query.get.ts
index 4423d24..4b9efee 100644
--- a/server/api/calendars/query.get.ts
+++ b/server/api/calendars/query.get.ts
@@ -1,38 +1,55 @@
 import { serverSupabaseClient } from "#supabase/server";
-import { z } from 'zod'
+import { z } from "zod"
 import type { Calendar } from "~/models/CalendarConfig";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  id: z.number({ coerce: true }).positive().int().optional(),
+  full: z.boolean({ coerce: true }).optional()
 })
 
 export default defineEventHandler(async (event) => {
   const client = await serverSupabaseClient(event)
   const query = await getValidatedQuery(event, querySchema.parse)
 
-  const output = client
-    .from('calendars')
-    .select(`
-      id,
-      name,
-      today,
-      months:calendar_months (*),
-      events:calendar_events (
-        id,
-        title,
-        description,
-        location,
-        hidden,
-        startDate:start_date,
-        endDate:end_date,
-        wiki,
-        category:calendar_event_categories!calendar_events_category_fkey (*),
-        secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
-      )
-    `)
-    .eq('world_id', query.world_id)
-    .limit(1)
-    .single<Calendar>()
+  setHeader(event, "Cache-Control", "public, max-age=3600, s-maxage=7200")
 
-  return output
+  const partialFields = `
+    id,
+    name,
+    today,
+    months:calendar_months (*)
+  `
+
+  const fullFields = `
+    id,
+    name,
+    today,
+    months:calendar_months (*),
+    events:calendar_events (
+      id,
+      title,
+      description,
+      location,
+      hidden,
+      startDate:start_date,
+      endDate:end_date,
+      wiki,
+      category:calendar_event_categories!calendar_events_category_fkey (*),
+      secondaryCategories:calendar_event_categories!calendar_event_categories_links (*)
+    )
+  `
+
+  let output
+
+  if (query.full) {
+    output = client.from("calendars").select(fullFields)
+  } else {
+    output = client.from("calendars").select(partialFields)
+  }
+
+  if (query.id) {
+    return output.eq("id", query.id).limit(1).single<Calendar>()
+  }
+
+  return output.returns<Calendar[]>()
 })
diff --git a/server/api/characters/query.get.ts b/server/api/characters/query.get.ts
index 73145d5..21578a7 100644
--- a/server/api/characters/query.get.ts
+++ b/server/api/characters/query.get.ts
@@ -1,9 +1,9 @@
+import { z } from "zod"
 import { serverSupabaseClient } from "#supabase/server";
-import { z } from 'zod'
 import type { Character } from "~/models/Characters";
 
 const querySchema = z.object({
-  world_id: z.number({ coerce: true }).positive().int()
+  worldId: z.number({ coerce: true }).positive().int()
 })
 
 export default defineEventHandler(async (event) => {
@@ -11,7 +11,7 @@ export default defineEventHandler(async (event) => {
   const query = await getValidatedQuery(event, querySchema.parse)
 
   const output = client
-    .from('characters')
+    .from("characters")
     .select(`
       id,
       name,
@@ -23,8 +23,8 @@ export default defineEventHandler(async (event) => {
       secondaryCategories:character_categories!character_categories_links (*)
     `)
 
-  if (query.world_id) {
-    output.eq('world_id', query.world_id)
+  if (query.worldId) {
+    output.eq("world_id", query.worldId)
   }
 
   return output.returns<Character[]>()
diff --git a/server/api/worlds/index.get.ts b/server/api/worlds/index.get.ts
deleted file mode 100644
index 3dbc6e2..0000000
--- a/server/api/worlds/index.get.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { serverSupabaseClient } from "#supabase/server";
-import type { World } from "~/models/World";
-
-export default defineEventHandler(async (event) => {
-  const client = await serverSupabaseClient(event)
-
-  return client.from('worlds')
-    .select(`id, name, description, color`)
-    .returns<World[]>()
-})
diff --git a/server/api/worlds/query.get.ts b/server/api/worlds/query.get.ts
new file mode 100644
index 0000000..e980f36
--- /dev/null
+++ b/server/api/worlds/query.get.ts
@@ -0,0 +1,32 @@
+import { z } from "zod"
+import { serverSupabaseClient } from "#supabase/server";
+import type { World } from "~/models/World";
+
+const querySchema = z.object({
+  id: z.number({ coerce: true }).positive().int().optional(),
+  full: z.boolean({ coerce: true }).optional()
+})
+
+export default defineEventHandler(async (event) => {
+  const client = await serverSupabaseClient(event)
+  const query = await getValidatedQuery(event, querySchema.parse)
+
+  const fullFields = "id, name, description, color, calendars (id, name, color, today)"
+  const partialFields = "id, name, description, color"
+
+  let output
+
+  if (query.full) {
+    output = client.from("worlds").select(fullFields)
+  } else {
+    output = client.from("worlds").select(partialFields)
+  }
+
+  if (query.id) {
+    // const eventNb = await client.from('worlds').select('events:calendars(calendar_events(id))').order('events_count')
+
+    return output.eq("id", query.id).single<World>()
+  }
+
+  return output.returns<World[]>()
+})
diff --git a/stores/CalendarStore.ts b/stores/CalendarStore.ts
index de29cf1..bc6029e 100644
--- a/stores/CalendarStore.ts
+++ b/stores/CalendarStore.ts
@@ -1,13 +1,16 @@
-import {
-  type RPGDate,
-  type RPGDateOrder,
-} from '@/models/Date'
-import { useLocalStorage, useUrlSearchParams } from '@vueuse/core'
-import { defineStore, skipHydrate } from 'pinia'
-import { computed, ref, type ComputedRef, type Ref } from 'vue'
-import type { CalendarMonth } from '~/models/CalendarMonth'
+import type {
+  RPGDate,
+  RPGDateOrder,
+} from "@/models/Date"
+import { useUrlSearchParams } from "@vueuse/core"
+import { defineStore } from "pinia"
+import { computed, ref, type ComputedRef } from "vue"
+import type { Calendar } from "~/models/CalendarConfig"
+import type { CalendarEvent } from "~/models/CalendarEvent"
+import type { CalendarMonth } from "~/models/CalendarMonth"
+import type { Category } from "~/models/Category"
 
-type CalendarViewType = 'month' | 'year' | 'decade' | 'century'
+type CalendarViewType = "month" | "year" | "decade" | "century"
 
 type CalendarCurrentConfig = {
   viewType: CalendarViewType
@@ -21,48 +24,76 @@ type CalendarCurrentDate = {
   currentDateTitle: ComputedRef<string>
 }
 
-export const useCalendar = defineStore('calendar', () => {
+export const useCalendar = defineStore("calendar", () => {
   /**
    * Static calendar config
-   * This shouldn't change
    */
-  const currentConfig: Ref<CalendarCurrentConfig> = ref({
-    viewType: 'month'
+  const currentConfig = ref<CalendarCurrentConfig>({
+    viewType: "month"
   })
-  const viewTypeOptions: Set<CalendarViewType> = new Set<CalendarViewType>([
-    'month',
-    'year'
+  const viewTypeOptions = new Set<CalendarViewType>([
+    "month",
+    "year"
   ])
 
-  const calendarId = ref<number>(0)
+  const activeCalendar = ref<{ id: number; name: string; today: RPGDate} | null>(null)
 
-  function setCalendarId(data: number) {
-    calendarId.value = data
-  }
   /**
    * Month list (queried from API)
    */
-  const months: Ref<CalendarMonth[]> = ref<CalendarMonth[]>([])
+  const months = ref<CalendarMonth[]>([])
 
-  function setMonths(data: CalendarMonth[]) {
-    months.value = data
+  function setActiveCalendar(calendarData: Calendar, categoryData: Category[]) {
+    try {
+      if (!calendarData.id) return
+
+      activeCalendar.value = {
+        id: calendarData.id,
+        name: calendarData.name,
+        today: calendarData.today
+      }
+
+      setDefaultDate(activeCalendar.value.today)
+      selectDate(activeCalendar.value.today)
+
+      if (!params.day) {
+        params.day = defaultDate.value.day.toString()
+      }
+      if (!params.month) {
+        params.month = defaultDate.value.month.toString()
+      }
+      if (!params.year) {
+        params.year = defaultDate.value.year.toString()
+      }
+
+      months.value = calendarData.months
+
+      baseEvents.value = calendarData.events
+      categories.value = categoryData
+    } catch (err) {
+      console.log(err)
+    }
   }
 
+  const params = useUrlSearchParams("history", {
+    write: false
+  })
+
   /**
    * Sorted month data using the raw months
    */
   const sortedMonths = computed<CalendarMonth[]>(() => months.value.sort((a, b) => a.position - b.position))
-  const monthsPerYear = computed(() => months.value.length)
-  const daysPerYear = computed(() => months.value.reduce((acc, o) => acc + o.days, 0))
+  const monthsPerYear = computed<number>(() => months.value.length)
+  const daysPerYear = computed<number>(() => months.value.reduce((acc, o) => acc + o.days, 0))
 
   // Default date settings (current day in the world)
   // The base setting is the first day / month of year 0
-  const defaultDay: Ref<number> = ref<number>(1)
-  const defaultMonth: Ref<number> = ref<number>(0)
-  const defaultYear: Ref<number> = ref<number>(0)
+  const defaultDay = ref<number>(1)
+  const defaultMonth = ref<number>(0)
+  const defaultYear = ref<number>(0)
 
   // Object representation
-  const defaultDate: ComputedRef<RPGDate> = computed(() => {
+  const defaultDate = computed<RPGDate>(() => {
     return {
       day: defaultDay.value,
       month: defaultMonth.value,
@@ -70,34 +101,12 @@ export const useCalendar = defineStore('calendar', () => {
     }
   })
 
-  // Get date from URL params
-  const params = useUrlSearchParams('history', {
-    write: false,
-    initialValue: {
-      day: defaultDate.value.day.toString(),
-      month: defaultDate.value.month.toString(),
-      year: defaultDate.value.year.toString()
-    }
-  })
-
-  /**
-   * Sets the new defaultDate (aka the "today" value from the calendar)
-   *
-   * @param date The new data to set as defaultDate
-   */
-  function setDefaultDate(date: RPGDate) {
+  function setDefaultDate(date: RPGDate): void {
     defaultDay.value = date.day
     defaultMonth.value = date.month
     defaultYear.value = date.year
   }
 
-  // Everytime the defaultDate changes / is set, we should update the params in the URL
-  watch(defaultDate, () => {
-    params.day = String(defaultDate.value.day)
-    params.month = String(defaultDate.value.month)
-    params.year = String(defaultDate.value.year)
-  })
-
   const currentDay = computed<number>(() => {
     return Number(params.day)
   })
@@ -117,24 +126,24 @@ export const useCalendar = defineStore('calendar', () => {
 
   const currentDateTitle = computed<string>(() => {
     switch (currentConfig.value.viewType) {
-      case 'month':
+      case "month":
         return getFormattedDateTitle({
           day: currentDate.currentDay.value,
           month: currentDate.currentMonth.value,
           year: currentDate.currentYear.value,
         })
 
-      case 'year':
+      case "year":
         return `Année ${currentYear.value}`
 
-      case 'decade':
+      case "decade":
         return `Années ${currentYear.value} - ${currentYear.value + 10}`
 
-      case 'century':
+      case "century":
         return `Années ${currentYear.value} - ${currentYear.value + 100}`
 
       default:
-        return 'Date inconnue'
+        return "Date inconnue"
     }
   })
 
@@ -149,28 +158,28 @@ export const useCalendar = defineStore('calendar', () => {
 
   const currentRPGDate = computed<RPGDate>(() => {
     return {
-      day: currentDate.currentDay.value,
-      month: currentDate.currentMonth.value,
-      year: currentDate.currentYear.value,
+      day: currentDay.value,
+      month: currentMonth.value,
+      year: currentYear.value,
     }
   })
 
-  const selectedDate = useLocalStorage<RPGDate>('selected-date', currentRPGDate.value, { deep: true })
+  const selectedDate = ref<RPGDate>({...defaultDate.value})
 
   /**
    * Check whether the current viewType is active
    */
   const isCurrentScreenActive = computed<boolean>(() => {
     switch (currentConfig.value.viewType) {
-      case 'month':
+      case "month":
         return (
           defaultDate.value.month === currentDate.currentMonth.value &&
           defaultDate.value.year === currentDate.currentYear.value
         )
 
-      case 'year':
-      case 'decade':
-      case 'century':
+      case "year":
+      case "decade":
+      case "century":
         return defaultDate.value.year === currentDate.currentYear.value
 
       default:
@@ -181,14 +190,14 @@ export const useCalendar = defineStore('calendar', () => {
   /**
    * Moves the current date forward one month
    */
-  function incrementMonth(): void {
+  function incrementViewMonth(): void {
     let newValue = Number(params.month) + 1
 
     // If the new value would exceed the max number of month per year
     if (newValue >= monthsPerYear.value) {
       newValue = 0
       // Increment the year
-      incrementYear()
+      incrementViewYear()
     }
 
     params.month = newValue.toString()
@@ -197,26 +206,26 @@ export const useCalendar = defineStore('calendar', () => {
   /**
    * Moves the current date backward one month
    */
-  function decrementMonth(): void {
+  function decrementViewMonth(): void {
     let newValue = Number(params.month) - 1
 
     // If the new value would go below 0
     if (newValue < 0) {
       newValue = monthsPerYear.value - 1
       // Decrement the year
-      decrementYear()
+      decrementViewYear()
     }
 
     params.month = newValue.toString()
   }
 
   /**
-   * Get the previous month number
+   * Get the previous month number of the calendar view
    *
    * @param monthNumber Initial month
    * @returns The previous month number in the year
    */
-  function getPreviousMonth(monthNumber: number): number {
+  function getPreviousViewMonth(monthNumber: number): number {
     const target: number = monthNumber - 1
 
     if (target < 0) {
@@ -227,12 +236,12 @@ export const useCalendar = defineStore('calendar', () => {
   }
 
   /**
-   * Get the following month number
+   * Get the following month number of the calendar view
    *
    * @param monthNumber Initial month
    * @returns The next month number in the year
    */
-  function getNextMonth(monthNumber: number): number {
+  function getNextViewMonth(monthNumber: number): number {
     const target: number = monthNumber + 1
 
     if (target + 1 > monthsPerYear.value) {
@@ -243,9 +252,9 @@ export const useCalendar = defineStore('calendar', () => {
   }
 
   /**
-   * Moves the current date to a particular month
+   * Moves the current view to a particular month
    */
-  function setMonth(target: number): void {
+  function setViewMonth(target: number): void {
     // If the target is outside the month bounds
     if (target < 0 || target >= monthsPerYear.value) {
       return
@@ -255,18 +264,18 @@ export const useCalendar = defineStore('calendar', () => {
   }
 
   /**
-   * Moves the current date forward one year
+   * Moves the current view forward one year
    */
-  function incrementYear(inc: number = 1): void {
+  function incrementViewYear(inc: number = 1): void {
     const newValue = Number(params.year) + inc
 
     params.year = newValue.toString()
   }
 
   /**
-   * Moves the current date backward one year
+   * Moves the current view backward one year
    */
-  function decrementYear(inc: number = 1): void {
+  function decrementViewYear(inc: number = 1): void {
     const newValue = Number(params.year) - inc
 
     params.year = newValue.toString()
@@ -284,13 +293,13 @@ export const useCalendar = defineStore('calendar', () => {
       return sortedMonths.value[index].name
     }
 
-    return ''
+    return ""
   }
 
   /**
    * State for advanced search modal
    */
-  const isAdvancedSearchOpen: Ref<boolean> = ref<boolean>(false)
+  const isAdvancedSearchOpen = ref<boolean>(false)
 
   function revealAdvancedSearch() {
     isAdvancedSearchOpen.value = true
@@ -316,18 +325,18 @@ export const useCalendar = defineStore('calendar', () => {
    */
   function getViewTypeTitle(viewType: CalendarViewType): string {
     switch (viewType) {
-      case 'year':
-        return 'Année'
+      case "year":
+        return "Année"
 
-      case 'decade':
-        return 'Décennie'
+      case "decade":
+        return "Décennie"
 
-      case 'century':
-        return 'Siècle'
+      case "century":
+        return "Siècle"
 
-      case 'month':
+      case "month":
       default:
-        return 'Mois'
+        return "Mois"
     }
   }
 
@@ -430,9 +439,9 @@ export const useCalendar = defineStore('calendar', () => {
    * @param date2 Second date
    * @returns 1 means the first date comes before the second, -1 means the second comes before the first, and 0 if they're identical
    */
-  function compareDates(a: RPGDate, b: RPGDate, order: RPGDateOrder = 'desc'): number {
+  function compareDates(a: RPGDate, b: RPGDate, order: RPGDateOrder = "desc"): number {
     // Reverses the order if specified
-    const orderFactor: number = order === 'desc' ? 1 : -1
+    const orderFactor: number = order === "desc" ? 1 : -1
 
     // If somehow one of the date isn't available
     if (!b) {
@@ -467,43 +476,43 @@ export const useCalendar = defineStore('calendar', () => {
   function getRelativeString(
     baseDate: RPGDate,
     relativeDate: RPGDate,
-    formatting: 'compact' | 'complex' = 'complex'
+    formatting: "compact" | "complex" = "complex"
   ): string {
     const differenceInDays: number = getDifferenceInDays(baseDate, relativeDate)
-    let output: string = ''
-    let direction: 'past' | 'present' | 'future' = 'present'
-    let directionPrefix: string = ''
+    let output: string = ""
+    let direction: "past" | "present" | "future" = "present"
+    let directionPrefix: string = ""
 
     // Check whether it's a past or future date
     if (differenceInDays > 0) {
-      direction = 'future'
+      direction = "future"
     } else if (differenceInDays < 0) {
-      direction = 'past'
+      direction = "past"
     }
 
-    if (formatting === 'complex') {
+    if (formatting === "complex") {
     // Handle if it's the same date
-      if (direction === 'present') {
+      if (direction === "present") {
         return "Aujourd'hui"
       }
       if (differenceInDays === -2) {
-        return 'Avant-hier'
+        return "Avant-hier"
       }
       if (differenceInDays === -1) {
-        return 'Hier'
+        return "Hier"
       }
       if (differenceInDays === 1) {
-        return 'Demain'
+        return "Demain"
       }
       if (differenceInDays === 2) {
-        return 'Après-demain'
+        return "Après-demain"
       }
 
       // Get relevant prefix for the string
-      if (direction === 'future') {
-        directionPrefix = 'Dans '
-      } else if (direction === 'past') {
-        directionPrefix = 'Il y a '
+      if (direction === "future") {
+        directionPrefix = "Dans "
+      } else if (direction === "past") {
+        directionPrefix = "Il y a "
       }
 
       output += directionPrefix
@@ -558,16 +567,16 @@ export const useCalendar = defineStore('calendar', () => {
       // First, get all the remaining days in the current month
       const currentMonth = sortedMonths.value[datePivot.month]
       dateAcc.day = currentMonth.days - datePivot.day
-      if (direction === 'future') {
-        datePivot.month = getNextMonth(datePivot.month)
+      if (direction === "future") {
+        datePivot.month = getNextViewMonth(datePivot.month)
       } else {
-        datePivot.month = getPreviousMonth(datePivot.month)
+        datePivot.month = getPreviousViewMonth(datePivot.month)
       }
       datePivot.day = 1
 
       // Then, get the remaining months in the year
       const remainingMonthsStart = sortedMonths.value.filter((m) => datePivot.month < m.position )
-      if (direction === 'future') {
+      if (direction === "future") {
         dateAcc.month = remainingMonthsStart.length + 1
       } else {
         dateAcc.month = remainingMonthsStart.length - 1
@@ -604,11 +613,263 @@ export const useCalendar = defineStore('calendar', () => {
     }
   }
 
+  const baseEvents = ref<CalendarEvent[]>([])
+  const categories = ref<Category[]>([])
+
+  // Order base events by dates
+  const allEvents = computed<CalendarEvent[]>(() => [...baseEvents.value].sort((a, b) => compareDates(a.startDate, b.startDate, "desc")))
+
+  // Gets all current event in its default state
+  const currentEvents = ref<CalendarEvent[]>([])
+
+  // Watch for currentDate or events' list changes
+  // This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
+  watch([currentRPGDate, allEvents], () => {
+    currentEvents.value = computeCurrentEvents()
+  }, { deep: true, immediate: true })
+
+  /**
+   * Determines if the event can appear in the front end
+   *
+   * This function takes into consideration the viewType of the calendar config
+   *
+   * @param event The event to analyze
+   * @returns Whether the event should appear in the current view
+   */
+  function shouldEventBeDisplayed(event: CalendarEvent): boolean {
+    const isEventOnCurrentScreen =
+      (event.startDate.year === currentRPGDate.value.year &&
+        event.startDate.month === currentRPGDate.value.month) ||
+      (event.endDate &&
+        event.endDate.year === currentRPGDate.value.year &&
+        event.endDate.month === currentRPGDate.value.month)
+
+    switch (currentConfig.value.viewType) {
+      case "month":
+        return !!isEventOnCurrentScreen
+
+      case "year":
+        return event.startDate.year === currentRPGDate.value.year
+
+      case "decade":
+        return (
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 10
+        )
+
+      case "century":
+        return (
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 100
+        )
+
+      default:
+        return false
+    }
+  }
+
+  /**
+   * Fetches all the current events for the current view
+   *
+   * @returns A list of events that can appear in the current view
+   */
+  function computeCurrentEvents(): CalendarEvent[] {
+    return [...allEvents.value].filter((event) => shouldEventBeDisplayed(event))
+  }
+
+  /**
+   * From a base event, gets the next or previous one in the timeline
+   *
+   * @param event The event at a given position in the data
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEventFromEvent(
+    event: CalendarEvent,
+    position: "next" | "prev" = "next",
+    initialIsEnd: boolean = false
+  ): { event: CalendarEvent; targetDate: RPGDate } {
+    let dateToParse: RPGDate // Day value of the date that the user interacted with
+
+    if (initialIsEnd && event.endDate) {
+      dateToParse = event.endDate
+    } else {
+      dateToParse = event.startDate
+    }
+
+    return getRelativeEventFromDate(dateToParse, position)
+  }
+
+  /**
+   * From a date, gets the next or previous event in the timeline
+   *
+   * @param date The starting date from which to get the next event
+   * @param position Whether we should get the next or previous event
+   * @returns The next event in chronological order
+   */
+  function getRelativeEventFromDate(
+    date: RPGDate,
+    position: "next" | "prev" = "next"
+  ): { event: CalendarEvent; targetDate: RPGDate } {
+    const pivotValue = convertDateToDays(date)
+    let t: { eventData: CalendarEvent; distance: number; targetKey: "startDate" | "endDate" }[] = []
+
+    // Loop over all event once to convert the structure to a usable one
+    for (let i = 0; i < allEvents.value.length; i++) {
+      const e: CalendarEvent = allEvents.value[i]
+
+      // Estimate distance from pivot
+      const startDateDays: number = convertDateToDays(e.startDate)
+      const startDistance: number = startDateDays - pivotValue
+
+      // Push startDate to comparator array
+      t.push({
+        eventData: e,
+        distance: startDistance,
+        targetKey: "startDate"
+      })
+
+      // Check the same things for endDate
+      if (e.endDate) {
+        const endDateDays: number = convertDateToDays(e.endDate)
+        const endDistance: number = endDateDays - pivotValue
+
+        // Push optional endDate to comparator array
+        t.push({
+          eventData: e,
+          distance: endDistance,
+          targetKey: "endDate"
+        })
+      }
+    }
+
+    // Based on the direction, either ignore negative distance (past) or positive distance (future)
+    t = t.filter((i) => {
+      return position === "next" ? i.distance > 0 : i.distance < 0
+    })
+
+    if (!t.length) {
+      throw new Error(
+        "Aucun évènement suivant ou précédent trouvé ; Peut-être l'évènement se situe au début ou à la fin du calendrier ?"
+      )
+    }
+
+    // Get event with remaining minimum distance
+    const closestEvent = t.reduce((a, b) => {
+      return Math.abs(b.distance) < Math.abs(a.distance) ? b : a
+    })
+
+    return {
+      event: closestEvent.eventData,
+      targetDate: closestEvent.eventData[closestEvent.targetKey]!
+    }
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isEditEventModalOpen = ref<boolean>(false)
+
+  function revealEditEventModal() {
+    isEditEventModalOpen.value = true
+  }
+
+  /**
+   * State for event modal edition
+   */
+  const isDeleteEventModalOpen = ref<boolean>(false)
+
+  function revealDeleteEventModal() {
+    isDeleteEventModalOpen.value = true
+  }
+
+  /**
+   * EVENT CREATION FUNCTIONS
+   */
+  const lastActiveEvent = ref<CalendarEvent | null>()
+  const isCreatingEvent = ref<boolean>(false)
+  const isUpdatingEvent = ref<boolean>(false)
+  const isDeletingEvent = ref<boolean>(false)
+  const operationInProgress = computed<boolean>(() => isCreatingEvent.value || isUpdatingEvent.value || isDeletingEvent.value)
+  let abortController: AbortController | null = null
+
+  /**
+   * Dummy event to hold creation data
+   */
+  const eventSkeleton = ref<CalendarEvent>({ title: "", startDate: defaultDate.value })
+
+  /**
+   * Resets the dummy event data
+   */
+  function resetSkeleton() {
+    eventSkeleton.value = { title: "", startDate: defaultDate.value }
+  }
+
+  /**
+   * Submits the skeleton event and creates a real event from its data
+   *
+   * We assume it's been sanitized by the caller
+   */
+  async function submitSkeleton() {
+    abortController = new AbortController()
+    isCreatingEvent.value = true
+
+    try {
+      const res = await $fetch("/api/calendars/events/create", { method: "POST", body: { event : eventSkeleton.value, calendarId: activeCalendar.value?.id }, signal: abortController.signal })
+
+      baseEvents.value.push(res)
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isCreatingEvent.value = false
+    }
+  }
+
+  async function updateEventFromSkeleton() {
+    abortController = new AbortController()
+    isUpdatingEvent.value = true
+
+    try {
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "PATCH", body: { event : eventSkeleton.value, calendarId: activeCalendar.value?.id }, signal: abortController.signal })
+
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value[eventIndex] = res
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isUpdatingEvent.value = false
+    }
+  }
+
+  async function deleteEventFromSkeleton() {
+    abortController = new AbortController()
+    isDeletingEvent.value = true
+
+    try {
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "DELETE", signal: abortController.signal })
+
+      const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
+      baseEvents.value.splice(eventIndex, 1)
+    } catch (err) {
+      console.log(err)
+    } finally {
+      abortController = null
+      isDeletingEvent.value = false
+    }
+  }
+
+  function cancelLatestRequest() {
+    if (abortController) {
+      abortController.abort()
+    }
+  }
+
   return {
-    calendarId,
-    setCalendarId,
+    setActiveCalendar,
+    activeCalendar,
     months,
-    setMonths,
     sortedMonths,
     daysPerYear,
     monthsPerYear,
@@ -617,18 +878,17 @@ export const useCalendar = defineStore('calendar', () => {
     currentDate,
     currentRPGDate,
     currentMonthData,
-    defaultDate,
-    setDefaultDate,
-    selectedDate: skipHydrate(selectedDate),
+    defaultDate: defaultDate,
+    selectedDate: selectedDate,
     selectDate,
     params,
-    incrementMonth,
-    decrementMonth,
-    setMonth,
-    getPreviousMonth,
-    getNextMonth,
-    incrementYear,
-    decrementYear,
+    incrementViewMonth,
+    decrementViewMonth,
+    setViewMonth,
+    getPreviousViewMonth,
+    getNextViewMonth,
+    incrementViewYear,
+    decrementViewYear,
     jumpToDate,
     jumpToDefaultDate,
     getFormattedDateTitle,
@@ -643,5 +903,26 @@ export const useCalendar = defineStore('calendar', () => {
     areDatesIdentical,
     compareDates,
     getRelativeString,
+    baseEvents,
+    allEvents,
+    categories,
+    currentEvents,
+    getRelativeEventFromDate,
+    getRelativeEventFromEvent,
+    cancelLatestRequest,
+    isCreatingEvent,
+    isUpdatingEvent,
+    isDeletingEvent,
+    operationInProgress,
+    eventSkeleton,
+    resetSkeleton,
+    submitSkeleton,
+    lastActiveEvent,
+    updateEventFromSkeleton,
+    deleteEventFromSkeleton,
+    isEditEventModalOpen,
+    revealEditEventModal,
+    isDeleteEventModalOpen,
+    revealDeleteEventModal
   }
 })
diff --git a/stores/CharacterStore.ts b/stores/CharacterStore.ts
index 94e3be3..95fa0d2 100644
--- a/stores/CharacterStore.ts
+++ b/stores/CharacterStore.ts
@@ -1,7 +1,7 @@
-import type { Character } from '@/models/Characters'
-import { defineStore } from 'pinia'
+import type { Character } from "@/models/Characters"
+import { defineStore } from "pinia"
 
-export const useCharacters = defineStore('characters', () => {
+export const useCharacters = defineStore("characters", () => {
   const characters = ref<Character[]>([])
 
   async function setCharacters(data: Character[]) {
diff --git a/stores/EventStore.ts b/stores/EventStore.ts
index 40cf752..3eecbac 100644
--- a/stores/EventStore.ts
+++ b/stores/EventStore.ts
@@ -1,18 +1,28 @@
-import type { CalendarEvent } from '@/models/CalendarEvent'
-import type { RPGDate } from '@/models/Date'
-import { defineStore } from 'pinia'
-import { ref, watch, type Ref } from 'vue'
-import type { Category } from '~/models/Category'
-import { useCalendar } from './CalendarStore'
+import type { CalendarEvent } from "@/models/CalendarEvent"
+import type { RPGDate } from "@/models/Date"
+import { defineStore } from "pinia"
+import { ref, watch, type Ref } from "vue"
+import type { Category } from "~/models/Category"
+import { useCalendar } from "./CalendarStore"
 
-export const useCalendarEvents = defineStore('calendar-events', () => {
-  const { currentDate, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
-  const { calendarId } = storeToRefs(useCalendar())
+export const useCalendarEvents = defineStore("calendar-events", () => {
+  const { activeCalendar, defaultDate, currentConfig, convertDateToDays, compareDates } = useCalendar()
+  const { currentRPGDate } = storeToRefs(useCalendar())
 
   const baseEvents = ref<CalendarEvent[]>([])
 
-  function setEvents(data: CalendarEvent[]) {
-    baseEvents.value = data
+  async function fetchCalendarEvents(calendarId: number) {
+    try {
+      const res = await $fetch("/api/calendars/events/query", { query: { calendarId } })
+
+      const eventData = res.data as CalendarEvent[]
+
+      if (!eventData.length) return
+
+      baseEvents.value = eventData
+    } catch (err) {
+      console.log(err)
+    }
   }
 
   const categories = ref<Category[]>([])
@@ -23,7 +33,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   // Order base events by dates
   const allEvents = computed(() => baseEvents.value.sort((a, b) => {
-    return compareDates(a.startDate, b.startDate, 'desc')
+    return compareDates(a.startDate, b.startDate, "desc")
   }))
 
   // Gets all current event in its default state
@@ -31,7 +41,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   // Watch for currentDate or events' list changes
   // This is deep because we're watching an array, and changes need to trigger and mutations like .push and .splice
-  watch([currentDate, allEvents], () => {
+  watch([currentRPGDate, allEvents], () => {
     currentEvents.value = computeCurrentEvents()
   }, { deep: true, immediate: true })
 
@@ -45,29 +55,29 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   function shouldEventBeDisplayed(event: CalendarEvent): boolean {
     const isEventOnCurrentScreen =
-      (event.startDate.year === currentDate.currentYear &&
-        event.startDate.month === currentDate.currentMonth) ||
+      (event.startDate.year === currentRPGDate.value.day &&
+        event.startDate.month === currentRPGDate.value.month) ||
       (event.endDate &&
-        event.endDate.year === currentDate.currentYear &&
-        event.endDate.month === currentDate.currentMonth)
+        event.endDate.year === currentRPGDate.value.year &&
+        event.endDate.month === currentRPGDate.value.month)
 
     switch (currentConfig.viewType) {
-      case 'month':
+      case "month":
         return isEventOnCurrentScreen!
 
-      case 'year':
-        return event.startDate.year === currentDate.currentYear
+      case "year":
+        return event.startDate.year === currentRPGDate.value.year
 
-      case 'decade':
+      case "decade":
         return (
-          event.startDate.year >= currentDate.currentYear &&
-          event.startDate.year <= currentDate.currentYear + 10
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 10
         )
 
-      case 'century':
+      case "century":
         return (
-          event.startDate.year >= currentDate.currentYear &&
-          event.startDate.year <= currentDate.currentYear + 100
+          event.startDate.year >= currentRPGDate.value.year &&
+          event.startDate.year <= currentRPGDate.value.year + 100
         )
 
       default:
@@ -93,7 +103,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   function getRelativeEventFromEvent(
     event: CalendarEvent,
-    position: 'next' | 'prev' = 'next',
+    position: "next" | "prev" = "next",
     initialIsEnd: boolean = false
   ): { event: CalendarEvent; targetDate: RPGDate } {
     let dateToParse: RPGDate // Day value of the date that the user interacted with
@@ -116,10 +126,10 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
    */
   function getRelativeEventFromDate(
     date: RPGDate,
-    position: 'next' | 'prev' = 'next'
+    position: "next" | "prev" = "next"
   ): { event: CalendarEvent; targetDate: RPGDate } {
     const pivotValue = convertDateToDays(date)
-    let t: { eventData: CalendarEvent; distance: number; targetKey: 'startDate' | 'endDate' }[] = []
+    let t: { eventData: CalendarEvent; distance: number; targetKey: "startDate" | "endDate" }[] = []
 
     // Loop over all event once to convert the structure to a usable one
     for (let i = 0; i < allEvents.value.length; i++) {
@@ -133,7 +143,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
       t.push({
         eventData: e,
         distance: startDistance,
-        targetKey: 'startDate'
+        targetKey: "startDate"
       })
 
       // Check the same things for endDate
@@ -145,14 +155,14 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
         t.push({
           eventData: e,
           distance: endDistance,
-          targetKey: 'endDate'
+          targetKey: "endDate"
         })
       }
     }
 
     // Based on the direction, either ignore negative distance (past) or positive distance (future)
     t = t.filter((i) => {
-      return position === 'next' ? i.distance > 0 : i.distance < 0
+      return position === "next" ? i.distance > 0 : i.distance < 0
     })
 
     if (!t.length) {
@@ -203,13 +213,13 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
   /**
    * Dummy event to hold creation data
    */
-  const eventSkeleton: Ref<CalendarEvent> = ref<CalendarEvent>({ title: '', startDate: defaultDate })
+  const eventSkeleton: Ref<CalendarEvent> = ref<CalendarEvent>({ title: "", startDate: defaultDate })
 
   /**
    * Resets the dummy event data
    */
   function resetSkeleton() {
-    eventSkeleton.value = { title: '', startDate: defaultDate }
+    eventSkeleton.value = { title: "", startDate: defaultDate }
   }
 
   /**
@@ -222,7 +232,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isCreatingEvent.value = true
 
     try {
-      const res = await $fetch('/api/calendars/events/create', { method: 'POST', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+      const res = await $fetch("/api/calendars/events/create", { method: "POST", body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
 
       baseEvents.value.push(res)
     } catch (err) {
@@ -238,7 +248,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isUpdatingEvent.value = true
 
     try {
-      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'PATCH', body: { event : eventSkeleton.value, calendarId: calendarId.value }, signal: abortController.signal })
+      const res = await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "PATCH", body: { event : eventSkeleton.value, calendarId: activeCalendar?.id }, signal: abortController.signal })
 
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value[eventIndex] = res
@@ -255,7 +265,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
     isDeletingEvent.value = true
 
     try {
-      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: 'DELETE', signal: abortController.signal })
+      await $fetch(`/api/calendars/events/${eventSkeleton.value.id}`, { method: "DELETE", signal: abortController.signal })
 
       const eventIndex = baseEvents.value.findIndex(e => e.id === eventSkeleton.value.id)
       baseEvents.value.splice(eventIndex, 1)
@@ -275,7 +285,7 @@ export const useCalendarEvents = defineStore('calendar-events', () => {
 
   return {
     allEvents,
-    setEvents,
+    fetchCalendarEvents,
     categories,
     setCategories,
     currentEvents,
diff --git a/stores/UiStore.ts b/stores/UiStore.ts
index 3b005fe..43dbda6 100644
--- a/stores/UiStore.ts
+++ b/stores/UiStore.ts
@@ -1,6 +1,6 @@
 import type { SidebarMenuItem } from "~/components/global/sidebar/SidebarProps"
 
-export const useUiStore = defineStore('ui', () => {
+export const useUiStore = defineStore("ui", () => {
   const currentMenu: Ref<SidebarMenuItem[]> = ref<SidebarMenuItem[]>([])
 
   function setCurrentMenu(items: SidebarMenuItem[]) {
diff --git a/supabase/migrations/202401_init.sql b/supabase/migrations/202401_init.sql
index be2f6f5..ca78c9d 100644
--- a/supabase/migrations/202401_init.sql
+++ b/supabase/migrations/202401_init.sql
@@ -160,6 +160,11 @@ alter table public.calendar_events enable row level security;
 alter table public.calendar_event_categories enable row level security;
 alter table public.calendar_event_categories_links enable row level security;
 
+-- Add realtime
+alter publication supabase_realtime add table users;
+alter publication supabase_realtime add table worlds;
+alter publication supabase_realtime add table calendars;
+
 -- User policies
 create policy "Allow logged-in read access" on public.users for select using ( auth.role() = 'authenticated' );
 create policy "Allow individual insert access" on public.users for insert with check ( auth.uid() = id );
@@ -172,19 +177,25 @@ create policy "Allow individual insert access for GMs" on public.worlds for inse
 create policy "Allow individual update access for GMs" on public.worlds for update using ( auth.uid() = gm_id );
 
 -- Calendar policies
-create policy "Allow individual read access for GMs" on public.calendars for select using (
+create policy "Allow GMs to see their calendars" on public.calendars for select using (
     exists (
         select 1 from worlds
         where worlds.id = calendars.world_id
     )
 );
-create policy "Allow individual insert access for GMs" on public.calendars for insert with check (
+create policy "Allow GMs to add calendars to their worldd" on public.calendars for insert with check (
     exists (
         select 1 from worlds
         where worlds.id = calendars.world_id
     )
 );
-create policy "Allow individual update access for GMs" on public.calendars for update with check (
+create policy "Allow GMs to edit their calendars" on public.calendars for update with check (
+    exists (
+        select 1 from worlds
+        where worlds.id = calendars.world_id
+    )
+);
+create policy "Allow GMs to delete their calendars" on public.calendars for delete using (
     exists (
         select 1 from worlds
         where worlds.id = calendars.world_id
@@ -192,42 +203,110 @@ create policy "Allow individual update access for GMs" on public.calendars for u
 );
 
 -- Month policies
-create policy "Allow individual read access for GMs" on public.calendar_months for select using (
+create policy "Allow GMs to see their calendar's months"
+  on public.calendar_months
+  for select
+  using (
     exists (
-        select 1 from calendars
-        where calendars.id = calendar_months.calendar_id
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_months.calendar_id
+        and w.gm_id = auth.uid()
     )
 );
-create policy "Allow individual insert access for GMs" on public.calendar_months for insert with check (
+create policy "Allow GMs to add months on their calendars"
+  on public.calendar_months
+  for insert
+  with check (
     exists (
-        select 1 from calendars
-        where calendars.id = calendar_months.calendar_id
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_months.calendar_id
+        and w.gm_id = auth.uid()
     )
 );
-create policy "Allow individual update access for GMs" on public.calendar_months for update with check (
+create policy "Allow GMs to update their calendar's months"
+  on public.calendar_months
+  for update
+  using (
     exists (
-        select 1 from calendars
-        where calendars.id = calendar_months.calendar_id
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_months.calendar_id
+        and w.gm_id = auth.uid()
+    )
+);
+create policy "Allow GMs to delete their calendar's months"
+  on public.calendar_months
+  for delete
+  using (
+    exists (
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_months.calendar_id
+        and w.gm_id = auth.uid()
     )
 );
 
 -- Event policies
-create policy "Allow individual read access for GMs" on public.calendar_events for select using (
+create policy "Allow GMs to see their events"
+  on public.calendar_events
+  for select
+  using (
     exists (
-        select 1 from calendars
-        where calendars.id = calendar_events.calendar_id
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_events.calendar_id
+        and w.gm_id = auth.uid()
     )
 );
-create policy "Allow individual insert access for GMs" on public.calendar_events for insert with check (
+create policy "Allow GMs to add their events"
+  on public.calendar_events
+  for insert
+  with check (
     exists (
-        select 1 from calendars
-        where calendars.id = calendar_events.calendar_id
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_events.calendar_id
+        and w.gm_id = auth.uid()
     )
 );
-create policy "Allow individual update access for GMs" on public.calendar_events for update with check (
+create policy "Allow GMs to update their events"
+  on public.calendar_events
+  for update
+  using (
     exists (
-        select 1 from calendars
-        where calendars.id = calendar_events.calendar_id
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_events.calendar_id
+        and w.gm_id = auth.uid()
+    )
+);
+create policy "Allow GMs to delete their events"
+  on public.calendar_events
+  for delete
+  using (
+    exists (
+      select 1
+      from public.calendars c
+      join public.worlds w on w.id = c.world_id
+      where
+        c.id = calendar_events.calendar_id
+        and w.gm_id = auth.uid()
     )
 );
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 81727a1..9567927 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -75,10 +75,10 @@ module.exports = {
         },
         "collapsible-down": {
           from: { height: 0 },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: "var(--radix-collapsible-content-height)" },
         },
         "collapsible-up": {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: "var(--radix-collapsible-content-height)" },
           to: { height: 0 },
         },
       },
@@ -93,12 +93,12 @@ module.exports = {
   plugins: [
     animate,
     function ({ addBase, theme }) {
-      function extractColorVars(colorObj, colorGroup = '') {
+      function extractColorVars(colorObj, colorGroup = "") {
         return Object.keys(colorObj).reduce((vars, colorKey) => {
           const value = colorObj[colorKey]
 
           const newVars =
-            typeof value === 'string'
+            typeof value === "string"
               ? { [`--color${colorGroup}-${colorKey}`]: value }
               : extractColorVars(value, `-${colorKey}`)
 
@@ -107,7 +107,7 @@ module.exports = {
       }
 
       addBase({
-        ':root': extractColorVars(theme('colors'))
+        ":root": extractColorVars(theme("colors"))
       })
     }
   ]