1 files changed, 46 insertions, 4 deletions
diff --git a/src/client/pages/NotFoundPage.tsx b/src/client/pages/NotFoundPage.tsx
index 289dab5..72531c1 100644
--- a/src/client/pages/NotFoundPage.tsx
+++ b/src/client/pages/NotFoundPage.tsx
@@ -2,10 +2,52 @@ import { Link } from "wouter";
 
 export function NotFoundPage() {
 	return (
-		<div>
-			<h1>404 - Not Found</h1>
-			<p>The page you're looking for doesn't exist.</p>
-			<Link href="/">Go to Home</Link>
+		<div className="min-h-screen bg-cream flex items-center justify-center px-4">
+			<div className="text-center animate-fade-in">
+				<div className="w-20 h-20 mx-auto mb-6 bg-ivory rounded-2xl flex items-center justify-center">
+					<svg
+						className="w-10 h-10 text-muted"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={1.5}
+							d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<h1 className="font-display text-6xl font-bold text-ink mb-2">404</h1>
+				<h2 className="font-display text-xl font-medium text-slate mb-4">
+					Page Not Found
+				</h2>
+				<p className="text-muted mb-8 max-w-sm mx-auto">
+					The page you're looking for doesn't exist or has been moved.
+				</p>
+				<Link
+					href="/"
+					className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-200"
+				>
+					<svg
+						className="w-5 h-5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+						/>
+					</svg>
+					Go Home
+				</Link>
+			</div>
 		</div>
 	);
 }