diff --git a/src/App.tsx b/src/App.tsx
index 2a042b8..ff1e5ee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,23 +1,23 @@
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
 import { Dashboard } from './pages/Dashboard/Dashboard'
 import { Metrics } from './pages/Metrics/Metrics'
 import { RouteDetail } from './pages/RouteDetail/RouteDetail'
 import { ExchangeDetail } from './pages/ExchangeDetail/ExchangeDetail'
 import { AgentHealth } from './pages/AgentHealth/AgentHealth'
 import { Inventory } from './pages/Inventory/Inventory'
-import { AppDetail } from './pages/AppDetail/AppDetail'
 import { Admin } from './pages/Admin/Admin'
 import { ApiDocs } from './pages/ApiDocs/ApiDocs'
 
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<Dashboard />} />
+      <Route path="/" element={<Navigate to="/apps" replace />} />
+      <Route path="/apps" element={<Dashboard />} />
+      <Route path="/apps/:id" element={<Dashboard />} />
       <Route path="/metrics" element={<Metrics />} />
       <Route path="/routes/:id" element={<RouteDetail />} />
       <Route path="/exchanges/:id" element={<ExchangeDetail />} />
       <Route path="/agents/*" element={<AgentHealth />} />
-      <Route path="/apps/:id" element={<AppDetail />} />
       <Route path="/admin" element={<Admin />} />
       <Route path="/api-docs" element={<ApiDocs />} />
       <Route path="/inventory" element={<Inventory />} />
diff --git a/src/design-system/layout/Sidebar/Sidebar.module.css b/src/design-system/layout/Sidebar/Sidebar.module.css
index b930d0c..c9a4185 100644
--- a/src/design-system/layout/Sidebar/Sidebar.module.css
+++ b/src/design-system/layout/Sidebar/Sidebar.module.css
@@ -217,44 +217,6 @@
   gap: 6px;
   width: 100%;
   padding: 8px 12px 4px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--sidebar-muted);
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  transition: color 0.12s;
-}
-
-.treeSectionToggle:hover {
-  color: var(--sidebar-text);
-}
-
-.treeSectionChevron {
-  font-size: 9px;
-  width: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Section header as link (for Agents nav) */
-.treeSectionLink {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--sidebar-muted);
-  text-decoration: none;
-  flex: 1;
-  transition: color 0.12s;
-}
-
-.treeSectionLink:hover {
-  color: var(--amber-light);
 }
 
 .treeSectionChevronBtn {
@@ -275,6 +237,24 @@
   color: var(--sidebar-text);
 }
 
+.treeSectionLabel {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--sidebar-muted);
+  cursor: pointer;
+  transition: color 0.12s;
+}
+
+.treeSectionLabel:hover {
+  color: var(--amber-light);
+}
+
+.treeSectionLabelActive {
+  color: var(--amber-light);
+}
+
 .tree {
   list-style: none;
   margin: 0;
diff --git a/src/design-system/layout/Sidebar/Sidebar.test.tsx b/src/design-system/layout/Sidebar/Sidebar.test.tsx
index 091f201..740c373 100644
--- a/src/design-system/layout/Sidebar/Sidebar.test.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.test.tsx
@@ -74,9 +74,9 @@ describe('Sidebar', () => {
     expect(screen.getByText('Agents')).toBeInTheDocument()
   })
 
-  it('renders Dashboards nav link', () => {
+  it('renders Metrics nav link', () => {
     renderSidebar()
-    expect(screen.getByText('Dashboards')).toBeInTheDocument()
+    expect(screen.getByText('Metrics')).toBeInTheDocument()
   })
 
   it('renders bottom links', () => {
diff --git a/src/design-system/layout/Sidebar/Sidebar.tsx b/src/design-system/layout/Sidebar/Sidebar.tsx
index 35b90c2..0faac7e 100644
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -234,7 +234,7 @@ export function Sidebar({ apps, className }: SidebarProps) {
   return (
     <aside className={`${styles.sidebar} ${className ?? ''}`}>
       {/* Logo */}
-      <div className={styles.logo} onClick={() => navigate('/')} style={{ cursor: 'pointer' }}>
+      <div className={styles.logo} onClick={() => navigate('/apps')} style={{ cursor: 'pointer' }}>
         <img src={camelLogoUrl} alt="" aria-hidden="true" className={styles.logoImg} />
         <div>
           <span className={styles.brand}>cameleer</span>
@@ -275,16 +275,27 @@ export function Sidebar({ apps, className }: SidebarProps) {
       <div className={styles.navArea}>
         <div className={styles.section}>Navigation</div>
 
-        {/* Applications tree (collapsible) */}
+        {/* Applications tree (collapsible, label navigates to /apps) */}
         <div className={styles.treeSection}>
-          <button
-            className={styles.treeSectionToggle}
-            onClick={() => setAppsCollapsed((v) => !v)}
-            aria-expanded={!appsCollapsed}
-          >
-            <span className={styles.treeSectionChevron}>{appsCollapsed ? '▸' : '▾'}</span>
-            <span>Applications</span>
-          </button>
+          <div className={styles.treeSectionToggle}>
+            <button
+              className={styles.treeSectionChevronBtn}
+              onClick={() => setAppsCollapsed((v) => !v)}
+              aria-expanded={!appsCollapsed}
+              aria-label={appsCollapsed ? 'Expand Applications' : 'Collapse Applications'}
+            >
+              {appsCollapsed ? '▸' : '▾'}
+            </button>
+            <span
+              className={`${styles.treeSectionLabel} ${location.pathname === '/apps' ? styles.treeSectionLabelActive : ''}`}
+              onClick={() => navigate('/apps')}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/apps') }}
+            >
+              Applications
+            </span>
+          </div>
           {!appsCollapsed && (
             <SidebarTree
               nodes={appNodes}
@@ -297,16 +308,27 @@ export function Sidebar({ apps, className }: SidebarProps) {
           )}
         </div>
 
-        {/* Agents tree (collapsible) */}
+        {/* Agents tree (collapsible, label navigates to /agents) */}
         <div className={styles.treeSection}>
-          <button
-            className={styles.treeSectionToggle}
-            onClick={() => setAgentsCollapsed((v) => !v)}
-            aria-expanded={!agentsCollapsed}
-          >
-            <span className={styles.treeSectionChevron}>{agentsCollapsed ? '▸' : '▾'}</span>
-            <span>Agents</span>
-          </button>
+          <div className={styles.treeSectionToggle}>
+            <button
+              className={styles.treeSectionChevronBtn}
+              onClick={() => setAgentsCollapsed((v) => !v)}
+              aria-expanded={!agentsCollapsed}
+              aria-label={agentsCollapsed ? 'Expand Agents' : 'Collapse Agents'}
+            >
+              {agentsCollapsed ? '▸' : '▾'}
+            </button>
+            <span
+              className={`${styles.treeSectionLabel} ${location.pathname.startsWith('/agents') ? styles.treeSectionLabelActive : ''}`}
+              onClick={() => navigate('/agents')}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/agents') }}
+            >
+              Agents
+            </span>
+          </div>
           {!agentsCollapsed && (
             <SidebarTree
               nodes={agentNodes}
@@ -319,21 +341,21 @@ export function Sidebar({ apps, className }: SidebarProps) {
           )}
         </div>
 
-        {/* Dashboards flat link */}
+        {/* Flat nav links */}
         <div className={styles.items}>
           <div
             className={[
               styles.item,
-              location.pathname === '/' ? styles.active : '',
+              location.pathname === '/metrics' ? styles.active : '',
             ].filter(Boolean).join(' ')}
-            onClick={() => navigate('/')}
+            onClick={() => navigate('/metrics')}
             role="button"
             tabIndex={0}
-            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/') }}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate('/metrics') }}
           >
-            <span className={styles.navIcon}>▦</span>
+            <span className={styles.navIcon}>▤</span>
             <div className={styles.itemInfo}>
-              <div className={styles.itemName}>Dashboards</div>
+              <div className={styles.itemName}>Metrics</div>
             </div>
           </div>
         </div>
diff --git a/src/pages/AgentHealth/AgentHealth.tsx b/src/pages/AgentHealth/AgentHealth.tsx
index 8489f97..6fb5437 100644
--- a/src/pages/AgentHealth/AgentHealth.tsx
+++ b/src/pages/AgentHealth/AgentHealth.tsx
@@ -100,7 +100,7 @@ function buildTrendData(agent: AgentHealthData) {
 
 function buildBreadcrumb(scope: Scope) {
   const crumbs: { label: string; href?: string }[] = [
-    { label: 'System', href: '/' },
+    { label: 'Applications', href: '/apps' },
     { label: 'Agents', href: '/agents' },
   ]
   if (scope.level === 'app' || scope.level === 'instance') {
diff --git a/src/pages/AppDetail/AppDetail.tsx b/src/pages/AppDetail/AppDetail.tsx
index a4d14d7..c972d7f 100644
--- a/src/pages/AppDetail/AppDetail.tsx
+++ b/src/pages/AppDetail/AppDetail.tsx
@@ -12,7 +12,7 @@ export function AppDetail() {
     <AppShell sidebar={<Sidebar apps={SIDEBAR_APPS} />}>
       <TopBar
         breadcrumb={[
-          { label: 'Applications', href: '/' },
+          { label: 'Applications', href: '/apps' },
           { label: id ?? '' },
         ]}
         environment="PRODUCTION"
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 4d989a1..0b71abe 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo } from 'react'
+import { useParams } from 'react-router-dom'
 import styles from './Dashboard.module.css'
 
 // Layout
@@ -137,10 +138,14 @@ function durationClass(ms: number, status: Exchange['status']): string {
 }
 
 // ─── Build CommandPalette search data ────────────────────────────────────────
-function buildSearchData(): SearchResult[] {
+function buildSearchData(
+  exs: Exchange[],
+  rts: typeof routes,
+  ags: typeof agents,
+): SearchResult[] {
   const results: SearchResult[] = []
 
-  for (const exec of exchanges) {
+  for (const exec of exs) {
     results.push({
       id: exec.id,
       category: 'exchange',
@@ -151,7 +156,7 @@ function buildSearchData(): SearchResult[] {
     })
   }
 
-  for (const route of routes) {
+  for (const route of rts) {
     results.push({
       id: route.id,
       category: 'route',
@@ -161,7 +166,7 @@ function buildSearchData(): SearchResult[] {
     })
   }
 
-  for (const agent of agents) {
+  for (const agent of ags) {
     results.push({
       id: agent.id,
       category: 'agent',
@@ -174,16 +179,15 @@ function buildSearchData(): SearchResult[] {
   return results
 }
 
-const SEARCH_DATA = buildSearchData()
-
-// ─── Filter options ───────────────────────────────────────────────────────────
-const STATUS_FILTERS = [
-  { label: 'All', value: 'all', count: exchanges.length },
-  { label: 'OK', value: 'completed', count: exchanges.filter((e) => e.status === 'completed').length, color: 'success' as const },
-  { label: 'Warn', value: 'warning', count: exchanges.filter((e) => e.status === 'warning').length },
-  { label: 'Error', value: 'failed', count: exchanges.filter((e) => e.status === 'failed').length, color: 'error' as const },
-  { label: 'Running', value: 'running', count: exchanges.filter((e) => e.status === 'running').length, color: 'running' as const },
-]
+function buildStatusFilters(exs: Exchange[]) {
+  return [
+    { label: 'All', value: 'all', count: exs.length },
+    { label: 'OK', value: 'completed', count: exs.filter((e) => e.status === 'completed').length, color: 'success' as const },
+    { label: 'Warn', value: 'warning', count: exs.filter((e) => e.status === 'warning').length },
+    { label: 'Error', value: 'failed', count: exs.filter((e) => e.status === 'failed').length, color: 'error' as const },
+    { label: 'Running', value: 'running', count: exs.filter((e) => e.status === 'running').length, color: 'running' as const },
+  ]
+}
 
 const SHORTCUTS = [
   { keys: 'Ctrl+K', label: 'Search' },
@@ -194,6 +198,7 @@ const SHORTCUTS = [
 
 // ─── Dashboard component ──────────────────────────────────────────────────────
 export function Dashboard() {
+  const { id: appId } = useParams<{ id: string }>()
   const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>([])
   const [search, setSearch] = useState('')
   const [selectedId, setSelectedId] = useState<string | undefined>()
@@ -201,9 +206,36 @@ export function Dashboard() {
   const [selectedExchange, setSelectedExchange] = useState<Exchange | null>(null)
   const [paletteOpen, setPaletteOpen] = useState(false)
 
-  // Filter exchanges
+  // Build set of route IDs belonging to the selected app (if any)
+  const appRouteIds = useMemo(() => {
+    if (!appId) return null
+    const app = SIDEBAR_APPS.find((a) => a.id === appId)
+    if (!app) return null
+    return new Set(app.routes.map((r) => r.id))
+  }, [appId])
+
+  const selectedApp = appId ? SIDEBAR_APPS.find((a) => a.id === appId) : null
+
+  // Scope all data to the selected app
+  const scopedExchanges = useMemo(() => {
+    if (!appRouteIds) return exchanges
+    return exchanges.filter((e) => appRouteIds.has(e.route))
+  }, [appRouteIds])
+
+  const scopedRoutes = useMemo(() => {
+    if (!appRouteIds) return routes
+    return routes.filter((r) => appRouteIds.has(r.id))
+  }, [appRouteIds])
+
+  const scopedAgents = useMemo(() => {
+    if (!selectedApp) return agents
+    const agentIds = new Set(selectedApp.agents.map((a) => a.id))
+    return agents.filter((a) => agentIds.has(a.id))
+  }, [selectedApp])
+
+  // Filter exchanges (scoped + user filters)
   const filteredExchanges = useMemo(() => {
-    let data = exchanges
+    let data = scopedExchanges
 
     const statusFilter = activeFilters.find((f) =>
       ['completed', 'failed', 'running', 'warning', 'all'].includes(f.value),
@@ -225,7 +257,12 @@ export function Dashboard() {
     }
 
     return data
-  }, [activeFilters, search])
+  }, [activeFilters, search, scopedExchanges])
+
+  const searchData = useMemo(
+    () => buildSearchData(scopedExchanges, scopedRoutes, scopedAgents),
+    [scopedExchanges, scopedRoutes, scopedAgents],
+  )
 
   function handleRowClick(row: Exchange) {
     setSelectedId(row.id)
@@ -349,12 +386,11 @@ export function Dashboard() {
     >
       {/* Top bar */}
       <TopBar
-        breadcrumb={[
-          { label: 'Applications', href: '/' },
-          { label: 'order-service' },
-        ]}
+        breadcrumb={appId
+          ? [{ label: 'Applications', href: '/apps' }, { label: appId }]
+          : [{ label: 'Applications' }]
+        }
         environment="PRODUCTION"
-        shift="Day (06:00-18:00)"
         user={{ name: 'hendrik' }}
         onSearchClick={() => setPaletteOpen(true)}
       />
@@ -380,7 +416,7 @@ export function Dashboard() {
 
         {/* Filter bar */}
         <FilterBar
-          filters={STATUS_FILTERS}
+          filters={buildStatusFilters(scopedExchanges)}
           activeFilters={activeFilters}
           onFilterChange={setActiveFilters}
           searchPlaceholder="Search by Order ID, correlation ID, error message..."
@@ -395,7 +431,7 @@ export function Dashboard() {
             <span className={styles.tableTitle}>Recent Exchanges</span>
             <div className={styles.tableRight}>
               <span className={styles.tableMeta}>
-                {filteredExchanges.length.toLocaleString()} of {exchanges.length.toLocaleString()} exchanges
+                {filteredExchanges.length.toLocaleString()} of {scopedExchanges.length.toLocaleString()} exchanges
               </span>
               <Badge label="LIVE" color="success" />
             </div>
@@ -428,7 +464,7 @@ export function Dashboard() {
         open={paletteOpen}
         onClose={() => setPaletteOpen(false)}
         onSelect={() => setPaletteOpen(false)}
-        data={SEARCH_DATA}
+        data={searchData}
         onOpen={() => setPaletteOpen(true)}
       />
 
diff --git a/src/pages/ExchangeDetail/ExchangeDetail.tsx b/src/pages/ExchangeDetail/ExchangeDetail.tsx
index be7d698..1d79a80 100644
--- a/src/pages/ExchangeDetail/ExchangeDetail.tsx
+++ b/src/pages/ExchangeDetail/ExchangeDetail.tsx
@@ -117,7 +117,7 @@ export function ExchangeDetail() {
       >
         <TopBar
           breadcrumb={[
-            { label: 'Dashboard', href: '/' },
+            { label: 'Applications', href: '/apps' },
             { label: 'Exchanges' },
             { label: id ?? 'Unknown' },
           ]}
@@ -144,7 +144,7 @@ export function ExchangeDetail() {
       {/* Top bar */}
       <TopBar
         breadcrumb={[
-          { label: 'Dashboard', href: '/' },
+          { label: 'Applications', href: '/apps' },
           { label: exchange.route, href: `/routes/${exchange.route}` },
           { label: exchange.id },
         ]}
diff --git a/src/pages/Inventory/Inventory.tsx b/src/pages/Inventory/Inventory.tsx
index 8aff9fe..a57c1eb 100644
--- a/src/pages/Inventory/Inventory.tsx
+++ b/src/pages/Inventory/Inventory.tsx
@@ -15,7 +15,7 @@ export function Inventory() {
     <div className={styles.page}>
       <header className={styles.header}>
         <h1 className={styles.headerTitle}>Component Inventory</h1>
-        <Link to="/" className={styles.backLink}>← Back to app</Link>
+        <Link to="/apps" className={styles.backLink}>← Back to app</Link>
       </header>
 
       <div className={styles.body}>
diff --git a/src/pages/Metrics/Metrics.tsx b/src/pages/Metrics/Metrics.tsx
index a3c8542..080a8e6 100644
--- a/src/pages/Metrics/Metrics.tsx
+++ b/src/pages/Metrics/Metrics.tsx
@@ -206,7 +206,7 @@ export function Metrics() {
       {/* Top bar */}
       <TopBar
         breadcrumb={[
-          { label: 'Dashboard', href: '/' },
+          { label: 'Applications', href: '/apps' },
           { label: 'Metrics' },
         ]}
         environment="PRODUCTION"
diff --git a/src/pages/RouteDetail/RouteDetail.tsx b/src/pages/RouteDetail/RouteDetail.tsx
index 27bac0d..ef30b4b 100644
--- a/src/pages/RouteDetail/RouteDetail.tsx
+++ b/src/pages/RouteDetail/RouteDetail.tsx
@@ -205,7 +205,7 @@ export function RouteDetail() {
       >
         <TopBar
           breadcrumb={[
-            { label: 'Dashboard', href: '/' },
+            { label: 'Applications', href: '/apps' },
             { label: 'Routes' },
             { label: id ?? 'Unknown' },
           ]}
@@ -231,8 +231,8 @@ export function RouteDetail() {
       {/* Top bar */}
       <TopBar
         breadcrumb={[
-          { label: 'Dashboard', href: '/' },
-          { label: 'Routes', href: '/' },
+          { label: 'Applications', href: '/apps' },
+          { label: 'Routes', href: '/apps' },
           { label: route.name },
         ]}
         environment="PRODUCTION"