diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index fb5726b13a6..66fd042e2d5 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -701,61 +701,61 @@ export const reference = {
 }
 
 export const reference_javascript_v1 = {
-  icon: '/img/icons/menu/reference-javascript.svg',
+  icon: 'reference-javascript',
   title: 'javascript',
   url: '/guides/reference/javascript',
   parent: '/reference',
 }
 
 export const reference_javascript_v2 = {
-  icon: '/img/icons/menu/reference-javascript.svg',
+  icon: 'reference-javascript',
   title: 'javascript',
   url: '/guides/reference/javascript',
   parent: '/reference',
 }
 
 export const reference_dart_v0 = {
-  icon: '/img/icons/menu/reference-dart.svg',
+  icon: 'reference-dart',
   title: 'dart',
   url: '/guides/reference/dart',
   parent: '/reference',
 }
 export const reference_dart_v1 = {
-  icon: '/img/icons/menu/reference-dart.svg',
+  icon: 'reference-dart',
   title: 'dart',
   url: '/guides/reference/dart',
   parent: '/reference',
 }
 
 export const reference_cli = {
-  icon: '/img/icons/menu/reference-cli.svg',
+  icon: 'reference-cli',
   title: 'Supabase CLI',
   url: '/guides/reference/cli',
   parent: '/',
 }
 export const reference_api = {
-  icon: '/img/icons/menu/reference-api.svg',
+  icon: 'reference-api',
   title: 'Management API',
   url: '/guides/reference/api',
   parent: '/reference',
 }
 
 export const reference_self_hosting_auth = {
-  icon: '/img/icons/menu/reference-auth.svg',
+  icon: 'reference-auth',
   title: 'Self Hosting Auth',
   url: '/guides/reference/self-hosting/auth',
   parent: '/reference',
 }
 
 export const reference_self_hosting_storage = {
-  icon: '/img/icons/menu/reference-storage.svg',
+  icon: 'reference-storage',
   title: 'Self Hosting Storage',
   url: '/guides/reference/self-hosting/auth',
   parent: '/reference',
 }
 
 export const reference_self_hosting_realtime = {
-  icon: '/img/icons/menu/reference-auth.svg',
+  icon: 'reference-auth',
   title: 'Self Hosting Realtime',
   url: '/guides/reference/self-hosting/auth',
   parent: '/reference',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 83cbefda303..49961756f32 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -242,7 +242,7 @@ const SideNav = () => {
       {
         label: 'JavaScript',
         icon: '/img/icons/menu/reference-javascript',
-        hasLightIcon: false,
+        hasLightIcon: true,
         href: '/reference/javascript/introduction',
         level: 'reference_javascript',
       },
@@ -256,7 +256,7 @@ const SideNav = () => {
       {
         label: 'Flutter',
         icon: '/img/icons/menu/reference-dart',
-        hasLightIcon: false,
+        hasLightIcon: true,
         href: '/reference/dart/introduction',
         level: 'reference_dart',
       },
@@ -266,14 +266,14 @@ const SideNav = () => {
       {
         label: 'Management API',
         icon: '/img/icons/menu/reference-api',
-        hasLightIcon: false,
+        hasLightIcon: true,
         href: '/reference/api/introduction',
         level: 'reference_javascript',
       },
       {
         label: 'Supabase CLI',
         icon: '/img/icons/menu/reference-cli',
-        hasLightIcon: false,
+        hasLightIcon: true,
         href: '/reference/cli/introduction',
         level: 'reference_javascript',
       },
@@ -283,17 +283,20 @@ const SideNav = () => {
       {
         label: 'Self-Hosting Auth',
         icon: '/img/icons/menu/reference-auth',
+        hasLightIcon: true,
         href: '/reference/self-hosting-auth/introduction',
         level: 'reference_self_hosting_auth',
       },
       {
         label: 'Self-Hosting Storage',
+        hasLightIcon: true,
         icon: '/img/icons/menu/reference-storage',
         href: '/reference/self-hosting-storage/introduction',
         level: 'reference_self_hosting_auth',
       },
       {
         label: 'Self-Hosting Realtime',
+        hasLightIcon: true,
         icon: '/img/icons/menu/reference-realtime',
         href: '/reference/self-hosting-realtime/introduction',
         level: 'reference_self_hosting_auth',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index 310ad01b058..fb71df4ddbd 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -6,7 +6,7 @@ import * as NavItems from './NavigationMenu.constants'
 
 import { find } from 'lodash'
 import Image from 'next/image'
-import { memo } from 'react'
+import { useTheme } from 'common/Providers'
 
 // import apiCommonSections from '~/../../spec/common-client-libs-sections.json'
 
@@ -82,6 +82,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
   allowedClientKeys,
 }) => {
   const router = useRouter()
+  const { isDarkMode } = useTheme()
 
   let sections = commonSections
 
@@ -171,7 +172,7 @@ const NavigationMenuRefList: React.FC<INavigationMenuRefList> = ({
             alt={id}
             width={24}
             height={24}
-            src={`${router.basePath}` + menu.icon ?? `/img/icons/menu/${id}.svg`}
+            src={`${router.basePath}/img/icons/menu/${menu.icon}${isDarkMode ? '' : '-light'}.svg`}
             className="rounded"
           />
           <span className={['text-base text-brand-1200 ', !menu.title && 'capitalize'].join(' ')}>
diff --git a/apps/docs/pages/new/index.mdx b/apps/docs/pages/new/index.mdx
index 03212d462c8..7d54a559319 100644
--- a/apps/docs/pages/new/index.mdx
+++ b/apps/docs/pages/new/index.mdx
@@ -20,7 +20,7 @@ export const meta = {
 <div className="flex flex-col gap-12 my-12">
 
 <div className="space-y-8">
-  
+
   <div className="
     border border-scale-400
     relative overflow-hidden
@@ -32,7 +32,7 @@ export const meta = {
       <img className="hidden lg:visible absolute right-0 top-0 w-[500px]" src="/docs/img/cards/dark.png" />
       <div classNam="">
         <h3 className="text-2xl m-0 mb-3">Getting Started</h3>
-        
+
         Discover how to set up a database to an app making queries in just a few minutes.
 
         <div className="font-mono uppercase text-xs mb-2">What you will learn</div>
@@ -62,7 +62,7 @@ export const meta = {
           <div className="hidden">
           <Button size="small">Get started</Button>
           </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             <Link href={`/getting-started/quickstarts/reactjs`} passHref>
               <a className="no-underline">
                 <IconPanel title="ReactJS" icon="/docs/img/icons/react-icon" />
diff --git a/apps/docs/public/img/icons/menu/reference-api-light.svg b/apps/docs/public/img/icons/menu/reference-api-light.svg
new file mode 100644
index 00000000000..c17b3fa3dc6
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-api-light.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.90669 9.96902L2.86328 10.1004H3.00164H3.50995H3.5838L3.60552 10.0298L3.96055 8.87615H5.23575L5.58501 10.0294L5.60652 10.1004H5.68072H6.20696H6.34532L6.30191 9.96902L4.98032 5.96902L4.95764 5.90039H4.88536H4.32324H4.25096L4.22829 5.96902L2.90669 9.96902ZM6.90596 10.0004V10.1004H7.00596H7.5023H7.6023V10.0004V8.51251H8.20795C8.65195 8.51251 9.03901 8.41117 9.31702 8.18826C9.59851 7.96255 9.75513 7.62268 9.75513 7.17615C9.75513 6.71252 9.6005 6.38487 9.31548 6.17782C9.03683 5.97538 8.64959 5.90039 8.20795 5.90039H7.00596H6.90596V6.00039V10.0004ZM10.4498 10.0004V10.1004H10.5498H13.0016H13.1016V10.0004V9.57009V9.47009H13.0016H12.1268V6.52463H13.0016H13.1016V6.42463V6.00039V5.90039H13.0016H10.5498H10.4498V6.00039V6.42463V6.52463H10.5498H11.4245V9.47009H10.5498H10.4498V9.57009V10.0004ZM4.29332 7.78711C4.40029 7.43828 4.5001 7.10025 4.59832 6.74754C4.69654 7.10026 4.79635 7.43829 4.90333 7.78713C4.90335 7.78718 4.90337 7.78723 4.90338 7.78729L5.0496 8.27009H4.14704L4.29326 7.78729C4.29328 7.78723 4.2933 7.78717 4.29332 7.78711ZM7.6023 7.90039V6.50645H8.14217C8.47874 6.50645 8.70599 6.55387 8.84831 6.65471C8.98206 6.74947 9.05879 6.90524 9.05879 7.17615C9.05879 7.44126 8.98314 7.61378 8.84582 7.72389C8.70372 7.83781 8.47699 7.90039 8.14217 7.90039H7.6023Z" fill="url(#paint0_linear_1032_62531)"/>
+<path d="M12 0.75H4C2.20507 0.75 0.75 2.20507 0.75 4V12C0.75 13.7949 2.20507 15.25 4 15.25H12C13.7949 15.25 15.25 13.7949 15.25 12V4C15.25 2.20507 13.7949 0.75 12 0.75Z" stroke="url(#paint1_linear_1032_62531)" stroke-width="1.5"/>
+<defs>
+<linearGradient id="paint0_linear_1032_62531" x1="4.78868" y1="9.53602" x2="8.97515" y2="9.53602" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#4CC38A" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1032_62531" x1="3.47684" y1="13.3016" x2="9.40588" y2="13.3016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#4CC38A" stop-opacity="0.6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/docs/public/img/icons/menu/reference-auth-light.svg b/apps/docs/public/img/icons/menu/reference-auth-light.svg
new file mode 100644
index 00000000000..3995c790842
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-auth-light.svg
@@ -0,0 +1 @@
+<svg width="10" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.494 7.974h5v2h-5v-2Z" fill="url(#a)"/><path d="M.494 9.974h5v2h-5v-2Z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.682 3a2.318 2.318 0 1 1 4.636 0v1.682h2.155L9.79 5v9l-.318.318h-9L.154 14V5l.319-.318h2.209V3Zm.636 1.682h3.364V3a1.682 1.682 0 0 0-3.364 0v1.682Zm-2.527.636v2.338h4.703l.319.318v4l-.319.319H.791v1.389h8.363V5.318H.791Zm.022 6.338h4.363v-1.363H.813v1.363Zm0-2h4.363V8.293H.813v1.363Z" fill="url(#c)"/><defs><linearGradient id="a" x1="-1.666" y1=".682" x2="13.393" y2=".682" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#333" stop-opacity=".6"/></linearGradient><linearGradient id="b" x1="-1.666" y1=".682" x2="13.393" y2=".682" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#333" stop-opacity=".6"/></linearGradient><linearGradient id="c" x1="-1.666" y1=".682" x2="13.393" y2=".682" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#333" stop-opacity=".6"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/apps/docs/public/img/icons/menu/reference-auth.svg b/apps/docs/public/img/icons/menu/reference-auth.svg
index 4d671f4ba3a..ca43d9d0b20 100644
--- a/apps/docs/public/img/icons/menu/reference-auth.svg
+++ b/apps/docs/public/img/icons/menu/reference-auth.svg
@@ -1,19 +1 @@
-<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.494261 7.97449H5.49426V9.97449H0.494261V7.97449Z" fill="url(#paint0_linear_657_71987)"/>
-<path d="M0.494261 9.97449H5.49426V11.9747H0.494261V9.97449Z" fill="url(#paint1_linear_657_71987)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.68156 2.99998C2.68156 1.7196 3.71951 0.681641 4.99989 0.681641C6.28028 0.681641 7.31823 1.7196 7.31823 2.99998V4.68168H9.47263L9.79097 5.00001V14L9.47263 14.3183H0.472633L0.154297 14L0.154297 5.00001L0.472633 4.68167H2.68156V2.99998ZM3.31823 4.68167H6.68156V2.99998C6.68156 2.07122 5.92865 1.31831 4.99989 1.31831C4.07114 1.31831 3.31823 2.07122 3.31823 2.99998V4.68167ZM0.79097 5.31835L0.79097 7.65613H5.49424L5.81257 7.97447V11.9746L5.49424 12.293H0.79097L0.79097 13.6817H9.1543V5.31835L0.79097 5.31835ZM0.812575 11.6563H5.1759V10.2928H0.812575V11.6563ZM0.812575 9.65613H5.1759V8.29281H0.812575V9.65613Z" fill="url(#paint2_linear_657_71987)"/>
-<defs>
-<linearGradient id="paint0_linear_657_71987" x1="-1.6657" y1="0.681641" x2="13.3934" y2="0.68164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-<linearGradient id="paint1_linear_657_71987" x1="-1.6657" y1="0.681641" x2="13.3934" y2="0.68164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-<linearGradient id="paint2_linear_657_71987" x1="-1.6657" y1="0.681641" x2="13.3934" y2="0.68164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="10" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.494 7.974h5v2h-5v-2Z" fill="url(#a)"/><path d="M.494 9.974h5v2h-5v-2Z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.682 3a2.318 2.318 0 1 1 4.636 0v1.682h2.155L9.79 5v9l-.318.318h-9L.154 14V5l.319-.318h2.209V3Zm.636 1.682h3.364V3a1.682 1.682 0 0 0-3.364 0v1.682Zm-2.527.636v2.338h4.703l.319.318v4l-.319.319H.791v1.389h8.363V5.318H.791Zm.022 6.338h4.363v-1.363H.813v1.363Zm0-2h4.363V8.293H.813v1.363Z" fill="url(#c)"/><defs><linearGradient id="a" x1="-1.666" y1=".682" x2="13.393" y2=".682" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="b" x1="-1.666" y1=".682" x2="13.393" y2=".682" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="c" x1="-1.666" y1=".682" x2="13.393" y2=".682" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/apps/docs/public/img/icons/menu/reference-cli-light.svg b/apps/docs/public/img/icons/menu/reference-cli-light.svg
new file mode 100644
index 00000000000..b3a662bea7a
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-cli-light.svg
@@ -0,0 +1,19 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0.75H4C2.20507 0.75 0.75 2.20507 0.75 4V12C0.75 13.7949 2.20507 15.25 4 15.25H12C13.7949 15.25 15.25 13.7949 15.25 12V4C15.25 2.20507 13.7949 0.75 12 0.75Z" stroke="url(#paint0_linear_1032_62530)" stroke-width="1.5"/>
+<path d="M4.14453 4.35742L7.00167 6.50028L4.14453 8.64314" stroke="url(#paint1_linear_1032_62530)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8.64258H10.8572" stroke="url(#paint2_linear_1032_62530)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1032_62530" x1="3.47684" y1="13.3016" x2="9.40588" y2="13.3016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#4CC38A" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1032_62530" x1="4.68184" y1="8.06725" x2="5.85012" y2="8.06725" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#4CC38A" stop-opacity="0.6"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1032_62530" x1="8.53731" y1="9.5082" x2="9.7056" y2="9.5082" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#4CC38A" stop-opacity="0.6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/docs/public/img/icons/menu/reference-dart-light.svg b/apps/docs/public/img/icons/menu/reference-dart-light.svg
new file mode 100644
index 00000000000..245516d78f7
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-dart-light.svg
@@ -0,0 +1,9 @@
+<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0347 0.420898L8.66508 0.426816L0.00683594 9.08506L2.67814 11.7597L5.02598 9.42498L14.0347 0.420898ZM8.81915 8.40844C8.74295 8.40492 8.6644 8.40129 8.61512 8.46638L3.99811 13.0827L6.6501 15.7185L6.64716 15.7214L8.54505 17.6209C8.55749 17.6319 8.56986 17.6443 8.58246 17.6569C8.6344 17.7088 8.69013 17.7645 8.77056 17.7465C9.6472 17.7445 10.5238 17.7448 11.4006 17.7452C12.2775 17.7455 13.1545 17.7458 14.0316 17.7439L9.36417 13.0721L14.0301 8.40918L8.91032 8.40787C8.88183 8.41133 8.85069 8.40989 8.81915 8.40844Z" fill="url(#paint0_linear_657_71721)"/>
+<defs>
+<linearGradient id="paint0_linear_657_71721" x1="5.29108" y1="13.0823" x2="16.7808" y2="13.0823" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/docs/public/img/icons/menu/reference-javascript-light.svg b/apps/docs/public/img/icons/menu/reference-javascript-light.svg
new file mode 100644
index 00000000000..1417f5a8038
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-javascript-light.svg
@@ -0,0 +1,9 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.230469 0.339844H53.7695V53.8789H0.230469V0.339844ZM41.1578 45.2235C38.6763 45.2235 37.2732 43.9292 36.1948 42.1683L32.1063 44.5436C33.5832 47.4619 36.6018 49.6885 41.2742 49.6885C46.0527 49.6885 49.611 47.207 49.611 42.6774C49.611 38.4758 47.1975 36.6071 42.9228 34.774L41.6651 34.2352C39.5065 33.3004 38.5717 32.6894 38.5717 31.1801C38.5717 29.9589 39.5057 29.0241 40.9793 29.0241C42.424 29.0241 43.3545 29.6334 44.2171 31.1801L48.1348 28.6646C46.4777 25.7497 44.178 24.6364 40.9793 24.6364C36.4863 24.6364 33.6113 27.5088 33.6113 31.2821C33.6113 35.3782 36.0231 37.3158 39.6536 38.8625L40.9113 39.4022C43.2058 40.4058 44.5741 41.0168 44.5741 42.742C44.5741 44.1816 43.2424 45.2235 41.1578 45.2235ZM21.6602 45.192C19.9316 45.192 19.2127 44.0065 18.4223 42.6043L14.327 45.0837C15.5134 47.5945 17.8462 49.6791 21.8743 49.6791C26.3325 49.6791 29.3868 47.3081 29.3868 42.0987V24.9237H24.3558V42.0307C24.3558 44.5453 23.3131 45.192 21.6602 45.192Z" fill="url(#paint0_linear_1029_62398)"/>
+<defs>
+<linearGradient id="paint0_linear_1029_62398" x1="-9.88098" y1="0.339844" x2="73.784" y2="0.33984" gradientUnits="userSpaceOnUse">
+<stop stop-color="#429B72"/>
+<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/docs/public/img/icons/menu/reference-realtime-light.svg b/apps/docs/public/img/icons/menu/reference-realtime-light.svg
new file mode 100644
index 00000000000..1a9bef014b3
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-realtime-light.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m3.558 4.523 4.517 10.332 1.177-4.558L14 9.115 3.558 4.523Z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m3.266 4.65.42-.418 10.443 4.592-.052.6-4.564 1.136-1.13 4.374-.6.048L3.267 4.651Zm.91.493 3.822 8.74.946-3.666.231-.229 3.844-.957-8.843-3.888Z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m.595 1.06 2.13 2.196-.456.443L.138 1.503l.457-.443Z" fill="url(#c)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.862 3.333V.984H4.5v2.35h-.637Z" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M.052 4.703h2.366v.636H.052v-.636Z" fill="url(#e)"/><defs><linearGradient id="a" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#4CC38A" stop-opacity=".6"/></linearGradient><linearGradient id="b" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#4CC38A" stop-opacity=".6"/></linearGradient><linearGradient id="c" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#4CC38A" stop-opacity=".6"/></linearGradient><linearGradient id="d" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#4CC38A" stop-opacity=".6"/></linearGradient><linearGradient id="e" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#4CC38A" stop-opacity=".6"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/apps/docs/public/img/icons/menu/reference-realtime.svg b/apps/docs/public/img/icons/menu/reference-realtime.svg
index debd3003f47..bbb0c056edb 100644
--- a/apps/docs/public/img/icons/menu/reference-realtime.svg
+++ b/apps/docs/public/img/icons/menu/reference-realtime.svg
@@ -1,29 +1 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.55762 4.52344L8.07535 14.855L9.25221 10.2971L14.0002 9.11523L3.55762 4.52344Z" fill="url(#paint0_linear_657_71989)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.26611 4.65088L3.68592 4.23193L14.1285 8.82373L14.0773 9.42405L9.51321 10.5601L8.38374 14.9345L7.78384 14.9824L3.26611 4.65088ZM4.17619 5.14302L7.99779 13.8826L8.94415 10.2174L9.17549 9.98805L13.019 9.03136L4.17619 5.14302Z" fill="url(#paint1_linear_657_71989)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.594723 1.05995L2.72567 3.25604L2.26875 3.69941L0.137801 1.50332L0.594723 1.05995Z" fill="url(#paint2_linear_657_71989)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.86235 3.33325V0.984375L4.49902 0.984375V3.33325H3.86235Z" fill="url(#paint3_linear_657_71989)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0522462 4.70268H2.41797V5.33936H0.0522461L0.0522462 4.70268Z" fill="url(#paint4_linear_657_71989)"/>
-<defs>
-<linearGradient id="paint0_linear_657_71989" x1="-2.60622" y1="0.984375" x2="19.3907" y2="0.984374" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-<linearGradient id="paint1_linear_657_71989" x1="-2.60622" y1="0.984375" x2="19.3907" y2="0.984374" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-<linearGradient id="paint2_linear_657_71989" x1="-2.60622" y1="0.984375" x2="19.3907" y2="0.984374" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-<linearGradient id="paint3_linear_657_71989" x1="-2.60622" y1="0.984375" x2="19.3907" y2="0.984374" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-<linearGradient id="paint4_linear_657_71989" x1="-2.60622" y1="0.984375" x2="19.3907" y2="0.984374" gradientUnits="userSpaceOnUse">
-<stop stop-color="#F4FFFA"/>
-<stop offset="1" stop-color="#D8FFEC" stop-opacity="0.6"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m3.558 4.523 4.517 10.332 1.177-4.558L14 9.115 3.558 4.523Z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m3.266 4.65.42-.418 10.443 4.592-.052.6-4.564 1.136-1.13 4.374-.6.048L3.267 4.651Zm.91.493 3.822 8.74.946-3.666.231-.229 3.844-.957-8.843-3.888Z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m.595 1.06 2.13 2.196-.456.443L.138 1.503l.457-.443Z" fill="url(#c)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.862 3.333V.984H4.5v2.35h-.637Z" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M.052 4.703h2.366v.636H.052v-.636Z" fill="url(#e)"/><defs><linearGradient id="a" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="b" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="c" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="d" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="e" x1="-2.606" y1=".984" x2="19.391" y2=".984" gradientUnits="userSpaceOnUse"><stop stop-color="#F4FFFA"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/apps/docs/public/img/icons/menu/reference-storage-light.svg b/apps/docs/public/img/icons/menu/reference-storage-light.svg
new file mode 100644
index 00000000000..be8a47ae0a6
--- /dev/null
+++ b/apps/docs/public/img/icons/menu/reference-storage-light.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.452 1.086 1.77.768h6.382l.225.092 3.618 3.601.094.226v8.399l-.319.318h-10l-.318-.318v-12Zm.637.318v11.364h9.363V4.819L8.021 1.404H2.089Z" fill="url(#a)"/><path d="m8.15 1.086 3.585 3.584H8.151V1.086Z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m11.96 4.445-.225.544H8.151l-.318-.319V1.086l.543-.225 3.584 3.584Zm-.993-.093L8.469 1.854v2.498h2.498Z" fill="url(#c)"/><path d="M.77 5.086h2.878L5.18 6.595h7.59v6.49h-12v-8Z" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m.452 5.086.318-.318h2.878l.223.091 1.44 1.418h7.46l.318.318v6.49l-.319.32h-12l-.318-.32v-8Zm.637.318v7.364h11.363V6.913h-7.27l-.224-.091-1.44-1.418h-2.43Z" fill="url(#e)"/><defs><linearGradient id="a" x1="-1.934" y1=".768" x2="17.813" y2=".768" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="b" x1="-1.934" y1=".768" x2="17.813" y2=".768" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="c" x1="-1.934" y1=".768" x2="17.813" y2=".768" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="d" x1="-1.934" y1=".768" x2="17.813" y2=".768" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient><linearGradient id="e" x1="-1.934" y1=".768" x2="17.813" y2=".768" gradientUnits="userSpaceOnUse"><stop stop-color="#429B72"/><stop offset="1" stop-color="#D8FFEC" stop-opacity=".6"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml
index f46f4d82d04..ac3119f0043 100644
--- a/apps/docs/public/sitemap.xml
+++ b/apps/docs/public/sitemap.xml
@@ -108,6 +108,12 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/reference/index</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/api</loc>
     <changefreq>weekly</changefreq>
@@ -258,12 +264,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/reference/index</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/tutorials/nextjs</loc>
     <changefreq>weekly</changefreq>
@@ -271,13 +271,19 @@
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/api/generating-types</loc>
+    <loc>https://supabase.com/docs/getting-started/quickstarts/nextjs</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/new/auth/auth-login</loc>
+    <loc>https://supabase.com/docs/getting-started/quickstarts/nuxtjs</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/getting-started/quickstarts/reactjs</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
@@ -312,6 +318,30 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/new/auth/auth-login</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/api/generating-types</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/cli/local-development</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/cli/managing-environments</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/auth/auth-apple</loc>
     <changefreq>weekly</changefreq>
@@ -498,18 +528,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/cli/local-development</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/cli/managing-environments</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/functions/auth</loc>
     <changefreq>weekly</changefreq>
@@ -642,30 +660,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/migrations/firebase-auth</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/migrations/firebase-storage</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/migrations/firestore-data</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/migrations/heroku</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/integrations/appsmith</loc>
     <changefreq>weekly</changefreq>
@@ -805,19 +799,25 @@
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/realtime/postgres-changes</loc>
+    <loc>https://supabase.com/docs/guides/migrations/firebase-auth</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/realtime/quickstart</loc>
+    <loc>https://supabase.com/docs/guides/migrations/firebase-storage</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
 
   <url>
-    <loc>https://supabase.com/docs/guides/realtime/rate-limits</loc>
+    <loc>https://supabase.com/docs/guides/migrations/firestore-data</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/migrations/heroku</loc>
     <changefreq>weekly</changefreq>
     <changefreq>0.5</changefreq>
   </url>
@@ -906,6 +906,24 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/realtime/postgres-changes</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/realtime/quickstart</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/realtime/rate-limits</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/storage/access-control</loc>
     <changefreq>weekly</changefreq>
@@ -930,24 +948,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/getting-started/quickstarts/nextjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/getting-started/quickstarts/nuxtjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/getting-started/quickstarts/reactjs</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/tutorials/with-angular</loc>
     <changefreq>weekly</changefreq>
@@ -1032,6 +1032,30 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/passwordless-login/email-otp-magic-link</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/passwordless-login/phone-sms-otp-messagebird</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/passwordless-login/phone-sms-otp-twilio</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/auth/passwordless-login/phone-sms-otp-vonage</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/auth/auth-helpers/auth-ui</loc>
     <changefreq>weekly</changefreq>
@@ -1062,30 +1086,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/passwordless-login/email-otp-magic-link</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/passwordless-login/phone-sms-otp-messagebird</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/passwordless-login/phone-sms-otp-twilio</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/auth/passwordless-login/phone-sms-otp-vonage</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/functions/examples/index</loc>
     <changefreq>weekly</changefreq>
@@ -1098,42 +1098,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/http</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/pgcron</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/pgnet</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/pgtap</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/plv8</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
-  <url>
-    <loc>https://supabase.com/docs/guides/database/extensions/uuid-ossp</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/guides/auth/social-login/auth-apple</loc>
     <changefreq>weekly</changefreq>
@@ -1242,6 +1206,42 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/http</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/pgcron</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/pgnet</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/pgtap</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/plv8</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
+  <url>
+    <loc>https://supabase.com/docs/guides/database/extensions/uuid-ossp</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/resources/migrating-to-supabase/firebase-auth</loc>
     <changefreq>weekly</changefreq>
@@ -1266,6 +1266,12 @@
     <changefreq>0.5</changefreq>
   </url>
 
+  <url>
+    <loc>https://supabase.com/docs/guides/resources/self-hosting/docker</loc>
+    <changefreq>weekly</changefreq>
+    <changefreq>0.5</changefreq>
+  </url>
+
   <url>
     <loc>https://supabase.com/docs/guides/resources/supabase-cli/local-development</loc>
     <changefreq>weekly</changefreq>
@@ -1278,12 +1284,6 @@
     <changefreq>0.5</changefreq>
   </url>
 
-  <url>
-    <loc>https://supabase.com/docs/guides/resources/self-hosting/docker</loc>
-    <changefreq>weekly</changefreq>
-    <changefreq>0.5</changefreq>
-  </url>
-
   <url>
     <loc>https://supabase.com/docs/reference/api</loc>
     <changefreq>weekly</changefreq>