diff --git a/golden-crust-bakery/src/main.jsx b/golden-crust-bakery/src/main.jsx
index e394c5fc370431baebf49918c65d658c7753b166..bb357ce0e77f91b4e5b15540ccef284a8f018b55 100644
--- a/golden-crust-bakery/src/main.jsx
+++ b/golden-crust-bakery/src/main.jsx
@@ -15,11 +15,13 @@ import Login from './pages/Login';
 import Register from './pages/Register';
 import Menu from './pages/Menu';
 import MenuItem from './pages/MenuItem';
+import ErrorPage from './pages/Error';
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
+    errorElement: <ErrorPage />,
     children: [
       {
         path: '/',
diff --git a/golden-crust-bakery/src/pages/Error.jsx b/golden-crust-bakery/src/pages/Error.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e46bfbe3327170253a96667cea4ff601d208aa7c
--- /dev/null
+++ b/golden-crust-bakery/src/pages/Error.jsx
@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button';
+import { Link } from 'react-router-dom';
+
+export default function ErrorPage() {
+  return (
+    <div className='flex items-center min-h-screen px-4 py-12 sm:px-6 md:px-8 lg:px-12 xl:px-16'>
+      <div className='w-full space-y-6 text-center'>
+        <div className='space-y-3'>
+          <h1 className='text-4xl font-bold sm:text-5xl animate-bounce'>404</h1>
+          <p className='text-gray-500'>
+            Looks like you've ventured into the unknown digital realm.
+          </p>
+        </div>
+        <Button asChild className='bg-pink-500 hover:bg-pink-600 text-white'>
+          <Link to='/'>Back to Home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+}