Merge pull request 'Rename path parameter {token} to {eventToken}' (#37) from 015-rename-token-to-eventToken into master

Aligns the path parameter naming with the value object convention
used throughout the codebase (eventToken, rsvpToken, organizerToken).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.claude/hooks/frontend-check.sh

@@ -16,7 +16,7 @@ cd "$CLAUDE_PROJECT_DIR/frontend"
 ERRORS=""
 
 # Type-check
-if OUTPUT=$(npx vue-tsc --noEmit 2>&1); then
+if OUTPUT=$(npm run type-check 2>&1); then
     :
 else
     ERRORS+="Type-check failed:\n$OUTPUT\n\n"

.claude/hooks/run-tests.sh

@@ -26,7 +26,7 @@ PASSED=""
 
 # Run backend tests if Java sources changed
 if [[ -n "$HAS_BACKEND" ]]; then
-    if OUTPUT=$(cd backend && ./mvnw test -q 2>&1); then
+    if OUTPUT=$(cd backend && ./mvnw verify -q 2>&1); then
         PASSED+="✓ Backend tests passed. "
     else
         # Filter: only [ERROR] lines, skip Maven boilerplate

.claude/skills/merge-pr/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: merge-pr
+description: Create a Gitea pull request, monitor CI pipeline status, and merge when green. Use this skill when the user asks to "create a PR", "merge the PR", "ship it", "make it ready to merge", or when you need to open a pull request and wait for CI before merging. Also use when asked to check CI/PR status on Gitea.
+---
+
+# Merge PR
+
+Create a pull request on Gitea, monitor the CI pipeline via the Actions API, and merge once all jobs pass.
+
+## Why this skill exists
+
+The Gitea MCP pull request API does not return CI status directly. To know if a PR is ready to merge, you must cross-reference the PR's `head.sha` with the Actions runs API, find the matching run, and check job conclusions. This skill encodes that workflow so it doesn't have to be rediscovered.
+
+## Prerequisites
+
+The Gitea MCP tools must be available. The key tools are:
+
+- `mcp__gitea__pull_request_write` (method: `create`, `merge`)
+- `mcp__gitea__pull_request_read` (method: `get`)
+- `mcp__gitea__actions_run_read` (methods: `list_runs`, `list_run_jobs`)
+
+If these tools are not yet loaded, use ToolSearch to discover and load them before proceeding.
+
+## Workflow
+
+### 1. Create the PR
+
+Use `mcp__gitea__pull_request_write` with method `create`. Include a clear title, body with summary and test plan, head branch, and base branch (usually `master`).
+
+Save the returned `head.sha` — you need it to find the CI run.
+
+### 2. Find the CI run for the PR
+
+The Actions API has no direct "get CI status for PR" call. Instead:
+
+```
+mcp__gitea__actions_run_read(method: "list_runs", owner, repo, perPage: 5)
+```
+
+Find the run whose `head_sha` matches the PR's `head.sha`. This is the CI run triggered by the push that the PR points to. If the branch was force-pushed or new commits were added, always match against the latest `head.sha` from a fresh `get` on the PR.
+
+### 3. Monitor job status
+
+Once you have the run ID:
+
+```
+mcp__gitea__actions_run_read(method: "list_run_jobs", owner, repo, run_id: <id>)
+```
+
+This returns all jobs with their `status` (queued/in_progress/completed) and `conclusion` (success/failure/skipped/null).
+
+Present a status table to the user:
+
+| Job | Status |
+|-----|--------|
+| backend-test | success |
+| frontend-test | in_progress |
+| frontend-e2e | queued |
+
+If jobs are still running, wait ~30 seconds and check again. Don't poll in a tight loop.
+
+### 4. Handle failures
+
+If any job has `conclusion: failure`:
+- Use `mcp__gitea__actions_run_read` with method `get_job_log_preview` to fetch the failing job's log
+- Report the failure to the user with relevant log output
+- Do NOT attempt to merge
+
+### 5. Merge when green
+
+Once all jobs show `conclusion: success` (or `skipped` for conditional jobs like `build-and-publish`):
+
+```
+mcp__gitea__pull_request_write(
+  method: "merge",
+  owner, repo,
+  index: <pr_number>,
+  merge_style: "merge",
+  delete_branch: true
+)
+```
+
+Ask the user for confirmation before merging. They may want to review the PR in the web UI first.
+
+### 6. Post-merge cleanup
+
+After a successful merge, suggest:
+- `git checkout master && git pull origin master`
+- `git branch -d <feature-branch>` (local cleanup)
+- Tagging a release if appropriate (see `/release` skill)
+
+## Abbreviated flow
+
+When the user just wants a quick status check (e.g. "how's the PR?"), skip straight to steps 2-3: find the run by SHA, show the job status table.

.gitea/workflows/ci.yaml

@@ -7,10 +7,10 @@ jobs:
   backend-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Set up JDK 25
-        uses: actions/setup-java@v4
+        uses: actions/setup-java@v5
         with:
           distribution: temurin
           java-version: 25
@@ -21,10 +21,10 @@ jobs:
   frontend-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Set up Node 24
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 24
 
@@ -49,10 +49,10 @@ jobs:
   frontend-e2e:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
 
       - name: Set up Node 24
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: 24
 
@@ -66,7 +66,7 @@ jobs:
         run: cd frontend && npm run test:e2e
 
       - name: Upload Playwright report
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         if: ${{ !cancelled() }}
         with:
           name: playwright-report
@@ -78,7 +78,9 @@ jobs:
     if: startsWith(github.ref, 'refs/tags/') && contains(github.ref_name, '.')
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
 
       - name: Parse SemVer tag
         id: semver
@@ -114,3 +116,22 @@ jobs:
           docker push "${IMAGE}:${{ steps.semver.outputs.minor }}"
           docker push "${IMAGE}:${{ steps.semver.outputs.major }}"
           docker push "${IMAGE}:latest"
+
+      - name: Generate changelog
+        id: changelog
+        run: |
+          PREV_TAG=$(git tag --sort=-v:refname | sed -n '2p')
+          if [ -z "$PREV_TAG" ]; then
+            git log --oneline --no-merges > RELEASE_NOTES.md
+          else
+            git log --oneline --no-merges "${PREV_TAG}..HEAD" > RELEASE_NOTES.md
+          fi
+          echo "Container image: \`${IMAGE}:${{ steps.semver.outputs.full }}\`" >> RELEASE_NOTES.md
+
+      - name: Create Gitea release
+        uses: akkuman/gitea-release-action@v1
+        with:
+          tag_name: ${{ github.ref_name }}
+          name: v${{ steps.semver.outputs.full }}
+          body_path: RELEASE_NOTES.md
+          token: ${{ github.token }}

.gitignore

@@ -14,6 +14,9 @@ Thumbs.db
 .agent-tests/
 .ralph/*/iteration-*.jsonl
 
+# Test results (Playwright artifacts)
+test-results/
+
 # Java/Maven
 *.class
 *.jar

.specify/memory/constitution.md

@@ -107,8 +107,10 @@ Accessibility is a baseline requirement, not an afterthought.
   rationale. Never rewrite or delete the original decision.
 - The visual design system in `.specify/memory/design-system.md` is authoritative. All
   frontend implementation MUST follow it.
-- Research reports go to `docs/agents/research/`, implementation plans to
-  `docs/agents/plan/`.
+- Feature specs, research, and plans live in `specs/NNN-feature-name/`
+  (spec-kit format). Cross-cutting research goes to
+  `.specify/memory/research/`, cross-cutting plans to
+  `.specify/memory/plans/`.
 - Conversation and brainstorming in German; code, comments, commits, and
   documentation in English.
 - Documentation lives in the README. No wiki, no elaborate docs site.

.specify/memory/ideen.md

@@ -33,12 +33,16 @@ Person erstellt via App eine Veranstaltung und schickt seine Freunden irgendwie
 	* Updaten der Veranstaltung
 	* Einsicht angemeldete Gäste, kann bei Bedarf Einträge entfernen
 * Featureideen:
+	* Organisator kann einstellen, ob Attendee-Namensliste öffentlich auf der Event-Seite sichtbar ist (default: nur für Organisator). Wenn öffentlich, muss im RSVP-Bottom-Sheet eine Warnung angezeigt werden, dass der Name öffentlich sichtbar sein wird.
+	* Link-Previews (OpenGraph Meta-Tags): Generische OG-Tags mit App-Branding (z.B. "fete — Du wurdest eingeladen") damit geteilte Links in WhatsApp/Signal/Telegram hübsch aussehen. Keine Event-Daten an Crawler aus Privacy-Gründen. → Eigene User Story.
 	* Kalender-Integration: .ics-Download + optional webcal:// für Live-Updates bei Änderungen
 	* Änderungen zum ursprünglichen Inhalt (z.b. geändertes datum/ort) werden iwi hervorgehoben
 	* Veranstalter kann Updatenachrichten im Event posten, pro Device wird via LocalStorage gemerkt was man schon gesehen hat (Badge/Hervorhebung für neue Updates)
 	* QR Code generieren (z.B. für Plakate/Flyer)
 	* Ablaufdatum als Pflichtfeld, nach dem alle gespeicherten Daten gelöscht werden
 	* Übersichtsliste im LocalStorage: Alle Events die man zugesagt oder gemerkt hat (vgl. spliit)
+	* RSVP editieren: Gast kann seine bestehende Zusage bearbeiten (Name ändern via PUT mit rsvpToken) oder zurückziehen (DELETE mit rsvpToken). Bottom Sheet öffnet sich im Edit-Mode mit pre-filled Name + "Zusage zurückziehen"-Button. Später ergänzen: "Absagen und merken" (Kombination mit 011-bookmark-event). Ausgelagert aus 008-rsvp um den Scope klein zu halten.
+	* Organizer-Gästeliste: Namensliste der Zusagen nur für Organisator sichtbar (über Organizer-Link). Gehört thematisch zu 009-guest-list, nicht zu 008-rsvp.
 * Sicherheit/Missbrauchsschutz:
 	* Nicht-erratbare Event-Tokens (z.B. UUIDs)
 	* Event-Erstellung ist offen, kein Login/Passwort/Invite-Code nötig
@@ -78,3 +82,113 @@ Die folgenden Punkte wurden in Diskussionen bereits geklärt und sind verbindlic
 	* Frontend: Vue 3 (mit Vite als Bundler, TypeScript, Vue Router)
 * Architekturentscheidungen die NOCH NICHT getroffen wurden (hier darf nichts eigenmächtig entschieden werden!):
 	* (derzeit keine offenen Architekturentscheidungen)
+
+## Nicht umgesetzte Feature-Ideen (ehemals Specs 009–026)
+
+### 009 – Gästeliste
+Organisator sieht alle RSVPs (Name, Status) und kann einzelne Einträge löschen.
+* Nur mit gültigem Organizer-Token sichtbar
+* Gäste ohne Token sehen keine Gästeliste
+* Löschung serverseitig validiert
+
+### 010 – Event bearbeiten
+Organisator kann Titel, Beschreibung, Datum, Ort und Ablaufdatum ändern.
+* Formular vorausgefüllt mit aktuellen Werten
+* Ablaufdatum muss in der Zukunft liegen
+* Ohne Organizer-Token kein Edit-UI sichtbar
+
+### 011 – Event merken/bookmarken
+Gäste können Events lokal merken, ohne RSVP abzugeben — rein clientseitig via localStorage.
+* Kein Serverkontakt nötig
+* Unabhängig vom RSVP-Status
+* Auch bei abgelaufenen Events möglich
+
+### 012 – Lokale Event-Übersicht
+Startseite (`/`) zeigt alle getrackten Events (erstellt, zugesagt, gemerkt) aus localStorage.
+* Zeigt Titel, Datum, Beziehungstyp (Organisator/Gast/Gemerkt)
+* Vergangene Events als "beendet" markiert
+* Einträge können entfernt werden
+
+### 013 – Kalender-Export
+.ics-Download (RFC 5545) mit Event-Details, optional webcal:// für Live-Updates.
+* Stabile UID aus Event-Token (Re-Import aktualisiert statt dupliziert)
+* Bei Absage: STATUS:CANCELLED im .ics
+* Kein externer Kalenderservice kontaktiert
+
+### 014 – Änderungen hervorheben
+Geänderte Felder werden visuell hervorgehoben, wenn der Gast seit der letzten Änderung nicht mehr auf der Seite war.
+* Server trackt `last_edited_at` + geänderte Feldnamen
+* Client speichert `last_seen_at` in localStorage
+* Privacy-freundlich: kein serverseitiges Read-Tracking
+
+### 015 – Organisator-Updates
+Organisator kann Textnachrichten im Event posten (Pinnwand-Stil).
+* Chronologisch sortiert, löschbar durch Organisator
+* Nach Ablauf kein Posting mehr möglich
+* Ohne Organizer-Token kein Compose-UI
+
+### 016 – Gast-Benachrichtigungen
+Badge/Indikator bei ungelesenen Organisator-Updates, rein clientseitig via localStorage.
+* Eigener Timestamp `updates_last_seen_at` (getrennt von Feld-Änderungen)
+* Kein Indikator beim ersten Besuch
+* Kein serverseitiges Tracking (Privacy)
+
+### 017 – QR-Code
+Event-Seite zeigt QR-Code mit der öffentlichen Event-URL.
+* Serverseitig generiert (kein externer QR-Service)
+* Download als SVG oder hochauflösendes PNG
+* Auch bei abgelaufenen Events verfügbar
+
+### 018 – Datenlöschung
+Automatische Löschung aller Event-Daten nach Ablaufdatum (Privacy-Garantie).
+* Scheduled Job oder Lazy Cleanup bei Zugriff
+* Löscht Event, RSVPs, Updates, Bilder, Metadaten
+* Idempotent, kein PII im Log
+
+### 019 – Instanz-Limit
+`MAX_ACTIVE_EVENTS` als Env-Variable begrenzt aktive Events für Self-Hoster.
+* Nur nicht-abgelaufene Events zählen
+* Unset/leer = unbegrenzt
+* Serverseitige Durchsetzung bei Event-Erstellung
+
+### 020 – PWA
+Web App Manifest + Service Worker für Installierbarkeit und Offline-Caching.
+* Standalone-Modus ohne Browser-Chrome
+* Icon + Name auf Home-Screen
+* Alle Assets selbstgehostet
+
+### 021 – Farbthemen
+Organisator wählt bei Erstellung ein vordefiniertes Farbthema für die Event-Seite.
+* Nur auf der Gast-Seite angewendet (nicht global)
+* Änderbar beim Bearbeiten
+* Unabhängig von Dark/Light Mode
+
+### 022 – Headerbild
+Organisator sucht Headerbild über integrierte Unsplash-Suche.
+* Serverseitig geproxied (Client kontaktiert nie Unsplash)
+* Bild lokal gespeichert + Unsplash-Attribution
+* Feature deaktiviert wenn kein API-Key konfiguriert
+
+### 023 – Dark Mode
+App erkennt `prefers-color-scheme` und bietet manuellen Toggle.
+* Manuelle Auswahl in localStorage gespeichert
+* Gilt für globales App-Chrome, nicht Event-Farbthemen
+* Beide Modi WCAG AA konform
+
+### 024 – Event absagen
+Organisator kann Event absagen (mit optionaler Nachricht, Einweg-Transition).
+* RSVPs werden nach Absage abgelehnt
+* Absage-Nachricht nachträglich editierbar
+* Kann nicht rückgängig gemacht werden
+
+### 025 – Event löschen
+Organisator löscht Event permanent und unwiderruflich.
+* Entfernt alle zugehörigen Daten sofort
+* localStorage-Eintrag wird entfernt, Redirect zu `/`
+* Funktioniert in jedem Event-Status
+
+### 026 – 404-Seite
+Catch-all Route für ungültige Pfade mit "Seite nicht gefunden" und Link zur Startseite.
+* Folgt dem Design System (Electric Dusk + Sora)
+* WCAG AA konform
+* Verhindert leere Seiten bei Fehlnavigation

.specify/memory/research/modern-ui-effects.md

@@ -0,0 +1,37 @@
+# Modern UI Effects Research (2025-2026)
+
+## Liquid Glass (Apple WWDC 2025)
+Evolved glassmorphism with directional lighting. Three-layer approach: highlight, shadow, illumination.
+- `backdrop-filter: blur(20px) saturate(1.5)` — higher saturation than basic glass
+- `inset 0 1px 0 rgba(255,255,255,0.15)` — top highlight (light direction)
+- `inset 0 -1px 0 rgba(0,0,0,0.1)` — bottom shadow
+- Outer drop shadow for depth: `0 8px 32px rgba(0,0,0,0.3)`
+- Advanced: SVG `feTurbulence` + `feSpecularLighting` for refraction (Chromium only)
+- Browser support: `backdrop-filter` ~88%, Firefox since v103
+
+## Aurora / Gradient Mesh Backgrounds
+Stacked animated radial gradients simulating northern lights. Pairs well with glass cards on dark backgrounds.
+- Multiple `radial-gradient(ellipse ...)` layers with partial opacity
+- Animated via `background-position` shift (GPU-friendly)
+- `@property` rule enables direct gradient color animation (broad support since 2024)
+- Best for ambient background movement, not for content areas
+
+## Animated Glow Borders
+Rotating `conic-gradient` borders with blur halo. Striking on dark backgrounds.
+- Outer wrapper with `conic-gradient(from var(--angle), color1, color2, color3, color1)`
+- `::before` pseudo with `filter: blur(12px)` and `opacity: 0.5` for glow halo
+- `@property --angle` trick to animate custom property inside `conic-gradient`
+- Use sparingly — best for single highlight elements (FAB, CTA), not all cards
+
+## Modern Neumorphism (2025-2026 revision)
+Subtler than the original trend. Higher contrast, less extreme extrusion, combined with accent colors.
+- Light and dark shadow pair: `6px 6px 12px rgba(0,0,0,0.5)` + `-6px -6px 12px rgba(60,50,80,0.15)`
+- `border: 1px solid rgba(255,255,255,0.05)` for definition
+- Works on dark backgrounds with slightly lighter "uplift" shadow direction
+- Better suited for interactive elements (buttons, toggles) than content cards
+
+## Sources
+- Apple Liquid Glass CSS: dev.to/gruszdev, dev.to/kevinbism, css-tricks.com, kube.io
+- Aurora: dev.to/oobleck, daltonwalsh.com, github.com/mattnewdavid
+- Glow borders: frontendmasters.com (Kevin Powell), docode.co.in
+- Trends overview: medium.com/design-bootcamp, index.dev, bighuman.com

CLAUDE.md

@@ -49,3 +49,14 @@ The following skills are available and should be used for their respective purpo
 - The loop runner is `ralph.sh`. Each run lives in its own directory under `.ralph/`.
 - Run directories contain: `instructions.md` (prompt), `chief-wiggum.md` (directives), `answers.md` (human answers), `questions.md` (Ralph's questions), `progress.txt` (iteration log), `meta.md` (metadata), `run.log` (execution log).
 - Project specifications (user stories, setup tasks, personas, etc.) live in `specs/` (feature dirs) and `.specify/memory/` (cross-cutting docs).
+
+## Active Technologies
+- Java 25 (backend), TypeScript 5.9 (frontend) + Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript (007-view-event)
+- PostgreSQL (JPA via Spring Data, Liquibase migrations) (007-view-event)
+- TypeScript 5.9 (frontend only) + Vue 3, Vue Router 5 (existing — no additions) (010-event-list-grouping)
+- localStorage via `useEventStorage.ts` composable (existing — no changes) (010-event-list-grouping)
+- Java 25, Spring Boot 3.5.x + Spring Scheduling (`@Scheduled`), Spring Data JPA (for native query) (013-auto-delete-expired)
+- PostgreSQL (existing, Liquibase migrations) (013-auto-delete-expired)
+
+## Recent Changes
+- 007-view-event: Added Java 25 (backend), TypeScript 5.9 (frontend) + Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript

Dockerfile

@@ -10,14 +10,14 @@ COPY backend/src/main/resources/openapi/api.yaml \
 RUN npm run build
 
 # Stage 2: Build backend with frontend assets baked in
-FROM eclipse-temurin:25-jdk-alpine AS backend-build
+FROM eclipse-temurin:25.0.2_10-jdk-alpine AS backend-build
 WORKDIR /app/backend
 COPY backend/ ./
 COPY --from=frontend-build /app/frontend/dist src/main/resources/static/
 RUN ./mvnw -B -DskipTests -Dcheckstyle.skip -Dspotbugs.skip package
 
 # Stage 3: Runtime
-FROM eclipse-temurin:25-jre-alpine
+FROM eclipse-temurin:25.0.2_10-jre-alpine
 WORKDIR /app
 COPY --from=backend-build /app/backend/target/*.jar app.jar
 EXPOSE 8080

README.md

@@ -1,6 +1,25 @@
-# fete
+<p align="center">
+  <img src="frontend/public/og-image.png" alt="fete" width="100%" />
+</p>
 
-A privacy-focused, self-hostable web app for event announcements and RSVPs. An alternative to Facebook Events or Telegram groups — reduced to the essentials.
+<p align="center">
+  <strong>Privacy-focused, self-hostable event announcements and RSVPs.</strong><br>
+  An alternative to Facebook Events or Telegram groups — reduced to the essentials.
+</p>
+
+<p align="center">
+  <img src="docs/screenshots/01-create-event.png" alt="Create Event" width="230" />
+  &nbsp;&nbsp;&nbsp;
+  <img src="docs/screenshots/02-event-detail.png" alt="Event Detail" width="230" />
+  &nbsp;&nbsp;&nbsp;
+  <img src="docs/screenshots/03-rsvp.png" alt="RSVP" width="230" />
+</p>
+
+<p align="center">
+  <sub>Create events &middot; Share with guests &middot; Collect RSVPs</sub>
+</p>
+
+---
 
 ## What it does
 

backend/.mvn/wrapper/maven-wrapper.properties

@@ -1,3 +1,3 @@
 wrapperVersion=3.3.4
 distributionType=only-script
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.12/apache-maven-3.9.12-bin.zip
+distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.14/apache-maven-3.9.14-bin.zip

backend/pom.xml

@@ -179,7 +179,7 @@
             <plugin>
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>build-helper-maven-plugin</artifactId>
-                <version>3.6.0</version>
+                <version>3.6.1</version>
                 <executions>
                     <execution>
                         <id>add-openapi-sources</id>

backend/spotbugs-exclude.xml

@@ -7,4 +7,8 @@
     <Match>
         <Package name="de.fete.adapter.in.web.model"/>
     </Match>
+    <!-- Constructor-injected Spring beans storing interfaces/proxies are not a real exposure risk -->
+    <Match>
+        <Bug pattern="EI_EXPOSE_REP2"/>
+    </Match>
 </FindBugsFilter>

backend/src/main/java/de/fete/FeteApplication.java

@@ -2,9 +2,11 @@ package de.fete;
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.scheduling.annotation.EnableScheduling;
 
 /** Spring Boot entry point for the fete application. */
 @SpringBootApplication
+@EnableScheduling
 public class FeteApplication {
 
   /** Starts the application. */

backend/src/main/java/de/fete/adapter/in/web/EventController.java

@@ -1,11 +1,31 @@
 package de.fete.adapter.in.web;
 
 import de.fete.adapter.in.web.api.EventsApi;
+import de.fete.adapter.in.web.model.Attendee;
 import de.fete.adapter.in.web.model.CreateEventRequest;
 import de.fete.adapter.in.web.model.CreateEventResponse;
+import de.fete.adapter.in.web.model.CreateRsvpRequest;
+import de.fete.adapter.in.web.model.CreateRsvpResponse;
+import de.fete.adapter.in.web.model.GetAttendeesResponse;
+import de.fete.adapter.in.web.model.GetEventResponse;
+import de.fete.application.service.EventNotFoundException;
+import de.fete.application.service.InvalidTimezoneException;
 import de.fete.domain.model.CreateEventCommand;
 import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
+import de.fete.domain.port.in.CancelRsvpUseCase;
+import de.fete.domain.port.in.CountAttendeesByEventUseCase;
 import de.fete.domain.port.in.CreateEventUseCase;
+import de.fete.domain.port.in.CreateRsvpUseCase;
+import de.fete.domain.port.in.GetAttendeesUseCase;
+import de.fete.domain.port.in.GetEventUseCase;
+import java.time.DateTimeException;
+import java.time.ZoneId;
+import java.util.List;
+import java.util.UUID;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.RestController;
@@ -15,32 +35,115 @@ import org.springframework.web.bind.annotation.RestController;
 public class EventController implements EventsApi {
 
   private final CreateEventUseCase createEventUseCase;
+  private final GetEventUseCase getEventUseCase;
+  private final CreateRsvpUseCase createRsvpUseCase;
+  private final CancelRsvpUseCase cancelRsvpUseCase;
+  private final CountAttendeesByEventUseCase countAttendeesByEventUseCase;
+  private final GetAttendeesUseCase getAttendeesUseCase;
 
-  /** Creates a new controller with the given use case. */
-  public EventController(CreateEventUseCase createEventUseCase) {
+  /** Creates a new controller with the given use cases. */
+  public EventController(
+      CreateEventUseCase createEventUseCase,
+      GetEventUseCase getEventUseCase,
+      CreateRsvpUseCase createRsvpUseCase,
+      CancelRsvpUseCase cancelRsvpUseCase,
+      CountAttendeesByEventUseCase countAttendeesByEventUseCase,
+      GetAttendeesUseCase getAttendeesUseCase) {
     this.createEventUseCase = createEventUseCase;
+    this.getEventUseCase = getEventUseCase;
+    this.createRsvpUseCase = createRsvpUseCase;
+    this.cancelRsvpUseCase = cancelRsvpUseCase;
+    this.countAttendeesByEventUseCase = countAttendeesByEventUseCase;
+    this.getAttendeesUseCase = getAttendeesUseCase;
   }
 
   @Override
   public ResponseEntity<CreateEventResponse> createEvent(
       CreateEventRequest request) {
+    ZoneId zoneId = parseTimezone(request.getTimezone());
+
     var command = new CreateEventCommand(
         request.getTitle(),
         request.getDescription(),
         request.getDateTime(),
-        request.getLocation(),
-        request.getExpiryDate()
+        zoneId,
+        request.getLocation()
     );
 
     Event event = createEventUseCase.createEvent(command);
 
     var response = new CreateEventResponse();
-    response.setEventToken(event.getEventToken());
-    response.setOrganizerToken(event.getOrganizerToken());
+    response.setEventToken(event.getEventToken().value());
+    response.setOrganizerToken(event.getOrganizerToken().value());
     response.setTitle(event.getTitle());
     response.setDateTime(event.getDateTime());
-    response.setExpiryDate(event.getExpiryDate());
+    response.setTimezone(event.getTimezone().getId());
 
     return ResponseEntity.status(HttpStatus.CREATED).body(response);
   }
+
+  @Override
+  public ResponseEntity<GetEventResponse> getEvent(UUID eventToken) {
+    var evtToken = new EventToken(eventToken);
+    Event event = getEventUseCase.getByEventToken(evtToken)
+        .orElseThrow(() -> new EventNotFoundException(eventToken));
+
+    var response = new GetEventResponse();
+    response.setEventToken(event.getEventToken().value());
+    response.setTitle(event.getTitle());
+    response.setDescription(event.getDescription());
+    response.setDateTime(event.getDateTime());
+    response.setTimezone(event.getTimezone().getId());
+    response.setLocation(event.getLocation());
+    response.setAttendeeCount(
+        (int) countAttendeesByEventUseCase.countByEvent(evtToken));
+
+    return ResponseEntity.ok(response);
+  }
+
+  @Override
+  public ResponseEntity<GetAttendeesResponse> getAttendees(
+      UUID eventToken, UUID organizerToken) {
+    var evtToken = new EventToken(eventToken);
+    var orgToken = new OrganizerToken(organizerToken);
+
+    List<String> names = getAttendeesUseCase
+        .getAttendeeNames(evtToken, orgToken);
+
+    var attendees = names.stream()
+        .map(name -> new Attendee().name(name))
+        .toList();
+
+    var response = new GetAttendeesResponse();
+    response.setAttendees(attendees);
+
+    return ResponseEntity.ok(response);
+  }
+
+  @Override
+  public ResponseEntity<CreateRsvpResponse> createRsvp(
+      UUID eventToken, CreateRsvpRequest createRsvpRequest) {
+    var evtToken = new EventToken(eventToken);
+    Rsvp rsvp = createRsvpUseCase.createRsvp(evtToken, createRsvpRequest.getName());
+
+    var response = new CreateRsvpResponse();
+    response.setRsvpToken(rsvp.getRsvpToken().value());
+    response.setName(rsvp.getName());
+
+    return ResponseEntity.status(HttpStatus.CREATED).body(response);
+  }
+
+  @Override
+  public ResponseEntity<Void> cancelRsvp(UUID eventToken, UUID rsvpToken) {
+    cancelRsvpUseCase.cancelRsvp(new EventToken(eventToken), new RsvpToken(rsvpToken));
+    return ResponseEntity.noContent().build();
+  }
+
+  private static ZoneId parseTimezone(String timezone) {
+    try {
+      return ZoneId.of(timezone);
+    } catch (DateTimeException e) {
+      throw new InvalidTimezoneException(timezone);
+    }
+  }
 }

backend/src/main/java/de/fete/adapter/in/web/GlobalExceptionHandler.java

@@ -1,6 +1,11 @@
 package de.fete.adapter.in.web;
 
+import de.fete.application.service.EventExpiredException;
+import de.fete.application.service.EventNotFoundException;
+import de.fete.application.service.ExpiryDateBeforeEventException;
 import de.fete.application.service.ExpiryDateInPastException;
+import de.fete.application.service.InvalidOrganizerTokenException;
+import de.fete.application.service.InvalidTimezoneException;
 import java.net.URI;
 import java.util.List;
 import java.util.Map;
@@ -44,6 +49,19 @@ public class GlobalExceptionHandler extends ResponseEntityExceptionHandler {
     return handleExceptionInternal(ex, problemDetail, headers, status, request);
   }
 
+  /** Handles expiry date before event date. */
+  @ExceptionHandler(ExpiryDateBeforeEventException.class)
+  public ResponseEntity<ProblemDetail> handleExpiryDateBeforeEvent(
+      ExpiryDateBeforeEventException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.BAD_REQUEST, ex.getMessage());
+    problemDetail.setTitle("Invalid Expiry Date");
+    problemDetail.setType(URI.create("urn:problem-type:expiry-date-before-event"));
+    return ResponseEntity.badRequest()
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
   /** Handles expiry date validation failures. */
   @ExceptionHandler(ExpiryDateInPastException.class)
   public ResponseEntity<ProblemDetail> handleExpiryDateInPast(
@@ -57,6 +75,58 @@ public class GlobalExceptionHandler extends ResponseEntityExceptionHandler {
         .body(problemDetail);
   }
 
+  /** Handles RSVP on expired event. */
+  @ExceptionHandler(EventExpiredException.class)
+  public ResponseEntity<ProblemDetail> handleEventExpired(
+      EventExpiredException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.CONFLICT, ex.getMessage());
+    problemDetail.setTitle("Event Expired");
+    problemDetail.setType(URI.create("urn:problem-type:event-expired"));
+    return ResponseEntity.status(HttpStatus.CONFLICT)
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
+  /** Handles invalid organizer token. */
+  @ExceptionHandler(InvalidOrganizerTokenException.class)
+  public ResponseEntity<ProblemDetail> handleInvalidOrganizerToken(
+      InvalidOrganizerTokenException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.FORBIDDEN, ex.getMessage());
+    problemDetail.setTitle("Forbidden");
+    problemDetail.setType(URI.create("urn:problem-type:invalid-organizer-token"));
+    return ResponseEntity.status(HttpStatus.FORBIDDEN)
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
+  /** Handles event not found. */
+  @ExceptionHandler(EventNotFoundException.class)
+  public ResponseEntity<ProblemDetail> handleEventNotFound(
+      EventNotFoundException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.NOT_FOUND, ex.getMessage());
+    problemDetail.setTitle("Event Not Found");
+    problemDetail.setType(URI.create("urn:problem-type:event-not-found"));
+    return ResponseEntity.status(HttpStatus.NOT_FOUND)
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
+  /** Handles invalid timezone. */
+  @ExceptionHandler(InvalidTimezoneException.class)
+  public ResponseEntity<ProblemDetail> handleInvalidTimezone(
+      InvalidTimezoneException ex) {
+    ProblemDetail problemDetail = ProblemDetail.forStatusAndDetail(
+        HttpStatus.BAD_REQUEST, ex.getMessage());
+    problemDetail.setTitle("Invalid Timezone");
+    problemDetail.setType(URI.create("urn:problem-type:invalid-timezone"));
+    return ResponseEntity.badRequest()
+        .contentType(MediaType.APPLICATION_PROBLEM_JSON)
+        .body(problemDetail);
+  }
+
   /** Catches all unhandled exceptions. */
   @ExceptionHandler(Exception.class)
   public ResponseEntity<ProblemDetail> handleAll(Exception ex) {

backend/src/main/java/de/fete/adapter/in/web/SpaController.java

@@ -0,0 +1,188 @@
+package de.fete.adapter.in.web;
+
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.port.in.GetEventUseCase;
+import jakarta.annotation.PostConstruct;
+import jakarta.servlet.http.HttpServletRequest;
+import java.io.IOException;
+import java.nio.charset.StandardCharsets;
+import java.time.ZonedDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.LinkedHashMap;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Optional;
+import java.util.UUID;
+import org.springframework.core.io.ClassPathResource;
+import org.springframework.http.MediaType;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.servlet.support.ServletUriComponentsBuilder;
+
+/** Serves the SPA index.html with injected Open Graph and Twitter Card meta-tags. */
+@Controller
+public class SpaController {
+
+  private static final String PLACEHOLDER = "<!-- OG_META_TAGS -->";
+  private static final int MAX_TITLE_LENGTH = 70;
+  private static final int MAX_DESCRIPTION_LENGTH = 200;
+  private static final String GENERIC_TITLE = "fete";
+  private static final String GENERIC_DESCRIPTION =
+      "Privacy-focused event planning. Create and share events without accounts.";
+  private static final DateTimeFormatter DATE_FORMAT =
+      DateTimeFormatter.ofPattern("EEEE, MMMM d, yyyy 'at' h:mm a", Locale.ENGLISH);
+
+  private final GetEventUseCase getEventUseCase;
+  private String htmlTemplate;
+
+  /** Creates a new SpaController. */
+  public SpaController(GetEventUseCase getEventUseCase) {
+    this.getEventUseCase = getEventUseCase;
+  }
+
+  /** Loads and caches the index.html template at startup. */
+  @PostConstruct
+  void loadTemplate() throws IOException {
+    var resource = new ClassPathResource("/static/index.html");
+    if (resource.exists()) {
+      htmlTemplate = resource.getContentAsString(StandardCharsets.UTF_8);
+    }
+  }
+
+  /** Serves SPA HTML with generic meta-tags for non-event routes. */
+  @GetMapping(
+      value = {"/", "/create", "/events"},
+      produces = MediaType.TEXT_HTML_VALUE
+  )
+  @ResponseBody
+  public String serveGenericPage(HttpServletRequest request) {
+    if (htmlTemplate == null) {
+      return "";
+    }
+    String baseUrl = getBaseUrl(request);
+    return htmlTemplate.replace(PLACEHOLDER, renderTags(buildGenericMeta(baseUrl)));
+  }
+
+  /** Serves SPA HTML with event-specific meta-tags. */
+  @GetMapping(
+      value = "/events/{eventToken}",
+      produces = MediaType.TEXT_HTML_VALUE
+  )
+  @ResponseBody
+  public String serveEventPage(@PathVariable String eventToken,
+      HttpServletRequest request) {
+    if (htmlTemplate == null) {
+      return "";
+    }
+    String baseUrl = getBaseUrl(request);
+    Map<String, String> meta = resolveEventMeta(eventToken, baseUrl);
+    return htmlTemplate.replace(PLACEHOLDER, renderTags(meta));
+  }
+
+  // --- Meta-tag composition ---
+
+  private Map<String, String> buildEventMeta(Event event, String baseUrl) {
+    var tags = new LinkedHashMap<String, String>();
+    String title = truncateTitle(event.getTitle());
+    String description = formatDescription(event);
+    tags.put("og:title", title);
+    tags.put("og:description", description);
+    tags.put("og:url", baseUrl + "/events/" + event.getEventToken().value());
+    tags.put("og:type", "website");
+    tags.put("og:site_name", GENERIC_TITLE);
+    tags.put("og:image", baseUrl + "/og-image.png");
+    tags.put("twitter:card", "summary");
+    tags.put("twitter:title", title);
+    tags.put("twitter:description", description);
+    return tags;
+  }
+
+  private Map<String, String> buildGenericMeta(String baseUrl) {
+    var tags = new LinkedHashMap<String, String>();
+    tags.put("og:title", GENERIC_TITLE);
+    tags.put("og:description", GENERIC_DESCRIPTION);
+    tags.put("og:url", baseUrl);
+    tags.put("og:type", "website");
+    tags.put("og:site_name", GENERIC_TITLE);
+    tags.put("og:image", baseUrl + "/og-image.png");
+    tags.put("twitter:card", "summary");
+    tags.put("twitter:title", GENERIC_TITLE);
+    tags.put("twitter:description", GENERIC_DESCRIPTION);
+    return tags;
+  }
+
+  private Map<String, String> resolveEventMeta(String token, String baseUrl) {
+    try {
+      UUID uuid = UUID.fromString(token);
+      Optional<Event> event =
+          getEventUseCase.getByEventToken(new EventToken(uuid));
+      if (event.isPresent()) {
+        return buildEventMeta(event.get(), baseUrl);
+      }
+    } catch (IllegalArgumentException ignored) {
+      // Invalid UUID — fall back to generic
+    }
+    return buildGenericMeta(baseUrl);
+  }
+
+  // --- Description formatting ---
+
+  private String truncateTitle(String title) {
+    if (title.length() <= MAX_TITLE_LENGTH) {
+      return title;
+    }
+    return title.substring(0, MAX_TITLE_LENGTH - 3) + "...";
+  }
+
+  private String formatDescription(Event event) {
+    ZonedDateTime zoned = event.getDateTime().atZoneSameInstant(event.getTimezone());
+    var sb = new StringBuilder();
+    sb.append("📅 ").append(zoned.format(DATE_FORMAT));
+
+    if (event.getLocation() != null && !event.getLocation().isBlank()) {
+      sb.append(" · 📍 ").append(event.getLocation());
+    }
+
+    if (event.getDescription() != null && !event.getDescription().isBlank()) {
+      sb.append(" — ").append(event.getDescription());
+    }
+
+    String result = sb.toString();
+    if (result.length() > MAX_DESCRIPTION_LENGTH) {
+      return result.substring(0, MAX_DESCRIPTION_LENGTH - 3) + "...";
+    }
+    return result;
+  }
+
+  // --- HTML rendering ---
+
+  private String renderTags(Map<String, String> tags) {
+    var sb = new StringBuilder();
+    for (var entry : tags.entrySet()) {
+      String key = entry.getKey();
+      String value = escapeHtml(entry.getValue());
+      String attr = key.startsWith("twitter:") ? "name" : "property";
+      sb.append("<meta ").append(attr).append("=\"").append(key)
+          .append("\" content=\"").append(value).append("\">\n");
+    }
+    return sb.toString().stripTrailing();
+  }
+
+  private String escapeHtml(String input) {
+    return input
+        .replace("&", "&amp;")
+        .replace("\"", "&quot;")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;");
+  }
+
+  private String getBaseUrl(HttpServletRequest request) {
+    return ServletUriComponentsBuilder.fromRequestUri(request)
+        .replacePath("")
+        .build()
+        .toUriString();
+  }
+}

backend/src/main/java/de/fete/adapter/out/persistence/EventJpaEntity.java

@@ -34,6 +34,9 @@ public class EventJpaEntity {
   @Column(name = "date_time", nullable = false)
   private OffsetDateTime dateTime;
 
+  @Column(nullable = false, length = 64)
+  private String timezone;
+
   @Column(length = 500)
   private String location;
 
@@ -103,6 +106,16 @@ public class EventJpaEntity {
     this.dateTime = dateTime;
   }
 
+  /** Returns the IANA timezone name. */
+  public String getTimezone() {
+    return timezone;
+  }
+
+  /** Sets the IANA timezone name. */
+  public void setTimezone(String timezone) {
+    this.timezone = timezone;
+  }
+
   /** Returns the event location. */
   public String getLocation() {
     return location;

backend/src/main/java/de/fete/adapter/out/persistence/EventJpaRepository.java

@@ -3,10 +3,17 @@ package de.fete.adapter.out.persistence;
 import java.util.Optional;
 import java.util.UUID;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
 
 /** Spring Data JPA repository for event entities. */
 public interface EventJpaRepository extends JpaRepository<EventJpaEntity, Long> {
 
   /** Finds an event by its public event token. */
   Optional<EventJpaEntity> findByEventToken(UUID eventToken);
+
+  /** Deletes all events whose expiry date is before today. Returns the number of deleted rows. */
+  @Modifying
+  @Query(value = "DELETE FROM events WHERE expiry_date < CURRENT_DATE", nativeQuery = true)
+  int deleteExpired();
 }

backend/src/main/java/de/fete/adapter/out/persistence/EventPersistenceAdapter.java

@@ -1,9 +1,11 @@
 package de.fete.adapter.out.persistence;
 
 import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
 import de.fete.domain.port.out.EventRepository;
+import java.time.ZoneId;
 import java.util.Optional;
-import java.util.UUID;
 import org.springframework.stereotype.Repository;
 
 /** Persistence adapter implementing the EventRepository outbound port. */
@@ -25,18 +27,24 @@ public class EventPersistenceAdapter implements EventRepository {
   }
 
   @Override
-  public Optional<Event> findByEventToken(UUID eventToken) {
-    return jpaRepository.findByEventToken(eventToken).map(this::toDomain);
+  public Optional<Event> findByEventToken(EventToken eventToken) {
+    return jpaRepository.findByEventToken(eventToken.value()).map(this::toDomain);
+  }
+
+  @Override
+  public int deleteExpired() {
+    return jpaRepository.deleteExpired();
   }
 
   private EventJpaEntity toEntity(Event event) {
     var entity = new EventJpaEntity();
     entity.setId(event.getId());
-    entity.setEventToken(event.getEventToken());
-    entity.setOrganizerToken(event.getOrganizerToken());
+    entity.setEventToken(event.getEventToken().value());
+    entity.setOrganizerToken(event.getOrganizerToken().value());
     entity.setTitle(event.getTitle());
     entity.setDescription(event.getDescription());
     entity.setDateTime(event.getDateTime());
+    entity.setTimezone(event.getTimezone().getId());
     entity.setLocation(event.getLocation());
     entity.setExpiryDate(event.getExpiryDate());
     entity.setCreatedAt(event.getCreatedAt());
@@ -46,11 +54,12 @@ public class EventPersistenceAdapter implements EventRepository {
   private Event toDomain(EventJpaEntity entity) {
     var event = new Event();
     event.setId(entity.getId());
-    event.setEventToken(entity.getEventToken());
-    event.setOrganizerToken(entity.getOrganizerToken());
+    event.setEventToken(new EventToken(entity.getEventToken()));
+    event.setOrganizerToken(new OrganizerToken(entity.getOrganizerToken()));
     event.setTitle(entity.getTitle());
     event.setDescription(entity.getDescription());
     event.setDateTime(entity.getDateTime());
+    event.setTimezone(ZoneId.of(entity.getTimezone()));
     event.setLocation(entity.getLocation());
     event.setExpiryDate(entity.getExpiryDate());
     event.setCreatedAt(entity.getCreatedAt());

backend/src/main/java/de/fete/adapter/out/persistence/RsvpJpaEntity.java

@@ -0,0 +1,68 @@
+package de.fete.adapter.out.persistence;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import java.util.UUID;
+
+/** JPA entity mapping to the rsvps table. */
+@Entity
+@Table(name = "rsvps")
+public class RsvpJpaEntity {
+
+  @Id
+  @GeneratedValue(strategy = GenerationType.IDENTITY)
+  private Long id;
+
+  @Column(name = "rsvp_token", nullable = false, unique = true)
+  private UUID rsvpToken;
+
+  @Column(name = "event_id", nullable = false)
+  private Long eventId;
+
+  @Column(nullable = false, length = 100)
+  private String name;
+
+  /** Returns the internal database ID. */
+  public Long getId() {
+    return id;
+  }
+
+  /** Sets the internal database ID. */
+  public void setId(Long id) {
+    this.id = id;
+  }
+
+  /** Returns the RSVP token. */
+  public UUID getRsvpToken() {
+    return rsvpToken;
+  }
+
+  /** Sets the RSVP token. */
+  public void setRsvpToken(UUID rsvpToken) {
+    this.rsvpToken = rsvpToken;
+  }
+
+  /** Returns the event ID. */
+  public Long getEventId() {
+    return eventId;
+  }
+
+  /** Sets the event ID. */
+  public void setEventId(Long eventId) {
+    this.eventId = eventId;
+  }
+
+  /** Returns the guest's display name. */
+  public String getName() {
+    return name;
+  }
+
+  /** Sets the guest's display name. */
+  public void setName(String name) {
+    this.name = name;
+  }
+}

backend/src/main/java/de/fete/adapter/out/persistence/RsvpJpaRepository.java

@@ -0,0 +1,20 @@
+package de.fete.adapter.out.persistence;
+
+import java.util.UUID;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+/** Spring Data JPA repository for RSVP entities. */
+public interface RsvpJpaRepository extends JpaRepository<RsvpJpaEntity, Long> {
+
+  /** Finds an RSVP by its token. */
+  java.util.Optional<RsvpJpaEntity> findByRsvpToken(UUID rsvpToken);
+
+  /** Counts RSVPs for the given event. */
+  long countByEventId(Long eventId);
+
+  /** Finds all RSVPs for the given event, ordered by ID ascending. */
+  java.util.List<RsvpJpaEntity> findAllByEventIdOrderByIdAsc(Long eventId);
+
+  /** Deletes an RSVP by event ID and RSVP token. Returns count of deleted rows. */
+  long deleteByEventIdAndRsvpToken(Long eventId, UUID rsvpToken);
+}

backend/src/main/java/de/fete/adapter/out/persistence/RsvpPersistenceAdapter.java

@@ -0,0 +1,61 @@
+package de.fete.adapter.out.persistence;
+
+import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
+import de.fete.domain.port.out.RsvpRepository;
+import java.util.List;
+import org.springframework.stereotype.Repository;
+
+/** Persistence adapter implementing the RsvpRepository outbound port. */
+@Repository
+public class RsvpPersistenceAdapter implements RsvpRepository {
+
+  private final RsvpJpaRepository jpaRepository;
+
+  /** Creates a new adapter with the given JPA repository. */
+  public RsvpPersistenceAdapter(RsvpJpaRepository jpaRepository) {
+    this.jpaRepository = jpaRepository;
+  }
+
+  @Override
+  public Rsvp save(Rsvp rsvp) {
+    RsvpJpaEntity entity = toEntity(rsvp);
+    RsvpJpaEntity saved = jpaRepository.save(entity);
+    return toDomain(saved);
+  }
+
+  @Override
+  public long countByEventId(Long eventId) {
+    return jpaRepository.countByEventId(eventId);
+  }
+
+  @Override
+  public List<Rsvp> findByEventId(Long eventId) {
+    return jpaRepository.findAllByEventIdOrderByIdAsc(eventId).stream()
+        .map(this::toDomain)
+        .toList();
+  }
+
+  @Override
+  public boolean deleteByEventIdAndRsvpToken(Long eventId, RsvpToken rsvpToken) {
+    return jpaRepository.deleteByEventIdAndRsvpToken(eventId, rsvpToken.value()) > 0;
+  }
+
+  private RsvpJpaEntity toEntity(Rsvp rsvp) {
+    var entity = new RsvpJpaEntity();
+    entity.setId(rsvp.getId());
+    entity.setRsvpToken(rsvp.getRsvpToken().value());
+    entity.setEventId(rsvp.getEventId());
+    entity.setName(rsvp.getName());
+    return entity;
+  }
+
+  private Rsvp toDomain(RsvpJpaEntity entity) {
+    var rsvp = new Rsvp();
+    rsvp.setId(entity.getId());
+    rsvp.setRsvpToken(new RsvpToken(entity.getRsvpToken()));
+    rsvp.setEventId(entity.getEventId());
+    rsvp.setName(entity.getName());
+    return rsvp;
+  }
+}

backend/src/main/java/de/fete/application/service/EventExpiredException.java

@@ -0,0 +1,12 @@
+package de.fete.application.service;
+
+import java.util.UUID;
+
+/** Thrown when an RSVP is attempted on an expired event. */
+public class EventExpiredException extends RuntimeException {
+
+  /** Creates a new exception for the given event token. */
+  public EventExpiredException(UUID eventToken) {
+    super("Event has expired: " + eventToken);
+  }
+}

backend/src/main/java/de/fete/application/service/EventNotFoundException.java

@@ -0,0 +1,12 @@
+package de.fete.application.service;
+
+import java.util.UUID;
+
+/** Thrown when an event cannot be found by its token. */
+public class EventNotFoundException extends RuntimeException {
+
+  /** Creates a new exception for the given event token. */
+  public EventNotFoundException(UUID eventToken) {
+    super("Event not found: " + eventToken);
+  }
+}

backend/src/main/java/de/fete/application/service/EventService.java

@@ -2,17 +2,22 @@ package de.fete.application.service;
 
 import de.fete.domain.model.CreateEventCommand;
 import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
 import de.fete.domain.port.in.CreateEventUseCase;
+import de.fete.domain.port.in.GetEventUseCase;
 import de.fete.domain.port.out.EventRepository;
 import java.time.Clock;
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
-import java.util.UUID;
+import java.util.Optional;
 import org.springframework.stereotype.Service;
 
-/** Application service implementing event creation. */
+/** Application service implementing event creation and retrieval. */
 @Service
-public class EventService implements CreateEventUseCase {
+public class EventService implements CreateEventUseCase, GetEventUseCase {
+
+  private static final int EXPIRY_DAYS_AFTER_EVENT = 7;
 
   private final EventRepository eventRepository;
   private final Clock clock;
@@ -25,20 +30,24 @@ public class EventService implements CreateEventUseCase {
 
   @Override
   public Event createEvent(CreateEventCommand command) {
-    if (!command.expiryDate().isAfter(LocalDate.now(clock))) {
-      throw new ExpiryDateInPastException(command.expiryDate());
-    }
+    LocalDate expiryDate = command.dateTime().toLocalDate().plusDays(EXPIRY_DAYS_AFTER_EVENT);
 
     var event = new Event();
-    event.setEventToken(UUID.randomUUID());
-    event.setOrganizerToken(UUID.randomUUID());
+    event.setEventToken(EventToken.generate());
+    event.setOrganizerToken(OrganizerToken.generate());
     event.setTitle(command.title());
     event.setDescription(command.description());
     event.setDateTime(command.dateTime());
+    event.setTimezone(command.timezone());
     event.setLocation(command.location());
-    event.setExpiryDate(command.expiryDate());
+    event.setExpiryDate(expiryDate);
     event.setCreatedAt(OffsetDateTime.now(clock));
 
     return eventRepository.save(event);
   }
+
+  @Override
+  public Optional<Event> getByEventToken(EventToken eventToken) {
+    return eventRepository.findByEventToken(eventToken);
+  }
 }

backend/src/main/java/de/fete/application/service/ExpiredEventCleanupJob.java

@@ -0,0 +1,30 @@
+package de.fete.application.service;
+
+import de.fete.domain.port.out.EventRepository;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Component;
+import org.springframework.transaction.annotation.Transactional;
+
+/** Scheduled job that deletes events whose expiry date is in the past. */
+@Component
+public class ExpiredEventCleanupJob {
+
+  private static final Logger log = LoggerFactory.getLogger(ExpiredEventCleanupJob.class);
+
+  private final EventRepository eventRepository;
+
+  /** Creates a new cleanup job with the given event repository. */
+  public ExpiredEventCleanupJob(EventRepository eventRepository) {
+    this.eventRepository = eventRepository;
+  }
+
+  /** Runs daily at 03:00 and deletes all expired events. */
+  @Scheduled(cron = "0 0 3 * * *")
+  @Transactional
+  public void deleteExpiredEvents() {
+    int deleted = eventRepository.deleteExpired();
+    log.info("Expired event cleanup: deleted {} event(s)", deleted);
+  }
+}

backend/src/main/java/de/fete/application/service/ExpiryDateBeforeEventException.java

@@ -0,0 +1,13 @@
+package de.fete.application.service;
+
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+
+/** Thrown when an event's expiry date is not after the event date. */
+public class ExpiryDateBeforeEventException extends RuntimeException {
+
+  /** Creates a new exception for the given dates. */
+  public ExpiryDateBeforeEventException(LocalDate expiryDate, OffsetDateTime dateTime) {
+    super("Expiry date " + expiryDate + " must be after event date " + dateTime.toLocalDate());
+  }
+}

backend/src/main/java/de/fete/application/service/InvalidOrganizerTokenException.java

@@ -0,0 +1,10 @@
+package de.fete.application.service;
+
+/** Thrown when an invalid organizer token is provided. */
+public class InvalidOrganizerTokenException extends RuntimeException {
+
+  /** Creates a new exception for an invalid organizer token. */
+  public InvalidOrganizerTokenException() {
+    super("Invalid organizer token.");
+  }
+}

backend/src/main/java/de/fete/application/service/InvalidTimezoneException.java

@@ -0,0 +1,10 @@
+package de.fete.application.service;
+
+/** Thrown when an invalid IANA timezone ID is provided. */
+public class InvalidTimezoneException extends RuntimeException {
+
+  /** Creates a new exception for the given invalid timezone. */
+  public InvalidTimezoneException(String timezone) {
+    super("Invalid IANA timezone: " + timezone);
+  }
+}

backend/src/main/java/de/fete/application/service/RsvpService.java

@@ -0,0 +1,85 @@
+package de.fete.application.service;
+
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
+import de.fete.domain.port.in.CancelRsvpUseCase;
+import de.fete.domain.port.in.CountAttendeesByEventUseCase;
+import de.fete.domain.port.in.CreateRsvpUseCase;
+import de.fete.domain.port.in.GetAttendeesUseCase;
+import de.fete.domain.port.out.EventRepository;
+import de.fete.domain.port.out.RsvpRepository;
+import jakarta.transaction.Transactional;
+import java.time.Clock;
+import java.time.LocalDate;
+import java.util.List;
+import org.springframework.stereotype.Service;
+
+/** Application service implementing RSVP operations. */
+@Service
+public class RsvpService
+    implements CreateRsvpUseCase, CancelRsvpUseCase, CountAttendeesByEventUseCase,
+    GetAttendeesUseCase {
+
+  private final EventRepository eventRepository;
+  private final RsvpRepository rsvpRepository;
+  private final Clock clock;
+
+  /** Creates a new RsvpService. */
+  public RsvpService(
+      EventRepository eventRepository,
+      RsvpRepository rsvpRepository,
+      Clock clock) {
+    this.eventRepository = eventRepository;
+    this.rsvpRepository = rsvpRepository;
+    this.clock = clock;
+  }
+
+  @Override
+  public Rsvp createRsvp(EventToken eventToken, String name) {
+    Event event = eventRepository.findByEventToken(eventToken)
+        .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
+
+    if (!event.getExpiryDate().isAfter(LocalDate.now(clock))) {
+      throw new EventExpiredException(eventToken.value());
+    }
+
+    var rsvp = new Rsvp();
+    rsvp.setRsvpToken(RsvpToken.generate());
+    rsvp.setEventId(event.getId());
+    rsvp.setName(name.strip());
+
+    return rsvpRepository.save(rsvp);
+  }
+
+  @Override
+  @Transactional
+  public void cancelRsvp(EventToken eventToken, RsvpToken rsvpToken) {
+    eventRepository.findByEventToken(eventToken)
+        .ifPresent(event ->
+            rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken));
+  }
+
+  @Override
+  public long countByEvent(EventToken eventToken) {
+    Event event = eventRepository.findByEventToken(eventToken)
+        .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
+    return rsvpRepository.countByEventId(event.getId());
+  }
+
+  @Override
+  public List<String> getAttendeeNames(EventToken eventToken, OrganizerToken organizerToken) {
+    Event event = eventRepository.findByEventToken(eventToken)
+        .orElseThrow(() -> new EventNotFoundException(eventToken.value()));
+
+    if (!event.getOrganizerToken().equals(organizerToken)) {
+      throw new InvalidOrganizerTokenException();
+    }
+
+    return rsvpRepository.findByEventId(event.getId()).stream()
+        .map(Rsvp::getName)
+        .toList();
+  }
+}

backend/src/main/java/de/fete/config/WebConfig.java

@@ -1,21 +1,17 @@
 package de.fete.config;
 
-import java.io.IOException;
 import java.time.Clock;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
-import org.springframework.core.io.ClassPathResource;
-import org.springframework.core.io.Resource;
 import org.springframework.web.bind.annotation.RestController;
 import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
-import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
-import org.springframework.web.servlet.resource.PathResourceResolver;
 
-/** Configures API path prefix and SPA static resource serving. */
+/** Configures API path prefix. Static resources served by default Spring Boot handler. */
 @Configuration
 public class WebConfig implements WebMvcConfigurer {
 
+  /** Provides a system clock bean for time-dependent services. */
   @Bean
   Clock clock() {
     return Clock.systemDefaultZone();
@@ -25,23 +21,4 @@ public class WebConfig implements WebMvcConfigurer {
   public void configurePathMatch(PathMatchConfigurer configurer) {
     configurer.addPathPrefix("/api", c -> c.isAnnotationPresent(RestController.class));
   }
-
-  @Override
-  public void addResourceHandlers(ResourceHandlerRegistry registry) {
-    registry.addResourceHandler("/**")
-        .addResourceLocations("classpath:/static/")
-        .resourceChain(true)
-        .addResolver(new PathResourceResolver() {
-          @Override
-          protected Resource getResource(String resourcePath,
-              Resource location) throws IOException {
-            Resource requested = location.createRelative(resourcePath);
-            if (requested.exists() && requested.isReadable()) {
-              return requested;
-            }
-            Resource index = new ClassPathResource("/static/index.html");
-            return (index.exists() && index.isReadable()) ? index : null;
-          }
-        });
-  }
 }

backend/src/main/java/de/fete/domain/model/CreateEventCommand.java

@@ -2,12 +2,13 @@ package de.fete.domain.model;
 
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
+import java.time.ZoneId;
 
 /** Command carrying the data needed to create an event. */
 public record CreateEventCommand(
     String title,
     String description,
     OffsetDateTime dateTime,
-    String location,
-    LocalDate expiryDate
+    ZoneId timezone,
+    String location
 ) {}

backend/src/main/java/de/fete/domain/model/Event.java

@@ -2,17 +2,18 @@ package de.fete.domain.model;
 
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
-import java.util.UUID;
+import java.time.ZoneId;
 
 /** Domain entity representing an event. */
 public class Event {
 
   private Long id;
-  private UUID eventToken;
-  private UUID organizerToken;
+  private EventToken eventToken;
+  private OrganizerToken organizerToken;
   private String title;
   private String description;
   private OffsetDateTime dateTime;
+  private ZoneId timezone;
   private String location;
   private LocalDate expiryDate;
   private OffsetDateTime createdAt;
@@ -27,23 +28,23 @@ public class Event {
     this.id = id;
   }
 
-  /** Returns the public event token (UUID). */
-  public UUID getEventToken() {
+  /** Returns the public event token. */
+  public EventToken getEventToken() {
     return eventToken;
   }
 
   /** Sets the public event token. */
-  public void setEventToken(UUID eventToken) {
+  public void setEventToken(EventToken eventToken) {
     this.eventToken = eventToken;
   }
 
-  /** Returns the secret organizer token (UUID). */
-  public UUID getOrganizerToken() {
+  /** Returns the secret organizer token. */
+  public OrganizerToken getOrganizerToken() {
     return organizerToken;
   }
 
   /** Sets the secret organizer token. */
-  public void setOrganizerToken(UUID organizerToken) {
+  public void setOrganizerToken(OrganizerToken organizerToken) {
     this.organizerToken = organizerToken;
   }
 
@@ -77,6 +78,16 @@ public class Event {
     this.dateTime = dateTime;
   }
 
+  /** Returns the IANA timezone. */
+  public ZoneId getTimezone() {
+    return timezone;
+  }
+
+  /** Sets the IANA timezone. */
+  public void setTimezone(ZoneId timezone) {
+    this.timezone = timezone;
+  }
+
   /** Returns the event location. */
   public String getLocation() {
     return location;

backend/src/main/java/de/fete/domain/model/EventToken.java

@@ -0,0 +1,18 @@
+package de.fete.domain.model;
+
+import java.util.Objects;
+import java.util.UUID;
+
+/** Type-safe wrapper for the public event token. */
+public record EventToken(UUID value) {
+
+  /** Validates that the token value is not null. */
+  public EventToken {
+    Objects.requireNonNull(value, "eventToken must not be null");
+  }
+
+  /** Generates a new random event token. */
+  public static EventToken generate() {
+    return new EventToken(UUID.randomUUID());
+  }
+}

backend/src/main/java/de/fete/domain/model/OrganizerToken.java

@@ -0,0 +1,18 @@
+package de.fete.domain.model;
+
+import java.util.Objects;
+import java.util.UUID;
+
+/** Type-safe wrapper for the secret organizer token. */
+public record OrganizerToken(UUID value) {
+
+  /** Validates that the token value is not null. */
+  public OrganizerToken {
+    Objects.requireNonNull(value, "organizerToken must not be null");
+  }
+
+  /** Generates a new random organizer token. */
+  public static OrganizerToken generate() {
+    return new OrganizerToken(UUID.randomUUID());
+  }
+}

backend/src/main/java/de/fete/domain/model/Rsvp.java

@@ -0,0 +1,50 @@
+package de.fete.domain.model;
+
+/** Domain entity representing an RSVP. */
+public class Rsvp {
+
+  private Long id;
+  private RsvpToken rsvpToken;
+  private Long eventId;
+  private String name;
+
+  /** Returns the internal database ID. */
+  public Long getId() {
+    return id;
+  }
+
+  /** Sets the internal database ID. */
+  public void setId(Long id) {
+    this.id = id;
+  }
+
+  /** Returns the RSVP token. */
+  public RsvpToken getRsvpToken() {
+    return rsvpToken;
+  }
+
+  /** Sets the RSVP token. */
+  public void setRsvpToken(RsvpToken rsvpToken) {
+    this.rsvpToken = rsvpToken;
+  }
+
+  /** Returns the event ID this RSVP belongs to. */
+  public Long getEventId() {
+    return eventId;
+  }
+
+  /** Sets the event ID. */
+  public void setEventId(Long eventId) {
+    this.eventId = eventId;
+  }
+
+  /** Returns the guest's display name. */
+  public String getName() {
+    return name;
+  }
+
+  /** Sets the guest's display name. */
+  public void setName(String name) {
+    this.name = name;
+  }
+}

backend/src/main/java/de/fete/domain/model/RsvpToken.java

@@ -0,0 +1,18 @@
+package de.fete.domain.model;
+
+import java.util.Objects;
+import java.util.UUID;
+
+/** Type-safe wrapper for the RSVP token. */
+public record RsvpToken(UUID value) {
+
+  /** Validates that the token value is not null. */
+  public RsvpToken {
+    Objects.requireNonNull(value, "rsvpToken must not be null");
+  }
+
+  /** Generates a new random RSVP token. */
+  public static RsvpToken generate() {
+    return new RsvpToken(UUID.randomUUID());
+  }
+}

backend/src/main/java/de/fete/domain/port/in/CancelRsvpUseCase.java

@@ -0,0 +1,11 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.RsvpToken;
+
+/** Inbound port for cancelling an RSVP. */
+public interface CancelRsvpUseCase {
+
+  /** Cancels the RSVP identified by the given tokens. Idempotent — no error if not found. */
+  void cancelRsvp(EventToken eventToken, RsvpToken rsvpToken);
+}

backend/src/main/java/de/fete/domain/port/in/CountAttendeesByEventUseCase.java

@@ -0,0 +1,10 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.EventToken;
+
+/** Inbound port for counting attendees of an event. */
+public interface CountAttendeesByEventUseCase {
+
+  /** Counts the number of confirmed attendees for the given event. */
+  long countByEvent(EventToken eventToken);
+}

backend/src/main/java/de/fete/domain/port/in/CreateRsvpUseCase.java

@@ -0,0 +1,11 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.Rsvp;
+
+/** Inbound port for creating a new RSVP. */
+public interface CreateRsvpUseCase {
+
+  /** Creates an RSVP for the given event and guest name. */
+  Rsvp createRsvp(EventToken eventToken, String name);
+}

backend/src/main/java/de/fete/domain/port/in/GetAttendeesUseCase.java

@@ -0,0 +1,12 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+import java.util.List;
+
+/** Inbound port for retrieving attendee names of an event. */
+public interface GetAttendeesUseCase {
+
+  /** Returns attendee names ordered by RSVP submission time. */
+  List<String> getAttendeeNames(EventToken eventToken, OrganizerToken organizerToken);
+}

backend/src/main/java/de/fete/domain/port/in/GetEventUseCase.java

@@ -0,0 +1,12 @@
+package de.fete.domain.port.in;
+
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import java.util.Optional;
+
+/** Inbound port for retrieving a public event by its token. */
+public interface GetEventUseCase {
+
+  /** Finds an event by its public event token. */
+  Optional<Event> getByEventToken(EventToken eventToken);
+}

backend/src/main/java/de/fete/domain/port/out/EventRepository.java

@@ -1,8 +1,8 @@
 package de.fete.domain.port.out;
 
 import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
 import java.util.Optional;
-import java.util.UUID;
 
 /** Outbound port for persisting and retrieving events. */
 public interface EventRepository {
@@ -11,5 +11,8 @@ public interface EventRepository {
   Event save(Event event);
 
   /** Finds an event by its public event token. */
-  Optional<Event> findByEventToken(UUID eventToken);
+  Optional<Event> findByEventToken(EventToken eventToken);
+
+  /** Deletes all events whose expiry date is in the past. Returns the number of deleted events. */
+  int deleteExpired();
 }

backend/src/main/java/de/fete/domain/port/out/RsvpRepository.java

@@ -0,0 +1,21 @@
+package de.fete.domain.port.out;
+
+import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
+import java.util.List;
+
+/** Outbound port for persisting and querying RSVPs. */
+public interface RsvpRepository {
+
+  /** Persists the given RSVP and returns it with generated fields populated. */
+  Rsvp save(Rsvp rsvp);
+
+  /** Counts the number of RSVPs for the given event. */
+  long countByEventId(Long eventId);
+
+  /** Finds all RSVPs for the given event, ordered by ID ascending. */
+  List<Rsvp> findByEventId(Long eventId);
+
+  /** Deletes an RSVP by event ID and RSVP token. Returns true if a record was deleted. */
+  boolean deleteByEventIdAndRsvpToken(Long eventId, RsvpToken rsvpToken);
+}

backend/src/main/resources/application.properties

@@ -7,6 +7,9 @@ spring.jpa.open-in-view=false
 # Liquibase
 spring.liquibase.change-log=classpath:db/changelog/db.changelog-master.xml
 
+# Proxy headers
+server.forward-headers-strategy=framework
+
 # Actuator
 management.endpoints.web.exposure.include=health
 management.endpoint.health.show-details=never

backend/src/main/resources/db/changelog/002-add-timezone-column.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<databaseChangeLog
+    xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
+        http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-latest.xsd">
+
+    <changeSet id="002-add-timezone-column" author="fete">
+        <addColumn tableName="events">
+            <column name="timezone" type="varchar(64)" defaultValue="UTC">
+                <constraints nullable="false"/>
+            </column>
+        </addColumn>
+    </changeSet>
+
+</databaseChangeLog>

backend/src/main/resources/db/changelog/003-create-rsvps-table.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<databaseChangeLog
+    xmlns="http://www.liquibase.org/xml/ns/dbchangelog"
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
+        http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-latest.xsd">
+
+    <changeSet id="003-create-rsvps-table" author="fete">
+        <createTable tableName="rsvps">
+            <column name="id" type="bigserial" autoIncrement="true">
+                <constraints primaryKey="true" nullable="false"/>
+            </column>
+            <column name="rsvp_token" type="uuid">
+                <constraints nullable="false" unique="true"/>
+            </column>
+            <column name="event_id" type="bigint">
+                <constraints nullable="false"
+                             foreignKeyName="fk_rsvps_event_id"
+                             references="events(id)"
+                             deleteCascade="true"/>
+            </column>
+            <column name="name" type="varchar(100)">
+                <constraints nullable="false"/>
+            </column>
+        </createTable>
+
+        <createIndex tableName="rsvps" indexName="idx_rsvps_event_id">
+            <column name="event_id"/>
+        </createIndex>
+
+        <createIndex tableName="rsvps" indexName="idx_rsvps_rsvp_token">
+            <column name="rsvp_token"/>
+        </createIndex>
+    </changeSet>
+
+</databaseChangeLog>

backend/src/main/resources/db/changelog/db.changelog-master.xml

@@ -7,5 +7,7 @@
 
     <include file="db/changelog/000-baseline.xml"/>
     <include file="db/changelog/001-create-events-table.xml"/>
+    <include file="db/changelog/002-add-timezone-column.xml"/>
+    <include file="db/changelog/003-create-rsvps-table.xml"/>
 
 </databaseChangeLog>

backend/src/main/resources/openapi/api.yaml

@@ -37,6 +37,153 @@ paths:
               schema:
                 $ref: "#/components/schemas/ValidationProblemDetail"
 
+  /events/{eventToken}/rsvps/{rsvpToken}:
+    delete:
+      operationId: cancelRsvp
+      summary: Cancel RSVP
+      description: |
+        Permanently deletes an RSVP identified by the RSVP token.
+        Idempotent: returns 204 whether the RSVP existed or not.
+      tags:
+        - events
+      parameters:
+        - name: eventToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Event token (UUID)
+        - name: rsvpToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: RSVP token (UUID) identifying the attendance to cancel
+      responses:
+        "204":
+          description: >
+            RSVP successfully cancelled (or was already cancelled).
+            No response body.
+        "500":
+          description: Internal server error
+
+  /events/{eventToken}/rsvps:
+    post:
+      operationId: createRsvp
+      summary: Submit an RSVP for an event
+      tags:
+        - events
+      parameters:
+        - name: eventToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Public event token
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: "#/components/schemas/CreateRsvpRequest"
+      responses:
+        "201":
+          description: RSVP created successfully
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/CreateRsvpResponse"
+        "400":
+          description: Validation failed (e.g. blank name)
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ValidationProblemDetail"
+        "404":
+          description: Event not found
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+        "409":
+          description: Event has expired — RSVPs no longer accepted
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+
+  /events/{eventToken}/attendees:
+    get:
+      operationId: getAttendees
+      summary: Get attendee list for an event (organizer only)
+      tags:
+        - events
+      parameters:
+        - name: eventToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Public event token
+        - name: organizerToken
+          in: query
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Organizer token for authorization
+      responses:
+        "200":
+          description: Attendee list
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/GetAttendeesResponse"
+        "403":
+          description: Invalid organizer token
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+        "404":
+          description: Event not found
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+
+  /events/{eventToken}:
+    get:
+      operationId: getEvent
+      summary: Get public event details by token
+      tags:
+        - events
+      parameters:
+        - name: eventToken
+          in: path
+          required: true
+          schema:
+            type: string
+            format: uuid
+          description: Public event token
+      responses:
+        "200":
+          description: Event found
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/GetEventResponse"
+        "404":
+          description: Event not found
+          content:
+            application/problem+json:
+              schema:
+                $ref: "#/components/schemas/ProblemDetail"
+
 components:
   schemas:
     CreateEventRequest:
@@ -44,7 +191,7 @@ components:
       required:
         - title
         - dateTime
-        - expiryDate
+        - timezone
       properties:
         title:
           type: string
@@ -58,14 +205,13 @@ components:
           format: date-time
           description: Event date and time with UTC offset (ISO 8601)
           example: "2026-03-15T20:00:00+01:00"
+        timezone:
+          type: string
+          description: IANA timezone of the organizer
+          example: "Europe/Berlin"
         location:
           type: string
           maxLength: 500
-        expiryDate:
-          type: string
-          format: date
-          description: Date after which event data is deleted. Must be in the future.
-          example: "2026-06-15"
 
     CreateEventResponse:
       type: object
@@ -74,7 +220,7 @@ components:
         - organizerToken
         - title
         - dateTime
-        - expiryDate
+        - timezone
       properties:
         eventToken:
           type: string
@@ -93,10 +239,103 @@ components:
           type: string
           format: date-time
           example: "2026-03-15T20:00:00+01:00"
-        expiryDate:
+        timezone:
           type: string
-          format: date
-          example: "2026-06-15"
+          description: IANA timezone of the organizer
+          example: "Europe/Berlin"
+
+    GetEventResponse:
+      type: object
+      required:
+        - eventToken
+        - title
+        - dateTime
+        - timezone
+        - attendeeCount
+      properties:
+        eventToken:
+          type: string
+          format: uuid
+          description: Public event token
+          example: "a1b2c3d4-e5f6-7890-abcd-ef1234567890"
+        title:
+          type: string
+          description: Event title
+          example: "Summer BBQ"
+        description:
+          type: string
+          description: Event description (absent if not set)
+          example: "Bring your own drinks!"
+        dateTime:
+          type: string
+          format: date-time
+          description: Event date/time with organizer's UTC offset
+          example: "2026-03-15T20:00:00+01:00"
+        timezone:
+          type: string
+          description: IANA timezone name of the organizer
+          example: "Europe/Berlin"
+        location:
+          type: string
+          description: Event location (absent if not set)
+          example: "Central Park, NYC"
+        attendeeCount:
+          type: integer
+          minimum: 0
+          description: Number of confirmed attendees (attending=true)
+          example: 12
+
+    CreateRsvpRequest:
+      type: object
+      required:
+        - name
+      properties:
+        name:
+          type: string
+          minLength: 1
+          maxLength: 100
+          description: Guest's display name
+          example: "Max Mustermann"
+
+    CreateRsvpResponse:
+      type: object
+      required:
+        - rsvpToken
+        - name
+      properties:
+        rsvpToken:
+          type: string
+          format: uuid
+          description: Token identifying this RSVP (store client-side for future updates)
+          example: "d4e5f6a7-b8c9-0123-4567-890abcdef012"
+        name:
+          type: string
+          description: Guest's display name as stored
+          example: "Max Mustermann"
+
+    GetAttendeesResponse:
+      type: object
+      required:
+        - attendees
+      properties:
+        attendees:
+          type: array
+          items:
+            $ref: "#/components/schemas/Attendee"
+          example:
+            - name: "Alice"
+            - name: "Bob"
+
+    Attendee:
+      type: object
+      required:
+        - name
+      properties:
+        name:
+          type: string
+          minLength: 1
+          maxLength: 100
+          example: "Alice"
 
     ProblemDetail:
       type: object

backend/src/test/java/de/fete/HexagonalArchitectureTest.java

@@ -60,4 +60,9 @@ class HexagonalArchitectureTest {
   static final ArchRule persistenceMustNotDependOnWeb = noClasses()
       .that().resideInAPackage("de.fete.adapter.out.persistence..")
       .should().dependOnClassesThat().resideInAPackage("de.fete.adapter.in.web..");
+
+  @ArchTest
+  static final ArchRule webAdapterMustNotDependOnOutboundPorts = noClasses()
+      .that().resideInAPackage("de.fete.adapter.in.web..")
+      .should().dependOnClassesThat().resideInAPackage("de.fete.domain.port.out..");
 }

backend/src/test/java/de/fete/adapter/in/web/EventControllerIntegrationTest.java

@@ -1,12 +1,27 @@
 package de.fete.adapter.in.web;
 
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.delete;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
 
+import com.fasterxml.jackson.databind.ObjectMapper;
 import de.fete.TestcontainersConfig;
+import de.fete.adapter.in.web.model.CreateEventRequest;
+import de.fete.adapter.in.web.model.CreateEventResponse;
+import de.fete.adapter.in.web.model.CreateRsvpRequest;
+import de.fete.adapter.in.web.model.CreateRsvpResponse;
+import de.fete.adapter.out.persistence.EventJpaEntity;
+import de.fete.adapter.out.persistence.EventJpaRepository;
+import de.fete.adapter.out.persistence.RsvpJpaEntity;
+import de.fete.adapter.out.persistence.RsvpJpaRepository;
 import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.UUID;
 import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
@@ -23,158 +38,430 @@ class EventControllerIntegrationTest {
   @Autowired
   private MockMvc mockMvc;
 
+  @Autowired
+  private ObjectMapper objectMapper;
+
+  @Autowired
+  private EventJpaRepository jpaRepository;
+
+  @Autowired
+  private RsvpJpaRepository rsvpJpaRepository;
+
+  // --- Create Event tests ---
+
   @Test
   void createEventWithValidBody() throws Exception {
-    String body =
-        """
-        {
-          "title": "Birthday Party",
-          "description": "Come celebrate!",
-          "dateTime": "2026-06-15T20:00:00+02:00",
-          "location": "Berlin",
-          "expiryDate": "%s"
-        }
-        """.formatted(LocalDate.now().plusDays(30));
+    var request = new CreateEventRequest()
+        .title("Birthday Party")
+        .description("Come celebrate!")
+        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
+        .timezone("Europe/Berlin")
+        .location("Berlin");
 
-    mockMvc.perform(post("/api/events")
+    var result = mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
+            .content(objectMapper.writeValueAsString(request)))
         .andExpect(status().isCreated())
         .andExpect(jsonPath("$.eventToken").isNotEmpty())
         .andExpect(jsonPath("$.organizerToken").isNotEmpty())
         .andExpect(jsonPath("$.title").value("Birthday Party"))
+        .andExpect(jsonPath("$.timezone").value("Europe/Berlin"))
         .andExpect(jsonPath("$.dateTime").isNotEmpty())
-        .andExpect(jsonPath("$.expiryDate").isNotEmpty());
+        .andReturn();
+
+    var response = objectMapper.readValue(
+        result.getResponse().getContentAsString(), CreateEventResponse.class);
+
+    EventJpaEntity persisted = jpaRepository
+        .findByEventToken(response.getEventToken()).orElseThrow();
+    assertThat(persisted.getTitle()).isEqualTo("Birthday Party");
+    assertThat(persisted.getDescription()).isEqualTo("Come celebrate!");
+    assertThat(persisted.getTimezone()).isEqualTo("Europe/Berlin");
+    assertThat(persisted.getLocation()).isEqualTo("Berlin");
+    assertThat(persisted.getExpiryDate()).isEqualTo(LocalDate.of(2026, 6, 22));
+    assertThat(persisted.getDateTime().toInstant())
+        .isEqualTo(request.getDateTime().toInstant());
+    assertThat(persisted.getOrganizerToken()).isNotNull();
+    assertThat(persisted.getCreatedAt()).isNotNull();
   }
 
   @Test
   void createEventWithOptionalFieldsNull() throws Exception {
-    String body =
-        """
-        {
-          "title": "Minimal Event",
-          "dateTime": "2026-06-15T20:00:00+02:00",
-          "expiryDate": "%s"
-        }
-        """.formatted(LocalDate.now().plusDays(30));
+    var request = new CreateEventRequest()
+        .title("Minimal Event")
+        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
+        .timezone("UTC");
 
-    mockMvc.perform(post("/api/events")
+    var result = mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
+            .content(objectMapper.writeValueAsString(request)))
         .andExpect(status().isCreated())
         .andExpect(jsonPath("$.eventToken").isNotEmpty())
         .andExpect(jsonPath("$.organizerToken").isNotEmpty())
-        .andExpect(jsonPath("$.title").value("Minimal Event"));
+        .andExpect(jsonPath("$.title").value("Minimal Event"))
+        .andReturn();
+
+    var response = objectMapper.readValue(
+        result.getResponse().getContentAsString(), CreateEventResponse.class);
+
+    EventJpaEntity persisted = jpaRepository
+        .findByEventToken(response.getEventToken()).orElseThrow();
+    assertThat(persisted.getTitle()).isEqualTo("Minimal Event");
+    assertThat(persisted.getDescription()).isNull();
+    assertThat(persisted.getLocation()).isNull();
   }
 
   @Test
   void createEventMissingTitleReturns400() throws Exception {
-    String body =
-        """
-        {
-          "dateTime": "2026-06-15T20:00:00+02:00",
-          "expiryDate": "%s"
-        }
-        """.formatted(LocalDate.now().plusDays(30));
+    long countBefore = jpaRepository.count();
+
+    var request = new CreateEventRequest()
+        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
+        .timezone("Europe/Berlin");
 
     mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
+            .content(objectMapper.writeValueAsString(request)))
         .andExpect(status().isBadRequest())
         .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
         .andExpect(jsonPath("$.title").value("Validation Failed"))
         .andExpect(jsonPath("$.fieldErrors").isArray());
+
+    assertThat(jpaRepository.count()).isEqualTo(countBefore);
   }
 
   @Test
   void createEventMissingDateTimeReturns400() throws Exception {
-    String body =
-        """
-        {
-          "title": "No Date",
-          "expiryDate": "%s"
-        }
-        """.formatted(LocalDate.now().plusDays(30));
+    long countBefore = jpaRepository.count();
+
+    var request = new CreateEventRequest()
+        .title("No Date")
+        .timezone("Europe/Berlin");
 
     mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
+            .content(objectMapper.writeValueAsString(request)))
         .andExpect(status().isBadRequest())
         .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
         .andExpect(jsonPath("$.fieldErrors").isArray());
-  }
 
-  @Test
-  void createEventMissingExpiryDateReturns400() throws Exception {
-    String body =
-        """
-        {
-          "title": "No Expiry",
-          "dateTime": "2026-06-15T20:00:00+02:00"
-        }
-        """;
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.fieldErrors").isArray());
-  }
-
-  @Test
-  void createEventExpiryDateInPastReturns400() throws Exception {
-    String body =
-        """
-        {
-          "title": "Past Expiry",
-          "dateTime": "2026-06-15T20:00:00+02:00",
-          "expiryDate": "2025-01-01"
-        }
-        """;
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.type").value("urn:problem-type:expiry-date-in-past"));
-  }
-
-  @Test
-  void createEventExpiryDateTodayReturns400() throws Exception {
-    String body =
-        """
-        {
-          "title": "Today Expiry",
-          "dateTime": "2026-06-15T20:00:00+02:00",
-          "expiryDate": "%s"
-        }
-        """.formatted(LocalDate.now());
-
-    mockMvc.perform(post("/api/events")
-            .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
-        .andExpect(status().isBadRequest())
-        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
-        .andExpect(jsonPath("$.type").value("urn:problem-type:expiry-date-in-past"));
+    assertThat(jpaRepository.count()).isEqualTo(countBefore);
   }
 
   @Test
   void errorResponseContentTypeIsProblemJson() throws Exception {
-    String body =
-        """
-        {
-          "title": "",
-          "dateTime": "2026-06-15T20:00:00+02:00",
-          "expiryDate": "%s"
-        }
-        """.formatted(LocalDate.now().plusDays(30));
+    var request = new CreateEventRequest()
+        .title("")
+        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
+        .timezone("Europe/Berlin");
 
     mockMvc.perform(post("/api/events")
             .contentType(MediaType.APPLICATION_JSON)
-            .content(body))
+            .content(objectMapper.writeValueAsString(request)))
         .andExpect(status().isBadRequest())
         .andExpect(content().contentTypeCompatibleWith("application/problem+json"));
   }
+
+  @Test
+  void createEventWithInvalidTimezoneReturns400() throws Exception {
+    long countBefore = jpaRepository.count();
+
+    var request = new CreateEventRequest()
+        .title("Bad TZ")
+        .dateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)))
+        .timezone("Not/A/Zone");
+
+    mockMvc.perform(post("/api/events")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isBadRequest())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:invalid-timezone"));
+
+    assertThat(jpaRepository.count()).isEqualTo(countBefore);
+  }
+
+  // --- GET /events/{token} tests ---
+
+  @Test
+  void getEventReturnsFullResponse() throws Exception {
+    EventJpaEntity entity = seedEvent(
+        "Summer BBQ", "Bring drinks!", "Europe/Berlin",
+        "Central Park", LocalDate.now().plusDays(30));
+
+    mockMvc.perform(get("/api/events/" + entity.getEventToken()))
+        .andExpect(status().isOk())
+        .andExpect(jsonPath("$.eventToken").value(entity.getEventToken().toString()))
+        .andExpect(jsonPath("$.title").value("Summer BBQ"))
+        .andExpect(jsonPath("$.description").value("Bring drinks!"))
+        .andExpect(jsonPath("$.timezone").value("Europe/Berlin"))
+        .andExpect(jsonPath("$.location").value("Central Park"))
+        .andExpect(jsonPath("$.attendeeCount").value(0))
+        .andExpect(jsonPath("$.dateTime").isNotEmpty());
+  }
+
+  @Test
+  void getEventWithOptionalFieldsAbsent() throws Exception {
+    EventJpaEntity entity = seedEvent(
+        "Minimal", null, "UTC", null, LocalDate.now().plusDays(30));
+
+    mockMvc.perform(get("/api/events/" + entity.getEventToken()))
+        .andExpect(status().isOk())
+        .andExpect(jsonPath("$.title").value("Minimal"))
+        .andExpect(jsonPath("$.description").doesNotExist())
+        .andExpect(jsonPath("$.location").doesNotExist())
+        .andExpect(jsonPath("$.attendeeCount").value(0));
+  }
+
+  @Test
+  void getEventNotFoundReturns404() throws Exception {
+    mockMvc.perform(get("/api/events/" + UUID.randomUUID()))
+        .andExpect(status().isNotFound())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:event-not-found"));
+  }
+
+  // --- RSVP tests ---
+
+  @Test
+  void createRsvpReturns201WithToken() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "RSVP Event", "Join us!", "Europe/Berlin",
+        "Berlin", LocalDate.now().plusDays(30));
+
+    var request = new CreateRsvpRequest().name("Max Mustermann");
+
+    var result = mockMvc.perform(post("/api/events/" + event.getEventToken() + "/rsvps")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isCreated())
+        .andExpect(jsonPath("$.rsvpToken").isNotEmpty())
+        .andExpect(jsonPath("$.name").value("Max Mustermann"))
+        .andReturn();
+
+    var response = objectMapper.readValue(
+        result.getResponse().getContentAsString(), CreateRsvpResponse.class);
+
+    RsvpJpaEntity persisted = rsvpJpaRepository
+        .findByRsvpToken(response.getRsvpToken()).orElseThrow();
+    assertThat(persisted.getName()).isEqualTo("Max Mustermann");
+    assertThat(persisted.getEventId()).isEqualTo(event.getId());
+  }
+
+  @Test
+  void createRsvpWithBlankNameReturns400() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "RSVP Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+    long countBefore = rsvpJpaRepository.count();
+
+    var request = new CreateRsvpRequest().name("");
+
+    mockMvc.perform(post("/api/events/" + event.getEventToken() + "/rsvps")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isBadRequest())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"));
+
+    assertThat(rsvpJpaRepository.count()).isEqualTo(countBefore);
+  }
+
+  @Test
+  void attendeeCountIncreasesAfterRsvp() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Count Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(jsonPath("$.attendeeCount").value(0));
+
+    var request = new CreateRsvpRequest().name("First Guest");
+
+    mockMvc.perform(post("/api/events/" + event.getEventToken() + "/rsvps")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isCreated());
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(jsonPath("$.attendeeCount").value(1));
+  }
+
+  @Test
+  void createRsvpForUnknownEventReturns404() throws Exception {
+    long countBefore = rsvpJpaRepository.count();
+
+    var request = new CreateRsvpRequest().name("Ghost");
+
+    mockMvc.perform(post("/api/events/" + UUID.randomUUID() + "/rsvps")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isNotFound())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:event-not-found"));
+
+    assertThat(rsvpJpaRepository.count()).isEqualTo(countBefore);
+  }
+
+  @Test
+  void createRsvpForExpiredEventReturns409() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Expired Party", null, "Europe/Berlin",
+        null, LocalDate.now().minusDays(1));
+    long countBefore = rsvpJpaRepository.count();
+
+    var request = new CreateRsvpRequest().name("Late Guest");
+
+    mockMvc.perform(post("/api/events/" + event.getEventToken() + "/rsvps")
+            .contentType(MediaType.APPLICATION_JSON)
+            .content(objectMapper.writeValueAsString(request)))
+        .andExpect(status().isConflict())
+        .andExpect(content().contentTypeCompatibleWith("application/problem+json"))
+        .andExpect(jsonPath("$.type").value("urn:problem-type:event-expired"));
+
+    assertThat(rsvpJpaRepository.count()).isEqualTo(countBefore);
+  }
+
+  // --- GET /events/{token}/attendees tests ---
+
+  @Test
+  void getAttendeesReturnsNamesForOrganizer() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null, "Europe/Berlin", null,
+        LocalDate.now().plusDays(30));
+    seedRsvp(event, "Alice");
+    seedRsvp(event, "Bob");
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()
+            + "/attendees?organizerToken=" + event.getOrganizerToken()))
+        .andExpect(status().isOk())
+        .andExpect(jsonPath("$.attendees").isArray())
+        .andExpect(jsonPath("$.attendees.length()").value(2))
+        .andExpect(jsonPath("$.attendees[0].name").value("Alice"))
+        .andExpect(jsonPath("$.attendees[1].name").value("Bob"));
+  }
+
+  @Test
+  void getAttendeesReturnsEmptyListWhenNoRsvps() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Empty Party", null, "Europe/Berlin", null,
+        LocalDate.now().plusDays(30));
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()
+            + "/attendees?organizerToken=" + event.getOrganizerToken()))
+        .andExpect(status().isOk())
+        .andExpect(jsonPath("$.attendees").isArray())
+        .andExpect(jsonPath("$.attendees.length()").value(0));
+  }
+
+  @Test
+  void getAttendeesReturns403ForInvalidOrganizerToken() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Secret Party", null, "Europe/Berlin", null,
+        LocalDate.now().plusDays(30));
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()
+            + "/attendees?organizerToken=" + UUID.randomUUID()))
+        .andExpect(status().isForbidden())
+        .andExpect(content().contentTypeCompatibleWith(
+            "application/problem+json"));
+  }
+
+  @Test
+  void getAttendeesReturns404ForUnknownEvent() throws Exception {
+    mockMvc.perform(get("/api/events/" + UUID.randomUUID()
+            + "/attendees?organizerToken=" + UUID.randomUUID()))
+        .andExpect(status().isNotFound())
+        .andExpect(content().contentTypeCompatibleWith(
+            "application/problem+json"));
+  }
+
+  // --- Cancel RSVP tests ---
+
+  @Test
+  void cancelRsvpReturns204AndDeletesRow() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Cancel Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+    UUID rsvpToken = seedRsvpAndGetToken(event, "Departing Guest");
+
+    long countBefore = rsvpJpaRepository.count();
+
+    mockMvc.perform(delete("/api/events/" + event.getEventToken()
+            + "/rsvps/" + rsvpToken))
+        .andExpect(status().isNoContent());
+
+    assertThat(rsvpJpaRepository.count()).isEqualTo(countBefore - 1);
+    assertThat(rsvpJpaRepository.findByRsvpToken(rsvpToken)).isEmpty();
+  }
+
+  @Test
+  void cancelRsvpReturns204WhenAlreadyDeleted() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Idempotent Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+
+    mockMvc.perform(delete("/api/events/" + event.getEventToken()
+            + "/rsvps/" + UUID.randomUUID()))
+        .andExpect(status().isNoContent());
+  }
+
+  @Test
+  void cancelRsvpReturns204WhenEventNotFound() throws Exception {
+    mockMvc.perform(delete("/api/events/" + UUID.randomUUID()
+            + "/rsvps/" + UUID.randomUUID()))
+        .andExpect(status().isNoContent());
+  }
+
+  @Test
+  void attendeeCountDecreasesAfterCancelRsvp() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Count Cancel Event", null, "Europe/Berlin",
+        null, LocalDate.now().plusDays(30));
+    UUID rsvpToken = seedRsvpAndGetToken(event, "Leaving Guest");
+    seedRsvp(event, "Staying Guest");
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(jsonPath("$.attendeeCount").value(2));
+
+    mockMvc.perform(delete("/api/events/" + event.getEventToken()
+            + "/rsvps/" + rsvpToken))
+        .andExpect(status().isNoContent());
+
+    mockMvc.perform(get("/api/events/" + event.getEventToken()))
+        .andExpect(jsonPath("$.attendeeCount").value(1));
+  }
+
+  private UUID seedRsvpAndGetToken(EventJpaEntity event, String name) {
+    var rsvp = new RsvpJpaEntity();
+    UUID token = UUID.randomUUID();
+    rsvp.setRsvpToken(token);
+    rsvp.setEventId(event.getId());
+    rsvp.setName(name);
+    rsvpJpaRepository.save(rsvp);
+    return token;
+  }
+
+  private void seedRsvp(EventJpaEntity event, String name) {
+    var rsvp = new RsvpJpaEntity();
+    rsvp.setRsvpToken(UUID.randomUUID());
+    rsvp.setEventId(event.getId());
+    rsvp.setName(name);
+    rsvpJpaRepository.save(rsvp);
+  }
+
+  private EventJpaEntity seedEvent(
+      String title, String description, String timezone,
+      String location, LocalDate expiryDate) {
+    var entity = new EventJpaEntity();
+    entity.setEventToken(UUID.randomUUID());
+    entity.setOrganizerToken(UUID.randomUUID());
+    entity.setTitle(title);
+    entity.setDescription(description);
+    entity.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    entity.setTimezone(timezone);
+    entity.setLocation(location);
+    entity.setExpiryDate(expiryDate);
+    entity.setCreatedAt(OffsetDateTime.now());
+    return jpaRepository.save(entity);
+  }
 }

backend/src/test/java/de/fete/adapter/in/web/SpaControllerTest.java

@@ -0,0 +1,281 @@
+package de.fete.adapter.in.web;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import de.fete.TestcontainersConfig;
+import de.fete.adapter.out.persistence.EventJpaEntity;
+import de.fete.adapter.out.persistence.EventJpaRepository;
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.UUID;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.context.annotation.Import;
+import org.springframework.http.MediaType;
+import org.springframework.test.web.servlet.MockMvc;
+
+@SpringBootTest
+@AutoConfigureMockMvc
+@Import(TestcontainersConfig.class)
+class SpaControllerTest {
+
+  @Autowired
+  private MockMvc mockMvc;
+
+  @Autowired
+  private EventJpaRepository eventJpaRepository;
+
+  // --- Phase 2: Base functionality ---
+
+  @Test
+  void rootServesHtml() throws Exception {
+    mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  @Test
+  void rootHtmlDoesNotContainPlaceholder() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).doesNotContain("<!-- OG_META_TAGS -->");
+  }
+
+  @Test
+  void createRouteServesHtml() throws Exception {
+    mockMvc.perform(get("/create").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  @Test
+  void eventsRouteServesHtml() throws Exception {
+    mockMvc.perform(get("/events").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andExpect(content().contentTypeCompatibleWith(MediaType.TEXT_HTML));
+  }
+
+  // --- Phase 4 (US2): Generic OG meta-tags ---
+
+  @Test
+  void rootContainsGenericOgTitle() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("content=\"fete\"");
+  }
+
+  @Test
+  void createRouteContainsGenericOgDescription() throws Exception {
+    String html = mockMvc.perform(get("/create").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:description");
+    assertThat(html).contains("Privacy-focused event planning");
+  }
+
+  @Test
+  void unknownRouteReturns404() throws Exception {
+    mockMvc.perform(get("/unknown/path").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isNotFound());
+  }
+
+  // --- Phase 5 (US3): Twitter Card meta-tags ---
+
+  @Test
+  void eventRouteContainsTwitterCardTags() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Twitter Test", "Testing cards",
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("twitter:card");
+    assertThat(html).contains("twitter:title");
+    assertThat(html).contains("twitter:description");
+  }
+
+  @Test
+  void genericRouteContainsTwitterCardTags() throws Exception {
+    String html = mockMvc.perform(get("/").accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("twitter:card");
+    assertThat(html).contains("content=\"summary\"");
+  }
+
+  // --- Phase 3 (US1): Event-specific OG meta-tags ---
+
+  @Test
+  void eventRouteContainsEventSpecificOgTitle() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Birthday Party", "Come celebrate!",
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("Birthday Party");
+  }
+
+  @Test
+  void eventRouteContainsOgDescription() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "BBQ", "Bring drinks!",
+        "Europe/Berlin", "Central Park", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:description");
+    assertThat(html).contains("Central Park");
+    assertThat(html).contains("Bring drinks!");
+  }
+
+  @Test
+  void eventRouteContainsOgUrl() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null,
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:url");
+    assertThat(html).contains("/events/" + event.getEventToken());
+  }
+
+  @Test
+  void eventRouteContainsOgImage() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Party", null,
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:image");
+    assertThat(html).contains("/og-image.png");
+  }
+
+  @Test
+  void unknownEventTokenFallsBackToGenericMeta() throws Exception {
+    String html = mockMvc.perform(
+            get("/events/" + UUID.randomUUID()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("og:title");
+    assertThat(html).contains("content=\"fete\"");
+  }
+
+  // --- HTML escaping ---
+
+  @Test
+  void specialCharactersAreHtmlEscaped() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Tom & Jerry's \"Party\"", "Fun <times> & more",
+        "Europe/Berlin", "O'Brien's Pub", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("Tom &amp; Jerry");
+    assertThat(html).contains("&amp; more");
+    assertThat(html).contains("&lt;times&gt;");
+    assertThat(html).doesNotContain("content=\"Tom & Jerry");
+  }
+
+  // --- Title truncation ---
+
+  @Test
+  void longTitleIsTruncatedTo70Chars() throws Exception {
+    String longTitle = "A".repeat(80);
+    EventJpaEntity event = seedEvent(
+        longTitle, "Desc",
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("A".repeat(67) + "...");
+    assertThat(html).doesNotContain("A".repeat(68));
+  }
+
+  // --- Description formatting ---
+
+  @Test
+  void eventWithoutLocationOmitsPinEmoji() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Online Meetup", "Virtual gathering",
+        "Europe/Berlin", null, LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).doesNotContain("📍");
+  }
+
+  @Test
+  void eventWithoutDescriptionOmitsDash() throws Exception {
+    EventJpaEntity event = seedEvent(
+        "Silent Event", null,
+        "Europe/Berlin", "Berlin", LocalDate.now().plusDays(30));
+
+    String html = mockMvc.perform(
+            get("/events/" + event.getEventToken()).accept(MediaType.TEXT_HTML))
+        .andExpect(status().isOk())
+        .andReturn().getResponse().getContentAsString();
+
+    assertThat(html).contains("📅");
+    assertThat(html).contains("Berlin");
+    assertThat(html).doesNotContain(" — ");
+  }
+
+  private EventJpaEntity seedEvent(
+      String title, String description, String timezone,
+      String location, LocalDate expiryDate) {
+    var entity = new EventJpaEntity();
+    entity.setEventToken(UUID.randomUUID());
+    entity.setOrganizerToken(UUID.randomUUID());
+    entity.setTitle(title);
+    entity.setDescription(description);
+    entity.setDateTime(
+        OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    entity.setTimezone(timezone);
+    entity.setLocation(location);
+    entity.setExpiryDate(expiryDate);
+    entity.setCreatedAt(OffsetDateTime.now());
+    return eventJpaRepository.save(entity);
+  }
+}

backend/src/test/java/de/fete/adapter/out/persistence/EventPersistenceAdapterIntegrationTest.java

@@ -0,0 +1,81 @@
+package de.fete.adapter.out.persistence;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+import de.fete.TestcontainersConfig;
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+import de.fete.domain.port.out.EventRepository;
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneId;
+import java.time.ZoneOffset;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.context.annotation.Import;
+import org.springframework.transaction.annotation.Transactional;
+
+@SpringBootTest
+@Import(TestcontainersConfig.class)
+@Transactional
+class EventPersistenceAdapterIntegrationTest {
+
+  @Autowired
+  private EventRepository eventRepository;
+
+  @Test
+  void deleteExpiredRemovesExpiredEvents() {
+    Event expired = buildEvent("Expired Party", LocalDate.now().minusDays(1));
+    eventRepository.save(expired);
+
+    int deleted = eventRepository.deleteExpired();
+
+    assertThat(deleted).isGreaterThanOrEqualTo(1);
+  }
+
+  @Test
+  void deleteExpiredKeepsNonExpiredEvents() {
+    Event future = buildEvent("Future Party", LocalDate.now().plusDays(30));
+    Event saved = eventRepository.save(future);
+
+    eventRepository.deleteExpired();
+
+    assertThat(eventRepository.findByEventToken(saved.getEventToken())).isPresent();
+  }
+
+  @Test
+  void deleteExpiredKeepsEventsExpiringToday() {
+    Event today = buildEvent("Today Party", LocalDate.now());
+    Event saved = eventRepository.save(today);
+
+    eventRepository.deleteExpired();
+
+    assertThat(eventRepository.findByEventToken(saved.getEventToken())).isPresent();
+  }
+
+  @Test
+  void deleteExpiredReturnsZeroWhenNoneExpired() {
+    // Only save a future event
+    buildEvent("Future Only", LocalDate.now().plusDays(60));
+
+    int deleted = eventRepository.deleteExpired();
+
+    assertThat(deleted).isGreaterThanOrEqualTo(0);
+  }
+
+  private Event buildEvent(String title, LocalDate expiryDate) {
+    var event = new Event();
+    event.setEventToken(EventToken.generate());
+    event.setOrganizerToken(OrganizerToken.generate());
+    event.setTitle(title);
+    event.setDescription("Test description");
+    event.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    event.setTimezone(ZoneId.of("Europe/Berlin"));
+    event.setLocation("Test Location");
+    event.setExpiryDate(expiryDate);
+    event.setCreatedAt(OffsetDateTime.now());
+    return event;
+  }
+}

backend/src/test/java/de/fete/adapter/out/persistence/EventPersistenceAdapterTest.java

@@ -4,12 +4,14 @@ import static org.assertj.core.api.Assertions.assertThat;
 
 import de.fete.TestcontainersConfig;
 import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
 import de.fete.domain.port.out.EventRepository;
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
+import java.time.ZoneId;
 import java.time.ZoneOffset;
 import java.util.Optional;
-import java.util.UUID;
 import org.junit.jupiter.api.Test;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.context.SpringBootTest;
@@ -46,7 +48,7 @@ class EventPersistenceAdapterTest {
 
   @Test
   void findByUnknownEventTokenReturnsEmpty() {
-    Optional<Event> found = eventRepository.findByEventToken(UUID.randomUUID());
+    Optional<Event> found = eventRepository.findByEventToken(EventToken.generate());
 
     assertThat(found).isEmpty();
   }
@@ -60,11 +62,12 @@ class EventPersistenceAdapterTest {
         OffsetDateTime.of(2026, 3, 4, 12, 0, 0, 0, ZoneOffset.UTC);
 
     var event = new Event();
-    event.setEventToken(UUID.randomUUID());
-    event.setOrganizerToken(UUID.randomUUID());
+    event.setEventToken(EventToken.generate());
+    event.setOrganizerToken(OrganizerToken.generate());
     event.setTitle("Full Event");
     event.setDescription("A detailed description");
     event.setDateTime(dateTime);
+    event.setTimezone(ZoneId.of("Europe/Berlin"));
     event.setLocation("Berlin, Germany");
     event.setExpiryDate(expiryDate);
     event.setCreatedAt(createdAt);
@@ -77,6 +80,7 @@ class EventPersistenceAdapterTest {
     assertThat(found.getTitle()).isEqualTo("Full Event");
     assertThat(found.getDescription()).isEqualTo("A detailed description");
     assertThat(found.getDateTime().toInstant()).isEqualTo(dateTime.toInstant());
+    assertThat(found.getTimezone()).isEqualTo(ZoneId.of("Europe/Berlin"));
     assertThat(found.getLocation()).isEqualTo("Berlin, Germany");
     assertThat(found.getExpiryDate()).isEqualTo(expiryDate);
     assertThat(found.getCreatedAt().toInstant()).isEqualTo(createdAt.toInstant());
@@ -84,11 +88,12 @@ class EventPersistenceAdapterTest {
 
   private Event buildEvent() {
     var event = new Event();
-    event.setEventToken(UUID.randomUUID());
-    event.setOrganizerToken(UUID.randomUUID());
+    event.setEventToken(EventToken.generate());
+    event.setOrganizerToken(OrganizerToken.generate());
     event.setTitle("Test Event");
     event.setDescription("Test description");
     event.setDateTime(OffsetDateTime.now().plusDays(7));
+    event.setTimezone(ZoneId.of("Europe/Berlin"));
     event.setLocation("Somewhere");
     event.setExpiryDate(LocalDate.now().plusDays(30));
     event.setCreatedAt(OffsetDateTime.now());

backend/src/test/java/de/fete/application/service/EventServiceTest.java

@@ -1,7 +1,6 @@
 package de.fete.application.service;
 
 import static org.assertj.core.api.Assertions.assertThat;
-import static org.assertj.core.api.Assertions.assertThatThrownBy;
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
@@ -9,13 +8,14 @@ import static org.mockito.Mockito.when;
 
 import de.fete.domain.model.CreateEventCommand;
 import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
 import de.fete.domain.port.out.EventRepository;
 import java.time.Clock;
 import java.time.Instant;
 import java.time.LocalDate;
 import java.time.OffsetDateTime;
 import java.time.ZoneId;
-import java.time.ZoneOffset;
+import java.util.Optional;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
 import org.junit.jupiter.api.extension.ExtendWith;
@@ -30,6 +30,7 @@ class EventServiceTest {
   private static final Instant FIXED_INSTANT =
       LocalDate.of(2026, 3, 5).atStartOfDay(ZONE).toInstant();
   private static final Clock FIXED_CLOCK = Clock.fixed(FIXED_INSTANT, ZONE);
+  private static final LocalDate TODAY = LocalDate.ofInstant(FIXED_INSTANT, ZONE);
 
   @Mock
   private EventRepository eventRepository;
@@ -49,35 +50,20 @@ class EventServiceTest {
     var command = new CreateEventCommand(
         "Birthday Party",
         "Come celebrate!",
-        OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)),
-        "Berlin",
-        LocalDate.of(2026, 7, 15)
+        TODAY.plusDays(90).atStartOfDay(ZONE).toOffsetDateTime(),
+        ZONE,
+        "Berlin"
     );
 
     Event result = eventService.createEvent(command);
 
     assertThat(result.getTitle()).isEqualTo("Birthday Party");
     assertThat(result.getDescription()).isEqualTo("Come celebrate!");
+    assertThat(result.getTimezone()).isEqualTo(ZONE);
     assertThat(result.getLocation()).isEqualTo("Berlin");
     assertThat(result.getEventToken()).isNotNull();
     assertThat(result.getOrganizerToken()).isNotNull();
-    assertThat(result.getCreatedAt()).isEqualTo(OffsetDateTime.now(FIXED_CLOCK));
-  }
-
-  @Test
-  void eventTokenAndOrganizerTokenAreDifferent() {
-    when(eventRepository.save(any(Event.class)))
-        .thenAnswer(invocation -> invocation.getArgument(0));
-
-    var command = new CreateEventCommand(
-        "Test", null,
-        OffsetDateTime.now(FIXED_CLOCK).plusDays(1), null,
-        LocalDate.now(FIXED_CLOCK).plusDays(30)
-    );
-
-    Event result = eventService.createEvent(command);
-
-    assertThat(result.getEventToken()).isNotEqualTo(result.getOrganizerToken());
+    assertThat(result.getCreatedAt()).isEqualTo(OffsetDateTime.ofInstant(FIXED_INSTANT, ZONE));
   }
 
   @Test
@@ -87,8 +73,7 @@ class EventServiceTest {
 
     var command = new CreateEventCommand(
         "Test", null,
-        OffsetDateTime.now(FIXED_CLOCK).plusDays(1), null,
-        LocalDate.now(FIXED_CLOCK).plusDays(30)
+        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null
     );
 
     eventService.createEvent(command);
@@ -99,42 +84,64 @@ class EventServiceTest {
   }
 
   @Test
-  void expiryDateTodayThrowsException() {
+  void expiryDateIsEventDatePlusSevenDays() {
+    when(eventRepository.save(any(Event.class)))
+        .thenAnswer(invocation -> invocation.getArgument(0));
+
+    var eventDate = TODAY.plusDays(10);
     var command = new CreateEventCommand(
         "Test", null,
-        OffsetDateTime.now(FIXED_CLOCK).plusDays(1), null,
-        LocalDate.now(FIXED_CLOCK)
+        eventDate.atStartOfDay(ZONE).toOffsetDateTime(), ZONE, null
     );
 
-    assertThatThrownBy(() -> eventService.createEvent(command))
-        .isInstanceOf(ExpiryDateInPastException.class);
+    Event result = eventService.createEvent(command);
+
+    assertThat(result.getExpiryDate()).isEqualTo(eventDate.plusDays(7));
+  }
+
+  // --- GetEventUseCase tests (T004) ---
+
+  @Test
+  void getByEventTokenReturnsEvent() {
+    EventToken token = EventToken.generate();
+    var event = new Event();
+    event.setEventToken(token);
+    event.setTitle("Found Event");
+    when(eventRepository.findByEventToken(token))
+        .thenReturn(Optional.of(event));
+
+    Optional<Event> result = eventService.getByEventToken(token);
+
+    assertThat(result).isPresent();
+    assertThat(result.get().getTitle()).isEqualTo("Found Event");
   }
 
   @Test
-  void expiryDateInPastThrowsException() {
-    var command = new CreateEventCommand(
-        "Test", null,
-        OffsetDateTime.now(FIXED_CLOCK).plusDays(1), null,
-        LocalDate.now(FIXED_CLOCK).minusDays(5)
-    );
+  void getByEventTokenReturnsEmptyForUnknownToken() {
+    EventToken token = EventToken.generate();
+    when(eventRepository.findByEventToken(token))
+        .thenReturn(Optional.empty());
 
-    assertThatThrownBy(() -> eventService.createEvent(command))
-        .isInstanceOf(ExpiryDateInPastException.class);
+    Optional<Event> result = eventService.getByEventToken(token);
+
+    assertThat(result).isEmpty();
   }
 
+  // --- Timezone validation tests (T006) ---
+
   @Test
-  void expiryDateTomorrowSucceeds() {
+  void createEventWithValidTimezoneSucceeds() {
     when(eventRepository.save(any(Event.class)))
         .thenAnswer(invocation -> invocation.getArgument(0));
 
     var command = new CreateEventCommand(
         "Test", null,
-        OffsetDateTime.now(FIXED_CLOCK).plusDays(1), null,
-        LocalDate.now(FIXED_CLOCK).plusDays(1)
+        TODAY.plusDays(10).atStartOfDay(ZONE).toOffsetDateTime(),
+        ZoneId.of("America/New_York"), null
     );
 
     Event result = eventService.createEvent(command);
 
-    assertThat(result.getExpiryDate()).isEqualTo(LocalDate.of(2026, 3, 6));
+    assertThat(result.getTimezone()).isEqualTo(ZoneId.of("America/New_York"));
   }
 }

backend/src/test/java/de/fete/application/service/RsvpServiceTest.java

@@ -0,0 +1,241 @@
+package de.fete.application.service;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+import de.fete.domain.model.Event;
+import de.fete.domain.model.EventToken;
+import de.fete.domain.model.OrganizerToken;
+import de.fete.domain.model.Rsvp;
+import de.fete.domain.model.RsvpToken;
+import de.fete.domain.port.out.EventRepository;
+import de.fete.domain.port.out.RsvpRepository;
+import java.time.Clock;
+import java.time.Instant;
+import java.time.LocalDate;
+import java.time.OffsetDateTime;
+import java.time.ZoneId;
+import java.time.ZoneOffset;
+import java.util.List;
+import java.util.Optional;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.ArgumentCaptor;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+@ExtendWith(MockitoExtension.class)
+class RsvpServiceTest {
+
+  private static final ZoneId ZONE = ZoneId.of("Europe/Berlin");
+  private static final Instant NOW = Instant.parse("2026-03-08T12:00:00Z");
+  private static final Clock FIXED_CLOCK = Clock.fixed(NOW, ZONE);
+  private static final LocalDate TODAY = LocalDate.ofInstant(NOW, ZONE);
+
+  @Mock
+  private EventRepository eventRepository;
+
+  @Mock
+  private RsvpRepository rsvpRepository;
+
+  private RsvpService rsvpService;
+
+  @BeforeEach
+  void setUp() {
+    rsvpService = new RsvpService(eventRepository, rsvpRepository, FIXED_CLOCK);
+  }
+
+  @Test
+  void createRsvpSucceedsForActiveEvent() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.save(any(Rsvp.class)))
+        .thenAnswer(invocation -> invocation.getArgument(0));
+
+    Rsvp result = rsvpService.createRsvp(token, "Max Mustermann");
+
+    assertThat(result.getName()).isEqualTo("Max Mustermann");
+    assertThat(result.getRsvpToken()).isNotNull();
+    assertThat(result.getEventId()).isEqualTo(event.getId());
+  }
+
+  @Test
+  void createRsvpPersistsViaRepository() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.save(any(Rsvp.class)))
+        .thenAnswer(invocation -> invocation.getArgument(0));
+
+    rsvpService.createRsvp(token, "Test Guest");
+
+    ArgumentCaptor<Rsvp> captor = ArgumentCaptor.forClass(Rsvp.class);
+    verify(rsvpRepository).save(captor.capture());
+    assertThat(captor.getValue().getName()).isEqualTo("Test Guest");
+    assertThat(captor.getValue().getEventId()).isEqualTo(event.getId());
+  }
+
+  @Test
+  void createRsvpThrowsWhenEventNotFound() {
+    EventToken token = EventToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.empty());
+
+    assertThatThrownBy(() -> rsvpService.createRsvp(token, "Guest"))
+        .isInstanceOf(EventNotFoundException.class);
+  }
+
+  @Test
+  void createRsvpTrimsName() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.save(any(Rsvp.class)))
+        .thenAnswer(invocation -> invocation.getArgument(0));
+
+    Rsvp result = rsvpService.createRsvp(token, "  Max  ");
+
+    assertThat(result.getName()).isEqualTo("Max");
+  }
+
+  @Test
+  void createRsvpThrowsWhenEventExpired() {
+    var event = buildActiveEvent();
+    event.setExpiryDate(TODAY.minusDays(1));
+    EventToken token = event.getEventToken();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+
+    assertThatThrownBy(() -> rsvpService.createRsvp(token, "Late Guest"))
+        .isInstanceOf(EventExpiredException.class);
+  }
+
+  @Test
+  void createRsvpThrowsWhenEventExpiresToday() {
+    var event = buildActiveEvent();
+    event.setExpiryDate(TODAY);
+    EventToken token = event.getEventToken();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+
+    assertThatThrownBy(() -> rsvpService.createRsvp(token, "Late Guest"))
+        .isInstanceOf(EventExpiredException.class);
+  }
+
+  @Test
+  void getAttendeeNamesReturnsNamesInOrder() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    OrganizerToken orgToken = event.getOrganizerToken();
+    when(eventRepository.findByEventToken(token))
+        .thenReturn(Optional.of(event));
+    when(rsvpRepository.findByEventId(event.getId()))
+        .thenReturn(List.of(
+            buildRsvp(1L, "Alice"),
+            buildRsvp(2L, "Bob"),
+            buildRsvp(3L, "Charlie")));
+
+    List<String> names = rsvpService.getAttendeeNames(token, orgToken);
+
+    assertThat(names).containsExactly("Alice", "Bob", "Charlie");
+  }
+
+  @Test
+  void getAttendeeNamesReturnsEmptyListWhenNoRsvps() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    OrganizerToken orgToken = event.getOrganizerToken();
+    when(eventRepository.findByEventToken(token))
+        .thenReturn(Optional.of(event));
+    when(rsvpRepository.findByEventId(event.getId()))
+        .thenReturn(List.of());
+
+    List<String> names = rsvpService.getAttendeeNames(token, orgToken);
+
+    assertThat(names).isEmpty();
+  }
+
+  @Test
+  void getAttendeeNamesThrowsWhenEventNotFound() {
+    EventToken token = EventToken.generate();
+    OrganizerToken orgToken = OrganizerToken.generate();
+    when(eventRepository.findByEventToken(token))
+        .thenReturn(Optional.empty());
+
+    assertThatThrownBy(
+        () -> rsvpService.getAttendeeNames(token, orgToken))
+        .isInstanceOf(EventNotFoundException.class);
+  }
+
+  @Test
+  void getAttendeeNamesThrowsWhenOrganizerTokenInvalid() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    OrganizerToken wrongToken = OrganizerToken.generate();
+    when(eventRepository.findByEventToken(token))
+        .thenReturn(Optional.of(event));
+
+    assertThatThrownBy(
+        () -> rsvpService.getAttendeeNames(token, wrongToken))
+        .isInstanceOf(InvalidOrganizerTokenException.class);
+  }
+
+  private Rsvp buildRsvp(Long id, String name) {
+    var rsvp = new Rsvp();
+    rsvp.setId(id);
+    rsvp.setRsvpToken(RsvpToken.generate());
+    rsvp.setEventId(1L);
+    rsvp.setName(name);
+    return rsvp;
+  }
+
+  @Test
+  void cancelRsvpDeletesWhenEventAndRsvpExist() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    RsvpToken rsvpToken = RsvpToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken)).thenReturn(true);
+
+    rsvpService.cancelRsvp(token, rsvpToken);
+
+    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.getId(), rsvpToken);
+  }
+
+  @Test
+  void cancelRsvpSucceedsWhenRsvpNotFound() {
+    Event event = buildActiveEvent();
+    EventToken token = event.getEventToken();
+    RsvpToken rsvpToken = RsvpToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.of(event));
+    when(rsvpRepository.deleteByEventIdAndRsvpToken(event.getId(), rsvpToken)).thenReturn(false);
+
+    rsvpService.cancelRsvp(token, rsvpToken);
+
+    verify(rsvpRepository).deleteByEventIdAndRsvpToken(event.getId(), rsvpToken);
+  }
+
+  @Test
+  void cancelRsvpSucceedsWhenEventNotFound() {
+    EventToken token = EventToken.generate();
+    RsvpToken rsvpToken = RsvpToken.generate();
+    when(eventRepository.findByEventToken(token)).thenReturn(Optional.empty());
+
+    rsvpService.cancelRsvp(token, rsvpToken);
+  }
+
+  private Event buildActiveEvent() {
+    var event = new Event();
+    event.setId(1L);
+    event.setEventToken(EventToken.generate());
+    event.setOrganizerToken(OrganizerToken.generate());
+    event.setTitle("Test Event");
+    event.setDateTime(OffsetDateTime.of(2026, 6, 15, 20, 0, 0, 0, ZoneOffset.ofHours(2)));
+    event.setTimezone(ZONE);
+    event.setExpiryDate(TODAY.plusDays(30));
+    event.setCreatedAt(OffsetDateTime.now());
+    return event;
+  }
+}

backend/src/test/java/de/fete/config/WebConfigTest.java

@@ -29,8 +29,10 @@ class WebConfigTest {
 
   @Test
   void apiPrefixNotAccessibleWithoutIt() throws Exception {
-    // /events without /api prefix should not resolve to the API endpoint
-    mockMvc.perform(get("/events"))
-        .andExpect(status().isNotFound());
+    // /events without /api prefix should not resolve to the REST API endpoint;
+    // it is served by SpaController as HTML instead
+    mockMvc.perform(get("/events")
+            .accept("text/html"))
+        .andExpect(status().isOk());
   }
 }

backend/src/test/resources/static/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!-- OG_META_TAGS -->
+    <title>fete</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

frontend/e2e/cancel-rsvp.spec.ts

@@ -0,0 +1,276 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+}
+
+const rsvpToken = 'd4e5f6a7-b8c9-0123-4567-890abcdef012'
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function rsvpSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    rsvpToken,
+    rsvpName: 'Anna',
+  }
+}
+
+test.describe('US1: Cancel RSVP from Event Detail View', () => {
+  test('status bar shows cancel affordance when RSVP\'d', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Status bar visible
+    const statusBar = page.getByRole('button', { name: /You're attending/ })
+    await expect(statusBar).toBeVisible()
+
+    // Cancel button hidden initially
+    await expect(page.getByRole('button', { name: 'Cancel attendance' })).not.toBeVisible()
+  })
+
+  test('tapping status bar reveals cancel button', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Tap status bar
+    await page.getByRole('button', { name: /You're attending/ }).click()
+
+    // Cancel button appears
+    await expect(page.getByRole('button', { name: 'Cancel attendance' })).toBeVisible()
+  })
+
+  test('confirm cancellation → localStorage cleared, count decremented, bar reset', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Expand → Cancel attendance → Confirm in dialog
+    await page.getByRole('button', { name: /You're attending/ }).click()
+    await page.locator('.rsvp-bar__cancel').click()
+
+    // Confirm dialog
+    await expect(page.getByText('Your attendance will be permanently cancelled.')).toBeVisible()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+
+    // Bar resets to CTA state
+    await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
+    await expect(page.getByText("You're attending!")).not.toBeVisible()
+
+    // Attendee count decremented
+    await expect(page.getByText('11 going')).toBeVisible()
+
+    // localStorage cleared
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    const event = stored?.find((e: StoredEvent) => e.eventToken === fullEvent.eventToken)
+    expect(event?.rsvpToken).toBeUndefined()
+    expect(event?.rsvpName).toBeUndefined()
+  })
+
+  test('server error → error message, state unchanged', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'fail' }, { status: 500 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Expand → Cancel → Confirm in dialog
+    await page.getByRole('button', { name: /You're attending/ }).click()
+    await page.locator('.rsvp-bar__cancel').click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+
+    // Error message
+    await expect(page.getByText('Could not cancel RSVP. Please try again.')).toBeVisible()
+
+    // Attendee count unchanged
+    await expect(page.getByText('12 going')).toBeVisible()
+  })
+
+  test('re-RSVP after cancel works', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+      http.post('*/api/events/:token/rsvps', () => {
+        return HttpResponse.json(
+          { rsvpToken: 'new-rsvp-token', name: 'Max' },
+          { status: 201 },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Cancel first
+    await page.getByRole('button', { name: /You're attending/ }).click()
+    await page.locator('.rsvp-bar__cancel').click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+
+    // CTA should be back
+    await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
+
+    // Re-RSVP
+    await page.getByRole('button', { name: "I'm attending" }).click()
+    const dialog = page.getByRole('dialog', { name: 'RSVP' })
+    await dialog.getByLabel('Your name').fill('Max')
+    await dialog.getByRole('button', { name: 'Count me in' }).click()
+
+    // Status bar returns
+    await expect(page.getByText("You're attending!")).toBeVisible()
+  })
+})
+
+test.describe('US2: Auto-Cancel on Event List Removal', () => {
+  test('removal of RSVP\'d event shows attendance warning in dialog', async ({ page }) => {
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+
+    await expect(page.getByText('your attendance will be cancelled')).toBeVisible()
+  })
+
+  test('removal of non-RSVP\'d event shows standard dialog', async ({ page }) => {
+    const noRsvp: StoredEvent = {
+      eventToken: 'no-rsvp-token',
+      title: 'No RSVP Event',
+      dateTime: '2027-06-15T18:00:00Z',
+      organizerToken: 'org-123',
+    }
+    await page.addInitScript(seedEvents([noRsvp]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove No RSVP Event/ }).click()
+
+    await expect(page.getByText('This event will be removed from your list.')).toBeVisible()
+    await expect(page.getByText('attendance will be cancelled')).not.toBeVisible()
+  })
+
+  test('confirm removal → DELETE called → event removed from list', async ({ page, network }) => {
+    network.use(
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event gone
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+
+    // localStorage updated
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    const found = stored?.find((e: StoredEvent) => e.eventToken === fullEvent.eventToken)
+    expect(found).toBeUndefined()
+  })
+
+  test('server error on DELETE → error message, event stays in list', async ({ page, network }) => {
+    network.use(
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'fail' }, { status: 500 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event still in list
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+
+  test('dismiss dialog → no changes', async ({ page }) => {
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    // Event still there
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+})
+
+test.describe('US3: Cancel RSVP with Stale/Invalid Token', () => {
+  test('cancel from detail view with stale token (404) → treated as success', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'not found' }, { status: 404 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Cancel flow
+    await page.getByRole('button', { name: /You're attending/ }).click()
+    await page.locator('.rsvp-bar__cancel').click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+
+    // Treated as success — CTA returns
+    await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
+
+    // localStorage cleaned
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    const event = stored?.find((e: StoredEvent) => e.eventToken === fullEvent.eventToken)
+    expect(event?.rsvpToken).toBeUndefined()
+  })
+
+  test('event list removal with stale token (404) → treated as success', async ({ page, network }) => {
+    network.use(
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return HttpResponse.json({ error: 'not found' }, { status: 404 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event removed from list
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+})

frontend/e2e/event-create.spec.ts

@@ -9,22 +9,19 @@ test.describe('US-1: Create an event', () => {
 
     await expect(page.getByText('Title is required.')).toBeVisible()
     await expect(page.getByText('Date and time are required.')).toBeVisible()
-    await expect(page.getByText('Expiry date is required.')).toBeVisible()
   })
 
-  test('creates an event and redirects to stub page', async ({ page }) => {
+  test('creates an event and redirects to event detail page', async ({ page }) => {
     await page.goto('/create')
 
     await page.getByLabel(/title/i).fill('Summer BBQ')
     await page.getByLabel(/description/i).fill('Bring your own drinks')
     await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
     await page.getByLabel(/location/i).fill('Central Park')
-    await page.getByLabel(/expiry/i).fill('2026-06-15')
 
     await page.getByRole('button', { name: /create event/i }).click()
 
     await expect(page).toHaveURL(/\/events\/.+/)
-    await expect(page.getByText('Event created!')).toBeVisible()
   })
 
   test('stores event data in localStorage after creation', async ({ page }) => {
@@ -32,7 +29,6 @@ test.describe('US-1: Create an event', () => {
 
     await page.getByLabel(/title/i).fill('Summer BBQ')
     await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
-    await page.getByLabel(/expiry/i).fill('2026-06-15')
 
     await page.getByRole('button', { name: /create event/i }).click()
     await expect(page).toHaveURL(/\/events\/.+/)
@@ -60,7 +56,6 @@ test.describe('US-1: Create an event', () => {
     await page.goto('/create')
     await page.getByLabel(/title/i).fill('Test')
     await page.getByLabel(/date/i).first().fill('2026-04-15T18:00')
-    await page.getByLabel(/expiry/i).fill('2026-06-15')
 
     await page.getByRole('button', { name: /create event/i }).click()
 

frontend/e2e/event-rsvp.spec.ts

@@ -0,0 +1,172 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+}
+
+test.describe('US1: RSVP submission flow', () => {
+  test('submits RSVP, updates attendee count, and persists in localStorage', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+      http.post('*/api/events/:token/rsvps', () => {
+        return HttpResponse.json(
+          { rsvpToken: 'd4e5f6a7-b8c9-0123-4567-890abcdef012', name: 'Max Mustermann' },
+          { status: 201 },
+        )
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // CTA is visible
+    const cta = page.getByRole('button', { name: "I'm attending" })
+    await expect(cta).toBeVisible()
+
+    // Open bottom sheet
+    await cta.click()
+    const dialog = page.getByRole('dialog', { name: 'RSVP' })
+    await expect(dialog).toBeVisible()
+
+    // Fill name and submit
+    await dialog.getByLabel('Your name').fill('Max Mustermann')
+    await dialog.getByRole('button', { name: 'Count me in' }).click()
+
+    // Bottom sheet closes, status bar appears
+    await expect(dialog).not.toBeVisible()
+    await expect(page.getByText("You're attending!")).toBeVisible()
+    await expect(cta).not.toBeVisible()
+
+    // Attendee count incremented
+    await expect(page.getByText('13')).toBeVisible()
+
+    // Verify localStorage
+    const stored = await page.evaluate(() => {
+      const raw = localStorage.getItem('fete:events')
+      return raw ? JSON.parse(raw) : null
+    })
+    expect(stored).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+          rsvpToken: 'd4e5f6a7-b8c9-0123-4567-890abcdef012',
+          rsvpName: 'Max Mustermann',
+        }),
+      ]),
+    )
+  })
+
+  test('shows validation error when name is empty', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+    await page.getByRole('button', { name: "I'm attending" }).click()
+
+    const dialog = page.getByRole('dialog', { name: 'RSVP' })
+    await dialog.getByRole('button', { name: 'Count me in' }).click()
+
+    await expect(page.getByText('Please enter your name.')).toBeVisible()
+  })
+
+  test('restores RSVP status from localStorage on page load', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    // Pre-seed localStorage
+    await page.goto('/')
+    await page.evaluate(() => {
+      localStorage.setItem(
+        'fete:events',
+        JSON.stringify([
+          {
+            eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+            title: 'Summer BBQ',
+            dateTime: '2026-03-15T20:00:00+01:00',
+            expiryDate: '',
+            rsvpToken: 'existing-rsvp-token',
+            rsvpName: 'Anna',
+          },
+        ]),
+      )
+    })
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Status bar should show, not CTA
+    await expect(page.getByText("You're attending!")).toBeVisible()
+    await expect(page.getByRole('button', { name: "I'm attending" })).not.toBeVisible()
+  })
+
+  test('shows error when server is unreachable during RSVP', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+      http.post('*/api/events/:token/rsvps', () => {
+        return HttpResponse.json(
+          { type: 'about:blank', title: 'Bad Request', status: 400 },
+          { status: 400, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+    await page.getByRole('button', { name: "I'm attending" }).click()
+
+    const dialog = page.getByRole('dialog', { name: 'RSVP' })
+    await dialog.getByLabel('Your name').fill('Max')
+    await dialog.getByRole('button', { name: 'Count me in' }).click()
+
+    await expect(page.getByText('Could not submit RSVP. Please try again.')).toBeVisible()
+  })
+
+  test('does not show RSVP bar for organizer', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    // Pre-seed localStorage with organizer token
+    await page.goto('/')
+    await page.evaluate(() => {
+      localStorage.setItem(
+        'fete:events',
+        JSON.stringify([
+          {
+            eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+            organizerToken: 'org-token-123',
+            title: 'Summer BBQ',
+            dateTime: '2026-03-15T20:00:00+01:00',
+            expiryDate: '',
+          },
+        ]),
+      )
+    })
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Event content should load
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+
+    // But no RSVP bar
+    await expect(page.getByRole('button', { name: "I'm attending" })).not.toBeVisible()
+    await expect(page.getByText("You're attending!")).not.toBeVisible()
+  })
+
+})

frontend/e2e/event-view.spec.ts

@@ -0,0 +1,112 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+}
+
+test.describe('US-1: View event details', () => {
+  test('displays all event fields for a valid event', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+    await expect(page.getByText('Bring your own drinks!')).toBeVisible()
+    await expect(page.getByText('Central Park, NYC')).toBeVisible()
+    await expect(page.getByText('12')).toBeVisible()
+    await expect(page.getByText('Europe/Berlin')).toBeVisible()
+    await expect(page.getByText('2026')).toBeVisible()
+  })
+
+  test('does not load external resources', async ({ page, network }) => {
+    const externalRequests: string[] = []
+    page.on('request', (req) => {
+      const url = new URL(req.url())
+      if (!['localhost', '127.0.0.1'].includes(url.hostname)) {
+        externalRequests.push(req.url())
+      }
+    })
+
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+
+    expect(externalRequests).toEqual([])
+  })
+})
+
+test.describe('US-4: Event not found', () => {
+  test('shows "event not found" for unknown token', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(
+          { type: 'urn:problem-type:event-not-found', title: 'Event Not Found', status: 404, detail: 'Event not found.' },
+          { status: 404, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto('/events/00000000-0000-0000-0000-000000000000')
+
+    await expect(page.getByText('Event not found.')).toBeVisible()
+    // No event data visible
+    await expect(page.locator('.detail__title')).not.toBeVisible()
+  })
+})
+
+test.describe('Server error', () => {
+  test('shows error message and retry button on 500', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(
+          { type: 'about:blank', title: 'Internal Server Error', status: 500, detail: 'An unexpected error occurred.' },
+          { status: 500, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    await expect(page.getByText('Something went wrong.')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Retry' })).toBeVisible()
+  })
+
+  test('retry button re-fetches the event', async ({ page, network }) => {
+    let callCount = 0
+    network.use(
+      http.get('*/api/events/:token', () => {
+        callCount++
+        if (callCount === 1) {
+          return HttpResponse.json(
+            { type: 'about:blank', title: 'Error', status: 500 },
+            { status: 500, headers: { 'Content-Type': 'application/problem+json' } },
+          )
+        }
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    await page.goto(`/events/${fullEvent.eventToken}`)
+    await expect(page.getByText('Something went wrong.')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Retry' }).click()
+
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+  })
+})

frontend/e2e/home-events.spec.ts

@@ -0,0 +1,368 @@
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const futureEvent1: StoredEvent = {
+  eventToken: 'future-aaa',
+  title: 'Summer BBQ',
+  dateTime: '2027-06-15T18:00:00Z',
+  organizerToken: 'org-token-1',
+}
+
+const futureEvent2: StoredEvent = {
+  eventToken: 'future-bbb',
+  title: 'Team Meeting',
+  dateTime: '2027-01-10T09:00:00Z',
+  rsvpToken: 'rsvp-token-1',
+  rsvpName: 'Alice',
+}
+
+const pastEvent: StoredEvent = {
+  eventToken: 'past-ccc',
+  title: 'New Year Party',
+  dateTime: '2025-01-01T00:00:00Z',
+}
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+test.describe('US2: Empty State', () => {
+  test('shows empty state when no events are stored', async ({ page }) => {
+    await page.goto('/')
+
+    await expect(page.getByText('No events yet')).toBeVisible()
+    await expect(page.getByRole('link', { name: /Create Event/ })).toBeVisible()
+  })
+
+  test('empty state links to create page', async ({ page }) => {
+    await page.goto('/')
+
+    const link = page.getByRole('link', { name: /Create Event/ })
+    await expect(link).toHaveAttribute('href', '/create')
+  })
+
+  test('empty state is hidden when events exist', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    await expect(page.getByText('No events yet')).not.toBeVisible()
+  })
+})
+
+test.describe('US4: Past Events Appear Faded', () => {
+  test('past events have the faded modifier class', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1, pastEvent]))
+    await page.goto('/')
+
+    const cards = page.locator('.event-card')
+    await expect(cards).toHaveCount(2)
+
+    // Future event should NOT have past class
+    const futureCard = cards.filter({ hasText: 'Summer BBQ' })
+    await expect(futureCard).not.toHaveClass(/event-card--past/)
+
+    // Past event should have past class
+    const pastCard = cards.filter({ hasText: 'New Year Party' })
+    await expect(pastCard).toHaveClass(/event-card--past/)
+  })
+
+  test('past events remain clickable', async ({ page, network }) => {
+    await page.addInitScript(seedEvents([pastEvent]))
+
+    const { http, HttpResponse } = await import('msw')
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json({
+          eventToken: pastEvent.eventToken,
+          title: pastEvent.title,
+          dateTime: pastEvent.dateTime,
+          description: '',
+          location: '',
+          timezone: 'UTC',
+          attendeeCount: 0,
+        })
+      }),
+    )
+
+    await page.goto('/')
+    await page.getByText('New Year Party').click()
+    await expect(page).toHaveURL(`/events/${pastEvent.eventToken}`)
+  })
+})
+
+test.describe('US3: Remove Event from List', () => {
+  test('delete icon triggers confirmation dialog, confirm removes event', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1, futureEvent2]))
+    await page.goto('/')
+
+    // Both events visible
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+    await expect(page.getByText('Team Meeting')).toBeVisible()
+
+    // Click delete on Summer BBQ
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+
+    // Confirmation dialog appears
+    await expect(page.getByText('Remove event?')).toBeVisible()
+
+    // Confirm removal
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event is gone, other remains
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+    await expect(page.getByText('Team Meeting')).toBeVisible()
+  })
+
+  test('cancel keeps the event in the list', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await expect(page.getByText('Remove event?')).toBeVisible()
+
+    // Cancel
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    // Dialog gone, event still there
+    await expect(page.getByText('Remove event?')).not.toBeVisible()
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+})
+
+test.describe('US5: Visual Distinction for Event Roles', () => {
+  test('shows organizer badge for events with organizerToken', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    const card = page.locator('.event-card').filter({ hasText: 'Summer BBQ' })
+    const badge = card.locator('.event-card__badge')
+    await expect(badge).toBeVisible()
+    await expect(badge).toHaveText('Organizer')
+    await expect(badge).toHaveClass(/event-card__badge--organizer/)
+  })
+
+  test('shows attendee badge for events with rsvpToken only', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent2]))
+    await page.goto('/')
+
+    const card = page.locator('.event-card').filter({ hasText: 'Team Meeting' })
+    const badge = card.locator('.event-card__badge')
+    await expect(badge).toBeVisible()
+    await expect(badge).toHaveText('Attendee')
+    await expect(badge).toHaveClass(/event-card__badge--attendee/)
+  })
+
+  test('shows no badge for events without organizerToken or rsvpToken', async ({ page }) => {
+    await page.addInitScript(seedEvents([pastEvent]))
+    await page.goto('/')
+
+    const card = page.locator('.event-card').filter({ hasText: 'New Year Party' })
+    await expect(card.locator('.event-card__badge')).toHaveCount(0)
+  })
+})
+
+test.describe('FAB: Create Event Button', () => {
+  test('FAB is visible when events exist', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    const fab = page.getByRole('link', { name: 'Create event' })
+    await expect(fab).toBeVisible()
+  })
+
+  test('FAB navigates to create page', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    const fab = page.getByRole('link', { name: 'Create event' })
+    await expect(fab).toHaveAttribute('href', '/create')
+  })
+
+  test('FAB is not visible on empty state (empty state has its own CTA)', async ({ page }) => {
+    await page.goto('/')
+
+    await expect(page.locator('.fab')).toHaveCount(0)
+  })
+})
+
+test.describe('Temporal Grouping: Section Headers', () => {
+  test('events are distributed under correct section headers', async ({ page }) => {
+    // Use dates relative to "now" to ensure correct section assignment
+    const now = new Date()
+    const todayEvent: StoredEvent = {
+      eventToken: 'today-1',
+      title: 'Today Standup',
+      dateTime: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 18, 0, 0).toISOString(),
+    }
+    const laterEvent: StoredEvent = {
+      eventToken: 'later-1',
+      title: 'Future Conference',
+      dateTime: new Date(now.getFullYear() + 1, 0, 15, 10, 0, 0).toISOString(),
+    }
+    await page.addInitScript(seedEvents([todayEvent, laterEvent, pastEvent]))
+    await page.goto('/')
+
+    // Verify section headers appear
+    await expect(page.getByRole('heading', { name: 'Today', level: 2 })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Later', level: 2 })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Past', level: 2 })).toBeVisible()
+
+    // Events are in the correct sections
+    const sections = page.locator('.event-section')
+    const todaySection = sections.filter({ has: page.getByRole('heading', { name: 'Today', level: 2 }) })
+    await expect(todaySection.getByText('Today Standup')).toBeVisible()
+
+    const laterSection = sections.filter({ has: page.getByRole('heading', { name: 'Later', level: 2 }) })
+    await expect(laterSection.getByText('Future Conference')).toBeVisible()
+
+    const pastSection = sections.filter({ has: page.getByRole('heading', { name: 'Past', level: 2 }) })
+    await expect(pastSection.getByText('New Year Party')).toBeVisible()
+  })
+
+  test('empty sections are not rendered', async ({ page }) => {
+    // Only a past event — no Today, This Week, or Later sections
+    await page.addInitScript(seedEvents([pastEvent]))
+    await page.goto('/')
+
+    await expect(page.getByRole('heading', { name: 'Past', level: 2 })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Today', level: 2 })).toHaveCount(0)
+    await expect(page.getByRole('heading', { name: 'This Week', level: 2 })).toHaveCount(0)
+    await expect(page.getByRole('heading', { name: 'Next Week', level: 2 })).toHaveCount(0)
+    await expect(page.getByRole('heading', { name: 'Later', level: 2 })).toHaveCount(0)
+  })
+
+  test('Today section header has emphasis CSS class', async ({ page }) => {
+    const now = new Date()
+    const todayEvent: StoredEvent = {
+      eventToken: 'today-emph',
+      title: 'Emphasis Test',
+      dateTime: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 20, 0, 0).toISOString(),
+    }
+    await page.addInitScript(seedEvents([todayEvent]))
+    await page.goto('/')
+
+    const todayHeader = page.getByRole('heading', { name: 'Today', level: 2 })
+    await expect(todayHeader).toHaveClass(/section-header--emphasized/)
+  })
+})
+
+test.describe('Temporal Grouping: Date Subheaders', () => {
+  test('no date subheader in Today section', async ({ page }) => {
+    const now = new Date()
+    const todayEvent: StoredEvent = {
+      eventToken: 'today-sub',
+      title: 'No Subheader Test',
+      dateTime: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19, 0, 0).toISOString(),
+    }
+    await page.addInitScript(seedEvents([todayEvent]))
+    await page.goto('/')
+
+    const todaySection = page.locator('.event-section').filter({
+      has: page.getByRole('heading', { name: 'Today', level: 2 }),
+    })
+    await expect(todaySection.locator('.date-subheader')).toHaveCount(0)
+  })
+
+  test('date subheaders appear in Later section', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1, futureEvent2]))
+    await page.goto('/')
+
+    const laterSection = page.locator('.event-section').filter({
+      has: page.getByRole('heading', { name: 'Later', level: 2 }),
+    })
+    // Both future events are on different dates, so expect subheaders
+    const subheaders = laterSection.locator('.date-subheader')
+    await expect(subheaders).toHaveCount(2)
+  })
+
+  test('date subheaders appear in Past section', async ({ page }) => {
+    await page.addInitScript(seedEvents([pastEvent]))
+    await page.goto('/')
+
+    const pastSection = page.locator('.event-section').filter({
+      has: page.getByRole('heading', { name: 'Past', level: 2 }),
+    })
+    await expect(pastSection.locator('.date-subheader')).toHaveCount(1)
+  })
+})
+
+test.describe('Temporal Grouping: Time Display', () => {
+  test('future event cards show clock time', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    const timeLabel = page.locator('.event-card__time')
+    const text = await timeLabel.first().textContent()
+    // Should show clock time (e.g., "18:00" or "6:00 PM"), not relative time
+    expect(text).toMatch(/\d{1,2}[:.]\d{2}/)
+  })
+
+  test('past event cards show relative time', async ({ page }) => {
+    await page.addInitScript(seedEvents([pastEvent]))
+    await page.goto('/')
+
+    const timeLabel = page.locator('.event-card__time')
+    const text = await timeLabel.first().textContent()
+    // Should show relative time like "X years ago" or "last year"
+    expect(text).toMatch(/ago|last|yesterday/)
+  })
+})
+
+test.describe('US1: View My Events', () => {
+  test('displays all stored events with title and relative time', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1, futureEvent2, pastEvent]))
+    await page.goto('/')
+
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+    await expect(page.getByText('Team Meeting')).toBeVisible()
+    await expect(page.getByText('New Year Party')).toBeVisible()
+  })
+
+  test('events are sorted: upcoming ascending, then past', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1, futureEvent2, pastEvent]))
+    await page.goto('/')
+
+    const titles = page.locator('.event-card__title')
+    await expect(titles).toHaveCount(3)
+    // Team Meeting (Jan 2027) before Summer BBQ (Jun 2027), then past event
+    await expect(titles.nth(0)).toHaveText('Team Meeting')
+    await expect(titles.nth(1)).toHaveText('Summer BBQ')
+    await expect(titles.nth(2)).toHaveText('New Year Party')
+  })
+
+  test('clicking an event navigates to its detail page', async ({ page, network }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+
+    // Mock the event detail API so navigation doesn't fail
+    const { http, HttpResponse } = await import('msw')
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json({
+          eventToken: futureEvent1.eventToken,
+          title: futureEvent1.title,
+          dateTime: futureEvent1.dateTime,
+          description: '',
+          location: '',
+          timezone: 'UTC',
+          attendeeCount: 0,
+        })
+      }),
+    )
+
+    await page.goto('/')
+    await page.getByText('Summer BBQ').click()
+    await expect(page).toHaveURL(`/events/${futureEvent1.eventToken}`)
+  })
+
+  test('each event shows a relative time label', async ({ page }) => {
+    await page.addInitScript(seedEvents([futureEvent1]))
+    await page.goto('/')
+
+    // The relative time element should exist and contain text (exact value depends on current time)
+    const timeLabel = page.locator('.event-card__time')
+    await expect(timeLabel).toHaveCount(1)
+    await expect(timeLabel.first()).not.toBeEmpty()
+  })
+})

frontend/e2e/view-attendee-list.spec.ts

@@ -0,0 +1,99 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+
+const eventToken = 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'
+const organizerToken = 'f9e8d7c6-b5a4-3210-fedc-ba9876543210'
+
+const fullEvent = {
+  eventToken,
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 3,
+  expired: false,
+}
+
+const attendeesResponse = {
+  attendees: [
+    { name: 'Alice' },
+    { name: 'Bob' },
+    { name: 'Charlie' },
+  ],
+}
+
+test.describe('US-1: View attendee list as organizer', () => {
+  test('organizer sees attendee names', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+      http.get('*/api/events/:token/attendees', () => {
+        return HttpResponse.json(attendeesResponse)
+      }),
+    )
+
+    // Set organizer token in localStorage before navigating
+    await page.goto('/')
+    await page.evaluate(
+      ([et, ot]) => {
+        localStorage.setItem(
+          'fete:events',
+          JSON.stringify([{ eventToken: et, organizerToken: ot, title: 'Summer BBQ', dateTime: '2026-03-15T20:00:00+01:00', expiryDate: '' }]),
+        )
+      },
+      [eventToken, organizerToken],
+    )
+
+    await page.goto(`/events/${eventToken}`)
+
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+    await expect(page.getByText('3 Attendees')).toBeVisible()
+    await expect(page.getByText('Alice')).toBeVisible()
+    await expect(page.getByText('Bob')).toBeVisible()
+    await expect(page.getByText('Charlie')).toBeVisible()
+  })
+
+  test('visitor does not see attendee list', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json(fullEvent)
+      }),
+    )
+
+    await page.goto(`/events/${eventToken}`)
+
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+    await expect(page.getByText('3 going')).toBeVisible()
+    await expect(page.locator('.attendee-list')).not.toBeVisible()
+  })
+
+  test('organizer sees empty state when no attendees', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => {
+        return HttpResponse.json({ ...fullEvent, attendeeCount: 0 })
+      }),
+      http.get('*/api/events/:token/attendees', () => {
+        return HttpResponse.json({ attendees: [] })
+      }),
+    )
+
+    await page.goto('/')
+    await page.evaluate(
+      ([et, ot]) => {
+        localStorage.setItem(
+          'fete:events',
+          JSON.stringify([{ eventToken: et, organizerToken: ot, title: 'Summer BBQ', dateTime: '2026-03-15T20:00:00+01:00', expiryDate: '' }]),
+        )
+      },
+      [eventToken, organizerToken],
+    )
+
+    await page.goto(`/events/${eventToken}`)
+
+    await expect(page.getByRole('heading', { name: 'Summer BBQ' })).toBeVisible()
+    await expect(page.getByText('0 Attendees')).toBeVisible()
+    await expect(page.getByText('No attendees yet.')).toBeVisible()
+  })
+})

frontend/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!-- OG_META_TAGS -->
     <title>fete</title>
   </head>
   <body>

frontend/package.json

@@ -35,20 +35,20 @@
     "@vitest/eslint-plugin": "^1.6.9",
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.6",
-    "@vue/tsconfig": "^0.8.1",
+    "@vue/tsconfig": "^0.9.0",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-oxlint": "~1.50.0",
+    "eslint-plugin-oxlint": "~1.54.0",
     "eslint-plugin-vue": "~10.8.0",
     "jiti": "^2.6.1",
     "jsdom": "^28.1.0",
     "msw": "^2.12.10",
     "npm-run-all2": "^8.0.4",
     "openapi-typescript": "^7.13.0",
-    "oxlint": "~1.50.0",
+    "oxlint": "~1.55.0",
     "prettier": "3.8.1",
     "typescript": "~5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.0",
     "vite-plugin-vue-devtools": "^8.0.6",
     "vitest": "^4.0.18",
     "vue-tsc": "^3.2.5"

frontend/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <text y="0.9em" font-size="80" x="50%" text-anchor="middle">🎉</text>
+</svg>

frontend/src/assets/main.css

@@ -16,6 +16,26 @@
   --color-text-on-gradient: #ffffff;
   --color-surface: #fff5f8;
   --color-card: #ffffff;
+  --color-dark-base: #1B1730;
+
+  /* Glass system */
+  --color-glass: rgba(255, 255, 255, 0.1);
+  --color-glass-strong: rgba(255, 255, 255, 0.15);
+  --color-glass-subtle: rgba(255, 255, 255, 0.05);
+  --color-glass-border: rgba(255, 255, 255, 0.18);
+  --color-glass-border-hover: rgba(255, 255, 255, 0.3);
+  --color-glass-hover: rgba(255, 255, 255, 0.18);
+  --color-glass-inner: rgba(27, 23, 48, 0.55);
+  --color-glass-overlay: rgba(27, 23, 48, 0.4);
+
+  /* Text on gradient (opacity variants) */
+  --color-text-muted: rgba(255, 255, 255, 0.5);
+  --color-text-secondary: rgba(255, 255, 255, 0.7);
+  --color-text-soft: rgba(255, 255, 255, 0.85);
+  --color-text-bright: rgba(255, 255, 255, 0.9);
+
+  /* Glow border */
+  --gradient-glow: conic-gradient(from 135deg, var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
 
   /* Gradient */
   --gradient-primary: linear-gradient(135deg, #f06292 0%, #ab47bc 50%, #5c6bc0 100%);
@@ -33,7 +53,7 @@
   --radius-button: 14px;
 
   /* Shadows */
-  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.12);
   --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.15);
 
   /* Layout */
@@ -60,7 +80,22 @@ html {
 
 body {
   min-height: 100vh;
-  background: var(--gradient-primary);
+  background-color: var(--color-dark-base);
+  position: relative;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-dark-base);
+  background-image:
+    radial-gradient(at 70% 20%, rgba(240, 98, 146, 0.55) 0px, transparent 50%),
+    radial-gradient(at 25% 50%, rgba(171, 71, 188, 0.5) 0px, transparent 55%),
+    radial-gradient(at 80% 70%, rgba(92, 107, 192, 0.55) 0px, transparent 50%),
+    radial-gradient(at 35% 85%, rgba(255, 112, 67, 0.3) 0px, transparent 40%);
+  filter: blur(80px);
+  z-index: -1;
 }
 
 #app {
@@ -82,28 +117,35 @@ body {
 /* Card-style form fields */
 .form-field {
   background: var(--color-card);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-md);
-  box-shadow: var(--shadow-card);
   width: 100%;
   font-family: inherit;
   font-size: 0.95rem;
   font-weight: 400;
   color: var(--color-text);
   outline: none;
-  transition: box-shadow 0.2s ease;
+  transition: border-color 0.2s ease;
+}
+
+.form-field.glass {
+  color: var(--color-text-on-gradient);
 }
 
 .form-field:focus {
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
+  border-color: var(--color-glass-border-hover);
 }
 
 .form-field::placeholder {
-  color: #999;
+  color: var(--color-text-muted);
   font-weight: 400;
 }
 
+.form-field.glass::placeholder {
+  color: var(--color-text-muted);
+}
+
 textarea.form-field {
   resize: vertical;
   min-height: 5rem;
@@ -128,22 +170,29 @@ textarea.form-field {
   display: block;
   width: 100%;
   padding: var(--spacing-md) var(--spacing-lg);
-  background: var(--color-accent);
+  background: var(--color-card);
   color: var(--color-text);
-  border: none;
+  border: 1px solid #e0e0e0;
   border-radius: var(--radius-button);
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
   cursor: pointer;
-  box-shadow: var(--shadow-button);
-  transition: opacity 0.2s ease, transform 0.1s ease;
+  transition: border-color 0.2s ease, transform 0.1s ease;
   text-align: center;
   text-decoration: none;
 }
 
+.btn-primary.glass {
+  color: var(--color-text-on-gradient);
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--color-glass-inner), var(--color-glass-inner)) padding-box,
+    var(--gradient-glow) border-box;
+}
+
 .btn-primary:hover {
-  opacity: 0.92;
+  border-color: var(--color-glass-border-hover);
 }
 
 .btn-primary:active {
@@ -163,6 +212,81 @@ textarea.form-field {
   padding-left: 0.25rem;
 }
 
+/* Skeleton shimmer loading state */
+.skeleton {
+  background: linear-gradient(90deg, var(--color-card) 25%, #e0e0e0 50%, var(--color-card) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-card);
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* ── Glass System ── */
+
+/* Glass surface: passive containers on gradient (cards, icon boxes) */
+.glass {
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
+  background: var(--color-glass-hover);
+  border-color: var(--color-glass-border-hover);
+}
+
+/* Glass interactive inner: dark translucent fill for interactive elements (FAB, CTA) */
+.glass-inner {
+  background: var(--color-glass-inner);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+/* Glow border: conic gradient wrapper with halo (static) */
+.glow-border {
+  background: var(--gradient-glow);
+  padding: 2px;
+  position: relative;
+}
+
+.glow-border::before {
+  content: '';
+  position: absolute;
+  inset: -4px;
+  border-radius: inherit;
+  background: var(--gradient-glow);
+  filter: blur(8px);
+  opacity: 0.3;
+  z-index: -1;
+}
+
+/* Glow border animated variant */
+@property --glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.glow-border--animated {
+  background: conic-gradient(from var(--glow-angle), var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
+  animation: glow-rotate 4s linear infinite;
+}
+
+.glow-border--animated::before {
+  background: conic-gradient(from var(--glow-angle), var(--color-gradient-start), var(--color-gradient-mid), var(--color-gradient-end), var(--color-gradient-start));
+  animation: glow-rotate 4s linear infinite;
+}
+
+@keyframes glow-rotate {
+  to { --glow-angle: 360deg; }
+}
+
 /* Utility */
 .text-center {
   text-align: center;
@@ -179,3 +303,34 @@ textarea.form-field {
   white-space: nowrap;
   border: 0;
 }
+
+/* Bottom sheet form */
+.sheet-title {
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+}
+
+.rsvp-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.rsvp-form__label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  padding-left: 0.25rem;
+}
+
+.rsvp-form__field-error {
+  color: #d32f2f;
+  font-size: 0.875rem;
+  font-weight: 600;
+  padding-left: 0.25rem;
+}
+
+.rsvp-form__error {
+  text-align: center;
+}

frontend/src/components/AttendeeList.vue

@@ -0,0 +1,59 @@
+<template>
+  <section class="attendee-list">
+    <h3 class="attendee-list__heading">
+      {{ attendees.length === 1 ? '1 Attendee' : `${attendees.length} Attendees` }}
+    </h3>
+    <ul v-if="attendees.length > 0" class="attendee-list__items">
+      <li v-for="(name, index) in attendees" :key="index" class="attendee-list__item">
+        {{ name }}
+      </li>
+    </ul>
+    <p v-else class="attendee-list__empty">No attendees yet.</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  attendees: string[]
+}>()
+</script>
+
+<style scoped>
+.attendee-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.attendee-list__heading {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.attendee-list__items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.attendee-list__item {
+  font-size: 0.95rem;
+  color: var(--color-text-soft);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.attendee-list__empty {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+</style>

frontend/src/components/BottomSheet.vue

@@ -0,0 +1,100 @@
+<template>
+  <Teleport to="body">
+    <Transition name="sheet">
+      <div v-if="open" class="sheet-backdrop" @click.self="$emit('close')" @keydown.escape="$emit('close')">
+        <div class="sheet" role="dialog" aria-modal="true" :aria-label="label" ref="sheetEl" tabindex="-1">
+          <div class="sheet__handle" aria-hidden="true" />
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+
+defineProps<{
+  open: boolean
+  label: string
+}>()
+
+defineEmits<{
+  close: []
+}>()
+
+const sheetEl = ref<HTMLElement | null>(null)
+
+watch(
+  () => sheetEl.value,
+  async (el) => {
+    if (el) {
+      await nextTick()
+      const firstInput = el.querySelector<HTMLElement>('input, textarea, button[type="submit"]')
+      if (firstInput) {
+        firstInput.focus()
+      } else {
+        el.focus()
+      }
+    }
+  },
+)
+</script>
+
+<style scoped>
+.sheet-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--color-glass-overlay);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 100;
+}
+
+.sheet {
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  border-bottom: none;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-radius: 20px 20px 0 0;
+  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
+  width: 100%;
+  max-width: var(--content-max-width);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  outline: none;
+}
+
+.sheet__handle {
+  width: 36px;
+  height: 4px;
+  background: var(--color-glass-border-hover);
+  border-radius: 2px;
+  align-self: center;
+  flex-shrink: 0;
+}
+
+/* Transition */
+.sheet-enter-active,
+.sheet-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.sheet-enter-active .sheet,
+.sheet-leave-active .sheet {
+  transition: transform 0.25s ease;
+}
+
+.sheet-enter-from,
+.sheet-leave-to {
+  opacity: 0;
+}
+
+.sheet-enter-from .sheet,
+.sheet-leave-to .sheet {
+  transform: translateY(100%);
+}
+</style>

frontend/src/components/ConfirmDialog.vue

@@ -0,0 +1,155 @@
+<template>
+  <Teleport to="body">
+    <Transition name="confirm-dialog">
+      <div v-if="open" class="confirm-dialog__overlay" @click.self="$emit('cancel')">
+        <div
+          class="confirm-dialog"
+          role="alertdialog"
+          aria-modal="true"
+          :aria-label="title"
+          @keydown.escape="$emit('cancel')"
+        >
+          <p class="confirm-dialog__title">{{ title }}</p>
+          <p class="confirm-dialog__message">{{ message }}</p>
+          <div class="confirm-dialog__actions">
+            <button
+              ref="cancelBtn"
+              class="confirm-dialog__btn confirm-dialog__btn--cancel"
+              type="button"
+              @click="$emit('cancel')"
+            >
+              {{ cancelLabel }}
+            </button>
+            <button
+              class="confirm-dialog__btn confirm-dialog__btn--confirm"
+              type="button"
+              @click="$emit('confirm')"
+            >
+              {{ confirmLabel }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+    title?: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+  }>(),
+  {
+    title: 'Are you sure?',
+    message: '',
+    confirmLabel: 'Remove',
+    cancelLabel: 'Cancel',
+  },
+)
+
+defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const cancelBtn = ref<HTMLButtonElement | null>(null)
+
+watch(
+  () => props.open,
+  async (isOpen) => {
+    if (isOpen) {
+      await nextTick()
+      cancelBtn.value?.focus()
+    }
+  },
+)
+</script>
+
+<style scoped>
+.confirm-dialog__overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-glass-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: var(--spacing-lg);
+}
+
+.confirm-dialog {
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-radius: var(--radius-card);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  padding: var(--spacing-xl);
+  max-width: 320px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.confirm-dialog__title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+}
+
+.confirm-dialog__message {
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: var(--color-text-soft);
+}
+
+.confirm-dialog__actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: flex-end;
+  margin-top: var(--spacing-xs);
+}
+
+.confirm-dialog__btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: var(--radius-button);
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.confirm-dialog__btn:hover {
+  opacity: 0.85;
+}
+
+.confirm-dialog__btn--cancel {
+  background: var(--color-glass);
+  border: 1px solid var(--color-glass-border);
+  color: var(--color-text-on-gradient);
+}
+
+.confirm-dialog__btn--confirm {
+  background: #d32f2f;
+  color: #fff;
+}
+
+.confirm-dialog-enter-active,
+.confirm-dialog-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.confirm-dialog-enter-from,
+.confirm-dialog-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/components/CreateEventFab.vue

@@ -0,0 +1,58 @@
+<template>
+  <RouterLink to="/create" class="fab glow-border" aria-label="Create event">
+    <span class="fab__inner glass-inner">
+      <span class="fab__icon" aria-hidden="true">+</span>
+    </span>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<style scoped>
+.fab {
+  position: fixed;
+  bottom: calc(1.2rem + env(safe-area-inset-bottom));
+  right: 1.2rem;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  color: var(--color-text-on-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  z-index: 100;
+  transition: transform 0.15s ease;
+}
+
+.fab__inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fab:hover {
+  transform: scale(1.08);
+}
+
+.fab:active {
+  transform: scale(0.95);
+}
+
+.fab:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
+}
+
+
+.fab__icon {
+  font-size: 1.8rem;
+  font-weight: 300;
+  line-height: 1;
+}
+</style>

frontend/src/components/DateSubheader.vue

@@ -0,0 +1,19 @@
+<template>
+  <h3 class="date-subheader">{{ label }}</h3>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<style scoped>
+.date-subheader {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-soft);
+  margin: 0;
+  padding: var(--spacing-xs) 0;
+}
+</style>

frontend/src/components/EmptyState.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="empty-state">
+    <p class="empty-state__message">No events yet.<br />Create your first one!</p>
+    <RouterLink to="/create" class="empty-state__cta glow-border glow-border--animated">
+      <span class="empty-state__cta-inner glass-inner">Create Event</span>
+    </RouterLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<style scoped>
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-lg);
+}
+
+.empty-state__message {
+  font-size: 1rem;
+  font-weight: 400;
+  color: var(--color-text-on-gradient);
+  opacity: 0.9;
+  text-align: center;
+}
+
+.empty-state__cta {
+  max-width: 280px;
+  width: 100%;
+  border-radius: var(--radius-button);
+  text-decoration: none;
+  transition: transform 0.1s ease;
+}
+
+.empty-state__cta-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+}
+
+.empty-state__cta:hover {
+  transform: scale(1.02);
+}
+
+.empty-state__cta:active {
+  transform: scale(0.98);
+}
+
+.empty-state__cta:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 3px;
+}
+</style>

frontend/src/components/EventCard.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    class="event-card glass"
+    :class="{ 'event-card--past': isPast, 'event-card--swiping': isSwiping }"
+    :style="swipeStyle"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <RouterLink :to="`/events/${eventToken}`" class="event-card__link">
+      <span class="event-card__title">{{ title }}</span>
+      <span class="event-card__time">{{ displayTime }}</span>
+    </RouterLink>
+    <span v-if="eventRole" class="event-card__badge" :class="`event-card__badge--${eventRole}`">
+      {{ eventRole === 'organizer' ? 'Organizer' : 'Attendee' }}
+    </span>
+    <button
+      class="event-card__delete"
+      type="button"
+      :aria-label="`Remove ${title}`"
+      @click.stop="$emit('delete', eventToken)"
+    >
+      ×
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const props = defineProps<{
+  eventToken: string
+  title: string
+  relativeTime: string
+  isPast: boolean
+  eventRole?: 'organizer' | 'attendee'
+  timeDisplayMode?: 'clock' | 'relative'
+  dateTime?: string
+}>()
+
+const emit = defineEmits<{
+  delete: [eventToken: string]
+}>()
+
+const displayTime = computed(() => {
+  if (props.timeDisplayMode === 'clock' && props.dateTime) {
+    return new Intl.DateTimeFormat(undefined, { hour: '2-digit', minute: '2-digit' }).format(new Date(props.dateTime))
+  }
+  return props.relativeTime
+})
+
+const SWIPE_THRESHOLD = 80
+
+const startX = ref(0)
+const deltaX = ref(0)
+const isSwiping = ref(false)
+
+const swipeStyle = computed(() => {
+  if (deltaX.value === 0) return {}
+  return { transform: `translateX(${deltaX.value}px)` }
+})
+
+function onTouchStart(e: TouchEvent) {
+  const touch = e.touches[0]
+  if (!touch) return
+  startX.value = touch.clientX
+  deltaX.value = 0
+  isSwiping.value = false
+}
+
+function onTouchMove(e: TouchEvent) {
+  const touch = e.touches[0]
+  if (!touch) return
+  const diff = touch.clientX - startX.value
+  // Only allow leftward swipe
+  if (diff < 0) {
+    deltaX.value = diff
+    isSwiping.value = true
+  }
+}
+
+function onTouchEnd() {
+  if (deltaX.value < -SWIPE_THRESHOLD) {
+    emit('delete', props.eventToken)
+  }
+  deltaX.value = 0
+  isSwiping.value = false
+}
+</script>
+
+<style scoped>
+.event-card {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-card);
+  padding: var(--spacing-md) var(--spacing-lg);
+  gap: var(--spacing-sm);
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.event-card--past {
+  opacity: 0.6;
+  filter: saturate(0.5);
+}
+
+.event-card:not(.event-card--swiping) {
+  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
+}
+
+.event-card__link {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  text-decoration: none;
+  color: inherit;
+  min-width: 0;
+}
+
+.event-card__title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-on-gradient);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.event-card__time {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--color-text-secondary);
+}
+
+.event-card__badge {
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.event-card__badge--organizer {
+  background: var(--color-accent);
+  color: var(--color-text-on-gradient);
+}
+
+.event-card__badge--attendee {
+  background: var(--color-glass-strong);
+  color: var(--color-text-bright);
+}
+
+.event-card__delete {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.event-card__delete:hover {
+  color: #d32f2f;
+  background: rgba(211, 47, 47, 0.08);
+}
+
+.event-card__delete:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+</style>

frontend/src/components/EventList.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="event-list">
+    <section
+      v-for="section in groupedSections"
+      :key="section.key"
+      :aria-label="section.label"
+      class="event-section"
+    >
+      <SectionHeader :label="section.label" :emphasized="section.emphasized" />
+      <div role="list">
+        <template v-for="group in section.dateGroups" :key="group.dateKey">
+          <DateSubheader v-if="group.showSubheader" :label="group.label" />
+          <div v-for="event in group.events" :key="event.eventToken" role="listitem">
+            <EventCard
+              :event-token="event.eventToken"
+              :title="event.title"
+              :relative-time="formatRelativeTime(event.dateTime)"
+              :is-past="section.key === 'past'"
+              :event-role="getRole(event)"
+              :time-display-mode="section.key === 'past' ? 'relative' : 'clock'"
+              :date-time="event.dateTime"
+              @delete="requestDelete"
+            />
+          </div>
+        </template>
+      </div>
+    </section>
+    <ConfirmDialog
+      :open="!!pendingDeleteToken"
+      title="Remove event?"
+      :message="deleteDialogMessage"
+      confirm-label="Remove"
+      cancel-label="Cancel"
+      @confirm="confirmDelete"
+      @cancel="cancelDelete"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useEventStorage, isValidStoredEvent } from '../composables/useEventStorage'
+import { useEventGrouping } from '../composables/useEventGrouping'
+import { formatRelativeTime } from '../composables/useRelativeTime'
+import { api } from '../api/client'
+import EventCard from './EventCard.vue'
+import SectionHeader from './SectionHeader.vue'
+import DateSubheader from './DateSubheader.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import type { StoredEvent } from '../composables/useEventStorage'
+
+const { getStoredEvents, getRsvp, removeEvent } = useEventStorage()
+
+const pendingDeleteToken = ref<string | null>(null)
+const deleteError = ref('')
+
+const deleteDialogMessage = computed(() => {
+  if (!pendingDeleteToken.value) return ''
+  const rsvp = getRsvp(pendingDeleteToken.value)
+  if (rsvp) {
+    return 'This event will be removed from your list and your attendance will be cancelled.'
+  }
+  return 'This event will be removed from your list.'
+})
+
+function requestDelete(eventToken: string) {
+  deleteError.value = ''
+  pendingDeleteToken.value = eventToken
+}
+
+async function confirmDelete() {
+  if (!pendingDeleteToken.value) return
+
+  const eventToken = pendingDeleteToken.value
+  const rsvp = getRsvp(eventToken)
+
+  if (rsvp) {
+    try {
+      const { response } = await api.DELETE('/events/{eventToken}/rsvps/{rsvpToken}', {
+        params: {
+          path: {
+            eventToken: eventToken,
+            rsvpToken: rsvp.rsvpToken,
+          },
+        },
+      })
+
+      if (response.status !== 204 && response.status !== 404) {
+        deleteError.value = 'Could not cancel attendance. Please try again.'
+        pendingDeleteToken.value = null
+        return
+      }
+    } catch {
+      deleteError.value = 'Could not cancel attendance. Please try again.'
+      pendingDeleteToken.value = null
+      return
+    }
+  }
+
+  removeEvent(eventToken)
+  pendingDeleteToken.value = null
+}
+
+function cancelDelete() {
+  pendingDeleteToken.value = null
+}
+
+function getRole(event: StoredEvent): 'organizer' | 'attendee' | undefined {
+  if (event.organizerToken) return 'organizer'
+  if (event.rsvpToken) return 'attendee'
+  return undefined
+}
+
+const groupedSections = computed(() => {
+  const valid = getStoredEvents().filter(isValidStoredEvent)
+  return useEventGrouping(valid)
+})
+</script>
+
+<style scoped>
+.event-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.event-section [role="list"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+</style>

frontend/src/components/RsvpBar.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="rsvp-bar">
+    <div class="rsvp-bar__inner">
+      <!-- Status state: already RSVPed -->
+      <div v-if="hasRsvp" class="rsvp-bar__status-wrapper">
+        <div
+          class="rsvp-bar__status"
+          role="button"
+          tabindex="0"
+          :aria-expanded="expanded"
+          aria-label="You're attending. Tap to show cancel option."
+          @click="expanded = !expanded"
+          @keydown.enter.prevent="expanded = !expanded"
+          @keydown.space.prevent="expanded = !expanded"
+          @keydown.escape="expanded = false"
+        >
+          <span class="rsvp-bar__check" aria-hidden="true">✓</span>
+          <span class="rsvp-bar__text">You're attending!</span>
+          <span class="rsvp-bar__chevron" :class="{ 'rsvp-bar__chevron--open': expanded }" aria-hidden="true">›</span>
+        </div>
+        <Transition name="rsvp-bar-cancel">
+          <button
+            v-if="expanded"
+            class="rsvp-bar__cancel"
+            type="button"
+            @click="$emit('cancel')"
+          >
+            Cancel attendance
+          </button>
+        </Transition>
+      </div>
+
+      <!-- CTA state: no RSVP yet -->
+      <div v-else class="rsvp-bar__cta glow-border glow-border--animated">
+        <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
+          I'm attending
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = defineProps<{
+  hasRsvp?: boolean
+}>()
+
+defineEmits<{
+  open: []
+  cancel: []
+}>()
+
+const expanded = ref(false)
+
+watch(() => props.hasRsvp, () => {
+  expanded.value = false
+})
+
+function onClickOutside(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.rsvp-bar__status-wrapper')) {
+    expanded.value = false
+  }
+}
+
+watch(expanded, (isExpanded) => {
+  if (isExpanded) {
+    document.addEventListener('click', onClickOutside, { capture: true })
+  } else {
+    document.removeEventListener('click', onClickOutside, { capture: true })
+  }
+})
+</script>
+
+<style scoped>
+.rsvp-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 50;
+  padding: var(--spacing-md) var(--content-padding);
+  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
+}
+
+.rsvp-bar__inner {
+  width: 100%;
+  max-width: var(--content-max-width);
+}
+
+.rsvp-bar__cta {
+  width: 100%;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-bar__cta:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-bar__cta:active {
+  transform: scale(0.98);
+}
+
+.rsvp-bar__cta-inner {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-radius: calc(var(--radius-button) - 2px);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  text-align: center;
+  border: none;
+  cursor: pointer;
+}
+
+.rsvp-bar__status-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.rsvp-bar__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-radius: var(--radius-card);
+  padding: var(--spacing-md) var(--spacing-lg);
+  box-shadow: var(--shadow-card);
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--color-text-on-gradient);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.rsvp-bar__status:hover {
+  background: linear-gradient(135deg, var(--color-glass-hover) 0%, var(--color-glass-strong) 100%);
+}
+
+.rsvp-bar__check {
+  color: #4caf50;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.rsvp-bar__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rsvp-bar__chevron {
+  font-size: 1.2rem;
+  font-weight: 700;
+  transition: transform 0.2s ease;
+  transform: rotate(0deg);
+  margin-left: auto;
+}
+
+.rsvp-bar__chevron--open {
+  transform: rotate(90deg);
+}
+
+.rsvp-bar__cancel {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  border-radius: var(--radius-card);
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #ef5350;
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  cursor: pointer;
+  text-align: center;
+  transition: background 0.15s ease;
+}
+
+.rsvp-bar__cancel:hover {
+  background: linear-gradient(135deg, var(--color-glass-hover) 0%, var(--color-glass-strong) 100%);
+}
+
+.rsvp-bar-cancel-enter-active,
+.rsvp-bar-cancel-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.rsvp-bar-cancel-enter-from,
+.rsvp-bar-cancel-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+</style>

frontend/src/components/SectionHeader.vue

@@ -0,0 +1,27 @@
+<template>
+  <h2 class="section-header" :class="{ 'section-header--emphasized': emphasized }">
+    {{ label }}
+  </h2>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  emphasized?: boolean
+}>()
+</script>
+
+<style scoped>
+.section-header {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text-on-gradient);
+  margin: 0;
+  padding: var(--spacing-sm) 0;
+}
+
+.section-header--emphasized {
+  font-size: 1.1rem;
+  font-weight: 800;
+}
+</style>

frontend/src/components/__tests__/AttendeeList.spec.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AttendeeList from '../AttendeeList.vue'
+
+describe('AttendeeList', () => {
+  it('renders attendee names as list items', () => {
+    const wrapper = mount(AttendeeList, {
+      props: { attendees: ['Alice', 'Bob', 'Charlie'] },
+    })
+
+    const items = wrapper.findAll('.attendee-list__item')
+    expect(items).toHaveLength(3)
+    expect(items[0]!.text()).toBe('Alice')
+    expect(items[1]!.text()).toBe('Bob')
+    expect(items[2]!.text()).toBe('Charlie')
+  })
+
+  it('shows empty state message when no attendees', () => {
+    const wrapper = mount(AttendeeList, {
+      props: { attendees: [] },
+    })
+
+    expect(wrapper.find('.attendee-list__empty').text()).toBe('No attendees yet.')
+    expect(wrapper.find('.attendee-list__items').exists()).toBe(false)
+  })
+
+  it('shows plural count heading for multiple attendees', () => {
+    const wrapper = mount(AttendeeList, {
+      props: { attendees: ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve'] },
+    })
+
+    expect(wrapper.find('.attendee-list__heading').text()).toBe('5 Attendees')
+  })
+
+  it('shows singular count heading for one attendee', () => {
+    const wrapper = mount(AttendeeList, {
+      props: { attendees: ['Alice'] },
+    })
+
+    expect(wrapper.find('.attendee-list__heading').text()).toBe('1 Attendee')
+  })
+
+  it('shows zero count heading for no attendees', () => {
+    const wrapper = mount(AttendeeList, {
+      props: { attendees: [] },
+    })
+
+    expect(wrapper.find('.attendee-list__heading').text()).toBe('0 Attendees')
+  })
+})

frontend/src/components/__tests__/BottomSheet.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BottomSheet from '../BottomSheet.vue'
+
+function mountSheet(open = true) {
+  return mount(BottomSheet, {
+    props: { open, label: 'Test Sheet' },
+    slots: { default: '<p>Sheet content</p>' },
+    attachTo: document.body,
+  })
+}
+
+describe('BottomSheet', () => {
+  it('renders slot content when open', () => {
+    const wrapper = mountSheet(true)
+    expect(document.body.textContent).toContain('Sheet content')
+    wrapper.unmount()
+  })
+
+  it('does not render content when closed', () => {
+    const wrapper = mountSheet(false)
+    expect(document.body.querySelector('[role="dialog"]')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('has aria-modal and aria-label on the dialog', () => {
+    const wrapper = mountSheet(true)
+    const dialog = document.body.querySelector('[role="dialog"]')!
+    expect(dialog.getAttribute('aria-modal')).toBe('true')
+    expect(dialog.getAttribute('aria-label')).toBe('Test Sheet')
+    wrapper.unmount()
+  })
+
+  it('emits close when backdrop is clicked', async () => {
+    const wrapper = mountSheet(true)
+    const backdrop = document.body.querySelector('.sheet-backdrop')! as HTMLElement
+    await backdrop.click()
+    // Vue test utils tracks emitted events on the wrapper
+    expect(wrapper.emitted('close')).toBeTruthy()
+    wrapper.unmount()
+  })
+
+  it('emits close on Escape key', async () => {
+    const wrapper = mountSheet(true)
+    const backdrop = document.body.querySelector('.sheet-backdrop')! as HTMLElement
+    backdrop.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('close')).toBeTruthy()
+    wrapper.unmount()
+  })
+})

frontend/src/components/__tests__/ConfirmDialog.spec.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, VueWrapper } from '@vue/test-utils'
+import ConfirmDialog from '../ConfirmDialog.vue'
+
+let wrapper: VueWrapper
+
+function mountDialog(props: Record<string, unknown> = {}) {
+  wrapper = mount(ConfirmDialog, {
+    props: {
+      open: true,
+      ...props,
+    },
+    attachTo: document.body,
+  })
+  return wrapper
+}
+
+function dialog() {
+  return document.body.querySelector('.confirm-dialog')
+}
+
+function overlay() {
+  return document.body.querySelector('.confirm-dialog__overlay')
+}
+
+afterEach(() => {
+  wrapper?.unmount()
+})
+
+describe('ConfirmDialog', () => {
+  it('renders when open is true', () => {
+    mountDialog()
+    expect(dialog()).not.toBeNull()
+  })
+
+  it('does not render when open is false', () => {
+    mountDialog({ open: false })
+    expect(dialog()).toBeNull()
+  })
+
+  it('displays default title', () => {
+    mountDialog()
+    expect(dialog()!.querySelector('.confirm-dialog__title')!.textContent).toBe('Are you sure?')
+  })
+
+  it('displays custom title and message', () => {
+    mountDialog({
+      title: 'Remove event?',
+      message: 'This cannot be undone.',
+    })
+    expect(dialog()!.querySelector('.confirm-dialog__title')!.textContent).toBe('Remove event?')
+    expect(dialog()!.querySelector('.confirm-dialog__message')!.textContent).toBe('This cannot be undone.')
+  })
+
+  it('displays custom button labels', () => {
+    mountDialog({
+      confirmLabel: 'Delete',
+      cancelLabel: 'Keep',
+    })
+    const buttons = dialog()!.querySelectorAll('.confirm-dialog__btn')
+    expect(buttons[0]!.textContent!.trim()).toBe('Keep')
+    expect(buttons[1]!.textContent!.trim()).toBe('Delete')
+  })
+
+  it('emits confirm when confirm button is clicked', async () => {
+    mountDialog()
+    const btn = dialog()!.querySelector('.confirm-dialog__btn--confirm') as HTMLElement
+    btn.click()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('confirm')).toHaveLength(1)
+  })
+
+  it('emits cancel when cancel button is clicked', async () => {
+    mountDialog()
+    const btn = dialog()!.querySelector('.confirm-dialog__btn--cancel') as HTMLElement
+    btn.click()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('emits cancel when overlay is clicked', async () => {
+    mountDialog()
+    const el = overlay() as HTMLElement
+    el.click()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('emits cancel when Escape key is pressed', async () => {
+    mountDialog()
+    const el = dialog() as HTMLElement
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+  })
+
+  it('focuses cancel button when opened', async () => {
+    mountDialog({ open: false })
+    await wrapper.setProps({ open: true })
+    await wrapper.vm.$nextTick()
+    const cancelBtn = dialog()!.querySelector('.confirm-dialog__btn--cancel')
+    expect(document.activeElement).toBe(cancelBtn)
+  })
+
+  it('has alertdialog role and aria-modal', () => {
+    mountDialog()
+    const el = dialog() as HTMLElement
+    expect(el.getAttribute('role')).toBe('alertdialog')
+    expect(el.getAttribute('aria-modal')).toBe('true')
+  })
+})

frontend/src/components/__tests__/DateSubheader.spec.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DateSubheader from '../DateSubheader.vue'
+
+describe('DateSubheader', () => {
+  it('renders the date label as an h3', () => {
+    const wrapper = mount(DateSubheader, { props: { label: 'Wed, 12 Mar' } })
+    const h3 = wrapper.find('h3')
+    expect(h3.exists()).toBe(true)
+    expect(h3.text()).toBe('Wed, 12 Mar')
+  })
+
+  it('applies the date-subheader class', () => {
+    const wrapper = mount(DateSubheader, { props: { label: 'Fri, 14 Mar' } })
+    expect(wrapper.find('.date-subheader').exists()).toBe(true)
+  })
+})

frontend/src/components/__tests__/EmptyState.spec.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import EmptyState from '../EmptyState.vue'
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    { path: '/', component: { template: '<div />' } },
+    { path: '/create', name: 'create', component: { template: '<div />' } },
+  ],
+})
+
+function mountEmptyState() {
+  return mount(EmptyState, {
+    global: {
+      plugins: [router],
+    },
+  })
+}
+
+describe('EmptyState', () => {
+  it('renders an inviting message', () => {
+    const wrapper = mountEmptyState()
+    expect(wrapper.text()).toContain('No events yet')
+  })
+
+  it('renders a Create Event link', () => {
+    const wrapper = mountEmptyState()
+    const link = wrapper.find('a')
+    expect(link.exists()).toBe(true)
+    expect(link.text()).toContain('Create Event')
+    expect(link.attributes('href')).toBe('/create')
+  })
+})

frontend/src/components/__tests__/EventCard.spec.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import EventCard from '../EventCard.vue'
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    { path: '/', component: { template: '<div />' } },
+    { path: '/events/:eventToken', name: 'event', component: { template: '<div />' } },
+  ],
+})
+
+function mountCard(props: Record<string, unknown> = {}) {
+  return mount(EventCard, {
+    props: {
+      eventToken: 'abc-123',
+      title: 'Birthday Party',
+      relativeTime: 'in 3 days',
+      isPast: false,
+      ...props,
+    },
+    global: {
+      plugins: [router],
+    },
+  })
+}
+
+describe('EventCard', () => {
+  it('renders the event title', () => {
+    const wrapper = mountCard()
+    expect(wrapper.text()).toContain('Birthday Party')
+  })
+
+  it('renders relative time', () => {
+    const wrapper = mountCard({ relativeTime: 'yesterday' })
+    expect(wrapper.text()).toContain('yesterday')
+  })
+
+  it('links to the event detail page', () => {
+    const wrapper = mountCard({ eventToken: 'xyz-789' })
+    const link = wrapper.find('a')
+    expect(link.attributes('href')).toBe('/events/xyz-789')
+  })
+
+  it('applies past modifier class when isPast is true', () => {
+    const wrapper = mountCard({ isPast: true })
+    expect(wrapper.find('.event-card--past').exists()).toBe(true)
+  })
+
+  it('does not apply past modifier class when isPast is false', () => {
+    const wrapper = mountCard({ isPast: false })
+    expect(wrapper.find('.event-card--past').exists()).toBe(false)
+  })
+
+  it('renders organizer badge when eventRole is organizer', () => {
+    const wrapper = mountCard({ eventRole: 'organizer' })
+    expect(wrapper.text()).toContain('Organizer')
+  })
+
+  it('renders attendee badge when eventRole is attendee', () => {
+    const wrapper = mountCard({ eventRole: 'attendee' })
+    expect(wrapper.text()).toContain('Attendee')
+  })
+
+  it('renders no badge when eventRole is undefined', () => {
+    const wrapper = mountCard({ eventRole: undefined })
+    expect(wrapper.find('.event-card__badge').exists()).toBe(false)
+  })
+
+  it('emits delete event with eventToken when delete button is clicked', async () => {
+    const wrapper = mountCard({ eventToken: 'abc-123' })
+    await wrapper.find('.event-card__delete').trigger('click')
+    expect(wrapper.emitted('delete')).toEqual([['abc-123']])
+  })
+
+  it('displays clock time when timeDisplayMode is clock', () => {
+    const wrapper = mountCard({
+      timeDisplayMode: 'clock',
+      dateTime: '2026-03-11T18:30:00',
+    })
+    const timeText = wrapper.find('.event-card__time').text()
+    // Locale-dependent: could be "18:30" or "06:30 PM"
+    expect(timeText).toMatch(/(?:18.30|6.30\s*PM)/i)
+  })
+
+  it('displays relative time when timeDisplayMode is relative', () => {
+    const wrapper = mountCard({
+      relativeTime: '3 days ago',
+      timeDisplayMode: 'relative',
+      dateTime: '2026-03-08T10:00:00',
+    })
+    expect(wrapper.find('.event-card__time').text()).toBe('3 days ago')
+  })
+
+  it('falls back to relativeTime when timeDisplayMode is not set', () => {
+    const wrapper = mountCard({ relativeTime: 'in 3 days' })
+    expect(wrapper.find('.event-card__time').text()).toBe('in 3 days')
+  })
+})

frontend/src/components/__tests__/EventList.spec.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import EventList from '../EventList.vue'
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    { path: '/', component: { template: '<div />' } },
+    { path: '/events/:eventToken', name: 'event', component: { template: '<div />' } },
+  ],
+})
+
+// Fixed "now": Wednesday, 2026-03-11 12:00
+const NOW = new Date(2026, 2, 11, 12, 0, 0)
+
+const mockEvents = [
+  { eventToken: 'past-1', title: 'Past Event', dateTime: '2026-03-01T10:00:00' },
+  { eventToken: 'later-1', title: 'Later Event', dateTime: '2027-06-15T10:00:00' },
+  { eventToken: 'today-1', title: 'Today Event', dateTime: '2026-03-11T18:00:00' },
+  { eventToken: 'week-1', title: 'This Week Event', dateTime: '2026-03-13T10:00:00' },
+  { eventToken: 'nextweek-1', title: 'Next Week Event', dateTime: '2026-03-16T10:00:00' },
+]
+
+vi.mock('../../composables/useEventStorage', () => ({
+  isValidStoredEvent: (e: unknown) => {
+    if (typeof e !== 'object' || e === null) return false
+    const obj = e as Record<string, unknown>
+    return typeof obj.eventToken === 'string' && obj.eventToken.length > 0
+      && typeof obj.title === 'string' && obj.title.length > 0
+      && typeof obj.dateTime === 'string' && obj.dateTime.length > 0
+  },
+  useEventStorage: () => ({
+    getStoredEvents: () => mockEvents,
+    removeEvent: vi.fn(),
+  }),
+}))
+
+vi.mock('../../composables/useRelativeTime', () => ({
+  formatRelativeTime: (dateTime: string) => {
+    if (dateTime.includes('03-01')) return '10 days ago'
+    if (dateTime.includes('06-15')) return 'in 1 year'
+    if (dateTime.includes('03-11')) return 'in 6 hours'
+    if (dateTime.includes('03-13')) return 'in 2 days'
+    if (dateTime.includes('03-16')) return 'in 5 days'
+    return 'sometime'
+  },
+}))
+
+function mountList() {
+  return mount(EventList, {
+    global: { plugins: [router] },
+  })
+}
+
+describe('EventList', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(NOW)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('renders section headers for each non-empty section', () => {
+    const wrapper = mountList()
+    const headers = wrapper.findAll('.section-header')
+    expect(headers).toHaveLength(5)
+    expect(headers[0]!.text()).toBe('Today')
+    expect(headers[1]!.text()).toBe('This Week')
+    expect(headers[2]!.text()).toBe('Next Week')
+    expect(headers[3]!.text()).toBe('Later')
+    expect(headers[4]!.text()).toBe('Past')
+  })
+
+  it('renders events within their correct sections', () => {
+    const wrapper = mountList()
+    const sections = wrapper.findAll('.event-section')
+    expect(sections).toHaveLength(5)
+
+    expect(sections[0]!.text()).toContain('Today Event')
+    expect(sections[1]!.text()).toContain('This Week Event')
+    expect(sections[2]!.text()).toContain('Next Week Event')
+    expect(sections[3]!.text()).toContain('Later Event')
+    expect(sections[4]!.text()).toContain('Past Event')
+  })
+
+  it('renders all valid events as cards', () => {
+    const wrapper = mountList()
+    const cards = wrapper.findAll('.event-card')
+    expect(cards).toHaveLength(5)
+  })
+
+  it('marks past events with isPast class', () => {
+    const wrapper = mountList()
+    const pastSection = wrapper.findAll('.event-section')[4]!
+    const pastCards = pastSection.findAll('.event-card')
+    expect(pastCards).toHaveLength(1)
+    expect(pastCards[0]!.classes()).toContain('event-card--past')
+  })
+
+  it('does not mark non-past events with isPast class', () => {
+    const wrapper = mountList()
+    const todaySection = wrapper.findAll('.event-section')[0]!
+    const cards = todaySection.findAll('.event-card')
+    expect(cards[0]!.classes()).not.toContain('event-card--past')
+  })
+
+  it('sections have aria-label attributes', () => {
+    const wrapper = mountList()
+    const sections = wrapper.findAll('section')
+    expect(sections[0]!.attributes('aria-label')).toBe('Today')
+    expect(sections[1]!.attributes('aria-label')).toBe('This Week')
+    expect(sections[2]!.attributes('aria-label')).toBe('Next Week')
+    expect(sections[3]!.attributes('aria-label')).toBe('Later')
+    expect(sections[4]!.attributes('aria-label')).toBe('Past')
+  })
+
+  it('does not render date subheader in "Today" section', () => {
+    const wrapper = mountList()
+    const todaySection = wrapper.findAll('.event-section')[0]!
+    expect(todaySection.find('.date-subheader').exists()).toBe(false)
+  })
+
+  it('renders date subheaders in non-today sections', () => {
+    const wrapper = mountList()
+    const thisWeekSection = wrapper.findAll('.event-section')[1]!
+    expect(thisWeekSection.find('.date-subheader').exists()).toBe(true)
+
+    const nextWeekSection = wrapper.findAll('.event-section')[2]!
+    expect(nextWeekSection.find('.date-subheader').exists()).toBe(true)
+
+    const laterSection = wrapper.findAll('.event-section')[3]!
+    expect(laterSection.find('.date-subheader').exists()).toBe(true)
+
+    const pastSection = wrapper.findAll('.event-section')[4]!
+    expect(pastSection.find('.date-subheader').exists()).toBe(true)
+  })
+})

frontend/src/components/__tests__/RsvpBar.spec.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsvpBar from '../RsvpBar.vue'
+
+describe('RsvpBar', () => {
+  it('renders CTA button when hasRsvp is false', () => {
+    const wrapper = mount(RsvpBar)
+    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
+    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending")
+    expect(wrapper.find('.rsvp-bar__status').exists()).toBe(false)
+  })
+
+  it('renders status text when hasRsvp is true', () => {
+    const wrapper = mount(RsvpBar, { props: { hasRsvp: true } })
+    expect(wrapper.find('.rsvp-bar__status').exists()).toBe(true)
+    expect(wrapper.find('.rsvp-bar__text').text()).toBe("You're attending!")
+    expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(false)
+  })
+
+  it('emits open when CTA button is clicked', async () => {
+    const wrapper = mount(RsvpBar)
+    await wrapper.find('.rsvp-bar__cta-inner').trigger('click')
+    expect(wrapper.emitted('open')).toHaveLength(1)
+  })
+
+  it('does not render CTA button when hasRsvp is true', () => {
+    const wrapper = mount(RsvpBar, { props: { hasRsvp: true } })
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+})

frontend/src/components/__tests__/SectionHeader.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SectionHeader from '../SectionHeader.vue'
+
+describe('SectionHeader', () => {
+  it('renders the section label as an h2', () => {
+    const wrapper = mount(SectionHeader, { props: { label: 'Today' } })
+    const h2 = wrapper.find('h2')
+    expect(h2.exists()).toBe(true)
+    expect(h2.text()).toBe('Today')
+  })
+
+  it('does not apply emphasized class by default', () => {
+    const wrapper = mount(SectionHeader, { props: { label: 'Later' } })
+    expect(wrapper.find('.section-header--emphasized').exists()).toBe(false)
+  })
+
+  it('applies emphasized class when emphasized prop is true', () => {
+    const wrapper = mount(SectionHeader, { props: { label: 'Today', emphasized: true } })
+    expect(wrapper.find('.section-header--emphasized').exists()).toBe(true)
+  })
+
+  it('does not apply emphasized class when emphasized prop is false', () => {
+    const wrapper = mount(SectionHeader, { props: { label: 'Past', emphasized: false } })
+    expect(wrapper.find('.section-header--emphasized').exists()).toBe(false)
+  })
+})

frontend/src/components/__tests__/useEventGrouping.spec.ts

@@ -0,0 +1,157 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { useEventGrouping } from '../../composables/useEventGrouping'
+import type { StoredEvent } from '../../composables/useEventStorage'
+
+function makeEvent(overrides: Partial<StoredEvent> & { dateTime: string }): StoredEvent {
+  return {
+    eventToken: `evt-${Math.random().toString(36).slice(2, 8)}`,
+    title: 'Test Event',
+    ...overrides,
+  }
+}
+
+describe('useEventGrouping', () => {
+  // Fixed "now": Wednesday, 2026-03-11 12:00 local
+  const NOW = new Date(2026, 2, 11, 12, 0, 0)
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(NOW)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('returns empty array when no events', () => {
+    const sections = useEventGrouping([], NOW)
+    expect(sections).toEqual([])
+  })
+
+  it('classifies a today event into "today" section', () => {
+    const event = makeEvent({ dateTime: '2026-03-11T18:30:00' })
+    const sections = useEventGrouping([event], NOW)
+    expect(sections).toHaveLength(1)
+    expect(sections[0]!.key).toBe('today')
+    expect(sections[0]!.label).toBe('Today')
+    expect(sections[0]!.dateGroups[0]!.events).toHaveLength(1)
+  })
+
+  it('classifies events into all five sections', () => {
+    const events = [
+      makeEvent({ title: 'Today', dateTime: '2026-03-11T10:00:00' }),
+      makeEvent({ title: 'This Week', dateTime: '2026-03-13T10:00:00' }), // Friday (same week)
+      makeEvent({ title: 'Next Week', dateTime: '2026-03-16T10:00:00' }), // Monday next week
+      makeEvent({ title: 'Later', dateTime: '2026-03-30T10:00:00' }), // far future
+      makeEvent({ title: 'Past', dateTime: '2026-03-09T10:00:00' }), // Monday (past)
+    ]
+    const sections = useEventGrouping(events, NOW)
+    expect(sections).toHaveLength(5)
+    expect(sections[0]!.key).toBe('today')
+    expect(sections[1]!.key).toBe('thisWeek')
+    expect(sections[2]!.key).toBe('nextWeek')
+    expect(sections[3]!.key).toBe('later')
+    expect(sections[4]!.key).toBe('past')
+  })
+
+  it('omits empty sections', () => {
+    const events = [
+      makeEvent({ title: 'Today', dateTime: '2026-03-11T10:00:00' }),
+      makeEvent({ title: 'Past', dateTime: '2026-03-01T10:00:00' }),
+    ]
+    const sections = useEventGrouping(events, NOW)
+    expect(sections).toHaveLength(2)
+    expect(sections[0]!.key).toBe('today')
+    expect(sections[1]!.key).toBe('past')
+  })
+
+  it('sorts upcoming events ascending by time', () => {
+    const events = [
+      makeEvent({ title: 'Later', dateTime: '2026-03-11T20:00:00' }),
+      makeEvent({ title: 'Earlier', dateTime: '2026-03-11T08:00:00' }),
+    ]
+    const sections = useEventGrouping(events, NOW)
+    const todayEvents = sections[0]!.dateGroups[0]!.events
+    expect(todayEvents[0]!.title).toBe('Earlier')
+    expect(todayEvents[1]!.title).toBe('Later')
+  })
+
+  it('sorts past events descending by time (most recent first)', () => {
+    const events = [
+      makeEvent({ title: 'Older', dateTime: '2026-03-01T10:00:00' }),
+      makeEvent({ title: 'Newer', dateTime: '2026-03-09T10:00:00' }),
+    ]
+    const sections = useEventGrouping(events, NOW)
+    const pastEvents = sections[0]!.dateGroups
+    expect(pastEvents[0]!.events[0]!.title).toBe('Newer')
+    expect(pastEvents[1]!.events[0]!.title).toBe('Older')
+  })
+
+  it('groups events by date within a section', () => {
+    const events = [
+      makeEvent({ title: 'Fri AM', dateTime: '2026-03-13T09:00:00' }),
+      makeEvent({ title: 'Fri PM', dateTime: '2026-03-13T18:00:00' }),
+      makeEvent({ title: 'Sat', dateTime: '2026-03-14T12:00:00' }),
+    ]
+    const sections = useEventGrouping(events, NOW)
+    expect(sections[0]!.key).toBe('thisWeek')
+    const dateGroups = sections[0]!.dateGroups
+    expect(dateGroups).toHaveLength(2) // Friday and Saturday
+    expect(dateGroups[0]!.events).toHaveLength(2) // Two Friday events
+    expect(dateGroups[1]!.events).toHaveLength(1) // One Saturday event
+  })
+
+  it('sets showSubheader=false for "today" section', () => {
+    const event = makeEvent({ dateTime: '2026-03-11T18:00:00' })
+    const sections = useEventGrouping([event], NOW)
+    expect(sections[0]!.dateGroups[0]!.showSubheader).toBe(false)
+  })
+
+  it('sets showSubheader=true for non-today sections', () => {
+    const events = [
+      makeEvent({ dateTime: '2026-03-13T10:00:00' }), // thisWeek
+      makeEvent({ dateTime: '2026-03-30T10:00:00' }), // later (beyond next week)
+      makeEvent({ dateTime: '2026-03-01T10:00:00' }), // past
+    ]
+    const sections = useEventGrouping(events, NOW)
+    for (const section of sections) {
+      for (const group of section.dateGroups) {
+        expect(group.showSubheader).toBe(true)
+      }
+    }
+  })
+
+  it('sets emphasized=true only for "today" section', () => {
+    const events = [
+      makeEvent({ dateTime: '2026-03-11T18:00:00' }),
+      makeEvent({ dateTime: '2026-03-30T10:00:00' }),
+    ]
+    const sections = useEventGrouping(events, NOW)
+    expect(sections[0]!.emphasized).toBe(true) // today
+    expect(sections[1]!.emphasized).toBe(false) // later
+  })
+
+  it('on Sunday, tomorrow (Monday) goes to "nextWeek" not "thisWeek"', () => {
+    // Sunday 2026-03-15
+    const sunday = new Date(2026, 2, 15, 12, 0, 0)
+    const mondayEvent = makeEvent({ title: 'Monday', dateTime: '2026-03-16T10:00:00' })
+    const sections = useEventGrouping([mondayEvent], sunday)
+    expect(sections).toHaveLength(1)
+    expect(sections[0]!.key).toBe('nextWeek')
+  })
+
+  it('on Sunday, today events still appear under "today"', () => {
+    const sunday = new Date(2026, 2, 15, 12, 0, 0)
+    const todayEvent = makeEvent({ dateTime: '2026-03-15T18:00:00' })
+    const sections = useEventGrouping([todayEvent], sunday)
+    expect(sections[0]!.key).toBe('today')
+  })
+
+  it('dateGroup labels are formatted via Intl', () => {
+    const event = makeEvent({ dateTime: '2026-03-13T10:00:00' }) // Friday
+    const sections = useEventGrouping([event], NOW)
+    const label = sections[0]!.dateGroups[0]!.label
+    // The exact format depends on locale, but should contain the day number
+    expect(label).toContain('13')
+  })
+})

frontend/src/composables/__tests__/useEventStorage.spec.ts

@@ -43,7 +43,6 @@ describe('useEventStorage', () => {
       organizerToken: 'org-456',
       title: 'Birthday',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     const events = getStoredEvents()
@@ -61,7 +60,6 @@ describe('useEventStorage', () => {
       organizerToken: 'org-456',
       title: 'Test',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     expect(getOrganizerToken('abc-123')).toBe('org-456')
@@ -79,14 +77,12 @@ describe('useEventStorage', () => {
       eventToken: 'event-1',
       title: 'First',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     saveCreatedEvent({
       eventToken: 'event-2',
       title: 'Second',
       dateTime: '2026-07-15T20:00:00+02:00',
-      expiryDate: '2026-08-15',
     })
 
     const events = getStoredEvents()
@@ -102,18 +98,174 @@ describe('useEventStorage', () => {
       eventToken: 'abc-123',
       title: 'Old Title',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     saveCreatedEvent({
       eventToken: 'abc-123',
       title: 'New Title',
       dateTime: '2026-06-15T20:00:00+02:00',
-      expiryDate: '2026-07-15',
     })
 
     const events = getStoredEvents()
     expect(events).toHaveLength(1)
     expect(events[0]!.title).toBe('New Title')
   })
+
+  it('saves and retrieves RSVP for an existing event', () => {
+    const { saveCreatedEvent, saveRsvp, getRsvp } = useEventStorage()
+
+    saveCreatedEvent({
+      eventToken: 'abc-123',
+      title: 'Birthday',
+      dateTime: '2026-06-15T20:00:00+02:00',
+    })
+
+    saveRsvp('abc-123', 'rsvp-token-1', 'Max', 'Birthday', '2026-06-15T20:00:00+02:00')
+
+    const rsvp = getRsvp('abc-123')
+    expect(rsvp).toEqual({ rsvpToken: 'rsvp-token-1', rsvpName: 'Max' })
+  })
+
+  it('saves RSVP for a new event (not previously stored)', () => {
+    const { saveRsvp, getRsvp, getStoredEvents } = useEventStorage()
+
+    saveRsvp('new-event', 'rsvp-token-2', 'Anna', 'Party', '2026-08-01T18:00:00+02:00')
+
+    const rsvp = getRsvp('new-event')
+    expect(rsvp).toEqual({ rsvpToken: 'rsvp-token-2', rsvpName: 'Anna' })
+
+    const events = getStoredEvents()
+    expect(events).toHaveLength(1)
+    expect(events[0]!.eventToken).toBe('new-event')
+    expect(events[0]!.title).toBe('Party')
+  })
+
+  it('returns undefined RSVP for event without RSVP', () => {
+    const { saveCreatedEvent, getRsvp } = useEventStorage()
+
+    saveCreatedEvent({
+      eventToken: 'abc-123',
+      title: 'Test',
+      dateTime: '2026-06-15T20:00:00+02:00',
+    })
+
+    expect(getRsvp('abc-123')).toBeUndefined()
+  })
+
+  it('returns undefined RSVP for unknown event', () => {
+    const { getRsvp } = useEventStorage()
+    expect(getRsvp('unknown')).toBeUndefined()
+  })
+
+  it('removes an event by token', () => {
+    const { saveCreatedEvent, getStoredEvents, removeEvent } = useEventStorage()
+
+    saveCreatedEvent({
+      eventToken: 'event-1',
+      title: 'First',
+      dateTime: '2026-06-15T20:00:00+02:00',
+    })
+
+    saveCreatedEvent({
+      eventToken: 'event-2',
+      title: 'Second',
+      dateTime: '2026-07-15T20:00:00+02:00',
+    })
+
+    removeEvent('event-1')
+
+    const events = getStoredEvents()
+    expect(events).toHaveLength(1)
+    expect(events[0]!.eventToken).toBe('event-2')
+  })
+
+  it('removeEvent does nothing for unknown token', () => {
+    const { saveCreatedEvent, getStoredEvents, removeEvent } = useEventStorage()
+
+    saveCreatedEvent({
+      eventToken: 'event-1',
+      title: 'First',
+      dateTime: '2026-06-15T20:00:00+02:00',
+    })
+
+    removeEvent('nonexistent')
+
+    expect(getStoredEvents()).toHaveLength(1)
+  })
+})
+
+describe('isValidStoredEvent', () => {
+  // Import directly since it's an exported function
+  let isValidStoredEvent: (e: unknown) => boolean
+
+  beforeEach(async () => {
+    const mod = await import('../useEventStorage')
+    isValidStoredEvent = mod.isValidStoredEvent
+  })
+
+  it('returns true for a valid event', () => {
+    expect(
+      isValidStoredEvent({
+        eventToken: 'abc-123',
+        title: 'Birthday',
+        dateTime: '2026-06-15T20:00:00+02:00',
+        }),
+    ).toBe(true)
+  })
+
+  it('returns false for null', () => {
+    expect(isValidStoredEvent(null)).toBe(false)
+  })
+
+  it('returns false for non-object', () => {
+    expect(isValidStoredEvent('string')).toBe(false)
+  })
+
+  it('returns false when eventToken is missing', () => {
+    expect(
+      isValidStoredEvent({
+        title: 'Birthday',
+        dateTime: '2026-06-15T20:00:00+02:00',
+      }),
+    ).toBe(false)
+  })
+
+  it('returns false when eventToken is empty', () => {
+    expect(
+      isValidStoredEvent({
+        eventToken: '',
+        title: 'Birthday',
+        dateTime: '2026-06-15T20:00:00+02:00',
+      }),
+    ).toBe(false)
+  })
+
+  it('returns false when title is missing', () => {
+    expect(
+      isValidStoredEvent({
+        eventToken: 'abc-123',
+        dateTime: '2026-06-15T20:00:00+02:00',
+      }),
+    ).toBe(false)
+  })
+
+  it('returns false when dateTime is invalid', () => {
+    expect(
+      isValidStoredEvent({
+        eventToken: 'abc-123',
+        title: 'Birthday',
+        dateTime: 'not-a-date',
+      }),
+    ).toBe(false)
+  })
+
+  it('returns false when dateTime is empty', () => {
+    expect(
+      isValidStoredEvent({
+        eventToken: 'abc-123',
+        title: 'Birthday',
+        dateTime: '',
+      }),
+    ).toBe(false)
+  })
 })

frontend/src/composables/__tests__/useRelativeTime.spec.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import { formatRelativeTime } from '../useRelativeTime'
+
+describe('formatRelativeTime', () => {
+  const now = new Date('2026-06-15T12:00:00Z')
+
+  it('formats seconds ago', () => {
+    const result = formatRelativeTime('2026-06-15T11:59:30Z', now)
+    expect(result).toMatch(/30 seconds ago/)
+  })
+
+  it('formats minutes ago', () => {
+    const result = formatRelativeTime('2026-06-15T11:55:00Z', now)
+    expect(result).toMatch(/5 minutes ago/)
+  })
+
+  it('formats hours ago', () => {
+    const result = formatRelativeTime('2026-06-15T09:00:00Z', now)
+    expect(result).toMatch(/3 hours ago/)
+  })
+
+  it('formats days ago', () => {
+    const result = formatRelativeTime('2026-06-13T12:00:00Z', now)
+    expect(result).toMatch(/2 days ago/)
+  })
+
+  it('formats weeks ago', () => {
+    const result = formatRelativeTime('2026-06-01T12:00:00Z', now)
+    expect(result).toMatch(/2 weeks ago/)
+  })
+
+  it('formats months ago', () => {
+    const result = formatRelativeTime('2026-03-15T12:00:00Z', now)
+    expect(result).toMatch(/3 months ago/)
+  })
+
+  it('formats years ago', () => {
+    const result = formatRelativeTime('2024-06-15T12:00:00Z', now)
+    expect(result).toMatch(/2 years ago/)
+  })
+
+  it('formats future seconds', () => {
+    const result = formatRelativeTime('2026-06-15T12:00:30Z', now)
+    expect(result).toMatch(/in 30 seconds/)
+  })
+
+  it('formats future days', () => {
+    const result = formatRelativeTime('2026-06-18T12:00:00Z', now)
+    expect(result).toMatch(/in 3 days/)
+  })
+
+  it('formats future months', () => {
+    const result = formatRelativeTime('2026-09-15T12:00:00Z', now)
+    expect(result).toMatch(/in 3 months/)
+  })
+
+  it('formats "now" for zero difference', () => {
+    const result = formatRelativeTime('2026-06-15T12:00:00Z', now)
+    // Intl.RelativeTimeFormat with numeric: 'auto' returns "now" for 0 seconds
+    expect(result).toMatch(/now/)
+  })
+
+  it('formats yesterday', () => {
+    const result = formatRelativeTime('2026-06-14T12:00:00Z', now)
+    expect(result).toMatch(/yesterday|1 day ago/)
+  })
+
+  it('formats tomorrow', () => {
+    const result = formatRelativeTime('2026-06-16T12:00:00Z', now)
+    expect(result).toMatch(/tomorrow|in 1 day/)
+  })
+})

frontend/src/composables/useEventGrouping.ts

@@ -0,0 +1,149 @@
+import type { StoredEvent } from './useEventStorage'
+
+export type SectionKey = 'today' | 'thisWeek' | 'nextWeek' | 'later' | 'past'
+
+export interface DateGroup {
+  dateKey: string
+  label: string
+  events: StoredEvent[]
+  showSubheader: boolean
+}
+
+export interface EventSection {
+  key: SectionKey
+  label: string
+  dateGroups: DateGroup[]
+  emphasized: boolean
+}
+
+const SECTION_ORDER: SectionKey[] = ['today', 'thisWeek', 'nextWeek', 'later', 'past']
+
+const SECTION_LABELS: Record<SectionKey, string> = {
+  today: 'Today',
+  thisWeek: 'This Week',
+  nextWeek: 'Next Week',
+  later: 'Later',
+  past: 'Past',
+}
+
+function startOfDay(date: Date): Date {
+  const d = new Date(date)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
+function endOfDay(date: Date): Date {
+  const d = new Date(date)
+  d.setHours(23, 59, 59, 999)
+  return d
+}
+
+function endOfWeek(date: Date): Date {
+  const d = new Date(date)
+  const dayOfWeek = d.getDay() // 0=Sun, 1=Mon, ..., 6=Sat
+  // ISO week: Monday is first day. End of week = Sunday.
+  // If today is Sunday (0), end of week is today.
+  // Otherwise, days until Sunday = 7 - dayOfWeek
+  const daysUntilSunday = dayOfWeek === 0 ? 0 : 7 - dayOfWeek
+  d.setDate(d.getDate() + daysUntilSunday)
+  return endOfDay(d)
+}
+
+function endOfNextWeek(date: Date): Date {
+  const thisWeekEnd = endOfWeek(date)
+  const d = new Date(thisWeekEnd)
+  d.setDate(d.getDate() + 7)
+  return endOfDay(d)
+}
+
+function toDateKey(date: Date): string {
+  const y = date.getFullYear()
+  const m = String(date.getMonth() + 1).padStart(2, '0')
+  const d = String(date.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
+}
+
+function formatDateLabel(date: Date): string {
+  return new Intl.DateTimeFormat(undefined, {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+  }).format(date)
+}
+
+function classifyEvent(eventDate: Date, todayStart: Date, todayEnd: Date, weekEnd: Date, nextWeekEnd: Date): SectionKey {
+  if (eventDate < todayStart) return 'past'
+  if (eventDate <= todayEnd) return 'today'
+  if (eventDate <= weekEnd) return 'thisWeek'
+  if (eventDate <= nextWeekEnd) return 'nextWeek'
+  return 'later'
+}
+
+export function useEventGrouping(events: StoredEvent[], now: Date = new Date()): EventSection[] {
+  const todayStart = startOfDay(now)
+  const todayEnd = endOfDay(now)
+  const weekEnd = endOfWeek(now)
+  const nextWeekEnd = endOfNextWeek(now)
+
+  // Classify events into sections
+  const buckets: Record<SectionKey, StoredEvent[]> = {
+    today: [],
+    thisWeek: [],
+    nextWeek: [],
+    later: [],
+    past: [],
+  }
+
+  for (const event of events) {
+    const eventDate = new Date(event.dateTime)
+    const section = classifyEvent(eventDate, todayStart, todayEnd, weekEnd, nextWeekEnd)
+    buckets[section].push(event)
+  }
+
+  // Build sections
+  const sections: EventSection[] = []
+
+  for (const key of SECTION_ORDER) {
+    const sectionEvents = buckets[key]
+    if (sectionEvents.length === 0) continue
+
+    // Sort events
+    const ascending = key !== 'past'
+    sectionEvents.sort((a, b) => {
+      const diff = new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime()
+      return ascending ? diff : -diff
+    })
+
+    // Group by date
+    const dateGroupMap = new Map<string, StoredEvent[]>()
+    for (const event of sectionEvents) {
+      const dateKey = toDateKey(new Date(event.dateTime))
+      const group = dateGroupMap.get(dateKey)
+      if (group) {
+        group.push(event)
+      } else {
+        dateGroupMap.set(dateKey, [event])
+      }
+    }
+
+    // Convert to DateGroup array (order preserved from sorted events)
+    const dateGroups: DateGroup[] = []
+    for (const [dateKey, groupEvents] of dateGroupMap) {
+      dateGroups.push({
+        dateKey,
+        label: formatDateLabel(new Date(groupEvents[0]!.dateTime)),
+        events: groupEvents,
+        showSubheader: key !== 'today',
+      })
+    }
+
+    sections.push({
+      key,
+      label: SECTION_LABELS[key],
+      dateGroups,
+      emphasized: key === 'today',
+    })
+  }
+
+  return sections
+}

frontend/src/composables/useEventStorage.ts

@@ -3,11 +3,30 @@ export interface StoredEvent {
   organizerToken?: string
   title: string
   dateTime: string
-  expiryDate: string
+  rsvpToken?: string
+  rsvpName?: string
 }
 
+import { ref } from 'vue'
+
 const STORAGE_KEY = 'fete:events'
 
+const version = ref(0)
+
+export function isValidStoredEvent(e: unknown): e is StoredEvent {
+  if (typeof e !== 'object' || e === null) return false
+  const obj = e as Record<string, unknown>
+  return (
+    typeof obj.eventToken === 'string' &&
+    obj.eventToken.length > 0 &&
+    typeof obj.title === 'string' &&
+    obj.title.length > 0 &&
+    typeof obj.dateTime === 'string' &&
+    obj.dateTime.length > 0 &&
+    !isNaN(new Date(obj.dateTime).getTime())
+  )
+}
+
 function readEvents(): StoredEvent[] {
   try {
     const raw = localStorage.getItem(STORAGE_KEY)
@@ -19,6 +38,7 @@ function readEvents(): StoredEvent[] {
 
 function writeEvents(events: StoredEvent[]): void {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(events))
+  version.value++
 }
 
 export function useEventStorage() {
@@ -29,6 +49,7 @@ export function useEventStorage() {
   }
 
   function getStoredEvents(): StoredEvent[] {
+    void version.value
     return readEvents()
   }
 
@@ -37,5 +58,40 @@ export function useEventStorage() {
     return event?.organizerToken
   }
 
-  return { saveCreatedEvent, getStoredEvents, getOrganizerToken }
+  function saveRsvp(eventToken: string, rsvpToken: string, rsvpName: string, title: string, dateTime: string): void {
+    const events = readEvents()
+    const existing = events.find((e) => e.eventToken === eventToken)
+    if (existing) {
+      existing.rsvpToken = rsvpToken
+      existing.rsvpName = rsvpName
+    } else {
+      events.push({ eventToken, title, dateTime, rsvpToken, rsvpName })
+    }
+    writeEvents(events)
+  }
+
+  function getRsvp(eventToken: string): { rsvpToken: string; rsvpName: string } | undefined {
+    const event = readEvents().find((e) => e.eventToken === eventToken)
+    if (event?.rsvpToken && event?.rsvpName) {
+      return { rsvpToken: event.rsvpToken, rsvpName: event.rsvpName }
+    }
+    return undefined
+  }
+
+  function removeRsvp(eventToken: string): void {
+    const events = readEvents()
+    const event = events.find((e) => e.eventToken === eventToken)
+    if (event) {
+      delete event.rsvpToken
+      delete event.rsvpName
+      writeEvents(events)
+    }
+  }
+
+  function removeEvent(eventToken: string): void {
+    const events = readEvents().filter((e) => e.eventToken !== eventToken)
+    writeEvents(events)
+  }
+
+  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeRsvp, removeEvent }
 }