diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 85e429d..fbc2030 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -1,6 +1,9 @@
 import { useSeoMeta } from "@unhead/react";
-import { useLocation } from "react-router-dom";
+import { useLocation, Link } from "react-router-dom";
 import { useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Home, ArrowLeft } from "lucide-react";
 
 const NotFound = () => {
   const location = useLocation();
@@ -18,13 +21,35 @@ const NotFound = () => {
   }, [location.pathname]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">404</h1>
-        <p className="text-xl text-gray-600 dark:text-gray-400 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline">
-          Return to Home
-        </a>
+    <div className="min-h-screen">
+      <div className="container max-w-6xl py-8 px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-center min-h-[calc(100vh-16rem)]">
+          <Card className="max-w-2xl w-full border-dashed">
+            <CardHeader className="text-center space-y-4 pb-4">
+              <div className="mx-auto w-20 h-20 rounded-full bg-muted flex items-center justify-center">
+                <span className="text-3xl font-bold text-muted-foreground">404</span>
+              </div>
+              <CardTitle className="text-3xl">Page Not Found</CardTitle>
+            </CardHeader>
+            <CardContent className="text-center space-y-6">
+              <p className="text-muted-foreground text-lg">
+                The page you're looking for doesn't exist or has been moved.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-3 justify-center">
+                <Button asChild>
+                  <Link to="/">
+                    <Home className="h-4 w-4 mr-2" />
+                    Go to Home
+                  </Link>
+                </Button>
+                <Button variant="outline" onClick={() => window.history.back()}>
+                  <ArrowLeft className="h-4 w-4 mr-2" />
+                  Go Back
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );