diff --git a/frontend/src/App.js b/frontend/src/App.js
index 349dbaa..84633f4 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -11,6 +11,7 @@ import HomePage from './pages/Home';
 import AboutPage from './pages/AboutPage';
 import DocumentationPage from './pages/DocumentationPage';
 import ContributorsPage from './pages/ContributorsPage';
+import NotFoundPage from './pages/NotFoundPage';
 import './App.css';
 
 function App() {
@@ -97,6 +98,10 @@ function App() {
               path="/contributors" 
               element={<ContributorsPage theme={theme} />} 
             />
+            <Route 
+              path="*" 
+              element={<NotFoundPage theme={theme} />} 
+            />
           </Routes>
         </Layout>
       </Router>
diff --git a/frontend/src/pages/NotFoundPage.jsx b/frontend/src/pages/NotFoundPage.jsx
new file mode 100644
index 0000000..ab891e4
--- /dev/null
+++ b/frontend/src/pages/NotFoundPage.jsx
@@ -0,0 +1,53 @@
+import { Link } from "react-router-dom";
+import { AlertCircle, Cpu, ArrowLeft } from "lucide-react";
+
+const NotFoundPage = ({ theme }) => {
+  const isDark = theme === "dark";
+
+  return (
+    <div
+      className={`relative flex-1 flex flex-col items-center justify-center p-6 transition-all duration-500 ${
+        isDark
+          ? "bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 text-white"
+          : "bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 text-gray-900"
+      }`}
+    >
+      {/* Floating icons for tech vibe */}
+      <div className="absolute top-20 left-10 opacity-40 animate-bounce-slow">
+        <AlertCircle
+          className={`${isDark ? "text-white" : "text-gray-600"} w-12 h-12`}
+        />
+      </div>
+      <div className="absolute bottom-20 right-32 opacity-40 animate-spin-slow">
+        <Cpu
+          className={`${isDark ? "text-white" : "text-gray-600"} w-20 h-20`}
+        />
+      </div>
+
+      {/* Main content */}
+      <div className="relative z-10 text-center max-w-xl">
+        <h1 className="text-7xl font-extrabold mb-4 animate-pulse">404</h1>
+        <p className="text-2xl mb-6">
+          Uh-oh! This algorithm didn't find a solution here.
+        </p>
+        <p className="text-lg mb-8">
+          Looks like this page isn't in the visualization. Try going back and
+          exploring!
+        </p>
+        <Link
+          to="/"
+          className={`inline-flex items-center gap-2 px-6 py-4 rounded-lg font-semibold shadow-lg transition-transform transform hover:scale-105 ${
+            isDark
+              ? "bg-blue-600 hover:bg-blue-700 text-white"
+              : "bg-blue-500 hover:bg-blue-600 text-white"
+          }`}
+        >
+          <ArrowLeft className="w-5 h-5" />
+          Go Back to Visualizer
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;