diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 059a4db..ab9345c 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,12 +1,13 @@
 // import React from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Header from './components/Header';
-import Home from './components/Home';
-import Appointments from './components/Appointments';
-import Patients from './components/Patients';
-import Doctors from './components/Doctors';
-import Admin from './components/Admin';
-import Footer from './components/Footer';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Header from "./components/Header";
+import Home from "./components/Home";
+import Appointments from "./components/Appointments";
+import Patients from "./components/Patients";
+import Doctors from "./components/Doctors";
+import Admin from "./components/Admin";
+import Footer from "./components/Footer";
+import NotFound from "./components/NotFound";
 
 function App() {
   return (
@@ -20,6 +21,7 @@ function App() {
             <Route path="/patients" element={<Patients />} />
             <Route path="/doctors" element={<Doctors />} />
             <Route path="/admin" element={<Admin />} />
+            <Route path="*" element={<NotFound />} />
           </Routes>
         </main>
         <Footer />
@@ -28,5 +30,4 @@ function App() {
   );
 }
 
-
 export default App;
diff --git a/Frontend/src/components/NotFound.jsx b/Frontend/src/components/NotFound.jsx
new file mode 100644
index 0000000..3b1f72f
--- /dev/null
+++ b/Frontend/src/components/NotFound.jsx
@@ -0,0 +1,31 @@
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <section className="bg-transparent flex items-center justify-center h-full">
+      <div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="mx-auto max-w-screen-sm text-center">
+          <h1 className="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-green-500">
+            404
+          </h1>
+          <p className="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl">
+            {"Something's missing."}
+          </p>
+          <p className="mb-4 text-lg font-light text-gray-500">
+            {
+              " Sorry, we can't find that page. You'll find lots to explore on the home page."
+            }
+          </p>
+          <Link
+            to={"/"}
+            className="inline-flex text-white bg-gradient-to-r from-green-500 to-green-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-4"
+          >
+            Back to Homepage
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NotFound;