diff --git a/src/App.jsx b/src/App.jsx
index 309d9c7..2325d2b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,7 @@ import About from "./Pages/About";
 
 import "./index.css";
 import Signup from "./Pages/Signup";
+import NotFound from "./Pages/NotFound";
 
 const App = () => {
   return (
@@ -31,6 +32,7 @@ const App = () => {
         <Route path="/cart" element={<CartWithFooter />} />
         <Route path="/wishlist" element={<WishlistWithFooter />} />
         <Route path="/about" element={<About/>} />
+        <Route path="*" element={<NotFound/>} />
 
       </Routes>
     </Router>
diff --git a/src/Pages/NotFound.jsx b/src/Pages/NotFound.jsx
new file mode 100644
index 0000000..1ff7512
--- /dev/null
+++ b/src/Pages/NotFound.jsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+function NotFound() {
+    return (
+        <main className="flex flex-col md:flex-col xl:flex-row w-full mx-auto mt-20 sm:w-11/12 md:w-3/4 lg:w-3/4 xl:w-3/4 px-4 py-8 sm:px-6 md:px-8 lg:px-10 rounded-3xl bg-gradient-to-b from-grey-200 to-white-300">
+            <div className="flex flex-col justify-center items-center px-4 py-6 md:px-8 lg:px-2 text-gray-700">
+                <h1 className="text-3xl sm:text-4xl md:text-5xl mb-4 font-Poppins">
+                    404 - Not Found!
+                </h1>
+                <p className="text-base items-center sm:text-lg md:text-xl mt-8 mb-10 text-center">
+                    Sorry! the page your are looking for was either not found or does not exist. Try refreshing the page or click the button below to go back to the home page.
+                </p>
+                <Link to="/"><button className="bg-blue-950 w-40 text-white px-4 py-2 rounded">Go to Home</button></Link>
+            </div>
+
+        </main>
+    )
+}
+
+export default NotFound;
\ No newline at end of file