diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 000000000..8bc51b9c7
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { Search, Home, Book, Users } from 'lucide-react'
+
+export default function NotFound({ message }: { message?: string }) {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Implement search functionality here
+    // console.log('Searching for:', searchQuery)
+  }
+
+  const paperVariants = {
+    initial: { y: -100, opacity: 0 },
+    animate: { y: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-50 to-white px-4 py-12">
+      <motion.div
+        className="w-64 h-64 mb-8"
+        initial="initial"
+        animate="animate"
+        variants={paperVariants}
+      >
+        <svg viewBox="0 0 100 100" className="w-full h-full">
+          <motion.path
+            d="M10 10 L90 10 L90 90 L10 90 Z"
+            fill="none"
+            stroke="#3B82F6"
+            strokeWidth="2"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 2, ease: "easeInOut" }}
+          />
+          <motion.path
+            d="M20 30 L80 30 M20 50 L80 50 M20 70 L60 70"
+            fill="none"
+            stroke="#3B82F6"
+            strokeWidth="2"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 2, ease: "easeInOut", delay: 0.5 }}
+          />
+        </svg>
+      </motion.div>
+
+      <h1 className="text-5xl font-bold text-blue-600 mb-4">404</h1>
+      <h2 className="text-2xl font-semibold text-gray-800 mb-8">Page Not Found</h2>
+
+      <form onSubmit={handleSearch} className="w-full max-w-md mb-8">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search Papermark.io"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full px-4 py-2 rounded-full border-2 border-blue-300 focus:outline-none focus:border-blue-500 pr-10"
+          />
+          <button type="submit" className="absolute right-3 top-1/2 transform -translate-y-1/2">
+            <Search className="text-blue-500 w-5 h-5" />
+          </button>
+        </div>
+      </form>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <Link href="/welcome" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+          <Home className="text-blue-500 w-6 h-6 mr-3" />
+          <span className="text-gray-800">Home</span>
+        </Link>
+        <Link href="/documents" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+          <Book className="text-blue-500 w-6 h-6 mr-3" />
+          <span className="text-gray-800">Documents</span>
+        </Link>
+        <Link href="/settings/general" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+          <Users className="text-blue-500 w-6 h-6 mr-3" />
+          <span className="text-gray-800">Settings</span>
+        </Link>
+      </div>
+
+      <p className="text-center text-gray-600 max-w-md">
+      {message ||
+                  "Sorry, we couldn’t find the page you’re looking for."}
+      </p>
+
+      <footer className="mt-16 text-center text-gray-500">
+        <p>&copy; {new Date().getFullYear()} Papermark.io. All rights reserved.</p>
+      </footer>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/pages/404.tsx b/pages/404.tsx
index 51f1cb3e4..da4619e5f 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,34 +1,94 @@
-import Link from "next/link";
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { motion } from 'framer-motion'
+import { Search, Home, Book, Users } from 'lucide-react'
 
 export default function NotFound({ message }: { message?: string }) {
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Implement search functionality here
+    // console.log('Searching for:', searchQuery)
+  }
+
+  const paperVariants = {
+    initial: { y: -100, opacity: 0 },
+    animate: { y: 0, opacity: 1, transition: { type: 'spring', stiffness: 100 } },
+  }
+
   return (
-    <>
-      <div className="flex min-h-screen flex-col pb-12 pt-16">
-        <main className="mx-auto flex w-full max-w-7xl flex-grow flex-col justify-center px-4 sm:px-6 lg:px-8">
-          <div className="py-16">
-            <div className="text-center">
-              <p className="text-sm font-semibold uppercase tracking-wide text-indigo-600">
-                404 error
-              </p>
-              <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-slate-950 dark:text-gray-100 sm:text-5xl">
-                Page not found.
-              </h1>
-              <p className="mt-2 text-base text-gray-600">
-                {message ||
-                  "Sorry, we couldn’t find the page you’re looking for."}
-              </p>
-              <div className="mt-6">
-                <Link
-                  href="/"
-                  className="text-base font-medium text-indigo-600 hover:text-indigo-500"
-                >
-                  Go back home <span aria-hidden="true"> &rarr;</span>
-                </Link>
-              </div>
-            </div>
-          </div>
-        </main>
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-blue-50 to-white px-4 py-12">
+      <motion.div
+        className="w-64 h-64 mb-8"
+        initial="initial"
+        animate="animate"
+        variants={paperVariants}
+      >
+        <svg viewBox="0 0 100 100" className="w-full h-full">
+          <motion.path
+            d="M10 10 L90 10 L90 90 L10 90 Z"
+            fill="none"
+            stroke="#3B82F6"
+            strokeWidth="2"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 2, ease: "easeInOut" }}
+          />
+          <motion.path
+            d="M20 30 L80 30 M20 50 L80 50 M20 70 L60 70"
+            fill="none"
+            stroke="#3B82F6"
+            strokeWidth="2"
+            initial={{ pathLength: 0 }}
+            animate={{ pathLength: 1 }}
+            transition={{ duration: 2, ease: "easeInOut", delay: 0.5 }}
+          />
+        </svg>
+      </motion.div>
+
+      <h1 className="text-5xl font-bold text-blue-600 mb-4">404</h1>
+      <h2 className="text-2xl font-semibold text-gray-800 mb-8">Page Not Found</h2>
+
+      <form onSubmit={handleSearch} className="w-full max-w-md mb-8">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search Papermark.io"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full px-4 py-2 rounded-full border-2 border-blue-300 focus:outline-none focus:border-blue-500 pr-10"
+          />
+          <button type="submit" className="absolute right-3 top-1/2 transform -translate-y-1/2">
+            <Search className="text-blue-500 w-5 h-5" />
+          </button>
+        </div>
+      </form>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <Link href="/welcome" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+          <Home className="text-blue-500 w-6 h-6 mr-3" />
+          <span className="text-gray-800">Home</span>
+        </Link>
+        <Link href="/documents" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+          <Book className="text-blue-500 w-6 h-6 mr-3" />
+          <span className="text-gray-800">Documents</span>
+        </Link>
+        <Link href="/settings/general" className="flex items-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200">
+          <Users className="text-blue-500 w-6 h-6 mr-3" />
+          <span className="text-gray-800">Settings</span>
+        </Link>
       </div>
-    </>
-  );
+      <p className="text-center text-gray-600 max-w-md">
+      {message ||
+                  "Sorry, we couldn’t find the page you’re looking for."}
+      </p>
+
+      <footer className="mt-16 text-center text-gray-500">
+        <p>&copy; {new Date().getFullYear()} Papermark.io. All rights reserved.</p>
+      </footer>
+    </div>
+  )
 }
diff --git a/pages/view/[linkId]/index.tsx b/pages/view/[linkId]/index.tsx
index 1ee3b34c6..52b9c01e2 100644
--- a/pages/view/[linkId]/index.tsx
+++ b/pages/view/[linkId]/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 import { useEffect, useState } from "react";
 
-import NotFound from "@/pages/404";
+import NotFound from "@/app/not-found";
 import { Brand, DataroomBrand } from "@prisma/client";
 import Cookies from "js-cookie";
 import { useSession } from "next-auth/react";
diff --git a/pages/view/domains/[domain]/[slug]/index.tsx b/pages/view/domains/[domain]/[slug]/index.tsx
index 154c413c3..caa587feb 100644
--- a/pages/view/domains/[domain]/[slug]/index.tsx
+++ b/pages/view/domains/[domain]/[slug]/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 
 import { useEffect, useState } from "react";
 
-import NotFound from "@/pages/404";
+import NotFound from "@/app/not-found";
 import { Brand, DataroomBrand } from "@prisma/client";
 import Cookies from "js-cookie";
 import { useSession } from "next-auth/react";