diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e5ae97d..87e32b9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -32,6 +32,7 @@ import FeedbackReviewPage from "./Components/feedback/FeedbackReviewPage";
 
 import 'react-toastify/dist/ReactToastify.css';
 import { ToastContainer } from 'react-toastify';
+import NotFound from "./Components/ui/NotFound";
 
 function Home() {
   const [showTop, setShowTop] = useState(false);
@@ -141,6 +142,7 @@ function App() {
         <Route path="/dashboard/github/:username" element={<GitHubProfile />} />
         <Route path="/leetcode/:leetUser" element={<LeetCode />} />
         <Route path="/feedback" element={<FeedbackReviewPage />} />
+        <Route path='*' element={<NotFound/>}/>
       </Routes>
       <ToastContainer
         position="bottom-right"
diff --git a/frontend/src/Components/ui/NotFound.jsx b/frontend/src/Components/ui/NotFound.jsx
index 362d0a8..8bbfda7 100644
--- a/frontend/src/Components/ui/NotFound.jsx
+++ b/frontend/src/Components/ui/NotFound.jsx
@@ -1,39 +1,49 @@
-import React from "react";
-import { Button } from "@/Components/ui/button"; // shadcn button
-import { motion } from "framer-motion";
-import { useNavigate } from "react-router-dom"; // if using React Router
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Home } from 'lucide-react'; 
+import { Button } from "@/Components/ui/button";
 
-const NotFound = () => {
+export default function NotFound() {
   const navigate = useNavigate();
-
-  // Check if user is logged in
   const isAuthenticated = !!localStorage.getItem("token");
 
   const handleRedirect = () => {
     if (isAuthenticated) {
-      navigate("/dashboard"); // authenticated users go to dashboard
+      navigate("/dashboard"); 
     } else {
-      navigate("/"); // unauthenticated users go to landing page
+      navigate("/"); 
     }
   };
 
   return (
-    <motion.div
-      className="min-h-screen flex flex-col items-center justify-center bg-[#E4ECF1] text-center p-6"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.5 }}
-    >
-      <h1 className="text-6xl font-bold text-primary mb-4">404</h1>
-      <p className="text-lg text-muted-foreground mb-6">
-        Oops! The page you’re looking for doesn’t exist.
+    <div className="min-h-screen flex flex-col items-center justify-center bg-[var(--background)] text-[var(--foreground)] p-4 text-center">
+      <p className="text-sm font-medium text-[var(--muted-foreground)] mb-2">
+        • DevSync Error •
+      </p>
+
+      <h1 className="text-8xl md:text-9xl font-extrabold text-[var(--primary)] mb-4 animate-pulse-slow">
+        404
+      </h1>
+
+      <h2 className="text-3xl md:text-5xl font-bold mb-6 text-red-500 leading-tight">
+        Oops! Page Not Found
+      </h2>
+
+      <p className="text-lg md:text-xl text-[var(--muted-foreground)] max-w-lg mb-8">
+        It looks like the page you're trying to reach doesn't exist or has been moved.
+        Don't worry, we'll help you get back on track.
       </p>
 
-      <Button onClick={handleRedirect} className="text-base">
-        Go Back Home
+      <Button 
+        onClick={handleRedirect} 
+        className="inline-flex items-center justify-center gap-2 px-6 py-3 h-auto
+                   bg-[var(--primary)] text-white font-semibold rounded-md 
+                   shadow-lg hover:bg-[var(--accent)] transition-colors duration-300
+                   focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:ring-opacity-75"
+      >
+        <Home className="h-5 w-5" />
+        {isAuthenticated ? "Back to Dashboard" : "Back to Home"}
       </Button>
-    </motion.div>
+    </div>
   );
-};
-
-export default NotFound;
+}