diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index 98f53979697..6354f51041a 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -169,8 +169,13 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
           {sections.map((fn: any) => {
             //
             // check if the link is allowed to be displayed
-            function isFuncNotInLibraryOrVersion(id) {
-              if (id && allowedClientKeys && !allowedClientKeys.includes(id)) {
+            function isFuncNotInLibraryOrVersion(id, type) {
+              if (
+                id &&
+                allowedClientKeys &&
+                !allowedClientKeys.includes(id) &&
+                type !== 'markdown'
+              ) {
                 /*
                  * Remove this menu link from side bar, as it does not exist for either
                  * this language, or for this lib version
@@ -183,7 +188,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
             }
 
             // run allow check
-            if (isFuncNotInLibraryOrVersion(fn.id)) {
+            if (isFuncNotInLibraryOrVersion(fn.id, fn.type)) {
               return <></>
             }
 
@@ -256,7 +261,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
                       //.filter((item) => item.libs && item.libs.includes(lib))
                       .map((item) => {
                         // run allow check
-                        if (isFuncNotInLibraryOrVersion(item.id)) return <></>
+                        if (isFuncNotInLibraryOrVersion(item.id, item.type)) return <></>
                         return <RenderLink {...item} library={menu.title} />
                       })}
                 </>
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index 7c7b63375e1..c1eb40bd281 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -22,6 +22,7 @@ import InlineCodeTag from './CustomHTMLElements/InlineCode'
 import React from 'react'
 import RefSubLayout from '~/layouts/ref/RefSubLayout'
 import { CH } from '@code-hike/mdx/components'
+import RefHeaderSection from './reference/RefHeaderSection'
 
 const components = {
   Admonition,
@@ -62,6 +63,7 @@ const components = {
   RefSubLayout,
   CH,
   code: (props: any) => <CodeBlock {...props} />,
+  RefHeaderSection: (props: any) => <RefHeaderSection {...props} />,
 }
 
 export default components
diff --git a/apps/docs/components/reference/RefEducationSection.tsx b/apps/docs/components/reference/RefEducationSection.tsx
index ca60e88ada5..a388c11425c 100644
--- a/apps/docs/components/reference/RefEducationSection.tsx
+++ b/apps/docs/components/reference/RefEducationSection.tsx
@@ -17,6 +17,7 @@ const RefEducationSection = (props) => {
       id={props.item.id}
       slug={props.item.id}
       scrollSpyHeader={true}
+      icon={props.markdownContent.meta.icon}
     >
       <MDXRemote {...props.markdownContent.content} components={components} />
     </RefSubLayout.EducationSection>
diff --git a/apps/docs/components/reference/RefHeaderSection.tsx b/apps/docs/components/reference/RefHeaderSection.tsx
new file mode 100644
index 00000000000..0d84d792b20
--- /dev/null
+++ b/apps/docs/components/reference/RefHeaderSection.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import RefSubLayout from '~/layouts/ref/RefSubLayout'
+
+interface Props {}
+
+const RefHeaderSection: React.FC<Props> = (props) => {
+  return (
+    <>
+      <RefSubLayout.EducationRow>
+        <RefSubLayout.Details>{props.children}</RefSubLayout.Details>
+      </RefSubLayout.EducationRow>
+    </>
+  )
+}
+
+export default RefHeaderSection
diff --git a/apps/docs/docs/ref/javascript/auth.mdx b/apps/docs/docs/ref/javascript/auth.mdx
new file mode 100644
index 00000000000..387db9bdfa8
--- /dev/null
+++ b/apps/docs/docs/ref/javascript/auth.mdx
@@ -0,0 +1,12 @@
+---
+id: auth
+title: 'Auth'
+slug: auth
+icon: /docs/img/icons/menu/auth
+---
+
+<RefHeaderSection>
+
+    Every Supabase project comes with a full Postgres database, a free and open source database which is considered one of the world's most stable and advanced databases.
+
+</RefHeaderSection>
diff --git a/apps/docs/docs/ref/javascript/database.mdx b/apps/docs/docs/ref/javascript/database.mdx
index d1f62d0b6b0..900107af0b4 100644
--- a/apps/docs/docs/ref/javascript/database.mdx
+++ b/apps/docs/docs/ref/javascript/database.mdx
@@ -2,21 +2,11 @@
 id: database
 title: 'Database'
 slug: database
-hideTitle: true
+icon: /docs/img/icons/menu/database
 ---
 
-<div className="flex items-center gap-3 not-prose">
-  <div className="w-8 h-8 bg-brand-500 rounded flex items-center justify-center">
-    <img className="w-6 h-6" src="/docs/img/icons/menu/database.svg" />
-  </div>
-  <h2>Database</h2>
-</div>
+<RefHeaderSection>
 
-<RefSubLayout.EducationRow>
-  <RefSubLayout.Details>
-    <p className="text-lg">
-      Every Supabase project comes with a full Postgres database, a free and open source database
-      which is considered one of the world's most stable and advanced databases.
-    </p>
-  </RefSubLayout.Details>
-</RefSubLayout.EducationRow>
+    Every Supabase project comes with a full Postgres database, a free and open source database which is considered one of the world's most stable and advanced databases.
+
+</RefHeaderSection>
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index c47b649f70a..4caeec9ada2 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -12,6 +12,7 @@ interface ISectionContainer {
   slug: string
   scrollSpyHeader?: boolean
   singleColumn?: boolean
+  icon?: string
 }
 
 type RefSubLayoutSubComponents = {
@@ -28,6 +29,7 @@ type StickyHeader = {
   title?: string
   monoFont?: boolean
   scrollSpyHeader?: boolean // whether or not the header updates the url on scroll
+  icon?: string
 }
 
 type RefSubLayoutType = {}
@@ -40,6 +42,7 @@ interface IEducationSection {
   slug: string
   scrollSpyHeader?: boolean
   hideTitle?: boolean
+  icon?: string
 }
 interface ISectionDetails {}
 interface ISectionExamples {}
@@ -70,7 +73,7 @@ const Section: FC<ISectionContainer> = (props) => {
   )
 }
 
-const StickyHeader: FC<StickyHeader> = (props) => {
+const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
   const router = useRouter()
   const { setActiveRefItem } = useNavigationMenuContext()
 
@@ -91,17 +94,25 @@ const StickyHeader: FC<StickyHeader> = (props) => {
   })
 
   return (
-    <h2
-      ref={ref}
-      id={props.slug}
-      data-ref-id={props.id}
-      className={[
-        'text-2xl font-medium text-scale-1200 mb-8 scroll-mt-24',
-        props.monoFont && 'font-mono',
-      ].join(' ')}
-    >
-      {props.title && <span className="max-w-xl">{props.title}</span>}
-    </h2>
+    <div className={['flex items-center gap-3 not-prose', icon && 'mb-8'].join(' ')}>
+      {icon && (
+        <div className="w-8 h-8 bg-brand-500 rounded flex items-center justify-center">
+          <img className="w-6 h-6" src={`${icon}.svg`} />
+        </div>
+      )}
+      <h2
+        ref={ref}
+        id={props.slug}
+        data-ref-id={props.id}
+        className={[
+          'text-2xl font-medium text-scale-1200 scroll-mt-24',
+          !icon && 'mb-8',
+          props.monoFont && 'font-mono',
+        ].join(' ')}
+      >
+        {props.title && <span className="max-w-xl">{props.title}</span>}
+      </h2>
+    </div>
   )
 }
 
@@ -121,14 +132,14 @@ const EducationRow: FC<IEducationRow> = (props) => {
   return <div className="grid lg:grid-cols-2 gap-8 lg:gap-16">{props.children}</div>
 }
 
-const EducationSection: FC<IEducationSection> = ({ hideTitle = false, ...props }) => {
+const EducationSection: FC<IEducationSection> = ({ icon, hideTitle = false, ...props }) => {
   // console.log({ props })
   return (
     <article
       key={props.id}
       className={'prose dark:prose-dark max-w-none py-16 lg:py-32 first:pt-8 last:pb-8'}
     >
-      {!hideTitle && <StickyHeader {...props} />}
+      {!hideTitle && <StickyHeader {...props} icon={icon} />}
       {props.children}
     </article>
   )
diff --git a/apps/docs/lib/mdx/handleRefStaticProps.tsx b/apps/docs/lib/mdx/handleRefStaticProps.tsx
index 8bf2d89c4f1..c9c47b4496d 100644
--- a/apps/docs/lib/mdx/handleRefStaticProps.tsx
+++ b/apps/docs/lib/mdx/handleRefStaticProps.tsx
@@ -4,8 +4,6 @@ import generateRefMarkdown from '~/lib/mdx/generateRefMarkdown'
 async function handleRefStaticProps(sections, params, librarypath, urlPath) {
   let markdownContent = await generateRefMarkdown(sections, librarypath)
 
-  console.log(markdownContent)
-
   /*
    * old content generation
    * this is for grabbing to old markdown files
diff --git a/apps/docs/pages/new/index.mdx b/apps/docs/pages/new/index.mdx
index 7234670cdb7..23c42e15d6d 100644
--- a/apps/docs/pages/new/index.mdx
+++ b/apps/docs/pages/new/index.mdx
@@ -115,7 +115,7 @@ export const meta = {
 <div>
   <div className="max-w-xl">
 
-### Supabase Product Documentation
+    ### Product Documentation
 
   </div>
 
@@ -144,7 +144,7 @@ export const meta = {
           key={product.title}
           passHref
         >
-          <a className={'col-span-12 md:col-span-6'}>
+          <a className={'col-span-12 md:col-span-4'}>
             <GlassPanel {...product} background={false} showIconBg={true}>
               {product.description}
             </GlassPanel>
@@ -162,7 +162,7 @@ export const meta = {
 
   <div className="max-w-xl">
 
-    ### Supabase APIs
+    ### Reference Documentation
 
   </div>
 
@@ -241,28 +241,28 @@ export const apis = [
     title: 'JavaScript Client Library',
     icon: '/docs/img/icons/javascript-icon',
     hasLightIcon: true,
-    href: 'reference/javascript',
+    href: 'reference/javascript/introduction',
     description: 'Official client libraries for JavaScript and TypeScript.',
   },
   {
     title: 'Flutter Client Library',
     icon: '/docs/img/icons/flutter-icon',
     hasLightIcon: true,
-    href: 'reference/dart',
+    href: 'reference/dart/introduction',
     description: 'Official client libraries for Flutter and Dart.',
   },
   {
     title: 'Management API',
     icon: '/docs/img/icons/api-icon',
     hasLightIcon: true,
-    href: 'reference/api',
+    href: 'reference/api/introduction',
     description: 'Manage your Supabase projects and organizations programmatically.',
   },
   {
     title: 'Supabase CLI',
     icon: '/docs/img/icons/cli-icon',
     hasLightIcon: true,
-    href: 'reference/cli',
+    href: 'reference/cli/introduction',
     description:
       'Use the Supabase CLI to develop your project locally, manage database migrations, and deploy to the Supabase Platform or self-host.',
   },
@@ -270,15 +270,29 @@ export const apis = [
     title: 'Serverless APIs',
     icon: '/docs/img/icons/menu/reference',
     hasLightIcon: true,
-    href: 'guides/api',
+    href: 'guides/api/introduction',
     description:
       'Instantly generate REST, GraphQL, and Realtime APIs directly from your database schema.',
   },
   {
-    title: 'Self-Hosting Server',
-    icon: '/docs/img/icons/menu/platform',
+    title: 'Self-Hosting Auth',
+    icon: '/docs/img/icons/menu/reference-auth',
     hasLightIcon: true,
-    href: 'reference/auth',
+    href: 'reference/self-hosting-auth/introduction',
+    description: 'Self-host your own Auth, Realtime, and Storage servers.',
+  },
+  {
+    title: 'Self-Hosting Storage',
+    icon: '/docs/img/icons/menu/reference-storage',
+    hasLightIcon: true,
+    href: 'reference/self-hosting-storage/introduction',
+    description: 'Self-host your own Auth, Realtime, and Storage servers.',
+  },
+  {
+    title: 'Self-Hosting Realtime',
+    icon: '/docs/img/icons/menu/reference-realtime',
+    hasLightIcon: true,
+    href: 'reference/self-hosting-realtime/introduction',
     description: 'Self-host your own Auth, Realtime, and Storage servers.',
   },
 ]
@@ -292,7 +306,14 @@ export const platform = [
     href: 'guides/hosting/platform',
     description:
       'Learn more about the tools and services powering the Supabase Platform, available add-ons, and how to customize the platform for your needs.',
-    span: 'col-span-12 lg:col-span-6',
+  },
+  {
+    header: '/docs/img/cards/sample-card-header-2.svg',
+    title: 'Resources',
+    icon: '/docs/img/icons/menu/integrations',
+    hasLightIcon: true,
+    href: 'guides/integrations',
+    description: 'Explore a variety of integrations from Supabase partners.',
   },
   {
     header: '/docs/img/cards/sample-card-header-2.svg',
@@ -301,7 +322,6 @@ export const platform = [
     hasLightIcon: true,
     href: 'guides/integrations',
     description: 'Explore a variety of integrations from Supabase partners.',
-    span: 'col-span-12 lg:col-span-6',
   },
 ]
 
diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json
index 5ab8da30139..c06007dcb02 100644
--- a/spec/common-client-libs-sections.json
+++ b/spec/common-client-libs-sections.json
@@ -27,10 +27,9 @@
       {
         "id": "database",
         "title": "Database",
-        "slug": "overview",
+        "slug": "database",
         "product": "database",
-        "type": "markdown",
-        "libs": ["js", "js_v1", "dart", "dart_v0"]
+        "type": "markdown"
       },
       {
         "id": "select",
@@ -396,6 +395,12 @@
     "title": "Auth",
     "libs": ["js", "js_v1", "dart", "dart_v0"],
     "items": [
+      {
+        "id": "auth",
+        "title": "Auth",
+        "slug": "auth",
+        "type": "markdown"
+      },
       {
         "id": "sign-up",
         "title": "Create a new user",
@@ -666,6 +671,12 @@
     "title": "Functions",
     "libs": ["js", "js_v1", "dart", "dart_v0"],
     "items": [
+      {
+        "id": "functions",
+        "title": "Edge Functions",
+        "slug": "functions",
+        "type": "markdown"
+      },
       {
         "id": "invoke",
         "title": "Invoke a function",
@@ -680,6 +691,12 @@
     "title": "Realtime",
     "libs": ["js", "js_v1", "dart", "dart_v0"],
     "items": [
+      {
+        "id": "realtime",
+        "title": "Realtime",
+        "slug": "realtime",
+        "type": "markdown"
+      },
       {
         "id": "stream",
         "title": "Listen to database changes",