diff --git a/template/client/src/App.tsx b/template/client/src/App.tsx
index 18d4dda95..7dad5a351 100644
--- a/template/client/src/App.tsx
+++ b/template/client/src/App.tsx
@@ -1,4 +1,4 @@
-import { createBrowserRouter, RouterProvider, NavLink, Outlet } from 'react-router';
+import { createBrowserRouter, RouterProvider, Link, NavLink, Outlet, useLocation } from 'react-router';
 import { useState } from 'react';
 import {
   Button,
@@ -6,13 +6,19 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   useIsMobile,
 } from '@databricks/appkit-ui/react';
-import { Menu } from 'lucide-react';
+import { FileQuestionMark, Menu } from 'lucide-react';
 {{- if .plugins.agents}}
 import { AgentChat } from './pages/agents/AgentChat';
 {{- end}}
@@ -169,6 +175,7 @@ const router = createBrowserRouter([
 {{- if .plugins.jobs}}
       { path: '/jobs', element: <JobsPage /> },
 {{- end}}
+      { path: '*', element: <NotFoundPage /> },
     ],
   },
 ]);
@@ -222,3 +229,26 @@ function HomePage() {
     </div>
   );
 }
+
+function NotFoundPage() {
+  const { pathname } = useLocation();
+
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FileQuestionMark />
+        </EmptyMedia>
+        <EmptyTitle>Page not found</EmptyTitle>
+        <EmptyDescription>
+          There is no page at <code className="break-all">{pathname}</code>
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button asChild>
+          <Link to="/">Back to home</Link>
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}