From 7cf852cd68af5850cbda0064de7740bb48ce4aa5 Mon Sep 17 00:00:00 2001
From: Zheng Fu <24203166+fuzheng1998@users.noreply.github.com>
Date: Tue, 28 Nov 2023 19:27:18 +1100
Subject: [PATCH 1/2] Add 404 not found router

---
 src/App.tsx       |  2 ++
 src/pages/404.tsx | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 src/pages/404.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5f2dc73e..4477a6fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import ProjectForm from "./pages/ProjectForm";
 import ScrollToTop from "./util/scrollToTop";
 import StudentDashboard from "./pages/StudentDashboard";
 import RegistrationForm from "./pages/RegistrationForm";
+import NotFoundPage from './pages/404';
 
 function App() {
   return (
@@ -53,6 +54,7 @@ function App() {
                 path={ROUTER_PATHS.MENTOR_DASHBOARD}
                 element={<MentorDashboard />}
               />
+              <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </AuthProvider>
         </ScrollToTop>
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 00000000..bfe04464
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const NotFoundPage: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center pt-28">
+        <h1 className=" font-display text-5xl md:text-7xl font-bold text-center">
+            404
+        </h1>
+        <h2 className=" font-display text-2xl md:text-4xl font-bold text-center">
+            Page Not Found
+        </h2>
+    </div>
+  );
+};
+
+export default NotFoundPage;

From 14b26d7c073f144acf09cfe4da22cfc4e1c2bffa Mon Sep 17 00:00:00 2001
From: Zheng Fu <24203166+fuzheng1998@users.noreply.github.com>
Date: Tue, 28 Nov 2023 19:27:18 +1100
Subject: [PATCH 2/2] Add 404 not found page and router

---
 src/App.tsx       |  2 ++
 src/pages/404.tsx | 16 ++++++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 src/pages/404.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5f2dc73e..4477a6fb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import ProjectForm from "./pages/ProjectForm";
 import ScrollToTop from "./util/scrollToTop";
 import StudentDashboard from "./pages/StudentDashboard";
 import RegistrationForm from "./pages/RegistrationForm";
+import NotFoundPage from './pages/404';
 
 function App() {
   return (
@@ -53,6 +54,7 @@ function App() {
                 path={ROUTER_PATHS.MENTOR_DASHBOARD}
                 element={<MentorDashboard />}
               />
+              <Route path="*" element={<NotFoundPage />} />
             </Routes>
           </AuthProvider>
         </ScrollToTop>
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
new file mode 100644
index 00000000..bfe04464
--- /dev/null
+++ b/src/pages/404.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const NotFoundPage: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center pt-28">
+        <h1 className=" font-display text-5xl md:text-7xl font-bold text-center">
+            404
+        </h1>
+        <h2 className=" font-display text-2xl md:text-4xl font-bold text-center">
+            Page Not Found
+        </h2>
+    </div>
+  );
+};
+
+export default NotFoundPage;