diff --git a/Web/FrontController.hs b/Web/FrontController.hs
index 400bf75..aaa136d 100644
--- a/Web/FrontController.hs
+++ b/Web/FrontController.hs
@@ -160,47 +160,60 @@ defaultLayout inner = [hsx|
             <script src="/vendor/ihp-auto-refresh.js"></script>
             <script src="/js/ihf-annotation-launcher.js"></script>
         </head>
-        <body class="bg-gray-50 text-gray-900">
-            <nav class="bg-white border-b border-gray-200 px-6 py-3 flex items-center gap-6">
+        <body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
+            <nav class="bg-white border-b border-gray-200 px-6 py-3 flex items-center flex-shrink-0">
                 <a href={LandingAction} class="font-semibold text-indigo-600">inter-hub</a>
-                <a href={CapabilitiesAction} class="text-sm text-gray-600 hover:text-gray-900">About</a>
-                <a href={TutorialAction} class="text-sm text-gray-600 hover:text-gray-900">Tutorial</a>
-                <a href={ExtensionGuideAction} class="text-sm text-gray-600 hover:text-gray-900">Extend</a>
-                <span class="text-gray-200">|</span>
-                <a href={HubsAction} class="text-sm text-gray-600 hover:text-gray-900">Hubs</a>
-                <a href={WidgetsAction} class="text-sm text-gray-600 hover:text-gray-900">Widgets</a>
-                <a href={RequirementCandidatesAction} class="text-sm text-gray-600 hover:text-gray-900">Candidates</a>
-                <a href={RequirementsAction} class="text-sm text-gray-600 hover:text-gray-900">Requirements</a>
-                <a href={DecisionRecordsAction} class="text-sm text-gray-600 hover:text-gray-900">Decisions</a>
-                <a href={DeploymentRecordsAction} class="text-sm text-gray-600 hover:text-gray-900">Deployments</a>
-                <a href={AgentProposalsAction} class="text-sm text-gray-600 hover:text-gray-900">Agent</a>
-                <a href={WidgetAdapterSpecsAction} class="text-sm text-gray-600 hover:text-gray-900">Adapters</a>
-                <a href={CrossHubPropagationsAction} class="text-sm text-gray-600 hover:text-gray-900">Propagations</a>
-                <a href={OperationalReviewBoardAction} class="text-sm text-gray-600 hover:text-gray-900">Ops Review</a>
-                <a href={FederatedGovernanceDashboardAction} class="text-sm text-gray-600 hover:text-gray-900">Federation</a>
-                <a href={FederatedPolicyOverlaysAction} class="text-sm text-gray-600 hover:text-gray-900">Policies</a>
-                <a href={ArchiveRecordsAction} class="text-sm text-gray-600 hover:text-gray-900">Archive</a>
-                <a href={WidgetTypeRegistryAction} class="text-sm text-gray-600 hover:text-gray-900">Registries</a>
-                <a href={HubCapabilityManifestsAction} class="text-sm text-gray-600 hover:text-gray-900">Extensions</a>
-                <a href={ApiConsumersAction} class="text-sm text-gray-600 hover:text-gray-900">API</a>
-                <a href={ShowApiDashboardAction} class="text-sm text-gray-600 hover:text-gray-900">API Dashboard</a>
-                <a href={HubRegistryAction} class="text-sm text-gray-600 hover:text-gray-900">Hub Registry</a>
-                <a href={MarketplaceDashboardAction} class="text-sm text-gray-600 hover:text-gray-900">Marketplace</a>
-                <a href={AgentRegistrationsAction} class="text-sm text-gray-600 hover:text-gray-900">Agents</a>
-                <a href={ModelRoutingPoliciesAction} class="text-sm text-gray-600 hover:text-gray-900">Routing</a>
-                <a href={CollectiveProposalsAction} class="text-sm text-gray-600 hover:text-gray-900">Collective</a>
-                <a href={AiGovernancePoliciesAction} class="text-sm text-gray-600 hover:text-gray-900">AI Gov</a>
-                <a href={LearningDashboardAction} class="text-sm text-gray-600 hover:text-gray-900">Learning</a>
-                <div class="ml-auto">
+                <div class="ml-auto flex items-center gap-5">
+                    <a href={CapabilitiesAction} class="text-sm text-gray-500 hover:text-gray-900">About</a>
+                    <a href={TutorialAction} class="text-sm text-gray-500 hover:text-gray-900">Tutorial</a>
+                    <a href={ExtensionGuideAction} class="text-sm text-gray-500 hover:text-gray-900">Extend</a>
+                    <span class="text-gray-200">|</span>
                     <form method="POST" action={DeleteSessionAction} style="display:inline">
                         <input type="hidden" name="_method" value="DELETE" />
                         <button type="submit" class="text-sm text-gray-500 hover:text-gray-700 bg-transparent border-0 p-0 cursor-pointer">Sign out</button>
                     </form>
                 </div>
             </nav>
-            <main class="max-w-5xl mx-auto px-6 py-8">
-                {inner}
-            </main>
+            <div class="flex flex-1">
+                <aside class="w-48 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
+                    <nav class="px-3 py-4 space-y-0.5">
+                        <a href={HubsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Hubs</a>
+                        <a href={WidgetsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Widgets</a>
+                        <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Governance</div>
+                        <a href={RequirementCandidatesAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Candidates</a>
+                        <a href={RequirementsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Requirements</a>
+                        <a href={DecisionRecordsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Decisions</a>
+                        <a href={DeploymentRecordsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Deployments</a>
+                        <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Intelligence</div>
+                        <a href={AgentProposalsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Agent Proposals</a>
+                        <a href={AgentRegistrationsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Agents</a>
+                        <a href={ModelRoutingPoliciesAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Routing</a>
+                        <a href={CollectiveProposalsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Collective</a>
+                        <a href={AiGovernancePoliciesAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">AI Gov</a>
+                        <a href={LearningDashboardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Learning</a>
+                        <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Platform</div>
+                        <a href={WidgetAdapterSpecsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Adapters</a>
+                        <a href={CrossHubPropagationsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Propagations</a>
+                        <a href={OperationalReviewBoardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Ops Review</a>
+                        <a href={FederatedGovernanceDashboardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Federation</a>
+                        <a href={FederatedPolicyOverlaysAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Policies</a>
+                        <a href={ArchiveRecordsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Archive</a>
+                        <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Registry</div>
+                        <a href={WidgetTypeRegistryAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Registries</a>
+                        <a href={HubCapabilityManifestsAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Extensions</a>
+                        <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">API &amp; Market</div>
+                        <a href={ApiConsumersAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">API Consumers</a>
+                        <a href={ShowApiDashboardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">API Dashboard</a>
+                        <a href={HubRegistryAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Hub Registry</a>
+                        <a href={MarketplaceDashboardAction} class="block px-3 py-1.5 text-sm text-gray-700 rounded hover:bg-gray-100">Marketplace</a>
+                    </nav>
+                </aside>
+                <main class="flex-1 px-8 py-8 overflow-y-auto">
+                    <div class="max-w-5xl">
+                        {inner}
+                    </div>
+                </main>
+            </div>
         </body>
     </html>
 |]
