diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx
index 74844b7e..c181ae0f 100644
--- a/app/components/DocsLayout.tsx
+++ b/app/components/DocsLayout.tsx
@@ -2,54 +2,37 @@ import { DocSearch } from '@docsearch/react'
 import * as React from 'react'
 import { CgClose, CgMenuLeft } from 'react-icons/cg'
 import { FaArrowLeft, FaArrowRight, FaTimes } from 'react-icons/fa'
-import { NavLink, Outlet, useMatches } from '@remix-run/react'
+import { NavLink, useMatches } from '@remix-run/react'
 import { last } from '~/utils/utils'
 import { Carbon } from '~/components/Carbon'
 import { LinkOrA } from '~/components/LinkOrA'
 import { Search } from '~/components/Search'
-import type { SelectProps } from '~/components/Select'
 import { Select } from '~/components/Select'
 import { useLocalStorage } from '~/utils/useLocalStorage'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
 import { DocsCalloutBytes } from '~/components/DocsCalloutBytes'
-
-export type DocsConfig = {
-  docSearch: {
-    appId: string
-    indexName: string
-    apiKey: string
-  }
-  menu: {
-    label: string | React.ReactNode
-    children: {
-      label: string | React.ReactNode
-      to: string
-      badge?: string
-    }[]
-  }[]
-}
+import { DocsLogo } from '~/components/DocsLogo'
+import type { DocsConfig } from '~/utils/config'
 
 export function DocsLayout({
+  name,
+  version,
   colorFrom,
   colorTo,
   textColor,
-  logo,
   config,
-  framework,
-  version,
   children,
-  v2,
 }: {
+  name: string
+  version: string
   colorFrom: string
   colorTo: string
   textColor: string
-  logo: React.ReactNode
   config: DocsConfig
-  framework?: SelectProps
-  version?: SelectProps
-  children?: any
-  v2?: boolean
+  children: React.ReactNode
 }) {
+  const frameworkConfig = config.frameworkConfig
+  const versionConfig = config.versionConfig
   const matches = useMatches()
   const lastMatch = last(matches)
 
@@ -92,7 +75,7 @@ export function DocsLayout({
                   </a>
                 ) : (
                   <NavLink
-                    to={v2 ? child.to : framework ? '../' + child.to : child.to}
+                    to={child.to}
                     onClick={() => {
                       detailsRef.current.removeAttribute('open')
                     }}
@@ -142,6 +125,15 @@ export function DocsLayout({
     )
   })
 
+  const logo = (
+    <DocsLogo
+      name={name}
+      version={version}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+    />
+  )
+
   const smallMenu = (
     <div
       className="lg:hidden bg-white sticky top-0 z-20
@@ -166,20 +158,20 @@ export function DocsLayout({
           dark:bg-gray-900"
         >
           <div className="flex gap-4">
-            {framework?.selected ? (
+            {frameworkConfig?.selected ? (
               <Select
-                label={framework.label}
-                selected={framework.selected}
-                available={framework.available}
-                onSelect={framework.onSelect}
+                label={frameworkConfig.label}
+                selected={frameworkConfig.selected}
+                available={frameworkConfig.available}
+                onSelect={frameworkConfig.onSelect}
               />
             ) : null}
-            {version?.selected ? (
+            {versionConfig?.selected ? (
               <Select
-                label={version.label}
-                selected={version.selected}
-                available={version.available}
-                onSelect={version.onSelect}
+                label={versionConfig.label}
+                selected={versionConfig.selected}
+                available={versionConfig.available}
+                onSelect={versionConfig.onSelect}
               />
             ) : null}
           </div>
@@ -200,22 +192,22 @@ export function DocsLayout({
         />
       </div>
       <div className="flex gap-2 px-4">
-        {framework?.selected ? (
+        {frameworkConfig?.selected ? (
           <Select
             className="flex-[3_1_0%]"
-            label={framework.label}
-            selected={framework.selected}
-            available={framework.available}
-            onSelect={framework.onSelect}
+            label={frameworkConfig.label}
+            selected={frameworkConfig.selected}
+            available={frameworkConfig.available}
+            onSelect={frameworkConfig.onSelect}
           />
         ) : null}
-        {version?.selected ? (
+        {versionConfig?.selected ? (
           <Select
             className="flex-[2_1_0%]"
-            label={version.label}
-            selected={version.selected}
-            available={version.available}
-            onSelect={version.onSelect}
+            label={versionConfig.label}
+            selected={versionConfig.selected}
+            available={versionConfig.available}
+            onSelect={versionConfig.onSelect}
           />
         ) : null}
       </div>
@@ -238,7 +230,7 @@ export function DocsLayout({
       {largeMenu}
       <div className="flex w-full lg:w-[calc(100%-250px)] flex-1">
         <div className="min-w-0 min-h-0 flex relative justify-center flex-1">
-          {children || <Outlet />}
+          {children}
           <div
             className="fixed bottom-0 left-0 right-0
                         lg:pl-[250px] z-10"
@@ -246,13 +238,7 @@ export function DocsLayout({
             <div className="p-4 flex justify-center gap-4">
               {prevItem ? (
                 <LinkOrA
-                  to={
-                    v2
-                      ? prevItem.to
-                      : framework
-                      ? `../${prevItem.to}`
-                      : prevItem.to
-                  }
+                  to={prevItem.to}
                   className="flex gap-2 items-center py-1 px-2 text-sm self-start rounded-md
                 bg-white text-gray-600 dark:bg-black dark:text-gray-400
                 shadow-lg dark:border dark:border-gray-800
@@ -263,13 +249,7 @@ export function DocsLayout({
               ) : null}
               {nextItem ? (
                 <LinkOrA
-                  to={
-                    v2
-                      ? nextItem.to
-                      : framework
-                      ? `../${nextItem.to}`
-                      : nextItem.to
-                  }
+                  to={nextItem.to}
                   className="py-1 px-2 text-sm self-end rounded-md
                   bg-white dark:bg-black
                   shadow-lg dark:border dark:border-gray-800
diff --git a/app/components/DocsLogo.tsx b/app/components/DocsLogo.tsx
new file mode 100644
index 00000000..2ba548e7
--- /dev/null
+++ b/app/components/DocsLogo.tsx
@@ -0,0 +1,26 @@
+import { Link } from '@remix-run/react'
+
+type Props = {
+  name: string
+  version: string
+  colorFrom: string
+  colorTo: string
+}
+
+export const DocsLogo = (props: Props) => {
+  const { name, version, colorFrom, colorTo } = props
+
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
+  return (
+    <>
+      <Link to="/" className="font-light">
+        TanStack
+      </Link>
+      <Link to="../../" className={`font-bold`}>
+        <span className={`${gradientText}`}>{name}</span>{' '}
+        <span className="text-sm align-super">{version}</span>
+      </Link>
+    </>
+  )
+}
diff --git a/app/projects/form.tsx b/app/projects/form.tsx
index bd6887d7..898445bb 100644
--- a/app/projects/form.tsx
+++ b/app/projects/form.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
@@ -12,8 +11,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v0'
 export const availableVersions = ['v0']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-yellow-600'
+export const colorFrom = 'from-yellow-500'
+export const colorTo = 'to-yellow-600'
+export const textColor = 'text-yellow-600'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -23,20 +23,6 @@ const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to="../../" className={`font-bold`}>
-      <span className={`${gradientText}`}>Form</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [
diff --git a/app/projects/query.tsx b/app/projects/query.tsx
index 290a5ff0..f8a8f1ec 100644
--- a/app/projects/query.tsx
+++ b/app/projects/query.tsx
@@ -5,7 +5,6 @@ import vueLogo from '~/images/vue-logo.svg'
 import svelteLogo from '~/images/svelte-logo.svg'
 import angularLogo from '~/images/angular-logo.svg'
 import { useDocsConfig } from '~/utils/config'
-import { Link } from '@remix-run/react'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
 
 export const repo = 'tanstack/query'
@@ -14,8 +13,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v5'
 export const availableVersions = ['v5', 'v4', 'v3']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-500'
+export const colorFrom = 'from-red-500'
+export const colorTo = 'to-amber-500'
+export const textColor = 'text-amber-500'
 
 export const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -27,20 +27,6 @@ export const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Query</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [
diff --git a/app/projects/ranger.tsx b/app/projects/ranger.tsx
index 1a73ae82..ed7671bd 100644
--- a/app/projects/ranger.tsx
+++ b/app/projects/ranger.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
 import { useDocsConfig } from '~/utils/config'
@@ -10,8 +9,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v0'
 export const availableVersions = ['v0']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500'
+export const colorFrom = 'from-lime-500'
+export const colorTo = 'to-emerald-500'
+export const textColor = 'text-emerald-500'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -19,20 +19,6 @@ const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Ranger</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 const localMenu: MenuItem = {
   label: 'Menu',
   children: [
diff --git a/app/projects/router.tsx b/app/projects/router.tsx
index 3269ee6a..61584026 100644
--- a/app/projects/router.tsx
+++ b/app/projects/router.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import { FaDiscord, FaGithub } from 'react-icons/fa/index'
 import { useDocsConfig } from '~/utils/config'
@@ -10,8 +9,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v1'
 export const availableVersions = ['v1']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-lime-500 to-emerald-500'
+export const colorFrom = 'from-lime-500'
+export const colorTo = 'to-emerald-500'
+export const textColor = 'text-emerald-500'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -19,20 +19,6 @@ const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Router</span>
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [
diff --git a/app/projects/store.tsx b/app/projects/store.tsx
index dc5b86c3..31639b80 100644
--- a/app/projects/store.tsx
+++ b/app/projects/store.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
@@ -12,8 +11,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v0'
 export const availableVersions = ['v0']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-gray-500 to-gray-700'
+export const colorFrom = 'from-gray-500'
+export const colorTo = 'to-gray-700'
+export const textColor = 'text-gray-700'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -23,20 +23,6 @@ const frameworks = {
 
 export type Framework = keyof typeof frameworks
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to="../../" className={`font-bold`}>
-      <span className={`${gradientText}`}>Store</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const localMenu: MenuItem = {
   label: 'Menu',
   children: [
diff --git a/app/projects/table.tsx b/app/projects/table.tsx
index 927dc36d..6918c63a 100644
--- a/app/projects/table.tsx
+++ b/app/projects/table.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
@@ -13,8 +12,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v8'
 export const availableVersions = ['v8']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-blue-600'
+export const colorFrom = 'from-teal-500'
+export const colorTo = 'to-blue-600'
+export const textColor = 'text-blue-600'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -57,20 +57,6 @@ export const localMenu: MenuItem = {
   ],
 }
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to="../../" className={`font-bold`}>
-      <span className={`${gradientText}`}>Table</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const useTableDocsConfig = (config: ConfigSchema) => {
   return useDocsConfig({
     config,
diff --git a/app/projects/virtual.tsx b/app/projects/virtual.tsx
index 1735e986..bfbfa72c 100644
--- a/app/projects/virtual.tsx
+++ b/app/projects/virtual.tsx
@@ -1,4 +1,3 @@
-import { Link } from '@remix-run/react'
 import reactLogo from '~/images/react-logo.svg'
 import solidLogo from '~/images/solid-logo.svg'
 import vueLogo from '~/images/vue-logo.svg'
@@ -12,8 +11,9 @@ export const latestBranch = 'main'
 export const latestVersion = 'v3'
 export const availableVersions = ['v3']
 
-export const gradientText =
-  'inline-block text-transparent bg-clip-text bg-gradient-to-r from-rose-500 to-violet-600'
+export const colorFrom = 'from-rose-500'
+export const colorTo = 'to-violet-600'
+export const textColor = 'text-violet-600'
 
 const frameworks = {
   react: { label: 'React', logo: reactLogo, value: 'react' },
@@ -56,20 +56,6 @@ export const localMenu: MenuItem = {
   ],
 }
 
-export const createLogo = (version?: string) => (
-  <>
-    <Link to="/" className="font-light">
-      TanStack
-    </Link>
-    <Link to=".." className="font-bold">
-      <span className={`${gradientText}`}>Virtual</span>{' '}
-      <span className="text-sm align-super">
-        {version === 'latest' ? latestVersion : version}
-      </span>
-    </Link>
-  </>
-)
-
 export const useVirtualDocsConfig = (config: ConfigSchema) => {
   return useDocsConfig({
     config,
diff --git a/app/routes/form.$version._index.tsx b/app/routes/form.$version._index.tsx
index c0b497d0..f1ddc7b1 100644
--- a/app/routes/form.$version._index.tsx
+++ b/app/routes/form.$version._index.tsx
@@ -17,7 +17,13 @@ import { Footer } from '~/components/Footer'
 import { VscPreview, VscWand } from 'react-icons/vsc'
 import { TbHeartHandshake } from 'react-icons/tb'
 import SponsorPack from '~/components/SponsorPack'
-import { getBranch, gradientText, latestVersion, repo } from '~/projects/form'
+import {
+  colorFrom,
+  colorTo,
+  getBranch,
+  latestVersion,
+  repo,
+} from '~/projects/form'
 import { Logo } from '~/components/Logo'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
 import type { Framework } from '~/projects/form'
@@ -92,6 +98,8 @@ export default function RouteVersion() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <>
       <div className="flex flex-col gap-20 md:gap-32">
diff --git a/app/routes/form.$version.docs.tsx b/app/routes/form.$version.docs.tsx
index 86f2d5b1..8490874f 100644
--- a/app/routes/form.$version.docs.tsx
+++ b/app/routes/form.$version.docs.tsx
@@ -4,9 +4,12 @@ import { Outlet, useLoaderData } from '@remix-run/react'
 import { DocsLayout } from '~/components/DocsLayout'
 import {
   availableVersions,
-  createLogo,
+  colorFrom,
+  colorTo,
   getBranch,
+  latestVersion,
   repo,
+  textColor,
   useFormDocsConfig,
 } from '~/projects/form'
 import { getTanstackDocsConfig } from '~/utils/config'
@@ -32,14 +35,12 @@ export default function Component() {
   let config = useFormDocsConfig(tanstackDocsConfig)
   return (
     <DocsLayout
-      v2={true}
-      logo={createLogo(version)}
-      colorFrom={'from-rose-500'}
-      colorTo={'to-violet-500'}
-      textColor={'text-violet-500'}
+      name="Form"
+      version={version === 'latest' ? latestVersion : version!}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+      textColor={textColor}
       config={config}
-      framework={config.frameworkConfig}
-      version={config.versionConfig}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/query.$version._index.tsx b/app/routes/query.$version._index.tsx
index 9a1e500a..ad73ad52 100644
--- a/app/routes/query.$version._index.tsx
+++ b/app/routes/query.$version._index.tsx
@@ -18,7 +18,13 @@ import { VscPreview, VscWand } from 'react-icons/vsc'
 import { TbHeartHandshake } from 'react-icons/tb'
 import SponsorPack from '~/components/SponsorPack'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
-import { getBranch, gradientText, latestVersion, repo } from '~/projects/query'
+import {
+  colorFrom,
+  colorTo,
+  getBranch,
+  latestVersion,
+  repo,
+} from '~/projects/query'
 import { Logo } from '~/components/Logo'
 import { LogoQueryGG } from '~/components/LogoQueryGG'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
@@ -94,6 +100,8 @@ export default function RouteVersion() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <>
       <QueryGGBanner />
diff --git a/app/routes/query.$version.docs.tsx b/app/routes/query.$version.docs.tsx
index fc3193ff..63a672b9 100644
--- a/app/routes/query.$version.docs.tsx
+++ b/app/routes/query.$version.docs.tsx
@@ -1,15 +1,18 @@
 import * as React from 'react'
 import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node'
-import { json, redirect, useLoaderData } from '@remix-run/react'
+import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
 import { QueryGGBanner } from '~/components/QueryGGBanner'
 import {
   getBranch,
-  createLogo,
+  colorFrom,
+  colorTo,
+  textColor,
   repo,
   useQueryDocsConfig,
   availableVersions,
+  latestVersion,
 } from '~/projects/query'
 import { getTanstackDocsConfig } from '~/utils/config'
 
@@ -44,15 +47,15 @@ export default function RouteFrameworkParam() {
     <>
       <QueryGGBanner />
       <DocsLayout
-        v2={true}
-        logo={createLogo(version)}
-        colorFrom={'from-rose-500'}
-        colorTo={'to-violet-500'}
-        textColor={'text-violet-500'}
+        name="Query"
+        version={version === 'latest' ? latestVersion : version!}
+        colorFrom={colorFrom}
+        colorTo={colorTo}
+        textColor={textColor}
         config={config}
-        framework={config.frameworkConfig}
-        version={config.versionConfig}
-      />
+      >
+        <Outlet />
+      </DocsLayout>
     </>
   )
 }
diff --git a/app/routes/ranger.$version._index.tsx b/app/routes/ranger.$version._index.tsx
index c1872dcd..74d27090 100644
--- a/app/routes/ranger.$version._index.tsx
+++ b/app/routes/ranger.$version._index.tsx
@@ -12,7 +12,7 @@ import { json } from '@remix-run/node'
 import { TbHeartHandshake, TbZoomQuestion } from 'react-icons/tb'
 import { VscPreview } from 'react-icons/vsc'
 import { RiLightbulbFlashLine } from 'react-icons/ri'
-import { gradientText, getBranch } from '~/projects/ranger'
+import { colorFrom, colorTo, getBranch } from '~/projects/ranger'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
@@ -89,6 +89,8 @@ export default function TanStackRouterRoute() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <div className="flex flex-col gap-20 md:gap-32">
       <div
diff --git a/app/routes/ranger.$version.docs.tsx b/app/routes/ranger.$version.docs.tsx
index 910c1fbb..049bb207 100644
--- a/app/routes/ranger.$version.docs.tsx
+++ b/app/routes/ranger.$version.docs.tsx
@@ -1,16 +1,19 @@
 import * as React from 'react'
 import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import {
+  availableVersions,
   useRangerDocsConfig,
   repo,
   getBranch,
-  createLogo,
+  colorTo,
+  latestVersion,
+  colorFrom,
+  textColor,
 } from '~/projects/ranger'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
 import { getTanstackDocsConfig } from '~/utils/config'
 import type { MetaFunction, LoaderFunctionArgs } from '@remix-run/node'
-import { availableVersions } from '~/projects/form'
 
 export const loader = async (context: LoaderFunctionArgs) => {
   const { version } = context.params
@@ -40,14 +43,12 @@ export default function DocsRoute() {
   let config = useRangerDocsConfig(tanstackDocsConfig)
   return (
     <DocsLayout
-      v2={true}
-      logo={createLogo(version)}
-      colorFrom={'from-lime-500'}
-      colorTo={'to-emerald-500'}
-      textColor={'text-emerald-500'}
+      name="Ranger"
+      version={version === 'latest' ? latestVersion : version!}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+      textColor={textColor}
       config={config}
-      framework={config.frameworkConfig}
-      version={config.versionConfig}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/router.$version._index.tsx b/app/routes/router.$version._index.tsx
index cb2eb146..5f3d0b75 100644
--- a/app/routes/router.$version._index.tsx
+++ b/app/routes/router.$version._index.tsx
@@ -12,7 +12,7 @@ import { json } from '@remix-run/node'
 import { TbHeartHandshake, TbZoomQuestion } from 'react-icons/tb'
 import { VscPreview } from 'react-icons/vsc'
 import { RiLightbulbFlashLine } from 'react-icons/ri'
-import { gradientText, getBranch } from '~/projects/router'
+import { colorFrom, colorTo, getBranch } from '~/projects/router'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import SponsorPack from '~/components/SponsorPack'
@@ -91,6 +91,8 @@ export default function TanStackRouterRoute() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <div className="flex flex-col gap-20 md:gap-32">
       <div
diff --git a/app/routes/router.$version.docs.tsx b/app/routes/router.$version.docs.tsx
index a25a2306..46d3e6d5 100644
--- a/app/routes/router.$version.docs.tsx
+++ b/app/routes/router.$version.docs.tsx
@@ -4,8 +4,11 @@ import {
   repo,
   getBranch,
   useRouterDocsConfig,
-  createLogo,
   availableVersions,
+  latestVersion,
+  colorFrom,
+  colorTo,
+  textColor,
 } from '~/projects/router'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -40,14 +43,12 @@ export default function DocsRoute() {
 
   return (
     <DocsLayout
-      v2={true}
-      logo={createLogo(version)}
-      colorFrom={'from-lime-500'}
-      colorTo={'to-emerald-500'}
-      textColor={'text-emerald-500'}
+      name="Router"
+      version={version === 'latest' ? latestVersion : version!}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+      textColor={textColor}
       config={config}
-      framework={config.frameworkConfig}
-      version={config.versionConfig}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/store.$version._index.tsx b/app/routes/store.$version._index.tsx
index 417043f0..04add8d6 100644
--- a/app/routes/store.$version._index.tsx
+++ b/app/routes/store.$version._index.tsx
@@ -9,7 +9,7 @@ import { Footer } from '~/components/Footer'
 import { VscPreview } from 'react-icons/vsc'
 import { TbHeartHandshake } from 'react-icons/tb'
 import SponsorPack from '~/components/SponsorPack'
-import { gradientText, latestVersion, repo } from '~/projects/store'
+import { colorFrom, colorTo, latestVersion, repo } from '~/projects/store'
 import { Logo } from '~/components/Logo'
 import { getSponsorsForSponsorPack } from '~/server/sponsors'
 
@@ -76,6 +76,8 @@ export default function RouteVersion() {
   const { sponsors } = useLoaderData<typeof loader>()
   const { version } = useParams()
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <>
       <div className="flex flex-col gap-20 md:gap-32">
diff --git a/app/routes/store.$version.docs.tsx b/app/routes/store.$version.docs.tsx
index a31fd03a..6901598c 100644
--- a/app/routes/store.$version.docs.tsx
+++ b/app/routes/store.$version.docs.tsx
@@ -3,9 +3,12 @@ import { Outlet, useLoaderData } from '@remix-run/react'
 import { DocsLayout } from '~/components/DocsLayout'
 import {
   availableVersions,
-  createLogo,
   getBranch,
+  latestVersion,
   repo,
+  textColor,
+  colorFrom,
+  colorTo,
   useStoreDocsConfig,
 } from '~/projects/store'
 import { getTanstackDocsConfig } from '~/utils/config'
@@ -32,14 +35,12 @@ export default function Component() {
 
   return (
     <DocsLayout
-      v2={true}
-      logo={createLogo(version)}
-      colorFrom={'from-gray-700'}
-      colorTo={'to-gray-900'}
-      textColor={'text-gray-700'}
+      name="Store"
+      version={version === 'latest' ? latestVersion : version!}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+      textColor={textColor}
       config={config}
-      framework={config.frameworkConfig}
-      version={config.versionConfig}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/table.$version._index.tsx b/app/routes/table.$version._index.tsx
index c81731fe..19a5eea4 100644
--- a/app/routes/table.$version._index.tsx
+++ b/app/routes/table.$version._index.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react-icons/fa'
 import { Link, useLoaderData } from '@remix-run/react'
 import { json } from '@remix-run/node'
-import { gradientText, getBranch } from '~/projects/table'
+import { colorFrom, colorTo, getBranch } from '~/projects/table'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { IoIosBody } from 'react-icons/io'
@@ -94,6 +94,8 @@ export default function ReactTableRoute() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <div className="flex flex-col gap-20 md:gap-32">
       <div
diff --git a/app/routes/table.$version.docs.tsx b/app/routes/table.$version.docs.tsx
index a2244b41..0e786235 100644
--- a/app/routes/table.$version.docs.tsx
+++ b/app/routes/table.$version.docs.tsx
@@ -1,10 +1,13 @@
 import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import {
   getBranch,
-  createLogo,
   repo,
   useTableDocsConfig,
   availableVersions,
+  latestVersion,
+  colorFrom,
+  colorTo,
+  textColor,
 } from '~/projects/table'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -45,14 +48,12 @@ export default function RouteReactTable() {
 
   return (
     <DocsLayout
-      v2={true}
-      logo={createLogo(version)}
-      colorFrom={'from-teal-500'}
-      colorTo={'to-blue-500'}
-      textColor={'text-blue-500'}
+      name="Table"
+      version={version === 'latest' ? latestVersion : version!}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+      textColor={textColor}
       config={config}
-      framework={config.frameworkConfig}
-      version={config.versionConfig}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/routes/virtual.$version._index.tsx b/app/routes/virtual.$version._index.tsx
index e9baae7b..46e7956d 100644
--- a/app/routes/virtual.$version._index.tsx
+++ b/app/routes/virtual.$version._index.tsx
@@ -12,7 +12,7 @@ import {
 } from 'react-icons/fa'
 import { Link, useLoaderData } from '@remix-run/react'
 import { json } from '@remix-run/node'
-import { gradientText, getBranch } from '~/projects/virtual'
+import { colorFrom, colorTo, getBranch } from '~/projects/virtual'
 import { Carbon } from '~/components/Carbon'
 import { Footer } from '~/components/Footer'
 import { IoIosBody } from 'react-icons/io'
@@ -95,6 +95,8 @@ export default function ReactTableRoute() {
     setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
   }, [])
 
+  const gradientText = `inline-block text-transparent bg-clip-text bg-gradient-to-r ${colorFrom} ${colorTo}`
+
   return (
     <div className="flex flex-col gap-20 md:gap-32">
       <div
diff --git a/app/routes/virtual.$version.docs.tsx b/app/routes/virtual.$version.docs.tsx
index 129e1ae8..b9bc9d32 100644
--- a/app/routes/virtual.$version.docs.tsx
+++ b/app/routes/virtual.$version.docs.tsx
@@ -1,10 +1,13 @@
 import { Outlet, json, redirect, useLoaderData } from '@remix-run/react'
 import {
   availableVersions,
-  createLogo,
   getBranch,
+  latestVersion,
   repo,
   useVirtualDocsConfig,
+  colorFrom,
+  colorTo,
+  textColor,
 } from '~/projects/virtual'
 import { seo } from '~/utils/seo'
 import { DocsLayout } from '~/components/DocsLayout'
@@ -42,14 +45,12 @@ export default function RouteVirtual() {
 
   return (
     <DocsLayout
-      v2={true}
-      logo={createLogo(version)}
-      colorFrom={'from-rose-500'}
-      colorTo={'to-violet-500'}
-      textColor={'text-violet-500'}
+      name="Virtual"
+      version={version === 'latest' ? latestVersion : version!}
+      colorFrom={colorFrom}
+      colorTo={colorTo}
+      textColor={textColor}
       config={config}
-      framework={config.frameworkConfig}
-      version={config.versionConfig}
     >
       <Outlet />
     </DocsLayout>
diff --git a/app/utils/config.ts b/app/utils/config.ts
index 11241c2d..a5fd19e6 100644
--- a/app/utils/config.ts
+++ b/app/utils/config.ts
@@ -15,6 +15,7 @@ export type MenuItem = {
   children: {
     label: string | React.ReactNode
     to: string
+    badge?: string
   }[]
 }
 
@@ -24,7 +25,6 @@ const menuItemSchema = z.object({
     z.object({
       label: z.string(),
       to: z.string(),
-
       badge: z.string().optional(),
     })
   ),
@@ -42,7 +42,7 @@ const configSchema = z.object({
     indexName: z.string(),
   }),
   menu: z.array(menuItemSchema),
-  frameworkMenus: z.array(frameworkMenuSchema).optional(),
+  frameworkMenus: z.array(frameworkMenuSchema),
   users: z.array(z.string()).optional(),
 })
 
@@ -98,33 +98,23 @@ export const useDocsConfig = ({
   const match = matches[matches.length - 1]
   const params = useParams()
   const version = params.version!
-  const framework = localStorage.getItem('framework') || 'react'
+  const localStorageFramework = localStorage.getItem('framework')
+  const framework = localStorageFramework
+    ? frameworks[localStorageFramework]
+      ? localStorageFramework
+      : 'react'
+    : 'react'
   const navigate = useNavigate()
 
   const frameworkMenuItems =
-    config.frameworkMenus?.find((d) => d.framework === framework)?.menuItems ??
+    config.frameworkMenus.find((d) => d.framework === framework)?.menuItems ??
     []
 
   const frameworkConfig = useMemo(() => {
-    if (!config.frameworkMenus) {
-      return undefined
-    }
-
-    const availableFrameworks = config.frameworkMenus?.reduce(
-      (acc: AvailableOptions, menuEntry) => {
-        if (menuEntry.framework in frameworks) {
-          acc[menuEntry.framework] =
-            frameworks[menuEntry.framework as keyof typeof frameworks]
-        }
-        return acc
-      },
-      { react: frameworks['react'] }
-    )
-
     return {
       label: 'Framework',
       selected: frameworks[framework] ? framework : 'react',
-      available: availableFrameworks,
+      available: frameworks,
       onSelect: (option: { label: string; value: string }) => {
         const url = generatePath(match.id, {
           ...match.params,
@@ -136,7 +126,7 @@ export const useDocsConfig = ({
         navigate(url)
       },
     }
-  }, [config, frameworks, framework, match, navigate])
+  }, [frameworks, framework, match, navigate])
 
   const versionConfig = useMemo(() => {
     const available = availableVersions.reduce(
@@ -169,16 +159,8 @@ export const useDocsConfig = ({
     }
   }, [version, match, navigate, availableVersions])
 
-  const docSearch: NonNullable<ConfigSchema['docSearch']> =
-    config.docSearch || {
-      appId: '',
-      apiKey: '',
-      indexName: '',
-    }
-
   return {
     ...config,
-    docSearch,
     menu: [
       localMenu,
       // Merge the two menus together based on their group labels
@@ -200,3 +182,5 @@ export const useDocsConfig = ({
     versionConfig,
   }
 }
+
+export type DocsConfig = ReturnType<typeof useDocsConfig>
diff --git a/tanstack-docs-config.schema.json b/tanstack-docs-config.schema.json
index e64799b1..cb791dd8 100644
--- a/tanstack-docs-config.schema.json
+++ b/tanstack-docs-config.schema.json
@@ -4,7 +4,7 @@
   "title": "TanStack Docs Config",
   "description": "Config file for the documentation of a TanStack project.",
   "type": "object",
-  "required": ["docSearch", "menu"],
+  "required": ["docSearch", "menu", "frameworkMenus"],
   "additionalProperties": false,
   "properties": {
     "$schema": {