diff --git a/astro.config.ts b/astro.config.ts
index 6a92460004f..7927b24ae3c 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -214,6 +214,12 @@ export default defineConfig({
 				"../components/Page.astro": fileURLToPath(
 					new URL("./src/components/overrides/Page.astro", import.meta.url),
 				),
+				"./SidebarSublist.astro": fileURLToPath(
+					new URL(
+						"./src/components/overrides/SidebarSublist.astro",
+						import.meta.url,
+					),
+				),
 			},
 		},
 	},
diff --git a/src/components/FeedbackPrompt.tsx b/src/components/FeedbackPrompt.tsx
index f705af5b562..9fd2730c048 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 b62f64ecf87..8c43c52fc9d 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 39af535e556..f6f5f5d2893 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 5ca474e9af7..09cd2e7930d 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 abedca00187..4e49daeaa06 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 334ec99b663..2504b9a601f 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 e532586f7d3..fbbd91cd881 100644
--- a/src/components/overrides/Sidebar.astro
+++ b/src/components/overrides/Sidebar.astro
@@ -7,7 +7,9 @@ import { lookupProductTitle } from "~/util/sidebar";
 const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 ---
 
-<div class="sidebar-header">
+<div
+	class="sticky top-0 z-[1] flex flex-col gap-2 bg-[var(--sl-color-black)] py-3.5 min-[50rem]:bg-[var(--sl-color-bg-sidebar)]"
+>
 	<div class="sidebar-product-title px-1">
 		<a href={"/" + product + "/"} class="flex items-center gap-2 no-underline">
 			<AstroIcon name={product} size="32px" class="text-cl1-brand-orange" />
@@ -22,10 +24,13 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 	<!-- Search Input -->
 	<div class="relative">
 		<input
-			type="text"
+			type="search"
 			id="sidebar-search"
 			placeholder="Search sidebar..."
-			class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 pr-10 text-base sm:text-sm text-gray-900 placeholder-gray-500 transition-colors duration-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
+			aria-label="Search sidebar navigation"
+			autocomplete="off"
+			spellcheck="false"
+			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>
@@ -69,6 +74,69 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		)
 			return;
 
+		// ── Animated <details> toggle ──
+		const animating = new WeakSet<HTMLDetailsElement>();
+		const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+		const DURATION = 250;
+		const EASING = "cubic-bezier(0.87, 0, 0.13, 1)";
+
+		function animateAccordion(
+			details: HTMLDetailsElement,
+			from: string,
+			to: string,
+			onDone?: () => void,
+		) {
+			const el = details.querySelector<HTMLElement>(
+				":scope > .sidebar-accordion",
+			);
+			if (!el || reducedMotion.matches) {
+				onDone?.();
+				return;
+			}
+			if (animating.has(details)) el.getAnimations().forEach((a) => a.cancel());
+			animating.add(details);
+
+			const anim = el.animate(
+				[{ gridTemplateRows: from }, { gridTemplateRows: to }],
+				{
+					duration: DURATION,
+					easing: EASING,
+					fill: onDone ? "forwards" : "none",
+				},
+			);
+			const cleanup = () => animating.delete(details);
+			anim.oncancel = cleanup;
+			anim.onfinish = () => {
+				onDone?.();
+				anim.cancel();
+				cleanup();
+			};
+		}
+		sidebarContent.addEventListener("click", (e) => {
+			const summary = (e.target as HTMLElement).closest("summary");
+			if (!summary) return;
+			const details = summary.parentElement as HTMLDetailsElement | null;
+			if (!details || details.tagName !== "DETAILS") return;
+
+			e.preventDefault();
+
+			if (details.open) {
+				animateAccordion(details, "1fr", "0fr", () => {
+					details.open = false;
+				});
+			} else {
+				details.open = true;
+				animateAccordion(details, "0fr", "1fr");
+			}
+		});
+
+		// Cancel in-flight animations before Astro page transitions.
+		document.addEventListener("astro:before-swap", () => {
+			sidebarContent
+				?.querySelectorAll<HTMLElement>(".sidebar-accordion")
+				.forEach((el) => el.getAnimations().forEach((a) => a.cancel()));
+		});
+
 		const originalState: Map<Element, boolean> = new Map();
 
 		// Store original state of details elements
@@ -90,7 +158,9 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		// Show only direct children of a folder (not recursive)
 		function showDirectChildren(details: HTMLDetailsElement) {
 			details.open = true;
-			const directList = details.querySelector(":scope > ul");
+			const directList = details.querySelector(
+				":scope > .sidebar-accordion > .sidebar-accordion-inner > ul",
+			);
 			if (directList) {
 				const directChildren = directList.querySelectorAll(":scope > li");
 				directChildren.forEach((child) => {
@@ -326,91 +396,8 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 		background-color: currentColor;
 		pointer-events: none;
 	}
-
-	:root {
-		/* Sticky header: position: sticky works because .sidebar-pane (overflow-y: auto)
-		   is the scroll container, and we remove min-height: max-content from
-		   .sidebar-content so the containing block height is bounded by the viewport. */
-		.sidebar-header {
-			position: sticky;
-			top: 0;
-			z-index: 1;
-			display: flex;
-			flex-direction: column;
-			gap: 0.5rem;
-			background-color: var(--sl-color-black);
-			padding-top: 1rem;
-			padding-bottom: 1rem;
-
-			@media (min-width: 50rem) {
-				background-color: var(--sl-color-bg-sidebar);
-			}
-		}
-
-		/* Override Starlight's height: 100% / min-height: max-content.
-		   Let .sidebar-content size to its content so sticky has the full
-		   scroll range to work within, not just one viewport height. */
-		.sidebar-content {
-			height: auto !important;
-			min-height: 0 !important;
-
-			--sl-color-hairline-light: #cacaca !important;
-
-			& > * {
-				a {
-					padding: 0.2375em var(--sl-sidebar-item-padding-inline) !important;
-
-					&[aria-current="page"] {
-						background-color: unset !important;
-						border: unset !important;
-						border-color: unset !important;
-						color: var(--sl-color-accent) !important;
-						font-weight: 600 !important;
-					}
-				}
-
-				/* Style parent navigation items that contain the current page */
-				details:has(a[aria-current="page"]) > summary,
-				details:has(a[aria-current="page"]) > summary * {
-					color: var(--sl-color-accent-high) !important;
-					font-weight: 600 !important;
-				}
-
-				/* Override to keep caret default color */
-				details:has(a[aria-current="page"]) > summary svg,
-				details:has(a[aria-current="page"]) > summary .caret,
-				details:has(a[aria-current="page"]) > summary [class*="caret"] {
-					fill: var(--sl-color-gray-3) !important;
-				}
-
-				summary {
-					padding: 0.1375em var(--sl-sidebar-item-padding-inline) !important;
-				}
-
-				.large {
-					color: var(--sl-color-gray-2) !important;
-					font-weight: unset !important;
-					font-size: unset !important;
-
-					@media (min-width: 50rem) {
-						font-size: var(--sl-text-sm) !important;
-					}
-				}
-
-				.caret {
-					font-size: 1rem !important;
-				}
-			}
-		}
-	}
-
-	:root[data-theme="dark"] {
-		.sidebar-content {
-			--sl-color-hairline-light: #444444 !important;
-
-			& > * a[aria-current="page"] {
-				color: var(--sl-color-accent-high) !important;
-			}
-		}
+	.sidebar-content {
+		height: auto !important;
+		min-height: 0 !important;
 	}
 </style>
diff --git a/src/components/overrides/SidebarSublist.astro b/src/components/overrides/SidebarSublist.astro
new file mode 100644
index 00000000000..5cd0031adc0
--- /dev/null
+++ b/src/components/overrides/SidebarSublist.astro
@@ -0,0 +1,134 @@
+---
+import { Icon, Badge } from "@astrojs/starlight/components";
+import type { SidebarEntry } from "~/util/sidebar";
+
+interface Props {
+	sublist: SidebarEntry[];
+	nested?: boolean;
+}
+
+const { sublist, nested } = Astro.props;
+
+/** Flatten a sidebar tree into a flat list of link entries. */
+function flattenSidebar(entries: SidebarEntry[]): SidebarEntry[] {
+	return entries.flatMap((entry: SidebarEntry) =>
+		entry.type === "group" ? flattenSidebar(entry.entries) : entry,
+	);
+}
+
+/**
+ * SidebarRestorePoint counter — inlined from Starlight's internal component.
+ * Each <details> needs a unique, incrementing index for the sidebar persister.
+ */
+const currentGroupIndexSymbol = Symbol.for("starlight-sidebar-group-index");
+const locals = Astro.locals as typeof Astro.locals & {
+	[currentGroupIndexSymbol]: number;
+};
+
+function nextRestoreIndex(): number {
+	const index = locals[currentGroupIndexSymbol] || 0;
+	locals[currentGroupIndexSymbol] = index + 1;
+	return index;
+}
+
+// Pre-compute restore indices for each group entry in this sublist
+const restoreIndices = sublist.map((entry) =>
+	entry.type === "group" ? nextRestoreIndex() : -1,
+);
+---
+
+<ul
+	class:list={[
+		!nested
+			? "top-level list-none p-0"
+			: "mt-0.5 ml-3 list-none border-l border-[var(--sidebar-border)] p-0 pl-2",
+	]}
+>
+	{
+		sublist.map((entry, idx) => (
+			<li class="break-words">
+				{entry.type === "link" ? (
+					<a
+						href={entry.href}
+						aria-current={entry.isCurrent ? "page" : undefined}
+						class:list={[
+							"flex min-h-[2.125rem] items-start rounded-lg px-3 py-1.5 text-sm font-medium no-underline",
+							"outline-2 outline-offset-[-2px] outline-transparent focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400",
+							entry.isCurrent
+								? "!bg-[var(--sidebar-active-bg)] !font-semibold !text-[var(--sidebar-active-text)]"
+								: "transition-colors duration-150 text-[var(--sidebar-text)] hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
+							!nested && "large",
+							entry.attrs.class,
+						]}
+						{...entry.attrs}
+					>
+						<span>{entry.label}</span>
+						{entry.badge && (
+							<Badge
+								variant={entry.badge.variant}
+								class={`ml-[0.5em] ${entry.badge.class ?? ""}`}
+								text={entry.badge.text}
+							/>
+						)}
+					</a>
+				) : (
+					<details
+						class="group/accordion"
+						open={
+							flattenSidebar(entry.entries).some(
+								(i) => i.type === "link" && i.isCurrent,
+							) || !entry.collapsed
+						}
+					>
+						<summary class:list={[
+							"group/expander flex min-h-[2.125rem] cursor-pointer items-center justify-between rounded-lg px-3 py-1.5 text-sm no-underline outline-2 outline-offset-[-2px] outline-transparent transition-colors duration-150 select-none focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400 [&::-webkit-details-marker]:hidden [&::marker]:hidden",
+							"hover:bg-[var(--sidebar-hover-bg)] hover:text-[var(--sidebar-hover-text)]",
+							entry.hasActivePage
+								? "font-semibold text-[var(--sidebar-text-strong)]"
+								: "font-medium text-[var(--sidebar-text)]",
+						]}>
+							<span class="group-label">
+								<span class:list={[!nested && "large"]}>{entry.label}</span>
+								{entry.badge && (
+									<Badge
+										variant={entry.badge.variant}
+										class={`ml-[0.5em] ${entry.badge.class ?? ""}`}
+										text={entry.badge.text}
+									/>
+								)}
+							</span>
+							<Icon
+								name="right-caret"
+								class="caret shrink-0 ml-auto -mr-px text-base text-[var(--sidebar-text)] opacity-50 group-hover/expander:text-[var(--sidebar-hover-text)] transition-transform duration-250"
+								size="1.25rem"
+							/>
+						</summary>
+						<sl-sidebar-restore data-index={restoreIndices[idx]} />
+						<div class="sidebar-accordion grid grid-rows-[0fr] group-open/accordion:grid-rows-[1fr]">
+							<div class="sidebar-accordion-inner overflow-hidden min-h-0">
+								<Astro.self sublist={entry.entries} nested />
+							</div>
+						</div>
+					</details>
+				)}
+			</li>
+		))
+	}
+</ul>
+
+<style is:global>
+	/* Caret rotation — must be global because .caret is on an SVG from a child component */
+	.sidebar-content [open] > summary .caret {
+		transform: rotate(90deg);
+	}
+	.sidebar-content [dir="rtl"] .caret {
+		transform: rotateZ(180deg);
+	}
+</style>
+
+<style>
+	/* Spacing between sibling items — top-level and nested */
+	ul > li + li {
+		margin-top: 1px;
+	}
+</style>
diff --git a/src/components/overrides/TableOfContents.astro b/src/components/overrides/TableOfContents.astro
index 7fbf22e6321..938d5b12330 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 78e1ccca069..e9af6d020fd 100644
--- a/src/styles/sidebar.css
+++ b/src/styles/sidebar.css
@@ -3,90 +3,38 @@
 }
 
 .sidebar-content {
-	gap: 0;
-	padding: 0 1.5rem 1rem;
-
-	.large {
-		font-weight: unset;
-		font-size: unset;
-		color: unset;
-	}
-
-	[aria-current="page"] {
-		background-color: transparent !important;
-		font-weight: 500 !important;
-		color: var(--sl-color-sidebar-active) !important;
-	}
-
-	.top-level > li {
-		& + li {
-			margin-top: 0.5rem;
-		}
-
-		& > a,
-		& > details > summary {
-			font-size: 1rem;
-			font-weight: normal;
-
-			background-color: transparent;
-			color: var(--sl-color-white);
-
-			padding: 0.25rem 0.5rem;
-
-			&:hover {
-				background-color: var(--sl-color-sidebar-hover);
-				border-radius: 0.25rem;
-			}
-		}
-
-		& > details > ul {
-			--sl-sidebar-item-padding-inline: 0.5rem;
-		}
-
-		ul {
-			--sl-sidebar-item-padding-inline: 0.75rem;
-
-			margin-inline-start: var(--sl-sidebar-item-padding-inline);
-			border-inline-start: 1px solid var(--sl-color-hairline-light);
-
-			margin-top: 0.5rem;
-
-			li {
-				margin-inline-start: unset;
-				border-inline-start: unset;
-				padding-inline-start: unset;
-
-				& + li {
-					margin-top: 0.375rem;
-				}
-			}
-
-			a,
-			summary {
-				--sl-sidebar-item-padding-inline: 0.75rem;
-
-				padding-top: 0.25rem;
-				padding-bottom: 0.25rem;
-
-				font-size: 0.875rem;
-				color: var(--sl-color-text);
+	gap: 2px;
+	padding: 0 0.75rem 1rem;
+}
 
-				&:hover {
-					background-color: var(--sl-color-sidebar-hover);
-					border-radius: 0;
-				}
-			}
-		}
-	}
+/* ── Light theme ── */
+:root[data-theme="light"] {
+	--sl-color-bg-nav: var(--color-cl1-white);
+	--sidebar-text: var(--color-cl1-gray-4);
+	--sidebar-text-strong: var(--color-cl1-black);
+	--sidebar-hover-bg: var(--color-cl1-gray-9);
+	--sidebar-hover-text: var(--sidebar-text-strong);
+	--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);
 }
 
+/* ── Dark theme ── */
 :root[data-theme="dark"] {
-	--sl-color-bg-sidebar: var(--color-cl1-gray-0);
-	--sl-color-sidebar-active: var(--color-cl1-blue-7);
+	--sl-color-bg-nav: var(--sl-color-bg);
+	--sl-color-bg-sidebar: var(--sl-color-bg);
+	--sl-color-hairline-shade: var(--color-cl1-gray-2);
+	--sidebar-text: var(--color-cl1-gray-7);
+	--sidebar-text-strong: var(--color-cl1-white);
+	--sidebar-hover-bg: var(--color-cl1-gray-2);
+	--sidebar-hover-text: var(--sidebar-text-strong);
+	--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);
 }
-
-:root[data-theme="light"] {
-	--sl-color-sidebar-active: var(--color-cl1-blue-4);
-	--sl-color-sidebar-hover: var(--color-cl1-gray-9);
-}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 1a4d541d255..7922ac7d9d9 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;
 	}
 }
diff --git a/src/util/sidebar.ts b/src/util/sidebar.ts
index 79d25ee7355..2761b5e919c 100644
--- a/src/util/sidebar.ts
+++ b/src/util/sidebar.ts
@@ -9,6 +9,7 @@ type Link = Extract<StarlightRouteData["sidebar"][0], { type: "link" }> & {
 };
 type Group = Extract<StarlightRouteData["sidebar"][0], { type: "group" }> & {
 	order?: number;
+	hasActivePage?: boolean;
 };
 
 export type SidebarEntry = Link | Group;
@@ -165,6 +166,7 @@ function setSidebarCurrentEntry(
 			entry.type === "group" &&
 			setSidebarCurrentEntry(entry.entries, pathname)
 		) {
+			entry.hasActivePage = true;
 			return true;
 		}