diff --git a/js/web/src/routes/settings.tsx b/js/web/src/routes/settings.tsx
index 7b0182cb..b7a1d67a 100644
--- a/js/web/src/routes/settings.tsx
+++ b/js/web/src/routes/settings.tsx
@@ -1,13 +1,58 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
+import { Globe, Info, Lock, Shield, User2, Video } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+const NAV_ITEMS = [
+  { to: "/settings/account", icon: User2, labelKey: "account" },
+  { to: "/settings/streaming", icon: Video, labelKey: "streaming" },
+  { to: "/settings/privacy", icon: Shield, labelKey: "privacy-security" },
+  { to: "/settings/languages", icon: Globe, labelKey: "languages" },
+  { to: "/settings/advanced", icon: Lock, labelKey: "advanced" },
+  { to: "/settings/about", icon: Info, labelKey: "about" },
+] as const;
 
 export const Route = createFileRoute("/settings")({
   component: SettingsLayout,
 });
 
 function SettingsLayout() {
+  const { t } = useTranslation("settings");
+
   return (
-    <div className="w-full max-w-md self-center px-6 py-10">
-      <Outlet />
+    <div className="flex flex-col md:flex-row gap-6 md:gap-8 px-6 py-10">
+      <h2 className="text-2xl md:hidden font-semibold tracking-tight ml-2">
+        {t("settings-title")}
+      </h2>
+
+      <nav className="flex flex-row md:flex-col gap-0.5 shrink-0 md:w-40 md:sticky md:top-6 md:self-start">
+        <p className="hidden md:block text-2xl font-semibold px-2 pb-3">
+          {t("settings-title")}
+        </p>
+        {NAV_ITEMS.map(({ to, icon: Icon, labelKey }) => (
+          <Link
+            key={to}
+            to={to}
+            className={cn(
+              "flex items-center gap-2",
+              "text-sm px-3 py-1.5 md:rounded-md transition-colors -mr-0.5 md:mr-0",
+              "text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-bg-elevated)]",
+              "[&.active]:text-[var(--color-fg)] [&.active]:font-medium",
+              "md:[&.active]:bg-[var(--color-bg-elevated)]",
+              "border-b [&.active]:border-b-[var(--color-fg)]",
+              "md:border-b-0 md:[&.active]:border-0",
+            )}
+          >
+            <Icon className="size-4 hidden md:block" />
+            {t(labelKey)}
+          </Link>
+        ))}
+        <div className="md:hidden flex-1 border-b border-[var(--color-border)] self-end" />
+      </nav>
+
+      <div className="flex-1 min-w-0">
+        <Outlet />
+      </div>
     </div>
   );
 }
diff --git a/js/web/src/routes/settings/about.tsx b/js/web/src/routes/settings/about.tsx
index 2d4e95fa..4d213d98 100644
--- a/js/web/src/routes/settings/about.tsx
+++ b/js/web/src/routes/settings/about.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { CardMenuSection } from "@/components/ui/card";
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
@@ -32,7 +31,6 @@ function AboutSettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
       <h1 className="text-xl font-semibold">{t("about")}</h1>
 
       <CardMenuSection>
diff --git a/js/web/src/routes/settings/account.tsx b/js/web/src/routes/settings/account.tsx
index 761cf5f0..262fa810 100644
--- a/js/web/src/routes/settings/account.tsx
+++ b/js/web/src/routes/settings/account.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { CardMenuSection } from "@/components/ui/card";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { LogOut } from "lucide-react";
@@ -19,7 +18,6 @@ function AccountSettings() {
   if (state.status !== "authenticated" || !userProfile) {
     return (
       <div className="space-y-6">
-        <BackLink to="/settings" label={t("settings-title")} />
         <div className="text-sm text-[var(--color-fg-muted)]">
           Please log in to access this page.
         </div>
@@ -29,8 +27,6 @@ function AccountSettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
-
       {/* Profile header */}
       <div className="flex flex-col items-center gap-3 py-4">
         {userProfile.avatar && (
diff --git a/js/web/src/routes/settings/advanced.tsx b/js/web/src/routes/settings/advanced.tsx
index 49e755b4..dc2adee9 100644
--- a/js/web/src/routes/settings/advanced.tsx
+++ b/js/web/src/routes/settings/advanced.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Card, CardRow } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { createFileRoute } from "@tanstack/react-router";
@@ -41,7 +40,6 @@ function AdvancedSettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
       <h1 className="text-xl font-semibold">{t("advanced")}</h1>
 
       <Card>
diff --git a/js/web/src/routes/settings/backup.tsx b/js/web/src/routes/settings/backup.tsx
index 4411aea5..0d75fbb1 100644
--- a/js/web/src/routes/settings/backup.tsx
+++ b/js/web/src/routes/settings/backup.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -165,8 +164,6 @@ function BackupSettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings/streaming" label={t("streaming")} />
-
       <h1 className="text-xl font-semibold">{t("backup")}</h1>
 
       {loading ? (
diff --git a/js/web/src/routes/settings/badge-issuer.tsx b/js/web/src/routes/settings/badge-issuer.tsx
index d7e3a0d9..001d18af 100644
--- a/js/web/src/routes/settings/badge-issuer.tsx
+++ b/js/web/src/routes/settings/badge-issuer.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { createFileRoute } from "@tanstack/react-router";
@@ -346,8 +345,6 @@ function BadgeIssuerPanel() {
   // Main view
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
-
       <p className="text-sm text-[var(--color-fg-muted)]">
         {t("issue-badges-manage-description")}
       </p>
diff --git a/js/web/src/routes/settings/badges.tsx b/js/web/src/routes/settings/badges.tsx
index 08d2f9b4..fad6892f 100644
--- a/js/web/src/routes/settings/badges.tsx
+++ b/js/web/src/routes/settings/badges.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { createFileRoute } from "@tanstack/react-router";
 import { Check } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -162,8 +161,6 @@ function BadgeSelectionManager() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings/account" label={t("account")} />
-
       <h1 className="text-xl font-semibold">{t("badges")}</h1>
 
       {loading ? (
diff --git a/js/web/src/routes/settings/branding.tsx b/js/web/src/routes/settings/branding.tsx
index 466f6dd3..130eb1e9 100644
--- a/js/web/src/routes/settings/branding.tsx
+++ b/js/web/src/routes/settings/branding.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { createFileRoute } from "@tanstack/react-router";
@@ -153,8 +152,6 @@ function BrandingAdmin() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
-
       <div>
         <h1 className="text-xl font-semibold">{t("branding-admin")}</h1>
         <p className="text-sm text-[var(--color-fg-muted)] mt-1">
diff --git a/js/web/src/routes/settings/index.tsx b/js/web/src/routes/settings/index.tsx
index 23a2fddd..5ee24e02 100644
--- a/js/web/src/routes/settings/index.tsx
+++ b/js/web/src/routes/settings/index.tsx
@@ -1,132 +1,5 @@
-import { CardMenuSection } from "@/components/ui/card";
-import { createFileRoute, Link } from "@tanstack/react-router";
-import { Globe, Info, Lock, Shield, User2, Video } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { EMPTY_LOGIN_SEARCH } from "../../lib/login-search";
-import { useSession } from "../../lib/session";
+import { createFileRoute, Navigate } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/settings/")({
-  component: SettingsIndex,
+  component: () => <Navigate to="/settings/account" />,
 });
-
-interface CategoryLinkProps {
-  to: string;
-  icon: React.ComponentType<{ size?: number; className?: string }>;
-  label: string;
-}
-
-function CategoryLink({ to, icon: Icon, label }: CategoryLinkProps) {
-  return (
-    <Link
-      to={to}
-      className="flex items-center justify-between px-3 py-2.5 hover:bg-[var(--color-bg)] transition-colors group"
-    >
-      <div className="flex items-center gap-3">
-        <Icon size={20} className="text-[var(--color-fg-muted)]" />
-        <span className="text">{label}</span>
-      </div>
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        className="text-[var(--color-fg-muted)] opacity-0 group-hover:opacity-100 transition-opacity"
-      >
-        <path
-          d="M6 3l5 5-5 5"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    </Link>
-  );
-}
-
-function SettingsIndex() {
-  const { t } = useTranslation("settings");
-  const { state, signOut } = useSession();
-  const isLoggedIn = state.status === "authenticated";
-
-  return (
-    <div className="space-y-8">
-      <header className="space-y-1">
-        <h1 className="text-2xl font-semibold">{t("settings-title")}</h1>
-      </header>
-
-      {/* Account status */}
-      <CardMenuSection>
-        <div className="px-3 py-2.5 flex items-center justify-between">
-          <div className="text-sm">
-            {state.status === "authenticated" ? (
-              <>
-                Signed in as{" "}
-                <span className="font-mono">{state.session.did}</span>
-              </>
-            ) : state.status === "loading" ? (
-              <span className="text-[var(--color-fg-muted)]">Checking…</span>
-            ) : (
-              <span className="text-[var(--color-fg-muted)]">
-                Not signed in
-              </span>
-            )}
-          </div>
-          {state.status === "authenticated" ? (
-            <button
-              type="button"
-              onClick={() => {
-                void signOut();
-              }}
-              className="h-9 px-4 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-sm"
-            >
-              {t("log-out")}
-            </button>
-          ) : (
-            <Link
-              to="/login"
-              search={EMPTY_LOGIN_SEARCH}
-              className="h-9 inline-flex items-center px-4 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] text-sm font-medium"
-            >
-              {t("sign-in")}
-            </Link>
-          )}
-        </div>
-      </CardMenuSection>
-
-      {isLoggedIn && (
-        <CardMenuSection>
-          <CategoryLink
-            to="/settings/account"
-            icon={User2}
-            label={t("account")}
-          />
-          <CategoryLink
-            to="/settings/streaming"
-            icon={Video}
-            label={t("streaming")}
-          />
-          <CategoryLink
-            to="/settings/privacy"
-            icon={Shield}
-            label={t("privacy-security")}
-          />
-        </CardMenuSection>
-      )}
-
-      <CardMenuSection>
-        <CategoryLink
-          to="/settings/languages"
-          icon={Globe}
-          label={t("languages")}
-        />
-        <CategoryLink
-          to="/settings/advanced"
-          icon={Lock}
-          label={t("advanced")}
-        />
-        <CategoryLink to="/settings/about" icon={Info} label={t("about")} />
-      </CardMenuSection>
-    </div>
-  );
-}
diff --git a/js/web/src/routes/settings/keys.tsx b/js/web/src/routes/settings/keys.tsx
index d97f6f51..90a1dade 100644
--- a/js/web/src/routes/settings/keys.tsx
+++ b/js/web/src/routes/settings/keys.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { createFileRoute } from "@tanstack/react-router";
 import { X } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -57,8 +56,6 @@ function KeyManager() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings/streaming" label={t("streaming")} />
-
       <h1 className="text-xl font-semibold">{t("key-manager")}</h1>
 
       {keyRecords === null || keyObj === null ? (
diff --git a/js/web/src/routes/settings/languages.tsx b/js/web/src/routes/settings/languages.tsx
index 1e7617cd..23eef6d8 100644
--- a/js/web/src/routes/settings/languages.tsx
+++ b/js/web/src/routes/settings/languages.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { CardMenuSection } from "@/components/ui/card";
 import { manifest } from "@streamplace/i18n";
 import { createFileRoute } from "@tanstack/react-router";
@@ -27,8 +26,6 @@ function LanguagesSettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
-
       <div>
         <h1 className="text-xl font-semibold">{t("language-selection")}</h1>
         <p className="text-sm text-[var(--color-fg-muted)] mt-1">
diff --git a/js/web/src/routes/settings/multistream.tsx b/js/web/src/routes/settings/multistream.tsx
index 37ac5a0d..df955e73 100644
--- a/js/web/src/routes/settings/multistream.tsx
+++ b/js/web/src/routes/settings/multistream.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -206,8 +205,6 @@ function MultistreamManager() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings/streaming" label={t("streaming")} />
-
       <div>
         <h1 className="text-xl font-semibold">{t("multistream-targets")}</h1>
         <p className="text-sm text-[var(--color-fg-muted)] mt-1">
diff --git a/js/web/src/routes/settings/privacy.tsx b/js/web/src/routes/settings/privacy.tsx
index 8cacfc9b..0c0d783e 100644
--- a/js/web/src/routes/settings/privacy.tsx
+++ b/js/web/src/routes/settings/privacy.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Card, CardRow } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { createFileRoute } from "@tanstack/react-router";
@@ -34,7 +33,6 @@ function PrivacySettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
       <h1 className="text-xl font-semibold">{t("privacy-security")}</h1>
 
       <Card>
diff --git a/js/web/src/routes/settings/recommendations.tsx b/js/web/src/routes/settings/recommendations.tsx
index 04dd78fc..2cb91eda 100644
--- a/js/web/src/routes/settings/recommendations.tsx
+++ b/js/web/src/routes/settings/recommendations.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -225,8 +224,6 @@ function RecommendationsManager() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings/streaming" label={t("streaming")} />
-
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-xl font-semibold">
diff --git a/js/web/src/routes/settings/streaming.tsx b/js/web/src/routes/settings/streaming.tsx
index 488842b4..1f0c3ebd 100644
--- a/js/web/src/routes/settings/streaming.tsx
+++ b/js/web/src/routes/settings/streaming.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { CardMenuSection } from "@/components/ui/card";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { Globe, Heart, Key, Webhook } from "lucide-react";
@@ -60,7 +59,6 @@ function StreamingSettings() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings" label={t("settings-title")} />
       <h1 className="text-xl font-semibold">{t("streaming")}</h1>
 
       <CardMenuSection>
diff --git a/js/web/src/routes/settings/webhooks.tsx b/js/web/src/routes/settings/webhooks.tsx
index 7d8cb8f5..a42d7436 100644
--- a/js/web/src/routes/settings/webhooks.tsx
+++ b/js/web/src/routes/settings/webhooks.tsx
@@ -1,4 +1,3 @@
-import { BackLink } from "@/components/settings/back-link";
 import { Button } from "@/components/ui/button";
 import { CardMenuSection } from "@/components/ui/card";
 import {
@@ -169,8 +168,6 @@ function WebhookManager() {
 
   return (
     <div className="space-y-6">
-      <BackLink to="/settings/streaming" label={t("streaming")} />
-
       <div>
         <h1 className="text-xl font-semibold">{t("webhook-integrations")}</h1>
         <p className="text-sm text-[var(--color-fg-muted)] mt-1">