diff --git a/web/src/lib/components/profile/PagedList.svelte b/web/src/lib/components/profile/PagedList.svelte
index 0d45c4db4..e63952619 100644
--- a/web/src/lib/components/profile/PagedList.svelte
+++ b/web/src/lib/components/profile/PagedList.svelte
@@ -112,7 +112,6 @@
 					labels
 					disabled={loading}
 					onchange={(target) => void select(target)}
-					class="gap-lg"
 				/>
 			</div>
 		{/if}
diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index 2061c8d1b..c7e9b8e28 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -67,6 +67,6 @@
 
 {#if pageCount > 1}
 	<div class="mt-md flex justify-center">
-		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-lg" />
+		<Pagination {page} total={pageCount} labels onchange={onPageChange} />
 	</div>
 {/if}
diff --git a/web/src/lib/components/repo/FileHistoryView.svelte b/web/src/lib/components/repo/FileHistoryView.svelte
index 69cd7ca50..c4d4bce74 100644
--- a/web/src/lib/components/repo/FileHistoryView.svelte
+++ b/web/src/lib/components/repo/FileHistoryView.svelte
@@ -90,6 +90,6 @@
 
 {#if pageCount > 1}
 	<div class="mt-md flex justify-center">
-		<Pagination {page} total={pageCount} labels onchange={onPageChange} class="gap-lg" />
+		<Pagination {page} total={pageCount} labels onchange={onPageChange} />
 	</div>
 {/if}
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index 9998c7fc6..681a22fa6 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -16,10 +16,15 @@
 			selected: {
 				true: { page: "font-medium text-foreground-default hover:bg-transparent" },
 				false: { page: "text-foreground-muted hover:text-foreground-default" }
+			},
+			labels: {
+				true: { nav: "gap-lg" },
+				false: {}
 			}
 		},
 		defaultVariants: {
-			selected: false
+			selected: false,
+			labels: false
 		}
 	});
 
@@ -117,7 +122,7 @@
 
 	const spent = (can: boolean) => (disabled || !can ? "true" : undefined);
 
-	const style = $derived(pagination());
+	const style = $derived(pagination({ labels }));
 </script>
 
 <nav
diff --git a/web/src/lib/components/ui/RoutePagination.stories.svelte b/web/src/lib/components/ui/RoutePagination.stories.svelte
new file mode 100644
index 000000000..6ef7e842f
--- /dev/null
+++ b/web/src/lib/components/ui/RoutePagination.stories.svelte
@@ -0,0 +1,50 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Card from "#lib/components/ui/Card.svelte";
+	import ListPanel, { listRows } from "#lib/components/ui/ListPanel.svelte";
+	import RoutePagination from "#lib/components/ui/RoutePagination.svelte";
+
+	const rows = [
+		"Add a full trending repositories view",
+		"Packfile push times out over the smart protocol",
+		"Dark mode contrast on the issue label panel"
+	];
+
+	const { Story } = defineMeta({
+		title: "UI/RoutePagination",
+		component: RoutePagination,
+		tags: ["autodocs"]
+	});
+</script>
+
+<Story name="In list panel" asChild>
+	<ListPanel>
+		{#snippet toolbar()}
+			<p class="typography-paragraph-small text-foreground-muted">Toolbar</p>
+		{/snippet}
+		<div class={listRows}>
+			{#each rows as row (row)}
+				<p class="p-sm typography-paragraph-regular">{row}</p>
+			{/each}
+		</div>
+		<RoutePagination page={1} pageCount={12} class="p-sm" />
+	</ListPanel>
+</Story>
+
+<Story name="In card" asChild>
+	<Card class="flex flex-col gap-md">
+		{#each rows as row (row)}
+			<p class="typography-paragraph-regular">{row}</p>
+		{/each}
+		<RoutePagination page={1} pageCount={12} />
+	</Card>
+</Story>
+
+<Story name="Below card" asChild>
+	<Card>
+		{#each rows as row (row)}
+			<p class="typography-paragraph-regular">{row}</p>
+		{/each}
+	</Card>
+	<RoutePagination page={5} pageCount={12} labels class="mt-md" />
+</Story>
diff --git a/web/src/lib/components/ui/RoutePagination.svelte b/web/src/lib/components/ui/RoutePagination.svelte
index 7564250cb..55b8cdeef 100644
--- a/web/src/lib/components/ui/RoutePagination.svelte
+++ b/web/src/lib/components/ui/RoutePagination.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from "tailwind-variants";
 	import Pagination from "#lib/components/ui/Pagination.svelte";
 	import Pending from "#lib/components/ui/Pending.svelte";
 	import { gotoPage } from "#lib/pagination.svelte.ts";
@@ -16,14 +17,8 @@
 <Pending>
 	{@const count = await pageCount}
 	{#if count > 1}
-		<div class="mt-md flex justify-center">
-			<Pagination
-				page={currentPage}
-				total={count}
-				{labels}
-				class={className}
-				onchange={gotoPage}
-			/>
+		<div class={cn("flex justify-center", className)}>
+			<Pagination page={currentPage} total={count} {labels} onchange={gotoPage} />
 		</div>
 	{/if}
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/branches/+page.svelte b/web/src/routes/[handle]/[repo]/branches/+page.svelte
index 5c9bf0f90..127107288 100644
--- a/web/src/routes/[handle]/[repo]/branches/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/branches/+page.svelte
@@ -21,4 +21,4 @@
 	/>
 </Pending>
 
-<RoutePagination page={data.page} pageCount={data.pageCount} labels class="gap-lg" />
+<RoutePagination page={data.page} pageCount={data.pageCount} labels class="mt-md" />
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.svelte b/web/src/routes/[handle]/[repo]/issues/+page.svelte
index 83fc10cf6..272f3da44 100644
--- a/web/src/routes/[handle]/[repo]/issues/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/+page.svelte
@@ -48,7 +48,7 @@
 				tickets={issues}
 				filtered={withoutStates(data.query) !== ""}
 			/>
-			<RoutePagination page={data.page} pageCount={data.pageCount} />
+			<RoutePagination page={data.page} pageCount={data.pageCount} class="p-sm" />
 		{/await}
 	</ListPanel>
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
index c8c5e7964..4fe955ef0 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
@@ -55,7 +55,7 @@
 					filtered={await data.filtered}
 					forkLabels={data.forkLabels}
 				/>
-				<RoutePagination page={data.page} pageCount={data.pageCount} />
+				<RoutePagination page={data.page} pageCount={data.pageCount} class="p-sm" />
 			{/if}
 		</Pending>
 	</ListPanel>
diff --git a/web/src/routes/[handle]/[repo]/pulls/+page.svelte b/web/src/routes/[handle]/[repo]/pulls/+page.svelte
index ad01b9dd9..066d779e6 100644
--- a/web/src/routes/[handle]/[repo]/pulls/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/+page.svelte
@@ -50,7 +50,7 @@
 				tickets={pulls}
 				filtered={withoutStates(data.query) !== ""}
 			/>
-			<RoutePagination page={data.page} pageCount={data.pageCount} />
+			<RoutePagination page={data.page} pageCount={data.pageCount} class="p-sm" />
 		{/await}
 	</ListPanel>
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/tags/+page.svelte b/web/src/routes/[handle]/[repo]/tags/+page.svelte
index 4b517d690..307d4d0b4 100644
--- a/web/src/routes/[handle]/[repo]/tags/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tags/+page.svelte
@@ -23,4 +23,4 @@
 	</Card>
 </Pending>
 
-<RoutePagination page={data.page} pageCount={data.pageCount} labels class="gap-lg" />
+<RoutePagination page={data.page} pageCount={data.pageCount} labels class="mt-md" />