diff --git a/packages/site-kit/src/lib/actions/click-outside.ts b/packages/site-kit/src/lib/actions/click-outside.ts
deleted file mode 100644
index 05c87e6d51..0000000000
--- a/packages/site-kit/src/lib/actions/click-outside.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Dispatch event on click outside of node
- */
-export function click_outside(node: HTMLElement, callback: () => void) {
-	const handler = (e: MouseEvent) => {
-		if (!node.contains(e.target as HTMLElement)) callback();
-	};
-
-	document.addEventListener('click', handler, true);
-
-	return {
-		destroy() {
-			document.removeEventListener('click', handler, true);
-		}
-	};
-}
diff --git a/packages/site-kit/src/lib/actions/focus-outside.ts b/packages/site-kit/src/lib/actions/focus-outside.ts
deleted file mode 100644
index ed30988a92..0000000000
--- a/packages/site-kit/src/lib/actions/focus-outside.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Dispatch event on click outside of node
- */
-export function focus_outside(node: HTMLElement, callback: () => void) {
-	function handler(e: FocusEvent) {
-		if (!node?.contains(/** @type {HTMLElement} */ e.target as HTMLElement)) callback();
-	}
-
-	document.addEventListener('focus', handler, true);
-
-	return {
-		destroy() {
-			document.removeEventListener('focus', handler, true);
-		}
-	};
-}
diff --git a/packages/site-kit/src/lib/actions/index.ts b/packages/site-kit/src/lib/actions/index.ts
index 0f3ce16ff0..ff6707a77e 100644
--- a/packages/site-kit/src/lib/actions/index.ts
+++ b/packages/site-kit/src/lib/actions/index.ts
@@ -1,4 +1,2 @@
-export { click_outside } from './click-outside';
-export { focus_outside } from './focus-outside';
 export { focusable_children, trap } from './focus';
 export { legacy_details } from './legacy-details';
diff --git a/packages/site-kit/src/lib/components/ModalOverlay.svelte b/packages/site-kit/src/lib/components/ModalOverlay.svelte
new file mode 100644
index 0000000000..38820c6651
--- /dev/null
+++ b/packages/site-kit/src/lib/components/ModalOverlay.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+
+	let { onclose }: { onclose?: () => void } = $props();
+</script>
+
+<div
+	transition:fade={{ duration: 100 }}
+	class="modal-overlay"
+	aria-hidden="true"
+	onclick={onclose}
+></div>
+
+<style>
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 99;
+		opacity: 0.7;
+		pointer-events: auto;
+		width: 100%;
+		height: 100%;
+		height: 100dvh;
+		background: var(--sk-back-1);
+	}
+</style>
diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte
index 68f58feb33..e4a04af3b5 100644
--- a/packages/site-kit/src/lib/components/Shell.svelte
+++ b/packages/site-kit/src/lib/components/Shell.svelte
@@ -10,6 +10,7 @@ The main shell of the application. It provides a slot for the top navigation, th
 	import '../styles/index.css';
 	import Icons from './Icons.svelte';
 	import type { Snippet } from 'svelte';
+	import ModalOverlay from './ModalOverlay.svelte';
 
 	let {
 		nav_visible = true,
@@ -36,7 +37,9 @@ The main shell of the application. It provides a slot for the top navigation, th
 	{@render top_nav?.()}
 {/if}
 
-<div class="modal-overlay" class:visible={$overlay_open} aria-hidden="true"></div>
+{#if $overlay_open}
+	<ModalOverlay />
+{/if}
 
 <main id="main">
 	{@render children?.()}
@@ -47,28 +50,6 @@ The main shell of the application. It provides a slot for the top navigation, th
 </div>
 
 <style>
-	.modal-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 99;
-
-		opacity: 0;
-		pointer-events: none;
-
-		width: 100%;
-		height: 100%;
-		height: 100dvh;
-
-		background: var(--sk-back-1);
-		transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-	}
-
-	.modal-overlay.visible {
-		opacity: 0.7;
-		pointer-events: auto;
-	}
-
 	main {
 		position: relative;
 		margin: 0 auto;
diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte
index 5fa5aecbf5..dac32dceee 100644
--- a/packages/site-kit/src/lib/nav/Menu.svelte
+++ b/packages/site-kit/src/lib/nav/Menu.svelte
@@ -1,35 +1,24 @@
-<script module>
-	const current_menu_view = writable<NavigationLink | undefined>(undefined);
-	const show_context_menu = writable(false);
-	const links_store = writable<NavigationLink[]>([]);
-</script>
-
 <script lang="ts">
 	import { afterNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { click_outside, focus_outside, trap } from '../actions';
-	import { overlay_open, reduced_motion } from '../stores';
-	import { tick, type Snippet } from 'svelte';
+	import { trap } from '../actions';
+	import { reduced_motion } from '../stores';
+	import { tick } from 'svelte';
 	import { expoOut, quintOut } from 'svelte/easing';
 	import type { TransitionConfig } from 'svelte/transition';
-	import { get, writable } from 'svelte/store';
 	import Icon from '../components/Icon.svelte';
 	import NavContextMenu from './NavContextMenu.svelte';
 	import type { NavigationLink } from '../types';
+	import ModalOverlay from '../components/ModalOverlay.svelte';
 
 	interface Props {
 		links: NavigationLink[];
-		back_button?: Snippet;
+		current: NavigationLink | undefined;
+		onclose: () => void;
 	}
 
-	let { links, back_button }: Props = $props();
+	let { links, current, onclose }: Props = $props();
 
-	let open = $state(false);
-
-	$links_store = links;
-	$effect.pre(() => {
-		$links_store = links;
-	});
+	let show_context_menu = $state(!!current?.sections);
 
 	let nav_context_instance: NavContextMenu | undefined = $state();
 
@@ -38,206 +27,153 @@
 	let ready = $state(false);
 
 	let universal_menu: HTMLElement | undefined = $state();
-	let menu_button: HTMLButtonElement | undefined = $state();
 
-	function close() {
-		open = false;
-	}
-
-	afterNavigate(close);
+	afterNavigate(onclose);
 
-	function mounted(_: HTMLElement, fn: (current: boolean) => void) {
+	$effect(() => {
 		// this is necessary to ensure that the menu-background height
 		// is applied without an animation
 		setTimeout(() => {
-			fn(true);
+			ready = true;
 		});
+	});
 
-		return {
-			destroy() {
-				fn(false);
-			}
-		};
-	}
-
-	function slide(node: HTMLElement, { duration = 400, easing = expoOut } = {}): TransitionConfig {
-		const height = $current_menu_view ? node.clientHeight : universal_menu_inner_height;
+	function popup(node: HTMLElement, { duration = 400, easing = expoOut } = {}): TransitionConfig {
+		const height = current ? node.clientHeight : universal_menu_inner_height;
 
 		return {
 			css: (t, u) =>
 				$reduced_motion
 					? `opacity: ${t}`
-					: `transform: translate3d(0, ${height * u}px, 0) scale3d(${0.9 + 0.1 * t}, ${
-							0.9 + 0.1 * t
-						}, 1)`,
+					: `transform: translate3d(0, ${(height * u) / 0.9}px, 0) scale(${0.9 + 0.1 * t})`,
 			easing,
 			duration
 		};
 	}
-
-	$effect.pre(() => {
-		$overlay_open = open;
-	});
 </script>
 
-<svelte:window
-	onkeydown={(e) => {
-		if (e.key === 'Escape') {
-			close();
-			// we only manage focus when Esc is hit
-			// otherwise, the navigation will reset focus
-			tick().then(() => menu_button?.focus());
-		}
-	}}
-/>
-
-<div style="display: contents" use:click_outside={close} use:focus_outside={close}>
-	<button
-		aria-label="Toggle menu"
-		aria-expanded={open}
-		class="menu-toggle raised icon"
-		class:open
-		bind:this={menu_button}
-		onclick={() => {
-			if (open) {
-				open = false;
-			} else {
-				open = true;
-
-				const segment = get(page).url.pathname.split('/')[1];
-				current_menu_view.set(get(links_store).find((link) => link.slug === segment));
-
-				show_context_menu.set(!!get(current_menu_view)?.sections && !!get(current_menu_view));
-			}
-		}}
-	>
-		<Icon name={open ? 'close' : 'menu'} size={16} />
-	</button>
-
-	{#if open}
-		<div class="menu" use:trap={{ reset_focus: false }}>
-			<div class="mobile-main-menu" in:slide out:slide={{ duration: 500, easing: quintOut }}>
-				<div
-					class="menu-background"
-					class:ready
-					style:height={$show_context_menu ? '99%' : `${universal_menu_inner_height}px`}
-					style:--background={$show_context_menu ? 'var(--sk-back-3)' : null}
-					use:mounted={(mounted) => (ready = mounted)}
-				></div>
-
-				<div
-					class="clip"
-					style:--height-difference="{menu_height - universal_menu_inner_height}px"
-					ontransitionstart={(e) => {
-						const target = e.target as HTMLElement;
-
-						if (!target?.classList.contains('viewport')) return;
-						if (e.propertyName !== 'transform') return;
-
-						// we need to apply a clip-path during the transition so that the contents
-						// are constrained to the menu background, but only while the transition
-						// is running, otherwise it prevents the contents from being scrolled
-						const a = 'calc(var(--height-difference) + 1px)';
-						const b = '1px';
-
-						const start = $show_context_menu ? a : b;
-						const end = $show_context_menu ? b : a;
-
-						const container = e.currentTarget;
-
-						container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`;
-
-						setTimeout(() => {
-							container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`;
-						}, 0);
-					}}
-					ontransitionend={(e) => {
-						const target = e.target as HTMLElement;
-
-						if (!target?.classList.contains('viewport')) return;
-						if (e.propertyName !== 'transform') return;
-
-						e.currentTarget.style.clipPath = '';
-
-						// whenever we transition from one menu to the other, we need to move focus to the first item in the new menu
-						if (!$show_context_menu) {
-							universal_menu?.querySelector('a')?.focus();
-						}
-					}}
-				>
-					<div
-						class="viewport"
-						class:reduced-motion={$reduced_motion}
-						class:offset={$show_context_menu}
-						bind:clientHeight={menu_height}
-					>
-						<div class="universal" inert={$show_context_menu} bind:this={universal_menu}>
-							<div class="contents" bind:clientHeight={universal_menu_inner_height}>
-								<ul>
-									{#each links as link}
-										<li>
-											<a href="/{link.slug}">
-												{link.title}
-											</a>
-
-											{#if link.sections}
-												<button
-													class="raised icon"
-													onclick={async (event) => {
-														event.preventDefault();
-
-														$current_menu_view = link;
-
-														await tick();
-
-														$show_context_menu = true;
-
-														await tick();
-
-														nav_context_instance?.scrollToActive();
-													}}
-													aria-label="Show {link.title} submenu"
-												>
-													<Icon name="arrow-right-chevron" size={18} />
-												</button>
-											{/if}
-										</li>
-									{/each}
-								</ul>
-
-								<hr />
-
-								<ul>
-									<li><a href="/chat">Discord</a></li>
-									<li><a href="https://github.com/sveltejs/svelte">GitHub</a></li>
-								</ul>
-							</div>
-						</div>
-
-						<div class="context" inert={!$show_context_menu}>
-							{#if current_menu_view}
-								<NavContextMenu
-									bind:this={nav_context_instance}
-									contents={$current_menu_view?.sections}
-								/>
-							{/if}
-						</div>
-
-						<button
-							class="back-button raised icon"
-							onclick={() => ($show_context_menu = false)}
-							inert={!show_context_menu}
-						>
-							<Icon name="arrow-left" size={18} />
-							<span
-								>{#if back_button}{@render back_button()}{:else}Back to main menu{/if}</span
-							>
-						</button>
+<ModalOverlay {onclose} />
+
+<div class="menu" use:trap={{ reset_focus: false }}>
+	<div class="mobile-main-menu" transition:popup={{ duration: 3000, easing: quintOut }}>
+		<div
+			class="menu-background"
+			class:ready
+			style:height={show_context_menu ? '100%' : `${universal_menu_inner_height}px`}
+		></div>
+
+		<div
+			class="clip"
+			style:--height-difference="{menu_height - universal_menu_inner_height}px"
+			ontransitionstart={(e) => {
+					const target = e.target as HTMLElement;
+
+					if (!target?.classList.contains('viewport')) return;
+					if (e.propertyName !== 'transform') return;
+
+					// we need to apply a clip-path during the transition so that the contents
+					// are constrained to the menu background, but only while the transition
+					// is running, otherwise it prevents the contents from being scrolled
+					const a = 'calc(var(--height-difference) + 1px)';
+					const b = '1px';
+
+					const start = show_context_menu ? a : b;
+					const end = show_context_menu ? b : a;
+
+					const container = e.currentTarget;
+
+					container.style.clipPath = `polygon(0% ${start}, 100% ${start}, 100% 100%, 0% 100%)`;
+
+					setTimeout(() => {
+						container.style.clipPath = `polygon(0% ${end}, 100% ${end}, 100% 100%, 0% 100%)`;
+					}, 0);
+				}}
+			ontransitionend={(e) => {
+					const target = e.target as HTMLElement;
+
+					if (!target?.classList.contains('viewport')) return;
+					if (e.propertyName !== 'transform') return;
+
+					e.currentTarget.style.clipPath = '';
+
+					// whenever we transition from one menu to the other, we need to move focus to the first item in the new menu
+					if (!show_context_menu) {
+						universal_menu?.querySelector('a')?.focus();
+					}
+				}}
+		>
+			<div
+				class="viewport"
+				class:reduced-motion={$reduced_motion}
+				class:offset={show_context_menu}
+				bind:clientHeight={menu_height}
+			>
+				<div class="universal" inert={show_context_menu} bind:this={universal_menu}>
+					<div class="contents" bind:clientHeight={universal_menu_inner_height}>
+						<ul>
+							{#each links as link}
+								<li>
+									<a href="/{link.slug}">
+										{link.title}
+									</a>
+
+									{#if link.sections}
+										<button
+											class="raised icon"
+											onclick={async (event) => {
+												event.preventDefault();
+
+												current = link;
+
+												await tick();
+
+												show_context_menu = true;
+
+												await tick();
+
+												nav_context_instance?.scrollToActive();
+											}}
+											aria-label="Show {link.title} submenu"
+										>
+											<Icon name="arrow-right-chevron" size={18} />
+										</button>
+									{/if}
+								</li>
+							{/each}
+						</ul>
+
+						<hr />
+
+						<ul>
+							<li><a href="/chat">Discord</a></li>
+							<li><a href="https://github.com/sveltejs/svelte">GitHub</a></li>
+						</ul>
 					</div>
 				</div>
+
+				<div class="context" inert={!show_context_menu}>
+					{#if current}
+						<NavContextMenu
+							bind:this={nav_context_instance}
+							title={current.title}
+							contents={current.sections}
+						/>
+					{/if}
+				</div>
+
+				<label class="back-button">
+					<button
+						class="raised icon"
+						onclick={() => (show_context_menu = false)}
+						inert={!show_context_menu}
+					>
+						<Icon name="arrow-left" size={18} />
+					</button>
+					<span>Back to main menu</span>
+				</label>
 			</div>
 		</div>
-	{/if}
+	</div>
 </div>
 
 <style>
@@ -246,7 +182,7 @@
 		position: fixed;
 		left: 0px;
 		bottom: var(--bottom, var(--sk-nav-height));
-		z-index: 1;
+		z-index: 100;
 		width: 100%;
 		height: 70vh;
 		border-radius: 1rem 1rem 0 0;
@@ -254,6 +190,7 @@
 		overflow-x: hidden;
 		pointer-events: none;
 		transform: translate3d(0, 0, 0);
+		filter: var(--sk-shadow);
 	}
 
 	button {
@@ -274,11 +211,10 @@
 		background: var(--background, var(--sk-back-2));
 		will-change: height;
 		transition: 0.4s var(--quint-out);
-		transition-property: background;
-		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.19);
+		transition-property: none;
 
 		&.ready {
-			transition-property: height, background;
+			transition-property: height;
 		}
 
 		:root.dark & {
@@ -328,13 +264,9 @@
 
 		& :global(a) {
 			position: relative;
-			display: flex;
-			align-items: center;
 			padding: 0.3rem 0;
-			margin: 0.3rem 0;
-			color: var(--sk-text-2);
+			color: var(--sk-text-3);
 			font: var(--sk-font-ui-medium);
-			border-radius: var(--sk-border-radius);
 			width: 100%;
 			height: 100%;
 		}
@@ -347,36 +279,34 @@
 		padding: 1rem var(--sk-page-padding-side);
 		max-height: 70vh;
 		overflow-y: scroll;
+
+		button {
+			/* width: 2.6rem; */
+			height: 2.6rem;
+		}
 	}
 
 	.context {
 		position: relative;
-		height: 99%;
+		height: 100%;
 		bottom: -7px;
 		padding-bottom: 2rem;
 	}
 
 	.back-button {
 		position: absolute;
-		bottom: -1px;
+		bottom: 0;
 		right: 0;
-		z-index: 9;
-
 		display: flex;
 		align-items: center;
 		justify-content: start;
 		gap: 1rem;
-
 		font: var(--sk-font-ui-medium);
 		color: var(--sk-text-3);
-
-		background-color: var(--sk-back-3);
-
-		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.19);
-
+		background-color: var(--sk-back-2);
 		width: 50%;
-		height: 48px;
-		padding: 0 1.5rem;
+		height: 4.8rem;
+		padding: 0 var(--sk-page-padding-side);
 	}
 
 	.universal .contents,
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 997f23d598..d9a8fc168b 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -12,6 +12,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	import Dropdown from '../components/Dropdown.svelte';
 	import { HoverMenu } from '../components';
 	import Search from '../search/Search.svelte';
+	import { tick } from 'svelte';
 
 	interface Props {
 		home_title?: string;
@@ -23,6 +24,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	let visible = $state(true);
 
+	// mobile nav stuff
+	let open = $state(false);
+	let current = $state.raw<NavigationLink | undefined>();
+	let menu_button: HTMLButtonElement;
+
 	let nav: HTMLElement | undefined = $state();
 
 	// Prevents navbar to show/hide when clicking in docs sidebar
@@ -43,7 +49,18 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	}
 </script>
 
-<svelte:window onscroll={handle_scroll} onhashchange={handle_hashchange} />
+<svelte:window
+	onscroll={handle_scroll}
+	onhashchange={handle_hashchange}
+	onkeydown={(e) => {
+		if (open && e.key === 'Escape') {
+			open = false;
+			// we only manage focus when Esc is hit
+			// otherwise, the navigation will reset focus
+			tick().then(() => menu_button.focus());
+		}
+	}}
+/>
 
 <nav
 	bind:this={nav}
@@ -126,16 +143,38 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 		<ThemeToggle />
 
-		<Menu {links} />
+		<button
+			bind:this={menu_button}
+			aria-label="Toggle menu"
+			aria-expanded={open}
+			class="menu-toggle raised icon"
+			class:open
+			onclick={() => {
+				open = !open;
+
+				if (open) {
+					const segment = $page.url.pathname.split('/')[1];
+					current = links.find((link) => link.slug === segment);
+				}
+			}}
+		>
+			<Icon name={open ? 'close' : 'menu'} size={16} />
+		</button>
 	</div>
 </nav>
 
+{#if open}
+	<div class="mobile">
+		<Menu {links} {current} onclose={() => (open = false)} />
+	</div>
+{/if}
+
 <style>
 	nav {
 		position: fixed;
 		display: flex;
 		top: 0;
-		z-index: 100;
+		z-index: 101;
 		width: 100vw;
 		height: var(--sk-nav-height);
 		margin: 0 auto;
diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
index 8d5d009dc6..0a7632df15 100644
--- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte
+++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte
@@ -3,7 +3,7 @@
 	import type { NavigationLink } from '../types';
 	import { onMount } from 'svelte';
 
-	let { contents = [] }: { contents?: NavigationLink['sections'] } = $props();
+	let { title, contents = [] }: { title: string; contents: NavigationLink['sections'] } = $props();
 
 	let nav = $state() as HTMLElement;
 
@@ -31,71 +31,61 @@
 </script>
 
 <nav bind:this={nav}>
-	{#if contents}
-		{#each contents as { sections, title }, index}
-			<section>
-				<h2>{title}</h2>
-
-				{#if sections.length !== 0}
-					<ul>
-						{#each sections as { title, sections: subsections }}
-							<li>
-								{#if title}
-									<h3>
-										{title}
-									</h3>
-								{/if}
-
-								<ul>
-									{#each subsections as { path, title }}
-										<li>
-											<a href={path} aria-current={path === $page.url.pathname}>
-												{title}
-											</a>
-										</li>
-									{/each}
-								</ul>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-
-				{#if contents.length !== 1 && index !== contents.length - 1}
-					<hr />
-				{/if}
-			</section>
-		{/each}
-	{/if}
+	{#each contents as section}
+		<section>
+			<h2>{title} • {section.title}</h2>
+
+			{#if section.sections.length !== 0}
+				<ul>
+					{#each section.sections as { title, sections: subsections }}
+						<li>
+							{#if title}
+								<h3>
+									{title}
+								</h3>
+							{/if}
+
+							<ul>
+								{#each subsections as { path, title }}
+									<li>
+										<a href={path} aria-current={path === $page.url.pathname ? 'page' : undefined}>
+											{title}
+										</a>
+									</li>
+								{/each}
+							</ul>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+		</section>
+	{/each}
 </nav>
 
 <style>
 	nav {
-		padding: 0.29rem;
-		padding-top: 0;
+		padding: 0 0 3rem 0;
 		font-family: var(--sk-font-family-ui);
 		overflow-y: auto;
-
 		height: 100%;
 	}
 
-	section > ul {
-		padding: 1rem;
-		padding-bottom: 0rem;
-		margin-bottom: 0;
-	}
+	section {
+		padding: 1rem var(--sk-page-padding-side);
 
-	section:not(:first-child) {
-		padding-top: 1.5rem;
-	}
+		& > ul {
+			margin-bottom: 0 0 2rem 0;
+		}
 
-	hr {
-		border: none;
-		border-top: 1px solid var(--sk-back-5);
-		margin: 0;
-		margin-top: 1rem;
-		margin-bottom: 1rem;
-		width: 95%;
-		transform: translateX(2.5%);
+		ul {
+			list-style-type: none;
+			margin: 0;
+			margin-bottom: 2.5rem;
+		}
+
+		li {
+			display: block;
+		}
 	}
 
 	h2,
@@ -104,30 +94,14 @@
 		padding-bottom: 0.8rem;
 		font: var(--sk-font-ui-medium);
 		text-transform: uppercase;
-		letter-spacing: 0.1em;
-		color: var(--sk-text-3);
+		color: var(--sk-text-1);
 	}
 
 	h2 {
 		position: sticky;
-		top: -1px;
+		top: 0;
 		z-index: 1;
-		background-color: var(--sk-back-3);
-		width: 98%;
-		padding: 1rem 1rem 1rem 4px;
-		margin-left: 4px;
-
-		border-radius: 1rem 1rem 0 0;
-	}
-
-	ul {
-		list-style-type: none;
-		margin: 0;
-		margin-bottom: 2.5rem;
-	}
-
-	li {
-		display: block;
+		padding: 1rem 0;
 	}
 
 	a {
@@ -135,17 +109,11 @@
 		align-items: center;
 		border-radius: var(--sk-border-radius);
 		color: var(--sk-text-2);
-		padding: 0 0.75rem !important;
 		transition: 0.1s ease;
 		transition-property: background-color, color;
 
-		&[aria-current='true'] {
+		&[aria-current='page'] {
 			color: var(--sk-theme-1) !important;
 		}
 	}
-
-	a:hover {
-		text-decoration: none;
-		background-color: var(--sk-back-4);
-	}
 </style>