diff --git a/components/calendar/CalendarEvent.vue b/components/calendar/CalendarEvent.vue
index e80d2ce..d388f15 100644
--- a/components/calendar/CalendarEvent.vue
+++ b/components/calendar/CalendarEvent.vue
@@ -2,9 +2,7 @@
 import { ref } from 'vue'
 import { cn } from '@/lib/utils'
 import { areDatesIdentical, type RPGDate } from '@/models/Date'
-
 import type { CalendarEvent } from '~/models/CalendarEvent'
-import CalendarEventDetails from './CalendarEventDetails.vue'
 
 const props = defineProps<{
   event: CalendarEvent
@@ -32,24 +30,24 @@ function handleClosePopover() {
         :class="
           cn({
             'text-white bg-slate-600 hover:bg-slate-700': !event.category,
-            'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
-            'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort',
-            'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
-            'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle',
-            'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
-            'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
-            'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
-            'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
-            'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
-            'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
-            'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction',
-            'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte',
-            'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration',
-            'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction',
-            'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie',
-            'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
-            'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
-            'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce',
+            'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
+            'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
+            'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
+            'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
+            'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
+            'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
+            'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
+            'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
+            'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
+            'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
+            'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
+            'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
+            'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
+            'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
+            'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
+            'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
+            'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
+            'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce',
             'rounded-r-none': isStartEvent,
             'rounded-l-none': isEndEvent
           })
diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 95d4aa1..76b412c 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { getRelativeString, type RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/Events'
+import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
 import { useCalendarEvents } from '@/stores/EventStore'
 
@@ -58,24 +58,24 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
     :hide-when-detached="true"
     :class="{
       'border-slate-800': !event.category,
-      'border-lime-800': event.category === 'naissance',
-      'border-stone-600': event.category === 'mort',
-      'border-orange-800': event.category === 'catastrophe',
-      'border-pink-800': event.category === 'catastrophe naturelle',
-      'border-sky-800': event.category === 'législation',
-      'border-purple-800': event.category === 'religion',
-      'border-emerald-800': event.category === 'joueurs',
-      'border-amber-800': event.category === 'inauguration',
-      'border-green-800': event.category === 'invention',
-      'border-cyan-800': event.category === 'science',
-      'border-slate-600': event.category === 'bénédiction',
-      'border-purple-700': event.category === 'découverte',
-      'border-indigo-700': event.category === 'exploration',
-      'border-amber-700': event.category === 'construction',
-      'border-violet-700': event.category === 'arcanologie',
-      'border-rose-800': event.category === 'criminalité',
-      'border-stone-700': event.category === 'scandale',
-      'border-yellow-600': event.category === 'commerce'
+      'border-lime-800': event.category?.name === 'naissance',
+      'border-stone-600': event.category?.name === 'mort',
+      'border-orange-800': event.category?.name === 'catastrophe',
+      'border-pink-800': event.category?.name === 'catastrophe naturelle',
+      'border-sky-800': event.category?.name === 'législation',
+      'border-purple-800': event.category?.name === 'religion',
+      'border-emerald-800': event.category?.name === 'joueurs',
+      'border-amber-800': event.category?.name === 'inauguration',
+      'border-green-800': event.category?.name === 'invention',
+      'border-cyan-800': event.category?.name === 'science',
+      'border-slate-600': event.category?.name === 'bénédiction',
+      'border-purple-700': event.category?.name === 'découverte',
+      'border-indigo-700': event.category?.name === 'exploration',
+      'border-amber-700': event.category?.name === 'construction',
+      'border-violet-700': event.category?.name === 'arcanologie',
+      'border-rose-800': event.category?.name === 'criminalité',
+      'border-stone-700': event.category?.name === 'scandale',
+      'border-yellow-600': event.category?.name === 'commerce'
     }"
   >
     <div class="grid gap-1">
@@ -110,7 +110,7 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
         <ul class="flex gap-1">
           <li v-if="event.category">
             <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
-              {{ event.category }}
+              {{ event.category?.name }}
             </UiBadge>
           </li>
 
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index 214822f..afe2ef7 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { getRelativeString, type RPGDate } from '@/models/Date'
-import type { CalendarEvent } from '@/models/Events'
+import type { CalendarEvent } from '@/models/CalendarEvent'
 import { useCalendar } from '@/stores/CalendarStore'
 
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
 import { PhArrowSquareOut, PhHourglassMedium, PhAlarm } from '@phosphor-icons/vue'
 
 const props = defineProps<{
@@ -24,28 +22,28 @@ const dateDuration: string | null = props.event.endDate
 </script>
 
 <template>
-  <button
+  <Uibutton
     class="relative block w-full text-left py-3 px-4 rounded-sm transition-colors"
     :class="{
       'text-white bg-slate-600 hover:bg-slate-700': !event.category,
-      'text-white bg-lime-600 hover:bg-lime-700': event.category === 'naissance',
-      'text-white bg-stone-500 hover:bg-stone-700': event.category === 'mort',
-      'text-white bg-orange-600 hover:bg-orange-700': event.category === 'catastrophe',
-      'text-white bg-pink-600 hover:bg-pink-700': event.category === 'catastrophe naturelle',
-      'text-white bg-sky-600 hover:bg-sky-700': event.category === 'législation',
-      'text-white bg-purple-600 hover:bg-purple-700': event.category === 'religion',
-      'text-white bg-emerald-600 hover:bg-emerald-700': event.category === 'joueurs',
-      'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category === 'inauguration',
-      'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category === 'invention',
-      'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category === 'science',
-      'text-slate-900 bg-white hover:bg-yellow-200': event.category === 'bénédiction',
-      'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category === 'découverte',
-      'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category === 'exploration',
-      'text-white bg-amber-600 hover:bg-amber-700': event.category === 'construction',
-      'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category === 'arcanologie',
-      'text-white bg-rose-600 hover:bg-rose-700': event.category === 'criminalité',
-      'text-white bg-stone-600 hover:bg-stone-700': event.category === 'scandale',
-      'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category === 'commerce'
+      'text-white bg-lime-600 hover:bg-lime-700': event.category?.name === 'naissance',
+      'text-white bg-stone-500 hover:bg-stone-700': event.category?.name === 'mort',
+      'text-white bg-orange-600 hover:bg-orange-700': event.category?.name === 'catastrophe',
+      'text-white bg-pink-600 hover:bg-pink-700': event.category?.name === 'catastrophe naturelle',
+      'text-white bg-sky-600 hover:bg-sky-700': event.category?.name === 'législation',
+      'text-white bg-purple-600 hover:bg-purple-700': event.category?.name === 'religion',
+      'text-white bg-emerald-600 hover:bg-emerald-700': event.category?.name === 'joueurs',
+      'text-slate-900 bg-amber-300 hover:bg-amber-400': event.category?.name === 'inauguration',
+      'text-slate-900 bg-emerald-200 hover:bg-emerald-300': event.category?.name === 'invention',
+      'text-slate-900 bg-cyan-300 hover:bg-cyan-400': event.category?.name === 'science',
+      'text-slate-900 bg-white hover:bg-yellow-200': event.category?.name === 'bénédiction',
+      'text-slate-900 bg-purple-200 hover:bg-purple-300': event.category?.name === 'découverte',
+      'text-slate-900 bg-indigo-200 hover:bg-indigo-300': event.category?.name === 'exploration',
+      'text-white bg-amber-600 hover:bg-amber-700': event.category?.name === 'construction',
+      'text-slate-900 bg-violet-200 hover:bg-violet-300': event.category?.name === 'arcanologie',
+      'text-white bg-rose-600 hover:bg-rose-700': event.category?.name === 'criminalité',
+      'text-white bg-stone-600 hover:bg-stone-700': event.category?.name === 'scandale',
+      'text-slate-900 bg-yellow-500 hover:bg-yellow-600': event.category?.name === 'commerce'
     }"
     @click="$emit('query:date-jump', event.startDate)"
   >
@@ -54,12 +52,12 @@ const dateDuration: string | null = props.event.endDate
         {{ event.title }}
       </h2>
       <div v-if="event.wiki">
-        <Button variant="link" size="xs" as-child class="text-inherit">
+        <UiButton variant="link" size="xs" as-child class="text-inherit">
           <a :href="event.wiki" target="_blank">
             Wiki
             <PhArrowSquareOut size="16" weight="fill" />
           </a>
-        </Button>
+        </UiButton>
       </div>
     </div>
 
@@ -91,15 +89,15 @@ const dateDuration: string | null = props.event.endDate
     <div v-if="event.category || event.secondaryCategories" class="absolute top-3 right-4">
       <ul class="flex gap-1">
         <li v-if="event.category">
-          <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
-            {{ event.category }}
-          </Badge>
+          <UiBadge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
+            {{ event.category?.name }}
+          </UiBadge>
         </li>
 
         <li v-for="cat in event.secondaryCategories" :key="cat">
-          <Badge class="mix-blend-luminosity bg-gray-600" variant="secondary">
+          <UiBadge class="mix-blend-luminosity bg-gray-600" variant="secondary">
             {{ cat }}
-          </Badge>
+          </UiBadge>
         </li>
       </ul>
     </div>
@@ -110,5 +108,5 @@ const dateDuration: string | null = props.event.endDate
         {{ event.description }}
       </span>
     </div>
-  </button>
+  </Uibutton>
 </template>