diff --git a/DESIGN.md b/DESIGN.md
index 85aca29b..39b8c7f9 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -168,6 +168,10 @@ behavior. Defaults can be overridden by the owning screen; inspect it first.
   6px corners, Iconoir icons, and `aria-current` on the active destination.
   The generic [sidebar menu](./components/ui/sidebar-menu.tsx) has different
   defaults (32px rows, 4px corners); these are separate components.
+  Settings opens a secondary menu in the same sidebar, with a back arrow to
+  restore the main navigation. Each Settings section has a scoped page URL.
+  The mobile navigation sheet follows the same pattern and closes after a
+  section is selected. Billing alone has Billing Settings and Usage tabs.
 - **[Dialog](./components/ui/dialog.tsx):** reuse the Radix-backed focus and
   dismissal behavior, 6px corners, 24px padding, and responsive action layout.
   Provide a title and description. Use inline disclosure when it can complete
diff --git a/app/(dashboard)/[scope]/settings/[section]/page.tsx b/app/(dashboard)/[scope]/settings/[section]/page.tsx
new file mode 100644
index 00000000..d63f5a2e
--- /dev/null
+++ b/app/(dashboard)/[scope]/settings/[section]/page.tsx
@@ -0,0 +1,33 @@
+import { notFound } from "next/navigation";
+import { getScopeContext } from "@/lib/scope-context";
+import { PERSONAL_SETTINGS, TEAM_SETTINGS } from "@/lib/settings-navigation";
+import { TeamSettingsClient } from "@/components/settings/team-settings-client";
+import { TeamsListSection } from "@/components/settings/teams-list-section";
+import { CliApiKeysSection } from "@/components/settings/cli-api-keys-section";
+import { PersonalAccountPage } from "../_components/personal-account-page";
+import { ProviderKeysPage } from "../_components/provider-keys-page";
+
+export default async function SettingsSectionPage({ params }: {
+  params: Promise<{ section: string }>;
+}) {
+  const [{ section }, scope] = await Promise.all([params, getScopeContext()]);
+  const items = scope.kind === "team" ? TEAM_SETTINGS : PERSONAL_SETTINGS;
+  const item = items.find((entry) => entry.id === section);
+  if (!item) notFound();
+
+  if (scope.kind === "team") {
+    // Billing and MCP have static route segments; this page owns the other sections.
+    if (section !== "members" && section !== "keys" && section !== "models" && section !== "audit") notFound();
+    return <TeamSettingsClient teamId={scope.teamId} teamSlug={scope.slug} section={section} />;
+  }
+
+  return (
+    <div className="min-h-full w-full max-w-[1488px] space-y-4 p-3 md:space-y-6 md:p-6">
+      <h1 className="ui-page-title">{item.label}</h1>
+      {section === "account" && <PersonalAccountPage />}
+      {section === "teams" && <TeamsListSection />}
+      {section === "keys" && <ProviderKeysPage />}
+      {section === "mogplex-keys" && <CliApiKeysSection />}
+    </div>
+  );
+}
diff --git a/app/(dashboard)/[scope]/settings/_components/index.ts b/app/(dashboard)/[scope]/settings/_components/index.ts
index d65e9913..1b41c033 100644
--- a/app/(dashboard)/[scope]/settings/_components/index.ts
+++ b/app/(dashboard)/[scope]/settings/_components/index.ts
@@ -10,10 +10,4 @@ export {
   type GithubInstallationView,
   type GithubOwnerTarget,
   type SettingsView,
-  type SettingsTab,
-  type KeysSubTab,
-  SETTINGS_TABS,
-  SETTINGS_TAB_SET,
-  KEYS_SUB_TABS,
-  KEYS_SUB_TAB_SET,
 } from "./settings-types";
diff --git a/app/(dashboard)/[scope]/settings/_components/personal-account-page.tsx b/app/(dashboard)/[scope]/settings/_components/personal-account-page.tsx
new file mode 100644
index 00000000..1722cbec
--- /dev/null
+++ b/app/(dashboard)/[scope]/settings/_components/personal-account-page.tsx
@@ -0,0 +1,111 @@
+"use client"
+
+import { useCallback, useMemo } from "react"
+import useSWR from "swr"
+import { useUser } from "@/hooks/use-user"
+import { fetchJsonArray, fetchJsonObject } from "@/lib/client-fetch"
+import { DecisionChecksSection } from "@/components/settings/decision-checks-section"
+import { trackActivation } from "@/lib/activation-tracking"
+import { AccountSection } from "./account-section"
+import type { GithubInstallationView, GithubOwnerTarget, SettingsView } from "./settings-types"
+
+export function PersonalAccountPage() {
+  const { user, isLoading } = useUser()
+  const { error: settingsError } = useSWR<SettingsView>(
+    "/api/settings",
+    (url: string) => fetchJsonObject<SettingsView>(url, "Failed to load settings"),
+  )
+  const settingsLoadError = settingsError ? "Unable to load settings preferences" : null
+  const {
+    data: githubInstallations,
+    error: githubInstallationsError,
+  } = useSWR<GithubInstallationView[]>(
+    "/api/github/installations",
+    (url: string) => fetchJsonArray<GithubInstallationView>(url, "Failed to load GitHub installations"),
+  )
+  const { data: githubOwnerTargets } = useSWR<GithubOwnerTarget[]>(
+    user?.github_connected ? "/api/github/owners" : null,
+    (url: string) => fetchJsonArray<GithubOwnerTarget>(url, "Failed to load GitHub accounts"),
+  )
+  const ownerTargets = githubOwnerTargets ?? []
+  const ownerTargetsNeedingInstall = ownerTargets.filter((target) => target.github_installation_id == null)
+  const githubInstallationsLoadError = githubInstallationsError ? "Unable to load GitHub App installations" : null
+
+  const githubPrimaryAction = useMemo(() => {
+    if (user?.github_primary_action) return user.github_primary_action
+    if (!user?.github_connected) {
+      return {
+        label: user?.github_app_available ? "Install GitHub App" : "Connect GitHub",
+        href: "/api/auth/github",
+      }
+    }
+    return null
+  }, [user])
+
+  const showGithubAddInstallAction = Boolean(
+    user?.github_app_available &&
+    user?.github_connected &&
+    githubPrimaryAction?.href !== "/api/auth/github",
+  )
+
+  const nextStep = useMemo(() => {
+    if (githubPrimaryAction) {
+      const githubState = user?.github_state
+      const title = githubState === "app_installed"
+        ? "Sync repositories next"
+        : githubState === "app_install_pending"
+          ? "Complete the GitHub App install"
+          : githubState === "oauth_connected"
+            ? "Upgrade GitHub from OAuth to the App"
+            : "Install GitHub App next"
+      const description = githubState === "app_installed"
+        ? "Open Projects and sync the repositories covered by your GitHub App installation into Mogplex."
+        : user?.github_status_detail || "GitHub powers repo sync, trigger coverage, and automation."
+      return {
+        title,
+        description,
+        href: githubPrimaryAction.href,
+        label: githubPrimaryAction.label,
+      }
+    }
+
+    if (!user?.github_connected) {
+      return {
+        title: user?.github_app_available ? "Install GitHub App next" : "Connect GitHub next",
+        description: "GitHub is required to import repositories and make Open Workspace useful.",
+        href: "/api/auth/github",
+        label: user?.github_app_available ? "Install GitHub App" : "Connect GitHub",
+      }
+    }
+
+    return null
+  }, [githubPrimaryAction, user])
+
+  const trackConnectionStart = useCallback((provider: "github", source: string) => {
+    if (provider === "github") {
+      trackActivation("github_connect_started", {
+        source,
+        connection_mode: user?.github_app_available ? "app" : "oauth",
+      })
+    }
+  }, [user?.github_app_available])
+
+  return (
+    <div className="space-y-4 md:space-y-6">
+      {settingsLoadError && <div className="text-sm text-destructive">{settingsLoadError}</div>}
+      <AccountSection
+        isLoading={isLoading}
+        user={user}
+        githubPrimaryAction={githubPrimaryAction}
+        showGithubAddInstallAction={showGithubAddInstallAction}
+        nextStep={nextStep}
+        trackConnectionStart={trackConnectionStart}
+        githubInstallationsLoadError={githubInstallationsLoadError}
+        githubInstallations={githubInstallations}
+        ownerTargets={ownerTargets}
+        ownerTargetsNeedingInstall={ownerTargetsNeedingInstall}
+      />
+      <DecisionChecksSection endpoint="/api/settings/decision-checks" audience="personal" />
+    </div>
+  )
+}
diff --git a/app/(dashboard)/[scope]/settings/_components/provider-keys-page.tsx b/app/(dashboard)/[scope]/settings/_components/provider-keys-page.tsx
new file mode 100644
index 00000000..cc019450
--- /dev/null
+++ b/app/(dashboard)/[scope]/settings/_components/provider-keys-page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { useUser } from "@/hooks/use-user";
+import { ApiKeysSection } from "./api-keys-section";
+
+export function ProviderKeysPage() {
+  const { user, isLoading } = useUser();
+  return <ApiKeysSection platformAiEnabled={isLoading ? null : user?.platform_access?.allowPlatformAi ?? null} />;
+}
diff --git a/app/(dashboard)/[scope]/settings/_components/settings-types.ts b/app/(dashboard)/[scope]/settings/_components/settings-types.ts
index 732a69ee..ac7f965a 100644
--- a/app/(dashboard)/[scope]/settings/_components/settings-types.ts
+++ b/app/(dashboard)/[scope]/settings/_components/settings-types.ts
@@ -71,11 +71,3 @@ export const PROVIDER_META: Record<
     masked: "sk-or-...****",
   },
 };
-
-export const SETTINGS_TABS = ["account", "teams", "keys", "billing"] as const;
-export type SettingsTab = (typeof SETTINGS_TABS)[number];
-export const SETTINGS_TAB_SET: ReadonlySet<string> = new Set(SETTINGS_TABS);
-
-export const KEYS_SUB_TABS = ["api", "cli"] as const;
-export type KeysSubTab = (typeof KEYS_SUB_TABS)[number];
-export const KEYS_SUB_TAB_SET: ReadonlySet<string> = new Set(KEYS_SUB_TABS);
diff --git a/app/(dashboard)/[scope]/settings/billing/page.tsx b/app/(dashboard)/[scope]/settings/billing/page.tsx
index db588837..267438a0 100644
--- a/app/(dashboard)/[scope]/settings/billing/page.tsx
+++ b/app/(dashboard)/[scope]/settings/billing/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { BillingSection } from "@/components/settings/billing-section";
+import { getScopeContext } from "@/lib/scope-context";
 
 export const metadata: Metadata = {
   title: "Billing | Mogplex",
@@ -10,10 +11,11 @@ export const metadata: Metadata = {
   },
 };
 
-export default function BillingSettingsPage() {
+export default async function BillingSettingsPage() {
+  await getScopeContext();
   return (
-    <div className="mx-auto w-full max-w-3xl p-6">
-      <h1 className="mb-6 text-xl font-semibold">Billing</h1>
+    <div className="min-h-full w-full max-w-[1488px] space-y-4 p-3 md:space-y-6 md:p-6">
+      <h1 className="ui-page-title">Billing</h1>
       <BillingSection />
     </div>
   );
diff --git a/app/(dashboard)/[scope]/settings/settings-page-client.tsx b/app/(dashboard)/[scope]/settings/settings-page-client.tsx
index e208d419..3ea687d5 100644
--- a/app/(dashboard)/[scope]/settings/settings-page-client.tsx
+++ b/app/(dashboard)/[scope]/settings/settings-page-client.tsx
@@ -1,227 +1,16 @@
-"use client"
+"use client";
 
-import { useEffect, useCallback, useMemo } from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import useSWR from "swr"
-import { useUser } from "@/hooks/use-user"
-import { fetchJsonArray, fetchJsonObject } from "@/lib/client-fetch"
-import { TeamSettingsClient } from "@/components/settings/team-settings-client"
-import { TeamsListSection } from "@/components/settings/teams-list-section"
-import { BillingSection } from "@/components/settings/billing-section"
-import { DecisionChecksSection } from "@/components/settings/decision-checks-section"
-import { CliApiKeysSection } from "@/components/settings/cli-api-keys-section"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
-import { trackActivation } from "@/lib/activation-tracking"
-import { getLegacySettingsDestination } from "@/lib/settings-redirect"
-import type { ScopeContext } from "@/lib/scope-context"
-
-import {
-  AccountSection,
-  ApiKeysSection,
-  type GithubInstallationView,
-  type GithubOwnerTarget,
-  type SettingsView,
-  type SettingsTab,
-  type KeysSubTab,
-  SETTINGS_TAB_SET,
-  KEYS_SUB_TAB_SET,
-} from "./_components"
+import { useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { getLegacySettingsDestination } from "@/lib/settings-redirect";
+import type { ScopeContext } from "@/lib/scope-context";
 
 export function SettingsPageClient({ scope }: { scope: ScopeContext }) {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const query = searchParams.toString()
-  const destination = getLegacySettingsDestination(scope, query)
+  const router = useRouter();
+  const query = useSearchParams().toString();
   useEffect(() => {
-    const target = getLegacySettingsDestination(scope, query, window.location.hash)
-    if (target) router.replace(target, { scroll: false })
-  }, [scope, query, router])
-  if (destination) return null
-
-  if (scope.kind === "team") {
-    return <TeamSettingsClient teamId={scope.teamId} teamSlug={scope.slug} />
-  }
-
-  return <PersonalSettingsClient />
-}
-
-function PersonalSettingsClient() {
-  const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const tabParam = searchParams?.get("tab") ?? ""
-  const subParam = searchParams?.get("sub") ?? ""
-  const activeTab: SettingsTab = SETTINGS_TAB_SET.has(tabParam) ? (tabParam as SettingsTab) : "account"
-  const activeSubTab: KeysSubTab = KEYS_SUB_TAB_SET.has(subParam) ? (subParam as KeysSubTab) : "api"
-
-  const handleTabChange = useCallback(
-    (value: string) => {
-      const params = new URLSearchParams(searchParams?.toString() ?? "")
-      params.set("tab", value)
-      params.delete("sub")
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false })
-    },
-    [router, pathname, searchParams],
-  )
-
-  const handleSubTabChange = useCallback(
-    (value: string) => {
-      const params = new URLSearchParams(searchParams?.toString() ?? "")
-      params.set("tab", "keys")
-      params.set("sub", value)
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false })
-    },
-    [router, pathname, searchParams],
-  )
-
-  const { user, isLoading } = useUser()
-  const { error: settingsError } = useSWR<SettingsView>(
-    "/api/settings",
-    (url: string) => fetchJsonObject<SettingsView>(url, "Failed to load settings"),
-  )
-  const settingsLoadError = settingsError ? "Unable to load settings preferences" : null
-  const {
-    data: githubInstallations,
-    error: githubInstallationsError,
-  } = useSWR<GithubInstallationView[]>(
-    "/api/github/installations",
-    (url: string) => fetchJsonArray<GithubInstallationView>(url, "Failed to load GitHub installations"),
-  )
-  const { data: githubOwnerTargets } = useSWR<GithubOwnerTarget[]>(
-    user?.github_connected ? "/api/github/owners" : null,
-    (url: string) => fetchJsonArray<GithubOwnerTarget>(url, "Failed to load GitHub accounts"),
-  )
-  const ownerTargets = githubOwnerTargets ?? []
-  const ownerTargetsNeedingInstall = ownerTargets.filter((target) => target.github_installation_id == null)
-  const githubInstallationsLoadError = githubInstallationsError ? "Unable to load GitHub App installations" : null
-  const platformAccess = user ? user.platform_access : null
-  const platformAiEnabled = platformAccess?.allowPlatformAi ?? null
-
-  const githubPrimaryAction = useMemo(() => {
-    if (user?.github_primary_action) return user.github_primary_action
-    if (!user?.github_connected) {
-      return {
-        label: user?.github_app_available ? "Install GitHub App" : "Connect GitHub",
-        href: "/api/auth/github",
-      }
-    }
-    return null
-  }, [user])
-
-  const showGithubAddInstallAction = Boolean(
-    user?.github_app_available &&
-    user?.github_connected &&
-    githubPrimaryAction?.href !== "/api/auth/github",
-  )
-
-  const nextStep = useMemo(() => {
-    if (githubPrimaryAction) {
-      const githubState = user?.github_state
-      const title = githubState === "app_installed"
-        ? "Sync repositories next"
-        : githubState === "app_install_pending"
-          ? "Complete the GitHub App install"
-          : githubState === "oauth_connected"
-            ? "Upgrade GitHub from OAuth to the App"
-            : "Install GitHub App next"
-      const description = githubState === "app_installed"
-        ? "Open Projects and sync the repositories covered by your GitHub App installation into Mogplex."
-        : user?.github_status_detail || "GitHub powers repo sync, trigger coverage, and automation."
-      return {
-        title,
-        description,
-        href: githubPrimaryAction.href,
-        label: githubPrimaryAction.label,
-      }
-    }
-
-    if (!user?.github_connected) {
-      return {
-        title: user?.github_app_available ? "Install GitHub App next" : "Connect GitHub next",
-        description: "GitHub is required to import repositories and make Open Workspace useful.",
-        href: "/api/auth/github",
-        label: user?.github_app_available ? "Install GitHub App" : "Connect GitHub",
-      }
-    }
-
-    return null
-  }, [githubPrimaryAction, user])
-
-  const trackConnectionStart = useCallback((provider: "github", source: string) => {
-    if (provider === "github") {
-      trackActivation("github_connect_started", {
-        source,
-        connection_mode: user?.github_app_available ? "app" : "oauth",
-      })
-    }
-  }, [user?.github_app_available])
-
-  return (
-    <div className="min-h-full w-full max-w-[1488px] p-3 space-y-4 md:p-6 md:space-y-6">
-      <div>
-        <h1 className="ui-page-title">Settings</h1>
-        <div className="ui-page-subtitle">Account preferences, keys, and billing.</div>
-      </div>
-
-      {settingsLoadError && (
-        <div className="text-sm text-destructive">{settingsLoadError}</div>
-      )}
-
-      <Tabs value={activeTab} onValueChange={handleTabChange} className="gap-4 md:gap-6">
-        <ScrollArea className="w-full">
-          <TabsList className="h-8 inline-flex w-max bg-transparent p-0 gap-1">
-            <TabsTrigger value="account" className="px-3 h-7 text-[13px]">Account</TabsTrigger>
-            <TabsTrigger value="teams" className="px-3 h-7 text-[13px]">Teams</TabsTrigger>
-            <TabsTrigger value="keys" className="px-3 h-7 text-[13px]">Keys &amp; Tokens</TabsTrigger>
-            <TabsTrigger value="billing" className="px-3 h-7 text-[13px]">Billing</TabsTrigger>
-          </TabsList>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-
-        <TabsContent value="account" className="mt-0">
-          <AccountSection
-            isLoading={isLoading}
-            user={user}
-            githubPrimaryAction={githubPrimaryAction}
-            showGithubAddInstallAction={showGithubAddInstallAction}
-            nextStep={nextStep}
-            trackConnectionStart={trackConnectionStart}
-            githubInstallationsLoadError={githubInstallationsLoadError}
-            githubInstallations={githubInstallations}
-            ownerTargets={ownerTargets}
-            ownerTargetsNeedingInstall={ownerTargetsNeedingInstall}
-          />
-          <div className="mt-4 md:mt-6">
-            <DecisionChecksSection endpoint="/api/settings/decision-checks" audience="personal" />
-          </div>
-        </TabsContent>
-
-        <TabsContent value="teams" className="mt-0">
-          <TeamsListSection />
-        </TabsContent>
-
-        <TabsContent value="keys" className="mt-0">
-          <Tabs value={activeSubTab} onValueChange={handleSubTabChange} className="gap-4">
-            <TabsList className="h-8 inline-flex w-max bg-transparent p-0 gap-1">
-              <TabsTrigger value="api" className="px-3 h-7 text-[13px]">Provider Keys</TabsTrigger>
-              <TabsTrigger value="cli" className="px-3 h-7 text-[13px]">Mogplex Keys</TabsTrigger>
-            </TabsList>
-            <TabsContent value="api" className="mt-0">
-              <ApiKeysSection platformAiEnabled={isLoading ? null : platformAiEnabled} />
-            </TabsContent>
-            <TabsContent value="cli" className="mt-0">
-              <CliApiKeysSection />
-            </TabsContent>
-          </Tabs>
-        </TabsContent>
-
-        <TabsContent value="billing" className="mt-0">
-          <BillingSection embedded />
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
+    // Keep the root redirect client-side: legacy hash links are not sent to the server.
+    router.replace(getLegacySettingsDestination(scope, query, window.location.hash), { scroll: false });
+  }, [scope, query, router]);
+  return <p className="p-6 text-sm text-muted-foreground" role="status">Opening Settings…</p>;
 }
-
-export default SettingsPageClient
diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index 40d59a0c..7fda47b2 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -19,6 +19,7 @@ import {
   DeliveryTruck,
   Flash,
   PlugTypeA,
+  NavArrowRight,
   Repository,
   Rocket,
   Search,
@@ -33,6 +34,8 @@ import {
 import { formatUsd } from "@/lib/billing/catalog";
 import type { CapacityBillingSummaryV2 } from "@/lib/billing/capacity-summary-types";
 import { scopedHref } from "@/lib/scoped-href";
+import { SettingsNavigation } from "@/components/settings/settings-navigation";
+import { useSettingsNavigation } from "@/hooks/use-settings-navigation";
 
 const SIDEBAR_WIDTH_KEY = "mogplex.appSidebar.width";
 const SIDEBAR_COLLAPSED_KEY = "mogplex.appSidebar.collapsed";
@@ -40,6 +43,7 @@ const DEFAULT_WIDTH = 272;
 const MIN_WIDTH = 64;
 const COMPACT_THRESHOLD = 120;
 const MAX_WIDTH = 320;
+const SETTINGS_MIN_WIDTH = 240;
 
 const NAV_ICONS = {
   control: Rocket,
@@ -72,16 +76,22 @@ function SidebarNavLink({
   item,
   compact,
   pathname,
+  onClick,
+  linkRef,
 }: {
   item: AppNavItem;
   compact: boolean;
   pathname: string;
+  onClick?: () => void;
+  linkRef?: React.Ref<HTMLAnchorElement>;
 }) {
   const Icon = NAV_ICONS[item.id];
   const active = isAppNavItemActive(pathname, item.match);
   return (
     <Link
       href={item.href}
+      ref={linkRef}
+      onClick={onClick}
       aria-current={active ? "page" : undefined}
       aria-label={compact ? item.label : undefined}
       title={compact ? item.label : undefined}
@@ -96,6 +106,7 @@ function SidebarNavLink({
       {compact ? null : (
         <span className="app-sidebar-link-label truncate">{item.label}</span>
       )}
+      {item.id === "settings" && !compact && <NavArrowRight className="ml-auto size-4 shrink-0" aria-hidden="true" />}
     </Link>
   );
 }
@@ -147,9 +158,10 @@ export function AppSidebar() {
     Boolean(scope) && (membershipsLoading || scopeResolved);
   const billingPending = membershipsLoading || billingLoading;
   const [width, setWidth] = useState(DEFAULT_WIDTH);
+  const { showSettings, backToMain, openSettings, settingsLinkRef } = useSettingsNavigation(scope, pathname);
   const [resizing, setResizing] = useState(false);
   const activePointerId = useRef<number | null>(null);
-  const compact = width <= COMPACT_THRESHOLD;
+  const compact = !showSettings && width <= COMPACT_THRESHOLD;
 
   useEffect(() => {
     const storedWidth = Number(window.localStorage.getItem(SIDEBAR_WIDTH_KEY));
@@ -213,7 +225,7 @@ export function AppSidebar() {
       data-compact={compact ? "true" : "false"}
       data-resizing={resizing ? "true" : "false"}
       data-testid="app-sidebar"
-      style={{ width }}
+      style={{ width: showSettings ? Math.max(width, SETTINGS_MIN_WIDTH) : width }}
     >
       <div className="app-sidebar-header h-[20px] shrink-0" aria-hidden="true" />
 
@@ -229,8 +241,11 @@ export function AppSidebar() {
         </div>
       )}
 
+      {showSettings ? (
+        <SettingsNavigation onBack={backToMain} />
+      ) : <>
       <nav
-        className="flex min-h-0 flex-1 flex-col gap-1 overflow-hidden px-4 py-0"
+        className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-4 py-0"
         aria-label="Primary"
       >
         {primaryItems.map((item) => (
@@ -253,9 +268,12 @@ export function AppSidebar() {
             item={item}
             compact={compact}
             pathname={pathname}
+            onClick={item.id === "settings" ? openSettings : undefined}
+            linkRef={item.id === "settings" ? settingsLinkRef : undefined}
           />
         ))}
       </nav>
+      </>}
 
       {!compact && showBillingCard ? (
         <div className="app-sidebar-footer mx-5 mb-5 overflow-hidden rounded-lg border border-sidebar-border bg-card px-4 py-4 text-sm">
@@ -290,7 +308,7 @@ export function AppSidebar() {
         </div>
       ) : null}
 
-      <div
+      {!showSettings && <div
         role="separator"
         aria-label="Resize app navigation"
         aria-orientation="vertical"
@@ -309,7 +327,7 @@ export function AppSidebar() {
           setResizing(true);
         }}
         className="app-sidebar-resizer absolute inset-y-0 -right-1 z-30 w-2 cursor-col-resize touch-none outline-none"
-      />
+      />}
     </aside>
   );
 }
diff --git a/components/panes/flows-pane/use-flow-derived-selection.ts b/components/panes/flows-pane/use-flow-derived-selection.ts
index 9e8b898a..c71fc7fd 100644
--- a/components/panes/flows-pane/use-flow-derived-selection.ts
+++ b/components/panes/flows-pane/use-flow-derived-selection.ts
@@ -168,8 +168,8 @@ export function useFlowDerivedSelection(
     selectedAgentNode?.data.harness ?? "mogplex";
 
   const apiKeysSettingsHref = scope
-    ? scopedHref(scope, "/settings?tab=keys")
-    : "/settings?tab=keys";
+    ? scopedHref(scope, "/settings/keys")
+    : "/settings/keys";
 
   const selectedConditionNode =
     selectedNode?.type === "condition"
diff --git a/components/settings/billing-section.tsx b/components/settings/billing-section.tsx
index 907c628c..255dab10 100644
--- a/components/settings/billing-section.tsx
+++ b/components/settings/billing-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import useSWR from "swr";
 import {
   fetchWithActiveTeam,
@@ -10,10 +10,7 @@ import {
 } from "@/components/active-scope-provider";
 import { CapacityAddOnDialog } from "@/components/settings/capacity-add-on-dialog";
 import { BillingSubscriptionDetails } from "@/components/settings/billing-subscription-details";
-import {
-  formatDate,
-  formatUsd,
-} from "@/components/settings/capacity-billing-format";
+import { formatUsd } from "@/components/settings/capacity-billing-format";
 import { useCapacityBillingEvents } from "@/components/settings/use-capacity-billing-events";
 import { Button } from "@/components/ui/button";
 import {
@@ -31,6 +28,8 @@ import {
 } from "@/lib/billing/capacity-catalog";
 import type { CapacityBillingSummaryV2 } from "@/lib/billing/capacity-summary-types";
 import { findTopupPresetByAmount } from "@/lib/billing/catalog";
+import { BillingUsage } from "./billing-usage";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
 type BillingLoadResult =
   | { enabled: false }
@@ -111,10 +110,19 @@ async function loadBillingSummary([url, activeTeamId]: [
   };
 }
 
-export function BillingSection({ embedded = false }: { embedded?: boolean }) {
+export function BillingSection() {
+  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const activeTeamId = useActiveTeamId();
+  const activeTab = searchParams.get("tab") === "usage" ? "usage" : "settings";
+  function changeTab(value: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value === "usage") params.set("tab", "usage");
+    else params.delete("tab");
+    const query = params.toString();
+    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+  }
   const { data, error, isLoading, mutate } = useSWR<BillingLoadResult>(
     ["/api/billing/capacity", activeTeamId],
     loadBillingSummary
@@ -126,7 +134,7 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
   const [actionError, setActionError] = useState<string | null>(null);
   const hostedUsageAttempts = useRef(new Map<string, string>());
   const checkoutResult = searchParams.get("billing");
-  const returnPath = embedded ? `${pathname}?tab=billing` : pathname;
+  const returnPath = pathname;
   const summary = data?.enabled ? data.summary : undefined;
   const refresh = useCallback(() => mutate(), [mutate]);
 
@@ -247,7 +255,11 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
   const showCapacityAddOns = summary.plan.offerKind === "individual";
 
   return (
-    <div className="flex flex-col gap-6">
+    <Tabs value={activeTab} onValueChange={changeTab} className="gap-6">
+      <TabsList aria-label="Billing sections">
+        <TabsTrigger value="settings">Billing Settings</TabsTrigger>
+        <TabsTrigger value="usage">Usage</TabsTrigger>
+      </TabsList>
       {submitted ? (
         <div
           className="bg-muted/40 rounded-md border p-3 text-sm"
@@ -257,6 +269,7 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
         </div>
       ) : null}
 
+      <TabsContent value="settings" className="mt-0 space-y-6">
       <BillingSubscriptionDetails
         onOpenPortal={(action) => redirectTo(action, "/api/stripe/portal", {})}
         pendingAction={pendingAction}
@@ -433,42 +446,11 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
           </CardContent>
         </Card>
       ) : null}
+      </TabsContent>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>
-            <h2>Recent usage costs</h2>
-          </CardTitle>
-          <CardDescription>
-            See what used your inference balance.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="divide-y">
-          {summary.recentCosts.length === 0 ? (
-            <p className="text-muted-foreground text-sm">No usage costs yet.</p>
-          ) : (
-            summary.recentCosts.map((cost) => (
-              <div
-                className="flex items-start justify-between gap-4 py-3 first:pt-0"
-                key={cost.operationId}
-              >
-                <div>
-                  <p className="text-sm font-medium">{cost.description}</p>
-                  <p className="text-muted-foreground text-xs">
-                    {formatDate(cost.occurredAt)} ·{" "}
-                    {cost.status.replaceAll("_", " ")}
-                  </p>
-                </div>
-                <p className="text-sm font-medium tabular-nums">
-                  {cost.totalCents === null
-                    ? "In progress"
-                    : formatUsd(cost.totalCents)}
-                </p>
-              </div>
-            ))
-          )}
-        </CardContent>
-      </Card>
+      <TabsContent value="usage" className="mt-0">
+        <BillingUsage summary={summary} />
+      </TabsContent>
 
       {actionError ? (
         <p className="text-destructive text-sm" role="alert">
@@ -489,6 +471,6 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
         }}
         open={selectedAddOn !== null}
       />
-    </div>
+    </Tabs>
   );
 }
diff --git a/components/settings/billing-usage.tsx b/components/settings/billing-usage.tsx
new file mode 100644
index 00000000..99bbdf9e
--- /dev/null
+++ b/components/settings/billing-usage.tsx
@@ -0,0 +1,37 @@
+import { formatDate, formatUsd } from "./capacity-billing-format";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { CapacityBillingSummaryV2 } from "@/lib/billing/capacity-summary-types";
+
+export function BillingUsage({ summary }: { summary: CapacityBillingSummaryV2 }) {
+  return (
+    <div className="space-y-6">
+      <section aria-label="Inference balance" className="rounded-lg border bg-card p-6">
+        <h2 className="text-base font-semibold">Inference balance</h2>
+        <dl className="mt-4 grid gap-4 sm:grid-cols-3">
+          <div><dt className="text-sm text-muted-foreground">Available now</dt><dd className="mt-1 font-medium tabular-nums">{formatUsd(summary.hostedUsage.spendableCents)}</dd></div>
+          <div><dt className="text-sm text-muted-foreground">Included credit</dt><dd className="mt-1 font-medium tabular-nums">{formatUsd(summary.hostedUsage.includedRemainingCents)}</dd></div>
+          <div><dt className="text-sm text-muted-foreground">Purchased credit</dt><dd className="mt-1 font-medium tabular-nums">{formatUsd(summary.hostedUsage.purchasedRemainingCents)}</dd></div>
+        </dl>
+      </section>
+      <Card>
+        <CardHeader>
+          <CardTitle><h2>Recent usage costs</h2></CardTitle>
+          <CardDescription>See what used your inference balance.</CardDescription>
+        </CardHeader>
+        <CardContent className="divide-y">
+          {summary.recentCosts.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No usage costs yet.</p>
+          ) : summary.recentCosts.map((cost) => (
+            <div key={cost.operationId} className="flex items-start justify-between gap-4 py-3 first:pt-0">
+              <div className="min-w-0 break-words">
+                <p className="text-sm font-medium">{cost.description}</p>
+                <p className="text-xs text-muted-foreground">{formatDate(cost.occurredAt)} · {cost.status.replaceAll("_", " ")}</p>
+              </div>
+              <p className="shrink-0 text-sm font-medium tabular-nums">{cost.totalCents === null ? "In progress" : formatUsd(cost.totalCents)}</p>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/components/settings/settings-navigation.tsx b/components/settings/settings-navigation.tsx
new file mode 100644
index 00000000..56bde8a5
--- /dev/null
+++ b/components/settings/settings-navigation.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { NavArrowLeft } from "iconoir-react";
+import { useParams, usePathname } from "next/navigation";
+import { useMemberships } from "@/hooks/use-memberships";
+import { buildSettingsNavItems } from "@/lib/settings-navigation";
+
+export function SettingsNavigation({ onBack, onNavigate }: {
+  onBack: () => void;
+  onNavigate?: () => void;
+}) {
+  const { scope } = useParams<{ scope: string }>();
+  const pathname = usePathname();
+  const { memberships, isLoading } = useMemberships();
+  const team = memberships.teams.find((item) => item.slug === scope);
+  const personal = memberships.personal.slug === scope;
+  const items = team || personal
+    ? buildSettingsNavItems(scope, team ? "team" : "personal", team?.role === "owner" || team?.role === "admin")
+    : [];
+
+  return (
+    <nav aria-label="Settings" className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-4">
+      <button type="button" onClick={onBack} aria-label="Back to main navigation from Settings"
+        className="mb-3 flex h-10 shrink-0 items-center gap-3 rounded-lg px-3 text-sm font-medium text-sidebar-foreground hover:bg-sidebar-accent focus-visible:outline-2 focus-visible:outline-ring">
+        <NavArrowLeft className="size-5 shrink-0" aria-hidden="true" />
+        Settings
+      </button>
+      {isLoading && <p className="px-3 text-sm text-muted-foreground" role="status">Loading settings…</p>}
+      {!isLoading && items.length === 0 && <p className="px-3 text-sm text-muted-foreground" role="status">Settings navigation is unavailable.</p>}
+      {items.map((item) => (
+        <Link key={item.id} href={item.href} onClick={onNavigate}
+          data-testid={`settings-nav-${item.id}`}
+          aria-current={pathname === item.href ? "page" : undefined}
+          className={`app-sidebar-link flex min-h-10 shrink-0 items-center rounded-lg px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-ring ${pathname === item.href ? "is-active bg-sidebar-accent text-sidebar-foreground" : "text-secondary-foreground hover:bg-muted hover:text-sidebar-foreground"}`}>
+          {item.label}
+        </Link>
+      ))}
+    </nav>
+  );
+}
diff --git a/components/settings/team-settings-client.tsx b/components/settings/team-settings-client.tsx
index e97f90e5..4b906240 100644
--- a/components/settings/team-settings-client.tsx
+++ b/components/settings/team-settings-client.tsx
@@ -1,33 +1,21 @@
 "use client";
 
-import { useCallback } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { BillingSection } from "@/components/settings/billing-section";
 import { DecisionChecksSection } from "@/components/settings/decision-checks-section";
 import { useTeamSettingsActions } from "./use-team-settings-actions";
 import { MembersTabContent } from "./members-tab-content";
 import { KeysTabContent } from "./keys-tab-content";
 import { ModelsTabContent } from "./models-tab-content";
 import { AuditTabContent } from "./audit-tab-content";
-import { TEAM_TAB_SET, type TeamSettingsTab } from "./team-settings-types";
 
 export function TeamSettingsClient({
   teamId,
   teamSlug,
+  section,
 }: {
   teamId: string;
   teamSlug: string;
+  section: "members" | "keys" | "models" | "audit";
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const tabParam = searchParams?.get("tab") ?? "";
-  const activeTab: TeamSettingsTab = TEAM_TAB_SET.has(tabParam)
-    ? (tabParam as TeamSettingsTab)
-    : "members";
-
   const actions = useTeamSettingsActions(teamId);
   const {
     status,
@@ -70,25 +58,13 @@ export function TeamSettingsClient({
     saveModelAllowlist,
   } = actions;
 
-  const resolvedActiveTab =
-    activeTab === "audit" && membersData && !canManageMembers
-      ? "members"
-      : activeTab;
-
-  const handleTabChange = useCallback(
-    (value: string) => {
-      const params = new URLSearchParams(searchParams?.toString() ?? "");
-      params.set("tab", value);
-      router.replace(`${pathname}?${params.toString()}`, { scroll: false });
-    },
-    [pathname, router, searchParams]
-  );
+  const title = { members: "Members", keys: "Provider Keys", models: "Models", audit: "Audit" }[section];
 
   return (
-    <div className="min-h-full space-y-4 p-3 md:space-y-6 md:p-6">
+    <div className="min-h-full w-full max-w-[1488px] space-y-4 p-3 md:space-y-6 md:p-6">
       <div>
-        <h1 className="ui-page-title">Team Settings</h1>
-        <div className="ui-page-subtitle">Manage {membersData?.team.name ?? teamSlug}.</div>
+        <h1 className="ui-page-title">{title}</h1>
+        <div className="ui-page-subtitle">{membersData?.team.name ?? teamSlug}</div>
       </div>
 
       {status && (
@@ -97,125 +73,116 @@ export function TeamSettingsClient({
         </div>
       )}
 
-      <section className="flex items-center gap-4 border border-border/60 bg-card px-5 py-4">
-        <div
-          className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-md bg-accent text-sm font-medium text-foreground/80"
-          aria-hidden="true"
-        >
-          {membersData?.team.iconUrl ? (
-            <img
-              src={membersData.team.iconUrl}
-              alt=""
-              className="h-full w-full object-cover"
-            />
-          ) : (
-            <span>
-              {(membersData?.team.name ?? teamSlug)
-                .trim()
-                .split(/\s+/)
-                .filter(Boolean)
-                .slice(0, 2)
-                .map((part) => part[0]?.toUpperCase() ?? "")
-                .join("") || "?"}
-            </span>
-          )}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="ui-section-title">Team icon</div>
-          <div className="ui-section-caption">
-            PNG, JPG, WEBP, or GIF · up to 2 MB · square works best.
+      {section === "members" && (
+        <section className="flex flex-wrap items-center gap-4 border border-border/60 bg-card px-5 py-4">
+          <div
+            className="flex h-14 w-14 shrink-0 items-center justify-center overflow-hidden rounded-md bg-accent text-sm font-medium text-foreground/80"
+            aria-hidden="true"
+          >
+            {membersData?.team.iconUrl ? (
+              <img
+                src={membersData.team.iconUrl}
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <span>
+                {(membersData?.team.name ?? teamSlug)
+                  .trim()
+                  .split(/\s+/)
+                  .filter(Boolean)
+                  .slice(0, 2)
+                  .map((part) => part[0]?.toUpperCase() ?? "")
+                  .join("") || "?"}
+              </span>
+            )}
           </div>
-        </div>
-        {canManageIcon && (
-          <div className="flex items-center gap-2">
-            <input
-              ref={iconInputRef}
-              type="file"
-              accept="image/png,image/jpeg,image/webp,image/gif"
-              className="hidden"
-              onChange={(event) => {
-                const file = event.target.files?.[0];
-                if (file) void uploadTeamIcon(file);
-              }}
-            />
-            <button
-              type="button"
-              disabled={busyKey === "icon"}
-              onClick={() => iconInputRef.current?.click()}
-              className="border border-border px-3 py-2 text-sm text-foreground hover:bg-secondary disabled:opacity-50"
-            >
-              {busyKey === "icon"
-                ? "Uploading…"
-                : membersData?.team.iconUrl
-                  ? "Replace"
-                  : "Upload"}
-            </button>
-            {membersData?.team.iconUrl && (
+          <div className="min-w-0 flex-1">
+            <div className="ui-section-title">Team icon</div>
+            <div className="ui-section-caption">
+              PNG, JPG, WEBP, or GIF · up to 2 MB · square works best.
+            </div>
+          </div>
+          {canManageIcon && (
+            <div className="flex items-center gap-2">
+              <input
+                ref={iconInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp,image/gif"
+                className="hidden"
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  if (file) void uploadTeamIcon(file);
+                }}
+              />
               <button
                 type="button"
                 disabled={busyKey === "icon"}
-                onClick={() => void removeTeamIcon()}
-                className="border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-secondary disabled:opacity-50"
+                onClick={() => iconInputRef.current?.click()}
+                className="border border-border px-3 py-2 text-sm text-foreground hover:bg-secondary disabled:opacity-50"
               >
-                Remove
+                {busyKey === "icon"
+                  ? "Uploading…"
+                  : membersData?.team.iconUrl
+                    ? "Replace"
+                    : "Upload"}
               </button>
-            )}
-          </div>
-        )}
-      </section>
-
-      <Tabs value={resolvedActiveTab} onValueChange={handleTabChange} className="gap-4 md:gap-6">
-        <ScrollArea className="w-full">
-          <TabsList className="inline-flex h-8 w-max bg-transparent p-0 gap-1">
-            <TabsTrigger value="members" className="h-7 px-3 text-[13px]">Members</TabsTrigger>
-            <TabsTrigger value="keys" className="h-7 px-3 text-[13px]">Keys</TabsTrigger>
-            <TabsTrigger value="models" className="h-7 px-3 text-[13px]">Models</TabsTrigger>
-            {canManageMembers && <TabsTrigger value="audit" className="h-7 px-3 text-[13px]">Audit</TabsTrigger>}
-            <TabsTrigger value="billing" className="h-7 px-3 text-[13px]">Billing</TabsTrigger>
-          </TabsList>
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
+              {membersData?.team.iconUrl && (
+                <button
+                  type="button"
+                  disabled={busyKey === "icon"}
+                  onClick={() => void removeTeamIcon()}
+                  className="border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-secondary disabled:opacity-50"
+                >
+                  Remove
+                </button>
+              )}
+            </div>
+          )}
+        </section>
+      )}
 
-        <TabsContent value="members" className="mt-0">
-          <MembersTabContent
-            teamSlug={teamSlug}
-            membersData={membersData}
-            membersError={membersError}
-            canManageMembers={canManageMembers}
-            canManageIcon={canManageIcon}
-            busyKey={busyKey}
-            inviteEmail={inviteEmail}
-            setInviteEmail={setInviteEmail}
-            inviteRole={inviteRole}
-            setInviteRole={setInviteRole}
-            inviteMember={inviteMember}
-            updateMemberRole={updateMemberRole}
-            removeMember={removeMember}
-            mutateInvite={mutateInvite}
-            nextOwnerUserId={nextOwnerUserId}
-            setNextOwnerUserId={setNextOwnerUserId}
-            ownerTransferCandidates={ownerTransferCandidates}
-            transferOwnership={transferOwnership}
-            uploadTeamIcon={uploadTeamIcon}
-            removeTeamIcon={removeTeamIcon}
-            iconInputRef={iconInputRef}
-          />
-        </TabsContent>
+      {section === "members" && (
+        <MembersTabContent
+          teamSlug={teamSlug}
+          membersData={membersData}
+          membersError={membersError}
+          canManageMembers={canManageMembers}
+          canManageIcon={canManageIcon}
+          busyKey={busyKey}
+          inviteEmail={inviteEmail}
+          setInviteEmail={setInviteEmail}
+          inviteRole={inviteRole}
+          setInviteRole={setInviteRole}
+          inviteMember={inviteMember}
+          updateMemberRole={updateMemberRole}
+          removeMember={removeMember}
+          mutateInvite={mutateInvite}
+          nextOwnerUserId={nextOwnerUserId}
+          setNextOwnerUserId={setNextOwnerUserId}
+          ownerTransferCandidates={ownerTransferCandidates}
+          transferOwnership={transferOwnership}
+          uploadTeamIcon={uploadTeamIcon}
+          removeTeamIcon={removeTeamIcon}
+          iconInputRef={iconInputRef}
+        />
+      )}
 
-        <TabsContent value="keys" className="mt-0">
-          <KeysTabContent
-            keysError={keysError}
-            canManageKeys={canManageKeys}
-            busyKey={busyKey}
-            configuredProviders={configuredProviders}
-            keyInputs={keyInputs}
-            setKeyInputs={setKeyInputs}
-            saveProviderKey={saveProviderKey}
-            deleteProviderKey={deleteProviderKey}
-          />
-        </TabsContent>
+      {section === "keys" && (
+        <KeysTabContent
+          keysError={keysError}
+          canManageKeys={canManageKeys}
+          busyKey={busyKey}
+          configuredProviders={configuredProviders}
+          keyInputs={keyInputs}
+          setKeyInputs={setKeyInputs}
+          saveProviderKey={saveProviderKey}
+          deleteProviderKey={deleteProviderKey}
+        />
+      )}
 
-        <TabsContent value="models" className="mt-0">
+      {section === "models" && (
+        <div>
           <ModelsTabContent
             modelsError={modelsError}
             canManageModels={canManageModels}
@@ -233,21 +200,15 @@ export function TeamSettingsClient({
               audience="team"
             />
           </div>
-        </TabsContent>
-
-        {canManageMembers && (
-          <TabsContent value="audit" className="mt-0">
-            <AuditTabContent
-              auditData={auditData}
-              auditError={auditError}
-            />
-          </TabsContent>
-        )}
+        </div>
+      )}
 
-        <TabsContent value="billing" className="mt-0">
-          <BillingSection embedded />
-        </TabsContent>
-      </Tabs>
+      {section === "audit" && (
+        canManageMembers ? <AuditTabContent auditData={auditData} auditError={auditError} /> :
+          <p className="text-sm text-muted-foreground" role="status">
+            {membersError ? "Unable to load team permissions." : membersData ? "Only a team owner or admin can view the audit log." : "Loading team permissions…"}
+          </p>
+      )}
     </div>
   );
 }
diff --git a/components/settings/team-settings-types.ts b/components/settings/team-settings-types.ts
index 833576cb..8a652b0f 100644
--- a/components/settings/team-settings-types.ts
+++ b/components/settings/team-settings-types.ts
@@ -1,28 +1,11 @@
 import type { TeamRole } from "@/lib/team-capabilities";
 import type { Provider } from "@/lib/vault";
 
-export type TeamSettingsTab =
-  | "members"
-  | "keys"
-  | "models"
-  | "audit"
-  | "billing";
-
 export type TeamKeysResponse = {
   keys: Array<{ provider: Provider; created_at: string; updated_at: string }>;
   viewer: { role: TeamRole; canManage: boolean };
 };
 
-export const TEAM_TABS = [
-  "members",
-  "keys",
-  "models",
-  "audit",
-  "billing",
-] as const;
-
-export const TEAM_TAB_SET: ReadonlySet<string> = new Set(TEAM_TABS);
-
 export const PROVIDERS: Array<{
   id: Provider;
   label: string;
diff --git a/components/top-bar.tsx b/components/top-bar.tsx
index 0846a2a6..f5587b59 100644
--- a/components/top-bar.tsx
+++ b/components/top-bar.tsx
@@ -1,4 +1,5 @@
 "use client";
+import React from "react";
 import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
@@ -8,7 +9,7 @@ import { useUser } from "@/hooks/use-user";
 import { ScopeMenuItems } from "@/components/scope-switcher";
 import { SlackFill } from "@/components/settings/icons";
 import { ThemeSwitcher } from "@/components/theme-switcher";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/sheet";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,6 +24,8 @@ import {
   isAppNavItemActive,
   type AppNavItem,
 } from "@/lib/app-navigation";
+import { SettingsNavigation } from "@/components/settings/settings-navigation";
+import { useSettingsNavigation } from "@/hooks/use-settings-navigation";
 
 const DOCS_URL = "https://docs.mogplex.com/";
 
@@ -40,14 +43,20 @@ const fetchSlackInstallations = async (url: string) => {
 function MobileNavLink({
   item,
   pathname,
+  onClick,
+  linkRef,
 }: {
   item: AppNavItem;
   pathname: string;
+  onClick?: () => void;
+  linkRef?: React.Ref<HTMLAnchorElement>;
 }) {
   const isActive = isAppNavItemActive(pathname, item.match);
   return (
     <Link
       href={item.href}
+      ref={linkRef}
+      onClick={onClick}
       aria-current={isActive ? "page" : undefined}
       className={`border-border border-b px-4 py-3 text-sm transition-colors ${
         isActive
@@ -64,21 +73,35 @@ export function MobileSheetNav({
   primaryItems,
   adminItems,
   pathname,
+  onNavigate,
+  scope,
 }: {
   primaryItems: AppNavItem[];
   adminItems: AppNavItem[];
   pathname: string;
+  onNavigate?: () => void;
+  scope: string;
 }) {
+  const { showSettings, backToMain, openSettings, settingsLinkRef } = useSettingsNavigation(scope, pathname);
+  if (showSettings) {
+    return <SettingsNavigation onBack={backToMain} onNavigate={onNavigate} />;
+  }
   return (
-    <nav className="flex flex-col">
+    <nav className="flex flex-col" aria-label="Main navigation">
       {primaryItems.map((item) => (
-        <MobileNavLink key={item.id} item={item} pathname={pathname} />
+        <MobileNavLink key={item.id} item={item} pathname={pathname} onClick={onNavigate} />
       ))}
       {adminItems.length > 0 && (
         <>
           <div className="border-border mt-6 border-t" aria-hidden="true" />
           {adminItems.map((item) => (
-            <MobileNavLink key={item.id} item={item} pathname={pathname} />
+            <MobileNavLink
+              key={item.id}
+              item={item}
+              pathname={pathname}
+              onClick={item.id === "settings" ? openSettings : onNavigate}
+              linkRef={item.id === "settings" ? settingsLinkRef : undefined}
+            />
           ))}
         </>
       )}
@@ -128,19 +151,24 @@ export function TopBar() {
         }
       : null);
 
+  const [navigationOpen, setNavigationOpen] = useState(false);
+
   return (
     <div className="app-topbar flex items-center justify-end gap-2 bg-transparent">
-      <Sheet>
+      <Sheet open={navigationOpen} onOpenChange={setNavigationOpen}>
         <SheetTrigger asChild>
-          <button className="border-border bg-card text-muted-foreground hover:bg-accent hover:text-foreground rounded-lg border px-2 py-1 font-mono text-[10px] tracking-[0.12em] uppercase lg:hidden">
+          <button aria-label="Open navigation" className="border-border bg-card text-muted-foreground hover:bg-accent hover:text-foreground rounded-lg border px-2 py-1 font-mono text-[10px] tracking-[0.12em] uppercase lg:hidden">
             |||
           </button>
         </SheetTrigger>
-        <SheetContent side="left" className="w-56 p-0 pt-12">
+        <SheetContent side="left" className="w-64 overflow-y-auto p-0 pt-12">
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
           <MobileSheetNav
+            scope={scope}
             primaryItems={primaryItems}
             adminItems={adminItems}
             pathname={pathname}
+            onNavigate={() => setNavigationOpen(false)}
           />
         </SheetContent>
       </Sheet>
diff --git a/hooks/use-settings-navigation.ts b/hooks/use-settings-navigation.ts
new file mode 100644
index 00000000..d1fff8f2
--- /dev/null
+++ b/hooks/use-settings-navigation.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { scopedHref } from "@/lib/scoped-href";
+
+export function useSettingsNavigation(scope: string, pathname: string) {
+  const [menu, setMenu] = useState({ pathname, dismissed: false });
+  const settingsLinkRef = useRef<HTMLAnchorElement>(null);
+  const settingsPath = scopedHref(scope, "/settings");
+  const inSettings =
+    pathname === settingsPath || pathname.startsWith(`${settingsPath}/`);
+
+  // Back only changes the current menu. A new route starts fresh.
+  if (menu.pathname !== pathname) {
+    setMenu({ pathname, dismissed: false });
+  }
+  const dismissed = menu.pathname === pathname && menu.dismissed;
+
+  useEffect(() => {
+    if (dismissed) settingsLinkRef.current?.focus();
+  }, [dismissed]);
+
+  return {
+    showSettings: inSettings && !dismissed,
+    settingsLinkRef,
+    backToMain: () => setMenu({ pathname, dismissed: true }),
+    openSettings: () => setMenu({ pathname, dismissed: false }),
+  };
+}
diff --git a/lib/settings-navigation.test.ts b/lib/settings-navigation.test.ts
new file mode 100644
index 00000000..406c7fb7
--- /dev/null
+++ b/lib/settings-navigation.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { buildSettingsNavItems } from "./settings-navigation";
+
+describe("Settings navigation", () => {
+  it("gives each personal section a scoped page", () => {
+    expect(
+      buildSettingsNavItems("alex", "personal").map((item) => item.href)
+    ).toEqual([
+      "/alex/settings/account",
+      "/alex/settings/teams",
+      "/alex/settings/keys",
+      "/alex/settings/mogplex-keys",
+      "/alex/settings/mcp",
+      "/alex/settings/billing",
+    ]);
+  });
+  it("keeps personal settings out of team navigation and hides audit from members", () => {
+    expect(
+      buildSettingsNavItems("acme", "team").map((item) => item.id)
+    ).toEqual(["members", "keys", "models", "billing"]);
+    expect(
+      buildSettingsNavItems("acme", "team", true).map((item) => item.id)
+    ).toEqual(["members", "keys", "models", "audit", "billing"]);
+  });
+});
diff --git a/lib/settings-navigation.ts b/lib/settings-navigation.ts
new file mode 100644
index 00000000..8e4d58d0
--- /dev/null
+++ b/lib/settings-navigation.ts
@@ -0,0 +1,35 @@
+import { scopedHref } from "./scoped-href";
+
+export const PERSONAL_SETTINGS = [
+  { id: "account", label: "Account" },
+  { id: "teams", label: "Teams" },
+  { id: "keys", label: "Provider Keys" },
+  { id: "mogplex-keys", label: "Mogplex Keys" },
+  { id: "mcp", label: "MCP Servers" },
+  { id: "billing", label: "Billing" },
+] as const;
+
+export const TEAM_SETTINGS = [
+  { id: "members", label: "Members" },
+  { id: "keys", label: "Provider Keys" },
+  { id: "models", label: "Models" },
+  { id: "audit", label: "Audit" },
+  { id: "billing", label: "Billing" },
+] as const;
+
+export type SettingsSection =
+  | (typeof PERSONAL_SETTINGS)[number]["id"]
+  | (typeof TEAM_SETTINGS)[number]["id"];
+
+export function buildSettingsNavItems(
+  slug: string,
+  kind: "personal" | "team",
+  canManageTeam = false
+) {
+  return (kind === "team" ? TEAM_SETTINGS : PERSONAL_SETTINGS)
+    .filter((item) => item.id !== "audit" || canManageTeam)
+    .map((item) => ({
+      ...item,
+      href: scopedHref(slug, `/settings/${item.id}`),
+    }));
+}
diff --git a/lib/settings-redirect.test.ts b/lib/settings-redirect.test.ts
index af4f2220..27a9221b 100644
--- a/lib/settings-redirect.test.ts
+++ b/lib/settings-redirect.test.ts
@@ -41,21 +41,49 @@ describe("legacy Settings destinations", () => {
     ).toBe("/alex/connections?slack=error&reason=denied");
   });
 
-  it("keeps personal Models and Agents redirects and leaves Team Models in Settings", () => {
+  it("keeps Models and Agents redirects and routes Team Models to its own Settings page", () => {
     expect(getLegacySettingsDestination(personal, "tab=models")).toBe(
       "/alex/models/catalog"
     );
     expect(getLegacySettingsDestination(personal, "", "#agents")).toBe(
       "/alex/agents/roster"
     );
-    expect(getLegacySettingsDestination(team, "tab=models")).toBeNull();
-    expect(getLegacySettingsDestination(team, "", "#models")).toBeNull();
+    expect(getLegacySettingsDestination(team, "tab=models")).toBe(
+      "/acme/settings/models"
+    );
+    expect(getLegacySettingsDestination(team, "", "#models")).toBe(
+      "/acme/settings/models"
+    );
   });
 
-  it.each(["", "tab=account", "tab=billing", "tab=unknown", "tab=constructor"])(
-    "leaves ordinary Settings alone: %s",
-    (query) => {
-      expect(getLegacySettingsDestination(personal, query)).toBeNull();
-    }
-  );
+  it.each([
+    ["", "/alex/settings/account"],
+    ["tab=account", "/alex/settings/account"],
+    ["tab=billing&billing=topup", "/alex/settings/billing?billing=topup"],
+    ["tab=keys&sub=cli", "/alex/settings/mogplex-keys"],
+    ["tab=keys&sub=api", "/alex/settings/keys"],
+    ["tab=teams", "/alex/settings/teams"],
+    ["tab=unknown", "/alex/settings/account"],
+    ["tab=constructor", "/alex/settings/account"],
+  ])("redirects retired tabs: %s", (query, expected) => {
+    expect(getLegacySettingsDestination(personal, query)).toBe(expected);
+  });
+
+  it("keeps team settings scoped and handles hashes", () => {
+    expect(getLegacySettingsDestination(team, "")).toBe(
+      "/acme/settings/members"
+    );
+    expect(getLegacySettingsDestination(team, "tab=keys&sub=cli")).toBe(
+      "/acme/settings/keys"
+    );
+    expect(getLegacySettingsDestination(team, "", "#audit")).toBe(
+      "/acme/settings/audit"
+    );
+    expect(getLegacySettingsDestination(personal, "keep=1", "#keys")).toBe(
+      "/alex/settings/keys?keep=1"
+    );
+    expect(getLegacySettingsDestination(personal, "billing=topup")).toBe(
+      "/alex/settings/billing?billing=topup"
+    );
+  });
 });
diff --git a/lib/settings-redirect.ts b/lib/settings-redirect.ts
index 61a278bf..aa3415a0 100644
--- a/lib/settings-redirect.ts
+++ b/lib/settings-redirect.ts
@@ -1,5 +1,6 @@
 import type { ScopeContext } from "./scope-context";
 import { scopedHref } from "./scoped-href";
+import { PERSONAL_SETTINGS, TEAM_SETTINGS } from "./settings-navigation";
 
 const MOVED_PERSONAL_TABS = new Map([
   ["models", "/models/catalog"],
@@ -11,17 +12,26 @@ export function getLegacySettingsDestination(
   scope: ScopeContext,
   query: string,
   hash = ""
-): string | null {
+): string {
   const params = new URLSearchParams(query);
   const tab = params.get("tab") || hash.replace(/^#/, "");
   const isConnectionReturn = params.has("oauth") || params.has("slack");
-  const path =
-    tab === "connections" || isConnectionReturn
-      ? "/connections"
-      : scope.kind === "personal"
-        ? MOVED_PERSONAL_TABS.get(tab)
-        : undefined;
-  if (!path) return null;
+  const sections = scope.kind === "team" ? TEAM_SETTINGS : PERSONAL_SETTINGS;
+  const section = sections.find((item) => item.id === tab)?.id;
+  let path = `/settings/${section ?? (scope.kind === "team" ? "members" : "account")}`;
+  if (tab === "connections" || isConnectionReturn) {
+    path = "/connections";
+  } else if (scope.kind === "personal" && MOVED_PERSONAL_TABS.has(tab)) {
+    path = MOVED_PERSONAL_TABS.get(tab)!;
+  } else if (
+    scope.kind === "personal" &&
+    tab === "keys" &&
+    params.get("sub") === "cli"
+  ) {
+    path = "/settings/mogplex-keys";
+  } else if (!tab && params.has("billing")) {
+    path = "/settings/billing";
+  }
   params.delete("tab");
   params.delete("sub");
   const remaining = params.toString();
diff --git a/tests/e2e/billing-settings.spec.ts b/tests/e2e/billing-settings.spec.ts
index 0e3750e4..fe739149 100644
--- a/tests/e2e/billing-settings.spec.ts
+++ b/tests/e2e/billing-settings.spec.ts
@@ -166,7 +166,11 @@ test("personal Billing shows capacity and reviews an add-on change", async ({
   expect(headings.slice(0, 2)).toEqual(["Plus", "Add inference credit"]);
   await expect(page.getByText("7 of 35")).toHaveCount(0);
   await expect(page.getByText("2.3 GB of 5 GB")).toHaveCount(0);
+  await page.getByRole("tab", { name: "Usage", exact: true }).click();
   await expect(page.getByText(/Code review .*#285/)).toBeVisible();
+  await page
+    .getByRole("tab", { name: "Billing Settings", exact: true })
+    .click();
 
   const inferenceCheckout = page.waitForRequest(
     "**/api/billing/hosted-usage/checkout"
@@ -174,6 +178,7 @@ test("personal Billing shows capacity and reviews an add-on change", async ({
   await page.getByRole("button", { name: "Pay $10, get $10 credit" }).click();
   expect((await inferenceCheckout).postDataJSON()).toMatchObject({
     preset: "capacity_v2_hosted_usage_credit_10",
+    returnPath: scopedPath("settings/billing"),
   });
   await expect(
     page.getByText("Payment submitted. Stripe will add the full credit amount.")
diff --git a/tests/e2e/connections-route.spec.ts b/tests/e2e/connections-route.spec.ts
index 9be5c33f..878c8a90 100644
--- a/tests/e2e/connections-route.spec.ts
+++ b/tests/e2e/connections-route.spec.ts
@@ -25,6 +25,7 @@ test("Connections has its own navigation destination outside Settings", async ({
   await expect(
     page.getByRole("tab", { name: "Connections", exact: true })
   ).toHaveCount(0);
+  await page.getByRole("button", { name: "Back to main navigation" }).click();
   await page.getByTestId("app-nav-connections").click();
   await expect(page).toHaveURL(scopedPath("connections"));
   await expect(
diff --git a/tests/e2e/helpers/billing-settings-fixtures.ts b/tests/e2e/helpers/billing-settings-fixtures.ts
index c4a513b0..faceebd3 100644
--- a/tests/e2e/helpers/billing-settings-fixtures.ts
+++ b/tests/e2e/helpers/billing-settings-fixtures.ts
@@ -10,6 +10,9 @@ export async function fulfillJson(route: Route, data: unknown, status = 200) {
 }
 
 export async function mockSettingsShell(page: Page) {
+  await page.route("**/api/settings/decision-checks", (route) =>
+    fulfillJson(route, { enabled: true, viewer: { canManage: true } })
+  );
   await page.route("**/api/auth/user", (route) =>
     fulfillJson(route, {
       user: {
diff --git a/tests/e2e/mcp-servers-settings.spec.ts b/tests/e2e/mcp-servers-settings.spec.ts
index 736e660b..7c6d6bee 100644
--- a/tests/e2e/mcp-servers-settings.spec.ts
+++ b/tests/e2e/mcp-servers-settings.spec.ts
@@ -1,4 +1,5 @@
-import { expect, test, type Route } from "@playwright/test";
+import type { Route } from "@playwright/test";
+import { expect, test } from "./helpers/run-checks-fixtures";
 import { enableScopedE2EAuth, scopedPath } from "./helpers/auth";
 
 type MockServer = {
diff --git a/tests/e2e/run-checks-team-settings.spec.ts b/tests/e2e/run-checks-team-settings.spec.ts
index d6ff7e45..9386dab5 100644
--- a/tests/e2e/run-checks-team-settings.spec.ts
+++ b/tests/e2e/run-checks-team-settings.spec.ts
@@ -24,8 +24,11 @@ for (const role of ["owner", "admin"] as const) {
     });
 
     await page.goto(TEAM_SETTINGS_PATH);
-    await page.getByRole("tab", { name: "Models", exact: true }).click();
-    await expect(page).toHaveURL(`${TEAM_SETTINGS_PATH}?tab=models`);
+    await page
+      .getByRole("navigation", { name: "Settings", exact: true })
+      .getByRole("link", { name: "Models", exact: true })
+      .click();
+    await expect(page).toHaveURL(`${TEAM_SETTINGS_PATH}/models`);
     const toggle = page.getByRole("switch", { name: "Run checks" });
     await expect(toggle).toBeChecked();
     await expect(toggle).toBeEnabled();
diff --git a/tests/e2e/settings-navigation.spec.ts b/tests/e2e/settings-navigation.spec.ts
new file mode 100644
index 00000000..cac48b43
--- /dev/null
+++ b/tests/e2e/settings-navigation.spec.ts
@@ -0,0 +1,260 @@
+import {
+  test,
+  expect,
+  fulfillJson,
+  mockTeamSettings,
+  TEAM_SETTINGS_PATH,
+} from "./helpers/run-checks-fixtures";
+import { enableScopedE2EAuth, scopedPath } from "./helpers/auth";
+import { capacitySummary } from "./helpers/billing";
+
+test.beforeEach(async ({ page }) => {
+  await enableScopedE2EAuth(page);
+  await page.route("**/api/settings/decision-checks", (route) =>
+    fulfillJson(route, { enabled: true, viewer: { canManage: true } })
+  );
+  await page.route("**/api/settings/keys", (route) =>
+    fulfillJson(route, { keys: [] })
+  );
+  await page.route("**/api/settings/api-keys", (route) =>
+    fulfillJson(route, { keys: [] })
+  );
+  await page.route("**/api/mcp-servers", (route) =>
+    fulfillJson(route, { servers: [] })
+  );
+});
+
+test("Settings drills into page navigation and back restores the main menu", async ({
+  page,
+}) => {
+  await page.goto(scopedPath("settings/account"));
+  const nav = page.getByRole("navigation", { name: "Settings", exact: true });
+  await expect(nav).toBeVisible();
+  await expect(page.getByRole("tab")).toHaveCount(0);
+  await page.getByRole("button", { name: "Back to main navigation" }).click();
+  await expect(page.getByTestId("app-nav-connections")).toBeVisible();
+  await expect(page).toHaveURL(scopedPath("settings/account"));
+  await page.getByTestId("app-nav-settings").click();
+  await expect(nav).toBeVisible();
+  for (const [label, route] of [
+    ["Teams", "teams"],
+    ["Provider Keys", "keys"],
+    ["Mogplex Keys", "mogplex-keys"],
+    ["MCP Servers", "mcp"],
+    ["Account", "account"],
+  ]) {
+    await nav.getByRole("link", { name: label, exact: true }).click();
+    await expect(page).toHaveURL(scopedPath(`settings/${route}`));
+    await expect(
+      page.getByRole("heading", { name: label, exact: true }).first()
+    ).toBeVisible();
+    await expect(
+      nav.getByRole("link", { name: label, exact: true })
+    ).toHaveAttribute("aria-current", "page");
+    await expect(page.getByRole("tab")).toHaveCount(0);
+  }
+  await page.reload();
+  await expect(
+    nav.getByRole("link", { name: "Account", exact: true })
+  ).toHaveAttribute("aria-current", "page");
+});
+
+test("Billing has separate settings and usage, with history and reload support", async ({
+  page,
+}) => {
+  const summary = capacitySummary();
+  summary.recentCosts = [
+    {
+      operationId: "usage-1",
+      description: "Repository review",
+      status: "settled",
+      occurredAt: "2026-09-22T12:00:00Z",
+      totalCents: 125,
+      items: [],
+    },
+  ];
+  await page.route("**/api/billing/capacity", (route) =>
+    fulfillJson(route, summary)
+  );
+  await page.goto(scopedPath("settings/billing"));
+  await expect(
+    page.getByRole("tab", { name: "Billing Settings", exact: true })
+  ).toHaveAttribute("aria-selected", "true");
+  await expect(
+    page.getByRole("heading", { name: "Add inference credit" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Recent usage costs" })
+  ).toHaveCount(0);
+  await page.getByRole("tab", { name: "Usage", exact: true }).click();
+  await expect(page).toHaveURL(scopedPath("settings/billing?tab=usage"));
+  await expect(
+    page.getByText("Repository review", { exact: true })
+  ).toBeVisible();
+  await expect(page.getByText("$1.25", { exact: true })).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Add inference credit" })
+  ).toHaveCount(0);
+  await page.reload();
+  await expect(
+    page.getByRole("tab", { name: "Usage", exact: true })
+  ).toHaveAttribute("aria-selected", "true");
+  await page.goBack();
+  await expect(
+    page.getByRole("tab", { name: "Billing Settings", exact: true })
+  ).toHaveAttribute("aria-selected", "true");
+  await page.goForward();
+  await expect(
+    page.getByText("Repository review", { exact: true })
+  ).toBeVisible();
+});
+
+test("mobile Settings navigation opens, selects a page and closes", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.route("**/api/billing/capacity", (route) =>
+    fulfillJson(route, { ...capacitySummary(), recentCosts: [] })
+  );
+  await page.goto(scopedPath("settings/account"));
+  await page.getByRole("button", { name: "Open navigation" }).click();
+  const dialog = page.getByRole("dialog", { name: "Navigation" });
+  await dialog.getByRole("button", { name: "Back to main navigation" }).click();
+  await expect(
+    dialog.getByRole("link", { name: "Settings", exact: true })
+  ).toBeFocused();
+  await dialog.getByRole("link", { name: "Settings", exact: true }).click();
+  await dialog.getByRole("link", { name: "Billing", exact: true }).click();
+  await expect(dialog).not.toBeVisible();
+  await expect(page).toHaveURL(scopedPath("settings/billing"));
+  await page.getByRole("tab", { name: "Usage", exact: true }).click();
+  await expect(page.getByText("No usage costs yet.")).toBeVisible();
+  expect(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= window.innerWidth
+    )
+  ).toBe(true);
+  await page.getByRole("button", { name: "Open navigation" }).click();
+  await expect(
+    page
+      .getByRole("dialog", { name: "Navigation" })
+      .getByRole("link", { name: "Billing", exact: true })
+  ).toBeVisible();
+});
+
+test("team Settings has team pages and limits Audit access", async ({
+  page,
+}) => {
+  await mockTeamSettings(page, "viewer");
+  await page.goto(TEAM_SETTINGS_PATH);
+  await expect(page).toHaveURL(`${TEAM_SETTINGS_PATH}/members`);
+  const nav = page.getByRole("navigation", { name: "Settings", exact: true });
+  await expect(
+    nav.getByRole("link", { name: "Members", exact: true })
+  ).toBeVisible();
+  await expect(
+    nav.getByRole("link", { name: "Account", exact: true })
+  ).toHaveCount(0);
+  await expect(
+    nav.getByRole("link", { name: "Audit", exact: true })
+  ).toHaveCount(0);
+  await expect(page.getByRole("tab")).toHaveCount(0);
+  await page.goto(`${TEAM_SETTINGS_PATH}/audit`);
+  await expect(
+    page.getByText("Only a team owner or admin can view the audit log.")
+  ).toBeVisible();
+});
+
+test("old key links open the right page and preserve unrelated query values", async ({
+  page,
+}) => {
+  await page.goto(scopedPath("settings?tab=keys&sub=cli&keep=1"));
+  await expect(page).toHaveURL(scopedPath("settings/mogplex-keys?keep=1"));
+  await expect(
+    page.getByRole("heading", { name: "Mogplex Keys", exact: true })
+  ).toBeVisible();
+  await page.goto(scopedPath("settings#teams"));
+  await expect(page).toHaveURL(scopedPath("settings/teams"));
+});
+
+test("Settings expands a compact sidebar and preserves the main menu width", async ({
+  page,
+}) => {
+  await page.addInitScript(() => {
+    localStorage.setItem("mogplex.appSidebar.width", "64");
+    localStorage.setItem("mogplex.appSidebar.collapsed", "true");
+    localStorage.setItem("mogplex-theme", "dark");
+  });
+  await page.emulateMedia({ colorScheme: "dark" });
+  await page.route(/\/api\/settings(?:\?.*)?$/, (route) =>
+    fulfillJson(route, { theme: "dark" })
+  );
+  await page.goto(scopedPath("settings/billing"));
+  const sidebar = page.getByTestId("app-sidebar");
+  await expect(sidebar).toHaveAttribute("data-compact", "false");
+  await expect(page.getByTestId("settings-nav-billing")).toBeVisible();
+  await page
+    .getByRole("button", { name: "Back to main navigation" })
+    .press("Enter");
+  await expect(sidebar).toHaveAttribute("data-compact", "true");
+  await page.getByTestId("app-nav-settings").press("Enter");
+  await expect(sidebar).toHaveAttribute("data-compact", "false");
+  await expect(page.getByTestId("settings-nav-account")).toHaveAttribute(
+    "aria-current",
+    "page"
+  );
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true })
+  ).toBeVisible();
+  await expect(page.getByRole("switch", { name: "Run checks" })).toBeEnabled();
+});
+
+test("team owners can open Keys and Audit as pages", async ({ page }) => {
+  await mockTeamSettings(page, "owner");
+  await page.goto(`${TEAM_SETTINGS_PATH}/members`);
+  const nav = page.getByRole("navigation", { name: "Settings", exact: true });
+  await nav.getByRole("link", { name: "Provider Keys", exact: true }).click();
+  await expect(page).toHaveURL(`${TEAM_SETTINGS_PATH}/keys`);
+  await expect(
+    page.getByRole("heading", { name: "Provider Keys", exact: true })
+  ).toBeVisible();
+  await nav.getByRole("link", { name: "Audit", exact: true }).click();
+  await expect(page).toHaveURL(`${TEAM_SETTINGS_PATH}/audit`);
+  await expect(
+    page.getByRole("heading", { name: "Audit", exact: true })
+  ).toBeVisible();
+  await expect(page.getByRole("tab")).toHaveCount(0);
+  await page.reload();
+  await expect(
+    nav.getByRole("link", { name: "Audit", exact: true })
+  ).toHaveAttribute("aria-current", "page");
+});
+
+test("Back restores focus and reentering Billing opens its Settings menu", async ({
+  page,
+}) => {
+  await page.route("**/api/skills/catalog", (route) =>
+    fulfillJson(route, { skills: [] })
+  );
+  await page.route("**/api/observability/calls**", (route) =>
+    fulfillJson(route, { calls: [] })
+  );
+  await page.goto(scopedPath("settings/billing"));
+  await page
+    .getByRole("button", { name: "Back to main navigation" })
+    .press("Enter");
+  await expect(page.getByTestId("app-nav-settings")).toBeFocused();
+  await page.getByTestId("app-nav-connections").click();
+  await expect(page).toHaveURL(scopedPath("connections"));
+  await page.getByRole("link", { name: "Manage billing", exact: true }).click();
+  await expect(
+    page.getByRole("navigation", { name: "Settings", exact: true })
+  ).toBeVisible();
+  await expect(page.getByTestId("settings-nav-billing")).toHaveAttribute(
+    "aria-current",
+    "page"
+  );
+  await expect(
+    page.getByRole("separator", { name: "Resize app navigation" })
+  ).toHaveCount(0);
+});
diff --git a/tests/e2e/theme-settings-github.spec.ts b/tests/e2e/theme-settings-github.spec.ts
index 601ea54f..a1ffb4fc 100644
--- a/tests/e2e/theme-settings-github.spec.ts
+++ b/tests/e2e/theme-settings-github.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./helpers/run-checks-fixtures";
 import { enableScopedE2EAuth, scopedPath } from "./helpers/auth";
 import {
   connectedUser,
@@ -234,6 +234,8 @@ test("settings surfaces settings preference load failures without crashing", asy
   await expect(
     page.getByText("Unable to load settings preferences")
   ).toBeVisible();
-  await expect(page.getByRole("heading", { name: "Settings" })).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Account", exact: true })
+  ).toBeVisible();
   expect(pageErrors).toEqual([]);
 });
diff --git a/tests/e2e/theme-settings-theme.spec.ts b/tests/e2e/theme-settings-theme.spec.ts
index 91802016..03219fb7 100644
--- a/tests/e2e/theme-settings-theme.spec.ts
+++ b/tests/e2e/theme-settings-theme.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test } from "./helpers/run-checks-fixtures";
 import { enableScopedE2EAuth, scopedPath } from "./helpers/auth";
 import {
   connectedUser,
@@ -13,6 +13,13 @@ import {
 } from "./helpers/theme-settings-fixtures";
 import type { TestThemePreference } from "./helpers/theme-settings-fixtures";
 
+test.beforeEach(async ({ page }) => {
+  await page.route("**/api/realtime/events**", (route) =>
+    route.fulfill({ status: 204 })
+  );
+  await page.route("**/api/github/repos", (route) => fulfillJson(route, []));
+});
+
 test("theme preference persists from user menu into spaces without UI regressions", async ({
   page,
 }) => {
diff --git a/tests/unit/top-bar-mobile-nav.test.ts b/tests/unit/top-bar-mobile-nav.test.ts
index 3e8569dd..bd06b8f2 100644
--- a/tests/unit/top-bar-mobile-nav.test.ts
+++ b/tests/unit/top-bar-mobile-nav.test.ts
@@ -13,9 +13,10 @@ test("mobile sheet nav renders admin items after a divider and marks the active
   const items = buildAppNavItems("acme");
   const html = renderToStaticMarkup(
     createElement(MobileSheetNav, {
+      scope: "acme",
       primaryItems: items.filter((item) => item.section === "primary"),
       adminItems: items.filter((item) => item.section === "admin"),
-      pathname: "/acme/settings",
+      pathname: "/acme/control",
     })
   );
 
@@ -26,7 +27,8 @@ test("mobile sheet nav renders admin items after a divider and marks the active
   assert.ok(dividerIndex !== -1, "divider is rendered between the groups");
   assert.ok(settingsIndex > dividerIndex, "settings renders after the divider");
   assert.ok(settingsAnchor);
-  assert.ok(settingsAnchor.includes('aria-current="page"'));
+  assert.ok(!settingsAnchor.includes('aria-current="page"'));
+  assert.ok(findAnchor(html, "/acme/control")?.includes('aria-current="page"'));
   assert.equal(html.match(/aria-current="page"/g)?.length, 1);
 });
 
@@ -36,6 +38,7 @@ test("mobile sheet nav omits the divider when the admin group is empty", async (
   const items = buildAppNavItems("acme");
   const html = renderToStaticMarkup(
     createElement(MobileSheetNav, {
+      scope: "acme",
       primaryItems: items.filter((item) => item.section === "primary"),
       adminItems: [],
       pathname: "/acme/control",