diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0fc3d99..1432394 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -80,7 +80,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1818,7 +1817,6 @@
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1873,7 +1871,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2124,7 +2121,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.19",
         "caniuse-lite": "^1.0.30001751",
@@ -2765,7 +2761,6 @@
       "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4364,7 +4359,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4616,7 +4610,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4626,7 +4619,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4672,7 +4664,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -4816,8 +4807,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -5460,7 +5450,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz",
       "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
diff --git a/frontend/src/pages/NotFound.jsx b/frontend/src/pages/NotFound.jsx
index 73e1f5a..9c044e4 100644
--- a/frontend/src/pages/NotFound.jsx
+++ b/frontend/src/pages/NotFound.jsx
@@ -3,10 +3,116 @@ import { Link } from "react-router-dom";
 
 export default function NotFound() {
   return (
-    <div className="page not-found">
-      <h1>404 - Page Not Found</h1>
-      <p>The page you’re looking for doesn’t exist.</p>
-      <Link to="/">Go Back Home</Link>
+    <div style={styles.container}>
+      <div style={styles.illustrationBox}>
+        <div style={styles.circle}></div>
+        <h1 style={styles.title}>404</h1>
+      </div>
+
+      <div style={styles.contentBox}>
+        <h2 style={styles.subtitle}>Oops! You seem lost.</h2>
+        <p style={styles.description}>
+          The page you’re looking for doesn’t exist or may have been moved. Let’s get you back on track.
+        </p>
+        <Link to="/" style={styles.button}>
+          ⬅️ Return to Home
+        </Link>
+      </div>
+
+      <style>
+        {`
+          @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-15px); }
+            100% { transform: translateY(0px); }
+          }
+
+          @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+          }
+
+          a:hover {
+            background-color: #fff !important;
+            color: #ff416c !important;
+            transform: scale(1.05);
+          }
+        `}
+      </style>
     </div>
   );
 }
+
+const styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+    background: "linear-gradient(135deg, #ff4b2b, #ff416c)",
+    color: "#fff",
+    fontFamily: "'Poppins', sans-serif",
+    overflow: "hidden",
+    textAlign: "center",
+    animation: "fadeIn 1s ease-in-out",
+    padding: "0 20px",
+  },
+  illustrationBox: {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    animation: "float 3s ease-in-out infinite",
+  },
+  circle: {
+    width: "200px",
+    height: "200px",
+    background: "rgba(255, 255, 255, 0.15)",
+    borderRadius: "50%",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    margin: "auto",
+    filter: "blur(5px)",
+    zIndex: 0,
+  },
+  title: {
+    fontSize: "7rem",
+    fontWeight: "900",
+    zIndex: 2,
+    textShadow: "0 5px 20px rgba(0, 0, 0, 0.3)",
+  },
+  contentBox: {
+    marginTop: "30px",
+    maxWidth: "600px",
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+    borderRadius: "15px",
+    padding: "30px 40px",
+    boxShadow: "0 8px 25px rgba(0,0,0,0.3)",
+    backdropFilter: "blur(12px)",
+    animation: "fadeIn 1.5s ease-in-out",
+  },
+  subtitle: {
+    fontSize: "2.5rem",
+    fontWeight: "600",
+    marginBottom: "15px",
+  },
+  description: {
+    fontSize: "1.1rem",
+    marginBottom: "30px",
+    lineHeight: "1.6",
+  },
+  button: {
+    display: "inline-block",
+    padding: "14px 30px",
+    backgroundColor: "#ffebee",
+    color: "#ff416c",
+    borderRadius: "50px",
+    fontWeight: "600",
+    textDecoration: "none",
+    transition: "all 0.3s ease",
+    boxShadow: "0 4px 12px rgba(255, 255, 255, 0.3)",
+  },
+};