diff --git a/frontend/public/404.png b/frontend/public/404.png
new file mode 100644
index 0000000..f1c6f23
Binary files /dev/null and b/frontend/public/404.png differ
diff --git a/frontend/src/components/EditDetails.jsx b/frontend/src/components/EditDetails.jsx
index c44be20..1d90130 100644
--- a/frontend/src/components/EditDetails.jsx
+++ b/frontend/src/components/EditDetails.jsx
@@ -143,7 +143,7 @@ const EditDetails = () => {
   return (
     <Box w="100%" maxW="500px" mx="auto" mt="5">
       <Box textAlign="center" mb={6}>
-        <Avatar size="xl" src={userDetails.pic} mb={2} />
+        <Avatar size="xl" src={userDetails?.pic} mb={2} />
         <Text fontSize="lg">{userDetails?.username || "Your Username"}</Text>
       </Box>
       <form onSubmit={handleSubmit}>
diff --git a/frontend/src/components/NotFound.jsx b/frontend/src/components/NotFound.jsx
new file mode 100644
index 0000000..dede7d0
--- /dev/null
+++ b/frontend/src/components/NotFound.jsx
@@ -0,0 +1,60 @@
+import React, { useEffect } from "react";
+import { gsap } from "gsap";
+
+const NotFound = () => {
+  useEffect(() => {
+    // GSAP animation for the 404 text and additional elements
+    const tl = gsap.timeline();
+
+    // Animate the main title
+    tl.fromTo(
+      ".not-found-text",
+      { opacity: 0, y: -50 },
+      { opacity: 1, y: 0, duration: 1, stagger: 0.1, ease: "bounce.out" }
+    )
+      .fromTo(
+        ".go-home",
+        { opacity: 0, y: 50 },
+        { opacity: 1, y: 0, duration: 0.8, delay: 0.3 } // Adjusted duration and delay
+      )
+      .fromTo(
+        ".quirky-image",
+        { scale: 0 },
+        { scale: 1, duration: 0.8, ease: "elastic.out(1, 0.3)", delay: 0.3 } // Adjusted duration and delay
+      )
+      .fromTo(
+        ".fun-text",
+        { rotation: -30, opacity: 0 },
+        { rotation: 0, opacity: 1, duration: 1, stagger: 0.2, delay: 0.5 } // Adjusted delay
+      );
+  }, []);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-800 text-white">
+      <h1 className="not-found-text text-8xl font-bold">404</h1>
+      <h2 className="not-found-text text-3xl mt-4">Page Not Found</h2>
+      <p className="not-found-text text-lg mt-2">
+        Oops! The page you're looking for doesn't exist.
+      </p>
+
+      {/* Quirky animated image */}
+      <img
+        src="404.png" // Replace with your fun image URL
+        alt="Quirky illustration"
+        className="quirky-image w-32 h-32 mt-4"
+      />
+
+      <p className="fun-text text-md mt-4">
+        It's just a 404 error, no big deal!
+      </p>
+      <a
+        href="/"
+        className="go-home mt-8 px-6 py-3 bg-blue-600 rounded-md shadow-lg hover:bg-blue-700 transition duration-300"
+      >
+        Go Back Home
+      </a>
+    </div>
+  );
+};
+
+export default NotFound;
diff --git a/frontend/src/components/routes/mainroute.jsx b/frontend/src/components/routes/mainroute.jsx
index 62a0f24..dc05ce7 100644
--- a/frontend/src/components/routes/mainroute.jsx
+++ b/frontend/src/components/routes/mainroute.jsx
@@ -21,6 +21,7 @@ import { Header } from "../homePage/HomePage";
 import Navbar from "../MainNavbar";
 import Logout from "../Logout";
 import ForgetPassword from "../forgotPassword/ForgetPassword";
+import NotFound from "../NotFound";
 
 const Test = () => {
   const [userId, setUserId] = useState("");
@@ -55,8 +56,8 @@ const Mainrouter = createBrowserRouter([
       },
       {
         path: "forgetPassword",
-        element: <ForgetPassword />
-      }
+        element: <ForgetPassword />,
+      },
     ],
   },
   {
@@ -103,11 +104,9 @@ const Mainrouter = createBrowserRouter([
         path: "/edit",
         element: <EditDetails />,
       },
-
       {
         path: "room",
         element: <Mainbuttons />,
-        // index: true, was causing error
         children: [
           {
             path: "createroom",
@@ -125,6 +124,10 @@ const Mainrouter = createBrowserRouter([
       },
     ],
   },
+  {
+    path: "*", // Catch-all route for undefined paths
+    element: <NotFound />, // Render the NotFound component
+  },
 ]);
 
 export default Mainrouter;