src/App.tsx

@@ -14,6 +14,7 @@ import EventReservations from './pages/EventReservations'
 import MyReservations from './pages/MyReservations'
 import Login from './pages/Login'
 import LoginOtp from './pages/LoginOtp'
+import NotFound from './pages/NotFound'
 import RequireRole from './components/RequireRole'
 
 function ScrollToTop() {
@@ -47,6 +48,7 @@ export default function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/cafe/login" element={<Login />} />
         <Route path="/login/otp" element={<LoginOtp />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   )

src/pages/NotFound.tsx

@@ -0,0 +1,23 @@
+import { useNavigate } from 'react-router-dom'
+import { toPersianDigits } from '../utils/formatNumber'
+import { getUserRole } from '../utils/role'
+
+export default function NotFound() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-6 text-center">
+      <h1 className="text-6xl font-bold text-[#223D5D]">{toPersianDigits('404')}</h1>
+      <p className="mt-4 text-lg text-gray-900">صفحه مورد نظر یافت نشد.</p>
+      <button
+        type="button"
+        // owners and customers land on different home screens — mirrors the
+        // role-based redirect RequireRole already does on an auth mismatch
+        onClick={() => navigate(getUserRole() === 'cafe_owner' ? '/owner/panel' : '/home')}
+        className="mt-6 w-full max-w-xs rounded-2xl bg-[#223D5D] py-4 text-lg font-semibold text-white"
+      >
+        بازگشت به صفحه اصلی
+      </button>
+    </div>
+  )
+}