diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e7aaae35..4acb0741 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 import "./App.css";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import Home from "./pages/Home";
@@ -19,6 +19,7 @@ import About from "./pages/About";
 import Policy from "./pages/Policy";
 import GoTop from "./components/GoTop";
 import { Toaster } from 'react-hot-toast';
+import PageNotFound from "./pages/PageNotFound";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -84,7 +85,7 @@ function App() {
                   <Policy />
                 }
               />
-              <Route path="*" element={<Navigate to="/app" />} />
+              <Route path="*" element={<PageNotFound/>} />
             </Routes>
           </div>
 
diff --git a/frontend/src/assets/notFound.png b/frontend/src/assets/notFound.png
new file mode 100644
index 00000000..c9e954e1
Binary files /dev/null and b/frontend/src/assets/notFound.png differ
diff --git a/frontend/src/pages/PageNotFound.tsx b/frontend/src/pages/PageNotFound.tsx
new file mode 100644
index 00000000..b1a0a239
--- /dev/null
+++ b/frontend/src/pages/PageNotFound.tsx
@@ -0,0 +1,15 @@
+import notfound from '../assets/notFound.png'
+
+const PageNotFound = () => {
+  return (
+    <div className='flex flex-col items-center justify-center mx-auto'>
+        <img src={notfound} alt='Page Not Found' className='w-[400px]' /> 
+        <p className='text-center mb-20'>
+            <span className='text-red-600 font-bold text-6xl'>404</span><br />
+            <span className='text-gray-200 ite text-3xl font-semibold'>Page Not Found</span>
+        </p>    
+    </div>
+  )
+}
+
+export default PageNotFound