diff --git a/src/components/FeedbackPrompt.tsx b/src/components/FeedbackPrompt.tsx
index f705af5b56217b4..9fd2730c0484afc 100644
--- a/src/components/FeedbackPrompt.tsx
+++ b/src/components/FeedbackPrompt.tsx
@@ -1,6 +1,10 @@
 import { useState } from "react";
+import {
+	MdOutlineThumbUp,
+	MdOutlineThumbDown,
+	MdCheckCircleOutline,
+} from "react-icons/md";
 import { Turnstile } from "@marsidev/react-turnstile";
-import { MdOutlineThumbUp, MdOutlineThumbDown } from "react-icons/md";
 import { track } from "~/util/zaraz";
 
 type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
@@ -30,26 +34,28 @@ function Buttons({
 	setOption: SetState<"yes" | "no" | undefined>;
 }) {
 	return (
-		<>
+		<div className="mt-3 flex gap-2">
 			<button
 				onClick={() => {
 					setTitle("What did you like?");
 					setOption("yes");
 				}}
-				className="cursor-pointer bg-transparent"
+				className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-[var(--sl-color-bg-nav)] px-3 text-[13px] font-medium text-[var(--sl-color-text)] shadow-none ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] dark:hover:bg-[var(--color-cl1-gray-2)]"
 			>
-				<MdOutlineThumbUp className="text-sl hover:text-accent text-2xl" />
+				<MdOutlineThumbUp size={18} className="opacity-70" />
+				<span>Yes</span>
 			</button>
 			<button
 				onClick={() => {
 					setTitle("What went wrong?");
 					setOption("no");
 				}}
-				className="cursor-pointer bg-transparent"
+				className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-[var(--sl-color-bg-nav)] px-3 text-[13px] font-medium text-[var(--sl-color-text)] shadow-none ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] dark:hover:bg-[var(--color-cl1-gray-2)]"
 			>
-				<MdOutlineThumbDown className="text-sl hover:text-accent text-2xl" />
+				<MdOutlineThumbDown size={18} className="opacity-70" />
+				<span>No</span>
 			</button>
-		</>
+		</div>
 	);
 }
 
@@ -89,39 +95,65 @@ function Form({
 	}
 
 	return (
-		<form action={submit}>
-			{questions[option].map(([label, value]) => (
-				<label key={value} className="mb-2 block text-xs">
-					<input
-						type="radio"
-						name="reason"
-						value={value}
-						onChange={() => setSelectedReason(true)}
-						className="mr-2 align-middle"
-					/>
-					{label}
-				</label>
-			))}
+		<form action={submit} className="mt-3 flex flex-col gap-2">
+			<fieldset className="m-0 border-0 p-0">
+				<legend className="sr-only">
+					{option === "yes" ? "What did you like?" : "What went wrong?"}
+				</legend>
+				<div className="flex flex-col gap-1.5">
+					{questions[option].map(([label, value]) => (
+						<label
+							key={value}
+							className="relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13px] text-[var(--sl-color-text)] ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 select-none hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] has-[:checked]:ring-[var(--sl-color-text-accent)] has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--sl-color-text-accent)] has-[:focus-visible]:outline-none dark:hover:bg-[var(--color-cl1-gray-2)]"
+						>
+							<input
+								type="radio"
+								name="reason"
+								value={value}
+								onChange={() => setSelectedReason(true)}
+								className="peer absolute top-0 left-0 h-full w-full cursor-pointer opacity-0"
+							/>
+							{/* Outer ring — becomes accent-colored when checked or focused */}
+							<span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full ring-1 ring-[var(--sl-color-gray-3)] transition-all duration-150 peer-checked:ring-2 peer-checked:ring-[var(--sl-color-text-accent)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--sl-color-text-accent)]">
+								{/* Inner dot — visible when checked or focused */}
+								<span className="h-2 w-2 scale-0 rounded-full bg-[var(--sl-color-text-accent)] transition-transform duration-150 [label:has(:checked)_&]:scale-100 [label:has(:focus-visible)_&]:scale-100" />
+							</span>
+							<span className="leading-tight">{label}</span>
+						</label>
+					))}
+				</div>
+			</fieldset>
 			<textarea
 				name="info"
+				rows={2}
 				placeholder="Tell us more about your experience."
-				className="mb-2 block resize-none text-xs"
+				className="mt-1 w-full resize-none rounded-lg border-0 bg-white px-3 py-2 text-[13px] text-[var(--sl-color-text)] ring-1 ring-[var(--sl-color-hairline)] transition-all duration-150 outline-none placeholder:text-[var(--sl-color-gray-3)] focus:ring-2 focus:ring-[var(--sl-color-text-accent)] dark:bg-[var(--sl-color-bg-nav)]"
 			/>
 			<Turnstile
 				siteKey="0x4AAAAAAA645TGhxiBMQ7Gu"
 				options={{ size: "compact" }}
 				onSuccess={() => setPassedTurnstile(true)}
 			/>
-			<input
+			<button
 				type="submit"
-				value="Submit"
 				disabled={!selectedReason || !passedTurnstile}
-				className="mt-2"
-			/>
+				className="mt-1 inline-flex h-8 w-max cursor-pointer items-center justify-center rounded-lg border-0 bg-[var(--sl-color-text-accent)] px-4 text-[13px] font-medium text-white shadow-none transition-colors duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+			>
+				Submit
+			</button>
 		</form>
 	);
 }
 
+function SuccessState() {
+	return (
+		<div className="mt-3 flex items-center gap-2 rounded-lg bg-[var(--color-cl1-green-9)] px-3 py-2.5 text-[13px] text-[var(--color-cl1-green-5)] dark:bg-[var(--color-cl1-green-0)] dark:text-[var(--color-cl1-green-7)]">
+			<MdCheckCircleOutline size={16} />
+			<span>Thank you for your feedback!</span>
+		</div>
+	);
+}
+
 export default function FeedbackPrompt() {
 	const [title, setTitle] = useState("Was this helpful?");
 	const [option, setOption] = useState<"yes" | "no">();
@@ -129,11 +161,18 @@ export default function FeedbackPrompt() {
 
 	return (
 		<div id="feedback-form">
-			<h2>{title}</h2>
-			{!option && <Buttons setTitle={setTitle} setOption={setOption} />}
+			{!submitted && (
+				<p className="m-0 text-[11px] font-semibold tracking-widest text-[var(--sl-color-gray-3)] uppercase">
+					{title}
+				</p>
+			)}
+			{!option && !submitted && (
+				<Buttons setTitle={setTitle} setOption={setOption} />
+			)}
 			{!submitted && (
 				<Form setTitle={setTitle} setSubmitted={setSubmitted} option={option} />
 			)}
+			{submitted && <SuccessState />}
 		</div>
 	);
 }
diff --git a/src/components/HeaderDropdowns.tsx b/src/components/HeaderDropdowns.tsx
index b62f64ecf87cbd9..8c43c52fc9d1e0b 100644
--- a/src/components/HeaderDropdowns.tsx
+++ b/src/components/HeaderDropdowns.tsx
@@ -34,7 +34,7 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 	const { refs, floatingStyles, context } = useFloating({
 		open: isOpen,
 		onOpenChange: setIsOpen,
-		middleware: [shift(), offset(5)],
+		middleware: [shift(), offset(8)],
 		whileElementsMounted: autoUpdate,
 	});
 
@@ -51,23 +51,23 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 			<button
 				ref={refs.setReference}
 				{...getReferenceProps()}
-				className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent p-2 font-medium hover:shadow-md"
+				className="flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-transparent px-3 text-sm font-medium text-[var(--color-header-text)] transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
 			>
 				{label}
-				<PiCaretDownBold />
+				<PiCaretDownBold className="size-2.5 text-[var(--color-header-text-subtle)]" />
 			</button>
 			{isOpen && (
 				<ul
 					ref={refs.setFloating}
 					style={floatingStyles}
 					{...getFloatingProps()}
-					className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 max-w-80 min-w-60 list-none rounded-sm border pl-0 shadow-md"
+					className="max-w-64 min-w-44 list-none rounded-lg border border-[var(--color-header-overlay-line)] bg-[var(--color-header-overlay-bg)] p-1 shadow-[0_4px_16px_var(--color-header-overlay-shadow)]"
 				>
 					{pages.map((page) => (
-						<li key={page.href}>
+						<li key={page.href} className="list-none">
 							<a
 								href={page.href}
-								className="8 hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1 block p-3 text-black no-underline"
+								className="block rounded-md px-2.5 py-1.5 text-sm text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
 								target={page.href.startsWith("https") ? "_blank" : undefined}
 							>
 								{page.label}
@@ -82,12 +82,12 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 
 export default function HeaderDropdownsComponent() {
 	return (
-		<div className="flex gap-2 leading-6 text-nowrap">
+		<div className="flex items-center gap-0.5 text-nowrap">
 			{links.map(({ label, href }) => (
 				<a
 					key={href}
 					href={href}
-					className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex items-center justify-center rounded-sm p-2 font-medium text-black no-underline hover:shadow-md"
+					className="flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
 				>
 					{label}
 				</a>
diff --git a/src/components/changelog/Header.astro b/src/components/changelog/Header.astro
index 39af535e55652e4..f6f5f5d2893c3be 100644
--- a/src/components/changelog/Header.astro
+++ b/src/components/changelog/Header.astro
@@ -19,7 +19,8 @@ const products = directory.filter(
 );
 
 const filteredGroups = groups.filter((group) => {
-	const groupProducts = directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
+	const groupProducts =
+		directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
 	return groupProducts.some((p) => changelogProductIds.includes(p.id));
 });
 
@@ -43,16 +44,18 @@ const currentPath = Astro.url.pathname;
 				icon="right-caret"
 			/>
 		</div>
-		{showProductSelect && (
-			<div class="not-content">
-				<ProductSelect
-					client:load
-					products={products}
-					groups={filteredGroups}
-					currentPath={currentPath}
-				/>
-			</div>
-		)}
+		{
+			showProductSelect && (
+				<div class="not-content">
+					<ProductSelect
+						client:load
+						products={products}
+						groups={filteredGroups}
+						currentPath={currentPath}
+					/>
+				</div>
+			)
+		}
 	</div>
 	<Image
 		src={HeroImage}
diff --git a/src/components/overrides/Footer.astro b/src/components/overrides/Footer.astro
index 5ca474e9af76e54..09cd2e7930d02b4 100644
--- a/src/components/overrides/Footer.astro
+++ b/src/components/overrides/Footer.astro
@@ -165,14 +165,6 @@ if (
 	.feedback-prompt {
 		padding-top: 2rem;
 		margin-bottom: 2rem;
-
-		h2 {
-			color: var(--sl-color-white);
-			font-size: var(--sl-text-h5);
-			font-weight: 600;
-			line-height: var(--sl-line-height-headings);
-			margin-bottom: 0.5rem;
-		}
 	}
 
 	.starlight-footer-section {
diff --git a/src/components/overrides/Header.astro b/src/components/overrides/Header.astro
index abedca00187605c..4e49daeaa068fd9 100644
--- a/src/components/overrides/Header.astro
+++ b/src/components/overrides/Header.astro
@@ -10,18 +10,21 @@ import AgentDirective from "../AgentDirective.astro";
 
 <AgentDirective />
 
-<div class="flex h-full items-center justify-between gap-4">
-	<SiteTitle />
-	<div class="flex gap-8">
+<div class="header-inner">
+	<div class="header-start">
+		<SiteTitle />
+	</div>
+	<div class="header-end">
 		<div id="docsearch">
 			<DocSearch />
 		</div>
-		<div id="right-group" class="hidden h-10 flex-wrap gap-x-2 overflow-hidden">
+		<div id="right-group">
 			<HeaderDropdowns client:idle />
+			<div class="header-divider" role="separator"></div>
 			<a
 				id="header-login-button"
 				href="https://dash.cloudflare.com/"
-				class="bg-cl1-brand-orange text-cl1-black mr-2 flex items-center justify-center rounded-sm px-6 font-medium no-underline"
+				class="header-login"
 			>
 				Log in
 			</a>
@@ -32,51 +35,119 @@ import AgentDirective from "../AgentDirective.astro";
 </div>
 
 <style>
+	.header-inner {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 100%;
+		gap: 1rem;
+	}
+
+	.header-start {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.header-end {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.header-divider {
+		width: 1px;
+		height: 1rem;
+		background-color: var(--color-header-line);
+		margin-inline: 0.375rem;
+		flex-shrink: 0;
+	}
+
+	.header-login {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 2.25rem;
+		padding: 0 1.25rem;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+		text-decoration: none;
+		color: var(--color-header-btn-text);
+		background-color: var(--color-header-btn-bg);
+	}
+
 	:global(.site-title) {
 		gap: 0.5rem;
 		min-width: fit-content;
-		overflow: none;
+		overflow: visible;
 	}
+
 	:global(.site-title span) {
-		color: var(--sl-color-white);
+		color: var(--color-cl1-black);
+		font-weight: 600;
+		letter-spacing: -0.01em;
 	}
 
-	:global(.site-title img) {
-		height: 1.25rem;
+	:root[data-theme="dark"] :global(.site-title span) {
+		color: var(--color-cl1-white);
 	}
 
-	#social-icons {
-		--sl-icon-color: var(--sl-color-white);
+	:global(.site-title img) {
+		height: 1.25rem;
 	}
 
 	:global(starlight-theme-select > label > select) {
 		line-height: 1.25rem;
-		margin: 1px 1px;
+		margin: 1px;
+		color: var(--color-header-text-subtle);
 	}
 
 	:global(
 		starlight-theme-select > label > select:focus,
 		starlight-theme-select > label > select:focus-visible
 	) {
-		margin: 1px 1px;
+		margin: 1px;
 		outline-offset: -4px;
 	}
 
 	:global(starlight-theme-select > label > .label-icon) {
 		left: 8%;
+		color: var(--color-header-text-subtle);
 	}
 
 	:global(starlight-theme-select > label > .caret) {
 		left: 75%;
 	}
 
+	#right-group {
+		display: none;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
 	@media screen and (min-width: 800px) {
 		#right-group {
 			display: flex;
 		}
 
 		#docsearch {
-			width: 20rem;
+			width: 18rem;
+		}
+
+		#docsearch :global(.DocSearch-Button) {
+			height: 2.25rem;
+			border-color: var(--color-header-line);
+			color: var(--color-header-text-subtle);
+			transition: color 150ms, background-color 150ms, border-color 150ms;
+		}
+
+		#docsearch :global(.DocSearch-Button:hover) {
+			border-color: var(--color-header-line);
+			background-color: var(--color-header-fill);
+			color: var(--color-header-hover-text);
 		}
 	}
 </style>
diff --git a/src/components/overrides/PageTitle.astro b/src/components/overrides/PageTitle.astro
index 334ec99b6639a74..2504b9a601f78f6 100644
--- a/src/components/overrides/PageTitle.astro
+++ b/src/components/overrides/PageTitle.astro
@@ -128,6 +128,10 @@ if (!hideBreadcrumbs) {
 		padding: 0.5rem 0;
 	}
 
+	:global(main > .content-panel:first-of-type) {
+		padding-block: 1rem;
+	}
+
 	:global(.c-breadcrumbs__link) {
 		font-size: 0.75rem;
 		line-height: 1.25rem;
diff --git a/src/components/overrides/Sidebar.astro b/src/components/overrides/Sidebar.astro
index 4b32f9a45363350..566103b6e023add 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -30,7 +30,7 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 			aria-label="Search sidebar navigation"
 			autocomplete="off"
 			spellcheck="false"
-			class="box-border min-h-[2.125rem] w-full cursor-pointer rounded-lg border border-neutral-200 bg-transparent px-3 pr-10 text-sm text-neutral-950 placeholder-neutral-400 outline-2 outline-offset-2 outline-transparent transition-colors duration-150 hover:border-neutral-950 focus:cursor-text focus-visible:outline-blue-500 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder-neutral-500 dark:hover:border-neutral-100 dark:focus-visible:outline-blue-400"
+			class="box-border min-h-[2.125rem] w-full rounded-lg border border-neutral-200 bg-transparent px-3 pr-10 text-sm text-neutral-950 placeholder-[var(--color-cl1-gray-4)] outline-2 outline-offset-2 outline-transparent transition-colors duration-150 focus-visible:outline-blue-500 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder-[var(--color-cl1-gray-6)] dark:focus-visible:outline-blue-400"
 		/>
 		<div class="sidebar-search-icon"></div>
 	</div>
diff --git a/src/components/overrides/TableOfContents.astro b/src/components/overrides/TableOfContents.astro
index 7fbf22e63213504..938d5b12330f47c 100644
--- a/src/components/overrides/TableOfContents.astro
+++ b/src/components/overrides/TableOfContents.astro
@@ -1,65 +1,182 @@
 ---
 import Default from "@astrojs/starlight/components/TableOfContents.astro";
-
 import { Icon } from "@astrojs/starlight/components";
 import FeedbackPrompt from "../FeedbackPrompt.tsx";
 
 const tags = Astro.locals.starlightRoute.entry.data.tags;
 const showFeedback = Astro.locals.starlightRoute.entry.data.feedback;
+const showActions = !Astro.url.pathname.startsWith("/support/");
+const { editUrl } = Astro.locals.starlightRoute;
 ---
 
-<Default />
-{
-	tags && (
-		<>
-			<br />
-			<div>
-				<h2>Tags</h2>
+<div class="tb-container bg-[var(--sl-color-bg-elevated)] pr-4">
+	{/* We use Starlight's native TOC component instead of re-implementing it */}
+	<Default />
+
+	{
+		tags && tags.length > 0 && (
+			<div class="mt-8 border-t border-[var(--sidebar-border)] pt-6">
+				<h3 class="mb-3 text-[11px] font-semibold tracking-widest text-[var(--sl-color-gray-3)] uppercase">
+					Tags
+				</h3>
 				<div class="flex flex-wrap gap-2">
 					{tags.map((tag) => (
 						<a
 							href={`/search/?tags=${tag}`}
-							class="overflow-hidden rounded-sm border border-(--sl-color-hairline) px-3 text-ellipsis whitespace-nowrap text-black"
-							data-tag-serp-link={true}
+							class="rounded-full border border-[var(--sidebar-border)] bg-transparent px-3 py-1 text-[11px] font-medium text-[var(--sl-color-gray-3)] transition-colors duration-150 ease-out hover:border-[var(--sl-color-gray-2)] hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
 						>
-							{tag}
+					<a
+						href={`/search/?tags=${tag}`}
+						class="rounded-full border border-[var(--sidebar-border)] bg-transparent px-3 py-1 text-[11px] font-medium text-[var(--sl-color-gray-3)] transition-colors duration-150 ease-out hover:border-[var(--sl-color-gray-2)] hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
+						data-tag-serp-link={true}
+					>
+						{tag}
+					</a>
 						</a>
 					))}
 				</div>
 			</div>
-		</>
-	)
-}
-{
-	showFeedback && (
-		<>
-			<br />
-			<FeedbackPrompt client:idle />
-		</>
-	)
-}
-{
-	!Astro.url.pathname.startsWith("/support/") && (
-		<>
-			<br />
-			<div class="flex gap-2">
-				{Astro.locals.starlightRoute.editUrl && (
+		)
+	}
+
+	{
+		(showFeedback || showActions) && (
+			<div class="mt-6 flex flex-col gap-5 border-t border-[var(--sidebar-border)] pt-6">
+				{showFeedback && (
+					<div class="feedback-container">
+						<FeedbackPrompt client:idle />
+					</div>
+				)}
+
+				{showActions && (
+					<div class="flex flex-col gap-3">
+						{editUrl && (
+							<a
+								href={editUrl}
+							class="group flex items-center gap-2.5 rounded-sm text-[13px] text-[var(--sl-color-gray-2)] transition-colors duration-150 ease-out hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
+						>
+							<Icon
+								name="pencil"
+								class="h-3.5 w-3.5"
+								aria-hidden="true"
+							/>
+							<span>Edit page</span>
+						</a>
+					)}
 					<a
-						href={Astro.locals.starlightRoute.editUrl}
-						class="inline-flex h-8 items-center justify-center gap-2 rounded-sm border border-(--sl-color-hairline) px-3 text-black"
+						href="https://github.com/cloudflare/cloudflare-docs/issues/new/choose"
+						class="group flex items-center gap-2.5 rounded-sm text-[13px] text-[var(--sl-color-gray-2)] transition-colors duration-150 ease-out hover:text-[var(--sl-color-white)] focus-visible:ring-2 focus-visible:ring-[var(--sl-color-text-accent)] focus-visible:outline-none"
 					>
-						<Icon name="pencil" />
-						Edit
-					</a>
+						<Icon
+							name="github"
+							class="h-3.5 w-3.5"
+								aria-hidden="true"
+							/>
+							<span>Report issue</span>
+						</a>
+					</div>
 				)}
-				<a
-					href="https://github.com/cloudflare/cloudflare-docs/issues/new/choose"
-					class="inline-flex h-8 items-center justify-center gap-2 rounded-sm border border-(--sl-color-hairline) px-3 text-black"
-				>
-					<Icon name="github" />
-					Issue
-				</a>
 			</div>
-		</>
-	)
-}
+		)
+	}
+</div>
+
+<style is:global>
+	/* 
+	 * "Table Track" Design System 
+	 * We inject this globally, but scope it to the .tb-container to override Starlight's defaults safely. 
+	 */
+
+	.tb-container {
+		padding-bottom: 1rem;
+	}
+
+	/* ── 1. The Header ("On this page") ── */
+	.tb-container h2#starlight__on-this-page {
+		color: var(--sl-color-white) !important;
+		font-size: var(--sl-text-h5) !important;
+		font-weight: 600 !important;
+		line-height: var(--sl-line-height-headings) !important;
+		margin-bottom: 0.5rem !important;
+		text-wrap: balance;
+	}
+
+	/* ── 2. The Active Track (The Vertical Line) ── */
+	/* Starlight's root ul component */
+	.tb-container nav > ul {
+		margin: 0 !important;
+		padding: 0 !important;
+		display: flex;
+		flex-direction: column;
+		/* The primary gray background line */
+		border-left: 2px solid var(--sidebar-border) !important;
+		list-style: none !important;
+	}
+
+	/* Sub-lists must not have their own border, they sit flat */
+	.tb-container ul ul {
+		border-left: none !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		list-style: none !important;
+	}
+
+	/* Remove all native starlight list margins */
+	.tb-container ul li {
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	/* ── 3. The Links & Indentation ── */
+	/* We target Starlight's native link rendering inside the ul */
+	.tb-container ul a {
+		position: relative;
+		display: block !important;
+		padding: 0.375rem 0.5rem !important; /* py-1.5 px-2 equivalent */
+		line-height: 1.3 !important;
+		font-size: 13px !important;
+		text-decoration: none !important;
+		color: var(--sidebar-text) !important;
+		transition: all 150ms ease-out !important;
+		border-radius: 0 !important; /* Strip native starlight rounding */
+
+		/* 
+		 * The Magic: 
+		 * 1. Calculate left padding strictly via Starlight's native --depth CSS variable.
+		 *    Base offset is 1.25rem (gap from line to text). Nested items get +1rem per depth.
+		 * 2. Pull the link back 2px to directly overlap the root border-left track.
+		 */
+		padding-left: calc(1.25rem + (1rem * var(--depth, 0))) !important;
+		margin-left: -2px !important;
+
+		/* The hover/active track overlay */
+		border-left: 2px solid transparent !important;
+	}
+
+	/* Force specific typography for top level (H2) vs nested (H3+) */
+	.tb-container ul a[style*="--depth: 0"] {
+		color: var(--sidebar-text) !important;
+		font-weight: 400 !important;
+	}
+
+	/* Hover state */
+	.tb-container ul a:hover {
+		border-left-color: var(--sidebar-border-hover) !important;
+		color: var(--sidebar-text-strong) !important;
+	}
+
+	/* Active state (hooking into starlight's scrollspy) */
+	.tb-container ul a[aria-current="true"] {
+		border-left-color: var(--orange-accent-200) !important;
+		color: var(--sidebar-text-strong) !important;
+		font-weight: 500 !important;
+		background-color: transparent !important; /* Strip starlight native active bg */
+	}
+
+	/* Respect motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.tb-container * {
+			transition: none !important;
+		}
+	}
+</style>
diff --git a/src/styles/sidebar.css b/src/styles/sidebar.css
index b6bf632123f6fb3..365a975121e279e 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -46,6 +46,7 @@
 	--sidebar-active-bg: var(--color-cl1-gray-9);
 	--sidebar-active-text: var(--sidebar-text-strong);
 	--sidebar-border: var(--color-cl1-gray-8);
+	--sidebar-border-hover: var(--color-cl1-gray-7);
 	--sl-color-sidebar-active: var(--color-cl1-black);
 	--sl-color-sidebar-hover: var(--color-cl1-gray-9);
 }
@@ -62,6 +63,7 @@
 	--sidebar-active-bg: var(--color-cl1-gray-2);
 	--sidebar-active-text: var(--sidebar-text-strong);
 	--sidebar-border: var(--color-cl1-gray-2);
+	--sidebar-border-hover: var(--color-cl1-gray-3);
 	--sl-color-sidebar-active: var(--sidebar-text-strong);
 	--sl-color-sidebar-hover: var(--color-cl1-gray-2);
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 1a4d541d255b9d5..7922ac7d9d9ebff 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -149,6 +149,17 @@
 	}
 
 	:root {
+		/* Kumo header tokens — light mode */
+		--color-header-text: var(--color-cl1-gray-4);
+		--color-header-text-subtle: var(--color-cl1-gray-4);
+		--color-header-hover-text: var(--color-cl1-black);
+		--color-header-line: rgb(0 0 0 / 0.12);
+		--color-header-fill: rgb(0 0 0 / 0.05);
+		--color-header-overlay-bg: var(--sl-color-bg);
+		--color-header-overlay-line: rgb(0 0 0 / 0.08);
+		--color-header-overlay-shadow: rgb(0 0 0 / 0.12);
+		--color-header-btn-bg: var(--color-cl1-brand-orange);
+		--color-header-btn-text: var(--color-cl1-black);
 		--blue-accent-200: rgb(15, 0, 107);
 		--blue-accent-600: rgb(46, 105, 255);
 		--blue-accent-900: rgb(62, 116, 255);
@@ -171,5 +182,31 @@
 		--tw-accent-200: var(--orange-accent-200);
 		--tw-accent-600: var(--orange-accent-600);
 		--tw-accent-900: var(--orange-accent-900);
+
+		/* Kumo header tokens — dark mode */
+		--color-header-text: var(--color-cl1-gray-7);
+		--color-header-text-subtle: var(--color-cl1-gray-6);
+		--color-header-hover-text: var(--color-cl1-white);
+		--color-header-line: rgb(255 255 255 / 0.1);
+		--color-header-fill: rgb(255 255 255 / 0.07);
+		--color-header-overlay-bg: var(--sl-color-bg);
+		--color-header-overlay-line: rgb(255 255 255 / 0.08);
+		--color-header-overlay-shadow: rgb(0 0 0 / 0.4);
+		--color-header-btn-bg: var(--color-cl1-brand-orange);
+		--color-header-btn-text: var(--color-cl1-black);
+	}
+
+	/* Override Starlight's restrictive right-sidebar TOC container width */
+	.right-sidebar-panel .sl-container {
+		width: 100%;
+		max-width: 18rem;
+	}
+
+	/* Align "On this page" baseline with the breadcrumbs / "Copy page" button text.
+	   Content panel top = 1rem + breadcrumb padding-top = 0.5rem → 1.5rem to text baseline.
+	   Starlight's default is 1rem, so bump it to match. */
+	.right-sidebar-panel {
+		padding-top: 1.5rem !important;
+		padding-left: 1.5rem !important;
 	}
 }