diff --git a/src/modules/events/components/EventCalendarPopup.vue b/src/modules/events/components/EventCalendarPopup.vue
deleted file mode 100644
index 9a16173..0000000
--- a/src/modules/events/components/EventCalendarPopup.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} 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).
-const props = defineProps<{
-  open: boolean
-  events: Event[]
-  title: string
-  description: string
-}>()
-
-const emit = defineEmits<{
-  'update:open': [value: boolean]
-  selectDate: [date: Date]
-}>()
-
-const isOpen = computed({
-  get: () => props.open,
-  set: (v) => emit('update:open', v),
-})
-
-function onSelectDate(date: Date) {
-  emit('selectDate', date)
-  isOpen.value = false
-}
-</script>
-
-<template>
-  <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>
diff --git a/src/modules/events/components/EventCalendarView.vue b/src/modules/events/components/EventCalendarView.vue
index f0a70c8..c77b908 100644
--- a/src/modules/events/components/EventCalendarView.vue
+++ b/src/modules/events/components/EventCalendarView.vue
@@ -12,10 +12,6 @@ import type { Event } from '../types/event'
 
 const props = defineProps<{
   events: Event[]
-  /** When true, render only the month grid for date-picking — no
-   *  selected-day events panel — and emit selectDate on every day tap
-   *  (used inside the calendar popup). */
-  pickerMode?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -81,12 +77,6 @@ const selectedDayEvents = computed(() => {
 })
 
 function selectDay(date: Date) {
-  // Picker mode: every tap selects + emits (parent closes the popup).
-  if (props.pickerMode) {
-    selectedDay.value = date
-    emit('selectDate', date)
-    return
-  }
   if (selectedDay.value && isSameDay(selectedDay.value, date)) {
     selectedDay.value = null
   } else {
@@ -107,7 +97,7 @@ function nextMonth() {
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="space-y-4">
     <!-- Month navigation -->
     <div class="flex items-center justify-between">
       <Button variant="ghost" size="icon" class="h-8 w-8" @click="prevMonth">
@@ -135,7 +125,7 @@ function nextMonth() {
       <button
         v-for="date in calendarDays"
         :key="date.toISOString()"
-        class="h-12 flex flex-col items-center justify-center relative p-0.5 rounded-lg transition-colors"
+        class="aspect-square flex flex-col items-center justify-center relative p-1 rounded-lg transition-colors"
         :class="{
           'text-muted-foreground/40': !isSameMonth(date, currentMonth),
           'bg-primary text-primary-foreground': selectedDay && isSameDay(date, selectedDay),
@@ -157,9 +147,8 @@ function nextMonth() {
       </button>
     </div>
 
-    <!-- Selected day events (hidden in picker mode — the popup just
-         picks a day and closes). -->
-    <div v-if="selectedDay && !pickerMode" class="border-t pt-4 space-y-2">
+    <!-- Selected day events -->
+    <div v-if="selectedDay" class="border-t pt-4 space-y-2">
       <h3 class="text-sm font-medium text-muted-foreground">
         {{ format(selectedDay, 'EEEE, MMMM d', { locale: dateLocale }) }}
         <span v-if="selectedDayEvents.length > 0" class="ml-1">
diff --git a/src/modules/events/composables/useEventFilters.ts b/src/modules/events/composables/useEventFilters.ts
index 38eb9ce..8742cd1 100644
--- a/src/modules/events/composables/useEventFilters.ts
+++ b/src/modules/events/composables/useEventFilters.ts
@@ -15,10 +15,6 @@ import { DEFAULT_FILTERS } from '../types/filters'
 // tapping Hosting toggled a private ref the page never saw.
 const temporal = ref<TemporalFilter>(DEFAULT_FILTERS.temporal)
 const selectedCategories = ref<EventCategory[]>([])
-// A specific day picked from the calendar popup. When set it takes
-// priority over the temporal pills + past/upcoming split (browse any
-// single day). Cleared independently of categories.
-const selectedDate = ref<Date | undefined>(undefined)
 const onlyOwnedTickets = ref(false)
 const onlyHosting = ref(false)
 const showPast = ref(false)
@@ -39,31 +35,20 @@ export function useEventFilters() {
   function applyFilters(events: Event[]): Event[] {
     let result = events
 
-    if (selectedDate.value) {
-      // Specific day picked from the calendar popup — takes priority over
-      // the temporal pills and bypasses the past/upcoming split so any
-      // day (past or future) can be browsed.
-      const dayStart = startOfDay(selectedDate.value)
-      const dayEnd = endOfDay(selectedDate.value)
-      result = result.filter(a => {
-        const eventEnd = a.endDate ?? a.startDate
-        return a.startDate <= dayEnd && eventEnd >= dayStart
-      })
-    } else {
-      // Temporal filter (preset pills).
-      result = applyTemporalFilter(result, temporal.value)
+    // Temporal filter (preset pills). Specific-date browsing now lives on
+    // the calendar page, so the feed only narrows by these windows.
+    result = applyTemporalFilter(result, temporal.value)
 
-      // Past/upcoming split — the chip narrows to one side of "now",
-      // mirroring the "My tickets" / "Hosting" mental model. Default
-      // (showPast=false) is upcoming-only; toggling on flips to
-      // past-only. Composes with temporal pills: "This Week" +
-      // showPast=true shows only the days already passed this week.
-      const now = new Date()
-      result = result.filter(a => {
-        const eventEnd = a.endDate ?? a.startDate
-        return showPast.value ? eventEnd < now : eventEnd >= now
-      })
-    }
+    // Past/upcoming split — the chip narrows to one side of "now",
+    // mirroring the "My tickets" / "Hosting" mental model. Default
+    // (showPast=false) is upcoming-only; toggling on flips to past-only.
+    // Composes with temporal pills: "This Week" + showPast=true shows
+    // only the days already passed this week.
+    const now = new Date()
+    result = result.filter(a => {
+      const eventEnd = a.endDate ?? a.startDate
+      return showPast.value ? eventEnd < now : eventEnd >= now
+    })
 
     // Category filter
     if (selectedCategories.value.length > 0) {
@@ -84,16 +69,6 @@ export function useEventFilters() {
 
   function setTemporal(value: TemporalFilter) {
     temporal.value = value
-    selectedDate.value = undefined // a preset pill clears the day pick
-  }
-
-  function selectDate(date: Date) {
-    selectedDate.value = date
-    temporal.value = 'all' // a specific day overrides the temporal pill
-  }
-
-  function clearSelectedDate() {
-    selectedDate.value = undefined
   }
 
   function toggleCategory(category: EventCategory) {
@@ -112,7 +87,6 @@ export function useEventFilters() {
   function resetFilters() {
     temporal.value = DEFAULT_FILTERS.temporal
     selectedCategories.value = []
-    selectedDate.value = undefined
     onlyOwnedTickets.value = false
     onlyHosting.value = false
     showPast.value = false
@@ -133,7 +107,6 @@ export function useEventFilters() {
   const hasActiveFilters = computed(() =>
     temporal.value !== 'all' ||
     selectedCategories.value.length > 0 ||
-    selectedDate.value !== undefined ||
     onlyOwnedTickets.value ||
     onlyHosting.value ||
     showPast.value
@@ -143,7 +116,6 @@ export function useEventFilters() {
     // State
     temporal,
     selectedCategories,
-    selectedDate,
     onlyOwnedTickets,
     onlyHosting,
     showPast,
@@ -153,8 +125,6 @@ export function useEventFilters() {
     // Actions
     applyFilters,
     setTemporal,
-    selectDate,
-    clearSelectedDate,
     toggleCategory,
     clearCategories,
     toggleOwnedTickets,
diff --git a/src/modules/events/index.ts b/src/modules/events/index.ts
index e592b7e..df67f58 100644
--- a/src/modules/events/index.ts
+++ b/src/modules/events/index.ts
@@ -33,6 +33,15 @@ export const eventsModule = createModulePlugin({
         requiresAuth: false,
       },
     },
+    {
+      path: '/events/calendar',
+      name: 'events-calendar',
+      component: () => import('./views/EventsCalendarPage.vue'),
+      meta: {
+        title: 'Calendar',
+        requiresAuth: false,
+      },
+    },
     {
       path: '/events/map',
       name: 'events-map',
diff --git a/src/modules/events/views/EventsCalendarPage.vue b/src/modules/events/views/EventsCalendarPage.vue
new file mode 100644
index 0000000..6826125
--- /dev/null
+++ b/src/modules/events/views/EventsCalendarPage.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { ArrowLeft, Ticket } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { useEvents } from '../composables/useEvents'
+import { useOwnedTickets } from '../composables/useOwnedTickets'
+import { useAuth } from '@/composables/useAuthService'
+import EventCalendarView from '../components/EventCalendarView.vue'
+import type { Event } from '../types/event'
+
+const router = useRouter()
+const { t } = useI18n()
+const { allEvents, subscribe } = useEvents()
+const { ownedEventIds } = useOwnedTickets()
+const { isAuthenticated } = useAuth()
+
+// Per-page toggle, intentionally not wired to the feed's
+// onlyOwnedTickets filter — narrowing the calendar shouldn't also
+// narrow the feed the user navigates back to.
+const onlyMine = ref(false)
+
+const visibleEvents = computed<Event[]>(() => {
+  if (!onlyMine.value) return allEvents.value
+  const owned = ownedEventIds.value
+  return allEvents.value.filter(a => owned.has(a.id))
+})
+
+onMounted(() => {
+  subscribe()
+})
+
+function handleSelectEvent(event: Event) {
+  router.push({ name: 'event-detail', params: { id: event.id } })
+}
+
+function goBack() {
+  router.push({ name: 'events' })
+}
+</script>
+
+<template>
+  <div class="container mx-auto px-4 py-6 max-w-lg">
+    <!-- Back to the events feed — mirrors EventDetailPage's top-bar
+         back link for navigation consistency. -->
+    <div class="flex items-center mb-4">
+      <Button variant="ghost" size="sm" class="gap-1.5" @click="goBack">
+        <ArrowLeft class="w-4 h-4" />
+        {{ t('common.nav.back', 'Back') }}
+      </Button>
+    </div>
+
+    <!-- Filter chip: narrows the calendar to events the user has
+         paid tickets for. Hidden when logged out — nothing to own.
+         Left-aligned so it doesn't collide with the fixed top-right
+         hamburger menu. -->
+    <div v-if="isAuthenticated" class="mb-3 flex">
+      <Button
+        :variant="onlyMine ? 'default' : 'outline'"
+        size="sm"
+        class="gap-1.5"
+        @click="onlyMine = !onlyMine"
+      >
+        <Ticket class="w-3.5 h-3.5" />
+        {{ t('events.filters.myTickets', 'My tickets') }}
+      </Button>
+    </div>
+    <EventCalendarView
+      :events="visibleEvents"
+      @select-event="handleSelectEvent"
+    />
+  </div>
+</template>
diff --git a/src/modules/events/views/EventsPage.vue b/src/modules/events/views/EventsPage.vue
index 121941e..8d9c20b 100644
--- a/src/modules/events/views/EventsPage.vue
+++ b/src/modules/events/views/EventsPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { useRouter, onBeforeRouteLeave } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import {
@@ -8,8 +8,7 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { SlidersHorizontal, CalendarDays, Plus, X } from 'lucide-vue-next'
-import { format } from 'date-fns'
+import { SlidersHorizontal, CalendarDays, Plus } from 'lucide-vue-next'
 import brandAppLogoUrl from '@brand-app-logo?url'
 import brandAppBannerUrl from '@brand-app-banner?url'
 // Brand name flows through VITE_APP_NAME (set in vite.events.config.ts
@@ -27,30 +26,23 @@ import { useEventsStore } from '../stores/events'
 import EventSearchOverlay from '../components/EventSearchOverlay.vue'
 import TemporalFilterBar from '../components/TemporalFilterBar.vue'
 import CategoryFilterBar from '../components/CategoryFilterBar.vue'
-import EventCalendarPopup from '../components/EventCalendarPopup.vue'
 import EventList from '../components/EventList.vue'
-import { useDateLocale } from '../composables/useDateLocale'
 import type { Event } from '../types/event'
 
 const router = useRouter()
 const { t } = useI18n()
-const { dateLocale } = useDateLocale()
 const eventsStore = useEventsStore()
 
 const {
   events,
-  allEvents,
   isLoading,
   error,
   temporal,
   selectedCategories,
-  selectedDate,
   hasActiveFilters,
   showPast,
   onlyHosting,
   setTemporal,
-  selectDate,
-  clearSelectedDate,
   toggleCategory,
   clearCategories,
   togglePast,
@@ -59,14 +51,6 @@ const {
 } = useEvents()
 
 const filtersOpen = ref(false)
-const calendarOpen = ref(false)
-
-// Human label for the active day filter, shown as a removable chip.
-const selectedDateLabel = computed(() =>
-  selectedDate.value
-    ? format(selectedDate.value, 'EEE, MMM d', { locale: dateLocale.value })
-    : '',
-)
 
 // Badge count on the Filters trigger so the user can see at a glance
 // that hidden toggles (categories) are currently active even when the
@@ -84,24 +68,18 @@ function handleSelectEvent(event: Event) {
   router.push({ name: 'event-detail', params: { id: event.id } })
 }
 
-// Create-activity CTA in the Hosting view. Replaces the old bottom-nav
-// Create entry; shown only while the Hosting filter is active.
+// Create-activity CTA in the Hosting view. Calendar-tab → page lives
+// on /events/calendar; the icon button at the end of the date
+// strip is the only entry point now that the bottom-nav Calendar
+// tab is gone.
 function openCreate() {
   eventsStore.editingEvent = null
   eventsStore.showCreateDialog = true
 }
 
-function onSelectDate(date: Date) {
-  // The popup closes itself; just apply the day filter.
-  selectDate(date)
+function openCalendar() {
+  router.push('/events/calendar')
 }
-
-// Safety: never let the date-picker popup persist across navigation —
-// e.g. it should not reappear when returning to the feed from an event
-// detail page.
-onBeforeRouteLeave(() => {
-  calendarOpen.value = false
-})
 </script>
 
 <template>
@@ -183,16 +161,15 @@ onBeforeRouteLeave(() => {
             @toggle-past="togglePast"
           />
         </div>
-        <!-- Calendar shortcut — opens the date-picker popup to filter the
-             feed to a single day. Highlighted while a day filter is
-             active. -->
+        <!-- Calendar shortcut — sits at the end of the filter row next to
+             the temporal pills (the week-day strip was removed in favour
+             of the calendar for picking specific dates). -->
         <Button
           variant="ghost"
           size="icon"
           class="h-8 w-8 shrink-0"
-          :class="{ 'bg-accent text-accent-foreground': selectedDate }"
           :aria-label="t('events.nav.calendar')"
-          @click="calendarOpen = true"
+          @click="openCalendar"
         >
           <CalendarDays class="h-4 w-4" />
         </Button>
@@ -206,23 +183,6 @@ onBeforeRouteLeave(() => {
       </CollapsibleContent>
     </Collapsible>
 
-    <!-- Active day-filter chip — removing it clears ONLY the date
-         selection (categories have their own clear in the filter
-         dropdown). Shown when a day is picked from the calendar popup. -->
-    <div v-if="selectedDate" class="mb-3 flex">
-      <Button
-        variant="secondary"
-        size="sm"
-        class="h-7 gap-1.5"
-        :aria-label="t('events.filters.clearDate', 'Clear date filter')"
-        @click="clearSelectedDate"
-      >
-        <CalendarDays class="w-3.5 h-3.5" />
-        {{ selectedDateLabel }}
-        <X class="w-3.5 h-3.5" />
-      </Button>
-    </div>
-
     <!-- Create-activity CTA — shown when the Hosting bottom-nav tab is
          active. Replaces the dedicated Create entry that used to live
          in the bottom nav; lives here so it shows up exactly when the
@@ -250,15 +210,5 @@ onBeforeRouteLeave(() => {
       :compact="onlyHosting"
       @select="handleSelectEvent"
     />
-
-    <!-- Date-picker popup: month grid with per-day event dots. Picking a
-         day filters the feed to it and closes. -->
-    <EventCalendarPopup
-      v-model:open="calendarOpen"
-      :events="allEvents"
-      :title="t('events.nav.calendar', 'Calendar')"
-      :description="t('events.calendar.pickDay', 'Pick a day to see its events')"
-      @select-date="onSelectDate"
-    />
   </div>
 </template>
diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index b21312c..5ddaea9 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-import { RouterLink, onBeforeRouteLeave } from 'vue-router'
+import { onMounted, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'
 import { useUserTickets } from '../composables/useUserTickets'
 import { useEvents } from '../composables/useEvents'
 import { useEventsStore } from '../stores/events'
@@ -10,16 +10,15 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { format, startOfDay, endOfDay } from 'date-fns'
-import { Ticket, User, CreditCard, CheckCircle, Clock, AlertCircle, ChevronLeft, ChevronRight, CalendarDays, X } from 'lucide-vue-next'
-import EventCalendarPopup from '../components/EventCalendarPopup.vue'
-import { useDateLocale } from '../composables/useDateLocale'
-import type { Event } from '../types/event'
+import { format } from 'date-fns'
+import { Ticket, User, CreditCard, CheckCircle, Clock, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-vue-next'
 
 const { isAuthenticated, userDisplay } = useAuth()
-const { dateLocale } = useDateLocale()
 const {
   tickets,
+  paidTickets,
+  pendingTickets,
+  registeredTickets,
   groupedTickets,
   isLoading,
   error,
@@ -41,78 +40,6 @@ function eventShortLabel(eventId: string): string {
   return `Event: ${eventId.slice(0, 8)}…`
 }
 
-// Past/upcoming toggle. Defaults to upcoming. An event whose end (or
-// start, if no end) is before now counts as past; events not yet
-// resolved from relays are treated as upcoming so their tickets stay
-// visible until we know otherwise.
-const showPast = ref(false)
-
-function isGroupPast(eventId: string): boolean {
-  const ev = eventsStore.getEventById(eventId)
-  if (!ev) return false
-  const end = ev.endDate ?? ev.startDate
-  return end < new Date()
-}
-
-// Calendar popup: visualise the days the user has events. Picking a day
-// filters the ticket list to it (overriding the upcoming/past toggle);
-// clearing it returns to the toggle.
-const calendarOpen = ref(false)
-const selectedDay = ref<Date | null>(null)
-
-// The user's events (resolved from their ticket groups) — feeds the
-// calendar popup's per-day dots.
-const myEvents = computed<Event[]>(() => {
-  const out: Event[] = []
-  for (const g of groupedTickets.value) {
-    const ev = eventsStore.getEventById(g.eventId)
-    if (ev) out.push(ev)
-  }
-  return out
-})
-
-const selectedDayLabel = computed(() =>
-  selectedDay.value
-    ? format(selectedDay.value, 'EEE, MMM d', { locale: dateLocale.value })
-    : '',
-)
-
-function isGroupOnDay(eventId: string, day: Date): boolean {
-  const ev = eventsStore.getEventById(eventId)
-  if (!ev) return false
-  const end = ev.endDate ?? ev.startDate
-  return ev.startDate <= endOfDay(day) && end >= startOfDay(day)
-}
-
-function onSelectDay(date: Date) {
-  selectedDay.value = date
-}
-
-// Don't let the calendar popup persist across navigation.
-onBeforeRouteLeave(() => {
-  calendarOpen.value = false
-})
-
-const visibleGroups = computed(() => {
-  if (selectedDay.value) {
-    return groupedTickets.value.filter(g => isGroupOnDay(g.eventId, selectedDay.value!))
-  }
-  return groupedTickets.value.filter(g => isGroupPast(g.eventId) === showPast.value)
-})
-
-// Tab counts derived from the visible (past/upcoming-filtered) groups so
-// the badges match what's actually shown.
-const visibleCounts = computed(() => {
-  let all = 0, paid = 0, pending = 0, registered = 0
-  for (const g of visibleGroups.value) {
-    all += g.tickets.length
-    paid += g.paidCount
-    pending += g.pendingCount
-    registered += g.registeredCount
-  }
-  return { all, paid, pending, registered }
-})
-
 const qrCodes = ref<Record<string, string>>({})
 const currentTicketIndex = ref<Record<string, number>>({})
 
@@ -251,71 +178,19 @@ onMounted(async () => {
     </div>
 
     <div v-else-if="tickets.length > 0">
-      <!-- Filter row — own row, left-aligned so it clears the fixed
-           top-right hamburger menu. Upcoming/Past toggle by default;
-           when a day is picked from the calendar it's replaced by a
-           removable date chip (the day overrides the toggle). The
-           calendar button opens a popup visualising the user's event
-           dates. -->
-      <div class="mb-4 flex items-center gap-2">
-        <div v-if="!selectedDay" class="inline-flex rounded-md border p-0.5">
-          <Button
-            :variant="!showPast ? 'default' : 'ghost'"
-            size="sm"
-            class="h-7"
-            @click="showPast = false"
-          >
-            Upcoming
-          </Button>
-          <Button
-            :variant="showPast ? 'default' : 'ghost'"
-            size="sm"
-            class="h-7"
-            @click="showPast = true"
-          >
-            Past
-          </Button>
-        </div>
-        <Button
-          v-else
-          variant="secondary"
-          size="sm"
-          class="h-7 gap-1.5"
-          aria-label="Clear day filter"
-          @click="selectedDay = null"
-        >
-          <CalendarDays class="w-3.5 h-3.5" />
-          {{ selectedDayLabel }}
-          <X class="w-3.5 h-3.5" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          class="h-8 w-8 shrink-0"
-          :class="{ 'bg-accent text-accent-foreground': selectedDay }"
-          aria-label="Open calendar"
-          @click="calendarOpen = true"
-        >
-          <CalendarDays class="h-4 w-4" />
-        </Button>
-      </div>
-
       <Tabs default-value="all" class="w-full">
         <TabsList class="grid w-full grid-cols-4">
-          <TabsTrigger value="all">All ({{ visibleCounts.all }})</TabsTrigger>
-          <TabsTrigger value="paid">Paid ({{ visibleCounts.paid }})</TabsTrigger>
-          <TabsTrigger value="pending">Pending ({{ visibleCounts.pending }})</TabsTrigger>
-          <TabsTrigger value="registered">Registered ({{ visibleCounts.registered }})</TabsTrigger>
+          <TabsTrigger value="all">All ({{ tickets.length }})</TabsTrigger>
+          <TabsTrigger value="paid">Paid ({{ paidTickets.length }})</TabsTrigger>
+          <TabsTrigger value="pending">Pending ({{ pendingTickets.length }})</TabsTrigger>
+          <TabsTrigger value="registered">Registered ({{ registeredTickets.length }})</TabsTrigger>
         </TabsList>
 
         <!-- All Tickets Tab -->
         <TabsContent value="all">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="visibleGroups.length === 0" class="text-center py-8 text-muted-foreground">
-              {{ selectedDay ? 'No tickets on this day' : (showPast ? 'No past tickets' : 'No upcoming tickets') }}
-            </div>
-            <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in visibleGroups" :key="group.eventId" class="flex flex-col">
+            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <Card v-for="group in groupedTickets" :key="group.eventId" class="flex flex-col">
                 <CardHeader>
                   <div class="flex items-center justify-between gap-2">
                     <CardTitle class="text-foreground min-w-0 flex-1">
@@ -413,9 +288,9 @@ onMounted(async () => {
         <!-- Paid, Pending, Registered tabs follow the same pattern but filter -->
         <TabsContent value="paid">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="visibleCounts.paid === 0" class="text-center py-8 text-muted-foreground">No paid tickets</div>
+            <div v-if="paidTickets.length === 0" class="text-center py-8 text-muted-foreground">No paid tickets</div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in visibleGroups.filter(g => g.paidCount > 0)" :key="group.eventId" class="flex flex-col">
+              <Card v-for="group in groupedTickets.filter(g => g.paidCount > 0)" :key="group.eventId" class="flex flex-col">
                 <CardHeader>
                   <CardTitle class="text-foreground min-w-0">
                     <RouterLink
@@ -438,9 +313,9 @@ onMounted(async () => {
 
         <TabsContent value="pending">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="visibleCounts.pending === 0" class="text-center py-8 text-muted-foreground">No pending tickets</div>
+            <div v-if="pendingTickets.length === 0" class="text-center py-8 text-muted-foreground">No pending tickets</div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in visibleGroups.filter(g => g.pendingCount > 0)" :key="group.eventId" class="flex flex-col opacity-75">
+              <Card v-for="group in groupedTickets.filter(g => g.pendingCount > 0)" :key="group.eventId" class="flex flex-col opacity-75">
                 <CardHeader>
                   <CardTitle class="text-foreground min-w-0">
                     <RouterLink
@@ -463,9 +338,9 @@ onMounted(async () => {
 
         <TabsContent value="registered">
           <ScrollArea class="h-[600px] w-full pr-4">
-            <div v-if="visibleCounts.registered === 0" class="text-center py-8 text-muted-foreground">No registered tickets</div>
+            <div v-if="registeredTickets.length === 0" class="text-center py-8 text-muted-foreground">No registered tickets</div>
             <div v-else class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-              <Card v-for="group in visibleGroups.filter(g => g.registeredCount > 0)" :key="group.eventId" class="flex flex-col">
+              <Card v-for="group in groupedTickets.filter(g => g.registeredCount > 0)" :key="group.eventId" class="flex flex-col">
                 <CardHeader>
                   <CardTitle class="text-foreground min-w-0">
                     <RouterLink
@@ -487,15 +362,5 @@ onMounted(async () => {
         </TabsContent>
       </Tabs>
     </div>
-
-    <!-- Calendar popup: dots show the days the user has events; picking
-         one filters the ticket list to that day. -->
-    <EventCalendarPopup
-      v-model:open="calendarOpen"
-      :events="myEvents"
-      title="Your event dates"
-      description="Pick a day to see your tickets for it"
-      @select-date="onSelectDay"
-    />
   </div>
 </template>