Refactor NotFoundPage component in not-found.tsx

app/not-found.tsx

@@ -1,20 +1,23 @@
+'use client';
 import { Button } from "@/components/ui/button";
-import Link from "next/link";
 
-function NotFoundPage() {
+export default function NotFoundPage() {
   return (
-    <div className="grid h-screen place-content-center px-4">
-      <div className="text-center">
-        <h1 className="text-9xl font-black">404</h1>
-        <p className="text-2xl font-bold tracking-tight sm:text-4xl">Uh-oh!</p>
-        <p className="mt-4 text-gray-500">We can&apos;t find that page.</p>
-
-        <Button asChild className="mt-6 text-foreground">
-          <Link href="/">Go Back Home</Link>
-        </Button>
+    <div className="flex h-screen w-full flex-col items-center justify-center gap-5 bg-background px-4 md:px-6">
+      <div className="space-y-2 text-center">
+        <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
+          404
+        </h1>
+        <p className="text-muted-foreground md:text-xl">
+          Oops, the page you are looking for could not be found.
+        </p>
       </div>
+      <Button
+        onClick={() => window.history.back()}
+        variant="secondary"
+      >
+        Go Back
+      </Button>
     </div>
   );
-}
-
-export default NotFoundPage;
+}