diff --git a/web/src/lib/components/comment/CommentBox.svelte b/web/src/lib/components/comment/CommentBox.svelte
index 89c92c4bb..363db47f4 100644
--- a/web/src/lib/components/comment/CommentBox.svelte
+++ b/web/src/lib/components/comment/CommentBox.svelte
@@ -2,6 +2,7 @@
 	import MessageSquarePlus from "$icon/message-square-plus";
 	import Reply from "$icon/reply";
 	import { type MarkupContext } from "$lib/markup";
+	import Card from "$lib/components/ui/Card.svelte";
 	import CommentEditor from "./CommentEditor.svelte";
 	import type { ThreadInput } from "./comments";
 
@@ -63,7 +64,7 @@
 		{@render editor()}
 	</div>
 {:else}
-	<div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
+	<Card padding="small" class="drop-shadow-xs">
 		{@render editor()}
-	</div>
+	</Card>
 {/if}
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 02a455fa6..7c6e6919d 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import FileText from "$icon/file-text";
+	import Card from "$lib/components/ui/Card.svelte";
 
 	interface Props {
 		filename: string;
@@ -10,9 +11,7 @@
 	let { filename, contents, html = null }: Props = $props();
 </script>
 
-<div
-	class="mt-4 w-full overflow-hidden rounded-sm border border-border-default bg-background-default"
->
+<Card padding="none" class="mt-4 w-full overflow-hidden">
 	<div class="border-b border-border-default px-4 py-2">
 		<span class="flex items-center gap-2">
 			<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
@@ -28,4 +27,4 @@
 				class="typography-monospace-small whitespace-pre text-foreground-default">{contents}</pre>
 		</div>
 	{/if}
-</div>
+</Card>
diff --git a/web/src/lib/components/repo/RepoForkForm.svelte b/web/src/lib/components/repo/RepoForkForm.svelte
index 00837cfdf..8e2369ef0 100644
--- a/web/src/lib/components/repo/RepoForkForm.svelte
+++ b/web/src/lib/components/repo/RepoForkForm.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import GitFork from "$icon/git-fork";
 	import { createRepo, knotServiceUrl } from "$lib/api/repoCreate";
+	import Card from "$lib/components/ui/Card.svelte";
 	import RepoCreationForm, { type RepoCreationSubmit } from "./RepoCreationForm.svelte";
 	import type { RepoInfo } from "./types";
 
@@ -40,7 +41,7 @@
 		</h1>
 	</div>
 
-	<div class="overflow-hidden rounded-sm border border-border-default bg-background-default">
+	<Card padding="none" class="overflow-hidden">
 		<div class="border-b border-border-default px-6 py-4 typography-paragraph-small">
 			<p class="font-medium text-foreground-default">A fork is a copy of a repository.</p>
 			<p class="text-foreground-subtle">
@@ -58,5 +59,5 @@
 			icon={GitFork}
 			{submit}
 		/>
-	</div>
+	</Card>
 </div>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte
index 398012674..f322cabe6 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte
@@ -2,6 +2,7 @@
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import type { ComponentProps } from "svelte";
 	import PullCommitListDiff from "./PullCommitListDiff.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import { pipelinesByCommitHash } from "$fixtures/pipelines";
 	import type { CommitSummary } from "$lib/components/repo/types";
 
@@ -57,9 +58,9 @@
 </script>
 
 {#snippet frame(args: Props)}
-	<div class="w-150 rounded-sm border border-border-default bg-background-default p-4">
+	<Card padding="small" class="w-150">
 		<PullCommitListDiff {...args} />
-	</div>
+	</Card>
 {/snippet}
 
 <Story name="Whole version selected">
@@ -89,9 +90,7 @@
 
 <Story name="Interactive">
 	{#snippet template(args)}
-		<div
-			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
-		>
+		<Card padding="small" class="w-150 space-y-2">
 			<PullCommitListDiff
 				{...args}
 				commitRange={picked}
@@ -99,6 +98,6 @@
 			/>
 			<output class="typography-monospace-small">picked v{picked.start}..v{picked.end}</output
 			>
-		</div>
+		</Card>
 	{/snippet}
 </Story>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
index da42127f9..ce99dd1d9 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
@@ -4,6 +4,7 @@
 	import PullCommitListHeader from "./PullCommitListHeader.svelte";
 	import IterationCcw from "$icon/iteration-ccw";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import type { CommitSummary } from "$lib/components/repo/types";
 	import type { PullSubmission } from "$lib/api";
 
@@ -73,9 +74,9 @@
 </script>
 
 {#snippet frame(args: Props)}
-	<div class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4">
+	<Card padding="small" class="w-150 space-y-2">
 		<PullCommitListHeader {...args} />
-	</div>
+	</Card>
 {/snippet}
 
 <Story name="Latest version selected">
@@ -94,15 +95,13 @@
 <!-- the appview slots resubmit/approve buttons in here, next to the version list -->
 <Story name="With actions slot">
 	{#snippet template(args)}
-		<div
-			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
-		>
+		<Card padding="small" class="w-150 space-y-2">
 			<PullCommitListHeader {...args}>
 				{#snippet actions()}
 					<Button icon={IterationCcw} title="Resubmit pull request">Resubmit</Button>
 				{/snippet}
 			</PullCommitListHeader>
-		</div>
+		</Card>
 	{/snippet}
 </Story>
 
@@ -117,9 +116,7 @@
 
 <Story name="Interactive">
 	{#snippet template(args)}
-		<div
-			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
-		>
+		<Card padding="small" class="w-150 space-y-2">
 			<PullCommitListHeader
 				{...args}
 				versionRange={viewed}
@@ -132,6 +129,6 @@
 				viewing v{viewed.start}{viewed.start === viewed.end ? "" : `..v${viewed.end}`} · {commits_}
 				commit{commits_ === 1 ? "" : "s"}
 			</output>
-		</div>
+		</Card>
 	{/snippet}
 </Story>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte
index 95271e9b2..5cedf28db 100644
--- a/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte
@@ -80,13 +80,6 @@
 	{/snippet}
 </Story>
 
-<!-- the commit with no change id renders muted and is not clickable -->
-<Story name="Commit without a change id" args={{ changeId: "" }}>
-	{#snippet template(args)}
-		{@render frame(args)}
-	{/snippet}
-</Story>
-
 <Story
 	name="With pipeline statuses"
 	args={{
diff --git a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
index eaa465770..e97732b4a 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
@@ -85,14 +85,20 @@
 	name="Multiaccount"
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const trigger = canvas.getByRole("button", { name: /open as alice/i });
-		await expect(trigger).toBeInTheDocument();
-		await userEvent.click(trigger);
-		await userEvent.click(await canvas.findByRole("menuitem", { name: /bob/i }));
-		// the story's bobbin is fake, the diverged refetch fails and the fork
-		// lane falls back to its empty state
-		await canvas.findByText(/select a fork first/i, {}, { timeout: 5000 });
-		await expect(canvas.getByRole("button", { name: /open as bob/i })).toBeInTheDocument();
+		const originalFetch = window.fetch;
+		window.fetch = (async () => new Response(null, { status: 404 })) as typeof fetch;
+		try {
+			const trigger = canvas.getByRole("button", { name: /open as alice/i });
+			await expect(trigger).toBeInTheDocument();
+			await userEvent.click(trigger);
+			await userEvent.click(await canvas.findByRole("menuitem", { name: /bob/i }));
+			// the story's bobbin is fake, the diverged refetch fails and the fork
+			// lane falls back to its empty state
+			await canvas.findByText(/select a fork first/i);
+			await expect(canvas.getByRole("button", { name: /open as bob/i })).toBeInTheDocument();
+		} finally {
+			window.fetch = originalFetch;
+		}
 	}}
 >
 	{#snippet template(args)}
diff --git a/web/src/lib/components/search/CodeResultCard.svelte b/web/src/lib/components/search/CodeResultCard.svelte
index 52a228eaf..a4271bc2e 100644
--- a/web/src/lib/components/search/CodeResultCard.svelte
+++ b/web/src/lib/components/search/CodeResultCard.svelte
@@ -4,6 +4,7 @@
 	import Star from "$icon/star";
 	import type { FileResult } from "$lib/api/lexicons/types/org/tangled/temp/search/searchCode";
 	import { formatCount } from "$lib/format";
+	import Card from "$lib/components/ui/Card.svelte";
 	import FileMatch from "./FileMatch.svelte";
 
 	let { result }: { result: FileResult } = $props();
@@ -12,9 +13,7 @@
 	const branches = $derived(result.branches ?? []);
 </script>
 
-<div
-	class="flex flex-col gap-2 rounded-sm border border-border-default bg-background-default p-3 text-foreground-default"
->
+<Card padding="none" class="flex flex-col gap-2 p-3 text-foreground-default">
 	<div class="flex items-center gap-1 px-1">
 		<div class="flex min-w-0 items-center gap-1.5 font-medium">
 			<BookMarked class="size-4 shrink-0 text-foreground-subtle" aria-hidden="true" />
@@ -40,4 +39,4 @@
 	</div>
 
 	<FileMatch {result} />
-</div>
+</Card>
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
index 76a13bfb9..ee2413974 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
@@ -34,6 +34,7 @@
 	import { renderMarkup } from "$lib/markup";
 	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
 	import Ticket from "$lib/components/repo/tickets/Ticket.svelte";
+	import Card from "$lib/components/ui/Card.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import type { ResolvedPathname } from "$app/types";
 	import type { Did } from "@atcute/lexicons/syntax";
@@ -519,9 +520,7 @@
 		</TabPanel>
 		{#if pull.versions.length}
 			<!-- PR Commits -->
-			<div
-				class="space-y-2 rounded-sm border border-border-default bg-background-default p-4"
-			>
+			<Card padding="small" class="space-y-2">
 				<PullCommitListHeader
 					versions={pull.versions}
 					{commits}
@@ -560,11 +559,9 @@
 				{:else}
 					<PullCommitListDiff {commits} {commitRange} oncommitCommits={confirmCommits} />
 				{/if}
-			</div>
+			</Card>
 		{:else}
-			<div
-				class="space-y-2 rounded-sm border border-border-default bg-background-default p-4"
-			>
+			<Card padding="small" class="space-y-2">
 				<p class="text-foreground-subtle">
 					This pull request has no versions submitted yet.
 				</p>
@@ -585,7 +582,7 @@
 					</Button>
 				{/if}
 				<ErrorAlert label={resubmit.error} />
-			</div>
+			</Card>
 		{/if}
 		<div use:stickyTrigger class="h-0"></div>
 		<!-- PR Diff -->
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index c5bd3b689..57c89ddfb 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import BookPlus from "$icon/book-plus";
 	import { createRepo } from "$lib/api/repoCreate";
+	import Card from "$lib/components/ui/Card.svelte";
 	import RepoCreationForm, {
 		type RepoCreationSubmit
 	} from "$lib/components/repo/RepoCreationForm.svelte";
@@ -30,7 +31,7 @@
 		</p>
 	</div>
 
-	<div class="rounded-sm border border-border-default bg-background-default">
+	<Card padding="none">
 		<RepoCreationForm
 			class="p-6"
 			initial={{ name: "", description: "", defaultBranch: "main" }}
@@ -41,5 +42,5 @@
 			icon={BookPlus}
 			{submit}
 		/>
-	</div>
+	</Card>
 </div>