diff --git a/src/modules/events/components/EventCalendarPopup.vue b/src/modules/events/components/EventCalendarPopup.vue
index 955d805..9a16173 100644
--- a/src/modules/events/components/EventCalendarPopup.vue
+++ b/src/modules/events/components/EventCalendarPopup.vue
@@ -1,26 +1,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import {
-  DialogRoot,
-  DialogPortal,
-  DialogOverlay,
+  Dialog,
   DialogContent,
+  DialogHeader,
   DialogTitle,
   DialogDescription,
-  DialogClose,
-} from 'reka-ui'
-import { X } from 'lucide-vue-next'
+} from '@/components/ui/dialog'
 import EventCalendarView from './EventCalendarView.vue'
 import type { Event } from '../types/event'
 
 // A date-picker popup: the month grid (with per-day event dots) in a
 // dialog. Picking a day emits selectDate and closes. Reused by the feed
 // (filter to a day) and My Tickets (visualise the user's event dates).
-//
-// Built on the reka-ui dialog primitives (rather than the shared
-// DialogContent) so it can use a light, blurred overlay instead of the
-// usual opaque dark dim — the feed stays visible, softly blurred, behind
-// the frosted-glass panel.
 const props = defineProps<{
   open: boolean
   events: Event[]
@@ -45,31 +37,13 @@ function onSelectDate(date: Date) {
 </script>
 
 <template>
-  <DialogRoot v-model:open="isOpen">
-    <DialogPortal>
-      <!-- Frosted backdrop: a light tint + blur so the feed shows
-           through (softly blurred) rather than being hidden behind an
-           opaque dark overlay. -->
-      <DialogOverlay class="fixed inset-0 z-50 bg-background/20 backdrop-blur-md" />
-      <DialogContent
-        class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background/70 p-6 shadow-lg backdrop-blur-xl"
-      >
-        <div class="flex flex-col gap-1.5 text-center sm:text-left">
-          <DialogTitle class="text-lg font-semibold leading-none tracking-tight">
-            {{ title }}
-          </DialogTitle>
-          <DialogDescription class="text-sm text-muted-foreground">
-            {{ description }}
-          </DialogDescription>
-        </div>
-        <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
-        <DialogClose
-          class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
-          aria-label="Close"
-        >
-          <X class="w-4 h-4" />
-        </DialogClose>
-      </DialogContent>
-    </DialogPortal>
-  </DialogRoot>
+  <Dialog v-model:open="isOpen">
+    <DialogContent class="max-w-sm">
+      <DialogHeader>
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
+    </DialogContent>
+  </Dialog>
 </template>