feat: implement psql and improvements

2026-03-22 14:15:28 +00:00 · 2025-08-27 08:47:12 +02:00
parent 36dc19933a
commit 3d133a6539
20 changed files with 1379 additions and 283 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Event Cactus 🌵
+# Cactoide 🌵

 A mobile-first event RSVP SaaS application. Create events, share unique URLs, and collect RSVPs without any registration required.

--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,9 @@
 			"name": "event-cactus",
 			"version": "0.0.1",
 			"dependencies": {
-				"@supabase/supabase-js": "^2.55.0"
+				"@supabase/supabase-js": "^2.55.0",
+				"drizzle-orm": "^0.44.5",
+				"postgres": "^3.4.7"
 			},
 			"devDependencies": {
 				"@eslint/compat": "^1.2.5",
@@ -20,6 +22,7 @@
 				"@tailwindcss/forms": "^0.5.9",
 				"@tailwindcss/typography": "^0.5.15",
 				"@tailwindcss/vite": "^4.0.0",
+				"drizzle-kit": "^0.31.4",
 				"eslint": "^9.18.0",
 				"eslint-config-prettier": "^10.0.1",
 				"eslint-plugin-svelte": "^3.0.0",
@@ -35,6 +38,449 @@
 				"vite": "^7.0.4"
 			}
 		},
+		"node_modules/@drizzle-team/brocli": {
+			"version": "0.10.2",
+			"resolved": "https://registry.npmjs.org/@drizzle-team/brocli/-/brocli-0.10.2.tgz",
+			"integrity": "sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==",
+			"dev": true,
+			"license": "Apache-2.0"
+		},
+		"node_modules/@esbuild-kit/core-utils": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/@esbuild-kit/core-utils/-/core-utils-3.3.2.tgz",
+			"integrity": "sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==",
+			"deprecated": "Merged into tsx: https://tsx.is",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"esbuild": "~0.18.20",
+				"source-map-support": "^0.5.21"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-arm": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+			"integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+			"integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/android-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+			"integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/darwin-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+			"integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/darwin-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+			"integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+			"integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/freebsd-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+			"integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-arm": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+			"integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+			"integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-ia32": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+			"integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-loong64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+			"integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-mips64el": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+			"integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-ppc64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+			"integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-riscv64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+			"integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-s390x": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+			"integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/linux-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+			"integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/netbsd-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+			"integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/openbsd-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+			"integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/sunos-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+			"integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-arm64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+			"integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-ia32": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+			"integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/@esbuild/win32-x64": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+			"integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/@esbuild-kit/core-utils/node_modules/esbuild": {
+			"version": "0.18.20",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+			"integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"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"
+			}
+		},
+		"node_modules/@esbuild-kit/esm-loader": {
+			"version": "2.6.5",
+			"resolved": "https://registry.npmjs.org/@esbuild-kit/esm-loader/-/esm-loader-2.6.5.tgz",
+			"integrity": "sha512-FxEMIkJKnodyA1OaCUoEvbYRkoZlLZ4d/eXFu9Fh8CbBBgP5EmZxrfTRyN0qpXZ4vOvqnE5YdRdcrmUUXuU+dA==",
+			"deprecated": "Merged into tsx: https://tsx.is",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@esbuild-kit/core-utils": "^3.3.2",
+				"get-tsconfig": "^4.7.0"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.25.9",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
@@ -2022,6 +2468,13 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/buffer-from": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+			"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/callsites": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2202,6 +2655,147 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/drizzle-kit": {
+			"version": "0.31.4",
+			"resolved": "https://registry.npmjs.org/drizzle-kit/-/drizzle-kit-0.31.4.tgz",
+			"integrity": "sha512-tCPWVZWZqWVx2XUsVpJRnH9Mx0ClVOf5YUHerZ5so1OKSlqww4zy1R5ksEdGRcO3tM3zj0PYN6V48TbQCL1RfA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@drizzle-team/brocli": "^0.10.2",
+				"@esbuild-kit/esm-loader": "^2.5.5",
+				"esbuild": "^0.25.4",
+				"esbuild-register": "^3.5.0"
+			},
+			"bin": {
+				"drizzle-kit": "bin.cjs"
+			}
+		},
+		"node_modules/drizzle-orm": {
+			"version": "0.44.5",
+			"resolved": "https://registry.npmjs.org/drizzle-orm/-/drizzle-orm-0.44.5.tgz",
+			"integrity": "sha512-jBe37K7d8ZSKptdKfakQFdeljtu3P2Cbo7tJoJSVZADzIKOBo9IAJPOmMsH2bZl90bZgh8FQlD8BjxXA/zuBkQ==",
+			"license": "Apache-2.0",
+			"peerDependencies": {
+				"@aws-sdk/client-rds-data": ">=3",
+				"@cloudflare/workers-types": ">=4",
+				"@electric-sql/pglite": ">=0.2.0",
+				"@libsql/client": ">=0.10.0",
+				"@libsql/client-wasm": ">=0.10.0",
+				"@neondatabase/serverless": ">=0.10.0",
+				"@op-engineering/op-sqlite": ">=2",
+				"@opentelemetry/api": "^1.4.1",
+				"@planetscale/database": ">=1.13",
+				"@prisma/client": "*",
+				"@tidbcloud/serverless": "*",
+				"@types/better-sqlite3": "*",
+				"@types/pg": "*",
+				"@types/sql.js": "*",
+				"@upstash/redis": ">=1.34.7",
+				"@vercel/postgres": ">=0.8.0",
+				"@xata.io/client": "*",
+				"better-sqlite3": ">=7",
+				"bun-types": "*",
+				"expo-sqlite": ">=14.0.0",
+				"gel": ">=2",
+				"knex": "*",
+				"kysely": "*",
+				"mysql2": ">=2",
+				"pg": ">=8",
+				"postgres": ">=3",
+				"sql.js": ">=1",
+				"sqlite3": ">=5"
+			},
+			"peerDependenciesMeta": {
+				"@aws-sdk/client-rds-data": {
+					"optional": true
+				},
+				"@cloudflare/workers-types": {
+					"optional": true
+				},
+				"@electric-sql/pglite": {
+					"optional": true
+				},
+				"@libsql/client": {
+					"optional": true
+				},
+				"@libsql/client-wasm": {
+					"optional": true
+				},
+				"@neondatabase/serverless": {
+					"optional": true
+				},
+				"@op-engineering/op-sqlite": {
+					"optional": true
+				},
+				"@opentelemetry/api": {
+					"optional": true
+				},
+				"@planetscale/database": {
+					"optional": true
+				},
+				"@prisma/client": {
+					"optional": true
+				},
+				"@tidbcloud/serverless": {
+					"optional": true
+				},
+				"@types/better-sqlite3": {
+					"optional": true
+				},
+				"@types/pg": {
+					"optional": true
+				},
+				"@types/sql.js": {
+					"optional": true
+				},
+				"@upstash/redis": {
+					"optional": true
+				},
+				"@vercel/postgres": {
+					"optional": true
+				},
+				"@xata.io/client": {
+					"optional": true
+				},
+				"better-sqlite3": {
+					"optional": true
+				},
+				"bun-types": {
+					"optional": true
+				},
+				"expo-sqlite": {
+					"optional": true
+				},
+				"gel": {
+					"optional": true
+				},
+				"knex": {
+					"optional": true
+				},
+				"kysely": {
+					"optional": true
+				},
+				"mysql2": {
+					"optional": true
+				},
+				"pg": {
+					"optional": true
+				},
+				"postgres": {
+					"optional": true
+				},
+				"prisma": {
+					"optional": true
+				},
+				"sql.js": {
+					"optional": true
+				},
+				"sqlite3": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.18.3",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -2258,6 +2852,19 @@
 				"@esbuild/win32-x64": "0.25.9"
 			}
 		},
+		"node_modules/esbuild-register": {
+			"version": "3.6.0",
+			"resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+			"integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.4"
+			},
+			"peerDependencies": {
+				"esbuild": ">=0.12 <1"
+			}
+		},
 		"node_modules/escape-string-regexp": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2651,6 +3258,19 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/get-tsconfig": {
+			"version": "4.10.1",
+			"resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+			"integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"resolve-pkg-maps": "^1.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+			}
+		},
 		"node_modules/glob-parent": {
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3568,6 +4188,19 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/postgres": {
+			"version": "3.4.7",
+			"resolved": "https://registry.npmjs.org/postgres/-/postgres-3.4.7.tgz",
+			"integrity": "sha512-Jtc2612XINuBjIl/QTWsV5UvE8UHuNblcO3vVADSrKsrc6RqGX6lOW1cEo3CM2v0XG4Nat8nI+YM7/f26VxXLw==",
+			"license": "Unlicense",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://github.com/sponsors/porsager"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3747,6 +4380,16 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/resolve-pkg-maps": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+			"integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+			}
+		},
 		"node_modules/reusify": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -3893,6 +4536,16 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+			"dev": true,
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3903,6 +4556,17 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/source-map-support": {
+			"version": "0.5.21",
+			"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+			"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"buffer-from": "^1.0.0",
+				"source-map": "^0.6.0"
+			}
+		},
 		"node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"@tailwindcss/vite": "^4.0.0",
+		"drizzle-kit": "^0.31.4",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
@@ -39,6 +40,8 @@
 		"vite": "^7.0.4"
 	},
 	"dependencies": {
-		"@supabase/supabase-js": "^2.55.0"
+		"@supabase/supabase-js": "^2.55.0",
+		"drizzle-orm": "^0.44.5",
+		"postgres": "^3.4.7"
 	}
 }
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -21,7 +21,7 @@
 					on:click={() => navigateTo('/')}
 					class="cursor-pointer text-2xl font-medium text-violet-400"
 				>
-					Event Cactus
+					Cactoide
 				</button>
 			</div>

--- a/src/lib/database/db.ts
+++ b/src/lib/database/db.ts
@@ -0,0 +1,8 @@
+import { drizzle } from 'drizzle-orm/postgres-js';
+import { env } from '$env/dynamic/private';
+import * as schema from './schema';
+import postgres from 'postgres';
+
+const client = postgres(env.DATABASE_URL, {});
+
+export const drizzleQuery = drizzle(client, { schema });
--- a/src/lib/database/schema.ts
+++ b/src/lib/database/schema.ts
@@ -0,0 +1,97 @@
+import {
+	pgTable,
+	varchar,
+	integer,
+	date,
+	time,
+	timestamp,
+	uuid,
+	pgEnum,
+	index,
+	uniqueIndex,
+	check
+} from 'drizzle-orm/pg-core';
+import { sql } from 'drizzle-orm';
+import type { InferInsertModel, InferSelectModel } from 'drizzle-orm';
+
+// --- Enums (matching the SQL CHECK constraints)
+export const eventTypeEnum = pgEnum('event_type', ['limited', 'unlimited']);
+export const visibilityEnum = pgEnum('visibility', ['public', 'private']);
+
+// --- Events table
+export const events = pgTable(
+	'events',
+	{
+		id: varchar('id', { length: 8 }).primaryKey(),
+		name: varchar('name', { length: 100 }).notNull(),
+		date: date('date', { mode: 'string' }).notNull(), // ISO 'YYYY-MM-DD'
+		time: time('time', { withTimezone: false }).notNull(), // 'HH:MM:SS'
+		location: varchar('location', { length: 200 }).notNull(),
+		type: eventTypeEnum('type').notNull(),
+		attendeeLimit: integer('attendee_limit'), // nullable in SQL
+		userId: varchar('user_id', { length: 100 }).notNull(),
+		visibility: visibilityEnum('visibility').notNull().default('public'),
+		createdAt: timestamp('created_at', { withTimezone: true }).defaultNow(),
+		updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow()
+	},
+	(t) => ({
+		// Primary key already indexes id
+		idxEventsId: index('idx_events_id').on(t.id),
+		idxEventsUserId: index('idx_events_user_id').on(t.userId),
+		idxEventsVisibility: index('idx_events_visibility').on(t.visibility),
+		// CHECK (attendee_limit > 0) like in SQL (still allows NULL)
+		attendeeLimitPositive: check(
+			'events_attendee_limit_positive',
+			sql`${t.attendeeLimit} IS NULL OR ${t.attendeeLimit} > 0`
+		)
+	})
+);
+
+// --- RSVPs table
+export const rsvps = pgTable(
+	'rsvps',
+	{
+		id: uuid('id').defaultRandom().primaryKey(), // gen_random_uuid()
+		eventId: varchar('event_id', { length: 8 })
+			.notNull()
+			.references(() => events.id, { onDelete: 'cascade' }),
+		name: varchar('name', { length: 50 }).notNull(),
+		userId: varchar('user_id', { length: 100 }).notNull(),
+		createdAt: timestamp('created_at', { withTimezone: true }).defaultNow()
+	},
+	(t) => ({
+		idxRsvpsEventId: index('idx_rsvps_event_id').on(t.eventId),
+		idxRsvpsUserId: index('idx_rsvps_user_id').on(t.userId),
+		idxRsvpsCreatedAt: index('idx_rsvps_created_at').on(t.createdAt),
+		// UNIQUE(event_id, name) constraint
+		uqEventName: uniqueIndex('rsvps_event_id_name_unique').on(t.eventId, t.name)
+	})
+);
+
+// --- Relations (optional but handy for type safety)
+import { relations } from 'drizzle-orm';
+
+export const eventsRelations = relations(events, ({ many }) => ({
+	rsvps: many(rsvps)
+}));
+
+export const rsvpsRelations = relations(rsvps, ({ one }) => ({
+	event: one(events, {
+		fields: [rsvps.eventId],
+		references: [events.id]
+	})
+}));
+
+// --- Inferred types for use in the application
+export type Event = InferSelectModel<typeof events>;
+export type NewEvent = InferInsertModel<typeof events>;
+export type Rsvp = InferSelectModel<typeof rsvps>;
+export type NewRsvp = InferInsertModel<typeof rsvps>;
+
+// --- Additional utility types
+export type EventWithRsvps = Event & {
+	rsvps: Rsvp[];
+};
+
+export type CreateEventData = Omit<NewEvent, 'id' | 'createdAt' | 'updatedAt'>;
+export type CreateRsvpData = Omit<NewRsvp, 'id' | 'createdAt'>;
--- a/src/lib/generateUserId.ts
+++ b/src/lib/generateUserId.ts
@@ -0,0 +1,5 @@
+export const generateUserId = () => {
+	const userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+
+	return userId;
+};
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -6,7 +6,7 @@
 </script>

 <svelte:head>
-	<title>Error - Event Cactus</title>
+	<title>Error - Cactoide</title>
 </svelte:head>

 <div class="flex min-h-screen flex-col">
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -0,0 +1,22 @@
+import { generateUserId } from '$lib/generateUserId.js';
+
+export function load({ cookies }) {
+	const cactoideUserId = cookies.get('cactoideUserId');
+	const userId = generateUserId();
+
+	const DAYS = 400; // practical upper bound in many browsers for cookies
+	const MAX_AGE = 60 * 60 * 24 * DAYS;
+	const PATH = '/';
+
+	if (!cactoideUserId) {
+		console.log(`There is no cactoideUserId cookie, generating new one...`);
+		cookies.set('cactoideUserId', userId, { path: PATH, maxAge: MAX_AGE });
+	} else {
+		console.log(`cactoideUserId: ${cactoideUserId}`);
+		console.log(`cactoideUserId cookie found, using existing one...`);
+	}
+
+	return {
+		cactoideUserId
+	};
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,10 +1,12 @@
 <script>
 	import '../app.css';
 	import Navbar from '$lib/components/Navbar.svelte';
+
+	let { data } = $props();
 </script>

 <svelte:head>
-	<title>Event Cactus -</title>
+	<title>Cactoide -</title>
 	<meta name="description" content="Create and manage event RSVPs" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
@@ -25,7 +27,14 @@
 		<footer class="py-12">
 			<div class="container mx-auto px-4 text-center">
 				<div class="text-sm">
-					<p>&copy; 2025 Event Cactus</p>
+					<p class="mb-4 text-gray-100/80">
+						Your UserID storated as a cookie: <span class="font-bold text-violet-400"
+							>{data.cactoideUserId
+								? data.cactoideUserId
+								: 'First time visiting. Generating new UserID...'}</span
+						>
+					</p>
+					<p>&copy; 2025 Cactoide</p>
 				</div>
 			</div>
 		</footer>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,7 +3,7 @@
 </script>

 <svelte:head>
-	<title>Event Cactus - The RSVP site</title>
+	<title>Cactoide - The RSVP site</title>
 	<meta
 		name="description"
 		content="Create and manage event RSVPs. No registration required, instant sharing."
@@ -29,8 +29,9 @@

 			<div class="relative z-10">
 				<h1 class="bg-gradient-to-r bg-clip-text text-5xl font-bold md:text-7xl lg:text-8xl">
-					Event Cactus 🌵
+					Cactoide 🌵
 				</h1>
+
 				<p class="mt-6 text-xl md:text-2xl">The Ultimate RSVP Platform</p>
 				<p class="mt-4 text-lg md:text-xl">Create, share, and manage events with zero friction.</p>

@@ -71,7 +72,7 @@
 	<section class="py-20">
 		<div class="container mx-auto px-4">
 			<h2 class=" mb-16 text-center text-4xl font-bold">
-				Why <span class="text-violet-400">Event Cactus?</span>
+				Why <span class="text-violet-400">Cactoide?</span>
 			</h2>
 			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
 				<!-- Feature 1 -->
@@ -190,7 +191,7 @@
 			<h2 class="mb-6 text-4xl font-bold text-white">
 				Ready to Create Your <span class="text-violet-400">First Event</span>?
 			</h2>
-			<p class="mb-10 text-xl">Join thousands of event organizers who trust Event Cactus</p>
+			<p class="mb-10 text-xl">Join thousands of event organizers who trust Cactoide</p>
 			<button
 				on:click={() => goto('/create')}
 				class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
--- a/src/routes/create/+page.server.ts
+++ b/src/routes/create/+page.server.ts
@@ -0,0 +1,89 @@
+import { drizzleQuery } from '$lib/database/db';
+import { events } from '$lib/database/schema';
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+
+// Generate a random URL-friendly ID
+function generateEventId(): string {
+	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+	let result = '';
+	for (let i = 0; i < 8; i++) {
+		result += chars.charAt(Math.floor(Math.random() * chars.length));
+	}
+	return result;
+}
+
+export const actions: Actions = {
+	default: async ({ request, cookies }) => {
+		const formData = await request.formData();
+
+		const name = formData.get('name') as string;
+		const date = formData.get('date') as string;
+		const time = formData.get('time') as string;
+		const location = formData.get('location') as string;
+		const type = formData.get('type') as 'limited' | 'unlimited';
+		const attendeeLimit = formData.get('attendee_limit') as string;
+		const visibility = formData.get('visibility') as 'public' | 'private';
+		const userId = cookies.get('cactoideUserId');
+
+		// Validation
+		const missingFields: string[] = [];
+
+		if (!name?.trim()) missingFields.push('name');
+		if (!date) missingFields.push('date');
+		if (!time) missingFields.push('time');
+		if (!location?.trim()) missingFields.push('location');
+		if (!userId) missingFields.push('userId');
+
+		if (missingFields.length > 0) {
+			return fail(400, {
+				error: `Missing or empty fields: ${missingFields.join(', ')}`,
+				values: {
+					name,
+					date,
+					time,
+					location,
+					type,
+					attendee_limit: attendeeLimit,
+					visibility
+				}
+			});
+		}
+
+		if (new Date(date) < new Date()) {
+			return fail(400, {
+				error: 'Date cannot be in the past.',
+				values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
+			});
+		}
+
+		if (type === 'limited' && (!attendeeLimit || parseInt(attendeeLimit) < 2)) {
+			return fail(400, {
+				error: 'Limit must be at least 2 for limited events.',
+				values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
+			});
+		}
+
+		const eventId = generateEventId();
+
+		await drizzleQuery
+			.insert(events)
+			.values({
+				id: eventId,
+				name: name.trim(),
+				date: date,
+				time: time,
+				location: location.trim(),
+				type: type,
+				attendeeLimit: type === 'limited' ? parseInt(attendeeLimit) : null,
+				visibility: visibility,
+				userId: userId
+			})
+			.catch((error) => {
+				console.error('Unexpected error', error);
+				throw error;
+			});
+
+		throw redirect(303, `/event/${eventId}`);
+	}
+};
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-	import { eventsStore } from '$lib/stores/events-supabase';
 	import type { CreateEventData, EventType } from '$lib/types';
 	import { goto } from '$app/navigation';
+	import { enhance } from '$app/forms';
 	import { onMount } from 'svelte';

+	export let form;
+
 	let eventData: CreateEventData = {
 		name: '',
 		date: '',
@@ -21,70 +23,20 @@
 	// Get today's date in YYYY-MM-DD format for min attribute
 	const today = new Date().toISOString().split('T')[0];

-	// Generate or retrieve user ID on mount
-	onMount(() => {
-		generateUserId();
-	});
-
-	function generateUserId() {
-		// Generate a unique user ID and store it in localStorage
-		let userId = localStorage.getItem('eventCactusUserId');
-		if (!userId) {
-			userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-			localStorage.setItem('eventCactusUserId', userId);
-		}
-		currentUserId = userId;
+	// Handle form errors from server
+	$: if (form?.error) {
+		errors.server = form.error;
 	}

-	function validateForm(): boolean {
-		errors = {};
-
-		if (!eventData.name.trim()) {
-			errors.name = 'Event name is required';
-		}
-
-		if (!eventData.date) {
-			errors.date = 'Date is required';
-		} else if (new Date(eventData.date) < new Date(today)) {
-			errors.date = 'Date cannot be in the past';
-		}
-
-		if (!eventData.time) {
-			errors.time = 'Time is required';
-		}
-
-		if (!eventData.location.trim()) {
-			errors.location = 'Location is required';
-		}
-
-		if (
-			eventData.type === 'limited' &&
-			(!eventData.attendee_limit || eventData.attendee_limit < 1)
-		) {
-			errors.attendee_limit = 'Limit must be at least 1 for limited events';
-		}
-
-		return Object.keys(errors).length === 0;
-	}
-
-	async function handleSubmit() {
-		if (!validateForm()) return;
-
-		isSubmitting = true;
-
-		try {
-			// Simulate API call delay
-			await new Promise((resolve) => setTimeout(resolve, 1000));
-
-			const eventId = await eventsStore.createEvent(eventData, currentUserId);
-
-			// Redirect to the event page
-			goto(`/event/${eventId}`);
-		} catch (error) {
-			console.error('Error creating event:', error);
-		} finally {
-			isSubmitting = false;
-		}
+	// Pre-fill form with values from server on error
+	$: if (form?.values) {
+		eventData = {
+			...eventData,
+			...form.values,
+			attendee_limit: form.values.attendee_limit
+				? parseInt(String(form.values.attendee_limit))
+				: undefined
+		};
 	}

 	function handleTypeChange(type: EventType) {
@@ -96,7 +48,7 @@
 </script>

 <svelte:head>
-	<title>Create Event - Event Cactus</title>
+	<title>Create Event - Cactoide</title>
 </svelte:head>

 <div class="flex min-h-screen flex-col">
@@ -107,7 +59,33 @@
 			<div class="rounded-sm border p-8">
 				<h2 class="mb-8 text-center text-3xl font-bold text-violet-400">Create New Event</h2>

-				<form on:submit|preventDefault={handleSubmit} class="space-y-6">
+				<form
+					method="POST"
+					use:enhance={() => {
+						isSubmitting = true;
+						return async ({ result, update }) => {
+							isSubmitting = false;
+							if (result.type === 'failure') {
+								// Handle validation errors
+								if (result.data?.error) {
+									errors.server = result.data.error;
+								}
+							}
+							update();
+						};
+					}}
+					class="space-y-6"
+				>
+					<input type="hidden" name="userId" value={currentUserId} />
+					<input type="hidden" name="type" value={eventData.type} />
+					<input type="hidden" name="visibility" value={eventData.visibility} />
+
+					{#if errors.server}
+						<div class="mb-6 rounded-sm border border-red-200 bg-red-50 p-4 text-red-700">
+							{errors.server}
+						</div>
+					{/if}
+
 					<!-- Event Name -->
 					<div>
 						<label for="name" class="text-dark-800 mb-3 block text-sm font-semibold">
@@ -115,11 +93,13 @@
 						</label>
 						<input
 							id="name"
+							name="name"
 							type="text"
 							bind:value={eventData.name}
 							class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
 							placeholder="Enter event name"
 							maxlength="100"
+							required
 						/>
 						{#if errors.name}
 							<p class="mt-2 text-sm font-medium text-red-600">{errors.name}</p>
@@ -134,10 +114,12 @@
 							</label>
 							<input
 								id="date"
+								name="date"
 								type="date"
 								bind:value={eventData.date}
 								min={today}
 								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+								required
 							/>
 							{#if errors.date}
 								<p class="mt-2 text-sm font-medium text-red-600">{errors.date}</p>
@@ -150,9 +132,11 @@
 							</label>
 							<input
 								id="time"
+								name="time"
 								type="time"
 								bind:value={eventData.time}
 								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+								required
 							/>
 							{#if errors.time}
 								<p class="mt-2 text-sm font-medium text-red-600">{errors.time}</p>
@@ -167,11 +151,13 @@
 						</label>
 						<input
 							id="location"
+							name="location"
 							type="text"
 							bind:value={eventData.location}
 							class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
 							placeholder="Enter location"
 							maxlength="200"
+							required
 						/>
 						{#if errors.location}
 							<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
@@ -215,12 +201,14 @@
 							</label>
 							<input
 								id="attendee_limit"
+								name="attendee_limit"
 								type="number"
 								bind:value={eventData.attendee_limit}
 								min="1"
 								max="1000"
 								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
 								placeholder="Enter limit"
+								required
 							/>
 							{#if errors.attendee_limit}
 								<p class="mt-2 text-sm font-medium text-red-600">{errors.attendee_limit}</p>
--- a/src/routes/discover/+page.server.ts
+++ b/src/routes/discover/+page.server.ts
@@ -0,0 +1,41 @@
+import { drizzleQuery } from '$lib/database/db';
+import { eq, desc } from 'drizzle-orm';
+import type { PageServerLoad } from './$types';
+import { events } from '$lib/database/schema';
+
+export const load: PageServerLoad = async () => {
+	try {
+		// Fetch all public events ordered by creation date (newest first)
+		const publicEvents = await drizzleQuery
+			.select()
+			.from(events)
+			.where(eq(events.visibility, 'public'))
+			.orderBy(desc(events.createdAt));
+
+		// Transform the database events to match the expected Event interface
+		const transformedEvents = publicEvents.map((event) => ({
+			id: event.id,
+			name: event.name,
+			date: event.date, // Already in 'YYYY-MM-DD' format
+			time: event.time, // Already in 'HH:MM:SS' format
+			location: event.location,
+			type: event.type,
+			attendee_limit: event.attendeeLimit, // Note: schema uses camelCase
+			visibility: event.visibility,
+			user_id: event.userId, // Note: schema uses camelCase
+			created_at: event.createdAt?.toISOString(),
+			updated_at: event.updatedAt?.toISOString()
+		}));
+
+		return {
+			events: transformedEvents
+		};
+	} catch (error) {
+		console.error('Error loading public events:', error);
+
+		// Return empty array on error to prevent page crash
+		return {
+			events: []
+		};
+	}
+};
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -2,26 +2,14 @@
 	import { eventsStore } from '$lib/stores/events-supabase';
 	import type { Event } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import type { PageData } from '../$types';

 	let publicEvents: Event[] = [];
-	let isLoading = true;
 	let error = '';

-	onMount(() => {
-		loadPublicEvents();
-	});
-
-	async function loadPublicEvents() {
-		try {
-			isLoading = true;
-			publicEvents = await eventsStore.getPublicEvents();
-		} catch (err) {
-			error = 'Failed to load public events';
-		} finally {
-			isLoading = false;
-		}
-	}
+	export let data: PageData;
+	// Use the server-side data
+	$: publicEvents = data.events;

 	function formatDate(dateString: string): string {
 		const date = new Date(dateString);
@@ -38,28 +26,22 @@
 </script>

 <svelte:head>
-	<title>Discover Events - Event Cactus</title>
+	<title>Discover Events - Cactoide</title>
 </svelte:head>

 <div class="flex min-h-screen flex-col">
 	<!-- Main Content -->
 	<div class="container mx-auto mt-8 flex-1 px-4 py-8 text-white">
-		{#if isLoading}
+		{#if error}
 			<div class="mx-auto max-w-2xl text-center">
-				<div
-					class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-violet-600"
-				></div>
-				<p>Loading public events...</p>
-			</div>
-		{:else if error}
-			<div class="mx-auto max-w-2xl text-center">
-				<div class="mb-4 text-4xl text-red-500">⚠️</div>
+				<div class="mb-4 text-4xl">⚠️</div>
+				<p class="py-4">Something went wrong. Please try again.</p>
 				<p class="text-red-600">{error}</p>
 				<button
-					on:click={loadPublicEvents}
+					on:click={() => goto('/')}
 					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
 				>
-					Try Again
+					Home
 				</button>
 			</div>
 		{:else if publicEvents.length === 0}
@@ -73,17 +55,17 @@
 					on:click={() => goto('/create')}
 					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
 				>
-					Create Your First Event
+					Create
 				</button>
 			</div>
 		{:else}
 			<div class="mx-auto max-w-4xl">
 				<div class="mb-6">
-					<h2 class="text-2xl font-bold text-slate-400">Public Events ({publicEvents.length})</h2>
+					<h2 class="text-2xl font-bold text-slate-300">Public Events ({publicEvents.length})</h2>
 					<p class="text-slate-500">Discover events created by the community</p>
 				</div>

-				<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+				<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
 					{#each publicEvents as event}
 						<div class="rounded-sm border border-slate-200 p-6 shadow-sm">
 							<div class="mb-4">
@@ -118,12 +100,14 @@
 										<span>{event.location}</span>
 									</div>
 									<div class="flex items-center space-x-2">
-										<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
+										<span
+											class="rounded-sm border px-2 py-1 text-xs font-medium {event.type ===
+											'limited'
+												? 'border-amber-600 text-amber-600'
+												: 'border-teal-500 text-teal-500'}"
+										>
 											{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 										</span>
-										{#if event.type === 'limited' && event.attendee_limit}
-											<span class="text-xs">• {event.attendee_limit} max</span>
-										{/if}
 									</div>
 								</div>
 							</div>
--- a/src/routes/event/+page.server.ts
+++ b/src/routes/event/+page.server.ts
@@ -0,0 +1,74 @@
+import { drizzleQuery } from '$lib/database/db';
+import { events } from '$lib/database/schema';
+import { fail } from '@sveltejs/kit';
+import { eq, desc } from 'drizzle-orm';
+
+export const load = async ({ cookies }) => {
+	const userId = cookies.get('cactoideUserId');
+
+	if (!userId) {
+		return { events: [] };
+	}
+
+	try {
+		const userEvents = await drizzleQuery
+			.select()
+			.from(events)
+			.where(eq(events.userId, userId))
+			.orderBy(desc(events.createdAt));
+
+		console.log(userEvents);
+
+		const transformedEvents = userEvents.map((event) => ({
+			id: event.id,
+			name: event.name,
+			date: event.date,
+			time: event.time,
+			location: event.location,
+			type: event.type,
+			attendee_limit: event.attendeeLimit,
+			visibility: event.visibility,
+			user_id: event.userId,
+			created_at: event.createdAt?.toISOString() || new Date().toISOString(),
+			updated_at: event.updatedAt?.toISOString() || new Date().toISOString()
+		}));
+
+		return { events: transformedEvents };
+	} catch (error) {
+		console.error('Error loading user events:', error);
+		return { events: [] };
+	}
+};
+
+export const actions: Actions = {
+	deleteEvent: async ({ request, cookies }) => {
+		const formData = await request.formData();
+		const eventId = formData.get('eventId') as string;
+		const userId = cookies.get('cactoideUserId');
+
+		if (!eventId || !userId) {
+			return fail(400, { error: 'Event ID and User ID are required' });
+		}
+
+		try {
+			// First verify the user owns this event
+			const [eventData] = await drizzleQuery.select().from(events).where(eq(events.id, eventId));
+
+			if (!eventData) {
+				return fail(404, { error: 'Event not found' });
+			}
+
+			if (eventData.userId !== userId) {
+				return fail(403, { error: 'You do not have permission to delete this event' });
+			}
+
+			// Delete the event (RSVPs will be deleted automatically due to CASCADE)
+			await drizzleQuery.delete(events).where(eq(events.id, eventId));
+
+			return { success: true };
+		} catch (error) {
+			console.error('Error deleting event:', error);
+			return fail(500, { error: 'Failed to delete event' });
+		}
+	}
+};
--- a/src/routes/event/+page.svelte
+++ b/src/routes/event/+page.svelte
@@ -1,43 +1,16 @@
 <script lang="ts">
-	import { eventsStore } from '$lib/stores/events-supabase';
 	import type { Event } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+
+	export let data: { events: Event[] };

 	let userEvents: Event[] = [];
-	let isLoading = true;
-	let error = '';
 	let currentUserId = '';
 	let showDeleteModal = false;
 	let eventToDelete: Event | null = null;

-	onMount(() => {
-		generateUserId();
-		loadUserEvents();
-	});
-
-	function generateUserId() {
-		// Generate a unique user ID and store it in localStorage
-		let userId = localStorage.getItem('eventCactusUserId');
-		if (!userId) {
-			userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-			localStorage.setItem('eventCactusUserId', userId);
-		}
-		currentUserId = userId;
-	}
-
-	async function loadUserEvents() {
-		if (!currentUserId) return;
-
-		try {
-			isLoading = true;
-			userEvents = await eventsStore.getEventsByUser(currentUserId);
-		} catch (err) {
-			error = 'Failed to load your events';
-		} finally {
-			isLoading = false;
-		}
-	}
+	// Use server-side data
+	$: userEvents = data.events;

 	function openDeleteModal(event: Event) {
 		eventToDelete = event;
@@ -49,17 +22,33 @@

 		try {
 			const eventId = eventToDelete.id;
-			const success = await eventsStore.deleteEvent(eventId, currentUserId);
-			if (success) {
-				// Remove from local list
-				userEvents = userEvents.filter((event) => event.id !== eventId);
+
+			// Use server-side action for deletion
+			const formData = new FormData();
+			formData.append('eventId', eventId);
+			formData.append('userId', currentUserId);
+
+			const response = await fetch('?/deleteEvent', {
+				method: 'POST',
+				body: formData
+			});
+
+			if (response.ok) {
+				const result = await response.json();
+				if (result.type === 'success') {
 					showDeleteModal = false;
 					eventToDelete = null;
+
+					// ✅ Reload the page to reflect updated events
+					location.reload();
 				} else {
-				error = 'Failed to delete event. You may not have permission to delete this event.';
+					alert(result.data?.error || 'Failed to delete event');
+				}
+			} else {
+				alert('Failed to delete event. You may not have permission to delete this event.');
 			}
 		} catch (err) {
-			error = 'An error occurred while deleting the event';
+			alert('An error occurred while deleting the event');
 		}
 	}

@@ -89,25 +78,7 @@
 <div class="flex min-h-screen flex-col">
 	<!-- Main Content -->
 	<div class="container mx-auto mt-8 flex-1 px-4 py-8 text-white">
-		{#if isLoading}
-			<div class="mx-auto max-w-2xl text-center">
-				<div
-					class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-violet-600"
-				></div>
-				<p>Loading your events...</p>
-			</div>
-		{:else if error}
-			<div class="mx-auto max-w-2xl text-center">
-				<div class="mb-4 text-4xl text-red-500">⚠️</div>
-				<p class="text-red-600">{error}</p>
-				<button
-					on:click={loadUserEvents}
-					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
-				>
-					Try Again
-				</button>
-			</div>
-		{:else if userEvents.length === 0}
+		{#if userEvents.length === 0}
 			<div class="mx-auto max-w-2xl text-center">
 				<div class="mb-4 animate-pulse text-6xl">🎉</div>
 				<h2 class="mb-4 text-2xl font-bold">No Events Yet</h2>
@@ -165,7 +136,12 @@
 										<span>{event.location}</span>
 									</div>
 									<div class="flex items-center space-x-2">
-										<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
+										<span
+											class="rounded-sm border px-2 py-1 text-xs font-medium {event.type ===
+											'limited'
+												? 'border-amber-600 text-amber-600'
+												: 'border-teal-500 text-teal-500'}"
+										>
 											{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 										</span>
 										<span
--- a/src/routes/event/[id]/+error.svelte
+++ b/src/routes/event/[id]/+error.svelte
@@ -6,18 +6,10 @@
 </script>

 <svelte:head>
-	<title>Error - Event Cactus</title>
+	<title>Error - Cactoide</title>
 </svelte:head>

 <div class="flex min-h-screen flex-col">
-	<!-- Page Header -->
-	<div class=" border-b py-6">
-		<div class="container mx-auto px-4 text-center">
-			<h1 class=" font-display mb-2 text-2xl font-bold">Error</h1>
-			<p class="">Something went wrong</p>
-		</div>
-	</div>
-
 	<!-- Error Content -->
 	<div class="container mx-auto flex-1 px-4 py-8">
 		<div class="mx-auto max-w-md text-center">
@@ -25,26 +17,25 @@
 				<div class="mb-4 text-6xl text-red-400">🚨</div>
 				<h2 class="mb-4 text-2xl font-bold text-red-400">Something Went Wrong</h2>

-				<p class=" mb-6">
+				<p class="mb-6">
 					{error?.message || 'An unexpected error occurred.'}
 				</p>
-
-				<div class="space-y-3">
+			</div>
+		</div>
+		<div class="mx-auto mt-8 max-w-md text-center">
 			<button
-						on:click={() => goto('/')}
-						class="  w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
+				on:click={() => goto('/create')}
+				class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
 			>
 				Create New Event
 			</button>

 			<button
 				on:click={() => window.location.reload()}
-						class="bg-dark-600 hover:bg-dark-500 w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
+				class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
 			>
 				Try Again
 			</button>
 		</div>
 	</div>
-		</div>
-	</div>
 </div>
--- a/src/routes/event/[id]/+page.server.ts
+++ b/src/routes/event/[id]/+page.server.ts
@@ -0,0 +1,145 @@
+import { drizzleQuery } from '$lib/database/db';
+import { events, rsvps } from '$lib/database/schema';
+import { eq, asc } from 'drizzle-orm';
+import { error, fail } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const eventId = params.id;
+
+	if (!eventId) {
+		throw error(404, 'EventId not found');
+	}
+
+	try {
+		// Fetch event and RSVPs in parallel
+		const [eventData, rsvpData] = await Promise.all([
+			drizzleQuery.select().from(events).where(eq(events.id, eventId)).limit(1),
+			drizzleQuery
+				.select()
+				.from(rsvps)
+				.where(eq(rsvps.eventId, eventId))
+				.orderBy(asc(rsvps.createdAt))
+		]);
+
+		if (!eventData[0]) {
+			throw error(404, 'Event not found');
+		}
+
+		const event = eventData[0];
+		const eventRsvps = rsvpData;
+
+		// Transform the data to match the expected interface
+		const transformedEvent = {
+			id: event.id,
+			name: event.name,
+			date: event.date,
+			time: event.time,
+			location: event.location,
+			type: event.type,
+			attendee_limit: event.attendeeLimit,
+			visibility: event.visibility,
+			user_id: event.userId,
+			created_at: event.createdAt?.toISOString() || new Date().toISOString(),
+			updated_at: event.updatedAt?.toISOString() || new Date().toISOString()
+		};
+
+		const transformedRsvps = eventRsvps.map((rsvp) => ({
+			id: rsvp.id,
+			event_id: rsvp.eventId,
+			name: rsvp.name,
+			user_id: rsvp.userId,
+			created_at: rsvp.createdAt?.toISOString() || new Date().toISOString()
+		}));
+
+		const userId = cookies.get('cactoideUserId');
+
+		return {
+			event: transformedEvent,
+			rsvps: transformedRsvps,
+			userId: userId
+		};
+	} catch (err) {
+		if (err instanceof Response) throw err; // This is the 404 error
+
+		console.error('Error loading event:', err);
+		throw error(500, 'Failed to load event');
+	}
+};
+
+export const actions: Actions = {
+	addRSVP: async ({ request, params, cookies }) => {
+		const eventId = params.id;
+		const formData = await request.formData();
+
+		const name = formData.get('newAttendeeName') as string;
+		const userId = cookies.get('cactoideUserId');
+
+		console.log(`name: ${name}`);
+		console.log(`userId: ${userId}`);
+
+		if (!name?.trim() || !userId) {
+			return fail(400, { error: 'Name and user ID are required' });
+		}
+
+		try {
+			// Check if event exists and get its details
+			const [eventData] = await drizzleQuery.select().from(events).where(eq(events.id, eventId));
+			if (!eventData) {
+				return fail(404, { error: 'Event not found' });
+			}
+
+			// Check if event is full (for limited type events)
+			if (eventData.type === 'limited' && eventData.attendeeLimit) {
+				const currentRSVPs = await drizzleQuery
+					.select()
+					.from(rsvps)
+					.where(eq(rsvps.eventId, eventId));
+				if (currentRSVPs.length >= eventData.attendeeLimit) {
+					return fail(400, { error: 'Event is full' });
+				}
+			}
+
+			// Check if name is already in the list
+			const existingRSVPs = await drizzleQuery
+				.select()
+				.from(rsvps)
+				.where(eq(rsvps.eventId, eventId));
+			if (existingRSVPs.some((rsvp) => rsvp.name.toLowerCase() === name.toLowerCase())) {
+				return fail(400, { error: 'Name already exists for this event' });
+			}
+
+			// Add RSVP to database
+			await drizzleQuery.insert(rsvps).values({
+				eventId: eventId,
+				name: name.trim(),
+				userId: userId,
+				createdAt: new Date()
+			});
+
+			return { success: true };
+		} catch (err) {
+			console.error('Error adding RSVP:', err);
+			return fail(500, { error: 'Failed to add RSVP' });
+		}
+	},
+
+	removeRSVP: async ({ request, params }) => {
+		const eventId = params.id;
+		const formData = await request.formData();
+
+		const rsvpId = formData.get('rsvpId') as string;
+
+		if (!rsvpId) {
+			return fail(400, { error: 'RSVP ID is required' });
+		}
+
+		try {
+			await drizzleQuery.delete(rsvps).where(eq(rsvps.id, rsvpId));
+			return { success: true };
+		} catch (err) {
+			console.error('Error removing RSVP:', err);
+			return fail(500, { error: 'Failed to remove RSVP' });
+		}
+	}
+};
--- a/src/routes/event/[id]/+page.svelte
+++ b/src/routes/event/[id]/+page.svelte
@@ -1,51 +1,39 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { eventsStore } from '$lib/stores/events-supabase';
 	import type { Event, RSVP } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import { enhance } from '$app/forms';

-	let event: Event | undefined;
+	export let data: { event: Event; rsvps: RSVP[]; userId: string };
+	export let form;
+
+	let event: Event;
 	let rsvps: RSVP[] = [];
 	let newAttendeeName = '';
 	let isAddingRSVP = false;
 	let error = '';
 	let success = '';
-	let currentUserId = '';
+
+	// Use server-side data
+	$: event = data.event;
+	$: rsvps = data.rsvps;
+	$: currentUserId = data.userId;
+
+	// Handle form errors from server
+	$: if (form?.error) {
+		error = form.error;
+		success = '';
+	}
+
+	// Handle form success from server
+	$: if (form?.success) {
+		success = 'RSVP added successfully!';
+		error = '';
+		newAttendeeName = '';
+	}

 	const eventId = $page.params.id;

-	onMount(() => {
-		loadEvent();
-		generateUserId();
-	});
-
-	function generateUserId() {
-		// Generate a unique user ID and store it in localStorage
-		let userId = localStorage.getItem('eventCactusUserId');
-		if (!userId) {
-			userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-			localStorage.setItem('eventCactusUserId', userId);
-		}
-		currentUserId = userId;
-	}
-
-	async function loadEvent() {
-		if (!eventId) return;
-
-		try {
-			const result = await eventsStore.getEventWithRSVPs(eventId);
-			if (result) {
-				event = result.event;
-				rsvps = result.rsvps;
-			} else {
-				error = 'Event not found';
-			}
-		} catch (err) {
-			error = 'Failed to load event';
-		}
-	}
-
 	function formatDate(dateString: string, timeString: string): string {
 		const date = new Date(`${dateString}T${timeString}`);
 		const year = date.getFullYear();
@@ -59,50 +47,24 @@
 		return `${hours}:${minutes}`;
 	}

-	async function addRSVP() {
-		if (!newAttendeeName.trim() || !eventId) return;
-
-		isAddingRSVP = true;
-		error = '';
-		success = '';
-
-		try {
-			const rsvpSuccess = await eventsStore.addRSVP(eventId, newAttendeeName.trim(), currentUserId);
-
-			if (rsvpSuccess) {
-				newAttendeeName = '';
-				await loadEvent(); // Reload to get updated attendee list
-				success = 'RSVP added successfully!';
-			} else {
-				error = 'Failed to add RSVP. Event might be full or name already exists.';
-			}
-		} catch (err) {
-			error = 'An error occurred while adding RSVP.';
-		} finally {
-			isAddingRSVP = false;
-		}
-	}
-
-	async function removeRSVP(rsvpId: string) {
-		if (!eventId) return;
-
-		const success = await eventsStore.removeRSVP(eventId, rsvpId);
-		if (success) {
-			await loadEvent(); // Reload to get updated attendee list
-		}
-	}
-
 	function copyEventLink() {
 		const url = `${window.location.origin}/event/${eventId}`;
 		navigator.clipboard.writeText(url).then(() => {
 			success = 'Event link copied to clipboard!';
-			setTimeout(() => (success = ''), 4000);
+			setTimeout(() => {
+				success = '';
+			}, 3000);
 		});
 	}
+
+	function clearMessages() {
+		error = '';
+		success = '';
+	}
 </script>

 <svelte:head>
-	<title>{event?.name || 'Event'} - Event Cactus</title>
+	<title>{event?.name || 'Event'} - Cactoide</title>
 </svelte:head>

 <div class="flex min-h-screen flex-col">
@@ -180,16 +142,20 @@
 						<!-- Event Type, Visibility & Capacity -->
 						<div class="flex items-center justify-between rounded-sm p-3">
 							<div class="flex items-center space-x-2">
-								<span class="rounded-full border px-2 py-1 text-xs font-semibold text-violet-400">
+								<span
+									class="rounded-sm border px-2 py-1 text-xs font-medium {event.type === 'limited'
+										? 'border-amber-600 text-amber-600'
+										: 'border-teal-500 text-teal-500'}"
+								>
 									{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 								</span>
 								<span
-									class="rounded-full border px-2 py-1 text-xs font-semibold {event.visibility ===
+									class="rounded-sm border px-2 py-1 text-xs font-medium {event.visibility ===
 									'public'
 										? 'border-green-300 text-green-400'
 										: 'border-orange-300 text-orange-400'}"
 								>
-									{event.visibility === 'public' ? '🌍 Public' : '🔒 Private'}
+									{event.visibility === 'public' ? 'Public' : 'Private'}
 								</span>
 							</div>

@@ -216,13 +182,30 @@
 							<p class="mt-1 text-sm">Maximum capacity reached</p>
 						</div>
 					{:else}
-						<form on:submit|preventDefault={addRSVP} class="space-y-4">
+						<form
+							method="POST"
+							action="?/addRSVP"
+							use:enhance={() => {
+								isAddingRSVP = true;
+								clearMessages();
+								return async ({ result, update }) => {
+									isAddingRSVP = false;
+									if (result.type === 'failure') {
+										error = result.data?.error || 'Failed to add RSVP';
+									}
+									update();
+								};
+							}}
+							class="space-y-4"
+						>
+							<input type="hidden" name="userId" value={currentUserId} />
 							<div>
 								<label for="attendeeName" class=" mb-2 block text-sm font-semibold">
 									Your Name <span class="text-red-400">*</span>
 								</label>
 								<input
 									id="attendeeName"
+									name="newAttendeeName"
 									type="text"
 									bind:value={newAttendeeName}
 									class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
@@ -293,8 +276,23 @@
 									</div>

 									{#if attendee.user_id === currentUserId}
+										<form
+											method="POST"
+											action="?/removeRSVP"
+											use:enhance={() => {
+												clearMessages();
+												return async ({ result, update }) => {
+													if (result.type === 'failure') {
+														error = result.data?.error || 'Failed to remove RSVP';
+													}
+													update();
+												};
+											}}
+											style="display: inline;"
+										>
+											<input type="hidden" name="rsvpId" value={attendee.id} />
 											<button
-											on:click={() => removeRSVP(attendee.id)}
+												type="submit"
 												class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
 												aria-label="Remove RSVP"
 											>
@@ -307,6 +305,7 @@
 													></path>
 												</svg>
 											</button>
+										</form>
 									{/if}
 								</div>
 							{/each}