diff --git a/package.json b/package.json
index fe1c304fa3..665013e665 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@babel/preset-typescript": "^7.24.1",
     "@next/eslint-plugin-next": "^14.1.0",
     "@playwright/test": "^1.44.1",
+    "@radix-ui/colors": "^3.0.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/is-ci": "^3.0.4",
diff --git a/packages/ui/static-bundle/astro.config.mjs b/packages/ui/static-bundle/astro.config.mjs
index f9123fed1b..7e1798ce2a 100644
--- a/packages/ui/static-bundle/astro.config.mjs
+++ b/packages/ui/static-bundle/astro.config.mjs
@@ -5,5 +5,10 @@ import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
+    vite: {
+        build: {
+            minify: false,
+        },
+    },
     integrations: [react(), tailwind()],
 });
diff --git a/packages/ui/static-bundle/package.json b/packages/ui/static-bundle/package.json
index dd5d8b341b..84786073e9 100644
--- a/packages/ui/static-bundle/package.json
+++ b/packages/ui/static-bundle/package.json
@@ -14,9 +14,11 @@
     "@fern-api/fdr-sdk": "workspace:*",
     "@fern-ui/components": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
+    "@fern-ui/ui": "workspace:*",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.10.1",
+    "clsx": "^2.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.4"
diff --git a/packages/ui/static-bundle/src/components/EndpointUrl.tsx b/packages/ui/static-bundle/src/components/EndpointUrl.tsx
index b050fa3695..67f28e1a3d 100644
--- a/packages/ui/static-bundle/src/components/EndpointUrl.tsx
+++ b/packages/ui/static-bundle/src/components/EndpointUrl.tsx
@@ -8,15 +8,17 @@ export const EndpointUrl: React.FC<{
     const { copyToClipboard, wasJustCopied } = useCopyToClipboard(endpoint.slug);
     return (
         <FernTooltipProvider>
-            <FernTooltip
-                content={wasJustCopied ? "Copied!" : "Copy to clipboard"}
-                open={wasJustCopied ? true : undefined}
-            >
-                <div className="flex gap-2" onClick={copyToClipboard}>
-                    <FernTag colorScheme="blue">{endpoint.method}</FernTag>
-                    <div>{endpoint.slug}</div>
-                </div>
-            </FernTooltip>
+            <div className="flex">
+                <FernTooltip
+                    content={wasJustCopied ? "Copied!" : "Copy to clipboard"}
+                    open={wasJustCopied ? true : undefined}
+                >
+                    <div className="flex gap-2" onClick={copyToClipboard}>
+                        <FernTag colorScheme="blue">{endpoint.method}</FernTag>
+                        <div>{endpoint.slug}</div>
+                    </div>
+                </FernTooltip>
+            </div>
         </FernTooltipProvider>
     );
 };
diff --git a/packages/ui/static-bundle/src/pages/[...path].astro b/packages/ui/static-bundle/src/pages/[...path].astro
index 6e03eb5ef2..facc776940 100644
--- a/packages/ui/static-bundle/src/pages/[...path].astro
+++ b/packages/ui/static-bundle/src/pages/[...path].astro
@@ -1,12 +1,15 @@
 ---
 import { FernNavigation } from "@fern-api/fdr-sdk";
 import { NodeCollector } from "@fern-api/fdr-sdk/navigation";
+import { getColorVariables } from "@fern-ui/ui/src/next-app/utils/getColorVariables";
 import type { GetStaticPaths } from "astro";
+import cn from "clsx";
 import DocsMainContent from "../components/DocsMainContent.astro";
-import { getRoot } from "../utils";
+import { getDocs } from "../utils";
 
 export const getStaticPaths = (async () => {
-    const root = await getRoot("gemini.ferndocs.com");
+    const docs = await getDocs("gemini.ferndocs.com");
+    const root = FernNavigation.utils.convertLoadDocsForUrlResponse(docs);
     return NodeCollector.collect(root)
         .getPageSlugs()
         .map((path) => {
@@ -18,7 +21,8 @@ export const getStaticPaths = (async () => {
 
 const { path } = Astro.params;
 
-const root = await getRoot("gemini.ferndocs.com");
+const docs = await getDocs("gemini.ferndocs.com");
+const root = FernNavigation.utils.convertLoadDocsForUrlResponse(docs);
 const node = FernNavigation.utils.findNode(root, path.split("/"));
 
 if (node.type === "notFound") {
@@ -28,15 +32,40 @@ if (node.type === "notFound") {
 if (node.type === "redirect") {
     return Astro.redirect(node.redirect);
 }
+
+const colorVariables = getColorVariables(
+    {
+        dark: undefined,
+        light: undefined,
+    },
+    docs.definition.filesV2
+);
 ---
 
 <html>
     <head>
         <title>{node.node.title}</title>
+        <style
+            is:global
+            define:vars={Object.fromEntries(
+                Object.entries(colorVariables.light).map(([key, value]) => [key.replace(/^--/, ""), value])
+            )}
+        ></style>
     </head>
     <body>
-        <ul>
-            {node.breadcrumb.map((crumb) => <li>{crumb}</li>)}
+        <ul class="mb-8 flex">
+            {
+                node.breadcrumb.map((crumb, index) => (
+                    <li
+                        class={cn(
+                            index &&
+                                "flex items-center before:border-t before:border-r before:block before:border-current before:size-[0.5em] before:rotate-45 before:mx-2"
+                        )}
+                    >
+                        {crumb}
+                    </li>
+                ))
+            }
         </ul>
         <DocsMainContent node={node.node} />
     </body>
diff --git a/packages/ui/static-bundle/src/utils.ts b/packages/ui/static-bundle/src/utils.ts
index 0ee9f30079..266d838bc8 100644
--- a/packages/ui/static-bundle/src/utils.ts
+++ b/packages/ui/static-bundle/src/utils.ts
@@ -1,6 +1,6 @@
-import { FdrClient, FernNavigation } from "@fern-api/fdr-sdk";
+import { DocsV2Read, FdrClient } from "@fern-api/fdr-sdk";
 
-export const getRoot = async (url: string): Promise<FernNavigation.RootNode> => {
+export const getDocs = async (url: string): Promise<DocsV2Read.LoadDocsForUrlResponse> => {
     const client = new FdrClient({
         environment: process.env.NEXT_PUBLIC_FDR_ORIGIN ?? "https://registry.buildwithfern.com",
     });
@@ -11,5 +11,5 @@ export const getRoot = async (url: string): Promise<FernNavigation.RootNode> =>
         throw new Error("Failed to fetch docs");
     }
 
-    return FernNavigation.utils.convertLoadDocsForUrlResponse(docs.body);
+    return docs.body;
 };
diff --git a/packages/ui/static-bundle/tailwind.config.mjs b/packages/ui/static-bundle/tailwind.config.mjs
index 16d7974c34..7253bc1c6e 100644
--- a/packages/ui/static-bundle/tailwind.config.mjs
+++ b/packages/ui/static-bundle/tailwind.config.mjs
@@ -9,7 +9,6 @@ export default {
     ...baseConfig,
     content: [
         "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
-        "../tailwind.config.js",
         path.join(path.dirname(require.resolve("@fern-ui/components")), "**/*.{ts,tsx}"),
     ],
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e28725ed0..fac2dd023c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,9 @@ importers:
       '@playwright/test':
         specifier: ^1.44.1
         version: 1.44.1
+      '@radix-ui/colors':
+        specifier: ^3.0.0
+        version: 3.0.0
       '@tailwindcss/forms':
         specifier: ^0.5.7
         version: 0.5.7(tailwindcss@3.4.3)
@@ -664,7 +667,7 @@ importers:
         version: 4.6.2(eslint@8.57.0)
       eslint-plugin-tailwindcss:
         specifier: ^3.13.1
-        version: 3.15.1(tailwindcss@3.4.3)
+        version: 3.15.1(tailwindcss@3.4.4)
       eslint-plugin-vitest:
         specifier: ^0.3.26
         version: 0.3.26(@typescript-eslint/eslint-plugin@7.3.1)(eslint@8.57.0)(typescript@4.9.5)(vitest@1.6.0)
@@ -1778,6 +1781,9 @@ importers:
       '@fern-ui/react-commons':
         specifier: workspace:*
         version: link:../../commons/react/react-commons
+      '@fern-ui/ui':
+        specifier: workspace:*
+        version: link:../app
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -1787,6 +1793,9 @@ importers:
       astro:
         specifier: ^4.10.1
         version: 4.10.1(@types/node@18.19.33)(typescript@5.4.3)
+      clsx:
+        specifier: ^2.1.0
+        version: 2.1.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -6607,7 +6616,6 @@ packages:
 
   /@radix-ui/colors@3.0.0:
     resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
-    dev: false
 
   /@radix-ui/number@1.0.1:
     resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
@@ -15875,6 +15883,18 @@ packages:
       fast-glob: 3.3.2
       postcss: 8.4.31
       tailwindcss: 3.4.3(ts-node@10.9.2)
+    dev: true
+
+  /eslint-plugin-tailwindcss@3.15.1(tailwindcss@3.4.4):
+    resolution: {integrity: sha512-4RXRMIaMG07C2TBEW1k0VM4+dDazz1kxcZhkK4zirvmHGZTA4jnlSO2kq5mamuSPi+Wo17dh2SlC8IyFBuCd7Q==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: ^3.4.0
+    dependencies:
+      fast-glob: 3.3.2
+      postcss: 8.4.31
+      tailwindcss: 3.4.4(ts-node@10.9.2)
+    dev: false
 
   /eslint-plugin-vitest@0.3.26(@typescript-eslint/eslint-plugin@7.3.1)(eslint@8.57.0)(typescript@4.9.5)(vitest@1.6.0):
     resolution: {integrity: sha512-oxe5JSPgRjco8caVLTh7Ti8PxpwJdhSV0hTQAmkFcNcmy/9DnqLB/oNVRA11RmVRP//2+jIIT6JuBEcpW3obYg==}
@@ -25666,6 +25686,7 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
+    dev: true
 
   /tailwindcss@3.4.4(ts-node@10.9.2):
     resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}