diff --git a/apps/docs/content/docs/guides.mdx b/apps/docs/content/docs/guides.mdx
deleted file mode 100644
index 5ea0894f9c8..00000000000
--- a/apps/docs/content/docs/guides.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Guides
-description: In-depth guides for using Superset
----
-
-## Guides
-
-This section contains detailed guides for using Superset effectively.
-
-More guides coming soon!
diff --git a/apps/docs/content/docs/meta.json b/apps/docs/content/docs/meta.json
index 089e504d7e3..9873447de40 100644
--- a/apps/docs/content/docs/meta.json
+++ b/apps/docs/content/docs/meta.json
@@ -1,14 +1,13 @@
 {
 	"title": "Documentation",
 	"pages": [
-		"---Get Started---",
+		"---Rocket Get Started---",
 		"quick-start",
 		"overview",
 		"installation",
-		"---Core Features---",
+		"---Gauge Core Features---",
 		"core-features",
-		"---How to Guides---",
-		"guides",
+		"---BookOpen How to Guides---",
 		"setup-teardown-scripts"
 	]
 }
diff --git a/apps/docs/content/docs/quick-start.mdx b/apps/docs/content/docs/quick-start.mdx
index da6b9b577b0..506bc7a98f7 100644
--- a/apps/docs/content/docs/quick-start.mdx
+++ b/apps/docs/content/docs/quick-start.mdx
@@ -13,10 +13,3 @@ Get started with Superset in just a few steps:
 4. **Start working** - You're ready to go!
 
 <DownloadButton />
-
-## Next Steps
-
-<Cards>
-	<Card title="Overview" href="/overview" />
-	<Card title="Installation" href="/installation" />
-</Cards>
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 1765e22b426..41f1a4fe9ce 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -11,9 +11,13 @@
 		"postinstall": "fumadocs-mdx"
 	},
 	"dependencies": {
+		"@radix-ui/react-collapsible": "^1.1.12",
+		"@radix-ui/react-scroll-area": "^1.2.10",
 		"@sentry/nextjs": "^10.32.1",
 		"@superset/shared": "workspace:*",
 		"@t3-oss/env-nextjs": "^0.13.8",
+		"class-variance-authority": "^0.7.1",
+		"framer-motion": "^12.23.26",
 		"fumadocs-core": "16.4.7",
 		"fumadocs-mdx": "14.2.5",
 		"fumadocs-ui": "16.4.7",
@@ -34,6 +38,7 @@
 		"@types/react-dom": "^19.2.3",
 		"postcss": "^8.5.6",
 		"tailwindcss": "^4.0.9",
+		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.9.3"
 	}
 }
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/DocsPageLayout.tsx b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/DocsPageLayout.tsx
new file mode 100644
index 00000000000..b91718054ae
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/DocsPageLayout.tsx
@@ -0,0 +1,246 @@
+import type { TableOfContents } from "fumadocs-core/toc";
+import { AnchorProvider } from "fumadocs-core/toc";
+import { I18nLabel } from "fumadocs-ui/contexts/i18n";
+import { Edit, Text } from "lucide-react";
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+import { forwardRef } from "react";
+import { buttonVariants } from "@/components/Button";
+import { cn } from "@/lib/cn";
+import type { TOCProps } from "./components/PageClient/components/TableOfContents/TableOfContents";
+import {
+	TOCItems,
+	TOCScrollArea,
+	Toc,
+	TocPopoverContent,
+	TocPopoverTrigger,
+} from "./components/PageClient/components/TableOfContents/TableOfContents";
+import type { FooterProps } from "./components/PageClient/PageClient";
+import {
+	Footer,
+	LastUpdate,
+	PageArticle,
+	PageBody,
+	TocPopoverHeader,
+} from "./components/PageClient/PageClient";
+
+type TableOfContentOptions = Omit<TOCProps, "items" | "children"> & {
+	enabled: boolean;
+	component: ReactNode;
+	header?: ReactNode;
+	footer?: ReactNode;
+};
+
+type TableOfContentPopoverOptions = Omit<TableOfContentOptions, "single">;
+
+interface EditOnGitHubOptions
+	extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children"> {
+	owner: string;
+	repo: string;
+	branch?: string;
+	path: string;
+}
+
+interface FooterOptions extends FooterProps {
+	enabled: boolean;
+	component: ReactNode;
+}
+
+export interface DocsPageProps {
+	toc?: TableOfContents;
+	full?: boolean;
+	tableOfContent?: Partial<TableOfContentOptions>;
+	tableOfContentPopover?: Partial<TableOfContentPopoverOptions>;
+	footer?: Partial<FooterOptions>;
+	editOnGithub?: EditOnGitHubOptions;
+	lastUpdate?: Date | string | number;
+	children: ReactNode;
+	container?: HTMLAttributes<HTMLDivElement>;
+	article?: HTMLAttributes<HTMLElement>;
+}
+
+export function DocsPage({
+	toc = [],
+	full = false,
+	tableOfContentPopover: {
+		enabled: tocPopoverEnabled,
+		component: tocPopoverReplace,
+		...tocPopoverOptions
+	} = {},
+	tableOfContent: {
+		enabled: tocEnabled,
+		component: tocReplace,
+		...tocOptions
+	} = {},
+	footer: {
+		enabled: footerEnabled,
+		component: footerReplace,
+		...footerOptions
+	} = {},
+	editOnGithub,
+	lastUpdate,
+	children,
+	container,
+	article,
+}: DocsPageProps) {
+	const isTocRequired =
+		toc.length > 0 ||
+		tocOptions.footer !== undefined ||
+		tocOptions.header !== undefined;
+
+	// disable TOC on full mode, you can still enable it with `enabled` option.
+	tocEnabled ??= !full && isTocRequired;
+
+	tocPopoverEnabled ??=
+		toc.length > 0 ||
+		tocPopoverOptions.header !== undefined ||
+		tocPopoverOptions.footer !== undefined;
+
+	// enable footer by default
+	footerEnabled ??= true;
+
+	return (
+		<AnchorProvider toc={toc}>
+			<PageBody
+				{...container}
+				className={cn(container?.className)}
+				style={
+					{
+						"--fd-tocnav-height": !tocPopoverEnabled ? "0px" : undefined,
+						...container?.style,
+					} as object
+				}
+			>
+				{tocPopoverEnabled && !tocPopoverReplace ? (
+					<TocPopoverHeader className="h-10">
+						<TocPopoverTrigger className="w-full" items={toc} />
+						<TocPopoverContent>
+							{tocPopoverOptions.header}
+							<TOCScrollArea isMenu>
+								<TOCItems items={toc} />
+							</TOCScrollArea>
+							{tocPopoverOptions.footer}
+						</TocPopoverContent>
+					</TocPopoverHeader>
+				) : (
+					tocPopoverReplace
+				)}
+				<PageArticle
+					{...article}
+					className={cn(
+						full || !tocEnabled ? "max-w-[1120px]" : "max-w-[860px]",
+						article?.className,
+					)}
+				>
+					{children}
+					<div role="none" className="flex-1" />
+					<div className="flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden">
+						{editOnGithub ? <EditOnGitHub {...editOnGithub} /> : null}
+						{lastUpdate ? <LastUpdate date={new Date(lastUpdate)} /> : null}
+					</div>
+					{footerEnabled && !footerReplace ? (
+						<Footer items={footerOptions?.items} />
+					) : (
+						footerReplace
+					)}
+				</PageArticle>
+			</PageBody>
+			{tocEnabled && !tocReplace ? (
+				<Toc>
+					{tocOptions.header}
+					<h3 className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
+						<Text className="size-4" />
+						<I18nLabel label="toc" />
+					</h3>
+					<TOCScrollArea>
+						<TOCItems items={toc} />
+					</TOCScrollArea>
+					{tocOptions.footer}
+				</Toc>
+			) : (
+				tocReplace
+			)}
+		</AnchorProvider>
+	);
+}
+
+function EditOnGitHub({
+	owner,
+	repo,
+	branch = "main",
+	path,
+	...props
+}: EditOnGitHubOptions) {
+	const href = `https://github.com/${owner}/${repo}/blob/${branch}/${path.startsWith("/") ? path.slice(1) : path}`;
+
+	return (
+		<a
+			href={href}
+			target="_blank"
+			rel="noreferrer noopener"
+			{...props}
+			className={cn(
+				buttonVariants({
+					variant: "secondary",
+					size: "sm",
+					className:
+						"gap-1.5 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground",
+				}),
+				props.className,
+			)}
+		>
+			<Edit className="size-3.5" />
+			Edit on GitHub
+		</a>
+	);
+}
+
+/**
+ * Add typography styles
+ */
+export const DocsBody = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>((props, ref) => (
+	<div ref={ref} {...props} className={cn("prose", props.className)}>
+		{props.children}
+	</div>
+));
+
+DocsBody.displayName = "DocsBody";
+
+export const DocsDescription = forwardRef<
+	HTMLParagraphElement,
+	HTMLAttributes<HTMLParagraphElement>
+>((props, ref) => {
+	// don't render if no description provided
+	if (props.children === undefined) return null;
+
+	return (
+		<p
+			ref={ref}
+			{...props}
+			className={cn("mb-8 text-lg text-muted-foreground", props.className)}
+		>
+			{props.children}
+		</p>
+	);
+});
+
+DocsDescription.displayName = "DocsDescription";
+
+export const DocsTitle = forwardRef<
+	HTMLHeadingElement,
+	HTMLAttributes<HTMLHeadingElement>
+>((props, ref) => {
+	return (
+		<h1
+			ref={ref}
+			{...props}
+			className={cn("text-3xl font-semibold", props.className)}
+		>
+			{props.children}
+		</h1>
+	);
+});
+
+DocsTitle.displayName = "DocsTitle";
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/PageClient.tsx b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/PageClient.tsx
new file mode 100644
index 00000000000..1d9a0a78c35
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/PageClient.tsx
@@ -0,0 +1,239 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import type { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
+import { getBreadcrumbItemsFromPath } from "fumadocs-core/breadcrumb";
+import type { Item, Node, Root } from "fumadocs-core/page-tree";
+import { useEffectEvent } from "fumadocs-core/utils/use-effect-event";
+import { useSidebar } from "fumadocs-ui/components/sidebar/base";
+import { useI18n } from "fumadocs-ui/contexts/i18n";
+import { useTreeContext, useTreePath } from "fumadocs-ui/contexts/tree";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { HTMLAttributes } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { useNav } from "@/app/(docs)/components/Navigation";
+import { cn } from "@/lib/cn";
+import { TocPopover } from "./components/TableOfContents/TableOfContents";
+import { isActive } from "./utils/is-active";
+
+export function TocPopoverHeader(props: HTMLAttributes<HTMLDivElement>) {
+	const ref = useRef<HTMLElement>(null);
+	const [open, setOpen] = useState(false);
+	const sidebar = useSidebar();
+	const { isTransparent } = useNav();
+
+	const onClick = useEffectEvent((e: Event) => {
+		if (!open) return;
+
+		if (ref.current && !ref.current.contains(e.target as HTMLElement))
+			setOpen(false);
+	});
+
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, [onClick]);
+
+	return (
+		<div
+			className={cn("sticky overflow-visible z-10 xl:hidden", props.className)}
+			style={{
+				top: "calc(var(--fd-banner-height) + var(--fd-nav-height))",
+			}}
+		>
+			<TocPopover open={open} onOpenChange={setOpen} asChild>
+				<header
+					ref={ref}
+					id="nd-tocnav"
+					{...props}
+					className={cn(
+						"border-b border-fd-foreground/10 backdrop-blur-md transition-colors",
+						(!isTransparent || open) && "bg-fd-background/80",
+						open && "shadow-lg",
+						sidebar.open && "max-md:hidden",
+					)}
+				>
+					{props.children}
+				</header>
+			</TocPopover>
+		</div>
+	);
+}
+
+export function PageBody(props: HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			id="nd-page"
+			{...props}
+			className={cn("flex w-full min-w-0 flex-col", props.className)}
+		>
+			{props.children}
+		</div>
+	);
+}
+
+export function PageArticle(props: HTMLAttributes<HTMLElement>) {
+	return (
+		<article
+			{...props}
+			className={cn(
+				"flex w-full flex-1 flex-col gap-6 px-4 pt-8 md:px-6 md:pt-12 xl:px-12 xl:mx-auto",
+				props.className,
+			)}
+		>
+			{props.children}
+		</article>
+	);
+}
+
+export function LastUpdate(props: { date: Date }) {
+	const { text } = useI18n();
+	const [date, setDate] = useState("");
+
+	useEffect(() => {
+		// to the timezone of client
+		setDate(props.date.toLocaleDateString());
+	}, [props.date]);
+
+	return (
+		<p className="text-sm text-fd-muted-foreground">
+			{text.lastUpdate} {date}
+		</p>
+	);
+}
+
+export interface FooterProps {
+	/**
+	 * Items including information for the next and previous page
+	 */
+	items?: {
+		previous?: { name: string; url: string };
+		next?: { name: string; url: string };
+	};
+}
+
+const itemVariants = cva(
+	"flex w-full flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground",
+);
+
+const itemLabel = cva(
+	"inline-flex items-center gap-0.5 text-fd-muted-foreground",
+);
+
+function scanNavigationList(tree: Node[]) {
+	const list: Item[] = [];
+
+	tree.forEach((node) => {
+		if (node.type === "folder") {
+			if (node.index) {
+				list.push(node.index);
+			}
+
+			list.push(...scanNavigationList(node.children));
+			return;
+		}
+
+		if (node.type === "page" && !node.external) {
+			list.push(node);
+		}
+	});
+
+	return list;
+}
+
+const listCache = new WeakMap<Root, Item[]>();
+
+export function Footer({ items }: FooterProps) {
+	const { root } = useTreeContext();
+	const { text } = useI18n();
+	const pathname = usePathname();
+
+	const { previous, next } = useMemo(() => {
+		if (items) return items;
+
+		const cached = listCache.get(root);
+		const list = cached ?? scanNavigationList(root.children);
+		listCache.set(root, list);
+
+		const idx = list.findIndex((item) => isActive(item.url, pathname, false));
+
+		if (idx === -1) return {};
+		return {
+			previous: list[idx - 1],
+			next: list[idx + 1],
+		};
+	}, [items, pathname, root]);
+
+	return (
+		<div className="grid grid-cols-2 gap-4 pb-6">
+			{previous ? (
+				<Link href={previous.url} className={cn(itemVariants())}>
+					<div className={cn(itemLabel())}>
+						<ChevronLeft className="-ms-1 size-4 shrink-0 rtl:rotate-180" />
+						<p>{text.previousPage}</p>
+					</div>
+					<p className="font-medium md:text-[15px]">{previous.name}</p>
+				</Link>
+			) : null}
+			{next ? (
+				<Link
+					href={next.url}
+					className={cn(itemVariants({ className: "col-start-2 text-end" }))}
+				>
+					<div className={cn(itemLabel({ className: "flex-row-reverse" }))}>
+						<ChevronRight className="-me-1 size-4 shrink-0 rtl:rotate-180" />
+						<p>{text.nextPage}</p>
+					</div>
+					<p className="font-medium md:text-[15px]">{next.name}</p>
+				</Link>
+			) : null}
+		</div>
+	);
+}
+
+export type BreadcrumbProps = BreadcrumbOptions;
+
+export function Breadcrumb(options: BreadcrumbProps) {
+	const path = useTreePath();
+	const { root } = useTreeContext();
+	const items = useMemo(() => {
+		return getBreadcrumbItemsFromPath(root, path, {
+			includePage: options.includePage ?? false,
+			...options,
+		});
+	}, [options, path, root]);
+
+	if (items.length === 0) return null;
+
+	return (
+		<div className="flex flex-row items-center gap-1.5 text-[15px] text-fd-muted-foreground">
+			{items.map((item, i) => {
+				const className = cn(
+					"truncate",
+					i === items.length - 1 && "text-fd-primary font-medium",
+				);
+
+				return (
+					<Fragment key={item.url || String(item.name)}>
+						{i !== 0 && <span className="text-fd-foreground/30">/</span>}
+						{item.url ? (
+							<Link
+								href={item.url}
+								className={cn(className, "transition-opacity hover:opacity-80")}
+							>
+								{item.name}
+							</Link>
+						) : (
+							<span className={className}>{item.name}</span>
+						)}
+					</Fragment>
+				);
+			})}
+		</div>
+	);
+}
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon/MobileSearchIcon.tsx b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon/MobileSearchIcon.tsx
new file mode 100644
index 00000000000..d087fdcb169
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon/MobileSearchIcon.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useSearchContext } from "fumadocs-ui/contexts/search";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+interface MobileSearchIconProps {
+	className?: string;
+}
+
+export function MobileSearchIcon({ className }: MobileSearchIconProps) {
+	const { setOpenSearch } = useSearchContext();
+
+	const handleSearchClick = () => {
+		setOpenSearch(true);
+	};
+
+	return (
+		<button
+			type="button"
+			aria-label="Search"
+			onClick={handleSearchClick}
+			className={cn(
+				"flex items-center justify-center size-8 p-2 navbar:hidden hover:text-foreground transition-colors",
+				className,
+			)}
+		>
+			<Search className="size-4" />
+		</button>
+	);
+}
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon/index.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon/index.ts
new file mode 100644
index 00000000000..fb47e679ba8
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon/index.ts
@@ -0,0 +1 @@
+export { MobileSearchIcon } from "./MobileSearchIcon";
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/TableOfContents.tsx b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/TableOfContents.tsx
new file mode 100644
index 00000000000..61ad47ac671
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/TableOfContents.tsx
@@ -0,0 +1,396 @@
+"use client";
+import type { TOCItemType } from "fumadocs-core/toc";
+import * as Primitive from "fumadocs-core/toc";
+import { useI18n } from "fumadocs-ui/contexts/i18n";
+import { ChevronRight, Text } from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import {
+	createContext,
+	use,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/Collapsible";
+import { ScrollArea, ScrollViewport } from "@/components/ScrollArea";
+import { cn } from "@/lib/cn";
+import { TocThumb } from "./components/TableOfContentsThumb/TableOfContentsThumb";
+
+export interface TOCProps {
+	/**
+	 * Custom content in TOC container, before the main TOC
+	 */
+	header?: ReactNode;
+
+	/**
+	 * Custom content in TOC container, after the main TOC
+	 */
+	footer?: ReactNode;
+
+	children: ReactNode;
+}
+
+export function Toc(props: HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			id="nd-toc"
+			{...props}
+			className={cn(
+				"sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-(--fd-toc-height) pb-2 pt-12 max-xl:hidden",
+				props.className,
+			)}
+			style={
+				{
+					...props.style,
+					"--fd-toc-height":
+						"calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height) - 4rem)",
+				} as object
+			}
+		>
+			<div className="flex h-full w-(--fd-toc-width) max-w-full flex-col gap-3 pe-4">
+				{props.children}
+			</div>
+		</div>
+	);
+}
+
+export function TocItemsEmpty() {
+	const { text } = useI18n();
+
+	return (
+		<div className="rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground">
+			{text.tocNoHeadings}
+		</div>
+	);
+}
+
+export function TOCScrollArea({
+	isMenu,
+	...props
+}: ComponentProps<typeof ScrollArea> & { isMenu?: boolean }) {
+	const viewRef = useRef<HTMLDivElement>(null);
+	const [scrollState, setScrollState] = useState<{
+		isAtTop: boolean;
+		isAtBottom: boolean;
+	}>({ isAtTop: true, isAtBottom: true });
+
+	useEffect(() => {
+		const viewport = viewRef.current;
+		if (!viewport) return;
+
+		const checkScroll = () => {
+			const { scrollTop, scrollHeight, clientHeight } = viewport;
+			const newState = {
+				isAtTop: scrollTop <= 1,
+				isAtBottom: scrollTop + clientHeight >= scrollHeight - 1,
+			};
+
+			setScrollState((prev) => {
+				if (
+					prev.isAtTop === newState.isAtTop &&
+					prev.isAtBottom === newState.isAtBottom
+				) {
+					return prev;
+				}
+				return newState;
+			});
+		};
+
+		checkScroll();
+		viewport.addEventListener("scroll", checkScroll, { passive: true });
+
+		const observer = new ResizeObserver(checkScroll);
+		observer.observe(viewport);
+
+		return () => {
+			viewport.removeEventListener("scroll", checkScroll);
+			observer.disconnect();
+		};
+	}, []);
+
+	const maskImage = useMemo(() => {
+		const { isAtTop, isAtBottom } = scrollState;
+		if (isAtTop && isAtBottom) return "none";
+		if (isAtTop)
+			return "linear-gradient(to bottom, black calc(100% - 40px), transparent)";
+		if (isAtBottom)
+			return "linear-gradient(to top, black calc(100% - 40px), transparent)";
+		return "linear-gradient(to bottom, transparent, black 40px, black calc(100% - 40px), transparent)";
+	}, [scrollState]);
+
+	return (
+		<ScrollArea
+			{...props}
+			className={cn("flex flex-col ps-px", props.className)}
+		>
+			<Primitive.ScrollProvider containerRef={viewRef}>
+				<ScrollViewport
+					className={cn(
+						"relative min-h-0 text-sm",
+						isMenu && "mt-2 mb-4 mx-4 md:mx-6",
+					)}
+					ref={viewRef}
+					style={{
+						...props.style,
+						maskImage: maskImage,
+						WebkitMaskImage: maskImage,
+					}}
+				>
+					{props.children}
+				</ScrollViewport>
+			</Primitive.ScrollProvider>
+		</ScrollArea>
+	);
+}
+
+export function TOCItems({ items }: { items: TOCItemType[] }) {
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	const [svg, setSvg] = useState<{
+		path: string;
+		width: number;
+		height: number;
+	}>();
+
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const container = containerRef.current;
+
+		function onResize(): void {
+			if (container.clientHeight === 0) return;
+			let w = 0,
+				h = 0;
+			const d: string[] = [];
+			for (let i = 0; i < items.length; i++) {
+				const element: HTMLElement | null = container.querySelector(
+					`a[href="#${items[i].url.slice(1)}"]`,
+				);
+				if (!element) continue;
+
+				const styles = getComputedStyle(element);
+				const offset = getLineOffset(items[i].depth) + 1,
+					top = element.offsetTop + parseFloat(styles.paddingTop),
+					bottom =
+						element.offsetTop +
+						element.clientHeight -
+						parseFloat(styles.paddingBottom);
+
+				w = Math.max(offset, w);
+				h = Math.max(h, bottom);
+
+				d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
+				d.push(`L${offset} ${bottom}`);
+			}
+
+			setSvg({
+				path: d.join(" "),
+				width: w + 1,
+				height: h,
+			});
+		}
+
+		const observer = new ResizeObserver(onResize);
+		onResize();
+
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+		};
+	}, [items]);
+
+	if (items.length === 0) return <TocItemsEmpty />;
+
+	return (
+		<>
+			{svg ? (
+				<div
+					className="absolute start-0 top-0 rtl:-scale-x-100"
+					style={{
+						width: svg.width,
+						height: svg.height,
+						maskImage: `url("data:image/svg+xml,${
+							// Inline SVG
+							encodeURIComponent(
+								`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`,
+							)
+						}")`,
+					}}
+				>
+					<TocThumb
+						containerRef={containerRef}
+						className="mt-(--fd-top) h-(--fd-height) bg-fd-primary transition-all"
+						style={{ willChange: "height, marginTop" }}
+					/>
+				</div>
+			) : null}
+			<div className="flex flex-col" ref={containerRef}>
+				{items.map((item, i) => (
+					<TOCItem
+						key={item.url}
+						item={item}
+						upper={items[i - 1]?.depth}
+						lower={items[i + 1]?.depth}
+					/>
+				))}
+			</div>
+		</>
+	);
+}
+
+function getItemOffset(depth: number): number {
+	if (depth <= 2) return 14;
+	if (depth === 3) return 26;
+	return 36;
+}
+
+function getLineOffset(depth: number): number {
+	return depth >= 3 ? 10 : 0;
+}
+
+function TOCItem({
+	item,
+	upper = item.depth,
+	lower = item.depth,
+}: {
+	item: TOCItemType;
+	upper?: number;
+	lower?: number;
+}) {
+	const offset = getLineOffset(item.depth),
+		upperOffset = getLineOffset(upper),
+		lowerOffset = getLineOffset(lower);
+
+	return (
+		<Primitive.TOCItem
+			href={item.url}
+			style={{
+				paddingInlineStart: getItemOffset(item.depth),
+			}}
+			className="prose relative py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary"
+		>
+			{offset !== upperOffset ? (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					className="absolute -top-1.5 start-0 size-4 rtl:-scale-x-100"
+					aria-hidden="true"
+				>
+					<line
+						x1={upperOffset}
+						y1="0"
+						x2={offset}
+						y2="12"
+						className="stroke-fd-foreground/10"
+						strokeWidth="1"
+					/>
+				</svg>
+			) : null}
+			<div
+				className={cn(
+					"absolute inset-y-0 w-px bg-fd-foreground/10",
+					offset !== upperOffset && "top-1.5",
+					offset !== lowerOffset && "bottom-1.5",
+				)}
+				style={{
+					insetInlineStart: offset,
+				}}
+			/>
+			{item.title}
+		</Primitive.TOCItem>
+	);
+}
+
+type MakeRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
+const Context = createContext<{
+	open: boolean;
+	setOpen: (open: boolean) => void;
+} | null>(null);
+
+const TocProvider = Context.Provider || Context;
+
+export function TocPopover({
+	open,
+	onOpenChange,
+	ref: _ref,
+	...props
+}: MakeRequired<ComponentProps<typeof Collapsible>, "open" | "onOpenChange">) {
+	return (
+		<Collapsible open={open} onOpenChange={onOpenChange} {...props}>
+			<TocProvider
+				value={useMemo(
+					() => ({
+						open,
+						setOpen: onOpenChange,
+					}),
+					[onOpenChange, open],
+				)}
+			>
+				{props.children}
+			</TocProvider>
+		</Collapsible>
+	);
+}
+
+export function TocPopoverTrigger({
+	items,
+	...props
+}: ComponentProps<typeof CollapsibleTrigger> & { items: TOCItemType[] }) {
+	const { text } = useI18n();
+	const context = use(Context);
+	if (!context)
+		throw new Error("TocPopoverTrigger must be used within TocPopover");
+	const { open } = context;
+	const active = Primitive.useActiveAnchor();
+	const current = useMemo(() => {
+		return items.find((item: TOCItemType) => active === item.url.slice(1))
+			?.title;
+	}, [items, active]);
+
+	return (
+		<CollapsibleTrigger
+			{...props}
+			className={cn(
+				"inline-flex items-center text-sm gap-2 text-nowrap px-4 py-2.5 text-start md:px-6 focus-visible:outline-none",
+				props.className,
+			)}
+		>
+			<Text className="size-4 shrink-0" />
+			{text.toc}
+			<ChevronRight
+				className={cn(
+					"size-4 shrink-0 text-fd-muted-foreground transition-all",
+					!current && "opacity-0",
+					open ? "rotate-90" : "-ms-1.5",
+				)}
+			/>
+			<span
+				className={cn(
+					"truncate text-fd-muted-foreground transition-opacity -ms-1.5",
+					(!current || open) && "opacity-0",
+				)}
+			>
+				{current}
+			</span>
+		</CollapsibleTrigger>
+	);
+}
+
+export function TocPopoverContent(
+	props: ComponentProps<typeof CollapsibleContent>,
+) {
+	return (
+		<CollapsibleContent
+			data-toc-popover=""
+			className="flex flex-col max-h-[50vh]"
+			{...props}
+		>
+			{props.children}
+		</CollapsibleContent>
+	);
+}
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/components/TableOfContentsThumb/TableOfContentsThumb.tsx b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/components/TableOfContentsThumb/TableOfContentsThumb.tsx
new file mode 100644
index 00000000000..f42a98e6b70
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/components/TableOfContentsThumb/TableOfContentsThumb.tsx
@@ -0,0 +1,79 @@
+import * as Primitive from "fumadocs-core/toc";
+import { useEffectEvent } from "fumadocs-core/utils/use-effect-event";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import type { HTMLAttributes, RefObject } from "react";
+import { useEffect, useRef } from "react";
+
+export type TOCThumb = [top: number, height: number];
+
+function calc(container: HTMLElement, active: string[]): TOCThumb {
+	if (active.length === 0 || container.clientHeight === 0) {
+		return [0, 0];
+	}
+
+	let upper = Number.MAX_VALUE,
+		lower = 0;
+
+	for (const item of active) {
+		const element = container.querySelector<HTMLElement>(`a[href="#${item}"]`);
+		if (!element) continue;
+
+		const styles = getComputedStyle(element);
+		upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+		lower = Math.max(
+			lower,
+			element.offsetTop +
+				element.clientHeight -
+				parseFloat(styles.paddingBottom),
+		);
+	}
+
+	return [upper, lower - upper];
+}
+
+function update(element: HTMLElement, info: TOCThumb): void {
+	element.style.setProperty("--fd-top", `${info[0]}px`);
+	element.style.setProperty("--fd-height", `${info[1]}px`);
+}
+
+export function TocThumb({
+	containerRef,
+	...props
+}: HTMLAttributes<HTMLDivElement> & {
+	containerRef: RefObject<HTMLElement | null>;
+}) {
+	const active = Primitive.useActiveAnchors();
+	const thumbRef = useRef<HTMLDivElement>(null);
+
+	const onResize = useEffectEvent(() => {
+		if (!containerRef.current || !thumbRef.current) return;
+
+		update(thumbRef.current, calc(containerRef.current, active));
+	});
+
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const container = containerRef.current;
+
+		onResize();
+		const observer = new ResizeObserver(onResize);
+		observer.observe(container);
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [containerRef, onResize]);
+
+	useOnChange(active, () => {
+		if (!containerRef.current || !thumbRef.current) return;
+
+		// Skip updates during anchor scroll animation to prevent flicker
+		if (document.documentElement.hasAttribute("data-anchor-scrolling")) {
+			return;
+		}
+
+		update(thumbRef.current, calc(containerRef.current, active));
+	});
+
+	return <div ref={thumbRef} role="none" {...props} />;
+}
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/components/TableOfContentsThumb/index.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/components/TableOfContentsThumb/index.ts
new file mode 100644
index 00000000000..51af6f2f065
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/components/TableOfContentsThumb/index.ts
@@ -0,0 +1 @@
+export { type TOCThumb, TocThumb } from "./TableOfContentsThumb";
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/index.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/index.ts
new file mode 100644
index 00000000000..163b76b5b86
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/TableOfContents/index.ts
@@ -0,0 +1,10 @@
+export {
+	TOCItems,
+	type TOCProps,
+	TOCScrollArea,
+	Toc,
+	TocItemsEmpty,
+	TocPopover,
+	TocPopoverContent,
+	TocPopoverTrigger,
+} from "./TableOfContents";
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/index.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/index.ts
new file mode 100644
index 00000000000..5ce83c83b99
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/index.ts
@@ -0,0 +1,10 @@
+export {
+	Breadcrumb,
+	type BreadcrumbProps,
+	Footer,
+	type FooterProps,
+	LastUpdate,
+	PageArticle,
+	PageBody,
+	TocPopoverHeader,
+} from "./PageClient";
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/utils/is-active.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/utils/is-active.ts
new file mode 100644
index 00000000000..4debd4e56b3
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/utils/is-active.ts
@@ -0,0 +1,10 @@
+export function isActive(
+	url: string,
+	pathname: string,
+	nested = true,
+): boolean {
+	if (url.endsWith("/")) url = url.slice(0, -1);
+	if (pathname.endsWith("/")) pathname = pathname.slice(0, -1);
+
+	return url === pathname || (nested && pathname.startsWith(`${url}/`));
+}
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/index.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/index.ts
new file mode 100644
index 00000000000..8514b5af002
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/DocsPageLayout/index.ts
@@ -0,0 +1 @@
+export { DocsBody, DocsPage, DocsTitle } from "./DocsPageLayout";
diff --git a/apps/docs/src/components/ai/page-actions.tsx b/apps/docs/src/app/(docs)/[[...slug]]/components/PageActions/PageActions.tsx
similarity index 80%
rename from apps/docs/src/components/ai/page-actions.tsx
rename to apps/docs/src/app/(docs)/[[...slug]]/components/PageActions/PageActions.tsx
index 732e773c5b8..906f844380c 100644
--- a/apps/docs/src/components/ai/page-actions.tsx
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/PageActions/PageActions.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { buttonVariants } from "fumadocs-ui/components/ui/button";
 import {
 	Popover,
 	PopoverContent,
@@ -14,6 +13,7 @@ import {
 	MessageCircleIcon,
 } from "lucide-react";
 import { useMemo, useState } from "react";
+import { buttonVariants } from "@/components/Button";
 import { cn } from "@/lib/cn";
 
 const cache = new Map<string, string>();
@@ -55,7 +55,7 @@ export function LLMCopyButton({
 			disabled={isLoading}
 			className={cn(
 				buttonVariants({
-					color: "secondary",
+					variant: "secondary",
 					size: "sm",
 					className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground",
 				}),
@@ -76,9 +76,8 @@ export function ViewOptions({
 	 * A URL to the raw Markdown/MDX content of page
 	 */
 	markdownUrl: string;
-
 	/**
-	 * Source file URL on GitHub
+	 * A URL to the GitHub source file
 	 */
 	githubUrl: string;
 }) {
@@ -206,6 +205,40 @@ export function ViewOptions({
 				})}`,
 				icon: <MessageCircleIcon />,
 			},
+			{
+				title: "Open in Copilot",
+				href: `https://copilot.microsoft.com/?${new URLSearchParams({
+					q,
+				})}`,
+				icon: (
+					<svg
+						fill="currentColor"
+						role="img"
+						viewBox="0 0 1322.9 1147.5"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>Microsoft</title>
+						<path d="m711.19 265.2c-27.333 0-46.933 3.07-58.8 9.33 27.067-80.267 47.6-210.13 168-210.13 114.93 0 108.4 138.27 157.87 200.8zm107.33 112.93c-35.467 125.2-70 251.2-110.13 375.33-12.133 36.4-45.733 61.6-84 61.6h-136.27c9.3333-14 16.8-28.933 21.467-45.733 35.467-125.07 70-251.07 110.13-375.33 12.133-36.4 45.733-61.6 84-61.6h136.27c-9.3333 14-16.8 28.934-21.467 45.734m-316.13 704.8c-114.93 0-108.4-138.13-157.87-200.67h267.07c27.467 0 47.067-3.07 58.8-9.33-27.067 80.266-47.6 210-168 210m777.47-758.93h0.93c-32.667-38.266-82.267-57.866-146.67-57.866h-36.4c-34.533-2.8-65.333-26.134-76.533-58.8l-36.4-103.6c-21.463-61.737-80.263-103.74-145.73-103.74h-475.07c-175.6 0-251.2 225.07-292.27 361.33-38.267 127.07-126 341.73-24.267 462.13 46.667 55.067 116.67 57.867 183.07 57.867 34.533 2.8 65.333 26.133 76.533 58.8l36.4 103.6c21.467 61.733 80.267 103.73 145.6 103.73h475.2c175.47 0 251.07-225.07 292.27-361.33 30.8-100.8 68.133-224.93 66.267-324.8 0-50.534-11.2-100-42.933-137.33" />
+					</svg>
+				),
+			},
+			{
+				title: "Open in Cursor",
+				href: `https://cursor.com/link/prompt?${new URLSearchParams({
+					text: q,
+				})}`,
+				icon: (
+					<svg
+						fill="currentColor"
+						role="img"
+						viewBox="0 0 466.73 532.09"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<title>Cursor</title>
+						<path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" />
+					</svg>
+				),
+			},
 		];
 	}, [githubUrl, markdownUrl]);
 
@@ -214,13 +247,13 @@ export function ViewOptions({
 			<PopoverTrigger
 				className={cn(
 					buttonVariants({
-						color: "secondary",
+						variant: "secondary",
 						size: "sm",
 						className: "gap-2",
 					}),
 				)}
 			>
-				Open
+				Open in
 				<ChevronDown className="size-3.5 text-fd-muted-foreground" />
 			</PopoverTrigger>
 			<PopoverContent className="flex flex-col">
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/components/PageActions/index.ts b/apps/docs/src/app/(docs)/[[...slug]]/components/PageActions/index.ts
new file mode 100644
index 00000000000..1553c93b590
--- /dev/null
+++ b/apps/docs/src/app/(docs)/[[...slug]]/components/PageActions/index.ts
@@ -0,0 +1 @@
+export { LLMCopyButton, ViewOptions } from "./PageActions";
diff --git a/apps/docs/src/app/(docs)/[[...slug]]/page.tsx b/apps/docs/src/app/(docs)/[[...slug]]/page.tsx
index 626e06b3b1b..29756c3e4c4 100644
--- a/apps/docs/src/app/(docs)/[[...slug]]/page.tsx
+++ b/apps/docs/src/app/(docs)/[[...slug]]/page.tsx
@@ -1,14 +1,9 @@
-import {
-	DocsBody,
-	DocsDescription,
-	DocsPage,
-	DocsTitle,
-} from "fumadocs-ui/layouts/docs/page";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { LLMCopyButton, ViewOptions } from "@/components/ai/page-actions";
 import { getPageImage, source } from "@/lib/source";
 import { getMDXComponents } from "@/mdx-components";
+import { DocsBody, DocsPage, DocsTitle } from "./components/DocsPageLayout";
+import { LLMCopyButton, ViewOptions } from "./components/PageActions";
 
 export default async function Page(props: PageProps<"/[[...slug]]">) {
 	const params = await props.params;
@@ -16,29 +11,26 @@ export default async function Page(props: PageProps<"/[[...slug]]">) {
 	if (!page) notFound();
 
 	const MDX = page.data.body;
-	const gitConfig = {
-		user: "superset-sh",
-		repo: "superset",
-		branch: "main",
-	};
 
 	return (
 		<DocsPage
 			toc={page.data.toc}
 			full={page.data.full}
 			tableOfContent={{
-				style: "clerk",
+				header: <div className="w-10 h-4"></div>,
+			}}
+			editOnGithub={{
+				owner: "superset-sh",
+				repo: "superset",
+				path: `apps/docs/content/docs/${page.path}`,
 			}}
 		>
 			<DocsTitle>{page.data.title}</DocsTitle>
-			<DocsDescription className="mb-0">
-				{page.data.description}
-			</DocsDescription>
-			<div className="flex flex-row gap-2 items-center border-b pb-6">
+			<div className="flex flex-row gap-2 items-center border-b pb-3">
 				<LLMCopyButton markdownUrl={`${page.url}.mdx`} />
 				<ViewOptions
 					markdownUrl={`${page.url}.mdx`}
-					githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/apps/docs/content/docs/${page.path}`}
+					githubUrl={`https://github.com/superset-sh/superset/blob/main/apps/docs/content/docs/${page.path}`}
 				/>
 			</div>
 			<DocsBody>
diff --git a/apps/docs/src/app/(docs)/components/Navigation/Navigation.tsx b/apps/docs/src/app/(docs)/components/Navigation/Navigation.tsx
new file mode 100644
index 00000000000..3833a495f28
--- /dev/null
+++ b/apps/docs/src/app/(docs)/components/Navigation/Navigation.tsx
@@ -0,0 +1,90 @@
+"use client";
+import Link, { type LinkProps } from "fumadocs-core/link";
+import { useI18n } from "fumadocs-ui/contexts/i18n";
+import type { ReactNode } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { cn } from "@/lib/cn";
+
+export interface NavProviderProps {
+	/**
+	 * Use transparent background
+	 *
+	 * @defaultValue none
+	 */
+	transparentMode?: "always" | "top" | "none";
+}
+
+export interface TitleProps {
+	title?: ReactNode;
+
+	/**
+	 * Redirect url of title
+	 * @defaultValue '/'
+	 */
+	url?: string;
+}
+
+interface NavContextType {
+	isTransparent: boolean;
+}
+
+const NavContext = createContext<NavContextType>({
+	isTransparent: false,
+});
+
+export function NavProvider({
+	transparentMode = "none",
+	children,
+}: NavProviderProps & { children: ReactNode }) {
+	const [transparent, setTransparent] = useState(transparentMode !== "none");
+
+	useEffect(() => {
+		if (transparentMode !== "top") return;
+
+		const listener = () => {
+			if (document.documentElement.hasAttribute("data-anchor-scrolling")) {
+				return;
+			}
+			setTransparent(window.scrollY < 10);
+		};
+
+		listener();
+		window.addEventListener("scroll", listener, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", listener);
+		};
+	}, [transparentMode]);
+
+	return (
+		<NavContext.Provider
+			value={useMemo(() => ({ isTransparent: transparent }), [transparent])}
+		>
+			{children}
+		</NavContext.Provider>
+	);
+}
+
+export function useNav(): NavContextType {
+	return useContext(NavContext);
+}
+
+export function Title({
+	title,
+	url,
+	...props
+}: TitleProps & Omit<LinkProps, "title">) {
+	const { locale } = useI18n();
+
+	return (
+		<Link
+			href={url ?? (locale ? `/${locale}` : "/")}
+			{...props}
+			className={cn(
+				"inline-flex items-center gap-2.5 font-semibold",
+				props.className,
+			)}
+		>
+			{title}
+		</Link>
+	);
+}
diff --git a/apps/docs/src/app/(docs)/components/Navigation/index.ts b/apps/docs/src/app/(docs)/components/Navigation/index.ts
new file mode 100644
index 00000000000..1d99e7f1a28
--- /dev/null
+++ b/apps/docs/src/app/(docs)/components/Navigation/index.ts
@@ -0,0 +1 @@
+export { NavProvider, useNav } from "./Navigation";
diff --git a/apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx b/apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx
new file mode 100644
index 00000000000..869ff734de1
--- /dev/null
+++ b/apps/docs/src/app/(docs)/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import { AnimatePresence, MotionConfig, motion } from "framer-motion";
+import { useSearchContext } from "fumadocs-ui/contexts/search";
+import { ChevronDownIcon, Search } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { AsideLink } from "@/components/AsideLink";
+import { cn } from "@/lib/cn";
+import { contents } from "./components/SidebarContent";
+
+export default function Sidebar() {
+	// Initialize with all sections open by default
+	const [currentOpen, setCurrentOpen] = useState<number[]>(() =>
+		Array.from({ length: contents.length }, (_, i) => i),
+	);
+
+	const { setOpenSearch } = useSearchContext();
+	const pathname = usePathname();
+
+	useEffect(() => {
+		// Ensure the current section is open when pathname changes
+		const defaultValue = contents.findIndex((item) =>
+			item.list.some((listItem) => listItem.href === pathname),
+		);
+		const currentSection = defaultValue === -1 ? 0 : defaultValue;
+		if (!currentOpen.includes(currentSection)) {
+			setCurrentOpen((prev) => [...prev, currentSection]);
+		}
+	}, [pathname, currentOpen]);
+
+	return (
+		<div className={cn("fixed start-0 top-0")}>
+			<aside
+				className={cn(
+					"navbar:transition-all",
+					"border-r border-border top-[55px] navbar:flex hidden navbar:w-[268px] lg:w-[286px]! overflow-y-auto absolute h-[calc(100dvh-55px)] pb-2 flex-col justify-between w-[var(--fd-sidebar-width)]",
+				)}
+			>
+				<div>
+					<button
+						type="button"
+						className="flex w-full items-center gap-2 px-5 py-2.5 border-b text-muted-foreground dark:bg-zinc-950 dark:border-t-zinc-900/30 dark:border-t"
+						onClick={() => {
+							setOpenSearch(true);
+						}}
+					>
+						<Search className="size-4 mx-0.5" />
+						<p className="text-sm">Search documentation...</p>
+					</button>
+
+					<MotionConfig
+						transition={{ duration: 0.4, type: "spring", bounce: 0 }}
+					>
+						<div className="flex flex-col">
+							{contents.map((item, index) => (
+								<div key={item.title}>
+									<button
+										type="button"
+										className="border-b w-full hover:underline border-border text-sm px-5 py-2.5 text-left flex items-center gap-2"
+										onClick={() => {
+											setCurrentOpen((prev) =>
+												prev.includes(index)
+													? prev.filter((i) => i !== index)
+													: [...prev, index],
+											);
+										}}
+									>
+										<item.Icon style={{ width: "1.4em", height: "1.4em" }} />
+										<span className="grow">{item.title}</span>
+										<motion.div
+											animate={{
+												rotate: currentOpen.includes(index) ? 180 : 0,
+											}}
+										>
+											<ChevronDownIcon
+												className={cn(
+													"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200",
+												)}
+											/>
+										</motion.div>
+									</button>
+									<AnimatePresence initial={false}>
+										{currentOpen.includes(index) && (
+											<motion.div
+												initial={{ opacity: 0, height: 0 }}
+												animate={{ opacity: 1, height: "auto" }}
+												exit={{ opacity: 0, height: 0 }}
+												className="relative overflow-hidden"
+											>
+												<motion.div className="text-sm">
+													{item.list.map((listItem) => (
+														<div key={listItem.title}>
+															<Suspense
+																fallback={
+																	<div className="flex items-center gap-2 px-5 py-1.5 animate-pulse">
+																		<div
+																			className="size-4 shrink-0 bg-muted rounded-full"
+																			aria-hidden="true"
+																		/>
+																		<div
+																			className="h-3 bg-muted rounded-md"
+																			style={{
+																				width: `${Math.random() * (70 - 30) + 30}%`,
+																			}}
+																			aria-hidden="true"
+																		/>
+																		<span className="sr-only">Loading...</span>
+																	</div>
+																}
+															>
+																{listItem.separator ? (
+																	<div className="flex flex-row items-center gap-2 mx-5 my-2">
+																		<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+																			{listItem.title}
+																		</p>
+																		<div className="flex-grow h-px bg-border" />
+																	</div>
+																) : listItem.group ? (
+																	<div className="flex flex-row items-center gap-2 mx-5 my-1 ">
+																		<p className="text-sm text-foreground font-medium">
+																			{listItem.title}
+																		</p>
+																		<div className="flex-grow h-px bg-border" />
+																	</div>
+																) : (
+																	<AsideLink
+																		href={listItem.href}
+																		startWith="/docs"
+																		title={listItem.title}
+																		className="break-words text-nowrap w-[--fd-sidebar-width]"
+																	>
+																		<div className="min-w-4">
+																			<listItem.icon className="text-stone-950 dark:text-white" />
+																		</div>
+																		{listItem.title}
+																	</AsideLink>
+																)}
+															</Suspense>
+														</div>
+													))}
+												</motion.div>
+											</motion.div>
+										)}
+									</AnimatePresence>
+								</div>
+							))}
+						</div>
+					</MotionConfig>
+				</div>
+			</aside>
+		</div>
+	);
+}
diff --git a/apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/SidebarContent.tsx b/apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/SidebarContent.tsx
new file mode 100644
index 00000000000..bba57d55900
--- /dev/null
+++ b/apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/SidebarContent.tsx
@@ -0,0 +1,200 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode, SVGProps } from "react";
+
+interface Content {
+	title: string;
+	href?: string;
+	Icon: ((props?: SVGProps<SVGSVGElement>) => ReactNode) | LucideIcon;
+	isNew?: boolean;
+	list: {
+		title: string;
+		href: string;
+		icon: ((props?: SVGProps<SVGSVGElement>) => ReactNode) | LucideIcon;
+		group?: boolean;
+		separator?: boolean;
+		isNew?: boolean;
+	}[];
+}
+
+const PlayIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.2em"
+		height="1.2em"
+		viewBox="0 0 24 24"
+		role="img"
+		aria-label="Play"
+	>
+		<path
+			fill="currentColor"
+			d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m-1 14H9V8h2zm1 0V8l5 4z"
+		/>
+	</svg>
+);
+
+const BookIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.2em"
+		height="1.2em"
+		viewBox="0 0 256 256"
+		role="img"
+		aria-label="Book"
+	>
+		<path
+			fill="currentColor"
+			d="M232 48h-64a32 32 0 0 0-32 32v87.73a8.17 8.17 0 0 1-7.47 8.25a8 8 0 0 1-8.53-8V80a32 32 0 0 0-32-32H24a8 8 0 0 0-8 8v144a8 8 0 0 0 8 8h72a24 24 0 0 1 24 23.94a7.9 7.9 0 0 0 5.12 7.55A8 8 0 0 0 136 232a24 24 0 0 1 24-24h72a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8m-24 120h-39.73a8.17 8.17 0 0 1-8.25-7.47a8 8 0 0 1 8-8.53h39.73a8.17 8.17 0 0 1 8.25 7.47a8 8 0 0 1-8 8.53m0-32h-39.73a8.17 8.17 0 0 1-8.25-7.47a8 8 0 0 1 8-8.53h39.73a8.17 8.17 0 0 1 8.25 7.47a8 8 0 0 1-8 8.53m0-32h-39.73a8.17 8.17 0 0 1-8.27-7.47a8 8 0 0 1 8-8.53h39.73a8.17 8.17 0 0 1 8.27 7.47a8 8 0 0 1-8 8.53"
+		/>
+	</svg>
+);
+
+const DownloadIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.2em"
+		height="1.2em"
+		viewBox="0 0 24 24"
+		role="img"
+		aria-label="Download"
+	>
+		<path
+			fill="currentColor"
+			fillRule="evenodd"
+			d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.535 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12m10-5.75a.75.75 0 0 1 .75.75v5.19l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72V7a.75.75 0 0 1 .75-.75m-4 10a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5z"
+			clipRule="evenodd"
+		/>
+	</svg>
+);
+
+const ChartIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.2em"
+		height="1.2em"
+		viewBox="0 0 16 16"
+		role="img"
+		aria-label="Chart"
+	>
+		<path
+			fill="currentColor"
+			d="M2 3.75C2 2.784 2.784 2 3.75 2h8.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25zM6 6.5a.5.5 0 0 0-1 0v4a.5.5 0 0 0 1 0zM8 8a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2A.5.5 0 0 0 8 8m3-2.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0z"
+		></path>
+	</svg>
+);
+
+const CodeIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.2em"
+		height="1.2em"
+		viewBox="0 0 24 24"
+		role="img"
+		aria-label="Code"
+	>
+		<path
+			fill="currentColor"
+			d="m8 18l-6-6l6-6l1.425 1.425l-4.6 4.6L9.4 16.6zm8 0l-1.425-1.425l4.6-4.6L14.6 7.4L16 6l6 6z"
+		/>
+	</svg>
+);
+
+// Section header icons
+const GetStartedIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.4em"
+		height="1.4em"
+		viewBox="0 0 24 24"
+		role="img"
+		aria-label="Get Started"
+	>
+		<path
+			fill="currentColor"
+			d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m-1 14H9V8h2zm1 0V8l5 4z"
+		/>
+	</svg>
+);
+
+const CoreFeaturesIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.4em"
+		height="1.4em"
+		viewBox="0 0 24 24"
+		role="img"
+		aria-label="Core Features"
+	>
+		<path
+			fill="currentColor"
+			fillRule="evenodd"
+			d="M14.25 4.48v3.057c0 .111 0 .27.021.406a.94.94 0 0 0 .444.683a.96.96 0 0 0 .783.072c.13-.04.272-.108.378-.159L17 8.005l1.124.534c.106.05.248.119.378.16a.96.96 0 0 0 .783-.073a.94.94 0 0 0 .444-.683c.022-.136.021-.295.021-.406V3.031q.17-.008.332-.013C21.154 2.98 22 3.86 22 4.933v11.21c0 1.112-.906 2.01-2.015 2.08c-.97.06-2.108.179-2.985.41c-1.082.286-2.373.904-3.372 1.436q-.422.224-.878.323V5.174a3.6 3.6 0 0 0 .924-.371q.277-.162.576-.323m5.478 8.338a.75.75 0 0 1-.546.91l-4 1a.75.75 0 1 1-.364-1.456l4-1a.75.75 0 0 1 .91.546M11.25 5.214a3.4 3.4 0 0 1-.968-.339C9.296 4.354 8.05 3.765 7 3.487c-.887-.233-2.041-.352-3.018-.412C2.886 3.008 2 3.9 2 4.998v11.146c0 1.11.906 2.01 2.015 2.079c.97.06 2.108.179 2.985.41c1.081.286 2.373.904 3.372 1.436q.422.224.878.324zM4.273 8.818a.75.75 0 0 1 .91-.546l4 1a.75.75 0 1 1-.365 1.456l-4-1a.75.75 0 0 1-.545-.91m.91 3.454a.75.75 0 1 0-.365 1.456l4 1a.75.75 0 0 0 .364-1.456z"
+			clipRule="evenodd"
+		/>
+		<path
+			fill="currentColor"
+			d="M18.25 3.151c-.62.073-1.23.18-1.75.336a8 8 0 0 0-.75.27v3.182l.75-.356l.008-.005a1.1 1.1 0 0 1 .492-.13q.072 0 .138.01c.175.029.315.1.354.12l.009.005l.75.356V3.15"
+		/>
+	</svg>
+);
+
+const GuidesIcon = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="1.4em"
+		height="1.4em"
+		viewBox="0 0 24 24"
+		role="img"
+		aria-label="Guides"
+	>
+		<path
+			fill="currentColor"
+			d="M6.5 2h11A2.5 2.5 0 0 1 20 4.5v15a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2m0 1.5a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-15a1 1 0 0 0-1-1zM8 18a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5zm0-3a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5zm0-3a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5zm0-3a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5zm0-3a.75.75 0 0 1 0-1.5h8a.75.75 0 0 1 0 1.5z"
+		/>
+	</svg>
+);
+
+export const contents: Content[] = [
+	{
+		title: "Get Started",
+		Icon: GetStartedIcon,
+		list: [
+			{
+				title: "Quick Start",
+				href: "/quick-start",
+				icon: PlayIcon,
+			},
+			{
+				title: "Overview",
+				href: "/overview",
+				icon: BookIcon,
+			},
+			{
+				title: "Installation",
+				href: "/installation",
+				icon: DownloadIcon,
+			},
+		],
+	},
+	{
+		title: "Core Features",
+		Icon: CoreFeaturesIcon,
+		list: [
+			{
+				title: "Core Features",
+				href: "/core-features",
+				icon: ChartIcon,
+			},
+		],
+	},
+	{
+		title: "How to Guides",
+		Icon: GuidesIcon,
+		list: [
+			{
+				title: "Setup & Teardown Scripts",
+				href: "/setup-teardown-scripts",
+				icon: CodeIcon,
+			},
+		],
+	},
+];
diff --git a/apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/index.ts b/apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/index.ts
new file mode 100644
index 00000000000..18585545ff2
--- /dev/null
+++ b/apps/docs/src/app/(docs)/components/Sidebar/components/SidebarContent/index.ts
@@ -0,0 +1 @@
+export { contents } from "./SidebarContent";
diff --git a/apps/docs/src/app/(docs)/components/Sidebar/index.ts b/apps/docs/src/app/(docs)/components/Sidebar/index.ts
new file mode 100644
index 00000000000..6b1ab66593b
--- /dev/null
+++ b/apps/docs/src/app/(docs)/components/Sidebar/index.ts
@@ -0,0 +1,2 @@
+export { contents } from "./components/SidebarContent";
+export { default as Sidebar } from "./Sidebar";
diff --git a/apps/docs/src/app/(docs)/layout.tsx b/apps/docs/src/app/(docs)/layout.tsx
index 4fa135b0ef7..18d8638242e 100644
--- a/apps/docs/src/app/(docs)/layout.tsx
+++ b/apps/docs/src/app/(docs)/layout.tsx
@@ -1,11 +1,44 @@
-import { DocsLayout } from "fumadocs-ui/layouts/docs";
-import { baseOptions } from "@/lib/layout.shared";
+import { SidebarProvider } from "fumadocs-ui/components/sidebar/base";
+import { TreeContextProvider } from "fumadocs-ui/contexts/tree";
+import { cn } from "@/lib/cn";
 import { source } from "@/lib/source";
+import { NavProvider } from "./components/Navigation";
+import { Sidebar } from "./components/Sidebar";
 
 export default function Layout({ children }: LayoutProps<"/">) {
+	const tree = source.getPageTree();
+	const variables = cn(
+		"[--fd-tocnav-height:36px] md:[--fd-sidebar-width:268px] lg:[--fd-sidebar-width:286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]",
+	);
+
 	return (
-		<DocsLayout tree={source.getPageTree()} {...baseOptions()}>
-			{children}
-		</DocsLayout>
+		<TreeContextProvider tree={tree}>
+			<SidebarProvider>
+				<NavProvider>
+					<main
+						id="nd-docs-layout"
+						className={cn(
+							"flex flex-1 flex-row pe-(--fd-layout-offset)",
+							variables,
+						)}
+						style={
+							{
+								"--fd-layout-offset":
+									"max(calc(50vw - var(--fd-layout-width) / 2), 0px)",
+							} as object
+						}
+					>
+						<div
+							className={cn(
+								"[--fd-tocnav-height:36px] navbar:mr-[268px] lg:mr-[286px]! xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]",
+							)}
+						>
+							<Sidebar />
+						</div>
+						{children}
+					</main>
+				</NavProvider>
+			</SidebarProvider>
+		</TreeContextProvider>
 	);
 }
diff --git a/apps/docs/src/app/components/NavigationBar/NavigationBar.tsx b/apps/docs/src/app/components/NavigationBar/NavigationBar.tsx
new file mode 100644
index 00000000000..38c9d122b61
--- /dev/null
+++ b/apps/docs/src/app/components/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { Menu } from "lucide-react";
+import Link from "next/link";
+import { MobileSearchIcon } from "@/app/(docs)/[[...slug]]/components/DocsPageLayout/components/PageClient/components/MobileSearchIcon";
+import {
+	NavigationMobile,
+	useNavbarMobile,
+} from "./components/NavigationMobile";
+
+function SupersetLogo() {
+	return (
+		<svg
+			viewBox="0 0 392 64"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-label="Superset"
+			className="h-6 w-auto"
+		>
+			<title>Superset</title>
+			<path
+				d="M25.2727 -0.00017944H37.9091V12.6362H25.2727V-0.00017944ZM12.6364 -0.00017944H25.2727V12.6362H12.6364V-0.00017944ZM0 12.6362H12.6364V25.2725H0V12.6362ZM0 25.2725H12.6364V37.9089H0V25.2725ZM12.6364 25.2725H25.2727V37.9089H12.6364V25.2725ZM25.2727 25.2725H37.9091V37.9089H25.2727V25.2725ZM25.2727 37.9089H37.9091V50.5453H25.2727V37.9089ZM25.2727 50.5453H37.9091V63.1816H25.2727V50.5453ZM12.6364 50.5453H25.2727V63.1816H12.6364V50.5453ZM0 50.5453H12.6364V63.1816H0V50.5453ZM0 -0.00017944H12.6364V12.6362H0V-0.00017944ZM50.4961 -0.00017944H63.1325V12.6362H50.4961V-0.00017944ZM50.4961 12.6362H63.1325V25.2725H50.4961V12.6362ZM50.4961 25.2725H63.1325V37.9089H50.4961V25.2725ZM50.4961 37.9089H63.1325V50.5453H50.4961V37.9089ZM50.4961 50.5453H63.1325V63.1816H50.4961V50.5453ZM63.1325 50.5453H75.7688V63.1816H63.1325V50.5453ZM75.7688 50.5453H88.4052V63.1816H75.7688V50.5453ZM75.7688 37.9089H88.4052V50.5453H75.7688V37.9089ZM75.7688 25.2725H88.4052V37.9089H75.7688V25.2725ZM75.7688 12.6362H88.4052V25.2725H75.7688V12.6362ZM75.7688 -0.00017944H88.4052V12.6362H75.7688V-0.00017944ZM100.992 -0.00017944H113.629V12.6362H100.992V-0.00017944ZM100.992 12.6362H113.629V25.2725H100.992V12.6362ZM100.992 25.2725H113.629V37.9089H100.992V25.2725ZM100.992 37.9089H113.629V50.5453H100.992V37.9089ZM100.992 50.5453H113.629V63.1816H100.992V50.5453ZM113.629 -0.00017944H126.265V12.6362H113.629V-0.00017944ZM126.265 -0.00017944H138.901V12.6362H126.265V-0.00017944ZM126.265 12.6362H138.901V25.2725H126.265V12.6362ZM126.265 25.2725H138.901V37.9089H126.265V25.2725ZM113.629 25.2725H126.265V37.9089H113.629V25.2725ZM151.488 -0.00017944H164.125V12.6362H151.488V-0.00017944ZM151.488 12.6362H164.125V25.2725H151.488V12.6362ZM151.488 25.2725H164.125V37.9089H151.488V25.2725ZM151.488 37.9089H164.125V50.5453H151.488V37.9089ZM151.488 50.5453H164.125V63.1816H151.488V50.5453ZM164.125 -0.00017944H176.761V12.6362H164.125V-0.00017944ZM164.125 50.5453H176.761V63.1816H164.125V50.5453ZM164.125 25.2725H176.761V37.9089H164.125V25.2725ZM176.761 -0.00017944H189.397V12.6362H176.761V-0.00017944ZM176.761 50.5453H189.397V63.1816H176.761V50.5453ZM201.984 50.5453H214.621V63.1816H201.984V50.5453ZM201.984 37.9089H214.621V50.5453H201.984V37.9089ZM201.984 25.2725H214.621V37.9089H201.984V25.2725ZM201.984 12.6362H214.621V25.2725H201.984V12.6362ZM201.984 -0.00017944H214.621V12.6362H201.984V-0.00017944ZM214.621 -0.00017944H227.257V12.6362H214.621V-0.00017944ZM227.257 -0.00017944H239.893V12.6362H227.257V-0.00017944ZM227.257 12.6362H239.893V25.2725H227.257V12.6362ZM214.621 25.2725H227.257V37.9089H214.621V25.2725ZM227.257 37.9089H239.893V50.5453H227.257V37.9089ZM227.257 50.5453H239.893V63.1816H227.257V50.5453ZM277.753 -0.00017944H290.39V12.6362H277.753V-0.00017944ZM265.117 -0.00017944H277.753V12.6362H265.117V-0.00017944ZM252.48 12.6362H265.117V25.2725H252.48V12.6362ZM252.48 25.2725H265.117V37.9089H252.48V25.2725ZM265.117 25.2725H277.753V37.9089H265.117V25.2725ZM277.753 25.2725H290.39V37.9089H277.753V25.2725ZM277.753 37.9089H290.39V50.5453H277.753V37.9089ZM277.753 50.5453H290.39V63.1816H277.753V50.5453ZM265.117 50.5453H277.753V63.1816H265.117V50.5453ZM252.48 50.5453H265.117V63.1816H252.48V50.5453ZM252.48 -0.00017944H265.117V12.6362H252.48V-0.00017944ZM302.977 -0.00017944H315.613V12.6362H302.977V-0.00017944ZM302.977 12.6362H315.613V25.2725H302.977V12.6362ZM302.977 25.2725H315.613V37.9089H302.977V25.2725ZM302.977 37.9089H315.613V50.5453H302.977V37.9089ZM302.977 50.5453H315.613V63.1816H302.977V50.5453ZM315.613 -0.00017944H328.249V12.6362H315.613V-0.00017944ZM315.613 50.5453H328.249V63.1816H315.613V50.5453ZM315.613 25.2725H328.249V37.9089H315.613V25.2725ZM328.249 -0.00017944H340.886V12.6362H328.249V-0.00017944ZM328.249 50.5453H340.886V63.1816H328.249V50.5453ZM353.473 -0.00017944H366.109V12.6362H353.473V-0.00017944ZM366.109 -0.00017944H378.745V12.6362H366.109V-0.00017944ZM378.745 -0.00017944H391.382V12.6362H378.745V-0.00017944ZM366.109 12.6362H378.745V25.2725H366.109V12.6362ZM366.109 25.2725H378.745V37.9089H366.109V25.2725ZM366.109 37.9089H378.745V50.5453H366.109V37.9089ZM366.109 50.5453H378.745V63.1816H366.109V50.5453Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
+}
+
+function SidebarTrigger() {
+	const { toggleNavbar } = useNavbarMobile();
+
+	return (
+		<button
+			type="button"
+			aria-label="Toggle sidebar"
+			className="navbar:hidden flex items-center justify-center p-2"
+			onClick={toggleNavbar}
+		>
+			<Menu className="size-5" />
+		</button>
+	);
+}
+
+export default function NavigationBar() {
+	return (
+		<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30">
+			<nav className="md:grid grid-cols-12 border-b flex items-center justify-between">
+				<Link
+					href="/"
+					className="min-navbar:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[268px] lg:w-[286px]"
+				>
+					<SupersetLogo />
+				</Link>
+				<div className="md:col-span-10 flex items-center justify-end relative px-4 gap-4">
+					<MobileSearchIcon />
+					<SidebarTrigger />
+					<ul className="navbar:flex items-center gap-6 hidden shrink-0">
+						<NavLink href="/">Home</NavLink>
+						<NavLink href="/quick-start">Docs</NavLink>
+						<NavLink
+							href="https://github.com/superset-sh/superset"
+							external
+							aria-label="View Superset repository on GitHub"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="1.4em"
+								height="1.4em"
+								viewBox="0 0 496 512"
+								aria-hidden="true"
+							>
+								<path
+									fill="currentColor"
+									d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2"
+								></path>
+							</svg>
+						</NavLink>
+					</ul>
+				</div>
+			</nav>
+			<NavigationMobile />
+		</div>
+	);
+}
+
+interface NavLinkProps {
+	href: string;
+	children: React.ReactNode;
+	external?: boolean;
+	className?: string;
+	"aria-label"?: string;
+}
+
+function NavLink({
+	href,
+	children,
+	external,
+	className,
+	...props
+}: NavLinkProps) {
+	const baseClasses =
+		"px-4 py-2 text-sm hover:text-foreground transition-colors text-muted-foreground";
+
+	if (external) {
+		return (
+			<a
+				href={href}
+				target="_blank"
+				rel="noopener noreferrer"
+				className={`${baseClasses} ${className || ""}`}
+				{...props}
+			>
+				{children}
+			</a>
+		);
+	}
+
+	return (
+		<Link
+			href={href}
+			className={`${baseClasses} ${className || ""}`}
+			{...props}
+		>
+			{children}
+		</Link>
+	);
+}
diff --git a/apps/docs/src/app/components/NavigationBar/components/NavigationMobile/NavigationMobile.tsx b/apps/docs/src/app/components/NavigationBar/components/NavigationMobile/NavigationMobile.tsx
new file mode 100644
index 00000000000..057cc6fb587
--- /dev/null
+++ b/apps/docs/src/app/components/NavigationBar/components/NavigationMobile/NavigationMobile.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { createContext, useContext, useState } from "react";
+import { contents } from "@/app/(docs)/components/Sidebar/components/SidebarContent";
+import { cn } from "@/lib/cn";
+
+interface NavbarMobileContextProps {
+	isOpen: boolean;
+	toggleNavbar: () => void;
+}
+
+const NavbarContext = createContext<NavbarMobileContextProps | undefined>(
+	undefined,
+);
+
+export const NavbarProvider = ({ children }: { children: React.ReactNode }) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const toggleNavbar = () => {
+		setIsOpen((prevIsOpen) => !prevIsOpen);
+	};
+
+	return (
+		<NavbarContext.Provider value={{ isOpen, toggleNavbar }}>
+			{children}
+		</NavbarContext.Provider>
+	);
+};
+
+export const useNavbarMobile = (): NavbarMobileContextProps => {
+	const context = useContext(NavbarContext);
+	if (!context) {
+		throw new Error(
+			"useNavbarMobile must be used within a NavbarMobileProvider",
+		);
+	}
+	return context;
+};
+
+export const NavigationMobile = () => {
+	const { isOpen, toggleNavbar } = useNavbarMobile();
+	const pathname = usePathname();
+
+	return (
+		<div
+			className={cn(
+				"fixed top-[56px] inset-x-0 transform-gpu z-[100] bg-background grid grid-rows-[0fr] duration-300 transition-all navbar:hidden",
+				isOpen && "shadow-lg border-b border-border grid-rows-[1fr]",
+			)}
+		>
+			<div
+				className={cn(
+					"px-4 min-h-0 overflow-y-auto max-h-[80vh] divide-y transition-all duration-300",
+					isOpen ? "py-5" : "invisible",
+				)}
+			>
+				{contents.map((section) => (
+					<div key={section.title} className="py-2">
+						<div className="flex items-center gap-2 mb-2">
+							<section.Icon style={{ width: "1.4em", height: "1.4em" }} />
+							<span className="font-medium">{section.title}</span>
+						</div>
+						<div className="pl-6 space-y-1">
+							{section.list.map((item) => {
+								if (item.separator || item.group) {
+									return (
+										<div
+											key={item.title}
+											className="text-xs text-muted-foreground py-1"
+										>
+											{item.title}
+										</div>
+									);
+								}
+								return (
+									<Link
+										key={item.title}
+										href={item.href}
+										onClick={toggleNavbar}
+										className={cn(
+											"block py-1.5 text-sm text-muted-foreground hover:text-foreground",
+											pathname === item.href && "text-foreground font-medium",
+										)}
+									>
+										<div className="flex items-center gap-2">
+											<item.icon className="w-4 h-4" />
+											{item.title}
+										</div>
+									</Link>
+								);
+							})}
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
diff --git a/apps/docs/src/app/components/NavigationBar/components/NavigationMobile/index.ts b/apps/docs/src/app/components/NavigationBar/components/NavigationMobile/index.ts
new file mode 100644
index 00000000000..7b9d4ed75fc
--- /dev/null
+++ b/apps/docs/src/app/components/NavigationBar/components/NavigationMobile/index.ts
@@ -0,0 +1,5 @@
+export {
+	NavbarProvider,
+	NavigationMobile,
+	useNavbarMobile,
+} from "./NavigationMobile";
diff --git a/apps/docs/src/app/components/NavigationBar/index.ts b/apps/docs/src/app/components/NavigationBar/index.ts
new file mode 100644
index 00000000000..faf77926c91
--- /dev/null
+++ b/apps/docs/src/app/components/NavigationBar/index.ts
@@ -0,0 +1 @@
+export { default as NavigationBar } from "./NavigationBar";
diff --git a/apps/docs/src/app/global.css b/apps/docs/src/app/global.css
index acc2f134d49..4beb9814989 100644
--- a/apps/docs/src/app/global.css
+++ b/apps/docs/src/app/global.css
@@ -1,26 +1,246 @@
 @import "tailwindcss";
-@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/black.css";
 @import "fumadocs-ui/css/preset.css";
 
-/* Sidebar separator styling */
-[data-sidebar] [role="separator"] {
-	margin-top: 1.25rem;
-	margin-bottom: 0.5rem;
-	padding-left: 0.5rem;
-	font-size: 0.7rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
-	text-transform: uppercase;
-	color: var(--color-fd-muted-foreground);
-	opacity: 0.7;
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+
+/* =============================================================================
+   OKLch Color System - Perceptually uniform colors for consistent theming
+   ============================================================================= */
+
+:root {
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.147 0.004 49.25);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.147 0.004 49.25);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.147 0.004 49.25);
+	--primary: oklch(0.216 0.006 56.043);
+	--primary-foreground: oklch(0.985 0.001 106.423);
+	--secondary: oklch(0.97 0.001 106.424);
+	--secondary-foreground: oklch(0.216 0.006 56.043);
+	--muted: oklch(0.97 0.001 106.424);
+	--muted-foreground: oklch(0.553 0.013 58.071);
+	--accent: oklch(0.97 0.001 106.424);
+	--accent-foreground: oklch(0.216 0.006 56.043);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.577 0.245 27.325);
+	--border: oklch(0.923 0.003 48.717);
+	--input: oklch(0.923 0.003 48.717);
+	--ring: oklch(0.709 0.01 56.259);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0.001 106.423);
+	--sidebar-foreground: oklch(0.147 0.004 49.25);
+	--sidebar-primary: oklch(0.216 0.006 56.043);
+	--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-accent: oklch(0.97 0.001 106.424);
+	--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+	--sidebar-border: oklch(0.923 0.003 48.717);
+	--sidebar-ring: oklch(0.709 0.01 56.259);
+	--scrollbar-thumb: var(--border);
+	--scrollbar-thumb-hover: var(--ring);
+	--scrollbar-track: transparent;
+	--radius: 0.2rem;
+	--fd-nav-height: 56px;
+	--fd-banner-height: 0px;
+	--fd-tocnav-height: 0px;
+}
+
+.dark {
+	--background: hsl(0 0% 0%);
+	--foreground: oklch(0.985 0.001 106.423);
+	--card: oklch(0.147 0.004 49.25);
+	--card-foreground: oklch(0.985 0.001 106.423);
+	--popover: oklch(0.147 0.004 49.25);
+	--popover-foreground: oklch(0.985 0.001 106.423);
+	--primary: oklch(0.985 0.001 106.423);
+	--primary-foreground: oklch(0.216 0.006 56.043);
+	--secondary: oklch(0.268 0.007 34.298);
+	--secondary-foreground: oklch(0.985 0.001 106.423);
+	--muted: oklch(0.268 0.007 34.298);
+	--muted-foreground: oklch(0.709 0.01 56.259);
+	--accent: oklch(0.268 0.007 34.298);
+	--accent-foreground: oklch(0.985 0.001 106.423);
+	--destructive: oklch(0.396 0.141 25.723);
+	--destructive-foreground: oklch(0.637 0.237 25.331);
+	--border: oklch(0.268 0.007 34.298);
+	--input: oklch(0.268 0.007 34.298);
+	--ring: oklch(0.553 0.013 58.071);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.216 0.006 56.043);
+	--sidebar-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-accent: oklch(0.268 0.007 34.298);
+	--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-border: oklch(0.268 0.007 34.298);
+	--sidebar-ring: oklch(0.553 0.013 58.071);
+	--scrollbar-thumb: var(--border);
+	--scrollbar-thumb-hover: var(--ring);
+	--scrollbar-track: transparent;
+}
+
+@theme inline {
+	--breakpoint-navbar: 64rem;
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--font-sans: var(--font-geist-sans);
+	--font-mono: var(--font-geist-mono);
+
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
+
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply overscroll-none bg-background text-foreground selection:bg-foreground selection:text-background;
+	}
+}
+
+html {
+	scroll-behavior: auto;
+	scroll-padding-top: calc(
+		var(--fd-nav-height, 56px) +
+		var(--fd-banner-height, 0px) +
+		var(--fd-tocnav-height, 0px) +
+		24px
+	);
+}
+
+html:not([data-anchor-scrolling]) {
+	scroll-behavior: smooth;
+}
+
+/* Global, accessible custom scrollbars */
+* {
+	scrollbar-width: thin; /* Firefox */
+	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* WebKit-based browsers */
+::-webkit-scrollbar {
+	width: 12px;
+	height: 12px;
+}
+::-webkit-scrollbar-track {
+	background: var(--scrollbar-track);
+}
+::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar-thumb);
+	border-radius: 9999px;
+	border: 3px solid transparent; /* creates a gap between thumb and track */
+	background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar-thumb-hover);
 }
+::-webkit-scrollbar-corner {
+	background: transparent;
+}
+
+@utility no-scrollbar {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+/* =============================================================================
+   Background Pattern Utilities - Pure CSS grid and dot patterns
+   ============================================================================= */
 
-/* First separator doesn't need top margin */
-[data-sidebar] [role="separator"]:first-of-type {
-	margin-top: 0;
+@utility bg-grid {
+	background-image:
+		linear-gradient(currentColor 1px, transparent 1px),
+		linear-gradient(90deg, currentColor 1px, transparent 1px);
+	background-size: 32px 32px;
 }
 
-/* Sidebar item hover */
-[data-sidebar] a {
-	transition: background-color 0.15s ease;
+@utility bg-grid-small {
+	background-image:
+		linear-gradient(currentColor 1px, transparent 1px),
+		linear-gradient(90deg, currentColor 1px, transparent 1px);
+	background-size: 8px 8px;
 }
+
+@utility bg-dot {
+	background-image: radial-gradient(
+		circle at 50% 50%,
+		currentColor 1.6px,
+		transparent 1.6px
+	);
+	background-size: 16px 16px;
+}
+
+/* =============================================================================
+   Sidebar Styling - Custom sidebar (Better Auth style)
+   ============================================================================= */
+
+/* Custom sidebar is now fully implemented in React components */
diff --git a/apps/docs/src/app/layout.tsx b/apps/docs/src/app/layout.tsx
index 3f18935861d..7dcb2ebce67 100644
--- a/apps/docs/src/app/layout.tsx
+++ b/apps/docs/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import { RootProvider } from "fumadocs-ui/provider/next";
 import "./global.css";
 import { Inter } from "next/font/google";
+import { NavigationBar } from "@/app/components/NavigationBar";
+import { NavbarProvider } from "@/app/components/NavigationBar/components/NavigationMobile";
 
 const inter = Inter({
 	subsets: ["latin"],
@@ -10,7 +12,12 @@ export default function Layout({ children }: LayoutProps<"/">) {
 	return (
 		<html lang="en" className={inter.className} suppressHydrationWarning>
 			<body className="flex flex-col min-h-screen">
-				<RootProvider>{children}</RootProvider>
+				<RootProvider>
+					<NavbarProvider>
+						<NavigationBar />
+						{children}
+					</NavbarProvider>
+				</RootProvider>
 			</body>
 		</html>
 	);
diff --git a/apps/docs/src/components/AsideLink/AsideLink.tsx b/apps/docs/src/components/AsideLink/AsideLink.tsx
new file mode 100644
index 00000000000..0951c3a9167
--- /dev/null
+++ b/apps/docs/src/components/AsideLink/AsideLink.tsx
@@ -0,0 +1,43 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { cn } from "@/lib/cn";
+
+type Props = {
+	href: string;
+	children: React.ReactNode;
+	startWith: string;
+	title?: string | null;
+	className?: string;
+	activeClassName?: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export const AsideLink = ({
+	href,
+	children,
+	startWith,
+	title,
+	className,
+	activeClassName,
+	...props
+}: Props) => {
+	const pathname = usePathname();
+	const isActive = pathname === href;
+
+	return (
+		<Link
+			href={href}
+			className={cn(
+				isActive
+					? cn("text-foreground bg-primary/10", activeClassName)
+					: "text-muted-foreground hover:text-foreground hover:bg-primary/10",
+				"w-full transition-colors flex items-center gap-x-2.5 hover:bg-primary/10 px-5 py-1",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</Link>
+	);
+};
diff --git a/apps/docs/src/components/AsideLink/index.ts b/apps/docs/src/components/AsideLink/index.ts
new file mode 100644
index 00000000000..f4daa693cf6
--- /dev/null
+++ b/apps/docs/src/components/AsideLink/index.ts
@@ -0,0 +1 @@
+export { AsideLink } from "./AsideLink";
diff --git a/apps/docs/src/components/Button/Button.tsx b/apps/docs/src/components/Button/Button.tsx
new file mode 100644
index 00000000000..25c642a31d2
--- /dev/null
+++ b/apps/docs/src/components/Button/Button.tsx
@@ -0,0 +1,50 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/cn";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-fd-primary text-fd-primary-foreground shadow hover:bg-fd-primary/90",
+				destructive:
+					"bg-fd-destructive text-fd-destructive-foreground shadow-sm hover:bg-fd-destructive/90",
+				outline:
+					"border border-fd-input bg-fd-background shadow-sm hover:bg-fd-accent hover:text-fd-accent-foreground",
+				secondary:
+					"bg-fd-secondary text-fd-secondary-foreground shadow-sm hover:bg-fd-secondary/80",
+				ghost: "hover:bg-fd-accent hover:text-fd-accent-foreground",
+				link: "text-fd-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	className?: string;
+}
+
+export function Button({ className, variant, size, ...props }: ButtonProps) {
+	return (
+		<button
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { buttonVariants };
diff --git a/apps/docs/src/components/Button/index.ts b/apps/docs/src/components/Button/index.ts
new file mode 100644
index 00000000000..1734f7ce94a
--- /dev/null
+++ b/apps/docs/src/components/Button/index.ts
@@ -0,0 +1 @@
+export { buttonVariants } from "./Button";
diff --git a/apps/docs/src/components/Collapsible/Collapsible.tsx b/apps/docs/src/components/Collapsible/Collapsible.tsx
new file mode 100644
index 00000000000..ac6f062ee18
--- /dev/null
+++ b/apps/docs/src/components/Collapsible/Collapsible.tsx
@@ -0,0 +1,39 @@
+"use client";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { forwardRef, useEffect, useState } from "react";
+import { cn } from "@/lib/cn";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = forwardRef<
+	HTMLDivElement,
+	React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ children, ...props }, ref) => {
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			ref={ref}
+			{...props}
+			className={cn(
+				"overflow-hidden",
+				mounted &&
+					"data-[state=closed]:animate-fd-collapsible-up data-[state=open]:animate-fd-collapsible-down",
+				props.className,
+			)}
+		>
+			{children}
+		</CollapsiblePrimitive.CollapsibleContent>
+	);
+});
+
+CollapsibleContent.displayName =
+	CollapsiblePrimitive.CollapsibleContent.displayName;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/apps/docs/src/components/Collapsible/index.ts b/apps/docs/src/components/Collapsible/index.ts
new file mode 100644
index 00000000000..6980ba3d1e0
--- /dev/null
+++ b/apps/docs/src/components/Collapsible/index.ts
@@ -0,0 +1,5 @@
+export {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "./Collapsible";
diff --git a/apps/docs/src/components/DatabaseTable/DatabaseTable.tsx b/apps/docs/src/components/DatabaseTable/DatabaseTable.tsx
new file mode 100644
index 00000000000..11b59784bb7
--- /dev/null
+++ b/apps/docs/src/components/DatabaseTable/DatabaseTable.tsx
@@ -0,0 +1,145 @@
+import { Check, Key, Link, X } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+interface DatabaseField {
+	name: string;
+	type: string;
+	description: string;
+	isPrimaryKey?: boolean;
+	isForeignKey?: boolean;
+	isRequired?: boolean;
+	isOptional?: boolean;
+	isUnique?: boolean;
+	references?: {
+		model: string;
+		field: string;
+	};
+}
+
+interface DatabaseTableProps {
+	fields: DatabaseField[];
+	className?: string;
+	tableName?: string;
+}
+
+export function DatabaseTable({
+	fields,
+	className,
+	tableName,
+}: DatabaseTableProps) {
+	return (
+		<div className={cn("my-6 overflow-hidden rounded-lg border", className)}>
+			{tableName && (
+				<div className="border-b bg-muted/50 px-4 py-3">
+					<h4 className="font-mono text-sm font-semibold">{tableName}</h4>
+				</div>
+			)}
+			<div className="overflow-x-auto">
+				<table className="w-full">
+					<thead>
+						<tr className="border-b bg-muted/30">
+							<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+								Field
+							</th>
+							<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+								Type
+							</th>
+							<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+								Constraints
+							</th>
+							<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+								Description
+							</th>
+						</tr>
+					</thead>
+					<tbody className="divide-y">
+						{fields.map((field) => {
+							const isRequired = field.isRequired ?? !field.isOptional;
+							return (
+								<tr
+									key={field.name}
+									className="hover:bg-muted/30 transition-colors"
+								>
+									<td className="px-4 py-3">
+										<div className="flex items-center gap-2">
+											<code className="text-sm font-mono font-medium">
+												{field.name}
+											</code>
+											{field.isPrimaryKey && (
+												<span
+													className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+													title="Primary Key"
+												>
+													<Key className="h-3 w-3" />
+													PK
+												</span>
+											)}
+											{field.isForeignKey && (
+												<span
+													className="inline-flex items-center gap-1 rounded-md bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-600 dark:text-blue-400"
+													title="Foreign Key"
+												>
+													<Link className="h-3 w-3" />
+													FK
+												</span>
+											)}
+										</div>
+									</td>
+									<td className="px-4 py-3">
+										<code className="text-sm font-mono text-muted-foreground">
+											{field.type}
+										</code>
+									</td>
+									<td className="px-4 py-3">
+										<div className="flex flex-wrap gap-1.5">
+											{isRequired ? (
+												<span
+													className="inline-flex items-center gap-1 rounded-md bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive"
+													title="Required"
+												>
+													<Check className="h-3 w-3" />
+													Required
+												</span>
+											) : (
+												<span
+													className="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground"
+													title="Optional"
+												>
+													<X className="h-3 w-3" />
+													Optional
+												</span>
+											)}
+											{field.isUnique && (
+												<span
+													className="inline-flex items-center rounded-md bg-accent px-2 py-0.5 text-xs font-medium text-accent-foreground"
+													title="Unique"
+												>
+													Unique
+												</span>
+											)}
+										</div>
+									</td>
+									<td className="px-4 py-3">
+										<div className="space-y-1">
+											<p className="text-sm text-muted-foreground">
+												{field.description}
+											</p>
+											{field.references && (
+												<p className="text-xs text-muted-foreground/70">
+													→ References{" "}
+													<code className="rounded bg-muted px-1 py-0.5 font-mono">
+														{field.references.model}.{field.references.field}
+													</code>
+												</p>
+											)}
+										</div>
+									</td>
+								</tr>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/docs/src/components/DatabaseTable/index.ts b/apps/docs/src/components/DatabaseTable/index.ts
new file mode 100644
index 00000000000..fb42ec7a604
--- /dev/null
+++ b/apps/docs/src/components/DatabaseTable/index.ts
@@ -0,0 +1 @@
+export { DatabaseTable } from "./DatabaseTable";
diff --git a/apps/docs/src/components/docs/DownloadButton.tsx b/apps/docs/src/components/DownloadButton/DownloadButton.tsx
similarity index 100%
rename from apps/docs/src/components/docs/DownloadButton.tsx
rename to apps/docs/src/components/DownloadButton/DownloadButton.tsx
diff --git a/apps/docs/src/components/DownloadButton/index.ts b/apps/docs/src/components/DownloadButton/index.ts
new file mode 100644
index 00000000000..a9318c16f0e
--- /dev/null
+++ b/apps/docs/src/components/DownloadButton/index.ts
@@ -0,0 +1 @@
+export { DownloadButton } from "./DownloadButton";
diff --git a/apps/docs/src/components/ResourceCard/ResourceCard.tsx b/apps/docs/src/components/ResourceCard/ResourceCard.tsx
new file mode 100644
index 00000000000..91b9a01579e
--- /dev/null
+++ b/apps/docs/src/components/ResourceCard/ResourceCard.tsx
@@ -0,0 +1,55 @@
+import { ArrowUpRight } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+interface ResourceCardProps {
+	title: string;
+	description: string;
+	href: string;
+	tags?: string[];
+	className?: string;
+}
+
+export function ResourceCard({
+	title,
+	description,
+	href,
+	tags,
+	className,
+}: ResourceCardProps) {
+	return (
+		<div
+			className={cn(
+				"relative flex justify-between rounded-none flex-col group space-y-1 border transition-colors hover:bg-muted/80",
+				className,
+			)}
+		>
+			<div>
+				<ArrowUpRight className="absolute top-3 right-3 h-4 w-4 group-hover:opacity-100 opacity-80 text-muted-foreground transition-colors group-hover:text-foreground no-underline underline-offset-0" />
+				<div className="p-4 py-0 flex items-start justify-between">
+					<a href={href} target="_blank" rel="noopener noreferrer">
+						<h3 className="font-semibold text-md tracking-tight no-underline">
+							{title}
+						</h3>
+					</a>
+				</div>
+				<p className="p-4 py-0 text-sm md:decoration-none text-muted-foreground">
+					{description}
+				</p>
+			</div>
+			<div>
+				{tags && tags.length > 0 && (
+					<div className="py-3 border-zinc-700/80 border-t-[1.2px] flex flex-wrap items-end gap-2">
+						{tags.map((tag) => (
+							<span
+								key={tag}
+								className="inline-flex items-end underline underline-offset-2 rounded-md bg-secondary/10 px-2 py-1 text-xs font-medium text-secondary-foreground"
+							>
+								{tag}
+							</span>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/docs/src/components/ResourceCard/index.ts b/apps/docs/src/components/ResourceCard/index.ts
new file mode 100644
index 00000000000..9413fdaa7fe
--- /dev/null
+++ b/apps/docs/src/components/ResourceCard/index.ts
@@ -0,0 +1 @@
+export { ResourceCard } from "./ResourceCard";
diff --git a/apps/docs/src/components/ResourceGrid/ResourceGrid.tsx b/apps/docs/src/components/ResourceGrid/ResourceGrid.tsx
new file mode 100644
index 00000000000..2276d8418ee
--- /dev/null
+++ b/apps/docs/src/components/ResourceGrid/ResourceGrid.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/lib/cn";
+import { ResourceCard } from "../ResourceCard";
+
+interface ResourceGridProps {
+	resources: {
+		title: string;
+		description: string;
+		href: string;
+		tags?: string[];
+	}[];
+	className?: string;
+}
+
+export function ResourceGrid({ resources, className }: ResourceGridProps) {
+	return (
+		<div className={cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-3", className)}>
+			{resources.map((resource, index) => (
+				<ResourceCard key={`${resource.href}-${index}`} {...resource} />
+			))}
+		</div>
+	);
+}
diff --git a/apps/docs/src/components/ResourceGrid/index.ts b/apps/docs/src/components/ResourceGrid/index.ts
new file mode 100644
index 00000000000..c48cb888865
--- /dev/null
+++ b/apps/docs/src/components/ResourceGrid/index.ts
@@ -0,0 +1 @@
+export { ResourceGrid } from "./ResourceGrid";
diff --git a/apps/docs/src/components/ScrollArea/ScrollArea.tsx b/apps/docs/src/components/ScrollArea/ScrollArea.tsx
new file mode 100644
index 00000000000..6527ca84ffa
--- /dev/null
+++ b/apps/docs/src/components/ScrollArea/ScrollArea.tsx
@@ -0,0 +1,57 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+import { cn } from "@/lib/cn";
+
+const ScrollArea = React.forwardRef<
+	React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn("overflow-hidden", className)}
+		{...props}
+	>
+		{children}
+		<ScrollAreaPrimitive.Corner />
+		<ScrollBar orientation="vertical" />
+	</ScrollAreaPrimitive.Root>
+));
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollViewport = React.forwardRef<
+	React.ComponentRef<typeof ScrollAreaPrimitive.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Viewport
+		ref={ref}
+		className={cn("size-full rounded-[inherit]", className)}
+		{...props}
+	>
+		{children}
+	</ScrollAreaPrimitive.Viewport>
+));
+
+ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ComponentRef<typeof ScrollAreaPrimitive.Scrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+	<ScrollAreaPrimitive.Scrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex select-none data-[state=hidden]:animate-fd-fade-out",
+			orientation === "vertical" && "h-full w-1.5",
+			orientation === "horizontal" && "h-1.5 flex-col",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-fd-border" />
+	</ScrollAreaPrimitive.Scrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
+
+export { ScrollArea, ScrollBar, ScrollViewport };
diff --git a/apps/docs/src/components/ScrollArea/index.ts b/apps/docs/src/components/ScrollArea/index.ts
new file mode 100644
index 00000000000..5fa1791832d
--- /dev/null
+++ b/apps/docs/src/components/ScrollArea/index.ts
@@ -0,0 +1 @@
+export { ScrollArea, ScrollBar, ScrollViewport } from "./ScrollArea";
diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx
index 21459e3bff6..133384ef95a 100644
--- a/apps/docs/src/mdx-components.tsx
+++ b/apps/docs/src/mdx-components.tsx
@@ -1,11 +1,17 @@
 import defaultMdxComponents from "fumadocs-ui/mdx";
 import type { MDXComponents } from "mdx/types";
-import { DownloadButton } from "@/components/docs/DownloadButton";
+import { DatabaseTable } from "@/components/DatabaseTable";
+import { DownloadButton } from "@/components/DownloadButton";
+import { ResourceCard } from "@/components/ResourceCard";
+import { ResourceGrid } from "@/components/ResourceGrid";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
 	return {
 		...defaultMdxComponents,
 		DownloadButton,
+		DatabaseTable,
+		ResourceCard,
+		ResourceGrid,
 		...components,
 	};
 }
diff --git a/bun.lock b/bun.lock
index 8554dea6b57..4ec977d6d6b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -254,9 +254,13 @@
       "name": "@superset/docs",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-collapsible": "^1.1.12",
+        "@radix-ui/react-scroll-area": "^1.2.10",
         "@sentry/nextjs": "^10.32.1",
         "@superset/shared": "workspace:*",
         "@t3-oss/env-nextjs": "^0.13.8",
+        "class-variance-authority": "^0.7.1",
+        "framer-motion": "^12.23.26",
         "fumadocs-core": "16.4.7",
         "fumadocs-mdx": "14.2.5",
         "fumadocs-ui": "16.4.7",
@@ -277,6 +281,7 @@
         "@types/react-dom": "^19.2.3",
         "postcss": "^8.5.6",
         "tailwindcss": "^4.0.9",
+        "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.9.3",
       },
     },
@@ -3504,6 +3509,8 @@
 
     "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
 
+    "tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],
+
     "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
 
     "tar": ["tar@6.2.1", "", { "dependencies": { "chownr": "^2.0.0", "fs-minipass": "^2.0.0", "minipass": "^5.0.0", "minizlib": "^2.1.1", "mkdirp": "^1.0.3", "yallist": "^4.0.0" } }, "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A=="],