diff --git a/apps/svelte.dev/src/routes/(packages)/packages/+page.server.ts b/apps/svelte.dev/src/routes/(packages)/packages/+page.server.ts
index dab68d7fd8..b0003ce934 100644
--- a/apps/svelte.dev/src/routes/(packages)/packages/+page.server.ts
+++ b/apps/svelte.dev/src/routes/(packages)/packages/+page.server.ts
@@ -8,16 +8,17 @@ export const prerender = false;
 export async function load({ url }) {
 	const query = url.searchParams.get('query');
 	const tags = (url.searchParams.get('tags') ?? '').split(',').filter(Boolean);
-	let page = +(url.searchParams.get('page')?.toString() ?? 0);
+	let page = Math.max(1, +(url.searchParams.get('page')?.toString() ?? 1));
 
 	init(registry);
 
 	const current_results = search(query, { tags, sort_by: 'popularity' });
 
 	const total_pages = Math.ceil(current_results.length / REGISTRY_PAGE_LIMIT);
+	console.log(page, total_pages);
 
-	if (page + 1 > total_pages) {
-		page = 0;
+	if (page > total_pages) {
+		page = 1;
 
 		const new_url = new URL(url);
 		new_url.searchParams.set('page', page + '');
@@ -25,8 +26,8 @@ export async function load({ url }) {
 	}
 
 	const current_results_paged = current_results.slice(
-		page * REGISTRY_PAGE_LIMIT,
-		page * REGISTRY_PAGE_LIMIT + REGISTRY_PAGE_LIMIT
+		(page - 1) * REGISTRY_PAGE_LIMIT,
+		(page - 1) * REGISTRY_PAGE_LIMIT + REGISTRY_PAGE_LIMIT
 	);
 
 	return {
diff --git a/apps/svelte.dev/src/routes/(packages)/packages/+page.svelte b/apps/svelte.dev/src/routes/(packages)/packages/+page.svelte
index 63c2c44a20..2e0baddd7a 100644
--- a/apps/svelte.dev/src/routes/(packages)/packages/+page.svelte
+++ b/apps/svelte.dev/src/routes/(packages)/packages/+page.svelte
@@ -5,13 +5,15 @@
 	import { Box, ReactiveQueryParam } from '@sveltejs/site-kit/reactivity';
 	import { onMount } from 'svelte';
 	import SearchWorker from './packages-worker.ts?worker';
+	import { stopPropagation } from 'svelte/legacy';
+	import Pagination from './pagination.svelte';
 
 	const { data } = $props();
 
 	const query_qp = new ReactiveQueryParam<string>('query');
 	const page_qp = new ReactiveQueryParam<number>('page', {
 		encode: (v) => v.toString(),
-		decode: (v) => +v
+		decode: (v) => Math.max(1, v.length ? +v : 1)
 	});
 	const tags_qp = new ReactiveQueryParam<string[]>('tags', {
 		encode: (v) => v.join(','),
@@ -63,24 +65,25 @@
 		tags_qp.current;
 		page_qp.current;
 
-		if (ready) {
-			if (worker_first_run) {
-				worker_first_run = false;
-			} else {
-				const id = uid++;
-				pending.add(id);
-
-				worker.postMessage({
-					type: 'get',
-					id,
-					payload: {
-						query: query_qp.current,
-						page: page_qp.current,
-						tags: $state.snapshot(tags_qp.current)
-					}
-				});
-			}
+		if (!ready) return;
+
+		if (worker_first_run) {
+			worker_first_run = false;
+			return;
 		}
+
+		const id = uid++;
+		pending.add(id);
+
+		worker.postMessage({
+			type: 'get',
+			id,
+			payload: {
+				query: query_qp.current,
+				page: page_qp.current,
+				tags: $state.snapshot(tags_qp.current)
+			}
+		});
 	});
 
 	const number_formatter = Intl.NumberFormat();
@@ -103,7 +106,7 @@
 <h1 class="visually-hidden">Packages</h1>
 
 <div class="container">
-	<div class="toc-container" style="order: 1">
+	<div class="toc-container">
 		<nav aria-label="Docs">
 			<ul class="sidebar">
 				{#each [{ tag: 'all', short_title: 'All' }].concat(data.tags) as tag}
@@ -165,56 +168,48 @@
 					</li>
 				{/each}
 			</ul>
-
-			<div class="pagination">
-				{#each Array(total_pages.current), i}
-					{@const link = new URL(page.url)}
-					{@const _ = link.searchParams.set('page', i + '')}
-					<a
-						href={link.pathname + link.search}
-						aria-current={page_qp.current === i}
-						onclick={(e) => {
-							e.preventDefault();
-							page_qp.current = i;
-						}}>{i + 1}</a
-					>&nbsp;
-				{/each}
-			</div>
 		</nav>
 	</div>
 
 	<div class="page content">
 		<h1>Packages</h1>
 
-		<div class="posts">
-			<div class="controls">
-				<div class="input-group">
-					<input
-						use:forcefocus
-						onkeydown={(e) => {
-							if (e.key === 'Enter' && !e.isComposing) {
-								// const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
-								// element?.click();
-							}
-						}}
-						bind:value={query_qp.current}
-						placeholder="Search"
-						aria-describedby="search-description"
-						aria-label={'Search'}
-						spellcheck="false"
-					/>
-
-					<button aria-label="Clear" onclick={() => (query_qp.current = '')}>
-						<Icon name="close" />
-					</button>
-				</div>
-
-				<!-- <button class="raised" aria-label="Close" onclick={close}>
+		<div class="controls">
+			<label class="input-group">
+				<Icon name="search" />
+				<input
+					use:forcefocus
+					onkeydown={(e) => {
+						if (e.key === 'Enter' && !e.isComposing) {
+							// const element = modal.querySelector('a[data-has-node]') as HTMLElement | undefined;
+							// element?.click();
+						}
+					}}
+					bind:value={query_qp.current}
+					placeholder="Search"
+					aria-describedby="search-description"
+					aria-label={'Search'}
+					spellcheck="false"
+				/>
+
+				<button
+					aria-label="Clear"
+					onclick={(e) => {
+						e.stopPropagation();
+						query_qp.current = '';
+					}}
+				>
+					<Icon name="close" />
+				</button>
+			</label>
+
+			<!-- <button class="raised" aria-label="Close" onclick={close}>
 					<Icon name="close" />
 					<kbd>Esc</kbd>
 				</button> -->
-			</div>
+		</div>
 
+		<div class="posts">
 			{#each registry.current as pkg}
 				<article data-pubdate={pkg.updated}>
 					<a
@@ -286,6 +281,25 @@
 			{/each}
 		</div>
 
+		<div class="pagination">
+			<Pagination total={total_pages.current} bind:page={page_qp.current}>
+				{#snippet children(pageItem)}
+					{#if pageItem.type === 'ellipsis'}
+						<span>-</span>
+					{:else}
+						<button
+							aria-current={page_qp.current === pageItem.value}
+							onclick={() => {
+								page_qp.current = pageItem.value;
+							}}
+						>
+							{pageItem.value}
+						</button>
+					{/if}
+				{/snippet}
+			</Pagination>
+		</div>
+
 		<!-- <ul class="feed">
 			{#each [{ tag: 'all', short_title: 'All' }].concat(data.tags) as tag}
 				{@const link = new URL(page.url)}
@@ -391,28 +405,44 @@
 	}
 
 	.input-group {
-		position: relative;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
 		flex: 1;
 
+		border-radius: 0.5rem;
+		padding: 0.5rem 0.5rem 0.5rem 0rem;
+		margin-block-start: 1rem;
+
+		position: relative;
+
+		&:has(:focus-visible) {
+			outline: 2px solid var(--sk-fg-accent);
+			outline-offset: 4px;
+		}
+
+		/* Border that is not rounded */
+		&::after {
+			content: '';
+			position: absolute;
+			inset-block-end: 0;
+			inset-inline: 0;
+			height: 1px;
+			background: var(--sk-border);
+		}
+
 		input {
-			font: var(--sk-font-ui-large);
+			font: var(--sk-font-ui-medium);
 			width: 100%;
-			padding: var(--padding) 6rem var(--padding) calc(var(--padding) - 0.5rem);
-			height: 6rem;
-			border: none;
-			flex-shrink: 0;
 			color: var(--sk-fg-1);
-			border-bottom: 1px solid var(--sk-border);
 			background: inherit;
+			border: none;
+			outline: none;
 
 			&::placeholder {
 				color: var(--sk-fg-4);
 				opacity: 0.5;
 			}
-
-			&:focus-visible {
-				outline-offset: -2px;
-			}
 		}
 
 		button {
@@ -425,7 +455,7 @@
 
 			&:hover,
 			&:focus {
-				color: var(--sk-fg-3);
+				color: var(--sk-fg-1);
 			}
 
 			&:focus-visible {
@@ -434,6 +464,12 @@
 		}
 	}
 
+	.posts {
+		display: flex;
+		flex-direction: column;
+		margin-block-start: 4rem;
+	}
+
 	h2 {
 		display: inline-block;
 		color: var(--sk-fg-1);
@@ -500,12 +536,20 @@
 
 	.pagination {
 		display: flex;
+		justify-content: center;
 
-		a {
+		span {
+			opacity: 0.5;
+		}
+
+		button,
+		span {
+			width: 2rem;
+			text-align: center;
 			font: var(--sk-font-ui-medium);
 		}
 
-		a[aria-current='true'] {
+		button[aria-current='true'] {
 			color: var(--sk-fg-accent);
 			text-decoration: underline;
 		}
@@ -525,12 +569,7 @@
 	}
 
 	.toc-container {
-		background: var(--sk-bg-2);
 		display: none;
-
-		:root.dark & {
-			background: var(--sk-bg-0);
-		}
 	}
 
 	@media (min-width: 832px) {
diff --git a/apps/svelte.dev/src/routes/(packages)/packages/packages-worker.ts b/apps/svelte.dev/src/routes/(packages)/packages/packages-worker.ts
index cc28b304be..5a7d4524d3 100644
--- a/apps/svelte.dev/src/routes/(packages)/packages/packages-worker.ts
+++ b/apps/svelte.dev/src/routes/(packages)/packages/packages-worker.ts
@@ -11,13 +11,13 @@ addEventListener('message', async (event) => {
 	}
 
 	if (type === 'get') {
-		let { query, page = 0, tags = [] } = payload;
+		let { query, page = 1, tags = [] } = payload;
 
 		const current_results = search(query, { tags });
 		const total_pages = Math.ceil(current_results.length / REGISTRY_PAGE_LIMIT);
 
-		if (page + 1 > total_pages) {
-			page = 0;
+		if (page > total_pages) {
+			page = 1;
 
 			console.log('Redirecting to page 0');
 			postMessage({
@@ -34,8 +34,8 @@ addEventListener('message', async (event) => {
 			type: 'results',
 			payload: {
 				results: current_results.slice(
-					page * REGISTRY_PAGE_LIMIT,
-					page * REGISTRY_PAGE_LIMIT + REGISTRY_PAGE_LIMIT
+					(page - 1) * REGISTRY_PAGE_LIMIT,
+					(page - 1) * REGISTRY_PAGE_LIMIT + REGISTRY_PAGE_LIMIT
 				),
 				total_pages,
 				query
diff --git a/apps/svelte.dev/src/routes/(packages)/packages/pagination.svelte b/apps/svelte.dev/src/routes/(packages)/packages/pagination.svelte
new file mode 100644
index 0000000000..93b302f316
--- /dev/null
+++ b/apps/svelte.dev/src/routes/(packages)/packages/pagination.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Page = {
+		type: 'page';
+		value: number;
+	};
+
+	type Ellipsis = {
+		type: 'ellipsis';
+	};
+
+	type PageItem = Page | Ellipsis;
+
+	interface Props {
+		/**
+		 * The total number of pages.
+		 */
+		total: number;
+
+		/**
+		 * Number of visible items before and after the current page
+		 *
+		 * @default 1
+		 */
+		siblingCount?: number;
+
+		/**
+		 * The current page.
+		 *
+		 * @bindable
+		 * @default 1
+		 */
+		page?: number;
+
+		/**
+		 * The children snippet, which will be rendered for every visible page
+		 * selector.
+		 */
+		children: Snippet<[PageItem]>;
+	}
+
+	const { total, siblingCount = 1, page = $bindable(1), children }: Props = $props();
+
+	function getPageItems(): Array<PageItem> {
+		const pageItems: Array<PageItem> = [];
+		const pagesToShow = new Set([1, Math.max(total, 1)]);
+		const firstItemWithSiblings = 3 + siblingCount;
+		const lastItemWithSiblings = total - 2 - siblingCount;
+
+		if (firstItemWithSiblings > lastItemWithSiblings) {
+			for (let p = 2; p <= total - 1; p++) {
+				pagesToShow.add(p);
+			}
+		} else if (page < firstItemWithSiblings) {
+			for (let p = 2; p <= Math.min(firstItemWithSiblings, total); p++) {
+				pagesToShow.add(p);
+			}
+		} else if (page > lastItemWithSiblings) {
+			for (let p = total - 1; p >= Math.max(lastItemWithSiblings, 2); p--) {
+				pagesToShow.add(p);
+			}
+		} else {
+			for (
+				let p = Math.max(page - siblingCount, 2);
+				p <= Math.min(page + siblingCount, total);
+				p++
+			) {
+				pagesToShow.add(p);
+			}
+		}
+
+		const addPage = (value: number) => {
+			pageItems.push({ type: 'page', value });
+		};
+		const addEllipsis = () => {
+			pageItems.push({ type: 'ellipsis' });
+		};
+
+		let lastNumber = 0;
+		for (const page of Array.from(pagesToShow).sort((a, b) => a - b)) {
+			if (page - lastNumber > 1) {
+				addEllipsis();
+			}
+			addPage(page);
+			lastNumber = page;
+		}
+
+		return pageItems;
+	}
+
+	const pageItems = $derived(getPageItems());
+</script>
+
+{#each pageItems as pageItem}
+	{@render children(pageItem)}
+{/each}