diff --git a/.gitignore b/.gitignore
index 9526bcb8cb..9e9ee3ff6c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,3 +52,4 @@ site/src/generated/
 site/public/docs/
 site/public/llms-full.txt
 site/public/llms.txt
+site/.playwright-mcp/
diff --git a/frontend/packages/components/src/header/index.tsx b/frontend/packages/components/src/header/index.tsx
index 02085026a0..b0a082072d 100644
--- a/frontend/packages/components/src/header/index.tsx
+++ b/frontend/packages/components/src/header/index.tsx
@@ -80,19 +80,19 @@ export function Header({
 								</span>
 							</Button>
 						</SheetTrigger>
-						<SheetContent side="left" className="overflow-auto p-0">
+						<SheetContent side="left" className="overflow-auto p-0 [&>button]:fixed [&>button]:left-[calc(100vw-4rem)] [&>button]:top-4 [&>button]:bg-background/80 [&>button]:backdrop-blur [&>button]:border [&>button]:border-border/50 [&>button]:shadow-lg">
 							<nav className="min-h-full text-lg font-medium h-full max-w-full">
 								<div className="flex flex-col min-h-full">
 									<a
 										href="/"
-										className="flex sticky p-6 top-0 z-10 bg-background/10 backdrop-blur block w-full items-center gap-2 text-lg font-semibold"
+										className="hidden"
 									>
 										{logo}
 									</a>
-									<div className="flex flex-1 flex-col px-6 gap-6">
+									<div className="flex flex-1 flex-col px-4 py-4 gap-2">
 										{mobileBreadcrumbs}
 									</div>
-									<div className="px-6 py-6">{support}</div>
+									<div className="px-4 py-4">{support}</div>
 								</div>
 							</nav>
 						</SheetContent>
diff --git a/site/src/app/(v2)/[section]/[[...page]]/page.tsx b/site/src/app/(v2)/[section]/[[...page]]/page.tsx
index 1cafcb7532..49b3f55a24 100644
--- a/site/src/app/(v2)/[section]/[[...page]]/page.tsx
+++ b/site/src/app/(v2)/[section]/[[...page]]/page.tsx
@@ -119,7 +119,7 @@ export default async function CatchAllCorePage({ params: { section, page } }) {
 						<div className="relative flex justify-end">
 							<div
 								className={clsx(
-									"flex items-end md:absolute md:right-0 z-10",
+									"flex items-end md:absolute md:right-0",
 									parentPage ? "md:top-5" : "md:top-0",
 								)}
 							>
diff --git a/site/src/components/v2/Header.tsx b/site/src/components/v2/Header.tsx
index ec16a510eb..e78df4ffec 100644
--- a/site/src/components/v2/Header.tsx
+++ b/site/src/components/v2/Header.tsx
@@ -7,7 +7,9 @@ import { Icon, faDiscord } from "@rivet-gg/icons";
 import Image from "next/image";
 import Link from "next/link";
 import { type ReactNode, useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@rivet-gg/components";
+import { faChevronDown } from "@rivet-gg/icons";
 import { GitHubDropdown } from "./GitHubDropdown";
 import { HeaderSearch } from "./HeaderSearch";
 import { LogoContextMenu } from "./LogoContextMenu";
@@ -99,35 +101,23 @@ export function Header({
 					<RivetHeader
 						className={headerStyles}
 						logo={
-							<LogoContextMenu>
-								<Link href="/">
-									<Image
-										src={logoUrl.src || logoUrl}
-										width={80}
-										height={24}
-										className="ml-1 w-20"
-										alt="Rivet logo"
-										unoptimized
-									/>
-								</Link>
-							</LogoContextMenu>
-						}
-						subnav={subnav}
-						support={
-							<div className="flex flex-col gap-4 font-v2 subpixel-antialiased">
-								<RivetHeader.NavItem asChild>
-									<Link href="https://dashboard.rivet.dev">
-										Sign In
+							<div className="hidden md:block">
+								<LogoContextMenu>
+									<Link href="/">
+										<Image
+											src={logoUrl.src || logoUrl}
+											width={80}
+											height={24}
+											className="ml-1 w-20"
+											alt="Rivet logo"
+											unoptimized
+										/>
 									</Link>
-								</RivetHeader.NavItem>
-								<RivetHeader.NavItem asChild>
-									<Link href="https://rivet.dev/discord">Discord</Link>
-								</RivetHeader.NavItem>
-								<RivetHeader.NavItem asChild>
-									<Link href="/support">Support</Link>
-								</RivetHeader.NavItem>
+								</LogoContextMenu>
 							</div>
 						}
+						subnav={subnav}
+						support={null}
 						links={
 							<div className="flex flex-row items-center">
 								{variant === "full-width" && <HeaderSearch />}
@@ -200,33 +190,23 @@ export function Header({
 				subnav ? "pb-2 md:pb-0 md:pt-4" : "md:py-4",
 			)}
 			logo={
-				<LogoContextMenu>
-					<Link href="/">
-						<Image
-							src={logoUrl.src || logoUrl}
-							width={80}
-							height={24}
-							className="ml-1 w-20"
-							alt="Rivet logo"
-							unoptimized
-						/>
-					</Link>
-				</LogoContextMenu>
-			}
-			subnav={subnav}
-			support={
-				<div className="flex flex-col gap-4 font-v2 subpixel-antialiased">
-					<RivetHeader.NavItem asChild>
-						<Link href="https://dashboard.rivet.dev">Sign In</Link>
-					</RivetHeader.NavItem>
-					<RivetHeader.NavItem asChild>
-						<Link href="/discord">Discord</Link>
-					</RivetHeader.NavItem>
-					<RivetHeader.NavItem asChild>
-						<Link href="/support">Support</Link>
-					</RivetHeader.NavItem>
+				<div className="hidden md:block">
+					<LogoContextMenu>
+						<Link href="/">
+							<Image
+								src={logoUrl.src || logoUrl}
+								width={80}
+								height={24}
+								className="ml-1 w-20"
+								alt="Rivet logo"
+								unoptimized
+							/>
+						</Link>
+					</LogoContextMenu>
 				</div>
 			}
+			subnav={subnav}
+			support={null}
 			links={
 				<div className="flex flex-row items-center">
 					<div className="mr-4">
@@ -275,43 +255,70 @@ export function Header({
 
 function DocsMobileNavigation({ tree }) {
 	const pathname = usePathname() || "";
+	const router = useRouter();
+	const isDocsPage = pathname.startsWith("/docs");
 
-	const docsLinks = [
-		{ href: "/docs/actors", label: "Actors" },
+	// Determine current section based on pathname
+	const getCurrentSection = () => {
+		if (pathname.startsWith("/docs/actors")) return "actors";
+		if (pathname.startsWith("/docs/integrations")) return "integrations";
+		if (pathname.startsWith("/docs/api")) return "api";
+		return "overview";
+	};
+
+	const sections = [
+		{ id: "overview", label: "Overview", href: "/docs" },
+		{ id: "actors", label: "Actors", href: "/docs/actors" },
+		{ id: "integrations", label: "Integrations", href: "/docs/integrations" },
+		{ id: "api", label: "API Reference", href: "/docs/api" },
 	];
 
-	const otherLinks = [
+	const mainLinks = [
+		{ href: "/docs", label: "Documentation" },
 		{ href: "/changelog", label: "Changelog" },
 		{ href: "/pricing", label: "Pricing" },
 	];
 
-	return (
-		<div className="flex flex-col gap-4 font-v2 subpixel-antialiased">
-			{/* Docs section */}
-			<div className="text-foreground">Documentation</div>
-			<div className="">
-				{docsLinks.map(({ href, label }) => (
-					<div key={href} className="ml-2">
-						<RivetHeader.NavItem asChild>
-							<ActiveLink includeChildren tree={tree} href={href}>
-								{label}
-							</ActiveLink>
-						</RivetHeader.NavItem>
-					</div>
-				))}
-			</div>
+	const currentSection = sections.find(s => s.id === getCurrentSection());
 
-			{/* Other links */}
-			{otherLinks.map(({ href, external, label }) => (
-				<RivetHeader.NavItem key={href} asChild>
-					<ActiveLink
-						href={href}
-						target={external ? "_blank" : undefined}
-					>
-						{label}
-					</ActiveLink>
-				</RivetHeader.NavItem>
+	return (
+		<div className="flex flex-col gap-1 font-v2 subpixel-antialiased text-sm">
+			{/* Main navigation links */}
+			{mainLinks.map(({ href, label }) => (
+				<Link key={href} href={href} className="text-foreground py-1.5 px-2 hover:bg-accent rounded-sm transition-colors">
+					{label}
+				</Link>
 			))}
+
+			{/* Separator and docs content */}
+			{isDocsPage && (
+				<>
+					<div className="border-t-2 border-border/50 my-2" />
+
+					{/* Section dropdown */}
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" className="w-full justify-between h-9 text-sm">
+								{currentSection?.label || "Select Section"}
+								<Icon icon={faChevronDown} className="h-3.5 w-3.5 ml-2" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent className="w-[calc(100vw-3rem)]">
+							{sections.map(({ id, label, href }) => (
+								<DropdownMenuItem
+									key={id}
+									onClick={() => router.push(href)}
+								>
+									{label}
+								</DropdownMenuItem>
+							))}
+						</DropdownMenuContent>
+					</DropdownMenu>
+
+					{/* Tree/sidebar content */}
+					{tree && <div className="mt-1">{tree}</div>}
+				</>
+			)}
 		</div>
 	);
 }
diff --git a/site/src/content/docs/deploy/vercel.mdx b/site/src/content/docs/deploy/vercel.mdx
index f173bc5e8d..b41e3e6b2d 100644
--- a/site/src/content/docs/deploy/vercel.mdx
+++ b/site/src/content/docs/deploy/vercel.mdx
@@ -1,12 +1,12 @@
 import { InstallPackage } from "@/components/docs/InstallPackage";
-import { faGitHub } from "@rivet-gg/icons";
+import { faGithub } from "@rivet-gg/icons";
 
 # Deploying to Vercel
 
 Deploy your Next.js + RivetKit app to [Vercel](https://vercel.com/).
 
 <CardGroup>
-<Card title="View Example on GitHub" href="https://github.com/rivet-dev/rivetkit/tree/main/examples/next-js" target="_blank" icon={faGitHub}>
+<Card title="View Example on GitHub" href="https://github.com/rivet-dev/rivetkit/tree/main/examples/next-js" target="_blank" icon={faGithub}>
 Complete example Next.js + RivetKit app.
 </Card>
 </CardGroup>
diff --git a/site/src/content/docs/index.mdx b/site/src/content/docs/index.mdx
index 3a68c0709c..344354a167 100644
--- a/site/src/content/docs/index.mdx
+++ b/site/src/content/docs/index.mdx
@@ -23,7 +23,7 @@ Rivet is a library for long-lived processes with durable state, realtime, and sc
 - **Elastic Scalability**: Scale from zero to millions without cold starts
 - **Multi-Region Durable Storage**: Keep state & operations near your users or comply with data soveirgnty
 
-## Tools
+## Libraries
 
 <CardGroup cols={2}>
 <Card title="Actors" href="/docs/actors" icon={faActorsBorderless}>
diff --git a/site/src/sitemap/mod.ts b/site/src/sitemap/mod.ts
index 071090d54d..76fbe7a03f 100644
--- a/site/src/sitemap/mod.ts
+++ b/site/src/sitemap/mod.ts
@@ -122,7 +122,7 @@ export const sitemap = [
 				// TOOD: These are product pages
 				// - https://tanstack.com/query/latest
 				// - https://docs.restate.dev/use-cases/ai-agents
-				title: "Tools",
+				title: "Libraries",
 				pages: [
 					{ title: "Actors", href: "/docs/tools/actors", icon: faActorsBorderless },
 					// { title: "Workflows", href: "/docs/what-are-workflows", },