From 7384a3f82548514482112a8b7d97fdc0063588d4 Mon Sep 17 00:00:00 2001
From: Owen <owenrees.dev@gmail.com>
Date: Fri, 12 Jun 2026 14:17:29 +0200
Subject: [PATCH] custom 404 page

---
 TODO                            |  3 +--
 src/components/NotFoundView.tsx | 21 +++++++++++++++++++++
 src/routes/__root.tsx           |  2 ++
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/components/NotFoundView.tsx

diff --git a/TODO b/TODO
index b41ccde..b6f6871 100644
--- a/TODO
+++ b/TODO
@@ -4,9 +4,8 @@
 - privacy policy - have no access to anything you generate, only keep a count of success/failed pdf generations with timestamp and error message
 - a11y and lighthouse fixes
 - check wcag compliance
-- 429 lichess error handling
+- 429 lichess error handling - retry after 10 seconds
 - try/catch where needed in client code
 - generate state and check it against the state returned from lichess https://lichess.org/api#tag/oauth/GET/oauth
 - checkbox and toggle disabled states
-- 404 page
 - react query on for study and chapter load, to allow caching
\ No newline at end of file
diff --git a/src/components/NotFoundView.tsx b/src/components/NotFoundView.tsx
new file mode 100644
index 0000000..72dee14
--- /dev/null
+++ b/src/components/NotFoundView.tsx
@@ -0,0 +1,21 @@
+import { Link } from "@tanstack/react-router";
+
+const NotFoundView = () => {
+	return (
+		<div className="flex min-h-[calc(100vh-194px)] flex-col items-center justify-center p-6">
+			<div className="relative flex max-w-md flex-col items-center text-center">
+				<h1 className="text-2xl font-bold tracking-tight mb-4 text-(--accent)">
+					The page you are looking for does not exist.
+				</h1>
+
+				<div className="flex w-full gap-3 justify-center">
+					<Link to="/" className="btn btn-primary">
+						Go Home
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default NotFoundView;
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 66dc5d2..65b85fd 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -6,6 +6,7 @@ import { ToastContainer } from "react-toastify";
 import GenericErrorView from "#/components/GenericErrorView.tsx";
 import LoadingView from "#/components/LoadingView.tsx";
 import { MatomoAnalytics } from "#/components/MatomoAnalytics.tsx";
+import NotFoundView from "#/components/NotFoundView.tsx";
 import { LichessUserProvider } from "#/context/LichessUserContext.tsx";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
@@ -47,6 +48,7 @@ export const Route = createRootRoute({
 	shellComponent: RootDocument,
 	errorComponent: ({ error }) => <GenericErrorView error={error} />,
 	pendingComponent: () => <LoadingView />,
+	notFoundComponent: () => <NotFoundView />,
 });
 
 function RootDocument({ children }: { children: ReactNode }) {