diff --git a/src/RootAppRouter.tsx b/src/RootAppRouter.tsx
index 9a15264db0..4f98fb86f4 100644
--- a/src/RootAppRouter.tsx
+++ b/src/RootAppRouter.tsx
@@ -29,6 +29,10 @@ export default function RootAppRouter({ history }: Readonly<{ history: History}>
     return <RouterProvider router={router} />;
 }
 
+/**
+ * Layout component that renders legacy components required on all pages.
+ * NOTE: The app will crash if these get removed from the DOM.
+ */
 function RootAppLayout() {
     return (
         <>
diff --git a/src/apps/experimental/routes/routes.tsx b/src/apps/experimental/routes/routes.tsx
index 3156f5f0e3..718aaf10b6 100644
--- a/src/apps/experimental/routes/routes.tsx
+++ b/src/apps/experimental/routes/routes.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { RouteObject, redirect } from 'react-router-dom';
 
 import { REDIRECTS } from 'apps/dashboard/routes/_redirects';
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
@@ -32,11 +31,5 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
     },
 
     /* Redirects for old paths */
-    ...REDIRECTS.map(toRedirectRoute),
-
-    /* Ignore dashboard routes */
-    ...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
-        path: `/${path}/*`,
-        element: null
-    }))
+    ...REDIRECTS.map(toRedirectRoute)
 ];
diff --git a/src/apps/stable/AppLayout.tsx b/src/apps/stable/AppLayout.tsx
index bac962784c..f3b186c8db 100644
--- a/src/apps/stable/AppLayout.tsx
+++ b/src/apps/stable/AppLayout.tsx
@@ -1,24 +1,12 @@
 import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 import AppBody from 'components/AppBody';
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
-import Backdrop from 'components/Backdrop';
-import AppHeader from 'components/AppHeader';
 
 export default function AppLayout() {
-    const location = useLocation();
-    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
-        .some(path => location.pathname.startsWith(`/${path}`));
-
     return (
-        <>
-            <Backdrop />
-            <AppHeader isHidden={isNewLayoutPath} />
-
-            <AppBody>
-                <Outlet />
-            </AppBody>
-        </>
+        <AppBody>
+            <Outlet />
+        </AppBody>
     );
 }
diff --git a/src/apps/stable/AppRouter.tsx b/src/apps/stable/AppRouter.tsx
index 761ade98a8..0917e6aa19 100644
--- a/src/apps/stable/AppRouter.tsx
+++ b/src/apps/stable/AppRouter.tsx
@@ -1,18 +1,42 @@
 import { History } from '@remix-run/router';
 import React from 'react';
-import { RouterProvider, createHashRouter } from 'react-router-dom';
+import { Outlet, RouterProvider, createHashRouter, useLocation } from 'react-router-dom';
 
-import { DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 import { useLegacyRouterSync } from 'hooks/useLegacyRouterSync';
 import { STABLE_APP_ROUTES } from './routes/routes';
+import Backdrop from 'components/Backdrop';
+import AppHeader from 'components/AppHeader';
+import { DASHBOARD_APP_PATHS, DASHBOARD_APP_ROUTES } from 'apps/dashboard/routes/routes';
 
-const router = createHashRouter([
-    ...STABLE_APP_ROUTES,
-    ...DASHBOARD_APP_ROUTES
-]);
+const router = createHashRouter([{
+    element: <StableAppLayout />,
+    children: [
+        ...STABLE_APP_ROUTES,
+        ...DASHBOARD_APP_ROUTES
+    ]
+}]);
 
 export default function StableAppRouter({ history }: Readonly<{ history: History }>) {
     useLegacyRouterSync({ router, history });
 
     return <RouterProvider router={router} />;
 }
+
+/**
+ * Layout component that renders legacy components required on all pages.
+ * NOTE: The app will crash if these get removed from the DOM.
+ */
+function StableAppLayout() {
+    const location = useLocation();
+    const isNewLayoutPath = Object.values(DASHBOARD_APP_PATHS)
+        .some(path => location.pathname.startsWith(`/${path}`));
+
+    return (
+        <>
+            <Backdrop />
+            <AppHeader isHidden={isNewLayoutPath} />
+
+            <Outlet />
+        </>
+    );
+}
diff --git a/src/apps/stable/routes/routes.tsx b/src/apps/stable/routes/routes.tsx
index 77f936276f..300092c9fe 100644
--- a/src/apps/stable/routes/routes.tsx
+++ b/src/apps/stable/routes/routes.tsx
@@ -1,12 +1,13 @@
 import { RouteObject, redirect } from 'react-router-dom';
 import React from 'react';
 
-import { DASHBOARD_APP_PATHS } from 'apps/dashboard/routes/routes';
 import ConnectionRequired from 'components/ConnectionRequired';
 import { toAsyncPageRoute } from 'components/router/AsyncRoute';
 import { toViewManagerPageRoute } from 'components/router/LegacyRoute';
 import { toRedirectRoute } from 'components/router/Redirect';
+
 import AppLayout from '../AppLayout';
+
 import { REDIRECTS } from './_redirects';
 import { ASYNC_USER_ROUTES } from './asyncRoutes';
 import { LEGACY_PUBLIC_ROUTES, LEGACY_USER_ROUTES } from './legacyRoutes';
@@ -27,20 +28,10 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
 
             /* Public routes */
             { index: true, loader: () => redirect('/home.html') },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
-
-            /* Suppress warnings for unhandled routes */
-            { path: '*', element: null }
+            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute)
         ]
     },
 
     /* Redirects for old paths */
-    ...REDIRECTS.map(toRedirectRoute),
-
-    /* Ignore dashboard routes */
-    ...Object.entries(DASHBOARD_APP_PATHS).map(([, path]) => ({
-        path: `/${path}/*`,
-        element: null
-    }))
-
+    ...REDIRECTS.map(toRedirectRoute)
 ];