diff --git a/web/src/lib/components/settings/SettingsNav.svelte b/web/src/lib/components/settings/SettingsNav.svelte
index 38a2e4fd..de642ad5 100644
--- a/web/src/lib/components/settings/SettingsNav.svelte
+++ b/web/src/lib/components/settings/SettingsNav.svelte
@@ -1,19 +1,14 @@
 <script module lang="ts">
-	import type { Component } from "svelte";
-	import type { SvelteHTMLElements } from "svelte/elements";
+	import type { TabDef } from "$lib/components/ui/Tabs.svelte";
 
-	export interface SettingsNavItem {
-		id: string;
-		label: string;
-		href: string;
-		icon?: Component<SvelteHTMLElements["svg"]>;
-	}
+	export type SettingsNavItem = TabDef;
 </script>
 
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { resolve } from "$app/paths";
-	import ChevronDown from "$icon/chevron-down";
+	import Select from "$lib/components/ui/Select.svelte";
+	import Tabs from "$lib/components/ui/Tabs.svelte";
 
 	interface Props {
 		items: SettingsNavItem[];
@@ -23,78 +18,28 @@
 
 	let { items, active, label = "Settings" }: Props = $props();
 
+	const options = $derived(items.map((item) => ({ value: item.id, label: item.label })));
 	const ActiveGlyph = $derived(items.find((i) => i.id === active)?.icon);
 
-	const jump = (event: Event) => {
-		const item = items.find((i) => i.id === (event.currentTarget as HTMLSelectElement).value);
+	const jump = (id: string) => {
+		const item = items.find((i) => i.id === id);
 		if (item) void goto(resolve(item.href as "/"));
 	};
-
-	// Figma DS "Navigation / Button" (1009:2662) has four states across Active ×
-	// Hovered. Inactive/resting is the only one with no fill and no border, so the
-	// hover borders have to be added rather than recoloured — otherwise the item
-	// grows by 1px on hover.
-	const itemClass = (isActive: boolean) =>
-		[
-			"flex min-h-8 w-full items-center gap-1.5 overflow-hidden rounded-sm border px-3 py-1.5",
-			"typography-paragraph-regular text-foreground-default no-underline hover:no-underline",
-			"transition-colors duration-150 ease-in-out",
-			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
-			isActive
-				? "border-border-navigation-item-active bg-background-navigation-item hover:border-border-strong hover:bg-background-muted"
-				: "border-transparent hover:border-border-strong hover:bg-background-inset"
-		].join(" ");
 </script>
 
 <!-- Below md the panel is only as wide as the phone, so the sidebar collapses into
      a native picker rather than seven rows that push the page content off-screen.
      The hairline under it stands in for the sidebar's edge. -->
 <div class="flex w-full flex-col gap-4 md:hidden">
-	<div class="relative w-full">
-		{#if ActiveGlyph}
-			<ActiveGlyph
-				class="pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-foreground-default"
-				aria-hidden="true"
-			/>
-		{/if}
-		<select
-			aria-label={label}
-			value={active}
-			onchange={jump}
-			class="h-8 w-full appearance-none rounded-sm border border-border-default bg-background-default pr-8 typography-paragraph-regular text-foreground-default outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus {ActiveGlyph
-				? 'pl-7'
-				: 'pl-2'}"
-		>
-			{#each items as item (item.id)}
-				<option value={item.id}>{item.label}</option>
-			{/each}
-		</select>
-		<ChevronDown
-			class="pointer-events-none absolute top-1/2 right-2 size-3.5 -translate-y-1/2 text-foreground-default"
-			aria-hidden="true"
-		/>
-	</div>
+	<!-- the active tab lives in the url, so navigation is what updates it: no two way binding -->
+	<Select {options} value={active} onSelect={jump} {label} icon={ActiveGlyph} />
 	<hr class="w-full border-0 border-t border-border-default" />
 </div>
 
-<nav
-	class="hidden w-full shrink-0 flex-col gap-1 bg-background-navigation-frame p-2 md:flex md:w-44 md:self-stretch md:border-r md:border-border-default"
-	aria-label={label}
->
-	{#each items as item (item.id)}
-		{@const isActive = active === item.id}
-		{@const Glyph = item.icon}
-		<a
-			href={resolve(item.href as "/")}
-			aria-current={isActive ? "page" : undefined}
-			class={itemClass(isActive)}
-		>
-			{#if Glyph}
-				<Glyph class="size-3.5 shrink-0" aria-hidden="true" />
-			{/if}
-			<!-- Figma clips the item rather than letting a long label wrap it taller; an
-			     ellipsis keeps that height without hiding the label outright -->
-			<span class="min-w-0 truncate">{item.label}</span>
-		</a>
-	{/each}
-</nav>
+<Tabs
+	tabs={items}
+	{active}
+	{label}
+	vertical
+	class="hidden shrink-0 md:flex md:w-44 md:self-stretch md:border-r md:border-border-default"
+/>
diff --git a/web/src/lib/components/ui/Tabs.stories.svelte b/web/src/lib/components/ui/Tabs.stories.svelte
index 8f4e83aa..11de46a3 100644
--- a/web/src/lib/components/ui/Tabs.stories.svelte
+++ b/web/src/lib/components/ui/Tabs.stories.svelte
@@ -30,3 +30,20 @@
 <Story name="Default" />
 <Story name="SecondActive" args={{ active: "repos" }} />
 <Story name="WithoutIcons" args={{ tabs: plainTabs, active: "open" }} />
+<!-- the vertical variant is the settings sidebar shape: it stretches to its container
+     rather than hugging its items, so the stories give it a tall narrow box -->
+<Story name="Vertical" args={{ vertical: true }}>
+	{#snippet template(args)}
+		<div class="flex h-80 w-44 items-stretch">
+			<Tabs {...args} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="VerticalSecondActive" args={{ vertical: true, active: "repos" }}>
+	{#snippet template(args)}
+		<div class="flex h-80 w-44 items-stretch">
+			<Tabs {...args} />
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 9551ac97..e1983a97 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -14,26 +14,32 @@
 	export const tabs = tv({
 		slots: {
 			nav: "",
-			plate:
-				"pointer-events-none absolute top-0 left-0 rounded-t border border-b-0 border-border-default bg-background-default",
-			item: "flex items-center no-underline hover:no-underline",
+			plate: "pointer-events-none absolute top-0 left-0",
+			item: "relative flex items-center no-underline hover:no-underline",
 			icon: "size-4",
-			label: "flex flex-col",
+			label: "",
 			ghost: "invisible h-0 overflow-hidden font-medium select-none",
 			count: "rounded-sm px-1 typography-paragraph-small"
 		},
 		variants: {
 			vertical: {
 				true: {
-					nav: "h-fit divide-y divide-border-default overflow-hidden rounded-sm border border-border-default",
-					item: "gap-3 px-3 py-2 typography-paragraph-small",
-					icon: "shrink-0",
+					nav: "relative flex w-full flex-col gap-1 bg-background-navigation-frame p-2",
+					plate:
+						"rounded-sm border border-border-navigation-item-active bg-background-navigation-item",
+					item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-sm border border-transparent px-3 py-1.5 typography-paragraph-regular text-foreground-default transition-colors duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
+					icon: "size-3.5 shrink-0",
+					// Figma clips the item rather than letting a long label wrap it taller; an
+					// ellipsis keeps that height without hiding the label outright
+					label: "min-w-0 truncate",
 					count: "ml-auto"
 				},
 				false: {
 					nav: "relative z-10 flex w-full overflow-x-auto overflow-y-hidden pl-4",
-					item: "relative mr-1 rounded-t border border-b-0 border-transparent px-4 pt-1 pb-1.25 whitespace-nowrap text-foreground-default",
+					plate: "rounded-t border border-b-0 border-border-default bg-background-default",
+					item: "mr-1 rounded-t border border-b-0 border-transparent px-4 pt-1 pb-1.25 whitespace-nowrap text-foreground-default",
 					icon: "mr-2",
+					label: "flex flex-col",
 					count: "ml-1"
 				}
 			},
@@ -52,19 +58,15 @@
 			{
 				vertical: true,
 				selected: true,
-				class: { item: "bg-background-default text-foreground-default dark:bg-background-inset" }
-			},
-			{
-				vertical: true,
-				selected: false,
+				ready: false,
 				class: {
-					item: "bg-background-inset text-foreground-muted hover:text-foreground-default dark:bg-background-default"
+					item: "border-border-navigation-item-active bg-background-navigation-item"
 				}
 			},
 			{
-				vertical: false,
-				selected: true,
-				class: { item: "[-webkit-text-stroke:0.3px_currentColor]" }
+				vertical: true,
+				selected: false,
+				class: { item: "hover:bg-background-inset" }
 			},
 			{
 				vertical: false,
@@ -101,10 +103,19 @@
 		label?: string;
 		vertical?: boolean;
 		overlapBottom?: boolean;
+		class?: string;
 	}
 
-	let { tabs: defs, active, label, vertical = false, overlapBottom = false }: Props = $props();
+	let {
+		tabs: defs,
+		active,
+		label,
+		vertical = false,
+		overlapBottom = false,
+		class: navClass
+	}: Props = $props();
 
+	// resolved up front so the plate can match hrefs against the destination url
 	const items = $derived(
 		defs.map((tab) => ({
 			...tab,
@@ -112,6 +123,9 @@
 		}))
 	);
 
+	// the plate follows where we're heading rather than where we are, so it leaves
+	// the moment you click instead of waiting on the route's load; aria-current
+	// stays behind on the page that's still on screen
 	const selected = $derived.by(() => {
 		const dest = navigating.to?.url;
 		if (!dest) return active;
@@ -120,6 +134,8 @@
 		let bestLength = -1;
 		for (const item of items) {
 			if (item.url === dest.pathname + dest.search) return item.id;
+			// a plain path also owns everything nested under it, so an issue page
+			// keeps the issues tab lit; a query-scoped tab only matches exactly
 			if (item.url.includes("?")) continue;
 			const owns = dest.pathname === item.url || dest.pathname.startsWith(`${item.url}/`);
 			if (owns && item.url.length > bestLength) {
@@ -132,50 +148,63 @@
 
 	let nav = $state<HTMLElement>();
 	let nodes = $state<(HTMLElement | undefined)[]>([]);
-	let box = $state<{ x: number; width: number; height: number }>();
+	let box = $state<{ top: number; left: number; width: number; height: number }>();
 	let ready = $state(false);
 
-	const plate = new Spring({ x: 0, width: 0 }, { stiffness: 0.145, damping: 0.65, precision: 0.1 });
+	const plate = new Spring(
+		{ pos: 0, size: 0 },
+		{ stiffness: 0.145, damping: 0.65, precision: 0.1 }
+	);
 
 	const measure = () => {
 		const node = nodes[items.findIndex((item) => item.id === selected)];
-		if (!node) return;
-		box = { x: node.offsetLeft, width: node.offsetWidth, height: node.offsetHeight };
+		if (!node?.offsetParent) return;
+		box = {
+			top: node.offsetTop,
+			left: node.offsetLeft,
+			width: node.offsetWidth,
+			height: node.offsetHeight
+		};
 	};
 
 	$effect(() => {
-		if (vertical) return;
 		measure();
 	});
 
+	// watch every tab, not just the row: a preceding tab changing width (a count
+	// arriving, a webfont landing) shifts the plate without resizing the row
 	$effect(() => {
-		if (vertical || !nav) return;
+		if (!nav) return;
 		const observer = new ResizeObserver(measure);
 		observer.observe(nav);
 		for (const node of nodes) if (node) observer.observe(node);
 		return () => observer.disconnect();
 	});
 
+	// the first placement lands instantly so the plate never slides in from nowhere;
+	// until it happens the selected tab wears the chrome itself, which is also what
+	// server-rendered and script-less pages get
 	let placed = false;
 	$effect(() => {
 		if (!box) return;
-		plate.set({ x: box.x, width: box.width }, { instant: !placed || prefersReducedMotion.current });
+		plate.set(vertical ? { pos: box.top, size: box.height } : { pos: box.left, size: box.width }, {
+			instant: !placed || prefersReducedMotion.current
+		});
 		placed = true;
 		ready = true;
 	});
 
 	const style = $derived(tabs({ vertical, ready, overlapBottom }));
+
+	const plateStyle = $derived(
+		vertical
+			? `translate: ${box?.left ?? 0}px ${plate.current.pos}px; width: ${box?.width ?? 0}px; height: ${plate.current.size}px`
+			: `translate: ${plate.current.pos}px; width: ${plate.current.size}px; height: ${box?.height ?? 0}px`
+	);
 </script>
 
-<nav class={style.nav()} aria-label={label} bind:this={nav}>
-	{#if !vertical}
-		<span
-			aria-hidden="true"
-			class={style.plate()}
-			style="translate: {plate.current.x}px; width: {plate.current.width}px; height: {box?.height ??
-				0}px"
-		></span>
-	{/if}
+<nav class={style.nav({ class: navClass })} aria-label={label} bind:this={nav}>
+	<span aria-hidden="true" class={style.plate()} style={plateStyle}></span>
 	{#each items as tab, i (tab.id)}
 		{@const isSelected = selected === tab.id}
 		{@const Glyph = tab.icon}
@@ -188,14 +217,12 @@
 			{#if Glyph}
 				<Glyph class={style.icon()} aria-hidden="true" />
 			{/if}
-			{#if vertical}
+			<span class={style.label()}>
 				{tab.label}
-			{:else}
-				<span class={style.label()}>
-					{tab.label}
+				{#if !vertical}
 					<span aria-hidden="true" class={style.ghost()}>{tab.label}</span>
-				</span>
-			{/if}
+				{/if}
+			</span>
 			{#if tab.count}
 				<span class={style.count({ selected: isSelected })}>{tab.count}</span>
 			{/if}