diff --git a/website/bun.lockb b/website/bun.lockb
index 2c72e57..f638715 100755
Binary files a/website/bun.lockb and b/website/bun.lockb differ
diff --git a/website/package.json b/website/package.json
index e728d78..977b5c6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -39,6 +39,7 @@
 	"dependencies": {
 		"@fontsource-variable/nunito-sans": "^5.0.14",
 		"@shikijs/rehype": "^1.13.0",
+		"bits-ui": "^0.21.13",
 		"date-fns": "^3.6.0",
 		"gunzip-maybe": "^1.4.2",
 		"lucide-svelte": "^0.427.0",
diff --git a/website/src/lib/components/Github.svelte b/website/src/lib/components/Github.svelte
new file mode 100644
index 0000000..a808d35
--- /dev/null
+++ b/website/src/lib/components/Github.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	const props = $props()
+</script>
+
+<svg {...props} role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>GitHub</title>
+	<path
+		d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+		fill="currentColor"
+	/>
+</svg>
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index b48ceaf..2a3a19b 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <Header />
-<main class="mt-16 min-h-screen">
+<main class="min-h-screen">
 	<slot></slot>
 </main>
 <Footer />
diff --git a/website/src/routes/Hamburger.svelte b/website/src/routes/Hamburger.svelte
new file mode 100644
index 0000000..cbaaf86
--- /dev/null
+++ b/website/src/routes/Hamburger.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import Logo from "$lib/components/Logo.svelte"
+	import Github from "$lib/components/Github.svelte"
+	import Search from "./Search.svelte"
+	import { Dialog } from "bits-ui"
+	import { Menu, X } from "lucide-svelte"
+	import { fade, fly } from "svelte/transition"
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger>
+		<span class="sr-only">open menu</span>
+		<Menu aria-hidden="true" />
+	</Dialog.Trigger>
+	<Dialog.Portal>
+		<Dialog.Content class="fixed inset-0 top-0 z-50 flex flex-col">
+			<Dialog.Title class="sr-only">Menu</Dialog.Title>
+			<div transition:fade={{ duration: 200 }} class="bg-background">
+				<div class="relative z-50 flex h-14 flex-shrink-0 items-center justify-between px-4">
+					<Logo class="h-7 text-primary" />
+					<Dialog.Close>
+						<span class="sr-only">close menu</span>
+						<X aria-hidden="true" />
+					</Dialog.Close>
+				</div>
+				<div class="px-4 py-1">
+					<Search />
+				</div>
+			</div>
+			<div
+				class="flex flex-grow flex-col overflow-hidden bg-background"
+				transition:fade={{ duration: 200 }}
+			>
+				<nav class="flex h-full flex-col px-4 pt-2" transition:fly={{ y: "-2%", duration: 200 }}>
+					<div class="flex flex-grow flex-col border-y py-3">
+						{#snippet item(href: string, text: string)}
+							<a {href} class="flex h-10 items-center rounded px-3 hover:bg-card/50">{text}</a>
+						{/snippet}
+
+						{@render item("/docs", "Documentation")}
+						{@render item("/policies", "Policies")}
+					</div>
+					<div class="flex items-center py-5">
+						<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
+							<Github class="size-6" />
+						</a>
+					</div>
+				</nav>
+			</div>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
diff --git a/website/src/routes/Header.svelte b/website/src/routes/Header.svelte
index 442cbd9..00233d8 100644
--- a/website/src/routes/Header.svelte
+++ b/website/src/routes/Header.svelte
@@ -1,42 +1,35 @@
 <script>
 	import Logo from "$lib/components/Logo.svelte"
-	import { Search } from "lucide-svelte"
+	import Github from "$lib/components/Github.svelte"
+	import Hamburger from "./Hamburger.svelte"
+	import Search from "./Search.svelte"
 </script>
 
-<header class="fixed inset-x-0 top-0 z-50 bg-background/80 backdrop-blur">
-	<div class="mx-auto flex h-16 max-w-screen-lg items-center justify-between px-4">
-		<a href="/">
-			<Logo class="h-9 text-primary" />
-		</a>
-		<div class="hidden w-full max-w-80 md:flex">
-			<form action="/search" class="w-full">
-				<label
-					class="relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4"
-				>
-					<Search class="size-5" aria-label="search" />
-					<input
-						name="q"
-						placeholder="search packages..."
-						class="absolute inset-0 bg-transparent pl-9 pr-2 text-heading placeholder:text-placeholder"
-					/>
-				</label>
-			</form>
-		</div>
-		<div class="hidden items-center space-x-6 md:flex [&_a:hover]:text-heading [&_a]:transition">
-			<nav class="flex items-center space-x-6 font-medium">
-				<a href="/docs">Docs</a>
-				<a href="/policies">Policies</a>
-			</nav>
-
-			<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
-				<svg class="size-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-					<title>GitHub</title>
-					<path
-						d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-						fill="currentColor"
-					/>
-				</svg>
+<header class="pt-14 sm:pt-16">
+	<div class="fixed inset-x-0 top-0 z-50 bg-background/80 backdrop-blur">
+		<div class="mx-auto flex h-14 max-w-screen-lg items-center justify-between px-4 sm:h-16">
+			<a href="/">
+				<Logo class="h-7 text-primary md:h-9" />
 			</a>
+			<div class="hidden w-full max-w-80 sm:flex">
+				<Search />
+			</div>
+			<div class="hidden items-center space-x-6 md:flex [&_a:hover]:text-heading [&_a]:transition">
+				<nav class="flex items-center space-x-6 font-medium">
+					<a href="/docs">Docs</a>
+					<a href="/policies">Policies</a>
+				</nav>
+
+				<a href="https://github.com/daimond113/pesde" target="_blank" rel="noreferrer noopener">
+					<Github class="size-6" />
+				</a>
+			</div>
+			<div class="flex items-center md:hidden">
+				<Hamburger />
+			</div>
 		</div>
 	</div>
+	<div class="px-4 py-1 sm:hidden">
+		<Search />
+	</div>
 </header>
diff --git a/website/src/routes/Search.svelte b/website/src/routes/Search.svelte
new file mode 100644
index 0000000..ec525fa
--- /dev/null
+++ b/website/src/routes/Search.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Search } from "lucide-svelte"
+	import { searchQuery } from "./search-state.svelte"
+</script>
+
+<form action="/search" class="w-full">
+	<label
+		class="relative flex h-9 w-full items-center overflow-hidden rounded border border-input-border bg-input-bg px-2 outline-none ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4"
+	>
+		<Search class="size-5" aria-label="search" />
+		<input
+			name="q"
+			placeholder="search packages..."
+			class="absolute inset-0 bg-transparent pl-9 pr-2 text-heading placeholder:text-placeholder"
+			bind:value={searchQuery.value}
+		/>
+	</label>
+</form>
diff --git a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
index 36e8987..71249a3 100644
--- a/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
+++ b/website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/+layout.svelte
@@ -7,6 +7,7 @@
 	import type { ComponentType } from "svelte"
 	import Command from "./Command.svelte"
 	import TargetSelector from "./TargetSelector.svelte"
+	import Github from "$lib/components/Github.svelte"
 
 	let { children, data } = $props()
 
@@ -97,18 +98,7 @@
 					rel="noreferrer noopener"
 				>
 					{#if isGithub}
-						<svg
-							class="size-5 text-primary"
-							role="img"
-							viewBox="0 0 24 24"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<title>GitHub</title>
-							<path
-								d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
-								fill="currentColor"
-							/>
-						</svg>
+						<Github class="size-5 text-primary" />
 						<span>
 							{githubRepo}
 						</span>
diff --git a/website/src/routes/search-state.svelte.ts b/website/src/routes/search-state.svelte.ts
new file mode 100644
index 0000000..2645ff0
--- /dev/null
+++ b/website/src/routes/search-state.svelte.ts
@@ -0,0 +1,10 @@
+let _searchQuery = $state("")
+
+export const searchQuery = {
+	get value() {
+		return _searchQuery
+	},
+	set value(value: string) {
+		_searchQuery = value
+	},
+}