diff --git a/ui/src/pages/DashboardTab/DashboardPage.tsx b/ui/src/pages/DashboardTab/DashboardPage.tsx
new file mode 100644
index 00000000..ed6dcf0c
--- /dev/null
+++ b/ui/src/pages/DashboardTab/DashboardPage.tsx
@@ -0,0 +1,17 @@
+import { useParams } from 'react-router';
+import { lazy, Suspense } from 'react';
+import { Spinner } from '@cameleer/design-system';
+
+const RoutesMetrics = lazy(() => import('../Routes/RoutesMetrics'));
+const RouteDetail = lazy(() => import('../Routes/RouteDetail'));
+
+const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
+
+export default function DashboardPage() {
+  const { routeId } = useParams<{ appId?: string; routeId?: string }>();
+
+  if (routeId) {
+    return <Suspense fallback={Fallback}><RouteDetail /></Suspense>;
+  }
+  return <Suspense fallback={Fallback}><RoutesMetrics /></Suspense>;
+}
diff --git a/ui/src/pages/RuntimeTab/RuntimePage.tsx b/ui/src/pages/RuntimeTab/RuntimePage.tsx
new file mode 100644
index 00000000..a55a4c86
--- /dev/null
+++ b/ui/src/pages/RuntimeTab/RuntimePage.tsx
@@ -0,0 +1,17 @@
+import { useParams } from 'react-router';
+import { lazy, Suspense } from 'react';
+import { Spinner } from '@cameleer/design-system';
+
+const AgentHealth = lazy(() => import('../AgentHealth/AgentHealth'));
+const AgentInstance = lazy(() => import('../AgentInstance/AgentInstance'));
+
+const Fallback = <div style={{ display: 'flex', justifyContent: 'center', padding: '4rem' }}><Spinner size="lg" /></div>;
+
+export default function RuntimePage() {
+  const { instanceId } = useParams<{ appId?: string; instanceId?: string }>();
+
+  if (instanceId) {
+    return <Suspense fallback={Fallback}><AgentInstance /></Suspense>;
+  }
+  return <Suspense fallback={Fallback}><AgentHealth /></Suspense>;
+}