diff --git a/frontend/src/layouts/MainLayout.jsx b/frontend/src/layouts/MainLayout.jsx
index 7a66bfc..d6a0476 100644
--- a/frontend/src/layouts/MainLayout.jsx
+++ b/frontend/src/layouts/MainLayout.jsx
@@ -3,9 +3,9 @@ import Footer from "../components/shared/Footer";
 
 export default function MainLayout({ children }) {
   return (
-    <div className="min-h-screen bg-white text-black flex flex-col font-sans">
+    <div className="min-h-screen bg-white text-black flex flex-col font-sans" role="document">
       <Navbar />
-      <main className="flex-1 w-full flex flex-col">
+      <main className="flex-1 w-full flex flex-col" role="main" aria-label="Main Content">
         {children}
       </main>
       <Footer />
diff --git a/frontend/src/pages/NotFoundPage.jsx b/frontend/src/pages/NotFoundPage.jsx
index cfb722b..500804c 100644
--- a/frontend/src/pages/NotFoundPage.jsx
+++ b/frontend/src/pages/NotFoundPage.jsx
@@ -2,93 +2,48 @@ import { Link } from "react-router-dom";
 
 export default function NotFoundPage() {
   return (
-    <main
-      className="relative min-h-screen overflow-hidden border-t-4 border-black bg-white"
-      aria-label="404 Not Found Page"
-    >
-      {/* Background Grid */}
-      <div
-        className="absolute inset-0 pointer-events-none"
-        style={{
-          backgroundImage:
-            "repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent calc(100% / 12))",
-        }}
-      />
-
-      <div className="relative z-10 mx-auto flex flex-1 max-w-screen-2xl flex-col lg:flex-row">
-        {/* LEFT PANEL */}
-        <div className="relative flex-1 overflow-hidden border-b-4 border-black px-6 py-16 sm:px-10 lg:border-r-4 lg:border-b-0 lg:py-20">
-          {/* Ghost 404 */}
-          <p
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-0 flex select-none items-center justify-center text-[clamp(10rem,35vw,30rem)] font-black tracking-tighter text-black opacity-[0.06]"
-          >
-            404
-          </p>
-
-          <div className="relative z-10 flex h-full flex-col justify-between">
-            {/* Label */}
-            <div>
-              <p className="text-xs font-black uppercase tracking-[0.35em] text-black sm:text-sm">
-                Error / Route Unavailable
-              </p>
-            </div>
-
-            {/* Main Content */}
-            <div className="py-12 lg:py-0">
-              <h1 className="text-[clamp(5rem,12vw,12rem)] font-black uppercase leading-[0.85] tracking-tighter text-black">
-                404
-              </h1>
-
-              <div className="mt-8 h-[6px] w-32 bg-black" />
+    <div className="w-full flex-1 flex flex-col md:flex-row bg-white" role="region" aria-label="Page Not Found Information">
+      {/* Left panel — large 404 */}
+      <div className="flex-1 flex items-center justify-center border-b-4 md:border-b-0 md:border-r-4 border-black px-8 py-16 md:py-0" aria-hidden="true">
+        <p className="text-[clamp(8rem,22vw,18rem)] font-black leading-none tracking-tighter text-black select-none">
+          404
+        </p>
+      </div>
 
-              <h2 className="mt-10 text-[clamp(3rem,7vw,6rem)] font-black uppercase leading-[0.9] tracking-tighter text-black">
-                Page
-                <br />
-                Not Found.
-              </h2>
-            </div>
+      {/* Right panel — message + CTA */}
+      <div className="flex-1 flex flex-col justify-center px-10 sm:px-16 py-16 md:py-0 max-w-xl md:max-w-none">
+        <p className="text-xs font-black uppercase tracking-widest text-black mb-4">
+          Error / Not Found
+        </p>
 
-            {/* Description */}
-            <div className="max-w-xl">
-              <p className="text-lg font-medium leading-relaxed text-black md:text-xl">
-                The page you're looking for doesn't exist, may have been moved,
-                or is temporarily unavailable.
-              </p>
-            </div>
-          </div>
-        </div>
+        <h1 className="text-4xl sm:text-5xl md:text-6xl font-black uppercase tracking-tighter text-black leading-tight mb-6">
+          Page not<br />found.
+        </h1>
 
-        {/* RIGHT PANEL */}
-        <div className="flex flex-1 items-center px-6 py-16 sm:px-10 md:px-16 lg:px-20 lg:py-20">
-          <div className="max-w-xl">
-            <p className="text-2xl font-medium leading-relaxed text-black md:text-3xl">
-              Double-check the URL or continue exploring the platform using one
-              of the options below.
-            </p>
+        <div className="w-16 h-1 bg-black mb-8" aria-hidden="true" />
 
-            {/* Actions */}
-            <nav
-              aria-label="404 page actions"
-              className="mt-12 flex flex-wrap gap-5"
-            >
-              <Link
-                to="/"
-                className="inline-flex transform-gpu items-center justify-center border-4 border-black bg-black px-10 py-5 text-sm font-black uppercase tracking-[0.2em] text-white transition-all duration-200 hover:-translate-y-1 hover:bg-white hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
-              >
-                Go Home
-              </Link>
+        <p className="text-base sm:text-lg font-bold text-black leading-relaxed mb-12 max-w-sm">
+          The page you're looking for doesn't exist or has been moved.
+          Double-check the URL, or head back home.
+        </p>
 
-              <Link
-                to="/explore"
-                className="inline-flex transform-gpu items-center justify-center border-4 border-black bg-white px-10 py-5 text-sm font-black uppercase tracking-[0.2em] text-black transition-all duration-200 hover:-translate-y-1 hover:bg-black hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
-              >
-                Explore
-              </Link>
-            </nav>
-          </div>
+        <div className="flex flex-col sm:flex-row gap-4">
+          <Link
+            to="/"
+            aria-label="Go back to the homepage"
+            className="inline-block py-5 px-10 bg-black text-white text-sm font-black uppercase tracking-widest hover:bg-white hover:text-black border-4 border-black transition-colors"
+          >
+            Go Home
+          </Link>
+          <Link
+            to="/explore"
+            aria-label="Explore other platform features"
+            className="inline-block py-5 px-10 bg-white text-black text-sm font-black uppercase tracking-widest hover:bg-black hover:text-white border-4 border-black transition-colors"
+          >
+            Explore
+          </Link>
         </div>
       </div>
-    </main>
+    </div>
   );
-}
\ No newline at end of file
+}