diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
index 7a58522af4..a724965a9d 100644
--- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/www/app/(app)/docs/[[...slug]]/page.tsx
@@ -94,7 +94,9 @@ export default async function DocPage({ params }: DocPageProps) {
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
       <div className="mx-auto w-full min-w-0 max-w-2xl">
         <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
-          <div className="truncate">Docs</div>
+          <Link href="/docs" className="truncate">
+            Docs
+          </Link>
           <ChevronRight className="h-3.5 w-3.5" />
           <div className="text-foreground">{doc.title}</div>
         </div>
diff --git a/apps/www/app/(app)/page.tsx b/apps/www/app/(app)/page.tsx
index d26f82c532..278d0a11b7 100644
--- a/apps/www/app/(app)/page.tsx
+++ b/apps/www/app/(app)/page.tsx
@@ -49,10 +49,10 @@ export default function IndexPage() {
         <PageHeaderHeading>{title}</PageHeaderHeading>
         <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
-          <Button asChild size="sm">
+          <Button asChild size="sm" className="rounded-md">
             <Link href="/docs/installation">Get Started</Link>
           </Button>
-          <Button asChild size="sm" variant="ghost">
+          <Button asChild size="sm" variant="ghost" className="rounded-md">
             <Link href="/blocks">Browse Blocks</Link>
           </Button>
         </PageActions>
diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx
index ea63e88159..abc656c144 100644
--- a/apps/www/components/announcement.tsx
+++ b/apps/www/components/announcement.tsx
@@ -17,7 +17,7 @@ export function Announcement() {
         <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" />
       </svg>
       <span className="underline-offset-4 group-hover:underline">
-        An update on Tailwind v4
+        Get Started with Tailwind v4
       </span>
       <ArrowRight className="ml-1 h-4 w-4" />
     </Link>
diff --git a/apps/www/components/docs-nav.tsx b/apps/www/components/docs-nav.tsx
index ab9e20c712..b6ff7a4c5f 100644
--- a/apps/www/components/docs-nav.tsx
+++ b/apps/www/components/docs-nav.tsx
@@ -16,7 +16,7 @@ export function DocsNav({ config }: { config: DocsConfig }) {
     <div className="flex flex-col gap-6">
       {items.map((item, index) => (
         <div key={index} className="flex flex-col gap-1">
-          <h4 className="rounded-md px-2 py-1 text-sm font-semibold">
+          <h4 className="rounded-md px-2 py-1 text-sm font-medium">
             {item.title}{" "}
             {item.label && (
               <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs font-normal leading-none text-[#000000] no-underline group-hover:no-underline">
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 9e1329b558..f56f99d817 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -62,7 +62,7 @@ const components = {
   h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h2
       className={cn(
-        "font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0",
+        "font-heading mt-16 scroll-m-20 border-b pb-4 text-xl font-semibold tracking-tight first:mt-0",
         className
       )}
       {...props}
@@ -71,7 +71,7 @@ const components = {
   h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
     <h3
       className={cn(
-        "font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
+        "font-heading mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
         className
       )}
       {...props}
@@ -112,10 +112,13 @@ const components = {
   ),
   p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
     <p
-      className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
+      className={cn("leading-[1.65rem] [&:not(:first-child)]:mt-6", className)}
       {...props}
     />
   ),
+  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <strong className={cn("font-semibold", className)} {...props} />
+  ),
   ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
     <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
   ),
@@ -260,7 +263,7 @@ const components = {
   ),
   Steps: ({ ...props }) => (
     <div
-      className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+      className="[&>h3]:step steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8"
       {...props}
     />
   ),
diff --git a/apps/www/components/mobile-nav.tsx b/apps/www/components/mobile-nav.tsx
index ea618b70b8..6801e0d17c 100644
--- a/apps/www/components/mobile-nav.tsx
+++ b/apps/www/components/mobile-nav.tsx
@@ -31,7 +31,7 @@ export function MobileNav() {
       <DrawerTrigger asChild>
         <Button
           variant="ghost"
-          className="-ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="h-8 w-full gap-4 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -48,9 +48,12 @@ export function MobileNav() {
             />
           </svg>
           <span className="sr-only">Toggle Menu</span>
+          <span className="flex h-8 flex-1 items-center justify-between rounded-md border bg-muted/50 px-2 text-sm font-normal text-muted-foreground shadow-none">
+            Search documentation...
+          </span>
         </Button>
       </DrawerTrigger>
-      <DrawerContent className="max-h-[60svh] p-0">
+      <DrawerContent className="max-h-[80svh] p-0">
         <div className="overflow-auto p-6">
           <div className="flex flex-col space-y-3">
             {docsConfig.mainNav?.map(
@@ -68,8 +71,8 @@ export function MobileNav() {
           </div>
           <div className="flex flex-col space-y-2">
             {docsConfig.sidebarNav.map((item, index) => (
-              <div key={index} className="flex flex-col space-y-3 pt-6">
-                <h4 className="font-medium">{item.title}</h4>
+              <div key={index} className="flex flex-col gap-4 pt-6">
+                <h4 className="text-xl font-medium">{item.title}</h4>
                 {item?.items?.length &&
                   item.items.map((item) => (
                     <React.Fragment key={item.href}>
@@ -78,7 +81,7 @@ export function MobileNav() {
                           <MobileLink
                             href={item.href}
                             onOpenChange={setOpen}
-                            className="text-muted-foreground"
+                            className="opacity-80"
                           >
                             {item.title}
                             {item.label && (
@@ -122,7 +125,7 @@ function MobileLink({
         router.push(href.toString())
         onOpenChange?.(false)
       }}
-      className={cn("text-base", className)}
+      className={cn("text-[1.15rem]", className)}
       {...props}
     >
       {children}
diff --git a/apps/www/components/page-header.tsx b/apps/www/components/page-header.tsx
index 64f9da680f..40f94c5794 100644
--- a/apps/www/components/page-header.tsx
+++ b/apps/www/components/page-header.tsx
@@ -23,7 +23,7 @@ function PageHeaderHeading({
   return (
     <h1
       className={cn(
-        "text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
+        "text-2xl font-bold leading-tight tracking-tighter sm:text-3xl md:text-4xl lg:leading-[1.1]",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ function PageHeaderDescription({
   return (
     <p
       className={cn(
-        "max-w-2xl text-balance text-lg font-light text-foreground",
+        "max-w-2xl text-balance text-base font-light text-foreground sm:text-lg",
         className
       )}
       {...props}
diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx
index 881ef8c675..de92e792cd 100644
--- a/apps/www/components/site-header.tsx
+++ b/apps/www/components/site-header.tsx
@@ -12,11 +12,11 @@ export function SiteHeader() {
   return (
     <header className="border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container-wrapper">
-        <div className="container flex h-14 items-center">
+        <div className="container flex h-14 items-center gap-2 md:gap-4">
           <MainNav />
           <MobileNav />
-          <div className="flex flex-1 items-center justify-between gap-2 md:justify-end">
-            <div className="w-full flex-1 md:w-auto md:flex-none">
+          <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
+            <div className="hidden w-full flex-1 md:flex md:w-auto md:flex-none">
               <CommandMenu />
             </div>
             <nav className="flex items-center gap-0.5">
diff --git a/apps/www/content/docs/index.mdx b/apps/www/content/docs/index.mdx
index d8f479871e..b35634805e 100644
--- a/apps/www/content/docs/index.mdx
+++ b/apps/www/content/docs/index.mdx
@@ -28,7 +28,7 @@ shadcn/ui hands you the actual component code. You have full control to customiz
 _In a typical library, if you need to change a button’s behavior, you have to override styles or wrap the component. With shadcn/ui, you simply edit the button code directly._
 
 <Accordion collapsible>
-  <AccordionItem value="faq-1">
+  <AccordionItem value="faq-1" className="border-none">
     <AccordionTrigger>
       How do I pull upstream updates in an Open Code approach?
     </AccordionTrigger>
diff --git a/apps/www/content/docs/tailwind-v4.mdx b/apps/www/content/docs/tailwind-v4.mdx
index a04d1421e0..77b75644b7 100644
--- a/apps/www/content/docs/tailwind-v4.mdx
+++ b/apps/www/content/docs/tailwind-v4.mdx
@@ -148,6 +148,13 @@ You can test Tailwind v4 + React 19 today using the `canary` release of the CLI.
 
 ## Upgrade Your Project
 
+<Callout className="bg-blue-50 mt-6 border-blue-600 dark:border-blue-900 dark:bg-blue-950 mb-6 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
+  **Important:** Before upgrading, please read the [Tailwind v4 Compatibility
+  Docs](https://tailwindcss.com/docs/compatibility) and make sure your project
+  is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and
+  is designed for modern browsers.
+</Callout>
+
 One of the major advantages of using `shadcn/ui` is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.
 
 This means when a dependency has a new release, you can just follow the official upgrade paths.
diff --git a/apps/www/hooks/use-themes-config.ts b/apps/www/hooks/use-themes-config.ts
index 9df09eb021..8e8cd28e44 100644
--- a/apps/www/hooks/use-themes-config.ts
+++ b/apps/www/hooks/use-themes-config.ts
@@ -7,7 +7,7 @@ type ThemesConfig = {
   activeTheme: Theme
 }
 
-const configAtom = atomWithStorage<ThemesConfig>("themes:config", {
+const configAtom = atomWithStorage<ThemesConfig>("themes:config2", {
   activeTheme: THEMES[0],
 })
 
diff --git a/apps/www/lib/themes.ts b/apps/www/lib/themes.ts
index 44398f11b7..2b589938b3 100644
--- a/apps/www/lib/themes.ts
+++ b/apps/www/lib/themes.ts
@@ -1,6 +1,73 @@
 import { themeColorsToCssVariables } from "@/lib/charts"
 
 const _THEMES = [
+  {
+    name: "Sapphire",
+    id: "default-sapphire",
+    colors: {
+      background: "0 0% 100%",
+      foreground: "222.2 84% 4.9%",
+      card: "0 0% 100%",
+      cardForeground: "222.2 84% 4.9%",
+      popover: "0 0% 100%",
+      popoverForeground: "222.2 84% 4.9%",
+      primary: "221.2 83.2% 53.3%",
+      primaryForeground: "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      secondaryForeground: "222.2 47.4% 11.2%",
+      muted: "210 40% 96.1%",
+      mutedForeground: "215.4 16.3% 44%",
+      accent: "210 40% 96.1%",
+      accentForeground: "222.2 47.4% 11.2%",
+      destructive: "0 72% 51%",
+      destructiveForeground: "210 40% 98%",
+      border: "214.3 31.8% 91.4%",
+      input: "214.3 31.8% 91.4%",
+      ring: "221.2 83.2% 53.3%",
+      "chart-1": "221.2 83.2% 53.3%",
+      "chart-2": "212 95% 68%",
+      "chart-3": "216 92% 60%",
+      "chart-4": "210 98% 78%",
+      "chart-5": "212 97% 87%",
+    },
+    colorsDark: {
+      background: "240 10% 3.9%",
+      foreground: "0 0% 98%",
+      card: "240 10% 3.9%",
+      "card-foreground": "0 0% 98%",
+      popover: "240 10% 3.9%",
+      "popover-foreground": "0 0% 98%",
+      primary: "221.2 83.2% 53.3%",
+      primaryForeground: "210 40% 98%",
+      secondary: "210 40% 96.1%",
+      secondaryForeground: "222.2 47.4% 11.2%",
+      muted: "240 3.7% 15.9%",
+      "muted-foreground": "240 5% 64.9%",
+      accent: "240 3.7% 15.9%",
+      "accent-foreground": "0 0% 98%",
+      destructive: "0 72% 51%",
+      destructiveForeground: "210 40% 98%",
+      border: "240 3.7% 15.9%",
+      input: "240 3.7% 15.9%",
+      ring: "221.2 83.2% 53.3%",
+      "chart-1": "221.2 83.2% 53.3%",
+      "chart-2": "212 95% 68%",
+      "chart-3": "216 92% 60%",
+      "chart-4": "210 98% 78%",
+      "chart-5": "212 97% 87%",
+    },
+    fontFamily: {
+      heading: {
+        name: "Inter",
+        type: "sans-serif",
+      },
+      body: {
+        name: "Inter",
+        type: "sans-serif",
+      },
+    },
+    radius: 0.5,
+  },
   {
     name: "Default",
     id: "default-shadcn",
@@ -135,73 +202,6 @@ const _THEMES = [
     },
     radius: 0.5,
   },
-  {
-    name: "Sapphire",
-    id: "default-sapphire",
-    colors: {
-      background: "0 0% 100%",
-      foreground: "222.2 84% 4.9%",
-      card: "0 0% 100%",
-      cardForeground: "222.2 84% 4.9%",
-      popover: "0 0% 100%",
-      popoverForeground: "222.2 84% 4.9%",
-      primary: "221.2 83.2% 53.3%",
-      primaryForeground: "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      secondaryForeground: "222.2 47.4% 11.2%",
-      muted: "210 40% 96.1%",
-      mutedForeground: "215.4 16.3% 44%",
-      accent: "210 40% 96.1%",
-      accentForeground: "222.2 47.4% 11.2%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "210 40% 98%",
-      border: "214.3 31.8% 91.4%",
-      input: "214.3 31.8% 91.4%",
-      ring: "221.2 83.2% 53.3%",
-      "chart-1": "221.2 83.2% 53.3%",
-      "chart-2": "212 95% 68%",
-      "chart-3": "216 92% 60%",
-      "chart-4": "210 98% 78%",
-      "chart-5": "212 97% 87%",
-    },
-    colorsDark: {
-      background: "240 10% 3.9%",
-      foreground: "0 0% 98%",
-      card: "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      popover: "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      primary: "221.2 83.2% 53.3%",
-      primaryForeground: "210 40% 98%",
-      secondary: "210 40% 96.1%",
-      secondaryForeground: "222.2 47.4% 11.2%",
-      muted: "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      accent: "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      destructive: "0 72% 51%",
-      destructiveForeground: "210 40% 98%",
-      border: "240 3.7% 15.9%",
-      input: "240 3.7% 15.9%",
-      ring: "221.2 83.2% 53.3%",
-      "chart-1": "221.2 83.2% 53.3%",
-      "chart-2": "212 95% 68%",
-      "chart-3": "216 92% 60%",
-      "chart-4": "210 98% 78%",
-      "chart-5": "212 97% 87%",
-    },
-    fontFamily: {
-      heading: {
-        name: "Inter",
-        type: "sans-serif",
-      },
-      body: {
-        name: "Inter",
-        type: "sans-serif",
-      },
-    },
-    radius: 0.5,
-  },
   {
     name: "Ruby",
     id: "default-ruby",
diff --git a/apps/www/public/examples/cards-dark.png b/apps/www/public/examples/cards-dark.png
index 47f183e724..64d2c141d5 100644
Binary files a/apps/www/public/examples/cards-dark.png and b/apps/www/public/examples/cards-dark.png differ
diff --git a/apps/www/public/examples/cards-light.png b/apps/www/public/examples/cards-light.png
index 5dea3794e0..f666601c1c 100644
Binary files a/apps/www/public/examples/cards-light.png and b/apps/www/public/examples/cards-light.png differ
diff --git a/apps/www/styles/globals.css b/apps/www/styles/globals.css
index 4bfbd1bb3e..d7d2c141be 100644
--- a/apps/www/styles/globals.css
+++ b/apps/www/styles/globals.css
@@ -118,8 +118,8 @@
   }
 
   .step:before {
-    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-    @apply ml-[-50px] mt-[-4px];
+    @apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
+    @apply md:ml-[-50px] md:mt-[-4px];
     content: counter(step);
   }