diff --git a/src/app/error.tsx b/src/app/error.tsx
index 6847fc17..64f60e16 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -2,7 +2,10 @@
 
 import { useEffect } from 'react';
 
-export default function Error({ error, reset }: { error: Error; reset: () => void }) {
+import { CustomButton } from '@/components/Buttons/CustomButton';
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   useEffect(() => {
     // Log the error to an error reporting service
     /* eslint-disable no-console */
@@ -10,17 +13,24 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
   }, [error]);
 
   return (
-    <div>
-      <h2>Something went wrong!</h2>
-      <button
-        type="button"
-        onClick={
-          // Attempt to recover by trying to re-render the segment
-          () => reset()
-        }
-      >
-        Try again
-      </button>
+    <div className="flex flex-col h-screen">
+      <Topbar />
+      <main className="flex h-full flex-col items-center justify-center gap-2 text-content">
+        <section className="text-center">
+          <h2 className="text-xl font-semibold">An Error Occurred</h2>
+          <p>Please try again or go back to the Home page.</p>
+        </section>
+        <div className="flex flex-row gap-2 mt-4">
+          <CustomButton variant="solid" size="lg" onClick={() => reset()}>
+            Try again
+          </CustomButton>
+          <a href="/">
+            <CustomButton variant="solid" size="lg">
+              Go to Home page
+            </CustomButton>
+          </a>
+        </div>
+      </main>
     </div>
   );
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 00000000..c3655215
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { CustomButton } from '@/components/Buttons/CustomButton';
+import { Topbar } from '@/components/Topbar/Topbar';
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col h-screen">
+      <Topbar />
+      <main className="flex h-full flex-col items-center justify-center gap-2 text-content">
+        <section className="text-center">
+          <h2 className="text-xl font-semibold">Ooops</h2>
+          <p>The requested page could not be found.</p>
+        </section>
+        <div className="flex flex-row gap-2 mt-4">
+          <a href="/">
+            <CustomButton variant="solid" size="lg">
+              Go to Home page
+            </CustomButton>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}