diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index 2a7f01f0ad9..373d46f405d 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -21,7 +21,7 @@ const HomePageCover = (props) => {
         <div className="md:max-w-xs xl:max-w-none">
           <div className="flex items-center gap-3 mb-3">
             <IconBackground>
-              <IconPlay className="text-brand-900 w-4" />
+              <IconPlay className="text-brand-1100 dark:text-brand-900 w-4" />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>
diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 5f49c4dd63d..c58c7c94f93 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -5,7 +5,7 @@ import { LayoutMainContent } from '../../layouts/DefaultLayout'
 
 const Footer = () => (
   <LayoutMainContent className="pt-0">
-    <div className="mt-8">
+    <div className="mt-16">
       <ul className="flex flex-col gap-2">
         {primaryLinks.map(({ url, featherIcon: Icon, icon, text, ctaLabel }) => (
           <li key={url} className="flex items-center gap-1 text-xs text-scale-900">
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index 21db6a8c628..107a2c788a3 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -21,7 +21,7 @@ interface RefSectionHandlerProps {
 const RefSectionHandler = (props: RefSectionHandlerProps) => {
   const router = useRouter()
 
-  const slug = router.query?.slug[0]
+  const slug = router.query.slug[0]
 
   // When user lands on a url like http://supabase.com/docs/reference/javascript/sign-up
   // find the #sign-up element and scroll to that
diff --git a/apps/docs/data/footer.ts b/apps/docs/data/footer.ts
index 640984096d3..15228f0e532 100644
--- a/apps/docs/data/footer.ts
+++ b/apps/docs/data/footer.ts
@@ -3,19 +3,19 @@ import { IconCheckCircle, IconLifeBuoy } from '~/../../packages/ui'
 export const primaryLinks = [
   {
     featherIcon: IconLifeBuoy,
-    text: 'Need help?',
+    text: 'Need some help?',
     ctaLabel: 'Contact support',
     url: 'https://app.supabase.com/support/new',
   },
   {
     icon: 'M12.9521 10.5073C12.766 10.3212 12.5289 10.1943 12.2708 10.1427L10.6794 9.82467C9.80719 9.65024 8.90169 9.77152 8.10609 10.1693L7.89409 10.2747C7.0985 10.6725 6.193 10.7938 5.32076 10.6193L4.03343 10.362C3.81823 10.319 3.59574 10.3298 3.38571 10.3934C3.17569 10.457 2.9846 10.5715 2.82943 10.7267M5.33343 2.88867H10.6668L10.0001 3.55534V7.00334C10.0002 7.35693 10.1407 7.69602 10.3908 7.94601L13.7241 11.2793C14.5641 12.1193 13.9688 13.5553 12.7808 13.5553H3.21876C2.03076 13.5553 1.43609 12.1193 2.27609 11.2793L5.60943 7.94601C5.85949 7.69602 6.00002 7.35693 6.00009 7.00334V3.55534L5.33343 2.88867Z',
-    text: 'Lastest updates?',
+    text: 'Lastest product updates?',
     ctaLabel: 'See Changelog',
     url: 'https://supabase.com/changelog',
   },
   {
     featherIcon: IconCheckCircle,
-    text: 'Something’s not right?',
+    text: "Something's not right?",
     ctaLabel: 'Check system status',
     url: 'https://status.supabase.com/',
   },
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 4c54d701bfe..02c96b5989f 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -169,7 +169,7 @@ const Layout: FC<Props> = (props) => {
             </div>
           )}
         </div>
-        <FooterHelpCallout footerHelpType={props.meta?.footerHelpType} title={props.meta?.title} />
+        {/* <FooterHelpCallout footerHelpType={props.meta?.footerHelpType} title={props.meta?.title} /> */}
       </LayoutMainContent>
     </>
   )
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 2f8342c3d59..f697c8dfd8a 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -20,58 +20,121 @@ export const meta = {
 
 <div className="flex flex-col">
 
-<div>
-  <div className="max-w-xl">
-    ## Products
-  </div>
-
-  <div className="grid grid-cols-12 gap-6 not-prose">
-    {products.map((product) => {
-      return (
-        <Link
-          href={`${product.href}`}
-          key={product.title}
-          passHref
-        >
-          <a className={product.span ?? 'col-span-12 md:col-span-4'}>
-            <GlassPanel {...product} background={true} showIconBg={true} showLink={true}>
-              {product.description}
-            </GlassPanel>
-          </a>
-        </Link>
-      )
-    })}
-  </div>
-  
-  <div className="flex flex-col lg:grid grid-cols-12 gap-6 mt-12 py-12 border-b">
-
-    <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0">
-
-      ## Migrate to Supabase
-
-      <p className="text-scale-1100 text-sm p-0 m-0">
-        Bring your existing data, auth and storage to Supabase following our migration guides.
-      </p>
-
-      <TextLink
-        label="Explore more resources"
-        url="/docs/guides/resources"
-        className="no-underline text-brand-900 text-sm"
-      />
+  <div>
+    <div className="max-w-xl">
+      ## Products
     </div>
 
-    <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
-      {migrationGuides.map((product) => {
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand-900">
+      {products.map((product) => {
+        return (
+          <Link href={product.href} key={product.title} passHref>
+            <a className={product.span ?? 'col-span-12 md:col-span-4'}>
+              <GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
+                {product.description}
+              </GlassPanel>
+            </a>
+          </Link>
+        )
+      })}
+    </div>
+
+    <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12 border-b">
+
+      <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
+
+        <div className="md:max-w-xs 2xl:max-w-none">
+          <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand-900">
+            {/* <IconBackground>
+              <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
+            </IconBackground> */}
+            ## Client Libraries
+          </div>
+        </div>
+
+      </div>
+
+      <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
+        {clientLibraries.map((product) => {
+          return (
+            <Link href={product.href} key={product.title} passHref>
+              <a className={product.span ?? 'col-span-6 md:col-span-4'}>
+                <IconPanel
+                  {...product}
+                  icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />}
+                  background={true}
+                  showIconBg={true}
+                  showLink={false}
+                >
+                  {product.description}
+                </IconPanel>
+              </a>
+            </Link>
+          )
+        })}
+      </div>
+
+    </div>
+
+    <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12 border-b">
+
+      <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0">
+
+        ## Migrate to Supabase
+
+        <p className="text-scale-1100 text-sm p-0 m-0">
+          Bring your existing data, auth and storage to Supabase following our migration guides.
+        </p>
+
+        <TextLink
+          label="Explore more resources"
+          url="/docs/guides/resources"
+          className="no-underline text-brand-900 text-sm"
+        />
+      </div>
+
+      <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
+        {migrationGuides.map((product) => {
+          return (
+            <Link
+              href={product.href}
+              key={product.title}
+              passHref
+            >
+              <a className={product.span ?? 'col-span-6 md:col-span-4'}>
+                <IconPanel {...product} background={true} showIconBg={true} showLink={false}>
+                  {product.description}
+                </IconPanel>
+              </a>
+            </Link>
+          )
+        })}
+      </div>
+
+    </div>
+
+  </div>
+
+  <div className="flex flex-col gap-6 py-12 border-b">
+
+    <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
+
+      ### Additional resources
+
+    </div>
+
+    <div className="grid grid-cols-12 gap-6 not-prose">
+      {additionalResources.map((product) => {
         return (
           <Link
-            href={`${product.href}`}
+            href={product.href}
             key={product.title}
             passHref
           >
-            <a className={product.span ?? 'col-span-6 md:col-span-4'}>
-              <IconPanel {...product} background={true} showIconBg={true} showLink={true} showLink={false}>
+            <a className={product.span ?? 'col-span-12 md:col-span-6 lg:col-span-3'}>
+              <GlassPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={false}>
                 {product.description}
-              </IconPanel>
+              </GlassPanel>
             </a>
           </Link>
         )
@@ -80,11 +143,7 @@ export const meta = {
 
   </div>
 
-</div>
-
-<div>
-
-  <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12 border-b">
+  <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12">
 
     <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
 
@@ -112,12 +171,12 @@ export const meta = {
         {selfHostingOptions.map((product) => {
           return (
             <Link
-              href={`${product.href}`}
+              href={product.href}
               key={product.title}
               passHref
             >
               <a className={product.span ?? 'col-span-6'}>
-                <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={true} showLink={false}>
+                <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={false}>
                   {product.description}
                 </IconPanel>
               </a>
@@ -128,55 +187,13 @@ export const meta = {
     </div>
 
   </div>
-  
-  <div className="flex flex-col lg:grid grid-cols-12 gap-6 py-12">
-
-    <div className="col-span-4 flex flex-col gap-1 [&_h2]:m-0 [&_h3]:m-0">
-
-      <div className="md:max-w-xs 2xl:max-w-none">
-        <div className="flex items-center gap-3 mb-3 text-brand-1100 dark:text-brand-900">
-          <IconBackground>
-            <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
-          </IconBackground>
-          ### Official Client Libraries
-        </div>
-        {/* <p className="text-scale-1100 text-sm">
-          Some short description about using Official Client Libraries across all of these products we listed here.
-        </p> */}
-      </div>
-
-    </div>
-
-    <div className="grid col-span-8 grid-cols-12 gap-6 not-prose">
-      <div className="col-span-full lg:col-span-8 grid grid-cols-12 gap-6">
-        {clientLibraries.map((product) => {
-          return (
-            <Link
-              href={`${product.href}`}
-              key={product.title}
-              passHref
-            >
-              <a className={product.span ?? 'col-span-6'}>
-                <IconPanel {...product} icon={<HomeMenuIconPicker icon={product.icon} width={18} height={18} />} background={true} showIconBg={true} showLink={true} showLink={false}>
-                  {product.description}
-                </IconPanel>
-              </a>
-            </Link>
-          )
-        })}
-      </div>
-    </div>
-
-  </div>
-
-</div>
 
 </div>
 
 export const products = [
   {
     title: 'Database',
-    icon: '/docs/img/icons/menu/database',
+    icon: 'database',
     hasLightIcon: true,
     href: '/guides/database',
     description:
@@ -185,16 +202,16 @@ export const products = [
   },
   {
     title: 'Auth',
-    icon: '/docs/img/icons/menu/auth',
+    icon: 'auth',
     hasLightIcon: true,
-    href: '/guides/auth/overview',
+    href: '/guides/auth',
     description:
       'Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.',
     span: 'col-span-12 md:col-span-6',
   },
   {
     title: 'Storage',
-    icon: '/docs/img/icons/menu/storage',
+    icon: 'storage',
     hasLightIcon: true,
     href: '/guides/storage',
     description:
@@ -202,7 +219,7 @@ export const products = [
   },
   {
     title: 'Realtime',
-    icon: '/docs/img/icons/menu/realtime',
+    icon: 'realtime',
     hasLightIcon: true,
     href: '/guides/realtime',
     description:
@@ -210,7 +227,7 @@ export const products = [
   },
   {
     title: 'Edge Functions',
-    icon: '/docs/img/icons/menu/functions',
+    icon: 'functions',
     hasLightIcon: true,
     href: '/guides/functions',
     description:
@@ -255,22 +272,22 @@ export const selfHostingOptions = [
   {
     title: 'Auth',
     icon: 'auth',
-    href: '/docs/reference/self-hosting-auth/introduction',
+    href: 'reference/self-hosting-auth/introduction',
   },
   {
     title: 'Realtime',
     icon: 'realtime',
-    href: '/docs/reference/self-hosting-realtime/introduction',
+    href: 'reference/self-hosting-realtime/introduction',
   },
   {
     title: 'Storage',
     icon: 'storage',
-    href: '/docs/reference/self-hosting-storage/introduction',
+    href: 'reference/self-hosting-storage/introduction',
   },
   {
     title: 'Analytics',
     icon: 'analytics',
-    href: '/docs/reference/self-hosting-analytics/introduction',
+    href: 'reference/self-hosting-analytics/introduction',
   },
 ]
 
@@ -278,12 +295,54 @@ export const clientLibraries = [
   {
     title: 'Javascript',
     icon: 'reference-javascript',
-    href: '/docs/reference/javascript/initializing',
+    href: 'reference/javascript/introduction',
   },
   {
     title: 'Flutter',
     icon: 'reference-dart',
-    href: '/docs/reference/dart/initializing',
+    href: 'reference/dart/introduction',
+  },
+  {
+    title: 'Python',
+    icon: 'reference-python',
+    href: 'reference/python/introduction',
+  },
+  {
+    title: 'C#',
+    icon: 'reference-csharp',
+    href: 'reference/csharp/introduction',
+  },
+  {
+    title: 'Swift',
+    icon: 'reference-swift',
+    href: 'reference/swift/introduction',
+  },
+]
+
+export const additionalResources = [
+  {
+    title: 'Management API',
+    description: 'Manage your Supabase projects and organizations.',
+    icon: 'reference-api',
+    href: 'reference/api/introduction',
+  },
+  {
+    title: 'Supabase CLI',
+    description: 'Use the CLI to develop, manage and deploy your projects.',
+    icon: 'reference-cli',
+    href: 'reference/cli/introduction',
+  },
+  {
+    title: 'Platform Guides',
+    description: 'Learn more about the tools and services powering Supabase.',
+    icon: 'platform',
+    href: 'guides/platform',
+  },
+  {
+    title: 'Integrations',
+    description: 'Explore a variety of integrations from Supabase partners.',
+    icon: 'integrations',
+    href: 'guides/integrations',
   },
 ]
 
diff --git a/packages/ui/src/components/IconPanel/IconPanel.tsx b/packages/ui/src/components/IconPanel/IconPanel.tsx
index 64c68d8eea8..91eed589bcd 100644
--- a/packages/ui/src/components/IconPanel/IconPanel.tsx
+++ b/packages/ui/src/components/IconPanel/IconPanel.tsx
@@ -102,7 +102,14 @@ const IconPanel = ({
         bg-scale-200 dark:bg-whiteA-300 opacity-0 peer-hover:opacity-100"
         ></div>
       </div>
-      {tooltip && <ReactTooltip effect={'solid'} className="!py-2 !px-4" />}
+      {tooltip && (
+        <ReactTooltip
+          effect="solid"
+          backgroundColor="var(--colors-scale1)"
+          textColor="var(--colors-scale11)"
+          className="!py-2 !px-4"
+        />
+      )}
     </>
   )
 }