diff --git a/src/app/(docs)/not-found.tsx b/src/app/(docs)/not-found.tsx
deleted file mode 100644
index e690aec..0000000
--- a/src/app/(docs)/not-found.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { buttonVariants } from "fumadocs-ui/components/api";
-import Link from "next/link";
-
-export default function NotFound() {
-  return (
-    <div className="flex items-center w-full h-screen">
-      <div className="w-full space-y-6 text-center">
-        <div className="space-y-3">
-          <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl transition-transform">
-            404
-          </h1>
-          <p className="text-gray-500">
-            Oops! You&apos;ve wandered off the Zen path. Let&apos;s guide you
-            back to tranquility.
-          </p>
-        </div>
-        <Link
-          className={buttonVariants({
-            color: "outline",
-          })}
-          href="/"
-        >
-          Return to Docs
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..e4a5684
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,45 @@
+import { buttonVariants } from "fumadocs-ui/components/api";
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "404 | Page Not Found",
+};
+
+export default function NotFound() {
+  return (
+    <div className="flex items-center w-full h-screen">
+      <Image
+        src="/icon.svg"
+        alt="404"
+        width={40}
+        height={40}
+        className="mx-auto hidden md:block absolute top-4 left-4"
+      />
+      <div className="w-full space-y-6 text-center">
+        <div className="space-y-2">
+          <h1 className="text-[#F76F53] text-8xl font-bold tracking-tighter transition-transform">
+            404
+          </h1>
+          <h2 className="text-4xl font-light tracking-tighter transition-transform">
+            Page not found
+          </h2>
+        </div>
+        <hr />
+        <p className="text-[#CBC9BF]">
+          Oops! You&apos;ve wandered off the Zen path. Let&apos;s guide you back
+          to tranquility.
+        </p>
+        <Link
+          className={buttonVariants({
+            color: "outline",
+          })}
+          href="/"
+        >
+          Return to Docs
+        </Link>
+      </div>
+    </div>
+  );
+}