diff --git a/web/package.json b/web/package.json
index 0c8b992e..edd178d6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -39,7 +39,7 @@
 		"globals": "^17.6.0",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^4.1.0",
-		"prettier-plugin-tailwindcss": "^0.8.0",
+		"prettier-plugin-tailwindcss": "^0.8.1",
 		"svelte": "^5.56.1",
 		"svelte-check": "^4.6.0",
 		"tailwindcss": "^4.3.2",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 8e0c6a0b..bbf2b2a0 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -106,8 +106,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.1(prettier@3.9.4)(svelte@5.56.4(@typescript-eslint/types@8.63.0))
       prettier-plugin-tailwindcss:
-        specifier: ^0.8.0
-        version: 0.8.0(prettier-plugin-svelte@4.1.1(prettier@3.9.4)(svelte@5.56.4(@typescript-eslint/types@8.63.0)))(prettier@3.9.4)
+        specifier: ^0.8.1
+        version: 0.8.1(prettier-plugin-svelte@4.1.1(prettier@3.9.4)(svelte@5.56.4(@typescript-eslint/types@8.63.0)))(prettier@3.9.4)
       storybook:
         specifier: ^10.5.0
         version: 10.5.0(@types/react@19.2.17)(prettier@3.9.4)(react@19.2.7)
@@ -2283,8 +2283,8 @@ packages:
       prettier: ^3.0.0
       svelte: ^5.0.0
 
-  prettier-plugin-tailwindcss@0.8.0:
-    resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==}
+  prettier-plugin-tailwindcss@0.8.1:
+    resolution: {integrity: sha512-iaFMYqDsE4ffdDkn5qup0j5f2aCEBFZrdrZnvu9QKTlWx/iGPeQ4HHu7b7fCPMxeo9nwQBiOAh2nSypdFYWJkw==}
     engines: {node: '>=20.19'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
@@ -4752,7 +4752,7 @@ snapshots:
       prettier: 3.9.4
       svelte: 5.56.4(@typescript-eslint/types@8.63.0)
 
-  prettier-plugin-tailwindcss@0.8.0(prettier-plugin-svelte@4.1.1(prettier@3.9.4)(svelte@5.56.4(@typescript-eslint/types@8.63.0)))(prettier@3.9.4):
+  prettier-plugin-tailwindcss@0.8.1(prettier-plugin-svelte@4.1.1(prettier@3.9.4)(svelte@5.56.4(@typescript-eslint/types@8.63.0)))(prettier@3.9.4):
     dependencies:
       prettier: 3.9.4
     optionalDependencies:
diff --git a/web/prettier.config.js b/web/prettier.config.js
index 6ec7ab57..104c4c36 100644
--- a/web/prettier.config.js
+++ b/web/prettier.config.js
@@ -6,7 +6,8 @@ const config = {
 	printWidth: 100,
 	plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
-	tailwindStylesheet: "./src/app.css"
+	tailwindStylesheet: "./src/app.css",
+	tailwindFunctions: ["tv"]
 };
 
 export default config;
diff --git a/web/src/lib/components/home/MarketingHome.svelte b/web/src/lib/components/home/MarketingHome.svelte
index 6d451101..3e4fb15b 100644
--- a/web/src/lib/components/home/MarketingHome.svelte
+++ b/web/src/lib/components/home/MarketingHome.svelte
@@ -45,10 +45,10 @@
 	</form>
 {/snippet}
 
-<section class="overflow-hidden px-6 pb-24 pt-28 md:pb-32 md:pt-36">
+<section class="overflow-hidden px-6 pt-28 pb-24 md:pt-36 md:pb-32">
 	<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-center gap-14 md:grid-cols-2">
 		<h1
-			class="text-6xl font-bold leading-[0.98] tracking-[-0.05em] text-foreground-default md:text-7xl lg:text-8xl"
+			class="text-6xl leading-[0.98] font-bold tracking-[-0.05em] text-foreground-default md:text-7xl lg:text-8xl"
 		>
 			tightly-knit<br />social coding.
 		</h1>
diff --git a/web/src/lib/components/profile/FollowCard.svelte b/web/src/lib/components/profile/FollowCard.svelte
index 74ce3d51..19486bb3 100644
--- a/web/src/lib/components/profile/FollowCard.svelte
+++ b/web/src/lib/components/profile/FollowCard.svelte
@@ -25,15 +25,15 @@
 		<div class="flex min-h-0 flex-1 flex-col justify-around">
 			<a
 				href={resolve(`/${person.handle}` as "/")}
-				class="max-w-full overflow-hidden text-ellipsis whitespace-nowrap font-bold text-foreground-default hover:underline"
+				class="max-w-full overflow-hidden font-bold text-ellipsis whitespace-nowrap text-foreground-default hover:underline"
 			>
 				{person.handle}
 			</a>
 			{#if person.description}
-				<p class="break-words pb-2 text-sm text-foreground-muted md:pb-2">{person.description}</p>
+				<p class="pb-2 text-sm break-words text-foreground-muted md:pb-2">{person.description}</p>
 			{/if}
 			<div
-				class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-sm text-foreground-subtle"
+				class="my-2 flex max-w-full items-center gap-2 overflow-hidden text-sm text-ellipsis whitespace-nowrap text-foreground-subtle"
 			>
 				<Users class="size-4 shrink-0" />
 				<span
diff --git a/web/src/lib/components/profile/ProfileTabs.svelte b/web/src/lib/components/profile/ProfileTabs.svelte
index 9f43d4ee..91c3c4c9 100644
--- a/web/src/lib/components/profile/ProfileTabs.svelte
+++ b/web/src/lib/components/profile/ProfileTabs.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
 	import SquareChartGantt from "$icon/square-chart-gantt";
 	import BookMarked from "$icon/book-marked";
 	import Star from "$icon/star";
 	import LineSquiggle from "$icon/line-squiggle";
 	import Shield from "$icon/shield";
-	import type { Component } from "svelte";
-	import type { SvelteHTMLElements } from "svelte/elements";
+	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
 	import type { ProfileCounts } from "./types";
 
 	interface Props {
@@ -17,51 +15,27 @@
 
 	let { handle, active, counts }: Props = $props();
 
-	interface TabDef {
-		id: string;
-		label: string;
-		icon: Component<SvelteHTMLElements["svg"]>;
-		count?: number;
-	}
+	const hrefFor = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);
 
 	const tabs = $derived<TabDef[]>([
-		{ id: "overview", label: "Overview", icon: SquareChartGantt },
-		{ id: "repos", label: "Repositories", icon: BookMarked, count: counts.repos },
-		{ id: "starred", label: "Starred", icon: Star, count: counts.stars },
-		{ id: "strings", label: "Strings", icon: LineSquiggle, count: counts.strings },
-		{ id: "vouches", label: "Vouches", icon: Shield }
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: hrefFor("overview") },
+		{
+			id: "repos",
+			label: "Repositories",
+			icon: BookMarked,
+			count: counts.repos,
+			href: hrefFor("repos")
+		},
+		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: hrefFor("starred") },
+		{
+			id: "strings",
+			label: "Strings",
+			icon: LineSquiggle,
+			count: counts.strings,
+			href: hrefFor("strings")
+		},
+		{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
 	]);
-
-	const hrefFor = (id: string) =>
-		resolve((id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`) as "/");
 </script>
 
-<nav class="w-full overflow-x-auto overflow-y-hidden pl-4" aria-label="profile sections">
-	<div class="flex">
-		{#each tabs as tab (tab.id)}
-			{@const isActive = active === tab.id}
-			{@const Glyph = tab.icon}
-			<a
-				href={hrefFor(tab.id)}
-				class="group relative -mr-px no-underline hover:no-underline"
-				aria-current={isActive ? "page" : undefined}
-			>
-				<div
-					class={`relative mr-1 min-w-[80px] rounded-t px-4 py-1 text-center whitespace-nowrap text-foreground-default ${
-						isActive
-							? "-mb-px bg-background-default font-medium"
-							: "group-hover:bg-background-inset/25"
-					}`}
-				>
-					<span class="flex items-center justify-center">
-						<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
-						{tab.label}
-						{#if tab.count}
-							<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
-						{/if}
-					</span>
-				</div>
-			</a>
-		{/each}
-	</div>
-</nav>
+<Tabs {tabs} {active} label="profile sections" />
diff --git a/web/src/lib/components/profile/tabs/OverviewTab.svelte b/web/src/lib/components/profile/tabs/OverviewTab.svelte
index 16ef03e7..b05d2bda 100644
--- a/web/src/lib/components/profile/tabs/OverviewTab.svelte
+++ b/web/src/lib/components/profile/tabs/OverviewTab.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
-	import EmptyState from "../EmptyState.svelte";
+	import Section from "$lib/components/ui/Section.svelte";
 	import ActivityStub from "../ActivityStub.svelte";
 	import type { RepoCardData } from "../types";
 
@@ -12,18 +12,17 @@
 </script>
 
 <div class="grid gap-6 md:grid-cols-8">
-	<section class="order-1 md:col-span-4">
-		<h2 class="px-2 pb-4 text-base font-medium">Pinned repositories</h2>
-		{#if pinned.length === 0}
-			<EmptyState message="No pinned repositories." />
-		{:else}
-			<div class="flex flex-col gap-4">
-				{#each pinned as repo (repo.rkey)}
-					<RepoCard {repo} starButton={false} showOwner={false} />
-				{/each}
-			</div>
-		{/if}
-	</section>
+	<div class="order-1 md:col-span-4">
+		<Section
+			title="Pinned repositories"
+			empty={pinned.length === 0}
+			emptyMessage="No pinned repositories."
+		>
+			{#each pinned as repo (repo.rkey)}
+				<RepoCard {repo} starButton={false} showOwner={false} />
+			{/each}
+		</Section>
+	</div>
 
 	<section class="order-2 md:col-span-4">
 		<h2 class="px-2 pb-4 text-base font-medium">Activity</h2>
diff --git a/web/src/lib/components/profile/tabs/PeopleTab.svelte b/web/src/lib/components/profile/tabs/PeopleTab.svelte
index e7c6726f..6dabe276 100644
--- a/web/src/lib/components/profile/tabs/PeopleTab.svelte
+++ b/web/src/lib/components/profile/tabs/PeopleTab.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import FollowCard from "../FollowCard.svelte";
-	import EmptyState from "../EmptyState.svelte";
+	import Section from "$lib/components/ui/Section.svelte";
 	import type { PersonData } from "../types";
 
 	interface Props {
@@ -12,15 +12,8 @@
 	let { people, title, emptyMessage }: Props = $props();
 </script>
 
-<section>
-	<h2 class="px-2 pb-4 text-base font-medium">{title}</h2>
-	{#if people.length === 0}
-		<EmptyState message={emptyMessage} />
-	{:else}
-		<div class="flex flex-col gap-8">
-			{#each people as person (person.did)}
-				<FollowCard {person} />
-			{/each}
-		</div>
-	{/if}
-</section>
+<Section {title} empty={people.length === 0} {emptyMessage} listClass="flex flex-col gap-8">
+	{#each people as person (person.did)}
+		<FollowCard {person} />
+	{/each}
+</Section>
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.svelte b/web/src/lib/components/profile/tabs/RepoListTab.svelte
index 26d8abfb..0e68a395 100644
--- a/web/src/lib/components/profile/tabs/RepoListTab.svelte
+++ b/web/src/lib/components/profile/tabs/RepoListTab.svelte
@@ -2,7 +2,7 @@
 	import { page } from "$app/state";
 	import { resolve } from "$app/paths";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
-	import EmptyState from "../EmptyState.svelte";
+	import Section from "$lib/components/ui/Section.svelte";
 	import type { RepoCardData } from "../types";
 	import Search from "$icon/search";
 	import X from "$icon/x";
@@ -11,43 +11,39 @@
 	let searchQuery = $derived(page.url.searchParams.get("q") ?? "");
 </script>
 
-<section>
-	<div class="mb-4">
-		<form class="relative flex" method="GET">
-			<input type="hidden" name="tab" value="repos" />
-			<div class="relative flex flex-1">
-				<input
-					class="peer flex-1 rounded-l border border-border-default bg-background-default py-1.5 pl-3 pr-10 outline-none focus:border-border-strong focus:ring-1 focus:ring-border-strong"
-					type="text"
-					name="q"
-					value={searchQuery}
-					placeholder="Search repositories..."
-				/>
-				<a
-					href={resolve(`${page.url.pathname}?tab=repos` as "/")}
-					class="absolute right-3 top-1/2 hidden -translate-y-1/2 text-foreground-subtle hover:text-foreground-default peer-[&:not(:placeholder-shown)]:block"
+<Section
+	empty={repos.length === 0}
+	emptyMessage={searchQuery ? `No repositories match "${searchQuery}".` : "No repositories found."}
+>
+	{#snippet header()}
+		<div class="mb-4">
+			<form class="relative flex" method="GET">
+				<input type="hidden" name="tab" value="repos" />
+				<div class="relative flex flex-1">
+					<input
+						class="peer flex-1 rounded-l border border-border-default bg-background-default py-1.5 pr-10 pl-3 outline-none focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+						type="text"
+						name="q"
+						value={searchQuery}
+						placeholder="Search repositories..."
+					/>
+					<a
+						href={resolve(`${page.url.pathname}?tab=repos` as "/")}
+						class="absolute top-1/2 right-3 hidden -translate-y-1/2 text-foreground-subtle peer-[&:not(:placeholder-shown)]:block hover:text-foreground-default"
+					>
+						<X class="size-4" />
+					</a>
+				</div>
+				<button
+					type="submit"
+					class="rounded-r border border-l-0 border-border-default bg-background-default p-2 text-foreground-subtle hover:bg-background-subtle hover:text-foreground-default"
 				>
-					<X class="size-4" />
-				</a>
-			</div>
-			<button
-				type="submit"
-				class="rounded-r border border-l-0 border-border-default bg-background-default p-2 text-foreground-subtle hover:bg-background-subtle hover:text-foreground-default"
-			>
-				<Search class="size-4" />
-			</button>
-		</form>
-	</div>
-
-	{#if repos.length === 0}
-		<EmptyState
-			message={searchQuery ? `No repositories match "${searchQuery}".` : "No repositories found."}
-		/>
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#each repos as repo (repo.rkey)}
-				<RepoCard {repo} showOwner={false} />
-			{/each}
+					<Search class="size-4" />
+				</button>
+			</form>
 		</div>
-	{/if}
-</section>
+	{/snippet}
+	{#each repos as repo (repo.rkey)}
+		<RepoCard {repo} showOwner={false} />
+	{/each}
+</Section>
diff --git a/web/src/lib/components/profile/tabs/StarredTab.svelte b/web/src/lib/components/profile/tabs/StarredTab.svelte
index 0c3ec560..ab45d81a 100644
--- a/web/src/lib/components/profile/tabs/StarredTab.svelte
+++ b/web/src/lib/components/profile/tabs/StarredTab.svelte
@@ -1,34 +1,27 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import RepoCard from "$lib/components/repo/RepoCard.svelte";
-	import EmptyState from "../EmptyState.svelte";
+	import Section from "$lib/components/ui/Section.svelte";
 	import type { StarData } from "../types";
 
 	let { stars }: { stars: StarData[] } = $props();
 </script>
 
-<section>
-	<h2 class="px-2 pb-4 text-base font-medium">Starred</h2>
-	{#if stars.length === 0}
-		<EmptyState message="No stars yet." />
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#each stars as star (star.uri)}
-				{#if star.kind === "repo"}
-					<RepoCard repo={star.repo} />
-				{:else}
-					<div
-						class="flex items-center gap-2 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
-					>
-						<a
-							href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as "/")}
-							class="truncate font-bold text-foreground-default no-underline hover:underline"
-						>
-							{star.ownerHandle}/{star.rkey}
-						</a>
-					</div>
-				{/if}
-			{/each}
-		</div>
-	{/if}
-</section>
+<Section title="Starred" empty={stars.length === 0} emptyMessage="No stars yet.">
+	{#each stars as star (star.uri)}
+		{#if star.kind === "repo"}
+			<RepoCard repo={star.repo} />
+		{:else}
+			<div
+				class="flex items-center gap-2 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
+			>
+				<a
+					href={resolve(`/${star.ownerHandle}/strings/${star.rkey}` as "/")}
+					class="truncate font-bold text-foreground-default no-underline hover:underline"
+				>
+					{star.ownerHandle}/{star.rkey}
+				</a>
+			</div>
+		{/if}
+	{/each}
+</Section>
diff --git a/web/src/lib/components/profile/tabs/StringListTab.svelte b/web/src/lib/components/profile/tabs/StringListTab.svelte
index 94b448de..80e79c9e 100644
--- a/web/src/lib/components/profile/tabs/StringListTab.svelte
+++ b/web/src/lib/components/profile/tabs/StringListTab.svelte
@@ -1,20 +1,13 @@
 <script lang="ts">
 	import StringCard from "../StringCard.svelte";
-	import EmptyState from "../EmptyState.svelte";
+	import Section from "$lib/components/ui/Section.svelte";
 	import type { StringCardData } from "../types";
 
 	let { strings }: { strings: StringCardData[] } = $props();
 </script>
 
-<section>
-	<h2 class="px-2 pb-4 text-base font-medium">Strings</h2>
-	{#if strings.length === 0}
-		<EmptyState message="No strings yet." />
-	{:else}
-		<div class="flex flex-col gap-4">
-			{#each strings as entry (entry.rkey)}
-				<StringCard {entry} />
-			{/each}
-		</div>
-	{/if}
-</section>
+<Section title="Strings" empty={strings.length === 0} emptyMessage="No strings yet.">
+	{#each strings as entry (entry.rkey)}
+		<StringCard {entry} />
+	{/each}
+</Section>
diff --git a/web/src/lib/components/profile/tabs/VouchTab.svelte b/web/src/lib/components/profile/tabs/VouchTab.svelte
index 45a23b33..9a996850 100644
--- a/web/src/lib/components/profile/tabs/VouchTab.svelte
+++ b/web/src/lib/components/profile/tabs/VouchTab.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import VouchCard from "../VouchCard.svelte";
-	import EmptyState from "../EmptyState.svelte";
+	import Section from "$lib/components/ui/Section.svelte";
 	import type { VouchData } from "../types";
 
 	let {
@@ -12,16 +12,14 @@
 	const profileLabel = $derived(isSelf ? "you" : profileHandle);
 </script>
 
-<section>
-	<h2 class="px-2 pb-4 text-base font-medium">Vouches</h2>
-	{#if vouches.length === 0}
-		<EmptyState message="No vouches yet." />
-	{:else}
-		<div class="relative ml-5 flex flex-col gap-6 border border-transparent px-4">
-			<div class="absolute bottom-8 top-8 z-0 w-0.5 bg-border-default"></div>
-			{#each vouches as vouch (vouch.uri)}
-				<VouchCard {vouch} {profileLabel} />
-			{/each}
-		</div>
-	{/if}
-</section>
+<Section
+	title="Vouches"
+	empty={vouches.length === 0}
+	emptyMessage="No vouches yet."
+	listClass="relative ml-5 flex flex-col gap-6 border border-transparent px-4"
+>
+	<div class="absolute top-8 bottom-8 z-0 w-0.5 bg-border-default"></div>
+	{#each vouches as vouch (vouch.uri)}
+		<VouchCard {vouch} {profileLabel} />
+	{/each}
+</Section>
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
index c7d6a8e8..74a5f184 100644
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -27,7 +27,7 @@
 	class="flex min-h-32 flex-col gap-1 rounded border border-border-default bg-background-default px-6 py-4 shadow-sm"
 >
 	<div class="flex items-start justify-between font-medium text-foreground-default">
-		<div class="mr-2 flex min-w-0 flex-1 items-center mt-1">
+		<div class="mt-1 mr-2 flex min-w-0 flex-1 items-center">
 			<BookMarked class="mr-1.5 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 			<a
 				href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
diff --git a/web/src/lib/components/shell/Topbar.svelte b/web/src/lib/components/shell/Topbar.svelte
index 6037bc32..da029d71 100644
--- a/web/src/lib/components/shell/Topbar.svelte
+++ b/web/src/lib/components/shell/Topbar.svelte
@@ -38,13 +38,13 @@
 
 {#snippet divider(classes = "")}
 	<div
-		class={["hidden h-6 w-px rounded-md bg-background-inset self-center md:block", classes]}
+		class={["hidden h-6 w-px self-center rounded-md bg-background-inset md:block", classes]}
 	></div>
 {/snippet}
 
 <nav
-	class={`h-11 w-full px-5 \
-	        ${variant === "marketing" ? "" : "bg-background-default border-b border-border-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"} \
+	class={`h-11 w-full px-5
+	        ${variant === "marketing" ? "" : "border-b border-border-default bg-background-default shadow-[0_1px_1px_0_rgba(0,0,0,0.05)]"}
 	      `}
 	aria-label="main"
 >
@@ -84,7 +84,7 @@
 					</div>
 
 					<div class="order-1 flex items-center md:order-3">
-						<Dropdown id="new-menu" group="topbar" variant="button">
+						<Dropdown id="new-menu" group="topbar" variant="button" align="right">
 							{#snippet trigger()}
 								<Plus class="size-3.5" aria-hidden="true" />
 								<span class="hidden md:inline">New</span>
@@ -125,7 +125,7 @@
 							></span>
 						</div>
 					{:else if user}
-						<Dropdown id="profile-menu" group="topbar">
+						<Dropdown id="profile-menu" group="topbar" align="right">
 							{#snippet trigger()}
 								{#if user.avatar}
 									<img
diff --git a/web/src/lib/components/ui/Avatar.svelte b/web/src/lib/components/ui/Avatar.svelte
index 76d1aa8a..6d49cda7 100644
--- a/web/src/lib/components/ui/Avatar.svelte
+++ b/web/src/lib/components/ui/Avatar.svelte
@@ -13,8 +13,7 @@
 	let failed = $state(false);
 
 	$effect(() => {
-		src;
-		failed = false;
+		if (src) failed = false;
 	});
 </script>
 
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 61714f1f..f87ad0ae 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -3,7 +3,7 @@
 
 	export const button = tv({
 		base: [
-			"inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-l-(--btn-radius-l) rounded-r-(--btn-radius-r) [--btn-radius:var(--radius-sm)] [--btn-radius-l:var(--btn-radius)] [--btn-radius-r:var(--btn-radius)] no-underline",
+			"inline-flex cursor-pointer items-center justify-center overflow-hidden rounded-l-(--btn-radius-l) rounded-r-(--btn-radius-r) no-underline select-none [--btn-radius-l:var(--btn-radius)] [--btn-radius-r:var(--btn-radius)] [--btn-radius:var(--radius-sm)]",
 			"transition-colors duration-150 ease-in-out",
 			"hover:no-underline",
 			"focus-visible:outline-2 focus-visible:outline-offset-2",
@@ -22,7 +22,7 @@
 					"focus-visible:outline-background-success-emphasis"
 				],
 				ghost: [
-					"bg-transparent text-foreground-muted border border-transparent",
+					"border border-transparent bg-transparent text-foreground-muted",
 					"hover:bg-background-inset",
 					"focus-visible:outline-border-focus"
 				],
@@ -60,7 +60,7 @@
 				variant: "default",
 				insetShadow: true,
 				class: [
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150",
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
 					"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
 					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
 					"disabled:active:translate-y-0"
@@ -70,7 +70,7 @@
 				variant: "primary",
 				insetShadow: true,
 				class: [
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150",
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-l-[max(calc(var(--btn-radius-l)-2px),0px)] before:rounded-r-[max(calc(var(--btn-radius-r)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-alpha-dark-25)] before:transition-all before:duration-150 before:content-['']",
 					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-alpha-dark-50)]",
 					"disabled:active:translate-y-0"
 				]
diff --git a/web/src/lib/components/ui/ButtonCard.svelte b/web/src/lib/components/ui/ButtonCard.svelte
index 7665956b..461ca614 100644
--- a/web/src/lib/components/ui/ButtonCard.svelte
+++ b/web/src/lib/components/ui/ButtonCard.svelte
@@ -3,7 +3,7 @@
 
 	export const buttonCard = tv({
 		base: [
-			"flex h-40 w-48 cursor-pointer gap-3 rounded-(--btn-radius) [--btn-radius:var(--radius-sm)] px-4 py-3 select-none no-underline",
+			"flex h-40 w-48 cursor-pointer gap-3 rounded-(--btn-radius) px-4 py-3 no-underline select-none [--btn-radius:var(--radius-sm)]",
 			"transition-colors duration-150 ease-in-out",
 			"hover:no-underline",
 			"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -15,10 +15,7 @@
 					"border border-border-default bg-background-default",
 					"hover:bg-background-subtle"
 				],
-				ghost: [
-					"border border-transparent bg-transparent",
-					"hover:bg-background-inset"
-				]
+				ghost: ["border border-transparent bg-transparent", "hover:bg-background-inset"]
 			},
 			insetShadow: {
 				true: "",
@@ -31,7 +28,7 @@
 				variant: "default",
 				insetShadow: true,
 				class: [
-					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] before:content-[''] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150",
+					"relative z-0 before:absolute before:inset-0 before:-z-10 before:rounded-[max(calc(var(--btn-radius)-2px),0px)] before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-subtle)] before:transition-all before:duration-150 before:content-['']",
 					"hover:before:shadow-[inset_0_-2px_0_0_var(--color-shadow-inner-strong-hover)]",
 					"active:translate-y-0.5 active:before:shadow-[inset_0_2px_2px_0_var(--color-shadow-inner-subtle)]",
 					"disabled:active:translate-y-0"
@@ -90,7 +87,7 @@
 {#snippet content()}
 	<div class="flex flex-col items-start gap-1.5">
 		{#if title}
-			<div class="flex flex-row gap-2 items-center">
+			<div class="flex flex-row items-center gap-2">
 				{#if Icon}
 					<Icon class="size-4 shrink-0" aria-hidden="true" />
 				{/if}
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index d47ad0ab..8dd4d7db 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -9,9 +9,9 @@
 				false: [
 					"gap-0",
 					"*:relative",
-					"[&>*:not(:first-child)]:[--btn-radius-l:0px] [&>*:not(:first-child)]:-ml-px",
+					"[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:[--btn-radius-l:0px]",
 					"[&>*:not(:last-child)]:[--btn-radius-r:0px]",
-					"[&>*:hover]:z-10 [&>*:focus-visible]:z-10"
+					"[&>*:focus-visible]:z-10 [&>*:hover]:z-10"
 				]
 			}
 		},
diff --git a/web/src/lib/components/ui/Checkbox.svelte b/web/src/lib/components/ui/Checkbox.svelte
index bc70e3a9..51ce765b 100644
--- a/web/src/lib/components/ui/Checkbox.svelte
+++ b/web/src/lib/components/ui/Checkbox.svelte
@@ -58,14 +58,8 @@
 			class={inputClasses}
 			{...rest}
 		/>
-		<Check
-			class={checkClasses}
-			aria-hidden="true"
-		/>
-		<Minus
-			class={minusClasses}
-			aria-hidden="true"
-		/>
+		<Check class={checkClasses} aria-hidden="true" />
+		<Minus class={minusClasses} aria-hidden="true" />
 	</span>
 	{#if children}
 		<span>{@render children()}</span>
diff --git a/web/src/lib/components/ui/Dropdown.stories.svelte b/web/src/lib/components/ui/Dropdown.stories.svelte
index a0fb8bdf..69d3cabe 100644
--- a/web/src/lib/components/ui/Dropdown.stories.svelte
+++ b/web/src/lib/components/ui/Dropdown.stories.svelte
@@ -54,6 +54,17 @@
 	</Dropdown>
 </Story>
 
+<!-- `align="right"` anchors the menu's right edge to the trigger, for triggers near
+	the right edge of the viewport (e.g. the topbar profile menu). Default is left. -->
+<Story name="Right aligned" asChild>
+	<div class="flex justify-end">
+		<Dropdown align="right" trigger={menuTrigger} label="Menu">
+			<DropdownItem icon={Pencil}>Edit</DropdownItem>
+			<DropdownItem icon={Settings}>Settings</DropdownItem>
+		</Dropdown>
+	</div>
+</Story>
+
 <!-- DropdownItem states: plain text, with icon, as a link (href), and the danger variant. -->
 <Story name="Item states" asChild>
 	<Dropdown trigger={menuTrigger} label="Menu">
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index e57de27e..622e2876 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -7,9 +7,17 @@
 			root: "relative inline-block",
 			plainTrigger:
 				"flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-inherit",
-			menu: "absolute right-0 z-50 mt-2 w-56 overflow-hidden rounded border border-border-default bg-background-default text-sm shadow-menu"
+			menu: "absolute z-50 mt-2 w-56 divide-y divide-border-default overflow-hidden rounded border border-border-default bg-background-default text-sm shadow-menu"
 		},
 		variants: {
+			align: {
+				left: {
+					menu: "left-0"
+				},
+				right: {
+					menu: "right-0"
+				}
+			},
 			open: {
 				true: {
 					menu: "block"
@@ -20,6 +28,7 @@
 			}
 		},
 		defaultVariants: {
+			align: "left",
 			open: false
 		}
 	});
@@ -60,15 +69,16 @@
 		id?: string;
 		group?: string;
 		variant?: "plain" | "button";
+		align?: DropdownVariants["align"];
 		label?: string;
 		trigger: Snippet;
 		children: Snippet;
 	}
 
-	let { id, group, variant = "plain", label, trigger, children }: Props = $props();
+	let { id, group, variant = "plain", align = "left", label, trigger, children }: Props = $props();
 
 	let open = $state(false);
-	const classes = $derived(dropdown({ open }));
+	const classes = $derived(dropdown({ open, align }));
 	let root = $state<HTMLElement>();
 	let triggerWrapper = $state<HTMLElement>();
 	let triggerButtonEl = $state<HTMLElement>();
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index af2a3407..89b1bc83 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const dropdownItem = tv({
-		base: "flex w-full cursor-pointer items-center gap-2 border-0 bg-transparent px-[0.7rem] py-[0.55rem] text-left text-inherit no-underline transition-colors duration-150 hover:no-underline",
+		base: "flex w-full cursor-pointer items-center gap-2 bg-transparent px-[0.7rem] py-[0.55rem] text-left text-inherit no-underline transition-colors duration-150 hover:no-underline",
 		variants: {
 			danger: {
 				false: "hover:bg-background-subtle dark:hover:bg-[rgb(55_65_81_/_0.5)]",
diff --git a/web/src/lib/components/ui/EmptyState.stories.svelte b/web/src/lib/components/ui/EmptyState.stories.svelte
new file mode 100644
index 00000000..9581596c
--- /dev/null
+++ b/web/src/lib/components/ui/EmptyState.stories.svelte
@@ -0,0 +1,23 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import EmptyState from "./EmptyState.svelte";
+	import Link from "./Link.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/EmptyState",
+		component: EmptyState,
+		tags: ["autodocs"],
+		args: {
+			message: "No repositories yet."
+		}
+	});
+</script>
+
+<Story name="Default" />
+
+<!-- Children render inline after the message — typically a call-to-action link. -->
+<Story name="With action" asChild>
+	<EmptyState message="No repositories yet.">
+		<Link href="/repo/new">Create one</Link>
+	</EmptyState>
+</Story>
diff --git a/web/src/lib/components/profile/EmptyState.svelte b/web/src/lib/components/ui/EmptyState.svelte
similarity index 68%
rename from web/src/lib/components/profile/EmptyState.svelte
rename to web/src/lib/components/ui/EmptyState.svelte
index 64b94faa..97dd238e 100644
--- a/web/src/lib/components/profile/EmptyState.svelte
+++ b/web/src/lib/components/ui/EmptyState.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <div
-	class="flex items-center justify-center border border-border-default p-12 text-base text-foreground-subtle italic"
+	class="flex items-center justify-center rounded-sm border border-border-default p-12 text-base text-foreground-subtle italic"
 >
 	<span class="flex items-center gap-2">{message}{@render children?.()}</span>
 </div>
diff --git a/web/src/lib/components/ui/Input.svelte b/web/src/lib/components/ui/Input.svelte
index 1281328d..f90bf862 100644
--- a/web/src/lib/components/ui/Input.svelte
+++ b/web/src/lib/components/ui/Input.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const inputField = tv({
-		base: "flex items-center gap-2 rounded border bg-background-default px-2 py-1 min-h-9 transition-colors",
+		base: "flex min-h-9 items-center gap-2 rounded border bg-background-default px-2 py-1 transition-colors",
 		variants: {
 			error: {
 				false:
diff --git a/web/src/lib/components/ui/Link.svelte b/web/src/lib/components/ui/Link.svelte
index d517f121..16846a60 100644
--- a/web/src/lib/components/ui/Link.svelte
+++ b/web/src/lib/components/ui/Link.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const link = tv({
-		base: "inline-flex cursor-pointer select-none items-center gap-1 no-underline transition-colors duration-150 ease-in-out hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
+		base: "inline-flex cursor-pointer items-center gap-1 no-underline transition-colors duration-150 ease-in-out select-none hover:underline focus-visible:outline-2 focus-visible:outline-offset-2",
 		variants: {
 			variant: {
 				default:
@@ -15,7 +15,7 @@
 					"text-foreground-link-danger hover:text-foreground-link-danger-hover focus-visible:outline-foreground-link-danger"
 			},
 			size: {
-				regular: "text-sm",
+				regular: "",
 				small: "text-xs"
 			},
 			disabled: {
diff --git a/web/src/lib/components/ui/Logo.stories.svelte b/web/src/lib/components/ui/Logo.stories.svelte
index 315a7a28..1fd1f978 100644
--- a/web/src/lib/components/ui/Logo.stories.svelte
+++ b/web/src/lib/components/ui/Logo.stories.svelte
@@ -39,7 +39,7 @@
 </Story>
 
 <Story name="On Emphasis" asChild>
-	<div class="bg-background-success-emphasis flex flex-col items-start gap-4 rounded p-4">
+	<div class="flex flex-col items-start gap-4 rounded bg-background-success-emphasis p-4">
 		<Logo class="text-foreground-on-emphasis" />
 		<Logo wordmark class="text-foreground-on-emphasis" />
 	</div>
diff --git a/web/src/lib/components/ui/Logo.svelte b/web/src/lib/components/ui/Logo.svelte
index cf7bf5ef..65ba3611 100644
--- a/web/src/lib/components/ui/Logo.svelte
+++ b/web/src/lib/components/ui/Logo.svelte
@@ -73,7 +73,7 @@
 	<span class="inline-flex items-center gap-2 select-none">
 		{@render mark()}
 		<span
-			class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal not-italic text-foreground-default"
+			class="rounded bg-background-subtle px-1 text-[10px] leading-4 font-normal text-foreground-default not-italic"
 		>
 			alpha
 		</span>
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index c9a7fb57..ef3d5d4b 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -97,7 +97,7 @@
 			</Button>
 		{:else}
 			<span
-				class="flex size-8 items-center justify-center text-foreground-subtle pointer-events-none select-none"
+				class="pointer-events-none flex size-8 items-center justify-center text-foreground-subtle select-none"
 				aria-hidden="true"
 			>
 				&hellip;
diff --git a/web/src/lib/components/ui/Radio.svelte b/web/src/lib/components/ui/Radio.svelte
index 2de256e1..3cbc634b 100644
--- a/web/src/lib/components/ui/Radio.svelte
+++ b/web/src/lib/components/ui/Radio.svelte
@@ -31,18 +31,18 @@
 			{value}
 			bind:group
 			{disabled}
-			class="peer size-4 shrink-0 appearance-none rounded-full cursor-pointer border border-border-strong bg-background-default transition-colors duration-150 \
-			     hover:bg-background-subtle \
-				 checked:border-foreground-default \
-				   focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default \
-				   disabled:cursor-not-allowed disabled:pointer-events-none disabled:border-border-disabled disabled:hover:bg-inherit"
+			class="peer \ \ \ \ size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-border-strong
+			     bg-background-default transition-colors
+				 duration-150 checked:border-foreground-default
+				   hover:bg-background-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default
+				   disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-border-disabled disabled:hover:bg-inherit"
 			{...rest}
 		/>
 		<span
-			class="absolute inset-0 m-auto hidden size-2 rounded-full \
-			      bg-foreground-default \
-			      peer-checked:block \
-				  peer-disabled:text-foreground-disabled peer-disabled:bg-foreground-disabled"
+			class="\ \ \ absolute inset-0 m-auto hidden
+			      size-2 rounded-full
+			      bg-foreground-default peer-checked:block
+				  peer-disabled:bg-foreground-disabled peer-disabled:text-foreground-disabled"
 			aria-hidden="true"
 		></span>
 	</span>
diff --git a/web/src/lib/components/ui/Section.stories.svelte b/web/src/lib/components/ui/Section.stories.svelte
new file mode 100644
index 00000000..1a573e6c
--- /dev/null
+++ b/web/src/lib/components/ui/Section.stories.svelte
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Section from "./Section.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/Section",
+		component: Section,
+		tags: ["autodocs"]
+	});
+</script>
+
+{#snippet items()}
+	<div class="rounded-sm border border-border-default p-4">First item</div>
+	<div class="rounded-sm border border-border-default p-4">Second item</div>
+	<div class="rounded-sm border border-border-default p-4">Third item</div>
+{/snippet}
+
+<Story name="Default" asChild>
+	<Section title="Repositories" empty={false} emptyMessage="No repositories yet.">
+		{@render items()}
+	</Section>
+</Story>
+
+<!-- With `empty`, children are ignored and EmptyState renders with `emptyMessage`. -->
+<Story name="Empty" asChild>
+	<Section title="Repositories" empty emptyMessage="No repositories yet.">
+		{@render items()}
+	</Section>
+</Story>
+
+<Story name="Without title" asChild>
+	<Section empty={false} emptyMessage="Nothing here.">
+		{@render items()}
+	</Section>
+</Story>
+
+<!-- `header` renders between the title and the list; `listClass` overrides the list layout. -->
+<Story name="Header and custom list" asChild>
+	<Section
+		title="Pinned"
+		empty={false}
+		emptyMessage="Nothing pinned."
+		listClass="grid grid-cols-2 gap-4"
+	>
+		{#snippet header()}
+			<p class="px-2 pb-2 text-sm text-foreground-subtle">Up to four pinned repositories.</p>
+		{/snippet}
+		{@render items()}
+	</Section>
+</Story>
diff --git a/web/src/lib/components/ui/Section.svelte b/web/src/lib/components/ui/Section.svelte
new file mode 100644
index 00000000..712ed5e5
--- /dev/null
+++ b/web/src/lib/components/ui/Section.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import EmptyState from "./EmptyState.svelte";
+
+	interface Props {
+		title?: string;
+		empty: boolean;
+		emptyMessage: string;
+		listClass?: string;
+		header?: Snippet;
+		children: Snippet;
+	}
+
+	let {
+		title,
+		empty,
+		emptyMessage,
+		listClass = "flex flex-col gap-4",
+		header,
+		children
+	}: Props = $props();
+</script>
+
+<section>
+	{#if title}
+		<h2 class="px-2 pb-4 text-base font-medium">{title}</h2>
+	{/if}
+	{@render header?.()}
+	{#if empty}
+		<EmptyState message={emptyMessage} />
+	{:else}
+		<div class={listClass}>
+			{@render children()}
+		</div>
+	{/if}
+</section>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index cf206b4d..f5bfa2f8 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const select = tv({
-		base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm outline-none transition-colors disabled:cursor-not-allowed",
+		base: "w-full appearance-none rounded border bg-background-default px-3 py-2 pr-9 text-sm transition-colors outline-none disabled:cursor-not-allowed",
 		variants: {
 			error: {
 				false:
@@ -31,7 +31,7 @@
 	export type SelectVariants = VariantProps<typeof select>;
 
 	const chevron = tv({
-		base: "pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-foreground-subtle",
+		base: "pointer-events-none absolute top-1/2 right-3 size-3.5 -translate-y-1/2 text-foreground-subtle",
 		variants: {
 			error: {
 				true: "text-foreground-danger"
diff --git a/web/src/lib/components/ui/Tabs.stories.svelte b/web/src/lib/components/ui/Tabs.stories.svelte
new file mode 100644
index 00000000..8f4e83aa
--- /dev/null
+++ b/web/src/lib/components/ui/Tabs.stories.svelte
@@ -0,0 +1,32 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Tabs from "./Tabs.svelte";
+	import BookMarked from "$icon/book-marked";
+	import Star from "$icon/star";
+	import SquareChartGantt from "$icon/square-chart-gantt";
+
+	const tabs = [
+		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
+		{ id: "repos", label: "Repositories", icon: BookMarked, count: 12, href: "#" },
+		{ id: "starred", label: "Starred", icon: Star, count: 3, href: "#" }
+	];
+
+	const plainTabs = [
+		{ id: "open", label: "Open", count: 4, href: "#" },
+		{ id: "closed", label: "Closed", count: 28, href: "#" }
+	];
+
+	const { Story } = defineMeta({
+		title: "UI/Tabs",
+		component: Tabs,
+		tags: ["autodocs"],
+		args: {
+			tabs,
+			active: "overview"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="SecondActive" args={{ active: "repos" }} />
+<Story name="WithoutIcons" args={{ tabs: plainTabs, active: "open" }} />
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
new file mode 100644
index 00000000..e12b7b39
--- /dev/null
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -0,0 +1,56 @@
+<script module lang="ts">
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+
+	export interface TabDef {
+		id: string;
+		label: string;
+		href: string;
+		icon?: Component<SvelteHTMLElements["svg"]>;
+		count?: number;
+	}
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+
+	interface Props {
+		tabs: TabDef[];
+		active: string;
+		label?: string;
+	}
+
+	let { tabs, active, label }: Props = $props();
+</script>
+
+<nav class="w-full overflow-x-auto overflow-y-hidden pl-4" aria-label={label}>
+	<div class="flex">
+		{#each tabs as tab (tab.id)}
+			{@const isActive = active === tab.id}
+			{@const Glyph = tab.icon}
+			<a
+				href={resolve(tab.href as "/")}
+				class="group relative -mr-px no-underline hover:no-underline"
+				aria-current={isActive ? "page" : undefined}
+			>
+				<div
+					class={`relative mr-1 min-w-[80px] rounded-t px-4 py-1 text-center whitespace-nowrap text-foreground-default ${
+						isActive
+							? "-mb-px bg-background-default font-medium"
+							: "group-hover:bg-background-inset/25"
+					}`}
+				>
+					<span class="flex items-center justify-center">
+						{#if Glyph}
+							<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
+						{/if}
+						{tab.label}
+						{#if tab.count}
+							<span class="ml-1 rounded bg-background-inset px-1 text-sm">{tab.count}</span>
+						{/if}
+					</span>
+				</div>
+			</a>
+		{/each}
+	</div>
+</nav>
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index 09b86af8..ab69fbef 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -2,7 +2,7 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const tag = tv({
-		base: "inline-flex select-none items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium leading-none",
+		base: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs leading-none font-medium select-none",
 		variants: {
 			color: {
 				default: "border border-border-default bg-background-default text-foreground-default",
diff --git a/web/src/lib/components/ui/Textarea.svelte b/web/src/lib/components/ui/Textarea.svelte
index da0511e4..61f83d3b 100644
--- a/web/src/lib/components/ui/Textarea.svelte
+++ b/web/src/lib/components/ui/Textarea.svelte
@@ -80,7 +80,7 @@
 <div class={root({ class: className })}>
 	{#if iconLeft}
 		{@const IconLeft = iconLeft}
-		<IconLeft class="size-4 mt-0.5 mr-1 shrink-0 text-foreground-subtle" aria-hidden="true" />
+		<IconLeft class="mt-0.5 mr-1 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 	{/if}
 	<textarea
 		bind:value
@@ -91,9 +91,9 @@
 		class={textarea({ class: loading ? "pr-5" : undefined })}
 		{...rest}></textarea>
 	{#if loading}
-		<Spinner class="absolute right-2.5 top-2 size-4" />
+		<Spinner class="absolute top-2 right-2.5 size-4" />
 	{:else if iconRight}
 		{@const IconRight = iconRight}
-		<IconRight class="size-4 mt-0.5 ml-1 shrink-0 text-foreground-subtle" aria-hidden="true" />
+		<IconRight class="mt-0.5 ml-1 size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
 	{/if}
 </div>
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index 701871bf..87beb4a8 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -2,7 +2,7 @@
 	import { page } from "$app/state";
 	import { setContext } from "svelte";
 	import { createProfileCounts, PROFILE_COUNTS_KEY } from "$lib/components/profile/counts.svelte";
-	import EmptyState from "$lib/components/profile/EmptyState.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
 	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
 
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 145192ed..2449209a 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -43,7 +43,7 @@
 		<a href={appPath("/")} class="flex items-center gap-2 no-underline hover:no-underline">
 			<img src="/logos/logotype.svg" alt="tangled" class="h-24 w-48 dark:invert" />
 		</a>
-		<p class="text-center text-xl italic text-foreground-default">tightly-knit social coding.</p>
+		<p class="text-center text-xl text-foreground-default italic">tightly-knit social coding.</p>
 	</div>
 
 	<form class="mt-4" onsubmit={submit}>
@@ -60,7 +60,7 @@
 				inputmode="url"
 				required
 				placeholder="akshay.tngl.sh"
-				class="w-full rounded border border-border-default bg-background-default p-3 text-lg text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong md:text-base"
+				class="w-full rounded border border-border-default bg-background-default p-3 text-lg text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:text-base"
 			/>
 			<p class="mt-1 text-sm text-foreground-subtle">
 				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index 66427067..c16b7ac6 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import { getAuth } from "$lib/auth.svelte";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
@@ -23,32 +24,36 @@
 <div class="mx-auto w-full max-w-2xl px-4 py-12">
 	<div class="px-6 py-2">
 		<h1 class="text-xl font-bold text-foreground-default">Create a new repository</h1>
-		<p class="text-sm text-foreground-subtle mb-1">
+		<p class="mb-1 text-sm text-foreground-subtle">
 			Repositories contain a project's files and version history. All repositories are publicly
 			accessible.
 		</p>
 	</div>
 
-	<div class="bg-background-default drop-shadow-sm rounded p-6">
+	<div class="rounded bg-background-default p-6 drop-shadow-sm">
 		<form>
-			<div class="flex gap-4 relative border-l border-border-default pl-6">
-				<div class="absolute -left-3 -top-0">
-					<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 text-foreground-muted">
+			<div class="relative flex gap-4 border-l border-border-default pl-6">
+				<div class="absolute -top-0 -left-3">
+					<div
+						class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
+					>
 						1
 					</div>
 				</div>
 
 				<div class="flex-1 pb-12">
 					<h2 class="text-lg font-medium text-foreground-default">General</h2>
-					<div class="text-sm text-foreground-subtle mb-4">Basic repository information.</div>
+					<div class="mb-4 text-sm text-foreground-subtle">Basic repository information.</div>
 
 					<div class="space-y-2">
 						<div>
-							<label class="block text-sm font-bold text-foreground-default mb-1">
+							<label class="mb-1 block text-sm font-bold text-foreground-default">
 								Repository name
 							</label>
-							<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
-								<div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-foreground-muted md:border md:border-r-0 md:border-border-default md:rounded-l md:bg-background-inset">
+							<div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0">
+								<div
+									class="hidden shrink-0 items-center gap-1 px-2 py-2 text-sm text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
+								>
 									<Avatar src={user?.avatar} handle={user?.handle} size="size-5" />
 									<span>{user?.handle ?? "…"}</span>
 								</div>
@@ -59,17 +64,17 @@
 									placeholder="repository-name"
 									bind:value={repoName}
 									required
-									class="flex-1 md:rounded-r md:rounded-l-none py-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong px-2"
+									class="flex-1 rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
 								/>
 							</div>
-							<p class="text-sm text-foreground-subtle mt-1">
+							<p class="mt-1 text-sm text-foreground-subtle">
 								Choose a unique, descriptive name for your repository. Use letters, numbers, and
 								hyphens.
 							</p>
 						</div>
 
 						<div>
-							<label for="description" class="block text-sm font-bold text-foreground-default mb-1">
+							<label for="description" class="mb-1 block text-sm font-bold text-foreground-default">
 								Description
 							</label>
 							<input
@@ -79,9 +84,9 @@
 								placeholder="A brief description of your project..."
 								maxlength={140}
 								bind:value={description}
-								class="w-full py-2 px-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong"
+								class="w-full rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 							/>
-							<p class="text-sm text-foreground-subtle mt-1">
+							<p class="mt-1 text-sm text-foreground-subtle">
 								Optional. A short description to help others understand what your project does (max
 								140 characters).
 							</p>
@@ -90,20 +95,22 @@
 				</div>
 			</div>
 
-			<div class="flex gap-4 relative border-l border-border-default pl-6">
-				<div class="absolute -left-3 -top-0">
-					<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 text-foreground-muted">
+			<div class="relative flex gap-4 border-l border-border-default pl-6">
+				<div class="absolute -top-0 -left-3">
+					<div
+						class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
+					>
 						2
 					</div>
 				</div>
 
 				<div class="flex-1">
 					<h2 class="text-lg font-medium text-foreground-default">Configuration</h2>
-					<div class="text-sm text-foreground-subtle mb-4">Repository settings and hosting.</div>
+					<div class="mb-4 text-sm text-foreground-subtle">Repository settings and hosting.</div>
 
 					<div class="space-y-2">
 						<div>
-							<label for="branch" class="block text-sm font-bold text-foreground-default mb-1">
+							<label for="branch" class="mb-1 block text-sm font-bold text-foreground-default">
 								Default branch
 							</label>
 							<input
@@ -112,27 +119,29 @@
 								type="text"
 								bind:value={defaultBranch}
 								required
-								class="w-full py-2 px-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong"
+								class="w-full rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 							/>
-							<p class="text-sm text-foreground-subtle mt-1">
+							<p class="mt-1 text-sm text-foreground-subtle">
 								The primary branch where development happens. Common choices are "main" or "master".
 							</p>
 						</div>
 
 						<div>
-							<label class="block text-sm font-bold text-foreground-default mb-1">
+							<label class="mb-1 block text-sm font-bold text-foreground-default">
 								Select a knot
 							</label>
 							<div class="w-full space-y-2">
-								{#each knots as knot}
+								{#each knots as knot (knot)}
 									<Radio value={knot} bind:group={selectedKnot} name="domain">
 										{knot}
 									</Radio>
 								{/each}
 							</div>
-							<p class="text-sm text-foreground-subtle mt-1">
+							<p class="mt-1 text-sm text-foreground-subtle">
 								A knot hosts repository data and handles Git operations. You can also
-								<a href="/settings/knots" class="underline">register your own knot</a>.
+								<a href={resolve("/settings/knots" as "/")} class="underline"
+									>register your own knot</a
+								>.
 							</p>
 						</div>
 					</div>
@@ -140,9 +149,7 @@
 			</div>
 
 			<div class="mt-8 flex justify-end">
-				<Button variant="primary" type="submit" icon={BookPlus}>
-					Create repository (TODO)
-				</Button>
+				<Button variant="primary" type="submit" icon={BookPlus}>Create repository (TODO)</Button>
 			</div>
 		</form>
 	</div>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 2cf18024..e293cd93 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,4 +1,3 @@
-/// <reference types="vitest/config" />
 import tailwindcss from "@tailwindcss/vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 import Icons from "unplugin-icons/vite";