diff --git a/src/App.jsx b/src/App.jsx
index 6048720..8ff12f0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Header from './components/Header';
 import Footer from './components/Footer';
 import Home from './components/Home';
+import NotFound from './components/NotFound';
 import About from './components/About';
 import Roadmap from './components/Roadmap';
 import RoadmapDetail from './components/RoadmapDetail'; // Import the RoadmapDetail component
@@ -25,6 +26,7 @@ const App = () => {
           <Route path="/roadmap" element={<Roadmap />}>
             <Route path=":id" element={<RoadmapDetail />} />
           </Route>
+          <Route path="*" element={<NotFound />} />
         </Routes>
       </main>
       <Footer />
diff --git a/src/components/NotFound.jsx b/src/components/NotFound.jsx
new file mode 100644
index 0000000..7f9f010
--- /dev/null
+++ b/src/components/NotFound.jsx
@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+
+const NotFound = () => {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+            <h1 className="text-6xl font-bold text-gray-900 mb-8">404</h1>
+            <p className="text-lg text-gray-700 mb-8">Oops! The page you're looking for doesn't exist.</p>
+            <Link to="/" className="px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded hover:bg-green-700 transition duration-300">
+                Go Back Home
+            </Link>
+        </div>
+    );
+};
\ No newline at end of file