diff --git a/packages/toolpad-app/src/routes.ts b/packages/toolpad-app/src/routes.ts
index 36ac9af6fc9..7b6343d5269 100644
--- a/packages/toolpad-app/src/routes.ts
+++ b/packages/toolpad-app/src/routes.ts
@@ -2,3 +2,5 @@ export const APP_PAGE_ROUTE = '/app/pages/:nodeId';
 export const APP_API_ROUTE = '/app/apis/:nodeId';
 export const APP_CODE_COMPONENT_ROUTE = '/app/codeComponents/:nodeId';
 export const APP_CONNECTION_ROUTE = '/app/connections/:nodeId';
+
+export const PREVIEW_PAGE_ROUTE = '/preview/pages/:nodeId';
diff --git a/packages/toolpad-app/src/runtime/AppNavigation.tsx b/packages/toolpad-app/src/runtime/AppNavigation.tsx
index 59e55c75a65..272fe056467 100644
--- a/packages/toolpad-app/src/runtime/AppNavigation.tsx
+++ b/packages/toolpad-app/src/runtime/AppNavigation.tsx
@@ -12,8 +12,6 @@ import {
 import { useNavigate, useLocation, useHref } from 'react-router-dom';
 import * as appDom from '../appDom';
 
-const NAV_LIST_SUBHEADER_ID = 'nav-list-subheader';
-
 const DRAWER_WIDTH = 250; // px
 
 interface AppNavigationProps {
@@ -35,6 +33,8 @@ export default function AppNavigation({ pages, isPreview = false }: AppNavigatio
 
   const activePagePath = location.pathname.replace(href, '');
 
+  const navListSubheaderId = React.useId();
+
   return (
     <Drawer
       variant="permanent"
@@ -51,11 +51,11 @@ export default function AppNavigation({ pages, isPreview = false }: AppNavigatio
         <List
           component="nav"
           subheader={
-            <ListSubheader id={NAV_LIST_SUBHEADER_ID} sx={{ px: 4 }}>
+            <ListSubheader id={navListSubheaderId} sx={{ px: 4 }}>
               Pages
             </ListSubheader>
           }
-          aria-labelledby={NAV_LIST_SUBHEADER_ID}
+          aria-labelledby={navListSubheaderId}
         >
           {pages.map((page) => (
             <ListItem key={page.id} onClick={handlePageClick(page)} disablePadding>
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
index 38297ce2291..004c26c6819 100644
--- a/packages/toolpad-app/src/runtime/ToolpadApp.tsx
+++ b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -39,6 +39,8 @@ import {
   Navigate,
   Location as RouterLocation,
   useNavigate,
+  useHref,
+  matchPath,
 } from 'react-router-dom';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import {
@@ -81,6 +83,7 @@ import Header from '../toolpad/ToolpadShell/Header';
 import { ThemeProvider } from '../ThemeContext';
 import { BridgeContext } from '../canvas/BridgeContext';
 import AppNavigation from './AppNavigation';
+import { PREVIEW_PAGE_ROUTE } from '../routes';
 
 const ReactQueryDevtoolsProduction = React.lazy(() =>
   import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({
@@ -1143,9 +1146,12 @@ function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: Toolp
   const root = appDom.getApp(dom);
   const { pages = [] } = appDom.getChildNodes(dom, root);
 
-  const { search } = useLocation();
+  const location = useLocation();
+  const { pathname, search } = location;
   const urlParams = React.useMemo(() => new URLSearchParams(search), [search]);
 
+  const pageMatch = matchPath(PREVIEW_PAGE_ROUTE, `/preview${pathname}`);
+
   const hasShell = hasShellProp && urlParams.get('toolpad-display') !== 'standalone';
 
   const isPreview = version === 'preview';
@@ -1166,7 +1172,7 @@ function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: Toolp
                   endIcon={<EditIcon />}
                   color="primary"
                   component="a"
-                  href={`/_toolpad/app`}
+                  href={`/_toolpad/app/pages/${pageMatch?.params.nodeId}`}
                 >
                   Edit
                 </Button>