diff --git a/apps/web/public/images/404-custom.png b/apps/web/public/images/404-custom.png
new file mode 100644
index 00000000..28d8d3c9
Binary files /dev/null and b/apps/web/public/images/404-custom.png differ
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
new file mode 100644
index 00000000..e9b7de0a
--- /dev/null
+++ b/apps/web/src/app/not-found.tsx
@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Undo2 } from "lucide-react";
+import Image from "next/image";
+
+export const metadata = {
+  title: "404 | Page Not Found - OpenCut",
+  description:
+    "Oops! The page you’re looking for isn’t available. Head back to the homepage or continue exploring OpenCut.",
+};
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex bg-white items-center justify-center">
+      <div className="text-center">
+        <div className="mb-4">
+          <Image
+            src="/images/404-custom.png"
+            alt="404 - Page Not Found"
+            width={300}
+            height={200}
+            className="mx-auto"
+          />
+        </div>
+        <p className="text-gray-600  mb-8">
+          Sorry, the page you&apos;re looking for can&apos;t be found.
+        </p>
+        <Button>
+          <Link href="/" className="flex items-center gap-2">
+            <Undo2 className="h-4 w-4" />
+            Go Back To Home
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}