diff --git a/src/App.jsx b/src/App.jsx
index 56ae444..9f7f9ef 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -118,6 +118,7 @@ import Resize from "./pages/docs/Interactivity/Resize";
 import ScrollBehavior from "./pages/docs/Interactivity/ScrollBehavior";
 import UserSelect from "./pages/docs/Interactivity/UserSelect";
 import WillChange from "./pages/docs/Interactivity/WillChange";
+import NotFound from "./pages/NotFound";
 
 import "./app.css";
 
@@ -603,6 +604,10 @@ function App() {
         },
       ],
     },
+    {
+      path: "*",
+      element: <NotFound />,
+    },
   ]);
   return <RouterProvider router={router} />;
 }
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
new file mode 100644
index 0000000..fd7a5f6
--- /dev/null
+++ b/src/pages/NotFound.jsx
@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  useEffect(() => {
+    document.getElementsByTagName("title")[0].innerText = "404 - Nkhili CSS";
+  }, []);
+  
+  return (
+    <div className="flex justify-center items-center flex-column h-screen capitalize gap-10">
+      <h1 className="text-9xl text-white">404</h1>
+      <span className="text-light-periwinkle">page not found</span>
+      <Link
+        className="px-4 text-black py-2 bg-primary rounded font-medium"
+        to="/"
+      >
+        go home
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;