From 0a1d1db9ec508fbafc2f313514ad20669320be30 Mon Sep 17 00:00:00 2001
From: zias <vanneszias@icloud.com>
Date: Tue, 3 Mar 2026 14:02:29 +0100
Subject: [PATCH] feat:simplify dx and improve payment functions

---
 .../homepage/EventRegistrationForm.tsx        | 1351 +----------------
 .../src/components/registration/GuestList.tsx |  200 +++
 .../components/registration/PerformerForm.tsx |  463 ++++++
 .../components/registration/SuccessScreen.tsx |   72 +
 .../components/registration/TypeSelector.tsx  |  114 ++
 .../components/registration/WatcherForm.tsx   |  403 +++++
 apps/web/src/lib/registration.ts              |  117 ++
 apps/web/src/routes/admin.tsx                 |   51 +-
 apps/web/src/routes/manage.$token.tsx         | 1302 +++++++---------
 packages/api/src/routers/index.ts             |  318 ++--
 10 files changed, 2167 insertions(+), 2224 deletions(-)
 create mode 100644 apps/web/src/components/registration/GuestList.tsx
 create mode 100644 apps/web/src/components/registration/PerformerForm.tsx
 create mode 100644 apps/web/src/components/registration/SuccessScreen.tsx
 create mode 100644 apps/web/src/components/registration/TypeSelector.tsx
 create mode 100644 apps/web/src/components/registration/WatcherForm.tsx
 create mode 100644 apps/web/src/lib/registration.ts

diff --git a/apps/web/src/components/homepage/EventRegistrationForm.tsx b/apps/web/src/components/homepage/EventRegistrationForm.tsx
index 47da6a5..c4f73e8 100644
--- a/apps/web/src/components/homepage/EventRegistrationForm.tsx
+++ b/apps/web/src/components/homepage/EventRegistrationForm.tsx
@@ -1,424 +1,26 @@
-"use client";
+import { useState } from "react";
+import { PerformerForm } from "@/components/registration/PerformerForm";
+import { SuccessScreen } from "@/components/registration/SuccessScreen";
+import { TypeSelector } from "@/components/registration/TypeSelector";
+import { WatcherForm } from "@/components/registration/WatcherForm";
 
-import { useMutation } from "@tanstack/react-query";
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-import { orpc } from "@/utils/orpc";
-
-type RegistrationType = "performer" | "watcher" | null;
-
-interface GuestEntry {
-	firstName: string;
-	lastName: string;
-	email: string;
-	phone: string;
-}
-
-interface GuestErrors {
-	firstName?: string;
-	lastName?: string;
-	email?: string;
-	phone?: string;
-}
-
-interface PerformerErrors {
-	firstName?: string;
-	lastName?: string;
-	email?: string;
-	phone?: string;
-	artForm?: string;
-	isOver16?: string;
-}
-
-interface WatcherErrors {
-	firstName?: string;
-	lastName?: string;
-	email?: string;
-	phone?: string;
-}
+type RegistrationType = "performer" | "watcher";
 
 export default function EventRegistrationForm() {
-	const [selectedType, setSelectedType] = useState<RegistrationType>(null);
+	const [selectedType, setSelectedType] = useState<RegistrationType | null>(
+		null,
+	);
 	const [successToken, setSuccessToken] = useState<string | null>(null);
 
-	// Performer form state
-	const [performerData, setPerformerData] = useState({
-		firstName: "",
-		lastName: "",
-		email: "",
-		phone: "",
-		artForm: "",
-		experience: "",
-		isOver16: false,
-		extraQuestions: "",
-	});
-	const [performerErrors, setPerformerErrors] = useState<PerformerErrors>({});
-	const [performerTouched, setPerformerTouched] = useState<
-		Record<string, boolean>
-	>({});
-
-	// Watcher form state
-	const [watcherData, setWatcherData] = useState({
-		firstName: "",
-		lastName: "",
-		email: "",
-		phone: "",
-		extraQuestions: "",
-	});
-	const [watcherErrors, setWatcherErrors] = useState<WatcherErrors>({});
-	const [watcherTouched, setWatcherTouched] = useState<Record<string, boolean>>(
-		{},
-	);
-
-	// Guests state (bezoeker only)
-	const [guests, setGuests] = useState<GuestEntry[]>([]);
-	const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
-
-	const submitMutation = useMutation({
-		...orpc.submitRegistration.mutationOptions(),
-		onSuccess: async (data, variables) => {
-			if (!data.managementToken) return;
-
-			// If it's a performer, show success immediately
-			if (variables.registrationType === "performer") {
-				setSuccessToken(data.managementToken);
-				return;
-			}
-
-			// For watchers, create a checkout and redirect
-			try {
-				const checkoutResult = await orpc.createCheckout.call({
-					token: data.managementToken,
-				});
-
-				if (checkoutResult.checkoutUrl) {
-					window.location.href = checkoutResult.checkoutUrl;
-				} else {
-					toast.error("Kon betalingspagina niet laden");
-				}
-			} catch (error) {
-				console.error("Checkout error:", error);
-				toast.error("Er is iets misgegaan bij het aanmaken van de betaling");
-			}
-		},
-		onError: (error) => {
-			toast.error(`Er is iets misgegaan: ${error.message}`);
-		},
-	});
-
-	const handleReset = useCallback(() => {
-		setSuccessToken(null);
-		setSelectedType(null);
-	}, []);
-
-	const validateTextField = (
-		value: string,
-		required: boolean,
-		label: string,
-		minLen = 2,
-	): string | undefined => {
-		if (required && !value.trim()) return `${label} is verplicht`;
-		if (value.trim() && value.length < minLen)
-			return `${label} moet minimaal ${minLen} tekens bevatten`;
-		return undefined;
-	};
-
-	const validateEmail = (value: string): string | undefined => {
-		if (!value.trim()) return "E-mail is verplicht";
-		if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-			return "Voer een geldig e-mailadres in";
-		return undefined;
-	};
-
-	const validatePhone = (value: string): string | undefined => {
-		if (value && !/^[\d\s\-+()]{10,}$/.test(value.replace(/\s/g, ""))) {
-			return "Voer een geldig telefoonnummer in";
-		}
-		return undefined;
-	};
-
-	const validatePerformerForm = useCallback((): boolean => {
-		const errs: PerformerErrors = {
-			firstName: validateTextField(performerData.firstName, true, "Voornaam"),
-			lastName: validateTextField(performerData.lastName, true, "Achternaam"),
-			email: validateEmail(performerData.email),
-			phone: validatePhone(performerData.phone),
-			artForm: !performerData.artForm.trim()
-				? "Kunstvorm is verplicht"
-				: undefined,
-			isOver16: !performerData.isOver16
-				? "Je moet 16 jaar of ouder zijn om op te treden"
-				: undefined,
-		};
-		setPerformerErrors(errs);
-		setPerformerTouched({
-			firstName: true,
-			lastName: true,
-			email: true,
-			phone: true,
-			artForm: true,
-			isOver16: true,
-		});
-		return !Object.values(errs).some(Boolean);
-	}, [performerData]);
-
-	const validateWatcherForm = useCallback((): boolean => {
-		const errs: WatcherErrors = {
-			firstName: validateTextField(watcherData.firstName, true, "Voornaam"),
-			lastName: validateTextField(watcherData.lastName, true, "Achternaam"),
-			email: validateEmail(watcherData.email),
-			phone: validatePhone(watcherData.phone),
-		};
-		setWatcherErrors(errs);
-		setWatcherTouched({
-			firstName: true,
-			lastName: true,
-			email: true,
-			phone: true,
-		});
-		return !Object.values(errs).some(Boolean);
-	}, [watcherData]);
-
-	const handlePerformerChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			const { name, value, type } = e.target;
-			const checked = (e.target as HTMLInputElement).checked;
-			const newValue = type === "checkbox" ? checked : value;
-			setPerformerData((prev) => ({ ...prev, [name]: newValue }));
-			if (type !== "checkbox" && performerTouched[name]) {
-				const fieldErrs: Record<string, string | undefined> = {
-					firstName: validateTextField(
-						name === "firstName" ? value : performerData.firstName,
-						true,
-						"Voornaam",
-					),
-					lastName: validateTextField(
-						name === "lastName" ? value : performerData.lastName,
-						true,
-						"Achternaam",
-					),
-					email:
-						name === "email"
-							? validateEmail(value)
-							: validateEmail(performerData.email),
-					phone: name === "phone" ? validatePhone(value) : undefined,
-					artForm:
-						name === "artForm" && !value.trim()
-							? "Kunstvorm is verplicht"
-							: undefined,
-				};
-				setPerformerErrors((prev) => ({ ...prev, [name]: fieldErrs[name] }));
-			}
-		},
-		[performerTouched, performerData],
-	);
-
-	const handlePerformerBlur = useCallback(
-		(e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			const { name, value } = e.target;
-			setPerformerTouched((prev) => ({ ...prev, [name]: true }));
-			const errMap: Record<string, string | undefined> = {
-				firstName: validateTextField(value, true, "Voornaam"),
-				lastName: validateTextField(value, true, "Achternaam"),
-				email: validateEmail(value),
-				phone: validatePhone(value),
-				artForm: !value.trim() ? "Kunstvorm is verplicht" : undefined,
-			};
-			setPerformerErrors((prev) => ({ ...prev, [name]: errMap[name] }));
-		},
-		[],
-	);
-
-	const handleWatcherChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			const { name, value } = e.target;
-			setWatcherData((prev) => ({ ...prev, [name]: value }));
-			if (watcherTouched[name]) {
-				const errMap: Record<string, string | undefined> = {
-					firstName: validateTextField(value, true, "Voornaam"),
-					lastName: validateTextField(value, true, "Achternaam"),
-					email: validateEmail(value),
-					phone: validatePhone(value),
-				};
-				setWatcherErrors((prev) => ({ ...prev, [name]: errMap[name] }));
-			}
-		},
-		[watcherTouched],
-	);
-
-	const handleWatcherBlur = useCallback(
-		(e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			const { name, value } = e.target;
-			setWatcherTouched((prev) => ({ ...prev, [name]: true }));
-			const errMap: Record<string, string | undefined> = {
-				firstName: validateTextField(value, true, "Voornaam"),
-				lastName: validateTextField(value, true, "Achternaam"),
-				email: validateEmail(value),
-				phone: validatePhone(value),
-			};
-			setWatcherErrors((prev) => ({ ...prev, [name]: errMap[name] }));
-		},
-		[],
-	);
-
-	const handlePerformerSubmit = useCallback(
-		(e: React.FormEvent) => {
-			e.preventDefault();
-			if (!validatePerformerForm()) {
-				toast.error("Controleer je invoer");
-				return;
-			}
-			submitMutation.mutate({
-				firstName: performerData.firstName.trim(),
-				lastName: performerData.lastName.trim(),
-				email: performerData.email.trim(),
-				phone: performerData.phone.trim() || undefined,
-				registrationType: "performer",
-				artForm: performerData.artForm.trim() || undefined,
-				experience: performerData.experience.trim() || undefined,
-				isOver16: performerData.isOver16,
-				extraQuestions: performerData.extraQuestions.trim() || undefined,
-			});
-		},
-		[performerData, submitMutation, validatePerformerForm],
-	);
-
-	const validateGuests = useCallback((): boolean => {
-		const errs: GuestErrors[] = guests.map((g) => ({
-			firstName: !g.firstName.trim() ? "Voornaam is verplicht" : undefined,
-			lastName: !g.lastName.trim() ? "Achternaam is verplicht" : undefined,
-			email:
-				g.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(g.email.trim())
-					? "Voer een geldig e-mailadres in"
-					: undefined,
-			phone:
-				g.phone.trim() && !/^[\d\s\-+()]{10,}$/.test(g.phone.replace(/\s/g, ""))
-					? "Voer een geldig telefoonnummer in"
-					: undefined,
-		}));
-		setGuestErrors(errs);
-		return !errs.some((e) => Object.values(e).some(Boolean));
-	}, [guests]);
-
-	const handleAddGuest = useCallback(() => {
-		if (guests.length >= 9) return;
-		setGuests((prev) => [
-			...prev,
-			{ firstName: "", lastName: "", email: "", phone: "" },
-		]);
-		setGuestErrors((prev) => [...prev, {}]);
-	}, [guests.length]);
-
-	const handleRemoveGuest = useCallback((index: number) => {
-		setGuests((prev) => prev.filter((_, i) => i !== index));
-		setGuestErrors((prev) => prev.filter((_, i) => i !== index));
-	}, []);
-
-	const handleGuestChange = useCallback(
-		(index: number, field: keyof GuestEntry, value: string) => {
-			setGuests((prev) => {
-				const next = [...prev];
-				next[index] = { ...next[index], [field]: value } as GuestEntry;
-				return next;
-			});
-		},
-		[],
-	);
-
-	const handleWatcherSubmit = useCallback(
-		(e: React.FormEvent) => {
-			e.preventDefault();
-			const watcherValid = validateWatcherForm();
-			const guestsValid = validateGuests();
-			if (!watcherValid || !guestsValid) {
-				toast.error("Controleer je invoer");
-				return;
-			}
-			submitMutation.mutate({
-				firstName: watcherData.firstName.trim(),
-				lastName: watcherData.lastName.trim(),
-				email: watcherData.email.trim(),
-				phone: watcherData.phone.trim() || undefined,
-				registrationType: "watcher",
-				guests: guests.map((g) => ({
-					firstName: g.firstName.trim(),
-					lastName: g.lastName.trim(),
-					email: g.email.trim() || undefined,
-					phone: g.phone.trim() || undefined,
-				})),
-				extraQuestions: watcherData.extraQuestions.trim() || undefined,
-			});
-		},
-		[watcherData, guests, submitMutation, validateWatcherForm, validateGuests],
-	);
-
-	const inputClasses = (hasError: boolean) =>
-		`w-full border-b bg-transparent pb-2 text-lg text-white placeholder:text-white/40 focus:outline-none focus:ring-0 transition-colors ${hasError ? "border-red-400" : "border-white/30 focus:border-white"}`;
-
-	const manageUrl = successToken
-		? `${typeof window !== "undefined" ? window.location.origin : ""}/manage/${successToken}`
-		: "";
-
 	if (successToken) {
 		return (
-			<section
-				id="registration"
-				className="relative z-30 flex w-full items-center justify-center bg-[#214e51]/96 px-6 py-16 md:px-12"
-			>
-				<div className="mx-auto w-full max-w-3xl">
-					<div className="rounded-lg border border-white/20 bg-white/5 p-8 md:p-12">
-						<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-green-400">
-							<svg
-								className="h-8 w-8"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-								strokeWidth={2}
-								aria-label="Succes"
-							>
-								<path
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									d="M5 13l4 4L19 7"
-								/>
-							</svg>
-						</div>
-						<h2 className="mb-4 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
-							Gelukt!
-						</h2>
-						<p className="mb-6 text-lg text-white/80">
-							Je inschrijving is bevestigd. We sturen je zo dadelijk een
-							bevestigingsmail.
-						</p>
-						<div className="mb-8 rounded-lg border border-white/10 bg-white/5 p-6">
-							<p className="mb-2 text-sm text-white/60">
-								Geen mail ontvangen? Gebruik deze link:
-							</p>
-							<a
-								href={manageUrl}
-								className="break-all text-sm text-white/80 underline underline-offset-2 hover:text-white"
-							>
-								{manageUrl}
-							</a>
-						</div>
-						<div className="flex flex-wrap items-center gap-4">
-							<a
-								href={manageUrl}
-								className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
-							>
-								Bekijk mijn inschrijving
-							</a>
-							<button
-								type="button"
-								onClick={handleReset}
-								className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
-							>
-								Nog een inschrijving
-							</button>
-						</div>
-					</div>
-				</div>
-			</section>
+			<SuccessScreen
+				token={successToken}
+				onReset={() => {
+					setSuccessToken(null);
+					setSelectedType(null);
+				}}
+			/>
 		);
 	}
 
@@ -435,926 +37,17 @@ export default function EventRegistrationForm() {
 					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
 				</p>
 
-				{/* Two-column choice cards */}
-				{!selectedType && (
-					<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-						{/* Performer card */}
-						<button
-							type="button"
-							onClick={() => setSelectedType("performer")}
-							className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
-						>
-							{/* Decorative top stripe */}
-							<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-amber-400 to-orange-500 opacity-80" />
+				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
 
-							<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-amber-400/15 text-amber-300">
-								{/* Microphone icon */}
-								<svg
-									className="h-7 w-7"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={1.5}
-									aria-hidden="true"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
-									/>
-								</svg>
-							</div>
-
-							<h3 className="mb-3 font-['Intro',sans-serif] text-2xl text-white md:text-3xl">
-								Ik wil optreden
-							</h3>
-							<p className="mb-6 text-white/70">
-								Deel jouw talent met het publiek. Muziek, theater, dans, comedy
-								— alles is welkom. Je moet 16 jaar of ouder zijn.
-							</p>
-
-							<div className="mt-auto flex items-center gap-2 font-medium text-amber-300 text-sm">
-								<span>Inschrijven als artiest</span>
-								<svg
-									className="h-4 w-4 transition-transform group-hover:translate-x-1"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={2}
-									aria-hidden="true"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
-									/>
-								</svg>
-							</div>
-						</button>
-
-						{/* Watcher card */}
-						<button
-							type="button"
-							onClick={() => setSelectedType("watcher")}
-							className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
-						>
-							{/* Decorative top stripe */}
-							<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 opacity-80" />
-
-							<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-teal-300">
-								{/* Ticket / audience icon */}
-								<svg
-									className="h-7 w-7"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={1.5}
-									aria-hidden="true"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
-									/>
-								</svg>
-							</div>
-
-							<h3 className="mb-3 font-['Intro',sans-serif] text-2xl text-white md:text-3xl">
-								Ik wil komen kijken
-							</h3>
-							<p className="mb-4 text-white/70">
-								Geniet van een avond vol talent en kunst. Je betaald 5EUR inkom
-								dat je mag gebruiken op je drinkkaart.
-							</p>
-
-							{/* Drink card badge */}
-							<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
-								<span className="font-semibold text-sm text-teal-300">
-									Drinkkaart 5 EUR inbegrepen bij inkom.
-								</span>
-							</div>
-
-							<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
-								<span>Inschrijven als bezoeker</span>
-								<svg
-									className="h-4 w-4 transition-transform group-hover:translate-x-1"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={2}
-									aria-hidden="true"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
-									/>
-								</svg>
-							</div>
-						</button>
-					</div>
-				)}
-
-				{/* Performer form */}
 				{selectedType === "performer" && (
-					<div>
-						<div className="mb-8 flex items-center gap-4">
-							<button
-								type="button"
-								onClick={() => setSelectedType(null)}
-								className="flex items-center gap-2 text-white/60 transition-colors hover:text-white"
-							>
-								<svg
-									className="h-4 w-4"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={2}
-									aria-hidden="true"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-									/>
-								</svg>
-								Terug
-							</button>
-							<div className="h-px flex-1 bg-white/10" />
-							<div className="flex items-center gap-2">
-								<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-400/20 text-amber-300">
-									<svg
-										className="h-4 w-4"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke="currentColor"
-										strokeWidth={1.5}
-										aria-hidden="true"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
-										/>
-									</svg>
-								</div>
-								<span className="font-['Intro',sans-serif] text-amber-300">
-									Ik wil optreden
-								</span>
-							</div>
-						</div>
-
-						<form
-							onSubmit={handlePerformerSubmit}
-							className="flex flex-col gap-6"
-							noValidate
-						>
-							<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-								<div className="flex flex-col gap-2">
-									<label htmlFor="p-firstName" className="text-white text-xl">
-										Voornaam <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="text"
-										id="p-firstName"
-										name="firstName"
-										value={performerData.firstName}
-										onChange={handlePerformerChange}
-										onBlur={handlePerformerBlur}
-										placeholder="Jouw voornaam"
-										autoComplete="given-name"
-										aria-required="true"
-										aria-invalid={
-											performerTouched.firstName && !!performerErrors.firstName
-										}
-										className={inputClasses(
-											!!performerTouched.firstName &&
-												!!performerErrors.firstName,
-										)}
-									/>
-									{performerTouched.firstName && performerErrors.firstName && (
-										<span className="text-red-300 text-sm" role="alert">
-											{performerErrors.firstName}
-										</span>
-									)}
-								</div>
-								<div className="flex flex-col gap-2">
-									<label htmlFor="p-lastName" className="text-white text-xl">
-										Achternaam <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="text"
-										id="p-lastName"
-										name="lastName"
-										value={performerData.lastName}
-										onChange={handlePerformerChange}
-										onBlur={handlePerformerBlur}
-										placeholder="Jouw achternaam"
-										autoComplete="family-name"
-										aria-required="true"
-										aria-invalid={
-											performerTouched.lastName && !!performerErrors.lastName
-										}
-										className={inputClasses(
-											!!performerTouched.lastName && !!performerErrors.lastName,
-										)}
-									/>
-									{performerTouched.lastName && performerErrors.lastName && (
-										<span className="text-red-300 text-sm" role="alert">
-											{performerErrors.lastName}
-										</span>
-									)}
-								</div>
-							</div>
-
-							<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-								<div className="flex flex-col gap-2">
-									<label htmlFor="p-email" className="text-white text-xl">
-										E-mail <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="email"
-										id="p-email"
-										name="email"
-										value={performerData.email}
-										onChange={handlePerformerChange}
-										onBlur={handlePerformerBlur}
-										placeholder="jouw@email.be"
-										autoComplete="email"
-										inputMode="email"
-										aria-required="true"
-										aria-invalid={
-											performerTouched.email && !!performerErrors.email
-										}
-										className={inputClasses(
-											!!performerTouched.email && !!performerErrors.email,
-										)}
-									/>
-									{performerTouched.email && performerErrors.email && (
-										<span className="text-red-300 text-sm" role="alert">
-											{performerErrors.email}
-										</span>
-									)}
-								</div>
-								<div className="flex flex-col gap-2">
-									<label htmlFor="p-phone" className="text-white text-xl">
-										Telefoon
-									</label>
-									<input
-										type="tel"
-										id="p-phone"
-										name="phone"
-										value={performerData.phone}
-										onChange={handlePerformerChange}
-										onBlur={handlePerformerBlur}
-										placeholder="06-12345678"
-										autoComplete="tel"
-										inputMode="tel"
-										aria-invalid={
-											performerTouched.phone && !!performerErrors.phone
-										}
-										className={inputClasses(
-											!!performerTouched.phone && !!performerErrors.phone,
-										)}
-									/>
-									{performerTouched.phone && performerErrors.phone && (
-										<span className="text-red-300 text-sm" role="alert">
-											{performerErrors.phone}
-										</span>
-									)}
-								</div>
-							</div>
-
-							{/* Performer-specific fields */}
-							<div className="border border-amber-400/20 bg-amber-400/5 p-6">
-								<p className="mb-5 text-amber-300/80 text-sm uppercase tracking-wider">
-									Optreden details
-								</p>
-								<div className="flex flex-col gap-6">
-									<div className="flex flex-col gap-2">
-										<label htmlFor="p-artForm" className="text-white text-xl">
-											Kunstvorm <span className="text-red-300">*</span>
-										</label>
-										<input
-											type="text"
-											id="p-artForm"
-											name="artForm"
-											value={performerData.artForm}
-											onChange={handlePerformerChange}
-											onBlur={handlePerformerBlur}
-											placeholder="Muziek, Theater, Dans, etc."
-											autoComplete="off"
-											list="artFormSuggestions"
-											aria-required="true"
-											aria-invalid={
-												performerTouched.artForm && !!performerErrors.artForm
-											}
-											className={inputClasses(
-												!!performerTouched.artForm && !!performerErrors.artForm,
-											)}
-										/>
-										<datalist id="artFormSuggestions">
-											<option value="Muziek" />
-											<option value="Theater" />
-											<option value="Dans" />
-											<option value="Beeldende Kunst" />
-											<option value="Woordkunst" />
-											<option value="Comedy" />
-										</datalist>
-										{performerTouched.artForm && performerErrors.artForm && (
-											<span className="text-red-300 text-sm" role="alert">
-												{performerErrors.artForm}
-											</span>
-										)}
-									</div>
-
-									<div className="flex flex-col gap-2">
-										<label
-											htmlFor="p-experience"
-											className="text-white text-xl"
-										>
-											Ervaring
-										</label>
-										<input
-											type="text"
-											id="p-experience"
-											name="experience"
-											value={performerData.experience}
-											onChange={handlePerformerChange}
-											onBlur={handlePerformerBlur}
-											placeholder="Beginner / Gevorderd / Professional"
-											autoComplete="off"
-											list="experienceSuggestions"
-											className={inputClasses(false)}
-										/>
-										<datalist id="experienceSuggestions">
-											<option value="Beginner" />
-											<option value="Gevorderd" />
-											<option value="Professional" />
-										</datalist>
-									</div>
-
-									{/* Age confirmation */}
-									<div>
-										<label
-											htmlFor="p-isOver16"
-											className="flex cursor-pointer items-start gap-4"
-										>
-											<div className="relative mt-0.5 flex shrink-0">
-												<input
-													type="checkbox"
-													id="p-isOver16"
-													name="isOver16"
-													checked={performerData.isOver16}
-													onChange={handlePerformerChange}
-													className="peer sr-only"
-												/>
-												<div
-													className={`h-6 w-6 border-2 bg-transparent transition-colors peer-checked:bg-amber-400 peer-focus:ring-2 peer-focus:ring-amber-400/50 peer-focus:ring-offset-2 peer-focus:ring-offset-[#214e51] ${performerTouched.isOver16 && performerErrors.isOver16 ? "border-red-400" : "border-white/50 peer-checked:border-amber-400"}`}
-												/>
-												<svg
-													className="pointer-events-none absolute top-0 left-0 h-6 w-6 scale-0 text-[#214e51] transition-transform peer-checked:scale-100"
-													viewBox="0 0 24 24"
-													fill="none"
-													stroke="currentColor"
-													strokeWidth="3"
-													aria-hidden="true"
-												>
-													<polyline points="20 6 9 17 4 12" />
-												</svg>
-											</div>
-											<div className="flex flex-col gap-1">
-												<span className="text-lg text-white">
-													Ik ben 16 jaar of ouder{" "}
-													<span className="text-red-300">*</span>
-												</span>
-												<span className="text-sm text-white/60">
-													Je moet minimaal 16 jaar oud zijn om op te treden.
-												</span>
-											</div>
-										</label>
-										{performerTouched.isOver16 && performerErrors.isOver16 && (
-											<span
-												className="mt-2 block text-red-300 text-sm"
-												role="alert"
-											>
-												{performerErrors.isOver16}
-											</span>
-										)}
-									</div>
-								</div>
-							</div>
-
-							<div className="flex flex-col gap-2 border border-white/10 p-6">
-								<label
-									htmlFor="p-extraQuestions"
-									className="text-white text-xl"
-								>
-									Vragen of opmerkingen
-								</label>
-								<textarea
-									id="p-extraQuestions"
-									name="extraQuestions"
-									value={performerData.extraQuestions}
-									onChange={handlePerformerChange}
-									onBlur={handlePerformerBlur}
-									placeholder="Heb je nog vragen of iets dat we moeten weten?"
-									rows={3}
-									autoComplete="off"
-									className="resize-none bg-transparent text-lg text-white transition-all placeholder:text-white/40 focus:outline-none"
-								/>
-							</div>
-
-							<div className="flex flex-col items-center gap-4 pt-4">
-								<button
-									type="submit"
-									disabled={submitMutation.isPending}
-									aria-busy={submitMutation.isPending}
-									className="bg-amber-400 px-12 py-4 font-['Intro',sans-serif] text-[#1a3d40] text-xl transition-all hover:scale-105 hover:bg-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-400/50 focus:ring-offset-2 focus:ring-offset-[#214e51] disabled:cursor-not-allowed disabled:opacity-50 md:text-2xl"
-								>
-									{submitMutation.isPending ? (
-										<span className="flex items-center gap-2">
-											<svg
-												className="h-5 w-5 animate-spin"
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												aria-label="Laden"
-											>
-												<circle
-													className="opacity-25"
-													cx="12"
-													cy="12"
-													r="10"
-													stroke="currentColor"
-													strokeWidth="4"
-												/>
-												<path
-													className="opacity-75"
-													fill="currentColor"
-													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-												/>
-											</svg>
-											Bezig...
-										</span>
-									) : (
-										"Bevestigen"
-									)}
-								</button>
-								<a
-									href="/contact"
-									className="text-sm text-white/60 transition-colors hover:text-white"
-								>
-									Nog vragen? Neem contact op
-								</a>
-							</div>
-						</form>
-					</div>
+					<PerformerForm
+						onBack={() => setSelectedType(null)}
+						onSuccess={setSuccessToken}
+					/>
 				)}
 
-				{/* Watcher form */}
 				{selectedType === "watcher" && (
-					<div>
-						<div className="mb-8 flex items-center gap-4">
-							<button
-								type="button"
-								onClick={() => setSelectedType(null)}
-								className="flex items-center gap-2 text-white/60 transition-colors hover:text-white"
-							>
-								<svg
-									className="h-4 w-4"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={2}
-									aria-hidden="true"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-									/>
-								</svg>
-								Terug
-							</button>
-							<div className="h-px flex-1 bg-white/10" />
-							<div className="flex items-center gap-2">
-								<div className="flex h-8 w-8 items-center justify-center rounded-full bg-teal-400/20 text-teal-300">
-									<svg
-										className="h-4 w-4"
-										fill="none"
-										viewBox="0 0 24 24"
-										stroke="currentColor"
-										strokeWidth={1.5}
-										aria-hidden="true"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
-										/>
-									</svg>
-								</div>
-								<span className="font-['Intro',sans-serif] text-teal-300">
-									Ik wil komen kijken
-								</span>
-							</div>
-						</div>
-
-						{/* Drink card callout — price updates live with guest count */}
-						<div className="mb-8 flex items-center gap-4 rounded-lg border border-teal-400/30 bg-teal-400/10 p-5">
-							<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-teal-400/20 font-bold text-teal-300 text-xl">
-								€{5 + guests.length * 2}
-							</div>
-							<div>
-								<p className="font-semibold text-white">
-									Drinkkaart inbegrepen
-								</p>
-								<p className="text-sm text-white/70">
-									Je betaald bij inkom{" "}
-									<strong className="text-teal-300">€5</strong> (+ €2 per
-									medebezoeker) dat gaat naar je drinkkaart.
-									{guests.length > 0 && (
-										<span className="ml-1 font-semibold text-teal-300">
-											Totaal: €{5 + guests.length * 2} voor {1 + guests.length}{" "}
-											personen.
-										</span>
-									)}
-								</p>
-							</div>
-						</div>
-
-						<form
-							onSubmit={handleWatcherSubmit}
-							className="flex flex-col gap-6"
-							noValidate
-						>
-							<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-								<div className="flex flex-col gap-2">
-									<label htmlFor="w-firstName" className="text-white text-xl">
-										Voornaam <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="text"
-										id="w-firstName"
-										name="firstName"
-										value={watcherData.firstName}
-										onChange={handleWatcherChange}
-										onBlur={handleWatcherBlur}
-										placeholder="Jouw voornaam"
-										autoComplete="given-name"
-										aria-required="true"
-										aria-invalid={
-											watcherTouched.firstName && !!watcherErrors.firstName
-										}
-										className={inputClasses(
-											!!watcherTouched.firstName && !!watcherErrors.firstName,
-										)}
-									/>
-									{watcherTouched.firstName && watcherErrors.firstName && (
-										<span className="text-red-300 text-sm" role="alert">
-											{watcherErrors.firstName}
-										</span>
-									)}
-								</div>
-								<div className="flex flex-col gap-2">
-									<label htmlFor="w-lastName" className="text-white text-xl">
-										Achternaam <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="text"
-										id="w-lastName"
-										name="lastName"
-										value={watcherData.lastName}
-										onChange={handleWatcherChange}
-										onBlur={handleWatcherBlur}
-										placeholder="Jouw achternaam"
-										autoComplete="family-name"
-										aria-required="true"
-										aria-invalid={
-											watcherTouched.lastName && !!watcherErrors.lastName
-										}
-										className={inputClasses(
-											!!watcherTouched.lastName && !!watcherErrors.lastName,
-										)}
-									/>
-									{watcherTouched.lastName && watcherErrors.lastName && (
-										<span className="text-red-300 text-sm" role="alert">
-											{watcherErrors.lastName}
-										</span>
-									)}
-								</div>
-							</div>
-
-							<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-								<div className="flex flex-col gap-2">
-									<label htmlFor="w-email" className="text-white text-xl">
-										E-mail <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="email"
-										id="w-email"
-										name="email"
-										value={watcherData.email}
-										onChange={handleWatcherChange}
-										onBlur={handleWatcherBlur}
-										placeholder="jouw@email.be"
-										autoComplete="email"
-										inputMode="email"
-										aria-required="true"
-										aria-invalid={watcherTouched.email && !!watcherErrors.email}
-										className={inputClasses(
-											!!watcherTouched.email && !!watcherErrors.email,
-										)}
-									/>
-									{watcherTouched.email && watcherErrors.email && (
-										<span className="text-red-300 text-sm" role="alert">
-											{watcherErrors.email}
-										</span>
-									)}
-								</div>
-								<div className="flex flex-col gap-2">
-									<label htmlFor="w-phone" className="text-white text-xl">
-										Telefoon
-									</label>
-									<input
-										type="tel"
-										id="w-phone"
-										name="phone"
-										value={watcherData.phone}
-										onChange={handleWatcherChange}
-										onBlur={handleWatcherBlur}
-										placeholder="06-12345678"
-										autoComplete="tel"
-										inputMode="tel"
-										aria-invalid={watcherTouched.phone && !!watcherErrors.phone}
-										className={inputClasses(
-											!!watcherTouched.phone && !!watcherErrors.phone,
-										)}
-									/>
-									{watcherTouched.phone && watcherErrors.phone && (
-										<span className="text-red-300 text-sm" role="alert">
-											{watcherErrors.phone}
-										</span>
-									)}
-								</div>
-							</div>
-
-							{/* Guests section */}
-							<div className="border border-teal-400/20 bg-teal-400/5 p-6">
-								<div className="mb-4 flex items-center justify-between">
-									<p className="text-sm text-teal-300/80 uppercase tracking-wider">
-										Medebezoekers{" "}
-										<span className="text-white/50 normal-case">
-											({guests.length}/9)
-										</span>
-									</p>
-									{guests.length < 9 && (
-										<button
-											type="button"
-											onClick={handleAddGuest}
-											className="flex items-center gap-1.5 rounded border border-teal-400/40 bg-teal-400/10 px-3 py-1.5 text-sm text-teal-300 transition-colors hover:bg-teal-400/20"
-										>
-											<svg
-												className="h-4 w-4"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke="currentColor"
-												strokeWidth={2}
-												aria-hidden="true"
-											>
-												<path
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													d="M12 4.5v15m7.5-7.5h-15"
-												/>
-											</svg>
-											Medebezoeker toevoegen
-										</button>
-									)}
-								</div>
-
-								{guests.length === 0 && (
-									<p className="text-sm text-white/40">
-										Kom je met iemand mee? Voeg je medebezoekers toe. Elke extra
-										persoon kost €2 op de drinkkaart.
-									</p>
-								)}
-
-								<div className="flex flex-col gap-6">
-									{guests.map((guest, idx) => (
-										<div
-											key={`guest-${
-												// biome-ignore lint/suspicious/noArrayIndexKey: index is stable here
-												idx
-											}`}
-											className="relative border border-teal-400/20 p-4"
-										>
-											<div className="mb-3 flex items-center justify-between">
-												<span className="font-medium text-sm text-teal-300">
-													Medebezoeker {idx + 1}
-												</span>
-												<button
-													type="button"
-													onClick={() => handleRemoveGuest(idx)}
-													className="flex items-center gap-1 text-red-400/70 text-sm transition-colors hover:text-red-300"
-												>
-													<svg
-														className="h-4 w-4"
-														fill="none"
-														viewBox="0 0 24 24"
-														stroke="currentColor"
-														strokeWidth={2}
-														aria-hidden="true"
-													>
-														<path
-															strokeLinecap="round"
-															strokeLinejoin="round"
-															d="M6 18L18 6M6 6l12 12"
-														/>
-													</svg>
-													Verwijderen
-												</button>
-											</div>
-
-											<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-												<div className="flex flex-col gap-2">
-													<label
-														htmlFor={`guest-${idx}-firstName`}
-														className="text-white/80"
-													>
-														Voornaam <span className="text-red-300">*</span>
-													</label>
-													<input
-														type="text"
-														id={`guest-${idx}-firstName`}
-														value={guest.firstName}
-														onChange={(e) =>
-															handleGuestChange(
-																idx,
-																"firstName",
-																e.target.value,
-															)
-														}
-														placeholder="Voornaam"
-														autoComplete="off"
-														className={inputClasses(
-															!!guestErrors[idx]?.firstName,
-														)}
-													/>
-													{guestErrors[idx]?.firstName && (
-														<span className="text-red-300 text-sm" role="alert">
-															{guestErrors[idx].firstName}
-														</span>
-													)}
-												</div>
-												<div className="flex flex-col gap-2">
-													<label
-														htmlFor={`guest-${idx}-lastName`}
-														className="text-white/80"
-													>
-														Achternaam <span className="text-red-300">*</span>
-													</label>
-													<input
-														type="text"
-														id={`guest-${idx}-lastName`}
-														value={guest.lastName}
-														onChange={(e) =>
-															handleGuestChange(idx, "lastName", e.target.value)
-														}
-														placeholder="Achternaam"
-														autoComplete="off"
-														className={inputClasses(
-															!!guestErrors[idx]?.lastName,
-														)}
-													/>
-													{guestErrors[idx]?.lastName && (
-														<span className="text-red-300 text-sm" role="alert">
-															{guestErrors[idx].lastName}
-														</span>
-													)}
-												</div>
-												<div className="flex flex-col gap-2">
-													<label
-														htmlFor={`guest-${idx}-email`}
-														className="text-white/80"
-													>
-														E-mail
-													</label>
-													<input
-														type="email"
-														id={`guest-${idx}-email`}
-														value={guest.email}
-														onChange={(e) =>
-															handleGuestChange(idx, "email", e.target.value)
-														}
-														placeholder="optioneel@email.be"
-														autoComplete="off"
-														inputMode="email"
-														className={inputClasses(!!guestErrors[idx]?.email)}
-													/>
-													{guestErrors[idx]?.email && (
-														<span className="text-red-300 text-sm" role="alert">
-															{guestErrors[idx].email}
-														</span>
-													)}
-												</div>
-												<div className="flex flex-col gap-2">
-													<label
-														htmlFor={`guest-${idx}-phone`}
-														className="text-white/80"
-													>
-														Telefoon
-													</label>
-													<input
-														type="tel"
-														id={`guest-${idx}-phone`}
-														value={guest.phone}
-														onChange={(e) =>
-															handleGuestChange(idx, "phone", e.target.value)
-														}
-														placeholder="06-12345678"
-														autoComplete="off"
-														inputMode="tel"
-														className={inputClasses(!!guestErrors[idx]?.phone)}
-													/>
-													{guestErrors[idx]?.phone && (
-														<span className="text-red-300 text-sm" role="alert">
-															{guestErrors[idx].phone}
-														</span>
-													)}
-												</div>
-											</div>
-										</div>
-									))}
-								</div>
-							</div>
-
-							<div className="flex flex-col gap-2 border border-white/10 p-6">
-								<label
-									htmlFor="w-extraQuestions"
-									className="text-white text-xl"
-								>
-									Vragen of opmerkingen
-								</label>
-								<textarea
-									id="w-extraQuestions"
-									name="extraQuestions"
-									value={watcherData.extraQuestions}
-									onChange={handleWatcherChange}
-									onBlur={handleWatcherBlur}
-									placeholder="Heb je nog vragen of iets dat we moeten weten?"
-									rows={3}
-									autoComplete="off"
-									className="resize-none bg-transparent text-lg text-white transition-all placeholder:text-white/40 focus:outline-none"
-								/>
-							</div>
-
-							<div className="flex flex-col items-center gap-4 pt-4">
-								<button
-									type="submit"
-									disabled={submitMutation.isPending}
-									aria-busy={submitMutation.isPending}
-									className="bg-white px-12 py-4 font-['Intro',sans-serif] text-[#214e51] text-xl transition-all hover:scale-105 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-[#214e51] disabled:cursor-not-allowed disabled:opacity-50 md:text-2xl"
-								>
-									{submitMutation.isPending ? (
-										<span className="flex items-center gap-2">
-											<svg
-												className="h-5 w-5 animate-spin"
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												aria-label="Laden"
-											>
-												<circle
-													className="opacity-25"
-													cx="12"
-													cy="12"
-													r="10"
-													stroke="currentColor"
-													strokeWidth="4"
-												/>
-												<path
-													className="opacity-75"
-													fill="currentColor"
-													d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-												/>
-											</svg>
-											Bezig...
-										</span>
-									) : (
-										"Bevestigen"
-									)}
-								</button>
-								<a
-									href="/contact"
-									className="text-sm text-white/60 transition-colors hover:text-white"
-								>
-									Nog vragen? Neem contact op
-								</a>
-							</div>
-						</form>
-					</div>
+					<WatcherForm onBack={() => setSelectedType(null)} />
 				)}
 			</div>
 		</section>
diff --git a/apps/web/src/components/registration/GuestList.tsx b/apps/web/src/components/registration/GuestList.tsx
new file mode 100644
index 0000000..f06d8d7
--- /dev/null
+++ b/apps/web/src/components/registration/GuestList.tsx
@@ -0,0 +1,200 @@
+import {
+	type GuestEntry,
+	type GuestErrors,
+	inputCls,
+	MAX_GUESTS,
+} from "@/lib/registration";
+
+interface Props {
+	guests: GuestEntry[];
+	errors: GuestErrors[];
+	onChange: (index: number, field: keyof GuestEntry, value: string) => void;
+	onAdd: () => void;
+	onRemove: (index: number) => void;
+	/** Optional suffix rendered after the guest count header (e.g. price warning) */
+	headerNote?: React.ReactNode;
+}
+
+export function GuestList({
+	guests,
+	errors,
+	onChange,
+	onAdd,
+	onRemove,
+	headerNote,
+}: Props) {
+	return (
+		<div className="border border-teal-400/20 bg-teal-400/5 p-6">
+			<div className="mb-4 flex items-center justify-between">
+				<div>
+					<p className="text-sm text-teal-300/80 uppercase tracking-wider">
+						Medebezoekers{" "}
+						<span className="text-white/50 normal-case">
+							({guests.length}/{MAX_GUESTS})
+						</span>
+					</p>
+					{headerNote}
+				</div>
+				{guests.length < MAX_GUESTS && (
+					<button
+						type="button"
+						onClick={onAdd}
+						className="flex items-center gap-1.5 rounded border border-teal-400/40 bg-teal-400/10 px-3 py-1.5 text-sm text-teal-300 transition-colors hover:bg-teal-400/20"
+					>
+						<svg
+							className="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={2}
+							aria-hidden="true"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M12 4.5v15m7.5-7.5h-15"
+							/>
+						</svg>
+						{guests.length === 0 ? "Medebezoeker toevoegen" : "Toevoegen"}
+					</button>
+				)}
+			</div>
+
+			{guests.length === 0 && (
+				<p className="text-sm text-white/40">
+					Kom je met iemand mee? Voeg je medebezoekers toe. Elke extra persoon
+					kost €2 op de drinkkaart.
+				</p>
+			)}
+
+			<div className="flex flex-col gap-4">
+				{guests.map((guest, idx) => (
+					<div
+						key={`guest-${
+							// biome-ignore lint/suspicious/noArrayIndexKey: stable positional index
+							idx
+						}`}
+						className="border border-teal-400/20 p-4"
+					>
+						<div className="mb-3 flex items-center justify-between">
+							<span className="font-medium text-sm text-teal-300">
+								Medebezoeker {idx + 1}
+							</span>
+							<button
+								type="button"
+								onClick={() => onRemove(idx)}
+								className="flex items-center gap-1 text-red-400/70 text-sm transition-colors hover:text-red-300"
+							>
+								<svg
+									className="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									strokeWidth={2}
+									aria-hidden="true"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Verwijderen
+							</button>
+						</div>
+
+						<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div className="flex flex-col gap-2">
+								<label
+									htmlFor={`guest-${idx}-firstName`}
+									className="text-white/80"
+								>
+									Voornaam <span className="text-red-300">*</span>
+								</label>
+								<input
+									type="text"
+									id={`guest-${idx}-firstName`}
+									value={guest.firstName}
+									onChange={(e) => onChange(idx, "firstName", e.target.value)}
+									placeholder="Voornaam"
+									autoComplete="off"
+									className={inputCls(!!errors[idx]?.firstName)}
+								/>
+								{errors[idx]?.firstName && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].firstName}
+									</span>
+								)}
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<label
+									htmlFor={`guest-${idx}-lastName`}
+									className="text-white/80"
+								>
+									Achternaam <span className="text-red-300">*</span>
+								</label>
+								<input
+									type="text"
+									id={`guest-${idx}-lastName`}
+									value={guest.lastName}
+									onChange={(e) => onChange(idx, "lastName", e.target.value)}
+									placeholder="Achternaam"
+									autoComplete="off"
+									className={inputCls(!!errors[idx]?.lastName)}
+								/>
+								{errors[idx]?.lastName && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].lastName}
+									</span>
+								)}
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<label htmlFor={`guest-${idx}-email`} className="text-white/80">
+									E-mail
+								</label>
+								<input
+									type="email"
+									id={`guest-${idx}-email`}
+									value={guest.email}
+									onChange={(e) => onChange(idx, "email", e.target.value)}
+									placeholder="optioneel@email.be"
+									autoComplete="off"
+									inputMode="email"
+									className={inputCls(!!errors[idx]?.email)}
+								/>
+								{errors[idx]?.email && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].email}
+									</span>
+								)}
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<label htmlFor={`guest-${idx}-phone`} className="text-white/80">
+									Telefoon
+								</label>
+								<input
+									type="tel"
+									id={`guest-${idx}-phone`}
+									value={guest.phone}
+									onChange={(e) => onChange(idx, "phone", e.target.value)}
+									placeholder="06-12345678"
+									autoComplete="off"
+									inputMode="tel"
+									className={inputCls(!!errors[idx]?.phone)}
+								/>
+								{errors[idx]?.phone && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].phone}
+									</span>
+								)}
+							</div>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/registration/PerformerForm.tsx b/apps/web/src/components/registration/PerformerForm.tsx
new file mode 100644
index 0000000..9d18b8b
--- /dev/null
+++ b/apps/web/src/components/registration/PerformerForm.tsx
@@ -0,0 +1,463 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+	inputCls,
+	validateEmail,
+	validatePhone,
+	validateTextField,
+} from "@/lib/registration";
+import { orpc } from "@/utils/orpc";
+
+interface PerformerErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	artForm?: string;
+	isOver16?: string;
+}
+
+interface Props {
+	onBack: () => void;
+	onSuccess: (token: string) => void;
+}
+
+export function PerformerForm({ onBack, onSuccess }: Props) {
+	const [data, setData] = useState({
+		firstName: "",
+		lastName: "",
+		email: "",
+		phone: "",
+		artForm: "",
+		experience: "",
+		isOver16: false,
+		extraQuestions: "",
+	});
+	const [errors, setErrors] = useState<PerformerErrors>({});
+	const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+	const submitMutation = useMutation({
+		...orpc.submitRegistration.mutationOptions(),
+		onSuccess: (result) => {
+			if (result.managementToken) onSuccess(result.managementToken);
+		},
+		onError: (error) => {
+			toast.error(`Er is iets misgegaan: ${error.message}`);
+		},
+	});
+
+	function validate(): boolean {
+		const errs: PerformerErrors = {
+			firstName: validateTextField(data.firstName, true, "Voornaam"),
+			lastName: validateTextField(data.lastName, true, "Achternaam"),
+			email: validateEmail(data.email),
+			phone: validatePhone(data.phone),
+			artForm: !data.artForm.trim() ? "Kunstvorm is verplicht" : undefined,
+			isOver16: !data.isOver16
+				? "Je moet 16 jaar of ouder zijn om op te treden"
+				: undefined,
+		};
+		setErrors(errs);
+		setTouched({
+			firstName: true,
+			lastName: true,
+			email: true,
+			phone: true,
+			artForm: true,
+			isOver16: true,
+		});
+		return !Object.values(errs).some(Boolean);
+	}
+
+	function handleChange(
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		const { name, value, type } = e.target;
+		const newValue =
+			type === "checkbox" ? (e.target as HTMLInputElement).checked : value;
+		setData((prev) => ({ ...prev, [name]: newValue }));
+
+		if (type !== "checkbox" && touched[name]) {
+			const fieldError: Record<string, string | undefined> = {
+				firstName: validateTextField(
+					name === "firstName" ? value : data.firstName,
+					true,
+					"Voornaam",
+				),
+				lastName: validateTextField(
+					name === "lastName" ? value : data.lastName,
+					true,
+					"Achternaam",
+				),
+				email: validateEmail(name === "email" ? value : data.email),
+				phone: validatePhone(name === "phone" ? value : data.phone),
+				artForm:
+					name === "artForm" && !value.trim()
+						? "Kunstvorm is verplicht"
+						: undefined,
+			};
+			setErrors((prev) => ({ ...prev, [name]: fieldError[name] }));
+		}
+	}
+
+	function handleBlur(
+		e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		const { name, value } = e.target;
+		setTouched((prev) => ({ ...prev, [name]: true }));
+		const errMap: Record<string, string | undefined> = {
+			firstName: validateTextField(value, true, "Voornaam"),
+			lastName: validateTextField(value, true, "Achternaam"),
+			email: validateEmail(value),
+			phone: validatePhone(value),
+			artForm: !value.trim() ? "Kunstvorm is verplicht" : undefined,
+		};
+		setErrors((prev) => ({ ...prev, [name]: errMap[name] }));
+	}
+
+	function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		if (!validate()) {
+			toast.error("Controleer je invoer");
+			return;
+		}
+		submitMutation.mutate({
+			firstName: data.firstName.trim(),
+			lastName: data.lastName.trim(),
+			email: data.email.trim(),
+			phone: data.phone.trim() || undefined,
+			registrationType: "performer",
+			artForm: data.artForm.trim() || undefined,
+			experience: data.experience.trim() || undefined,
+			isOver16: data.isOver16,
+			extraQuestions: data.extraQuestions.trim() || undefined,
+		});
+	}
+
+	return (
+		<div>
+			{/* Back + type header */}
+			<div className="mb-8 flex items-center gap-4">
+				<button
+					type="button"
+					onClick={onBack}
+					className="flex items-center gap-2 text-white/60 transition-colors hover:text-white"
+				>
+					<svg
+						className="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={2}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+						/>
+					</svg>
+					Terug
+				</button>
+				<div className="h-px flex-1 bg-white/10" />
+				<div className="flex items-center gap-2">
+					<div className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-400/20 text-amber-300">
+						<svg
+							className="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={1.5}
+							aria-hidden="true"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
+							/>
+						</svg>
+					</div>
+					<span className="font-['Intro',sans-serif] text-amber-300">
+						Ik wil optreden
+					</span>
+				</div>
+			</div>
+
+			<form onSubmit={handleSubmit} className="flex flex-col gap-6" noValidate>
+				{/* Name row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-firstName" className="text-white text-xl">
+							Voornaam <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="p-firstName"
+							name="firstName"
+							value={data.firstName}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="Jouw voornaam"
+							autoComplete="given-name"
+							aria-required="true"
+							aria-invalid={touched.firstName && !!errors.firstName}
+							className={inputCls(!!touched.firstName && !!errors.firstName)}
+						/>
+						{touched.firstName && errors.firstName && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.firstName}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-lastName" className="text-white text-xl">
+							Achternaam <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="p-lastName"
+							name="lastName"
+							value={data.lastName}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="Jouw achternaam"
+							autoComplete="family-name"
+							aria-required="true"
+							aria-invalid={touched.lastName && !!errors.lastName}
+							className={inputCls(!!touched.lastName && !!errors.lastName)}
+						/>
+						{touched.lastName && errors.lastName && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.lastName}
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Contact row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-email" className="text-white text-xl">
+							E-mail <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="email"
+							id="p-email"
+							name="email"
+							value={data.email}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="jouw@email.be"
+							autoComplete="email"
+							inputMode="email"
+							aria-required="true"
+							aria-invalid={touched.email && !!errors.email}
+							className={inputCls(!!touched.email && !!errors.email)}
+						/>
+						{touched.email && errors.email && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.email}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-phone" className="text-white text-xl">
+							Telefoon
+						</label>
+						<input
+							type="tel"
+							id="p-phone"
+							name="phone"
+							value={data.phone}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="06-12345678"
+							autoComplete="tel"
+							inputMode="tel"
+							aria-invalid={touched.phone && !!errors.phone}
+							className={inputCls(!!touched.phone && !!errors.phone)}
+						/>
+						{touched.phone && errors.phone && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.phone}
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Performer-specific fields */}
+				<div className="border border-amber-400/20 bg-amber-400/5 p-6">
+					<p className="mb-5 text-amber-300/80 text-sm uppercase tracking-wider">
+						Optreden details
+					</p>
+					<div className="flex flex-col gap-6">
+						<div className="flex flex-col gap-2">
+							<label htmlFor="p-artForm" className="text-white text-xl">
+								Kunstvorm <span className="text-red-300">*</span>
+							</label>
+							<input
+								type="text"
+								id="p-artForm"
+								name="artForm"
+								value={data.artForm}
+								onChange={handleChange}
+								onBlur={handleBlur}
+								placeholder="Muziek, Theater, Dans, etc."
+								autoComplete="off"
+								list="artFormSuggestions"
+								aria-required="true"
+								aria-invalid={touched.artForm && !!errors.artForm}
+								className={inputCls(!!touched.artForm && !!errors.artForm)}
+							/>
+							<datalist id="artFormSuggestions">
+								<option value="Muziek" />
+								<option value="Theater" />
+								<option value="Dans" />
+								<option value="Beeldende Kunst" />
+								<option value="Woordkunst" />
+								<option value="Comedy" />
+							</datalist>
+							{touched.artForm && errors.artForm && (
+								<span className="text-red-300 text-sm" role="alert">
+									{errors.artForm}
+								</span>
+							)}
+						</div>
+
+						<div className="flex flex-col gap-2">
+							<label htmlFor="p-experience" className="text-white text-xl">
+								Ervaring
+							</label>
+							<input
+								type="text"
+								id="p-experience"
+								name="experience"
+								value={data.experience}
+								onChange={handleChange}
+								onBlur={handleBlur}
+								placeholder="Beginner / Gevorderd / Professional"
+								autoComplete="off"
+								list="experienceSuggestions"
+								className={inputCls(false)}
+							/>
+							<datalist id="experienceSuggestions">
+								<option value="Beginner" />
+								<option value="Gevorderd" />
+								<option value="Professional" />
+							</datalist>
+						</div>
+
+						{/* Age confirmation */}
+						<div>
+							<label
+								htmlFor="p-isOver16"
+								className="flex cursor-pointer items-start gap-4"
+							>
+								<div className="relative mt-0.5 flex shrink-0">
+									<input
+										type="checkbox"
+										id="p-isOver16"
+										name="isOver16"
+										checked={data.isOver16}
+										onChange={handleChange}
+										className="peer sr-only"
+									/>
+									<div
+										className={`h-6 w-6 border-2 bg-transparent transition-colors peer-checked:bg-amber-400 peer-focus:ring-2 peer-focus:ring-amber-400/50 peer-focus:ring-offset-2 peer-focus:ring-offset-[#214e51] ${touched.isOver16 && errors.isOver16 ? "border-red-400" : "border-white/50 peer-checked:border-amber-400"}`}
+									/>
+									<svg
+										className="pointer-events-none absolute top-0 left-0 h-6 w-6 scale-0 text-[#214e51] transition-transform peer-checked:scale-100"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="3"
+										aria-hidden="true"
+									>
+										<polyline points="20 6 9 17 4 12" />
+									</svg>
+								</div>
+								<div className="flex flex-col gap-1">
+									<span className="text-lg text-white">
+										Ik ben 16 jaar of ouder{" "}
+										<span className="text-red-300">*</span>
+									</span>
+									<span className="text-sm text-white/60">
+										Je moet minimaal 16 jaar oud zijn om op te treden.
+									</span>
+								</div>
+							</label>
+							{touched.isOver16 && errors.isOver16 && (
+								<span className="mt-2 block text-red-300 text-sm" role="alert">
+									{errors.isOver16}
+								</span>
+							)}
+						</div>
+					</div>
+				</div>
+
+				{/* Extra questions */}
+				<div className="flex flex-col gap-2 border border-white/10 p-6">
+					<label htmlFor="p-extraQuestions" className="text-white text-xl">
+						Vragen of opmerkingen
+					</label>
+					<textarea
+						id="p-extraQuestions"
+						name="extraQuestions"
+						value={data.extraQuestions}
+						onChange={handleChange}
+						onBlur={handleBlur}
+						placeholder="Heb je nog vragen of iets dat we moeten weten?"
+						rows={3}
+						autoComplete="off"
+						className="resize-none bg-transparent text-lg text-white transition-all placeholder:text-white/40 focus:outline-none"
+					/>
+				</div>
+
+				<div className="flex flex-col items-center gap-4 pt-4">
+					<button
+						type="submit"
+						disabled={submitMutation.isPending}
+						aria-busy={submitMutation.isPending}
+						className="bg-amber-400 px-12 py-4 font-['Intro',sans-serif] text-[#1a3d40] text-xl transition-all hover:scale-105 hover:bg-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-400/50 focus:ring-offset-2 focus:ring-offset-[#214e51] disabled:cursor-not-allowed disabled:opacity-50 md:text-2xl"
+					>
+						{submitMutation.isPending ? (
+							<span className="flex items-center gap-2">
+								<svg
+									className="h-5 w-5 animate-spin"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									aria-label="Laden"
+								>
+									<circle
+										className="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										strokeWidth="4"
+									/>
+									<path
+										className="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									/>
+								</svg>
+								Bezig...
+							</span>
+						) : (
+							"Bevestigen"
+						)}
+					</button>
+					<a
+						href="/contact"
+						className="text-sm text-white/60 transition-colors hover:text-white"
+					>
+						Nog vragen? Neem contact op
+					</a>
+				</div>
+			</form>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/registration/SuccessScreen.tsx b/apps/web/src/components/registration/SuccessScreen.tsx
new file mode 100644
index 0000000..c2cf663
--- /dev/null
+++ b/apps/web/src/components/registration/SuccessScreen.tsx
@@ -0,0 +1,72 @@
+interface Props {
+	token: string;
+	onReset: () => void;
+}
+
+export function SuccessScreen({ token, onReset }: Props) {
+	const manageUrl =
+		typeof window !== "undefined"
+			? `${window.location.origin}/manage/${token}`
+			: `/manage/${token}`;
+
+	return (
+		<section
+			id="registration"
+			className="relative z-30 flex w-full items-center justify-center bg-[#214e51]/96 px-6 py-16 md:px-12"
+		>
+			<div className="mx-auto w-full max-w-3xl">
+				<div className="rounded-lg border border-white/20 bg-white/5 p-8 md:p-12">
+					<div className="mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20 text-green-400">
+						<svg
+							className="h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={2}
+							aria-label="Succes"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					</div>
+					<h2 className="mb-4 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
+						Gelukt!
+					</h2>
+					<p className="mb-6 text-lg text-white/80">
+						Je inschrijving is bevestigd. We sturen je zo dadelijk een
+						bevestigingsmail.
+					</p>
+					<div className="mb-8 rounded-lg border border-white/10 bg-white/5 p-6">
+						<p className="mb-2 text-sm text-white/60">
+							Geen mail ontvangen? Gebruik deze link:
+						</p>
+						<a
+							href={manageUrl}
+							className="break-all text-sm text-white/80 underline underline-offset-2 hover:text-white"
+						>
+							{manageUrl}
+						</a>
+					</div>
+					<div className="flex flex-wrap items-center gap-4">
+						<a
+							href={manageUrl}
+							className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
+						>
+							Bekijk mijn inschrijving
+						</a>
+						<button
+							type="button"
+							onClick={onReset}
+							className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
+						>
+							Nog een inschrijving
+						</button>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/apps/web/src/components/registration/TypeSelector.tsx b/apps/web/src/components/registration/TypeSelector.tsx
new file mode 100644
index 0000000..6fe70a9
--- /dev/null
+++ b/apps/web/src/components/registration/TypeSelector.tsx
@@ -0,0 +1,114 @@
+type RegistrationType = "performer" | "watcher";
+
+interface Props {
+	onSelect: (type: RegistrationType) => void;
+}
+
+export function TypeSelector({ onSelect }: Props) {
+	return (
+		<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+			{/* Performer card */}
+			<button
+				type="button"
+				onClick={() => onSelect("performer")}
+				className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
+			>
+				<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-amber-400 to-orange-500 opacity-80" />
+				<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-amber-400/15 text-amber-300">
+					<svg
+						className="h-7 w-7"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={1.5}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
+						/>
+					</svg>
+				</div>
+				<h3 className="mb-3 font-['Intro',sans-serif] text-2xl text-white md:text-3xl">
+					Ik wil optreden
+				</h3>
+				<p className="mb-6 text-white/70">
+					Deel jouw talent met het publiek. Muziek, theater, dans, comedy —
+					alles is welkom. Je moet 16 jaar of ouder zijn.
+				</p>
+				<div className="mt-auto flex items-center gap-2 font-medium text-amber-300 text-sm">
+					<span>Inschrijven als artiest</span>
+					<svg
+						className="h-4 w-4 transition-transform group-hover:translate-x-1"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={2}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+						/>
+					</svg>
+				</div>
+			</button>
+
+			{/* Watcher card */}
+			<button
+				type="button"
+				onClick={() => onSelect("watcher")}
+				className="group relative flex flex-col overflow-hidden border border-white/20 bg-white/5 p-8 text-left transition-all duration-300 hover:border-white/50 hover:bg-white/10 md:p-10"
+			>
+				<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-teal-400 to-cyan-400 opacity-80" />
+				<div className="mb-6 flex h-14 w-14 items-center justify-center rounded-full bg-teal-400/15 text-teal-300">
+					<svg
+						className="h-7 w-7"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={1.5}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
+						/>
+					</svg>
+				</div>
+				<h3 className="mb-3 font-['Intro',sans-serif] text-2xl text-white md:text-3xl">
+					Ik wil komen kijken
+				</h3>
+				<p className="mb-4 text-white/70">
+					Geniet van een avond vol talent en kunst. Je betaald 5EUR inkom dat je
+					mag gebruiken op je drinkkaart.
+				</p>
+				<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-teal-400/40 bg-teal-400/10 px-4 py-1.5">
+					<span className="font-semibold text-sm text-teal-300">
+						Drinkkaart 5 EUR inbegrepen bij inkom.
+					</span>
+				</div>
+				<div className="mt-auto flex items-center gap-2 font-medium text-sm text-teal-300">
+					<span>Inschrijven als bezoeker</span>
+					<svg
+						className="h-4 w-4 transition-transform group-hover:translate-x-1"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={2}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
+						/>
+					</svg>
+				</div>
+			</button>
+		</div>
+	);
+}
diff --git a/apps/web/src/components/registration/WatcherForm.tsx b/apps/web/src/components/registration/WatcherForm.tsx
new file mode 100644
index 0000000..c41e088
--- /dev/null
+++ b/apps/web/src/components/registration/WatcherForm.tsx
@@ -0,0 +1,403 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+	calculateDrinkCard,
+	type GuestEntry,
+	type GuestErrors,
+	inputCls,
+	validateEmail,
+	validateGuests,
+	validatePhone,
+	validateTextField,
+} from "@/lib/registration";
+import { client, orpc } from "@/utils/orpc";
+import { GuestList } from "./GuestList";
+
+interface WatcherErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+}
+
+interface Props {
+	onBack: () => void;
+}
+
+export function WatcherForm({ onBack }: Props) {
+	const [data, setData] = useState({
+		firstName: "",
+		lastName: "",
+		email: "",
+		phone: "",
+		extraQuestions: "",
+	});
+	const [errors, setErrors] = useState<WatcherErrors>({});
+	const [touched, setTouched] = useState<Record<string, boolean>>({});
+	const [guests, setGuests] = useState<GuestEntry[]>([]);
+	const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
+
+	const submitMutation = useMutation({
+		...orpc.submitRegistration.mutationOptions(),
+		onSuccess: async (result) => {
+			if (!result.managementToken) return;
+			// Redirect to Lemon Squeezy checkout immediately after registration
+			try {
+				const checkout = await client.getCheckoutUrl({
+					token: result.managementToken,
+				});
+				window.location.href = checkout.checkoutUrl;
+			} catch (error) {
+				console.error("Checkout error:", error);
+				toast.error("Er is iets misgegaan bij het aanmaken van de betaling");
+			}
+		},
+		onError: (error) => {
+			toast.error(`Er is iets misgegaan: ${error.message}`);
+		},
+	});
+
+	function validate(): boolean {
+		const fieldErrs: WatcherErrors = {
+			firstName: validateTextField(data.firstName, true, "Voornaam"),
+			lastName: validateTextField(data.lastName, true, "Achternaam"),
+			email: validateEmail(data.email),
+			phone: validatePhone(data.phone),
+		};
+		setErrors(fieldErrs);
+		setTouched({
+			firstName: true,
+			lastName: true,
+			email: true,
+			phone: true,
+		});
+		const { errors: gErrs, valid: gValid } = validateGuests(guests);
+		setGuestErrors(gErrs);
+		return !Object.values(fieldErrs).some(Boolean) && gValid;
+	}
+
+	function handleChange(
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		const { name, value } = e.target;
+		setData((prev) => ({ ...prev, [name]: value }));
+		if (touched[name]) {
+			const errMap: Record<string, string | undefined> = {
+				firstName: validateTextField(value, true, "Voornaam"),
+				lastName: validateTextField(value, true, "Achternaam"),
+				email: validateEmail(value),
+				phone: validatePhone(value),
+			};
+			setErrors((prev) => ({ ...prev, [name]: errMap[name] }));
+		}
+	}
+
+	function handleBlur(
+		e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) {
+		const { name, value } = e.target;
+		setTouched((prev) => ({ ...prev, [name]: true }));
+		const errMap: Record<string, string | undefined> = {
+			firstName: validateTextField(value, true, "Voornaam"),
+			lastName: validateTextField(value, true, "Achternaam"),
+			email: validateEmail(value),
+			phone: validatePhone(value),
+		};
+		setErrors((prev) => ({ ...prev, [name]: errMap[name] }));
+	}
+
+	function handleGuestChange(
+		index: number,
+		field: keyof GuestEntry,
+		value: string,
+	) {
+		setGuests((prev) => {
+			const next = [...prev];
+			next[index] = { ...next[index], [field]: value } as GuestEntry;
+			return next;
+		});
+	}
+
+	function handleAddGuest() {
+		if (guests.length >= 9) return;
+		setGuests((prev) => [
+			...prev,
+			{ firstName: "", lastName: "", email: "", phone: "" },
+		]);
+		setGuestErrors((prev) => [...prev, {}]);
+	}
+
+	function handleRemoveGuest(index: number) {
+		setGuests((prev) => prev.filter((_, i) => i !== index));
+		setGuestErrors((prev) => prev.filter((_, i) => i !== index));
+	}
+
+	function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		if (!validate()) {
+			toast.error("Controleer je invoer");
+			return;
+		}
+		submitMutation.mutate({
+			firstName: data.firstName.trim(),
+			lastName: data.lastName.trim(),
+			email: data.email.trim(),
+			phone: data.phone.trim() || undefined,
+			registrationType: "watcher",
+			guests: guests.map((g) => ({
+				firstName: g.firstName.trim(),
+				lastName: g.lastName.trim(),
+				email: g.email.trim() || undefined,
+				phone: g.phone.trim() || undefined,
+			})),
+			extraQuestions: data.extraQuestions.trim() || undefined,
+		});
+	}
+
+	const totalPrice = calculateDrinkCard(guests.length);
+
+	return (
+		<div>
+			{/* Back + type header */}
+			<div className="mb-8 flex items-center gap-4">
+				<button
+					type="button"
+					onClick={onBack}
+					className="flex items-center gap-2 text-white/60 transition-colors hover:text-white"
+				>
+					<svg
+						className="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						strokeWidth={2}
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+						/>
+					</svg>
+					Terug
+				</button>
+				<div className="h-px flex-1 bg-white/10" />
+				<div className="flex items-center gap-2">
+					<div className="flex h-8 w-8 items-center justify-center rounded-full bg-teal-400/20 text-teal-300">
+						<svg
+							className="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+							strokeWidth={1.5}
+							aria-hidden="true"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z"
+							/>
+						</svg>
+					</div>
+					<span className="font-['Intro',sans-serif] text-teal-300">
+						Ik wil komen kijken
+					</span>
+				</div>
+			</div>
+
+			{/* Live price callout */}
+			<div className="mb-8 flex items-center gap-4 rounded-lg border border-teal-400/30 bg-teal-400/10 p-5">
+				<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-teal-400/20 font-bold text-teal-300 text-xl">
+					€{totalPrice}
+				</div>
+				<div>
+					<p className="font-semibold text-white">Drinkkaart inbegrepen</p>
+					<p className="text-sm text-white/70">
+						Je betaald bij inkom <strong className="text-teal-300">€5</strong>{" "}
+						(+ €2 per medebezoeker) dat gaat naar je drinkkaart.
+						{guests.length > 0 && (
+							<span className="ml-1 font-semibold text-teal-300">
+								Totaal: €{totalPrice} voor {1 + guests.length} personen.
+							</span>
+						)}
+					</p>
+				</div>
+			</div>
+
+			<form onSubmit={handleSubmit} className="flex flex-col gap-6" noValidate>
+				{/* Name row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="w-firstName" className="text-white text-xl">
+							Voornaam <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="w-firstName"
+							name="firstName"
+							value={data.firstName}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="Jouw voornaam"
+							autoComplete="given-name"
+							aria-required="true"
+							aria-invalid={touched.firstName && !!errors.firstName}
+							className={inputCls(!!touched.firstName && !!errors.firstName)}
+						/>
+						{touched.firstName && errors.firstName && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.firstName}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="w-lastName" className="text-white text-xl">
+							Achternaam <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="w-lastName"
+							name="lastName"
+							value={data.lastName}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="Jouw achternaam"
+							autoComplete="family-name"
+							aria-required="true"
+							aria-invalid={touched.lastName && !!errors.lastName}
+							className={inputCls(!!touched.lastName && !!errors.lastName)}
+						/>
+						{touched.lastName && errors.lastName && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.lastName}
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Contact row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="w-email" className="text-white text-xl">
+							E-mail <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="email"
+							id="w-email"
+							name="email"
+							value={data.email}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="jouw@email.be"
+							autoComplete="email"
+							inputMode="email"
+							aria-required="true"
+							aria-invalid={touched.email && !!errors.email}
+							className={inputCls(!!touched.email && !!errors.email)}
+						/>
+						{touched.email && errors.email && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.email}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="w-phone" className="text-white text-xl">
+							Telefoon
+						</label>
+						<input
+							type="tel"
+							id="w-phone"
+							name="phone"
+							value={data.phone}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="06-12345678"
+							autoComplete="tel"
+							inputMode="tel"
+							aria-invalid={touched.phone && !!errors.phone}
+							className={inputCls(!!touched.phone && !!errors.phone)}
+						/>
+						{touched.phone && errors.phone && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.phone}
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Guests */}
+				<GuestList
+					guests={guests}
+					errors={guestErrors}
+					onChange={handleGuestChange}
+					onAdd={handleAddGuest}
+					onRemove={handleRemoveGuest}
+				/>
+
+				{/* Extra questions */}
+				<div className="flex flex-col gap-2 border border-white/10 p-6">
+					<label htmlFor="w-extraQuestions" className="text-white text-xl">
+						Vragen of opmerkingen
+					</label>
+					<textarea
+						id="w-extraQuestions"
+						name="extraQuestions"
+						value={data.extraQuestions}
+						onChange={handleChange}
+						onBlur={handleBlur}
+						placeholder="Heb je nog vragen of iets dat we moeten weten?"
+						rows={3}
+						autoComplete="off"
+						className="resize-none bg-transparent text-lg text-white transition-all placeholder:text-white/40 focus:outline-none"
+					/>
+				</div>
+
+				<div className="flex flex-col items-center gap-4 pt-4">
+					<button
+						type="submit"
+						disabled={submitMutation.isPending}
+						aria-busy={submitMutation.isPending}
+						className="bg-white px-12 py-4 font-['Intro',sans-serif] text-[#214e51] text-xl transition-all hover:scale-105 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-[#214e51] disabled:cursor-not-allowed disabled:opacity-50 md:text-2xl"
+					>
+						{submitMutation.isPending ? (
+							<span className="flex items-center gap-2">
+								<svg
+									className="h-5 w-5 animate-spin"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									aria-label="Laden"
+								>
+									<circle
+										className="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										strokeWidth="4"
+									/>
+									<path
+										className="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									/>
+								</svg>
+								Bezig...
+							</span>
+						) : (
+							"Bevestigen & betalen"
+						)}
+					</button>
+					<a
+						href="/contact"
+						className="text-sm text-white/60 transition-colors hover:text-white"
+					>
+						Nog vragen? Neem contact op
+					</a>
+				</div>
+			</form>
+		</div>
+	);
+}
diff --git a/apps/web/src/lib/registration.ts b/apps/web/src/lib/registration.ts
new file mode 100644
index 0000000..f90fefb
--- /dev/null
+++ b/apps/web/src/lib/registration.ts
@@ -0,0 +1,117 @@
+// Shared types, validators, and helpers for the registration workflow.
+// Single source of truth — used by EventRegistrationForm, manage page, and API router.
+
+// ---------------------------------------------------------------------------
+// Drink card pricing
+// ---------------------------------------------------------------------------
+
+export const DRINK_CARD_BASE = 5; // €5 for primary registrant
+export const DRINK_CARD_PER_GUEST = 2; // €2 per additional guest
+export const MAX_GUESTS = 9;
+
+/** Returns drink card value in euros for a given number of extra guests. */
+export function calculateDrinkCard(guestCount: number): number {
+	return DRINK_CARD_BASE + guestCount * DRINK_CARD_PER_GUEST;
+}
+
+/** Returns drink card value in cents for payment processing. */
+export function calculateDrinkCardCents(guestCount: number): number {
+	return calculateDrinkCard(guestCount) * 100;
+}
+
+// ---------------------------------------------------------------------------
+// Guest types
+// ---------------------------------------------------------------------------
+
+export interface GuestEntry {
+	firstName: string;
+	lastName: string;
+	email: string;
+	phone: string;
+}
+
+export interface GuestErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+}
+
+/**
+ * Safely parses the JSON blob stored in the `guests` DB column.
+ * Returns an empty array on any parse failure.
+ */
+export function parseGuests(raw: string | null | undefined): GuestEntry[] {
+	if (!raw) return [];
+	try {
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return [];
+		return parsed.map((g) => ({
+			firstName: g.firstName ?? "",
+			lastName: g.lastName ?? "",
+			email: g.email ?? "",
+			phone: g.phone ?? "",
+		}));
+	} catch {
+		return [];
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Module-level validators (pure functions — no hook deps)
+// ---------------------------------------------------------------------------
+
+export function validateTextField(
+	value: string,
+	required: boolean,
+	label: string,
+	minLen = 2,
+): string | undefined {
+	if (required && !value.trim()) return `${label} is verplicht`;
+	if (value.trim() && value.length < minLen)
+		return `${label} moet minimaal ${minLen} tekens bevatten`;
+	return undefined;
+}
+
+export function validateEmail(value: string): string | undefined {
+	if (!value.trim()) return "E-mail is verplicht";
+	if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
+		return "Voer een geldig e-mailadres in";
+	return undefined;
+}
+
+export function validatePhone(value: string): string | undefined {
+	if (value && !/^[\d\s\-+()]{10,}$/.test(value.replace(/\s/g, "")))
+		return "Voer een geldig telefoonnummer in";
+	return undefined;
+}
+
+/** Validates all guests and returns errors array + overall validity flag. */
+export function validateGuests(guests: GuestEntry[]): {
+	errors: GuestErrors[];
+	valid: boolean;
+} {
+	const errors: GuestErrors[] = guests.map((g) => ({
+		firstName: !g.firstName.trim() ? "Voornaam is verplicht" : undefined,
+		lastName: !g.lastName.trim() ? "Achternaam is verplicht" : undefined,
+		email:
+			g.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(g.email.trim())
+				? "Voer een geldig e-mailadres in"
+				: undefined,
+		phone:
+			g.phone.trim() && !/^[\d\s\-+()]{10,}$/.test(g.phone.replace(/\s/g, ""))
+				? "Voer een geldig telefoonnummer in"
+				: undefined,
+	}));
+	const valid = !errors.some((e) => Object.values(e).some(Boolean));
+	return { errors, valid };
+}
+
+// ---------------------------------------------------------------------------
+// Shared CSS helpers
+// ---------------------------------------------------------------------------
+
+/** Input class string with error-state variant. */
+export function inputCls(hasError: boolean): string {
+	return `w-full border-b bg-transparent pb-2 text-lg text-white placeholder:text-white/40 focus:outline-none focus:ring-0 transition-colors ${hasError ? "border-red-400" : "border-white/30 focus:border-white"}`;
+}
diff --git a/apps/web/src/routes/admin.tsx b/apps/web/src/routes/admin.tsx
index 940bae8..3d4a134 100644
--- a/apps/web/src/routes/admin.tsx
+++ b/apps/web/src/routes/admin.tsx
@@ -477,6 +477,12 @@ function AdminPage() {
 										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
 											16+
 										</th>
+										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
+											Betaald
+										</th>
+										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
+											Betaald
+										</th>
 										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
 											Datum
 										</th>
@@ -486,7 +492,7 @@ function AdminPage() {
 									{registrationsQuery.isLoading ? (
 										<tr>
 											<td
-												colSpan={9}
+												colSpan={10}
 												className="px-6 py-8 text-center text-white/60"
 											>
 												Laden...
@@ -495,7 +501,7 @@ function AdminPage() {
 									) : registrations.length === 0 ? (
 										<tr>
 											<td
-												colSpan={9}
+												colSpan={10}
 												className="px-6 py-8 text-center text-white/60"
 											>
 												Geen registraties gevonden
@@ -564,6 +570,47 @@ function AdminPage() {
 															"-"
 														)}
 													</td>
+													<td className="px-6 py-4">
+														{isPerformer ? (
+															<span className="text-white/40">-</span>
+														) : reg.paymentStatus === "paid" ? (
+															<span className="inline-flex items-center gap-1 text-green-400 text-sm">
+																<svg
+																	className="h-4 w-4"
+																	fill="none"
+																	viewBox="0 0 24 24"
+																	stroke="currentColor"
+																	strokeWidth={2}
+																>
+																	<title>Betaald icoon</title>
+																	<path
+																		strokeLinecap="round"
+																		strokeLinejoin="round"
+																		d="M5 13l4 4L19 7"
+																	/>
+																</svg>
+																Betaald
+															</span>
+														) : (
+															<span className="inline-flex items-center gap-1 text-sm text-yellow-400">
+																<svg
+																	className="h-4 w-4"
+																	fill="none"
+																	viewBox="0 0 24 24"
+																	stroke="currentColor"
+																	strokeWidth={2}
+																>
+																	<title>In afwachting icoon</title>
+																	<path
+																		strokeLinecap="round"
+																		strokeLinejoin="round"
+																		d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+																	/>
+																</svg>
+																Open
+															</span>
+														)}
+													</td>
 													<td className="px-6 py-4 text-white/60">
 														{new Date(reg.createdAt).toLocaleDateString(
 															"nl-BE",
diff --git a/apps/web/src/routes/manage.$token.tsx b/apps/web/src/routes/manage.$token.tsx
index 439ffad..b91cb22 100644
--- a/apps/web/src/routes/manage.$token.tsx
+++ b/apps/web/src/routes/manage.$token.tsx
@@ -2,71 +2,439 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, Link, useParams } from "@tanstack/react-router";
 import { useState } from "react";
 import { toast } from "sonner";
+import { GuestList } from "@/components/registration/GuestList";
+import {
+	calculateDrinkCard,
+	type GuestEntry,
+	inputCls,
+	parseGuests,
+} from "@/lib/registration";
 import { orpc } from "@/utils/orpc";
 
 export const Route = createFileRoute("/manage/$token")({
 	component: ManageRegistrationPage,
 });
 
-interface GuestEntry {
-	firstName: string;
-	lastName: string;
-	email: string;
-	phone: string;
+// ---------------------------------------------------------------------------
+// Shared layout wrappers
+// ---------------------------------------------------------------------------
+
+function PageShell({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="min-h-screen bg-[#214e51]">
+			<div className="mx-auto max-w-3xl px-6 py-16">{children}</div>
+		</div>
+	);
 }
 
-function parseGuests(raw: string | null | undefined): GuestEntry[] {
-	if (!raw) return [];
-	try {
-		const parsed = JSON.parse(raw);
-		if (Array.isArray(parsed)) {
-			return parsed.map((g) => ({
-				firstName: g.firstName ?? "",
-				lastName: g.lastName ?? "",
-				email: g.email ?? "",
-				phone: g.phone ?? "",
-			}));
-		}
-	} catch {
-		// ignore
-	}
-	return [];
+function BackLink() {
+	return (
+		<Link
+			to="/"
+			className="link-hover mb-8 inline-block text-white/80 hover:text-white"
+		>
+			← Terug naar home
+		</Link>
+	);
 }
 
-function ManageRegistrationPage() {
-	const { token } = useParams({ from: "/manage/$token" });
-	const queryClient = useQueryClient();
+// ---------------------------------------------------------------------------
+// Payment status badges
+// ---------------------------------------------------------------------------
+
+function PaidBadge() {
+	return (
+		<div className="inline-flex items-center gap-2 rounded-full border border-green-400/40 bg-green-400/10 px-4 py-1.5 font-semibold text-green-400 text-sm">
+			<svg
+				className="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				strokeWidth={2}
+				aria-label="Betaald"
+			>
+				<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+			</svg>
+			Betaling ontvangen
+		</div>
+	);
+}
+
+function PendingBadge() {
+	return (
+		<div className="inline-flex items-center gap-2 rounded-full border border-yellow-400/40 bg-yellow-400/10 px-4 py-1.5 font-semibold text-sm text-yellow-400">
+			<svg
+				className="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				strokeWidth={2}
+				aria-label="In afwachting"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			Betaling in afwachting
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Edit form (inline on the manage page)
+// ---------------------------------------------------------------------------
+
+interface EditFormProps {
+	token: string;
+	initialData: {
+		firstName: string;
+		lastName: string;
+		email: string;
+		phone: string | null;
+		registrationType: string;
+		artForm: string | null;
+		experience: string | null;
+		isOver16: boolean;
+		extraQuestions: string | null;
+		guests: string | null;
+		paymentStatus: string | null;
+	};
+	onCancel: () => void;
+	onSaved: () => void;
+}
+
+function EditForm({ token, initialData, onCancel, onSaved }: EditFormProps) {
+	// Narrow the string from DB to the valid union; fall back to "watcher"
+	const initialType: "performer" | "watcher" =
+		initialData.registrationType === "performer" ? "performer" : "watcher";
 
-	const [isEditing, setIsEditing] = useState(false);
 	const [formData, setFormData] = useState({
-		firstName: "",
-		lastName: "",
-		email: "",
-		phone: "",
-		registrationType: "watcher" as "performer" | "watcher",
-		artForm: "",
-		experience: "",
-		isOver16: false,
-		extraQuestions: "",
-	});
-	const [formGuests, setFormGuests] = useState<GuestEntry[]>([]);
-
-	const { data, isLoading, error } = useQuery({
-		...orpc.getRegistrationByToken.queryOptions({ input: { token } }),
+		firstName: initialData.firstName,
+		lastName: initialData.lastName,
+		email: initialData.email,
+		phone: initialData.phone ?? "",
+		registrationType: initialType,
+		artForm: initialData.artForm ?? "",
+		experience: initialData.experience ?? "",
+		isOver16: initialData.isOver16,
+		extraQuestions: initialData.extraQuestions ?? "",
 	});
+	const [formGuests, setFormGuests] = useState<GuestEntry[]>(
+		parseGuests(initialData.guests),
+	);
 
 	const updateMutation = useMutation({
 		...orpc.updateRegistration.mutationOptions(),
 		onSuccess: () => {
 			toast.success("Inschrijving bijgewerkt!");
-			queryClient.invalidateQueries({ queryKey: ["getRegistrationByToken"] });
-			setIsEditing(false);
+			onSaved();
 		},
 		onError: (err) => {
 			toast.error(`Opslaan mislukt: ${err.message}`);
 		},
 	});
 
+	const isWatcher = formData.registrationType === "watcher";
+	const totalDrinkCard = isWatcher ? calculateDrinkCard(formGuests.length) : 0;
+	const originalGuestCount = parseGuests(initialData.guests).length;
+	const isPaid = initialData.paymentStatus === "paid";
+	const extraGuests = formGuests.length - originalGuestCount;
+
+	function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		const performer = formData.registrationType === "performer";
+		updateMutation.mutate({
+			token,
+			firstName: formData.firstName.trim(),
+			lastName: formData.lastName.trim(),
+			email: formData.email.trim(),
+			phone: formData.phone.trim() || undefined,
+			registrationType: formData.registrationType,
+			artForm: performer ? formData.artForm.trim() || undefined : undefined,
+			experience: performer
+				? formData.experience.trim() || undefined
+				: undefined,
+			isOver16: performer ? formData.isOver16 : false,
+			guests: performer
+				? []
+				: formGuests.map((g) => ({
+						firstName: g.firstName.trim(),
+						lastName: g.lastName.trim(),
+						email: g.email.trim() || undefined,
+						phone: g.phone.trim() || undefined,
+					})),
+			extraQuestions: formData.extraQuestions.trim() || undefined,
+		});
+	}
+
+	return (
+		<>
+			<BackLink />
+			<h1 className="mb-8 font-['Intro',sans-serif] text-4xl text-white">
+				Bewerk inschrijving
+			</h1>
+
+			<form onSubmit={handleSubmit} className="space-y-6">
+				{/* Name */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div>
+						<label htmlFor="firstName" className="mb-2 block text-white">
+							Voornaam *
+						</label>
+						<input
+							id="firstName"
+							type="text"
+							required
+							value={formData.firstName}
+							onChange={(e) =>
+								setFormData((p) => ({ ...p, firstName: e.target.value }))
+							}
+							className={inputCls(false)}
+						/>
+					</div>
+					<div>
+						<label htmlFor="lastName" className="mb-2 block text-white">
+							Achternaam *
+						</label>
+						<input
+							id="lastName"
+							type="text"
+							required
+							value={formData.lastName}
+							onChange={(e) =>
+								setFormData((p) => ({ ...p, lastName: e.target.value }))
+							}
+							className={inputCls(false)}
+						/>
+					</div>
+				</div>
+
+				{/* Contact */}
+				<div>
+					<label htmlFor="email" className="mb-2 block text-white">
+						E-mail *
+					</label>
+					<input
+						id="email"
+						type="email"
+						required
+						value={formData.email}
+						onChange={(e) =>
+							setFormData((p) => ({ ...p, email: e.target.value }))
+						}
+						className={inputCls(false)}
+					/>
+				</div>
+				<div>
+					<label htmlFor="phone" className="mb-2 block text-white">
+						Telefoon
+					</label>
+					<input
+						id="phone"
+						type="tel"
+						value={formData.phone}
+						onChange={(e) =>
+							setFormData((p) => ({ ...p, phone: e.target.value }))
+						}
+						className={inputCls(false)}
+					/>
+				</div>
+
+				{/* Registration type toggle */}
+				<div>
+					<p className="mb-3 text-white">Type inschrijving</p>
+					<div className="flex gap-4">
+						{(["performer", "watcher"] as const).map((type) => (
+							<label
+								key={type}
+								className="flex cursor-pointer items-center gap-3"
+							>
+								<div className="relative flex shrink-0">
+									<input
+										type="radio"
+										name="registrationType"
+										value={type}
+										checked={formData.registrationType === type}
+										onChange={() =>
+											setFormData((p) => ({ ...p, registrationType: type }))
+										}
+										className="peer sr-only"
+									/>
+									<div
+										className={`h-5 w-5 rounded-full border-2 border-white/50 bg-transparent transition-colors ${type === "performer" ? "peer-checked:border-amber-400 peer-checked:bg-amber-400" : "peer-checked:border-teal-400 peer-checked:bg-teal-400"}`}
+									/>
+								</div>
+								<span className="text-white">
+									{type === "performer" ? "Optreden" : "Kijken"}
+								</span>
+							</label>
+						))}
+					</div>
+				</div>
+
+				{/* Performer fields */}
+				{formData.registrationType === "performer" && (
+					<div className="space-y-6 border border-amber-400/20 bg-amber-400/5 p-6">
+						<div>
+							<label htmlFor="artForm" className="mb-2 block text-white">
+								Kunstvorm *
+							</label>
+							<input
+								id="artForm"
+								type="text"
+								required
+								value={formData.artForm}
+								onChange={(e) =>
+									setFormData((p) => ({ ...p, artForm: e.target.value }))
+								}
+								list="artFormSuggestions"
+								className={inputCls(false)}
+							/>
+							<datalist id="artFormSuggestions">
+								<option value="Muziek" />
+								<option value="Theater" />
+								<option value="Dans" />
+								<option value="Beeldende Kunst" />
+								<option value="Woordkunst" />
+								<option value="Comedy" />
+							</datalist>
+						</div>
+						<div>
+							<label htmlFor="experience" className="mb-2 block text-white">
+								Ervaring
+							</label>
+							<input
+								id="experience"
+								type="text"
+								value={formData.experience}
+								onChange={(e) =>
+									setFormData((p) => ({ ...p, experience: e.target.value }))
+								}
+								list="experienceSuggestions"
+								className={inputCls(false)}
+							/>
+							<datalist id="experienceSuggestions">
+								<option value="Beginner" />
+								<option value="Gevorderd" />
+								<option value="Professional" />
+							</datalist>
+						</div>
+						<label className="flex cursor-pointer items-center gap-3">
+							<div className="relative flex shrink-0">
+								<input
+									type="checkbox"
+									checked={formData.isOver16}
+									onChange={(e) =>
+										setFormData((p) => ({ ...p, isOver16: e.target.checked }))
+									}
+									className="peer sr-only"
+								/>
+								<div className="h-6 w-6 border-2 border-white/50 bg-transparent transition-colors peer-checked:border-amber-400 peer-checked:bg-amber-400" />
+								<svg
+									className="pointer-events-none absolute top-0 left-0 h-6 w-6 scale-0 text-[#214e51] transition-transform peer-checked:scale-100"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={3}
+									aria-label="Geselecteerd"
+								>
+									<polyline points="20 6 9 17 4 12" />
+								</svg>
+							</div>
+							<span className="text-white">Ik ben 16 jaar of ouder</span>
+						</label>
+					</div>
+				)}
+
+				{/* Guests for watchers */}
+				{isWatcher && (
+					<GuestList
+						guests={formGuests}
+						errors={[]}
+						onChange={(idx, field, value) => {
+							setFormGuests((prev) => {
+								const next = [...prev];
+								next[idx] = { ...next[idx], [field]: value } as GuestEntry;
+								return next;
+							});
+						}}
+						onAdd={() => {
+							if (formGuests.length >= 9) return;
+							setFormGuests((prev) => [
+								...prev,
+								{ firstName: "", lastName: "", email: "", phone: "" },
+							]);
+						}}
+						onRemove={(idx) =>
+							setFormGuests((prev) => prev.filter((_, i) => i !== idx))
+						}
+						headerNote={
+							<p className="mt-1 text-sm text-white/60">
+								Drinkkaart totaal: €{totalDrinkCard} voor{" "}
+								{1 + formGuests.length} personen
+								{isPaid && extraGuests > 0 && (
+									<span className="ml-2 text-yellow-400">
+										— Let op: €{extraGuests * 2} extra voor {extraGuests} nieuwe
+										gast(en)
+									</span>
+								)}
+							</p>
+						}
+					/>
+				)}
+
+				{/* Extra questions */}
+				<div>
+					<label htmlFor="extraQuestions" className="mb-2 block text-white">
+						Vragen of opmerkingen
+					</label>
+					<textarea
+						id="extraQuestions"
+						rows={4}
+						value={formData.extraQuestions}
+						onChange={(e) =>
+							setFormData((p) => ({ ...p, extraQuestions: e.target.value }))
+						}
+						className="w-full resize-none bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:outline-none"
+					/>
+				</div>
+
+				<div className="flex flex-wrap items-center gap-4 pt-4">
+					<button
+						type="submit"
+						disabled={updateMutation.isPending}
+						className="bg-white px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100 disabled:opacity-50"
+					>
+						{updateMutation.isPending ? "Opslaan..." : "Opslaan"}
+					</button>
+					<button
+						type="button"
+						onClick={onCancel}
+						className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
+					>
+						Annuleren
+					</button>
+				</div>
+			</form>
+		</>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Main manage page
+// ---------------------------------------------------------------------------
+
+function ManageRegistrationPage() {
+	const { token } = useParams({ from: "/manage/$token" });
+	const queryClient = useQueryClient();
+	const [isEditing, setIsEditing] = useState(false);
+
+	const { data, isLoading, error } = useQuery({
+		...orpc.getRegistrationByToken.queryOptions({ input: { token } }),
+	});
+
 	const cancelMutation = useMutation({
 		...orpc.cancelRegistration.mutationOptions(),
 		onSuccess: () => {
@@ -79,68 +447,16 @@ function ManageRegistrationPage() {
 	});
 
 	const checkoutMutation = useMutation({
-		...orpc.createCheckout.mutationOptions(),
-		onSuccess: (data) => {
-			if (data.checkoutUrl) {
-				window.location.href = data.checkoutUrl;
-			}
+		...orpc.getCheckoutUrl.mutationOptions(),
+		onSuccess: (result) => {
+			window.location.href = result.checkoutUrl;
 		},
 		onError: (err) => {
 			toast.error(`Betaling starten mislukt: ${err.message}`);
 		},
 	});
 
-	const handlePay = () => {
-		checkoutMutation.mutate({ token });
-	};
-
-	const handleEdit = () => {
-		if (data) {
-			setFormData({
-				firstName: data.firstName,
-				lastName: data.lastName,
-				email: data.email,
-				phone: data.phone || "",
-				registrationType:
-					(data.registrationType as "performer" | "watcher") ?? "watcher",
-				artForm: data.artForm || "",
-				experience: data.experience || "",
-				isOver16: data.isOver16 ?? false,
-				extraQuestions: data.extraQuestions || "",
-			});
-			setFormGuests(parseGuests(data.guests));
-			setIsEditing(true);
-		}
-	};
-
-	const handleSave = (e: React.FormEvent) => {
-		e.preventDefault();
-		const isPerformer = formData.registrationType === "performer";
-		updateMutation.mutate({
-			token,
-			firstName: formData.firstName.trim(),
-			lastName: formData.lastName.trim(),
-			email: formData.email.trim(),
-			phone: formData.phone.trim() || undefined,
-			registrationType: formData.registrationType,
-			artForm: isPerformer ? formData.artForm.trim() || undefined : undefined,
-			experience: isPerformer
-				? formData.experience.trim() || undefined
-				: undefined,
-			isOver16: isPerformer ? formData.isOver16 : false,
-			guests: isPerformer
-				? []
-				: formGuests.map((g) => ({
-						firstName: g.firstName.trim(),
-						lastName: g.lastName.trim(),
-						email: g.email.trim() || undefined,
-						phone: g.phone.trim() || undefined,
-					})),
-			extraQuestions: formData.extraQuestions.trim() || undefined,
-		});
-	};
-
-	const handleCancel = () => {
+	function handleCancel() {
 		if (
 			confirm(
 				"Weet je zeker dat je je inschrijving wilt annuleren? Dit kan niet ongedaan worden gemaakt.",
@@ -148,658 +464,198 @@ function ManageRegistrationPage() {
 		) {
 			cancelMutation.mutate({ token });
 		}
-	};
+	}
 
-	const handleAddGuest = () => {
-		if (formGuests.length >= 9) return;
-		setFormGuests((prev) => [
-			...prev,
-			{ firstName: "", lastName: "", email: "", phone: "" },
-		]);
-	};
-
-	const handleRemoveGuest = (index: number) => {
-		setFormGuests((prev) => prev.filter((_, i) => i !== index));
-	};
-
-	const handleGuestChange = (
-		index: number,
-		field: keyof GuestEntry,
-		value: string,
-	) => {
-		setFormGuests((prev) => {
-			const next = [...prev];
-			next[index] = { ...next[index], [field]: value };
-			return next;
-		});
-	};
-
-	const inputClasses =
-		"w-full border-white/30 border-b bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:border-white focus:outline-none";
+	function handleSaved() {
+		queryClient.invalidateQueries({ queryKey: ["getRegistrationByToken"] });
+		setIsEditing(false);
+	}
 
+	// Loading state
 	if (isLoading) {
 		return (
-			<div className="min-h-screen bg-[#214e51]">
-				<div className="mx-auto max-w-3xl px-6 py-16">
-					<div className="animate-pulse text-white/60">Laden...</div>
-				</div>
-			</div>
+			<PageShell>
+				<div className="animate-pulse text-white/60">Laden...</div>
+			</PageShell>
 		);
 	}
 
+	// Error / not found / cancelled
 	if (error || !data || data.cancelledAt) {
 		return (
-			<div className="min-h-screen bg-[#214e51]">
-				<div className="mx-auto max-w-3xl px-6 py-16">
-					<Link
-						to="/"
-						className="link-hover mb-8 inline-block text-white/80 hover:text-white"
-					>
-						← Terug naar home
-					</Link>
-					<h1 className="mb-4 font-['Intro',sans-serif] text-4xl text-white">
-						Inschrijving niet gevonden
-					</h1>
-					<p className="mb-6 text-white/80">
-						Deze link is ongeldig of de inschrijving is geannuleerd.
-					</p>
-					<a
-						href="/#registration"
-						className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
-					>
-						Nieuwe inschrijving
-					</a>
-				</div>
-			</div>
+			<PageShell>
+				<BackLink />
+				<h1 className="mb-4 font-['Intro',sans-serif] text-4xl text-white">
+					Inschrijving niet gevonden
+				</h1>
+				<p className="mb-6 text-white/80">
+					Deze link is ongeldig of de inschrijving is geannuleerd.
+				</p>
+				<a
+					href="/#registration"
+					className="inline-flex items-center bg-white px-6 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
+				>
+					Nieuwe inschrijving
+				</a>
+			</PageShell>
 		);
 	}
 
+	// Edit mode
+	if (isEditing) {
+		return (
+			<PageShell>
+				<EditForm
+					token={token}
+					initialData={data}
+					onCancel={() => setIsEditing(false)}
+					onSaved={handleSaved}
+				/>
+			</PageShell>
+		);
+	}
+
+	// View mode
 	const isPerformer = data.registrationType === "performer";
 	const viewGuests = parseGuests(data.guests);
 
-	if (isEditing) {
-		const isEditingWatcher = formData.registrationType === "watcher";
-		const totalDrinkCard = isEditingWatcher ? 5 + formGuests.length * 2 : 0;
-
-		return (
-			<div className="min-h-screen bg-[#214e51]">
-				<div className="mx-auto max-w-3xl px-6 py-16">
-					<Link
-						to="/"
-						className="link-hover mb-8 inline-block text-white/80 hover:text-white"
-					>
-						← Terug naar home
-					</Link>
-					<h1 className="mb-8 font-['Intro',sans-serif] text-4xl text-white">
-						Bewerk inschrijving
-					</h1>
-
-					<form onSubmit={handleSave} className="space-y-6">
-						<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-							<div>
-								<label htmlFor="firstName" className="mb-2 block text-white">
-									Voornaam *
-								</label>
-								<input
-									id="firstName"
-									type="text"
-									required
-									value={formData.firstName}
-									onChange={(e) =>
-										setFormData((p) => ({ ...p, firstName: e.target.value }))
-									}
-									className={inputClasses}
-								/>
-							</div>
-							<div>
-								<label htmlFor="lastName" className="mb-2 block text-white">
-									Achternaam *
-								</label>
-								<input
-									id="lastName"
-									type="text"
-									required
-									value={formData.lastName}
-									onChange={(e) =>
-										setFormData((p) => ({ ...p, lastName: e.target.value }))
-									}
-									className={inputClasses}
-								/>
-							</div>
-						</div>
-
-						<div>
-							<label htmlFor="email" className="mb-2 block text-white">
-								E-mail *
-							</label>
-							<input
-								id="email"
-								type="email"
-								required
-								value={formData.email}
-								onChange={(e) =>
-									setFormData((p) => ({ ...p, email: e.target.value }))
-								}
-								className={inputClasses}
-							/>
-						</div>
-
-						<div>
-							<label htmlFor="phone" className="mb-2 block text-white">
-								Telefoon
-							</label>
-							<input
-								id="phone"
-								type="tel"
-								value={formData.phone}
-								onChange={(e) =>
-									setFormData((p) => ({ ...p, phone: e.target.value }))
-								}
-								className={inputClasses}
-							/>
-						</div>
-
-						{/* Registration type */}
-						<div>
-							<p className="mb-3 text-white">Type inschrijving</p>
-							<div className="flex gap-4">
-								<label className="flex cursor-pointer items-center gap-3">
-									<div className="relative flex shrink-0">
-										<input
-											type="radio"
-											name="registrationType"
-											value="performer"
-											checked={formData.registrationType === "performer"}
-											onChange={() =>
-												setFormData((p) => ({
-													...p,
-													registrationType: "performer",
-												}))
-											}
-											className="peer sr-only"
-										/>
-										<div className="h-5 w-5 rounded-full border-2 border-white/50 bg-transparent transition-colors peer-checked:border-amber-400 peer-checked:bg-amber-400" />
-									</div>
-									<span className="text-white">Optreden</span>
-								</label>
-								<label className="flex cursor-pointer items-center gap-3">
-									<div className="relative flex shrink-0">
-										<input
-											type="radio"
-											name="registrationType"
-											value="watcher"
-											checked={formData.registrationType === "watcher"}
-											onChange={() =>
-												setFormData((p) => ({
-													...p,
-													registrationType: "watcher",
-												}))
-											}
-											className="peer sr-only"
-										/>
-										<div className="h-5 w-5 rounded-full border-2 border-white/50 bg-transparent transition-colors peer-checked:border-teal-400 peer-checked:bg-teal-400" />
-									</div>
-									<span className="text-white">Kijken</span>
-								</label>
-							</div>
-						</div>
-
-						{formData.registrationType === "performer" && (
-							<div className="space-y-6 border border-amber-400/20 bg-amber-400/5 p-6">
-								<div>
-									<label htmlFor="artForm" className="mb-2 block text-white">
-										Kunstvorm *
-									</label>
-									<input
-										id="artForm"
-										type="text"
-										required={formData.registrationType === "performer"}
-										value={formData.artForm}
-										onChange={(e) =>
-											setFormData((p) => ({ ...p, artForm: e.target.value }))
-										}
-										list="artFormSuggestions"
-										className={inputClasses}
-									/>
-									<datalist id="artFormSuggestions">
-										<option value="Muziek" />
-										<option value="Theater" />
-										<option value="Dans" />
-										<option value="Beeldende Kunst" />
-										<option value="Woordkunst" />
-										<option value="Comedy" />
-									</datalist>
-								</div>
-								<div>
-									<label htmlFor="experience" className="mb-2 block text-white">
-										Ervaring
-									</label>
-									<input
-										id="experience"
-										type="text"
-										value={formData.experience}
-										onChange={(e) =>
-											setFormData((p) => ({
-												...p,
-												experience: e.target.value,
-											}))
-										}
-										list="experienceSuggestions"
-										className={inputClasses}
-									/>
-									<datalist id="experienceSuggestions">
-										<option value="Beginner" />
-										<option value="Gevorderd" />
-										<option value="Professional" />
-									</datalist>
-								</div>
-								<label className="flex cursor-pointer items-center gap-3">
-									<div className="relative flex shrink-0">
-										<input
-											type="checkbox"
-											checked={formData.isOver16}
-											onChange={(e) =>
-												setFormData((p) => ({
-													...p,
-													isOver16: e.target.checked,
-												}))
-											}
-											className="peer sr-only"
-										/>
-										<div className="h-6 w-6 border-2 border-white/50 bg-transparent transition-colors peer-checked:border-amber-400 peer-checked:bg-amber-400" />
-										<svg
-											className="pointer-events-none absolute top-0 left-0 h-6 w-6 scale-0 text-[#214e51] transition-transform peer-checked:scale-100"
-											viewBox="0 0 24 24"
-											fill="none"
-											stroke="currentColor"
-											strokeWidth={3}
-											aria-label="Geselecteerd"
-										>
-											<polyline points="20 6 9 17 4 12" />
-										</svg>
-									</div>
-									<span className="text-white">Ik ben 16 jaar of ouder</span>
-								</label>
-							</div>
-						)}
-
-						{/* Guests section for watchers */}
-						{isEditingWatcher && (
-							<div className="border border-teal-400/20 bg-teal-400/5 p-6">
-								<div className="mb-4 flex items-center justify-between">
-									<div>
-										<p className="text-sm text-teal-300/80 uppercase tracking-wider">
-											Medebezoekers{" "}
-											<span className="text-white/50 normal-case">
-												({formGuests.length}/9)
-											</span>
-										</p>
-										<p className="mt-1 text-sm text-white/60">
-											Drinkkaart totaal: €{totalDrinkCard} voor{" "}
-											{1 + formGuests.length} personen
-										</p>
-									</div>
-									{formGuests.length < 9 && (
-										<button
-											type="button"
-											onClick={handleAddGuest}
-											className="flex items-center gap-1.5 rounded border border-teal-400/40 bg-teal-400/10 px-3 py-1.5 text-sm text-teal-300 transition-colors hover:bg-teal-400/20"
-										>
-											<svg
-												className="h-4 w-4"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke="currentColor"
-												strokeWidth={2}
-												aria-hidden="true"
-											>
-												<path
-													strokeLinecap="round"
-													strokeLinejoin="round"
-													d="M12 4.5v15m7.5-7.5h-15"
-												/>
-											</svg>
-											Toevoegen
-										</button>
-									)}
-								</div>
-
-								{formGuests.length === 0 && (
-									<p className="text-sm text-white/40">
-										Geen medebezoekers toegevoegd.
-									</p>
-								)}
-
-								<div className="flex flex-col gap-4">
-									{formGuests.map((guest, idx) => (
-										<div
-											key={`edit-guest-${
-												// biome-ignore lint/suspicious/noArrayIndexKey: stable index
-												idx
-											}`}
-											className="border border-teal-400/20 p-4"
-										>
-											<div className="mb-3 flex items-center justify-between">
-												<span className="font-medium text-sm text-teal-300">
-													Medebezoeker {idx + 1}
-												</span>
-												<button
-													type="button"
-													onClick={() => handleRemoveGuest(idx)}
-													className="text-red-400/70 text-sm transition-colors hover:text-red-300"
-												>
-													Verwijderen
-												</button>
-											</div>
-											<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-												<div>
-													<label
-														htmlFor={`edit-guest-${idx}-firstName`}
-														className="mb-1 block text-sm text-white/70"
-													>
-														Voornaam *
-													</label>
-													<input
-														id={`edit-guest-${idx}-firstName`}
-														type="text"
-														required
-														value={guest.firstName}
-														onChange={(e) =>
-															handleGuestChange(
-																idx,
-																"firstName",
-																e.target.value,
-															)
-														}
-														placeholder="Voornaam"
-														className={inputClasses}
-													/>
-												</div>
-												<div>
-													<label
-														htmlFor={`edit-guest-${idx}-lastName`}
-														className="mb-1 block text-sm text-white/70"
-													>
-														Achternaam *
-													</label>
-													<input
-														id={`edit-guest-${idx}-lastName`}
-														type="text"
-														required
-														value={guest.lastName}
-														onChange={(e) =>
-															handleGuestChange(idx, "lastName", e.target.value)
-														}
-														placeholder="Achternaam"
-														className={inputClasses}
-													/>
-												</div>
-												<div>
-													<label
-														htmlFor={`edit-guest-${idx}-email`}
-														className="mb-1 block text-sm text-white/70"
-													>
-														E-mail
-													</label>
-													<input
-														id={`edit-guest-${idx}-email`}
-														type="email"
-														value={guest.email}
-														onChange={(e) =>
-															handleGuestChange(idx, "email", e.target.value)
-														}
-														placeholder="optioneel@email.be"
-														className={inputClasses}
-													/>
-												</div>
-												<div>
-													<label
-														htmlFor={`edit-guest-${idx}-phone`}
-														className="mb-1 block text-sm text-white/70"
-													>
-														Telefoon
-													</label>
-													<input
-														id={`edit-guest-${idx}-phone`}
-														type="tel"
-														value={guest.phone}
-														onChange={(e) =>
-															handleGuestChange(idx, "phone", e.target.value)
-														}
-														placeholder="06-12345678"
-														className={inputClasses}
-													/>
-												</div>
-											</div>
-										</div>
-									))}
-								</div>
-							</div>
-						)}
-
-						<div>
-							<label htmlFor="extraQuestions" className="mb-2 block text-white">
-								Vragen of opmerkingen
-							</label>
-							<textarea
-								id="extraQuestions"
-								rows={4}
-								value={formData.extraQuestions}
-								onChange={(e) =>
-									setFormData((p) => ({
-										...p,
-										extraQuestions: e.target.value,
-									}))
-								}
-								className="w-full resize-none bg-transparent py-2 text-lg text-white placeholder:text-white/40 focus:outline-none"
-							/>
-						</div>
-
-						<div className="flex flex-wrap items-center gap-4 pt-4">
-							<button
-								type="submit"
-								disabled={updateMutation.isPending}
-								className="bg-white px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100 disabled:opacity-50"
-							>
-								{updateMutation.isPending ? "Opslaan..." : "Opslaan"}
-							</button>
-							<button
-								type="button"
-								onClick={() => setIsEditing(false)}
-								className="text-white/60 underline underline-offset-2 transition-colors hover:text-white"
-							>
-								Annuleren
-							</button>
-						</div>
-					</form>
-				</div>
-			</div>
-		);
-	}
-
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
-				<Link
-					to="/"
-					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
-				>
-					← Terug naar home
-				</Link>
+		<PageShell>
+			<BackLink />
 
-				<h1 className="mb-2 font-['Intro',sans-serif] text-4xl text-white">
-					Jouw inschrijving
-				</h1>
-				<p className="mb-8 text-white/60">
-					Open Mic Night — vrijdag 18 april 2026
-				</p>
+			<h1 className="mb-2 font-['Intro',sans-serif] text-4xl text-white">
+				Jouw inschrijving
+			</h1>
+			<p className="mb-8 text-white/60">
+				Open Mic Night — vrijdag 18 april 2026
+			</p>
 
-				{/* Type badge */}
-				<div
-					className={`mb-6 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 font-semibold text-sm ${isPerformer ? "border-amber-400/40 bg-amber-400/10 text-amber-300" : "border-teal-400/40 bg-teal-400/10 text-teal-300"}`}
-				>
-					{isPerformer ? "Artiest" : "Bezoeker"}
-					{!isPerformer && (
-						<span className="ml-1 opacity-80">
-							— Drinkkaart €{data.drinkCardValue ?? 5}
-							{viewGuests.length > 0 && ` (${1 + viewGuests.length} personen)`}
-						</span>
-					)}
+			{/* Type badge */}
+			<div
+				className={`mb-6 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 font-semibold text-sm ${isPerformer ? "border-amber-400/40 bg-amber-400/10 text-amber-300" : "border-teal-400/40 bg-teal-400/10 text-teal-300"}`}
+			>
+				{isPerformer ? "Artiest" : "Bezoeker"}
+				{!isPerformer && (
+					<span className="ml-1 opacity-80">
+						— Drinkkaart €{data.drinkCardValue ?? 5}
+						{viewGuests.length > 0 && ` (${1 + viewGuests.length} personen)`}
+					</span>
+				)}
+			</div>
+
+			{/* Payment status */}
+			{!isPerformer && (
+				<div className="mb-6">
+					{data.paymentStatus === "paid" ? <PaidBadge /> : <PendingBadge />}
+				</div>
+			)}
+
+			{/* Registration details */}
+			<div className="space-y-6 rounded-lg border border-white/20 bg-white/5 p-6 md:p-8">
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div>
+						<p className="text-sm text-white/50">Voornaam</p>
+						<p className="text-lg text-white">{data.firstName}</p>
+					</div>
+					<div>
+						<p className="text-sm text-white/50">Achternaam</p>
+						<p className="text-lg text-white">{data.lastName}</p>
+					</div>
+					<div>
+						<p className="text-sm text-white/50">E-mail</p>
+						<p className="text-lg text-white">{data.email}</p>
+					</div>
+					<div>
+						<p className="text-sm text-white/50">Telefoon</p>
+						<p className="text-lg text-white">{data.phone || "—"}</p>
+					</div>
 				</div>
 
-				{/* Payment status badge for watchers */}
-				{!isPerformer && (
-					<div className="mb-6">
-						{data.paymentStatus === "paid" ? (
-							<div className="inline-flex items-center gap-2 rounded-full border border-green-400/40 bg-green-400/10 px-4 py-1.5 font-semibold text-green-400 text-sm">
-								<svg
-									className="h-4 w-4"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={2}
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
-								Betaling ontvangen
-							</div>
-						) : (
-							<div className="inline-flex items-center gap-2 rounded-full border border-yellow-400/40 bg-yellow-400/10 px-4 py-1.5 font-semibold text-sm text-yellow-400">
-								<svg
-									className="h-4 w-4"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									strokeWidth={2}
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-									/>
-								</svg>
-								Betaling in afwachting
-							</div>
-						)}
+				{isPerformer && (
+					<div className="border-white/10 border-t pt-6">
+						<p className="mb-2 text-sm text-white/50">Optreden</p>
+						<p className="text-lg text-white">
+							{data.artForm || "—"}
+							{data.experience && (
+								<span className="ml-2 text-white/60">({data.experience})</span>
+							)}
+						</p>
+						<p className="mt-1 text-sm text-white/60">
+							{data.isOver16 ? "16+ bevestigd" : "Leeftijd niet bevestigd"}
+						</p>
 					</div>
 				)}
 
-				<div className="space-y-6 rounded-lg border border-white/20 bg-white/5 p-6 md:p-8">
-					<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-						<div>
-							<p className="text-sm text-white/50">Voornaam</p>
-							<p className="text-lg text-white">{data.firstName}</p>
-						</div>
-						<div>
-							<p className="text-sm text-white/50">Achternaam</p>
-							<p className="text-lg text-white">{data.lastName}</p>
-						</div>
-						<div>
-							<p className="text-sm text-white/50">E-mail</p>
-							<p className="text-lg text-white">{data.email}</p>
-						</div>
-						<div>
-							<p className="text-sm text-white/50">Telefoon</p>
-							<p className="text-lg text-white">{data.phone || "—"}</p>
+				{!isPerformer && viewGuests.length > 0 && (
+					<div className="border-white/10 border-t pt-6">
+						<p className="mb-3 text-sm text-white/50">
+							Medebezoekers ({viewGuests.length})
+						</p>
+						<div className="flex flex-col gap-3">
+							{viewGuests.map((g, idx) => (
+								<div
+									key={`view-guest-${
+										// biome-ignore lint/suspicious/noArrayIndexKey: stable index
+										idx
+									}`}
+									className="rounded border border-teal-400/20 bg-teal-400/5 p-3"
+								>
+									<p className="text-white">
+										{g.firstName} {g.lastName}
+									</p>
+									{g.email && (
+										<p className="text-sm text-white/60">{g.email}</p>
+									)}
+									{g.phone && (
+										<p className="text-sm text-white/60">{g.phone}</p>
+									)}
+								</div>
+							))}
 						</div>
 					</div>
+				)}
 
-					{isPerformer && (
-						<div className="border-white/10 border-t pt-6">
-							<p className="mb-2 text-sm text-white/50">Optreden</p>
-							<p className="text-lg text-white">
-								{data.artForm || "—"}
-								{data.experience && (
-									<span className="ml-2 text-white/60">
-										({data.experience})
-									</span>
-								)}
-							</p>
-							<p className="mt-1 text-sm text-white/60">
-								{data.isOver16 ? "16+ bevestigd" : "Leeftijd niet bevestigd"}
-							</p>
-						</div>
-					)}
-
-					{!isPerformer && viewGuests.length > 0 && (
-						<div className="border-white/10 border-t pt-6">
-							<p className="mb-3 text-sm text-white/50">
-								Medebezoekers ({viewGuests.length})
-							</p>
-							<div className="flex flex-col gap-3">
-								{viewGuests.map((g, idx) => (
-									<div
-										key={`view-guest-${
-											// biome-ignore lint/suspicious/noArrayIndexKey: stable index
-											idx
-										}`}
-										className="rounded border border-teal-400/20 bg-teal-400/5 p-3"
-									>
-										<p className="text-white">
-											{g.firstName} {g.lastName}
-										</p>
-										{g.email && (
-											<p className="text-sm text-white/60">{g.email}</p>
-										)}
-										{g.phone && (
-											<p className="text-sm text-white/60">{g.phone}</p>
-										)}
-									</div>
-								))}
-							</div>
-						</div>
-					)}
-
-					{data.extraQuestions && (
-						<div className="border-white/10 border-t pt-6">
-							<p className="mb-2 text-sm text-white/50">
-								Vragen of opmerkingen
-							</p>
-							<p className="text-white">{data.extraQuestions}</p>
-						</div>
-					)}
-				</div>
-
-				<div className="mt-8 flex flex-wrap items-center gap-4">
-					{/* Pay button for watchers who haven't paid */}
-					{!isPerformer && data.paymentStatus !== "paid" && (
-						<button
-							type="button"
-							onClick={handlePay}
-							disabled={checkoutMutation.isPending}
-							className="bg-teal-400 px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-teal-300 disabled:opacity-50"
-						>
-							{checkoutMutation.isPending ? "Laden..." : "Nu betalen"}
-						</button>
-					)}
-					<button
-						type="button"
-						onClick={handleEdit}
-						className="bg-white px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
-					>
-						Bewerken
-					</button>
-					<button
-						type="button"
-						onClick={handleCancel}
-						disabled={cancelMutation.isPending}
-						className="border border-red-400/50 px-8 py-3 text-lg text-red-400 transition-all hover:bg-red-400/10 disabled:opacity-50"
-					>
-						{cancelMutation.isPending
-							? "Annuleren..."
-							: "Inschrijving annuleren"}
-					</button>
-				</div>
-
-				<p className="mt-8 text-sm text-white/40">
-					Deze link is uniek voor jouw inschrijving. Bewaar deze pagina of de
-					bevestigingsmail om je gegevens later aan te passen.
-				</p>
+				{data.extraQuestions && (
+					<div className="border-white/10 border-t pt-6">
+						<p className="mb-2 text-sm text-white/50">Vragen of opmerkingen</p>
+						<p className="text-white">{data.extraQuestions}</p>
+					</div>
+				)}
 			</div>
-		</div>
+
+			{/* Actions */}
+			<div className="mt-8 flex flex-wrap items-center gap-4">
+				{!isPerformer && data.paymentStatus !== "paid" && (
+					<button
+						type="button"
+						onClick={() => checkoutMutation.mutate({ token })}
+						disabled={checkoutMutation.isPending}
+						className="bg-teal-400 px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-teal-300 disabled:opacity-50"
+					>
+						{checkoutMutation.isPending ? "Laden..." : "Nu betalen"}
+					</button>
+				)}
+				<button
+					type="button"
+					onClick={() => setIsEditing(true)}
+					className="bg-white px-8 py-3 font-['Intro',sans-serif] text-[#214e51] text-lg transition-all hover:scale-105 hover:bg-gray-100"
+				>
+					Bewerken
+				</button>
+				<button
+					type="button"
+					onClick={handleCancel}
+					disabled={cancelMutation.isPending}
+					className="border border-red-400/50 px-8 py-3 text-lg text-red-400 transition-all hover:bg-red-400/10 disabled:opacity-50"
+				>
+					{cancelMutation.isPending ? "Annuleren..." : "Inschrijving annuleren"}
+				</button>
+			</div>
+
+			<p className="mt-8 text-sm text-white/40">
+				Deze link is uniek voor jouw inschrijving. Bewaar deze pagina of de
+				bevestigingsmail om je gegevens later aan te passen.
+			</p>
+		</PageShell>
 	);
 }
diff --git a/packages/api/src/routers/index.ts b/packages/api/src/routers/index.ts
index 90040a6..a43a35a 100644
--- a/packages/api/src/routers/index.ts
+++ b/packages/api/src/routers/index.ts
@@ -13,6 +13,57 @@ import {
 } from "../email";
 import { adminProcedure, protectedProcedure, publicProcedure } from "../index";
 
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+/** Drink card price in euros: €5 base + €2 per extra guest. */
+function drinkCardEuros(guestCount: number): number {
+	return 5 + guestCount * 2;
+}
+
+/** Drink card price in cents for payment processing. */
+function drinkCardCents(guestCount: number): number {
+	return drinkCardEuros(guestCount) * 100;
+}
+
+/** Parses the stored guest JSON blob, returning an empty array on failure. */
+function parseGuestsJson(raw: string | null): Array<{
+	firstName: string;
+	lastName: string;
+	email?: string;
+	phone?: string;
+}> {
+	if (!raw) return [];
+	try {
+		const parsed = JSON.parse(raw);
+		return Array.isArray(parsed) ? parsed : [];
+	} catch {
+		return [];
+	}
+}
+
+/** Fetches a single registration by management token, throws if not found or cancelled. */
+async function getActiveRegistration(token: string) {
+	const rows = await db
+		.select()
+		.from(registration)
+		.where(
+			and(
+				eq(registration.managementToken, token),
+				isNull(registration.cancelledAt),
+			),
+		)
+		.limit(1);
+	const row = rows[0];
+	if (!row) throw new Error("Inschrijving niet gevonden of al geannuleerd");
+	return row;
+}
+
+// ---------------------------------------------------------------------------
+// Schemas
+// ---------------------------------------------------------------------------
+
 const registrationTypeSchema = z.enum(["performer", "watcher"]);
 
 const guestSchema = z.object({
@@ -22,20 +73,24 @@ const guestSchema = z.object({
 	phone: z.string().optional(),
 });
 
-const submitRegistrationSchema = z.object({
+const coreRegistrationFields = {
 	firstName: z.string().min(1),
 	lastName: z.string().min(1),
 	email: z.string().email(),
 	phone: z.string().optional(),
 	registrationType: registrationTypeSchema.default("watcher"),
-	// Performer-specific
 	artForm: z.string().optional(),
 	experience: z.string().optional(),
 	isOver16: z.boolean().optional(),
-	// Watcher-specific: drinkCardValue is computed server-side, guests are named
 	guests: z.array(guestSchema).max(9).optional(),
-	// Shared
 	extraQuestions: z.string().optional(),
+};
+
+const submitRegistrationSchema = z.object(coreRegistrationFields);
+
+const updateRegistrationSchema = z.object({
+	token: z.string().uuid(),
+	...coreRegistrationFields,
 });
 
 const getRegistrationsSchema = z.object({
@@ -48,17 +103,17 @@ const getRegistrationsSchema = z.object({
 	pageSize: z.number().int().min(1).max(100).default(50),
 });
 
-export const appRouter = {
-	healthCheck: publicProcedure.handler(() => {
-		return "OK";
-	}),
+// ---------------------------------------------------------------------------
+// Router
+// ---------------------------------------------------------------------------
 
-	privateData: protectedProcedure.handler(({ context }) => {
-		return {
-			message: "This is private",
-			user: context.session?.user,
-		};
-	}),
+export const appRouter = {
+	healthCheck: publicProcedure.handler(() => "OK"),
+
+	privateData: protectedProcedure.handler(({ context }) => ({
+		message: "This is private",
+		user: context.session?.user,
+	})),
 
 	submitRegistration: publicProcedure
 		.input(submitRegistrationSchema)
@@ -66,8 +121,7 @@ export const appRouter = {
 			const managementToken = randomUUID();
 			const isPerformer = input.registrationType === "performer";
 			const guests = isPerformer ? [] : (input.guests ?? []);
-			// €5 for primary registrant + €2 per extra guest
-			const drinkCardValue = isPerformer ? 0 : 5 + guests.length * 2;
+
 			await db.insert(registration).values({
 				id: randomUUID(),
 				firstName: input.firstName,
@@ -78,7 +132,7 @@ export const appRouter = {
 				artForm: isPerformer ? input.artForm || null : null,
 				experience: isPerformer ? input.experience || null : null,
 				isOver16: isPerformer ? (input.isOver16 ?? false) : false,
-				drinkCardValue,
+				drinkCardValue: isPerformer ? 0 : drinkCardEuros(guests.length),
 				guests: guests.length > 0 ? JSON.stringify(guests) : null,
 				extraQuestions: input.extraQuestions || null,
 				managementToken,
@@ -114,39 +168,15 @@ export const appRouter = {
 		}),
 
 	updateRegistration: publicProcedure
-		.input(
-			z.object({
-				token: z.string().uuid(),
-				firstName: z.string().min(1),
-				lastName: z.string().min(1),
-				email: z.string().email(),
-				phone: z.string().optional(),
-				registrationType: registrationTypeSchema.default("watcher"),
-				artForm: z.string().optional(),
-				experience: z.string().optional(),
-				isOver16: z.boolean().optional(),
-				guests: z.array(guestSchema).max(9).optional(),
-				extraQuestions: z.string().optional(),
-			}),
-		)
+		.input(updateRegistrationSchema)
 		.handler(async ({ input }) => {
-			const rows = await db
-				.select()
-				.from(registration)
-				.where(
-					and(
-						eq(registration.managementToken, input.token),
-						isNull(registration.cancelledAt),
-					),
-				)
-				.limit(1);
-
-			const row = rows[0];
-			if (!row) throw new Error("Inschrijving niet gevonden of al geannuleerd");
+			const row = await getActiveRegistration(input.token);
 
+			// If already paid and switching to a watcher with fewer guests, we
+			// still allow the update — payment adjustments are handled manually.
 			const isPerformer = input.registrationType === "performer";
 			const guests = isPerformer ? [] : (input.guests ?? []);
-			const drinkCardValue = isPerformer ? 0 : 5 + guests.length * 2;
+
 			await db
 				.update(registration)
 				.set({
@@ -158,7 +188,7 @@ export const appRouter = {
 					artForm: isPerformer ? input.artForm || null : null,
 					experience: isPerformer ? input.experience || null : null,
 					isOver16: isPerformer ? (input.isOver16 ?? false) : false,
-					drinkCardValue,
+					drinkCardValue: isPerformer ? 0 : drinkCardEuros(guests.length),
 					guests: guests.length > 0 ? JSON.stringify(guests) : null,
 					extraQuestions: input.extraQuestions || null,
 				})
@@ -172,25 +202,16 @@ export const appRouter = {
 				artForm: input.artForm,
 			}).catch((err) => console.error("Failed to send update email:", err));
 
+			// Satisfy the linter — row is used to confirm the record existed.
+			void row;
+
 			return { success: true };
 		}),
 
 	cancelRegistration: publicProcedure
 		.input(z.object({ token: z.string().uuid() }))
 		.handler(async ({ input }) => {
-			const rows = await db
-				.select()
-				.from(registration)
-				.where(
-					and(
-						eq(registration.managementToken, input.token),
-						isNull(registration.cancelledAt),
-					),
-				)
-				.limit(1);
-
-			const row = rows[0];
-			if (!row) throw new Error("Inschrijving niet gevonden of al geannuleerd");
+			const row = await getActiveRegistration(input.token);
 
 			await db
 				.update(registration)
@@ -213,46 +234,37 @@ export const appRouter = {
 			const conditions = [];
 
 			if (input.search) {
-				const searchTerm = `%${input.search}%`;
+				const term = `%${input.search}%`;
 				conditions.push(
 					and(
-						like(registration.firstName, searchTerm),
-						like(registration.lastName, searchTerm),
-						like(registration.email, searchTerm),
+						like(registration.firstName, term),
+						like(registration.lastName, term),
+						like(registration.email, term),
 					),
 				);
 			}
-
-			if (input.registrationType) {
+			if (input.registrationType)
 				conditions.push(
 					eq(registration.registrationType, input.registrationType),
 				);
-			}
-
-			if (input.artForm) {
+			if (input.artForm)
 				conditions.push(eq(registration.artForm, input.artForm));
-			}
-
-			if (input.fromDate) {
+			if (input.fromDate)
 				conditions.push(gte(registration.createdAt, new Date(input.fromDate)));
-			}
-
-			if (input.toDate) {
+			if (input.toDate)
 				conditions.push(lte(registration.createdAt, new Date(input.toDate)));
-			}
 
-			const whereClause =
-				conditions.length > 0 ? and(...conditions) : undefined;
+			const where = conditions.length > 0 ? and(...conditions) : undefined;
 
 			const [data, countResult] = await Promise.all([
 				db
 					.select()
 					.from(registration)
-					.where(whereClause)
+					.where(where)
 					.orderBy(desc(registration.createdAt))
 					.limit(input.pageSize)
 					.offset((input.page - 1) * input.pageSize),
-				db.select({ count: count() }).from(registration).where(whereClause),
+				db.select({ count: count() }).from(registration).where(where),
 			]);
 
 			const total = countResult[0]?.count ?? 0;
@@ -280,10 +292,7 @@ export const appRouter = {
 					.from(registration)
 					.where(gte(registration.createdAt, today)),
 				db
-					.select({
-						artForm: registration.artForm,
-						count: count(),
-					})
+					.select({ artForm: registration.artForm, count: count() })
 					.from(registration)
 					.where(eq(registration.registrationType, "performer"))
 					.groupBy(registration.artForm),
@@ -329,16 +338,14 @@ export const appRouter = {
 			"Drink Card Value",
 			"Guest Count",
 			"Guests",
+			"Payment Status",
+			"Paid At",
 			"Extra Questions",
 			"Created At",
 		];
+
 		const rows = data.map((r) => {
-			const guests: Array<{
-				firstName: string;
-				lastName: string;
-				email?: string;
-				phone?: string;
-			}> = r.guests ? JSON.parse(r.guests) : [];
+			const guests = parseGuestsJson(r.guests);
 			const guestSummary = guests
 				.map(
 					(g) =>
@@ -358,6 +365,8 @@ export const appRouter = {
 				String(r.drinkCardValue ?? 0),
 				String(guests.length),
 				guestSummary,
+				r.paymentStatus === "paid" ? "Paid" : "Pending",
+				r.paidAt ? r.paidAt.toISOString() : "",
 				r.extraQuestions || "",
 				r.createdAt.toISOString(),
 			];
@@ -376,49 +385,48 @@ export const appRouter = {
 		};
 	}),
 
-	// Admin Request Procedures
+	// ---------------------------------------------------------------------------
+	// Admin access requests
+	// ---------------------------------------------------------------------------
+
 	requestAdminAccess: protectedProcedure.handler(async ({ context }) => {
 		const userId = context.session.user.id;
 
-		// Check if user is already an admin
 		if (context.session.user.role === "admin") {
 			return { success: false, message: "Je bent al een admin" };
 		}
 
-		// Check if request already exists
-		const existingRequest = await db
+		const existing = await db
 			.select()
 			.from(adminRequest)
 			.where(eq(adminRequest.userId, userId))
-			.limit(1);
+			.limit(1)
+			.then((rows) => rows[0]);
 
-		if (existingRequest.length > 0) {
-			const existing = existingRequest[0]!;
-			if (existing.status === "pending") {
-				return { success: false, message: "Je hebt al een aanvraag openstaan" };
-			}
-			if (existing.status === "approved") {
+		if (existing) {
+			if (existing.status === "pending")
+				return {
+					success: false,
+					message: "Je hebt al een aanvraag openstaan",
+				};
+			if (existing.status === "approved")
 				return {
 					success: false,
 					message: "Je aanvraag is al goedgekeurd, log opnieuw in",
 				};
-			}
-			if (existing.status === "rejected") {
-				// Allow re-requesting if previously rejected
-				await db
-					.update(adminRequest)
-					.set({
-						status: "pending",
-						requestedAt: new Date(),
-						reviewedAt: null,
-						reviewedBy: null,
-					})
-					.where(eq(adminRequest.userId, userId));
-				return { success: true, message: "Nieuwe aanvraag ingediend" };
-			}
+			// Rejected — allow re-request
+			await db
+				.update(adminRequest)
+				.set({
+					status: "pending",
+					requestedAt: new Date(),
+					reviewedAt: null,
+					reviewedBy: null,
+				})
+				.where(eq(adminRequest.userId, userId));
+			return { success: true, message: "Nieuwe aanvraag ingediend" };
 		}
 
-		// Create new request
 		await db.insert(adminRequest).values({
 			id: randomUUID(),
 			userId,
@@ -429,7 +437,7 @@ export const appRouter = {
 	}),
 
 	getAdminRequests: adminProcedure.handler(async () => {
-		const requests = await db
+		return db
 			.select({
 				id: adminRequest.id,
 				userId: adminRequest.userId,
@@ -443,29 +451,22 @@ export const appRouter = {
 			.from(adminRequest)
 			.leftJoin(user, eq(adminRequest.userId, user.id))
 			.orderBy(desc(adminRequest.requestedAt));
-
-		return requests;
 	}),
 
 	approveAdminRequest: adminProcedure
 		.input(z.object({ requestId: z.string() }))
 		.handler(async ({ input, context }) => {
-			const request = await db
+			const req = await db
 				.select()
 				.from(adminRequest)
 				.where(eq(adminRequest.id, input.requestId))
-				.limit(1);
+				.limit(1)
+				.then((rows) => rows[0]);
 
-			if (request.length === 0) {
-				throw new Error("Aanvraag niet gevonden");
-			}
-
-			const req = request[0]!;
-			if (req.status !== "pending") {
+			if (!req) throw new Error("Aanvraag niet gevonden");
+			if (req.status !== "pending")
 				throw new Error("Deze aanvraag is al behandeld");
-			}
 
-			// Update request status
 			await db
 				.update(adminRequest)
 				.set({
@@ -475,7 +476,6 @@ export const appRouter = {
 				})
 				.where(eq(adminRequest.id, input.requestId));
 
-			// Update user role to admin
 			await db
 				.update(user)
 				.set({ role: "admin" })
@@ -487,20 +487,16 @@ export const appRouter = {
 	rejectAdminRequest: adminProcedure
 		.input(z.object({ requestId: z.string() }))
 		.handler(async ({ input, context }) => {
-			const request = await db
+			const req = await db
 				.select()
 				.from(adminRequest)
 				.where(eq(adminRequest.id, input.requestId))
-				.limit(1);
+				.limit(1)
+				.then((rows) => rows[0]);
 
-			if (request.length === 0) {
-				throw new Error("Aanvraag niet gevonden");
-			}
-
-			const req = request[0]!;
-			if (req.status !== "pending") {
+			if (!req) throw new Error("Aanvraag niet gevonden");
+			if (req.status !== "pending")
 				throw new Error("Deze aanvraag is al behandeld");
-			}
 
 			await db
 				.update(adminRequest)
@@ -514,8 +510,11 @@ export const appRouter = {
 			return { success: true, message: "Admin toegang geweigerd" };
 		}),
 
-	// Lemon Squeezy Checkout Procedure
-	createCheckout: publicProcedure
+	// ---------------------------------------------------------------------------
+	// Checkout
+	// ---------------------------------------------------------------------------
+
+	getCheckoutUrl: publicProcedure
 		.input(z.object({ token: z.string().uuid() }))
 		.handler(async ({ input }) => {
 			if (
@@ -541,19 +540,12 @@ export const appRouter = {
 			if (!row) throw new Error("Inschrijving niet gevonden");
 			if (row.paymentStatus === "paid")
 				throw new Error("Betaling is al voltooid");
-
-			const isPerformer = row.registrationType === "performer";
-			if (isPerformer) {
+			if (row.registrationType === "performer")
 				throw new Error("Artiesten hoeven niet te betalen");
-			}
 
-			// Calculate price: €5 + €2 per guest (in cents)
-			const guests: Array<{ firstName: string; lastName: string }> = row.guests
-				? JSON.parse(row.guests)
-				: [];
-			const amountInCents = 500 + guests.length * 200;
+			const guests = parseGuestsJson(row.guests);
+			const amountInCents = drinkCardCents(guests.length);
 
-			// Create checkout via Lemon Squeezy API
 			const response = await fetch(
 				"https://api.lemonsqueezy.com/v1/checkouts",
 				{
@@ -576,9 +568,7 @@ export const appRouter = {
 								checkout_data: {
 									email: row.email,
 									name: `${row.firstName} ${row.lastName}`,
-									custom: {
-										registration_token: input.token,
-									},
+									custom: { registration_token: input.token },
 								},
 								checkout_options: {
 									embed: false,
@@ -587,16 +577,10 @@ export const appRouter = {
 							},
 							relationships: {
 								store: {
-									data: {
-										type: "stores",
-										id: env.LEMON_SQUEEZY_STORE_ID,
-									},
+									data: { type: "stores", id: env.LEMON_SQUEEZY_STORE_ID },
 								},
 								variant: {
-									data: {
-										type: "variants",
-										id: env.LEMON_SQUEEZY_VARIANT_ID,
-									},
+									data: { type: "variants", id: env.LEMON_SQUEEZY_VARIANT_ID },
 								},
 							},
 						},
@@ -611,17 +595,11 @@ export const appRouter = {
 			}
 
 			const checkoutData = (await response.json()) as {
-				data?: {
-					attributes?: {
-						url?: string;
-					};
-				};
+				data?: { attributes?: { url?: string } };
 			};
 			const checkoutUrl = checkoutData.data?.attributes?.url;
 
-			if (!checkoutUrl) {
-				throw new Error("Geen checkout URL ontvangen");
-			}
+			if (!checkoutUrl) throw new Error("Geen checkout URL ontvangen");
 
 			return { checkoutUrl };
 		}),