diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 984db7537a1..525fb496f1e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -1,13 +1,45 @@
-import { useRouter } from 'next/router'
-import { memo, useEffect } from 'react'
-import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
+import { memo } from 'react'
 import NavigationMenuHome from './HomeMenu'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
 
+enum MenuId {
+  Home = 'home',
+  GettingStarted = 'gettingstarted',
+  Database = 'database',
+  Api = 'api',
+  Graphql = 'graphql',
+  Auth = 'auth',
+  Functions = 'functions',
+  Realtime = 'realtime',
+  Storage = 'storage',
+  Ai = 'ai',
+  Platform = 'platform',
+  Resources = 'resources',
+  SelfHosting = 'self_hosting',
+  Integrations = 'integrations',
+  Cli = 'supabase_cli',
+  RefJavaScriptV1 = 'reference_javascript_v1',
+  RefJavaScriptV2 = 'reference_javascript_v2',
+  RefDartV1 = 'reference_dart_v1',
+  RefDartV2 = 'reference_dart_v2',
+  RefCSharpV0 = 'reference_csharp_v0',
+  RefPythonV2 = 'reference_python_v2',
+  RefSwiftV1 = 'reference_swift_v1',
+  RefSwiftV2 = 'reference_swift_v2',
+  RefKotlinV1 = 'reference_kotlin_v1',
+  RefKotlinV2 = 'reference_kotlin_v2',
+  RefCli = 'reference_cli',
+  RefApi = 'reference_api',
+  SelfHostingAuth = 'reference_self_hosting_auth',
+  SelfHostingStorage = 'reference_self_hosting_storage',
+  SelfHostingRealtime = 'reference_self_hosting_realtime',
+  SelfHostingAnalytics = 'reference_self_hosting_analytics',
+  SelfHostingFunctions = 'reference_self_hosting_functions',
+}
+
 interface BaseMenu {
-  id: string
-  path: string
+  id: MenuId
   type: string
 }
 
@@ -21,6 +53,7 @@ interface GuideMenu extends BaseMenu {
 
 interface ReferenceMenu extends BaseMenu {
   type: 'reference'
+  path: string
   commonSectionsFile: string
   specFile?: string
 }
@@ -29,211 +62,181 @@ type Menu = HomeMenu | GuideMenu | ReferenceMenu
 
 const menus: Menu[] = [
   {
-    id: 'home',
-    path: '/',
+    id: MenuId.Home,
     type: 'home',
   },
   {
-    id: 'gettingstarted',
-    path: '/guides/getting-started',
+    id: MenuId.GettingStarted,
     type: 'guide',
   },
   {
-    id: 'database',
-    path: '/guides/database',
+    id: MenuId.Database,
     type: 'guide',
   },
   {
-    id: 'api',
-    path: '/guides/api',
+    id: MenuId.Api,
     type: 'guide',
   },
   {
-    id: 'graphql',
-    path: '/guides/graphql',
+    id: MenuId.Graphql,
     type: 'guide',
   },
   {
-    id: 'auth',
-    path: '/guides/auth',
+    id: MenuId.Auth,
     type: 'guide',
   },
   {
-    id: 'auth',
-    path: '/learn/auth-deep-dive',
+    id: MenuId.Functions,
     type: 'guide',
   },
   {
-    id: 'functions',
-    path: '/guides/functions',
+    id: MenuId.Realtime,
     type: 'guide',
   },
   {
-    id: 'realtime',
-    path: '/guides/realtime',
+    id: MenuId.Storage,
     type: 'guide',
   },
   {
-    id: 'storage',
-    path: '/guides/storage',
+    id: MenuId.Ai,
     type: 'guide',
   },
   {
-    id: 'ai',
-    path: '/guides/ai',
+    id: MenuId.Platform,
     type: 'guide',
   },
   {
-    id: 'platform',
-    path: '/guides/platform',
+    id: MenuId.Resources,
     type: 'guide',
   },
   {
-    id: 'resources',
-    path: '/guides/resources',
+    id: MenuId.SelfHosting,
     type: 'guide',
   },
   {
-    id: 'self_hosting',
-    path: '/guides/self-hosting',
+    id: MenuId.Integrations,
     type: 'guide',
   },
   {
-    id: 'integrations',
-    path: '/guides/integrations',
+    id: MenuId.Cli,
     type: 'guide',
   },
   {
-    id: 'supabase_cli',
-    // TODO: Add path '/guides/cli/config'
-    path: '/guides/cli',
-    type: 'guide',
-  },
-  {
-    id: 'reference_javascript_v1',
-    path: '/reference/javascript/v1',
+    id: MenuId.RefJavaScriptV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_js_v1.yml',
     type: 'reference',
+    path: '/reference/javascript/v1',
   },
   {
-    id: 'reference_javascript_v2',
-    path: '/reference/javascript',
+    id: MenuId.RefJavaScriptV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_js_v2.yml',
     type: 'reference',
+    path: '/reference/javascript',
   },
   {
-    id: 'reference_dart_v1',
-    path: '/reference/dart/v1',
+    id: MenuId.RefDartV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_dart_v1.yml',
     type: 'reference',
+    path: '/reference/dart/v1',
   },
   {
-    id: 'reference_dart_v2',
-    path: '/reference/dart',
+    id: MenuId.RefDartV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_dart_v2.yml',
     type: 'reference',
+    path: '/reference/dart',
   },
   {
-    id: 'reference_csharp_v0',
-    path: '/reference/csharp',
+    id: MenuId.RefCSharpV0,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_csharp_v0.yml',
     type: 'reference',
+    path: '/reference/csharp',
   },
   {
-    id: 'reference_python_v2',
-    path: '/reference/python',
+    id: MenuId.RefPythonV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_py_v2.yml',
     type: 'reference',
+    path: '/reference/python',
   },
   {
-    id: 'reference_swift_v1',
-    path: '/reference/swift',
+    id: MenuId.RefSwiftV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_swift_v1.yml',
     type: 'reference',
+    path: '/reference/swift',
   },
   {
-    id: 'reference_swift_v2',
-    path: '/reference/swift',
+    id: MenuId.RefSwiftV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_swift_v2.yml',
     type: 'reference',
+    path: '/reference/swift',
   },
   {
-    id: 'reference_kotlin_v1',
-    path: '/reference/kotlin/v1',
+    id: MenuId.RefKotlinV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_kt_v1.yml',
     type: 'reference',
+    path: '/reference/kotlin/v1',
   },
   {
-    id: 'reference_kotlin_v2',
-    path: '/reference/kotlin',
+    id: MenuId.RefKotlinV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_kt_v2.yml',
     type: 'reference',
+    path: '/reference/kotlin',
   },
   {
-    id: 'reference_cli',
-    path: '/reference/cli',
+    id: MenuId.RefCli,
     commonSectionsFile: 'common-cli-sections.json',
     type: 'reference',
+    path: '/reference/cli',
   },
   {
-    id: 'reference_api',
-    path: '/reference/api',
+    id: MenuId.RefApi,
     commonSectionsFile: 'common-api-sections.json',
     type: 'reference',
+    path: '/reference/api',
   },
   {
-    id: 'reference_self_hosting_auth',
-    path: '/reference/self-hosting-auth',
+    id: MenuId.SelfHostingAuth,
     commonSectionsFile: 'common-self-hosting-auth-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-auth',
   },
   {
-    id: 'reference_self_hosting_storage',
-    path: '/reference/self-hosting-storage',
+    id: MenuId.SelfHostingStorage,
     commonSectionsFile: 'common-self-hosting-storage-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-storage',
   },
   {
-    id: 'reference_self_hosting_realtime',
-    path: '/reference/self-hosting-realtime',
+    id: MenuId.SelfHostingRealtime,
     commonSectionsFile: 'common-self-hosting-realtime-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-realtime',
   },
   {
-    id: 'reference_self_hosting_analytics',
-    path: '/reference/self-hosting-analytics',
+    id: MenuId.SelfHostingAnalytics,
     commonSectionsFile: 'common-self-hosting-analytics-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-analytics',
   },
   {
-    id: 'reference_self_hosting_functions',
-    path: '/reference/self-hosting-functions',
+    id: MenuId.SelfHostingFunctions,
     commonSectionsFile: 'common-self-hosting-functions-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-functions',
   },
 ]
 
-function getMenuById(id: string) {
-  return menus.find((menu) => menu.id === id)
-}
-
-function getMenuByUrl(basePath: string, url: string) {
-  // If multiple matches, choose the menu with the longest path
-  const [menu] = menus
-    .filter(({ path }) => url.startsWith(`${basePath}${path}`))
-    .sort((a, b) => b.path.length - a.path.length)
-
-  return menu
+function getMenuById(id: MenuId) {
+  return menus.find((menu) => menu.id === id) ?? menus.find((menu) => menu.id === MenuId.Home)
 }
 
 function getMenuElement(menu: Menu) {
@@ -257,29 +260,12 @@ function getMenuElement(menu: Menu) {
   }
 }
 
-const NavigationMenu = () => {
-  const router = useRouter()
-
-  useEffect(() => {
-    function handleRouteChange(url: string) {
-      const menu = getMenuByUrl(router.basePath, url)
-      if (menu) {
-        menuState.setMenuLevelId(menu.id)
-      }
-    }
-
-    handleRouteChange(router.basePath + router.asPath)
-    // Listen for page changes after a navigation or when the query changes
-    router.events.on('routeChangeComplete', handleRouteChange)
-    return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [router.asPath, router.basePath, router.events])
-
-  const level = useMenuLevelId()
+const NavigationMenu = ({ menuId }: { menuId: MenuId }) => {
+  const level = menuId
   const menu = getMenuById(level)
 
   return getMenuElement(menu)
 }
 
+export { MenuId }
 export default memo(NavigationMenu)
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index e100cfbcb20..a633824d45f 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -2,6 +2,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
+import { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefEducationSection from '~/components/reference/RefEducationSection'
 import RefFunctionSection from '~/components/reference/RefFunctionSection'
 
@@ -10,6 +11,7 @@ import ApiOperationSection from './ApiOperationSection'
 import CliCommandSection from './CLICommandSection'
 import OldVersionAlert from './OldVersionAlert'
 import { IAPISpec, ICommonSection, IRefStaticDoc, ISpec, TypeSpec } from './Reference.types'
+import { MainSkeleton } from '~/layouts/MainSkeleton'
 
 interface RefSectionHandlerProps {
   sections: ICommonSection[]
@@ -18,6 +20,7 @@ interface RefSectionHandlerProps {
   pageProps: { docs: IRefStaticDoc[] }
   type: 'client-lib' | 'cli' | 'api'
   isOldVersion?: boolean
+  menuId: MenuId
 }
 
 const RefSectionHandler = (props: RefSectionHandlerProps) => {
@@ -75,53 +78,55 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="canonical" href={`https://supabase.com${router.basePath}${path}`} />
       </Head>
-      {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
-      <RefSubLayout>
-        {props.sections.map((section, i) => {
-          const sectionType = section.type
-          switch (sectionType) {
-            case 'markdown':
-              const markdownData = props.pageProps.docs.find((doc) => doc.id === section.id)
+      <MainSkeleton menuId={props.menuId}>
+        {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
+        <RefSubLayout>
+          {props.sections.map((section, i) => {
+            const sectionType = section.type
+            switch (sectionType) {
+              case 'markdown':
+                const markdownData = props.pageProps.docs.find((doc) => doc.id === section.id)
 
-              return (
-                <RefEducationSection
-                  key={section.id + i}
-                  item={section}
-                  markdownContent={markdownData}
-                />
-              )
-            case 'function':
-              return (
-                <RefFunctionSection
-                  key={section.id + i}
-                  funcData={section}
-                  commonFuncData={section}
-                  spec={props.spec}
-                  typeSpec={props.typeSpec}
-                />
-              )
-            case 'cli-command':
-              return (
-                <CliCommandSection
-                  key={section.id + i}
-                  funcData={section}
-                  commonFuncData={section}
-                />
-              )
-            case 'operation':
-              return (
-                <ApiOperationSection
-                  key={section.id + i}
-                  funcData={section}
-                  commonFuncData={section}
-                  spec={props.spec}
-                />
-              )
-            default:
-              throw new Error(`Unknown common section type '${sectionType}'`)
-          }
-        })}
-      </RefSubLayout>
+                return (
+                  <RefEducationSection
+                    key={section.id + i}
+                    item={section}
+                    markdownContent={markdownData}
+                  />
+                )
+              case 'function':
+                return (
+                  <RefFunctionSection
+                    key={section.id + i}
+                    funcData={section}
+                    commonFuncData={section}
+                    spec={props.spec}
+                    typeSpec={props.typeSpec}
+                  />
+                )
+              case 'cli-command':
+                return (
+                  <CliCommandSection
+                    key={section.id + i}
+                    funcData={section}
+                    commonFuncData={section}
+                  />
+                )
+              case 'operation':
+                return (
+                  <ApiOperationSection
+                    key={section.id + i}
+                    funcData={section}
+                    commonFuncData={section}
+                    spec={props.spec}
+                  />
+                )
+              default:
+                throw new Error(`Unknown common section type '${sectionType}'`)
+            }
+          })}
+        </RefSubLayout>
+      </MainSkeleton>
     </>
   )
 }
diff --git a/apps/docs/hooks/useMenuState.ts b/apps/docs/hooks/useMenuState.ts
index 52977307542..9cbcba155e7 100644
--- a/apps/docs/hooks/useMenuState.ts
+++ b/apps/docs/hooks/useMenuState.ts
@@ -7,11 +7,6 @@ export const menuState = proxy({
   setMenuActiveRefId: (value) => {
     menuState.menuActiveRefId = value
   },
-  menuLevelId: 'home',
-  setMenuLevelId: (value) => {
-    menuState.menuMobileOpen = false
-    menuState.menuLevelId = value
-  },
   menuMobileOpen: false,
   setMenuMobileOpen: (value) => {
     menuState.menuMobileOpen = value
@@ -21,9 +16,6 @@ export const menuState = proxy({
 export const useMenuActiveRefId = () => {
   return useSnapshot(menuState).menuActiveRefId
 }
-export const useMenuLevelId = () => {
-  return useSnapshot(menuState).menuLevelId
-}
 
 export const useMenuMobileOpen = () => {
   return useSnapshot(menuState).menuMobileOpen
diff --git a/apps/docs/layouts/DefaultGuideLayout.tsx b/apps/docs/layouts/DefaultGuideLayout.tsx
index 9bda33bb1df..08a632fbc9f 100644
--- a/apps/docs/layouts/DefaultGuideLayout.tsx
+++ b/apps/docs/layouts/DefaultGuideLayout.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
+import { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import GuideLayout from './guides'
 
 interface Props {
@@ -16,6 +17,7 @@ interface Props {
   hideToc?: boolean
   currentPage?: string
   editLink?: string
+  menuId: MenuId
 }
 
 const Layout: FC<Props> = (props) => {
diff --git a/apps/docs/layouts/DefaultLayout.tsx b/apps/docs/layouts/DefaultLayout.tsx
index b672c43f4a6..6bfc53a2564 100644
--- a/apps/docs/layouts/DefaultLayout.tsx
+++ b/apps/docs/layouts/DefaultLayout.tsx
@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import { FC, PropsWithChildren } from 'react'
 import components from '~/components'
 import TableOfContents from '~/components/TableOfContents'
+import { MainSkeleton } from './MainSkeleton'
 
 interface Props {
   meta: {
diff --git a/apps/docs/layouts/HomeLayout.tsx b/apps/docs/layouts/HomeLayout.tsx
index 30d8627a622..9f5e7d46320 100644
--- a/apps/docs/layouts/HomeLayout.tsx
+++ b/apps/docs/layouts/HomeLayout.tsx
@@ -4,9 +4,11 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import components from '~/components'
+import HomePageCover from '~/components/HomePageCover'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TableOfContents from '~/components/TableOfContents'
-import HomePageCover from '../components/HomePageCover'
 import { LayoutMainContent } from './DefaultLayout'
+import { MainSkeleton } from './MainSkeleton'
 
 interface Props {
   meta: {
@@ -61,26 +63,28 @@ const HomeLayout: FC<Props> = (props: Props) => {
           },
         }}
       />
-      <article>
-        <HomePageCover meta={props.meta} />
-        <LayoutMainContent>
-          <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
-            <div className="prose max-w-none">
-              <MDXProvider components={components}>{props.children}</MDXProvider>
+      <MainSkeleton menuId={MenuId.Home}>
+        <article>
+          <HomePageCover meta={props.meta} />
+          <LayoutMainContent>
+            <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
+              <div className="prose max-w-none">
+                <MDXProvider components={components}>{props.children}</MDXProvider>
+              </div>
             </div>
-          </div>
-          {hasTableOfContents && !props.meta?.hide_table_of_contents && (
-            <div
-              className={[
-                'border-default bg-background table-of-contents-height border-l',
-                'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
-              ].join(' ')}
-            >
-              <TableOfContents toc={props.toc} video={props.meta.video} />
-            </div>
-          )}
-        </LayoutMainContent>
-      </article>
+            {hasTableOfContents && !props.meta?.hide_table_of_contents && (
+              <div
+                className={[
+                  'border-default bg-background table-of-contents-height border-l',
+                  'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                ].join(' ')}
+              >
+                <TableOfContents toc={props.toc} video={props.meta.video} />
+              </div>
+            )}
+          </LayoutMainContent>
+        </article>
+      </MainSkeleton>
     </>
   )
 }
diff --git a/apps/docs/layouts/MainSkeleton.tsx b/apps/docs/layouts/MainSkeleton.tsx
new file mode 100644
index 00000000000..bf2b77aef4d
--- /dev/null
+++ b/apps/docs/layouts/MainSkeleton.tsx
@@ -0,0 +1,376 @@
+import { useTheme } from 'next-themes'
+import Image from 'next/legacy/image'
+import Link from 'next/link'
+import NavigationMenu, { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
+import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
+
+import { PropsWithChildren, memo, useEffect } from 'react'
+import Footer from '~/components/Navigation/Footer'
+import { menuState, useMenuMobileOpen } from '~/hooks/useMenuState'
+
+const levelsData = {
+  home: {
+    icon: '/docs/img/icons/menu/home',
+    name: 'Home',
+  },
+  gettingstarted: {
+    icon: '/docs/img/icons/menu/getting-started',
+    name: 'Getting Started',
+  },
+  database: {
+    icon: '/docs/img/icons/menu/database',
+    name: 'Database',
+  },
+  api: {
+    icon: '/docs/img/icons/menu/rest',
+    name: 'REST API',
+  },
+  graphql: {
+    icon: '/docs/img/icons/menu/graphql',
+    name: 'GraphQL',
+  },
+  auth: {
+    icon: '/docs/img/icons/menu/auth',
+    name: 'Auth',
+  },
+  functions: {
+    icon: '/docs/img/icons/menu/functions',
+    name: 'Edge Functions',
+  },
+  realtime: {
+    icon: '/docs/img/icons/menu/realtime',
+    name: 'Realtime',
+  },
+  analytics: {
+    icon: '/docs/img/icons/menu/analytics',
+    name: 'Analytics',
+  },
+  storage: {
+    icon: '/docs/img/icons/menu/storage',
+    name: 'Storage',
+  },
+  ai: {
+    icon: '/docs/img/icons/menu/ai',
+    name: 'AI & Vectors',
+  },
+  supabase_cli: {
+    icon: '/docs/img/icons/menu/reference-cli',
+    name: 'Supabase CLI',
+  },
+  platform: {
+    icon: '/docs/img/icons/menu/platform',
+    name: 'Platform',
+  },
+  resources: {
+    icon: '/docs/img/icons/menu/resources',
+    name: 'Resources',
+  },
+  self_hosting: {
+    icon: '/docs/img/icons/menu/self-hosting',
+    name: 'Self-Hosting',
+  },
+  integrations: {
+    icon: '/docs/img/icons/menu/integrations',
+    name: 'Integrations',
+  },
+  reference_javascript_v1: {
+    icon: '/docs/img/icons/menu/reference-javascript',
+    name: 'Javascript Reference v1.0',
+  },
+  reference_javascript_v2: {
+    icon: '/docs/img/icons/menu/reference-javascript',
+    name: 'Javascript Reference v2.0',
+  },
+  reference_dart_v1: {
+    icon: '/docs/img/icons/menu/reference-dart',
+    name: 'Dart Reference v1.0',
+  },
+  reference_dart_v2: {
+    icon: '/docs/img/icons/menu/reference-dart',
+    name: 'Dart Reference v2.0',
+  },
+  reference_csharp_v0: {
+    icon: '/docs/img/icons/menu/reference-csharp',
+    name: 'C# Reference v0.0',
+  },
+  reference_python_v2: {
+    icon: '/docs/img/icons/menu/reference-python',
+    name: 'Python Reference v2.0',
+  },
+  reference_swift_v1: {
+    icon: '/docs/img/icons/menu/reference-swift',
+    name: 'Swift Reference v1.0',
+  },
+  reference_swift_v2: {
+    icon: '/docs/img/icons/menu/reference-swift',
+    name: 'Swift Reference v2.0',
+  },
+  reference_kotlin_v1: {
+    icon: '/docs/img/icons/menu/reference-kotlin',
+    name: 'Kotlin Reference v1.0',
+  },
+  reference_kotlin_v2: {
+    icon: '/docs/img/icons/menu/reference-kotlin',
+    name: 'Kotlin Reference v2.0',
+  },
+  reference_cli: {
+    icon: '/docs/img/icons/menu/reference-cli',
+    name: 'CLI Reference',
+  },
+  reference_api: {
+    icon: '/docs/img/icons/menu/reference-api',
+    name: 'Management API Reference',
+  },
+  reference_self_hosting_auth: {
+    icon: '/docs/img/icons/menu/reference-auth',
+    name: 'Auth Server Reference',
+  },
+  reference_self_hosting_storage: {
+    icon: '/docs/img/icons/menu/reference-storage',
+    name: 'Storage Server Reference',
+  },
+  reference_self_hosting_realtime: {
+    icon: '/docs/img/icons/menu/reference-realtime',
+    name: 'Realtime Server Reference',
+  },
+  reference_self_hosting_analytics: {
+    icon: '/docs/img/icons/menu/reference-analytics',
+    name: 'Analytics Server Reference',
+  },
+  reference_self_hosting_functions: {
+    icon: '/docs/img/icons/menu/reference-functions',
+    name: 'Functions Server Reference',
+  },
+}
+
+const MobileHeader = memo(function MobileHeader({ menuId }: { menuId: MenuId }) {
+  const mobileMenuOpen = useMenuMobileOpen()
+  const menuLevel = menuId
+
+  return (
+    <div
+      className={[
+        'transition-all ease-out z-10',
+        'top-0',
+        mobileMenuOpen && 'absolute',
+        'flex items-center h-[40px]',
+        mobileMenuOpen ? 'gap-0' : 'gap-3',
+      ].join(' ')}
+    >
+      <button
+        className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
+        onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
+      >
+        <div
+          className={[
+            'space-y-1 group cursor-pointer relative',
+            mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
+          ].join(' ')}
+        >
+          <span
+            className={[
+              'transition-all ease-out block w-4 h-px bg-foreground-muted group-hover:bg-foreground',
+              !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
+            ].join(' ')}
+          ></span>
+          <span
+            className={[
+              'transition-all ease-out block h-px bg-foreground-muted group-hover:bg-foreground',
+              !mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]',
+            ].join(' ')}
+          ></span>
+        </div>
+      </button>
+      <div className={[].join(' ')}>
+        <img
+          src={menuLevel ? levelsData[menuLevel].icon + '.svg' : levelsData['home'].icon + '.svg'}
+          className={[
+            'transition-all duration-200',
+            mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
+          ].join(' ')}
+        />
+      </div>
+      <span
+        className={[
+          'transition-all duration-200',
+          'text-foreground',
+          mobileMenuOpen ? 'text-xs' : 'text-sm',
+        ].join(' ')}
+      >
+        {mobileMenuOpen
+          ? 'Close'
+          : menuLevel
+            ? levelsData[menuLevel].name
+            : levelsData['home'].name}
+      </span>
+    </div>
+  )
+})
+
+const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  useEffect(() => {
+    window.addEventListener('resize', (e: UIEvent) => {
+      const w = e.target as Window
+      if (mobileMenuOpen && w.innerWidth >= 1024) {
+        menuState.setMenuMobileOpen(!mobileMenuOpen)
+      }
+    })
+    return () => {
+      window.removeEventListener('resize', () => {})
+    }
+  }, [mobileMenuOpen])
+
+  return (
+    <div
+      className={[
+        'h-full',
+        'left-0',
+        'right-0',
+        'z-10',
+        'backdrop-blur-sm backdrop-filter bg-alternative/90',
+        mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
+        // always hide on desktop
+        'lg:hidden',
+      ].join(' ')}
+      onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
+    ></div>
+  )
+})
+
+const HeaderLogo = memo(function HeaderLogo() {
+  const { resolvedTheme } = useTheme()
+  return (
+    <Link href="/" className="px-10 flex items-center gap-2">
+      <Image
+        className="cursor-pointer"
+        src={
+          resolvedTheme?.includes('dark') ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
+        }
+        width={96}
+        height={24}
+        alt="Supabase Logo"
+      />
+      <span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
+    </Link>
+  )
+})
+
+const Container = memo(function Container(props: PropsWithChildren) {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <div
+      // #docs-content-container is used by layout to scroll to top
+      id="docs-content-container"
+      className={[
+        // 'overflow-x-auto',
+        'w-full transition-all ease-out',
+        // 'absolute lg:relative',
+        mobileMenuOpen ? 'ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden' : 'overflow-auto',
+        // desktop override any margin styles
+        'lg:ml-0',
+      ].join(' ')}
+    >
+      <div className="flex flex-col relative">{props.children}</div>
+    </div>
+  )
+})
+
+const NavContainer = memo(function NavContainer({ menuId }: { menuId: MenuId }) {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <nav
+      aria-labelledby="main-nav-title"
+      className={[
+        // 'hidden',
+        'absolute lg:relative',
+        mobileMenuOpen ? 'w-[75%] sm:w-[50%] md:w-[33%] left-0' : 'w-0 -left-[280px]',
+        'lg:w-[420px] !lg:left-0',
+        // desktop override any left styles
+        'lg:left-0',
+        'transition-all',
+        'top-0',
+        'flex flex-col ml-0',
+      ].join(' ')}
+    >
+      <div
+        className={[
+          'top-0',
+          'relative',
+          'w-auto',
+          'border-r overflow-auto h-screen',
+          'backdrop-blur backdrop-filter bg-background',
+          'flex flex-col',
+        ].join(' ')}
+      >
+        <h1 id="main-nav-title" className="sr-only">
+          Main menu
+        </h1>
+        <div className="top-0 sticky z-10">
+          <div>
+            <div>
+              <div
+                className={[
+                  'hidden lg:flex lg:height-auto',
+                  'pt-8 bg-background flex-col gap-8',
+                ].join(' ')}
+              >
+                <HeaderLogo />
+              </div>
+              <div className="h-4 bg-background w-full"></div>
+              <div className="bg-gradient-to-b from-background to-transparent h-4 w-full"></div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={[
+            'transition-all ease-out duration-200',
+            'absolute left-0 right-0 h-screen',
+            'px-5 pl-5 py-16',
+            'top-[0px]',
+            'bg-background',
+            // desktop styles
+            'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
+            'lg:opacity-100 lg:visible',
+          ].join(' ')}
+        >
+          <NavigationMenu menuId={menuId} />
+        </div>
+      </div>
+    </nav>
+  )
+})
+
+function MainSkeleton({ children, menuId }: PropsWithChildren<{ menuId: MenuId }>) {
+  return (
+    <div className="flex flex-row h-full">
+      <NavContainer menuId={menuId} />
+      <Container>
+        <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
+          <TopNavBar />
+        </div>
+        <div
+          className={[
+            'sticky transition-all top-0',
+            'z-10',
+            'backdrop-blur backdrop-filter bg-background',
+          ].join(' ')}
+        >
+          <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
+            <MobileHeader menuId={menuId} />
+          </div>
+        </div>
+        <div className="grow">
+          {children}
+          <Footer />
+        </div>
+        <MobileMenuBackdrop />
+      </Container>
+    </div>
+  )
+}
+
+export { MainSkeleton }
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index ed1447aa80c..5754ddff924 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -1,349 +1,5 @@
-import { useTheme } from 'next-themes'
-import Image from 'next/legacy/image'
-import Link from 'next/link'
-import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
-import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
-
 import Head from 'next/head'
-import { PropsWithChildren, memo, useEffect } from 'react'
-import Footer from '~/components/Navigation/Footer'
-import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
-
-const levelsData = {
-  home: {
-    icon: '/docs/img/icons/menu/home',
-    name: 'Home',
-  },
-  gettingstarted: {
-    icon: '/docs/img/icons/menu/getting-started',
-    name: 'Getting Started',
-  },
-  database: {
-    icon: '/docs/img/icons/menu/database',
-    name: 'Database',
-  },
-  api: {
-    icon: '/docs/img/icons/menu/rest',
-    name: 'REST API',
-  },
-  graphql: {
-    icon: '/docs/img/icons/menu/graphql',
-    name: 'GraphQL',
-  },
-  auth: {
-    icon: '/docs/img/icons/menu/auth',
-    name: 'Auth',
-  },
-  functions: {
-    icon: '/docs/img/icons/menu/functions',
-    name: 'Edge Functions',
-  },
-  realtime: {
-    icon: '/docs/img/icons/menu/realtime',
-    name: 'Realtime',
-  },
-  analytics: {
-    icon: '/docs/img/icons/menu/analytics',
-    name: 'Analytics',
-  },
-  storage: {
-    icon: '/docs/img/icons/menu/storage',
-    name: 'Storage',
-  },
-  ai: {
-    icon: '/docs/img/icons/menu/ai',
-    name: 'AI & Vectors',
-  },
-  supabase_cli: {
-    icon: '/docs/img/icons/menu/reference-cli',
-    name: 'Supabase CLI',
-  },
-  platform: {
-    icon: '/docs/img/icons/menu/platform',
-    name: 'Platform',
-  },
-  resources: {
-    icon: '/docs/img/icons/menu/resources',
-    name: 'Resources',
-  },
-  self_hosting: {
-    icon: '/docs/img/icons/menu/self-hosting',
-    name: 'Self-Hosting',
-  },
-  integrations: {
-    icon: '/docs/img/icons/menu/integrations',
-    name: 'Integrations',
-  },
-  reference_javascript_v1: {
-    icon: '/docs/img/icons/menu/reference-javascript',
-    name: 'Javascript Reference v1.0',
-  },
-  reference_javascript_v2: {
-    icon: '/docs/img/icons/menu/reference-javascript',
-    name: 'Javascript Reference v2.0',
-  },
-  reference_dart_v1: {
-    icon: '/docs/img/icons/menu/reference-dart',
-    name: 'Dart Reference v1.0',
-  },
-  reference_dart_v2: {
-    icon: '/docs/img/icons/menu/reference-dart',
-    name: 'Dart Reference v2.0',
-  },
-  reference_csharp_v0: {
-    icon: '/docs/img/icons/menu/reference-csharp',
-    name: 'C# Reference v0.0',
-  },
-  reference_python_v2: {
-    icon: '/docs/img/icons/menu/reference-python',
-    name: 'Python Reference v2.0',
-  },
-  reference_swift_v1: {
-    icon: '/docs/img/icons/menu/reference-swift',
-    name: 'Swift Reference v1.0',
-  },
-  reference_swift_v2: {
-    icon: '/docs/img/icons/menu/reference-swift',
-    name: 'Swift Reference v2.0',
-  },
-  reference_kotlin_v1: {
-    icon: '/docs/img/icons/menu/reference-kotlin',
-    name: 'Kotlin Reference v1.0',
-  },
-  reference_kotlin_v2: {
-    icon: '/docs/img/icons/menu/reference-kotlin',
-    name: 'Kotlin Reference v2.0',
-  },
-  reference_cli: {
-    icon: '/docs/img/icons/menu/reference-cli',
-    name: 'CLI Reference',
-  },
-  reference_api: {
-    icon: '/docs/img/icons/menu/reference-api',
-    name: 'Management API Reference',
-  },
-  reference_self_hosting_auth: {
-    icon: '/docs/img/icons/menu/reference-auth',
-    name: 'Auth Server Reference',
-  },
-  reference_self_hosting_storage: {
-    icon: '/docs/img/icons/menu/reference-storage',
-    name: 'Storage Server Reference',
-  },
-  reference_self_hosting_realtime: {
-    icon: '/docs/img/icons/menu/reference-realtime',
-    name: 'Realtime Server Reference',
-  },
-  reference_self_hosting_analytics: {
-    icon: '/docs/img/icons/menu/reference-analytics',
-    name: 'Analytics Server Reference',
-  },
-  reference_self_hosting_functions: {
-    icon: '/docs/img/icons/menu/reference-functions',
-    name: 'Functions Server Reference',
-  },
-}
-
-const MobileHeader = memo(function MobileHeader() {
-  const mobileMenuOpen = useMenuMobileOpen()
-  const menuLevel = useMenuLevelId()
-
-  return (
-    <div
-      className={[
-        'transition-all ease-out z-10',
-        'top-0',
-        mobileMenuOpen && 'absolute',
-        'flex items-center h-[40px]',
-        mobileMenuOpen ? 'gap-0' : 'gap-3',
-      ].join(' ')}
-    >
-      <button
-        className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
-        onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-      >
-        <div
-          className={[
-            'space-y-1 group cursor-pointer relative',
-            mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
-          ].join(' ')}
-        >
-          <span
-            className={[
-              'transition-all ease-out block w-4 h-px bg-foreground-muted group-hover:bg-foreground',
-              !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
-            ].join(' ')}
-          ></span>
-          <span
-            className={[
-              'transition-all ease-out block h-px bg-foreground-muted group-hover:bg-foreground',
-              !mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]',
-            ].join(' ')}
-          ></span>
-        </div>
-      </button>
-      <div className={[].join(' ')}>
-        <img
-          src={menuLevel ? levelsData[menuLevel].icon + '.svg' : levelsData['home'].icon + '.svg'}
-          className={[
-            'transition-all duration-200',
-            mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
-          ].join(' ')}
-        />
-      </div>
-      <span
-        className={[
-          'transition-all duration-200',
-          'text-foreground',
-          mobileMenuOpen ? 'text-xs' : 'text-sm',
-        ].join(' ')}
-      >
-        {mobileMenuOpen
-          ? 'Close'
-          : menuLevel
-            ? levelsData[menuLevel].name
-            : levelsData['home'].name}
-      </span>
-    </div>
-  )
-})
-
-const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
-  const mobileMenuOpen = useMenuMobileOpen()
-
-  useEffect(() => {
-    window.addEventListener('resize', (e: UIEvent) => {
-      const w = e.target as Window
-      if (mobileMenuOpen && w.innerWidth >= 1024) {
-        menuState.setMenuMobileOpen(!mobileMenuOpen)
-      }
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
-    }
-  }, [mobileMenuOpen])
-
-  return (
-    <div
-      className={[
-        'h-full',
-        'left-0',
-        'right-0',
-        'z-10',
-        'backdrop-blur-sm backdrop-filter bg-alternative/90',
-        mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
-        // always hide on desktop
-        'lg:hidden',
-      ].join(' ')}
-      onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-    ></div>
-  )
-})
-
-const HeaderLogo = memo(function HeaderLogo() {
-  const { resolvedTheme } = useTheme()
-  return (
-    <Link href="/" className="px-10 flex items-center gap-2">
-      <Image
-        className="cursor-pointer"
-        src={
-          resolvedTheme?.includes('dark') ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
-        }
-        width={96}
-        height={24}
-        alt="Supabase Logo"
-      />
-      <span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
-    </Link>
-  )
-})
-
-const Container = memo(function Container(props: PropsWithChildren) {
-  const mobileMenuOpen = useMenuMobileOpen()
-
-  return (
-    <div
-      // #docs-content-container is used by layout to scroll to top
-      id="docs-content-container"
-      className={[
-        // 'overflow-x-auto',
-        'w-full transition-all ease-out',
-        // 'absolute lg:relative',
-        mobileMenuOpen ? 'ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden' : 'overflow-auto',
-        // desktop override any margin styles
-        'lg:ml-0',
-      ].join(' ')}
-    >
-      <div className="flex flex-col relative">{props.children}</div>
-    </div>
-  )
-})
-
-const NavContainer = memo(function NavContainer() {
-  const mobileMenuOpen = useMenuMobileOpen()
-
-  return (
-    <nav
-      aria-labelledby="main-nav-title"
-      className={[
-        // 'hidden',
-        'absolute lg:relative',
-        mobileMenuOpen ? 'w-[75%] sm:w-[50%] md:w-[33%] left-0' : 'w-0 -left-[280px]',
-        'lg:w-[420px] !lg:left-0',
-        // desktop override any left styles
-        'lg:left-0',
-        'transition-all',
-        'top-0',
-        'flex flex-col ml-0',
-      ].join(' ')}
-    >
-      <div
-        className={[
-          'top-0',
-          'relative',
-          'w-auto',
-          'border-r overflow-auto h-screen',
-          'backdrop-blur backdrop-filter bg-background',
-          'flex flex-col',
-        ].join(' ')}
-      >
-        <h1 id="main-nav-title" className="sr-only">
-          Main menu
-        </h1>
-        <div className="top-0 sticky z-10">
-          <div>
-            <div>
-              <div
-                className={[
-                  'hidden lg:flex lg:height-auto',
-                  'pt-8 bg-background flex-col gap-8',
-                ].join(' ')}
-              >
-                <HeaderLogo />
-              </div>
-              <div className="h-4 bg-background w-full"></div>
-              <div className="bg-gradient-to-b from-background to-transparent h-4 w-full"></div>
-            </div>
-          </div>
-        </div>
-        <div
-          className={[
-            'transition-all ease-out duration-200',
-            'absolute left-0 right-0 h-screen',
-            'px-5 pl-5 py-16',
-            'top-[0px]',
-            'bg-background',
-            // desktop styles
-            'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
-            'lg:opacity-100 lg:visible',
-          ].join(' ')}
-        >
-          <NavigationMenu />
-        </div>
-      </div>
-    </nav>
-  )
-})
+import { PropsWithChildren } from 'react'
 
 const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
   return (
@@ -351,32 +7,7 @@ const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
       <Head>
         <title>Supabase Docs</title>
       </Head>
-      <main className="grow overflow-hidden">
-        <div className="flex flex-row h-full">
-          <NavContainer />
-          <Container>
-            <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
-              <TopNavBar />
-            </div>
-            <div
-              className={[
-                'sticky transition-all top-0',
-                'z-10',
-                'backdrop-blur backdrop-filter bg-background',
-              ].join(' ')}
-            >
-              <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
-                <MobileHeader />
-              </div>
-            </div>
-            <div className="grow">
-              {children}
-              <Footer />
-            </div>
-            <MobileMenuBackdrop />
-          </Container>
-        </div>
-      </main>
+      <main className="grow overflow-hidden">{children}</main>
     </>
   )
 }
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 105e250dd5b..34768852a2e 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -10,8 +10,10 @@ import components from '~/components'
 import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
 import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
 import GuidesTableOfContents from '~/components/GuidesTableOfContents'
+import { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import useHash from '~/hooks/useHash'
 import { LayoutMainContent } from '../DefaultLayout'
+import { MainSkeleton } from '../MainSkeleton'
 
 interface Props {
   meta: {
@@ -30,6 +32,7 @@ interface Props {
   toc?: any
   currentPage?: string
   hideToc?: boolean
+  menuId: MenuId
 }
 
 const Layout: FC<Props> = (props) => {
@@ -42,6 +45,8 @@ const Layout: FC<Props> = (props) => {
   const { asPath } = useRouter()
   const router = useRouter()
 
+  const menuId = props.menuId
+
   const EDIT_BUTTON_EXCLUDE_LIST = ['/404']
 
   useEffect(() => {
@@ -108,77 +113,79 @@ const Layout: FC<Props> = (props) => {
           },
         }}
       />
-      <LayoutMainContent className="pb-0">
-        <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
-          <div
-            className={[
-              'relative',
-              !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
-              'transition-all ease-out',
-              'duration-100',
-            ].join(' ')}
-          >
-            {props.meta?.breadcrumb && (
-              <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
-            )}
-            <article
-              ref={articleRef}
-              className={`${
-                props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
-              } prose max-w-none`}
-            >
-              <h1 className="mb-0">{props.meta.title}</h1>
-              {props.meta?.subtitle && (
-                <h2 className="mt-3 text-xl text-foreground-light">{props.meta.subtitle}</h2>
-              )}
-              <div className="w-full border-b my-8"></div>
-              <MDXProvider components={components}>{props.children}</MDXProvider>
-
-              {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
-                <></>
-              ) : (
-                <div className="mt-16 not-prose">
-                  <div>
-                    <a
-                      href={`https://github.com/${
-                        props.editLink ||
-                        `supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`
-                      }
-                    `}
-                      className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200 w-fit"
-                    >
-                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
-                    </a>
-                  </div>
-                </div>
-              )}
-            </article>
-          </div>
-          {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+      <MainSkeleton menuId={menuId}>
+        <LayoutMainContent className="pb-0">
+          <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
             <div
               className={[
-                'col-span-3',
-                'border-overlay bg-background table-of-contents-height',
-                'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                'relative',
+                !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
                 'transition-all ease-out',
                 'duration-100',
               ].join(' ')}
             >
-              <div className="border-l">
-                {props.meta?.tocVideo && !!tocVideoPreview && (
-                  <div className="relative mb-6 pl-5">
-                    <ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
+              {props.meta?.breadcrumb && (
+                <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
+              )}
+              <article
+                ref={articleRef}
+                className={`${
+                  props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
+                } prose max-w-none`}
+              >
+                <h1 className="mb-0">{props.meta.title}</h1>
+                {props.meta?.subtitle && (
+                  <h2 className="mt-3 text-xl text-foreground-light">{props.meta.subtitle}</h2>
+                )}
+                <div className="w-full border-b my-8"></div>
+                <MDXProvider components={components}>{props.children}</MDXProvider>
+
+                {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
+                  <></>
+                ) : (
+                  <div className="mt-16 not-prose">
+                    <div>
+                      <a
+                        href={`https://github.com/${
+                          props.editLink ||
+                          `supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`
+                        }
+                    `}
+                        className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200 w-fit"
+                      >
+                        Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
+                      </a>
+                    </div>
                   </div>
                 )}
-                <span className="block font-mono text-xs uppercase text-foreground px-5 mb-6">
-                  On this page
-                </span>
-                <GuidesTableOfContents list={tocList} />
-              </div>
+              </article>
             </div>
-          )}
-        </div>
-      </LayoutMainContent>
+            {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+              <div
+                className={[
+                  'col-span-3',
+                  'border-overlay bg-background table-of-contents-height',
+                  'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                  'transition-all ease-out',
+                  'duration-100',
+                ].join(' ')}
+              >
+                <div className="border-l">
+                  {props.meta?.tocVideo && !!tocVideoPreview && (
+                    <div className="relative mb-6 pl-5">
+                      <ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
+                    </div>
+                  )}
+                  <span className="block font-mono text-xs uppercase text-foreground px-5 mb-6">
+                    On this page
+                  </span>
+                  <GuidesTableOfContents list={tocList} />
+                </div>
+              </div>
+            )}
+          </div>
+        </LayoutMainContent>
+      </MainSkeleton>
     </>
   )
 }
diff --git a/apps/docs/pages/guides/ai/[[...slug]].tsx b/apps/docs/pages/guides/ai/[[...slug]].tsx
index af8cc713906..a19f8a02e54 100644
--- a/apps/docs/pages/guides/ai/[[...slug]].tsx
+++ b/apps/docs/pages/guides/ai/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function AiGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Ai}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/ai/python/[slug].tsx b/apps/docs/pages/guides/ai/python/[slug].tsx
index fcbd53160c0..952e4bfa099 100644
--- a/apps/docs/pages/guides/ai/python/[slug].tsx
+++ b/apps/docs/pages/guides/ai/python/[slug].tsx
@@ -11,6 +11,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -61,7 +62,7 @@ interface PythonClientDocsProps {
 
 export default function PythonClientDocs({ source, meta }: PythonClientDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} menuId={MenuId.Ai}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/api/[[...slug]].tsx b/apps/docs/pages/guides/api/[[...slug]].tsx
index 94951837d6d..d46e03fd7cc 100644
--- a/apps/docs/pages/guides/api/[[...slug]].tsx
+++ b/apps/docs/pages/guides/api/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function ApiGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Api}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/auth/[[...slug]].tsx b/apps/docs/pages/guides/auth/[[...slug]].tsx
index 777f65e6ddd..9e645a917ea 100644
--- a/apps/docs/pages/guides/auth/[[...slug]].tsx
+++ b/apps/docs/pages/guides/auth/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function AuthGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Auth}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/cli/[[...slug]].tsx b/apps/docs/pages/guides/cli/[[...slug]].tsx
index 3e690745906..2dd168f672d 100644
--- a/apps/docs/pages/guides/cli/[[...slug]].tsx
+++ b/apps/docs/pages/guides/cli/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function CliGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Cli}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/cli/config.tsx b/apps/docs/pages/guides/cli/config.tsx
index 3830af444f1..193f25fca66 100644
--- a/apps/docs/pages/guides/cli/config.tsx
+++ b/apps/docs/pages/guides/cli/config.tsx
@@ -5,6 +5,8 @@ import GuidesTableOfContents from '~/components/GuidesTableOfContents'
 import { Heading } from '~/components/CustomHTMLElements'
 import Head from 'next/head'
 import { CodeBlock } from 'ui'
+import { MainSkeleton } from '~/layouts/MainSkeleton'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 // Parameters are grouped on the page by tag
 const tocList = []
@@ -29,24 +31,26 @@ export default function Config() {
       <Head>
         <title>Supabase CLI config</title>
       </Head>
-      <div className="grid grid-cols-12 relative gap-4 px-5 max-w-7xl mx-auto py-16">
-        <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
-          <div className="w-full prose">
-            <h1>CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
-            <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-            <div>{content}</div>
+      <MainSkeleton menuId={MenuId.Cli}>
+        <div className="grid grid-cols-12 relative gap-4 px-5 max-w-7xl mx-auto py-16">
+          <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
+            <div className="w-full prose">
+              <h1>CLI configuration</h1>
+              <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
+              <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
+              <div>{content}</div>
+            </div>
+          </div>
+          <div className="md:col-span-3">
+            <div className="sticky overflow-auto max-h-[calc(100vh-60px-5rem)] pb-3 top-32 border-l">
+              <span className="block font-mono text-xs uppercase text-foreground pl-5 mb-4">
+                On this page
+              </span>
+              <GuidesTableOfContents list={tocList} />
+            </div>
           </div>
         </div>
-        <div className="md:col-span-3">
-          <div className="sticky overflow-auto max-h-[calc(100vh-60px-5rem)] pb-3 top-32 border-l">
-            <span className="block font-mono text-xs uppercase text-foreground pl-5 mb-4">
-              On this page
-            </span>
-            <GuidesTableOfContents list={tocList} />
-          </div>
-        </div>
-      </div>
+      </MainSkeleton>
     </>
   )
 }
diff --git a/apps/docs/pages/guides/cli/github-action/[slug].tsx b/apps/docs/pages/guides/cli/github-action/[slug].tsx
index 049e3f1072d..d06701295e5 100644
--- a/apps/docs/pages/guides/cli/github-action/[slug].tsx
+++ b/apps/docs/pages/guides/cli/github-action/[slug].tsx
@@ -12,6 +12,7 @@ import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLin
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
 import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -62,7 +63,7 @@ interface ActionDocsProps {
 
 export default function ActionDocs({ source, meta }: ActionDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} menuId={MenuId.Cli}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/database/[[...slug]].tsx b/apps/docs/pages/guides/database/[[...slug]].tsx
index fc7519ad2ba..0ee6416477b 100644
--- a/apps/docs/pages/guides/database/[[...slug]].tsx
+++ b/apps/docs/pages/guides/database/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -31,7 +32,7 @@ export default function DatabaseGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Database}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[[...slug]].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[[...slug]].tsx
index 564d96d51d2..0d34ede0dcb 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers/[[...slug]].tsx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[[...slug]].tsx
@@ -10,6 +10,7 @@ import remarkGfm from 'remark-gfm'
 import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
@@ -83,7 +84,7 @@ export default function WrappersDocs({
   editLink,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <Layout meta={meta} editLink={editLink}>
+    <Layout meta={meta} editLink={editLink} menuId={MenuId.Database}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/functions/[[...slug]].tsx b/apps/docs/pages/guides/functions/[[...slug]].tsx
index 8e41b131d3e..8a8ed0defd2 100644
--- a/apps/docs/pages/guides/functions/[[...slug]].tsx
+++ b/apps/docs/pages/guides/functions/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function FunctionsGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Functions}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/getting-started/[[...slug]].tsx b/apps/docs/pages/guides/getting-started/[[...slug]].tsx
index 8791fae3a10..e16c15ac68f 100644
--- a/apps/docs/pages/guides/getting-started/[[...slug]].tsx
+++ b/apps/docs/pages/guides/getting-started/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function GettingStartedGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.GettingStarted}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/graphql/[[...slug]].tsx b/apps/docs/pages/guides/graphql/[[...slug]].tsx
index 559e10f592b..00eaecfe221 100644
--- a/apps/docs/pages/guides/graphql/[[...slug]].tsx
+++ b/apps/docs/pages/guides/graphql/[[...slug]].tsx
@@ -5,14 +5,17 @@ import { serialize } from 'next-mdx-remote/serialize'
 import { isAbsolute, relative } from 'path'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
-import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
 import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
 
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
 const repo = 'pg_graphql'
@@ -114,7 +117,7 @@ interface PGGraphQLDocsProps {
 
 export default function PGGraphQLDocs({ source, meta }: PGGraphQLDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} menuId={MenuId.Graphql}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/platform/[[...slug]].tsx b/apps/docs/pages/guides/platform/[[...slug]].tsx
index 06340742556..f20307d7974 100644
--- a/apps/docs/pages/guides/platform/[[...slug]].tsx
+++ b/apps/docs/pages/guides/platform/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function PlatformGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Platform}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/realtime/[[...slug]].tsx b/apps/docs/pages/guides/realtime/[[...slug]].tsx
index dddabae2a82..3a90134f5ad 100644
--- a/apps/docs/pages/guides/realtime/[[...slug]].tsx
+++ b/apps/docs/pages/guides/realtime/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function RealtimeGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Realtime}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/resources/[[...slug]].tsx b/apps/docs/pages/guides/resources/[[...slug]].tsx
index 1fb37bfe708..d73ad930fe5 100644
--- a/apps/docs/pages/guides/resources/[[...slug]].tsx
+++ b/apps/docs/pages/guides/resources/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function ResourcesGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Resources}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/self-hosting/[[...slug]].tsx b/apps/docs/pages/guides/self-hosting/[[...slug]].tsx
index fee43e2be5b..c63d1c13b75 100644
--- a/apps/docs/pages/guides/self-hosting/[[...slug]].tsx
+++ b/apps/docs/pages/guides/self-hosting/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function SelfHostingGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.SelfHosting}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/guides/self-hosting/analytics/config.tsx b/apps/docs/pages/guides/self-hosting/analytics/config.tsx
index 073411ca703..3946fc2c55c 100644
--- a/apps/docs/pages/guides/self-hosting/analytics/config.tsx
+++ b/apps/docs/pages/guides/self-hosting/analytics/config.tsx
@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getAnalyticsConfigV0 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 
diff --git a/apps/docs/pages/guides/self-hosting/auth/config.tsx b/apps/docs/pages/guides/self-hosting/auth/config.tsx
index 50734320dfe..5702f8a5379 100644
--- a/apps/docs/pages/guides/self-hosting/auth/config.tsx
+++ b/apps/docs/pages/guides/self-hosting/auth/config.tsx
@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getAuthConfigV1 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 
diff --git a/apps/docs/pages/guides/self-hosting/realtime/config.tsx b/apps/docs/pages/guides/self-hosting/realtime/config.tsx
index 1dd5086b214..09df809537c 100644
--- a/apps/docs/pages/guides/self-hosting/realtime/config.tsx
+++ b/apps/docs/pages/guides/self-hosting/realtime/config.tsx
@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getRealtimeConfigV0 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 
diff --git a/apps/docs/pages/guides/self-hosting/storage/config.tsx b/apps/docs/pages/guides/self-hosting/storage/config.tsx
index 57a32f7cb96..8a131f674ac 100644
--- a/apps/docs/pages/guides/self-hosting/storage/config.tsx
+++ b/apps/docs/pages/guides/self-hosting/storage/config.tsx
@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getStorageConfigV0 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 
diff --git a/apps/docs/pages/guides/storage/[[...slug]].tsx b/apps/docs/pages/guides/storage/[[...slug]].tsx
index c3ae4c4b3c3..90c4b978d88 100644
--- a/apps/docs/pages/guides/storage/[[...slug]].tsx
+++ b/apps/docs/pages/guides/storage/[[...slug]].tsx
@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function StorageGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Storage}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )
diff --git a/apps/docs/pages/handbook/contributing.mdx b/apps/docs/pages/handbook/contributing.mdx
deleted file mode 100644
index 5365b2fb9f9..00000000000
--- a/apps/docs/pages/handbook/contributing.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'contributing',
-  title: 'Contributing',
-  description: 'Want to help?',
-}
-
-## How to contribute
-
-Supabase has many [open source repos](https://github.com/orgs/supabase/repositories). Some of the more popular ones are:
-
-- [Supabase](https://github.com/supabase/supabase) - Our Dashboard, Websites, and example apps
-- [Supabase-js](https://github.com/supabase/supabase-js) - A client-side library written in TypeScript
-- [Gotrue](https://github.com/supabase/gotrue) - Our auth server, written in Go
-- [Realtime](https://github.com/supabase/realtime) - A server for streaming changes from Postgres, written in Elixir
-- [browse all](https://github.com/orgs/supabase/repositories)
-
-Want to contribute? Why not jump into our GitHub repo and:
-
-- [Sponsor Supabase](https://github.com/sponsors/supabase).
-- [Answer Discussions](https://github.com/supabase/supabase/discussions).
-- Submit an issue to one of our [repos](https://github.com/orgs/supabase/repositories)
-- Report a performance issue or a part of the documentation that you find confusing.
-- Create a pull request in one of our [repos](https://github.com/orgs/supabase/repositories)
-- [Translate our Readme](https://github.com/supabase/supabase/issues/1341).
-- Try our products and give feedback.
-- Spread the word if you like what we are doing.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
diff --git a/apps/docs/pages/handbook/introduction.mdx b/apps/docs/pages/handbook/introduction.mdx
deleted file mode 100644
index f6f2fc2c162..00000000000
--- a/apps/docs/pages/handbook/introduction.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'introduction',
-  title: 'Supabase Handbook',
-  description: 'The Supabase public handbook and manifesto',
-}
-
-Supabase is thinking in public. Everything is online, no matter how raw the current state of things.
-
-This is our public handbook and manifesto. We are completely opensource and this means that you, our users, are also our team members.
-
----
-
-## Opensource
-
-Wherever we can we will support existing opensource tools and libraries.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
diff --git a/apps/docs/pages/reference/analytics/[...slug].tsx b/apps/docs/pages/reference/analytics/[...slug].tsx
deleted file mode 100644
index 6ba5e15111c..00000000000
--- a/apps/docs/pages/reference/analytics/[...slug].tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import specFile from '~/spec/transforms/analytics_v0_openapi_deparsed.json' assert { type: 'json' }
-import { gen_v3, enrichedOperation } from '~/lib/refGenerator/helpers'
-import { Tabs, CodeBlock } from 'ui'
-
-import RefSubLayout from '~/layouts/ref/RefSubLayout'
-
-export type AcceptedValue = {
-  id: string
-  name: string
-  type: 'string' | 'boolean' | 'object'
-  description?: string
-}
-
-export type Flag = {
-  id: string
-  name: string
-  description: string
-  default_value: string
-  accepted_values: AcceptedValue[]
-}
-
-export type ApiParameter = {
-  example: string
-  in: string
-  name: string
-  required: boolean
-  schema: {
-    type: string
-    example: string
-  }
-}
-// @ts-ignore
-const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
-
-export default function Config() {
-  return (
-    <RefSubLayout>
-      <div className="flex my-16">
-        <div className="w-full">
-          <div className="grid gap-16">
-            <h1 className="text-4xl uppercase">{generatedSpec.info.title}</h1>
-            <p>{generatedSpec.info.description}</p>
-          </div>
-
-          <div className="grid gap-32 mx-auto max-w-5xl mt-24">
-            {generatedSpec.operations.map((operation: any) => (
-              <div className="border-b pb-8">
-                <RefSubLayout.Section
-                  slug={operation.id}
-                  title={operation.summary}
-                  id={operation.operationId}
-                  monoFont={false}
-                >
-                  <RefSubLayout.Details>
-                    <div className="mt-4">
-                      <code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
-                        <span className="uppercase whitespace-nowrap	">{operation.operation}</span>
-                        {operation.fullPath}
-                      </code>
-                    </div>
-                    {/* Path Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'path').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Path parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'path')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div>
-                                      <div className="flex gap-4 items-center">
-                                        <span className="font-bold">{parameter.name}</span>
-                                        <div className="font-mono text-xs break-all">
-                                          {parameter.required && (
-                                            <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
-                                              REQUIRED
-                                            </div>
-                                          )}
-                                        </div>
-                                      </div>
-                                      <p className="mt-4">{parameter.description}</p>
-                                    </div>
-                                    {parameter.example && (
-                                      <div className="mt-4 flex gap-4 items-center">
-                                        <span>Example:</span>
-                                        <span className="font-mono text-xs break-all">
-                                          {parameter.example}
-                                        </span>
-                                      </div>
-                                    )}
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-
-                    {/* Header Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'header').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Header parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'header')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div className="flex gap-4 items-center">
-                                      <span className="font-bold">{parameter.name}</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.required && 'required'}
-                                      </span>
-                                    </div>
-                                    <div className="mt-4 flex gap-4 items-center">
-                                      <span>Example:</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.example}
-                                      </span>
-                                    </div>
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-                  </RefSubLayout.Details>
-                  <RefSubLayout.Examples>
-                    {operation.responseList.length > 0 && (
-                      <>
-                        <h2 className="text-xl">Responses</h2>
-                        <Tabs
-                          scrollable
-                          size="small"
-                          type="underlined"
-                          defaultActiveId={
-                            operation.responseList[0].responseCode ??
-                            operation.responseList[0].responseCode
-                          }
-                          queryGroup="response-status"
-                        >
-                          {operation.responseList.map((response: any) => (
-                            <Tabs.Panel id={response.responseCode} label={response.responseCode}>
-                              <p>{response.description}</p>
-                              {response?.content && response?.content['application/json'] && (
-                                <div className="mt-8">
-                                  <CodeBlock language="bash" className="relative">
-                                    {JSON.stringify(response.content['application/json'], null, 2)}
-                                  </CodeBlock>
-                                </div>
-                              )}
-                            </Tabs.Panel>
-                          ))}
-                        </Tabs>
-                      </>
-                    )}
-                  </RefSubLayout.Examples>
-                </RefSubLayout.Section>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </RefSubLayout>
-  )
-}
diff --git a/apps/docs/pages/reference/analytics/config.tsx b/apps/docs/pages/reference/analytics/config.tsx
deleted file mode 100644
index 4db5c72958f..00000000000
--- a/apps/docs/pages/reference/analytics/config.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import fs from 'fs'
-import matter from 'gray-matter'
-import components from '~/components/index'
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-
-import specFile from '~/spec/analytics_v0_config.yaml' assert { type: 'yml' }
-import { Parameter } from '~/lib/refGenerator/refTypes'
-
-import ReactMarkdown from 'react-markdown'
-
-// Parameters are grouped on the page by tag
-const TAGS = ['general', 'database']
-
-export default function Config(props) {
-  return (
-    <div>
-      <div className="flex my-16">
-        <div className="w-full prose">
-          <h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
-          <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-          <div>
-            <div>
-              {props.docs
-                .filter((doc) => doc.introPage)
-                .map((item) => (
-                  <MDXRemote {...item.content} components={components} />
-                ))}
-            </div>
-            {TAGS.map((tag) =>
-              specFile.parameters
-                .filter((param: Parameter) => param.tags[0] === tag)
-                .map((parameter: Parameter, index) => (
-                  <div>
-                    {index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
-                    <div className="mt-8">
-                      <div>
-                        <h2 className="text-xl font-medium text-foreground font-mono">
-                          <span className="mr-2">$</span>
-                          {parameter.title}
-                        </h2>
-                        <div className="grid" id={parameter.id}>
-                          <div className="border-b pb-8" key={parameter.id}>
-                            <div className=" mb-16">
-                              <p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
-                                <ReactMarkdown>{parameter.description}</ReactMarkdown>
-                              </p>
-                              <div className="grid gap-2">
-                                <div className="flex gap-2">
-                                  Required: <code>{parameter.required.toString()}</code>
-                                </div>
-                                <div className="flex gap-2">
-                                  Default:
-                                  <code>
-                                    {parameter.default ? parameter.default.toString() : 'None'}
-                                  </code>
-                                </div>
-                              </div>
-                            </div>
-                            {parameter.links &&
-                              parameter.links.map((link) => (
-                                <div>
-                                  <h3>See also:</h3>
-                                  <li>
-                                    <a href={link.link}>{link.name}</a>
-                                  </li>
-                                </div>
-                              ))}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-export async function getServerSideProps() {
-  // an array of ids of the intro sections for this library
-  const introPages = ['analytics']
-
-  const pages = [...introPages]
-
-  // Grab custom markdown intro page files
-  const allMarkdownDocs = await Promise.all(
-    pages.map(async (x: any, i) => {
-      const pathName = `docs/ref/analytics/${x}.mdx`
-
-      const markdownExists = fs.existsSync(pathName)
-
-      const fileContents = markdownExists ? fs.readFileSync(pathName, 'utf8') : ''
-      const { data, content } = matter(fileContents)
-
-      return {
-        id: x,
-        title: x,
-        // ...content,
-        meta: data,
-        introPage: introPages.includes(x),
-        content: content ? await serialize(content || '') : null,
-      }
-    })
-  )
-
-  return {
-    props: {
-      docs: allMarkdownDocs,
-    },
-  }
-}
diff --git a/apps/docs/pages/reference/api/[...slug].tsx b/apps/docs/pages/reference/api/[...slug].tsx
index 27760ce04d8..d9c72242668 100644
--- a/apps/docs/pages/reference/api/[...slug].tsx
+++ b/apps/docs/pages/reference/api/[...slug].tsx
@@ -1,18 +1,28 @@
-import apiCommonSections from '~/spec/common-api-sections.json' assert { type: 'json' }
-import specFile from '~/spec/transforms/api_v0_openapi_deparsed.json' assert { type: 'json' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import apiCommonSections from '~/spec/common-api-sections.json' assert { type: 'json' }
+import specFile from '~/spec/transforms/api_v0_openapi_deparsed.json' assert { type: 'json' }
+
 // @ts-ignore
 const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
 const sections = flattenSections(apiCommonSections)
 const libraryPath = '/api'
 
 export default function Config(props) {
-  return <RefSectionHandler sections={sections} spec={generatedSpec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefApi}
+      sections={sections}
+      spec={generatedSpec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/auth/[...slug].tsx b/apps/docs/pages/reference/auth/[...slug].tsx
deleted file mode 100644
index 8664fe97acb..00000000000
--- a/apps/docs/pages/reference/auth/[...slug].tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { CodeBlock, Tabs } from 'ui'
-import specFile from '~/spec/transforms/auth_v1_openapi_deparsed.json' assert { type: 'json' }
-import { gen_v3 } from '~/lib/refGenerator/helpers'
-
-import RefSubLayout from '~/layouts/ref/RefSubLayout'
-
-export type AcceptedValue = {
-  id: string
-  name: string
-  type: 'string' | 'boolean' | 'object'
-  description?: string
-}
-
-export type Flag = {
-  id: string
-  name: string
-  description: string
-  default_value: string
-  accepted_values: AcceptedValue[]
-}
-
-export type ApiParameter = {
-  example: string
-  in: string
-  name: string
-  required: boolean
-  schema: {
-    type: string
-    example: string
-  }
-}
-// @ts-ignore
-const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
-
-export default function Config() {
-  return (
-    <RefSubLayout>
-      <div className="flex my-16">
-        <div className="w-full">
-          <div className="grid gap-16">
-            <h1 className="text-4xl uppercase">{generatedSpec.info.title}</h1>
-            <p>{generatedSpec.info.description}</p>
-          </div>
-
-          <div className="grid gap-32 mx-auto max-w-5xl mt-24">
-            {generatedSpec.operations.map((operation: any) => (
-              <div className="border-b pb-8">
-                <RefSubLayout.Section
-                  slug={operation.id}
-                  title={operation.summary}
-                  id={operation.operationId}
-                  monoFont={false}
-                >
-                  <RefSubLayout.Details>
-                    <div className="mt-4">
-                      <code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
-                        <span className="uppercase whitespace-nowrap	">{operation.operation}</span>
-                        {operation.fullPath}
-                      </code>
-                    </div>
-                    {/* Path Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'path').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Path parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'path')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div>
-                                      <div className="flex gap-4 items-center">
-                                        <span className="font-bold">{parameter.name}</span>
-                                        <div className="font-mono text-xs break-all">
-                                          {parameter.required && (
-                                            <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
-                                              REQUIRED
-                                            </div>
-                                          )}
-                                        </div>
-                                      </div>
-                                      <p className="mt-4">{parameter.description}</p>
-                                    </div>
-                                    {parameter.example && (
-                                      <div className="mt-4 flex gap-4 items-center">
-                                        <span>Example:</span>
-                                        <span className="font-mono text-xs break-all">
-                                          {parameter.example}
-                                        </span>
-                                      </div>
-                                    )}
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-
-                    {/* Header Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'header').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Header parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'header')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div className="flex gap-4 items-center">
-                                      <span className="font-bold">{parameter.name}</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.required && 'required'}
-                                      </span>
-                                    </div>
-                                    <div className="mt-4 flex gap-4 items-center">
-                                      <span>Example:</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.example}
-                                      </span>
-                                    </div>
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-                  </RefSubLayout.Details>
-                  <RefSubLayout.Examples>
-                    {operation.responseList.length > 0 && (
-                      <>
-                        <h2 className="text-xl">Responses</h2>
-                        <Tabs
-                          scrollable
-                          size="small"
-                          type="underlined"
-                          defaultActiveId={
-                            operation.responseList[0].responseCode ??
-                            operation.responseList[0].responseCode
-                          }
-                          queryGroup="response-status"
-                        >
-                          {operation.responseList.map((response: any) => (
-                            <Tabs.Panel id={response.responseCode} label={response.responseCode}>
-                              <p>{response.description}</p>
-                              {response?.content && response?.content['application/json'] && (
-                                <div className="mt-8">
-                                  <CodeBlock language="bash" className="relative">
-                                    {JSON.stringify(response.content['application/json'], null, 2)}
-                                  </CodeBlock>
-                                </div>
-                              )}
-                            </Tabs.Panel>
-                          ))}
-                        </Tabs>
-                      </>
-                    )}
-                  </RefSubLayout.Examples>
-                </RefSubLayout.Section>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </RefSubLayout>
-  )
-}
diff --git a/apps/docs/pages/reference/auth/config.tsx b/apps/docs/pages/reference/auth/config.tsx
deleted file mode 100644
index d9c1e5eacbf..00000000000
--- a/apps/docs/pages/reference/auth/config.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import specFile from '~/spec/gotrue_v1_config.yaml' assert { type: 'yml' }
-import { Parameter } from '~/lib/refGenerator/refTypes'
-import ReactMarkdown from 'react-markdown'
-import Head from 'next/head'
-
-// Parameters are grouped on the page by tag
-const TAGS = ['general']
-
-export default function Config() {
-  return (
-    <>
-      <Head>
-        <title>Auth config</title>
-      </Head>
-      <div>
-        <div className="flex my-16">
-          <div className="w-full prose">
-            <h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
-            <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-            <div>
-              {TAGS.map((tag) =>
-                specFile.parameters
-                  .filter((param: Parameter) => param.tags[0] === tag)
-                  .map((parameter: Parameter, index) => (
-                    <div>
-                      {index === 0 && <h2 className="text-xl capitalize">{tag}</h2>}
-                      <div className="mt-8">
-                        <div>
-                          <h2 className="text-xl font-medium text-foreground font-mono">
-                            <span className="mr-2">$</span>
-                            {parameter.title}
-                          </h2>
-                          <div className="grid" id={parameter.id}>
-                            <div className="border-b pb-8" key={parameter.id}>
-                              <div className=" mb-16">
-                                <p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
-                                  <ReactMarkdown>{parameter.description}</ReactMarkdown>
-                                </p>
-                                <div className="grid gap-2">
-                                  <div className="flex gap-2">
-                                    Required: <code>{parameter.required.toString()}</code>
-                                  </div>
-                                  <div className="flex gap-2">
-                                    Default:
-                                    <code>
-                                      {parameter.default ? parameter.default.toString() : 'None'}
-                                    </code>
-                                  </div>
-                                </div>
-                              </div>
-                              {parameter.links &&
-                                parameter.links.map((link) => (
-                                  <div>
-                                    <h3>See also:</h3>
-                                    <li>
-                                      <a href={link.link}>{link.name}</a>
-                                    </li>
-                                  </div>
-                                ))}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/apps/docs/pages/reference/cli/[...slug].tsx b/apps/docs/pages/reference/cli/[...slug].tsx
index 75b9088f7fa..779e04540b6 100644
--- a/apps/docs/pages/reference/cli/[...slug].tsx
+++ b/apps/docs/pages/reference/cli/[...slug].tsx
@@ -1,17 +1,25 @@
-import spec from '~/spec/cli_v1_commands.yaml' assert { type: 'yml' }
-
-import { flattenSections } from '~/lib/helpers'
-
-import cliCommonSections from '~/spec/common-cli-sections.json' assert { type: 'json' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
+import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import spec from '~/spec/cli_v1_commands.yaml' assert { type: 'yml' }
+import cliCommonSections from '~/spec/common-cli-sections.json' assert { type: 'json' }
+
 const sections = flattenSections(cliCommonSections)
 const libraryPath = '/cli'
 
 export default function CliRef(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="cli" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefCli}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="cli"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/csharp/[...slug].tsx b/apps/docs/pages/reference/csharp/[...slug].tsx
index 8145e38f7c9..77dba701704 100644
--- a/apps/docs/pages/reference/csharp/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/[...slug].tsx
@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp'
 
 export default function CSharpReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefCSharpV0}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx b/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx
index 0d515778deb..aa454e5d162 100644
--- a/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp'
@@ -25,6 +26,7 @@ export default function CSharpReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefCSharpV0}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/csharp/v0/[...slug].tsx b/apps/docs/pages/reference/csharp/v0/[...slug].tsx
index f87b51d1434..e0b20e5d3ba 100644
--- a/apps/docs/pages/reference/csharp/v0/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/v0/[...slug].tsx
@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp/v0'
 
 export default function CSharpReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefCSharpV0}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx
index 5e20575d173..101c289bddb 100644
--- a/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp/v0'
@@ -24,6 +25,7 @@ export default function JSReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefCSharpV0}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/dart/[...slug].tsx b/apps/docs/pages/reference/dart/[...slug].tsx
index fb81a2f88b1..eb5db854400 100644
--- a/apps/docs/pages/reference/dart/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/[...slug].tsx
@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart'
 
 export default function DartReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefDartV2}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
index faace96a0ba..b18c2eeff9b 100644
--- a/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart'
@@ -25,6 +26,7 @@ export default function DartReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefDartV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/dart/v1/[...slug].tsx b/apps/docs/pages/reference/dart/v1/[...slug].tsx
index b9dd386dcc3..da3f324a480 100644
--- a/apps/docs/pages/reference/dart/v1/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/v1/[...slug].tsx
@@ -4,6 +4,7 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart/v0'
@@ -11,6 +12,7 @@ const libraryPath = '/dart/v0'
 export default function JSReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefDartV1}
       sections={sections}
       spec={spec}
       pageProps={props}
diff --git a/apps/docs/pages/reference/dart/v1/crawlers/[...slug].tsx b/apps/docs/pages/reference/dart/v1/crawlers/[...slug].tsx
index 3fe8650ed1d..1843e626e5f 100644
--- a/apps/docs/pages/reference/dart/v1/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/dart/v1/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart/v0'
@@ -24,6 +25,7 @@ export default function DartReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefDartV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/javascript/[...slug].tsx b/apps/docs/pages/reference/javascript/[...slug].tsx
index 5acd8c9f1a0..4344909efbf 100644
--- a/apps/docs/pages/reference/javascript/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/[...slug].tsx
@@ -1,17 +1,20 @@
-import clientLibsCommonSections from '~/spec/common-client-libs-sections.json'
-import typeSpec from '~/spec/enrichments/tsdoc_v2/combined.json'
-import spec from '~/spec/supabase_js_v2.yml' assert { type: 'yml' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import clientLibsCommonSections from '~/spec/common-client-libs-sections.json' assert { type: 'json' }
+import typeSpec from '~/spec/enrichments/tsdoc_v2/combined.json' assert { type: 'json' }
+import spec from '~/spec/supabase_js_v2.yml' assert { type: 'yml' }
+
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript'
 
 export default function JSReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefJavaScriptV2}
       sections={sections}
       spec={spec}
       typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
index 9db26e615ed..a307a3eac07 100644
--- a/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript'
@@ -25,6 +26,7 @@ export default function JSReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefJavaScriptV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/javascript/v1/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/[...slug].tsx
index 60645f8547f..1014cb86404 100644
--- a/apps/docs/pages/reference/javascript/v1/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/v1/[...slug].tsx
@@ -1,17 +1,20 @@
-import clientLibsCommonSections from '~/spec/common-client-libs-sections.json'
-import typeSpec from '~/spec/enrichments/tsdoc_v1/combined.json'
-import spec from '~/spec/supabase_js_v1.yml' assert { type: 'yml' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import clientLibsCommonSections from '~/spec/common-client-libs-sections.json' assert { type: 'json' }
+import typeSpec from '~/spec/enrichments/tsdoc_v1/combined.json' assert { type: 'json' }
+import spec from '~/spec/supabase_js_v1.yml' assert { type: 'yml' }
+
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript/v1'
 
 export default function JSReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefJavaScriptV1}
       sections={sections}
       spec={spec}
       typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
index 098989bcab0..09cd60e404c 100644
--- a/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript/v1'
@@ -25,6 +26,7 @@ export default function JSReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefJavaScriptV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/kotlin/[...slug].tsx b/apps/docs/pages/reference/kotlin/[...slug].tsx
index 9dae7726966..b691889c161 100644
--- a/apps/docs/pages/reference/kotlin/[...slug].tsx
+++ b/apps/docs/pages/reference/kotlin/[...slug].tsx
@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin'
 
 export default function KotlinReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefKotlinV2}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/kotlin/crawlers/[...slug].tsx b/apps/docs/pages/reference/kotlin/crawlers/[...slug].tsx
index 2a0d1cadc29..2f3885d524b 100644
--- a/apps/docs/pages/reference/kotlin/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/kotlin/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin'
@@ -25,6 +26,7 @@ export default function KotlinReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefKotlinV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/kotlin/v1/[...slug].tsx b/apps/docs/pages/reference/kotlin/v1/[...slug].tsx
index 97b6e3226de..0c50e646bf4 100644
--- a/apps/docs/pages/reference/kotlin/v1/[...slug].tsx
+++ b/apps/docs/pages/reference/kotlin/v1/[...slug].tsx
@@ -4,6 +4,7 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin/v1'
@@ -11,6 +12,7 @@ const libraryPath = '/kotlin/v1'
 export default function KotlinReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefKotlinV1}
       sections={sections}
       spec={spec}
       pageProps={props}
diff --git a/apps/docs/pages/reference/kotlin/v1/crawlers/[...slug].tsx b/apps/docs/pages/reference/kotlin/v1/crawlers/[...slug].tsx
index a19c1c25bd3..7a5ada7a194 100644
--- a/apps/docs/pages/reference/kotlin/v1/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/kotlin/v1/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin/v1'
@@ -24,6 +25,7 @@ export default function KotlinReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefKotlinV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/python/[...slug].tsx b/apps/docs/pages/reference/python/[...slug].tsx
index dbf7f9cdce1..6cb06b74b6c 100644
--- a/apps/docs/pages/reference/python/[...slug].tsx
+++ b/apps/docs/pages/reference/python/[...slug].tsx
@@ -5,6 +5,7 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/python'
@@ -12,6 +13,7 @@ const libraryPath = '/python'
 export default function PyReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefPythonV2}
       sections={sections}
       spec={spec}
       typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/python/crawlers/[...slug].tsx b/apps/docs/pages/reference/python/crawlers/[...slug].tsx
index 683770ccea3..bb549d62305 100644
--- a/apps/docs/pages/reference/python/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/python/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/python'
@@ -25,6 +26,7 @@ export default function PyReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefPythonV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx b/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx
index eb02ccc77ce..54dedb13bca 100644
--- a/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx
@@ -1,11 +1,13 @@
-import analyticsSpec from '~/spec/transforms/analytics_v0_openapi_deparsed.json' assert { type: 'json' }
-import selfHostingAnalyticsCommonSections from '~/spec/common-self-hosting-analytics-sections.json'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import selfHostingAnalyticsCommonSections from '~/spec/common-self-hosting-analytics-sections.json' assert { type: 'json' }
+import analyticsSpec from '~/spec/transforms/analytics_v0_openapi_deparsed.json' assert { type: 'json' }
+
 const sections = flattenSections(selfHostingAnalyticsCommonSections)
 const libraryPath = '/self-hosting-analytics'
 
@@ -13,7 +15,15 @@ const libraryPath = '/self-hosting-analytics'
 const spec = gen_v3(analyticsSpec, 'wat', { apiUrl: 'apiv0' })
 
 export default function SelfHostAnalyticsReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingAnalytics}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx b/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx
index 723d11e079b..fbd09b75644 100644
--- a/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-auth/[...slug].tsx
@@ -1,11 +1,13 @@
-import authSpec from '~/spec/auth_v1_openapi.json' assert { type: 'json' }
-import selfHostingAuthCommonSections from '~/spec/common-self-hosting-auth-sections.json'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import authSpec from '~/spec/auth_v1_openapi.json' assert { type: 'json' }
+import selfHostingAuthCommonSections from '~/spec/common-self-hosting-auth-sections.json'
+
 const sections = flattenSections(selfHostingAuthCommonSections)
 const libraryPath = '/self-hosting-auth'
 
@@ -13,7 +15,15 @@ const libraryPath = '/self-hosting-auth'
 const spec = gen_v3(authSpec, 'wat', { apiUrl: 'apiv0' })
 
 export default function SelfHostAuthReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingAuth}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx b/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx
index bbd3f335313..432e1a6cec0 100644
--- a/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-functions/[...slug].tsx
@@ -1,16 +1,23 @@
-import selfHostingFunctionsCommonSections from '~/spec/common-self-hosting-functions-sections.json'
-
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
-import { gen_v3 } from '~/lib/refGenerator/helpers'
+
+import selfHostingFunctionsCommonSections from '~/spec/common-self-hosting-functions-sections.json' assert { type: 'json' }
 
 const sections = flattenSections(selfHostingFunctionsCommonSections)
 const libraryPath = '/self-hosting-functions'
 
 export default function SelfHostFunctionsReference(props) {
-  return <RefSectionHandler sections={sections} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingFunctions}
+      sections={sections}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx b/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
index 59c9276e5b7..3b894c15f8b 100644
--- a/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx
@@ -1,15 +1,23 @@
-import selfHostingRealtimeCommonSections from '~/spec/common-self-hosting-realtime-sections.json'
-
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import selfHostingRealtimeCommonSections from '~/spec/common-self-hosting-realtime-sections.json' assert { type: 'json' }
+
 const sections = flattenSections(selfHostingRealtimeCommonSections)
 const libraryPath = '/self-hosting-realtime'
 
 export default function SelfHostRealtimeReference(props) {
-  return <RefSectionHandler sections={sections} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingRealtime}
+      sections={sections}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx b/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx
index 1468b40f3a9..13559bdc7dc 100644
--- a/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx
+++ b/apps/docs/pages/reference/self-hosting-storage/[...slug].tsx
@@ -1,11 +1,13 @@
-import storageSpec from '~/spec/storage_v0_openapi.json' assert { type: 'json' }
-import selfHostingStorageCommonSections from '~/spec/common-self-hosting-storage-sections.json'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import storageSpec from '~/spec/storage_v0_openapi.json' assert { type: 'json' }
+import selfHostingStorageCommonSections from '~/spec/common-self-hosting-storage-sections.json' assert { type: 'json' }
+
 const sections = flattenSections(selfHostingStorageCommonSections)
 const libraryPath = '/self-hosting-storage'
 
@@ -13,7 +15,15 @@ const libraryPath = '/self-hosting-storage'
 const spec = gen_v3(storageSpec, 'wat', { apiUrl: 'apiv0' })
 
 export default function SelfHostStorageReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingStorage}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/swift/[...slug].tsx b/apps/docs/pages/reference/swift/[...slug].tsx
index 6c84806c676..c459f833e11 100644
--- a/apps/docs/pages/reference/swift/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/[...slug].tsx
@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift'
 
 export default function SwiftReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefSwiftV2}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/swift/crawlers/[...slug].tsx b/apps/docs/pages/reference/swift/crawlers/[...slug].tsx
index d8e3be4f79c..69000ea9674 100644
--- a/apps/docs/pages/reference/swift/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift'
@@ -25,6 +26,7 @@ export default function SwiftReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefSwiftV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}
diff --git a/apps/docs/pages/reference/swift/v0/[...slug].tsx b/apps/docs/pages/reference/swift/v1/[...slug].tsx
similarity index 74%
rename from apps/docs/pages/reference/swift/v0/[...slug].tsx
rename to apps/docs/pages/reference/swift/v1/[...slug].tsx
index 9b27264e2b7..25388a6b537 100644
--- a/apps/docs/pages/reference/swift/v0/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/v1/[...slug].tsx
@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift/v2'
 
 export default function SwiftReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefSwiftV1}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {
diff --git a/apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx b/apps/docs/pages/reference/swift/v1/crawlers/[...slug].tsx
similarity index 92%
rename from apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx
rename to apps/docs/pages/reference/swift/v1/crawlers/[...slug].tsx
index 6c19debf234..1ef50177ac2 100644
--- a/apps/docs/pages/reference/swift/v0/crawlers/[...slug].tsx
+++ b/apps/docs/pages/reference/swift/v1/crawlers/[...slug].tsx
@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift/v2'
@@ -24,6 +25,7 @@ export default function SwiftReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefSwiftV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}