feat(registration): update event date and add required guest fields

Change event date from April 18 to April 24 across all pages and emails. Add birthdate and postcode as required fields for guest registration. Update API to support multiple registrations per user. Enhance admin panel with expandable guest details view.
feat:add birthdate and postcode
2026-03-07 15:49:56 +01:00 · 2026-03-07 02:46:14 +01:00 · 2026-03-07 02:28:03 +01:00 · 2026-03-05 16:28:22 +01:00 · 2026-03-05 16:08:33 +01:00 · 2026-03-04 16:25:46 +01:00
75 changed files with 10850 additions and 1871 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,6 +12,7 @@
 		"@base-ui/react": "^1.0.0",
 		"@kk/api": "workspace:*",
 		"@kk/auth": "workspace:*",
+		"@kk/db": "workspace:*",
 		"@kk/env": "workspace:*",
 		"@libsql/client": "catalog:",
 		"@orpc/client": "catalog:",
@@ -32,9 +33,11 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"dotenv": "catalog:",
+		"html5-qrcode": "^2.3.8",
 		"libsql": "catalog:",
 		"lucide-react": "^0.525.0",
 		"next-themes": "^0.4.6",
+		"qrcode": "^1.5.4",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"shadcn": "^3.6.2",
@@ -53,6 +56,7 @@
 		"@tanstack/react-router-devtools": "^1.141.1",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/react": "^16.2.0",
+		"@types/qrcode": "^1.5.6",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",
 		"@types/three": "^0.183.1",
--- a/apps/web/public/assets/ejv.svg
+++ b/apps/web/public/assets/ejv.svg
@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1571.7 205.8" style="enable-background:new 0 0 1571.7 205.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#41BEE8;}
+	.st2{fill:#ED1C24;}
+	.st3{fill:#8DC63F;}
+	.st4{fill:#F7941D;}
+</style>
+<g>
+	<path class="st0" d="M441.9,102.9c0,55.7-45.2,100.9-100.9,100.9c-55.7,0-100.8-45.2-100.8-100.9C240.1,47.1,285.3,2,341,2
+		C396.7,2,441.9,47.1,441.9,102.9z"/>
+	<g>
+		<path class="st1" d="M286.4,178.8l6.6-33.2c0,0,28.1,11.6,36.2-5.8c6.6-14.2,30.7-119.7,34.3-135.3C356.2,2.9,348.7,2,341,2
+			c-55.7,0-100.9,45.2-100.9,100.9c0,40.6,24,75.6,58.6,91.6C291.1,187,286.4,178.8,286.4,178.8z"/>
+		<path class="st1" d="M411.6,30.8c-8.1,32.8-27.2,110.6-33,131.5c-3.8,13.8-12.5,32.7-29,41.1c51.7-4.3,92.4-47.7,92.4-100.5
+			C441.9,74.6,430.3,49.1,411.6,30.8z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M680.9,102.8c0,55.7-45.1,100.9-100.8,100.9c-55.7,0-100.9-45.2-100.9-100.9C479.2,47.2,524.3,2,580,2
+		C635.7,2,680.9,47.1,680.9,102.8z"/>
+	<g>
+		<path class="st2" d="M555.6,168.7c-15-21.9-53.7-71.2-72.3-94.7c-2.8,9.2-4.2,18.9-4.2,28.9c0,55.7,45.1,100.8,100.9,100.8
+			c0.1,0,0.3,0,0.4,0C575.5,197.2,567.4,185.8,555.6,168.7z"/>
+		<path class="st2" d="M534.1,55.3c0,0,58,90.7,59.8,93.3c1.7,2.7,6.1,2.8,6.2-3c0.1-5.9,2.7-115.7,2.7-115.7l40.6-5.4
+			C625.9,10.4,603.9,2,579.9,2c-40.2,0-74.9,23.5-91.1,57.5L534.1,55.3z"/>
+		<path class="st2" d="M661.1,43c-4.9,22.4-12,55.6-13.7,67c-2.1,13.4-9.2,56.9-12.5,77.4c27.6-18,45.9-49.1,45.9-84.5
+			C680.8,80.5,673.5,59.8,661.1,43z"/>
+	</g>
+</g>
+<g>
+	<path class="st0" d="M202.9,103c0,55.7-45.2,100.8-100.8,100.8C46.4,203.8,1.2,158.6,1.2,103C1.2,47.3,46.4,2.2,102,2.1
+		C157.7,2.2,202.9,47.3,202.9,103z"/>
+	<path class="st3" d="M102.1,2C46.3,2,1.2,47.1,1.2,102.9c0,38.3,21.3,71.6,52.7,88.6L33.9,41c0,0,95.8-24.1,107.6-23.2l7.8,40.7
+		c0,0-40.5,9.6-61,13c0,0,0.6,18.2,1.9,22.1c9.7-0.5,29.2-4.2,38.7-4.9l5.4,39.1c0,0-35.3,4.2-39,5.4c0.7,4.9,1.9,19.4,2.3,23.6
+		c13-0.1,47.5-7.8,63.2-9.1l7.2,31.7c21.5-18.5,35.2-45.9,35.2-76.5C203,47.2,157.8,2,102.1,2z"/>
+</g>
+<g>
+	<path class="st0" d="M919.8,103c0,55.6-45.2,100.8-100.9,100.8c-55.7,0-100.9-45.2-100.9-100.8C718,47.3,763.2,2.2,818.9,2.1
+		C874.6,2.1,919.8,47.3,919.8,103z"/>
+	<g>
+		<path class="st4" d="M830,127.1c0,21.1,0.8,53.3,1.4,75.7c5-0.6,9.9-1.6,14.6-2.9c1-9.2,6-53.1,6.2-54.5
+			c0.1-0.9,0.2-10.2,0.3-18.6C845.3,127.4,837.8,127.5,830,127.1z"/>
+		<path class="st4" d="M801.5,105.2c-0.5-14.9-1.1-33-1.1-33l30.2,1c0,0,0.2,11.2-0.3,36.2c25.8,1.6,55.7-2.2,89.2-15.8
+			C914.8,42.2,871.6,2,819,2c-42.3,0-78.7,26.1-93.6,63.1C730.6,70.1,757.5,94.8,801.5,105.2z M862.7,60.1
+			c10.8,0,19.5,8.7,19.5,19.5c0,10.7-8.7,19.5-19.5,19.5c-10.8,0-19.5-8.7-19.5-19.5C843.3,68.8,852,60.1,862.7,60.1z M817,21.2
+			c10.8,0,19.5,8.7,19.5,19.5c0,10.8-8.7,19.4-19.5,19.4c-10.8,0-19.5-8.7-19.5-19.5C797.5,29.9,806.2,21.2,817,21.2z
+			 M764.4,44.6c10.8,0,19.5,8.7,19.5,19.5c0,10.8-8.7,19.5-19.5,19.5c-10.8,0-19.5-8.7-19.5-19.5
+			C744.9,53.3,753.6,44.6,764.4,44.6z"/>
+		<path class="st4" d="M802,124.4c0-0.1,0-0.4,0-0.7c-9.8-2.1-19.7-5-29.6-9.2c0.4,4.4,0.9,9.8,1.4,16.3
+			c1.1,14.6,5.5,46.1,8.3,65.9c5.2,2,10.6,3.6,16.1,4.8C799.6,174.8,801.9,126.3,802,124.4z"/>
+		<path class="st4" d="M875.1,124.2c-0.2,6.9-0.6,16.2-1.4,25.4c-0.7,8.5-1.2,24.4-1.5,38.7c26-16.2,44.1-43.9,47.2-76
+			C910.7,115.8,894.9,120.9,875.1,124.2z"/>
+		<path class="st4" d="M749.7,134.4c-0.1-1.6-3.8-26.5-5.1-35.5c-8.1-5.7-16-12.5-23.6-20.5c-1.9,7.8-3,16-3,24.4
+			c0,30,13.1,56.9,33.9,75.4C750.9,158.9,749.7,135.6,749.7,134.4z"/>
+	</g>
+</g>
+<g>
+	<path class="st2" d="M972.5,164.6c0.8,1,1.7,1.9,2.9,2.5c1.2,0.8,2.6,1.2,4.2,1.2c2.1,0,4.2-0.7,6.1-2.3c0.9-0.8,1.7-1.8,2.2-3.1
+		c0.6-1.2,0.8-2.8,0.8-4.6v-37h8v37.8c-0.1,5.5-1.8,9.8-5.2,12.8c-3.4,3.1-7.3,4.6-11.7,4.7c-6.2-0.1-10.9-2.5-14-7.1L972.5,164.6z
+		"/>
+	<path class="st2" d="M1013.6,121.3h33.9v7.8h-25.9v15.7h22.1v7.4h-22.1v16.1h25.9v7.8h-33.9V121.3z"/>
+	<path class="st2" d="M1060.5,121.3h8v35.4c0,3.7,1.1,6.6,3.1,8.5c2,2.1,4.6,3.1,7.7,3.1c3.1,0,5.7-1,7.8-3.1c2-2,3-4.8,3.1-8.5
+		v-35.4h8v36.2c-0.1,5.8-1.9,10.3-5.4,13.7c-3.5,3.5-8,5.2-13.4,5.3c-5.3-0.1-9.8-1.8-13.3-5.3c-3.6-3.4-5.5-7.9-5.5-13.7V121.3z"
+		/>
+	<path class="st2" d="M1132.2,146h18.9v11.2c-0.1,5.5-1.9,10.1-5.5,13.8c-3.6,3.7-8.1,5.6-13.5,5.7c-4.2-0.1-7.7-1.2-10.4-3.2
+		c-2.8-1.9-4.9-4.2-6.2-6.7c-0.4-0.8-0.7-1.6-1.1-2.4c-0.3-0.8-0.5-1.8-0.7-2.9c-0.4-2.2-0.5-6.4-0.5-12.7c0-6.4,0.2-10.6,0.5-12.8
+		c0.4-2.2,1-3.9,1.8-5.2c1.3-2.5,3.3-4.8,6.2-6.8c2.8-2,6.3-3,10.4-3.1c5.1,0.1,9.3,1.6,12.5,4.7c3.2,3.1,5.3,7,6.1,11.5h-8.5
+		c-0.7-2.2-1.8-4.1-3.6-5.7c-1.8-1.5-4-2.3-6.6-2.3c-1.9,0.1-3.5,0.4-4.9,1.2c-1.4,0.8-2.5,1.7-3.4,2.8c-1,1.2-1.7,2.7-2.1,4.6
+		c-0.4,2-0.6,5.6-0.6,11c0,5.4,0.2,9.1,0.6,11c0.3,1.9,1,3.5,2.1,4.6c0.9,1.1,2,2,3.4,2.8c1.4,0.8,3,1.2,4.9,1.2
+		c3.1,0,5.7-1.1,7.8-3.3c2-2.1,3.1-4.9,3.1-8.3v-2.9h-10.8V146z"/>
+	<path class="st2" d="M1166.9,121.3h18.6c7.2,0.1,12.6,3.1,16.2,9.2c1.3,2.1,2.1,4.2,2.4,6.5c0.3,2.3,0.4,6.2,0.4,11.7
+		c0,5.9-0.2,10-0.6,12.3c-0.2,1.2-0.5,2.2-0.9,3.2c-0.4,0.9-0.9,1.8-1.5,2.8c-1.6,2.6-3.7,4.7-6.5,6.4c-2.7,1.8-6.1,2.7-10.1,2.7
+		h-18V121.3z M1174.9,168.3h9.6c4.5,0,7.8-1.6,9.8-4.8c0.9-1.2,1.5-2.7,1.7-4.5c0.2-1.8,0.3-5.1,0.3-10c0-4.8-0.1-8.2-0.3-10.2
+		c-0.3-2.1-1-3.7-2.1-5c-2.2-3.2-5.4-4.7-9.5-4.6h-9.6V168.3z"/>
+	<path class="st2" d="M1214.9,121.3h8.5l12,41.8h0.1l12.1-41.8h8.5l-17.5,54.8h-6.3L1214.9,121.3z"/>
+	<path class="st2" d="M1268.2,121.3h33.9v7.8h-25.9v15.7h22.1v7.4h-22.1v16.1h25.9v7.8h-33.9V121.3z"/>
+	<path class="st2" d="M1316.1,121.3h20.7c4.4,0,8,1.2,10.8,3.6c3.4,2.7,5.1,6.6,5.3,11.7c-0.1,7.4-3.5,12.5-10.3,15.2l12.3,24.3
+		h-9.6l-11-23.4h-10.3v23.4h-8V121.3z M1324.1,145.3h12.2c3,0,5.3-1,6.8-2.7c1.5-1.6,2.2-3.6,2.2-6c0-2.9-0.9-4.9-2.7-6.2
+		c-1.4-1.1-3.3-1.7-5.9-1.7h-12.6V145.3z"/>
+	<path class="st2" d="M1368,121.3h20.6c5.2,0.1,9.1,1.4,11.8,4.1c2.6,2.7,4,6.2,4,10.6c0,2.3-0.5,4.4-1.6,6.5
+		c-0.6,1-1.4,1.9-2.4,2.8c-1,0.9-2.3,1.8-3.9,2.5v0.2c2.9,0.8,5.1,2.3,6.6,4.7c1.4,2.4,2.1,5.1,2.1,7.9c0,4.7-1.5,8.5-4.3,11.2
+		c-2.8,2.9-6.3,4.3-10.5,4.3H1368V121.3z M1376.1,128.6v15.8h11.6c2.9,0,5.1-0.8,6.5-2.4c1.4-1.5,2.1-3.3,2.1-5.5s-0.7-4.1-2.1-5.6
+		c-1.4-1.4-3.5-2.2-6.5-2.2H1376.1z M1376.1,151.8v16.5h12.4c3-0.1,5.2-0.9,6.6-2.5c1.4-1.6,2.1-3.5,2.1-5.7c0-2.3-0.7-4.2-2.1-5.8
+		c-1.4-1.6-3.6-2.4-6.6-2.5H1376.1z"/>
+	<path class="st2" d="M1418.2,148.7c0-6.4,0.2-10.6,0.5-12.8c0.4-2.2,1-3.9,1.8-5.2c1.3-2.5,3.3-4.8,6.2-6.7c2.8-2,6.3-3,10.4-3.1
+		c4.2,0.1,7.7,1.1,10.6,3.1c2.8,2,4.8,4.2,6,6.8c0.9,1.3,1.5,3.1,1.9,5.2c0.3,2.2,0.5,6.4,0.5,12.8c0,6.3-0.2,10.5-0.5,12.7
+		c-0.3,2.2-1,4-1.9,5.3c-1.2,2.5-3.3,4.8-6,6.7c-2.8,2-6.3,3.1-10.6,3.2c-4.2-0.1-7.7-1.2-10.4-3.2c-2.8-1.9-4.9-4.2-6.2-6.7
+		c-0.4-0.8-0.7-1.6-1.1-2.4c-0.3-0.8-0.5-1.8-0.7-2.9C1418.4,159.2,1418.2,155,1418.2,148.7z M1426.2,148.7c0,5.4,0.2,9.1,0.6,11
+		c0.3,1.9,1,3.5,2.1,4.6c0.9,1.1,2,2,3.4,2.8c1.4,0.8,3,1.2,4.9,1.2c1.9,0,3.6-0.4,5-1.2c1.3-0.7,2.4-1.6,3.2-2.8
+		c1-1.2,1.8-2.7,2.2-4.6c0.4-1.9,0.5-5.6,0.5-11c0-5.4-0.2-9.1-0.5-11c-0.4-1.9-1.1-3.4-2.2-4.6c-0.8-1.1-1.9-2.1-3.2-2.8
+		c-1.4-0.7-3.1-1.1-5-1.2c-1.9,0.1-3.5,0.4-4.9,1.2c-1.4,0.8-2.5,1.7-3.4,2.8c-1,1.2-1.7,2.7-2.1,4.6
+		C1426.4,139.6,1426.2,143.3,1426.2,148.7z"/>
+	<path class="st2" d="M1472,121.3h7.6l24,39h0.1v-39h8v54.8h-7.6l-24-39h-0.1v39h-8V121.3z"/>
+	<path class="st2" d="M1529.6,121.3h18.6c7.2,0.1,12.6,3.1,16.2,9.2c1.3,2.1,2.1,4.2,2.4,6.5c0.3,2.3,0.4,6.2,0.4,11.7
+		c0,5.9-0.2,10-0.6,12.3c-0.2,1.2-0.5,2.2-0.9,3.2c-0.4,0.9-0.9,1.8-1.5,2.8c-1.6,2.6-3.7,4.7-6.5,6.4c-2.7,1.8-6.1,2.7-10.1,2.7
+		h-18V121.3z M1537.7,168.3h9.6c4.5,0,7.8-1.6,9.8-4.8c0.9-1.2,1.5-2.7,1.7-4.5c0.2-1.8,0.3-5.1,0.3-10c0-4.8-0.1-8.2-0.3-10.2
+		c-0.3-2.1-1-3.7-2.1-5c-2.2-3.2-5.4-4.7-9.5-4.6h-9.6V168.3z"/>
+</g>
+<g>
+	<path class="st2" d="M987.6,32.3h33.9v7.8h-25.9v15.7h22.1v7.4h-22.1v16.1h25.9v7.8h-33.9V32.3z"/>
+	<path class="st2" d="M1029.9,32.3h8.5l12,41.8h0.1l12.1-41.8h8.5l-17.5,54.8h-6.3L1029.9,32.3z"/>
+	<path class="st2" d="M1110.4,74.8h-20.1l-4.1,12.3h-8.5l19.3-54.8h6.7l19.3,54.8h-8.5L1110.4,74.8z M1108.1,67.5l-7.7-24h-0.1
+		l-7.7,24H1108.1z"/>
+	<path class="st2" d="M1135.2,32.3h7.6l24,39h0.1v-39h8v54.8h-7.6l-24-39h-0.1v39h-8V32.3z"/>
+	<path class="st2" d="M1210.1,57h18.9v11.2c-0.1,5.5-1.9,10.1-5.5,13.8c-3.6,3.7-8.1,5.6-13.5,5.7c-4.2-0.1-7.7-1.2-10.4-3.2
+		c-2.8-1.9-4.9-4.2-6.2-6.7c-0.4-0.8-0.7-1.6-1.1-2.4c-0.3-0.8-0.5-1.8-0.7-2.9c-0.4-2.2-0.5-6.4-0.5-12.7c0-6.4,0.2-10.6,0.5-12.8
+		c0.4-2.2,1-3.9,1.8-5.2c1.3-2.5,3.3-4.8,6.2-6.8c2.8-2,6.3-3,10.4-3.1c5.1,0.1,9.3,1.6,12.5,4.7c3.2,3.1,5.3,7,6.1,11.5h-8.5
+		c-0.7-2.2-1.8-4.1-3.6-5.7c-1.8-1.5-4-2.3-6.6-2.3c-1.9,0.1-3.5,0.4-4.9,1.2c-1.4,0.8-2.5,1.7-3.4,2.8c-1,1.2-1.7,2.7-2.1,4.6
+		c-0.4,2-0.6,5.6-0.6,11c0,5.4,0.2,9.1,0.6,11c0.3,1.9,1,3.5,2.1,4.6c0.9,1.1,2,2,3.4,2.8c1.4,0.8,3,1.2,4.9,1.2
+		c3.1,0,5.7-1.1,7.8-3.3c2-2.1,3.1-4.9,3.1-8.3v-2.9h-10.8V57z"/>
+	<path class="st2" d="M1244.8,32.3h33.9v7.8h-25.9v15.7h22.1v7.4h-22.1v16.1h25.9v7.8h-33.9V32.3z"/>
+	<path class="st2" d="M1292.7,32.3h8v47h25.9v7.8h-33.9V32.3z"/>
+	<path class="st2" d="M1340.5,32.3h8v54.8h-8V32.3z"/>
+	<path class="st2" d="M1366,73.8c4.2,3.6,9.3,5.4,15.1,5.5c6.9-0.1,10.4-2.6,10.5-7.6c0-4.1-2.3-6.5-6.9-7.4c-2.1-0.3-4.5-0.6-7-1
+		c-4.6-0.8-8-2.5-10.4-5.2c-2.5-2.8-3.7-6.2-3.7-10.2c0-4.8,1.5-8.7,4.6-11.6c3-2.9,7.2-4.4,12.7-4.4c6.6,0.2,12.3,2,17.2,5.7
+		l-4.5,6.8c-4-2.7-8.4-4.1-13.2-4.2c-2.5,0-4.5,0.6-6.2,1.9c-1.7,1.3-2.6,3.3-2.7,5.9c0,1.6,0.6,3,1.8,4.3c1.2,1.3,3.1,2.2,5.7,2.7
+		c1.5,0.3,3.4,0.5,6,0.9c5,0.7,8.7,2.5,11,5.5c2.4,2.9,3.5,6.3,3.5,10.2c-0.3,10.5-6.5,15.8-18.6,16c-7.9,0-14.6-2.5-20.3-7.5
+		L1366,73.8z"/>
+	<path class="st2" d="M1450.3,71.8c-1.2,5.1-3.4,9-6.7,11.7c-3.4,2.7-7.4,4.1-12,4.1c-4.2-0.1-7.7-1.2-10.4-3.2
+		c-2.8-1.9-4.9-4.2-6.2-6.7c-0.4-0.8-0.7-1.6-1.1-2.4c-0.3-0.8-0.5-1.8-0.7-2.9c-0.4-2.2-0.5-6.4-0.5-12.7c0-6.4,0.2-10.6,0.5-12.8
+		c0.4-2.2,1-3.9,1.8-5.2c1.3-2.5,3.3-4.8,6.2-6.8c2.8-2,6.3-3,10.5-3.1c5.1,0.1,9.3,1.6,12.5,4.7c3.2,3.1,5.3,6.9,6.1,11.5h-8.5
+		c-0.7-2.2-1.8-4.1-3.6-5.7c-1.8-1.5-4-2.2-6.6-2.3c-1.9,0.1-3.5,0.4-4.9,1.2c-1.4,0.8-2.5,1.7-3.4,2.8c-1,1.2-1.7,2.7-2.1,4.6
+		c-0.4,2-0.6,5.6-0.6,11c0,5.4,0.2,9.1,0.6,11c0.3,1.9,1,3.5,2.1,4.6c0.9,1.1,2,2,3.4,2.8c1.4,0.8,3,1.2,4.9,1.2
+		c4.5,0,7.9-2.5,10.1-7.5H1450.3z"/>
+	<path class="st2" d="M1491.5,63.1h-21.1v24h-8V32.3h8v23.5h21.1V32.3h8v54.8h-8V63.1z"/>
+</g>
+</svg>
--- a/apps/web/public/assets/vlaanderen.svg
+++ b/apps/web/public/assets/vlaanderen.svg
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 283.5 283.5" style="enable-background:new 0 0 283.5 283.5;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFED00;}
+	.st1{fill:#F6F6F3;}
+	.st2{fill:#373636;}
+</style>
+<g id="Laag_1">
+</g>
+<g id="Layer_1">
+	<g>
+		<g>
+			<polygon class="st0" points="79.8,99.2 108.7,184.2 32.5,184.2 32.5,99.2 			"/>
+			<g>
+				<polygon class="st1" points="251,184.2 108.7,184.2 79.8,99.2 251,99.2 				"/>
+				<g>
+					<path class="st2" d="M122,124.7l-5.6,16.3H113l-5.6-16.3h3l4.3,12.4l4.3-12.4H122z"/>
+					<path class="st2" d="M126.4,123.2h0.4v17.6h-2.8v-17.4L126.4,123.2z"/>
+					<path class="st2" d="M139.5,141c-0.9,0-1.9-0.3-2.8-1.3c-0.5,0.4-0.9,0.7-1.5,0.9c-0.5,0.2-1.1,0.4-1.9,0.4
+						c-0.9,0-1.9-0.2-2.7-0.8c-0.8-0.6-1.4-1.6-1.4-3.3c0-1.1,0.3-2,0.9-2.6c0.7-0.6,1.8-0.9,3.5-0.9c0.7,0,1.5,0,2.6,0.1v-0.6
+						c0-0.9-0.3-1.5-0.7-1.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.1,0-2.4,0.4-3.4,0.9l-0.7-2.5c1.3-0.6,3-1.1,4.6-1.1
+						c1.3,0,2.4,0.3,3.3,0.9c0.9,0.7,1.4,1.7,1.4,3.2v4.7c0,0.6,0.2,1,0.5,1.3c0.3,0.3,0.8,0.5,1.3,0.6L139.5,141z M136.1,135.7
+						c-1.3,0-2.4,0-3.1,0.1s-1.1,0.5-1.1,1.3c0,1,0.7,1.6,1.8,1.6c0.4,0,0.9-0.1,1.5-0.4c0.5-0.3,0.9-0.9,0.9-1.9V135.7z"/>
+					<path class="st2" d="M152,141c-0.9,0-1.9-0.3-2.8-1.3c-0.5,0.4-0.9,0.7-1.5,0.9c-0.5,0.2-1.1,0.4-1.9,0.4
+						c-0.9,0-1.9-0.2-2.7-0.8c-0.8-0.6-1.4-1.6-1.4-3.3c0-1.1,0.3-2,0.9-2.6c0.7-0.6,1.8-0.9,3.5-0.9c0.7,0,1.5,0,2.6,0.1v-0.6
+						c0-0.9-0.3-1.5-0.7-1.8c-0.5-0.4-1.1-0.5-1.7-0.5c-1.1,0-2.4,0.4-3.4,0.9l-0.7-2.5c1.3-0.6,3-1.1,4.6-1.1
+						c1.3,0,2.4,0.3,3.3,0.9c0.9,0.7,1.4,1.7,1.4,3.2v4.7c0,0.6,0.2,1,0.5,1.3c0.3,0.3,0.8,0.5,1.3,0.6L152,141z M148.6,135.7
+						c-1.3,0-2.4,0-3.1,0.1c-0.7,0.2-1.1,0.5-1.1,1.3c0,1,0.7,1.6,1.8,1.6c0.4,0,0.9-0.1,1.5-0.4c0.5-0.3,0.9-0.9,0.9-1.9V135.7z"/>
+					<path class="st2" d="M155,128.1h2.4l0.3,1c1.2-0.8,2.6-1.2,4-1.2c1.2,0,2.4,0.3,3.2,1.1c0.8,0.7,1.4,1.8,1.4,3.4v8.4h-2.8v-7.5
+						c0-0.9-0.3-1.6-0.9-2c-0.5-0.4-1.2-0.6-2-0.6c-1,0-2,0.3-2.8,0.8v9.4H155V128.1z"/>
+					<path class="st2" d="M180,140.8h-2.2l-0.5-0.9c-1,0.7-2,1.2-3.4,1.2c-1.8,0-3.2-0.7-4.1-1.8c-0.9-1.1-1.3-2.6-1.3-4.2
+						c0-2.4,0.7-4.2,1.9-5.3c1.2-1.2,2.9-1.7,4.8-1.7c0.6,0,1.2,0,1.9,0.1v-4.6l2.4-0.2h0.4V140.8z M177.1,130.8
+						c-0.7-0.2-1.4-0.3-2-0.3c-1.1,0-2,0.3-2.6,1c-0.6,0.7-1,1.6-1,2.9c0,1,0.3,1.9,0.8,2.6c0.5,0.7,1.3,1.2,2.3,1.2
+						c0.9,0,1.8-0.3,2.6-0.8V130.8z"/>
+					<path class="st2" d="M192.4,137.5v2.8c-1.1,0.5-2.5,0.8-3.6,0.8c-1.8,0-3.4-0.5-4.6-1.6c-1.2-1.1-1.9-2.7-1.9-4.9
+						c0-2.1,0.7-3.8,1.8-4.9c1.1-1.1,2.5-1.7,3.9-1.7c0.4,0,1.1,0,1.9,0.3c0.7,0.3,1.6,0.7,2.2,1.6c0.6,0.8,1,2.1,1,3.8v1.9h-7.7
+						c0.2,1,0.8,1.7,1.4,2.2c0.7,0.4,1.5,0.6,2.3,0.6c1.1,0,2.2-0.3,3.2-0.8L192.4,137.5z M190.4,133.3c-0.1-0.9-0.4-1.6-0.8-2
+						c-0.4-0.4-1-0.6-1.5-0.6c-0.6,0-1.2,0.2-1.7,0.6c-0.5,0.4-0.9,1.1-1.1,2H190.4z"/>
+					<path class="st2" d="M202.8,131.3c-0.7-0.4-1.4-0.6-2.1-0.6c-0.9,0-1.8,0.3-2.5,0.9v9.2h-2.8v-12.6h2.4l0.3,1
+						c0.9-0.7,1.9-1.3,3.2-1.3c0.3,0,0.8,0,1.3,0.1c0.5,0.1,0.9,0.2,1.2,0.4L202.8,131.3z"/>
+					<path class="st2" d="M214.5,137.5v2.8c-1.1,0.5-2.5,0.8-3.6,0.8c-1.8,0-3.4-0.5-4.6-1.6c-1.2-1.1-1.9-2.7-1.9-4.9
+						c0-2.1,0.7-3.8,1.8-4.9c1.1-1.1,2.5-1.7,3.9-1.7c0.4,0,1.1,0,1.9,0.3c0.7,0.3,1.6,0.7,2.2,1.6c0.6,0.8,1,2.1,1,3.8v1.9h-7.7
+						c0.2,1,0.8,1.7,1.4,2.2c0.7,0.4,1.5,0.6,2.3,0.6c1.1,0,2.2-0.3,3.2-0.8L214.5,137.5z M212.6,133.3c-0.1-0.9-0.4-1.6-0.8-2
+						c-0.4-0.4-1-0.6-1.5-0.6c-0.6,0-1.2,0.2-1.7,0.6c-0.5,0.4-0.9,1.1-1.1,2H212.6z"/>
+					<path class="st2" d="M217.4,128.1h2.4l0.3,1c1.2-0.8,2.6-1.2,4-1.2c1.2,0,2.4,0.3,3.2,1.1c0.8,0.7,1.4,1.8,1.4,3.4v8.4h-2.8
+						v-7.5c0-0.9-0.3-1.6-0.9-2c-0.5-0.4-1.2-0.6-2-0.6c-1,0-2,0.3-2.8,0.8v9.4h-2.8V128.1z"/>
+				</g>
+				<g>
+					<path class="st2" d="M79.9,142.5c-2.1-1.6-3.1,0-4.4-0.1c-1.1-0.1-2.1-1.9-3-1.4c-1.6,0.8,0.7,3.7,1.6,4.3c0.9,0.5,2,1,2.3,1.1
+						c1.3,0.6,1.8,1.5,2,3c0,0.3,0,1.1-0.1,1.4c-0.6,2.5-5,4.8-7.6,3.1c-1.2-0.8-2.3-1.9-2.7-3.8c-0.7-3.3-3.1-5.8-3.9-9
+						c-0.5-2-0.8-4.1-1.3-6c-0.5-2.1-1.1-4.1-1.5-6c-0.4-1.7-1.2-4.3-1.8-5.9c-2.4-6.3-3.5-5.9-3.5-5.9s0.9,1.8,4.1,17.3
+						c0.1,0.6,1.3,7.5,2.2,9.7c0.3,0.8,0.8,2.5,1.2,3.3c1,2.2,3.7,5.6,3.9,8.6c0.1,1.8,0.3,3.2,0.3,4.5c0,0.4,0.2,2,0.5,2.7
+						c0.7,1.9,6,7.8,11.6,7.8v-4.5c-5.6,0-10.9-3.1-11-3.5c-0.1-0.1,0.3-2.3,0.7-3.3c0.7-1.8,2.1-3.5,4.6-3.7
+						c2.7-0.2,4.4,0.6,5.8,0.6L79.9,142.5z"/>
+					<path class="st2" d="M55.4,126c-0.2,3.4-5.5,8-7.1,11c-0.8,1.5-1.8,4-2,5.4c-0.7,4.1,0.2,6.6,1.2,9c1.7,4.2-0.2,5.7,1.1,4.9
+						c1.7-1.4,1.4-4.6,1.3-6.6c-0.1-1.6-0.2-3.5,0-5.4c0.5-3.6,2.7-7.5,4.5-10.2C56.7,130.8,55.9,127.5,55.4,126L55.4,126z"/>
+					<path class="st2" d="M56.5,135.6c0,0,0.6,2.7-1.8,9.6c-6.2,18.1,5.7,19.8,9,24.1c0,0,1.3-1.8-4.1-7.7c-2-2.2-3.7-6.9-2.2-13.7
+						C59.7,138,56.5,135.6,56.5,135.6L56.5,135.6z"/>
+					<path class="st2" d="M44.8,123.7c-0.3-1.1-0.4-2-0.3-2.9c0.3-4.3,4.2-6,5.1-6.6c0,0,1.7-1.2,2-2.4c0,0,1.8,4.5-2.3,7
+						C47.1,120.2,45.7,121.7,44.8,123.7L44.8,123.7z"/>
+					<path class="st2" d="M54.5,119.6c0.2,0.4,1.8,2.8-4.7,8.2c-6.5,5.4-4.5,9.3-4.5,9.3s-7-3.9,1.1-10.6c8-6.7,6.4-8.1,6.4-8.1
+						S53.9,118.4,54.5,119.6L54.5,119.6z"/>
+					<path class="st2" d="M63,121.7c1.1,0.1,1.9,3.7,4.5,4.5c1.9,0.6,4,0.3,4.4,1.4c-0.9,0.5-0.2,2,0.7,1.8
+						C73.4,127.3,73.7,119.3,63,121.7z M66.5,123.3c0.1-0.3,0.2,0,0.5-0.2c0.3-0.3,0.6-0.8,1.1-0.9c0.4-0.1,0.8-0.1,1.2,0.1
+						c0.2,0.1,0.1,0.6-0.1,0.8c-0.4,0.3-1.4-0.2-1.4,0.6c0,1.3,1.7,0,2.6,0C70.9,126.7,65.8,125.9,66.5,123.3z"/>
+				</g>
+			</g>
+		</g>
+		<g>
+			<path class="st2" d="M115.2,158.2h-1.5l-2.6-7.6h1.2l2.2,6.4l2.2-6.4h1.2L115.2,158.2z"/>
+			<path class="st2" d="M124.4,154.7h-4.7c0.1,1.6,1.1,2.6,2.5,2.6c0.7,0,1.4-0.2,2.1-0.5l0,0v1c-0.8,0.4-1.5,0.5-2.2,0.5
+				c-2.2,0-3.5-1.6-3.5-4c0-2.2,1-3.9,3.3-3.9c1.9,0,2.6,1.5,2.6,3.2V154.7z M119.8,153.7h3.6c0-1.2-0.3-2.2-1.5-2.2
+				C120.6,151.5,119.9,152.5,119.8,153.7z"/>
+			<path class="st2" d="M126.9,150.6l0.3,0.9c0.6-0.7,1.2-1,1.9-1c0.2,0,0.4,0,0.6,0.1c0.2,0,0.4,0.1,0.6,0.2l-0.4,1
+				c-0.3-0.1-0.7-0.2-1-0.2c-0.7,0-1.2,0.4-1.6,1v5.7h-1.1v-7.6H126.9z"/>
+			<path class="st2" d="M132.7,147.6L132.7,147.6l0.1,3.5c0.5-0.4,1.2-0.7,2-0.7c2.1,0,3.3,1.8,3.3,3.9c0,2.3-1.4,4-3.8,4
+				c-0.9,0-1.8-0.2-2.5-0.5v-10.1L132.7,147.6z M132.8,152.3v4.7c0.5,0.2,1,0.2,1.5,0.2c1.6,0,2.6-1.3,2.6-3.1
+				c0-1.6-0.7-2.7-2.3-2.7C133.8,151.5,133.2,151.8,132.8,152.3z"/>
+			<path class="st2" d="M145.1,154.7h-4.7c0.1,1.6,1.1,2.6,2.5,2.6c0.7,0,1.4-0.2,2.1-0.5l0,0v1c-0.8,0.4-1.5,0.5-2.2,0.5
+				c-2.2,0-3.5-1.6-3.5-4c0-2.2,1-3.9,3.3-3.9c1.9,0,2.6,1.5,2.6,3.2V154.7z M140.4,153.7h3.6c0-1.2-0.3-2.2-1.5-2.2
+				C141.3,151.5,140.6,152.5,140.4,153.7z"/>
+			<path class="st2" d="M152.1,154.7h-4.7c0.1,1.6,1.1,2.6,2.5,2.6c0.7,0,1.4-0.2,2.1-0.5l0,0v1c-0.8,0.4-1.5,0.5-2.2,0.5
+				c-2.2,0-3.5-1.6-3.5-4c0-2.2,1-3.9,3.3-3.9c1.9,0,2.6,1.5,2.6,3.2V154.7z M147.4,153.7h3.6c0-1.2-0.3-2.2-1.5-2.2
+				C148.3,151.5,147.6,152.5,147.4,153.7z"/>
+			<path class="st2" d="M154.9,147.6L154.9,147.6l0.1,10.6h-1.1v-10.5L154.9,147.6z"/>
+			<path class="st2" d="M162.3,158.2l-0.2-0.7c-0.6,0.5-1.3,0.8-2.1,0.8c-1,0-1.8-0.5-2.4-1.2c-0.6-0.7-0.9-1.7-0.9-2.9
+				c0-1.1,0.3-2,0.9-2.7s1.6-1.1,2.9-1.1c0.5,0,1,0.1,1.4,0.2v-2.9l1.1-0.1h0.1v10.6H162.3z M161.9,156.5v-4.7
+				c-0.5-0.2-1-0.3-1.5-0.3c-0.8,0-1.4,0.2-1.9,0.7c-0.5,0.5-0.7,1.2-0.7,2.2c0,0.8,0.2,1.5,0.5,2c0.4,0.5,0.9,0.9,1.8,0.9
+				C160.9,157.3,161.5,157,161.9,156.5z"/>
+			<path class="st2" d="M165.4,148.5c0-0.4,0.3-0.8,0.8-0.8c0.4,0,0.8,0.3,0.8,0.8c0,0.4-0.4,0.8-0.8,0.8
+				C165.8,149.3,165.4,149,165.4,148.5z M166.8,150.6v7.6h-1.1v-7.6H166.8z"/>
+			<path class="st2" d="M170.1,150.6l0.2,0.7c0.3-0.2,0.7-0.4,1.1-0.6c0.4-0.2,0.8-0.3,1.2-0.3c0.7,0,1.4,0.2,1.9,0.6
+				c0.5,0.5,0.8,1.2,0.8,2.2v4.9h-1.1v-4.8c0-0.7-0.2-1.2-0.5-1.5c-0.3-0.3-0.7-0.4-1.2-0.4c-0.4,0-0.7,0.1-1.1,0.2
+				c-0.3,0.1-0.7,0.3-1,0.5v6h-1.1v-7.6H170.1z"/>
+			<path class="st2" d="M179.1,156.6h1.4c1,0,1.8,0.2,2.3,0.6c0.5,0.4,0.7,0.9,0.7,1.5c0,0.8-0.5,1.6-1.2,2.1
+				c-0.7,0.5-1.7,0.9-2.7,0.9c-0.9,0-1.6-0.3-2.1-0.7c-0.5-0.4-0.8-1-0.8-1.7c0-0.6,0.3-1.3,0.9-1.9c-0.2-0.1-0.4-0.3-0.5-0.5
+				c-0.1-0.2-0.2-0.5-0.2-0.7c0-0.4,0.2-0.9,0.5-1.3c-0.2-0.2-0.4-0.5-0.5-0.8c-0.1-0.3-0.2-0.7-0.2-1c0-0.7,0.3-1.4,0.8-1.8
+				c0.5-0.5,1.2-0.7,2-0.7c0.6,0,1.1,0.1,1.5,0.4c0.3-0.2,0.7-0.4,1-0.6c0.3-0.1,0.7-0.2,0.9-0.2l0.3,1c-0.4,0.1-0.9,0.2-1.4,0.5
+				c0.3,0.4,0.4,0.9,0.4,1.4c0,0.7-0.3,1.4-0.8,1.9c-0.5,0.5-1.2,0.8-2,0.8c-0.5,0-1-0.1-1.4-0.3c-0.2,0.2-0.3,0.4-0.3,0.6
+				C178.2,156.3,178.5,156.6,179.1,156.6z M179.5,157.6h-0.9c-0.4,0.5-0.7,1.1-0.7,1.6c0,0.4,0.1,0.8,0.4,1.1s0.8,0.4,1.4,0.4
+				c0.8,0,1.4-0.2,1.9-0.6c0.5-0.4,0.7-0.8,0.7-1.3c0-0.6-0.3-0.9-0.9-1C181,157.6,180.3,157.6,179.5,157.6z M179.9,151.5
+				c-0.6,0-1,0.2-1.3,0.5c-0.3,0.3-0.4,0.7-0.4,1.1c0,0.4,0.2,0.8,0.4,1.1c0.3,0.3,0.7,0.5,1.3,0.5c0.6,0,1-0.2,1.3-0.5
+				c0.3-0.3,0.4-0.7,0.4-1.1s-0.1-0.8-0.4-1.1C180.9,151.7,180.4,151.5,179.9,151.5z"/>
+			<path class="st2" d="M196.8,158.2h-1.4l-1.7-5.8l-1.7,5.8h-1.4l-2.4-7.6h1.1l2,6.4l1.9-6.4h1l1.9,6.4l2-6.4h1.1L196.8,158.2z"/>
+			<path class="st2" d="M205.9,154.7h-4.7c0.1,1.6,1.1,2.6,2.5,2.6c0.7,0,1.4-0.2,2.1-0.5l0,0v1c-0.8,0.4-1.5,0.5-2.2,0.5
+				c-2.2,0-3.5-1.6-3.5-4c0-2.2,1-3.9,3.3-3.9c1.9,0,2.6,1.5,2.6,3.2V154.7z M201.2,153.7h3.6c0-1.2-0.3-2.2-1.5-2.2
+				C202.1,151.5,201.4,152.5,201.2,153.7z"/>
+			<path class="st2" d="M208.4,150.6l0.3,0.9c0.6-0.7,1.2-1,1.9-1c0.2,0,0.4,0,0.6,0.1c0.2,0,0.4,0.1,0.6,0.2l-0.4,1
+				c-0.3-0.1-0.7-0.2-1-0.2c-0.7,0-1.2,0.4-1.6,1v5.7h-1.1v-7.6H208.4z"/>
+			<path class="st2" d="M218.9,157.4l-0.5,1c-0.4,0-0.8-0.3-1.3-0.6c-0.4-0.3-0.9-0.8-1.3-1.3c-0.4-0.5-0.8-1-1.1-1.3
+				c-0.1-0.2-0.3-0.4-0.3-0.5c-0.1-0.1-0.1-0.2-0.2-0.3v3.9h-1.1v-10.4l1.1-0.2h0.1v6.6l3-3.6h1.5l-3.1,3.7c0,0.2,0.3,0.5,0.6,0.9
+				c0.4,0.4,0.8,0.9,1.3,1.3C218,156.9,218.5,157.2,218.9,157.4z"/>
+			<path class="st2" d="M220.2,150.6v-1.4l1.1-0.2h0.1v1.6h2.1v1.1h-2.1v3.7c0,0.7,0.2,1.2,0.4,1.5c0.2,0.3,0.6,0.4,1,0.4
+				c0.4,0,0.9-0.2,1.4-0.5l0.3,1c-0.6,0.3-1.3,0.5-1.9,0.5c-0.7,0-1.2-0.2-1.7-0.7c-0.4-0.5-0.7-1.2-0.7-2.3v-3.7h-0.8v-1.1H220.2z"
+				/>
+		</g>
+	</g>
+</g>
+</svg>
--- a/apps/web/public/favicon.png
+++ b/apps/web/public/favicon.png
--- a/apps/web/public/favicon.svg
+++ b/apps/web/public/favicon.svg
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" fill="#d82560"/>
-  <circle cx="50" cy="35" r="15" fill="white"/>
-  <rect x="40" y="45" width="20" height="30" fill="white"/>
-  <rect x="35" y="75" width="30" height="8" fill="white"/>
-</svg>
--- a/apps/web/public/robots.txt
+++ b/apps/web/public/robots.txt
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
--- a/apps/web/src/components/CookieConsent.tsx
+++ b/apps/web/src/components/CookieConsent.tsx
@@ -40,7 +40,7 @@ export function CookieConsent() {
 						<strong>We gebruiken cookies</strong>
 					</p>
 					<p className="mt-1 text-sm text-white/80">
-						We gebruiken analytische cookies om onze website te verbeteren.
+						We gebruiken analytische cookies om onze website te verbeteren.{" "}
 						<a href="/privacy" className="underline hover:text-white">
 							Meer informatie
 						</a>
--- a/apps/web/src/components/Header.tsx
+++ b/apps/web/src/components/Header.tsx
@@ -0,0 +1,104 @@
+import { Link, useNavigate } from "@tanstack/react-router";
+import { LogOut, User } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+
+interface HeaderProps {
+	userName?: string;
+	isAdmin?: boolean;
+	/** When true, the user is not authenticated — show login/signup CTAs */
+	isGuest?: boolean;
+	isVisible?: boolean;
+	/** When true, uses fixed positioning (for homepage scroll behavior) */
+	isHomepage?: boolean;
+}
+
+export function Header({
+	userName,
+	isAdmin,
+	isGuest,
+	isVisible,
+	isHomepage,
+}: HeaderProps) {
+	const navigate = useNavigate();
+
+	const handleSignOut = async () => {
+		await authClient.signOut();
+		navigate({ to: "/" });
+	};
+
+	return (
+		<header
+			className={`border-white/10 border-b bg-[#214e51]/95 backdrop-blur-sm transition-transform duration-300 ${
+				isVisible ? "translate-y-0" : "-translate-y-full"
+			} ${isHomepage ? "fixed" : "sticky"} top-0 right-0 left-0 z-50`}
+		>
+			<div className="mx-auto flex max-w-8xl items-center justify-between px-3 py-2 sm:px-6 sm:py-3">
+				<nav className="flex items-center gap-3 sm:gap-6">
+					<Link
+						to="/"
+						className="font-['Intro',sans-serif] text-base text-white/80 transition-opacity hover:opacity-100 sm:text-lg"
+					>
+						Kunstenkamp
+					</Link>
+					{!isGuest && (
+						<>
+							<Link
+								to="/account"
+								className="text-sm text-white/70 transition-colors hover:text-white"
+								activeProps={{ className: "text-white font-medium" }}
+							>
+								<span className="hidden sm:inline">Mijn Account</span>
+								<User className="h-4 w-4 sm:hidden" />
+							</Link>
+							{isAdmin && (
+								<Link
+									to="/admin"
+									className="text-sm text-white/70 transition-colors hover:text-white"
+									activeProps={{ className: "text-white font-medium" }}
+								>
+									Admin
+								</Link>
+							)}
+						</>
+					)}
+				</nav>
+
+				{isGuest ? (
+					<div className="flex items-center gap-2 sm:gap-3">
+						<Link
+							to="/login"
+							className="text-sm text-white/70 transition-colors hover:text-white"
+						>
+							<span className="hidden sm:inline">Inloggen</span>
+							<span className="sm:hidden">Login</span>
+						</Link>
+						<span className="hidden text-white/20 sm:inline">·</span>
+						<Link
+							to="/login"
+							search={{ signup: "1" }}
+							className="rounded bg-white/10 px-2 py-1 text-white/80 text-xs transition-colors hover:bg-white/20 hover:text-white sm:px-3 sm:py-1.5 sm:text-sm"
+						>
+							<span className="hidden sm:inline">Account aanmaken</span>
+							<span className="sm:hidden">Registreer</span>
+						</Link>
+					</div>
+				) : (
+					<div className="flex items-center gap-2 sm:gap-3">
+						<span className="max-w-[80px] truncate text-white/60 text-xs sm:max-w-none sm:text-sm">
+							{userName}
+						</span>
+						<button
+							type="button"
+							onClick={handleSignOut}
+							className="flex items-center gap-1 rounded px-1.5 py-1 text-white/50 transition-colors hover:bg-white/10 hover:text-white sm:px-2"
+							title="Uitloggen"
+						>
+							<LogOut className="h-4 w-4" />
+							<span className="hidden text-xs sm:inline">Uitloggen</span>
+						</button>
+					</div>
+				)}
+			</div>
+		</header>
+	);
+}
--- a/apps/web/src/components/SiteHeader.tsx
+++ b/apps/web/src/components/SiteHeader.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { useRouterState } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { Header } from "./Header";
+
+export function SiteHeader() {
+	const { data: session } = authClient.useSession();
+	const routerState = useRouterState();
+	const isHomepage = routerState.location.pathname === "/";
+
+	const [isVisible, setIsVisible] = useState(false);
+
+	useEffect(() => {
+		if (!isHomepage) {
+			setIsVisible(true);
+			return;
+		}
+
+		const handleScroll = () => {
+			setIsVisible(window.scrollY > 50);
+		};
+
+		handleScroll();
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [isHomepage]);
+
+	if (!session?.user) {
+		return <Header isGuest isVisible={isVisible} isHomepage={isHomepage} />;
+	}
+
+	const user = session.user as { name: string; role?: string };
+	return (
+		<Header
+			userName={user.name}
+			isAdmin={user.role === "admin"}
+			isVisible={isVisible}
+			isHomepage={isHomepage}
+		/>
+	);
+}
--- a/apps/web/src/components/drinkkaart/AdminTransactionLog.tsx
+++ b/apps/web/src/components/drinkkaart/AdminTransactionLog.tsx
@@ -0,0 +1,197 @@
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { formatCents } from "@/lib/drinkkaart";
+import { orpc } from "@/utils/orpc";
+import { ReverseDialog } from "./ReverseDialog";
+
+interface TransactionRow {
+	id: string;
+	type: "deduction" | "reversal";
+	userId: string;
+	userName: string;
+	userEmail: string;
+	adminId: string;
+	adminName: string;
+	amountCents: number;
+	balanceBefore: number;
+	balanceAfter: number;
+	note: string | null;
+	reversedBy: string | null;
+	reverses: string | null;
+	createdAt: Date;
+}
+
+export function AdminTransactionLog() {
+	const [page, setPage] = useState(1);
+	const [reverseTarget, setReverseTarget] = useState<TransactionRow | null>(
+		null,
+	);
+
+	const { data, isLoading, refetch } = useQuery({
+		...orpc.drinkkaart.getTransactionLog.queryOptions({
+			input: { page, pageSize: 50 },
+		}),
+		refetchInterval: 30_000,
+	});
+
+	const transactions = (data?.transactions ?? []) as TransactionRow[];
+	const total = data?.total ?? 0;
+	const totalPages = Math.ceil(total / 50);
+
+	if (isLoading) {
+		return <p className="text-sm text-white/40">Laden...</p>;
+	}
+
+	if (transactions.length === 0) {
+		return <p className="text-sm text-white/40">Geen transacties gevonden.</p>;
+	}
+
+	return (
+		<div>
+			<div className="mb-3 flex items-center justify-between">
+				<p className="text-sm text-white/50">{total} transacties</p>
+				<Button
+					onClick={() => refetch()}
+					size="sm"
+					variant="outline"
+					className="border-white/20 bg-transparent text-sm text-white hover:bg-white/10"
+				>
+					Vernieuwen
+				</Button>
+			</div>
+
+			<div className="overflow-x-auto rounded-xl border border-white/10">
+				<table className="w-full text-sm">
+					<thead>
+						<tr className="border-white/10 border-b bg-white/5">
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Tijdstip
+							</th>
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Gebruiker
+							</th>
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Bedrag
+							</th>
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Type
+							</th>
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Admin
+							</th>
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Opmerking
+							</th>
+							<th className="px-4 py-3 text-left font-medium text-white/50">
+								Actie
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{transactions.map((t) => {
+							const date = new Date(t.createdAt).toLocaleString("nl-BE", {
+								day: "2-digit",
+								month: "2-digit",
+								hour: "2-digit",
+								minute: "2-digit",
+							});
+							const isReversal = t.type === "reversal";
+							const canReverse = t.type === "deduction" && !t.reversedBy;
+
+							return (
+								<tr
+									key={t.id}
+									className={`border-white/5 border-b ${isReversal ? "bg-green-400/5" : ""}`}
+								>
+									<td className="px-4 py-3 text-white/60 tabular-nums">
+										{date}
+									</td>
+									<td className="px-4 py-3">
+										<p className="font-medium text-white">{t.userName}</p>
+										<p className="text-white/40 text-xs">{t.userEmail}</p>
+									</td>
+									<td className="px-4 py-3">
+										<span
+											className={`font-medium ${isReversal ? "text-green-400" : "text-red-400"}`}
+										>
+											{isReversal ? "+ " : "− "}
+											{formatCents(t.amountCents)}
+										</span>
+									</td>
+									<td className="px-4 py-3">
+										{isReversal ? (
+											<span className="rounded-full border border-green-400/30 bg-green-400/10 px-2 py-0.5 text-green-300 text-xs">
+												↩ Teruggedraaid
+											</span>
+										) : t.reversedBy ? (
+											<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-white/40 text-xs">
+												Teruggedraaid
+											</span>
+										) : (
+											<span className="rounded-full border border-red-400/20 bg-red-400/10 px-2 py-0.5 text-red-300 text-xs">
+												Afschrijving
+											</span>
+										)}
+									</td>
+									<td className="px-4 py-3 text-sm text-white/60">
+										{t.adminName}
+									</td>
+									<td className="px-4 py-3 text-sm text-white/50">
+										{t.note || "—"}
+									</td>
+									<td className="px-4 py-3">
+										{canReverse && (
+											<Button
+												size="sm"
+												variant="outline"
+												onClick={() => setReverseTarget(t)}
+												className="border-orange-400/30 bg-transparent text-orange-300 hover:bg-orange-400/10"
+											>
+												Draai terug
+											</Button>
+										)}
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+
+			{/* Pagination */}
+			{totalPages > 1 && (
+				<div className="mt-4 flex items-center justify-center gap-3">
+					<Button
+						onClick={() => setPage((p) => Math.max(1, p - 1))}
+						disabled={page === 1}
+						variant="outline"
+						size="sm"
+						className="border-white/20 bg-transparent text-white hover:bg-white/10 disabled:opacity-50"
+					>
+						Vorige
+					</Button>
+					<span className="text-sm text-white/60">
+						{page} / {totalPages}
+					</span>
+					<Button
+						onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+						disabled={page === totalPages}
+						variant="outline"
+						size="sm"
+						className="border-white/20 bg-transparent text-white hover:bg-white/10 disabled:opacity-50"
+					>
+						Volgende
+					</Button>
+				</div>
+			)}
+
+			{reverseTarget && (
+				<ReverseDialog
+					transaction={reverseTarget}
+					onClose={() => setReverseTarget(null)}
+				/>
+			)}
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/DeductionPanel.tsx
+++ b/apps/web/src/components/drinkkaart/DeductionPanel.tsx
@@ -0,0 +1,191 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { DEDUCTION_PRESETS_CENTS, formatCents } from "@/lib/drinkkaart";
+import { orpc } from "@/utils/orpc";
+
+interface DeductionPanelProps {
+	drinkkaartId: string;
+	userName: string;
+	userEmail: string;
+	balance: number;
+	onSuccess: (transactionId: string, balanceAfter: number) => void;
+	onCancel: () => void;
+}
+
+export function DeductionPanel({
+	drinkkaartId,
+	userName,
+	balance,
+	onSuccess,
+	onCancel,
+}: DeductionPanelProps) {
+	const [selectedCents, setSelectedCents] = useState<number>(200);
+	const [customCents, setCustomCents] = useState("");
+	const [useCustom, setUseCustom] = useState(false);
+	const [note, setNote] = useState("");
+	const [confirming, setConfirming] = useState(false);
+
+	const amountCents = useCustom
+		? Math.round((Number.parseFloat(customCents || "0") || 0) * 100)
+		: selectedCents;
+
+	const isValid =
+		Number.isInteger(amountCents) && amountCents >= 1 && amountCents <= balance;
+
+	const deductMutation = useMutation(
+		orpc.drinkkaart.deductBalance.mutationOptions(),
+	);
+
+	const handleConfirm = () => {
+		if (!isValid) return;
+		deductMutation.mutate(
+			{ drinkkaartId, amountCents, note: note || undefined },
+			{
+				onSuccess: (data) => {
+					onSuccess(data.transactionId, data.balanceAfter);
+				},
+			},
+		);
+	};
+
+	if (confirming) {
+		return (
+			<div className="rounded-xl border border-red-400/20 bg-red-400/5 p-5">
+				<p className="mb-2 text-white">
+					Bevestig afschrijving van{" "}
+					<strong className="text-red-300">{formatCents(amountCents)}</strong>{" "}
+					voor <strong>{userName}</strong>
+				</p>
+				<p className="mb-4 text-sm text-white/50">
+					Nieuw saldo: {formatCents(balance - amountCents)}
+				</p>
+				{deductMutation.isError && (
+					<p className="mb-3 text-red-400 text-sm">
+						{(deductMutation.error as Error)?.message ??
+							"Fout bij afschrijving"}
+					</p>
+				)}
+				<div className="flex gap-3">
+					<Button
+						onClick={handleConfirm}
+						disabled={deductMutation.isPending}
+						className="flex-1 bg-red-500 text-white hover:bg-red-600"
+					>
+						{deductMutation.isPending ? "Verwerken..." : "Bevestigen"}
+					</Button>
+					<Button
+						onClick={() => {
+							setConfirming(false);
+							deductMutation.reset();
+						}}
+						variant="outline"
+						disabled={deductMutation.isPending}
+						className="border-white/20 bg-transparent text-white hover:bg-white/10"
+					>
+						Terug
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4">
+			{/* Preset amounts */}
+			<div>
+				<p className="mb-2 text-sm text-white/60">Bedrag</p>
+				<div className="grid grid-cols-4 gap-2">
+					{DEDUCTION_PRESETS_CENTS.map((cents) => (
+						<button
+							key={cents}
+							type="button"
+							onClick={() => {
+								setSelectedCents(cents);
+								setUseCustom(false);
+							}}
+							className={`rounded-lg border py-3 font-medium text-sm transition-colors ${
+								!useCustom && selectedCents === cents
+									? "border-white bg-white text-[#214e51]"
+									: "border-white/20 text-white hover:border-white/50"
+							}`}
+						>
+							{formatCents(cents)}
+						</button>
+					))}
+				</div>
+			</div>
+
+			{/* Custom amount */}
+			<div>
+				<label
+					htmlFor="deduct-custom"
+					className="mb-1 block text-sm text-white/60"
+				>
+					Eigen bedrag (€)
+				</label>
+				<div className="relative">
+					<span className="absolute top-1/2 left-3 -translate-y-1/2 text-white/50">
+						€
+					</span>
+					<Input
+						id="deduct-custom"
+						type="number"
+						min="0.01"
+						step="0.01"
+						placeholder="Bijv. 2.50"
+						value={customCents}
+						onChange={(e) => {
+							setCustomCents(e.target.value);
+							setUseCustom(true);
+						}}
+						className="border-white/20 bg-white/10 pl-8 text-white placeholder:text-white/30"
+					/>
+				</div>
+			</div>
+
+			{/* Note */}
+			<div>
+				<label
+					htmlFor="deduct-note"
+					className="mb-1 block text-sm text-white/60"
+				>
+					Opmerking (optioneel)
+				</label>
+				<Input
+					id="deduct-note"
+					value={note}
+					onChange={(e) => setNote(e.target.value)}
+					placeholder="Bijv. 'Wijn'"
+					maxLength={200}
+					className="border-white/20 bg-white/10 text-white placeholder:text-white/30"
+				/>
+			</div>
+
+			{/* Insufficient balance warning */}
+			{amountCents > balance && (
+				<p className="text-red-400 text-sm">
+					Onvoldoende saldo. Huidig saldo: {formatCents(balance)}
+				</p>
+			)}
+
+			<div className="flex gap-3">
+				<Button
+					onClick={() => setConfirming(true)}
+					disabled={!isValid}
+					className="flex-1 bg-white font-semibold text-[#214e51] hover:bg-white/90 disabled:opacity-50"
+				>
+					Afschrijven — {isValid ? formatCents(amountCents) : "—"}
+				</Button>
+				<Button
+					onClick={onCancel}
+					variant="outline"
+					className="border-white/20 bg-transparent text-white hover:bg-white/10"
+				>
+					Annuleren
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/ManualCreditForm.tsx
+++ b/apps/web/src/components/drinkkaart/ManualCreditForm.tsx
@@ -0,0 +1,204 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { formatCents } from "@/lib/drinkkaart";
+import { orpc } from "@/utils/orpc";
+
+interface ManualCreditFormProps {
+	onDone: () => void;
+}
+
+export function ManualCreditForm({ onDone }: ManualCreditFormProps) {
+	const [query, setQuery] = useState("");
+	const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+	const [selectedUserName, setSelectedUserName] = useState("");
+	const [amountEuros, setAmountEuros] = useState("");
+	const [reason, setReason] = useState("");
+
+	const searchQuery = useQuery({
+		...orpc.drinkkaart.searchUsers.queryOptions({ input: { query } }),
+		enabled: query.length >= 2,
+	});
+
+	const getDrinkkaartQuery = useQuery({
+		...orpc.drinkkaart.getDrinkkaartByUserId.queryOptions({
+			input: { userId: selectedUserId ?? "" },
+		}),
+		enabled: !!selectedUserId,
+	});
+
+	const creditMutation = useMutation(
+		orpc.drinkkaart.adminCreditBalance.mutationOptions(),
+	);
+
+	const amountCents = Math.round(
+		(Number.parseFloat(amountEuros || "0") || 0) * 100,
+	);
+	const isValid =
+		selectedUserId &&
+		getDrinkkaartQuery.data &&
+		amountCents >= 1 &&
+		reason.trim().length >= 1;
+
+	const handleSubmit = () => {
+		if (!isValid || !getDrinkkaartQuery.data) return;
+		creditMutation.mutate(
+			{
+				drinkkaartId: getDrinkkaartQuery.data.drinkkaartId,
+				amountCents,
+				reason: reason.trim(),
+			},
+			{
+				onSuccess: () => {
+					toast.success(
+						`${formatCents(amountCents)} opgeladen voor ${selectedUserName}`,
+					);
+					onDone();
+				},
+				onError: (err: Error) => {
+					toast.error(err.message ?? "Fout bij opladen");
+				},
+			},
+		);
+	};
+
+	return (
+		<div className="space-y-4">
+			<h3 className="font-['Intro',sans-serif] text-lg text-white">
+				Handmatig opladen
+			</h3>
+
+			{/* User search */}
+			<div>
+				<label
+					htmlFor="user-search"
+					className="mb-1 block text-sm text-white/60"
+				>
+					Gebruiker zoeken (naam of email)
+				</label>
+				<Input
+					id="user-search"
+					value={selectedUserId ? selectedUserName : query}
+					onChange={(e) => {
+						setQuery(e.target.value);
+						setSelectedUserId(null);
+					}}
+					placeholder="Naam of email..."
+					className="border-white/20 bg-white/10 text-white placeholder:text-white/30"
+				/>
+				{!selectedUserId && query.length >= 2 && searchQuery.data && (
+					<ul className="mt-1 rounded-lg border border-white/10 bg-[#1a3d40]">
+						{searchQuery.data.length === 0 ? (
+							<li className="px-4 py-2 text-sm text-white/40">
+								Geen gebruikers gevonden
+							</li>
+						) : (
+							searchQuery.data.map((u) => (
+								<li key={u.id}>
+									<button
+										type="button"
+										className="w-full px-4 py-2 text-left text-sm text-white hover:bg-white/10"
+										onClick={() => {
+											setSelectedUserId(u.id);
+											setSelectedUserName(u.name);
+											setQuery("");
+										}}
+									>
+										<span className="font-medium">{u.name}</span>
+										<span className="ml-2 text-white/50">{u.email}</span>
+									</button>
+								</li>
+							))
+						)}
+					</ul>
+				)}
+				{selectedUserId && getDrinkkaartQuery.data && (
+					<p className="mt-1 text-sm text-white/50">
+						Huidig saldo: {formatCents(getDrinkkaartQuery.data.balance)}
+						{" · "}
+						<button
+							type="button"
+							className="text-white/60 underline"
+							onClick={() => {
+								setSelectedUserId(null);
+								setSelectedUserName("");
+							}}
+						>
+							Wijzigen
+						</button>
+					</p>
+				)}
+			</div>
+
+			{/* Amount */}
+			<div>
+				<label
+					htmlFor="credit-amount"
+					className="mb-1 block text-sm text-white/60"
+				>
+					Bedrag (€)
+				</label>
+				<div className="relative">
+					<span className="absolute top-1/2 left-3 -translate-y-1/2 text-white/50">
+						€
+					</span>
+					<Input
+						id="credit-amount"
+						type="number"
+						min="0.01"
+						step="0.01"
+						placeholder="Bijv. 10"
+						value={amountEuros}
+						onChange={(e) => setAmountEuros(e.target.value)}
+						className="border-white/20 bg-white/10 pl-8 text-white placeholder:text-white/30"
+					/>
+				</div>
+			</div>
+
+			{/* Reason */}
+			<div>
+				<label
+					htmlFor="credit-reason"
+					className="mb-1 block text-sm text-white/60"
+				>
+					Reden (verplicht)
+				</label>
+				<Input
+					id="credit-reason"
+					value={reason}
+					onChange={(e) => setReason(e.target.value)}
+					placeholder="Bijv. 'Cash betaling', 'Gift', 'Terugbetaling'"
+					maxLength={200}
+					className="border-white/20 bg-white/10 text-white placeholder:text-white/30"
+				/>
+			</div>
+
+			{creditMutation.isError && (
+				<p className="text-red-400 text-sm">
+					{(creditMutation.error as Error)?.message ?? "Fout bij opladen"}
+				</p>
+			)}
+
+			<div className="flex gap-3">
+				<Button
+					onClick={handleSubmit}
+					disabled={!isValid || creditMutation.isPending}
+					className="flex-1 bg-white font-semibold text-[#214e51] hover:bg-white/90 disabled:opacity-50"
+				>
+					{creditMutation.isPending
+						? "Verwerken..."
+						: `Opladen — ${amountCents >= 1 ? formatCents(amountCents) : "—"}`}
+				</Button>
+				<Button
+					onClick={onDone}
+					variant="outline"
+					className="border-white/20 bg-transparent text-white hover:bg-white/10"
+				>
+					Annuleren
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/QrCodeDisplay.tsx
+++ b/apps/web/src/components/drinkkaart/QrCodeDisplay.tsx
@@ -0,0 +1,127 @@
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
+import { orpc } from "@/utils/orpc";
+
+interface QrCodeCanvasProps {
+	token: string;
+}
+
+function QrCodeCanvas({ token }: QrCodeCanvasProps) {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+
+	useEffect(() => {
+		if (!canvasRef.current || !token) return;
+		// Dynamic import to avoid SSR issues
+		import("qrcode").then((QRCode) => {
+			if (canvasRef.current) {
+				QRCode.toCanvas(canvasRef.current, token, {
+					width: 280,
+					margin: 2,
+					color: { dark: "#214e51", light: "#ffffff" },
+				});
+			}
+		});
+	}, [token]);
+
+	return <canvas ref={canvasRef} className="rounded-xl" />;
+}
+
+function useCountdown(expiresAt: Date | undefined) {
+	const [secondsLeft, setSecondsLeft] = useState<number>(0);
+
+	useEffect(() => {
+		if (!expiresAt) return;
+
+		const tick = () => {
+			const diff = Math.max(
+				0,
+				Math.floor((expiresAt.getTime() - Date.now()) / 1000),
+			);
+			setSecondsLeft(diff);
+		};
+
+		tick();
+		const interval = setInterval(tick, 1000);
+		return () => clearInterval(interval);
+	}, [expiresAt]);
+
+	return secondsLeft;
+}
+
+export function QrCodeDisplay() {
+	const { data, refetch, isLoading, isError } = useQuery(
+		orpc.drinkkaart.getMyQrToken.queryOptions(),
+	);
+
+	const expiresAt = data?.expiresAt ? new Date(data.expiresAt) : undefined;
+	const secondsLeft = useCountdown(expiresAt);
+
+	// Auto-refresh 60s before expiry
+	useEffect(() => {
+		if (!expiresAt) return;
+		const refreshAt = expiresAt.getTime() - 60_000;
+		const delay = refreshAt - Date.now();
+		if (delay <= 0) {
+			refetch();
+			return;
+		}
+		const timer = setTimeout(() => refetch(), delay);
+		return () => clearTimeout(timer);
+	}, [expiresAt, refetch]);
+
+	// Refresh on tab focus if token is about to expire
+	useEffect(() => {
+		const onVisibility = () => {
+			if (document.visibilityState === "visible" && expiresAt) {
+				if (Date.now() >= expiresAt.getTime() - 10_000) refetch();
+			}
+		};
+		document.addEventListener("visibilitychange", onVisibility);
+		return () => document.removeEventListener("visibilitychange", onVisibility);
+	}, [expiresAt, refetch]);
+
+	const minutes = Math.floor(secondsLeft / 60);
+	const seconds = secondsLeft % 60;
+	const countdownLabel = `${minutes}:${String(seconds).padStart(2, "0")}`;
+
+	if (isLoading) {
+		return (
+			<div className="flex h-[280px] w-[280px] items-center justify-center rounded-xl bg-white/10">
+				<div className="h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+			</div>
+		);
+	}
+
+	if (isError || !data?.token) {
+		return (
+			<div className="flex h-[280px] w-[280px] flex-col items-center justify-center gap-2 rounded-xl bg-white/10">
+				<p className="text-sm text-white/60">Kon QR-code niet laden</p>
+				<button
+					type="button"
+					onClick={() => refetch()}
+					className="text-sm text-white underline"
+				>
+					Opnieuw proberen
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col items-center gap-3">
+			<div className="rounded-xl bg-white p-3 shadow-lg">
+				<QrCodeCanvas token={data.token} />
+			</div>
+			<p className="text-sm text-white/60">
+				{secondsLeft > 0 ? (
+					<>
+						Vervalt over{" "}
+						<span className="text-white/80 tabular-nums">{countdownLabel}</span>
+					</>
+				) : (
+					<span className="text-yellow-400">Verlopen — vernieuwen...</span>
+				)}
+			</p>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/QrScanner.tsx
+++ b/apps/web/src/components/drinkkaart/QrScanner.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface QrScannerProps {
+	onScan: (token: string) => void;
+	onCancel: () => void;
+}
+
+export function QrScanner({ onScan, onCancel }: QrScannerProps) {
+	const scannerDivId = "qr-reader-container";
+	const scannerRef = useRef<unknown>(null);
+	const [hasError, setHasError] = useState(false);
+	const [manualToken, setManualToken] = useState("");
+	// Keep a stable ref to onScan so the effect never re-runs due to identity changes
+	const onScanRef = useRef(onScan);
+	useEffect(() => {
+		onScanRef.current = onScan;
+	}, [onScan]);
+
+	useEffect(() => {
+		let stopped = false;
+
+		import("html5-qrcode")
+			.then(({ Html5QrcodeScanner }) => {
+				if (stopped) return;
+
+				const scanner = new Html5QrcodeScanner(
+					scannerDivId,
+					{
+						fps: 10,
+						qrbox: { width: 250, height: 250 },
+					},
+					false,
+				);
+
+				scannerRef.current = scanner;
+
+				scanner.render(
+					(decodedText: string) => {
+						scanner.clear().catch(console.error);
+						onScanRef.current(decodedText);
+					},
+					(error: string) => {
+						// Suppress routine "not found" scan errors
+						if (!error.includes("No QR code found")) {
+							console.debug("QR scan error:", error);
+						}
+					},
+				);
+			})
+			.catch((err) => {
+				console.error("Failed to load html5-qrcode:", err);
+				setHasError(true);
+			});
+
+		return () => {
+			stopped = true;
+			if (scannerRef.current) {
+				(scannerRef.current as { clear: () => Promise<void> })
+					.clear()
+					.catch(console.error);
+			}
+		};
+	}, []); // empty deps — runs once on mount, cleans up on unmount
+
+	const handleManualSubmit = () => {
+		const token = manualToken.trim();
+		if (token) {
+			onScan(token);
+		}
+	};
+
+	return (
+		<div className="space-y-4">
+			{!hasError ? (
+				<div id={scannerDivId} className="overflow-hidden rounded-xl" />
+			) : (
+				<div className="rounded-xl border border-white/10 bg-white/5 p-4 text-center">
+					<p className="mb-2 text-sm text-white/60">
+						Camera niet beschikbaar. Plak het QR-token hieronder.
+					</p>
+				</div>
+			)}
+
+			{/* Manual fallback */}
+			<div>
+				<p className="mb-2 text-white/40 text-xs">Of plak token handmatig:</p>
+				<div className="flex gap-2">
+					<Input
+						value={manualToken}
+						onChange={(e) => setManualToken(e.target.value)}
+						placeholder="QR token..."
+						className="border-white/20 bg-white/10 text-white placeholder:text-white/30"
+						onKeyDown={(e) => e.key === "Enter" && handleManualSubmit()}
+					/>
+					<Button
+						onClick={handleManualSubmit}
+						disabled={!manualToken.trim()}
+						className="bg-white text-[#214e51] hover:bg-white/90"
+					>
+						OK
+					</Button>
+				</div>
+			</div>
+
+			<Button
+				onClick={onCancel}
+				variant="outline"
+				className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+			>
+				Annuleren
+			</Button>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/ReverseDialog.tsx
+++ b/apps/web/src/components/drinkkaart/ReverseDialog.tsx
@@ -0,0 +1,99 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { formatCents } from "@/lib/drinkkaart";
+import { orpc } from "@/utils/orpc";
+
+interface TransactionRow {
+	id: string;
+	amountCents: number;
+	userName: string;
+}
+
+interface ReverseDialogProps {
+	transaction: TransactionRow;
+	onClose: () => void;
+}
+
+export function ReverseDialog({ transaction, onClose }: ReverseDialogProps) {
+	const queryClient = useQueryClient();
+
+	const reverseMutation = useMutation(
+		orpc.drinkkaart.reverseTransaction.mutationOptions(),
+	);
+
+	const handleConfirm = () => {
+		reverseMutation.mutate(
+			{ transactionId: transaction.id },
+			{
+				onSuccess: () => {
+					toast.success(
+						`${formatCents(transaction.amountCents)} teruggestort aan ${transaction.userName}`,
+					);
+					queryClient.invalidateQueries({
+						queryKey: orpc.drinkkaart.getTransactionLog.key(),
+					});
+					onClose();
+				},
+				onError: (err: Error) => {
+					toast.error(err.message ?? "Fout bij terugdraaien");
+				},
+			},
+		);
+	};
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<button
+				type="button"
+				className="absolute inset-0 bg-black/60"
+				aria-label="Sluiten"
+				onClick={onClose}
+			/>
+			<div className="relative z-10 w-full max-w-sm rounded-2xl bg-[#1a3d40] p-6">
+				<h3 className="mb-3 font-['Intro',sans-serif] text-white text-xl">
+					Transactie terugdraaien
+				</h3>
+				<p className="mb-1 text-white/80">
+					Weet je zeker dat je{" "}
+					<strong className="text-white">
+						{formatCents(transaction.amountCents)}
+					</strong>{" "}
+					wil terugdraaien voor{" "}
+					<strong className="text-white">{transaction.userName}</strong>?
+				</p>
+				<p className="mb-5 text-sm text-white/50">
+					Dit voegt {formatCents(transaction.amountCents)} terug toe aan het
+					saldo.
+				</p>
+
+				{reverseMutation.isError && (
+					<p className="mb-3 text-red-400 text-sm">
+						{(reverseMutation.error as Error)?.message ??
+							"Fout bij terugdraaien"}
+					</p>
+				)}
+
+				<div className="flex gap-3">
+					<Button
+						onClick={handleConfirm}
+						disabled={reverseMutation.isPending}
+						className="flex-1 bg-white font-semibold text-[#214e51] hover:bg-white/90"
+					>
+						{reverseMutation.isPending
+							? "Verwerken..."
+							: "Terugdraaien bevestigen"}
+					</Button>
+					<Button
+						onClick={onClose}
+						variant="outline"
+						disabled={reverseMutation.isPending}
+						className="border-white/20 bg-transparent text-white hover:bg-white/10"
+					>
+						Annuleren
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/ScanResultCard.tsx
+++ b/apps/web/src/components/drinkkaart/ScanResultCard.tsx
@@ -0,0 +1,30 @@
+import { formatCents } from "@/lib/drinkkaart";
+
+interface ScanResultCardProps {
+	userName: string;
+	userEmail: string;
+	balance: number;
+}
+
+export function ScanResultCard({
+	userName,
+	userEmail,
+	balance,
+}: ScanResultCardProps) {
+	return (
+		<div className="rounded-xl border border-white/10 bg-white/5 p-5">
+			<div className="mb-4 flex items-start justify-between">
+				<div>
+					<p className="font-semibold text-lg text-white">{userName}</p>
+					<p className="text-sm text-white/50">{userEmail}</p>
+				</div>
+				<div className="text-right">
+					<p className="text-white/40 text-xs">Saldo</p>
+					<p className="font-['Intro',sans-serif] text-2xl text-white">
+						{formatCents(balance)}
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/TopUpHistory.tsx
+++ b/apps/web/src/components/drinkkaart/TopUpHistory.tsx
@@ -0,0 +1,57 @@
+import { formatCents } from "@/lib/drinkkaart";
+
+interface TopupRow {
+	id: string;
+	type: "payment" | "admin_credit";
+	amountCents: number;
+	balanceBefore: number;
+	balanceAfter: number;
+	reason: string | null;
+	paidAt: Date;
+}
+
+interface TopUpHistoryProps {
+	topups: TopupRow[];
+}
+
+export function TopUpHistory({ topups }: TopUpHistoryProps) {
+	if (topups.length === 0) {
+		return <p className="text-sm text-white/40">Nog geen opladingen.</p>;
+	}
+
+	return (
+		<ul className="space-y-2">
+			{topups.map((t) => {
+				const date = new Date(t.paidAt).toLocaleDateString("nl-BE", {
+					day: "numeric",
+					month: "short",
+					year: "numeric",
+				});
+
+				return (
+					<li
+						key={t.id}
+						className="flex items-start justify-between rounded-lg border border-white/10 bg-white/5 px-4 py-3"
+					>
+						<div>
+							<div className="flex items-center gap-2">
+								<span className="font-medium text-green-400">
+									+ {formatCents(t.amountCents)}
+								</span>
+								{t.type === "admin_credit" && (
+									<span className="rounded-full border border-yellow-400/30 bg-yellow-400/10 px-2 py-0.5 text-xs text-yellow-300">
+										Admin credit
+									</span>
+								)}
+							</div>
+							{t.reason && (
+								<p className="mt-0.5 text-white/50 text-xs">{t.reason}</p>
+							)}
+						</div>
+						<span className="text-sm text-white/50 tabular-nums">{date}</span>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}
--- a/apps/web/src/components/drinkkaart/TopUpModal.tsx
+++ b/apps/web/src/components/drinkkaart/TopUpModal.tsx
@@ -0,0 +1,144 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	formatCents,
+	TOPUP_MAX_CENTS,
+	TOPUP_MIN_CENTS,
+	TOPUP_PRESETS_CENTS,
+} from "@/lib/drinkkaart";
+import { orpc } from "@/utils/orpc";
+
+interface TopUpModalProps {
+	onClose: () => void;
+}
+
+export function TopUpModal({ onClose }: TopUpModalProps) {
+	const [selectedCents, setSelectedCents] = useState<number>(1000);
+	const [customEuros, setCustomEuros] = useState("");
+	const [useCustom, setUseCustom] = useState(false);
+
+	const checkoutMutation = useMutation({
+		...orpc.drinkkaart.getTopUpCheckoutUrl.mutationOptions(),
+		onSuccess: (data: { checkoutUrl: string }) => {
+			window.location.href = data.checkoutUrl;
+		},
+		onError: (err: Error) => {
+			console.error("Checkout error:", err);
+		},
+	});
+
+	const amountCents = useCustom
+		? Math.round((Number.parseFloat(customEuros || "0") || 0) * 100)
+		: selectedCents;
+
+	const isValidAmount =
+		Number.isInteger(amountCents) &&
+		amountCents >= TOPUP_MIN_CENTS &&
+		amountCents <= TOPUP_MAX_CENTS;
+
+	const handleSubmit = () => {
+		if (!isValidAmount) return;
+		checkoutMutation.mutate({ amountCents });
+	};
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+			<button
+				type="button"
+				className="absolute inset-0 bg-black/60"
+				aria-label="Sluiten"
+				onClick={onClose}
+			/>
+			<div className="relative z-10 w-full max-w-sm rounded-t-2xl bg-[#1a3d40] p-6 sm:rounded-2xl">
+				<div className="mb-5 flex items-center justify-between">
+					<h2 className="font-['Intro',sans-serif] text-white text-xl">
+						Drinkkaart opladen
+					</h2>
+					<button
+						type="button"
+						onClick={onClose}
+						className="text-white/50 hover:text-white"
+						aria-label="Sluiten"
+					>
+						✕
+					</button>
+				</div>
+
+				{/* Preset amounts */}
+				<div className="mb-4 grid grid-cols-4 gap-2">
+					{TOPUP_PRESETS_CENTS.map((cents) => (
+						<button
+							key={cents}
+							type="button"
+							onClick={() => {
+								setSelectedCents(cents);
+								setUseCustom(false);
+							}}
+							className={`rounded-lg border py-3 font-medium text-sm transition-colors ${
+								!useCustom && selectedCents === cents
+									? "border-white bg-white text-[#214e51]"
+									: "border-white/20 text-white hover:border-white/50"
+							}`}
+						>
+							{formatCents(cents)}
+						</button>
+					))}
+				</div>
+
+				{/* Custom amount */}
+				<div className="mb-5">
+					<label
+						htmlFor="custom-amount"
+						className="mb-2 block text-sm text-white/60"
+					>
+						Eigen bedrag (€ 1 – € 500)
+					</label>
+					<div className="relative">
+						<span className="absolute top-1/2 left-3 -translate-y-1/2 text-white/50">
+							€
+						</span>
+						<Input
+							id="custom-amount"
+							type="number"
+							min="1"
+							max="500"
+							step="0.50"
+							placeholder="Bijv. 15"
+							value={customEuros}
+							onChange={(e) => {
+								setCustomEuros(e.target.value);
+								setUseCustom(true);
+							}}
+							className="border-white/20 bg-white/10 pl-8 text-white placeholder:text-white/30"
+						/>
+					</div>
+					{useCustom && !isValidAmount && customEuros !== "" && (
+						<p className="mt-1 text-red-400 text-sm">
+							Bedrag moet tussen {formatCents(TOPUP_MIN_CENTS)} en{" "}
+							{formatCents(TOPUP_MAX_CENTS)} liggen
+						</p>
+					)}
+				</div>
+
+				<div className="mb-3 rounded-lg bg-white/5 px-4 py-3">
+					<span className="text-sm text-white/60">Te betalen: </span>
+					<span className="font-semibold text-white">
+						{isValidAmount ? formatCents(amountCents) : "—"}
+					</span>
+				</div>
+
+				<Button
+					onClick={handleSubmit}
+					disabled={!isValidAmount || checkoutMutation.isPending}
+					className="w-full bg-white font-semibold text-[#214e51] hover:bg-white/90 disabled:opacity-50"
+				>
+					{checkoutMutation.isPending
+						? "Doorsturen naar betaling..."
+						: "Naar betaling"}
+				</Button>
+			</div>
+		</div>
+	);
+}
--- a/apps/web/src/components/drinkkaart/TransactionHistory.tsx
+++ b/apps/web/src/components/drinkkaart/TransactionHistory.tsx
@@ -0,0 +1,77 @@
+import { formatCents } from "@/lib/drinkkaart";
+
+interface TransactionRow {
+	id: string;
+	type: "deduction" | "reversal";
+	amountCents: number;
+	balanceBefore: number;
+	balanceAfter: number;
+	note: string | null;
+	reversedBy: string | null;
+	reverses: string | null;
+	createdAt: Date;
+}
+
+interface TransactionHistoryProps {
+	transactions: TransactionRow[];
+}
+
+export function TransactionHistory({ transactions }: TransactionHistoryProps) {
+	if (transactions.length === 0) {
+		return <p className="text-sm text-white/40">Nog geen transacties.</p>;
+	}
+
+	return (
+		<ul className="space-y-2">
+			{transactions.map((t) => {
+				const date = new Date(t.createdAt).toLocaleString("nl-BE", {
+					day: "numeric",
+					month: "short",
+					hour: "2-digit",
+					minute: "2-digit",
+				});
+
+				const isReversal = t.type === "reversal";
+				const isReversed = !!t.reversedBy;
+
+				return (
+					<li
+						key={t.id}
+						className={`flex items-start justify-between rounded-lg border px-4 py-3 ${
+							isReversal
+								? "border-green-400/20 bg-green-400/5"
+								: isReversed
+									? "border-white/5 bg-white/3 opacity-60"
+									: "border-white/10 bg-white/5"
+						}`}
+					>
+						<div>
+							<div className="flex items-center gap-2">
+								<span
+									className={`font-medium ${isReversal ? "text-green-400" : "text-red-400"}`}
+								>
+									{isReversal ? "+ " : "− "}
+									{formatCents(t.amountCents)}
+								</span>
+								{isReversal && (
+									<span className="rounded-full border border-green-400/30 bg-green-400/10 px-2 py-0.5 text-green-300 text-xs">
+										↩ Teruggedraaid
+									</span>
+								)}
+								{isReversed && !isReversal && (
+									<span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-white/40 text-xs">
+										Teruggedraaid
+									</span>
+								)}
+							</div>
+							{t.note && (
+								<p className="mt-0.5 text-white/50 text-xs">{t.note}</p>
+							)}
+						</div>
+						<span className="text-sm text-white/50 tabular-nums">{date}</span>
+					</li>
+				);
+			})}
+		</ul>
+	);
+}
--- a/apps/web/src/components/homepage/ArtForms.tsx
+++ b/apps/web/src/components/homepage/ArtForms.tsx
@@ -1,4 +1,4 @@
-import { Camera, Drama, Mic2, Music, Palette, PenTool } from "lucide-react";
+import { Drama, Music, Palette, PersonStanding } from "lucide-react";

 const artForms = [
 	{
@@ -6,15 +6,13 @@ const artForms = [
 		title: "Muziek",
 		description:
 			"Van akoestische singer-songwriter sets tot volledige band optredens. Ontdek je sound en deel je muziek met een warm publiek.",
-		trajectory: "Muziek Traject",
 		color: "#d82560",
 	},
 	{
-		icon: Drama,
-		title: "Theater",
+		icon: PersonStanding,
+		title: "Dans",
 		description:
-			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
-		trajectory: "Theater Traject",
+			"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
 		color: "#52979b",
 	},
 	{
@@ -22,33 +20,15 @@ const artForms = [
 		title: "Beeldende Kunst",
 		description:
 			"Live schilderen, illustraties maken, of mixed media performances. Toon je creatieve proces terwijl het publiek toekijkt.",
-		trajectory: "Beeldende Kunst Traject",
 		color: "#d09035",
 	},
 	{
-		icon: PenTool,
-		title: "Woordkunst",
+		icon: Drama,
+		title: "Drama",
 		description:
-			"Poëzie, spoken word, storytelling of rap. Laat je woorden dansen en raak het publiek met de kracht van taal.",
-		trajectory: "Woordkunst Traject",
+			"Monologen, sketches, improvisatie of mime. Het podium is van jou — breng karakters tot leven en vertel verhalen die raken.",
 		color: "#214e51",
 	},
-	{
-		icon: Camera,
-		title: "Dans",
-		description:
-			"Contemporary, ballet, hiphop of freestyle. Beweging vertelt verhalen die woorden niet kunnen vangen.",
-		trajectory: "Dans Traject",
-		color: "#d82560",
-	},
-	{
-		icon: Mic2,
-		title: "Comedy",
-		description:
-			"Stand-up, improv of cabaret. Maak het publiek aan het lachen met je unieke kijk op de wereld.",
-		trajectory: "Comedy Traject",
-		color: "#52979b",
-	},
 ];

 export default function ArtForms() {
@@ -64,18 +44,18 @@ export default function ArtForms() {
 					ervaringsdeskundigen.
 				</p>

-				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
 					{artForms.map((art, index) => {
 						const IconComponent = art.icon;
 						return (
 							<article
 								key={art.title}
-								className="group relative overflow-hidden bg-white p-8 transition-all focus-within:ring-2 focus-within:ring-[#214e51] focus-within:ring-offset-2 hover:-translate-y-2 hover:shadow-xl motion-reduce:transition-none"
+								className="relative overflow-hidden bg-white p-8"
 								aria-labelledby={`art-title-${index}`}
 							>
 								{/* Color bar at top */}
 								<div
-									className="absolute top-0 left-0 h-1 w-full transition-all group-hover:h-2 motion-reduce:transition-none"
+									className="absolute top-0 left-0 h-1 w-full"
 									style={{ backgroundColor: art.color }}
 									aria-hidden="true"
 								/>
@@ -102,21 +82,6 @@ export default function ArtForms() {
 								<p className="mb-6 text-gray-600 leading-relaxed">
 									{art.description}
 								</p>
-
-								<div className="flex items-center justify-between border-gray-100 border-t pt-4">
-									<span
-										className="font-medium text-sm"
-										style={{ color: art.color }}
-									>
-										{art.trajectory}
-									</span>
-									<span
-										className="text-2xl text-gray-300 transition-all group-hover:translate-x-1 group-hover:text-gray-600 motion-reduce:transition-none"
-										aria-hidden="true"
-									>
-										→
-									</span>
-								</div>
 							</article>
 						);
 					})}
--- a/apps/web/src/components/homepage/EventRegistrationForm.tsx
+++ b/apps/web/src/components/homepage/EventRegistrationForm.tsx
@@ -1,535 +1,115 @@
-"use client";
+import { Link } from "@tanstack/react-router";
+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 { authClient } from "@/lib/auth-client";

-import { useMutation } from "@tanstack/react-query";
-import { useCallback, useState } from "react";
-import { toast } from "sonner";
-import { orpc } from "@/utils/orpc";
+type RegistrationType = "performer" | "watcher";

-interface FormErrors {
-	firstName?: string;
-	lastName?: string;
-	email?: string;
-	phone?: string;
-	artForm?: string;
-	experience?: string;
+interface SuccessState {
+	token: string;
+	email: string;
+	name: string;
 }

 export default function EventRegistrationForm() {
-	const [formData, setFormData] = useState({
-		firstName: "",
-		lastName: "",
-		email: "",
-		phone: "",
-		wantsToPerform: false,
-		artForm: "",
-		experience: "",
-		extraQuestions: "",
-	});
-	const [errors, setErrors] = useState<FormErrors>({});
-	const [touched, setTouched] = useState<Record<string, boolean>>({});
-
-	const validateField = useCallback(
-		(
-			name: string,
-			value: string,
-			wantsToPerform?: boolean,
-		): string | undefined => {
-			switch (name) {
-				case "firstName":
-					if (!value.trim()) return "Voornaam is verplicht";
-					if (value.length < 2)
-						return "Voornaam moet minimaal 2 tekens bevatten";
-					break;
-				case "lastName":
-					if (!value.trim()) return "Achternaam is verplicht";
-					if (value.length < 2)
-						return "Achternaam moet minimaal 2 tekens bevatten";
-					break;
-				case "email":
-					if (!value.trim()) return "E-mail is verplicht";
-					if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-						return "Voer een geldig e-mailadres in";
-					}
-					break;
-				case "phone":
-					if (value && !/^[\d\s\-+()]{10,}$/.test(value.replace(/\s/g, ""))) {
-						return "Voer een geldig telefoonnummer in";
-					}
-					break;
-				case "artForm":
-					if (wantsToPerform && !value.trim()) return "Kunstvorm is verplicht";
-					break;
-			}
-			return undefined;
-		},
-		[],
+	const { data: session } = authClient.useSession();
+	const [selectedType, setSelectedType] = useState<RegistrationType | null>(
+		null,
 	);
+	const [successState, setSuccessState] = useState<SuccessState | null>(null);

-	const submitMutation = useMutation({
-		...orpc.submitRegistration.mutationOptions(),
-		onSuccess: () => {
-			toast.success(
-				"Registratie succesvol! We nemen binnenkort contact met je op.",
-			);
-			setFormData({
-				firstName: "",
-				lastName: "",
-				email: "",
-				phone: "",
-				wantsToPerform: false,
-				artForm: "",
-				experience: "",
-				extraQuestions: "",
-			});
-			setErrors({});
-			setTouched({});
-		},
-		onError: (error) => {
-			toast.error(`Er is iets misgegaan: ${error.message}`);
-		},
-	});
+	const isLoggedIn = !!session?.user;
+	const user = session?.user as { name?: string; email?: string } | undefined;

-	const handleChange = 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;
+	// Split "Jan De Smet" → firstName="Jan", lastName="De Smet"
+	const nameParts = (user?.name ?? "").trim().split(/\s+/);
+	const prefillFirstName = nameParts[0] ?? "";
+	const prefillLastName = nameParts.slice(1).join(" ");
+	const prefillEmail = user?.email ?? "";

-			setFormData((prev) => {
-				const updated = { ...prev, [name]: newValue };
-				// Clear performer fields when unchecking wantsToPerform
-				if (name === "wantsToPerform" && !checked) {
-					updated.artForm = "";
-					updated.experience = "";
-				}
-				return updated;
-			});
-
-			if (type !== "checkbox" && touched[name]) {
-				const error = validateField(
-					name,
-					value,
-					name === "artForm" ? formData.wantsToPerform : undefined,
-				);
-				setErrors((prev) => ({ ...prev, [name]: error }));
-			}
-		},
-		[touched, validateField, formData.wantsToPerform],
-	);
-
-	const handleBlur = useCallback(
-		(e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			const { name, value } = e.target;
-			setTouched((prev) => ({ ...prev, [name]: true }));
-			const error = validateField(
-				name,
-				value,
-				name === "artForm" ? formData.wantsToPerform : undefined,
-			);
-			setErrors((prev) => ({ ...prev, [name]: error }));
-		},
-		[validateField, formData.wantsToPerform],
-	);
-
-	const validateForm = useCallback((): boolean => {
-		const newErrors: FormErrors = {};
-		newErrors.firstName = validateField("firstName", formData.firstName);
-		newErrors.lastName = validateField("lastName", formData.lastName);
-		newErrors.email = validateField("email", formData.email);
-		newErrors.phone = validateField("phone", formData.phone);
-		newErrors.artForm = validateField(
-			"artForm",
-			formData.artForm,
-			formData.wantsToPerform,
+	if (successState) {
+		return (
+			<SuccessScreen
+				token={successState.token}
+				email={successState.email}
+				name={successState.name}
+				isLoggedIn={isLoggedIn}
+				onReset={() => {
+					setSuccessState(null);
+					setSelectedType(null);
+				}}
+			/>
 		);
-
-		setErrors(newErrors);
-		setTouched({
-			firstName: true,
-			lastName: true,
-			email: true,
-			phone: true,
-			artForm: true,
-			experience: true,
-		});
-
-		return !Object.values(newErrors).some(Boolean);
-	}, [formData, validateField]);
-
-	const handleSubmit = useCallback(
-		(e: React.FormEvent) => {
-			e.preventDefault();
-			if (!validateForm()) {
-				toast.error("Controleer je invoer");
-				return;
-			}
-			submitMutation.mutate({
-				firstName: formData.firstName.trim(),
-				lastName: formData.lastName.trim(),
-				email: formData.email.trim(),
-				phone: formData.phone.trim() || undefined,
-				wantsToPerform: formData.wantsToPerform,
-				artForm: formData.wantsToPerform
-					? formData.artForm.trim() || undefined
-					: undefined,
-				experience: formData.wantsToPerform
-					? formData.experience.trim() || undefined
-					: undefined,
-				extraQuestions: formData.extraQuestions.trim() || undefined,
-			});
-		},
-		[formData, submitMutation, validateForm],
-	);
-
-	const getInputClasses = (fieldName: keyof FormErrors) => {
-		const baseClasses =
-			"border-b bg-transparent pb-2 text-lg text-white placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-[#214e51] transition-all";
-		const errorClasses =
-			touched[fieldName] && errors[fieldName]
-				? "border-red-400"
-				: "border-white/30 focus:border-white";
-		return `${baseClasses} ${errorClasses}`;
-	};
+	}

 	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"
+			className="relative z-30 w-full bg-[#214e51]/96 px-6 py-16 md:px-12"
 		>
-			<div className="mx-auto flex w-full max-w-6xl flex-col">
+			<div className="mx-auto w-full max-w-6xl">
 				<h2 className="mb-2 font-['Intro',sans-serif] text-3xl text-white md:text-4xl">
 					Schrijf je nu in!
 				</h2>
-				<p className="mb-12 max-w-3xl text-lg text-white/80 md:text-xl">
-					Doet dit jouw creatieve geest borrelen? Vul nog even dit formulier in
+				<p className="mb-2 max-w-3xl text-lg text-white/80 md:text-xl">
+					De Kunstenkamp jaarwerking organiseert een Open Mic
 				</p>
-
-				<form
-					onSubmit={handleSubmit}
-					className="flex flex-1 flex-col"
-					noValidate
-				>
-					<div className="flex flex-col gap-6 md:gap-8">
-						{/* Row 1: First Name + Last Name */}
-						<div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
-							<div className="flex flex-col gap-2">
-								<label
-									htmlFor="firstName"
-									className="text-white text-xl md:text-2xl"
-								>
-									Voornaam <span className="text-red-300">*</span>
-								</label>
-								<input
-									type="text"
-									id="firstName"
-									name="firstName"
-									value={formData.firstName}
-									onChange={handleChange}
-									onBlur={handleBlur}
-									placeholder="Jouw voornaam"
-									autoComplete="given-name"
-									aria-required="true"
-									aria-invalid={touched.firstName && !!errors.firstName}
-									aria-describedby={
-										errors.firstName ? "firstName-error" : undefined
-									}
-									className={getInputClasses("firstName")}
-								/>
-								{touched.firstName && errors.firstName && (
-									<span
-										id="firstName-error"
-										className="text-red-300 text-sm"
-										role="alert"
-									>
-										{errors.firstName}
-									</span>
-								)}
-							</div>
-
-							<div className="flex flex-col gap-2">
-								<label
-									htmlFor="lastName"
-									className="text-white text-xl md:text-2xl"
-								>
-									Achternaam <span className="text-red-300">*</span>
-								</label>
-								<input
-									type="text"
-									id="lastName"
-									name="lastName"
-									value={formData.lastName}
-									onChange={handleChange}
-									onBlur={handleBlur}
-									placeholder="Jouw achternaam"
-									autoComplete="family-name"
-									aria-required="true"
-									aria-invalid={touched.lastName && !!errors.lastName}
-									aria-describedby={
-										errors.lastName ? "lastName-error" : undefined
-									}
-									className={getInputClasses("lastName")}
-								/>
-								{touched.lastName && errors.lastName && (
-									<span
-										id="lastName-error"
-										className="text-red-300 text-sm"
-										role="alert"
-									>
-										{errors.lastName}
-									</span>
-								)}
-							</div>
-						</div>
-
-						{/* Row 2: Email + Phone */}
-						<div className="grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-8">
-							<div className="flex flex-col gap-2">
-								<label
-									htmlFor="email"
-									className="text-white text-xl md:text-2xl"
-								>
-									E-mail <span className="text-red-300">*</span>
-								</label>
-								<input
-									type="email"
-									id="email"
-									name="email"
-									value={formData.email}
-									onChange={handleChange}
-									onBlur={handleBlur}
-									placeholder="jouw@email.be"
-									autoComplete="email"
-									inputMode="email"
-									aria-required="true"
-									aria-invalid={touched.email && !!errors.email}
-									aria-describedby={errors.email ? "email-error" : undefined}
-									className={getInputClasses("email")}
-								/>
-								{touched.email && errors.email && (
-									<span
-										id="email-error"
-										className="text-red-300 text-sm"
-										role="alert"
-									>
-										{errors.email}
-									</span>
-								)}
-							</div>
-
-							<div className="flex flex-col gap-2">
-								<label
-									htmlFor="phone"
-									className="text-white text-xl md:text-2xl"
-								>
-									Telefoon
-								</label>
-								<input
-									type="tel"
-									id="phone"
-									name="phone"
-									value={formData.phone}
-									onChange={handleChange}
-									onBlur={handleBlur}
-									placeholder="06-12345678"
-									autoComplete="tel"
-									inputMode="tel"
-									aria-invalid={touched.phone && !!errors.phone}
-									aria-describedby={errors.phone ? "phone-error" : undefined}
-									className={getInputClasses("phone")}
-								/>
-								{touched.phone && errors.phone && (
-									<span
-										id="phone-error"
-										className="text-red-300 text-sm"
-										role="alert"
-									>
-										{errors.phone}
-									</span>
-								)}
-							</div>
-						</div>
-
-						{/* Row 3: Wants to perform checkbox */}
-						<label
-							htmlFor="wantsToPerform"
-							className="flex cursor-pointer items-center gap-4"
-						>
-							<div className="relative flex shrink-0 self-center">
-								<input
-									type="checkbox"
-									id="wantsToPerform"
-									name="wantsToPerform"
-									checked={formData.wantsToPerform}
-									onChange={handleChange}
-									className="peer sr-only"
-								/>
-								<div className="h-6 w-6 border-2 border-white/50 bg-transparent transition-colors peer-checked:border-white peer-checked:bg-white peer-focus:ring-2 peer-focus:ring-white/50 peer-focus:ring-offset-2 peer-focus:ring-offset-[#214e51]" />
-								<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-white text-xl md:text-2xl">
-									Ik wil optreden
-								</span>
-								<span className="text-sm text-white/60">
-									Vink aan als je wilt optreden. Laat dit leeg als je alleen
-									wilt komen kijken.
-								</span>
-							</div>
-						</label>
-
-						{/* Performer fields: shown only when wantsToPerform is checked */}
-						{formData.wantsToPerform && (
-							<div className="flex flex-col gap-6 border border-white/20 p-6 md:gap-8">
-								{/* Art Form */}
-								<div className="flex flex-col gap-2">
-									<label
-										htmlFor="artForm"
-										className="text-white text-xl md:text-2xl"
-									>
-										Kunstvorm <span className="text-red-300">*</span>
-									</label>
-									<input
-										type="text"
-										id="artForm"
-										name="artForm"
-										value={formData.artForm}
-										onChange={handleChange}
-										onBlur={handleBlur}
-										placeholder="Muziek, Theater, Dans, etc."
-										autoComplete="off"
-										list="artFormSuggestions"
-										aria-required="true"
-										aria-invalid={touched.artForm && !!errors.artForm}
-										aria-describedby={
-											errors.artForm ? "artForm-error" : undefined
-										}
-										className={getInputClasses("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
-											id="artForm-error"
-											className="text-red-300 text-sm"
-											role="alert"
-										>
-											{errors.artForm}
-										</span>
-									)}
-								</div>
-
-								{/* Experience */}
-								<div className="flex flex-col gap-2">
-									<label
-										htmlFor="experience"
-										className="text-white text-xl md:text-2xl"
-									>
-										Ervaring
-									</label>
-									<input
-										type="text"
-										id="experience"
-										name="experience"
-										value={formData.experience}
-										onChange={handleChange}
-										onBlur={handleBlur}
-										placeholder="Beginner / Gevorderd / Professional"
-										autoComplete="off"
-										list="experienceSuggestions"
-										className={getInputClasses("experience")}
-									/>
-									<datalist id="experienceSuggestions">
-										<option value="Beginner" />
-										<option value="Gevorderd" />
-										<option value="Professional" />
-									</datalist>
-								</div>
-							</div>
-						)}
-
-						{/* Extra questions / remarks */}
-						<div className="flex flex-col gap-2 border border-white/20 p-6">
-							<label
-								htmlFor="extraQuestions"
-								className="text-white text-xl md:text-2xl"
+				<p className="mb-8 max-w-3xl text-lg text-white/80 md:text-xl">
+					Doe je mee of kom je kijken? Kies je rol en vul het formulier in.
+				</p>
+				{/* Login nudge — shown only to guests */}
+				{!isLoggedIn && (
+					<div className="mb-10 flex flex-col gap-3 rounded-lg border border-[#52979b]/40 bg-[#52979b]/10 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
+						<p className="text-sm text-white/80">
+							<span className="mr-1 font-semibold text-teal-300">
+								Al een account?
+							</span>
+							Log in om je gegevens automatisch in te vullen en je Drinkkaart
+							direct te activeren na registratie.
+						</p>
+						<div className="flex shrink-0 items-center gap-3 text-sm">
+							<Link
+								to="/login"
+								className="font-medium text-teal-300 underline-offset-2 transition-colors hover:underline"
 							>
-								Vragen of opmerkingen
-							</label>
-							<textarea
-								id="extraQuestions"
-								name="extraQuestions"
-								value={formData.extraQuestions}
-								onChange={handleChange}
-								onBlur={handleBlur}
-								placeholder="Heb je nog vragen of iets dat we moeten weten?"
-								rows={4}
-								autoComplete="off"
-								className="resize-none bg-transparent text-lg text-white transition-all placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-[#214e51]"
-							/>
+								Inloggen
+							</Link>
+							<span className="text-white/30">·</span>
+							<Link
+								to="/login"
+								search={{ signup: "1" }}
+								className="text-white/60 transition-colors hover:text-white"
+							>
+								Nog geen account? Aanmaken
+							</Link>
 						</div>
 					</div>
-
-					{/* Submit button */}
-					<div className="mt-auto flex flex-col items-center gap-4 pt-12">
-						<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="link-hover block text-center text-sm text-white/60 transition-colors hover:text-white"
-						>
-							Nog vragen? Neem contact op
-						</a>
-					</div>
-				</form>
+				)}
+				{!selectedType && <TypeSelector onSelect={setSelectedType} />}
+				{selectedType === "performer" && (
+					<PerformerForm
+						onBack={() => setSelectedType(null)}
+						onSuccess={(token, email, name) =>
+							setSuccessState({ token, email, name })
+						}
+						prefillFirstName={prefillFirstName}
+						prefillLastName={prefillLastName}
+						prefillEmail={prefillEmail}
+						isLoggedIn={isLoggedIn}
+					/>
+				)}
+				{selectedType === "watcher" && (
+					<WatcherForm
+						onBack={() => setSelectedType(null)}
+						prefillFirstName={prefillFirstName}
+						prefillLastName={prefillLastName}
+						prefillEmail={prefillEmail}
+						isLoggedIn={isLoggedIn}
+					/>
+				)}
 			</div>
 		</section>
 	);
--- a/apps/web/src/components/homepage/Footer.tsx
+++ b/apps/web/src/components/homepage/Footer.tsx
@@ -17,54 +17,142 @@ export default function Footer() {
 	}, []);

 	return (
-		<footer className="relative z-40 flex h-[250px] flex-col items-center justify-center bg-[#d09035]">
-			<div className="text-center">
-				<h3 className="mb-4 font-['Intro',sans-serif] text-2xl text-white">
-					Kunstenkamp
-				</h3>
-				<p className="mb-6 font-['Intro',sans-serif] text-white/80">
-					Waar creativiteit tot leven komt
-				</p>
+		<footer className="relative z-40 overflow-hidden bg-[#d09035]">
+			{/* Magenta top accent line */}
+			<div className="h-1 w-full bg-[#d82560]" />

-				<div className="flex items-center justify-center gap-8 text-sm text-white/70">
+			{/* Diagonal texture overlay */}
+			<div
+				className="pointer-events-none absolute inset-0 opacity-[0.04]"
+				style={{
+					backgroundImage: `repeating-linear-gradient(
+						-45deg,
+						#000 0px,
+						#000 1px,
+						transparent 1px,
+						transparent 12px
+					)`,
+				}}
+			/>
+
+			<div className="relative mx-auto max-w-5xl px-6 py-12">
+				{/* Main brand row */}
+				<div className="mb-10 flex flex-col items-center gap-1">
 					<a
-						href="/privacy"
-						className="link-hover transition-colors hover:text-white"
+						href="https://ejv.be/jong/kampen/kunstenkamp/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="flex items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
 					>
-						Privacy Policy
+						<img src="/favicon.png" alt="" className="h-10 w-10 bg-[#0B1C1F]" />
+						<span
+							className="font-['Intro',sans-serif] text-3xl text-white tracking-wide"
+							style={{ textShadow: "0 2px 8px rgba(0,0,0,0.18)" }}
+						>
+							Kunstenkamp
+						</span>
 					</a>
-					<span className="text-white/40">|</span>
-					<a
-						href="/terms"
-						className="link-hover transition-colors hover:text-white"
-					>
-						Terms of Service
-					</a>
-					<span className="text-white/40">|</span>
-					<a
-						href="/contact"
-						className="link-hover transition-colors hover:text-white"
-					>
-						Contact
-					</a>
-					{!isLoading && isAdmin && (
-						<>
-							<span className="text-white/40">|</span>
-							<Link
-								to="/admin"
-								className="link-hover transition-colors hover:text-white"
-							>
-								Admin
-							</Link>
-						</>
-					)}
+					<p className="font-['DM_Sans',sans-serif] font-medium text-sm text-white/70 uppercase tracking-[0.2em]">
+						Waar creativiteit tot leven komt
+					</p>
 				</div>

-				<div className="mt-6 text-white/50 text-xs">
-					© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
+				{/* Thin divider */}
+				<div className="mb-10 flex items-center gap-4">
+					<div className="h-px flex-1 bg-white/20" />
+					<div className="h-1 w-1 rotate-45 bg-white/40" />
+					<div className="h-px flex-1 bg-white/20" />
 				</div>
-				<div className="text-white/50 text-xs transition-colors hover:text-white">
-					<a href="https://zias.be" className="link-hover">
+
+				{/* Partners row */}
+				<div className="mb-10 flex flex-col items-center justify-center gap-10 md:flex-row md:gap-16">
+					{/* EJV */}
+					<a
+						href="https://ejv.be"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="flex flex-col items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
+					>
+						<img
+							src="/assets/ejv.svg"
+							alt="Evangelisch Jeugdverbond"
+							className="h-14 w-auto"
+						/>
+						<p className="font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]">
+							Onderdeel van EJV.be
+						</p>
+					</a>
+
+					{/* Vertical rule */}
+					<div className="hidden h-28 w-px bg-white/20 md:block" />
+
+					{/* Vlaanderen */}
+					<a
+						href="https://www.vlaanderen.be/cjm/nl"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="flex flex-col items-center gap-3 opacity-90 transition-opacity hover:opacity-100"
+					>
+						<img
+							src="/assets/vlaanderen.svg"
+							alt="Met steun van de Vlaamse overheid"
+							className="h-40 w-auto drop-shadow-md"
+						/>
+					</a>
+				</div>
+
+				{/* Thin divider */}
+				<div className="mb-6 flex items-center gap-4">
+					<div className="h-px flex-1 bg-white/20" />
+					<div className="h-1 w-1 rotate-45 bg-white/40" />
+					<div className="h-px flex-1 bg-white/20" />
+				</div>
+
+				{/* Legal links */}
+				<div className="flex flex-col items-center gap-4 md:flex-row md:justify-center md:gap-0">
+					<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2">
+						{[
+							{ href: "/privacy", label: "Privacy Beleid" },
+							{ href: "/terms", label: "Algemene Voorwaarden" },
+							{ href: "/contact", label: "Contact" },
+						].map((link, i, arr) => (
+							<span key={link.href} className="flex items-center gap-6">
+								<a
+									href={link.href}
+									className="link-hover font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]"
+								>
+									{link.label}
+								</a>
+								{i < arr.length - 1 && (
+									<span className="hidden text-white/30 md:inline">·</span>
+								)}
+							</span>
+						))}
+						{!isLoading && isAdmin && (
+							<span className="flex items-center gap-6">
+								<span className="hidden text-white/30 md:inline">·</span>
+								<Link
+									to="/admin"
+									className="link-hover font-['DM_Sans',sans-serif] font-medium text-white/60 text-xs uppercase tracking-[0.15em]"
+								>
+									Admin
+								</Link>
+							</span>
+						)}
+					</div>
+				</div>
+
+				{/* Copyright */}
+				<div className="mt-6 flex flex-col items-center gap-1">
+					<p className="font-['DM_Sans',sans-serif] text-white/60 text-xs">
+						© {new Date().getFullYear()} Kunstenkamp. Alle rechten voorbehouden.
+					</p>
+					<a
+						href="https://zias.be"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="link-hover font-['DM_Sans',sans-serif] text-white/60 text-xs"
+					>
 						Gemaakt met ♥ door zias.be
 					</a>
 				</div>
--- a/apps/web/src/components/homepage/Hero.tsx
+++ b/apps/web/src/components/homepage/Hero.tsx
@@ -61,7 +61,7 @@ export default function Hero() {
 							type="button"
 							className="link-hover mt-4 cursor-pointer text-left font-['Intro',sans-serif] font-normal text-[clamp(1.25rem,2.5vw,2.625rem)] text-white/70 transition-colors duration-200 hover:text-white"
 						>
-							Ongedesemd brood
+							Ongedesemd Woord
 						</button>
 					</div>

@@ -83,7 +83,7 @@ export default function Hero() {
 					{/* Bottom Right - Dark Teal with date - above mic */}
 					<div className="relative flex flex-1 items-center justify-end bg-[#214e51]">
 						<p className="px-12 text-right font-['Intro',sans-serif] font-normal text-[clamp(2rem,5vw,6rem)] text-white uppercase leading-[1.1]">
-							VRIJDAG 18
+							VRIJDAG 24
 							<br />
 							april
 						</p>
@@ -114,7 +114,7 @@ export default function Hero() {
 							NIGHT
 						</h1>
 						<p className="mt-4 font-['Intro',sans-serif] font-normal text-[5vw] text-white/90">
-							Ongedesemd brood
+							Ongedesemd Woord
 						</p>

 						{/* Mobile Microphone - positioned inside magenta section, clipped by overflow */}
@@ -153,7 +153,7 @@ export default function Hero() {
 							<p className="text-right font-['Intro',sans-serif] font-normal text-[8vw] text-white uppercase leading-tight">
 								VRIJDAG
 								<br />
-								18 april
+								24 april
 							</p>
 						</div>
 					</div>
--- a/apps/web/src/components/homepage/Info.tsx
+++ b/apps/web/src/components/homepage/Info.tsx
@@ -24,7 +24,7 @@ const faqQuestions = [
 export default function Info() {
 	return (
 		<section id="info" className="relative z-20 flex flex-col bg-[#d82560]/96">
-			{/* Hero Section - Ongedesemd Brood */}
+			{/* Hero Section - Ongedesemd Woord */}
 			<div className="relative w-full border-white/20 border-b-4">
 				{/* Background pattern */}
 				<div
@@ -43,7 +43,7 @@ export default function Info() {
 							viewBox="0 0 80 56"
 							fill="none"
 							xmlns="http://www.w3.org/2000/svg"
-							aria-label="Ongedesemd brood"
+							aria-label="Ongedesemd Woord"
 						>
 							{/* Flat matzo cracker - slightly rounded rect */}
 							<rect
@@ -88,10 +88,16 @@ export default function Info() {
 					</div>

 					{/* Main Title */}
-					<h2 className="font-['Intro',sans-serif] font-black text-6xl text-white uppercase tracking-tight md:text-8xl lg:text-9xl">
+					<h2
+						className="font-['Intro',sans-serif] font-black text-white uppercase tracking-tight"
+						style={{ fontSize: "clamp(1rem, 8vw + 1rem, 8rem)" }}
+					>
 						Ongedesemd
-						<span className="block text-5xl md:text-7xl lg:text-8xl">
-							Brood?!
+						<span
+							className="block"
+							style={{ fontSize: "clamp(1rem, 6vw + 1rem, 6rem)" }}
+						>
+							Woord?!
 						</span>
 					</h2>

@@ -110,9 +116,17 @@ export default function Info() {
 			</div>

 			{/* Content Section */}
-			<div className="w-full px-12 py-16">
-				<div className="mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
-					{/* Ongedesemd Brood Explanation - Full Width Special Treatment */}
+			<div className="relative w-full px-12 py-16">
+				{/* Background texture */}
+				<div
+					className="pointer-events-none absolute inset-0 opacity-10"
+					style={{
+						backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+					}}
+				/>
+
+				<div className="relative mx-auto flex w-full max-w-6xl flex-1 flex-col justify-center gap-16">
+					{/* Ongedesemd Woord Explanation - Full Width Special Treatment */}
 					<div className="relative flex flex-col gap-6 rounded-2xl border-2 border-white/20 bg-white/5 p-8 md:p-12">
 						<div className="absolute top-0 -left-4 h-full w-1 bg-gradient-to-b from-white/0 via-white/60 to-white/0" />

@@ -124,7 +138,7 @@ export default function Info() {
 							<div className="flex flex-col gap-4">
 								<p className="text-lg text-white/90 leading-relaxed">
 									In de Bijbel staat ongedesemd brood (ook wel{" "}
-									<em className="text-white">matze</em> genoemd) symbool voor
+									<em className="text-white">matzah</em> genoemd) symbool voor
 									eenvoud en zuiverheid, zonder de &apos;ballast&apos; van
 									desem.
 								</p>
--- a/apps/web/src/components/registration/GiftSelector.tsx
+++ b/apps/web/src/components/registration/GiftSelector.tsx
@@ -0,0 +1,164 @@
+import { useState } from "react";
+
+interface GiftSelectorProps {
+	value: number;
+	onChange: (cents: number) => void;
+	id?: string;
+	disabled?: boolean;
+}
+
+const PRESET_AMOUNTS = [
+	{ label: "€5", cents: 500 },
+	{ label: "€10", cents: 1000 },
+	{ label: "€25", cents: 2500 },
+	{ label: "€50", cents: 5000 },
+];
+
+export function GiftSelector({
+	value,
+	onChange,
+	id,
+	disabled,
+}: GiftSelectorProps) {
+	const [customInput, setCustomInput] = useState("");
+	const [isCustom, setIsCustom] = useState(false);
+
+	// Check if current value matches a preset
+	const isPresetSelected = PRESET_AMOUNTS.some((p) => p.cents === value);
+	const showCustomInput = isCustom || (!isPresetSelected && value > 0);
+
+	const handlePresetClick = (cents: number) => {
+		onChange(cents);
+		setIsCustom(false);
+		setCustomInput("");
+	};
+
+	const handleCustomInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const input = e.target.value.replace(/[^0-9,]/g, "");
+		setCustomInput(input);
+
+		// Parse euros to cents
+		if (input) {
+			const normalized = input.replace(",", ".");
+			const euros = Number.parseFloat(normalized);
+			if (!Number.isNaN(euros) && euros >= 0) {
+				onChange(Math.round(euros * 100));
+			}
+		} else {
+			onChange(0);
+		}
+	};
+
+	const handleCustomClick = () => {
+		setIsCustom(true);
+		if (value > 0 && !isPresetSelected) {
+			// Keep existing custom value
+			setCustomInput((value / 100).toFixed(2).replace(".", ","));
+		} else {
+			setCustomInput("");
+			onChange(0);
+		}
+	};
+
+	const handleSkip = () => {
+		onChange(0);
+		setIsCustom(false);
+		setCustomInput("");
+	};
+
+	// When disabled, show read-only view
+	if (disabled) {
+		return (
+			<div id={id} className="space-y-4">
+				<p className="mb-3 text-sm text-white/60">
+					Deelname is gratis, maar een vrijwillige gift wordt zeer gewaardeerd.
+				</p>
+				{value > 0 ? (
+					<div className="rounded border border-pink-400/30 bg-pink-400/10 px-4 py-3">
+						<p className="font-medium text-pink-300">
+							€{(value / 100).toFixed(2).replace(".", ",")}
+						</p>
+						<p className="mt-1 text-pink-300/60 text-xs">
+							Gift is verwerkt en kan niet meer worden aangepast
+						</p>
+					</div>
+				) : (
+					<p className="text-sm text-white/40">Geen gift toegevoegd</p>
+				)}
+			</div>
+		);
+	}
+
+	return (
+		<div id={id} className="space-y-4">
+			<p className="mb-3 text-sm text-white/60">
+				Deelname is gratis, maar een vrijwillige gift wordt zeer gewaardeerd.
+			</p>
+
+			{/* Preset amounts */}
+			<div className="flex flex-wrap gap-2">
+				{PRESET_AMOUNTS.map((preset) => (
+					<button
+						key={preset.cents}
+						type="button"
+						onClick={() => handlePresetClick(preset.cents)}
+						className={`rounded px-4 py-2 font-semibold text-sm transition-all ${
+							value === preset.cents
+								? "bg-white text-[#214e51]"
+								: "border border-white/30 bg-white/5 text-white hover:bg-white/10"
+						}`}
+					>
+						{preset.label}
+					</button>
+				))}
+				<button
+					type="button"
+					onClick={handleCustomClick}
+					className={`rounded px-4 py-2 font-semibold text-sm transition-all ${
+						showCustomInput && !isPresetSelected
+							? "bg-white text-[#214e51]"
+							: "border border-white/30 bg-white/5 text-white hover:bg-white/10"
+					}`}
+				>
+					Anders
+				</button>
+			</div>
+
+			{/* Custom amount input */}
+			{showCustomInput && (
+				<div className="mt-3 flex items-center gap-2">
+					<span className="text-lg text-white">€</span>
+					<input
+						type="text"
+						inputMode="decimal"
+						placeholder="0,00"
+						value={customInput}
+						onChange={handleCustomInputChange}
+						className="w-24 rounded border border-white/30 bg-white/10 px-3 py-2 text-lg text-white placeholder:text-white/40 focus:border-white/50 focus:outline-none"
+					/>
+				</div>
+			)}
+
+			{/* Skip option */}
+			{value > 0 && (
+				<button
+					type="button"
+					onClick={handleSkip}
+					className="text-sm text-white/50 underline underline-offset-2 hover:text-white/70"
+				>
+					Liever geen gift
+				</button>
+			)}
+
+			{/* Selected amount display */}
+			{value > 0 && (
+				<p className="text-sm text-white/80">
+					Geselecteerd:{" "}
+					<span className="font-semibold text-white">
+						€{(value / 100).toFixed(2).replace(".", ",")}
+					</span>
+				</p>
+			)}
+		</div>
+	);
+}
--- a/apps/web/src/components/registration/GuestList.tsx
+++ b/apps/web/src/components/registration/GuestList.tsx
@@ -0,0 +1,299 @@
+import { useState } from "react";
+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;
+	/** Whether payment has already been made (disables removal without warning) */
+	isPaid?: boolean;
+}
+
+export function GuestList({
+	guests,
+	errors,
+	onChange,
+	onAdd,
+	onRemove,
+	headerNote,
+	isPaid,
+}: Props) {
+	const [removingIndex, setRemovingIndex] = useState<number | null>(null);
+
+	const handleRemoveClick = (index: number) => {
+		if (isPaid) {
+			setRemovingIndex(index);
+		} else {
+			onRemove(index);
+		}
+	};
+
+	const confirmRemove = () => {
+		if (removingIndex !== null) {
+			onRemove(removingIndex);
+			setRemovingIndex(null);
+		}
+	};
+
+	const cancelRemove = () => {
+		setRemovingIndex(null);
+	};
+
+	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>
+
+			{/* Removal confirmation modal for paid registrations */}
+			{removingIndex !== null && (
+				<div className="mb-4 rounded border border-orange-400/30 bg-orange-400/10 p-4">
+					<p className="mb-2 font-medium text-orange-300 text-sm">
+						Let op: gast verwijderen
+					</p>
+					<p className="mb-4 text-sm text-white/70">
+						Als je al betaald hebt voor deze gast krijg je geen terugbetaling
+						bij het verwijderen.
+					</p>
+					<div className="flex gap-3">
+						<button
+							type="button"
+							onClick={confirmRemove}
+							className="rounded bg-orange-400/20 px-3 py-1.5 text-orange-300 text-sm hover:bg-orange-400/30"
+						>
+							Toch verwijderen
+						</button>
+						<button
+							type="button"
+							onClick={cancelRemove}
+							className="rounded border border-white/20 px-3 py-1.5 text-sm text-white/60 hover:bg-white/5"
+						>
+							Annuleren
+						</button>
+					</div>
+				</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={() => handleRemoveClick(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}-birthdate`}
+									className="text-white/80"
+								>
+									Geboortedatum <span className="text-red-300">*</span>
+								</label>
+								<input
+									type="date"
+									id={`guest-${idx}-birthdate`}
+									value={guest.birthdate}
+									onChange={(e) => onChange(idx, "birthdate", e.target.value)}
+									autoComplete="off"
+									className={inputCls(!!errors[idx]?.birthdate)}
+								/>
+								{errors[idx]?.birthdate && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].birthdate}
+									</span>
+								)}
+							</div>
+
+							<div className="flex flex-col gap-2">
+								<label
+									htmlFor={`guest-${idx}-postcode`}
+									className="text-white/80"
+								>
+									Postcode <span className="text-red-300">*</span>
+								</label>
+								<input
+									type="text"
+									id={`guest-${idx}-postcode`}
+									value={guest.postcode}
+									onChange={(e) => onChange(idx, "postcode", e.target.value)}
+									placeholder="1234 AB"
+									autoComplete="off"
+									className={inputCls(!!errors[idx]?.postcode)}
+								/>
+								{errors[idx]?.postcode && (
+									<span className="text-red-300 text-sm" role="alert">
+										{errors[idx].postcode}
+									</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>
+	);
+}
--- a/apps/web/src/components/registration/PerformerForm.tsx
+++ b/apps/web/src/components/registration/PerformerForm.tsx
@@ -0,0 +1,565 @@
+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";
+import { GiftSelector } from "./GiftSelector";
+
+interface PerformerErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	postcode?: string;
+	birthdate?: string;
+	artForm?: string;
+	isOver16?: string;
+}
+
+interface Props {
+	onBack: () => void;
+	onSuccess: (token: string, email: string, name: string) => void;
+	prefillFirstName?: string;
+	prefillLastName?: string;
+	prefillEmail?: string;
+	isLoggedIn?: boolean;
+}
+
+export function PerformerForm({
+	onBack,
+	onSuccess,
+	prefillFirstName = "",
+	prefillLastName = "",
+	prefillEmail = "",
+	isLoggedIn = false,
+}: Props) {
+	const [data, setData] = useState({
+		firstName: prefillFirstName,
+		lastName: prefillLastName,
+		email: prefillEmail,
+		phone: "",
+		postcode: "",
+		birthdate: "",
+		artForm: "",
+		experience: "",
+		isOver16: false,
+		extraQuestions: "",
+	});
+	const [giftAmount, setGiftAmount] = useState(0);
+	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,
+					data.email.trim(),
+					`${data.firstName.trim()} ${data.lastName.trim()}`.trim(),
+				);
+		},
+		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),
+			postcode: !data.postcode.trim() ? "Postcode is verplicht" : undefined,
+			birthdate: !data.birthdate ? "Geboortedatum is verplicht" : undefined,
+			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,
+			postcode: true,
+			birthdate: 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),
+				postcode:
+					name === "postcode" && !value.trim()
+						? "Postcode is verplicht"
+						: undefined,
+				birthdate:
+					name === "birthdate" && !value
+						? "Geboortedatum is verplicht"
+						: undefined,
+				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),
+			postcode:
+				name === "postcode" && !value.trim()
+					? "Postcode is verplicht"
+					: undefined,
+			birthdate:
+				name === "birthdate" && !value
+					? "Geboortedatum is verplicht"
+					: undefined,
+			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,
+			postcode: data.postcode.trim(),
+			birthdate: data.birthdate,
+			registrationType: "performer",
+			artForm: data.artForm.trim() || undefined,
+			experience: data.experience.trim() || undefined,
+			isOver16: data.isOver16,
+			extraQuestions: data.extraQuestions.trim() || undefined,
+			giftAmount,
+		});
+	}
+
+	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={isLoggedIn ? undefined : handleChange}
+							onBlur={isLoggedIn ? undefined : handleBlur}
+							readOnly={isLoggedIn}
+							placeholder="jouw@email.be"
+							autoComplete="email"
+							inputMode="email"
+							aria-required="true"
+							aria-invalid={touched.email && !!errors.email}
+							className={`${inputCls(!!touched.email && !!errors.email)}${isLoggedIn ? "cursor-not-allowed opacity-60" : ""}`}
+						/>
+						{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>
+
+				{/* Postcode + Birthdate row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-postcode" className="text-white text-xl">
+							Postcode <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="p-postcode"
+							name="postcode"
+							value={data.postcode}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="1234 AB"
+							autoComplete="postal-code"
+							aria-required="true"
+							aria-invalid={touched.postcode && !!errors.postcode}
+							className={inputCls(!!touched.postcode && !!errors.postcode)}
+						/>
+						{touched.postcode && errors.postcode && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.postcode}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="p-birthdate" className="text-white text-xl">
+							Geboortedatum <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="date"
+							id="p-birthdate"
+							name="birthdate"
+							value={data.birthdate}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							autoComplete="bday"
+							aria-invalid={touched.birthdate && !!errors.birthdate}
+							className={`${inputCls(!!touched.birthdate && !!errors.birthdate)} [color-scheme:dark]`}
+						/>
+						{touched.birthdate && errors.birthdate && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.birthdate}
+							</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>
+
+				{/* Gift selector */}
+				<div className="border border-white/10 p-6">
+					<h3 className="mb-4 font-['Intro',sans-serif] text-white text-xl">
+						Vrijwillige Gift
+					</h3>
+					<GiftSelector value={giftAmount} onChange={setGiftAmount} />
+				</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>
+	);
+}
--- a/apps/web/src/components/registration/SuccessScreen.tsx
+++ b/apps/web/src/components/registration/SuccessScreen.tsx
@@ -0,0 +1,157 @@
+import { useState } from "react";
+
+interface Props {
+	token: string;
+	email?: string;
+	name?: string;
+	onReset: () => void;
+	isLoggedIn?: boolean;
+}
+
+export function SuccessScreen({
+	token,
+	email,
+	name,
+	onReset,
+	isLoggedIn,
+}: Props) {
+	const manageUrl =
+		typeof window !== "undefined"
+			? `${window.location.origin}/manage/${token}`
+			: `/manage/${token}`;
+
+	const [drinkkaartPromptDismissed, setDrinkkaartPromptDismissed] = useState(
+		() => {
+			try {
+				return (
+					typeof localStorage !== "undefined" &&
+					localStorage.getItem("drinkkaart_prompt_dismissed") === "1"
+				);
+			} catch {
+				return false;
+			}
+		},
+	);
+
+	const handleDismissPrompt = () => {
+		try {
+			localStorage.setItem("drinkkaart_prompt_dismissed", "1");
+		} catch {
+			// ignore
+		}
+		setDrinkkaartPromptDismissed(true);
+	};
+
+	// Build signup URL with pre-filled email query param so /login can pre-fill
+	const signupUrl = email
+		? `/login?signup=1&email=${encodeURIComponent(email)}`
+		: "/login?signup=1";
+
+	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>
+
+					{/* Account creation prompt — hidden when already logged in */}
+					{!isLoggedIn && !drinkkaartPromptDismissed && (
+						<div className="mt-8 rounded-xl border border-teal-400/30 bg-teal-400/10 p-6">
+							<h3 className="mb-1 font-['Intro',sans-serif] text-lg text-white">
+								Maak een gratis account aan
+							</h3>
+							<p className="mb-4 text-sm text-white/70">
+								Met een account zie je je inschrijving, activeer je je
+								Drinkkaart en laad je saldo op vóór het evenement.
+							</p>
+							<ul className="mb-5 space-y-1.5 text-sm text-white/70">
+								<li className="flex items-center gap-2">
+									<span className="text-teal-300">✓</span>
+									Beheer je inschrijving op één plek
+								</li>
+								<li className="flex items-center gap-2">
+									<span className="text-teal-300">✓</span>
+									Digitale Drinkkaart met QR-code
+								</li>
+								<li className="flex items-center gap-2">
+									<span className="text-teal-300">✓</span>
+									Saldo opladen vóór het evenement
+								</li>
+							</ul>
+							<div className="flex flex-wrap items-center gap-3">
+								<a
+									href={signupUrl}
+									className="inline-flex items-center rounded-lg bg-white px-5 py-2.5 font-['Intro',sans-serif] text-[#214e51] text-sm transition-all hover:scale-105 hover:bg-gray-100"
+								>
+									Account aanmaken
+									{name && (
+										<span className="ml-1.5 font-normal text-xs opacity-60">
+											als {name}
+										</span>
+									)}
+								</a>
+								<button
+									type="button"
+									onClick={handleDismissPrompt}
+									className="text-sm text-white/40 underline underline-offset-2 transition-colors hover:text-white/70"
+								>
+									Overslaan
+								</button>
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</section>
+	);
+}
--- a/apps/web/src/components/registration/TypeSelector.tsx
+++ 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 te betalen bij registratie
+					</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>
+	);
+}
--- a/apps/web/src/components/registration/WatcherForm.tsx
+++ b/apps/web/src/components/registration/WatcherForm.tsx
@@ -0,0 +1,752 @@
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { authClient } from "@/lib/auth-client";
+import {
+	calculateDrinkCard,
+	type GuestEntry,
+	type GuestErrors,
+	inputCls,
+	validateEmail,
+	validateGuests,
+	validatePhone,
+	validateTextField,
+} from "@/lib/registration";
+import { client, orpc } from "@/utils/orpc";
+import { GiftSelector } from "./GiftSelector";
+import { GuestList } from "./GuestList";
+
+interface WatcherErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	postcode?: string;
+	birthdate?: string;
+}
+
+interface Props {
+	onBack: () => void;
+	prefillFirstName?: string;
+	prefillLastName?: string;
+	prefillEmail?: string;
+	isLoggedIn?: boolean;
+}
+
+// ── Account creation modal shown after successful registration ─────────────
+
+interface AccountModalProps {
+	prefillName: string;
+	prefillEmail: string;
+	onDone: () => void;
+}
+
+function AccountModal({
+	prefillName,
+	prefillEmail,
+	onDone,
+}: AccountModalProps) {
+	const [name, setName] = useState(prefillName);
+	const [email] = useState(prefillEmail); // email is fixed (tied to registration)
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [passwordError, setPasswordError] = useState<string | undefined>();
+
+	const signupMutation = useMutation({
+		mutationFn: async () => {
+			if (password.length < 8)
+				throw new Error("Wachtwoord moet minstens 8 tekens zijn");
+			if (password !== confirmPassword)
+				throw new Error("Wachtwoorden komen niet overeen");
+			const result = await authClient.signUp.email({ email, password, name });
+			if (result.error) throw new Error(result.error.message);
+			return result.data;
+		},
+		onSuccess: () => {
+			toast.success(
+				"Account aangemaakt! Je wordt nu doorgestuurd naar betaling.",
+			);
+			onDone();
+		},
+		onError: (error) => {
+			toast.error(`Account aanmaken mislukt: ${error.message}`);
+		},
+	});
+
+	const handlePasswordChange = (val: string) => {
+		setPassword(val);
+		if (passwordError) setPasswordError(undefined);
+	};
+
+	const handleConfirmChange = (val: string) => {
+		setConfirmPassword(val);
+		if (passwordError) setPasswordError(undefined);
+	};
+
+	const handleSignup = (e: React.FormEvent) => {
+		e.preventDefault();
+		if (password.length < 8) {
+			setPasswordError("Wachtwoord moet minstens 8 tekens zijn");
+			return;
+		}
+		if (password !== confirmPassword) {
+			setPasswordError("Wachtwoorden komen niet overeen");
+			return;
+		}
+		signupMutation.mutate();
+	};
+
+	// Receive the checkout URL from parent by exposing a setter via ref pattern
+	// (simpler: the parent renders the modal and passes a prop)
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4">
+			<div className="w-full max-w-md rounded-2xl border border-white/10 bg-[#1a3d40] p-8 shadow-2xl">
+				{/* Header */}
+				<div className="mb-6 flex items-start gap-4">
+					<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-teal-400/20 text-teal-300 text-xl">
+						✓
+					</div>
+					<div>
+						<h2 className="font-['Intro',sans-serif] text-2xl text-white">
+							Inschrijving gelukt!
+						</h2>
+						<p className="mt-1 text-sm text-white/60">
+							Maak een gratis account aan om je Drinkkaart bij te houden.
+						</p>
+					</div>
+				</div>
+
+				{/* Value prop */}
+				<div className="mb-6 rounded-lg border border-teal-400/20 bg-teal-400/10 p-4">
+					<ul className="space-y-1.5 text-sm text-white/80">
+						<li className="flex items-center gap-2">
+							<span className="text-teal-300">✓</span>
+							Zie je drinkkaart-saldo en QR-code
+						</li>
+						<li className="flex items-center gap-2">
+							<span className="text-teal-300">✓</span>
+							Laad je kaart op vóór het evenement
+						</li>
+						<li className="flex items-center gap-2">
+							<span className="text-teal-300">✓</span>
+							Beheer je inschrijving op één plek
+						</li>
+					</ul>
+				</div>
+
+				{/* Signup form */}
+				<form onSubmit={handleSignup} className="space-y-4">
+					{/* Name */}
+					<div>
+						<label
+							className="mb-1.5 block text-sm text-white/60"
+							htmlFor="modal-name"
+						>
+							Naam
+						</label>
+						<input
+							id="modal-name"
+							type="text"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							required
+							className="w-full rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-white placeholder:text-white/30 focus:border-teal-400/60 focus:outline-none"
+						/>
+					</div>
+
+					{/* Email (read-only) */}
+					<div>
+						<label
+							className="mb-1.5 block text-sm text-white/60"
+							htmlFor="modal-email"
+						>
+							Email
+						</label>
+						<input
+							id="modal-email"
+							type="email"
+							value={email}
+							readOnly
+							className="w-full cursor-not-allowed rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-white/60"
+						/>
+					</div>
+
+					{/* Password */}
+					<div>
+						<label
+							className="mb-1.5 block text-sm text-white/60"
+							htmlFor="modal-password"
+						>
+							Wachtwoord
+						</label>
+						<input
+							id="modal-password"
+							type="password"
+							placeholder="Minstens 8 tekens"
+							value={password}
+							onChange={(e) => handlePasswordChange(e.target.value)}
+							required
+							minLength={8}
+							className="w-full rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-white placeholder:text-white/30 focus:border-teal-400/60 focus:outline-none"
+						/>
+					</div>
+
+					{/* Confirm password */}
+					<div>
+						<label
+							className="mb-1.5 block text-sm text-white/60"
+							htmlFor="modal-confirm"
+						>
+							Bevestig wachtwoord
+						</label>
+						<input
+							id="modal-confirm"
+							type="password"
+							placeholder="Herhaal je wachtwoord"
+							value={confirmPassword}
+							onChange={(e) => handleConfirmChange(e.target.value)}
+							required
+							className="w-full rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-white placeholder:text-white/30 focus:border-teal-400/60 focus:outline-none"
+						/>
+					</div>
+
+					{passwordError && (
+						<p className="text-red-300 text-sm">{passwordError}</p>
+					)}
+
+					<button
+						type="submit"
+						disabled={signupMutation.isPending}
+						className="w-full rounded-lg bg-white py-3 font-['Intro',sans-serif] text-[#214e51] transition-all hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+					>
+						{signupMutation.isPending
+							? "Bezig..."
+							: "Account aanmaken & betalen"}
+					</button>
+				</form>
+
+				{/* Skip */}
+				<button
+					type="button"
+					onClick={onDone}
+					className="mt-4 w-full text-center text-sm text-white/40 transition-colors hover:text-white/70"
+				>
+					Overslaan, verder naar betaling →
+				</button>
+			</div>
+		</div>
+	);
+}
+
+// ── Main watcher form ──────────────────────────────────────────────────────
+
+export function WatcherForm({
+	onBack,
+	prefillFirstName = "",
+	prefillLastName = "",
+	prefillEmail = "",
+	isLoggedIn = false,
+}: Props) {
+	const [data, setData] = useState({
+		firstName: prefillFirstName,
+		lastName: prefillLastName,
+		email: prefillEmail,
+		phone: "",
+		postcode: "",
+		birthdate: "",
+		extraQuestions: "",
+	});
+	const [errors, setErrors] = useState<WatcherErrors>({});
+	const [touched, setTouched] = useState<Record<string, boolean>>({});
+	const [guests, setGuests] = useState<GuestEntry[]>([]);
+	const [guestErrors, setGuestErrors] = useState<GuestErrors[]>([]);
+	const [giftAmount, setGiftAmount] = useState(0);
+
+	// Modal state: shown after successful registration while we fetch checkout URL
+	const [modalState, setModalState] = useState<{
+		prefillName: string;
+		prefillEmail: string;
+		checkoutUrl: string;
+	} | null>(null);
+
+	const submitMutation = useMutation({
+		...orpc.submitRegistration.mutationOptions(),
+		onSuccess: async (result) => {
+			if (!result.managementToken) return;
+			try {
+				const redirectUrl = isLoggedIn
+					? `${window.location.origin}/account?topup=success`
+					: undefined;
+				const checkout = await client.getCheckoutUrl({
+					token: result.managementToken,
+					redirectUrl,
+				});
+				if (isLoggedIn) {
+					// Already logged in — skip the account-creation modal, go straight to checkout
+					window.location.href = checkout.checkoutUrl;
+				} else {
+					// Show the account-creation modal before redirecting to checkout
+					setModalState({
+						prefillName:
+							`${data.firstName.trim()} ${data.lastName.trim()}`.trim(),
+						prefillEmail: data.email.trim(),
+						checkoutUrl: 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),
+			postcode: !data.postcode.trim() ? "Postcode is verplicht" : undefined,
+			birthdate: !data.birthdate ? "Geboortedatum is verplicht" : undefined,
+		};
+		setErrors(fieldErrs);
+		setTouched({
+			firstName: true,
+			lastName: true,
+			email: true,
+			phone: true,
+			postcode: true,
+			birthdate: 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),
+				postcode:
+					name === "postcode" && !value.trim()
+						? "Postcode is verplicht"
+						: undefined,
+				birthdate:
+					name === "birthdate" && !value
+						? "Geboortedatum is verplicht"
+						: undefined,
+			};
+			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),
+			postcode:
+				name === "postcode" && !value.trim()
+					? "Postcode is verplicht"
+					: undefined,
+			birthdate:
+				name === "birthdate" && !value
+					? "Geboortedatum is verplicht"
+					: undefined,
+		};
+		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: "",
+				birthdate: "",
+				postcode: "",
+			},
+		]);
+		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,
+			postcode: data.postcode.trim(),
+			birthdate: data.birthdate,
+			registrationType: "watcher",
+			guests: guests.map((g) => ({
+				firstName: g.firstName.trim(),
+				lastName: g.lastName.trim(),
+				email: g.email.trim() || undefined,
+				phone: g.phone.trim() || undefined,
+				birthdate: g.birthdate.trim(),
+				postcode: g.postcode.trim(),
+			})),
+			extraQuestions: data.extraQuestions.trim() || undefined,
+			giftAmount,
+		});
+	}
+
+	const totalPrice = calculateDrinkCard(guests.length);
+
+	return (
+		<div>
+			{/* Account-creation interstitial modal */}
+			{modalState && (
+				<AccountModal
+					prefillName={modalState.prefillName}
+					prefillEmail={modalState.prefillEmail}
+					onDone={() => {
+						const url = modalState.checkoutUrl;
+						setModalState(null);
+						window.location.href = url;
+					}}
+				/>
+			)}
+
+			{/* 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 registratie
+						<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={isLoggedIn ? undefined : handleChange}
+							onBlur={isLoggedIn ? undefined : handleBlur}
+							readOnly={isLoggedIn}
+							placeholder="jouw@email.be"
+							autoComplete="email"
+							inputMode="email"
+							aria-required="true"
+							aria-invalid={touched.email && !!errors.email}
+							className={`${inputCls(!!touched.email && !!errors.email)}${isLoggedIn ? "cursor-not-allowed opacity-60" : ""}`}
+						/>
+						{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>
+
+				{/* Postcode + Birthdate row */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div className="flex flex-col gap-2">
+						<label htmlFor="w-postcode" className="text-white text-xl">
+							Postcode <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="text"
+							id="w-postcode"
+							name="postcode"
+							value={data.postcode}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							placeholder="1234 AB"
+							autoComplete="postal-code"
+							aria-required="true"
+							aria-invalid={touched.postcode && !!errors.postcode}
+							className={inputCls(!!touched.postcode && !!errors.postcode)}
+						/>
+						{touched.postcode && errors.postcode && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.postcode}
+							</span>
+						)}
+					</div>
+					<div className="flex flex-col gap-2">
+						<label htmlFor="w-birthdate" className="text-white text-xl">
+							Geboortedatum <span className="text-red-300">*</span>
+						</label>
+						<input
+							type="date"
+							id="w-birthdate"
+							name="birthdate"
+							value={data.birthdate}
+							onChange={handleChange}
+							onBlur={handleBlur}
+							autoComplete="bday"
+							aria-invalid={touched.birthdate && !!errors.birthdate}
+							className={`${inputCls(!!touched.birthdate && !!errors.birthdate)} [color-scheme:dark]`}
+						/>
+						{touched.birthdate && errors.birthdate && (
+							<span className="text-red-300 text-sm" role="alert">
+								{errors.birthdate}
+							</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>
+
+				{/* Gift selector */}
+				<div className="border border-white/10 p-6">
+					<h3 className="mb-4 font-['Intro',sans-serif] text-white text-xl">
+						Vrijwillige Gift
+					</h3>
+					<GiftSelector value={giftAmount} onChange={setGiftAmount} />
+				</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>
+	);
+}
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -25,9 +25,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
 			}}
 			style={
 				{
-					"--normal-bg": "var(--popover)",
-					"--normal-text": "var(--popover-foreground)",
-					"--normal-border": "var(--border)",
+					"--normal-bg": "hsl(var(--popover))",
+					"--normal-text": "hsl(var(--popover-foreground))",
+					"--normal-border": "hsl(var(--border))",
 					"--border-radius": "var(--radius)",
 				} as React.CSSProperties
 			}
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -109,6 +109,32 @@ html {
 	border-radius: 3px;
 }

+/* ─── Theme Colors (CSS Variables for shadcn/ui) ─────────────────────────────
+   These variables are used by shadcn/ui components and the toast system.
+   ─────────────────────────────────────────────────────────────────────────── */
+:root {
+	--background: 0 0% 100%;
+	--foreground: 0 0% 10%;
+	--card: 0 0% 100%;
+	--card-foreground: 0 0% 10%;
+	--popover: 0 0% 100%;
+	--popover-foreground: 0 0% 10%;
+	--primary: 340 70% 49%;
+	--primary-foreground: 0 0% 100%;
+	--secondary: 183 40% 23%;
+	--secondary-foreground: 0 0% 100%;
+	--muted: 0 0% 96%;
+	--muted-foreground: 0 0% 45%;
+	--accent: 340 70% 49%;
+	--accent-foreground: 0 0% 100%;
+	--destructive: 0 84% 60%;
+	--destructive-foreground: 0 0% 100%;
+	--border: 0 0% 90%;
+	--input: 0 0% 90%;
+	--ring: 340 70% 49%;
+	--radius: 0rem;
+}
+
 /* ─── Text Selection Colors ─────────────────────────────────────────────────
   Each section gets a ::selection style that harmonizes with its background.
   The goal: selection feels native to each section, not a browser default.
--- a/apps/web/src/lib/drinkkaart.ts
+++ b/apps/web/src/lib/drinkkaart.ts
@@ -0,0 +1,18 @@
+// Frontend constants and utilities for the Drinkkaart feature.
+
+export const TOPUP_PRESETS_CENTS = [500, 1000, 2000, 5000] as const;
+// = €5, €10, €20, €50
+
+export const DEDUCTION_PRESETS_CENTS = [150, 200, 300, 500] as const;
+// = €1,50 / €2,00 / €3,00 / €5,00 — typical drink prices
+
+export const TOPUP_MIN_CENTS = 100; // €1
+export const TOPUP_MAX_CENTS = 50000; // €500
+
+/** Format a cents integer as a Belgian euro string, e.g. 1250 → "€ 12,50". */
+export function formatCents(cents: number): string {
+	return new Intl.NumberFormat("nl-BE", {
+		style: "currency",
+		currency: "EUR",
+	}).format(cents / 100);
+}
--- a/apps/web/src/lib/registration.ts
+++ b/apps/web/src/lib/registration.ts
@@ -0,0 +1,125 @@
+// 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;
+	birthdate: string;
+	postcode: string;
+}
+
+export interface GuestErrors {
+	firstName?: string;
+	lastName?: string;
+	email?: string;
+	phone?: string;
+	birthdate?: string;
+	postcode?: 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 ?? "",
+			birthdate: g.birthdate ?? "",
+			postcode: g.postcode ?? "",
+		}));
+	} 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,
+		birthdate: !g.birthdate.trim() ? "Geboortedatum is verplicht" : undefined,
+		postcode: !g.postcode.trim() ? "Postcode is verplicht" : 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"}`;
+}
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -12,9 +12,14 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as TermsRouteImport } from './routes/terms'
 import { Route as PrivacyRouteImport } from './routes/privacy'
 import { Route as LoginRouteImport } from './routes/login'
+import { Route as DrinkkaartRouteImport } from './routes/drinkkaart'
 import { Route as ContactRouteImport } from './routes/contact'
-import { Route as AdminRouteImport } from './routes/admin'
+import { Route as AccountRouteImport } from './routes/account'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as AdminIndexRouteImport } from './routes/admin/index'
+import { Route as ManageTokenRouteImport } from './routes/manage.$token'
+import { Route as AdminDrinkkaartRouteImport } from './routes/admin/drinkkaart'
+import { Route as ApiWebhookLemonsqueezyRouteImport } from './routes/api/webhook/lemonsqueezy'
 import { Route as ApiRpcSplatRouteImport } from './routes/api/rpc/$'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'

@@ -33,14 +38,19 @@ const LoginRoute = LoginRouteImport.update({
  path: '/login',
  getParentRoute: () => rootRouteImport,
 } as any)
+const DrinkkaartRoute = DrinkkaartRouteImport.update({
+  id: '/drinkkaart',
+  path: '/drinkkaart',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ContactRoute = ContactRouteImport.update({
  id: '/contact',
  path: '/contact',
  getParentRoute: () => rootRouteImport,
 } as any)
-const AdminRoute = AdminRouteImport.update({
-  id: '/admin',
-  path: '/admin',
+const AccountRoute = AccountRouteImport.update({
+  id: '/account',
+  path: '/account',
  getParentRoute: () => rootRouteImport,
 } as any)
 const IndexRoute = IndexRouteImport.update({
@@ -48,6 +58,26 @@ const IndexRoute = IndexRouteImport.update({
  path: '/',
  getParentRoute: () => rootRouteImport,
 } as any)
+const AdminIndexRoute = AdminIndexRouteImport.update({
+  id: '/admin/',
+  path: '/admin/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ManageTokenRoute = ManageTokenRouteImport.update({
+  id: '/manage/$token',
+  path: '/manage/$token',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const AdminDrinkkaartRoute = AdminDrinkkaartRouteImport.update({
+  id: '/admin/drinkkaart',
+  path: '/admin/drinkkaart',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const ApiWebhookLemonsqueezyRoute = ApiWebhookLemonsqueezyRouteImport.update({
+  id: '/api/webhook/lemonsqueezy',
+  path: '/api/webhook/lemonsqueezy',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiRpcSplatRoute = ApiRpcSplatRouteImport.update({
  id: '/api/rpc/$',
  path: '/api/rpc/$',
@@ -61,77 +91,112 @@ const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({

 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
-  '/admin': typeof AdminRoute
+  '/account': typeof AccountRoute
  '/contact': typeof ContactRoute
+  '/drinkkaart': typeof DrinkkaartRoute
  '/login': typeof LoginRoute
  '/privacy': typeof PrivacyRoute
  '/terms': typeof TermsRoute
+  '/admin/drinkkaart': typeof AdminDrinkkaartRoute
+  '/manage/$token': typeof ManageTokenRoute
+  '/admin/': typeof AdminIndexRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
  '/api/rpc/$': typeof ApiRpcSplatRoute
+  '/api/webhook/lemonsqueezy': typeof ApiWebhookLemonsqueezyRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
-  '/admin': typeof AdminRoute
+  '/account': typeof AccountRoute
  '/contact': typeof ContactRoute
+  '/drinkkaart': typeof DrinkkaartRoute
  '/login': typeof LoginRoute
  '/privacy': typeof PrivacyRoute
  '/terms': typeof TermsRoute
+  '/admin/drinkkaart': typeof AdminDrinkkaartRoute
+  '/manage/$token': typeof ManageTokenRoute
+  '/admin': typeof AdminIndexRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
  '/api/rpc/$': typeof ApiRpcSplatRoute
+  '/api/webhook/lemonsqueezy': typeof ApiWebhookLemonsqueezyRoute
 }
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
-  '/admin': typeof AdminRoute
+  '/account': typeof AccountRoute
  '/contact': typeof ContactRoute
+  '/drinkkaart': typeof DrinkkaartRoute
  '/login': typeof LoginRoute
  '/privacy': typeof PrivacyRoute
  '/terms': typeof TermsRoute
+  '/admin/drinkkaart': typeof AdminDrinkkaartRoute
+  '/manage/$token': typeof ManageTokenRoute
+  '/admin/': typeof AdminIndexRoute
  '/api/auth/$': typeof ApiAuthSplatRoute
  '/api/rpc/$': typeof ApiRpcSplatRoute
+  '/api/webhook/lemonsqueezy': typeof ApiWebhookLemonsqueezyRoute
 }
 export interface FileRouteTypes {
  fileRoutesByFullPath: FileRoutesByFullPath
  fullPaths:
    | '/'
-    | '/admin'
+    | '/account'
    | '/contact'
+    | '/drinkkaart'
    | '/login'
    | '/privacy'
    | '/terms'
+    | '/admin/drinkkaart'
+    | '/manage/$token'
+    | '/admin/'
    | '/api/auth/$'
    | '/api/rpc/$'
+    | '/api/webhook/lemonsqueezy'
  fileRoutesByTo: FileRoutesByTo
  to:
    | '/'
-    | '/admin'
+    | '/account'
    | '/contact'
+    | '/drinkkaart'
    | '/login'
    | '/privacy'
    | '/terms'
+    | '/admin/drinkkaart'
+    | '/manage/$token'
+    | '/admin'
    | '/api/auth/$'
    | '/api/rpc/$'
+    | '/api/webhook/lemonsqueezy'
  id:
    | '__root__'
    | '/'
-    | '/admin'
+    | '/account'
    | '/contact'
+    | '/drinkkaart'
    | '/login'
    | '/privacy'
    | '/terms'
+    | '/admin/drinkkaart'
+    | '/manage/$token'
+    | '/admin/'
    | '/api/auth/$'
    | '/api/rpc/$'
+    | '/api/webhook/lemonsqueezy'
  fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
-  AdminRoute: typeof AdminRoute
+  AccountRoute: typeof AccountRoute
  ContactRoute: typeof ContactRoute
+  DrinkkaartRoute: typeof DrinkkaartRoute
  LoginRoute: typeof LoginRoute
  PrivacyRoute: typeof PrivacyRoute
  TermsRoute: typeof TermsRoute
+  AdminDrinkkaartRoute: typeof AdminDrinkkaartRoute
+  ManageTokenRoute: typeof ManageTokenRoute
+  AdminIndexRoute: typeof AdminIndexRoute
  ApiAuthSplatRoute: typeof ApiAuthSplatRoute
  ApiRpcSplatRoute: typeof ApiRpcSplatRoute
+  ApiWebhookLemonsqueezyRoute: typeof ApiWebhookLemonsqueezyRoute
 }

 declare module '@tanstack/react-router' {
@@ -157,6 +222,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof LoginRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/drinkkaart': {
+      id: '/drinkkaart'
+      path: '/drinkkaart'
+      fullPath: '/drinkkaart'
+      preLoaderRoute: typeof DrinkkaartRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/contact': {
      id: '/contact'
      path: '/contact'
@@ -164,11 +236,11 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof ContactRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/admin': {
-      id: '/admin'
-      path: '/admin'
-      fullPath: '/admin'
-      preLoaderRoute: typeof AdminRouteImport
+    '/account': {
+      id: '/account'
+      path: '/account'
+      fullPath: '/account'
+      preLoaderRoute: typeof AccountRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/': {
@@ -178,6 +250,34 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof IndexRouteImport
      parentRoute: typeof rootRouteImport
    }
+    '/admin/': {
+      id: '/admin/'
+      path: '/admin'
+      fullPath: '/admin/'
+      preLoaderRoute: typeof AdminIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/manage/$token': {
+      id: '/manage/$token'
+      path: '/manage/$token'
+      fullPath: '/manage/$token'
+      preLoaderRoute: typeof ManageTokenRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/admin/drinkkaart': {
+      id: '/admin/drinkkaart'
+      path: '/admin/drinkkaart'
+      fullPath: '/admin/drinkkaart'
+      preLoaderRoute: typeof AdminDrinkkaartRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/api/webhook/lemonsqueezy': {
+      id: '/api/webhook/lemonsqueezy'
+      path: '/api/webhook/lemonsqueezy'
+      fullPath: '/api/webhook/lemonsqueezy'
+      preLoaderRoute: typeof ApiWebhookLemonsqueezyRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/api/rpc/$': {
      id: '/api/rpc/$'
      path: '/api/rpc/$'
@@ -197,13 +297,18 @@ declare module '@tanstack/react-router' {

 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
-  AdminRoute: AdminRoute,
+  AccountRoute: AccountRoute,
  ContactRoute: ContactRoute,
+  DrinkkaartRoute: DrinkkaartRoute,
  LoginRoute: LoginRoute,
  PrivacyRoute: PrivacyRoute,
  TermsRoute: TermsRoute,
+  AdminDrinkkaartRoute: AdminDrinkkaartRoute,
+  ManageTokenRoute: ManageTokenRoute,
+  AdminIndexRoute: AdminIndexRoute,
  ApiAuthSplatRoute: ApiAuthSplatRoute,
  ApiRpcSplatRoute: ApiRpcSplatRoute,
+  ApiWebhookLemonsqueezyRoute: ApiWebhookLemonsqueezyRoute,
 }
 export const routeTree = rootRouteImport
  ._addFileChildren(rootRouteChildren)
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -1,5 +1,4 @@
 import type { QueryClient } from "@tanstack/react-query";
-
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
 	createRootRouteWithContext,
@@ -9,15 +8,16 @@ import {
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { CookieConsent } from "@/components/CookieConsent";
+import { SiteHeader } from "@/components/SiteHeader";
 import { Toaster } from "@/components/ui/sonner";
 import type { orpc } from "@/utils/orpc";

 import appCss from "../index.css?url";

 const siteUrl = "https://kunstenkamp.be";
-const siteTitle = "Kunstenkamp Open Mic Night - Ongedesemd Brood";
+const siteTitle = "Kunstenkamp Open Mic Night - Ongedesemd Woord";
 const siteDescription =
-	"Doe mee met de Open Mic Night op 18 april! Een avond vol muziek, theater, dans, woordkunst en meer. Iedereen is welkom - van beginner tot professional.";
+	"Doe mee met de Open Mic Night op 24 april! Een avond vol muziek, theater, dans, woordkunst en meer. Iedereen is welkom - van beginner tot professional.";
 const eventImage = `${siteUrl}/assets/og-image.jpg`;

 export interface RouterAppContext {
@@ -101,7 +101,7 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 			{
 				rel: "icon",
 				type: "image/svg+xml",
-				href: "/favicon.svg",
+				href: "/favicon.png",
 			},
 			{
 				rel: "preconnect",
@@ -158,16 +158,17 @@ function RootDocument() {
 			<head>
 				<HeadContent />
 			</head>
-			<body>
+			<body className="flex min-h-screen flex-col bg-[#214e51]">
 				<a
 					href="#main-content"
 					className="fixed top-0 left-0 z-[100] -translate-y-full bg-[#d82560] px-4 py-2 text-white transition-transform focus:translate-y-0"
 				>
 					Ga naar hoofdinhoud
 				</a>
-				<div id="main-content">
+				<SiteHeader />
+				<main id="main-content" className="flex-1">
 					<Outlet />
-				</div>
+				</main>
 				<Toaster />
 				<CookieConsent />
 				<TanStackRouterDevtools position="bottom-left" />
--- a/apps/web/src/routes/account.tsx
+++ b/apps/web/src/routes/account.tsx
@@ -0,0 +1,402 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import {
+	Calendar,
+	CreditCard,
+	Music,
+	QrCode,
+	Users,
+	Wallet,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { QrCodeDisplay } from "@/components/drinkkaart/QrCodeDisplay";
+import { TopUpHistory } from "@/components/drinkkaart/TopUpHistory";
+import { TopUpModal } from "@/components/drinkkaart/TopUpModal";
+import { TransactionHistory } from "@/components/drinkkaart/TransactionHistory";
+import { authClient } from "@/lib/auth-client";
+import { formatCents } from "@/lib/drinkkaart";
+import { client, orpc } from "@/utils/orpc";
+
+interface AccountSearch {
+	topup?: string;
+	welkom?: string;
+}
+
+export const Route = createFileRoute("/account")({
+	validateSearch: (search: Record<string, unknown>): AccountSearch => ({
+		topup: typeof search.topup === "string" ? search.topup : undefined,
+		welkom: typeof search.welkom === "string" ? search.welkom : undefined,
+	}),
+	component: AccountPage,
+});
+
+function PaymentBadge({ status }: { status: string | null }) {
+	if (status === "paid") {
+		return (
+			<span className="inline-flex items-center gap-1 rounded-full bg-green-500/20 px-2 py-0.5 font-medium text-green-300 text-xs">
+				<svg
+					className="h-3 w-3"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					strokeWidth={2.5}
+					aria-hidden="true"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M5 13l4 4L19 7"
+					/>
+				</svg>
+				Betaald
+			</span>
+		);
+	}
+	if (status === "extra_payment_pending") {
+		return (
+			<span className="inline-flex items-center gap-1 rounded-full bg-yellow-500/20 px-2 py-0.5 font-medium text-xs text-yellow-300">
+				Extra betaling verwacht
+			</span>
+		);
+	}
+	return (
+		<span className="inline-flex items-center gap-1 rounded-full bg-orange-500/20 px-2 py-0.5 font-medium text-orange-300 text-xs">
+			In behandeling
+		</span>
+	);
+}
+
+function AccountPage() {
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const search = Route.useSearch();
+	const [showQr, setShowQr] = useState(false);
+	const [showTopUp, setShowTopUp] = useState(false);
+
+	const sessionQuery = useQuery({
+		queryKey: ["session"],
+		queryFn: () => authClient.getSession(),
+	});
+
+	// Client-side auth check: redirect to login if not authenticated
+	useEffect(() => {
+		if (!sessionQuery.isLoading && !sessionQuery.data?.data?.user) {
+			navigate({ to: "/login" });
+		}
+	}, [sessionQuery.isLoading, sessionQuery.data, navigate]);
+
+	const drinkkaartQuery = useQuery(
+		orpc.drinkkaart.getMyDrinkkaart.queryOptions(),
+	);
+
+	const registrationQuery = useQuery(orpc.getMyRegistrations.queryOptions());
+
+	// Handle topup=success redirect (from Lemon Squeezy returning to /account)
+	useEffect(() => {
+		if (search.topup === "success") {
+			toast.success("Oplading geslaagd! Je saldo is bijgewerkt.");
+			queryClient.invalidateQueries({
+				queryKey: orpc.drinkkaart.getMyDrinkkaart.key(),
+			});
+			const url = new URL(window.location.href);
+			url.searchParams.delete("topup");
+			window.history.replaceState({}, "", url.toString());
+		}
+	}, [search.topup, queryClient]);
+
+	// Silent background call to claim any pending registration fee credit.
+	// This catches cases where: webhook didn't fire/failed, or user signed up after paying.
+	// No UI feedback needed — if there's nothing to claim, it does nothing.
+	useEffect(() => {
+		client.claimRegistrationCredit().catch((err) => {
+			console.error("claimRegistrationCredit failed:", err);
+		});
+	}, []);
+
+	// Welcome toast after fresh signup
+	useEffect(() => {
+		if (search.welkom === "1") {
+			toast.success("Welkom! Je account is aangemaakt.");
+			const url = new URL(window.location.href);
+			url.searchParams.delete("welkom");
+			window.history.replaceState({}, "", url.toString());
+		}
+	}, [search.welkom]);
+
+	const user = sessionQuery.data?.data?.user as
+		| { name?: string; email?: string }
+		| undefined;
+
+	const registrations = registrationQuery.data ?? [];
+	const drinkkaart = drinkkaartQuery.data;
+
+	const isLoading =
+		sessionQuery.isLoading ||
+		drinkkaartQuery.isLoading ||
+		registrationQuery.isLoading;
+
+	if (isLoading) {
+		return (
+			<div className="flex min-h-screen items-center justify-center bg-[#214e51]">
+				<div className="h-10 w-10 animate-spin rounded-full border-2 border-white/20 border-t-white" />
+			</div>
+		);
+	}
+
+	return (
+		<div>
+			<main className="mx-auto max-w-5xl px-4 py-12">
+				{/* Page header */}
+				<div className="mb-8">
+					<h1 className="mb-1 font-['Intro',sans-serif] text-4xl text-white">
+						Mijn Account
+					</h1>
+					<p className="text-white/50">
+						{user?.name && (
+							<span className="mr-2 font-medium text-white/70">
+								{user.name}
+							</span>
+						)}
+						{user?.email}
+					</p>
+				</div>
+
+				<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+					{/* ── Left column: Registration ── */}
+					<section>
+						<h2 className="mb-3 flex items-center gap-2 font-['Intro',sans-serif] text-lg text-white/80">
+							<Calendar className="h-4 w-4 shrink-0 text-white/40" />
+							Mijn Inschrijving
+						</h2>
+
+						{registrations.length > 0 ? (
+							<div className="flex flex-col gap-4">
+								{registrations.map((registration) => (
+									<div
+										key={registration.id}
+										className="rounded-2xl border border-white/10 bg-white/5 p-6"
+									>
+										{/* Type badge */}
+										<div className="mb-4 flex items-center justify-between">
+											<div className="flex items-center gap-2">
+												{registration.registrationType === "performer" ? (
+													<span className="inline-flex items-center gap-1.5 rounded-full bg-amber-500/20 px-3 py-1 font-medium text-amber-300 text-sm">
+														<Music className="h-3.5 w-3.5" />
+														Artiest
+													</span>
+												) : (
+													<span className="inline-flex items-center gap-1.5 rounded-full bg-teal-500/20 px-3 py-1 font-medium text-sm text-teal-300">
+														<Users className="h-3.5 w-3.5" />
+														Bezoeker
+													</span>
+												)}
+											</div>
+											{(registration.registrationType !== "performer" ||
+												(registration.giftAmount ?? 0) > 0) && (
+												<PaymentBadge status={registration.paymentStatus} />
+											)}
+										</div>
+
+										{/* Name */}
+										<p className="mb-1 font-medium text-lg text-white">
+											{registration.firstName} {registration.lastName}
+										</p>
+
+										{/* Art form (performer only) */}
+										{registration.registrationType === "performer" &&
+											registration.artForm && (
+												<p className="mb-1 text-sm text-white/60">
+													Kunstvorm:{" "}
+													<span className="text-white/80">
+														{registration.artForm}
+													</span>
+												</p>
+											)}
+
+										{/* Guests (watcher only) */}
+										{registration.registrationType === "watcher" &&
+											registration.guests.length > 0 && (
+												<p className="mb-1 text-sm text-white/60">
+													{registration.guests.length + 1} personen (jij +{" "}
+													{registration.guests.length} gast
+													{registration.guests.length > 1 ? "en" : ""})
+												</p>
+											)}
+
+										{/* Drink card value */}
+										{registration.registrationType === "watcher" &&
+											(registration.drinkCardValue ?? 0) > 0 && (
+												<p className="mb-1 text-sm text-white/60">
+													Drinkkaart:{" "}
+													<span className="text-white/80">
+														€{registration.drinkCardValue}
+													</span>
+												</p>
+											)}
+
+										{/* Gift */}
+										{(registration.giftAmount ?? 0) > 0 && (
+											<p className="mb-1 text-sm text-white/60">
+												Gift:{" "}
+												<span className="text-white/80">
+													€{(registration.giftAmount ?? 0) / 100}
+												</span>
+											</p>
+										)}
+
+										{/* Date */}
+										<p className="mt-3 text-white/40 text-xs">
+											Ingeschreven op{" "}
+											{new Date(registration.createdAt).toLocaleDateString(
+												"nl-BE",
+												{
+													day: "numeric",
+													month: "long",
+													year: "numeric",
+												},
+											)}
+										</p>
+
+										{/* Action */}
+										{registration.managementToken && (
+											<div className="mt-5">
+												<Link
+													to="/manage/$token"
+													params={{ token: registration.managementToken }}
+													className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20"
+												>
+													Beheer inschrijving
+													<svg
+														className="h-3.5 w-3.5"
+														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>
+												</Link>
+											</div>
+										)}
+									</div>
+								))}
+							</div>
+						) : (
+							<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+								<p className="mb-3 text-sm text-white/60">
+									We vonden geen actieve inschrijving voor dit e-mailadres.
+								</p>
+								<a
+									href="/#registration"
+									className="inline-flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white transition-colors hover:bg-white/20"
+								>
+									Inschrijven voor het evenement
+									<svg
+										className="h-3.5 w-3.5"
+										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>
+								</a>
+							</div>
+						)}
+					</section>
+
+					{/* ── Right column: Drinkkaart ── */}
+					<section>
+						<h2 className="mb-3 flex items-center gap-2 font-['Intro',sans-serif] text-lg text-white/80">
+							<CreditCard className="h-4 w-4 shrink-0 text-white/40" />
+							Mijn Drinkkaart
+						</h2>
+
+						{/* Balance card */}
+						<div className="mb-4 rounded-2xl border border-white/10 bg-white/5 p-6">
+							<p className="mb-1 text-sm text-white/50">Huidig saldo</p>
+							<p className="mb-4 font-['Intro',sans-serif] text-5xl text-white">
+								{drinkkaart ? formatCents(drinkkaart.balance) : "—"}
+							</p>
+
+							<div className="flex flex-wrap gap-3">
+								<button
+									type="button"
+									onClick={() => setShowQr((v) => !v)}
+									className="inline-flex items-center gap-2 rounded-lg border border-white/30 bg-transparent px-4 py-2 text-sm text-white transition-colors hover:bg-white/10"
+								>
+									<QrCode className="h-4 w-4" />
+									{showQr ? "Verberg QR-code" : "Toon QR-code"}
+								</button>
+								<button
+									type="button"
+									onClick={() => setShowTopUp(true)}
+									className="inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2 font-semibold text-[#214e51] text-sm transition-colors hover:bg-white/90"
+								>
+									<Wallet className="h-4 w-4" />
+									Opladen
+								</button>
+							</div>
+						</div>
+
+						{/* QR code */}
+						{showQr && (
+							<div className="mb-4 flex justify-center rounded-2xl border border-white/10 bg-white/5 p-6">
+								<QrCodeDisplay />
+							</div>
+						)}
+
+						{/* Top-up history */}
+						<section className="mb-6">
+							<h3 className="mb-2 font-medium text-sm text-white/50 uppercase tracking-wider">
+								Opladingen
+							</h3>
+							{drinkkaart ? (
+								<TopUpHistory
+									topups={
+										drinkkaart.topups as Parameters<
+											typeof TopUpHistory
+										>[0]["topups"]
+									}
+								/>
+							) : (
+								<p className="text-sm text-white/40">Laden...</p>
+							)}
+						</section>
+
+						{/* Transaction history */}
+						<section>
+							<h3 className="mb-2 font-medium text-sm text-white/50 uppercase tracking-wider">
+								Transacties
+							</h3>
+							{drinkkaart ? (
+								<TransactionHistory
+									transactions={
+										drinkkaart.transactions as Parameters<
+											typeof TransactionHistory
+										>[0]["transactions"]
+									}
+								/>
+							) : (
+								<p className="text-sm text-white/40">Laden...</p>
+							)}
+						</section>
+					</section>
+				</div>
+			</main>
+
+			{showTopUp && <TopUpModal onClose={() => setShowTopUp(false)} />}
+		</div>
+	);
+}
--- a/apps/web/src/routes/admin.tsx
+++ b/apps/web/src/routes/admin.tsx
@@ -1,461 +0,0 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
-import {
-	createFileRoute,
-	Link,
-	redirect,
-	useNavigate,
-} from "@tanstack/react-router";
-import { Check, Download, LogOut, Search, Users, X } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { authClient } from "@/lib/auth-client";
-import { orpc } from "@/utils/orpc";
-
-export const Route = createFileRoute("/admin")({
-	component: AdminPage,
-	beforeLoad: async () => {
-		const session = await authClient.getSession();
-		if (!session.data?.user) {
-			throw redirect({ to: "/login" });
-		}
-		const user = session.data.user as { role?: string };
-		if (user.role !== "admin") {
-			throw redirect({ to: "/login" });
-		}
-	},
-});
-
-function AdminPage() {
-	const navigate = useNavigate();
-	const [search, setSearch] = useState("");
-	const [artForm, setArtForm] = useState("");
-	const [fromDate, setFromDate] = useState("");
-	const [toDate, setToDate] = useState("");
-	const [page, setPage] = useState(1);
-	const pageSize = 20;
-
-	const statsQuery = useQuery(orpc.getRegistrationStats.queryOptions());
-
-	const registrationsQuery = useQuery(
-		orpc.getRegistrations.queryOptions({
-			input: {
-				search: search || undefined,
-				artForm: artForm || undefined,
-				fromDate: fromDate || undefined,
-				toDate: toDate || undefined,
-				page,
-				pageSize,
-			},
-		}),
-	);
-
-	const adminRequestsQuery = useQuery(orpc.getAdminRequests.queryOptions());
-
-	const exportMutation = useMutation({
-		...orpc.exportRegistrations.mutationOptions(),
-		onSuccess: (data: { csv: string; filename: string }) => {
-			const blob = new Blob([data.csv], { type: "text/csv" });
-			const url = window.URL.createObjectURL(blob);
-			const a = document.createElement("a");
-			a.href = url;
-			a.download = data.filename;
-			document.body.appendChild(a);
-			a.click();
-			document.body.removeChild(a);
-			window.URL.revokeObjectURL(url);
-		},
-	});
-
-	const approveRequestMutation = useMutation({
-		...orpc.approveAdminRequest.mutationOptions(),
-		onSuccess: () => {
-			toast.success("Admin toegang goedgekeurd");
-			adminRequestsQuery.refetch();
-		},
-		onError: (error) => {
-			toast.error(`Fout: ${error.message}`);
-		},
-	});
-
-	const rejectRequestMutation = useMutation({
-		...orpc.rejectAdminRequest.mutationOptions(),
-		onSuccess: () => {
-			toast.success("Admin toegang geweigerd");
-			adminRequestsQuery.refetch();
-		},
-		onError: (error) => {
-			toast.error(`Fout: ${error.message}`);
-		},
-	});
-
-	const handleSignOut = async () => {
-		await authClient.signOut();
-		navigate({ to: "/" });
-	};
-
-	const handleExport = () => {
-		exportMutation.mutate(undefined);
-	};
-
-	const handleApprove = (requestId: string) => {
-		approveRequestMutation.mutate({ requestId });
-	};
-
-	const handleReject = (requestId: string) => {
-		rejectRequestMutation.mutate({ requestId });
-	};
-
-	const stats = statsQuery.data;
-	const registrations = registrationsQuery.data?.data ?? [];
-	const pagination = registrationsQuery.data?.pagination;
-	const adminRequests = adminRequestsQuery.data ?? [];
-	const pendingRequests = adminRequests.filter((r) => r.status === "pending");
-
-	return (
-		<div className="min-h-screen bg-[#214e51]">
-			{/* Header */}
-			<header className="border-white/10 border-b bg-[#214e51]/95 px-8 py-6">
-				<div className="mx-auto flex max-w-7xl items-center justify-between">
-					<div className="flex items-center gap-4">
-						<Link to="/" className="text-white hover:opacity-80">
-							← Terug naar website
-						</Link>
-						<h1 className="font-['Intro',sans-serif] text-3xl text-white">
-							Admin Dashboard
-						</h1>
-					</div>
-					<Button
-						onClick={handleSignOut}
-						variant="outline"
-						className="border-white/30 bg-transparent text-white hover:bg-white/10"
-					>
-						<LogOut className="mr-2 h-4 w-4" />
-						Uitloggen
-					</Button>
-				</div>
-			</header>
-
-			{/* Main Content */}
-			<main className="mx-auto max-w-7xl p-8">
-				{/* Pending Admin Requests */}
-				{pendingRequests.length > 0 && (
-					<Card className="mb-6 border-yellow-500/30 bg-yellow-500/10">
-						<CardHeader>
-							<CardTitle className="font-['Intro',sans-serif] text-xl text-yellow-200">
-								Openstaande Admin Aanvragen ({pendingRequests.length})
-							</CardTitle>
-							<CardDescription className="text-yellow-200/60">
-								Gebruikers die admin toegang hebben aangevraagd
-							</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<div className="space-y-3">
-								{pendingRequests.map((request) => (
-									<div
-										key={request.id}
-										className="flex items-center justify-between rounded-lg border border-yellow-500/20 bg-yellow-500/5 p-4"
-									>
-										<div>
-											<p className="font-medium text-white">
-												{request.userName}
-											</p>
-											<p className="text-sm text-white/60">
-												{request.userEmail}
-											</p>
-											<p className="text-white/40 text-xs">
-												Aangevraagd:{" "}
-												{new Date(request.requestedAt).toLocaleDateString(
-													"nl-BE",
-												)}
-											</p>
-										</div>
-										<div className="flex gap-2">
-											<Button
-												onClick={() => handleApprove(request.id)}
-												disabled={approveRequestMutation.isPending}
-												size="sm"
-												className="bg-green-600 text-white hover:bg-green-700"
-											>
-												<Check className="mr-1 h-4 w-4" />
-												Goedkeuren
-											</Button>
-											<Button
-												onClick={() => handleReject(request.id)}
-												disabled={rejectRequestMutation.isPending}
-												size="sm"
-												variant="outline"
-												className="border-red-500/30 text-red-400 hover:bg-red-500/10"
-											>
-												<X className="mr-1 h-4 w-4" />
-												Weigeren
-											</Button>
-										</div>
-									</div>
-								))}
-							</div>
-						</CardContent>
-					</Card>
-				)}
-
-				{/* Stats Cards */}
-				<div className="mb-8 grid grid-cols-1 gap-6 md:grid-cols-3">
-					<Card className="border-white/10 bg-white/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-white/60">
-								Totaal inschrijvingen
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-4xl text-white">
-								{stats?.total ?? 0}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<Users className="h-5 w-5 text-white/40" />
-						</CardContent>
-					</Card>
-
-					<Card className="border-white/10 bg-white/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-white/60">
-								Vandaag ingeschreven
-							</CardDescription>
-							<CardTitle className="font-['Intro',sans-serif] text-4xl text-white">
-								{stats?.today ?? 0}
-							</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<span className="text-sm text-white/40">
-								Nieuwe registraties vandaag
-							</span>
-						</CardContent>
-					</Card>
-
-					<Card className="border-white/10 bg-white/5">
-						<CardHeader className="pb-2">
-							<CardDescription className="text-white/60">
-								Per kunstvorm
-							</CardDescription>
-							<div className="mt-2 space-y-1">
-								{stats?.byArtForm.slice(0, 5).map((item) => (
-									<div
-										key={item.artForm}
-										className="flex items-center justify-between text-sm"
-									>
-										<span className="text-white/80">{item.artForm}</span>
-										<span className="text-white">{item.count}</span>
-									</div>
-								))}
-							</div>
-						</CardHeader>
-					</Card>
-				</div>
-
-				{/* Filters */}
-				<Card className="mb-6 border-white/10 bg-white/5">
-					<CardHeader>
-						<CardTitle className="font-['Intro',sans-serif] text-white text-xl">
-							Filters
-						</CardTitle>
-					</CardHeader>
-					<CardContent>
-						<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
-							<div>
-								<label
-									htmlFor="search"
-									className="mb-2 block text-sm text-white/60"
-								>
-									Zoeken
-								</label>
-								<div className="relative">
-									<Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-white/40" />
-									<Input
-										id="search"
-										placeholder="Naam of email..."
-										value={search}
-										onChange={(e) => setSearch(e.target.value)}
-										className="border-white/20 bg-white/10 pl-10 text-white placeholder:text-white/40"
-									/>
-								</div>
-							</div>
-
-							<div>
-								<label
-									htmlFor="artForm"
-									className="mb-2 block text-sm text-white/60"
-								>
-									Kunstvorm
-								</label>
-								<Input
-									id="artForm"
-									placeholder="Filter op kunstvorm..."
-									value={artForm}
-									onChange={(e) => setArtForm(e.target.value)}
-									className="border-white/20 bg-white/10 text-white placeholder:text-white/40"
-								/>
-							</div>
-
-							<div>
-								<label
-									htmlFor="fromDate"
-									className="mb-2 block text-sm text-white/60"
-								>
-									Vanaf
-								</label>
-								<Input
-									id="fromDate"
-									type="date"
-									value={fromDate}
-									onChange={(e) => setFromDate(e.target.value)}
-									className="border-white/20 bg-white/10 text-white [color-scheme:dark]"
-								/>
-							</div>
-
-							<div>
-								<label
-									htmlFor="toDate"
-									className="mb-2 block text-sm text-white/60"
-								>
-									Tot
-								</label>
-								<Input
-									id="toDate"
-									type="date"
-									value={toDate}
-									onChange={(e) => setToDate(e.target.value)}
-									className="border-white/20 bg-white/10 text-white [color-scheme:dark]"
-								/>
-							</div>
-						</div>
-					</CardContent>
-				</Card>
-
-				{/* Export Button */}
-				<div className="mb-6 flex items-center justify-between">
-					<p className="text-white/60">
-						{pagination?.total ?? 0} registraties gevonden
-					</p>
-					<Button
-						onClick={handleExport}
-						disabled={exportMutation.isPending}
-						className="bg-white text-[#214e51] hover:bg-white/90"
-					>
-						<Download className="mr-2 h-4 w-4" />
-						{exportMutation.isPending ? "Exporteren..." : "Exporteer CSV"}
-					</Button>
-				</div>
-
-				{/* Registrations Table */}
-				<Card className="border-white/10 bg-white/5">
-					<CardContent className="p-0">
-						<div className="overflow-x-auto">
-							<table className="w-full">
-								<thead>
-									<tr className="border-white/10 border-b">
-										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
-											Naam
-										</th>
-										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
-											Email
-										</th>
-										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
-											Telefoon
-										</th>
-										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
-											Kunstvorm
-										</th>
-										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
-											Ervaring
-										</th>
-										<th className="px-6 py-4 text-left font-medium text-sm text-white/60">
-											Datum
-										</th>
-									</tr>
-								</thead>
-								<tbody>
-									{registrationsQuery.isLoading ? (
-										<tr>
-											<td
-												colSpan={6}
-												className="px-6 py-8 text-center text-white/60"
-											>
-												Laden...
-											</td>
-										</tr>
-									) : registrations.length === 0 ? (
-										<tr>
-											<td
-												colSpan={6}
-												className="px-6 py-8 text-center text-white/60"
-											>
-												Geen registraties gevonden
-											</td>
-										</tr>
-									) : (
-										registrations.map((reg) => (
-											<tr
-												key={reg.id}
-												className="border-white/5 border-b hover:bg-white/5"
-											>
-												<td className="px-6 py-4 text-white">
-													{reg.firstName} {reg.lastName}
-												</td>
-												<td className="px-6 py-4 text-white/80">{reg.email}</td>
-												<td className="px-6 py-4 text-white/80">
-													{reg.phone || "-"}
-												</td>
-												<td className="px-6 py-4 text-white/80">
-													{reg.artForm}
-												</td>
-												<td className="px-6 py-4 text-white/80">
-													{reg.experience || "-"}
-												</td>
-												<td className="px-6 py-4 text-white/60">
-													{new Date(reg.createdAt).toLocaleDateString("nl-BE")}
-												</td>
-											</tr>
-										))
-									)}
-								</tbody>
-							</table>
-						</div>
-					</CardContent>
-				</Card>
-
-				{/* Pagination */}
-				{pagination && pagination.totalPages > 1 && (
-					<div className="mt-6 flex items-center justify-center gap-2">
-						<Button
-							onClick={() => setPage((p) => Math.max(1, p - 1))}
-							disabled={page === 1}
-							variant="outline"
-							className="border-white/20 bg-transparent text-white hover:bg-white/10 disabled:opacity-50"
-						>
-							Vorige
-						</Button>
-						<span className="mx-4 text-white">
-							Pagina {page} van {pagination.totalPages}
-						</span>
-						<Button
-							onClick={() =>
-								setPage((p) => Math.min(pagination.totalPages, p + 1))
-							}
-							disabled={page === pagination.totalPages}
-							variant="outline"
-							className="border-white/20 bg-transparent text-white hover:bg-white/10 disabled:opacity-50"
-						>
-							Volgende
-						</Button>
-					</div>
-				)}
-			</main>
-		</div>
-	);
-}
--- a/apps/web/src/routes/admin/drinkkaart.tsx
+++ b/apps/web/src/routes/admin/drinkkaart.tsx
@@ -0,0 +1,236 @@
+import { useMutation } from "@tanstack/react-query";
+import { createFileRoute, Link, redirect } from "@tanstack/react-router";
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { AdminTransactionLog } from "@/components/drinkkaart/AdminTransactionLog";
+import { DeductionPanel } from "@/components/drinkkaart/DeductionPanel";
+import { ManualCreditForm } from "@/components/drinkkaart/ManualCreditForm";
+import { QrScanner } from "@/components/drinkkaart/QrScanner";
+import { ScanResultCard } from "@/components/drinkkaart/ScanResultCard";
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
+import { formatCents } from "@/lib/drinkkaart";
+import { orpc } from "@/utils/orpc";
+
+export const Route = createFileRoute("/admin/drinkkaart")({
+	component: AdminDrinkkaartPage,
+	beforeLoad: async () => {
+		const session = await authClient.getSession();
+		if (!session.data?.user) {
+			throw redirect({ to: "/login" });
+		}
+		const user = session.data.user as { role?: string };
+		if (user.role !== "admin") {
+			throw redirect({ to: "/" });
+		}
+	},
+});
+
+type ScanState =
+	| { step: "idle" }
+	| { step: "scanning" }
+	| { step: "resolving" }
+	| {
+			step: "resolved";
+			drinkkaartId: string;
+			userId: string;
+			userName: string;
+			userEmail: string;
+			balance: number;
+	  }
+	| {
+			step: "success";
+			transactionId: string;
+			userName: string;
+			balanceAfter: number;
+	  }
+	| { step: "error"; message: string; retryable: boolean }
+	| { step: "manual_credit" };
+
+function AdminDrinkkaartPage() {
+	const [scanState, setScanState] = useState<ScanState>({ step: "idle" });
+
+	const resolveQrMutation = useMutation(
+		orpc.drinkkaart.resolveQrToken.mutationOptions(),
+	);
+
+	const handleScan = useCallback(
+		(token: string) => {
+			setScanState({ step: "resolving" });
+			resolveQrMutation.mutate(
+				{ token },
+				{
+					onSuccess: (data) => {
+						setScanState({
+							step: "resolved",
+							drinkkaartId: data.drinkkaartId,
+							userId: data.userId,
+							userName: data.userName,
+							userEmail: data.userEmail,
+							balance: data.balance,
+						});
+					},
+					onError: (err: Error) => {
+						setScanState({
+							step: "error",
+							message: err.message ?? "Ongeldig QR-token",
+							retryable: true,
+						});
+					},
+				},
+			);
+		},
+		[resolveQrMutation],
+	);
+
+	const handleDeductSuccess = (transactionId: string, balanceAfter: number) => {
+		const userName =
+			scanState.step === "resolved" ? scanState.userName : "Gebruiker";
+		const amountDeducted =
+			scanState.step === "resolved"
+				? scanState.balance - balanceAfter
+				: undefined;
+
+		toast.success(
+			`Afschrijving verwerkt${amountDeducted !== undefined ? ` — ${formatCents(amountDeducted)}` : ""}`,
+		);
+		setScanState({ step: "success", transactionId, userName, balanceAfter });
+	};
+
+	return (
+		<div>
+			{/* Header */}
+			<header className="border-white/10 border-b bg-[#214e51]/95 px-4 py-4 sm:px-6 sm:py-5">
+				<div className="mx-auto flex max-w-2xl items-center gap-3 sm:gap-4">
+					<Link to="/admin" className="text-sm text-white/60 hover:text-white">
+						← Admin
+					</Link>
+					<h1 className="font-['Intro',sans-serif] text-white text-xl sm:text-2xl">
+						Drinkkaart Beheer
+					</h1>
+				</div>
+			</header>
+
+			<main className="mx-auto max-w-2xl space-y-6 px-4 py-4 sm:space-y-8 sm:px-6 sm:py-8">
+				{/* Scan / State machine */}
+				<div className="rounded-2xl border border-white/10 bg-white/5 p-6">
+					{scanState.step === "idle" && (
+						<div className="space-y-4">
+							<p className="text-sm text-white/60">
+								Scan een QR-code of laad handmatig op.
+							</p>
+							<div className="flex flex-col gap-3 sm:flex-row">
+								<Button
+									onClick={() => setScanState({ step: "scanning" })}
+									className="flex-1 bg-white font-semibold text-[#214e51] hover:bg-white/90"
+								>
+									Scan QR
+								</Button>
+								<Button
+									onClick={() => setScanState({ step: "manual_credit" })}
+									variant="outline"
+									className="flex-1 border-white/30 bg-transparent text-white hover:bg-white/10"
+								>
+									Handmatig opladen
+								</Button>
+							</div>
+						</div>
+					)}
+
+					{scanState.step === "scanning" && (
+						<QrScanner
+							onScan={handleScan}
+							onCancel={() => setScanState({ step: "idle" })}
+						/>
+					)}
+
+					{scanState.step === "resolving" && (
+						<div className="py-8 text-center">
+							<p className="text-white/60">QR-code wordt gecontroleerd...</p>
+						</div>
+					)}
+
+					{scanState.step === "resolved" && (
+						<div className="space-y-5">
+							<ScanResultCard
+								userName={scanState.userName}
+								userEmail={scanState.userEmail}
+								balance={scanState.balance}
+							/>
+							<DeductionPanel
+								drinkkaartId={scanState.drinkkaartId}
+								userName={scanState.userName}
+								userEmail={scanState.userEmail}
+								balance={scanState.balance}
+								onSuccess={handleDeductSuccess}
+								onCancel={() => setScanState({ step: "idle" })}
+							/>
+						</div>
+					)}
+
+					{scanState.step === "success" && (
+						<div className="space-y-5">
+							<div className="rounded-xl border border-green-400/20 bg-green-400/5 p-5 text-center">
+								<p className="font-semibold text-green-300 text-lg">
+									Betaling verwerkt
+								</p>
+								<p className="mt-1 text-sm text-white/60">
+									{scanState.userName} — nieuw saldo:{" "}
+									<strong className="text-white">
+										{formatCents(scanState.balanceAfter)}
+									</strong>
+								</p>
+							</div>
+							<Button
+								onClick={() => setScanState({ step: "idle" })}
+								className="w-full bg-white font-semibold text-[#214e51] hover:bg-white/90"
+							>
+								Volgende scan
+							</Button>
+						</div>
+					)}
+
+					{scanState.step === "error" && (
+						<div className="space-y-4">
+							<div className="rounded-xl border border-red-400/20 bg-red-400/5 p-4">
+								<p className="font-medium text-red-300">Fout</p>
+								<p className="mt-1 text-sm text-white/60">
+									{scanState.message}
+								</p>
+							</div>
+							<div className="flex gap-3">
+								{scanState.retryable && (
+									<Button
+										onClick={() => setScanState({ step: "scanning" })}
+										className="flex-1 bg-white font-semibold text-[#214e51] hover:bg-white/90"
+									>
+										Opnieuw proberen
+									</Button>
+								)}
+								<Button
+									onClick={() => setScanState({ step: "idle" })}
+									variant="outline"
+									className="flex-1 border-white/20 bg-transparent text-white hover:bg-white/10"
+								>
+									Annuleren
+								</Button>
+							</div>
+						</div>
+					)}
+
+					{scanState.step === "manual_credit" && (
+						<ManualCreditForm onDone={() => setScanState({ step: "idle" })} />
+					)}
+				</div>
+
+				{/* Transaction log */}
+				<div>
+					<h2 className="mb-4 font-['Intro',sans-serif] text-white text-xl">
+						Transactieoverzicht
+					</h2>
+					<AdminTransactionLog />
+				</div>
+			</main>
+		</div>
+	);
+}
--- a/apps/web/src/routes/admin/index.tsx
+++ b/apps/web/src/routes/admin/index.tsx
--- a/apps/web/src/routes/api/webhook/lemonsqueezy.ts
+++ b/apps/web/src/routes/api/webhook/lemonsqueezy.ts
@@ -0,0 +1,259 @@
+import { createHmac, randomUUID } from "node:crypto";
+import { creditRegistrationToAccount } from "@kk/api/routers/index";
+import { db } from "@kk/db";
+import { drinkkaart, drinkkaartTopup, registration } from "@kk/db/schema";
+import { user } from "@kk/db/schema/auth";
+import { env } from "@kk/env/server";
+import { createFileRoute } from "@tanstack/react-router";
+import { and, eq } from "drizzle-orm";
+
+// LemonSqueezy webhook payload types (order_created event)
+interface LemonSqueezyOrderCreatedPayload {
+	meta: {
+		event_name: string;
+		custom_data?: {
+			type?: string;
+			registration_token?: string;
+			drinkkaartId?: string;
+			userId?: string;
+		};
+	};
+	data: {
+		id: string;
+		attributes: {
+			status: string;
+			customer_id: number;
+			total: number; // amount in cents
+		};
+	};
+}
+
+function verifyWebhookSignature(
+	payload: string,
+	signature: string,
+	secret: string,
+): boolean {
+	const hmac = createHmac("sha256", secret);
+	hmac.update(payload);
+	const digest = hmac.digest("hex");
+	return signature === digest;
+}
+
+async function handleWebhook({ request }: { request: Request }) {
+	if (!env.LEMON_SQUEEZY_WEBHOOK_SECRET) {
+		console.error("LEMON_SQUEEZY_WEBHOOK_SECRET not configured");
+		return new Response("Payment provider not configured", { status: 500 });
+	}
+
+	const payload = await request.text();
+	const signature = request.headers.get("X-Signature");
+
+	if (!signature) {
+		return new Response("Missing signature", { status: 401 });
+	}
+
+	if (
+		!verifyWebhookSignature(
+			payload,
+			signature,
+			env.LEMON_SQUEEZY_WEBHOOK_SECRET,
+		)
+	) {
+		return new Response("Invalid signature", { status: 401 });
+	}
+
+	let event: LemonSqueezyOrderCreatedPayload;
+	try {
+		event = JSON.parse(payload) as LemonSqueezyOrderCreatedPayload;
+	} catch {
+		return new Response("Invalid JSON", { status: 400 });
+	}
+
+	// Only handle order_created events
+	if (event.meta.event_name !== "order_created") {
+		return new Response("Event ignored", { status: 200 });
+	}
+
+	const orderId = event.data.id;
+	const customerId = String(event.data.attributes.customer_id);
+	const amountCents = event.data.attributes.total;
+	const customData = event.meta.custom_data;
+
+	try {
+		// -------------------------------------------------------------------------
+		// Branch: Drinkkaart top-up
+		// -------------------------------------------------------------------------
+		if (customData?.type === "drinkkaart_topup") {
+			const { drinkkaartId, userId } = customData;
+			if (!drinkkaartId || !userId) {
+				console.error(
+					"Missing drinkkaartId or userId in drinkkaart_topup custom_data",
+				);
+				return new Response("Missing drinkkaart data", { status: 400 });
+			}
+
+			// Idempotency: skip if already processed
+			const existing = await db
+				.select({ id: drinkkaartTopup.id })
+				.from(drinkkaartTopup)
+				.where(eq(drinkkaartTopup.lemonsqueezyOrderId, orderId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (existing) {
+				console.log(`Drinkkaart topup already processed for order ${orderId}`);
+				return new Response("OK", { status: 200 });
+			}
+
+			const card = await db
+				.select()
+				.from(drinkkaart)
+				.where(eq(drinkkaart.id, drinkkaartId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!card) {
+				console.error(`Drinkkaart not found: ${drinkkaartId}`);
+				return new Response("Not found", { status: 404 });
+			}
+
+			const balanceBefore = card.balance;
+			const balanceAfter = balanceBefore + amountCents;
+
+			// Optimistic lock update
+			const result = await db
+				.update(drinkkaart)
+				.set({
+					balance: balanceAfter,
+					version: card.version + 1,
+					updatedAt: new Date(),
+				})
+				.where(
+					and(
+						eq(drinkkaart.id, drinkkaartId),
+						eq(drinkkaart.version, card.version),
+					),
+				);
+
+			if (result.rowsAffected === 0) {
+				// Return 500 so LemonSqueezy retries; idempotency check prevents double-credit
+				console.error(
+					`Drinkkaart optimistic lock conflict for ${drinkkaartId}`,
+				);
+				return new Response("Conflict — please retry", { status: 500 });
+			}
+
+			await db.insert(drinkkaartTopup).values({
+				id: randomUUID(),
+				drinkkaartId,
+				userId,
+				amountCents,
+				balanceBefore,
+				balanceAfter,
+				type: "payment",
+				lemonsqueezyOrderId: orderId,
+				adminId: null,
+				reason: null,
+				paidAt: new Date(),
+			});
+
+			console.log(
+				`Drinkkaart topup successful: drinkkaart=${drinkkaartId}, amount=${amountCents}c, order=${orderId}`,
+			);
+
+			return new Response("OK", { status: 200 });
+		}
+
+		// -------------------------------------------------------------------------
+		// Branch: Registration payment
+		// -------------------------------------------------------------------------
+		const registrationToken = customData?.registration_token;
+		if (!registrationToken) {
+			console.error("No registration token in order custom_data");
+			return new Response("Missing registration token", { status: 400 });
+		}
+
+		// Fetch the registration row
+		const regRow = await db
+			.select()
+			.from(registration)
+			.where(eq(registration.managementToken, registrationToken))
+			.limit(1)
+			.then((r) => r[0]);
+
+		if (!regRow) {
+			console.error(`Registration not found for token ${registrationToken}`);
+			return new Response("Registration not found", { status: 404 });
+		}
+
+		// Mark the registration as paid
+		await db
+			.update(registration)
+			.set({
+				paymentStatus: "paid",
+				paymentAmount: 0,
+				lemonsqueezyOrderId: orderId,
+				lemonsqueezyCustomerId: customerId,
+				paidAt: new Date(),
+			})
+			.where(eq(registration.managementToken, registrationToken));
+
+		console.log(
+			`Payment successful for registration ${registrationToken}, order ${orderId}`,
+		);
+
+		// If this is a watcher with a drink card value, try to credit their
+		// drinkkaart immediately — but only if they already have an account.
+		if (
+			regRow.registrationType === "watcher" &&
+			(regRow.drinkCardValue ?? 0) > 0
+		) {
+			const accountUser = await db
+				.select({ id: user.id })
+				.from(user)
+				.where(eq(user.email, regRow.email))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (accountUser) {
+				const creditResult = await creditRegistrationToAccount(
+					regRow.email,
+					accountUser.id,
+				).catch((err) => {
+					console.error(
+						`Failed to credit drinkkaart for ${regRow.email} after registration payment:`,
+						err,
+					);
+					return null;
+				});
+
+				if (creditResult?.credited) {
+					console.log(
+						`Drinkkaart credited ${creditResult.amountCents}c for user ${accountUser.id} (registration ${registrationToken})`,
+					);
+				} else if (creditResult) {
+					console.log(
+						`Drinkkaart credit skipped for ${regRow.email}: ${creditResult.status}`,
+					);
+				}
+			} else {
+				console.log(
+					`No account for ${regRow.email} — drinkkaart credit deferred until signup`,
+				);
+			}
+		}
+
+		return new Response("OK", { status: 200 });
+	} catch (error) {
+		console.error("Webhook processing error:", error);
+		return new Response("Internal error", { status: 500 });
+	}
+}
+
+export const Route = createFileRoute("/api/webhook/lemonsqueezy")({
+	server: {
+		handlers: {
+			POST: handleWebhook,
+		},
+	},
+});
--- a/apps/web/src/routes/contact.tsx
+++ b/apps/web/src/routes/contact.tsx
@@ -6,8 +6,8 @@ export const Route = createFileRoute("/contact")({

 function ContactPage() {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
+		<div>
+			<div className="mx-auto max-w-3xl px-6 py-12">
 				<Link
 					to="/"
 					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
@@ -38,7 +38,7 @@ function ContactPage() {

 					<section className="rounded-lg bg-white/5 p-6">
 						<h3 className="mb-3 text-white text-xl">Open Mic Night</h3>
-						<p>Vrijdag 18 april 2026</p>
+						<p>Vrijdag 24 april 2026</p>
 						<p>Aanvang: 19:00 uur</p>
 						<p className="mt-2 text-white/60">
 							Locatie wordt later bekendgemaakt aan geregistreerde deelnemers.
@@ -53,6 +53,28 @@ function ContactPage() {
 						</p>
 					</section>

+					<section className="rounded-lg bg-white/5 p-6">
+						<h3 className="mb-4 text-white text-xl">Partners</h3>
+						<div className="flex flex-col gap-3 sm:flex-row sm:gap-6">
+							<a
+								href="https://ejv.be"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="link-hover text-white/80 hover:text-white"
+							>
+								Evangelisch Jeugdverbond (EJV.be)
+							</a>
+							<a
+								href="https://www.vlaanderen.be/cjm/nl"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="link-hover text-white/80 hover:text-white"
+							>
+								Vlaanderen — Cultuur, Jeugd & Media
+							</a>
+						</div>
+					</section>
+
 					<section className="mt-8">
 						<p className="text-sm text-white/60">
 							We proberen je e-mail binnen 48 uur te beantwoorden.
--- a/apps/web/src/routes/drinkkaart.tsx
+++ b/apps/web/src/routes/drinkkaart.tsx
@@ -0,0 +1,21 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+
+// /drinkkaart redirects to /account, preserving ?topup=success for
+// backward-compatibility with the Lemon Squeezy webhook return URL.
+export const Route = createFileRoute("/drinkkaart")({
+	validateSearch: (search: Record<string, unknown>) => ({
+		topup: search.topup as string | undefined,
+	}),
+	beforeLoad: async ({ search }) => {
+		const session = await authClient.getSession();
+		if (!session.data?.user) {
+			throw redirect({ to: "/login" });
+		}
+		throw redirect({
+			to: "/account",
+			search: search.topup ? { topup: search.topup } : {},
+		});
+	},
+	component: () => null,
+});
--- a/apps/web/src/routes/login.tsx
+++ b/apps/web/src/routes/login.tsx
@@ -15,13 +15,24 @@ import { authClient } from "@/lib/auth-client";
 import { orpc } from "@/utils/orpc";

 export const Route = createFileRoute("/login")({
+	validateSearch: (search: Record<string, unknown>) => {
+		const signup =
+			search.signup === "1" || search.signup === "true" ? "1" : undefined;
+		const email = typeof search.email === "string" ? search.email : undefined;
+		// Only return defined keys so redirects without search still typecheck
+		return {
+			...(signup !== undefined && { signup }),
+			...(email !== undefined && { email }),
+		} as { signup?: "1"; email?: string };
+	},
 	component: LoginPage,
 });

 function LoginPage() {
 	const navigate = useNavigate();
-	const [isSignup, setIsSignup] = useState(false);
-	const [email, setEmail] = useState("");
+	const search = Route.useSearch();
+	const [isSignup, setIsSignup] = useState(() => search.signup === "1");
+	const [email, setEmail] = useState(() => search.email ?? "");
 	const [password, setPassword] = useState("");
 	const [name, setName] = useState("");

@@ -49,13 +60,12 @@ function LoginPage() {
 		},
 		onSuccess: () => {
 			toast.success("Succesvol ingelogd!");
-			// Check role and redirect
 			authClient.getSession().then((session) => {
 				const user = session.data?.user as { role?: string } | undefined;
 				if (user?.role === "admin") {
 					navigate({ to: "/admin" });
 				} else {
-					navigate({ to: "/" });
+					navigate({ to: "/account" });
 				}
 			});
 		},
@@ -85,11 +95,7 @@ function LoginPage() {
 			return result.data;
 		},
 		onSuccess: () => {
-			toast.success("Account aangemaakt! Wacht op goedkeuring van een admin.");
-			setIsSignup(false);
-			setName("");
-			setEmail("");
-			setPassword("");
+			navigate({ to: "/account", search: { welkom: "1" } });
 		},
 		onError: (error) => {
 			toast.error(`Registratie mislukt: ${error.message}`);
@@ -119,13 +125,15 @@ function LoginPage() {
 		requestAdminMutation.mutate(undefined);
 	};

-	// If already logged in as admin, redirect
+	// If already logged in, redirect to appropriate page
 	if (sessionQuery.data?.data?.user) {
 		const user = sessionQuery.data.data.user as { role?: string };
 		if (user.role === "admin") {
 			navigate({ to: "/admin" });
-			return null;
+		} else {
+			navigate({ to: "/account" });
 		}
+		return null;
 	}

 	const isLoggedIn = !!sessionQuery.data?.data?.user;
@@ -134,51 +142,64 @@ function LoginPage() {
 		| undefined;

 	return (
-		<div className="flex min-h-screen items-center justify-center bg-[#214e51] px-4">
-			<Card className="w-full max-w-md border-white/10 bg-white/5">
+		<div className="flex min-h-[calc(100dvh-2.75rem)] items-center justify-center overflow-y-auto px-4 py-8 sm:min-h-[calc(100dvh-3.5rem)]">
+			<Card className="my-auto w-full max-w-md border-white/10 bg-white/5">
 				<CardHeader className="text-center">
 					<CardTitle className="font-['Intro',sans-serif] text-3xl text-white">
 						{isLoggedIn
-							? "Admin Toegang"
+							? `Welkom, ${user?.name}`
 							: isSignup
 								? "Account Aanmaken"
 								: "Inloggen"}
 					</CardTitle>
 					<CardDescription className="text-white/60">
 						{isLoggedIn
-							? `Welkom, ${user?.name}`
+							? "Je bent al ingelogd"
 							: isSignup
-								? "Maak een account aan om toegang te krijgen"
-								: "Log in om toegang te krijgen tot het admin dashboard"}
+								? "Maak een gratis account aan voor je Drinkkaart en inschrijving"
+								: "Log in om je account te bekijken"}
 					</CardDescription>
 				</CardHeader>
 				<CardContent>
 					{isLoggedIn ? (
 						<div className="space-y-4">
-							<div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4">
-								<p className="text-center text-yellow-200">
-									Je bent ingelogd maar hebt geen admin toegang.
-								</p>
-							</div>
+							{/* Primary CTA: go to account */}
 							<Button
-								onClick={handleRequestAdmin}
-								disabled={requestAdminMutation.isPending}
+								onClick={() => navigate({ to: "/account" })}
 								className="w-full bg-white text-[#214e51] hover:bg-white/90"
 							>
-								{requestAdminMutation.isPending
-									? "Bezig..."
-									: "Vraag Admin Toegang Aan"}
+								Ga naar mijn account
 							</Button>
+
+							{/* Secondary: request admin access */}
+							<div className="rounded-lg border border-white/10 bg-white/5 p-4">
+								<p className="mb-3 text-center text-sm text-white/60">
+									Admin-toegang aanvragen?
+								</p>
+								<Button
+									onClick={handleRequestAdmin}
+									disabled={requestAdminMutation.isPending}
+									variant="outline"
+									className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+								>
+									{requestAdminMutation.isPending
+										? "Bezig..."
+										: "Vraag Admin Toegang Aan"}
+								</Button>
+							</div>
+
 							<Button
-								onClick={() => authClient.signOut()}
+								onClick={() =>
+									authClient.signOut().then(() => navigate({ to: "/" }))
+								}
 								variant="outline"
-								className="w-full border-white/20 bg-transparent text-white hover:bg-white/10"
+								className="w-full border-white/20 bg-transparent text-white/60 hover:bg-white/10 hover:text-white"
 							>
 								Uitloggen
 							</Button>
 							<Link
 								to="/"
-								className="block text-center text-sm text-white/60 hover:text-white"
+								className="block text-center text-sm text-white/40 hover:text-white"
 							>
 								← Terug naar website
 							</Link>
--- a/apps/web/src/routes/manage.$token.tsx
+++ b/apps/web/src/routes/manage.$token.tsx
@@ -0,0 +1,797 @@
+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 { GiftSelector } from "@/components/registration/GiftSelector";
+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,
+});
+
+// ---------------------------------------------------------------------------
+// Shared layout wrappers
+// ---------------------------------------------------------------------------
+
+function PageShell({ children }: { children: React.ReactNode }) {
+	return (
+		<div>
+			<div className="mx-auto max-w-5xl px-6 py-12">{children}</div>
+		</div>
+	);
+}
+
+function BackLink() {
+	return (
+		<Link
+			to="/account"
+			className="link-hover mb-8 inline-block text-white/80 hover:text-white"
+		>
+			← Terug naar account
+		</Link>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// 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>
+	);
+}
+
+function ExtraPaymentBadge({ amountCents }: { amountCents: number }) {
+	const euros = amountCents / 100;
+	return (
+		<div className="inline-flex items-center gap-2 rounded-full border border-orange-400/40 bg-orange-400/10 px-4 py-1.5 font-semibold text-orange-400 text-sm">
+			<svg
+				className="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				strokeWidth={2}
+				aria-label="Extra betaling vereist"
+			>
+				<path
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+				/>
+			</svg>
+			Extra betaling vereist — €{euros.toFixed(euros % 1 === 0 ? 0 : 2)}
+		</div>
+	);
+}
+
+// ---------------------------------------------------------------------------
+// Edit form (inline on the manage page)
+// ---------------------------------------------------------------------------
+
+interface EditFormProps {
+	token: string;
+	initialData: {
+		firstName: string;
+		lastName: string;
+		email: string;
+		phone: string | null;
+		postcode: string | null;
+		birthdate: string | null;
+		registrationType: string;
+		artForm: string | null;
+		experience: string | null;
+		isOver16: boolean;
+		extraQuestions: string | null;
+		guests: string | null;
+		paymentStatus: string | null;
+		giftAmount: number | 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 [formData, setFormData] = useState({
+		firstName: initialData.firstName,
+		lastName: initialData.lastName,
+		email: initialData.email,
+		phone: initialData.phone ?? "",
+		postcode: initialData.postcode ?? "",
+		birthdate: initialData.birthdate ?? "",
+		registrationType: initialType,
+		artForm: initialData.artForm ?? "",
+		experience: initialData.experience ?? "",
+		isOver16: initialData.isOver16,
+		extraQuestions: initialData.extraQuestions ?? "",
+	});
+	const [formGuests, setFormGuests] = useState<GuestEntry[]>(
+		parseGuests(initialData.guests),
+	);
+	const [giftAmount, setGiftAmount] = useState(initialData.giftAmount ?? 0);
+
+	const updateMutation = useMutation({
+		...orpc.updateRegistration.mutationOptions(),
+		onSuccess: () => {
+			toast.success("Inschrijving bijgewerkt!");
+			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" ||
+		initialData.paymentStatus === "extra_payment_pending";
+	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,
+			postcode: formData.postcode.trim() || "",
+			birthdate: formData.birthdate || "",
+			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,
+						birthdate: g.birthdate.trim(),
+						postcode: g.postcode.trim(),
+					})),
+			extraQuestions: formData.extraQuestions.trim() || undefined,
+			giftAmount,
+		});
+	}
+
+	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>
+
+				{/* Postcode + Birthdate */}
+				<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<div>
+						<label htmlFor="postcode" className="mb-2 block text-white">
+							Postcode *
+						</label>
+						<input
+							id="postcode"
+							type="text"
+							required
+							value={formData.postcode}
+							onChange={(e) =>
+								setFormData((p) => ({ ...p, postcode: e.target.value }))
+							}
+							autoComplete="postal-code"
+							className={inputCls(false)}
+						/>
+					</div>
+					<div>
+						<label htmlFor="birthdate" className="mb-2 block text-white">
+							Geboortedatum *
+						</label>
+						<input
+							id="birthdate"
+							type="date"
+							required
+							value={formData.birthdate}
+							onChange={(e) =>
+								setFormData((p) => ({ ...p, birthdate: e.target.value }))
+							}
+							autoComplete="bday"
+							className={`${inputCls(false)} [color-scheme:dark]`}
+						/>
+					</div>
+				</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: "",
+									birthdate: "",
+									postcode: "",
+								},
+							]);
+						}}
+						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>
+						}
+						isPaid={isPaid}
+					/>
+				)}
+
+				{/* 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 border border-white/10 bg-transparent p-2 text-lg text-white placeholder:text-white/40 focus:outline-none"
+					/>
+				</div>
+
+				{/* Gift selector */}
+				<div className="border-white/10 border-t pt-6">
+					<h3 className="mb-4 font-['Intro',sans-serif] text-white text-xl">
+						Vrijwillige Gift
+					</h3>
+					<GiftSelector
+						value={giftAmount}
+						onChange={setGiftAmount}
+						disabled={isPaid && (initialData.giftAmount ?? 0) > 0}
+					/>
+				</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: () => {
+			toast.success("Inschrijving geannuleerd");
+			queryClient.invalidateQueries({ queryKey: ["getRegistrationByToken"] });
+		},
+		onError: (err) => {
+			toast.error(`Annuleren mislukt: ${err.message}`);
+		},
+	});
+
+	const checkoutMutation = useMutation({
+		...orpc.getCheckoutUrl.mutationOptions(),
+		onSuccess: (result) => {
+			window.location.href = result.checkoutUrl;
+		},
+		onError: (err) => {
+			toast.error(`Betaling starten mislukt: ${err.message}`);
+		},
+	});
+
+	function handleCancel() {
+		if (
+			confirm(
+				"Weet je zeker dat je je inschrijving wilt annuleren? Dit kan niet ongedaan worden gemaakt.",
+			)
+		) {
+			cancelMutation.mutate({ token });
+		}
+	}
+
+	function handleSaved() {
+		queryClient.invalidateQueries({ queryKey: ["getRegistrationByToken"] });
+		setIsEditing(false);
+	}
+
+	// Loading state
+	if (isLoading) {
+		return (
+			<PageShell>
+				<div className="animate-pulse text-white/60">Laden...</div>
+			</PageShell>
+		);
+	}
+
+	// Error / not found / cancelled
+	if (error || !data || data.cancelledAt) {
+		return (
+			<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);
+
+	return (
+		<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 24 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>
+				)}
+			</div>
+
+			{/* Payment status - not shown for performers without a gift */}
+			{(!isPerformer || (data.giftAmount ?? 0) > 0) &&
+				(data.paymentStatus !== "paid" || (data.giftAmount ?? 0) > 0) && (
+					<div className="mb-6">
+						{data.paymentStatus === "paid" ? (
+							<PaidBadge />
+						) : data.paymentStatus === "extra_payment_pending" ? (
+							<ExtraPaymentBadge amountCents={data.paymentAmount ?? 0} />
+						) : (
+							<PendingBadge />
+						)}
+					</div>
+				)}
+
+			{/* Gift display */}
+			{(data.giftAmount ?? 0) > 0 && (
+				<div className="mb-6">
+					<div className="inline-flex items-center gap-2 rounded-full border border-pink-400/40 bg-pink-400/10 px-4 py-1.5 font-semibold text-pink-300 text-sm">
+						<span>Vrijwillige gift: €{(data.giftAmount ?? 0) / 100}</span>
+					</div>
+				</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>
+						<p className="text-sm text-white/50">Postcode</p>
+						<p className="text-lg text-white">{data.postcode || "—"}</p>
+					</div>
+					<div>
+						<p className="text-sm text-white/50">Geboortedatum</p>
+						<p className="text-lg text-white">{data.birthdate || "—"}</p>
+					</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.birthdate && (
+										<p className="text-sm text-white/60">
+											Geboortedatum: {g.birthdate}
+										</p>
+									)}
+									{g.postcode && (
+										<p className="text-sm text-white/60">
+											Postcode: {g.postcode}
+										</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>
+
+			{/* Actions */}
+			<div className="mt-8 flex flex-wrap items-center gap-4">
+				{/* Show pay button if there's something to pay (for watchers: drink card, for performers: gift) */}
+				{(data.paymentStatus === "pending" ||
+					data.paymentStatus === "extra_payment_pending") &&
+					(!isPerformer || (data.giftAmount ?? 0) > 0) && (
+						<button
+							type="button"
+							onClick={() => checkoutMutation.mutate({ token })}
+							disabled={checkoutMutation.isPending}
+							className={`px-8 py-3 font-['Intro',sans-serif] text-lg transition-all hover:scale-105 disabled:opacity-50 ${data.paymentStatus === "extra_payment_pending" ? "bg-orange-400 text-white hover:bg-orange-300" : isPerformer ? "bg-pink-400 text-white hover:bg-pink-300" : "bg-teal-400 text-[#214e51] hover:bg-teal-300"}`}
+						>
+							{checkoutMutation.isPending
+								? "Laden..."
+								: data.paymentStatus === "extra_payment_pending"
+									? `Extra betalen (€${((data.paymentAmount ?? 0) / 100).toFixed(0)})`
+									: isPerformer
+										? `Gift betalen (€${((data.giftAmount ?? 0) / 100).toFixed(0)})`
+										: "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>
+	);
+}
--- a/apps/web/src/routes/privacy.tsx
+++ b/apps/web/src/routes/privacy.tsx
@@ -6,8 +6,8 @@ export const Route = createFileRoute("/privacy")({

 function PrivacyPage() {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
+		<div>
+			<div className="mx-auto max-w-3xl px-6 py-12">
 				<Link
 					to="/"
 					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
--- a/apps/web/src/routes/terms.tsx
+++ b/apps/web/src/routes/terms.tsx
@@ -6,8 +6,8 @@ export const Route = createFileRoute("/terms")({

 function TermsPage() {
 	return (
-		<div className="min-h-screen bg-[#214e51]">
-			<div className="mx-auto max-w-3xl px-6 py-16">
+		<div>
+			<div className="mx-auto max-w-3xl px-6 py-12">
 				<Link
 					to="/"
 					className="link-hover mb-8 inline-block text-white/80 hover:text-white"
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -16,4 +16,5 @@ export default defineConfig({
 	server: {
 		port: 3001,
 	},
+	envDir: "../../packages/env",
 });
--- a/bun.lock
+++ b/bun.lock
@@ -24,6 +24,7 @@
        "@base-ui/react": "^1.0.0",
        "@kk/api": "workspace:*",
        "@kk/auth": "workspace:*",
+        "@kk/db": "workspace:*",
        "@kk/env": "workspace:*",
        "@libsql/client": "catalog:",
        "@orpc/client": "catalog:",
@@ -44,9 +45,11 @@
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "dotenv": "catalog:",
+        "html5-qrcode": "^2.3.8",
        "libsql": "catalog:",
        "lucide-react": "^0.525.0",
        "next-themes": "^0.4.6",
+        "qrcode": "^1.5.4",
        "react": "19.2.3",
        "react-dom": "19.2.3",
        "shadcn": "^3.6.2",
@@ -65,6 +68,7 @@
        "@tanstack/react-router-devtools": "^1.141.1",
        "@testing-library/dom": "^10.4.0",
        "@testing-library/react": "^16.2.0",
+        "@types/qrcode": "^1.5.6",
        "@types/react": "19.2.7",
        "@types/react-dom": "19.2.3",
        "@types/three": "^0.183.1",
@@ -89,10 +93,12 @@
        "@orpc/zod": "catalog:",
        "dotenv": "catalog:",
        "drizzle-orm": "^0.45.1",
+        "nodemailer": "^8.0.1",
        "zod": "catalog:",
      },
      "devDependencies": {
        "@kk/config": "workspace:*",
+        "@types/nodemailer": "^7.0.11",
        "typescript": "catalog:",
      },
    },
@@ -909,8 +915,12 @@

    "@types/node": ["@types/node@22.19.11", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-BH7YwL6rA93ReqeQS1c4bsPpcfOmJasG+Fkr6Y59q83f9M1WcBRHR2vM+P9eOisYRcN3ujQoiZY8uk5W+1WL8w=="],

+    "@types/nodemailer": ["@types/nodemailer@7.0.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g=="],
+
    "@types/offscreencanvas": ["@types/offscreencanvas@2019.7.3", "", {}, "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A=="],

+    "@types/qrcode": ["@types/qrcode@1.5.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw=="],
+
    "@types/react": ["@types/react@19.2.7", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg=="],

    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
@@ -1011,6 +1021,8 @@

    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],

+    "camelcase": ["camelcase@5.3.1", "", {}, "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="],
+
    "camera-controls": ["camera-controls@3.1.2", "", { "peerDependencies": { "three": ">=0.126.1" } }, "sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA=="],

    "caniuse-lite": ["caniuse-lite@1.0.30001774", "", {}, "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA=="],
@@ -1031,7 +1043,7 @@

    "cli-width": ["cli-width@4.1.0", "", {}, "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ=="],

-    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+    "cliui": ["cliui@6.0.0", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.0", "wrap-ansi": "^6.2.0" } }, "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ=="],

    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],

@@ -1081,6 +1093,8 @@

    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],

+    "decamelize": ["decamelize@1.2.0", "", {}, "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="],
+
    "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],

    "dedent": ["dedent@1.7.1", "", { "peerDependencies": { "babel-plugin-macros": "^3.1.0" }, "optionalPeers": ["babel-plugin-macros"] }, "sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg=="],
@@ -1105,6 +1119,8 @@

    "diff": ["diff@8.0.3", "", {}, "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ=="],

+    "dijkstrajs": ["dijkstrajs@1.0.3", "", {}, "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA=="],
+
    "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],

    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
@@ -1133,7 +1149,7 @@

    "electron-to-chromium": ["electron-to-chromium@1.5.302", "", {}, "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg=="],

-    "emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
+    "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

    "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],

@@ -1209,6 +1225,8 @@

    "find-process": ["find-process@2.0.0", "", { "dependencies": { "chalk": "~4.1.2", "commander": "^12.1.0", "loglevel": "^1.9.2" }, "bin": { "find-process": "dist/bin/find-process.js" } }, "sha512-YUBQnteWGASJoEVVsOXy6XtKAY2O1FCsWnnvQ8y0YwgY1rZiKeVptnFvMu6RSELZAJOGklqseTnUGGs5D0bKmg=="],

+    "find-up": ["find-up@4.1.0", "", { "dependencies": { "locate-path": "^5.0.0", "path-exists": "^4.0.0" } }, "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw=="],
+
    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],

    "formdata-polyfill": ["formdata-polyfill@4.0.10", "", { "dependencies": { "fetch-blob": "^3.1.2" } }, "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g=="],
@@ -1275,6 +1293,8 @@

    "html-encoding-sniffer": ["html-encoding-sniffer@4.0.0", "", { "dependencies": { "whatwg-encoding": "^3.1.1" } }, "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ=="],

+    "html5-qrcode": ["html5-qrcode@2.3.8", "", {}, "sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ=="],
+
    "htmlparser2": ["htmlparser2@10.1.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", "domutils": "^3.2.2", "entities": "^7.0.1" } }, "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ=="],

    "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
@@ -1413,6 +1433,8 @@

    "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],

+    "locate-path": ["locate-path@5.0.0", "", { "dependencies": { "p-locate": "^4.1.0" } }, "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g=="],
+
    "log-symbols": ["log-symbols@6.0.0", "", { "dependencies": { "chalk": "^5.3.0", "is-unicode-supported": "^1.3.0" } }, "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw=="],

    "loglevel": ["loglevel@1.9.2", "", {}, "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg=="],
@@ -1481,6 +1503,8 @@

    "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],

+    "nodemailer": ["nodemailer@8.0.1", "", {}, "sha512-5kcldIXmaEjZcHR6F28IKGSgpmZHaF1IXLWFTG+Xh3S+Cce4MiakLtWY+PlBU69fLbRa8HlaGIrC/QolUpHkhg=="],
+
    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],

    "npm-run-path": ["npm-run-path@6.0.0", "", { "dependencies": { "path-key": "^4.0.0", "unicorn-magic": "^0.3.0" } }, "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA=="],
@@ -1511,6 +1535,12 @@

    "outvariant": ["outvariant@1.4.3", "", {}, "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA=="],

+    "p-limit": ["p-limit@2.3.0", "", { "dependencies": { "p-try": "^2.0.0" } }, "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w=="],
+
+    "p-locate": ["p-locate@4.1.0", "", { "dependencies": { "p-limit": "^2.2.0" } }, "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A=="],
+
+    "p-try": ["p-try@2.2.0", "", {}, "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="],
+
    "package-json-from-dist": ["package-json-from-dist@1.0.1", "", {}, "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="],

    "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
@@ -1533,6 +1563,8 @@

    "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],

+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],

    "path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
@@ -1547,6 +1579,8 @@

    "pkce-challenge": ["pkce-challenge@5.0.1", "", {}, "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ=="],

+    "pngjs": ["pngjs@5.0.0", "", {}, "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="],
+
    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],

    "postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="],
@@ -1575,6 +1609,8 @@

    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],

+    "qrcode": ["qrcode@1.5.4", "", { "dependencies": { "dijkstrajs": "^1.0.1", "pngjs": "^5.0.0", "yargs": "^15.3.1" }, "bin": { "qrcode": "bin/qrcode" } }, "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg=="],
+
    "qs": ["qs@6.15.0", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ=="],

    "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -1605,6 +1641,8 @@

    "require-from-string": ["require-from-string@2.0.2", "", {}, "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="],

+    "require-main-filename": ["require-main-filename@2.0.0", "", {}, "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="],
+
    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],

    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -1649,6 +1687,8 @@

    "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="],

+    "set-blocking": ["set-blocking@2.0.0", "", {}, "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="],
+
    "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],

    "setimmediate": ["setimmediate@1.0.5", "", {}, "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="],
@@ -1695,7 +1735,7 @@

    "strict-event-emitter": ["strict-event-emitter@0.5.1", "", {}, "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ=="],

-    "string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+    "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],

    "string-width-cjs": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],

@@ -1857,13 +1897,15 @@

    "which": ["which@4.0.0", "", { "dependencies": { "isexe": "^3.1.1" }, "bin": { "node-which": "bin/which.js" } }, "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg=="],

+    "which-module": ["which-module@2.0.1", "", {}, "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ=="],
+
    "wildcard-match": ["wildcard-match@5.1.4", "", {}, "sha512-wldeCaczs8XXq7hj+5d/F38JE2r7EXgb6WQDM84RVwxy81T/sxB5e9+uZLK9Q9oNz1mlvjut+QtvgaOQFPVq/g=="],

    "workerd": ["workerd@1.20260302.0", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260302.0", "@cloudflare/workerd-darwin-arm64": "1.20260302.0", "@cloudflare/workerd-linux-64": "1.20260302.0", "@cloudflare/workerd-linux-arm64": "1.20260302.0", "@cloudflare/workerd-windows-64": "1.20260302.0" }, "bin": { "workerd": "bin/workerd" } }, "sha512-FhNdC8cenMDllI6bTktFgxP5Bn5ZEnGtofgKipY6pW9jtq708D1DeGI6vGad78KQLBGaDwFy1eThjCoLYgFfog=="],

    "wrangler": ["wrangler@4.68.0", "", { "dependencies": { "@cloudflare/kv-asset-handler": "0.4.2", "@cloudflare/unenv-preset": "2.14.0", "blake3-wasm": "2.1.5", "esbuild": "0.27.3", "miniflare": "4.20260302.0", "path-to-regexp": "6.3.0", "unenv": "2.0.0-rc.24", "workerd": "1.20260302.0" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@cloudflare/workers-types": "^4.20260302.0" }, "optionalPeers": ["@cloudflare/workers-types"], "bin": { "wrangler": "bin/wrangler.js", "wrangler2": "bin/wrangler.js" } }, "sha512-DCjl2ZfjwWV10iH4Zn+97isitPkb7BYxpbt4E/Okd/QKLFTp9xdwoa999UN9lugToqPm5Zz/UsRu6hpKZuT8BA=="],

-    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+    "wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],

    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],

@@ -1879,15 +1921,15 @@

    "xmlchars": ["xmlchars@2.2.0", "", {}, "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw=="],

-    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+    "y18n": ["y18n@4.0.3", "", {}, "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="],

    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],

    "yaml": ["yaml@2.8.2", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A=="],

-    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+    "yargs": ["yargs@15.4.1", "", { "dependencies": { "cliui": "^6.0.0", "decamelize": "^1.2.0", "find-up": "^4.1.0", "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", "string-width": "^4.2.0", "which-module": "^2.0.0", "y18n": "^4.0.0", "yargs-parser": "^18.1.2" } }, "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A=="],

-    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+    "yargs-parser": ["yargs-parser@18.1.3", "", { "dependencies": { "camelcase": "^5.0.0", "decamelize": "^1.2.0" } }, "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ=="],

    "yoctocolors": ["yoctocolors@2.1.2", "", {}, "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug=="],

@@ -1929,10 +1971,10 @@

    "@esbuild-kit/core-utils/esbuild": ["esbuild@0.18.20", "", { "optionalDependencies": { "@esbuild/android-arm": "0.18.20", "@esbuild/android-arm64": "0.18.20", "@esbuild/android-x64": "0.18.20", "@esbuild/darwin-arm64": "0.18.20", "@esbuild/darwin-x64": "0.18.20", "@esbuild/freebsd-arm64": "0.18.20", "@esbuild/freebsd-x64": "0.18.20", "@esbuild/linux-arm": "0.18.20", "@esbuild/linux-arm64": "0.18.20", "@esbuild/linux-ia32": "0.18.20", "@esbuild/linux-loong64": "0.18.20", "@esbuild/linux-mips64el": "0.18.20", "@esbuild/linux-ppc64": "0.18.20", "@esbuild/linux-riscv64": "0.18.20", "@esbuild/linux-s390x": "0.18.20", "@esbuild/linux-x64": "0.18.20", "@esbuild/netbsd-x64": "0.18.20", "@esbuild/openbsd-x64": "0.18.20", "@esbuild/sunos-x64": "0.18.20", "@esbuild/win32-arm64": "0.18.20", "@esbuild/win32-ia32": "0.18.20", "@esbuild/win32-x64": "0.18.20" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA=="],

-    "@inquirer/core/wrap-ansi": ["wrap-ansi@6.2.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA=="],
-
    "@isaacs/cliui/string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],

+    "@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
+
    "@jridgewell/gen-mapping/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],

    "@jridgewell/remapping/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
@@ -1983,12 +2025,8 @@

    "cheerio/undici": ["undici@7.22.0", "", {}, "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg=="],

-    "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
-
    "cosmiconfig/env-paths": ["env-paths@2.2.1", "", {}, "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A=="],

    "cross-spawn/which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
@@ -2017,10 +2055,14 @@

    "msw/tough-cookie": ["tough-cookie@6.0.0", "", { "dependencies": { "tldts": "^7.0.5" } }, "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w=="],

+    "msw/yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+
    "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],

    "ora/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],

+    "ora/string-width": ["string-width@7.2.0", "", { "dependencies": { "emoji-regex": "^10.3.0", "get-east-asian-width": "^1.0.0", "strip-ansi": "^7.1.0" } }, "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ=="],
+
    "prompts/kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],

    "proper-lockfile/signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="],
@@ -2049,7 +2091,7 @@

    "stats-gl/three": ["three@0.170.0", "", {}, "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ=="],

-    "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+    "string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

@@ -2069,18 +2111,14 @@

    "wrangler/unenv": ["unenv@2.0.0-rc.24", "", { "dependencies": { "pathe": "^2.0.3" } }, "sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw=="],

-    "wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+    "wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],

-    "wrap-ansi/string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="],
+    "wrap-ansi/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

    "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],

-    "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "wrap-ansi-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

-    "yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
    "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="],

    "@aws-crypto/util/@smithy/util-utf8/@smithy/util-buffer-from": ["@smithy/util-buffer-from@2.2.0", "", { "dependencies": { "@smithy/is-array-buffer": "^2.2.0", "tslib": "^2.6.2" } }, "sha512-IJdWBbTcMQ6DA0gdNhh/BwrLkDR+ADW5Kr1aZmd4k3DIF6ezMV4R2NIAmT08wQJ3yUK82thHWmC/TnK/wpMMIA=="],
@@ -2143,26 +2181,26 @@

    "@esbuild-kit/core-utils/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.18.20", "", { "os": "win32", "cpu": "x64" }, "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ=="],

-    "@inquirer/core/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
-
-    "@inquirer/core/wrap-ansi/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
-
-    "@inquirer/core/wrap-ansi/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
-
    "@isaacs/cliui/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],

+    "@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
+
    "@octokit/plugin-paginate-rest/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@24.2.0", "", {}, "sha512-9sIH3nSUttelJSXUrmGzl7QUBFul0/mB8HRYl3fOlgHbIWG+WnYDXU3v/2zMtAvuzZ/ed00Ei6on975FhBfzrg=="],

    "@octokit/plugin-rest-endpoint-methods/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@24.2.0", "", {}, "sha512-9sIH3nSUttelJSXUrmGzl7QUBFul0/mB8HRYl3fOlgHbIWG+WnYDXU3v/2zMtAvuzZ/ed00Ei6on975FhBfzrg=="],

-    "cliui/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
-    "cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
-
    "cross-spawn/which/isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],

    "msw/tough-cookie/tldts": ["tldts@7.0.23", "", { "dependencies": { "tldts-core": "^7.0.23" }, "bin": { "tldts": "bin/cli.js" } }, "sha512-ASdhgQIBSay0R/eXggAkQ53G4nTJqTXqC2kbaBbdDwM7SkjyZyO0OaaN1/FH7U/yCeqOHDwFO5j8+Os/IS1dXw=="],

+    "msw/yargs/cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+
+    "msw/yargs/y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "msw/yargs/yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
+    "ora/string-width/emoji-regex": ["emoji-regex@10.6.0", "", {}, "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A=="],
+
    "shadcn/open/wsl-utils": ["wsl-utils@0.3.1", "", { "dependencies": { "is-wsl": "^3.1.0", "powershell-utils": "^0.1.0" } }, "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg=="],

    "tsx/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.3", "", { "os": "aix", "cpu": "ppc64" }, "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg=="],
@@ -2321,20 +2359,16 @@

    "wrangler/esbuild/@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.3", "", { "os": "win32", "cpu": "x64" }, "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA=="],

-    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
-    "wrap-ansi/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="],
-
-    "yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
-    "yargs/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
-
    "@aws-crypto/sha256-browser/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],

    "@aws-crypto/util/@smithy/util-utf8/@smithy/util-buffer-from/@smithy/is-array-buffer": ["@smithy/is-array-buffer@2.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-GGP3O9QFD24uGeAXYUjwSTXARoqpZykHadOmA8G5vfJPK0/DC67qa//0qvqrJzL1xc8WQWX7/yc7fwudjPHPhA=="],

-    "@inquirer/core/wrap-ansi/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
-
    "msw/tough-cookie/tldts/tldts-core": ["tldts-core@7.0.23", "", {}, "sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ=="],
+
+    "msw/yargs/cliui/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "msw/yargs/cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "msw/yargs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
  }
 }
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -20,10 +20,12 @@
 		"@orpc/zod": "catalog:",
 		"dotenv": "catalog:",
 		"drizzle-orm": "^0.45.1",
+		"nodemailer": "^8.0.1",
 		"zod": "catalog:"
 	},
 	"devDependencies": {
 		"@kk/config": "workspace:*",
+		"@types/nodemailer": "^7.0.11",
 		"typescript": "catalog:"
 	}
 }
--- a/packages/api/src/context.ts
+++ b/packages/api/src/context.ts
@@ -1,4 +1,5 @@
 import { auth } from "@kk/auth";
+import { env } from "@kk/env/server";

 export async function createContext({ req }: { req: Request }) {
 	const session = await auth.api.getSession({
@@ -6,6 +7,7 @@ export async function createContext({ req }: { req: Request }) {
 	});
 	return {
 		session,
+		env,
 	};
 }

--- a/packages/api/src/email.ts
+++ b/packages/api/src/email.ts
@@ -0,0 +1,350 @@
+import { env } from "@kk/env/server";
+import nodemailer from "nodemailer";
+
+// Singleton transport — created once per module, reused across all email sends.
+// Re-creating it on every call causes EventEmitter listener accumulation in
+// long-lived Cloudflare Worker processes, triggering memory leak warnings.
+let _transport: nodemailer.Transporter | null | undefined;
+
+function getTransport(): nodemailer.Transporter | null {
+	if (_transport !== undefined) return _transport;
+	if (!env.SMTP_HOST || !env.SMTP_USER || !env.SMTP_PASS) {
+		_transport = null;
+		return null;
+	}
+	_transport = nodemailer.createTransport({
+		host: env.SMTP_HOST,
+		port: env.SMTP_PORT,
+		secure: env.SMTP_PORT === 465,
+		auth: {
+			user: env.SMTP_USER,
+			pass: env.SMTP_PASS,
+		},
+	});
+	return _transport;
+}
+
+const from = env.SMTP_FROM ?? "Kunstenkamp <info@kunstenkamp.be>";
+const baseUrl = env.BETTER_AUTH_URL ?? "https://kunstenkamp.be";
+
+function registrationConfirmationHtml(params: {
+	firstName: string;
+	manageUrl: string;
+	wantsToPerform: boolean;
+	artForm?: string | null;
+	giftAmount?: number;
+	drinkCardValue?: number;
+}) {
+	const role = params.wantsToPerform
+		? `Optreden${params.artForm ? ` — ${params.artForm}` : ""}`
+		: "Toeschouwer";
+
+	const giftCents = params.giftAmount ?? 0;
+	// drinkCardValue is stored in euros (e.g., 5), giftAmount in cents (e.g., 5000)
+	const drinkCardCents = (params.drinkCardValue ?? 0) * 100;
+	const hasPayment = drinkCardCents > 0 || giftCents > 0;
+
+	const formatEuro = (cents: number) =>
+		`€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
+
+	const paymentSummary = hasPayment
+		? `<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:16px 0;">
+				<tr>
+					<td style="padding:20px 24px;">
+						<p style="margin:0 0 12px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Betaling</p>
+						${drinkCardCents > 0 ? `<p style="margin:0 0 8px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.5;">Drinkkaart: <span style="color:#ffffff;font-weight:500;">${formatEuro(drinkCardCents)}</span></p>` : ""}
+						${giftCents > 0 ? `<p style="margin:0 0 8px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.5;">Vrijwillige gift: <span style="color:#ffffff;font-weight:500;">${formatEuro(giftCents)}</span></p>` : ""}
+						<p style="margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1);font-size:18px;color:#ffffff;font-weight:600;">Totaal: ${formatEuro(drinkCardCents + giftCents)}</p>
+					</td>
+				</tr>
+			</table>`
+		: "";
+
+	return `<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Bevestiging inschrijving</title>
+</head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
+          <!-- Header -->
+          <tr>
+            <td style="padding:40px 48px 32px;">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
+              <h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Je inschrijving is bevestigd!</h1>
+            </td>
+          </tr>
+          <!-- Body -->
+          <tr>
+            <td style="padding:0 48px 32px;">
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Hoi ${params.firstName},
+              </p>
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                We hebben je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 24 april 2026</strong> in goede orde ontvangen.
+              </p>
+              <!-- Registration summary -->
+              <table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
+                <tr>
+                  <td style="padding:20px 24px;">
+                    <p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Jouw rol</p>
+                    <p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${role}</p>
+                  </td>
+                </tr>
+              </table>
+              ${paymentSummary}
+              <p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Wil je je gegevens later nog aanpassen of je inschrijving annuleren? Gebruik dan de knop hieronder. De link is uniek voor jou — deel hem niet.
+              </p>
+              <!-- CTA button -->
+              <table cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="border-radius:2px;background:#ffffff;">
+                    <a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
+                      Beheer mijn inschrijving
+                    </a>
+                  </td>
+                </tr>
+              </table>
+              <p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">
+                Of kopieer deze link: <span style="color:rgba(255,255,255,0.6);">${params.manageUrl}</span>
+              </p>
+            </td>
+          </tr>
+          <!-- Footer -->
+          <tr>
+            <td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);line-height:1.6;">
+                Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a><br/>
+                Kunstenkamp vzw — Een initiatief voor en door kunstenaars.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+function updateConfirmationHtml(params: {
+	firstName: string;
+	manageUrl: string;
+	wantsToPerform: boolean;
+	artForm?: string | null;
+	giftAmount?: number;
+	drinkCardValue?: number;
+}) {
+	const role = params.wantsToPerform
+		? `Optreden${params.artForm ? ` — ${params.artForm}` : ""}`
+		: "Toeschouwer";
+
+	const giftCents = params.giftAmount ?? 0;
+	// drinkCardValue is stored in euros (e.g., 5), giftAmount in cents (e.g., 5000)
+	const drinkCardCents = (params.drinkCardValue ?? 0) * 100;
+	const hasPayment = drinkCardCents > 0 || giftCents > 0;
+
+	const formatEuro = (cents: number) =>
+		`€${(cents / 100).toFixed(cents % 100 === 0 ? 0 : 2).replace(".", ",")}`;
+
+	const paymentSummary = hasPayment
+		? `<table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:16px 0;">
+				<tr>
+					<td style="padding:20px 24px;">
+						<p style="margin:0 0 12px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Betaling</p>
+						${drinkCardCents > 0 ? `<p style="margin:0 0 8px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.5;">Drinkkaart: <span style="color:#ffffff;font-weight:500;">${formatEuro(drinkCardCents)}</span></p>` : ""}
+						${giftCents > 0 ? `<p style="margin:0 0 8px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.5;">Vrijwillige gift: <span style="color:#ffffff;font-weight:500;">${formatEuro(giftCents)}</span></p>` : ""}
+						<p style="margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,0.1);font-size:18px;color:#ffffff;font-weight:600;">Totaal: ${formatEuro(drinkCardCents + giftCents)}</p>
+					</td>
+				</tr>
+			</table>`
+		: "";
+
+	return `<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8" />
+  <title>Inschrijving bijgewerkt</title>
+</head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
+          <tr>
+            <td style="padding:40px 48px 32px;">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
+              <h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Inschrijving bijgewerkt</h1>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 48px 32px;">
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Hoi ${params.firstName},
+              </p>
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is succesvol bijgewerkt.
+              </p>
+              <table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:24px 0;">
+                <tr>
+                  <td style="padding:20px 24px;">
+                    <p style="margin:0 0 8px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Jouw rol</p>
+                    <p style="margin:0;font-size:18px;color:#ffffff;font-weight:600;">${role}</p>
+                  </td>
+                </tr>
+              </table>
+              ${paymentSummary}
+              <table cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="border-radius:2px;background:#ffffff;">
+                    <a href="${params.manageUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
+                      Bekijk mijn inschrijving
+                    </a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);">
+                Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+function cancellationHtml(params: { firstName: string }) {
+	return `<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8" />
+  <title>Inschrijving geannuleerd</title>
+</head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
+          <tr>
+            <td style="padding:40px 48px 32px;">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
+              <h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Inschrijving geannuleerd</h1>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:0 48px 40px;">
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Hoi ${params.firstName},
+              </p>
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Je inschrijving voor <strong style="color:#ffffff;">Open Mic Night — vrijdag 18 april 2026</strong> is geannuleerd.
+              </p>
+              <p style="margin:0;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Van gedachten veranderd? Je kunt je altijd opnieuw inschrijven via <a href="${baseUrl}/#registration" style="color:#ffffff;">kunstenkamp.be</a>.
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);">
+                Vragen? Mail ons op <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+export async function sendConfirmationEmail(params: {
+	to: string;
+	firstName: string;
+	managementToken: string;
+	wantsToPerform: boolean;
+	artForm?: string | null;
+	giftAmount?: number;
+	drinkCardValue?: number;
+}) {
+	const transport = getTransport();
+	if (!transport) {
+		console.warn("SMTP not configured — skipping confirmation email");
+		return;
+	}
+	const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
+	await transport.sendMail({
+		from,
+		to: params.to,
+		subject: "Bevestiging inschrijving — Open Mic Night",
+		html: registrationConfirmationHtml({
+			firstName: params.firstName,
+			manageUrl,
+			wantsToPerform: params.wantsToPerform,
+			artForm: params.artForm,
+			giftAmount: params.giftAmount,
+			drinkCardValue: params.drinkCardValue,
+		}),
+	});
+}
+
+export async function sendUpdateEmail(params: {
+	to: string;
+	firstName: string;
+	managementToken: string;
+	wantsToPerform: boolean;
+	artForm?: string | null;
+	giftAmount?: number;
+	drinkCardValue?: number;
+}) {
+	const transport = getTransport();
+	if (!transport) {
+		console.warn("SMTP not configured — skipping update email");
+		return;
+	}
+	const manageUrl = `${baseUrl}/manage/${params.managementToken}`;
+	await transport.sendMail({
+		from,
+		to: params.to,
+		subject: "Inschrijving bijgewerkt — Open Mic Night",
+		html: updateConfirmationHtml({
+			firstName: params.firstName,
+			manageUrl,
+			wantsToPerform: params.wantsToPerform,
+			artForm: params.artForm,
+			giftAmount: params.giftAmount,
+			drinkCardValue: params.drinkCardValue,
+		}),
+	});
+}
+
+export async function sendCancellationEmail(params: {
+	to: string;
+	firstName: string;
+}) {
+	const transport = getTransport();
+	if (!transport) {
+		console.warn("SMTP not configured — skipping cancellation email");
+		return;
+	}
+	await transport.sendMail({
+		from,
+		to: params.to,
+		subject: "Inschrijving geannuleerd — Open Mic Night",
+		html: cancellationHtml({ firstName: params.firstName }),
+	});
+}
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -13,6 +13,7 @@ const requireAuth = o.middleware(async ({ context, next }) => {
 	return next({
 		context: {
 			session: context.session,
+			env: context.env,
 		},
 	});
 });
@@ -29,6 +30,7 @@ const requireAdmin = o.middleware(async ({ context, next }) => {
 	return next({
 		context: {
 			session: context.session,
+			env: context.env,
 		},
 	});
 });
--- a/packages/api/src/lib/drinkkaart-email.ts
+++ b/packages/api/src/lib/drinkkaart-email.ts
@@ -0,0 +1,159 @@
+import { env } from "@kk/env/server";
+import nodemailer from "nodemailer";
+
+// Re-use the same SMTP transport strategy as email.ts.
+let _transport: nodemailer.Transporter | null | undefined;
+
+function getTransport(): nodemailer.Transporter | null {
+	if (_transport !== undefined) return _transport;
+	if (!env.SMTP_HOST || !env.SMTP_USER || !env.SMTP_PASS) {
+		_transport = null;
+		return null;
+	}
+	_transport = nodemailer.createTransport({
+		host: env.SMTP_HOST,
+		port: env.SMTP_PORT,
+		secure: env.SMTP_PORT === 465,
+		auth: {
+			user: env.SMTP_USER,
+			pass: env.SMTP_PASS,
+		},
+	});
+	return _transport;
+}
+
+const from = env.SMTP_FROM ?? "Kunstenkamp <info@kunstenkamp.be>";
+const baseUrl = env.BETTER_AUTH_URL ?? "https://kunstenkamp.be";
+
+function formatEuro(cents: number): string {
+	return new Intl.NumberFormat("nl-BE", {
+		style: "currency",
+		currency: "EUR",
+	}).format(cents / 100);
+}
+
+function deductionHtml(params: {
+	firstName: string;
+	amountCents: number;
+	newBalanceCents: number;
+	dateTime: string;
+	drinkkaartUrl: string;
+}) {
+	return `<!DOCTYPE html>
+<html lang="nl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Drinkkaart afschrijving</title>
+</head>
+<body style="margin:0;padding:0;background:#f4f4f5;font-family:sans-serif;">
+  <table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f5;padding:40px 0;">
+    <tr>
+      <td align="center">
+        <table width="600" cellpadding="0" cellspacing="0" style="background:#214e51;border-radius:4px;overflow:hidden;">
+          <!-- Header -->
+          <tr>
+            <td style="padding:40px 48px 32px;">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.5);letter-spacing:0.08em;text-transform:uppercase;">Kunstenkamp</p>
+              <h1 style="margin:12px 0 0;font-size:28px;color:#ffffff;font-weight:700;">Drinkkaart afschrijving</h1>
+            </td>
+          </tr>
+          <!-- Body -->
+          <tr>
+            <td style="padding:0 48px 32px;">
+              <p style="margin:0 0 16px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Hoi ${params.firstName},
+              </p>
+              <p style="margin:0 0 24px;font-size:16px;color:rgba(255,255,255,0.85);line-height:1.6;">
+                Er is zojuist een bedrag afgeschreven van je Drinkkaart.
+              </p>
+              <!-- Summary -->
+              <table width="100%" cellpadding="0" cellspacing="0" style="background:rgba(255,255,255,0.08);border-radius:4px;margin:0 0 24px;">
+                <tr>
+                  <td style="padding:20px 24px;">
+                    <p style="margin:0 0 12px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Afschrijving</p>
+                    <p style="margin:0 0 8px;font-size:22px;color:#ffffff;font-weight:700;">&minus; ${formatEuro(params.amountCents)}</p>
+                    <p style="margin:8px 0 0;font-size:14px;color:rgba(255,255,255,0.55);">${params.dateTime}</p>
+                  </td>
+                </tr>
+                <tr>
+                  <td style="padding:0 24px 20px;border-top:1px solid rgba(255,255,255,0.08);">
+                    <p style="margin:12px 0 4px;font-size:12px;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:0.06em;">Nieuw saldo</p>
+                    <p style="margin:0;font-size:20px;color:#ffffff;font-weight:600;">${formatEuro(params.newBalanceCents)}</p>
+                  </td>
+                </tr>
+              </table>
+              <!-- CTA -->
+              <table cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="border-radius:2px;background:#ffffff;">
+                    <a href="${params.drinkkaartUrl}" style="display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#214e51;text-decoration:none;">
+                      Bekijk mijn Drinkkaart
+                    </a>
+                  </td>
+                </tr>
+              </table>
+              <p style="margin:16px 0 0;font-size:13px;color:rgba(255,255,255,0.4);">
+                Klopt er iets niet? Neem contact op via <a href="mailto:info@kunstenkamp.be" style="color:rgba(255,255,255,0.6);">info@kunstenkamp.be</a>.
+              </p>
+            </td>
+          </tr>
+          <!-- Footer -->
+          <tr>
+            <td style="padding:24px 48px;border-top:1px solid rgba(255,255,255,0.1);">
+              <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.4);line-height:1.6;">
+                Kunstenkamp vzw — Een initiatief voor en door kunstenaars.
+              </p>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`;
+}
+
+/**
+ * Send a deduction notification email to the cardholder.
+ * Fire-and-forget: errors are logged but not re-thrown.
+ */
+export async function sendDeductionEmail(params: {
+	to: string;
+	firstName: string;
+	amountCents: number;
+	newBalanceCents: number;
+}): Promise<void> {
+	const transport = getTransport();
+	if (!transport) {
+		console.warn("SMTP not configured — skipping deduction email");
+		return;
+	}
+
+	const now = new Date();
+	const dateTime = now.toLocaleString("nl-BE", {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+
+	const amountFormatted = new Intl.NumberFormat("nl-BE", {
+		style: "currency",
+		currency: "EUR",
+	}).format(params.amountCents / 100);
+
+	await transport.sendMail({
+		from,
+		to: params.to,
+		subject: `Drinkkaart — ${amountFormatted} afgeschreven`,
+		html: deductionHtml({
+			firstName: params.firstName,
+			amountCents: params.amountCents,
+			newBalanceCents: params.newBalanceCents,
+			dateTime,
+			drinkkaartUrl: `${baseUrl}/drinkkaart`,
+		}),
+	});
+}
--- a/packages/api/src/lib/drinkkaart-utils.ts
+++ b/packages/api/src/lib/drinkkaart-utils.ts
@@ -0,0 +1,120 @@
+// QR token utilities for Drinkkaart using Web Crypto API
+// Compatible with Cloudflare Workers (no node:crypto dependency).
+
+const QR_TOKEN_TTL_MS = 5 * 60 * 1000; // 5 minutes
+
+interface QrPayload {
+	drinkkaartId: string;
+	userId: string;
+	iat: number;
+	exp: number;
+}
+
+function toBase64Url(buffer: ArrayBuffer): string {
+	return btoa(String.fromCharCode(...new Uint8Array(buffer)))
+		.replace(/\+/g, "-")
+		.replace(/\//g, "_")
+		.replace(/=/g, "");
+}
+
+function base64UrlToBuffer(str: string): Uint8Array<ArrayBuffer> {
+	const base64 = str.replace(/-/g, "+").replace(/_/g, "/");
+	const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+	// Ensure the underlying buffer is a plain ArrayBuffer (required by crypto.subtle)
+	return new Uint8Array(bytes.buffer.slice(0));
+}
+
+/** Generate a cryptographically secure 32-byte hex secret for a new Drinkkaart. */
+export function generateQrSecret(): string {
+	const bytes = new Uint8Array(32);
+	crypto.getRandomValues(bytes);
+	return Array.from(bytes)
+		.map((b) => b.toString(16).padStart(2, "0"))
+		.join("");
+}
+
+/**
+ * Sign a QR token for the given drinkkaart / user.
+ * Returns the compact token string and the expiry date.
+ */
+export async function signQrToken(
+	payload: Omit<QrPayload, "iat" | "exp">,
+	qrSecret: string,
+	authSecret: string,
+): Promise<{ token: string; expiresAt: Date }> {
+	const now = Date.now();
+	const exp = now + QR_TOKEN_TTL_MS;
+	const full: QrPayload = { ...payload, iat: now, exp };
+
+	const encodedPayload = btoa(JSON.stringify(full))
+		.replace(/\+/g, "-")
+		.replace(/\//g, "_")
+		.replace(/=/g, "");
+
+	const keyData = new TextEncoder().encode(qrSecret + authSecret);
+	const key = await crypto.subtle.importKey(
+		"raw",
+		keyData,
+		{ name: "HMAC", hash: "SHA-256" },
+		false,
+		["sign"],
+	);
+
+	const sigBuffer = await crypto.subtle.sign(
+		"HMAC",
+		key,
+		new TextEncoder().encode(encodedPayload),
+	);
+	const sig = toBase64Url(sigBuffer);
+
+	return { token: `${encodedPayload}.${sig}`, expiresAt: new Date(exp) };
+}
+
+/**
+ * Verify a QR token. Throws if the signature is invalid or the token is expired.
+ * Returns the decoded payload.
+ */
+export async function verifyQrToken(
+	token: string,
+	qrSecret: string,
+	authSecret: string,
+): Promise<QrPayload> {
+	const parts = token.split(".");
+	if (parts.length !== 2) throw new Error("MALFORMED");
+
+	const [encodedPayload, providedSig] = parts as [string, string];
+
+	const keyData = new TextEncoder().encode(qrSecret + authSecret);
+	const key = await crypto.subtle.importKey(
+		"raw",
+		keyData,
+		{ name: "HMAC", hash: "SHA-256" },
+		false,
+		["verify"],
+	);
+
+	const sigBytes = base64UrlToBuffer(providedSig);
+	const valid = await crypto.subtle.verify(
+		"HMAC",
+		key,
+		sigBytes,
+		new TextEncoder().encode(encodedPayload),
+	);
+	if (!valid) throw new Error("INVALID_SIGNATURE");
+
+	const payload: QrPayload = JSON.parse(
+		atob(encodedPayload.replace(/-/g, "+").replace(/_/g, "/")),
+	);
+
+	if (Date.now() > payload.exp) throw new Error("EXPIRED");
+
+	return payload;
+}
+
+/** Format a cents integer as a Belgian euro string, e.g. 1250 → "€ 12,50". */
+export function formatCents(cents: number): string {
+	return new Intl.NumberFormat("nl-BE", {
+		style: "currency",
+		currency: "EUR",
+	}).format(cents / 100);
+}
--- a/packages/api/src/routers/drinkkaart.ts
+++ b/packages/api/src/routers/drinkkaart.ts
@@ -0,0 +1,742 @@
+import { randomUUID } from "node:crypto";
+import { db } from "@kk/db";
+import {
+	drinkkaart,
+	drinkkaartTopup,
+	drinkkaartTransaction,
+} from "@kk/db/schema";
+import { user } from "@kk/db/schema/auth";
+import { ORPCError } from "@orpc/server";
+import { and, desc, eq, gte, lte, sql } from "drizzle-orm";
+import { z } from "zod";
+import { adminProcedure, protectedProcedure } from "../index";
+import { sendDeductionEmail } from "../lib/drinkkaart-email";
+import {
+	formatCents,
+	generateQrSecret,
+	signQrToken,
+	verifyQrToken,
+} from "../lib/drinkkaart-utils";
+
+// ---------------------------------------------------------------------------
+// Internal helper: get or create the drinkkaart row for a user
+// ---------------------------------------------------------------------------
+
+async function getOrCreateDrinkkaart(userId: string) {
+	const rows = await db
+		.select()
+		.from(drinkkaart)
+		.where(eq(drinkkaart.userId, userId))
+		.limit(1);
+
+	if (rows[0]) return rows[0];
+
+	const now = new Date();
+	const newCard = {
+		id: randomUUID(),
+		userId,
+		balance: 0,
+		version: 0,
+		qrSecret: generateQrSecret(),
+		createdAt: now,
+		updatedAt: now,
+	};
+	await db.insert(drinkkaart).values(newCard);
+	return newCard;
+}
+
+// ---------------------------------------------------------------------------
+// Router procedures
+// ---------------------------------------------------------------------------
+
+export const drinkkaartRouter = {
+	// -------------------------------------------------------------------------
+	// 4.1 getMyDrinkkaart
+	// -------------------------------------------------------------------------
+	getMyDrinkkaart: protectedProcedure.handler(async ({ context }) => {
+		const userId = context.session.user.id;
+		const card = await getOrCreateDrinkkaart(userId);
+
+		const [topups, transactions] = await Promise.all([
+			db
+				.select()
+				.from(drinkkaartTopup)
+				.where(eq(drinkkaartTopup.drinkkaartId, card.id))
+				.orderBy(desc(drinkkaartTopup.paidAt))
+				.limit(50),
+			db
+				.select()
+				.from(drinkkaartTransaction)
+				.where(eq(drinkkaartTransaction.drinkkaartId, card.id))
+				.orderBy(desc(drinkkaartTransaction.createdAt))
+				.limit(50),
+		]);
+
+		return {
+			id: card.id,
+			balance: card.balance,
+			balanceFormatted: formatCents(card.balance),
+			createdAt: card.createdAt,
+			updatedAt: card.updatedAt,
+			topups: topups.map((t) => ({
+				id: t.id,
+				type: t.type,
+				amountCents: t.amountCents,
+				balanceBefore: t.balanceBefore,
+				balanceAfter: t.balanceAfter,
+				reason: t.reason,
+				paidAt: t.paidAt,
+			})),
+			transactions: transactions.map((t) => ({
+				id: t.id,
+				type: t.type,
+				amountCents: t.amountCents,
+				balanceBefore: t.balanceBefore,
+				balanceAfter: t.balanceAfter,
+				note: t.note,
+				reversedBy: t.reversedBy,
+				reverses: t.reverses,
+				createdAt: t.createdAt,
+			})),
+		};
+	}),
+
+	// -------------------------------------------------------------------------
+	// 4.2 getMyQrToken
+	// -------------------------------------------------------------------------
+	getMyQrToken: protectedProcedure.handler(async ({ context }) => {
+		const userId = context.session.user.id;
+		const card = await getOrCreateDrinkkaart(userId);
+
+		const authSecret = context.env.BETTER_AUTH_SECRET;
+		const { token, expiresAt } = await signQrToken(
+			{ drinkkaartId: card.id, userId },
+			card.qrSecret,
+			authSecret,
+		);
+
+		return { token, expiresAt };
+	}),
+
+	// -------------------------------------------------------------------------
+	// 4.3 getTopUpCheckoutUrl
+	// -------------------------------------------------------------------------
+	getTopUpCheckoutUrl: protectedProcedure
+		.input(
+			z.object({
+				amountCents: z
+					.number()
+					.int()
+					.min(100, "Minimumbedrag is € 1,00")
+					.max(50000, "Maximumbedrag is € 500,00"),
+			}),
+		)
+		.handler(async ({ input, context }) => {
+			const { env: serverEnv, session } = context;
+
+			if (
+				!serverEnv.LEMON_SQUEEZY_API_KEY ||
+				!serverEnv.LEMON_SQUEEZY_STORE_ID ||
+				!serverEnv.LEMON_SQUEEZY_VARIANT_ID
+			) {
+				throw new ORPCError("INTERNAL_SERVER_ERROR", {
+					message: "LemonSqueezy is niet geconfigureerd",
+				});
+			}
+
+			const card = await getOrCreateDrinkkaart(session.user.id);
+
+			const response = await fetch(
+				"https://api.lemonsqueezy.com/v1/checkouts",
+				{
+					method: "POST",
+					headers: {
+						Accept: "application/vnd.api+json",
+						"Content-Type": "application/vnd.api+json",
+						Authorization: `Bearer ${serverEnv.LEMON_SQUEEZY_API_KEY}`,
+					},
+					body: JSON.stringify({
+						data: {
+							type: "checkouts",
+							attributes: {
+								custom_price: input.amountCents,
+								product_options: {
+									name: "Drinkkaart Opladen",
+									description: `Opwaardering van ${formatCents(input.amountCents)}`,
+									redirect_url: `${serverEnv.BETTER_AUTH_URL}/account?topup=success`,
+								},
+								checkout_data: {
+									email: session.user.email,
+									name: session.user.name,
+									custom: {
+										type: "drinkkaart_topup",
+										drinkkaartId: card.id,
+										userId: session.user.id,
+									},
+								},
+								checkout_options: {
+									embed: false,
+									locale: "nl",
+								},
+							},
+							relationships: {
+								store: {
+									data: {
+										type: "stores",
+										id: serverEnv.LEMON_SQUEEZY_STORE_ID,
+									},
+								},
+								variant: {
+									data: {
+										type: "variants",
+										id: serverEnv.LEMON_SQUEEZY_VARIANT_ID,
+									},
+								},
+							},
+						},
+					}),
+				},
+			);
+
+			if (!response.ok) {
+				const errorData = await response.json();
+				console.error("LemonSqueezy Drinkkaart checkout error:", errorData);
+				throw new ORPCError("INTERNAL_SERVER_ERROR", {
+					message: "Kon checkout niet aanmaken",
+				});
+			}
+
+			const data = (await response.json()) as {
+				data?: { attributes?: { url?: string } };
+			};
+			const checkoutUrl = data.data?.attributes?.url;
+			if (!checkoutUrl) {
+				throw new ORPCError("INTERNAL_SERVER_ERROR", {
+					message: "Geen checkout URL ontvangen",
+				});
+			}
+
+			return { checkoutUrl };
+		}),
+
+	// -------------------------------------------------------------------------
+	// 4.4 resolveQrToken (admin)
+	// -------------------------------------------------------------------------
+	resolveQrToken: adminProcedure
+		.input(z.object({ token: z.string().min(1) }))
+		.handler(async ({ input, context }) => {
+			let drinkkaartId: string;
+			let userId: string;
+
+			// Decode payload first to get the drinkkaartId for key lookup
+			const parts = input.token.split(".");
+			if (parts.length !== 2) {
+				throw new ORPCError("BAD_REQUEST", {
+					message: "Ongeldig QR-token formaat",
+				});
+			}
+
+			let rawPayload: { drinkkaartId: string; userId: string; exp: number };
+			try {
+				rawPayload = JSON.parse(
+					atob((parts[0] as string).replace(/-/g, "+").replace(/_/g, "/")),
+				);
+				drinkkaartId = rawPayload.drinkkaartId;
+				userId = rawPayload.userId;
+			} catch {
+				throw new ORPCError("BAD_REQUEST", { message: "Ongeldig QR-token" });
+			}
+
+			// Fetch the card to get the per-user secret
+			const card = await db
+				.select()
+				.from(drinkkaart)
+				.where(eq(drinkkaart.id, drinkkaartId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!card) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Drinkkaart niet gevonden",
+				});
+			}
+
+			// Verify HMAC and expiry
+			try {
+				await verifyQrToken(
+					input.token,
+					card.qrSecret,
+					context.env.BETTER_AUTH_SECRET,
+				);
+			} catch (err: unknown) {
+				const msg = (err as Error).message;
+				if (msg === "EXPIRED") {
+					throw new ORPCError("GONE", { message: "QR-token is verlopen" });
+				}
+				throw new ORPCError("UNAUTHORIZED", { message: "Ongeldig QR-token" });
+			}
+
+			// Fetch user
+			const cardUser = await db
+				.select({ id: user.id, name: user.name, email: user.email })
+				.from(user)
+				.where(eq(user.id, userId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!cardUser) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Gebruiker niet gevonden",
+				});
+			}
+
+			return {
+				drinkkaartId: card.id,
+				userId: cardUser.id,
+				userName: cardUser.name,
+				userEmail: cardUser.email,
+				balance: card.balance,
+				balanceFormatted: formatCents(card.balance),
+			};
+		}),
+
+	// -------------------------------------------------------------------------
+	// 4.5 deductBalance (admin)
+	// -------------------------------------------------------------------------
+	deductBalance: adminProcedure
+		.input(
+			z.object({
+				drinkkaartId: z.string().min(1),
+				amountCents: z.number().int().min(1),
+				note: z.string().max(200).optional(),
+			}),
+		)
+		.handler(async ({ input, context }) => {
+			const adminId = context.session.user.id;
+
+			const card = await db
+				.select()
+				.from(drinkkaart)
+				.where(eq(drinkkaart.id, input.drinkkaartId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!card) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Drinkkaart niet gevonden",
+				});
+			}
+
+			if (card.balance < input.amountCents) {
+				throw new ORPCError("UNPROCESSABLE_CONTENT", {
+					message: `Onvoldoende saldo. Huidig saldo: ${formatCents(card.balance)}`,
+				});
+			}
+
+			const balanceBefore = card.balance;
+			const balanceAfter = balanceBefore - input.amountCents;
+			const now = new Date();
+
+			// Optimistic lock update
+			const result = await db
+				.update(drinkkaart)
+				.set({
+					balance: balanceAfter,
+					version: card.version + 1,
+					updatedAt: now,
+				})
+				.where(
+					and(
+						eq(drinkkaart.id, input.drinkkaartId),
+						eq(drinkkaart.version, card.version),
+					),
+				);
+
+			if (result.rowsAffected === 0) {
+				throw new ORPCError("CONFLICT", {
+					message: "Gelijktijdige wijziging gedetecteerd. Probeer opnieuw.",
+				});
+			}
+
+			const transactionId = randomUUID();
+			await db.insert(drinkkaartTransaction).values({
+				id: transactionId,
+				drinkkaartId: card.id,
+				userId: card.userId,
+				adminId,
+				amountCents: input.amountCents,
+				balanceBefore,
+				balanceAfter,
+				type: "deduction",
+				note: input.note ?? null,
+				createdAt: now,
+			});
+
+			// Fire-and-forget deduction email
+			const cardUser = await db
+				.select({ email: user.email, name: user.name })
+				.from(user)
+				.where(eq(user.id, card.userId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (cardUser) {
+				sendDeductionEmail({
+					to: cardUser.email,
+					firstName: cardUser.name.split(" ")[0] ?? cardUser.name,
+					amountCents: input.amountCents,
+					newBalanceCents: balanceAfter,
+				}).catch((err) =>
+					console.error("Failed to send deduction email:", err),
+				);
+			}
+
+			return {
+				transactionId,
+				balanceBefore,
+				balanceAfter,
+				balanceFormatted: formatCents(balanceAfter),
+			};
+		}),
+
+	// -------------------------------------------------------------------------
+	// 4.6 adminCreditBalance (admin)
+	// -------------------------------------------------------------------------
+	adminCreditBalance: adminProcedure
+		.input(
+			z.object({
+				drinkkaartId: z.string().min(1),
+				amountCents: z.number().int().min(1),
+				reason: z.string().min(1).max(200),
+			}),
+		)
+		.handler(async ({ input, context }) => {
+			const adminId = context.session.user.id;
+
+			const card = await db
+				.select()
+				.from(drinkkaart)
+				.where(eq(drinkkaart.id, input.drinkkaartId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!card) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Drinkkaart niet gevonden",
+				});
+			}
+
+			const balanceBefore = card.balance;
+			const balanceAfter = balanceBefore + input.amountCents;
+			const now = new Date();
+
+			const result = await db
+				.update(drinkkaart)
+				.set({
+					balance: balanceAfter,
+					version: card.version + 1,
+					updatedAt: now,
+				})
+				.where(
+					and(
+						eq(drinkkaart.id, input.drinkkaartId),
+						eq(drinkkaart.version, card.version),
+					),
+				);
+
+			if (result.rowsAffected === 0) {
+				throw new ORPCError("CONFLICT", {
+					message: "Gelijktijdige wijziging gedetecteerd. Probeer opnieuw.",
+				});
+			}
+
+			const topupId = randomUUID();
+			await db.insert(drinkkaartTopup).values({
+				id: topupId,
+				drinkkaartId: card.id,
+				userId: card.userId,
+				amountCents: input.amountCents,
+				balanceBefore,
+				balanceAfter,
+				type: "admin_credit",
+				adminId,
+				reason: input.reason,
+				paidAt: now,
+			});
+
+			return {
+				topupId,
+				balanceBefore,
+				balanceAfter,
+				balanceFormatted: formatCents(balanceAfter),
+			};
+		}),
+
+	// -------------------------------------------------------------------------
+	// 4.7 reverseTransaction (admin)
+	// -------------------------------------------------------------------------
+	reverseTransaction: adminProcedure
+		.input(
+			z.object({
+				transactionId: z.string().min(1),
+				note: z.string().max(200).optional(),
+			}),
+		)
+		.handler(async ({ input, context }) => {
+			const adminId = context.session.user.id;
+
+			const original = await db
+				.select()
+				.from(drinkkaartTransaction)
+				.where(eq(drinkkaartTransaction.id, input.transactionId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!original) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Transactie niet gevonden",
+				});
+			}
+
+			if (original.type !== "deduction") {
+				throw new ORPCError("BAD_REQUEST", {
+					message: "Alleen afschrijvingen kunnen worden teruggedraaid",
+				});
+			}
+
+			if (original.reversedBy) {
+				throw new ORPCError("CONFLICT", {
+					message: "Deze transactie is al teruggedraaid",
+				});
+			}
+
+			const card = await db
+				.select()
+				.from(drinkkaart)
+				.where(eq(drinkkaart.id, original.drinkkaartId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!card) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Drinkkaart niet gevonden",
+				});
+			}
+
+			const balanceBefore = card.balance;
+			const balanceAfter = balanceBefore + original.amountCents;
+			const now = new Date();
+
+			const result = await db
+				.update(drinkkaart)
+				.set({
+					balance: balanceAfter,
+					version: card.version + 1,
+					updatedAt: now,
+				})
+				.where(
+					and(eq(drinkkaart.id, card.id), eq(drinkkaart.version, card.version)),
+				);
+
+			if (result.rowsAffected === 0) {
+				throw new ORPCError("CONFLICT", {
+					message: "Gelijktijdige wijziging gedetecteerd. Probeer opnieuw.",
+				});
+			}
+
+			const reversalId = randomUUID();
+
+			await db.insert(drinkkaartTransaction).values({
+				id: reversalId,
+				drinkkaartId: card.id,
+				userId: card.userId,
+				adminId,
+				amountCents: original.amountCents,
+				balanceBefore,
+				balanceAfter,
+				type: "reversal",
+				reverses: original.id,
+				note: input.note ?? null,
+				createdAt: now,
+			});
+
+			// Mark original as reversed
+			await db
+				.update(drinkkaartTransaction)
+				.set({ reversedBy: reversalId })
+				.where(eq(drinkkaartTransaction.id, original.id));
+
+			return {
+				reversalId,
+				balanceBefore,
+				balanceAfter,
+				balanceFormatted: formatCents(balanceAfter),
+			};
+		}),
+
+	// -------------------------------------------------------------------------
+	// 4.8 getTransactionLog (admin) — paginated audit log
+	// -------------------------------------------------------------------------
+	getTransactionLog: adminProcedure
+		.input(
+			z.object({
+				page: z.number().int().min(1).default(1),
+				pageSize: z.number().int().min(1).max(200).default(50),
+				userId: z.string().optional(),
+				adminId: z.string().optional(),
+				type: z.enum(["deduction", "reversal"]).optional(),
+				dateFrom: z.string().optional(),
+				dateTo: z.string().optional(),
+			}),
+		)
+		.handler(async ({ input }) => {
+			// Build conditions
+			const conditions = [];
+			if (input.userId) {
+				conditions.push(eq(drinkkaartTransaction.userId, input.userId));
+			}
+			if (input.adminId) {
+				conditions.push(eq(drinkkaartTransaction.adminId, input.adminId));
+			}
+			if (input.type) {
+				conditions.push(eq(drinkkaartTransaction.type, input.type));
+			}
+			if (input.dateFrom) {
+				conditions.push(
+					gte(drinkkaartTransaction.createdAt, new Date(input.dateFrom)),
+				);
+			}
+			if (input.dateTo) {
+				conditions.push(
+					lte(drinkkaartTransaction.createdAt, new Date(input.dateTo)),
+				);
+			}
+
+			const where = conditions.length > 0 ? and(...conditions) : undefined;
+
+			// Paginated results with user names
+			const offset = (input.page - 1) * input.pageSize;
+
+			const rows = await db
+				.select({
+					id: drinkkaartTransaction.id,
+					type: drinkkaartTransaction.type,
+					userId: drinkkaartTransaction.userId,
+					adminId: drinkkaartTransaction.adminId,
+					amountCents: drinkkaartTransaction.amountCents,
+					balanceBefore: drinkkaartTransaction.balanceBefore,
+					balanceAfter: drinkkaartTransaction.balanceAfter,
+					note: drinkkaartTransaction.note,
+					reversedBy: drinkkaartTransaction.reversedBy,
+					reverses: drinkkaartTransaction.reverses,
+					createdAt: drinkkaartTransaction.createdAt,
+				})
+				.from(drinkkaartTransaction)
+				.where(where)
+				.orderBy(desc(drinkkaartTransaction.createdAt))
+				.limit(input.pageSize)
+				.offset(offset);
+
+			// Collect unique user IDs
+			const userIds = [
+				...new Set([
+					...rows.map((r) => r.userId),
+					...rows.map((r) => r.adminId),
+				]),
+			];
+
+			const users =
+				userIds.length > 0
+					? await db
+							.select({ id: user.id, name: user.name, email: user.email })
+							.from(user)
+							.where(
+								userIds.length === 1
+									? eq(user.id, userIds[0] as string)
+									: sql`${user.id} IN (${sql.join(
+											userIds.map((id) => sql`${id}`),
+											sql`, `,
+										)})`,
+							)
+					: [];
+
+			const userMap = new Map(users.map((u) => [u.id, u]));
+
+			// Count total
+			const countResult = await db
+				.select({ count: sql<number>`count(*)` })
+				.from(drinkkaartTransaction)
+				.where(where);
+			const total = Number(countResult[0]?.count ?? 0);
+
+			return {
+				transactions: rows.map((r) => ({
+					id: r.id,
+					type: r.type,
+					userId: r.userId,
+					userName: userMap.get(r.userId)?.name ?? "Onbekend",
+					userEmail: userMap.get(r.userId)?.email ?? "",
+					adminId: r.adminId,
+					adminName: userMap.get(r.adminId)?.name ?? "Onbekend",
+					amountCents: r.amountCents,
+					balanceBefore: r.balanceBefore,
+					balanceAfter: r.balanceAfter,
+					note: r.note,
+					reversedBy: r.reversedBy,
+					reverses: r.reverses,
+					createdAt: r.createdAt,
+				})),
+				total,
+				page: input.page,
+				pageSize: input.pageSize,
+			};
+		}),
+
+	// -------------------------------------------------------------------------
+	// Extra: getDrinkkaartByUserId (admin) — for manual credit user search
+	// -------------------------------------------------------------------------
+	getDrinkkaartByUserId: adminProcedure
+		.input(z.object({ userId: z.string().min(1) }))
+		.handler(async ({ input }) => {
+			const cardUser = await db
+				.select({ id: user.id, name: user.name, email: user.email })
+				.from(user)
+				.where(eq(user.id, input.userId))
+				.limit(1)
+				.then((r) => r[0]);
+
+			if (!cardUser) {
+				throw new ORPCError("NOT_FOUND", {
+					message: "Gebruiker niet gevonden",
+				});
+			}
+
+			const card = await getOrCreateDrinkkaart(input.userId);
+
+			return {
+				drinkkaartId: card.id,
+				userId: cardUser.id,
+				userName: cardUser.name,
+				userEmail: cardUser.email,
+				balance: card.balance,
+				balanceFormatted: formatCents(card.balance),
+			};
+		}),
+
+	// -------------------------------------------------------------------------
+	// Extra: searchUsers (admin) — for manual credit user search UI
+	// -------------------------------------------------------------------------
+	searchUsers: adminProcedure
+		.input(z.object({ query: z.string().min(1) }))
+		.handler(async ({ input }) => {
+			const term = `%${input.query}%`;
+			const results = await db
+				.select({ id: user.id, name: user.name, email: user.email })
+				.from(user)
+				.where(
+					sql`lower(${user.name}) LIKE lower(${term}) OR lower(${user.email}) LIKE lower(${term})`,
+				)
+				.limit(20);
+			return results;
+		}),
+};
--- a/packages/api/src/routers/index.ts
+++ b/packages/api/src/routers/index.ts
@@ -2,24 +2,254 @@ import { randomUUID } from "node:crypto";
 import { db } from "@kk/db";
 import { adminRequest, registration } from "@kk/db/schema";
 import { user } from "@kk/db/schema/auth";
+import { drinkkaart, drinkkaartTopup } from "@kk/db/schema/drinkkaart";
+import { env } from "@kk/env/server";
 import type { RouterClient } from "@orpc/server";
-import { and, count, desc, eq, gte, like, lte } from "drizzle-orm";
+import { and, count, desc, eq, gte, isNull, like, lte, sum } from "drizzle-orm";
 import { z } from "zod";
+import {
+	sendCancellationEmail,
+	sendConfirmationEmail,
+	sendUpdateEmail,
+} from "../email";
 import { adminProcedure, protectedProcedure, publicProcedure } from "../index";
+import { generateQrSecret } from "../lib/drinkkaart-utils";
+import { drinkkaartRouter } from "./drinkkaart";

-const submitRegistrationSchema = z.object({
+// ---------------------------------------------------------------------------
+// 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;
+	birthdate?: string;
+	postcode?: string;
+}> {
+	if (!raw) return [];
+	try {
+		const parsed = JSON.parse(raw);
+		return Array.isArray(parsed) ? parsed : [];
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Credits a watcher's drinkCardValue to their drinkkaart account.
+ *
+ * Safe to call multiple times — the `drinkkaartCreditedAt IS NULL` guard and the
+ * `lemonsqueezy_order_id` UNIQUE constraint together prevent double-crediting even
+ * if called concurrently (webhook + signup racing each other).
+ *
+ * Returns a status string describing the outcome.
+ */
+export async function creditRegistrationToAccount(
+	email: string,
+	userId: string,
+): Promise<{
+	credited: boolean;
+	amountCents: number;
+	status:
+		| "credited"
+		| "already_credited"
+		| "no_paid_registration"
+		| "zero_value";
+}> {
+	// Find the most recent paid watcher registration for this email that hasn't
+	// been credited yet and has a non-zero drink card value.
+	const rows = await db
+		.select()
+		.from(registration)
+		.where(
+			and(
+				eq(registration.email, email),
+				eq(registration.registrationType, "watcher"),
+				eq(registration.paymentStatus, "paid"),
+				isNull(registration.cancelledAt),
+				isNull(registration.drinkkaartCreditedAt),
+			),
+		)
+		.orderBy(desc(registration.createdAt))
+		.limit(1);
+
+	const reg = rows[0];
+
+	if (!reg) {
+		// Either no paid registration exists, or it was already credited.
+		// Distinguish between the two for better logging.
+		const credited = await db
+			.select({ id: registration.id })
+			.from(registration)
+			.where(
+				and(
+					eq(registration.email, email),
+					eq(registration.registrationType, "watcher"),
+					eq(registration.paymentStatus, "paid"),
+					isNull(registration.cancelledAt),
+				),
+			)
+			.limit(1)
+			.then((r) => r[0]);
+
+		return {
+			credited: false,
+			amountCents: 0,
+			status: credited ? "already_credited" : "no_paid_registration",
+		};
+	}
+
+	const drinkCardValueEuros = reg.drinkCardValue ?? 0;
+	if (drinkCardValueEuros === 0) {
+		return { credited: false, amountCents: 0, status: "zero_value" };
+	}
+
+	const amountCents = drinkCardValueEuros * 100;
+
+	// Get or create the drinkkaart for this user.
+	let card = await db
+		.select()
+		.from(drinkkaart)
+		.where(eq(drinkkaart.userId, userId))
+		.limit(1)
+		.then((r) => r[0]);
+
+	if (!card) {
+		const now = new Date();
+		card = {
+			id: randomUUID(),
+			userId,
+			balance: 0,
+			version: 0,
+			qrSecret: generateQrSecret(),
+			createdAt: now,
+			updatedAt: now,
+		};
+		await db.insert(drinkkaart).values(card);
+	}
+
+	const balanceBefore = card.balance;
+	const balanceAfter = balanceBefore + amountCents;
+
+	// Optimistic-lock update — if concurrent, the second caller will see
+	// drinkkaartCreditedAt IS NOT NULL and return "already_credited" above.
+	const updateResult = await db
+		.update(drinkkaart)
+		.set({
+			balance: balanceAfter,
+			version: card.version + 1,
+			updatedAt: new Date(),
+		})
+		.where(
+			and(eq(drinkkaart.id, card.id), eq(drinkkaart.version, card.version)),
+		);
+
+	if (updateResult.rowsAffected === 0) {
+		// Lost the optimistic lock race — the other caller will handle it.
+		return { credited: false, amountCents: 0, status: "already_credited" };
+	}
+
+	// Record the topup. Re-use the registration's lemonsqueezyOrderId so the
+	// topup row is clearly linked to the original payment. We prefix with
+	// "reg_" to distinguish from direct drinkkaart top-up orders if needed.
+	const topupPaymentId = reg.lemonsqueezyOrderId
+		? `reg_${reg.lemonsqueezyOrderId}`
+		: null;
+
+	await db.insert(drinkkaartTopup).values({
+		id: randomUUID(),
+		drinkkaartId: card.id,
+		userId,
+		amountCents,
+		balanceBefore,
+		balanceAfter,
+		type: "payment",
+		lemonsqueezyOrderId: topupPaymentId,
+		adminId: null,
+		reason: "Drinkkaart bij registratie",
+		paidAt: reg.paidAt ?? new Date(),
+	});
+
+	// Mark the registration as credited — prevents any future double-credit.
+	await db
+		.update(registration)
+		.set({ drinkkaartCreditedAt: new Date() })
+		.where(eq(registration.id, reg.id));
+
+	return { credited: true, amountCents, status: "credited" };
+}
+
+/** 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({
+	firstName: z.string().min(1),
+	lastName: z.string().min(1),
+	email: z.string().email().optional().or(z.literal("")),
+	phone: z.string().optional(),
+	birthdate: z.string().min(1),
+	postcode: z.string().min(1),
+});
+
+const coreRegistrationFields = {
 	firstName: z.string().min(1),
 	lastName: z.string().min(1),
 	email: z.string().email(),
 	phone: z.string().optional(),
-	wantsToPerform: z.boolean().default(false),
+	postcode: z.string().min(1),
+	birthdate: z.string().min(1),
+	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(),
+	giftAmount: z.number().int().min(0).default(0),
+};
+
+const submitRegistrationSchema = z.object(coreRegistrationFields);
+
+const updateRegistrationSchema = z.object({
+	token: z.string().uuid(),
+	...coreRegistrationFields,
 });

 const getRegistrationsSchema = z.object({
 	search: z.string().optional(),
+	registrationType: registrationTypeSchema.optional(),
 	artForm: z.string().optional(),
 	fromDate: z.string().datetime().optional(),
 	toDate: z.string().datetime().optional(),
@@ -27,34 +257,167 @@ 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"),
+	drinkkaart: drinkkaartRouter,
+
+	privateData: protectedProcedure.handler(({ context }) => ({
+		message: "This is private",
+		user: context.session?.user,
+	})),

 	submitRegistration: publicProcedure
 		.input(submitRegistrationSchema)
 		.handler(async ({ input }) => {
-			const result = await db.insert(registration).values({
+			const managementToken = randomUUID();
+			const isPerformer = input.registrationType === "performer";
+			const guests = isPerformer ? [] : (input.guests ?? []);
+
+			await db.insert(registration).values({
 				id: randomUUID(),
 				firstName: input.firstName,
 				lastName: input.lastName,
 				email: input.email,
 				phone: input.phone || null,
-				wantsToPerform: input.wantsToPerform,
-				artForm: input.artForm || null,
-				experience: input.experience || null,
+				postcode: input.postcode,
+				birthdate: input.birthdate,
+				registrationType: input.registrationType,
+				artForm: isPerformer ? input.artForm || null : null,
+				experience: isPerformer ? input.experience || null : null,
+				isOver16: isPerformer ? (input.isOver16 ?? false) : false,
+				drinkCardValue: isPerformer ? 0 : drinkCardEuros(guests.length),
+				guests: guests.length > 0 ? JSON.stringify(guests) : null,
 				extraQuestions: input.extraQuestions || null,
+				giftAmount: input.giftAmount,
+				managementToken,
 			});

-			return { success: true, id: result.lastInsertRowid };
+			await sendConfirmationEmail({
+				to: input.email,
+				firstName: input.firstName,
+				managementToken,
+				wantsToPerform: isPerformer,
+				artForm: input.artForm,
+				giftAmount: input.giftAmount,
+				drinkCardValue: isPerformer ? 0 : drinkCardEuros(guests.length),
+			}).catch((err) =>
+				console.error("Failed to send confirmation email:", err),
+			);
+
+			return { success: true, managementToken };
+		}),
+
+	getRegistrationByToken: publicProcedure
+		.input(z.object({ token: z.string().uuid() }))
+		.handler(async ({ input }) => {
+			const rows = await db
+				.select()
+				.from(registration)
+				.where(eq(registration.managementToken, input.token))
+				.limit(1);
+
+			const row = rows[0];
+			if (!row) throw new Error("Inschrijving niet gevonden");
+			if (row.cancelledAt) throw new Error("Deze inschrijving is geannuleerd");
+
+			return row;
+		}),
+
+	updateRegistration: publicProcedure
+		.input(updateRegistrationSchema)
+		.handler(async ({ input }) => {
+			const row = await getActiveRegistration(input.token);
+
+			const isPerformer = input.registrationType === "performer";
+			const guests = isPerformer ? [] : (input.guests ?? []);
+
+			// Validate gift amount cannot be changed after payment
+			const hasPaidGift =
+				(row.paymentStatus === "paid" ||
+					row.paymentStatus === "extra_payment_pending") &&
+				(row.giftAmount ?? 0) > 0;
+			if (hasPaidGift && input.giftAmount !== row.giftAmount) {
+				throw new Error(
+					"Gift kan niet worden aangepast na betaling. Neem contact op met de organisatie.",
+				);
+			}
+
+			// Detect whether an already-paid watcher is adding extra guests so we
+			// can charge them the delta instead of the full amount.
+			const isPaid = row.paymentStatus === "paid";
+			const oldGuestCount = isPerformer
+				? 0
+				: parseGuestsJson(row.guests).length;
+			const newGuestCount = guests.length;
+			const extraGuests =
+				!isPerformer && isPaid ? newGuestCount - oldGuestCount : 0;
+
+			// Determine the new paymentStatus and paymentAmount (delta in cents).
+			// Only flag extra_payment_pending when the watcher genuinely owes more.
+			const newPaymentStatus =
+				isPaid && extraGuests > 0 ? "extra_payment_pending" : row.paymentStatus;
+			const newPaymentAmount =
+				newPaymentStatus === "extra_payment_pending"
+					? extraGuests * 2 * 100 // €2 per extra guest, in cents
+					: row.paymentAmount;
+
+			await db
+				.update(registration)
+				.set({
+					firstName: input.firstName,
+					lastName: input.lastName,
+					email: input.email,
+					phone: input.phone || null,
+					postcode: input.postcode,
+					birthdate: input.birthdate,
+					registrationType: input.registrationType,
+					artForm: isPerformer ? input.artForm || null : null,
+					experience: isPerformer ? input.experience || null : null,
+					isOver16: isPerformer ? (input.isOver16 ?? false) : false,
+					drinkCardValue: isPerformer ? 0 : drinkCardEuros(guests.length),
+					guests: guests.length > 0 ? JSON.stringify(guests) : null,
+					extraQuestions: input.extraQuestions || null,
+					giftAmount: input.giftAmount,
+					paymentStatus: newPaymentStatus,
+					paymentAmount: newPaymentAmount,
+				})
+				.where(eq(registration.managementToken, input.token));
+
+			await sendUpdateEmail({
+				to: input.email,
+				firstName: input.firstName,
+				managementToken: input.token,
+				wantsToPerform: isPerformer,
+				artForm: input.artForm,
+				giftAmount: input.giftAmount,
+				drinkCardValue: isPerformer ? 0 : drinkCardEuros(guests.length),
+			}).catch((err) => console.error("Failed to send update email:", err));
+
+			return { success: true };
+		}),
+
+	cancelRegistration: publicProcedure
+		.input(z.object({ token: z.string().uuid() }))
+		.handler(async ({ input }) => {
+			const row = await getActiveRegistration(input.token);
+
+			await db
+				.update(registration)
+				.set({ cancelledAt: new Date() })
+				.where(eq(registration.managementToken, input.token));
+
+			await sendCancellationEmail({
+				to: row.email,
+				firstName: row.firstName,
+			}).catch((err) =>
+				console.error("Failed to send cancellation email:", err),
+			);
+
+			return { success: true };
 		}),

 	getRegistrations: adminProcedure
@@ -63,40 +426,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.artForm) {
+			if (input.registrationType)
+				conditions.push(
+					eq(registration.registrationType, input.registrationType),
+				);
+			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;
@@ -116,20 +476,27 @@ export const appRouter = {
 		const today = new Date();
 		today.setHours(0, 0, 0, 0);

-		const [totalResult, todayResult, artFormResult] = await Promise.all([
-			db.select({ count: count() }).from(registration),
-			db
-				.select({ count: count() })
-				.from(registration)
-				.where(gte(registration.createdAt, today)),
-			db
-				.select({
-					artForm: registration.artForm,
-					count: count(),
-				})
-				.from(registration)
-				.groupBy(registration.artForm),
-		]);
+		const [totalResult, todayResult, artFormResult, typeResult, giftResult] =
+			await Promise.all([
+				db.select({ count: count() }).from(registration),
+				db
+					.select({ count: count() })
+					.from(registration)
+					.where(gte(registration.createdAt, today)),
+				db
+					.select({ artForm: registration.artForm, count: count() })
+					.from(registration)
+					.where(eq(registration.registrationType, "performer"))
+					.groupBy(registration.artForm),
+				db
+					.select({
+						registrationType: registration.registrationType,
+						count: count(),
+					})
+					.from(registration)
+					.groupBy(registration.registrationType),
+				db.select({ total: sum(registration.giftAmount) }).from(registration),
+			]);

 		return {
 			total: totalResult[0]?.count ?? 0,
@@ -138,6 +505,11 @@ export const appRouter = {
 				artForm: r.artForm,
 				count: r.count,
 			})),
+			byType: typeResult.map((r) => ({
+				registrationType: r.registrationType,
+				count: r.count,
+			})),
+			totalGiftRevenue: giftResult[0]?.total ?? 0,
 		};
 	}),

@@ -153,24 +525,52 @@ export const appRouter = {
 			"Last Name",
 			"Email",
 			"Phone",
-			"Wants To Perform",
+			"Postcode",
+			"Birthdate",
+			"Type",
 			"Art Form",
 			"Experience",
+			"Is Over 16",
+			"Drink Card Value",
+			"Gift Amount",
+			"Guest Count",
+			"Guests",
+			"Payment Status",
+			"Paid At",
 			"Extra Questions",
 			"Created At",
 		];
-		const rows = data.map((r) => [
-			r.id,
-			r.firstName,
-			r.lastName,
-			r.email,
-			r.phone || "",
-			r.wantsToPerform ? "Yes" : "No",
-			r.artForm || "",
-			r.experience || "",
-			r.extraQuestions || "",
-			r.createdAt.toISOString(),
-		]);
+
+		const rows = data.map((r) => {
+			const guests = parseGuestsJson(r.guests);
+			const guestSummary = guests
+				.map(
+					(g) =>
+						`${g.firstName} ${g.lastName}${g.birthdate ? ` (${g.birthdate})` : ""}${g.postcode ? ` [${g.postcode}]` : ""}${g.email ? ` <${g.email}>` : ""}${g.phone ? ` (${g.phone})` : ""}`,
+				)
+				.join(" | ");
+			return [
+				r.id,
+				r.firstName,
+				r.lastName,
+				r.email,
+				r.phone || "",
+				r.postcode || "",
+				r.birthdate || "",
+				r.registrationType,
+				r.artForm || "",
+				r.experience || "",
+				r.isOver16 ? "Yes" : "No",
+				String(r.drinkCardValue ?? 0),
+				String(r.giftAmount ?? 0),
+				String(guests.length),
+				guestSummary,
+				r.paymentStatus === "paid" ? "Paid" : "Pending",
+				r.paidAt ? r.paidAt.toISOString() : "",
+				r.extraQuestions || "",
+				r.createdAt.toISOString(),
+			];
+		});

 		const csvContent = [
 			headers.join(","),
@@ -185,48 +585,77 @@ export const appRouter = {
 		};
 	}),

-	// Admin Request Procedures
+	// ---------------------------------------------------------------------------
+	// User account
+	// ---------------------------------------------------------------------------
+
+	claimRegistrationCredit: protectedProcedure.handler(async ({ context }) => {
+		const result = await creditRegistrationToAccount(
+			context.session.user.email,
+			context.session.user.id,
+		);
+		return result;
+	}),
+
+	getMyRegistrations: protectedProcedure.handler(async ({ context }) => {
+		const email = context.session.user.email;
+
+		const rows = await db
+			.select()
+			.from(registration)
+			.where(
+				and(eq(registration.email, email), isNull(registration.cancelledAt)),
+			)
+			.orderBy(desc(registration.createdAt));
+
+		return rows.map((row) => ({
+			...row,
+			guests: parseGuestsJson(row.guests),
+		}));
+	}),
+
+	// ---------------------------------------------------------------------------
+	// 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) {
-			if (existingRequest[0].status === "pending") {
-				return { success: false, message: "Je hebt al een aanvraag openstaan" };
-			}
-			if (existingRequest[0].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 (existingRequest[0].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,
@@ -237,7 +666,7 @@ export const appRouter = {
 	}),

 	getAdminRequests: adminProcedure.handler(async () => {
-		const requests = await db
+		return db
 			.select({
 				id: adminRequest.id,
 				userId: adminRequest.userId,
@@ -251,28 +680,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");
-			}
-
-			if (request[0].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({
@@ -282,11 +705,10 @@ export const appRouter = {
 				})
 				.where(eq(adminRequest.id, input.requestId));

-			// Update user role to admin
 			await db
 				.update(user)
 				.set({ role: "admin" })
-				.where(eq(user.id, request[0].userId));
+				.where(eq(user.id, req.userId));

 			return { success: true, message: "Admin toegang goedgekeurd" };
 		}),
@@ -294,19 +716,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");
-			}
-
-			if (request[0].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)
@@ -319,6 +738,142 @@ export const appRouter = {

 			return { success: true, message: "Admin toegang geweigerd" };
 		}),
+
+	// ---------------------------------------------------------------------------
+	// Checkout
+	// ---------------------------------------------------------------------------
+
+	getCheckoutUrl: publicProcedure
+		.input(
+			z.object({
+				token: z.string().uuid(),
+				redirectUrl: z.string().optional(),
+			}),
+		)
+		.handler(async ({ input }) => {
+			if (
+				!env.LEMON_SQUEEZY_API_KEY ||
+				!env.LEMON_SQUEEZY_STORE_ID ||
+				!env.LEMON_SQUEEZY_VARIANT_ID
+			) {
+				throw new Error("LemonSqueezy is niet geconfigureerd");
+			}
+
+			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");
+			if (row.paymentStatus === "paid")
+				throw new Error("Betaling is al voltooid");
+			if (
+				row.paymentStatus !== "pending" &&
+				row.paymentStatus !== "extra_payment_pending"
+			)
+				throw new Error("Onverwachte betalingsstatus");
+
+			const isPerformer = row.registrationType === "performer";
+			const guests = parseGuestsJson(row.guests);
+			const giftTotal = row.giftAmount ?? 0;
+
+			// Performers only pay if they have a gift; watchers pay drink card + gift
+			if (isPerformer && giftTotal === 0) {
+				throw new Error("Artiesten hoeven niet te betalen");
+			}
+
+			// For an extra_payment_pending registration, charge only the delta
+			// (stored in paymentAmount in cents). For a fresh pending registration
+			// charge the full drink card price. Always add any gift amount.
+			const isExtraPayment = row.paymentStatus === "extra_payment_pending";
+			const drinkCardTotal = isExtraPayment
+				? (row.paymentAmount ?? 0)
+				: isPerformer
+					? 0
+					: drinkCardCents(guests.length);
+			const amountInCents = drinkCardTotal + giftTotal;
+
+			const productDescription = isExtraPayment
+				? `Extra bijdrage${giftTotal > 0 ? " + gift" : ""}`
+				: isPerformer
+					? `Vrijwillige gift${drinkCardTotal > 0 ? " + drinkkaart" : ""}`
+					: `Toegangskaart${giftTotal > 0 ? " + gift" : ""}`;
+
+			const redirectUrl =
+				input.redirectUrl ?? `${env.CORS_ORIGIN}/manage/${input.token}`;
+
+			const response = await fetch(
+				"https://api.lemonsqueezy.com/v1/checkouts",
+				{
+					method: "POST",
+					headers: {
+						Accept: "application/vnd.api+json",
+						"Content-Type": "application/vnd.api+json",
+						Authorization: `Bearer ${env.LEMON_SQUEEZY_API_KEY}`,
+					},
+					body: JSON.stringify({
+						data: {
+							type: "checkouts",
+							attributes: {
+								custom_price: amountInCents,
+								product_options: {
+									name: "Kunstenkamp Evenement",
+									description: productDescription,
+									redirect_url: redirectUrl,
+								},
+								checkout_data: {
+									email: row.email,
+									name: `${row.firstName} ${row.lastName}`,
+									custom: {
+										registration_token: input.token,
+									},
+								},
+								checkout_options: {
+									embed: false,
+									locale: "nl",
+								},
+							},
+							relationships: {
+								store: {
+									data: {
+										type: "stores",
+										id: env.LEMON_SQUEEZY_STORE_ID,
+									},
+								},
+								variant: {
+									data: {
+										type: "variants",
+										id: env.LEMON_SQUEEZY_VARIANT_ID,
+									},
+								},
+							},
+						},
+					}),
+				},
+			);
+
+			if (!response.ok) {
+				const errorData = await response.json();
+				console.error("LemonSqueezy checkout error:", errorData);
+				throw new Error("Kon checkout niet aanmaken");
+			}
+
+			const checkoutData = (await response.json()) as {
+				data?: { attributes?: { url?: string } };
+			};
+			const checkoutUrl = checkoutData.data?.attributes?.url;
+
+			if (!checkoutUrl) throw new Error("Geen checkout URL ontvangen");
+
+			return { checkoutUrl };
+		}),
 };

 export type AppRouter = typeof appRouter;
--- a/packages/auth/src/index.ts
+++ b/packages/auth/src/index.ts
@@ -1,3 +1,4 @@
+import { randomBytes, scryptSync } from "node:crypto";
 import { db } from "@kk/db";
 import * as schema from "@kk/db/schema/auth";
 import { env } from "@kk/env/server";
@@ -11,9 +12,29 @@ export const auth = betterAuth({

 		schema: schema,
 	}),
-	trustedOrigins: [env.CORS_ORIGIN],
+	trustedOrigins: [
+		env.CORS_ORIGIN,
+		"http://localhost:3000",
+		"http://localhost:3001",
+	],
 	emailAndPassword: {
 		enabled: true,
+		// Use Cloudflare's native scrypt via node:crypto for better performance
+		// This avoids CPU time limit errors on Cloudflare Workers
+		password: {
+			hash: async (password) => {
+				const salt = randomBytes(16).toString("hex");
+				const hash = scryptSync(password, salt, 64).toString("hex");
+				return `${salt}:${hash}`;
+			},
+			verify: async ({ hash, password }) => {
+				const [salt, key] = hash.split(":");
+				if (!salt || !key) return false;
+				const keyBuffer = Buffer.from(key, "hex");
+				const hashBuffer = scryptSync(password, salt, 64);
+				return keyBuffer.equals(hashBuffer);
+			},
+		},
 	},
 	user: {
 		additionalFields: {
--- a/packages/db/drizzle.config.ts
+++ b/packages/db/drizzle.config.ts
@@ -2,7 +2,7 @@ import dotenv from "dotenv";
 import { defineConfig } from "drizzle-kit";

 dotenv.config({
-	path: "../../apps/web/.env",
+	path: "../env/.env",
 });

 export default defineConfig({
--- a/packages/db/src/migrations/0001_third_stark_industries.sql
+++ b/packages/db/src/migrations/0001_third_stark_industries.sql
@@ -0,0 +1,4 @@
+ALTER TABLE `registration` ADD `management_token` text;--> statement-breakpoint
+ALTER TABLE `registration` ADD `cancelled_at` integer;--> statement-breakpoint
+CREATE UNIQUE INDEX `registration_management_token_unique` ON `registration` (`management_token`);--> statement-breakpoint
+CREATE INDEX `registration_managementToken_idx` ON `registration` (`management_token`);
--- a/packages/db/src/migrations/0002_registration_type_redesign.sql
+++ b/packages/db/src/migrations/0002_registration_type_redesign.sql
@@ -0,0 +1,20 @@
+-- Migration: Replace wantsToPerform with registrationType + add isOver16 + drinkCardValue
+-- Migrate existing 'wants_to_perform' data to 'registration_type' before dropping
+
+ALTER TABLE `registration` ADD `registration_type` text NOT NULL DEFAULT 'watcher';--> statement-breakpoint
+ALTER TABLE `registration` ADD `is_over_16` integer NOT NULL DEFAULT false;--> statement-breakpoint
+ALTER TABLE `registration` ADD `drink_card_value` integer DEFAULT 0;--> statement-breakpoint
+
+-- Backfill registration_type from wants_to_perform
+UPDATE `registration` SET `registration_type` = 'performer' WHERE `wants_to_perform` = 1;--> statement-breakpoint
+UPDATE `registration` SET `registration_type` = 'watcher' WHERE `wants_to_perform` = 0;--> statement-breakpoint
+
+-- Backfill drink_card_value for watchers
+UPDATE `registration` SET `drink_card_value` = 5 WHERE `wants_to_perform` = 0;--> statement-breakpoint
+
+-- Create index on registration_type
+CREATE INDEX `registration_registrationType_idx` ON `registration` (`registration_type`);--> statement-breakpoint
+
+-- Drop old wants_to_perform column (SQLite requires recreating the table)
+-- SQLite doesn't support DROP COLUMN directly in older versions, but Turso/libSQL does
+ALTER TABLE `registration` DROP COLUMN `wants_to_perform`;
--- a/packages/db/src/migrations/0003_add_guests.sql
+++ b/packages/db/src/migrations/0003_add_guests.sql
@@ -0,0 +1,2 @@
+-- Migration: Add guests column (JSON text) to registration table
+ALTER TABLE `registration` ADD `guests` text;
--- a/packages/db/src/migrations/0004_drinkkaart.sql
+++ b/packages/db/src/migrations/0004_drinkkaart.sql
@@ -0,0 +1,56 @@
+-- Migration: Add Drinkkaart digital balance card tables
+CREATE TABLE `drinkkaart` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` text NOT NULL,
+	`balance` integer DEFAULT 0 NOT NULL,
+	`version` integer DEFAULT 0 NOT NULL,
+	`qr_secret` text NOT NULL,
+	`created_at` integer NOT NULL,
+	`updated_at` integer NOT NULL,
+	UNIQUE(`user_id`)
+);
+--> statement-breakpoint
+CREATE TABLE `drinkkaart_transaction` (
+	`id` text PRIMARY KEY NOT NULL,
+	`drinkkaart_id` text NOT NULL,
+	`user_id` text NOT NULL,
+	`admin_id` text NOT NULL,
+	`amount_cents` integer NOT NULL,
+	`balance_before` integer NOT NULL,
+	`balance_after` integer NOT NULL,
+	`type` text NOT NULL,
+	`reversed_by` text,
+	`reverses` text,
+	`note` text,
+	`created_at` integer NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `drinkkaart_topup` (
+	`id` text PRIMARY KEY NOT NULL,
+	`drinkkaart_id` text NOT NULL,
+	`user_id` text NOT NULL,
+	`amount_cents` integer NOT NULL,
+	`balance_before` integer NOT NULL,
+	`balance_after` integer NOT NULL,
+	`type` text NOT NULL,
+	`lemonsqueezy_order_id` text,
+	`lemonsqueezy_customer_id` text,
+	`admin_id` text,
+	`reason` text,
+	`paid_at` integer NOT NULL,
+	UNIQUE(`lemonsqueezy_order_id`)
+);
+--> statement-breakpoint
+CREATE INDEX `idx_drinkkaart_user_id` ON `drinkkaart` (`user_id`);
+--> statement-breakpoint
+CREATE INDEX `idx_dkt_drinkkaart_id` ON `drinkkaart_transaction` (`drinkkaart_id`);
+--> statement-breakpoint
+CREATE INDEX `idx_dkt_user_id` ON `drinkkaart_transaction` (`user_id`);
+--> statement-breakpoint
+CREATE INDEX `idx_dkt_admin_id` ON `drinkkaart_transaction` (`admin_id`);
+--> statement-breakpoint
+CREATE INDEX `idx_dkt_created_at` ON `drinkkaart_transaction` (`created_at`);
+--> statement-breakpoint
+CREATE INDEX `idx_dktu_drinkkaart_id` ON `drinkkaart_topup` (`drinkkaart_id`);
+--> statement-breakpoint
+CREATE INDEX `idx_dktu_user_id` ON `drinkkaart_topup` (`user_id`);
--- a/packages/db/src/migrations/0005_registration_drinkkaart_credit.sql
+++ b/packages/db/src/migrations/0005_registration_drinkkaart_credit.sql
@@ -0,0 +1,2 @@
+-- Migration: Track when a watcher's registration fee has been credited to their drinkkaart
+ALTER TABLE `registration` ADD COLUMN `drinkkaart_credited_at` integer;
--- a/packages/db/src/migrations/0006_mollie_migration.sql
+++ b/packages/db/src/migrations/0006_mollie_migration.sql
@@ -0,0 +1,17 @@
+-- Migrate from Lemonsqueezy to Mollie
+-- Renames payment provider columns in registration and drinkkaart_topup tables.
+
+-- registration table:
+--   lemonsqueezy_order_id    -> mollie_payment_id
+--   lemonsqueezy_customer_id -> dropped (Mollie does not return a persistent
+--                               customer ID for one-off payments)
+
+ALTER TABLE registration RENAME COLUMN lemonsqueezy_order_id TO mollie_payment_id;
+ALTER TABLE registration DROP COLUMN lemonsqueezy_customer_id;
+
+-- drinkkaart_topup table:
+--   lemonsqueezy_order_id    -> mollie_payment_id
+--   lemonsqueezy_customer_id -> dropped
+
+ALTER TABLE drinkkaart_topup RENAME COLUMN lemonsqueezy_order_id TO mollie_payment_id;
+ALTER TABLE drinkkaart_topup DROP COLUMN lemonsqueezy_customer_id;
--- a/packages/db/src/migrations/0007_lemonsqueezy_migration.sql
+++ b/packages/db/src/migrations/0007_lemonsqueezy_migration.sql
@@ -0,0 +1,15 @@
+-- Migrate from Mollie back to LemonSqueezy
+-- Renames payment provider columns in registration and drinkkaart_topup tables,
+-- and restores the lemonsqueezy_customer_id column on registration.
+
+-- registration table:
+--   mollie_payment_id -> lemonsqueezy_order_id
+--   (re-add) lemonsqueezy_customer_id
+
+ALTER TABLE registration RENAME COLUMN mollie_payment_id TO lemonsqueezy_order_id;
+ALTER TABLE registration ADD COLUMN lemonsqueezy_customer_id text;
+
+-- drinkkaart_topup table:
+--   mollie_payment_id -> lemonsqueezy_order_id
+
+ALTER TABLE drinkkaart_topup RENAME COLUMN mollie_payment_id TO lemonsqueezy_order_id;
--- a/packages/db/src/migrations/0008_add_postcode_birthdate.sql
+++ b/packages/db/src/migrations/0008_add_postcode_birthdate.sql
@@ -0,0 +1,2 @@
+ALTER TABLE registration ADD COLUMN postcode TEXT;
+ALTER TABLE registration ADD COLUMN birthdate TEXT;
--- a/packages/db/src/migrations/meta/0000_snapshot.json
+++ b/packages/db/src/migrations/meta/0000_snapshot.json
--- a/packages/db/src/migrations/meta/0001_snapshot.json
+++ b/packages/db/src/migrations/meta/0001_snapshot.json
@@ -0,0 +1,552 @@
+{
+	"version": "6",
+	"dialect": "sqlite",
+	"id": "d9a4f07e-e6ae-45d0-be82-c919ae7fbe09",
+	"prevId": "dfeebea6-5c6c-4f28-9ecf-daf1f35f23ea",
+	"tables": {
+		"admin_request": {
+			"name": "admin_request",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"status": {
+					"name": "status",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'pending'"
+				},
+				"requested_at": {
+					"name": "requested_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				},
+				"reviewed_at": {
+					"name": "reviewed_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"reviewed_by": {
+					"name": "reviewed_by",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"admin_request_user_id_unique": {
+					"name": "admin_request_user_id_unique",
+					"columns": ["user_id"],
+					"isUnique": true
+				},
+				"admin_request_userId_idx": {
+					"name": "admin_request_userId_idx",
+					"columns": ["user_id"],
+					"isUnique": false
+				},
+				"admin_request_status_idx": {
+					"name": "admin_request_status_idx",
+					"columns": ["status"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"account": {
+			"name": "account",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"account_id": {
+					"name": "account_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"provider_id": {
+					"name": "provider_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"access_token": {
+					"name": "access_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"refresh_token": {
+					"name": "refresh_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"id_token": {
+					"name": "id_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"access_token_expires_at": {
+					"name": "access_token_expires_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"refresh_token_expires_at": {
+					"name": "refresh_token_expires_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"scope": {
+					"name": "scope",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"password": {
+					"name": "password",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"account_userId_idx": {
+					"name": "account_userId_idx",
+					"columns": ["user_id"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"account_user_id_user_id_fk": {
+					"name": "account_user_id_user_id_fk",
+					"tableFrom": "account",
+					"tableTo": "user",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"session": {
+			"name": "session",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"token": {
+					"name": "token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"ip_address": {
+					"name": "ip_address",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"user_agent": {
+					"name": "user_agent",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"session_token_unique": {
+					"name": "session_token_unique",
+					"columns": ["token"],
+					"isUnique": true
+				},
+				"session_userId_idx": {
+					"name": "session_userId_idx",
+					"columns": ["user_id"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"session_user_id_user_id_fk": {
+					"name": "session_user_id_user_id_fk",
+					"tableFrom": "session",
+					"tableTo": "user",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"user": {
+			"name": "user",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"email": {
+					"name": "email",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"email_verified": {
+					"name": "email_verified",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": false
+				},
+				"image": {
+					"name": "image",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"role": {
+					"name": "role",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'user'"
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				}
+			},
+			"indexes": {
+				"user_email_unique": {
+					"name": "user_email_unique",
+					"columns": ["email"],
+					"isUnique": true
+				}
+			},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"verification": {
+			"name": "verification",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"identifier": {
+					"name": "identifier",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"value": {
+					"name": "value",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				}
+			},
+			"indexes": {
+				"verification_identifier_idx": {
+					"name": "verification_identifier_idx",
+					"columns": ["identifier"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		},
+		"registration": {
+			"name": "registration",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"first_name": {
+					"name": "first_name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"last_name": {
+					"name": "last_name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"email": {
+					"name": "email",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"phone": {
+					"name": "phone",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"wants_to_perform": {
+					"name": "wants_to_perform",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": false
+				},
+				"art_form": {
+					"name": "art_form",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"experience": {
+					"name": "experience",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"extra_questions": {
+					"name": "extra_questions",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"management_token": {
+					"name": "management_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"cancelled_at": {
+					"name": "cancelled_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "(cast(unixepoch('subsecond') * 1000 as integer))"
+				}
+			},
+			"indexes": {
+				"registration_management_token_unique": {
+					"name": "registration_management_token_unique",
+					"columns": ["management_token"],
+					"isUnique": true
+				},
+				"registration_email_idx": {
+					"name": "registration_email_idx",
+					"columns": ["email"],
+					"isUnique": false
+				},
+				"registration_artForm_idx": {
+					"name": "registration_artForm_idx",
+					"columns": ["art_form"],
+					"isUnique": false
+				},
+				"registration_createdAt_idx": {
+					"name": "registration_createdAt_idx",
+					"columns": ["created_at"],
+					"isUnique": false
+				},
+				"registration_managementToken_idx": {
+					"name": "registration_managementToken_idx",
+					"columns": ["management_token"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"checkConstraints": {}
+		}
+	},
+	"views": {},
+	"enums": {},
+	"_meta": {
+		"schemas": {},
+		"tables": {},
+		"columns": {}
+	},
+	"internal": {
+		"indexes": {}
+	}
+}
--- a/packages/db/src/migrations/meta/_journal.json
+++ b/packages/db/src/migrations/meta/_journal.json
@@ -1,13 +1,41 @@
 {
-  "version": "7",
-  "dialect": "sqlite",
-  "entries": [
-    {
-      "idx": 0,
-      "version": "6",
-      "when": 1772480169471,
-      "tag": "0000_mean_sunspot",
-      "breakpoints": true
-    }
-  ]
-}
+	"version": "7",
+	"dialect": "sqlite",
+	"entries": [
+		{
+			"idx": 0,
+			"version": "6",
+			"when": 1772480169471,
+			"tag": "0000_mean_sunspot",
+			"breakpoints": true
+		},
+		{
+			"idx": 1,
+			"version": "6",
+			"when": 1772480778632,
+			"tag": "0001_third_stark_industries",
+			"breakpoints": true
+		},
+		{
+			"idx": 2,
+			"version": "6",
+			"when": 1772520000000,
+			"tag": "0002_registration_type_redesign",
+			"breakpoints": true
+		},
+		{
+			"idx": 3,
+			"version": "6",
+			"when": 1772530000000,
+			"tag": "0003_add_guests",
+			"breakpoints": true
+		},
+		{
+			"idx": 8,
+			"version": "6",
+			"when": 1741388400000,
+			"tag": "0008_add_postcode_birthdate",
+			"breakpoints": true
+		}
+	]
+}
--- a/packages/db/src/schema/drinkkaart.ts
+++ b/packages/db/src/schema/drinkkaart.ts
@@ -0,0 +1,68 @@
+import type { InferInsertModel, InferSelectModel } from "drizzle-orm";
+import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+
+// ---------------------------------------------------------------------------
+// drinkkaart — one row per user account (1:1 with user)
+// ---------------------------------------------------------------------------
+
+export const drinkkaart = sqliteTable("drinkkaart", {
+	id: text("id").primaryKey(),
+	userId: text("user_id").notNull().unique(),
+	balance: integer("balance").notNull().default(0), // in cents
+	version: integer("version").notNull().default(0), // optimistic lock counter
+	qrSecret: text("qr_secret").notNull(), // CSPRNG 32-byte hex; signs QR tokens
+	createdAt: integer("created_at", { mode: "timestamp_ms" }).notNull(),
+	updatedAt: integer("updated_at", { mode: "timestamp_ms" }).notNull(),
+});
+
+// ---------------------------------------------------------------------------
+// drinkkaart_transaction — immutable audit log of deductions and reversals
+// ---------------------------------------------------------------------------
+
+export const drinkkaartTransaction = sqliteTable("drinkkaart_transaction", {
+	id: text("id").primaryKey(),
+	drinkkaartId: text("drinkkaart_id").notNull(),
+	userId: text("user_id").notNull(), // denormalized for fast audit queries
+	adminId: text("admin_id").notNull(), // FK → user.id (admin who processed it)
+	amountCents: integer("amount_cents").notNull(),
+	balanceBefore: integer("balance_before").notNull(),
+	balanceAfter: integer("balance_after").notNull(),
+	type: text("type", { enum: ["deduction", "reversal"] }).notNull(),
+	reversedBy: text("reversed_by"), // nullable; id of the reversal transaction
+	reverses: text("reverses"), // nullable; id of the original deduction
+	note: text("note"),
+	createdAt: integer("created_at", { mode: "timestamp_ms" }).notNull(),
+});
+
+// ---------------------------------------------------------------------------
+// drinkkaart_topup — immutable log of every credited amount
+// ---------------------------------------------------------------------------
+
+export const drinkkaartTopup = sqliteTable("drinkkaart_topup", {
+	id: text("id").primaryKey(),
+	drinkkaartId: text("drinkkaart_id").notNull(),
+	userId: text("user_id").notNull(), // denormalized
+	amountCents: integer("amount_cents").notNull(),
+	balanceBefore: integer("balance_before").notNull(),
+	balanceAfter: integer("balance_after").notNull(),
+	type: text("type", { enum: ["payment", "admin_credit"] }).notNull(),
+	lemonsqueezyOrderId: text("lemonsqueezy_order_id").unique(), // nullable; only for type="payment"
+	adminId: text("admin_id"), // nullable; only for type="admin_credit"
+	reason: text("reason"),
+	paidAt: integer("paid_at", { mode: "timestamp_ms" }).notNull(),
+});
+
+// ---------------------------------------------------------------------------
+// Inferred Drizzle types
+// ---------------------------------------------------------------------------
+
+export type Drinkkaart = InferSelectModel<typeof drinkkaart>;
+export type NewDrinkkaart = InferInsertModel<typeof drinkkaart>;
+export type DrinkkaartTransaction = InferSelectModel<
+	typeof drinkkaartTransaction
+>;
+export type NewDrinkkaartTransaction = InferInsertModel<
+	typeof drinkkaartTransaction
+>;
+export type DrinkkaartTopup = InferSelectModel<typeof drinkkaartTopup>;
+export type NewDrinkkaartTopup = InferInsertModel<typeof drinkkaartTopup>;
--- a/packages/db/src/schema/index.ts
+++ b/packages/db/src/schema/index.ts
@@ -1,3 +1,4 @@
 export * from "./admin-requests";
 export * from "./auth";
+export * from "./drinkkaart";
 export * from "./registrations";
--- a/packages/db/src/schema/registrations.ts
+++ b/packages/db/src/schema/registrations.ts
@@ -9,19 +9,50 @@ export const registration = sqliteTable(
 		lastName: text("last_name").notNull(),
 		email: text("email").notNull(),
 		phone: text("phone"),
-		wantsToPerform: integer("wants_to_perform", { mode: "boolean" })
-			.notNull()
-			.default(false),
+		// registrationType: 'performer' | 'watcher'
+		registrationType: text("registration_type").notNull().default("watcher"),
+		// Performer-specific fields
 		artForm: text("art_form"),
 		experience: text("experience"),
+		isOver16: integer("is_over_16", { mode: "boolean" })
+			.notNull()
+			.default(false),
+		// Watcher-specific fields
+		drinkCardValue: integer("drink_card_value").default(0),
+		// Guests: JSON array of {firstName, lastName, email?, phone?} objects
+		guests: text("guests"),
+		// Contact / demographic
+		postcode: text("postcode"),
+		birthdate: text("birthdate"),
+		// Shared
 		extraQuestions: text("extra_questions"),
+		managementToken: text("management_token").unique(),
+		cancelledAt: integer("cancelled_at", { mode: "timestamp_ms" }),
+		// Payment fields
+		paymentStatus: text("payment_status").notNull().default("pending"),
+		paymentAmount: integer("payment_amount").default(0),
+		giftAmount: integer("gift_amount").default(0),
+		lemonsqueezyOrderId: text("lemonsqueezy_order_id"),
+		lemonsqueezyCustomerId: text("lemonsqueezy_customer_id"),
+		paidAt: integer("paid_at", { mode: "timestamp_ms" }),
+		// Set when the drinkCardValue has been credited to the user's drinkkaart.
+		// Null means not yet credited (either unpaid, account doesn't exist yet, or
+		// the registration is a performer). Used to prevent double-crediting.
+		drinkkaartCreditedAt: integer("drinkkaart_credited_at", {
+			mode: "timestamp_ms",
+		}),
 		createdAt: integer("created_at", { mode: "timestamp_ms" })
 			.default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
 			.notNull(),
 	},
 	(table) => [
 		index("registration_email_idx").on(table.email),
+		index("registration_registrationType_idx").on(table.registrationType),
 		index("registration_artForm_idx").on(table.artForm),
 		index("registration_createdAt_idx").on(table.createdAt),
+		index("registration_managementToken_idx").on(table.managementToken),
+		index("registration_paymentStatus_idx").on(table.paymentStatus),
+		index("registration_giftAmount_idx").on(table.giftAmount),
+		index("registration_lemonsqueezyOrderId_idx").on(table.lemonsqueezyOrderId),
 	],
 );
--- a/packages/env/src/server.ts
+++ b/packages/env/src/server.ts
@@ -1,16 +1,34 @@
-import "dotenv/config";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
 import { createEnv } from "@t3-oss/env-core";
+import { config } from "dotenv";
 import { z } from "zod";

+// Only load .env file in development (not in Cloudflare Workers)
+// Skip if vars are already loaded (e.g., by Vite dev server)
+if (process.env.NODE_ENV !== "production" && !process.env.DATABASE_URL) {
+	const __dirname = dirname(fileURLToPath(import.meta.url));
+	config({ path: resolve(__dirname, "../.env") });
+}
+
 export const env = createEnv({
 	server: {
 		DATABASE_URL: z.string().min(1),
 		BETTER_AUTH_SECRET: z.string().min(32),
 		BETTER_AUTH_URL: z.url(),
 		CORS_ORIGIN: z.url(),
+		SMTP_HOST: z.string().min(1).optional(),
+		SMTP_PORT: z.coerce.number().default(587),
+		SMTP_USER: z.string().min(1).optional(),
+		SMTP_PASS: z.string().min(1).optional(),
+		SMTP_FROM: z.string().min(1).optional(),
 		NODE_ENV: z
 			.enum(["development", "production", "test"])
 			.default("development"),
+		LEMON_SQUEEZY_API_KEY: z.string().min(1).optional(),
+		LEMON_SQUEEZY_STORE_ID: z.string().min(1).optional(),
+		LEMON_SQUEEZY_VARIANT_ID: z.string().min(1).optional(),
+		LEMON_SQUEEZY_WEBHOOK_SECRET: z.string().min(1).optional(),
 	},
 	runtimeEnv: process.env,
 	emptyStringAsUndefined: true,
--- a/packages/infra/alchemy.run.ts
+++ b/packages/infra/alchemy.run.ts
@@ -3,11 +3,11 @@ import { TanStackStart } from "alchemy/cloudflare";
 import { config } from "dotenv";

 config({ path: "./.env" });
-config({ path: "../../apps/web/.env" });
+config({ path: "../env/.env" });

 const app = await alchemy("kk");

-// Helper function to get required env var
+/** Throws at deploy time if a required variable is missing from the environment. */
 function getEnvVar(name: string): string {
 	const value = process.env[name];
 	if (!value) {
@@ -19,12 +19,24 @@ function getEnvVar(name: string): string {
 export const web = await TanStackStart("web", {
 	cwd: "../../apps/web",
 	bindings: {
+		// Core
 		DATABASE_URL: getEnvVar("DATABASE_URL"),
 		CORS_ORIGIN: getEnvVar("CORS_ORIGIN"),
 		BETTER_AUTH_SECRET: getEnvVar("BETTER_AUTH_SECRET"),
 		BETTER_AUTH_URL: getEnvVar("BETTER_AUTH_URL"),
+		// Email (SMTP)
+		SMTP_HOST: getEnvVar("SMTP_HOST"),
+		SMTP_PORT: getEnvVar("SMTP_PORT"),
+		SMTP_USER: getEnvVar("SMTP_USER"),
+		SMTP_PASS: getEnvVar("SMTP_PASS"),
+		SMTP_FROM: getEnvVar("SMTP_FROM"),
+		// Payments (LemonSqueezy)
+		LEMON_SQUEEZY_API_KEY: getEnvVar("LEMON_SQUEEZY_API_KEY"),
+		LEMON_SQUEEZY_STORE_ID: getEnvVar("LEMON_SQUEEZY_STORE_ID"),
+		LEMON_SQUEEZY_VARIANT_ID: getEnvVar("LEMON_SQUEEZY_VARIANT_ID"),
+		LEMON_SQUEEZY_WEBHOOK_SECRET: getEnvVar("LEMON_SQUEEZY_WEBHOOK_SECRET"),
 	},
-	domains: ["kunstenkamp.be"],
+	domains: ["kunstenkamp.be", "www.kunstenkamp.be"],
 });

 console.log(`Web    -> ${web.url}`);
Author	SHA1	Message	Date
zias	d5fde568da	feat(registration): update event date and add required guest fields Change event date from April 18 to April 24 across all pages and emails. Add birthdate and postcode as required fields for guest registration. Update API to support multiple registrations per user. Enhance admin panel with expandable guest details view.	2026-03-07 15:49:56 +01:00
zias	dcf21a80e2	feat:add birthdate and postcode	2026-03-07 02:46:14 +01:00
zias	ac466a7f0e	feat:switch back to lemonsqueezy	2026-03-07 02:28:03 +01:00
zias	2f0dc46469	fix:small ux&content fixes	2026-03-05 16:28:22 +01:00
zias	3f5bb61e35	feat:mollie and footer	2026-03-05 16:08:33 +01:00
zias	835f0941dc	fix:improved admin dashboard on mobile	2026-03-04 16:25:46 +01:00
zias	f9d79c3879	feat:UX and fix drinkkaart payment logic	2026-03-04 14:22:42 +01:00
zias	79869a9a21	feat:drinkkaart	2026-03-03 23:52:49 +01:00
zias	b8cefd373d	feat:gifts	2026-03-03 16:34:13 +01:00
zias	e7b3d7260f	fix:use cloudflare's crypto lib for passwords	2026-03-03 14:59:45 +01:00
zias	e6f52e6a73	fix:manage edit for extra bezoekers payments	2026-03-03 14:32:07 +01:00
zias	0a1d1db9ec	feat:simplify dx and improve payment functions	2026-03-03 14:02:29 +01:00
zias	b9e5c44588	feat:payments	2026-03-03 12:33:44 +01:00
zias	f6c2bad9df	feat:multiple bezoekers	2026-03-03 11:06:24 +01:00
zias	1210b2e13e	feat:favicon and age info	2026-03-03 08:54:50 +01:00
zias	3c439649f9	feat:add registration management with token-based access Add management tokens to registrations allowing users to view, edit, and cancel their registration via a unique URL. Implement email notifications for confirmations, updates, and cancellations using nodemailer. Simplify art forms grid from 6 to 4 items and remove trajectory links. Translate footer links to Dutch and fix matzah spelling in info section.	2026-03-03 08:54:33 +01:00