diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
index 8dba4233ab..83e4eafa45 100644
--- a/apps/svelte.dev/src/routes/+layout.svelte
+++ b/apps/svelte.dev/src/routes/+layout.svelte
@@ -25,9 +25,7 @@
 	{#snippet top_nav()}
 		<Nav title={data.nav_title} links={data.nav_links}>
 			{#snippet search()}
-				{#if $page.url.pathname !== '/search'}
-					<Search />
-				{/if}
+				<Search />
 			{/snippet}
 
 			{#snippet external_links()}
diff --git a/apps/svelte.dev/src/routes/content.json/+server.ts b/apps/svelte.dev/src/routes/content.json/+server.ts
index 65e5efbf18..cd0c458328 100644
--- a/apps/svelte.dev/src/routes/content.json/+server.ts
+++ b/apps/svelte.dev/src/routes/content.json/+server.ts
@@ -31,6 +31,7 @@ async function content() {
 
 	for (const document of docs) {
 		const { slug, body, metadata } = document;
+		const breadcrumbs = document.breadcrumbs.map((x) => removeMarkdown(x.title));
 
 		const sections = body.trim().split(/^## /m);
 		const intro = sections?.shift()?.trim()!;
diff --git a/apps/svelte.dev/src/routes/search/+page.svelte b/apps/svelte.dev/src/routes/search/+page.svelte
index 459e9004e4..4498f9b1db 100644
--- a/apps/svelte.dev/src/routes/search/+page.svelte
+++ b/apps/svelte.dev/src/routes/search/+page.svelte
@@ -9,7 +9,6 @@
 </svelte:head>
 
 <main>
-	<h1>Search</h1>
 	<form>
 		<input
 			name="q"
@@ -26,17 +25,18 @@
 
 <style>
 	main {
-		max-width: 48rem;
+		--padding: 1rem;
+		max-width: 64rem;
 		margin: 0 auto;
 		padding: 8rem 1rem;
+		font-family: var(--sk-font-ui);
 	}
 
 	form {
-		--size: 4rem;
+		--size: 2rem;
 		position: relative;
 		width: 100%;
-		height: var(--size);
-		margin: 0 0 2em 0;
+		margin: 0 0 2rem 0;
 	}
 
 	input {
@@ -44,12 +44,12 @@
 		width: 100%;
 		height: 100%;
 		font-family: inherit;
-		font-size: inherit;
-		border: 1px solid var(--sk-back-5);
+		font-size: var(--sk-text-xl);
+		border: none;
+		/* border: 1px solid var(--sk-back-5); */
 		border-radius: var(--sk-border-radius);
-		padding-left: var(--size);
-		border-radius: var(--size);
-		background: no-repeat 1rem 50% / 2rem 2rem url(/icons/search.svg);
+		padding: 2rem 2rem 2rem 5rem;
+		background: no-repeat 1rem 50% / 3rem 3rem url(/icons/search.svg);
 		color: var(--sk-text-1);
 	}
 </style>
diff --git a/packages/site-kit/src/lib/actions/focus.ts b/packages/site-kit/src/lib/actions/focus.ts
index 1a9a6a36ab..cce039f377 100644
--- a/packages/site-kit/src/lib/actions/focus.ts
+++ b/packages/site-kit/src/lib/actions/focus.ts
@@ -1,7 +1,7 @@
 export function focusable_children(node: HTMLElement) {
 	const nodes: HTMLElement[] = Array.from(
 		node.querySelectorAll(
-			'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
+			'a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])'
 		)
 	);
 
@@ -15,27 +15,29 @@ export function focusable_children(node: HTMLElement) {
 		nodes[i].focus();
 	};
 
-	return {
-		next: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
+	function traverse(d: number, selector?: string) {
+		const reordered = [...nodes.slice(index), ...nodes.slice(0, index)];
+
+		let i = (reordered.length + d) % reordered.length;
+		let node;
+
+		while ((node = reordered[i])) {
+			i += d;
 
-			for (let i = 0; i < reordered.length; i += 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (node.matches('details:not([open]) *')) {
+				continue;
 			}
-		},
-		prev: (selector?: string) => {
-			const reordered = [...nodes.slice(index + 1), ...nodes.slice(0, index + 1)];
 
-			for (let i = reordered.length - 2; i >= 0; i -= 1) {
-				if (!selector || reordered[i].matches(selector)) {
-					reordered[i].focus();
-					return;
-				}
+			if (!selector || node.matches(selector)) {
+				node.focus();
+				return;
 			}
-		},
+		}
+	}
+
+	return {
+		next: (selector?: string) => traverse(1, selector),
+		prev: (selector?: string) => traverse(-1, selector),
 		update
 	};
 }
diff --git a/packages/site-kit/src/lib/icons/document-dark.svg b/packages/site-kit/src/lib/icons/document-dark.svg
new file mode 100644
index 0000000000..6b610950eb
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/document-dark.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #ccc;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/document-light.svg b/packages/site-kit/src/lib/icons/document-light.svg
new file mode 100644
index 0000000000..68cfbd95c0
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/document-light.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000000e0;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <path class="cls-1" d="M20,7v14c0,.6-.4,1-1,1H5c-.6,0-1-.4-1-1V3c0-.6.4-1,1-1h10M20,7h-5V2M20,7l-5-5"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/hash-dark.svg b/packages/site-kit/src/lib/icons/hash-dark.svg
new file mode 100644
index 0000000000..8b1a0bf688
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/hash-dark.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #ccc;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
+      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
+      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
+      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/icons/hash-light.svg b/packages/site-kit/src/lib/icons/hash-light.svg
new file mode 100644
index 0000000000..205fd7882f
--- /dev/null
+++ b/packages/site-kit/src/lib/icons/hash-light.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #000000e0;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 1.5px;
+      }
+    </style>
+  </defs>
+  <!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709)  -->
+  <g>
+    <g id="Layer_1">
+      <line class="cls-1" x1="8.5" y1="2" x2="8.5" y2="22"/>
+      <line class="cls-1" x1="15.5" y1="2" x2="15.5" y2="22"/>
+      <line class="cls-1" x1="4" y1="8.5" x2="20" y2="8.4"/>
+      <line class="cls-1" x1="4" y1="15.5" x2="20" y2="15.4"/>
+    </g>
+  </g>
+</svg>
diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
index e59992d097..bde300397c 100644
--- a/packages/site-kit/src/lib/search/Search.svelte
+++ b/packages/site-kit/src/lib/search/Search.svelte
@@ -12,9 +12,10 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	<input
 		value={q}
 		oninput={(e) => {
-			$searching = true;
 			$search_query = e.currentTarget.value;
+			$searching = true;
 			e.currentTarget.value = '';
+			e.currentTarget.blur();
 		}}
 		onmousedown={(event) => {
 			event.preventDefault();
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
index 8af9747bdf..acb7974936 100644
--- a/packages/site-kit/src/lib/search/SearchBox.svelte
+++ b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -75,6 +75,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			document.body.focus();
 			document.body.removeAttribute('tabindex');
 			window.scrollTo(0, scroll);
+
+			$search_query = '';
 		}
 
 		search = null;
@@ -110,11 +112,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			document.body.style.position = 'fixed';
 
 			$overlay_open = true;
-			resetSearchQuery();
 		}
 	});
-
-	const resetSearchQuery = () => ($search_query = '');
 </script>
 
 <svelte:window
@@ -181,7 +180,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			/>
 
 			<button aria-label="Close" onclick={close}>
-				<Icon name="close" />
+				<!-- <Icon name="close" /> -->
+				<kbd>Esc</kbd>
 			</button>
 
 			<span id="search-description" class="visually-hidden">
@@ -217,8 +217,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 								{#each recent_searches as search}
 									<li class="recent">
 										<a onclick={() => navigate(search.href)} href={search.href}>
-											<small>{search.breadcrumbs.join('/')}</small>
-											<strong>{search.breadcrumbs.at(-1)}</strong>
+											{search.breadcrumbs.at(-1)}
 										</a>
 
 										<button
@@ -264,37 +263,67 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		z-index: 100;
 	}
 
+	.modal {
+		position: fixed;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		pointer-events: none;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 9999;
+	}
+
+	.search-box {
+		--padding: 1rem;
+		--background: var(--sk-back-2);
+		position: relative;
+		height: calc(100% - 2rem);
+		width: calc(100vw - 2rem);
+		max-width: 64rem;
+		max-height: 64rem;
+		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
+		border-radius: var(--sk-border-radius);
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		font-family: var(--sk-font-ui);
+
+		@media (min-width: 800px) {
+			--padding: 1.6rem;
+		}
+
+		& > * {
+			pointer-events: all;
+		}
+	}
+
 	input {
-		font-family: inherit;
-		font-size: 1.6rem;
+		font-size: var(--sk-text-l);
 		width: 100%;
-		padding: 1rem 6rem 0.5rem 1rem;
-		height: 5rem;
+		padding: var(--padding) 5rem var(--padding) var(--padding);
+		height: 6rem;
 		border: none;
 		border-bottom: 1px solid var(--sk-back-3);
-		font-weight: 600;
 		flex-shrink: 0;
-		background: var(--sk-back-2);
+		background: var(--sk-back-3);
 		color: var(--sk-text-1);
-	}
-
-	input::selection {
-		background-color: var(--sk-back-translucent);
-	}
 
-	input::placeholder {
-		color: var(--sk-text-3);
-		opacity: 0.3;
-	}
+		&::selection {
+			background-color: var(--sk-back-translucent);
+		}
 
-	input:focus-visible {
-		background: var(--sk-theme-2);
-		color: white;
-		outline: none;
-	}
+		&::placeholder {
+			color: var(--sk-text-2);
+			opacity: 0.3;
+		}
 
-	input:focus-visible::placeholder {
-		color: rgba(255, 255, 255, 0.5);
+		&:focus-visible {
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
+		}
 	}
 
 	button[aria-label='Close'] {
@@ -303,75 +332,44 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		top: 0;
 		right: 0;
 		width: 5rem;
-		height: 5rem;
+		height: 6rem;
 		background: none;
+		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
-	}
+		opacity: 0.3;
 
-	button[aria-label='Close']:focus-visible {
-		background: var(--sk-theme-2);
-		color: var(--sk-back-1);
-		outline: none;
-	}
+		&:focus-visible {
+			opacity: 1;
+			outline-offset: -3px;
+		}
 
-	input:focus-visible + button[aria-label='Close'] {
-		color: var(--sk-back-1);
+		kbd {
+			text-transform: uppercase;
+		}
 	}
 
 	ul {
 		margin: 0;
 	}
 
-	.modal {
-		position: fixed;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 9999;
-	}
-
-	.modal {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		pointer-events: none;
-	}
-
-	.search-box {
-		position: relative;
-		height: calc(100% - 2rem);
-		width: calc(100vw - 2rem);
-		max-width: 50rem;
-		max-height: 50rem;
-		filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-		border-radius: var(--sk-border-radius);
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	.search-box > * {
-		pointer-events: all;
-	}
-
 	.results {
 		overflow: auto;
 		overscroll-behavior-y: none;
 	}
 
 	.results-container {
-		background: var(--sk-back-2);
+		background: var(--background);
 		border-radius: 0 0 var(--sk-border-radius) var(--sk-border-radius);
 		pointer-events: all;
 	}
 
 	.info {
-		padding: 1rem;
+		padding: var(--padding);
+		font-family: var(--sk-font-ui);
 		font-size: 1.2rem;
 		font-weight: normal;
 		text-transform: uppercase;
-		background-color: var(--sk-back-2);
+		background-color: var(--background);
 		pointer-events: all;
 	}
 
@@ -380,58 +378,20 @@ It appears when the user clicks on the `Search` component or presses the corresp
 	}
 
 	a {
+		color: var(--sk-text-2);
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem;
-	}
-
-	a:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
+		padding: 1rem calc(4rem + var(--padding)) 1rem var(--padding);
 
-	a:focus {
-		background: var(--sk-theme-2);
-		color: var(--sk-back-1);
-		outline: none;
-	}
-
-	a small,
-	a strong {
-		display: block;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		line-height: 1;
-	}
-
-	a small {
-		font-size: 1rem;
-		text-transform: uppercase;
-		font-weight: 600;
-		color: var(--sk-text-3);
-	}
-
-	a strong {
-		font-size: 1.6rem;
-		color: var(--sk-text-2);
-		margin: 0.4rem 0;
-	}
-
-	a:focus small {
-		color: white;
-		opacity: 0.6;
-	}
-
-	a:focus strong {
-		color: white;
-	}
+		&:hover {
+			background: rgba(0, 0, 0, 0.05);
+		}
 
-	a strong :global(mark) {
-		background: var(--sk-theme-2);
-		color: var(--sk-text-3);
-		text-decoration: none;
-		border-radius: 1px;
+		&:focus {
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
+		}
 	}
 
 	li {
@@ -446,21 +406,16 @@ It appears when the user clicks on the `Search` component or presses the corresp
 		height: 100%;
 		color: var(--sk-text-2);
 		opacity: 0.1;
-	}
 
-	a:focus + [aria-label='Delete'] {
-		color: var(--sk-back-1);
-	}
-
-	button[aria-label='Delete']:hover {
-		opacity: 1;
-		outline: none;
-	}
+		&:hover {
+			opacity: 1;
+			outline: none;
+		}
 
-	button[aria-label='Delete']:focus-visible {
-		background: var(--sk-theme-2);
-		color: var(--sk-text-1);
-		opacity: 1;
-		outline: none;
+		&:focus-visible {
+			opacity: 1;
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
index 7c425c00f2..30cd0ae8f0 100644
--- a/packages/site-kit/src/lib/search/SearchResultList.svelte
+++ b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import type { Tree } from './types';
+	import type { BlockGroup } from './types';
 
 	interface Props {
-		results: Tree[];
+		results: BlockGroup[];
 		query: string;
 		onselect?: (href: string) => void;
 	}
@@ -16,41 +16,49 @@
 	function excerpt(content: string, query: string) {
 		const index = content.toLowerCase().indexOf(query.toLowerCase());
 		if (index === -1) {
-			return escape(content.slice(0, 100));
+			return `${escape(content.slice(0, 150))}`;
 		}
 
-		const prefix = index > 20 ? `…${content.slice(index - 15, index)}` : content.slice(0, index);
-		const suffix = content.slice(
-			index + query.length,
-			index + query.length + (80 - (prefix.length + query.length))
+		const prefix =
+			index > 20
+				? `${escape(content.slice(index - 15, index))}`
+				: `<span class="spacer"></span>${escape(content.slice(0, index))}`;
+		const suffix = escape(
+			content.slice(
+				index + query.length,
+				index + query.length + (130 - (prefix.length + query.length))
+			)
 		);
 
-		return (
-			escape(prefix) +
-			`<mark>${escape(content.slice(index, index + query.length))}</mark>` +
-			escape(suffix)
-		);
+		return prefix + `<mark>${escape(content.slice(index, index + query.length))}</mark>` + suffix;
 	}
 </script>
 
 <ul>
-	{#each results as result (result.href)}
+	{#each results as group (group.breadcrumbs.join('::'))}
 		<li>
-			<a
-				href={result.href}
-				onclick={() => onselect?.(result.href)}
-				data-has-node={result.node ? true : undefined}
-			>
-				<strong>{@html excerpt(result.breadcrumbs[result.breadcrumbs.length - 1], query)}</strong>
-
-				{#if result.node?.content}
-					<span>{@html excerpt(result.node.content, query)}</span>
-				{/if}
-			</a>
-
-			{#if result.children.length > 0}
-				<svelte:self results={result.children} {query} {onselect} />
-			{/if}
+			<details open>
+				<summary>
+					{#each group.breadcrumbs as breadcrumb}<span>{breadcrumb}</span>{/each}
+				</summary>
+				<ul>
+					{#each group.blocks as block (block.href)}
+						<a
+							class:fragment={block.breadcrumbs.length > 4}
+							href={block.href}
+							onclick={() => onselect?.(block.href)}
+						>
+							<strong>{block.breadcrumbs.slice(2).join(' • ')}</strong>
+
+							{#if block?.content}
+								<div class="excerpt">
+									<span>{@html excerpt(block.content, query)}</span>
+								</div>
+							{/if}
+						</a>
+					{/each}
+				</ul>
+			</details>
 		</li>
 	{/each}
 </ul>
@@ -59,93 +67,165 @@
 	ul {
 		position: relative;
 		margin: 0;
-	}
-
-	ul :global(ul) {
-		margin-left: 0.8em !important;
-		padding-left: 0em;
-		border-left: 1px solid var(--sk-back-5);
-	}
-
-	li {
 		list-style: none;
-		margin-bottom: 1em;
 	}
 
-	li:last-child {
-		margin-bottom: 0;
+	details {
+		padding: 0.5rem 0;
+
+		summary {
+			position: sticky;
+			top: 0;
+			display: block;
+			background: var(--background);
+			color: var(--sk-text-4);
+			text-transform: uppercase;
+			padding: 0.5rem var(--padding);
+			font-size: var(--sk-text-xs);
+			z-index: 2;
+			user-select: none;
+
+			&:focus-visible {
+				border-radius: var(--sk-border-radius);
+				outline-offset: -3px;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				right: 1.6rem;
+				top: calc(50% - 1rem);
+				width: 2rem;
+				height: 2rem;
+				background: url($lib/icons/chevron.svg);
+				background-size: contain;
+				rotate: -90deg;
+				transition: rotate 0.2s;
+			}
+
+			[open] &::after {
+				rotate: 90deg;
+			}
+
+			span:not(:last-child)::after {
+				content: ' • ';
+			}
+		}
 	}
 
 	a {
 		display: block;
 		text-decoration: none;
 		line-height: 1;
-		padding: 1rem;
-	}
-
-	a:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
+		padding: 1.2rem var(--padding) 1.2rem calc(4rem + var(--padding));
+		overflow: hidden;
+		background: var(--background);
+
+		&::before {
+			content: '';
+			position: absolute;
+			width: 5rem;
+			top: 0;
+			left: 0;
+			height: 100%;
+			background: url(../icons/document-light.svg) no-repeat 50% 50%;
+			background-size: 2rem;
+		}
 
-	a:focus {
-		background: var(--sk-theme-2);
-		color: white;
-		outline: none;
-	}
+		&.fragment::before {
+			background-image: url(../icons/hash-light.svg);
+		}
 
-	a strong,
-	a span {
-		display: block;
-		white-space: nowrap;
-		line-height: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
+		:root.dark & {
+			&::before {
+				background-image: url(../icons/document-dark.svg);
+			}
 
-	a strong {
-		font-size: 1.6rem;
-		color: var(--sk-text-2);
-	}
+			&.fragment::before {
+				background-image: url(../icons/hash-dark.svg);
+			}
+		}
 
-	a span {
-		font-size: 1.2rem;
-		color: #737373;
-		margin: 0.4rem 0 0 0;
-	}
+		&:hover {
+			--background: var(--sk-back-4);
+			text-decoration: none;
+		}
 
-	a :global(mark) {
-		--highlight-color: rgba(255, 255, 0, 0.2);
-	}
+		&:focus {
+			border-radius: var(--sk-border-radius);
+			outline-offset: -3px;
+		}
 
-	a span :global(mark) {
-		background: none;
-		color: var(--sk-text-1);
-		background: var(--highlight-color);
-		outline: 2px solid var(--highlight-color);
-		border-top: 2px solid var(--highlight-color);
-		/* mix-blend-mode: darken; */
-	}
+		strong,
+		span {
+			display: block;
+			white-space: nowrap;
+			line-height: 1;
+			/* overflow: hidden; */
+			/* overflow-x: hidden; */
+			text-overflow: ellipsis;
+			font-weight: 400;
+		}
 
-	a:focus span {
-		color: rgba(255, 255, 255, 0.6);
-	}
+		strong {
+			/* font-family: var(--sk-font-heading); */
+			/* font-weight: 500; */
+			width: 100%;
+			overflow: hidden;
+			font-size: var(--sk-text-s);
+			color: var(--sk-text-2);
+		}
 
-	a:focus strong {
-		color: white;
-	}
+		.excerpt {
+			position: relative;
+			width: calc(100% + 1rem);
+			left: -0.5rem;
+			overflow: hidden;
+			color: var(--sk-text-1);
+
+			&::before,
+			&::after {
+				content: '';
+				position: absolute;
+				width: 1rem;
+				top: 0;
+				height: 100%;
+			}
+
+			&::before {
+				left: 0;
+				background: linear-gradient(to left, transparent, var(--background));
+			}
+
+			&::after {
+				right: 0;
+
+				background: linear-gradient(to right, transparent, var(--background));
+			}
+
+			span {
+				color: var(--sk-text-3);
+			}
+
+			:global(.spacer) {
+				display: inline-block;
+				width: 0.7rem;
+				height: 1rem;
+			}
+		}
 
-	a:focus span :global(mark),
-	a:focus strong :global(mark) {
-		--highlight-color: hsl(240, 8%, 54%);
-		mix-blend-mode: lighten;
-		color: white;
-	}
+		span {
+			font-size: var(--sk-text-xs);
+			color: #737373;
+			margin: 0.4rem 0 0 0;
+		}
 
-	a strong :global(mark) {
-		color: var(--sk-text-1);
-		background: var(--highlight-color);
-		outline: 2px solid var(--highlight-color);
-		/* border-top: 2px solid var(--highlight-color); */
-		border-radius: 1px;
+		:global(mark) {
+			--highlight-color: rgba(255, 255, 0, 0.4);
+			background: none;
+			color: var(--sk-text-1);
+			background: var(--highlight-color);
+			outline: 2px solid var(--highlight-color);
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/search/SearchResults.svelte b/packages/site-kit/src/lib/search/SearchResults.svelte
index 03bd3369d1..e1b9791f1e 100644
--- a/packages/site-kit/src/lib/search/SearchResults.svelte
+++ b/packages/site-kit/src/lib/search/SearchResults.svelte
@@ -4,10 +4,10 @@ Renders a list of search results
 <script lang="ts">
 	import SearchResultList from './SearchResultList.svelte';
 	import type { Snippet } from 'svelte';
-	import type { Tree } from './types';
+	import type { BlockGroup } from './types';
 
 	interface Props {
-		results: Tree[];
+		results: BlockGroup[];
 		query: string;
 		onselect?: (href: string) => void;
 		children?: Snippet;
@@ -30,7 +30,7 @@ Renders a list of search results
 
 <style>
 	.info {
-		padding: 1rem;
+		padding: var(--padding);
 		font-size: 1.2rem;
 		font-weight: normal;
 		text-transform: uppercase;
diff --git a/packages/site-kit/src/lib/search/index.ts b/packages/site-kit/src/lib/search/index.ts
index bf0cc2ef4c..6dfc68ee9a 100644
--- a/packages/site-kit/src/lib/search/index.ts
+++ b/packages/site-kit/src/lib/search/index.ts
@@ -2,4 +2,4 @@ export { default as Search } from './Search.svelte';
 export { default as SearchBox } from './SearchBox.svelte';
 export { default as SearchResults } from './SearchResults.svelte';
 export { init, inited, lookup, search } from './search';
-export type { Block, Tree } from './types';
+export type { Block } from './types';
diff --git a/packages/site-kit/src/lib/search/search.ts b/packages/site-kit/src/lib/search/search.ts
index 62182b18e5..4cb13498f4 100644
--- a/packages/site-kit/src/lib/search/search.ts
+++ b/packages/site-kit/src/lib/search/search.ts
@@ -1,5 +1,5 @@
 import flexsearch, { type Index as FlexSearchIndex } from 'flexsearch';
-import type { Block, Tree } from './types';
+import type { Block, BlockGroup } from './types';
 
 // @ts-expect-error
 const Index = (flexsearch.Index as FlexSearchIndex) ?? flexsearch;
@@ -47,7 +47,7 @@ export function init(blocks: Block[]) {
 /**
  * Search for a given query in the existing index
  */
-export function search(query: string): Tree[] {
+export function search(query: string): BlockGroup[] {
 	const escaped = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 	const regex = new RegExp(`(^|\\b)${escaped}`, 'i');
 
@@ -70,9 +70,20 @@ export function search(query: string): Tree[] {
 		})
 		.map(({ block }) => block);
 
-	const results = tree([], blocks).children;
+	const groups: Record<string, BlockGroup> = {};
 
-	return results;
+	for (const block of blocks) {
+		const breadcrumbs = block.breadcrumbs.slice(0, 2);
+
+		const group = (groups[breadcrumbs.join('::')] ??= {
+			breadcrumbs,
+			blocks: []
+		});
+
+		group.blocks.push(block);
+	}
+
+	return Object.values(groups);
 }
 
 /**
@@ -81,26 +92,3 @@ export function search(query: string): Tree[] {
 export function lookup(href: string) {
 	return map.get(href);
 }
-
-function tree(breadcrumbs: string[], blocks: Block[]): Tree {
-	const depth = breadcrumbs.length;
-
-	const node = blocks.find((block) => {
-		if (block.breadcrumbs.length !== depth) return false;
-		return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
-	});
-
-	const descendants = blocks.filter((block) => {
-		if (block.breadcrumbs.length <= depth) return false;
-		return breadcrumbs.every((part, i) => block.breadcrumbs[i] === part);
-	});
-
-	const child_parts = Array.from(new Set(descendants.map((block) => block.breadcrumbs[depth])));
-
-	return {
-		breadcrumbs,
-		href: hrefs.get(breadcrumbs.join('::'))!,
-		node: node!,
-		children: child_parts.map((part) => tree([...breadcrumbs, part], descendants))
-	};
-}
diff --git a/packages/site-kit/src/lib/search/types.d.ts b/packages/site-kit/src/lib/search/types.d.ts
index fbbbdba23f..c853d0df01 100644
--- a/packages/site-kit/src/lib/search/types.d.ts
+++ b/packages/site-kit/src/lib/search/types.d.ts
@@ -5,9 +5,7 @@ export interface Block {
 	rank: number;
 }
 
-export interface Tree {
+export interface BlockGroup {
 	breadcrumbs: string[];
-	href: string;
-	node: Block;
-	children: Tree[];
+	blocks: Block[];
 }
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index dadf47e148..407970ab3a 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -146,9 +146,13 @@ blockquote :last-child {
 }
 
 /*  buttons -------------------------------- */
+input,
 button {
 	font-family: var(--sk-font-ui);
 	font-size: inherit;
+}
+
+button {
 	background-color: transparent;
 	border: none;
 	color: currentColor;