diff --git a/README.md b/README.md
index da83a9e1e4e..70298a09e54 100644
--- a/README.md
+++ b/README.md
@@ -235,7 +235,7 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
 - [Nepali / नेपाली](/i18n/README.ne.md)
 - [Indonesian / Bahasa Indonesia](/i18n/README.id.md)
 - [Italiano / Italian](/i18n/README.it.md)
-- [Japanese / 日本語](/i18n/README.ja.md)
+- [Japanese / 日本語](/i18n/README.jp.md)
 - [Korean / 한국어](/i18n/README.ko.md)
 - [Lithuanian / lietuvių](/i18n/README.lt.md)
 - [Latvian / latviski](/i18n/README.lv.md)
diff --git a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index 844724a5466..337f48b2bbf 100644
--- a/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/apps/docs/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -89,13 +89,13 @@ export const highlightSelectedNavItem = (id: string) => {
   const navMenuItems = document.querySelectorAll<HTMLAnchorElement>('.function-link-item a')
 
   // find any currently active items and remove them
-  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand-900')
-  currentActiveItems.forEach((item) => item.classList.remove('text-brand-900'))
+  const currentActiveItems = document.querySelectorAll('.function-link-list .text-brand')
+  currentActiveItems.forEach((item) => item.classList.remove('text-brand'))
 
   // Add active class to the current item
   navMenuItems.forEach((item) => {
     if (item.href.split('/').at(-1) === id) {
-      item.classList.add('text-brand-900')
+      item.classList.add('text-brand')
     }
   })
 }
diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx
index 9d25121f661..553f3165452 100644
--- a/apps/docs/components/GuidesTableOfContents.tsx
+++ b/apps/docs/components/GuidesTableOfContents.tsx
@@ -46,7 +46,7 @@ const GuidesTableOfContents: FC<Props> = ({ list }) => {
         <li key={`${item.level}-${i}`} className={item.level === 3 ? 'ml-4' : ''}>
           <a
             href={`#${formatSlug(item.link)}`}
-            className="text-scale-1000 hover:text-brand-900 transition-colors"
+            className="text-scale-1000 hover:text-brand transition-colors"
             dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.text)) }}
           />
         </li>
diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index e760c411dc3..657083befd2 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -28,6 +28,11 @@ const HomePageCover = (props) => {
       icon: '/docs/img/icons/flutter-icon',
       href: '/guides/getting-started/quickstarts/flutter',
     },
+    {
+      tooltip: 'Android Kotlin',
+      icon: '/docs/img/icons/kotlin-icon',
+      href: '/guides/getting-started/quickstarts/kotlin',
+    },
     {
       tooltip: 'SvelteKit',
       icon: '/docs/img/icons/svelte-icon',
@@ -69,7 +74,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-1100 dark:text-brand-900 w-4" />
+              <IconPlay className="text-brand-600 dark:text-brand w-4" strokeWidth={2} />
             </IconBackground>
             <h3 className="text-2xl m-0">Getting Started</h3>
           </div>
diff --git a/apps/docs/components/LinkCard.tsx b/apps/docs/components/LinkCard.tsx
index e74ac68384a..6e22200bbda 100644
--- a/apps/docs/components/LinkCard.tsx
+++ b/apps/docs/components/LinkCard.tsx
@@ -14,7 +14,7 @@ export default function LinkCard({
 }) {
   return (
     <Link href={link || '#'}>
-      <a className="border-scale-200 hover:border-brand-900 dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
+      <a className="border-scale-200 hover:border-brand dark:bg-scale-400 m-4 w-full cursor-pointer rounded-md border p-4 shadow-sm hover:shadow-2xl lg:w-2/5">
         {description ? (
           <>
             <h4 className="m-0 mb-4 p-0 text-base font-semibold">{title}</h4>
diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 32f1b4f73db..6550b0f24ce 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -29,11 +29,7 @@ const Footer = () => (
             {Icon && <Icon width={16} height={16} />}
             <p>{text}</p>
             <Link href={url} passHref>
-              <a
-                className="text-brand-900 hover:underline"
-                target="_blank"
-                rel="noreferrer noopener"
-              >
+              <a className="text-brand hover:underline" target="_blank" rel="noreferrer noopener">
                 {ctaLabel}
               </a>
             </Link>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 66179adaece..f12d0ecd7f8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -72,12 +72,6 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
       href: '/guides/platform',
       level: 'platform',
     },
-    {
-      label: 'Resources',
-      icon: 'resources',
-      href: '/guides/resources',
-      level: 'resources',
-    },
     {
       label: 'Self-Hosting',
       icon: 'self-hosting',
@@ -130,7 +124,25 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
       community: true,
     },
     {
-      label: 'Tools',
+      label: 'Resources',
+    },
+    {
+      label: 'CLI Commands',
+      icon: 'reference-cli',
+      href: '/reference/cli/introduction',
+      level: 'reference_javascript',
+    },
+    {
+      label: 'Management API',
+      icon: 'reference-api',
+      href: '/reference/api/introduction',
+      level: 'reference_javascript',
+    },
+    {
+      label: 'Guides and Examples',
+      icon: 'resources',
+      href: '/guides/resources',
+      level: 'resources',
     },
     {
       label: 'Integrations',
@@ -139,12 +151,6 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
       href: 'https://supabase.com/partners/integrations',
       level: 'integrations',
     },
-    {
-      label: 'Management API',
-      icon: 'reference-api',
-      href: '/reference/api/introduction',
-      level: 'reference_javascript',
-    },
   ],
   [
     {
@@ -550,6 +556,10 @@ export const database: NavMenuConstant = {
       name: 'Postgres Guides',
       url: undefined,
       items: [
+        {
+          name: 'Analyzing efficiency and performance',
+          url: '/guides/database/inspect',
+        },
         {
           name: 'JSON and unstructured data',
           url: '/guides/database/json',
@@ -663,10 +673,23 @@ export const database: NavMenuConstant = {
           name: 'RUM: inverted index for full-text search',
           url: '/guides/database/extensions/rum',
         },
+      ],
+    },
+    {
+      name: 'Foreign Data Wrappers',
+      url: undefined,
+      items: [
+        { name: 'Overview', url: '/guides/database/extensions/wrappers/overview' },
+        { name: 'Connecting to Airtable', url: '/guides/database/extensions/wrappers/airtable' },
+        { name: 'Connecting to AWS S3', url: '/guides/database/extensions/wrappers/s3' },
+        { name: 'Connecting to BigQuery', url: '/guides/database/extensions/wrappers/bigquery' },
         {
-          name: 'wrappers: 3rd Party Integrations',
-          url: '/guides/database/extensions/wrappers',
+          name: 'Connecting to ClickHouse',
+          url: '/guides/database/extensions/wrappers/clickhouse',
         },
+        { name: 'Connecting to Firebase', url: '/guides/database/extensions/wrappers/firebase' },
+        { name: 'Connecting to Logflare', url: '/guides/database/extensions/wrappers/logflare' },
+        { name: 'Connecting to Stripe', url: '/guides/database/extensions/wrappers/stripe' },
       ],
     },
     {
@@ -897,6 +920,10 @@ export const ai: NavMenuConstant = {
       items: [
         { name: 'Developing locally with Vecs', url: '/guides/ai/vecs-python-client' },
         { name: 'Creating and managing collections', url: '/guides/ai/quickstarts/hello-world' },
+        {
+          name: 'Generate Embeddings',
+          url: '/guides/ai/quickstarts/generate-text-embeddings',
+        },
         { name: 'Text Deduplication', url: '/guides/ai/quickstarts/text-deduplication' },
         { name: 'Face similarity search', url: '/guides/ai/quickstarts/face-similarity' },
       ],
@@ -983,16 +1010,34 @@ export const supabase_cli: NavMenuConstant = {
   title: 'Local Dev / CLI',
   url: '/guides/cli',
   items: [
-    { name: 'Getting started', url: '/guides/cli' },
-    { name: 'Local Development', url: '/guides/cli/local-development' },
-    { name: 'Managing environments', url: '/guides/cli/managing-environments' },
+    { name: 'Overview', url: '/guides/cli' },
     {
-      name: 'Managing config and secrets',
-      url: '/guides/cli/managing-config',
+      name: 'Using the CLI',
+      url: undefined,
+      items: [
+        { name: 'Getting started', url: '/guides/cli/getting-started' },
+        { name: 'CLI Configuration', url: '/guides/cli/config' },
+      ],
     },
     {
-      name: 'Testing emails locally',
-      url: '/guides/cli/testing-emails',
+      name: 'Developing with Supabase',
+      url: undefined,
+      items: [
+        { name: 'Local Development', url: '/guides/cli/local-development' },
+        { name: 'Managing environments', url: '/guides/cli/managing-environments' },
+        {
+          name: 'Managing config and secrets',
+          url: '/guides/cli/managing-config',
+        },
+        {
+          name: 'Seeding your database',
+          url: '/guides/cli/seeding-your-database',
+        },
+        {
+          name: 'Testing and linting',
+          url: '/guides/cli/testing-and-linting',
+        },
+      ],
     },
     {
       name: 'GitHub Action',
@@ -1002,14 +1047,14 @@ export const supabase_cli: NavMenuConstant = {
           name: 'Generate types from your database',
           url: '/guides/cli/github-action/generating-types',
         },
-      ],
-    },
-    {
-      name: 'Reference',
-      url: undefined,
-      items: [
-        { name: 'Commands', url: '/reference/cli/introduction' },
-        { name: 'Configuration', url: '/reference/cli/config' },
+        {
+          name: 'Automated testing',
+          url: '/guides/cli/github-action/testing',
+        },
+        {
+          name: 'Backup your database',
+          url: '/guides/cli/github-action/backups',
+        },
       ],
     },
   ],
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
index deb8caf1f17..8c88d731560 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -23,7 +23,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
     return (
       <li key={id} className="function-link-item text-scale-1000 leading-3">
         <Link href={`#${id}`} passHref>
-          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
+          <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand flex gap-3">
             {icon && <img className="w-3" src={`${router.basePath}${icon}`} />}
             {title}
           </a>
@@ -100,7 +100,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
           <a
             className={[
               'flex items-center gap-1 text-xs group mb-3',
-              'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+              'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
             ].join(' ')}
           >
             <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index f264a4112b7..0d390a0e6af 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -19,7 +19,7 @@ const HeaderLink = React.memo(function HeaderLink(props: {
       className={[
         ' ',
         !props.title && 'capitalize',
-        props.url === router.pathname ? 'text-brand-900' : 'hover:text-brand-900 text-scale-1200',
+        props.url === router.pathname ? 'text-brand' : 'hover:text-brand text-scale-1200',
       ].join(' ')}
     >
       {props.title ?? props.id}
@@ -68,7 +68,7 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
               'flex items-center gap-2',
               'cursor-pointer transition text-sm',
               activeItem
-                ? 'text-brand-900 font-medium'
+                ? 'text-brand font-medium'
                 : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
             ].join(' ')}
             parent={props.subItem.parent}
@@ -97,8 +97,8 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
                       className={[
                         'cursor-pointer transition text-sm',
                         subSubItem.url === router.pathname
-                          ? 'text-brand-900'
-                          : 'hover:text-brand-900 text-scale-1000',
+                          ? 'text-brand'
+                          : 'hover:text-brand text-scale-1000',
                       ].join(' ')}
                     >
                       {subSubItem.name}
@@ -124,7 +124,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
           className={[
             'cursor-pointer transition text-sm',
             props.url === router.pathname
-              ? 'text-brand-900'
+              ? 'text-brand'
               : 'hover:text-scale-1200 dark:hover:text-scale-1100 text-scale-1000',
           ].join(' ')}
         >
@@ -152,7 +152,7 @@ const Content = (props) => {
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-brand-900 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-brand hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
@@ -166,7 +166,7 @@ const Content = (props) => {
 
       <Link href={menu.url ?? ''} passHref>
         <a>
-          <div className="flex items-center gap-3 my-3 text-brand-900">
+          <div className="flex items-center gap-3 my-3 text-brand">
             <HomeMenuIconPicker icon={menu.icon} />
             <HeaderLink title={menu.title} url={menu.url} id={id} />
           </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index a280bf07da6..8c2007c78b3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -16,7 +16,7 @@ import { deepFilterSections } from './NavigationMenu.utils'
 
 const HeaderLink = React.memo(function HeaderLink(props: any) {
   return (
-    <span className={['text-base text-brand-1200 ', !props.title && 'capitalize'].join(' ')}>
+    <span className={['text-base text-brand-600 ', !props.title && 'capitalize'].join(' ')}>
       {props.title ?? props.id}
     </span>
   )
@@ -64,7 +64,7 @@ const FunctionLink = React.memo(function FunctionLink({
         className={cn(
           'cursor-pointer transition text-sm hover:text-scale-1200 gap-3 relative',
           isParent ? 'flex justify-between' : 'leading-3',
-          active ? 'text-brand-900' : 'text-scale-1000'
+          active ? 'text-brand' : 'text-scale-1000'
         )}
       >
         {icon && <Image width={16} height={16} alt={icon} src={`${router.basePath}${icon}`} />}
@@ -72,7 +72,7 @@ const FunctionLink = React.memo(function FunctionLink({
         {active && !isSubItem && (
           <div
             aria-hidden="true"
-            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-1000"
+            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-600"
           ></div>
         )}
         {isParent && (
@@ -180,7 +180,7 @@ const NavigationMenuRefListItems = ({
         <a
           className={[
             'flex items-center gap-1 text-xs group mb-3',
-            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-1200 hover:cursor-pointer ',
+            'text-base transition-all duration-200 text-scale-1100 hover:text-brand-600 hover:cursor-pointer ',
           ].join(' ')}
         >
           <div className="relative w-2">
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index bd080d8e7c9..bba13421321 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -56,7 +56,7 @@ const TopNavBarRef: FC = () => {
   }
 
   return (
-    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-scale-200/90">
+    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg bg-opacity-75">
       <div className="px-5 max-w-7xl mx-auto flex gap-3 justify-between items-center h-full">
         <div className={['lg:hidden'].join(' ')}>
           <Link href="/">
@@ -68,7 +68,7 @@ const TopNavBarRef: FC = () => {
                 height={24}
                 alt="Supabase Logo"
               />
-              <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+              <span className="font-mono text-sm font-medium text-brand">DOCS</span>
             </a>
           </Link>
           {/* {router.asPath.includes('/reference/') && <RefSwitcher />} */}
@@ -82,21 +82,22 @@ const TopNavBarRef: FC = () => {
               group
               items-center
               justify-between
-              bg-scaleA-200
+              bg-surface-100
+              bg-opacity-75
+              hover:bg-surface-200
+              hover:bg-opacity-100
               border
               transition
-              hover:border-scale-600
-              hover:bg-scaleA-300
-              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded"
+              border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded
+              text-lighter
+              "
             >
               <div className="flex items-center space-x-2">
-                <IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
-                <p className="hidden md:flex text-scale-1100 text-sm group-hover:text-scale-1200 transition">
-                  Search docs...
-                </p>
+                <IconSearch className="" size={18} strokeWidth={2} />
+                <p className="hidden md:flex text-sm">Search docs...</p>
               </div>
               <div className="hidden md:flex items-center space-x-1">
-                <div className="text-scale-1200 md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
+                <div className="md:flex items-center justify-center h-5 w-10 border rounded bg-surface-300 gap-1">
                   <IconCommand size={12} strokeWidth={1.5} />
                   <span className="text-[12px]">K</span>
                 </div>
diff --git a/apps/docs/components/Navigation/SideBar.tsx b/apps/docs/components/Navigation/SideBar.tsx
index d679b7c7414..e76fa4954bf 100644
--- a/apps/docs/components/Navigation/SideBar.tsx
+++ b/apps/docs/components/Navigation/SideBar.tsx
@@ -83,7 +83,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                     'py-1.5 px-5 rounded text-sm transition',
                     `${
                       item.url === asPath
-                        ? 'bg-scale-200 text-brand-900'
+                        ? 'bg-scale-200 text-brand'
                         : 'text-scale-1100 hover:text-scale-1200'
                     }`,
                   ].join(' ')}
@@ -109,7 +109,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                   size={14}
                   strokeWidth={2}
                 />
-                <span className="text-scale-1200 text-sm group-hover:text-brand-900 transition">
+                <span className="text-scale-1200 text-sm group-hover:text-brand transition">
                   {group.label}
                 </span>
               </Accordion.Trigger>
@@ -124,7 +124,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               'py-1.5 px-5 rounded text-sm transition',
                               `${
                                 section.url === asPath
-                                  ? 'bg-scale-200 text-brand-900'
+                                  ? 'bg-scale-200 text-brand'
                                   : 'text-scale-1100 hover:text-scale-1200'
                               }`,
                             ].join(' ')}
@@ -150,7 +150,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                               size={14}
                               strokeWidth={2}
                             />
-                            <span className="text-scale-1200 text-sm group-hover:text-brand-900 transition">
+                            <span className="text-scale-1200 text-sm group-hover:text-brand transition">
                               {section.name}
                             </span>
                           </Accordion.Trigger>
@@ -164,7 +164,7 @@ const SideBar = ({ menuItems = [] }: { menuItems: any }) => {
                                       'py-1.5 ml-4 px-5 rounded text-sm transition',
                                       `${
                                         item.url === asPath
-                                          ? 'bg-scale-200 text-brand-900'
+                                          ? 'bg-scale-200 text-brand'
                                           : 'text-scale-1100 hover:text-scale-1200'
                                       }`,
                                     ].join(' ')}
diff --git a/apps/docs/components/Pagination.tsx b/apps/docs/components/Pagination.tsx
index 97221d63963..ed6b6e510e5 100644
--- a/apps/docs/components/Pagination.tsx
+++ b/apps/docs/components/Pagination.tsx
@@ -27,7 +27,7 @@ const Pagination = ({ currentPage, totalCount }: { currentPage: number; totalCou
             <Link href={`/discussions?page=${page}`}>
               <a
                 className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
-                  currentPage === page ? 'bg-brand-900' : 'bg-scale-300'
+                  currentPage === page ? 'bg-brand' : 'bg-scale-300'
                 }`}
               >
                 {page}
diff --git a/apps/docs/components/StepHikeCompact/index.tsx b/apps/docs/components/StepHikeCompact/index.tsx
index 1daa76568d1..3b6614351e5 100644
--- a/apps/docs/components/StepHikeCompact/index.tsx
+++ b/apps/docs/components/StepHikeCompact/index.tsx
@@ -1,5 +1,6 @@
 //import { Step } from 'next-seo/lib/types'
-import React, { FC } from 'react'
+import { FC } from 'react'
+import { cn } from 'ui'
 
 interface IStep {
   title: string
@@ -13,7 +14,9 @@ interface IStepHikeCompactSubcomponents {
 }
 interface IDetails {
   title?: string
+  fullWidth?: boolean
 }
+
 interface ICode {}
 
 interface IStepHikeCompact {
@@ -74,9 +77,9 @@ const Step: FC<IStep> = ({ children, title, step }) => {
   )
 }
 
-const Details: FC<IDetails> = ({ children, title }) => {
+const Details: FC<IDetails> = ({ children, title, fullWidth = false }) => {
   return (
-    <div className="col-span-5 ml-12 lg:ml-0">
+    <div className={cn(fullWidth ? 'col-span-12' : 'col-span-5', 'ml-12', 'lg:ml-0')}>
       <h3 className="mt-0 text-scale-1200 text-base">{title}</h3>
       {children}
     </div>
diff --git a/apps/docs/components/TableOfContents.tsx b/apps/docs/components/TableOfContents.tsx
index 8be2a831646..297ade47499 100644
--- a/apps/docs/components/TableOfContents.tsx
+++ b/apps/docs/components/TableOfContents.tsx
@@ -69,7 +69,7 @@ const TableOfContents: FC<Props> = ({ toc, video }) => {
               <li key={i} id={item.lvl} style={{ marginLeft: `${(item.lvl - 2) * 1}rem` }}>
                 <a
                   href={`#${formatSlug(item.slug)}`}
-                  className="text-scale-1000 hover:text-brand-900 transition-colors"
+                  className="text-scale-1000 hover:text-brand transition-colors"
                   dangerouslySetInnerHTML={{ __html: formatTOCHeader(removeAnchor(item.content)) }}
                 />
               </li>
diff --git a/apps/docs/components/reference/CLICommandSection.tsx b/apps/docs/components/reference/CLICommandSection.tsx
index 400b3fa7287..792297211de 100644
--- a/apps/docs/components/reference/CLICommandSection.tsx
+++ b/apps/docs/components/reference/CLICommandSection.tsx
@@ -96,7 +96,7 @@ const CliCommandSection = (props) => {
                       </div>
                       <a
                         href={`#${subcommand}`}
-                        className="transition text-scale-1100 hover:text-brand-900"
+                        className="transition text-scale-1100 hover:text-brand"
                       >
                         $ {subcommand.replace(/-/g, ' ')}
                       </a>
diff --git a/apps/docs/components/reference/OldVersionAlert.tsx b/apps/docs/components/reference/OldVersionAlert.tsx
index a9c04d535d8..4a5a601966a 100644
--- a/apps/docs/components/reference/OldVersionAlert.tsx
+++ b/apps/docs/components/reference/OldVersionAlert.tsx
@@ -27,7 +27,7 @@ const OldVersionAlert = ({ sections }: OldVersionAlertProps) => {
         You&apos;re viewing an older version of this library.
         <br />
         <Link href={latestVersionUrl}>
-          <a className="underline decoration-brand-700 underline-offset-4 decoration-1">
+          <a className="underline decoration-brand-400 underline-offset-4 decoration-1">
             Switch to the latest
           </a>
         </Link>
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 2be99d3e0d7..88c06beda04 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -174,7 +174,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
                                       <div className="bg-scale-300 border rounded prose max-w-none">
                                         <div className="bg-scale-200 px-5 py-2">
                                           <div className="flex gap-2 items-center">
-                                            <div className="text-brand-900">
+                                            <div className="text-brand">
                                               <IconDatabase size={16} />
                                             </div>
                                             <h5 className="text-xs text-scale-1200">
diff --git a/apps/docs/docs/ref/csharp/introduction.mdx b/apps/docs/docs/ref/csharp/introduction.mdx
index 18a06f5c963..49d483975c7 100644
--- a/apps/docs/docs/ref/csharp/introduction.mdx
+++ b/apps/docs/docs/ref/csharp/introduction.mdx
@@ -12,20 +12,18 @@ hideTitle: true
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
-  This reference documents every object and method available in Supabase's C# library,
-  [supabase-csharp](https://www.nuget.org/packages/supabase-csharp). You can use supabase-csharp to
-  interact with your Postgres database, listen to database changes, invoke Deno Edge Functions,
-  build login and user management functionality, and manage large files.
+  This reference documents every object and method available in Supabase's C# library, [supabase-csharp](https://www.nuget.org/packages/supabase-csharp). You can use supabase-csharp to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
-  <p>The C# client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
-
-<p>
-  Huge thanks to official maintainer, [Joseph Schultz](https://github.com/acupofjose), and to [Ben
-  Randall](https://github.com/veleek) and [Rhuan Barros](https://github.com/rhuanbarros) for their
-  help.
-</p>
+  <p>
+    The C# client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
+  </p>
 
+  <p>
+    Huge thanks to official maintainer, [Joseph Schultz](https://github.com/acupofjose), and to [Ben Randall](https://github.com/veleek) and [Rhuan Barros](https://github.com/rhuanbarros) for their help.
+  </p>
 </div>
diff --git a/apps/docs/docs/ref/dart/introduction.mdx b/apps/docs/docs/ref/dart/introduction.mdx
index b99332b670d..5e4b88648b3 100644
--- a/apps/docs/docs/ref/dart/introduction.mdx
+++ b/apps/docs/docs/ref/dart/introduction.mdx
@@ -12,13 +12,9 @@ hideTitle: true
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
-
-This reference documents every object and method available in Supabase's Flutter
-library, [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can
-use supabase-flutter to interact with your Postgres database, listen to database changes, invoke
-Deno Edge Functions, build login and user management functionality, and manage large files.
-
-We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects.
-
+  This reference documents every object and method available in Supabase's Flutter library, [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can use supabase-flutter to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+  
+  We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects.
 </div>
diff --git a/apps/docs/docs/ref/dart/v0/introduction.mdx b/apps/docs/docs/ref/dart/v0/introduction.mdx
index 1d1f27212ce..43aaaee0333 100644
--- a/apps/docs/docs/ref/dart/v0/introduction.mdx
+++ b/apps/docs/docs/ref/dart/v0/introduction.mdx
@@ -12,17 +12,12 @@ hideTitle: true
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
-
-<Admonition type="caution">
-  You're viewing the docs for an older version of the `supabase-flutter` library. Learn how to
-  [upgrade to the latest version](/docs/reference/dart/v0/upgrade-guide).
-</Admonition>
-
-This reference documents every object and method available in Supabase's Flutter library, [supabase-flutter](https://pub.dev/packages/supabase_flutter).
-You can use supabase-flutter to interact with your Postgres database, listen to database changes, invoke
-Deno Edge Functions, build login and user management functionality, and manage large files.
-
-We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects.
-
+  <Admonition type="caution">
+    You're viewing the docs for an older version of the `supabase-flutter` library. Learn how to [upgrade to the latest version](/docs/reference/dart/v0/upgrade-guide).
+  </Admonition>
+  This reference documents every object and method available in Supabase's Flutter library, [supabase-flutter](https://pub.dev/packages/supabase_flutter). You can use supabase-flutter to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+  
+  We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Flutter projects.
 </div>
diff --git a/apps/docs/docs/ref/javascript/introduction.mdx b/apps/docs/docs/ref/javascript/introduction.mdx
index b22c1b371ff..07c889bf1c7 100644
--- a/apps/docs/docs/ref/javascript/introduction.mdx
+++ b/apps/docs/docs/ref/javascript/introduction.mdx
@@ -7,14 +7,12 @@ hideTitle: true
 <div className="flex items-start gap-6 not-prose" id="introduction">
   <IconMenuJavascript width={35} height={35} />
   <div className="flex flex-col gap-2">
-    <h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
+    <h1 className="text-3xl text-scale-1200 m-0">JavaScript Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
-  This reference documents every object and method available in Supabase's isomorphic JavaScript
-  library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to
-  database changes, invoke Deno Edge Functions, build login and user management functionality, and
-  manage large files.
+  This reference documents every object and method available in Supabase's isomorphic JavaScript library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
 </div>
diff --git a/apps/docs/docs/ref/javascript/typescript-support.mdx b/apps/docs/docs/ref/javascript/typescript-support.mdx
index 51162da7b93..dd555315a84 100644
--- a/apps/docs/docs/ref/javascript/typescript-support.mdx
+++ b/apps/docs/docs/ref/javascript/typescript-support.mdx
@@ -1,23 +1,26 @@
 ---
 id: typescript-support
-title: Typescript Support
+title: TypeScript Support
 ---
 
-`supabase-js` supports Typescript.
+`supabase-js` has TypeScript support for type inference, autocompletion, type-safe queries, and more.
+
+With TypeScript, `supabase-js` detects things like `not null` constraints and [generated columns](https://www.postgresql.org/docs/current/ddl-generated-columns.html). Nullable columns are typed as `T | null` when you select the column. Generated columns will show a type error when you insert to it.
+
+`supabase-js` also detects relationships between tables. A foreign table with one-to-many relationship is typed as `T[]`. Likewise, a foreign table with many-to-one relationship is typed as `T | null`.
 
 ## Generating types
 
 <RefSubLayout.EducationRow>
   <RefSubLayout.Details>
 
-    You can use our CLI to generate types:
+    You can use the Supabase CLI to [generate the types](/docs/reference/cli/supabase-gen-types-typescript). You can also generate the types [from the dashboard](https://supabase.com/dashboard/project/_/api?page=tables-intro).
 
   </RefSubLayout.Details>
   <RefSubLayout.Examples>
 
     ```bash Terminal
-    supabase start
-    supabase gen types typescript --local > lib/database.types.ts
+    supabase gen types typescript --project-id abcdefghijklmnopqrst > database.types.ts
     ```
 
   </RefSubLayout.Examples>
@@ -26,25 +29,41 @@ title: Typescript Support
 <RefSubLayout.EducationRow>
   <RefSubLayout.Details>
 
-    These types are generated directly from your database.
-
-    There is a difference between `selects`, `inserts`, and `updates`, because often you will set default values in your database for specific columns.
-    With default values you do not need to send any data over the network, even if that column is a "required" field. Our type system is granular
-    enough to handle these situations.
+     These types are generated from your database schema. Given a table `public.movies`, the generated types will look like:
 
   </RefSubLayout.Details>
   <RefSubLayout.Examples>
 
-    Given a table `public.movies`, the definition will provide the following data:
+    ```sql
+    create table public.movies (
+      id bigint generated always as identity primary key,
+      name text not null,
+      data jsonb null
+    );
+    ```
 
-    ```ts /types.ts
-    interface Database {
+    ```ts ./database.types.ts
+    export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]
+
+    export interface Database {
       public: {
         Tables: {
           movies: {
-            Row: {} // The data expected to be returned from a "select" statement.
-            Insert: {} // The data expected passed to an "insert" statement.
-            Update: {} // The data expected passed to an "update" statement.
+            Row: {               // the data expected from .select()
+              id: number
+              name: string
+              data: Json | null
+            }
+            Insert: {            // the data to be passed to .insert()
+              id?: never         // generated columns must not be supplied
+              name: string       // `not null` columns with no default must be supplied
+              data?: Json | null // nullable columns can be omitted
+            }
+            Update: {            // the data to be passed to .update()
+              id?: never
+              name?: string      // `not null` columns are optional on .update()
+              data?: Json | null
+            }
           }
         }
       }
@@ -54,18 +73,18 @@ title: Typescript Support
   </RefSubLayout.Examples>
 </RefSubLayout.EducationRow>
 
-## Injecting type definitions
+## Using type definitions
 
 <RefSubLayout.EducationRow>
   <RefSubLayout.Details>
 
-    You can enrich the supabase client with the types you generated with Supabase.
+    You can supply the type definitions to `supabase-js` like so:
 
   </RefSubLayout.Details>
   <RefSubLayout.Examples>
     ```ts ./index.tsx
     import { createClient } from '@supabase/supabase-js'
-    import { Database } from 'lib/database.types'
+    import { Database } from './database.types'
 
     const supabase = createClient<Database>(
       process.env.SUPABASE_URL,
@@ -76,52 +95,94 @@ title: Typescript Support
   </RefSubLayout.Examples>
 </RefSubLayout.EducationRow>
 
-## Type hints
+## Helper types
+
+You can use the following helper types to make the TypeScript support easier to use.
 
 <RefSubLayout.EducationRow>
   <RefSubLayout.Details>
 
-    `supabase-js` always returns a `data` object (for success), and an `error` response (for unsuccessful requests).
-
-    This provides a simple interface to get the relevant types returned from any function:
+    Sometimes the generated types are not what you expect. For example, a view's column may show up as nullable when you expect it to be `not null`. Using [type-fest](https://github.com/sindresorhus/type-fest), you can override the types like so:
 
   </RefSubLayout.Details>
   <RefSubLayout.Examples>
-   ```ts
-    export async function getMovies() {
-      return await supabase.from('movies').select(`id, title`)
+    ```ts ./database-generated.types.ts
+    export type Json = // ...
+
+    export interface Database {
+      // ...
     }
+    ```
 
-    type MoviesResponse = Awaited<ReturnType<typeof getMovies>>
-    export type MoviesResponseSuccess = MoviesResponse['data']
-    export type MoviesResponseError = MoviesResponse['error']
+    ```ts ./database.types.ts
+    import { MergeDeep } from 'type-fest'
+    import { Database as DatabaseGenerated } from './database-generated.types'
+    export { Json } from './database-generated.types'
 
-    ````
-
-  </RefSubLayout.Examples>
-</RefSubLayout.EducationRow>
-
-## Nested tables
-
-<RefSubLayout.EducationRow>
-  <RefSubLayout.Details>
-    For advanced queries such as nested tables, you may want to construct your own types.
-  </RefSubLayout.Details>
-  <RefSubLayout.Examples>
-    ```ts ./index.ts
-      import supabase from '~/lib/supabase'
-      import type { Database } from '~/lib/database.types'
-
-      async function getMovies() {
-        return await supabase.from('movies').select('id, title, actors(\*)')
+    export type Database = MergeDeep<
+      DatabaseGenerated,
+      {
+        public: {
+          Views: {
+            movies_view: {
+              Row: {
+                // id is a primary key in public.movies, so it must be `not null`
+                id: number
+              }
+            }
+          }
+        }
       }
+    >
+    ```
 
-      type Actors = Database['public']['tables']['actors']['row']
-      type MoviesResponse = Awaited<ReturnType<typeof getMovies>>
-      type MoviesResponseSuccess = MoviesResponse['data'] & {
-      actors: Actors[]
-      }
+  </RefSubLayout.Examples>
+</RefSubLayout.EducationRow>
 
+<RefSubLayout.EducationRow>
+  <RefSubLayout.Details>
+
+    It's convenient to have shorthands for your most-used types.
+
+  </RefSubLayout.Details>
+  <RefSubLayout.Examples>
+    ```ts ./database.types.ts
+    export type Tables<T extends keyof Database['public']['Tables']> = Database['public']['Tables'][T]['Row']
+    export type Enums<T extends keyof Database['public']['Enums']> = Database['public']['Enums'][T]
+    // etc.
+    ```
+
+    ```ts ./index.ts
+    // Before 😕
+    let movie: Database['public']['Tables']['movies']['Row'] = // ...
+
+    // After 😍
+    let movie: Tables<'movies'>
+    ```
+
+  </RefSubLayout.Examples>
+</RefSubLayout.EducationRow>
+
+<RefSubLayout.EducationRow>
+  <RefSubLayout.Details>
+
+    `supabase-js` always returns a `data` object (for success), and an `error` object (for unsuccessful requests).
+
+    These helper types provide the result types from any query:
+
+  </RefSubLayout.Details>
+  <RefSubLayout.Examples>
+    ```ts
+    import { PostgrestError } from '@supabase/supabase-js'
+
+    export type DbResult<T> = T extends PromiseLike<infer U> ? U : never
+    export type DbResultOk<T> = T extends PromiseLike<{ data: infer U }> ? Exclude<U, null> : never
+    export type DbResultErr = PostgrestError
+    ```
+
+    ```ts
+    const query = supabase.from('movies').select(`id, title`)
+    const movies: DbResult<typeof query> = await query
     ```
 
   </RefSubLayout.Examples>
diff --git a/apps/docs/docs/ref/javascript/v1/introduction.mdx b/apps/docs/docs/ref/javascript/v1/introduction.mdx
index 8112558ffd6..6a3e4bde9bc 100644
--- a/apps/docs/docs/ref/javascript/v1/introduction.mdx
+++ b/apps/docs/docs/ref/javascript/v1/introduction.mdx
@@ -7,21 +7,18 @@ hideTitle: true
 <div className="flex items-start gap-6 not-prose" id="introduction">
   <IconMenuJavascript width={35} height={35} />
   <div className="flex flex-col gap-2">
-    <h1 className="text-3xl text-scale-1200 m-0">Javascript Client Library</h1>
+    <h1 className="text-3xl text-scale-1200 m-0">JavaScript Client Library</h1>
     <h2 className="text-base font-mono text-scale-1100">@supabase/supabase-js</h2>
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
+  <Admonition type="caution">
+    You're viewing the docs for an older version of the `supabase-js` library. Learn how to [upgrade to the latest version](/docs/reference/javascript/v1/upgrade-guide).
+  </Admonition>
 
-<Admonition type="caution">
-  You're viewing the docs for an older version of the `supabase-js` library. Learn how to [upgrade
-  to the latest version](/docs/reference/javascript/v1/upgrade-guide).
-</Admonition>
-
-This reference documents every object and method available in Supabase's isomorphic JavaScript
-library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to
-database changes, invoke Deno Edge Functions, build login and user management functionality, and
-manage large files.
-
+  <p>
+    This reference documents every object and method available in Supabase's isomorphic JavaScript library, supabase-js. You can use supabase-js to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+  </p>
 </div>
diff --git a/apps/docs/docs/ref/swift/introduction.mdx b/apps/docs/docs/ref/swift/introduction.mdx
index 0d08cbed84f..ead2719a10d 100644
--- a/apps/docs/docs/ref/swift/introduction.mdx
+++ b/apps/docs/docs/ref/swift/introduction.mdx
@@ -12,16 +12,19 @@ hideTitle: true
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
-This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
-
-We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects.
-
+  <p>
+    This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+  </p>
+  <p>
+    We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects.
+  </p>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
   <p>The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
 
-<p>Huge thanks to official maintainer, [Maail](https://github.com/maail).</p>
-
+  <p>Huge thanks to official maintainer, [Maail](https://github.com/maail).</p>
 </div>
diff --git a/apps/docs/docs/reference/csharp/introduction.mdx b/apps/docs/docs/reference/csharp/introduction.mdx
index 3eb96ba2925..a65afeeb294 100644
--- a/apps/docs/docs/reference/csharp/introduction.mdx
+++ b/apps/docs/docs/reference/csharp/introduction.mdx
@@ -12,9 +12,7 @@ hideTitle: true
   </div>
 </div>
 
+{/* prettier-ignore */}
 <div className="max-w-xl">
-  This reference documents every object and method available in Supabase's C#
-  library, [supabase-csharp](https://www.nuget.org/packages/supabase-csharp). You can
-  use supabase-csharp to interact with your Postgres database, listen to database changes, invoke
-  Deno Edge Functions, build login and user management functionality, and manage large files.
+  This reference documents every object and method available in Supabase's C# library, [supabase-csharp](https://www.nuget.org/packages/supabase-csharp). You can use supabase-csharp to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
 </div>
diff --git a/apps/docs/docs/reference/dart.mdx b/apps/docs/docs/reference/dart.mdx
index 88095e50392..c947324bc8e 100644
--- a/apps/docs/docs/reference/dart.mdx
+++ b/apps/docs/docs/reference/dart.mdx
@@ -17,8 +17,8 @@ You can use the `supabase-flutter` library to:
 
 ## For non-Flutter projects
 
-We also have [supabase-dart](https://github.com/supabase-community/supabase-dart) for non-Flutter Dart projects, such as server-side Dart or Angular-Dart.
-supabase-dart shares most of the APIs with supabase-flutter without being dependent on Flutter so that you can use Supabase anywhere you can run Dart!
+{/* prettier-ignore */}
+We also have [supabase-dart](https://github.com/supabase-community/supabase-dart) for non-Flutter Dart projects, such as server-side Dart or Angular-Dart. supabase-dart shares most of the APIs with supabase-flutter without being dependent on Flutter so that you can use Supabase anywhere you can run Dart!
 
 ## Additional Links
 
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 59bead2a64d..94cd0ae0631 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -228,7 +228,7 @@ const HeaderLogo = memo(function HeaderLogo() {
           height={24}
           alt="Supabase Logo"
         />
-        <span className="font-mono text-sm font-medium text-brand-900">DOCS</span>
+        <span className="font-mono text-sm font-medium text-brand">DOCS</span>
       </a>
     </Link>
   )
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 1363448853c..130e76e2510 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -115,7 +115,7 @@ const Layout: FC<Props> = (props) => {
             ].join(' ')}
           >
             {props.meta.breadcrumb && (
-              <p className="text-brand-900 tracking-wider mb-3">{props.meta.breadcrumb}</p>
+              <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
             )}
             <article
               ref={articleRef}
diff --git a/apps/docs/layouts/ref/RefSubLayout.tsx b/apps/docs/layouts/ref/RefSubLayout.tsx
index dc700bc4858..29324c13fbe 100644
--- a/apps/docs/layouts/ref/RefSubLayout.tsx
+++ b/apps/docs/layouts/ref/RefSubLayout.tsx
@@ -107,7 +107,7 @@ const StickyHeader: FC<StickyHeader> = ({ icon, ...props }) => {
   return (
     <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">
+        <div className="w-8 h-8 bg-brand-300 rounded flex items-center justify-center">
           <Image width={16} height={16} alt={icon} src={`${icon}.svg`} />
         </div>
       )}
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index 47557e96b1b..65ded8cf428 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -61,10 +61,10 @@ const Layout: FC<Props> = (props: Props) => {
         ].join(' ')}
       >
         <div>
-          <p className="text-brand-900 tracking-wider">Tutorials</p>
+          <p className="text-brand tracking-wider">Tutorials</p>
           <article className={['prose dark:prose-dark ', 'max-w-none'].join(' ')}>
             <h1>{props.meta.title}</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-16"></div>
+            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-16"></div>
 
             <MDXProvider components={components} children={props.children} />
           </article>
diff --git a/apps/docs/lib/mdx/plugins/remarkTabs.ts b/apps/docs/lib/mdx/plugins/remarkTabs.ts
new file mode 100644
index 00000000000..3562c2a6eca
--- /dev/null
+++ b/apps/docs/lib/mdx/plugins/remarkTabs.ts
@@ -0,0 +1,138 @@
+import { Content, Paragraph, Parent } from 'mdast'
+import { MdxJsxFlowElement } from 'mdast-util-mdx'
+import { Node } from 'unist'
+import { visit } from 'unist-util-visit'
+
+/**
+ * Transforms PyMdown Tabs to Supabase Tabs.
+ *
+ * https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/
+ */
+const remarkPyMdownTabs = function () {
+  return function transformer(root: Parent) {
+    visit(root, 'paragraph', (node: Paragraph, nodeIndex: number, parent: Parent) => {
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i]
+        if (child.type !== 'text') {
+          continue
+        }
+
+        // Look for 3 '=', followed by an optionally quoted title,
+        // followed by optional newlines of text
+        const match = child.value.match(/^\n*=== ("?)(.+)\1\n?((?:.|\n)*)/)
+
+        if (!match) {
+          continue
+        }
+
+        // Extract the tab title along with the remaining text
+        const [, , title, value] = match
+
+        // Rewrite the node's value to remove the tab syntax
+        child.value = value
+
+        // Extract sibling nodes that should be linked to this tab
+        const siblingsToNest = extractLinkedSiblings(parent, node, nodeIndex)
+
+        const children: any[] = [...node.children.slice(i), ...siblingsToNest]
+
+        const tabPanelElement: MdxJsxFlowElement = {
+          type: 'mdxJsxFlowElement',
+          name: 'TabPanel',
+          attributes: [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'id',
+              value: title,
+            },
+            {
+              type: 'mdxJsxAttribute',
+              name: 'label',
+              value: title,
+            },
+          ],
+          children,
+        }
+
+        let nodesAdded = 0
+        const previousNode = parent.children[nodeIndex - 1]
+
+        if (previousNode?.type === 'mdxJsxFlowElement' && previousNode.name === 'Tabs') {
+          // Add TabPanel to existing Tabs component
+          previousNode.children.push(tabPanelElement)
+
+          // Remove this node
+          parent.children.splice(nodeIndex, 1)
+          nodesAdded--
+        } else {
+          // Create new Tabs components and add TabPanel
+          const tabsElement: MdxJsxFlowElement = {
+            type: 'mdxJsxFlowElement',
+            name: 'Tabs',
+            attributes: [
+              {
+                type: 'mdxJsxAttribute',
+                name: 'scrollable',
+              },
+              {
+                type: 'mdxJsxAttribute',
+                name: 'size',
+                value: 'small',
+              },
+              {
+                type: 'mdxJsxAttribute',
+                name: 'type',
+                value: 'underlined',
+              },
+            ],
+            children: [tabPanelElement],
+          }
+
+          // Overwrite this paragraph node with Tabs component
+          parent.children.splice(nodeIndex, 1, tabsElement)
+        }
+
+        // If this wasn't the first child of the paragraph, create
+        // a new paragraph before this with the previous text children
+        if (i > 0) {
+          const previousChildren = node.children.slice(0, i)
+          const paragraph: Paragraph = {
+            type: 'paragraph',
+            children: previousChildren,
+          }
+          parent.children.splice(nodeIndex, 0, paragraph)
+
+          nodesAdded++
+        }
+
+        // Return the correct index for the next visit, since
+        // we may have added or removed an element in the array
+        return nodeIndex + nodesAdded
+      }
+    })
+  }
+}
+
+/**
+ * Identifies sibling nodes that should be linked to this admonition
+ * based on their indent level (ie. 4 spaces).
+ *
+ * Iterates through proceeding siblings until one is found that is
+ * not indented relative to the original node.
+ *
+ * Splices the discovered siblings out of the original parent and returns them.
+ */
+function extractLinkedSiblings(parent: Parent, node: Node, index: number, indentAmount = 4) {
+  const { column } = node.position.start
+
+  let nextSibling: Content
+  let i = index
+
+  do {
+    nextSibling = parent.children[++i]
+  } while (nextSibling?.position && nextSibling.position.start.column === column + indentAmount)
+
+  return parent.children.splice(index + 1, i - index - 1)
+}
+
+export default remarkPyMdownTabs
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 5d79d59dddd..e3710ea9ba6 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -97,6 +97,7 @@
     "remark-admonitions": "^1.2.1",
     "remark-gfm": "^3.0.1",
     "remark-slug": "^7.0.1",
+    "remark-emoji": "^3.1.2",
     "shiki": "^0.11.1",
     "sse.js": "^0.6.1",
     "ui": "*",
diff --git a/apps/docs/pages/guides/ai.mdx b/apps/docs/pages/guides/ai.mdx
index 2153bdde029..3efb8e9b537 100644
--- a/apps/docs/pages/guides/ai.mdx
+++ b/apps/docs/pages/guides/ai.mdx
@@ -14,6 +14,7 @@ The toolkit includes:
 
 - A [vector store](/docs/guides/ai/vector-columns) and embeddings support using Postgres and pgvector.
 - A [Python client](/docs/guides/ai/vecs-python-client) for managing unstructured embeddings.
+- An [embedding generation](/docs/guides/ai/quickstarts/generate-text-embeddings) process using open source models directly in Edge Functions.
 - [Database migrations](/docs/guides/ai/examples/headless-vector-search#prepare-your-database) for managing structured embeddings.
 - Integrations with all popular AI providers, such as [OpenAI](/docs/guides/ai/examples/openai), [Hugging Face](/docs/guides/ai/hugging-face), [LangChain](/docs/guides/ai/langchain), and more.
 
diff --git a/apps/docs/pages/guides/ai/concepts.mdx b/apps/docs/pages/guides/ai/concepts.mdx
index c35a6e72aed..27d71515f33 100644
--- a/apps/docs/pages/guides/ai/concepts.mdx
+++ b/apps/docs/pages/guides/ai/concepts.mdx
@@ -7,7 +7,7 @@ export const meta = {
   sidebar_label: 'Concepts',
 }
 
-Embeddings are a core concept when building AI and vector applications.
+Embeddings are core to many AI and vector applications. This guide covers these concepts. If you prefer to get started right away, see our guide on [Generating Embeddings](/docs/guides/ai/quickstarts/generate-text-embeddings).
 
 ## What are embeddings?
 
@@ -48,7 +48,7 @@ In this example we only have 2 dimensions: the X and Y axis. In reality, we woul
 
 ## Using embeddings
 
-Compared to our 2-dimensional example above, most embedding models will output many more dimensions. For example OpenAI's `text-embedding-ada-002` model outputs 1536 dimensions.
+Compared to our 2-dimensional example above, most embedding models will output many more dimensions. For example the open source [`gte-small`](https://huggingface.co/Supabase/gte-small) model outputs 384 dimensions.
 
 Why is this useful? Once we have generated embeddings on multiple texts, it is trivial to calculate how similar they are using vector math operations like cosine distance. A common use case for this is search. Your process might look something like this:
 
diff --git a/apps/docs/pages/guides/ai/engineering-for-scale.mdx b/apps/docs/pages/guides/ai/engineering-for-scale.mdx
index 0621207930f..871d0a5059c 100644
--- a/apps/docs/pages/guides/ai/engineering-for-scale.mdx
+++ b/apps/docs/pages/guides/ai/engineering-for-scale.mdx
@@ -120,7 +120,7 @@ We can now create a foreign table to access the data in our secondary project.
 ```sql
 create foreign table docs (
   id text not null,
-  embedding vector(1536),
+  embedding vector(384),
   metadata jsonb,
   url text
 )
diff --git a/apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx b/apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx
index 017eb68ec95..a568300d26a 100644
--- a/apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx
+++ b/apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx
@@ -51,7 +51,7 @@ Let's prepare the database schema. We can use the "OpenAI Vector Search" quickst
 
     <StepHikeCompact.Details title="Set up Supabase locally">
 
-    Make sure you have the latest version of the [Supabase CLI installed]().
+    Make sure you have the latest version of the [Supabase CLI installed](/docs/guides/cli/getting-started).
 
     Initialize Supabase in the root directory of your app.
 
diff --git a/apps/docs/pages/guides/ai/hugging-face.mdx b/apps/docs/pages/guides/ai/hugging-face.mdx
index c198e7b2349..9bf295d42d5 100644
--- a/apps/docs/pages/guides/ai/hugging-face.mdx
+++ b/apps/docs/pages/guides/ai/hugging-face.mdx
@@ -2,14 +2,18 @@ import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
   id: 'ai-hugging-face',
-  title: 'Hugging Face',
+  title: 'Hugging Face Inference API',
   description: 'Learn how to integrate hugging face models with Supabase',
   sidebar_label: 'Hugging Face',
 }
 
 [Hugging Face](https://huggingface.co) is an open source hub for AI/ML models and tools. With over 100,000 machine learning models available, Hugging Face provides a great way to integrate specialized AI & ML tasks into your application.
 
-Hugging Face exposes an [Inference API](https://huggingface.co/inference-api) you can use to execute AI tasks remotely on Hugging Face servers. This opens the doors to using Hugging Face with languages like TypeScript and can be deployed using [Edge Functions](/docs/guides/functions).
+There are 3 ways to use Hugging Face models in your application:
+
+1. Use the [Transformers](https://huggingface.co/docs/transformers/index) Python library to perform inference in a Python backend.
+1. [Generate embeddings](/docs/guides/ai/quickstarts/generate-text-embeddings) directly in Edge Functions using Transformers.js.
+1. Use Hugging Face's hosted [Inference API](https://huggingface.co/inference-api) to execute AI tasks remotely on Hugging Face servers. This guide will walk you through this approach.
 
 ## AI Tasks
 
diff --git a/apps/docs/pages/guides/ai/quickstarts/generate-text-embeddings.mdx b/apps/docs/pages/guides/ai/quickstarts/generate-text-embeddings.mdx
new file mode 100644
index 00000000000..ae9e4b2b3e9
--- /dev/null
+++ b/apps/docs/pages/guides/ai/quickstarts/generate-text-embeddings.mdx
@@ -0,0 +1,211 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'ai-generating-embeddings',
+  title: 'Generate Embeddings',
+  subtitle: 'Generate text embeddings using Edge Functions + Transformer.js.',
+  breadcrumb: 'AI Quickstarts',
+}
+
+This guide will walk you through how to generate high quality text embeddings in [Edge Functions](/docs/guides/functions) using Transformers.js. Inference is performed directly in Edge Functions using open source Hugging Face models, so no external API is required.
+
+## What is Transformers.js?
+
+[Transformers.js](https://huggingface.co/docs/transformers.js/index) is a library that allows you to perform inference using the JavaScript runtime. You can run Hugging Face embedding models through Transformers.js directly in Supabase [Edge Functions](/docs/guides/functions).
+
+## Build the Edge Function
+
+Let's build an Edge Function that will accept an input string and generate an embedding for it. Edge Functions are server-side TypeScript HTTP endpoints that run on-demand closest to your users.
+
+<StepHikeCompact>
+
+  <StepHikeCompact.Step step={1}>
+
+    <StepHikeCompact.Details title="Set up Supabase locally">
+
+      Make sure you have the latest version of the [Supabase CLI installed](/docs/guides/cli/getting-started).
+
+      Initialize Supabase in the root directory of your app and start your local stack.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```shell
+      supabase init
+      supabase start
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={2}>
+
+    <StepHikeCompact.Details title="Create Edge Function">
+
+      Create an Edge Function that we will use to generate embeddings. We'll call this `embed` (you can name this anything you like).
+
+      This will create a new TypeScript file called `index.ts` under `./supabase/functions/embed`.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```shell
+      supabase functions new embed
+      ```
+
+    </StepHikeCompact.Code>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={3}>
+
+    <StepHikeCompact.Details title="Import & configure Transformer.js" fullWidth>
+
+      Let's modify the Edge Function to import the Transformers.js client and configure it for the Deno runtime.
+
+      ```ts ./supabase/functions/embed/index.ts
+      import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
+      import { env, pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.0'
+
+      // Configuration for Deno runtime
+      env.useBrowserCache = false;
+      env.allowLocalModels = false;
+      ```
+
+    </StepHikeCompact.Details>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={4}>
+
+    <StepHikeCompact.Details title="Construct embedding pipeline">
+
+      Next let's construct the `pipe()` function we'll use to generate the embeddings. We use the Transformer.js `pipeline()` function to create this.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```ts ./supabase/functions/embed/index.ts
+      const pipe = await pipeline(
+        'feature-extraction',
+        'Supabase/gte-small',
+      );
+      ```
+
+    </StepHikeCompact.Code>
+
+    <StepHikeCompact.Details fullWidth>
+
+     Note the two arguments we pass to `pipeline()`:
+
+      1. The first argument specifies the type of [inference task](https://huggingface.co/docs/transformers.js/index#tasks) to perform. `feature-extraction` is used for embedding generation.
+      2. The second argument specifies which Hugging Face model to use for the embedding generation. Supabase officially supports models available on the [Supabase org](https://huggingface.co/Supabase).
+
+      <Admonition>
+
+      We intentially construct the pipeline before the `serve()` function. This allows us to reuse the pre-loaded model in future warm-start requests, significantly speeding up future queries. Note that you'll only notice this speedup after deploying your function to Supabase - requests in local development will always be a cold-start.
+
+      </Admonition>
+
+    </StepHikeCompact.Details>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={5}>
+
+    <StepHikeCompact.Details title="Implement request handler">
+
+      Modify our `serve()` request handler to accept an `input` string from the POST request JSON body.
+
+      Finally let's generate the embedding by:
+
+        1. Calling `pipe()` to perform the embedding generation
+        2. Extracting the embedding from the output as a number array
+        3. Returning it as a JSON response
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```ts ./supabase/functions/embed/index.ts
+      serve(async (req) => {
+        // Extract input string from JSON body
+        const { input } = await req.json();
+
+        // Generate the embedding from the user input
+        const output = await pipe(input, {
+          pooling: 'mean',
+          normalize: true,
+        });
+
+        // Extract the embedding output
+        const embedding = Array.from(output.data);
+
+        // Return the embedding
+        return new Response(
+          JSON.stringify({ embedding }),
+          { headers: { 'Content-Type': 'application/json' } }
+        );
+      });
+      ```
+
+    </StepHikeCompact.Code>
+
+    <StepHikeCompact.Details fullWidth>
+
+      Note the two options we pass to `pipe()`:
+
+      - `pooling`: The first option sets `pooling` to `mean`. Pooling referes to how token-level embedding representations are compressed into a single sentence embedding that reflects the meaning of the entire sentence. Average pooling is the most common type of pooling for sentence embeddings and is the method supported by Transformers.js.
+      - `normalize`: The second option tells Transformers.js to normalize the embedding vector so that it can be used with distance measures like dot product. A normalized vector means its length (magnitude) is 1 - also referred to as a unit vector. A vector is normalized by dividing each element by the vector's length (magnitude), which maintains its direction but changes its length to 1.
+
+    </StepHikeCompact.Details>
+
+  </StepHikeCompact.Step>
+
+  <StepHikeCompact.Step step={6}>
+
+    <StepHikeCompact.Details title="Test it!">
+
+      To test the Edge Function, first start a local functions server.
+
+    </StepHikeCompact.Details>
+
+    <StepHikeCompact.Code>
+
+      ```shell
+      supabase functions serve
+      ```
+
+    </StepHikeCompact.Code>
+
+    <StepHikeCompact.Details fullWidth>
+
+      Then in a new shell, create an HTTP request using cURL and pass in your input in the JSON body.
+
+      ```shell
+      curl --request POST 'http://localhost:54321/functions/v1/embed' \
+        --header 'Authorization: Bearer ANON_KEY' \
+        --header 'Content-Type: application/json' \
+        --data '{ "input": "hello world" }'
+      ```
+
+      Be sure to replace `ANON_KEY` with your project's anonymous key. You can get this key by running `supabase status`.
+
+    </StepHikeCompact.Details>
+
+  </StepHikeCompact.Step>
+
+</StepHikeCompact>
+
+## Next steps
+
+- Learn more about [embedding concepts](/docs/guides/ai/concepts)
+- [Store your embeddings](/docs/guides/ai/vector-columns) in a database
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/ai/vector-columns.mdx b/apps/docs/pages/guides/ai/vector-columns.mdx
index 7c768606e0b..b263cb9b619 100644
--- a/apps/docs/pages/guides/ai/vector-columns.mdx
+++ b/apps/docs/pages/guides/ai/vector-columns.mdx
@@ -56,27 +56,37 @@ create table documents (
   id serial primary key,
   title text not null,
   body text not null,
-  embedding vector(1536)
+  embedding vector(384)
 );
 ```
 
-In the above SQL snippet, we create a `documents` table with a column called `embedding` (note this is just a regular Postgres column - you can name it whatever you like). We give the `embedding` column a `vector` data type with 1536 dimensions. Change this to the number of dimensions used in your vector application. For example, if you are generating embeddings using OpenAI's `text-embeddings-ada-002` model, you would set this number as 1536 since that model produces 1536 dimensions.
+In the above SQL snippet, we create a `documents` table with a column called `embedding` (note this is just a regular Postgres column - you can name it whatever you like). We give the `embedding` column a `vector` data type with 384 dimensions. Change this to the number of dimensions produced by your embedding model. For example, if you are [generating embeddings](/docs/guides/ai/quickstarts/generate-text-embeddings) using the open source [`gte-small`](https://huggingface.co/Supabase/gte-small) model, you would set this number to 384 since that model produces 384 dimensions.
+
+<Admonition>
+
+In general, embeddings with fewer dimensions perform best. See our [analysis on fewer dimensions in pgvector](https://supabase.com/blog/fewer-dimensions-are-better-pgvector).
+
+</Admonition>
 
 ### Storing a vector / embedding
 
-In this example we'll generate a vector using the OpenAI API client, then store it in the database using the Supabase JavaScript client.
+In this example we'll generate a vector using Transformers.js, then store it in the database using the Supabase JavaScript client.
 
 ```js
+import { pipeline } from '@xenova/transformers'
+const generateEmbedding = await pipeline('feature-extraction', 'Supabase/gte-small')
+
 const title = 'First post!'
 const body = 'Hello world!'
 
-// Generate a vector using OpenAI
-const embeddingResponse = await openai.createEmbedding({
-  model: 'text-embedding-ada-002',
-  input: body,
+// Generate a vector using Transformers.js
+const output = await generateEmbedding(body, {
+  pooling: 'mean',
+  normalize: true,
 })
 
-const [{ embedding }] = embeddingResponse.data.data
+// Extract the embedding output
+const embedding = Array.from(output.data)
 
 // Store the vector in Postgres
 const { data, error } = await supabase.from('documents').insert({
@@ -90,7 +100,7 @@ This example uses the JavaScript Supabase client, but you can modify it to work
 
 ### Querying a vector / embedding
 
-Similarity search is the most common use case for vectors. `pgvector` support 3 new operators for performing similarity search:
+Similarity search is the most common use case for vectors. `pgvector` support 3 new operators for computing distance:
 
 | Operator | Description            |
 | -------- | ---------------------- |
@@ -98,13 +108,13 @@ Similarity search is the most common use case for vectors. `pgvector` support 3
 | `<#>`    | negative inner product |
 | `<=>`    | cosine distance        |
 
-Choosing the right operator depends on your needs. If you are searching over OpenAI embeddings, OpenAI recommends using cosine similarity. For more information on how embeddings work and how they relate to each other, see [What are Embeddings?](/docs/guides/ai/concepts#what-are-embeddings).
+Choosing the right operator depends on your needs. Dot product tends to be the fastest if your vectors are normalized. For more information on how embeddings work and how they relate to each other, see [What are Embeddings?](/docs/guides/ai/concepts#what-are-embeddings).
 
 Supabase client libraries like `supabase-js` connect to your Postgres instance via [PostgREST](docs/guides/getting-started/architecture#postgrest-api). PostgREST does not currently support `pgvector` similarity operators, so we'll need to wrap our query in a Postgres function and call it via the `rpc()` method:
 
 ```sql
 create or replace function match_documents (
-  query_embedding vector(1536),
+  query_embedding vector(384),
   match_threshold float,
   match_count int
 )
@@ -140,9 +150,15 @@ const { data: documents } = await supabaseClient.rpc('match_documents', {
 })
 ```
 
-In this example `embedding` would be another embedding you wish to compare against your table of pre-generated embedding documents. For example if you were building a search engine, every time the user submits their query you would first generate an embedding on the search query itself (using `openai.createEmbedding()`), then pass it into the above `rpc()` function to match.
+In this example `embedding` would be another embedding you wish to compare against your table of pre-generated embedding documents. For example if you were building a search engine, every time the user submits their query you would first generate an embedding on the search query itself, then pass it into the above `rpc()` function to match.
 
-Vectors and embedding can be used for much more than search. Learn more about embeddings at [What are Embeddings?](/docs/guides/ai/concepts#what-are-embeddings).
+<Admonition>
+
+Be sure to use embeddings produced from the same embedding model when calculating distance. Comparing embeddings from two different models will produce no meaningful result.
+
+</Admonition>
+
+Vectors and embeddings can be used for much more than search. Learn more about embeddings at [What are Embeddings?](/docs/guides/ai/concepts#what-are-embeddings).
 
 ### Indexes
 
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index cbb1ae76649..0aaafb1f237 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -162,6 +162,8 @@ import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(request) {
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
@@ -190,6 +192,8 @@ import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export async function GET(request: NextRequest) {
   const requestUrl = new URL(request.url)
   const code = requestUrl.searchParams.get('code')
@@ -369,13 +373,9 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 
 ### Server-side
 
-The combination of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) and [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) can be used to trigger the authentication process from form submissions.
+The combination of [Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components) and [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) can be used to trigger the authentication process from form submissions.
 
-<Admonition type="note">
-
-Next.js [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions) are currently in Alpha and may change. For now we recommend [triggering the authentication flow client-side](/docs/guides/auth/auth-helpers/nextjs#client-side) for production applications.
-
-</Admonition>
+#### Sign Up Route
 
 <Tabs
   scrollable
@@ -385,57 +385,248 @@ Next.js [Server Actions](https://nextjs.org/docs/app/building-your-application/d
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/login.js
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import { revalidatePath } from 'next/cache'
+```jsx app/auth/sign-up.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
 
-export default async function Login() {
-  const handleSignUp = async (formData) => {
-    'use server'
-    const email = formData.get('email')
-    const password = formData.get('password')
+export const dynamic = 'force-dynamic'
 
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: 'http://localhost:3000/auth/callback',
-      },
-    })
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = formData.get('email')
+  const password = formData.get('password')
+  const supabase = createRouteHandlerClient({ cookies })
 
-    revalidatePath('/')
-  }
+  await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
+    },
+  })
 
-  const handleSignIn = async (formData) => {
-    'use server'
-    const email = formData.get('email')
-    const password = formData.get('password')
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
 
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
+</TabPanel>
 
-    revalidatePath('/')
-  }
+<TabPanel id="ts" label="TypeScript">
 
-  const handleSignOut = async () => {
-    'use server'
-    const supabase = createServerActionClient({ cookies })
-    await supabase.auth.signOut()
-    revalidatePath('/')
-  }
+```tsx app/auth/sign-up.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
 
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = String(formData.get('email'))
+  const password = String(formData.get('password'))
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signUp({
+    email,
+    password,
+    options: {
+      emailRedirectTo: `${requestUrl.origin}/auth/callback`,
+    },
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+<Admonition type="note">
+
+Returning a `301` status redirects from a POST to a GET route
+
+</Admonition>
+
+#### Login Route
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/auth/login.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = formData.get('email')
+  const password = formData.get('password')
+  const supabase = createRouteHandlerClient({ cookies })
+
+  await supabase.auth.signInWithPassword({
+    email,
+    password,
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/auth/login.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const formData = await request.formData()
+  const email = String(formData.get('email'))
+  const password = String(formData.get('password'))
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signInWithPassword({
+    email,
+    password,
+  })
+
+  return NextResponse.redirect(requestUrl.origin, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+<Admonition type="note">
+
+Returning a `301` status redirects from a POST to a GET route
+
+</Admonition>
+
+#### Logout Route
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/auth/logout.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const requestUrl = new URL(request.url)
+  const supabase = createRouteHandlerClient({ cookies })
+
+  await supabase.auth.signOut()
+
+  return NextResponse.redirect(`${requestUrl.origin}/login`, {
+    status: 301,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/auth/logout.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { cookies } from 'next/headers'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const requestUrl = new URL(request.url)
+  const supabase = createRouteHandlerClient<Database>({ cookies })
+
+  await supabase.auth.signOut()
+
+  return NextResponse.redirect(`${requestUrl.origin}/login`, {
+    status: 301,
+  })
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Login Page
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/login.jsx
+export default function Login() {
   return (
-    <form action={handleSignUp}>
+    <form action="/auth/login" method="post">
+      <label htmlFor="email">Email</label>
       <input name="email" />
+      <label htmlFor="password">Password</label>
       <input type="password" name="password" />
-      <button>Sign up</button>
-      <button formAction={handleSignIn}>Sign in</button>
-      <button formAction={handleSignOut}>Sign out</button>
+      <button>Sign In</button>
+      <button formAction="/auth/sign-up">Sign Up</button>
+      <button formAction="/auth/logout">Sign Out</button>
     </form>
   )
 }
@@ -445,70 +636,21 @@ export default async function Login() {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/login.ts
-import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
-import { revalidatePath } from 'next/cache'
-import { cookies } from 'next/headers'
-
-import type { Database } from '@/lib/database.types'
-
-export default async function Login() {
-  const handleSignUp = async (formData: FormData) => {
-    'use server'
-    const email = String(formData.get('email'))
-    const password = String(formData.get('password'))
-
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signUp({
-      email,
-      password,
-      options: {
-        emailRedirectTo: 'http://localhost:3000/auth/callback',
-      },
-    })
-
-    revalidatePath('/')
-  }
-
-  const handleSignIn = async (formData: FormData) => {
-    'use server'
-    const email = String(formData.get('email'))
-    const password = String(formData.get('password'))
-
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signInWithPassword({
-      email,
-      password,
-    })
-
-    revalidatePath('/')
-  }
-
-  const handleSignOut = async () => {
-    'use server'
-    const supabase = createServerActionClient<Database>({ cookies })
-    await supabase.auth.signOut()
-    revalidatePath('/')
-  }
-
+```tsx app/login.tsx
+export default function Login() {
   return (
-    <form action={handleSignUp}>
+    <form action="/auth/login" method="post">
+      <label htmlFor="email">Email</label>
       <input name="email" />
+      <label htmlFor="password">Password</label>
       <input type="password" name="password" />
-      <button>Sign up</button>
-      <button formAction={handleSignIn}>Sign in</button>
-      <button formAction={handleSignOut}>Sign out</button>
+      <button>Sign In</button>
+      <button formAction="/auth/sign-up">Sign Up</button>
     </form>
   )
 }
 ```
 
-<Admonition type="note">
-
-TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerActionClient` to add type support to the Supabase client.
-
-</Admonition>
-
 </TabPanel>
 </Tabs>
 
@@ -551,7 +693,7 @@ This allows for the Supabase client to be easily instantiated in the correct con
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
 import { useEffect, useState } from 'react'
 
-export default function Home() {
+export default function Page() {
   const [todos, setTodos] = useState()
   const supabase = createClientComponentClient()
 
@@ -582,7 +724,7 @@ import type { Database } from '@/lib/database.types'
 
 type Todo = Database['public']['Tables']['todos']['Row']
 
-export default function Home() {
+export default function Page() {
   const [todos, setTodos] = useState<Todo[] | null>(null)
   const supabase = createClientComponentClient<Database>()
 
@@ -653,7 +795,9 @@ In order to use Supabase in Server Components, you need to have implemented the
 import { cookies } from 'next/headers'
 import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
-export default async function Home() {
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
   const supabase = createServerComponentClient({ cookies })
   const { data } = await supabase.from('todos').select()
   return <pre>{JSON.stringify(data, null, 2)}</pre>
@@ -670,6 +814,8 @@ import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function ServerComponent() {
   const supabase = createServerComponentClient<Database>({ cookies })
   const { data } = await supabase.from('todos').select()
@@ -724,6 +870,8 @@ import { cookies } from 'next/headers'
 import { createServerActionClient } from '@supabase/auth-helpers-nextjs'
 import { revalidatePath } from 'next/cache'
 
+export const dynamic = 'force-dynamic'
+
 export default async function NewTodo() {
   const addTodo = async (formData) => {
     'use server'
@@ -753,6 +901,8 @@ import { revalidatePath } from 'next/cache'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export default async function NewTodo() {
   const addTodo = async (formData: FormData) => {
     'use server'
@@ -801,11 +951,13 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 >
 <TabPanel id="js" label="JavaScript">
 
-```jsx app/api/todos/route.jsx
+```jsx app/api/todos/route.js
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
 
+export const dynamic = 'force-dynamic'
+
 export async function POST(request) {
   const { title } = await request.json()
   const supabase = createRouteHandlerClient({ cookies })
@@ -818,13 +970,15 @@ export async function POST(request) {
 
 <TabPanel id="ts" label="TypeScript">
 
-```tsx app/api/todos/route.tsx
+```tsx app/api/todos/route.ts
 import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import { cookies } from 'next/headers'
 
 import type { Database } from '@/lib/database.types'
 
+export const dynamic = 'force-dynamic'
+
 export async function POST(request: Request) {
   const { title } = await request.json()
   const supabase = createRouteHandlerClient<Database>({ cookies })
@@ -846,6 +1000,258 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
 
 See [refreshing session example](/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware) above.
 
+### Edge Runtime
+
+The Next.js Edge Runtime allows you to host Server Components and Route Handlers from Edge nodes, serving the routes as close as possible to your user's location.
+
+A route can be configured to use the Edge Runtime by exporting a `runtime` variable set to `edge`. Additionally, the `cookies()` function must be called from the Edge route, before creating a Supabase Client.
+
+#### Server Components
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/page.jsx
+import { cookies } from 'next/headers'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  const cookieStore = cookies()
+
+  const supabase = createServerComponentClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/page.tsx
+import { cookies } from 'next/headers'
+import { createServerComponentClient } from '@supabase/auth-helpers-nextjs'
+
+import type { Database } from '@/lib/database.types'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export default async function Page() {
+  const cookieStore = cookies()
+
+  const supabase = createServerComponentClient<Database>({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createServerComponentClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Route Handlers
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/api/todos/route.js
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export async function POST(request) {
+  const { title } = await request.json()
+  const cookieStore = cookies()
+
+  const supabase = createRouteHandlerClient({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/api/todos/route.ts
+import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+import type { Database } from '@/lib/database.types'
+
+export const runtime = 'edge'
+export const dynamic = 'force-dynamic'
+
+export async function POST(request: Request) {
+  const { title } = await request.json()
+  const cookieStore = cookies()
+
+  const supabase = createRouteHandlerClient<Database>({
+    cookies: () => cookieStore,
+  })
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createRouteHandlerClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+### Static Routes
+
+Server Components and Route Handlers are static by default - data is fetched once at build time and the value is cached. Since the request to Supabase now happens at build time, there is no user, session or cookie to pass along with the request to Supabase. Therefore, the `createClient` function from `supabase-js` can be used to fetch data for static routes.
+
+#### Server Components
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/page.jsx
+import { createClient } from '@supabase/supabase-js'
+
+export default async function Page() {
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  )
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/page.tsx
+import { createClient } from '@supabase/supabase-js'
+
+import type { Database } from '@/lib/database.types'
+
+export default async function Page() {
+  const supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  const { data } = await supabase.from('todos').select()
+  return <pre>{JSON.stringify(data, null, 2)}</pre>
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
+#### Route Handlers
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="js"
+>
+<TabPanel id="js" label="JavaScript">
+
+```jsx app/api/todos/route.js
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+
+export async function POST(request) {
+  const { title } = await request.json()
+
+  const supabase = createClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  )
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+</TabPanel>
+
+<TabPanel id="ts" label="TypeScript">
+
+```tsx app/api/todos/route.ts
+import { createClient } from '@supabase/supabase-js'
+import { NextResponse } from 'next/server'
+
+import type { Database } from '@/lib/database.types'
+
+export async function POST(request: Request) {
+  const { title } = await request.json()
+
+  const supabase = createClient<Database>(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  )
+
+  const { data } = await supabase.from('todos').insert({ title }).select()
+  return NextResponse.json(data)
+}
+```
+
+<Admonition type="note">
+
+TypeScript types can be [generated with the Supabase CLI](/docs/reference/javascript/typescript-support) and passed to `createClient` to add type support to the Supabase client.
+
+</Admonition>
+
+</TabPanel>
+</Tabs>
+
 ## More examples
 
 - [Build a Twitter Clone with the Next.js App Router and Supabase - free egghead course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
index 60277debe66..01b16e358f9 100644
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
@@ -329,7 +329,7 @@ In some cases, you may wish to use WhatsApp as a delivery channel instead. Here
 - You wish for a secure channel
 - Your users mostly use WhatsApp as a messaging platform
 
-To make use of WhatsApp OTP, please complete the following steps:
+WhatsApp OTPs can be used with Twilio Verify without additional configuration. To make use of WhatsApp OTP with Twilio Programmable Messaging, please complete the following steps:
 
 - Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up)
 - Submit a template via the [Twilio Guide For Submitting WhatsApp templates](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval)
diff --git a/apps/docs/pages/guides/auth/phone-login/vonage.mdx b/apps/docs/pages/guides/auth/phone-login/vonage.mdx
index 0e6a1b86061..77949c2d0fc 100644
--- a/apps/docs/pages/guides/auth/phone-login/vonage.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/vonage.mdx
@@ -53,7 +53,7 @@ Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.c
 
 You should see an option to enable Phone Signup.
 
-Toggle it on, and copy the api key, api secret and optionally phone number values over from the Vonage dashboard. Click save.
+Toggle it on, and copy the api key, api secret and phone number values over from the Vonage dashboard. Click save.
 
 Now the backend should be setup, we can proceed to add our client-side code!
 
diff --git a/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx b/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
index d681313a3e3..381e453bb3b 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
+++ b/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
@@ -42,7 +42,7 @@ Setting up Twitter logins for your application consists of 3 parts:
 - Turn `Enable 3-legged OAuth` ON.
 - Turn `Request email address from users` ON.
 - Enter your `Callback URL`.
-- Enter your `Website URL`.
+- Enter your `Website URL` (tip: try `http://127.0.0.1:port` or `http://www.localhost:port` during development)
 - Enter your `Terms of service URL`.
 - Enter your `Privacy policy URL`.
 - Click `Save`.
diff --git a/apps/docs/pages/guides/cli.mdx b/apps/docs/pages/guides/cli.mdx
index 38506dd1df0..3f1e9e524cd 100644
--- a/apps/docs/pages/guides/cli.mdx
+++ b/apps/docs/pages/guides/cli.mdx
@@ -1,162 +1,47 @@
 import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
-  title: 'Supabase CLI',
-  description:
-    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
-  subtitle:
-    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
+  id: 'cli',
+  title: 'Local Dev with CLI',
+  description: 'Developing locally using the Supabase CLI.',
+  subtitle: 'Developing locally using the Supabase CLI.',
+  sidebar_label: 'Overview',
 }
 
-You can use the Supabase CLI to run the entire Supabase stack locally on your machine, simply by running `supabase init` (to create a new local project) and then `supabase start`.
+You can use the Supabase CLI to run the entire Supabase stack locally on your machine, simply by running `supabase init` and then `supabase start`.
 
 The Supabase CLI provides tools to develop your project locally, deploy to the Supabase Platform, handle database migrations, and generate types directly from your database schema.
 
-## Installing the Supabase CLI
+## Resources
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-<TabPanel id="npm" label="npm">
+<div className="grid md:grid-cols-12 gap-4 not-prose">
+  {integrations.map((x) => (
+    <div className="col-span-6" key={x.href}>
+      <Link href={x.href} passHref>
+        <a>
+          <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
+            {x.description}
+          </GlassPanel>
+        </a>
+      </Link>
+    </div>
+  ))}
+</div>
 
-Install the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase):
+export const integrations = [
+  {
+    name: 'Supabase CLI',
+    description:
+      'The Supabase CLI provides tools to develop manage your Supabase projects from your local machine.',
+    href: 'https://github.com/supabase/cli',
+  },
+  {
+    name: 'GitHub Action',
+    description: ' A GitHub action for interacting with your Supabase projects using the CLI.',
+    href: 'https://github.com/supabase/setup-cli',
+  },
+]
 
-```sh
-npm install supabase --save-dev
-```
-
-Run the CLI by prefixing each command with `npx` (only applicable when installing through `npm`):
-
-```sh
-npx supabase <command>
-```
-
-</TabPanel>
-<TabPanel id="macos" label="macOS">
-
-Install the CLI with [Homebrew](https://brew.sh):
-
-```sh
-brew install supabase/tap/supabase
-```
-
-</TabPanel>
-<TabPanel id="windows" label="Windows">
-
-Install the CLI with [Scoop](https://scoop.sh):
-
-```powershell
-scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
-scoop install supabase
-```
-
-</TabPanel>
-<TabPanel id="linux" label="Linux">
-
-The CLI is available through [Homebrew](https://brew.sh) and Linux packages.
-
-#### Homebrew
-
-```sh
-brew install supabase/tap/supabase
-```
-
-#### Linux packages
-
-Linux packages are provided in [Releases](https://github.com/supabase/cli/releases).
-To install, download the `.apk`/`.deb`/`.rpm` file depending on your package manager
-and run one of the following:
-
-- `sudo apk add --allow-untrusted <...>.apk`
-- `sudo dpkg -i <...>.deb`
-- `sudo rpm -i <...>.rpm`
-
-</TabPanel>
-</Tabs>
-
-## Updating the Supabase CLI
-
-When a new [version](https://github.com/supabase/cli/releases) is released, you can update the CLI using the same methods.
-
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-<TabPanel id="npm" label="npm">
-
-```sh
-npm update supabase --save-dev
-```
-
-</TabPanel>
-<TabPanel id="macos" label="macOS">
-
-```sh
-brew upgrade supabase
-```
-
-</TabPanel>
-<TabPanel id="windows" label="Windows">
-
-```powershell
-scoop update supabase
-```
-
-</TabPanel>
-<TabPanel id="linux" label="Linux">
-
-```sh
-brew upgrade supabase
-```
-
-</TabPanel>
-</Tabs>
-
-If you have any Supabase containers running locally, remember to restart them after upgrading to use the new features.
-
-```bash
-npx supabase stop --no-backup
-npx supabase start
-```
-
-## Running Supabase locally
-
-Inside the folder where you want to create your project, run:
-
-```bash
-supabase init
-```
-
-This will create a new `supabase` folder. It's safe to commit this folder to your version control system.
-
-Now, to start the Supabase stack, run:
-
-```bash
-supabase start
-```
-
-This takes time on your first run because the CLI needs to download the local Docker images. The CLI includes the entire Supabase toolset, and a few additional images that are useful for local development (like a local SMTP server and a database diff tool).
-
-The local development environment includes Supabase Studio, a graphical interface for working with your database, running by default on [localhost:54323](http://localhost:54323).
-
-![Local Studio](/docs/img/guides/cli/local-studio.png)
-
-When you are finished working on your Supabase project, you can stop the stack with:
-
-```bash
-supabase stop
-```
-
-## See also
-
-- [Supabase CLI Reference](/docs/reference/cli/introduction)
-- [Supabase CLI Configuration](/docs/reference/cli/config)
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
+export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
 
 export default Page
diff --git a/apps/docs/pages/guides/cli/config.tsx b/apps/docs/pages/guides/cli/config.tsx
new file mode 100644
index 00000000000..6789c50ce74
--- /dev/null
+++ b/apps/docs/pages/guides/cli/config.tsx
@@ -0,0 +1,113 @@
+import specFile from '~/../../spec/cli_v1_config.yaml' assert { type: 'yml' }
+import { Parameter } from '~/lib/refGenerator/refTypes'
+import ReactMarkdown from 'react-markdown'
+import GuidesTableOfContents from '~/components/GuidesTableOfContents'
+import { Heading } from '~/components/CustomHTMLElements'
+import Head from 'next/head'
+import { CodeBlock } from 'ui'
+
+// Parameters are grouped on the page by tag
+const TAGS = ['General', 'Auth', 'API', 'Database', 'Dashboard', 'Local', 'Edge-Functions']
+
+const tocList = []
+const content = TAGS.map((tag) => {
+  tocList.push({ text: tag, link: `${tag.toLowerCase()}-config`, level: 2 })
+  return (
+    <div>
+      <Heading tag="h2">{tag} Config</Heading>
+      {specFile.parameters
+        .filter((param: Parameter) => param.tags[0] === tag.toLowerCase())
+        .map((parameter: Parameter, index) => {
+          tocList.push({ text: parameter.id, link: `#${parameter.id}`, level: 3 })
+          return <Info parameter={parameter} />
+        })}
+    </div>
+  )
+})
+
+export default function Config() {
+  return (
+    <>
+      <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 className="">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 top-20 border-l">
+            <span className="block font-mono text-xs uppercase text-scale-1200 pl-5 mb-4">
+              On this page
+            </span>
+            <GuidesTableOfContents list={tocList} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function Info({ parameter }: { parameter: Parameter }) {
+  return (
+    <div className="mt-8">
+      <div>
+        <Heading tag="h3" parseAnchors={false} customAnchor={parameter.id}>
+          <code>{parameter.title}</code>
+        </Heading>
+
+        <div className="border-b pb-8" key={parameter.id}>
+          <div className=" mb-16">
+            <div className="">
+              <table className="table-auto">
+                <thead>
+                  <tr>
+                    <th className="text-left">Name</th>
+                    <th className="text-left">Default</th>
+                    <th className="text-left">Required</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>{parameter.id}</td>
+                    <td>{parameter.default ? parameter.default.toString() : 'None'}</td>
+                    <td>{parameter.required.toString()}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className="mb-4 scroll-mt-16 mt-0 ">
+              <p className="text-sm font-bold uppercase">Description</p>
+              <ReactMarkdown>{parameter.description}</ReactMarkdown>
+            </div>
+            {parameter.usage && (
+              <div className="mb-4 scroll-mt-16 mt-0 ">
+                <p className="text-sm font-bold uppercase">Usage</p>
+                <CodeBlock className="useless-code-block-class" language="py">
+                  {parameter.usage}
+                </CodeBlock>
+              </div>
+            )}
+            {parameter.links && (
+              <div>
+                <p className="text-sm font-bold uppercase">See also</p>
+                <ul>
+                  {parameter.links.map((link) => (
+                    <li>
+                      <a href={link.link}>{link.name}</a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/docs/pages/guides/cli/getting-started.mdx b/apps/docs/pages/guides/cli/getting-started.mdx
new file mode 100644
index 00000000000..dd01d4ffcf7
--- /dev/null
+++ b/apps/docs/pages/guides/cli/getting-started.mdx
@@ -0,0 +1,172 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  title: 'Supabase CLI',
+  description:
+    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
+  subtitle:
+    'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
+}
+
+You can use the Supabase CLI to run the entire Supabase stack locally on your machine, simply by running `supabase init` (to create a new local project) and then `supabase start`.
+
+The Supabase CLI provides tools to develop your project locally, deploy to the Supabase Platform, handle database migrations, and generate types directly from your database schema.
+
+## Installing the Supabase CLI
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="npm"
+>
+<TabPanel id="npm" label="npm">
+
+Install the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase):
+
+```sh
+npm install supabase --save-dev
+```
+
+Run the CLI by prefixing each command with `npx` (only applicable when installing through `npm`):
+
+```sh
+npx supabase <command>
+```
+
+</TabPanel>
+<TabPanel id="macos" label="macOS">
+
+Install the CLI with [Homebrew](https://brew.sh):
+
+```sh
+brew install supabase/tap/supabase
+```
+
+</TabPanel>
+<TabPanel id="windows" label="Windows">
+
+Install the CLI with [Scoop](https://scoop.sh):
+
+```powershell
+scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
+scoop install supabase
+```
+
+</TabPanel>
+<TabPanel id="linux" label="Linux">
+
+The CLI is available through [Homebrew](https://brew.sh) and Linux packages.
+
+#### Homebrew
+
+```sh
+brew install supabase/tap/supabase
+```
+
+#### Linux packages
+
+Linux packages are provided in [Releases](https://github.com/supabase/cli/releases).
+To install, download the `.apk`/`.deb`/`.rpm` file depending on your package manager
+and run one of the following:
+
+- `sudo apk add --allow-untrusted <...>.apk`
+- `sudo dpkg -i <...>.deb`
+- `sudo rpm -i <...>.rpm`
+
+</TabPanel>
+</Tabs>
+
+## Updating the Supabase CLI
+
+When a new [version](https://github.com/supabase/cli/releases) is released, you can update the CLI using the same methods.
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="npm"
+>
+<TabPanel id="npm" label="npm">
+
+```sh
+npm update supabase --save-dev
+```
+
+</TabPanel>
+<TabPanel id="macos" label="macOS">
+
+```sh
+brew upgrade supabase
+```
+
+</TabPanel>
+<TabPanel id="windows" label="Windows">
+
+```powershell
+scoop update supabase
+```
+
+</TabPanel>
+<TabPanel id="linux" label="Linux">
+
+```sh
+brew upgrade supabase
+```
+
+</TabPanel>
+</Tabs>
+
+If you have any Supabase containers running locally, remember to restart them after upgrading to use the new features.
+
+```bash
+npx supabase stop --no-backup
+npx supabase start
+```
+
+## Running Supabase locally
+
+Inside the folder where you want to create your project, run:
+
+```bash
+supabase init
+```
+
+This will create a new `supabase` folder. It's safe to commit this folder to your version control system.
+
+Now, to start the Supabase stack, run:
+
+```bash
+supabase start
+```
+
+This takes time on your first run because the CLI needs to download the local Docker images. The CLI includes the entire Supabase toolset, and a few additional images that are useful for local development (like a local SMTP server and a database diff tool).
+
+The local development environment includes Supabase Studio, a graphical interface for working with your database, running by default on [localhost:54323](http://localhost:54323).
+
+![Local Studio](/docs/img/guides/cli/local-studio.png)
+
+## Stopping local services
+
+When you are finished working on your Supabase project, you can stop the stack with:
+
+```bash
+supabase stop
+```
+
+## Full command reference
+
+The CLI provides a number of commands to help you develop your project locally and deploy to the Supabase Platform. You can find all commands inside the [CLI Reference](/docs/reference/cli/introduction) docs, including:
+
+- [Project](/docs/reference/cli/supabase-projects) and [Organization](/docs/reference/cli/supabase-orgs) management
+- [Database management](/docs/reference/cli/supabase-db)
+- [Database migrations](/docs/reference/cli/supabase-migration) and [Database Branching](/docs/reference/cli/supabase-branches)
+- [Database debugigng tools](/docs/reference/cli/supabase-inspect-db-calls)
+- [Edge Function management](/docs/reference/cli/supabase-functions)
+- [Auth management](/docs/reference/cli/supabase-functions)
+- [Types Generators](/docs/reference/cli/supabase-gen)
+- [Testing](/docs/reference/cli/supabase-test)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/cli/github-action/[slug].tsx b/apps/docs/pages/guides/cli/github-action/[slug].tsx
index 181f3acb409..049e3f1072d 100644
--- a/apps/docs/pages/guides/cli/github-action/[slug].tsx
+++ b/apps/docs/pages/guides/cli/github-action/[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 remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -24,13 +25,31 @@ const pageMap = [
   {
     slug: 'generating-types',
     meta: {
-      title: 'Generate types from your database',
+      title: 'Generate types using GitHub Actions',
       description: 'End-to-end type safety across client, server, and database.',
       subtitle: 'End-to-end type safety across client, server, and database.',
       tocVideo: 'VSNgAIObBdw',
     },
     remoteFile: 'generating-types.md',
   },
+  {
+    slug: 'testing',
+    meta: {
+      title: 'Automated testing using GitHub Actions',
+      description: 'Run your tests when you or your team make changes.',
+      subtitle: 'Run your tests when you or your team make changes.',
+    },
+    remoteFile: 'testing.md',
+  },
+  {
+    slug: 'backups',
+    meta: {
+      title: 'Automated backups using GitHub Actions',
+      description: 'Backup your database on a regular basis.',
+      subtitle: 'Backup your database on a regular basis.',
+    },
+    remoteFile: 'backups.md',
+  },
 ]
 
 interface ActionDocsProps {
@@ -116,6 +135,7 @@ export const getStaticProps: GetStaticProps<ActionDocsProps> = async ({ params }
       remarkPlugins: [
         remarkGfm,
         remarkMkDocsAdmonition,
+        remarkPyMdownTabs,
         [removeTitle, meta.title],
         [remarkCodeHike, codeHikeOptions],
       ],
diff --git a/apps/docs/pages/guides/cli/seeding-your-database.mdx b/apps/docs/pages/guides/cli/seeding-your-database.mdx
new file mode 100644
index 00000000000..18bfa143c50
--- /dev/null
+++ b/apps/docs/pages/guides/cli/seeding-your-database.mdx
@@ -0,0 +1,60 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'seeding-your-database',
+  title: 'Seeding your database',
+  description:
+    'Populate your database with initial data for reproducible environments across local and testing.',
+  subtitle:
+    'Populate your database with initial data for reproducible environments across local and testing.',
+}
+
+When you run `supabase init` we create an empty `seed.sql` file in the root of the `supabase` folder. You can use this to populate your database with seed data.
+
+## What is seed data?
+
+Seeding is the process of populating a database with initial data, typically used to provide sample or default records for testing and development purposes. You can use this to create "reproducible environments" for local development, staging, and production.
+
+## Using the seed file
+
+The `seed.sql` file is run every time you run `supabase start` or `supabase db reset`. Seeding is done _after_ all the database migrations have been run. As a general rule, you should not add schema statements to your seed file, only data.
+
+You can add any SQL statements to this file. For example:
+
+```sql supabase/seed.sql
+insert into countries
+  (name, code)
+values
+  ('United States', 'US'),
+  ('Canada', 'CA'),
+  ('Mexico', 'MX');
+```
+
+{/* prettier-ignore */}
+{/*
+
+### Splitting up your seed file
+
+The seed file can grow quite large, so you can split it up into multiple files. For example, you can create a `seed` folder and add a `countries.sql` file. Then you can add the following to your `seed.sql` file.
+
+```sql supabase/seed.sql
+\i seed/countries.sql
+```
+
+### Using CSV data to seed your database
+
+co
+You can use the `COPY` command to import CSV data into your database. For example, you can create a `seed` folder and add a `countries.csv` file. Then you can add the following to your `seed.sql` file.
+
+```sql supabase/seed.sql
+COPY countries (name, code) FROM 'seed/countries.csv' WITH (FORMAT csv);
+```
+
+## Generating seed data from Production
+
+- Use snaplet
+  \*/}
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/cli/testing-and-linting.mdx b/apps/docs/pages/guides/cli/testing-and-linting.mdx
new file mode 100644
index 00000000000..0099f84ca4e
--- /dev/null
+++ b/apps/docs/pages/guides/cli/testing-and-linting.mdx
@@ -0,0 +1,82 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'testing-emails-locally',
+  title: 'Testing and linting',
+  description: 'Using the CLI to test your Supabase project.',
+  subtitle: 'Using the CLI to test your Supabase project.',
+}
+
+The Supabase CLI provides a set of tools to help you test and lint your Postgres database and Edge` Functions.
+
+## Testing your database
+
+The Supabase CLI provides Postgres liniting using the `supabase test db` command.
+
+{/* prettier-ignore */}
+```markdown
+supabase test db --help
+Tests local database with pgTAP
+
+Usage:
+  supabase test db [flags]
+```
+
+This is powered by the [pgTAP](https://supabase.com/docs/guides/database/extensions/pgtap) extension. You can find a full guide to writing an running tests in the [Testing your database](/docs/guides/database/testing) section.
+
+### Test helpers
+
+Our friends at [Basejump](https://usebasejump.com/) have created a useful set of Database [Test Helpers](https://github.com/usebasejump/supabase-test-helpers), with an accompanying [blog post](https://usebasejump.com/blog/testing-on-supabase-with-pgtap).
+
+### Running database tests in CI
+
+Use our GitHub Action to [automate your database tests](docs/guides/cli/github-action/testing#testing-your-database).
+
+## Testing your Edge Functions
+
+Edge Functions are powered by Deno, which provides a [native set of testing tools](https://deno.land/manual@v1.35.3/basics/testing). We extend this functionality in the Supabase CLI. You can find a detailed guide in the [Edge Functions section](/docs/guides/functions/unit-test).
+
+## Testing Auth emails
+
+The Supabase CLI uses [Inbucket](https://github.com/inbucket/inbucket) to capture emails sent from your local machine. This is useful for testing emails sent from Supabase Auth.
+
+### Accessing Inbucket
+
+By default, Inbucket is available at [localhost:54324](http://localhost:54324) when you run `supabase start`. Simply open this URL in your browser to view the emails.
+
+### Going into Production
+
+The "default" email provided by Supabase is only for development purposes. It is [heavily restricted](/docs/guides/platform/going-into-prod#auth-rate-limits) to ensure that it is not used for spam. Before going into production, you must configure your own email provider. This is as simple as enabling a new SMTP credentials in your [project settings](https://supabase.com/dashboard/project/_/settings/auth).
+
+## Linting your database
+
+The Supabase CLI provides Postgres liniting using the `supabase db lint` command:
+
+{/* prettier-ignore */}
+```markdown
+supabase db lint --help
+Checks local database for typing error
+
+Usage:
+  supabase db lint [flags]
+
+Flags:
+  --level [ warning | error ] Error level to emit. (default warning)
+  --linked Lints the linked project for schema errors.
+  -s, --schema strings List of schema to include. (default all)
+```
+
+This is powered by [plpgsql_check](https://github.com/okbob/plpgsql_check), which leverages the internal Postgres parser/evaluator so you see any errors that would occur at runtime. It provides the following features:
+
+- validates you are using the correct types for function parameters
+- identifies unused variables and function arguments
+- detection of dead code (any code after an `RETURN` command)
+- detection of missing `RETURN` commands with your Postgres function
+- identifies unwanted hidden casts, which can be a performance issue
+- checks `EXECUTE` statements agaist SQL injection vulnerability
+
+Check the Reference Docs for [more information](/docs/reference/cli/supabase-db-lint).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/cli/testing-emails.mdx b/apps/docs/pages/guides/cli/testing-emails.mdx
deleted file mode 100644
index f9e3cce6706..00000000000
--- a/apps/docs/pages/guides/cli/testing-emails.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'testing-emails-locally',
-  title: 'Testing emails locally',
-  description: 'Testing emails for Supabase Auth on your local machine.',
-  subtitle: 'Testing emails for Supabase Auth on your local machine.',
-}
-
-The Supabase CLI uses [Inbucket](https://github.com/inbucket/inbucket) to capture emails sent from your local machine. This is useful for testing emails sent from Supabase Auth.
-
-## Accessing Inbucket
-
-By default, Inbucket is available at [localhost:54324](http://localhost:54324) when you run `supabase start`. Simply open this URL in your browser to view the emails.
-
-## Going into Production
-
-The "default" email provided by Supabase is only for development purposes. It is [heavily restricted](/docs/guides/platform/going-into-prod#auth-rate-limits) to ensure that it is not used for spam.
-
-Before you go into production, you must configure your own email provider. This is as simple as enabling a new SMTP credentials in your [project settings](https://supabase.com/dashboard/project/_/settings/auth).
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
diff --git a/apps/docs/pages/guides/database/extensions/pgtap.mdx b/apps/docs/pages/guides/database/extensions/pgtap.mdx
index 42d4521687e..991d15097b5 100644
--- a/apps/docs/pages/guides/database/extensions/pgtap.mdx
+++ b/apps/docs/pages/guides/database/extensions/pgtap.mdx
@@ -72,8 +72,8 @@ API:
 begin;
 select plan( 2 );
 
-select has_column( 'profiles', 'id' );  # test that the "id" column exists in the "profiles" table
-select col_is_pk( 'profiles', 'id' );   # test that the "id" column is a primary key
+select has_column( 'profiles', 'id' ); -- test that the "id" column exists in the "profiles" table
+select col_is_pk( 'profiles', 'id' ); -- test that the "id" column is a primary key
 
 select * from finish();
 rollback;
@@ -94,8 +94,8 @@ select policies_are(
   'public',
   'profiles',
   ARRAY [
-    'Profiles are public', # Test that there is a policy called  "Profiles are public" on the "profiles" table.
-    'Profiles can only be updated by the owner'  # Test that there is a policy called  "Profiles can only be updated by the owner" on the "profiles" table.
+    'Profiles are public', -- Test that there is a policy called  "Profiles are public" on the "profiles" table.
+    'Profiles can only be updated by the owner'  -- Test that there is a policy called  "Profiles can only be updated by the owner" on the "profiles" table.
   ]
 );
 
diff --git a/apps/docs/pages/guides/database/extensions/pgvector.mdx b/apps/docs/pages/guides/database/extensions/pgvector.mdx
index b142920f358..534bbe63f99 100644
--- a/apps/docs/pages/guides/database/extensions/pgvector.mdx
+++ b/apps/docs/pages/guides/database/extensions/pgvector.mdx
@@ -19,7 +19,7 @@ Vector similarity refers to a measure of the similarity between two related item
 
 ### Embeddings
 
-This is particularly useful if you're building on top of OpenAI's [GPT-3](https://openai.com/blog/gpt-3-apps/). You can create and store [embeddings](https://platform.openai.com/docs/guides/embeddings) which match the GPT model you're using.
+This is particularly useful if you're building on top of OpenAI's [GPT-3](https://openai.com/blog/gpt-3-apps/). You can create and store [embeddings](/docs/guides/ai/quickstarts/generate-text-embeddings) for retrieval augmented generation.
 
 ## Usage
 
@@ -66,25 +66,29 @@ create table posts (
   id serial primary key,
   title text not null,
   body text not null,
-  embedding vector(1536)
+  embedding vector(384)
 );
 ```
 
 ### Storing a vector / embedding
 
-In this example we'll generate a vector using the OpenAI API client, then store it in the database using the Supabase client.
+In this example we'll generate a vector using Transformer.js, then store it in the database using the Supabase client.
 
 ```js
+import { pipeline } from '@xenova/transformers'
+const generateEmbedding = await pipeline('feature-extraction', 'Supabase/gte-small')
+
 const title = 'First post!'
 const body = 'Hello world!'
 
-// Generate a vector using OpenAI
-const embeddingResponse = await openai.createEmbedding({
-  model: 'text-embedding-ada-002',
-  input: body,
+// Generate a vector using Transformers.js
+const output = await generateEmbedding(body, {
+  pooling: 'mean',
+  normalize: true,
 })
 
-const [{ embedding }] = embeddingResponse.data.data
+// Extract the embedding output
+const embedding = Array.from(output.data)
 
 // Store the vector in Postgres
 const { data, error } = await supabase.from('posts').insert({
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
new file mode 100644
index 00000000000..2363a4ce7d0
--- /dev/null
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -0,0 +1,181 @@
+import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import { relative } from 'path'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import emoji from 'remark-emoji'
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+import components from '~/components'
+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'
+
+// We fetch these docs at build time from an external repo
+const org = 'supabase'
+const repo = 'wrappers'
+const branch = 'main'
+const docsDir = 'docs'
+const externalSite = 'https://supabase.github.io/wrappers'
+
+// Each external docs page is mapped to a local page
+const pageMap = [
+  {
+    slug: 'airtable',
+    meta: {
+      title: 'Airtable',
+    },
+    remoteFile: 'airtable.md',
+  },
+  {
+    slug: 's3',
+    meta: {
+      title: 'AWS S3',
+    },
+    remoteFile: 's3.md',
+  },
+  {
+    slug: 'bigquery',
+    meta: {
+      title: 'BigQuery',
+    },
+    remoteFile: 'bigquery.md',
+  },
+  {
+    slug: 'clickhouse',
+    meta: {
+      title: 'ClickHouse',
+    },
+    remoteFile: 'clickhouse.md',
+  },
+  {
+    slug: 'firebase',
+    meta: {
+      title: 'Firebase',
+    },
+    remoteFile: 'firebase.md',
+  },
+  {
+    slug: 'logflare',
+    meta: {
+      title: 'Logflare',
+    },
+    remoteFile: 'logflare.md',
+  },
+  {
+    slug: 'stripe',
+    meta: {
+      title: 'Stripe',
+    },
+    remoteFile: 'stripe.md',
+  },
+]
+
+interface WrappersDocsProps {
+  source: MDXRemoteSerializeResult
+  meta: {
+    title: string
+    description?: string
+  }
+}
+
+export default function WrappersDocs({ source, meta }: WrappersDocsProps) {
+  return (
+    <Layout meta={meta}>
+      <MDXRemote {...source} components={components} />
+    </Layout>
+  )
+}
+
+/**
+ * Fetch markdown from external repo and transform links
+ */
+export const getStaticProps: GetStaticProps<WrappersDocsProps> = async ({ params }) => {
+  const page = pageMap.find(({ slug }) => slug === params.slug)
+
+  if (!page) {
+    throw new Error(`No page mapping found for slug '${params.slug}'`)
+  }
+
+  const { remoteFile, meta } = page
+
+  const response = await fetch(
+    `https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
+  )
+
+  const source = await response.text()
+
+  const urlTransform: UrlTransformFunction = (url) => {
+    try {
+      const externalSiteUrl = new URL(externalSite)
+
+      const placeholderHostname = 'placeholder'
+      const { hostname, pathname, hash } = new URL(url, `http://${placeholderHostname}`)
+
+      // Don't modify a url with a FQDN or a url that's only a hash
+      if (hostname !== placeholderHostname || pathname === '/') {
+        return url
+      }
+
+      const relativePage = (
+        pathname.endsWith('.md')
+          ? pathname.replace(/\.md$/, '')
+          : relative(externalSiteUrl.pathname, pathname)
+      ).replace(/^\//, '')
+
+      const page = pageMap.find(({ remoteFile }) => `${relativePage}.md` === remoteFile)
+
+      // If we have a mapping for this page, use the mapped path
+      if (page) {
+        return page.slug + hash
+      }
+
+      // If we don't have this page in our docs, link to original docs
+      return `${externalSite}/${relativePage}${hash}`
+    } catch (err) {
+      console.error('Error transforming markdown URL', err)
+      return url
+    }
+  }
+
+  const codeHikeOptions: CodeHikeConfig = {
+    theme: codeHikeTheme,
+    lineNumbers: true,
+    showCopyButton: true,
+    skipLanguages: [],
+    autoImport: false,
+  }
+
+  const mdxSource = await serialize(source, {
+    scope: {
+      chCodeConfig: codeHikeOptions,
+    },
+    mdxOptions: {
+      remarkPlugins: [
+        remarkGfm,
+        remarkMkDocsAdmonition,
+        emoji,
+        remarkPyMdownTabs,
+        [removeTitle, meta.title],
+        [remarkCodeHike, codeHikeOptions],
+      ],
+      rehypePlugins: [[linkTransform, urlTransform], rehypeSlug],
+    },
+  })
+
+  return { props: { source: mdxSource, meta } }
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: pageMap.map(({ slug }) => ({
+      params: {
+        slug,
+      },
+    })),
+    fallback: false,
+  }
+}
diff --git a/apps/docs/pages/guides/database/extensions/wrappers.mdx b/apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
similarity index 78%
rename from apps/docs/pages/guides/database/extensions/wrappers.mdx
rename to apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
index 5d99f88ea08..16373b0a30e 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers.mdx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/overview.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 
 export const meta = {
   id: 'wrappers',
-  title: 'wrappers: 3rd Party Integrations',
+  title: 'Wrappers: 3rd Party Integrations',
   description: '3rd party integrations for PostgreSQL ',
 }
 
@@ -60,12 +60,13 @@ A web interface for connecting to external data is coming to Supabase Studio in
 
 ## Integrations
 
-- [Firebase](https://supabase.github.io/wrappers/firebase/)
-- [Stripe](https://supabase.github.io/wrappers/stripe/)
-- [BigQuery](https://supabase.github.io/wrappers/bigquery/)
-- [AWS S3](https://supabase.github.io/wrappers/s3/)
-- Airtable - Coming Soon
-- Clickhouse - Coming Soon
+- [Airtable](/docs/guides/database/extensions/wrappers/airtable)
+- [AWS S3](/docs/guides/database/extensions/wrappers/s3)
+- [BigQuery](/docs/guides/database/extensions/wrappers/bigquery)
+- [ClickHouse](/docs/guides/database/extensions/wrappers/clickhouse)
+- [Firebase](/docs/guides/database/extensions/wrappers/firebase)
+- [Logflare](/docs/guides/database/extensions/wrappers/logflare)
+- [Stripe](/docs/guides/database/extensions/wrappers/stripe)
 
 ## Resources
 
diff --git a/apps/docs/pages/guides/database/inspect.mdx b/apps/docs/pages/guides/database/inspect.mdx
new file mode 100644
index 00000000000..7cf71d50fd8
--- /dev/null
+++ b/apps/docs/pages/guides/database/inspect.mdx
@@ -0,0 +1,109 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'json',
+  title: 'Analyzing efficiency and performance from the terminal',
+  description:
+    'Inspecting your Postgres database for common issues around disk, query performance, index, locks, and more using the terminal.',
+}
+
+The Supabase CLI comes with a range of tools to help inspect your Postgres instances for potential issues. The CLI gets the information from <a href="https://www.postgresql.org/docs/current/internals.html" target="_blank">Postgres internals</a>. Therefore, most tools provided are compatible with any Postgres databases regardless if they are a Supabase project or not.
+
+You can find installation instructions for the the Supabase CLI <a href="/docs/guides/cli" target="_blank">here</a>.
+
+### The `inspect db` command
+
+The inspection tools for your Postgres database are under then `inspect db` command. You can get a full list of available commands by running `supabase inspect db help`.
+
+```
+$ supabase inspect db help
+Tools to inspect your Supabase database
+
+Usage:
+  supabase inspect db [command]
+
+Available Commands:
+  bloat                Estimates space allocated to a relation that is full of dead tuples
+  blocking             Show queries that are holding locks and the queries that are waiting for them to be released
+  cache-hit            Show cache hit rates for tables and indices
+
+...
+```
+
+### Connect to any Postgres database
+
+Most inspection commands are Postgres agnostic. You can run inspection routines on any Postgres database even if it is not a Supabase project by providing a connection string via `--db-url`.
+
+For example you can connect to your local Postgres instance:
+
+```
+supabase --db-url postgresql://postgres:postgres@localhost:5432/postgres inspect db bloat
+```
+
+### Connect to a Supabase instance
+
+Working with Supabase, you can link the Supabase CLI with your project:
+
+```
+supabase link --project-ref <project-id>
+```
+
+Then the CLI will automatically connect to your Supabase project whenever you are in the project folder and you no longer need to provide `—db-url`.
+
+## Inspection Commands
+
+Below are the db inspection commands provided, grouped by different use cases.
+
+<Admonition type="note">
+
+Some commands might require `pg_stat_statements` to be enabled or a specific Postgres version to be used.
+
+</Admonition>
+
+### Disk Storage
+
+These commands are handy if you are running low on disk storage:
+
+- [bloat](/docs/reference/cli/supabase-inspect-db-bloat) - estimates the amount of wasted space
+- [vacuum-stats](/docs/reference/cli/supabase-inspect-db-vacuum-stats) - gives information on waste collection routines
+- [table-record-counts](/docs/reference/cli/supabase-inspect-db-table-record-counts) - estimates the number of records per table
+- [table-sizes](/docs/reference/cli/supabase-inspect-db-table-sizes) - shows the sizes of tables
+- [index-sizes](/docs/reference/cli/supabase-inspect-db-index-sizes) - shows the sizes of individual index
+- [table-index-sizes](/docs/reference/cli/supabase-inspect-db-table-index-sizes) - shows the sizes of indexes for each table
+
+### Query Performance
+
+The commands below are useful if your Postgres database consumes a lot of resources like CPU, RAM or Disk IO. You can also use them to investigate slow queries.
+
+- [cache-hit](/docs/reference/cli/supabase-inspect-db-cache-hit) - shows how efficient your cache usage is overall
+- [unused-indexes](/docs/reference/cli/supabase-inspect-db-unused-indexes) - shows indexes with low index scans
+- [index-usage](/docs/reference/cli/supabase-inspect-db-index-usage) - shows information about the efficiency of indexes
+- [seq-scans](/docs/reference/cli/supabase-inspect-db-seq-scans) - show number of sequential scans recorded against all tables
+- [long-running-queries](/docs/reference/cli/supabase-inspect-db-long-running-queries) - shows long running queries that are executing right now
+- [outliers](/docs/reference/cli/supabase-inspect-db-outliers) - shows queries with high execution time but low call count and queries with high proportion of execution time spent on synchronous I/O
+
+### Locks
+
+- [locks](/docs/reference/cli/supabase-inspect-db-locks) - shows statements which have taken out an exclusive lock on a relation
+- [blocking](/docs/reference/cli/supabase-inspect-db-blocking) - shows statements that are waiting for locks to be released
+
+### Connections
+
+- [role-connections](/docs/reference/cli/supabase-inspect-db-role-connections) - shows number of active connections for all database roles (Supabase-specific command)
+- [replication-slots](/docs/reference/cli/supabase-inspect-db-replication-slots) - shows information about replication slots on the database
+
+## Notes on `pg_stat_statements`
+
+Following commands require `pg_stat_statements` to be enabled: calls, locks, cache-hit, blocking, unused-indexes, index-usage, bloat, outliers, table-record-counts, replication-slots, seq-scans, vacuum-stats, long-running-queries.
+
+When using `pg_stat_statements` also take note that it only stores the latest 5,000 statements. Moreover, consider resetting the analysis after optimizing any queries by running `select pg_stat_statements_reset();`
+
+Learn more about pg_stats [here](https://supabase.com/docs/guides/database/extensions/pg_stat_statements).
+
+## Acknowledgements
+
+Supabase CLI's inspect commands are heavily inspired by the <a href="https://github.com/heroku/heroku-pg-extras" target="_blank">pg-extras</a> tools.
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
index 91f5a535fa5..4b1991f3d12 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/kotlin.mdx
@@ -62,8 +62,6 @@ export const meta = {
       ```kotlin
         implementation "io.github.jan-tennert.supabase:postgrest-kt:$supabase_version"
         implementation "io.ktor:ktor-client-android:$ktor_version"
-        implementation "io.ktor:ktor-client-core:$ktor_version"
-        implementation "io.ktor:ktor-utils:$ktor_version"
       ```
 
     </StepHikeCompact.Code>
@@ -102,10 +100,8 @@ export const meta = {
           supabaseUrl = "https://xyzcompany.supabase.co",
           supabaseKey = "public-anon-key"
         ) {
-              install(GoTrue)
-              install(Postgrest)
-              install(Storage)
-          }
+          install(Postgrest)
+      }
       ```
 
     </StepHikeCompact.Code>
diff --git a/apps/docs/pages/guides/platform/custom-postgres-config.mdx b/apps/docs/pages/guides/platform/custom-postgres-config.mdx
index be25220006c..c5888bf6a6e 100644
--- a/apps/docs/pages/guides/platform/custom-postgres-config.mdx
+++ b/apps/docs/pages/guides/platform/custom-postgres-config.mdx
@@ -73,3 +73,15 @@ max_parallel_workers    |3        |
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
 export default Page
+
+## Pooler Config
+
+You can also [customize some parameters](https://supabase.com/dashboard/project/_/settings/database) for the Connection Pooler:
+
+1. [Pooling Mode](https://devcenter.heroku.com/articles/best-practices-pgbouncer-configuration#pgbouncer-s-connection-pooling-modes)
+1. [Default Pool Size](https://www.pgbouncer.org/config.html)
+1. [Max Client Connections](https://www.pgbouncer.org/config.html)
+
+The default pool size, and the maximum number of clients allowed to connect concurrently is automatically optimized based on the compute add-on being used. At the moment, the Dashboard only reflects any custom configuration being used, and does not include the default optimized numbers used for your project.
+
+Custom Pooler Config may also require manual updates to any relevant overrides when changing compute add-ons.
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 8024c9629a4..68b70f43e4b 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -25,7 +25,7 @@ export const meta = {
       ## Products
     </div>
 
-    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-1100 [&_svg]dark:text-brand-900">
+    <div className="grid grid-cols-12 gap-6 not-prose [&_svg]:text-brand-600 [&_svg]dark:text-brand">
       {products.map((product) => {
         return (
           <Link href={product.href} key={product.title} passHref>
@@ -44,7 +44,7 @@ export const meta = {
       <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">
+          <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
             {/* <IconBackground>
               <HomeMenuIconPicker icon="reference-cli" width={18} height={18} />
             </IconBackground> */}
@@ -89,7 +89,7 @@ export const meta = {
         <TextLink
           label="Explore more resources"
           url="/guides/resources"
-          className="no-underline text-brand-900 text-sm"
+          className="no-underline text-brand text-sm"
         />
       </div>
 
@@ -148,7 +148,7 @@ export const meta = {
     <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">
+        <div className="flex items-center gap-3 mb-3 text-brand-600 dark:text-brand">
           <IconBackground>
             <HomeMenuIconPicker icon="self-hosting" width={18} height={18} />
           </IconBackground>
@@ -160,7 +160,7 @@ export const meta = {
         <TextLink
           label="More on Self-Hosting"
           url="/guides/self-hosting"
-          className="no-underline text-brand-900 text-sm"
+          className="no-underline text-brand text-sm"
         />
       </div>
 
diff --git a/apps/docs/pages/reference/cli/config.tsx b/apps/docs/pages/reference/cli/config.tsx
deleted file mode 100644
index 096aa30b6aa..00000000000
--- a/apps/docs/pages/reference/cli/config.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import specFile from '~/../../spec/cli_v1_config.yaml' assert { type: 'yml' }
-import { Parameter } from '~/lib/refGenerator/refTypes'
-import ReactMarkdown from 'react-markdown'
-import GuidesTableOfContents from '~/components/GuidesTableOfContents'
-import { Heading } from '~/components/CustomHTMLElements'
-import Head from 'next/head'
-
-// Parameters are grouped on the page by tag
-const TAGS = ['general', 'auth', 'api', 'database', 'dashboard', 'local', 'edge-functions']
-
-const tocList = TAGS.map((tag) =>
-  specFile.parameters
-    .filter((param: Parameter) => param.tags[0] === tag)
-    .map((parameter) => {
-      const text = parameter.id
-      const link = `#${parameter.id}`
-      const level = '2'
-      return { text, link, level }
-    })
-).flat()
-
-export default function Config() {
-  return (
-    <>
-      <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 className="">CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-800 to-brand-900 my-8"></div>
-            <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>
-                          <Heading tag="h2" parseAnchors={false} customAnchor={parameter.id}>
-                            <code>{parameter.title}</code>
-                          </Heading>
-                          <div className="grid">
-                            <div className="border-b pb-8" key={parameter.id}>
-                              <div className=" mb-16">
-                                <p className="mb-4 scroll-mt-16 mt-0 text-scale-1100 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 className="md:col-span-3">
-          <div className="sticky top-20 border-l">
-            <span className="block font-mono text-xs uppercase text-scale-1200 pl-5 mb-4">
-              On this page
-            </span>
-            <GuidesTableOfContents list={tocList} />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt
index d4668694ba3..28f9bd2e278 100644
--- a/apps/docs/public/humans.txt
+++ b/apps/docs/public/humans.txt
@@ -14,6 +14,7 @@ Bobbie Soedirgo
 Chandana Anumula
 Chase Granberry
 Chris Copplestone
+Chris Gwilliams
 Dave Wilson
 Div Arora
 Divit D
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index ec6e38a814e..ece45d88688 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -169,7 +169,7 @@ pre[class*='language-'] {
 
 // ToC styles
 .toc__menu-item--active {
-  color: var(--colors-brand9) !important;
+  color: hsl(var(--brand-default)) !important;
 }
 
 .video-container {
diff --git a/apps/www/_blog/2023-07-25-supabase-lw8-hackathon.mdx b/apps/www/_blog/2023-07-25-supabase-lw8-hackathon.mdx
index 25b402b4d9b..e11d5569661 100644
--- a/apps/www/_blog/2023-07-25-supabase-lw8-hackathon.mdx
+++ b/apps/www/_blog/2023-07-25-supabase-lw8-hackathon.mdx
@@ -46,8 +46,6 @@ There will be a winner and a runner-up prize for each category. Every team membe
 
 ## Submission
 
-Make sure you [register here](https://madewithsupabase.com/hackathons/launch-week-8).
-
 You should submit your project using [this form](https://madewithsupabase.com/hackathons/launch-week-8) before 11:59 pm Sunday midnight PT 14th August 2023. Extra points if you include a simple video demoing the app in the description.
 
 ## Judges
diff --git a/apps/www/_blog/2023-08-01-react-native-storage.mdx b/apps/www/_blog/2023-08-01-react-native-storage.mdx
new file mode 100644
index 00000000000..ca9f81d61a7
--- /dev/null
+++ b/apps/www/_blog/2023-08-01-react-native-storage.mdx
@@ -0,0 +1,625 @@
+---
+title: 'React Native file upload with Supabase Storage'
+description: Learn how to implement authentication and file upload in a React Native app.
+author: simon_grimm
+image: 2023-08-01-react-native-storage/react-native-storage.png
+thumb: 2023-08-01-react-native-storage/react-native-storage.png
+tags:
+  - react-native
+  - storage
+date: '2023-08-01'
+toc_depth: 2
+---
+
+If you want to upload files from your React Native app, you need a backend to store the files, [Supabase Storage](https://supabase.com/docs/guides/storage) is a great choice for this as it provides a simple API to upload files, and we can easily combine this with authentication to build a powerful app.
+
+This means you can quickly build your own image-sharing app, a file-sharing app, or any other app that needs to upload files to a backend!
+
+![Supabase File Upload React Native](/images/blog/2023-08-01-react-native-storage/supabase-file-upload-react-native.gif)
+
+In this tutorial you will learn to:
+
+- Set up a React Native app with [Expo SDK49](https://expo.dev/)
+- Use [Supabase Authentication](https://supabase.com/docs/guides/auth)
+- Work with Expo Router v2 and protected routes
+- Upload files to [Supabase Storage](https://supabase.com/docs/guides/storage)
+
+You can also directly check out the [full source code on Github](https://github.com/saimon24/react-native-resumable-upload-supabase) so you can get started with Supabase fast!
+
+Before we get into the app, let's quickly [start a new Supabase project](https://supabase.com/dashboard).
+
+## Creating the Supabase Project
+
+To use authentication and storage we need a new Supabase project. If you don't have a Supabase account yet, you can [get started for free](https://supabase.com/dashboard)!
+
+In your dashboard, click "New Project" and leave it to the default settings, but make sure you keep a copy of your Database password!
+
+![Supabase new project](/images/blog/2023-08-01-react-native-storage/new-project.png)
+
+After a minute your project should be ready, and we can configure the authentication and storage.
+
+## Setting up Authentication
+
+Authentication will be enabled by default, but we want to turn off email confirmation for this tutorial.
+
+Select **Authentication** from the menu, go to the **Providers** section, and expand Email.
+
+![Email Authentication settings](/images/blog/2023-08-01-react-native-storage/email-auth.png)
+
+Here you can disable the confirmation email, and apply other changes later if you want to!
+
+## Setting up Storage
+
+Now we want to create a **bucket** under storage where we will upload our files, and also add some security rules to protect the files of a user.
+
+First, select **Storage** from the menu, then click **New bucket** and call it `files`.
+
+![Supabase new bucket](/images/blog/2023-08-01-react-native-storage/new-bucket.png)
+
+Make sure that this is not a public bucket, otherwise, even unauthenticated users can upload or read the files!
+
+To protect that bucket and allow users only access to their own folder, we need to add some [Storage policies](https://supabase.com/docs/guides/storage/access-control).
+
+You can either do this through the UI and pick from examples, or simply run my SQL script in the **SQL Editor** which you can select from the menu:
+
+```sql
+CREATE POLICY "Enable storage access for users based on user_id" ON "storage"."objects"
+AS PERMISSIVE FOR ALL
+TO public
+USING (bucket_id = 'files' AND auth.uid()::text = (storage.foldername(name))[1])
+WITH CHECK (bucket_id = 'files' AND auth.uid()::text = (storage.foldername(name))[1])
+```
+
+This will allow users to only access their own folder, and not any other files in the bucket.
+
+## Setting up the React Native app
+
+Now that we have our Supabase project ready, we can start building the React Native app!
+
+Get started by setting up a new Expo app with the tabs template and install some dependencies:
+
+```sh
+# Create a new Expo app
+npx create-expo-app@latest cloudApp --template tabs@49
+
+# Install dependencies
+npm i @supabase/supabase-js
+npm i react-native-url-polyfill base64-arraybuffer react-native-loading-spinner-overlay
+
+# Install Expo packages
+npx expo install expo-secure-store
+npx expo install expo-image-picker
+npx expo install expo-file-system
+```
+
+We will use the [Expo Secure Store](https://docs.expo.dev/versions/latest/sdk/securestore/) to store the Supabase session, and the [Expo Image Picker](https://docs.expo.dev/versions/latest/sdk/imagepicker/) to select images from the device. We also need the [Expo File System](https://docs.expo.dev/versions/latest/sdk/filesystem/) to read the image from the device and upload its data.
+
+You can now already run your project with `npx expo` and then select a platform to run on.
+
+However, the tabs template contains a lot of code that we don't need, so to simplify things we can remove the **app**, **constants** and **components** folder.
+
+This gives us a much cleaner project structure.
+
+## Connecting to Supabase from React Native
+
+To use Supabase we need to initialize the client with our project URL and the public key, which you can find in the **Settings** of your project under **API**.
+
+You can put both of them in a `.env` file at the root of your project:
+
+```env
+EXPO_PUBLIC_SUPABASE_URL=
+EXPO_PUBLIC_SUPABASE_ANON_KEY=
+```
+
+We can now simply read those values from the environment variables and initialize the Supabase client, so create a file at `config/initSupabase.ts` and add the following code:
+
+```ts
+import * as SecureStore from 'expo-secure-store'
+import 'react-native-url-polyfill/auto'
+
+import { createClient } from '@supabase/supabase-js'
+
+// Use a custom secure storage solution for the Supabase client to store the JWT
+const ExpoSecureStoreAdapter = {
+  getItem: (key: string) => {
+    return SecureStore.getItemAsync(key)
+  },
+  setItem: (key: string, value: string) => {
+    SecureStore.setItemAsync(key, value)
+  },
+  removeItem: (key: string) => {
+    SecureStore.deleteItemAsync(key)
+  },
+}
+
+const url = process.env.EXPO_PUBLIC_SUPABASE_URL
+const key = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY
+
+// Initialize the Supabase client
+export const supabase = createClient(url, key, {
+  auth: {
+    storage: ExpoSecureStoreAdapter as any,
+    detectSessionInUrl: false,
+  },
+})
+```
+
+We are using the SecureStore from Expo to handle the session of our Supabase client and add in the `createClient` function.
+
+Later we can import the `supabase` client from this file and use it in our app whenever we need to access Supabase.
+
+## Building the authentication flow
+
+Currently, the app won't work as we have no entry point. Because we are using the Expon Router and file-based routing, we can create a new file at `app/index.tsx` which will be the first page that comes up in our app.
+
+On this page we will handle both login and registration, so let's start by creating a simple form with a few inputs and buttons inside the `app/index.tsx` file:
+
+```tsx
+import { Alert, View, Button, TextInput, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { useState } from 'react'
+import React from 'react'
+import Spinner from 'react-native-loading-spinner-overlay'
+import { supabase } from '../config/initSupabase'
+
+const Login = () => {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  // Sign in with email and password
+  const onSignInPress = async () => {
+    setLoading(true)
+
+    const { error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    })
+
+    if (error) Alert.alert(error.message)
+    setLoading(false)
+  }
+
+  // Create a new user
+  const onSignUpPress = async () => {
+    setLoading(true)
+    const { error } = await supabase.auth.signUp({
+      email: email,
+      password: password,
+    })
+
+    if (error) Alert.alert(error.message)
+    setLoading(false)
+  }
+
+  return (
+    <View style={styles.container}>
+      <Spinner visible={loading} />
+
+      <Text style={styles.header}>My Cloud</Text>
+
+      <TextInput
+        autoCapitalize="none"
+        placeholder="john@doe.com"
+        value={email}
+        onChangeText={setEmail}
+        style={styles.inputField}
+      />
+      <TextInput
+        placeholder="password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        style={styles.inputField}
+      />
+
+      <TouchableOpacity onPress={onSignInPress} style={styles.button}>
+        <Text style={{ color: '#fff' }}>Sign in</Text>
+      </TouchableOpacity>
+      <Button onPress={onSignUpPress} title="Create Account" color={'#fff'}></Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 200,
+    padding: 20,
+    backgroundColor: '#151515',
+  },
+  header: {
+    fontSize: 30,
+    textAlign: 'center',
+    margin: 50,
+    color: '#fff',
+  },
+  inputField: {
+    marginVertical: 4,
+    height: 50,
+    borderWidth: 1,
+    borderColor: '#2b825b',
+    borderRadius: 4,
+    padding: 10,
+    color: '#fff',
+    backgroundColor: '#363636',
+  },
+  button: {
+    marginVertical: 15,
+    alignItems: 'center',
+    backgroundColor: '#2b825b',
+    padding: 12,
+    borderRadius: 4,
+  },
+})
+
+export default Login
+```
+
+There's nothing fancy going on here, but this is all we need to use Supabase Authentication in our app!
+
+![Login page](/images/blog/2023-08-01-react-native-storage/login-page.png)
+
+You can try it out right now and create a new user account or sign in with an existing one and log the values to the console to see what's going on.
+
+However, we are not handling the authentication state yet so let's create a **Context** to listen to changes.
+
+We will wrap a Provider around our app, which will use the `onAuthStateChange` function from Supabase to listen to changes in the authentication state and accordingly set our state.
+
+For this, create a new file at `provider/AuthProvider.tsx` and add the following code:
+
+```tsx
+import React, { useState, useEffect, createContext, PropsWithChildren } from 'react'
+import { Session, User } from '@supabase/supabase-js'
+import { supabase } from '../config/initSupabase'
+
+type AuthProps = {
+  user: User | null
+  session: Session | null
+  initialized?: boolean
+  signOut?: () => void
+}
+
+export const AuthContext = createContext<Partial<AuthProps>>({})
+
+// Custom hook to read the context values
+export function useAuth() {
+  return React.useContext(AuthContext)
+}
+
+export const AuthProvider = ({ children }: PropsWithChildren) => {
+  const [user, setUser] = useState<User | null>()
+  const [session, setSession] = useState<Session | null>(null)
+  const [initialized, setInitialized] = useState<boolean>(false)
+
+  useEffect(() => {
+    // Listen for changes to authentication state
+    const { data } = supabase.auth.onAuthStateChange(async (event, session) => {
+      setSession(session)
+      setUser(session ? session.user : null)
+      setInitialized(true)
+    })
+    return () => {
+      data.subscription.unsubscribe()
+    }
+  }, [])
+
+  // Log out the user
+  const signOut = async () => {
+    await supabase.auth.signOut()
+  }
+
+  const value = {
+    user,
+    session,
+    initialized,
+    signOut,
+  }
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+```
+
+To use the context we can now wrap it around our app, and while we do this we can also take care of the navigation:
+
+In the topmost layout file we can check whether a user has an active session or not, and either directly sign the user into the inside area (that we will create soon) or automatically bring her back to the login screen.
+
+To make this work with the Expo Router we can create a file at `app/_layout.tsx` and add the following code:
+
+```tsx
+import { Slot, useRouter, useSegments } from 'expo-router'
+import { useEffect } from 'react'
+import { AuthProvider, useAuth } from '../provider/AuthProvider'
+
+// Makes sure the user is authenticated before accessing protected pages
+const InitialLayout = () => {
+  const { session, initialized } = useAuth()
+  const segments = useSegments()
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!initialized) return
+
+    // Check if the path/url is in the (auth) group
+    const inAuthGroup = segments[0] === '(auth)'
+
+    if (session && !inAuthGroup) {
+      // Redirect authenticated users to the list page
+      router.replace('/list')
+    } else if (!session) {
+      // Redirect unauthenticated users to the login page
+      router.replace('/')
+    }
+  }, [session, initialized])
+
+  return <Slot />
+}
+
+// Wrap the app with the AuthProvider
+const RootLayout = () => {
+  return (
+    <AuthProvider>
+      <InitialLayout />
+    </AuthProvider>
+  )
+}
+
+export default RootLayout
+```
+
+Whenever the `initialized` or `session` state changes, we check if the user is authenticated and redirect her to the correct page.
+
+This also means we don't have to worry about the authentication state in our pages anymore, we can just assume that the user is authenticated and use the `useAuth` hook to access the user and session data later on.
+
+Your app might show an error right now because the `/list` route doesn't exist yet, but we will create it in the next step.
+
+## File Upload to Supabase Storage
+
+Now that we have the authentication set up, we can start working on the file upload.
+
+First, let's define another layout for this inside area so create a file at `/app/(auth)/_layout.tsx` and add the following code:
+
+```tsx
+import { Stack } from 'expo-router'
+import { useAuth } from '../../provider/AuthProvider'
+import React from 'react'
+import { TouchableOpacity } from 'react-native'
+import { Ionicons } from '@expo/vector-icons'
+
+// Simple stack layout within the authenticated area
+const StackLayout = () => {
+  const { signOut } = useAuth()
+
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: '#0f0f0f',
+        },
+        headerTintColor: '#fff',
+      }}
+    >
+      <Stack.Screen
+        name="list"
+        options={{
+          headerTitle: 'My Files',
+          headerRight: () => (
+            <TouchableOpacity onPress={signOut}>
+              <Ionicons name="log-out-outline" size={30} color={'#fff'} />
+            </TouchableOpacity>
+          ),
+        }}
+      ></Stack.Screen>
+    </Stack>
+  )
+}
+
+export default StackLayout
+```
+
+This defines a simple stack navigation and adds a button to trigger the logout, so we can now also fully test the authentication flow.
+
+Next, we create the page for uploading and displaying all files of a user from Supabase Storage.
+
+You won't have any files to show yet, but loading the files of a user is as easy as calling `list()` on the storage bucket and passing the user id as the folder name.
+
+Additionally, we add a little FAB (floating action button) to trigger the file picker, so create a file at `/app/(auth)/list.tsx` and add the following code:
+
+```tsx
+import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { Ionicons } from '@expo/vector-icons'
+import * as ImagePicker from 'expo-image-picker'
+import { useAuth } from '../../provider/AuthProvider'
+import * as FileSystem from 'expo-file-system'
+import { decode } from 'base64-arraybuffer'
+import { supabase } from '../../config/initSupabase'
+import { FileObject } from '@supabase/storage-js'
+
+const list = () => {
+  const { user } = useAuth()
+  const [files, setFiles] = useState<FileObject[]>([])
+
+  useEffect(() => {
+    if (!user) return
+
+    // Load user images
+    loadImages()
+  }, [user])
+
+  const loadImages = async () => {
+    const { data } = await supabase.storage.from('files').list(user!.id)
+    if (data) {
+      setFiles(data)
+    }
+  }
+
+  const onSelectImage = async () => {
+    // TODO
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* FAB to add images */}
+      <TouchableOpacity onPress={onSelectImage} style={styles.fab}>
+        <Ionicons name="camera-outline" size={30} color={'#fff'} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#151515',
+  },
+  fab: {
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 70,
+    position: 'absolute',
+    bottom: 40,
+    right: 30,
+    height: 70,
+    backgroundColor: '#2b825b',
+    borderRadius: 100,
+  },
+})
+
+export default list
+```
+
+This should give us a nice and clean UI.
+
+![Files page](/images/blog/2023-08-01-react-native-storage/files-page.png)
+
+Now we can implement the image picker and upload the selected image to Supabase Storage.
+
+Using the image picker from Expo gives us a **URI**, which we can use to read the file from the file system and convert it to a base64 string.
+
+We can then use the `upload()` method from the storage client to upload the file to the storage bucket. Life can be easy.
+
+At this point, you should be able to upload files to Supabase Storage, and you can already see them in your UI (or log them to the console).
+
+To finally display them we will add a `ScrollView` component, which will render one item for every file of a user.
+
+Let's start by creating those component rows in another file, so create a `components/ImageItem.tsx` file and add the following code:
+
+```tsx
+import { FileObject } from '@supabase/storage-js'
+import { Image, View, Text, TouchableOpacity } from 'react-native'
+import { supabase } from '../config/initSupabase'
+import { useState } from 'react'
+import { Ionicons } from '@expo/vector-icons'
+
+// Image item component that displays the image from Supabase Storage and a delte button
+const ImageItem = ({
+  item,
+  userId,
+  onRemoveImage,
+}: {
+  item: FileObject
+  userId: string
+  onRemoveImage: () => void
+}) => {
+  const [image, setImage] = useState<string>('')
+
+  supabase.storage
+    .from('files')
+    .download(`${userId}/${item.name}`)
+    .then(({ data }) => {
+      const fr = new FileReader()
+      fr.readAsDataURL(data!)
+      fr.onload = () => {
+        setImage(fr.result as string)
+      }
+    })
+
+  return (
+    <View style={{ flexDirection: 'row', margin: 1, alignItems: 'center', gap: 5 }}>
+      {image ? (
+        <Image style={{ width: 80, height: 80 }} source={{ uri: image }} />
+      ) : (
+        <View style={{ width: 80, height: 80, backgroundColor: '#1A1A1A' }} />
+      )}
+      <Text style={{ flex: 1, color: '#fff' }}>{item.name}</Text>
+      {/* Delete image button */}
+      <TouchableOpacity onPress={onRemoveImage}>
+        <Ionicons name="trash-outline" size={20} color={'#fff'} />
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default ImageItem
+```
+
+This component will display the image from Supabase Storage, the name of the file and a delete button.
+
+To display the image we use the `download()` method from the storage client, which returns a `FileObject` with the file data. We can then use the `FileReader` to convert the file data to a base64 string, which we can use as the image source.
+
+Now let's use this component in our `list.tsx` file to render the list of images by updating the `return` statement:
+
+```tsx
+return (
+  <View style={styles.container}>
+    <ScrollView>
+      {files.map((item, index) => (
+        <ImageItem
+          key={item.id}
+          item={item}
+          userId={user!.id}
+          onRemoveImage={() => onRemoveImage(item, index)}
+        />
+      ))}
+    </ScrollView>
+
+    {/* FAB to add images */}
+    <TouchableOpacity onPress={onSelectImage} style={styles.fab}>
+      <Ionicons name="camera-outline" size={30} color={'#fff'} />
+    </TouchableOpacity>
+  </View>
+)
+```
+
+Don't forget to also include the import to the `ImageItem` component!
+
+![Supabase Storage Files List](/images/blog/2023-08-01-react-native-storage/supabase-storage-files.png)
+
+Finally, we can also include the delete functionality by adding the following code to the `list.tsx`:
+
+```tsx
+const onRemoveImage = async (item: FileObject, listIndex: number) => {
+  supabase.storage.from('files').remove([`${user!.id}/${item.name}`])
+  const newFiles = [...files]
+  newFiles.splice(listIndex, 1)
+  setFiles(newFiles)
+}
+```
+
+We are handling the deletion here so we can accordingly update the state of the files list after removing an item.
+
+And with that in place, you have a fully functional image gallery app with React Native and Supabase Storage!
+
+## What about resumable uploads?
+
+Initially, I wanted to include [resumable uploads](https://supabase.com/blog/storage-v3-resumable-uploads) in this tutorial, but apparently, the [Uppy](https://uppy.io/) client didn't work 100% for React Native yet.
+
+You can still see an [initial implementation of resumable downloads with Supabase and React Native](https://github.com/saimon24/react-native-resumable-upload-supabase/commit/bb45455dc2d4d3fdd42089a8a26a521cc5b5e60f#diff-2d97fcb7ad2b1ac426a8d5391cfd0ab970e525ede1f11e14885f65e6dcd116a1) in the repository of this tutorial.
+
+However, ultimately the uploaded file was always 0 bytes, so I decided to leave it out for now.
+
+The Supabase team is investigating this issue, so I'm very sure that we will have resumable uploads working with React Native soon.
+
+## Conclusion
+
+It's almost too easy to use Supabase Storage, and it's a great way to store files for your apps.
+
+You now have a fully functional image gallery app with React Native and Supabase Storage including user authentication without writing a line of backend code!
+
+You can [find the full code of this tutorial on Github](https://github.com/saimon24/react-native-resumable-upload-supabase) where you just need to insert your own Supabase URL and API key.
+
+If you enjoyed the tutorial, you can [learn React Native on Galaxies.dev](https://galaxies.dev) where I help developers build awesome React Native apps.
+
+Until next time and happy coding with Supabase!
diff --git a/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
new file mode 100644
index 00000000000..2a6c49e301c
--- /dev/null
+++ b/apps/www/_blog/2023-08-02-beta-update-july-2023.mdx
@@ -0,0 +1,105 @@
+---
+title: Supabase Beta July 2023
+description: Launch Week 8 is coming - but we still shipped some goodies during July
+author: ant_wilson
+image: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
+thumb: 2023-08-02-july-2023-beta-update/july-2023-beta-update.png
+tags:
+  - release-notes
+date: '2023-08-02'
+toc_depth: 3
+---
+
+Next Monday is Launch Week 🎱, where we’ll be announcing a tonne of surprises. In the meantime, here’s a summary of everything we shipped in July. Read on!
+
+## Supabase Launch Week 8
+
+![Supabase Launch Week 8](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/launch-week.png)
+
+Launch Week 8 starts next week. We’ll be announcing one new major feature every day for an entire week (with a few bonus surprises along the way). Get your ticket and tune in on Monday the 7th.
+
+[Get your ticket](https://supabase.com/launch-week)
+
+## New Android Kotlin Library
+
+![New Android Kotlin Library](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/android-kotlin.png?t=2023-08-02T11%3A05%3A46.805Z)
+
+Are you a mobile dev? We now have client libraries for Android. This is thanks to one of our community members - [@TheRealJanGER](https://twitter.com/TheRealJanGER). Try it out, and if you want to help us maintain the library let us know.
+
+[Quickstart](https://supabase.com/docs/guides/getting-started/quickstarts/kotlin)
+
+[Tutorial](https://supabase.com/docs/guides/getting-started/tutorials/with-kotlin)
+
+## pgvector 0.4.0 performance
+
+![pgvector 0.4.0 performance](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/pgvector.png)
+
+There's been a lot of talk about pgvector performance, so we pushed it to the limits to figure out its strengths and limitations. The good news is that work has already [started](https://github.com/pgvector/pgvector/tree/hnsw) on HNSW, and isn’t far away.
+
+[Read the benchmark](https://supabase.com/blog/pgvector-performance)
+
+## Quick product announcements
+
+- [Auth] There is a new OAuth provider in time: Login with Figma. [Docs](https://supabase.com/docs/guides/auth/social-login/auth-figma)
+- [Auth] You can now use Resend as a custom SMTP provider. [Docs](https://resend.com/docs/send-with-supabase-smtp)
+- [Postgres Tooling] pgsodium 3.1.8 released. [PR](https://github.com/michelp/pgsodium/releases/tag/v3.1.8)
+- [Postgres Tooling] PostgREST 11.1 is now live. [Blog post](https://supabase.com/blog/postgrest-11-1-release)
+
+## Egghead course: Twitter Clone with the Next.js App Router
+
+![Egghead course: Twitter Clone with the Next.js App Router](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/egghead-course.png?t=2023-08-02T10%3A55%3A17.908Z)
+
+Should we rebrand to X Clone? Next.js App router is ushering in the next era of web development. What a best way to learn to navigate it than by building a full-stack app?
+
+[Course](https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb)
+
+## Twitter Space: Launch Week 8 - Kickoff 🏈
+
+![Twitter Space](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/twitter-space.png?t=2023-08-02T11%3A05%3A03.838Z)
+
+After Monday's announcement, we are kicking off LW8 with a very cool Twitter Space, featuring the DevRel team and guests. Bring your questions!
+
+10:00 AM PT | 1:00 PM ET | 06:00 PM UK
+
+[Set reminder](https://twitter.com/i/spaces/1DXGyvjkeEeJM)
+
+## Made with Supabase
+
+![Made with Supabase: Snowchat](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/snowchat.png)
+
+[snowChat](https://snowchat.streamlit.app/) | An intuitive and user-friendly application that allows you to interact with your Snowflake data using natural language queries. Built by [Kaarthik Andavar](https://twitter.com/kaarthikcodes) using Python, Streamlit, Open AI, and Supabase Vector.
+
+## Extended Community Highlights
+
+![Community Highlights](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/community-highlights.png)
+
+- Build a Simple Dropbox clone using Deno, DenoKV, Fresh and Supabase. [Video Tutorial](https://www.youtube.com/watch?v=_WerF8YMqks)
+- Safeguarding Data Integrity with pg_safeupdate in PostgreSQL and Supabase. [Blog post](https://www.notion.so/809925346af243b3a4ede8774e71472c?pvs=21)
+- Supabase for C#: Streamlining Backend Development with Database Magic. [Blog post](https://themurph.hashnode.dev/supabase-csharp)
+- Building an MVP app using Supabase. [Blog post](https://www.antstack.com/blog/building-an-mvp-app-using-supabase/)
+- Fortify Your Application With Supabase: Exploring Fine-Grained Control with Row-Level Security and OAuth Sign-in. [Article](https://techconative.com/blog/supabase-rls-security-oauth-authentication/)
+- Using Supabase authentication in NestJs. [Tutorial](https://blog.iamstarcode.com/using-supabase-authentication-in-nestjs)
+- React Native file upload with Supabase Storage. [Tutorial](https://supabase.com/blog/react-native-storage) | [Video](https://www.youtube.com/watch?v=am6w5zEDk_g)
+- Safeguarding Data Integrity with pg_safeupdate in PostgreSQL and Supabase. [Blog Post](https://blog.mansueli.com/safeguarding-data-integrity-with-pg-safeupdate-in-postgresql-and-supabase)
+- Supabase almost SHUT ME DOWN. [Video](https://www.youtube.com/watch?v=2WHTZa4ENfc)
+
+## Supabase in Times Square
+
+![Supabase in Times Square](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/times-sq.png?t=2023-08-02T11%3A04%3A14.458Z)
+
+The Redpoint team put together InfraRed 100, a report that recognizes 100 transformative companies in cloud infrastructure. We are honoured to be included with so many amazing companies we admire 🙇🏻‍♂️. They even featured us on a billboard in Times Square to celebrate.
+
+[Read the full report](https://www.redpoint.com/infrared/100/)
+
+## We’re Hiring
+
+- [Support Engineer (APAC)](https://boards.greenhouse.io/supabase/jobs/4934378004)
+- [FullStack Engineer Billing](https://www.notion.so/Beta-Update-July-Monday-31st-10386eba40934ea597ee5e5b1b81574e?pvs=21)
+
+## ⚠️ Baking hot meme zone ⚠️
+
+If you made it this far in the email you deserve a devilish treat.
+
+NPCs represent…
+
+![July's favorite meme](https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/marketing-emails/supabase-meme.png)
diff --git a/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx b/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx
new file mode 100644
index 00000000000..8ff56d7e4f7
--- /dev/null
+++ b/apps/www/_blog/2023-08-03-fewer-dimensions-are-better-pgvector.mdx
@@ -0,0 +1,169 @@
+---
+title: 'pgvector: Fewer dimensions are better'
+description: Increase performance in pgvector by using embedding vectors with fewer dimensions
+author: gregnr,oli_rice,egor_romanov
+tags:
+  - AI
+  - performance
+  - postgres
+  - planetpg
+date: '2023-08-03'
+toc_depth: 3
+image: 2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-og.png
+thumb: 2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-thumb.png
+---
+
+Embeddings have become a core tool in AI applications to determine semantic similarity between pieces of content. Developers are using embeddings for various tasks, such as search, retrieval augmented generation, and clustering.
+
+At Supabase, we support storing embeddings in Postgres using the [pgvector](https://github.com/pgvector/pgvector) extension. pgvector adds a new datatype `vector`, which developers use to store embeddings in regular columns within their database tables. Similarity can be calculated between these vectors using one of the three supported distance measures:
+
+- Inner product
+- Cosine distance
+- Euclidean distance
+
+## Challenges with pgvector
+
+Without indexes, pgvector performs a full table scan when you run a similarity query. This means distance has to be computed against every row in your table. This is manageable at a small scale, but becomes problematic as your table grows.
+
+To solve this, pgvector offers indexes. Indexes reorganize the data into data structures that exploit internal structure and enable approximate similarity search without referring to every record. Currently, pgvector supports an IVF index, with HNSW expected in the next release.
+
+IVF [indexes](https://supabase.com/docs/guides/ai/managing-indexes) work by clustering vectors into `lists`, and then querying only vectors within the same list (or multiple nearby lists, depending on the value of `probes`).
+
+### Scaling indexes
+
+98% of our customers are generating text embeddings using OpenAI's `text-embedding-ada-002` model. At an initial glance, there's good reason for this - these embeddings perform quite well for information retrieval and are economical to produce. `text-embedding-ada-002` produces vectors with 1536 dimensions which is among the largest in the industry. IVF indexes help address some scaling challenges, but there are still some pitfalls.
+
+First, vectors are large. A 1536 dimensional vector is ~12.3 kilobytes. Scaling that up to 1M vectors, the raw data tops 11 gigabytes. Experienced SQL users know that for best performance, indexes should fit within system memory. Moreover unlike traditional workloads, there is a significant compute component when performing vector similarity queries.
+
+In the real-world it's common for an index to reduce the number of distance computations needed to estimate nearest neighbors from 100% of the dataset to 5-20%. At 1M records, that's still 50k-200k distance calculations being performed for a single query. Given how different the [resource requirements](https://supabase.com/docs/guides/ai/choosing-compute-addon) are to support heavy vector workloads, it's not surprising that one of the most common issues we see is significant under provisioning of hardware.
+
+## Massive Text Embedding Benchmark (MTEB)
+
+Text embeddings are one of the most common types of embeddings today. Our friends at Hugging Face have done the hard work of comparing text embedding models (including OpenAI's `text-embedding-ada-002`) by benchmarking them against common similarity tasks:
+
+- Retrieval (search)
+- Semantic textual similarity (STS)
+- Classification
+- Clustering
+- Pair classification
+- Reranking
+- Summarization
+- Bitext mining
+
+Models are ranked per task by taking their average score produced over each task's datasets. Each model also has an overall (general purpose) score, calculated by taking the average score produced across all datasets. You can find the results on their [MTEB leaderboard](https://huggingface.co/spaces/mteb/leaderboard).
+
+It's worth pointing out that each model's dimension size has little-to-no correlation with its performance. In fact there are a number of models that perform comparably with`text-embedding-ada-002`, all of which produce embeddings with fewer dimensions than 1536.
+
+| Rank | Model                                                                                              | Dimensions | Average | Model Size (GB) |
+| ---- | -------------------------------------------------------------------------------------------------- | ---------- | ------- | --------------- |
+| 1    | [gte-large](https://huggingface.co/thenlper/gte-large)                                             | 1024       | 63.13   | 0.67            |
+| 2    | [gte-base](https://huggingface.co/thenlper/gte-base)                                               | 768        | 62.39   | 0.22            |
+| 3    | [e5-large-v2](https://huggingface.co/intfloat/e5-large-v2)                                         | 1024       | 62.25   | 1.34            |
+| 9    | [gte-small](https://huggingface.co/thenlper/gte-small)                                             | 384        | 61.36   | 0.07            |
+| 10   | [text-embedding-ada-002](https://beta.openai.com/docs/guides/embeddings/types-of-embedding-models) | 1536       | 60.99   | -               |
+| 12   | [e5-small-v2](https://huggingface.co/intfloat/e5-small-v2)                                         | 384        | 59.93   | 0.13            |
+| 32   | [all-MiniLM-L6-v2](https://huggingface.co/sentence-transformers/all-MiniLM-L6-v2)                  | 384        | 56.26   | 0.09            |
+
+## Benefits of fewer dimensions
+
+What specifically do we gain when we have fewer dimensions? Faster queries and less RAM: Fewer dimensions means less computation while more of the dataset or index is able to fit in memory.
+
+Take a look at dot product for example:
+
+<div>
+  <img
+    alt="multi database"
+    className="dark:hidden"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-light.png"
+  />
+  <img
+    alt="multi database"
+    className="hidden dark:block"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-dark.png"
+  />
+</div>
+
+Dot product is the product of each vector element pair summed together into a single result. Fewer dimensions in the vector means fewer calculations for every computed distance .
+
+We compared the performance of `text-embedding-ada-002` from OpenAI (1536 dimensions) with open-source `all-MiniLM-L6-v2` (384 dimensions) by measuring requests per second at a constant precision and configuration:
+
+- **Database size:** with 2vCPU (ARM) and 8GB RAM - `large` add-on for Supabase project.
+- **Version:** Postgres v15 and pgvector v0.4.0
+- **Dataset:** 224,482 embeddings from [Wikipedia articles](https://huggingface.co/datasets/Supabase/wikipedia-en-embeddings).
+- **Index:** The index was generated for `inner-product` (dot product) distance function with `lists=1000`.
+- **Process:** We followed [our optimization guide and tips](https://supabase.com/docs/guides/ai/going-to-prod#performance-tips-when-using-indexes).
+
+We observed pgvector with `all-MiniLM-L6-v2` outperforming `text-embedding-ada-002` by 78% when holding the precision@10 constant at 0.99. This gap increases as you lower the precision. Postgres was using just 4GB of RAM with 384d vectors generated by `all-MiniLM-L6-v2` compared to 7.5GB with `text-embedding-ada-002`.
+
+<div>
+  <img
+    alt="multi database"
+    className="dark:hidden"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-light.png"
+  />
+  <img
+    alt="multi database"
+    className="hidden dark:block"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-dark.png"
+  />
+</div>
+
+<div>
+  <img
+    alt="multi database"
+    className="dark:hidden"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-light.png"
+  />
+  <img
+    alt="multi database"
+    className="hidden dark:block"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-dark.png"
+  />
+</div>
+
+After that, we decided to try the recently published [gte-small](https://huggingface.co/thenlper/gte-small) (also 384 dimensions), and the results were even more astonishing. With `gte-small`, we could set `probes=10` to achieve the same level of `precision@10 = 0.99`. Consequently, we observed more than a 200% improvement in requests per second for pgvector with embeddings generated by `gte-small` compared to `all-MiniLM-L6-v2`.
+
+<div>
+  <img
+    alt="multi database"
+    className="dark:hidden"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-light.png"
+  />
+  <img
+    alt="multi database"
+    className="hidden dark:block"
+    src="/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-dark.png"
+  />
+</div>
+
+## Choosing an embedding model
+
+Ultimately the choice of embedding model will depend on your specific use case and requirements. You would likely want to consider:
+
+- **Similarity performance:** How well do embeddings match based on the task (MTEB score)?
+- **Model size:** What are the operational costs of storing and loading this model into memory?
+- **Sequence length:** How many input tokens does the model support?
+- **Dimension size:** What is the operational cost of storing and comparing embeddings?
+- **Language:** Which written languages do you need to support? Many of the smaller models only support English.
+
+The goal is to maximize similarity performance and sequence length, while minimizing model size and dimension size. Notably, if we can find a model that performs well while producing as few dimensions as possible, we can immediately improve many of the above challenges developers are facing with pgvector.
+
+For example [gte-small](https://huggingface.co/thenlper/gte-small), a model recently trained by the [Alibaba DAMO Academy,](https://damo.alibaba.com/) produces only 384 dimensions while ranking higher than `text-embedding-ada-002` on the MTEB leaderboard.
+
+It's worth noting that many models today are trained on English-only text (such as `gte-small` and `all-MiniLM-L6-v2`). If you need to work with other languages, be sure to choose a model that supports them, such as [multilingual-e5-small](https://huggingface.co/intfloat/multilingual-e5-small).
+
+## The best of both worlds
+
+It's important to keep in mind that using an alternative embedding model doesn't preclude using OpenAI for other tasks like text or chat generation. If your application uses embeddings for [retrieval augmented generation](https://supabase.com/docs/guides/ai/examples/nextjs-vector-search) (searching your knowledge base for additional context to pass to a LLM prompt), you can use a lower dimension embedding model for data fetching, then send the plain text to OpenAI's completion models. The retrieval step is completely decoupled from the LLM generation.
+
+## Why not dimensionality reduction?
+
+While dimensionality reduction techniques like Principal Component Analysis ([PCA](https://en.wikipedia.org/wiki/Principal_component_analysis)) or t-Distributed Stochastic Neighbor Embedding ([t-SNE](https://en.wikipedia.org/wiki/T-distributed_stochastic_neighbor_embedding)) may seem like a good alternative to trim down the size of text embedding vectors, there is some risk to consider.
+
+First, these tools may not appropriately model the relationships in high dimensional space. Both PCA and t-SNE are likely to oversimplify the multivariate relationships among different dimensions, leading to loss of important semantic information. This is particularly the case with PCA, which assumes linearity and would fail to preserve nonlinear interactions found in high-dimensional text embeddings.
+
+Additionally, the validity of the dimensionality reduction models could change over time if the distribution of text data shifts. If the model was trained on older data, it might not accurately reflect or accommodate these shifts. For example, if your company gets a large new customer in the legal field and your embedding dataset contained no legal documents when the dimensionality reduction model was trained, otherwise exploitable structure may be destructively compressed. Both PCA and t-SNE are not inherently adaptable to such changes, which could result in an increasingly poor fit over time. In summary, the derived low-dimensional representations may not maintain semantic coherence of the original high-dimensional vectors.
+
+## What's next?
+
+At Supabase we are working on ways to make it easy to generate embeddings using open source, high performance, and low dimension embedding models. Stay tuned for [Launch Week 8](/launch-week) next week!
diff --git a/apps/www/_blog/2023-08-04-interactive-constellation-threejs-react-three-fiber.mdx b/apps/www/_blog/2023-08-04-interactive-constellation-threejs-react-three-fiber.mdx
new file mode 100644
index 00000000000..29f358a25c8
--- /dev/null
+++ b/apps/www/_blog/2023-08-04-interactive-constellation-threejs-react-three-fiber.mdx
@@ -0,0 +1,451 @@
+---
+title: Coding the stars - an interactive constellation with Three.js and React Three Fiber
+description: How we built a constellation of stars with Three.js and React Three Fiber.
+author: fsansalvadore
+image: lw8-constellation-breakdown/lw8-constellation-breakdown-og.png
+thumb: lw8-constellation-breakdown/lw8-constellation-breakdown-og.png
+tags:
+  - launch-week
+date: '2023-08-04'
+toc_depth: 3
+---
+
+Every Launch Week is an opportunity for Supabase to experiment, try some spicy new designs, and dogfood our own technology. During our previous Launch Week we [took Generative AI for a spin](https://supabase.com/blog/designing-with-ai-midjourney). This time we decided to shoot for the stars.
+
+For [Launch Week 8](https://supabase.com/launch-week/), we wanted to make the user-generated tickets a central piece of the launch week theme. To do this, we built a “constellation” of stars - an animated night sky where every user signup was represented as a star, in the form of an “8” shape.
+
+<Img src="/images/blog/lw8-constellation-breakdown/lw8-early-design.png" caption="Early design" />
+
+We could approach this animation in a few ways.
+
+For example, animating the `stroke-dashoffset` on an SVG path, similar to <Link children="this" href="https://css-tricks.com/svg-line-animation-works/" target="_blank" /> example, was a good option, but it would have been difficult to randomize and change the shape at a later stage. Other approaches included 2D animation libraries, like <Link children="Framer Motion" href="https://www.framer.com/motion/animation/" target="_blank" />, <Link children="gsap" href="https://greensock.com/gsap/" target="_blank" /> or <Link children="PixiJS" href="https://pixijs.com/" target="_blank" />.
+
+Ultimately we decided to take <Link href="https://threejs.org/" target="_blank" children="Three.js" /> for a spin using [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) (R3F) giving us a more powerful toolset to enable us to achieve the best possible result.
+
+Learning Three.js is not a walk in the park but R3F abstracted many of its complexities such as cameras and renderers, to name a few. If you're new to R3F, some of the core primitives they provide for a basic scene include:
+
+- `Geometries`: used to create and define shapes
+- `Materials`: manage the texture and color of objects
+- `Mesh`: used to instantiate polygonal objects by combining a Geometry with a Material
+- `Lights`: to shine bright like a diamond 💎🎵
+- `Canvas`: where you define your R3F Scene
+
+If you want to dive a little deeper, here are a few good resources we found to get a solid grasp on the topic:
+
+- <Link
+    href="https://www.youtube.com/watch?v=DPl34H2ISsk"
+    target="_blank"
+    children="I wish I knew this before using React Three Fiber"
+  /> - from our very own <Link href="https://twitter.com/ggrdson" target="_blank" children="Greg" />
+- <Link href="https://Ts-journey.com/" target="_blank" children="ThreeJs Journey" /> - by <Link
+    href="https://bruno-simon.com/"
+    target="_blank"
+    children="Bruno Simon"
+  />
+
+## Setting up the scene
+
+In this article, we’re going to break down the steps to reproduce the Launch Week 8 animation using React Three Fiber in NextJs.
+
+These are the dependencies we’ll need:
+
+```bash
+npm install three @react-three/fiber
+```
+
+If you’re using React 17, we’ll spare you the trouble of finding the last compatible R3F version:
+
+```bash
+npm install three @react-three/fiber@7.0.29
+```
+
+All we need for each particle is a circle geometry with a minimal amount of sides to minimize complexity.
+
+```jsx
+import { useMemo } from 'react'
+
+const Geometry = useMemo(() => () => <circleGeometry args={[1.5, 5]} />, [])
+```
+
+A basic standard material with a white color will do just fine. Using the AdditiveBlending module from `three` provides a more interesting touch when particles happen to overlap, making them shine brighter:
+
+```jsx
+import { AdditiveBlending } from 'three'
+
+const Material = () =>
+  useMemo(() => <meshStandardMaterial color="#ffffff" blending={AdditiveBlending} />, [])
+```
+
+Let’s put it together in an R3F `Canvas` element and wrap up the initial setup with an `ambientLight`, which will make objects visible, just as real light does:
+
+```jsx
+import { useMemo } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { AdditiveBlending } from 'three'
+
+const Geometry = useMemo(
+    () => () => <circleGeometry args={[1.5, 5]} />,
+    []
+  )
+
+const Material = () =>
+    useMemo(
+      () => (
+        <meshStandardMaterial
+          color="#ffffff"
+          blending={AdditiveBlending}
+        />
+      ),
+      []
+    )
+
+return (
+  <div style={{ width: 100vw, height: 100vh, background: "#000000" }}>
+    <Canvas
+      dpr={[1, 2]}
+      camera={{ fov: 75, position: [0, 0, 500] }}
+    >
+      <ambientLight intensity={0.3} />
+      <group>
+        {particles?.map((particle, index) => (
+          <mesh
+            key={particle.username}
+          >
+            <Geometry />
+            <Material />
+          </mesh>
+        ))}
+      </group>
+    </Canvas>
+  </div>
+)
+```
+
+For more context, the `dpr` values help with pixelation issues and the `camera` [0, 0, 500] position means that the camera is moved 500 units back in the z-axis to actually see the center [0,0,0] of the scene.
+
+One thing to note is that the R3F Canvas renders a transparent background, so in order to see the white particle, we need to set the background of the parent html element to a dark color.
+
+We created a separate component for the Particle, which will later encapsulate the animation logic.
+
+```jsx
+import React, { useRef } from 'react'
+
+const Particle = ({ children }) => {
+  const particle = useRef(null)
+
+  return <mesh ref={particle}>{children}</mesh>
+}
+
+export default Particle
+```
+
+## Load users from Supabase
+
+You might have noticed we haven’t instantiated the particles yet. As we mentioned earlier, we wanted each particle to represent a ticket generated by a user and stored in the database. Let’s fetch the signups from the `tickets` table in our Supabase project (you might need to start your own Launch Week to fill your table):
+
+```jsx
+const [particles, setParticles] = useState([])
+
+const loadUsers = async () => {
+  return await supabase.from('lw8_tickets').select('*')
+}
+
+useEffect(() => {
+  const { data: users } = loadUsers()
+  setParticles(users)
+}, [])
+```
+
+We updated the constellation in [realtime](https://supabase.com/realtime) whenever a new ticket was generated, but we’ll skip over this part to keep the article shorter. Since it’s all open-source, you can dive deeper <Link children="here" href="https://github.com/supabase/supabase/pull/16022/files#diff-e3298724d8ca571c732651658e388d70cafd90c4ceea99be8e5e7529ebb73a56R17-R52" target="_blank" /> if you wish.
+
+## Animating the particles
+
+To move the particle around the screen we are going to leverage a few different concepts: _useFrame_ and _trigonometry_ 🤯
+
+### useFrame
+
+Generally, the most optimal way to animate things in a browser viewport, using javascript, is by leveraging a method called <Link href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target="_blank" children="requestAnimationFrame" />, which _“tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation right before the next repaint.”_. R3F has a similar hook called <Link href="https://docs.pmnd.rs/react-three-fiber/tutorials/basic-animations" target="_blank" children="useFrame" /> that lets you execute code on every frame of Fiber's render loop. We’ll use this to change the position of the particles over time in a few moments.
+
+### Using time as an animation variable
+
+We can extract time information from the useFrame `clock` parameter, to know how much time has elapsed in our application, and use that time to animate a value. Updating the `x` position with Math.sin() generates a horizontal oscillating movement. Multiply it with a `widthRadius` variable to customize the amplitude of the movement.
+
+```jsx
+const particle = useRef(null)
+
+const widthRadius = 100
+const heightRadius = 100
+
+useFrame(({ clock }) => {
+    const timer = clock.getElapsedTime()
+
+    particle.current.position.x = Math.sin(timer) * widthRadius
+  }
+})
+
+return <mesh ref={particle}>{children}</mesh>
+```
+
+![01-x-sine.gif](/images/blog/lw8-constellation-breakdown/01-x-sine.gif)
+
+Combine the previous horizontal movement with a `Math.cos()` on the `y` position to [draw a circle](https://en.wikipedia.org/wiki/Sine_and_cosine):
+
+```jsx
+particle.current.position.y = Math.cos(timer) * heightRadius
+```
+
+![02-circle.gif](/images/blog/lw8-constellation-breakdown/02-circle.gif)
+
+Calculating the circumference we can get the time the x position takes to complete a full circle.
+
+```jsx
+const circumference = (config.widthRadius * Math.PI * 2) / 100
+```
+
+When that happens, we can invert the cos sign on every other loop to obtain a basic 8 shape.
+
+```jsx
+const isEven = Math.floor(timer / circumference) % 2 == 0
+
+particle.current.position.x = Math.sin(timer) * widthRadius
+particle.current.position.y = isEven
+  ? Math.cos(timer) * heightRadius - heightRadius
+  : -Math.cos(timer) * heightRadius + heightRadius
+```
+
+![03-eight.gif](/images/blog/lw8-constellation-breakdown/03-eight.gif)
+
+At this point, we played around with a number of parameters that made the animation more randomized and interesting.
+
+For example, we randomized the speed and the delay of each particle:
+
+```jsx
+const minSpeed = -0.3
+const maxSpeed = 0.4
+const speed = Math.random() * (minSpeed - maxSpeed) + maxSpeed
+
+const delayOffsetFactor = 100
+const delayOffset = Math.random() * delayOffsetFactor
+
+[...]
+
+const timer = clock.getElapsedTime() *** speed + delayOffset**
+```
+
+We offset the shape on the x-axis, to concentrate most of the particles in the core of the 8 shape and leave a smaller amount externally, by playing around with exponentials using Math.pow() in combination with some more randomization.
+
+```jsx
+const xThickness = 7
+const xRandomnessShape = 2.2
+const xRandomness = 5
+
+const pathOffset =
+    Math.pow(
+      Math.random() * xRandomnessShape,
+      xRandomness - xRandomness / 2
+    ) * xThickness
+
+...
+
+particle.current.position.x = Math.sin(timer) * widthRadius + pathOffset
+```
+
+Honestly, this was the result of a lot of playing and tweaking around, and we certainly didn’t hit the best possible result on the first try. Perhaps you want to take some time to experiment with the math - you might find even better and more configurable results.
+
+## GUI playground
+
+<Img src="/images/blog/lw8-constellation-breakdown/lw8-constellation-gui-demo.png" wide={true} />
+
+What really helped to visualize the shape, gather feedback, and decide on a final design was adding a GUI to play around with the values. You can try for yourself by appending `#debug` to the [supabase.com/launch-week#debu](http://supabase.com/launch-week#debug)[g](http://supabase.com/launch-weekdebug) url. Go crazy with it.
+
+We used the <Link href="https://github.com/dataarts/dat.gui" children="dat.gui" target="_blank"/> library:
+
+```bash
+npm install dat.gui@0.7.9
+```
+
+Which needs to be loaded asynchronously, otherwise it raises a `window is not defined` error.
+
+```jsx
+const init = async () => {
+  const dat = await import('dat.gui')
+  const gui = new dat.GUI()
+}
+
+useEffect(() => {
+  init()
+}, [])
+```
+
+Then we prepared a `useParticlesConfig` hook with all the configuration wired up to the GUI. Whenever the GUI updated, we also updated react state.
+
+```jsx
+import { useEffect, useState } from 'react'
+import { range } from 'lodash'
+
+let defaultConfig = {
+  particles: 1500,
+  widthRadius: 100,
+  topHeightRadius: 80,
+  bottomHeightRadius: 100,
+  xThickness: 7,
+  xRandomnessFactor: 2.2,
+  xRandomnessShape: 2.2,
+  xRandomness: 5,
+  yThickness: 20,
+  max_speed: 0.1,
+  min_speed: -0.1,
+}
+
+const useParticlesConfig = (): any => {
+  if (typeof window === 'undefined') return null
+  const hash = window.location.hash
+  const isDebugMode = hash.includes('#debug')
+  const [particles, setParticles] = useState(range(0, defaultConfig.particles))
+
+  const [config, setConfig] = useState(defaultConfig)
+
+  const handleSetConfig = (name, value) => {
+    setConfig((prevConfig) => ({ ...prevConfig, [name]: value }))
+  }
+
+  const init = async () => {
+    if (!isDebugMode) return
+    const dat = await import('dat.gui')
+    const gui = new dat.GUI()
+    const particlesFolder = gui.addFolder('Particles')
+    const shapeFolder = gui.addFolder('Shape')
+
+    particlesFolder
+      .add(config, 'particles')
+      .min(1)
+      .max(5000)
+      .step(1)
+      .onChange((value) => {
+        handleSetConfig('particles', value)
+        setParticles(range(0, value))
+      })
+    shapeFolder
+      .add(config, 'widthRadius')
+      .min(1)
+      .max(200)
+      .step(1)
+      .onChange((value) => handleSetConfig('widthRadius', value))
+
+    // add desired folders and parameters
+
+    particlesFolder.open()
+    shapeFolder.open()
+  }
+
+  useEffect(() => {
+    init()
+  }, [])
+
+  return { config, handleSetConfig, particles, setParticles, isDebugMode }
+}
+
+export default useParticlesConfig
+```
+
+Here is the final code:
+
+```jsx
+import React, { useMemo, useEffect, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { AdditiveBlending } from 'three'
+import useParticlesConfig from './hooks/useParticlesConfig'
+
+const ParticlesCanvas = () => {
+  if (typeof window === 'undefined') return null
+  const { config, particles } = useParticlesConfig()
+
+  const Geometry = useMemo(
+    () => () => <circleGeometry args={[config.particlesSize, config.particlesSides]} />,
+    []
+  )
+
+  const Material = () =>
+    useMemo(
+      () => (
+        <meshStandardMaterial
+          color={config.color}
+          blending={config.particlesBlending ? AdditiveBlending : undefined}
+        />
+      ),
+      []
+    )
+
+  return (
+    <div style={{ width: 100vw, height: 100vh, background: "#000000" }}>
+      <Canvas
+        dpr={[1, 2]}
+        camera={{ fov: 75, position: [0, 0, 500] }}
+      >
+        <ambientLight intensity={config.lightIntensity} />
+        <group>
+          {particles?.map((particle, index) => (
+            <Particle
+              key={particle.username}
+            >
+              <Geometry />
+              <Material />
+            </Particle>
+          ))}
+        </group>
+      </Canvas>
+    </div>
+  )
+}
+
+const Particle = ({ children }: Props) => {
+  const particle = useRef(null)
+
+  const pathOffset =
+    Math.pow(
+      Math.random() * config.xRandomnessShape,
+      config.xRandomness - config.xRandomness / 2
+    ) * config.xThickness
+
+  const verticalRandomness = Math.random() * (config.yThickness - 1) + 1 - config.yThickness / 2
+
+  const speed = Math.random() * (config.min_speed - config.max_speed) + config.max_speed
+
+  const circumference = (config.widthRadius * Math.PI * 2) / 100
+  const delayOffsetFactor = 100
+  const delayOffset = Math.random() * delayOffsetFactor
+
+  useFrame(({ clock }) => {
+    const timer = clock.getElapsedTime() * speed + delayOffset
+    const isEven = Math.floor(timer / circumference) % 2 == 0
+
+		// When the loop count is even, draw bottom 8 shape
+    // if odd, draw top 8 shape
+    particle.current.position.x = isEven
+      ? Math.sin(timer) * config.widthRadius * config.widthRatio + pathOffset
+      : Math.sin(timer) * config.widthRadius + pathOffset
+    particle.current.position.y = isEven
+      ? Math.cos(timer) * config.bottomHeightRadius -
+        config.bottomHeightRadius +
+        verticalRandomness
+      : -Math.cos(timer) * config.topHeightRadius + config.topHeightRadius + verticalRandomness
+  })
+
+  return <mesh ref={particle}>{children}</mesh>
+}
+
+export default Particle
+```
+
+Now **_THAT’S_** how you create a new constellation ✨. Feel free to use the code and learnings to build your own.
+
+## Conclusion
+
+In this journey, you saw how to use Three.js and harness the power of React Three Fiber and creative experimentation to craft an animation. We leveraged trigonometry, animation hooks, and GUI playgrounds to build a "8" shape formed by user-generated stars.
+
+If you loved this and the new [Launch Week 8](https://supabase.com/launch-week) branding, make sure to tune in on Monday at 09 AM PT as we unveil the full landing 💥
+
+## More Supabase Design
+
+- [Designing with AI: Generating unique artwork for every user](https://supabase.com/blog/designing-with-ai-midjourney)
+- **[Infinite scroll with Next.js, Framer Motion, and Supabase](https://supabase.com/blog/infinite-scroll-with-nextjs-framer-motion)**
diff --git a/apps/www/_blog/2023-08-05-why-supabase-remote.mdx b/apps/www/_blog/2023-08-05-why-supabase-remote.mdx
new file mode 100644
index 00000000000..59ba65308a1
--- /dev/null
+++ b/apps/www/_blog/2023-08-05-why-supabase-remote.mdx
@@ -0,0 +1,81 @@
+---
+title: "Why we'll stay remote"
+description: Offices are making a comeback, just not at Supabase.
+author: ant_wilson
+image: remote/og.jpg
+thumb: remote/thumb.jpg
+launchweek: 8
+tags:
+  - launch-week
+date: '2023-08-05'
+toc_depth: 2
+---
+
+There’s been a major U-turn in people’s attitudes towards remote this year. In 2020-2021 we had the ‘Remote Revelation’ where everyone and their dog realized they can do their job perfectly well from the comfort of their own home (oftentimes in the company of said dog).
+
+Now in 2023, there’s been whiplash back to the office with larger companies fighting especially hard to convince their employees to return to their desks.
+
+Supabase started in January 2020, and the plan was always to be fully remote. In some ways COVID gave us a competitive advantage in that we could offer a stable and supportive remote working environment to those whose employers were struggling to adapt. Even now as companies fight for people to go back to the office, we’re attracting a lot of talented people who moved out of major cities and would rather hop somewhere supportive rather than relocate or commute.
+
+There are good arguments on both sides. And while you might point out that it’s probably too impractical for Supabase to switch to in-person now anyway (we’re already in >25 countries), the argument I’m making here is that if we were starting again tomorrow, we would do it all the same.
+
+## No Commute
+
+During my first job out of college I spent an average of 2 hours every day driving to the office and back. This was valuable thinking time, it allowed me to rediscover the entire Weezer back catalog. Being in the days before (good) podcasts it gave me time to listen to the Today programme on Radio 4 and catch up on what was happening in the world. Despite all this however, it struck me as one of the most clearly insane things we force humans to do on a daily basis - spend an average of 20% of their waking hours driving or on public transport. Many people report that the first 2 hours after waking are their most productive; are we really asking them to spend those precious hours commuting? It does make some sense from the companies perspective, because the company doesn’t pay for this time, nor do they usually directly pay for the cost of the commute (which can often take a hefty chunk out of your wage). In exchange they get the benefit of extra productivity from the portion of the population who require a lot of face time in order to get their job done. While I miss listening to Pinkerton on repeat, it turned out there are other ways to get back my thinking/music/podcast time and that is going for a long walk in the woods, or commuting to the gym.
+
+## Requiring a lot of face time to get your job done
+
+There’s a large portion of the population who fit this description, and without casting any negative judgement, we have to be open and honest with candidates that if they’re in this camp - they’ll likely be unhappy working at Supabase. In the early days we thought that these people could adapt, or perhaps be able to satisfy their need for face to face interactions outside of work, but on the whole it wasn’t the case. We actively try to reduce the number of meetings happening across the company (both in person and via video call) which increases friction with these folks. By not supporting this group, we’re reducing the size of the population from which we can hire, but overall our hiring pool is still very much larger than the average in-person company. Thanks to the likes of Rippling, Remote, and Deel, we can extend our talent search globally - and it turns out there are a hell of a lot of _extremely_ talented and highly motivated people living outside of New York, London, and San Francisco (don’t worry we take folks from these cities as well!). After all, the goal of hiring should be to source the absolute best person for the job. Statistically speaking it’s unlikely that this person lives within an hour drive to your office.
+
+## More take home pay
+
+For the major US cities, we pay somewhere in the 60-80th percentile range, but for almost everywhere else we _easily_ pay in the 95th percentile (in many cases in the 99th percentile) because we don’t do geo-adjusted pay. If you want to live off the beaten path, where the air is clean, and the taxes are low - then that’s entirely up to you. We won’t lower your pay and you’ll end up with much more cash in your pocket at the end of the month. We’re strongly of the opinion that you should get the same pay for the same job, geo-adjusted pay always seemed a bit bizarre to me. It’s undeniable that major cities have a higher concentration of technical talent, but these people are taxed accordingly. If not on their income, then most certainly on their rent and other expenses.
+
+## Won’t somebody think of the young people
+
+An argument I often hear for being in the office, is that young people joining the workforce can’t learn the ways of the working world as quickly when working remotely because they don’t get as much exposure to senior members of the team. This may be true. In my experience, young people seem much better adapted to working remotely than people who have been in the workforce for several decades, however it doesn’t solve for the more experienced folks being visible and available for the juniors to learn from. At Supabase, we very rarely hire juniors. That’s not to say we don’t hire young people, since there are plenty of highly skilled young people who can out-ship people twice their age. But in terms of team make-up, our team is very highly skewed towards seniors and leads. So we don’t really suffer much from this issue (if it exists).
+
+## Global Coverage
+
+Supabase now has team members in more than 25 countries. One benefit of this as an infrastructure provider is that we get 24 hour support coverage for free. If your database is showing signs of trouble at 3am, you don’t need to worry because we have team members on the clock and actively responding to system alerts. It also means that the shipping quite literally never stops.
+
+When interviewing candidates a common question we get is around working hours, and the honest answer is that we don’t care when you work. With the number of different timezones we operate across it would be impossible for us to track anyway. Some people prefer to start their day at 5am, and others prefer to work late into the night. That’s fine by us.
+
+Most of the people we hire have a background in open source and contribute to large projects like PostgreSQL where most things run asynchronously. They are well adapted to working on complex designs independently. It seems that this style of open source is becoming more prevalent thanks in part to the meteoric success of GitHub. As a consequence, the pool of talent is undoubtedly growing.
+
+Another huge benefit of hiring from anywhere is that you end up with an incredibly diverse team. This helps when selling to a global audience of developers, and ensures diversity of thought and a broad range of perspectives.
+
+## Won’t somebody think of the commercial real-estate investors
+
+A huge and obvious advantage of not having an office… is not having to pay for an office. Dedicated offices can get pretty expensive, so I’m not surprised large companies resent sitting on acres of unused office space. But fear not, here at Supabase we’ve uncovered an ingenious solution to keeping team members happy and at the same time supporting our local real estate developers. We give everyone the option of a desk at a local co-working space. In cities where we have many employees they tend to opt for the WeWork floating desk. They can also access WeWork locations globally when they travel (other co-working spaces are available). This adds some operating costs, but it’s far more affordable than a dedicated space, and a lot of people also choose not to take us up on the offer and prefer to work from their kitted out spaces at home, a local coffee shop, or a Brazilian beach resort.
+
+## The Human Connection
+
+When you save so much on office space it extends the budget for whole company off-sites (on-sites?). At the end of the day we’re all human, and we know the importance of getting to know your team mates on a human level. That’s why once per year we get everyone together for 11 days. This year we went to Bali.
+
+On top of whole company trips, folks often self organize co-working trips to places like Malaysia, San Francisco, or Austin, Texas which helps with getting to know folks outside of your immediate team.
+
+## Productivity
+
+After all is said and done, companies will still ask “but where will my team be most productive?”. To be honest I think the Supabase team would be just as productive in an office as they would be from home, but would we have been able to hire these same folks without a remote working policy? Absolutely not.
+
+A lot of people’s hesitations around remote seem to stem from not having trust in their team to get things done without adult supervision. However, if I know anything about high performing teams, it’s that you need to have mutual trust (which breeds psychological safety), and a shared model of what success looks like (metrics anyone?). Without these you’re going to struggle to produce results office or no office.
+
+At Supabase we do what works for Supabase, and for many companies being in a dedicated office or hybrid will undoubtably be what’s best for them.
+
+The book that shaped my thinking on remote more than any other was Spolsky’s ‘Smart and Gets Things Done’ (I don’t even know if it’s in print any more?), but the summary is this:
+
+Hire people who are:
+
+- Smart
+- Get Things Done
+
+Everything else is a Nice to Have. Including proximity.
+
+Lastly, if you hate wasting time commuting and want to work with some of the best engineers in the world, [we’re hiring](https://supabase.com/careers).
+
+Read more:
+
+- [Who we hire at Supabase](https://supabase.com/blog/who-we-hire)
+- [Supabase Careers](https://supabase.com/careers)
+- [See what's new in Supabase](https://supabase.com/launch-week)
diff --git a/apps/www/components/AuthWidget/AuthWidgetSection.tsx b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
index f9ee1bbf25a..6d840b80c68 100644
--- a/apps/www/components/AuthWidget/AuthWidgetSection.tsx
+++ b/apps/www/components/AuthWidget/AuthWidgetSection.tsx
@@ -19,9 +19,9 @@ function AuthWidgetSection() {
   const { basePath } = useRouter()
   const [radius, setRadius] = useState('4px')
   const [brandColor, setBrandColor] = useState({
-    brand: 'var(--colors-brand9)',
-    brandAccent: 'var(--colors-brand11)',
-    brandAccent2: 'var(--colors-brand3)',
+    brand: 'hsl(var(--brand-default))',
+    brandAccent: 'hsl(var(--brand-500))',
+    brandAccent2: 'hsl(var(--brand-200))',
   })
   const [layout, setLayout] = useState('horizontal')
 
@@ -140,15 +140,15 @@ function AuthWidgetSection() {
                   <button
                     onClick={() =>
                       setBrandColor({
-                        brand: 'var(--colors-brand9)',
-                        brandAccent: 'var(--colors-brand11)',
-                        brandAccent2: 'var(--colors-brand3)',
+                        brand: 'hsl(var(--brand-default))',
+                        brandAccent: 'hsl(var(--brand-500))',
+                        brandAccent2: 'hsl(var(--brand-200))',
                       })
                     }
                     className={[
-                      'bg-brand-300 border-brand-900 h-10 w-10 rounded-full border-2 transition hover:scale-105',
-                      brandColor.brand === 'var(--colors-brand9)'
-                        ? ' !bg-brand-900 ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
+                      'bg-brand-300 border-brand h-10 w-10 rounded-full border-2 transition hover:scale-105',
+                      brandColor.brand === 'hsl(var(--brand-default))'
+                        ? ' !bg-brand ring-scale-400 border-scale-800 ring-2 drop-shadow-lg dark:ring-white'
                         : '',
                     ].join(' ')}
                   ></button>
diff --git a/apps/www/components/Button.tsx b/apps/www/components/Button.tsx
index babd6994b7f..549409500a4 100644
--- a/apps/www/components/Button.tsx
+++ b/apps/www/components/Button.tsx
@@ -13,8 +13,8 @@ const Button = (props: Props) => {
 
   const colorClass =
     type === 'primary'
-      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-700 hover:bg-brand-800 focus:ring-2 focus:ring-offset-2 focus:ring-brand-500'
-      : 'text-brand-700 bg-none'
+      ? 'px-3 py-2 shadow-sm border border-transparent text-white bg-brand-400 hover:bg-brand-300 focus:ring-2 focus:ring-offset-2 focus:ring-brand-300'
+      : 'text-brand-400 bg-none'
 
   const textClass = type === 'primary' ? 'font-medium left-3 group-hover:left-0' : 'font-normal'
 
diff --git a/apps/www/components/Charts/PGCharts.tsx b/apps/www/components/Charts/PGCharts.tsx
index f73e0454b2f..982c1097fc9 100644
--- a/apps/www/components/Charts/PGCharts.tsx
+++ b/apps/www/components/Charts/PGCharts.tsx
@@ -7,7 +7,7 @@ import * as data from '~/data/blog/PostgresFTSComparison'
 import remarkGfm from 'remark-gfm'
 
 const barColors = {
-  pg: 'var(--colors-brand11)',
+  pg: 'hsl(var(--brand-600))',
   meilisearch: 'var(--colors-blue11)',
   typesense: 'var(--colors-violet11)',
   'sqlite-disk': 'var(--colors-orange11)',
diff --git a/apps/www/components/CodeBlock/CodeBlock.tsx b/apps/www/components/CodeBlock/CodeBlock.tsx
index 99f0cb02169..1269b1f11ff 100644
--- a/apps/www/components/CodeBlock/CodeBlock.tsx
+++ b/apps/www/components/CodeBlock/CodeBlock.tsx
@@ -119,7 +119,7 @@ function CodeBlock(props: CodeBlockProps) {
                 type="text"
                 icon={
                   copied ? (
-                    <span className="text-brand-900">
+                    <span className="text-brand">
                       <IconCheck strokeWidth={3} />
                     </span>
                   ) : (
diff --git a/apps/www/components/Hero/Hero.tsx b/apps/www/components/Hero/Hero.tsx
index 6aba7c1539c..9ce53bff3a8 100644
--- a/apps/www/components/Hero/Hero.tsx
+++ b/apps/www/components/Hero/Hero.tsx
@@ -41,7 +41,7 @@ const Hero = () => {
                   {showAnnouncement && (
                     <Link href="/launch-week">
                       <a className="group w-auto rounded-full p-1 mb-6 mt-8 md:mb-10 bg-gradient-to-b from-[#1b1f2124] to-[#02040550] hover:from-[#ffffff15] hover:to-[#ffffff05] transition-all backdrop-blur-lg border flex items-center justify-between gap-2 md:gap-4 text-scale-1100 hover:text-scale-1200 text-sm">
-                        <div className="text-scale-200 rounded-full bg-brand-900 px-3 py-1 flex items-center justify-center">
+                        <div className="text-scale-200 rounded-full bg-brand px-3 py-1 flex items-center justify-center">
                           Get your ticket
                         </div>
                         <span>Launch Week 8 - August 7-11</span>
diff --git a/apps/www/components/InteractiveShimmerCard/index.tsx b/apps/www/components/InteractiveShimmerCard/index.tsx
index 3e11c07bd46..d6017544f96 100644
--- a/apps/www/components/InteractiveShimmerCard/index.tsx
+++ b/apps/www/components/InteractiveShimmerCard/index.tsx
@@ -34,9 +34,9 @@ const InteractiveShimmerCard = ({
     const isActive = x > -3 && x < width + 3 && y > -3 && y < height + 3
     const activeGlow =
       hasActiveOnHover && isActive
-        ? `radial-gradient(65rem circle at ${x}px ${y}px, var(--colors-brand9), transparent), `
+        ? `radial-gradient(65rem circle at ${x}px ${y}px, hsl(var(--brand-default)), transparent), `
         : ''
-    outerElement.style.background = isActive ? `var(--colors-brand9)` : `var(--colors-scale3)`
+    outerElement.style.background = isActive ? `hsl(var(--brand-default))` : `var(--colors-scale3)`
     outerElement.style.backgroundImage = `
       ${activeGlow}radial-gradient(30rem circle at ${x}px ${y}px, ${
       shimmerFromColor ?? 'var(--colors-scale8)'
diff --git a/apps/www/components/LaunchWeek/6/HackathonSection.tsx b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
index ad73a8a52a5..c2be728bb50 100644
--- a/apps/www/components/LaunchWeek/6/HackathonSection.tsx
+++ b/apps/www/components/LaunchWeek/6/HackathonSection.tsx
@@ -44,7 +44,7 @@ export default function LaunchHero() {
             <h3 className="text-scale-1200 text-lg">Submission</h3>
             <p className="text-scale-1100 text-sm">
               Submit your project through{' '}
-              <a className="text-brand-900" href="https://madewithsupabase.com">
+              <a className="text-brand" href="https://madewithsupabase.com">
                 madewithsupabase.com
               </a>
               .
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
index e374bd023fc..8aee78e4070 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ArticleButtonListItem.tsx
@@ -9,7 +9,7 @@ const ArticleButtonListItem = (props: Article) => {
         <div className="flex flex-row">
           <div>
             <div className="flex flex-col">
-              <span className="text-scale-1200 group-hover:text-brand-900 text-left text-base transition">
+              <span className="text-scale-1200 group-hover:text-brand text-left text-base transition">
                 {props.title}
               </span>
               <p className="text-scale-1100 text-left text-sm transition">{props.description}</p>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
index 550d0e28815..14fa872e674 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButton.tsx
@@ -6,7 +6,7 @@ const ProductButton = (props: Article) => {
     <div className="mr-2 mb-2 inline-block">
       <button
         className=" 
-                text-brand-1200
+                text-brand-600
                 hover:bg-scale-300 border-scale-500 flex items-start gap-3 rounded-md border bg-transparent p-3 
                 px-6 transition
                 dark:drop-shadow-sm"
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
index 07ed656ae0c..1aaafcdd21b 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/ProductButtonListItem.tsx
@@ -8,7 +8,7 @@ export const ProductButtonListItem = (props: Article) => {
       <div className="inline-block">
         <button
           className=" 
-          text-brand-1200 
+          text-brand-600 
           group
           flex items-start gap-3 bg-transparent
           transition
@@ -18,7 +18,7 @@ export const ProductButtonListItem = (props: Article) => {
             <SparklesIcon strokeWidth={1} />
           </div>
           <div className="flex flex-col items-start gap-0">
-            <span className="group-hover:text-brand-900 text-sm">{props.title}</span>
+            <span className="group-hover:text-brand text-sm">{props.title}</span>
             <p className="text-scale-1100 text-left text-sm">{props.description}</p>
           </div>
         </button>
diff --git a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
index 3faf36f20d0..db093a84ca8 100644
--- a/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchSection/index.tsx
@@ -25,7 +25,7 @@ export const LaunchSection = (props: WeekDayProps) => {
       <div
         className={[
           'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border md:-ml-[37px] lg:-ml-[37.5px]',
-          props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
+          props.shipped ? 'border-brand bg-brand-400' : 'border-purple-900 bg-purple-300',
         ].join(' ')}
       ></div>
       {/* END timeline dot */}
@@ -63,7 +63,7 @@ export const LaunchSection = (props: WeekDayProps) => {
               nextDayNotShipped
                 ? 'launch-week-timeline-border--approaching'
                 : props.shipped
-                ? 'border-brand-900'
+                ? 'border-brand'
                 : 'border-purple-700',
               className,
             ].join(' ')}
@@ -152,7 +152,7 @@ export const LaunchSection = (props: WeekDayProps) => {
               md:pl-8
               lg:pl-8
         `,
-          props.shipped ? 'border-brand-900' : 'border-purple-700',
+          props.shipped ? 'border-brand' : 'border-purple-700',
           props.shippingHasStarted && 'lg:col-span-6',
           !lastIndex && 'pb-8 lg:pb-16',
         ].join(' ')}
diff --git a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx
index 4f8d365192b..c469dac9aa8 100644
--- a/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx
+++ b/apps/www/components/LaunchWeek/7/LaunchWeekPrizeSection.tsx
@@ -54,13 +54,8 @@ export default function LaunchWeekPrizeSection({
               </svg>
             </div>
             <h2 className="text-4xl">
-              Get your <span className="gradient-text-pink-500">winning ticket</span>
+              Submissions <span className="gradient-text-pink-500">closed</span>
             </h2>
-            <p className="radial-gradient-text-scale-500">
-              Join us on April 16th for Launch Week 7's final day
-              <br className="hidden md:inline-block" /> and find out if you are one of the lucky
-              winners. Get sharing!
-            </p>
           </motion.div>
         </div>
         {ticket && <Ticket />}
diff --git a/apps/www/components/LaunchWeek/7/Ticket/form.module.css b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
index 5b6a078561b..1bdf317bbc9 100644
--- a/apps/www/components/LaunchWeek/7/Ticket/form.module.css
+++ b/apps/www/components/LaunchWeek/7/Ticket/form.module.css
@@ -130,8 +130,8 @@
   height: 56px;
   margin-top: var(--space-4x);
   border-radius: var(--space-2x);
-  border: 1px solid var(--brand);
-  background: var(--brand);
+  border: 1px solid hsl(var(--brand-default));
+  background: hsl(var(--brand-default));
   cursor: pointer;
   font-family: inherit;
   font-size: var(--text-md);
@@ -170,7 +170,7 @@
 .submit.default:hover,
 .submit.default:focus {
   background: black;
-  color: var(--brand);
+  color: hsl(var(--brand-default));
 }
 
 .submit.default.generate-with-github:hover path,
diff --git a/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx b/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx
index 6d88c89268a..d30c96261f5 100644
--- a/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx
+++ b/apps/www/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas.tsx
@@ -3,56 +3,18 @@ import { Canvas } from '@react-three/fiber'
 import { AdditiveBlending } from 'three'
 import Particle from './Particle'
 import useParticlesConfig from './hooks/useParticlesConfig'
-import { SupabaseClient } from '@supabase/supabase-js'
 
-const ParticlesCanvas = ({ supabase, users }: { supabase?: SupabaseClient; users: any }) => {
+const ParticlesCanvas = () => {
   const isWindowUndefined = typeof window === 'undefined'
   if (isWindowUndefined) return null
 
   const canvasRef = React.useRef(null)
 
   const [animate, setAnimate] = useState<boolean>(true)
-  const { config, handleSetConfig, particles, setParticles, isDebugMode } =
-    useParticlesConfig(users)
-  const [realtimeChannel, setRealtimeChannel] = useState<ReturnType<
-    (typeof supabase | any)['channel']
-  > | null>(null)
-
-  const loadUsers = async () => {
-    return await supabase!.from('lw8_tickets_golden').select('username, golden', { count: 'exact' })
-  }
-
-  // Update particles live when new tickets are generated
-  useEffect(() => {
-    if (!!supabase) {
-      const channel = supabase
-        .channel('lw8_tickets_changes')
-        .on(
-          'postgres_changes',
-          {
-            event: 'INSERT',
-            schema: 'public',
-            table: 'lw8_tickets_golden',
-          },
-          async () => {
-            const { data: users } = await loadUsers()
-
-            handleSetConfig('particles', users?.length)
-            setParticles((prev: any) => users! ?? prev)
-          }
-        )
-        .subscribe()
-      setRealtimeChannel(channel)
-    }
-
-    return () => {
-      // Cleanup realtime subscription on unmount
-      realtimeChannel?.unsubscribe()
-    }
-  }, [])
+  const { config, particles } = useParticlesConfig()
 
   // stop animation if canvas if is not in viewport
-  // to avoid unnecessary computations
+  // to stop unnecessary computations
   const handleScroll = () => {
     if (canvasRef.current && typeof window !== 'undefined') {
       const rect = (canvasRef.current as HTMLDivElement)?.getBoundingClientRect()
@@ -83,7 +45,7 @@ const ParticlesCanvas = ({ supabase, users }: { supabase?: SupabaseClient; users
   const Material = () =>
     useMemo(
       () => (
-        <meshStandardMaterial
+        <meshPhysicalMaterial
           color={config.color}
           blending={config.particlesBlending ? AdditiveBlending : undefined}
         />
@@ -110,8 +72,7 @@ const ParticlesCanvas = ({ supabase, users }: { supabase?: SupabaseClient; users
       className="relative z-30"
     >
       <ambientLight intensity={config.lightIntensity} />
-      <group position={[0, 70, 0]} scale={[0.9, 0.9, 0.9]}>
-        {/* Animated 8 shape particles */}
+      <group position={[0, 70, 0]} scale={[0.75, 0.75, 0.75]}>
         {particles?.map((user: any, index: number) => (
           <Particle
             key={`particle-${user.username ?? index}`}
diff --git a/apps/www/components/LaunchWeek/8/AnimatedParticles/hooks/useParticlesConfig.tsx b/apps/www/components/LaunchWeek/8/AnimatedParticles/hooks/useParticlesConfig.tsx
index 6eb0dadb087..a84bfb3a3fa 100644
--- a/apps/www/components/LaunchWeek/8/AnimatedParticles/hooks/useParticlesConfig.tsx
+++ b/apps/www/components/LaunchWeek/8/AnimatedParticles/hooks/useParticlesConfig.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { range } from 'lodash'
 
 let defaultConfig = {
-  particles: 20,
+  particles: 700,
   particlesSize: 1.2,
   goldParticlesSize: 1.5,
   particlesSides: 5,
@@ -12,11 +12,7 @@ let defaultConfig = {
   widthRatio: 1.2,
   topHeightRadius: 80,
   bottomHeightRadius: 100,
-  trails: 0,
-  trailWidth: 40,
-  trailLength: 100,
-  trailDecay: 450,
-  color: 'white',
+  color: '#ffffff',
   colorGold: '#b89d18',
   xThickness: 7,
   xRandomnessFactor: 2.2,
@@ -28,12 +24,12 @@ let defaultConfig = {
   showGold: true,
 }
 
-const useParticlesConfig = (users: any): any => {
+const useParticlesConfig = (): any => {
   const isWindowUndefined = typeof window === 'undefined'
   if (isWindowUndefined) return null
   const hash = window.location.hash
   const isDebugMode = hash.includes('#debug')
-  const [particles, setParticles] = useState<any[]>(users)
+  const [particles, setParticles] = useState<any[]>(range(0, defaultConfig.particles))
 
   const [config, setConfig] = useState(defaultConfig)
 
@@ -48,7 +44,7 @@ const useParticlesConfig = (users: any): any => {
     const particlesFolder = gui.addFolder('Particles')
     const shapeFolder = gui.addFolder('Shape')
     const speedFolder = gui.addFolder('Speed')
-    // const trailFolder = gui.addFolder('Trail')
+
     gui.width = 500
     particlesFolder
       .add(config, 'particles')
diff --git a/apps/www/components/LaunchWeek/8/Countdown.tsx b/apps/www/components/LaunchWeek/8/Countdown.tsx
index 322b7a944db..e8394b6128f 100644
--- a/apps/www/components/LaunchWeek/8/Countdown.tsx
+++ b/apps/www/components/LaunchWeek/8/Countdown.tsx
@@ -1,20 +1,35 @@
 import React from 'react'
 import Countdown from 'react-countdown'
 import { CountdownWidget } from 'ui'
-import { LW8_LAUNCH_DATE } from '~/lib/constants'
 
-const CountdownComponent = () => {
+const CountdownComponent = ({
+  date,
+  showCard = true,
+}: {
+  date: string | number | Date
+  showCard?: boolean
+}) => {
+  if (!date) return null
+
   const renderer = ({ days, hours, minutes, seconds, completed }: any) => {
     if (completed) {
       // Render a completed state
       return null
     } else {
       // Render countdown
-      return <CountdownWidget days={days} hours={hours} minutes={minutes} seconds={seconds} />
+      return (
+        <CountdownWidget
+          days={days}
+          hours={hours}
+          minutes={minutes}
+          seconds={seconds}
+          showCard={showCard}
+        />
+      )
     }
   }
 
-  return <Countdown date={new Date(LW8_LAUNCH_DATE)} renderer={renderer} />
+  return <Countdown date={new Date(date)} renderer={renderer} />
 }
 
 export default CountdownComponent
diff --git a/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
new file mode 100644
index 00000000000..2183e0b6df6
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LW8CalloutsSection.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import SectionContainer from '../../Layouts/SectionContainer'
+import { SmallCard } from '../8/Releases/components'
+import Link from 'next/link'
+import Image from 'next/image'
+
+const LW8CalloutsSection = () => {
+  return (
+    <SectionContainer className="!py-0 w-full !px-0 !max-w-none">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 scroll-mt-[105px]" id="hackathon">
+        <SmallCard className="hover:from-scale-900 hover:to-scale-900">
+          <Link href="https://twitter.com/i/spaces/1DXGyvjkeEeJM">
+            <a
+              target="_blank"
+              className="flex flex-row justify-between items-center w-full h-full gap-2"
+            >
+              <div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
+                <div className="flex flex-col gap-1 sm:pl-4">
+                  <span className="text-white">Join us daily at Twitter Spaces </span>
+                  <span className="">Next up: Monday – Opening Day</span>
+                </div>
+              </div>
+              <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
+                <Image
+                  src="/images/launchweek/8/twitter-spaces-thumb.svg"
+                  alt="twitter spaces thumbnail"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </a>
+          </Link>
+        </SmallCard>
+        <SmallCard className="hover:from-scale-900 hover:to-scale-900">
+          <Link href="/blog/supabase-lw8-hackathon">
+            <a className="flex flex-row justify-between items-center w-full h-full gap-2">
+              <div className="relative flex-shrink flex items-center p-2 w-2/3 lg:w-1/2 md:w-auto">
+                <div className="flex flex-col gap-1 sm:pl-4">
+                  <div className="flex items-center gap-3">
+                    <div className="relative w-2 h-2 flex items-center justify-center">
+                      <div className="absolute w-2 h-2 rounded-full bg-white" />
+                      <div className="absolute animate-pulse-radar w-6 h-6 rounded-full bg-white will-change-transform" />
+                    </div>
+                    <span className="text-white">LW8 Hackathon Aug 4 – Aug 13</span>
+                  </div>
+                  <span className="">Read more about rules and prizes on the blog</span>
+                </div>
+              </div>
+              <div className="relative flex !aspect-video h-[80px] md:h-[100px] gap-2 z-10 rounded overflow-hidden">
+                <Image
+                  src="/images/launchweek/8/lw8-hackathon-thumb.svg"
+                  alt="hackathon thumbnail"
+                  layout="fill"
+                  objectFit="cover"
+                />
+              </div>
+            </a>
+          </Link>
+        </SmallCard>
+      </div>
+    </SectionContainer>
+  )
+}
+
+export default LW8CalloutsSection
diff --git a/apps/www/components/LaunchWeek/8/LW8Meetups.tsx b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
new file mode 100644
index 00000000000..4a7a8a3e7db
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LW8Meetups.tsx
@@ -0,0 +1,105 @@
+import Link from 'next/link'
+import React, { useEffect, useState } from 'react'
+import { Badge } from 'ui'
+import useConfData from '../hooks/use-conf-data'
+
+export interface Meetup {
+  id?: any
+  title: string
+  isLive: boolean
+  link: string
+  display_info: string
+  start_at: string
+}
+
+const LW8Meetups = ({ meetups }: { meetups?: Meetup[] }) => {
+  const { supabase } = useConfData()
+  const [meets, setMeets] = useState<Meetup[]>(meetups ?? [])
+  const [realtimeChannel, setRealtimeChannel] = useState<ReturnType<
+    (typeof supabase)['channel']
+  > | null>(null)
+
+  useEffect(() => {
+    // Listen to realtime changes
+    if (supabase && !realtimeChannel) {
+      const channel = supabase
+        .channel('changes')
+        .on(
+          'postgres_changes',
+          {
+            event: 'UPDATE',
+            schema: 'public',
+            table: 'lw8_meetups',
+          },
+          async () => {
+            const { data: newMeets } = await supabase.from('lw8_meetups').select('*')
+            setMeets(newMeets)
+          }
+        )
+        .subscribe()
+      setRealtimeChannel(channel)
+    }
+
+    return () => {
+      // Cleanup realtime subscription on unmount
+      realtimeChannel?.unsubscribe()
+    }
+  }, [])
+
+  return (
+    <div className="max-w-6xl mx-auto grid grid-cols-1 xl:grid-cols-12 gap-8 xl:gap-8">
+      <div className="col-span-1 xl:col-span-4 flex flex-col justify-center max-w-lg">
+        <h2 className="text-2xl sm:text-3xl xl:text-4xl tracking-[-.5px]">Join the community</h2>
+        <p className="text-scale-1000 text-base py-3 xl:max-w-md">
+          Celebrate LW8 at our first-ever live community meetups across various locations. Join the
+          fun, grab some swag, and meet the Supabase community.
+        </p>
+      </div>
+      <div className="col-span-1 xl:col-span-7 xl:col-start-6 w-full max-w-4xl flex flex-col justify-between items-stretch">
+        {meets &&
+          meets
+            ?.sort((a, b) => (new Date(a.start_at) > new Date(b.start_at) ? 1 : -1))
+            .map(({ display_info, link, isLive, title }: Meetup) => (
+              <Link href={link ?? '#'}>
+                <a
+                  target="_blank"
+                  className={[
+                    'w-full group py-0 flex items-center gap-2 md:gap-4 text-lg sm:text-2xl xl:text-4xl border-b border-[#111718]',
+                    'hover:text-scale-1200',
+                    isLive ? 'text-scale-1100' : 'text-[#56646B]',
+                    !link && 'pointer-events-none',
+                  ].join(' ')}
+                >
+                  <div className="flex items-center gap-2 md:gap-4 py-2 md:py-0">
+                    <span>{title}</span>
+                    {isLive && <Badge>Live now</Badge>}
+                    <span className="hidden md:inline opacity-0 -translate-x-2 transition-all md:group-hover:opacity-100 group-hover:translate-x-0">
+                      <svg
+                        width="47"
+                        height="47"
+                        viewBox="0 0 47 47"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M33.0387 16.2422L40.6691 23.8727M40.6691 23.8727L33.0387 31.5031M40.6691 23.8727L6.33203 23.8727"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  {display_info && (
+                    <span className="text-sm text-right flex-1">{display_info}</span>
+                  )}
+                </a>
+              </Link>
+            ))}
+      </div>
+    </div>
+  )
+}
+
+export default LW8Meetups
diff --git a/apps/www/components/LaunchWeek/8/LWArchive.tsx b/apps/www/components/LaunchWeek/8/LWArchive.tsx
new file mode 100644
index 00000000000..3456a49ebfc
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/LWArchive.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { StyledArticleBadge } from './Releases/components'
+import Image from 'next/image'
+import Link from 'next/link'
+
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import 'swiper/swiper.min.css'
+
+const launchweeks = [
+  { title: '7', link: '/launchweek/7' },
+  { title: '6', link: '/launchweek/6' },
+  { title: '5', link: '/blog/launch-week-5-hackathon' },
+  { title: '4', link: '/blog/supabase-launch-week-four' },
+  { title: '3', link: '/blog/supabase-launch-week-the-trilogy' },
+  { title: '2', link: '/blog/supabase-launch-week-sql' },
+  { title: '1', link: '/blog/launch-week' },
+]
+
+const LWArchive = () => {
+  return (
+    <div className="text-center relative z-10 text-white flex flex-col gap-8 lg:gap-16">
+      <div className="max-w-[38rem] mx-auto flex flex-col items-center gap-4 px-4">
+        <StyledArticleBadge>Throwback</StyledArticleBadge>
+        <h2 className="text-4xl">Previous Launch Weeks</h2>
+        <p className="text-[#9296AA]">
+          Explore what has been announced in the past and relive those moments.
+        </p>
+      </div>
+      <div className="relative h-[200px] [&_.swiper-container]:h-full [&_.swiper-wrapper]:h-full [&_.swiper-slide]:h-full">
+        <Swiper
+          // centeredSlides={true}
+          spaceBetween={10}
+          slidesPerView={5.5}
+          // watchOverflow
+          threshold={2}
+          updateOnWindowResize
+          breakpoints={{
+            320: {
+              slidesPerView: 2.5,
+            },
+            720: {
+              slidesPerView: 3.5,
+            },
+            1440: {
+              slidesPerView: 5.5,
+            },
+          }}
+        >
+          {launchweeks.map((launchweek, i) => (
+            <SwiperSlide key={launchweek.title}>
+              <Link href={launchweek.link} key={launchweek.title}>
+                <a className="relative h-full rounded-md md:rounded-lg transition-transform bg-[#030A0C] flex items-center justify-center border border-[#111718] hover:border-brand-800">
+                  <span className="stroke-text inline-block text-transparent bg-clip-text bg-gradient-to-b from-scale-1000 to-scale-200 text-7xl">
+                    {launchweek.title}
+                  </span>
+                </a>
+              </Link>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  )
+}
+
+export default LWArchive
diff --git a/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx b/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx
index 4c0786c62c3..cf61bb72778 100644
--- a/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx
+++ b/apps/www/components/LaunchWeek/8/LaunchWeekLogoHeader.tsx
@@ -1,12 +1,13 @@
 import Link from 'next/link'
 import CountdownComponent from './Countdown'
+import { LW8_LAUNCH_DATE } from '../../../lib/constants'
 
 export function LaunchWeekLogoHeader() {
   return (
     <div className="flex flex-col gap-1 md:gap-2 items-center justify-end">
       <div className="opacity-0 !animate-[fadeIn_0.5s_cubic-bezier(0.25,0.25,0,1)_0.5s_both] px-2 flex flex-col items-center text-center gap-3">
         <div className="">
-          <CountdownComponent />
+          <CountdownComponent date={LW8_LAUNCH_DATE} />
         </div>
         <h1 className="sr-only font-normal uppercase text-[28px] sm:text-[32px]">Launch week 8</h1>
         <p className="text-white radial-gradient-text-scale-600 text-lg sm:text-2xl">
diff --git a/apps/www/components/LaunchWeek/8/Releases/components/index.tsx b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
new file mode 100644
index 00000000000..53307c2cf42
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/components/index.tsx
@@ -0,0 +1,347 @@
+import { Badge } from 'ui'
+
+import Link from 'next/link'
+import CountdownComponent from '../../Countdown'
+
+export const PencilSvg = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.21792 11.2469L11.8015 2.66333L14.0953 4.95709L5.51167 13.5407M3.21792 11.2469L2.34219 14.4164L5.51167 13.5407M3.21792 11.2469L5.51167 13.5407"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const DocsSvg = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.96289 9.48618H10.9629M4.96289 7.48618H10.9629M4.96289 11.4862H8.96289M3 2.00034V13.9998H12.9996V5.60113L9.38156 2.00034H3ZM12.9644 5.58432L9.38004 2L9.38004 5.58432L12.9644 5.58432Z"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const PlaySvg = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.4287 8L8.74762 10.7026L4.06653 13.4053L4.06653 8L4.06653 2.59474L8.74762 5.29737L13.4287 8Z"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const GithubSvg = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.2125 1.75781C4.6765 1.75781 1.8125 4.62181 1.8125 8.15781C1.8125 10.9898 3.6445 13.3818 6.1885 14.2298C6.5085 14.2858 6.6285 14.0938 6.6285 13.9258C6.6285 13.7738 6.6205 13.2698 6.6205 12.7338C5.0125 13.0298 4.5965 12.3418 4.4685 11.9818C4.3965 11.7978 4.0845 11.2298 3.8125 11.0778C3.5885 10.9578 3.2685 10.6618 3.8045 10.6538C4.3085 10.6458 4.6685 11.1178 4.7885 11.3098C5.3645 12.2778 6.2845 12.0058 6.6525 11.8378C6.7085 11.4218 6.8765 11.1418 7.0605 10.9818C5.6365 10.8218 4.1485 10.2698 4.1485 7.82181C4.1485 7.12581 4.3965 6.54981 4.8045 6.10181C4.7405 5.94181 4.5165 5.28581 4.8685 4.40581C4.8685 4.40581 5.4045 4.23781 6.6285 5.06181C7.1405 4.91781 7.6845 4.84581 8.2285 4.84581C8.7725 4.84581 9.3165 4.91781 9.8285 5.06181C11.0525 4.22981 11.5885 4.40581 11.5885 4.40581C11.9405 5.28581 11.7165 5.94181 11.6525 6.10181C12.0605 6.54981 12.3085 7.11781 12.3085 7.82181C12.3085 10.2778 10.8125 10.8218 9.3885 10.9818C9.6205 11.1818 9.8205 11.5658 9.8205 12.1658C9.8205 13.0218 9.8125 13.7098 9.8125 13.9258C9.8125 14.0938 9.9325 14.2938 10.2525 14.2298C11.523 13.8009 12.627 12.9844 13.4092 11.8951C14.1913 10.8059 14.6122 9.49877 14.6125 8.15781C14.6125 4.62181 11.7485 1.75781 8.2125 1.75781Z"
+      fill="#8F8F8F"
+    />
+  </svg>
+)
+export const LinkSvg = () => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.875 4.0013H4.20833C3.47195 4.0013 2.875 4.59826 2.875 5.33464V12.0013C2.875 12.7377 3.47195 13.3346 4.20833 13.3346H10.875C11.6114 13.3346 12.2083 12.7377 12.2083 12.0013V9.33464M9.54167 2.66797H13.5417M13.5417 2.66797V6.66797M13.5417 2.66797L6.875 9.33464"
+      stroke="#8F8F8F"
+      strokeWidth="1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+export const ArrowTopRightSvg = () => (
+  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.44531 13.846L13.1152 4.17578"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+    <path
+      d="M3.44531 4.09375H13.1152V13.7637"
+      stroke="#8F8F8F"
+      strokeMiterlimit="10"
+      strokeLinejoin="bevel"
+    />
+  </svg>
+)
+export const HackernewsSvg = () => (
+  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.26821 7.87591L9.94194 4.47266H11.8008L8.82871 10.074V13.606H7.16205V10.0213L4.1875 4.47266H6.15549L7.86748 7.9537C7.87321 7.95954 7.87972 7.96606 7.88751 7.97386C7.95585 8.04219 7.98757 8.11202 8.00726 8.16124C8.01322 8.17614 8.01776 8.18804 8.02175 8.19849C8.02548 8.20824 8.02872 8.21672 8.03217 8.22518L8.04751 8.24052C8.11375 8.10585 8.19796 7.98119 8.26821 7.87591Z"
+      fill="#8F8F8F"
+    />
+  </svg>
+)
+
+export const SmallCard = ({ className, children }: { className?: string; children: any }) => (
+  <div
+    className={[
+      'relative p-[1px] bg-gradient-to-b from-[#111718] to-[#1C1C1C60] rounded-2xl overflow-hidden shadow-lg',
+      className,
+    ].join(' ')}
+  >
+    <div
+      className={[
+        'rounded-2xl text-sm text-[#9296AA] p-2 flex flex-row justify-between items-center backdrop-blur-md h-full',
+        'bg-[#030A0C]',
+      ].join(' ')}
+    >
+      {children}
+    </div>
+  </div>
+)
+
+export const StyledArticleBadge = ({
+  className,
+  children,
+}: {
+  className?: string
+  children: any
+}) => (
+  <div
+    className={['relative bg-transparent border border-[#F4FFFA90] rounded-full', className].join(
+      ' '
+    )}
+  >
+    <div className="!bg-transparent rounded-full !py-1 !px-4 w-full inset-[1px] text-sm border-none dark:from-white dark:to-[#6453C5] dark:border-none">
+      <span className="text-sm text-[#F4FFFA80] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#7E7AAD]">
+        {children}
+      </span>
+      <div className="absolute inset-0 w-full h-full bg-[#1C1C1C] rounded-full blur-2xl" />
+    </div>
+  </div>
+)
+
+export const AccordionHeader = ({
+  date,
+  day,
+  weekDay,
+  title,
+  shipped,
+  publishedAt,
+  shippable = true,
+}: {
+  date: string
+  day: number
+  weekDay: string
+  title: string
+  shipped?: boolean
+  publishedAt: string
+  shippable?: boolean
+}) => (
+  <div
+    className={['flex flex-1', shippable && shipped ? 'flex-col sm:flex-row' : 'flex-row'].join(
+      ' '
+    )}
+  >
+    <div className="flex gap-4 w-full sm:w-auto sm:min-w-[240px] md:min-w-[380px] items-center">
+      <span className="text-scale-900 text-sm">
+        <span className="inline sm:hidden md:inline">{weekDay} </span>
+        {date && (
+          <span>
+            <span className="inline sm:hidden md:inline">・</span> {date}
+          </span>
+        )}
+      </span>
+    </div>
+    {shippable && shipped && (
+      <Badge
+        className={`relative inset-0 !bg-transparent !py-1 !px-4 h-fit backdrop-blur-md ${
+          shipped
+            ? 'bg-gradient-to-br from-[#05090B] to-[#05090B] !border-[#061517]'
+            : 'border-[#FFFFFF20]'
+        }`}
+      >
+        <span className="text-[#A0A0A0] text-sm font-normal bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7]">
+          Shipped
+        </span>
+      </Badge>
+    )}
+    {shipped && <span className="text-scale-1200 text-lg mt-1 sm:mt-0">{title}</span>}
+    {shippable && !shipped && (
+      <span className="text-sm font-normal text-[#A0A0A0] mt-1 sm:mt-0 flex items-center gap-1 md:gap-4">
+        <svg
+          width="17"
+          height="17"
+          viewBox="0 0 17 17"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g opacity="0.5">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M4.32656 7.58047V5.98047C4.32656 3.77133 6.11742 1.98047 8.32656 1.98047C10.5357 1.98047 12.3266 3.77133 12.3266 5.98047V7.58047C13.2102 7.58047 13.9266 8.29681 13.9266 9.18047V13.1805C13.9266 14.0641 13.2102 14.7805 12.3266 14.7805H4.32656C3.44291 14.7805 2.72656 14.0641 2.72656 13.1805V9.18047C2.72656 8.29681 3.44291 7.58047 4.32656 7.58047ZM10.7266 5.98047V7.58047H5.92656V5.98047C5.92656 4.65499 7.00108 3.58047 8.32656 3.58047C9.65205 3.58047 10.7266 4.65499 10.7266 5.98047Z"
+              fill="#A0A0A0"
+            />
+          </g>
+        </svg>
+
+        {day === 1 && <CountdownComponent date={publishedAt} showCard={false} />}
+      </span>
+    )}
+  </div>
+)
+
+export const MultistepSectionHeader = ({ title, blog }: any) => {
+  return (
+    <div className="flex flex-1 flex-col sm:flex-row py-8">
+      <div className="flex gap-4 w-full items-center justify-between md:justify-start">
+        {title && <span className="text-scale-1200 text-lg mt-3 sm:mt-0">{title}</span>}
+        {!!blog && (
+          <ChipLink href={blog} className="!w-auto !text-left !justify-between !flex-none">
+            Blog post
+            <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+              <PencilSvg />
+            </div>
+          </ChipLink>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const ChipLink = ({
+  href,
+  uiOnly,
+  className,
+  target,
+  children,
+}: {
+  href?: string
+  className?: string
+  uiOnly?: boolean
+  target?: '_blank' | '_self' | '_parent' | '_top' | 'framename'
+  children: any
+}) =>
+  uiOnly ? (
+    <span
+      className={[
+        'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444460] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191990] hover:border-scale-800 backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
+        className,
+      ].join(' ')}
+    >
+      {children}
+    </span>
+  ) : !!href ? (
+    <Link href={href}>
+      <a
+        target={target ?? '_self'}
+        rel="noopener"
+        className={[
+          'flex flex-auto justify-center sm:justify-between w-full text-center sm:text-left min-h-[43px] sm:w-auto items-center border border-[#232323] bg-gradient-to-r text-white from-[#46444460] to-[#19191980] hover:from-[#4e4e4e90] hover:to-[#19191990] hover:border-scale-800 backdrop-blur-xl rounded-full text-sm py-2 px-3 sm:pr-2',
+          className,
+        ].join(' ')}
+      >
+        {children}
+      </a>
+    </Link>
+  ) : null
+
+export const SectionButtons = ({
+  blog,
+  docs,
+  video,
+  github,
+  url,
+  hackernews,
+  mobileGrid,
+}: {
+  blog?: string
+  docs?: string
+  video?: string
+  github?: string
+  url?: string
+  hackernews?: string
+  mobileGrid?: boolean
+}) => {
+  return (
+    <div
+      className={[
+        'flex w-full max-w-full md:w-auto justify-center gap-2 z-10',
+        mobileGrid && 'grid grid-cols-2 gap-2 sm:flex',
+      ].join(' ')}
+    >
+      {!!blog && (
+        <ChipLink href={blog}>
+          Blog post
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <PencilSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!docs && (
+        <ChipLink href={docs}>
+          Docs
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <DocsSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!video && (
+        <ChipLink href={video} target="_blank">
+          Video
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <PlaySvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!github && (
+        <ChipLink href={github} target="_blank">
+          Github
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <GithubSvg />
+          </div>
+        </ChipLink>
+      )}
+      {!!url && (
+        <ChipLink href={url}>
+          Read
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <LinkSvg />
+          </div>
+        </ChipLink>
+      )}
+      {hackernews && (
+        <ChipLink href={hackernews} target="_blank">
+          Hackernews
+          <div className="bg-[#313131] rounded-full hidden sm:inline-block p-1 ml-2">
+            <HackernewsSvg />
+          </div>
+        </ChipLink>
+      )}
+    </div>
+  )
+}
+
+export const CartTitle = ({ children, className }: { children: any; className?: string }) => (
+  <span
+    className={[
+      'z-0 relative text-[#F4FFFA90] bg-clip-text bg-gradient-to-r from-[#F4FFFA] to-[#675FA7] tracking-[-.5px] text-xl',
+      className,
+    ].join(' ')}
+  >
+    {children}
+    <div className="absolute -z-10 inset-0 w-full h-full bg-[#1C1C1C90] rounded-full blur-xl" />
+  </span>
+)
+
+export default {
+  AccordionHeader,
+  DocsSvg,
+  PencilSvg,
+  PlaySvg,
+  CartTitle,
+  ChipLink,
+  SectionButtons,
+  SmallCard,
+  StyledArticleBadge,
+}
diff --git a/apps/www/components/LaunchWeek/8/Releases/index.tsx b/apps/www/components/LaunchWeek/8/Releases/index.tsx
new file mode 100644
index 00000000000..e8392f56d30
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/index.tsx
@@ -0,0 +1,283 @@
+import Image from 'next/image'
+import { motion } from 'framer-motion'
+import { Accordion } from 'ui'
+import { useBreakpoint } from 'common/hooks/useBreakpoint'
+
+import days, { WeekDayProps } from './lw8_data'
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import { AccordionHeader, CartTitle, SectionButtons, StyledArticleBadge } from './components'
+
+export const defaultEase = [0.25, 0.25, 0, 1]
+export const defaultDuratonIn = 0.25
+export const defaultDuratonOut = 0.1
+
+export const opacityVariant = {
+  default: { opacity: 0.9, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    opacity: 1,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+export const opacityVariant2 = {
+  default: { opacity: 0, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    opacity: 0.2,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+export const opacityVariant3 = {
+  default: { opacity: 0, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    opacity: 1,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+export const opacityVariant4 = {
+  default: { opacity: 0.3, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    opacity: 1,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+export const scaleOpacityVariant = {
+  default: { scale: 1, opacity: 0.9, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    scale: 1.05,
+    opacity: 1,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+export const scaleOpacityVariant2 = {
+  default: { scale: 1, opacity: 0.8, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    scale: 1.025,
+    opacity: 1,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+export const aiImageMobileVariant = {
+  default: { scale: 0.9 },
+  hover: {
+    scale: 0.9,
+  },
+}
+export const moveX10 = {
+  default: { x: 0, ease: defaultEase, duration: defaultDuratonOut },
+  hover: {
+    x: 10,
+    transition: {
+      duration: defaultDuratonIn,
+      ease: defaultEase,
+    },
+  },
+}
+
+export default function LW8Releases() {
+  const [preRelease, day1, day2, day3, day4, day5] = days
+  const isTablet = useBreakpoint(1023)
+  const isDesktop = useBreakpoint(1280)
+  const showAll = false
+  const publishedSections =
+    days
+      .filter(
+        (day: WeekDayProps) => day.d === 0 || Date.parse(day.publishedAt) <= Date.now() || showAll
+      )
+      .map((day: WeekDayProps) => day.d.toString()) ?? []
+
+  const day1Shipped = Date.parse(day1.publishedAt) <= Date.now()
+  const day2Shipped = Date.parse(day2.publishedAt) <= Date.now()
+  const day3Shipped = Date.parse(day3.publishedAt) <= Date.now()
+  const day4Shipped = Date.parse(day4.publishedAt) <= Date.now()
+  const day5Shipped = Date.parse(day5.publishedAt) <= Date.now()
+
+  return (
+    <>
+      <SectionContainer className="!pt-0 !w-full !px-0 !max-w-none">
+        <Accordion
+          type="default"
+          openBehaviour="multiple"
+          size="large"
+          className="text-white"
+          justified={false}
+          chevronAlign="right"
+          defaultValue={publishedSections}
+        >
+          <div className="border-b border-[#111718]" id="currentDay">
+            <Accordion.Item
+              header={
+                <AccordionHeader
+                  date={preRelease.date}
+                  day={preRelease.d}
+                  weekDay={preRelease.dd}
+                  title={preRelease.title}
+                  shipped={true}
+                  shippable={false}
+                  publishedAt={preRelease.publishedAt}
+                />
+              }
+              key={preRelease.dd}
+              className="h-[79px]"
+              id={preRelease.d.toString()}
+            >
+              {preRelease.steps.length > 0 && (
+                <div className="h-[400px] flex flex-col gap-5 lg:flex-row pb-4">
+                  <motion.div
+                    className={`
+                      relative overflow-hidden group/3 flex-1 flex flex-col items-center lg:items-start justify-between
+                      basis-1/2 lg:basis-1/3 border border-[#111718] rounded-xl h-full bg-no-repeat py-10 lg:py-14 px-8 lg:px-10 text-2xl bg-contain shadow-lg
+                      `}
+                    initial="default"
+                    animate="default"
+                    whileHover="hover"
+                  >
+                    <div
+                      className="inset-0 absolute group-hover/3:scale-105 opacity-60 group-hover/3:opacity-100 w-full h-full -z-10 transition-all duration-500 pointer-events-none"
+                      style={{
+                        background: `radial-gradient(100% 100% at 80% 110%, #6F13A450, #030A0C)`,
+                      }}
+                    />
+                    <div className="flex flex-col items-center lg:items-start gap-2 max-w-[400px] w-full text-center lg:text-left">
+                      <CartTitle>{preRelease.steps[0]?.title}</CartTitle>
+                      <p className="text-sm text-slate-900">{preRelease.steps[0]?.description}</p>
+                    </div>
+                    <SectionButtons blog={preRelease.steps[0].blog} />
+                    {preRelease.steps[0]?.bg_layers &&
+                      preRelease.steps[0]?.bg_layers?.map(
+                        (layer, i) =>
+                          !!layer.img && (
+                            <motion.div
+                              className="absolute opacity-90 inset-0 w-full h-full -z-10"
+                              variants={i === 1 ? scaleOpacityVariant : undefined}
+                            >
+                              <Image
+                                src={
+                                  !!layer.mobileImg && isTablet
+                                    ? (layer.mobileImg as any)
+                                    : layer.img
+                                }
+                                className={`
+                                  absolute opacity-90
+                                  w-full h-full -z-10 transition-all duration-300
+                                `}
+                                layout="fill"
+                                objectPosition={
+                                  isTablet ? '50%' : isDesktop ? '200% 50%' : '100% 50%'
+                                }
+                                objectFit="contain"
+                              />
+                            </motion.div>
+                          )
+                      )}
+                  </motion.div>
+                </div>
+              )}
+            </Accordion.Item>
+          </div>
+          <div className="border-b border-[#111718]">
+            <Accordion.Item
+              header={
+                <AccordionHeader
+                  date={day1.date}
+                  day={day1.d}
+                  weekDay={day1.dd}
+                  title={day1.title}
+                  shipped={day1Shipped}
+                  publishedAt={day1.publishedAt}
+                />
+              }
+              disabled={!day1Shipped}
+              className="h-[79px]"
+              id={day1.d.toString()}
+            ></Accordion.Item>
+          </div>
+          <div className="border-b border-[#111718]">
+            <Accordion.Item
+              header={
+                <AccordionHeader
+                  date={day2.date}
+                  day={day2.d}
+                  weekDay={day2.dd}
+                  title={day2.title}
+                  shipped={day2Shipped}
+                  publishedAt={day2.publishedAt}
+                />
+              }
+              disabled={!day2Shipped}
+              className="h-[79px]"
+              id={day2.d.toString()}
+            ></Accordion.Item>
+          </div>
+          <div className="border-b border-[#111718]">
+            <Accordion.Item
+              header={
+                <AccordionHeader
+                  date={day3.date}
+                  day={day3.d}
+                  weekDay={day3.dd}
+                  title={day3.title}
+                  shipped={day3Shipped}
+                  publishedAt={day3.publishedAt}
+                />
+              }
+              disabled={!day3Shipped}
+              className="h-[79px]"
+              id={day3.d.toString()}
+            ></Accordion.Item>
+          </div>
+          <div className="border-b border-[#111718]">
+            <Accordion.Item
+              header={
+                <AccordionHeader
+                  date={day4.date}
+                  day={day4.d}
+                  weekDay={day4.dd}
+                  title={day4.title}
+                  shipped={day4Shipped}
+                  publishedAt={day4.publishedAt}
+                />
+              }
+              disabled={!day4Shipped}
+              className="h-[79px]"
+              id={day4.d.toString()}
+            ></Accordion.Item>
+          </div>
+          <div className="border-b border-[#111718]">
+            <Accordion.Item
+              header={
+                <AccordionHeader
+                  date={day5.date}
+                  day={day5.d}
+                  weekDay={day5.dd}
+                  title={day5.title}
+                  shipped={day5Shipped}
+                  publishedAt={day5.publishedAt}
+                />
+              }
+              disabled={!day5Shipped}
+              className="h-[79px]"
+              id={day5.d.toString()}
+            ></Accordion.Item>
+          </div>
+        </Accordion>
+      </SectionContainer>
+    </>
+  )
+}
diff --git a/apps/www/components/LaunchWeek/8/Releases/lw8_data.ts b/apps/www/components/LaunchWeek/8/Releases/lw8_data.ts
new file mode 100644
index 00000000000..21381b8b947
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/lw8_data.ts
@@ -0,0 +1,135 @@
+const images = {
+  '00-constellation': '/images/launchweek/8/day0/constellation-pre.svg',
+  '00-constellation-mobile': '/images/launchweek/8/day0/constellation.svg',
+}
+
+export interface StepProps {
+  title: string
+  badge?: string
+  break_thumb_title?: boolean
+  blog?: string
+  docs?: string
+  description?: string
+  github?: string
+  hackernews?: string
+  isNew?: boolean
+  thumb?: string
+  url?: string
+  video?: string
+  className?: string
+  hideInBlog?: boolean
+  bg_layers?: {
+    lottie?: any
+    img?: string
+    mobileImg?: string
+  }[]
+  steps: StepProps[] | []
+}
+export interface WeekDayProps {
+  title: string
+  shipped: boolean
+  date: string
+  publishedAt: string
+  description: string
+  d: number
+  dd: string
+  youtube_id: string
+  blogpost: string
+  docs: string
+  steps: StepProps[] | []
+}
+
+export const endOfLW8 = '2023-08-11T23:59:59.999-07:00'
+
+const days: WeekDayProps[] = [
+  {
+    title: '',
+    shipped: true,
+    date: '04 Aug',
+    publishedAt: '2023-08-04T09:00:00.000-07:00',
+    description: '',
+    d: 0,
+    dd: 'Pre-release',
+    youtube_id: '',
+    blogpost: '',
+    docs: '',
+    steps: [
+      {
+        title:
+          'Coding the stars - an interactive constellation with Three.js and React Three Fiber',
+        blog: '/blog/interactive-constellation-threejs-react-three-fiber',
+        bg_layers: [
+          { img: images['00-constellation'], mobileImg: images['00-constellation-mobile'] },
+        ],
+        steps: [],
+      },
+    ],
+  },
+  {
+    title: '',
+    shipped: false,
+    date: '07 Aug',
+    publishedAt: '2023-08-07T09:00:00.000-07:00',
+    description: '',
+    d: 1,
+    dd: 'Mon',
+    youtube_id: '',
+    blogpost: '',
+    docs: '',
+    steps: [],
+  },
+  {
+    title: '',
+    shipped: false,
+    date: '08 Aug',
+    publishedAt: '2023-08-08T09:00:00.000-07:00',
+    description: '',
+    d: 2,
+    dd: 'Tue',
+    youtube_id: 'cPGxPl1lx4Y',
+    blogpost: '',
+    docs: '',
+    steps: [],
+  },
+  {
+    title: '',
+    shipped: false,
+    date: '09 Aug',
+    publishedAt: '2023-08-09T09:00:00.000-07:00',
+    description: '',
+    d: 3,
+    dd: 'Wed',
+    youtube_id: '',
+    blogpost: '',
+    docs: '/docs/guides/storage/uploads#resumable-upload',
+    steps: [],
+  },
+  {
+    title: '',
+    shipped: false,
+    date: '10 Aug',
+    publishedAt: '2023-08-10T09:00:00.000-07:00',
+    description: '',
+    d: 4,
+    dd: 'Thu',
+    youtube_id: '',
+    blogpost: '',
+    docs: '',
+    steps: [],
+  },
+  {
+    title: '',
+    shipped: false,
+    date: '11 Aug',
+    publishedAt: '2023-08-11T00:00:00.000-07:00',
+    description: '',
+    d: 5,
+    dd: 'Fri',
+    youtube_id: '',
+    blogpost: '',
+    docs: '',
+    steps: [],
+  },
+]
+
+export default days
diff --git a/apps/www/components/LaunchWeek/8/Releases/styles/launchWeek7.module.css b/apps/www/components/LaunchWeek/8/Releases/styles/launchWeek7.module.css
new file mode 100644
index 00000000000..7a1417601cd
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/styles/launchWeek7.module.css
@@ -0,0 +1,29 @@
+.mask {
+  mask-image: radial-gradient(black, transparent);
+}
+
+.dark_community {
+  background-image: radial-gradient(closest-side at 50% 50%, #132121, #132121db, #121212);
+}
+
+.community {
+  background-image: radial-gradient(closest-side at 50% 50%, #d9eeef, #dbeef0, white);
+}
+
+.wrappers > span {
+  left: -200px !important;
+}
+
+.community_wrappers > span {
+  left: -400px !important;
+}
+
+@media (max-width: 768px) {
+  .community_wrappers > span > img {
+    object-fit: contain !important;
+  }
+}
+
+.lw7-article-card-gradient {
+  background: linear-gradient(90deg, #1c1c1c -20%, #20113d50 150%);
+}
diff --git a/apps/www/components/LaunchWeek/8/Releases/styles/utils7.module.css b/apps/www/components/LaunchWeek/8/Releases/styles/utils7.module.css
new file mode 100644
index 00000000000..c4aba2ab686
--- /dev/null
+++ b/apps/www/components/LaunchWeek/8/Releases/styles/utils7.module.css
@@ -0,0 +1,76 @@
+.appear {
+  opacity: 0;
+  animation: appear 0.8s cubic-bezier(0.1, 0, 0.175, 1) forwards;
+}
+
+.appear-first {
+  animation-delay: 0.4s;
+}
+
+.appear-second {
+  animation-delay: 0.8s;
+}
+
+.appear-third {
+  animation-delay: 1.2s;
+}
+
+.appear-fourth {
+  animation-delay: 1.6s;
+}
+
+.appear-fifth {
+  animation-delay: 2s;
+}
+
+.appear-sixth {
+  animation-delay: 2.4s;
+}
+
+@keyframes appear {
+  to {
+    opacity: 1;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hide-on-desktop {
+    display: none;
+  }
+}
+
+.show-on-mobile {
+  display: block;
+}
+
+.hide-on-mobile {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .show-on-mobile {
+    display: none;
+  }
+
+  .hide-on-mobile {
+    display: block;
+  }
+}
+
+.hide-on-tablet {
+  display: block;
+}
+
+.show-on-tablet {
+  display: none;
+}
+
+@media (max-width: 1199px) and (min-width: 768px) {
+  .show-on-tablet {
+    display: block;
+  }
+
+  .hide-on-tablet {
+    display: none;
+  }
+}
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx
index 3a81766bc57..103e8b5e63b 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketActions.tsx
@@ -20,8 +20,8 @@ export default function TicketActions({
   ticketGenerationState,
   setTicketGenerationState,
 }: Props) {
-  const [imgReady, setImgReady] = useState(false)
-  const [loading, setLoading] = useState(false)
+  const [_imgReady, setImgReady] = useState(false)
+  const [_loading, setLoading] = useState(false)
   const downloadLink = useRef<HTMLAnchorElement>()
   const link = `${SITE_URL}/tickets/${username}?lw=8${golden ? `&golden=true` : ''}`
   const permalink = encodeURIComponent(link)
diff --git a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
index dd9aa9e243c..6d6f848b536 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
+++ b/apps/www/components/LaunchWeek/8/Ticket/TicketCustomizationForm.tsx
@@ -54,9 +54,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             Connected account
           </span>
         )}
-        {IS_SAVED && (
-          <span className="opacity-0 animate-fade-in text-xs text-brand-900">Saved</span>
-        )}
+        {IS_SAVED && <span className="opacity-0 animate-fade-in text-xs text-brand">Saved</span>}
         {HAS_ERROR && (
           <span className="opacity-0 animate-fade-in text-xs text-tomato-900">
             Something went wrong
@@ -72,7 +70,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
         disabled
         placeholder="name"
         value={user.name}
-        icon={<IconCheck strokeWidth={2} className="w-3 text-brand-900" />}
+        icon={<IconCheck strokeWidth={2} className="w-3 text-brand" />}
       />
       <Input
         className="[&_input]:border-scale-200"
@@ -91,7 +89,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3',
               IS_SAVING && 'text-scale-300',
-              !!formData.role ? 'text-brand-900' : 'text-scale-300',
+              !!formData.role ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
@@ -113,7 +111,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3',
               IS_SAVING && 'text-scale-300',
-              !!formData.company ? 'text-brand-900' : 'text-scale-300',
+              !!formData.company ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
@@ -135,7 +133,7 @@ const TicketCustomizationForm = ({ supabase, user }: Props) => {
             className={[
               'w-3 flex spin',
               IS_SAVING && 'text-scale-300',
-              !!formData.location ? 'text-brand-900' : 'text-scale-300',
+              !!formData.location ? 'text-brand' : 'text-scale-300',
             ].join(' ')}
           />
         }
diff --git a/apps/www/components/LaunchWeek/8/Ticket/form.module.css b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
index 5b6a078561b..d982d30f265 100644
--- a/apps/www/components/LaunchWeek/8/Ticket/form.module.css
+++ b/apps/www/components/LaunchWeek/8/Ticket/form.module.css
@@ -130,8 +130,8 @@
   height: 56px;
   margin-top: var(--space-4x);
   border-radius: var(--space-2x);
-  border: 1px solid var(--brand);
-  background: var(--brand);
+  border: 1px solid hsl(var(--brand-default));
+  background: hsl(var(--brand-default));
   cursor: pointer;
   font-family: inherit;
   font-size: var(--text-md);
@@ -170,12 +170,12 @@
 .submit.default:hover,
 .submit.default:focus {
   background: black;
-  color: var(--brand);
+  color: hsl(var(--brand-default));
 }
 
 .submit.default.generate-with-github:hover path,
 .submit.default.generate-with-github:focus path {
-  fill: var(--brand);
+  fill: hsl(var(--brand-default));
 }
 
 .submit.error:hover,
diff --git a/apps/www/components/Layouts/SectionContainer.tsx b/apps/www/components/Layouts/SectionContainer.tsx
index db5ec705165..931294e211d 100644
--- a/apps/www/components/Layouts/SectionContainer.tsx
+++ b/apps/www/components/Layouts/SectionContainer.tsx
@@ -3,10 +3,12 @@ import classNames from 'classnames'
 interface Props {
   children: React.ReactNode
   className?: string
+  id?: string
 }
 
-const SectionContainer = ({ children, className }: Props) => (
+const SectionContainer = ({ children, className, id }: Props) => (
   <div
+    id={id}
     className={classNames(
       `sm:py-18 container relative mx-auto px-6 py-16 md:py-24 lg:px-16 lg:py-24 xl:px-20`,
       className
diff --git a/apps/www/components/MagnifiedProducts.tsx b/apps/www/components/MagnifiedProducts.tsx
index 17880f85e71..fc288b4b771 100644
--- a/apps/www/components/MagnifiedProducts.tsx
+++ b/apps/www/components/MagnifiedProducts.tsx
@@ -93,7 +93,7 @@ function Product({
               lazyBoundary="100px"
             />
           </motion.div>
-          <div className="text-brand-1100 dark:text-brand-900 flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
+          <div className="text-brand-600 dark:text-brand flex justify-center relative opacity-70 md:absolute md:bottom-0 md:opacity-0 group-hover:opacity-100 transition-opacity md:translate-y-8 md:-left-20 md:md:-right-20 font-mono uppercase text-center text-xs mt-2">
             <span>{product.name}</span>
           </div>
         </a>
diff --git a/apps/www/components/Nav/Company.tsx b/apps/www/components/Nav/Company.tsx
index 7b263e0bc9b..620acfb2ef0 100644
--- a/apps/www/components/Nav/Company.tsx
+++ b/apps/www/components/Nav/Company.tsx
@@ -27,7 +27,7 @@ const Company = () => {
           stroke="currentColor"
           aria-hidden="true"
         >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icon} />
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
         </svg>
         <div className="ml-4">
           <p className="text-base font-medium text-gray-900 dark:text-white">{text}</p>
@@ -82,7 +82,7 @@ const Company = () => {
         <div className="mt-6 text-sm font-medium">
           <a
             href="/blog"
-            className="dark:text-brand-900 dark:hover:text-brand-700 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
+            className="dark:text-brand dark:hover:text-brand-400 text-gray-600 transition duration-150 ease-in-out hover:text-gray-500"
           >
             View all posts <span aria-hidden="true">&rarr;</span>
           </a>
diff --git a/apps/www/components/Nav/Developers.tsx b/apps/www/components/Nav/Developers.tsx
index 01cd98ebedf..71061cd2fc8 100644
--- a/apps/www/components/Nav/Developers.tsx
+++ b/apps/www/components/Nav/Developers.tsx
@@ -32,7 +32,7 @@ const Developers = () => {
             stroke="currentColor"
             aria-hidden="true"
           >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={icon} />
+            <path stroke-linecap="round" strokeLinejoin="round" strokeWidth="1.5" d={icon} />
           </svg>
         )}
         {Svg && <Svg />}
diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx
index 2439d76df00..8f7e04225b0 100644
--- a/apps/www/components/Nav/index.tsx
+++ b/apps/www/components/Nav/index.tsx
@@ -85,7 +85,7 @@ const Nav = () => {
             <p className="mt-1 text-sm text-scale-1100 dark:text-dark-100">{description}</p>
           </div>
           {url && (
-            <p className="mt-2 text-sm font-medium text-brand-900 lg:mt-4">
+            <p className="mt-2 text-sm font-medium text-brand lg:mt-4">
               <TextLink label={label ? 'Get notified' : 'Learn more'} url={url} />
             </p>
           )}
@@ -120,7 +120,7 @@ const Nav = () => {
     >
       <button
         className={[
-          'text-scale-900 focus:ring-brand-900 dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
+          'text-scale-900 focus:ring-brand dark:bg-scale-200 dark:hover:bg-scale-300 inline-flex items-center justify-center rounded-md bg-gray-50 p-2 hover:bg-white focus:outline-none focus:ring-2 focus:ring-inset',
           showLaunchWeekNavMode && '!bg-transparent border border-[#be9eea]',
         ].join(' ')}
         aria-expanded="false"
@@ -166,7 +166,7 @@ const Nav = () => {
     <div
       className={[
         `
-        text-scale-1200 hover:text-brand-900
+        text-scale-1200 hover:text-brand
         inline-flex cursor-pointer items-center
         border-b-2
         border-transparent
@@ -211,9 +211,9 @@ const Nav = () => {
         />
         <nav
           className={[
-            `border-scale-300 border-b backdrop-blur-sm transition-opacity`,
-            showLaunchWeekNavMode && '!opacity-100 !border-[#e0d2f430]',
-            isLaunchWeekPage && showLaunchWeekNavMode && '!border-b-0',
+            `relative z-40 border-scale-300 border-b backdrop-blur-sm transition-opacity`,
+            showLaunchWeekNavMode ? '!opacity-100 !border-[#e0d2f430]' : '',
+            isLaunchWeekPage && showLaunchWeekNavMode ? '!border-b-0' : '',
           ].join(' ')}
         >
           {/* <div className="relative flex justify-between h-16 mx-auto lg:container lg:px-10 xl:px-0"> */}
@@ -258,7 +258,7 @@ const Nav = () => {
                   <Link href="/pricing">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -270,7 +270,7 @@ const Nav = () => {
                   <Link href="/docs">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -282,7 +282,7 @@ const Nav = () => {
                   <Link href="/blog">
                     <a
                       className={[
-                        `text-scale-1200 hover:text-brand-900 hover:border-brand-900 dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
+                        `text-scale-1200 hover:text-brand hover:border-brand dark:text-dark-100 dark:hover:border-dark-100 inline-flex items-center
                         border-b-2 border-transparent p-5 px-1
                         text-sm font-medium`,
                         showLaunchWeekNavMode && '!text-white',
@@ -299,7 +299,7 @@ const Nav = () => {
                     className="hidden group lg:flex"
                     type="text"
                     icon={
-                      <div className="flex items-center justify-center w-4 h-4 text-brand-800">
+                      <div className="flex items-center justify-center w-4 h-4 text-brand-300">
                         <div
                           className={[
                             `text-scale-900 flex h-3 w-3 items-center justify-center
@@ -376,7 +376,7 @@ const Nav = () => {
                   <button
                     onClick={() => setOpen(false)}
                     type="button"
-                    className="inline-flex items-center justify-center p-2 bg-white rounded-md text-scale-900 focus:ring-brand-900 dark:bg-scale-300 dark:hover:bg-scale-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
+                    className="inline-flex items-center justify-center p-2 bg-white rounded-md text-scale-900 focus:ring-brand dark:bg-scale-300 dark:hover:bg-scale-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset"
                   >
                     <span className="sr-only">Close menu</span>
                     <svg
diff --git a/apps/www/components/Partners/PartnerLinkBox.tsx b/apps/www/components/Partners/PartnerLinkBox.tsx
index 31c3809b457..5f48015ac9e 100644
--- a/apps/www/components/Partners/PartnerLinkBox.tsx
+++ b/apps/www/components/Partners/PartnerLinkBox.tsx
@@ -19,7 +19,7 @@ const PartnerLinkBox = ({
       'bg-amber-400 dark:bg-scale-100 group-hover:bg-amber-500 dark:group-hover:bg-amber-300 text-amber-900',
     blue: 'bg-blue-400 dark:bg-scale-100 group-hover:bg-blue-500 dark:group-hover:bg-blue-300 text-blue-900',
     brand:
-      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-500 dark:group-hover:bg-brand-300 text-brand-900',
+      'bg-brand-400 dark:bg-scale-100 group-hover:bg-brand-300 dark:group-hover:bg-brand-300 text-brand',
   }
 
   const content = (
diff --git a/apps/www/components/Pricing/ComputePricingModal.tsx b/apps/www/components/Pricing/ComputePricingModal.tsx
index eb76e04349b..7e4149fcd13 100644
--- a/apps/www/components/Pricing/ComputePricingModal.tsx
+++ b/apps/www/components/Pricing/ComputePricingModal.tsx
@@ -119,7 +119,7 @@ export default function ComputePricingModal({ showComputeModal, setShowComputeMo
                     </th>
                     <td
                       className={`px-4 py-3 ${
-                        column.key === 'plan' ? 'text-brand-900 pt-16 lg:pt-3' : ''
+                        column.key === 'plan' ? 'text-brand pt-16 lg:pt-3' : ''
                       }`}
                     >
                       {column.key === 'dedicated' ? (
diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx
index 2d38ab75564..7d1c5090451 100644
--- a/apps/www/components/ProductIcon.tsx
+++ b/apps/www/components/ProductIcon.tsx
@@ -9,13 +9,13 @@ function ProductIcon({ icon, color }: ProductIcon) {
       className={[
         'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md',
         !color || color === 'black' ? 'bg-scale-1200 text-scale-100' : '',
-        color && color === 'green' ? 'bg-brand-800 dark:bg-brand-600 text-brand-100' : '',
+        color && color === 'green' ? 'bg-brand-300 dark:bg-brand-600 text-brand-100' : '',
       ].join(' ')}
     >
       <svg
         className={[
           'h-5 w-5 stroke-white dark:stroke-black',
-          color && color === 'green' ? 'dark:stroke-brand-900' : '',
+          color && color === 'green' ? 'dark:stroke-brand' : '',
         ].join(' ')}
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
diff --git a/apps/www/components/Quote.tsx b/apps/www/components/Quote.tsx
index 2c1b1bcc48d..8eb6c7507bc 100644
--- a/apps/www/components/Quote.tsx
+++ b/apps/www/components/Quote.tsx
@@ -21,7 +21,7 @@ export default function Quote(props: Props) {
             <Avatar caption={caption} img={img} />
           </div>
         )}
-        <div className="absolute rounded-full w-1 h-full inset-0 right-auto bg-brand-900" />
+        <div className="absolute rounded-full w-1 h-full inset-0 right-auto bg-brand" />
       </div>
     </figure>
   )
diff --git a/apps/www/components/SOC2RequestForm.tsx b/apps/www/components/SOC2RequestForm.tsx
index fb45809b19f..841e7e0e5b9 100644
--- a/apps/www/components/SOC2RequestForm.tsx
+++ b/apps/www/components/SOC2RequestForm.tsx
@@ -68,7 +68,7 @@ const SOC2RequestForm = () => {
   return (
     <div>
       {formSubmitted ? (
-        <h3 className="h3 text-brand-900 mt-12 text-center">
+        <h3 className="h3 text-brand mt-12 text-center">
           Thank you for your submission! A member from the Supabase team will reach out to you
           shortly!
         </h3>
diff --git a/apps/www/components/ScrollProgress.tsx b/apps/www/components/ScrollProgress.tsx
index ddbea562561..cd366d1c21f 100644
--- a/apps/www/components/ScrollProgress.tsx
+++ b/apps/www/components/ScrollProgress.tsx
@@ -30,7 +30,7 @@ const ScrollProgress = () => {
   return (
     <div className="h-[2px] w-full flex justify-start relative">
       <div
-        className="h-full top-0 bottom-0 right-0 absolute w-screen bg-brand-900 will-change-transform transition-opacity"
+        className="h-full top-0 bottom-0 right-0 absolute w-screen bg-brand will-change-transform transition-opacity"
         style={{
           display: isActive ? 'absolute' : 'relative',
           transform: `translate3d(${isActive ? progressPercentage - 100 + '%' : '0'},0,0)`,
diff --git a/apps/www/components/Sections/CommunitySlider.tsx b/apps/www/components/Sections/CommunitySlider.tsx
index f0e8ac52d93..af1bbde695b 100644
--- a/apps/www/components/Sections/CommunitySlider.tsx
+++ b/apps/www/components/Sections/CommunitySlider.tsx
@@ -130,7 +130,7 @@ const CommunitySlider = () => {
       <p className="text-scale-900 my-3 text-base">{card.abstract}</p>
 
       {card.url && (
-        <div className="text-brand-900 block cursor-pointer text-sm">Read Customer Story</div>
+        <div className="text-brand block cursor-pointer text-sm">Read Customer Story</div>
       )}
     </div>
   )
diff --git a/apps/www/components/Sections/CustomerQuotesSection.tsx b/apps/www/components/Sections/CustomerQuotesSection.tsx
index bfcd363fc8a..4715d7f390a 100644
--- a/apps/www/components/Sections/CustomerQuotesSection.tsx
+++ b/apps/www/components/Sections/CustomerQuotesSection.tsx
@@ -74,7 +74,7 @@ const CustomerQuotesSection = (props: Props) => {
             {customer.author}, {customer.role}
           </p>
           {customer.url && (
-            <div className="text-brand-900 border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
+            <div className="text-brand border-t mt-4 pt-4 cursor-pointer text-sm flex items-center justify-between">
               <span>Read Customer Story</span>
               <IconArrowUpRight />
             </div>
diff --git a/apps/www/components/Sections/ProductHeaderCentered.tsx b/apps/www/components/Sections/ProductHeaderCentered.tsx
index 9012a0f846d..98de8020142 100644
--- a/apps/www/components/Sections/ProductHeaderCentered.tsx
+++ b/apps/www/components/Sections/ProductHeaderCentered.tsx
@@ -53,7 +53,7 @@ const ProductHeaderCentered = (props: Types) => (
               {props.icon && <ProductIcon icon={props.icon} />}
               {props.title && (
                 <span
-                  className="text-brand-900 font-mono uppercase tracking-widest text-sm"
+                  className="text-brand font-mono uppercase tracking-widest text-sm"
                   key={`product-name-${props.title}`}
                 >
                   {props.title}
diff --git a/apps/www/components/Sections/TimedTabsSection.tsx b/apps/www/components/Sections/TimedTabsSection.tsx
index 532a70fb177..1de3cc0ddd7 100644
--- a/apps/www/components/Sections/TimedTabsSection.tsx
+++ b/apps/www/components/Sections/TimedTabsSection.tsx
@@ -29,7 +29,7 @@ const Tab = ({ isActive, label, paragraph, onClick, progress, intervalDuration }
       {isActive && (
         <motion.div
           className={[
-            'absolute inset-0 w-full right-full bg-brand-900 h-full transition-opacity',
+            'absolute inset-0 w-full right-full bg-brand h-full transition-opacity',
             progress! > 99.7 ? 'opacity-0' : 'opacity-100',
           ].join(' ')}
           style={{ x: `${progress! - 100}%` }}
diff --git a/apps/www/data/partners/index.tsx b/apps/www/data/partners/index.tsx
index 317e95ae89f..bb5399763c8 100644
--- a/apps/www/data/partners/index.tsx
+++ b/apps/www/data/partners/index.tsx
@@ -29,9 +29,9 @@ export default {
             aria-hidden="true"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
               d="M12.0003 6.1488L10.5812 4.76334C8.68921 2.91613 5.62161 2.91613 3.72957 4.76334C1.98628 6.46532 1.84923 9.14165 3.31842 10.9968C3.44378 11.1551 3.77166 11.514 3.92041 11.6592M12.0003 6.1488L13.4193 4.76334C15.3113 2.91613 18.3789 2.91613 20.271 4.76334C22.163 6.61054 22.163 9.60546 20.271 11.4527L19.2017 12.5186M12.0003 6.1488L10.7542 7.39725C10.0214 8.13141 10.0219 9.32043 10.7554 10.0539C11.4894 10.7879 12.6793 10.7879 13.4133 10.0539L16.0693 7.39787M14.9131 13.4531L17.4954 16.1809M17.4954 16.1809C18.2089 16.9347 18.1764 18.1242 17.4226 18.8378C16.6693 19.5509 15.4807 19.5189 14.7669 18.7663L13.3188 17.2217M17.4954 16.1809C18.2086 16.9344 19.3982 16.9676 20.1516 16.2543C20.9051 15.5411 20.9376 14.3521 20.2244 13.5987L17.6415 10.8703M6.13555 14.7589L7.46387 13.4306M6.13555 14.7589C5.40193 15.4925 4.21251 15.4925 3.47889 14.7589C2.74528 14.0253 2.74528 12.8358 3.47889 12.1022L4.80722 10.7739C5.54084 10.0403 6.73026 10.0403 7.46388 10.7739C8.19749 11.5075 8.19749 12.6969 7.46387 13.4306M6.13555 14.7589C5.40193 15.4925 5.40193 16.6819 6.13555 17.4155C6.86916 18.1492 8.05859 18.1492 8.7922 17.4155M7.46387 13.4306C8.19749 12.6969 9.38691 12.6969 10.1205 13.4306C10.8541 14.1642 10.8541 15.3536 10.1205 16.0872M8.7922 17.4155L10.1205 16.0872M8.7922 17.4155C8.05859 18.1492 8.05859 19.3386 8.7922 20.0722C9.52582 20.8058 10.7152 20.8058 11.4489 20.0722L12.7772 18.7439C13.5108 18.0102 13.5108 16.8208 12.7772 16.0872C12.0436 15.3536 10.8541 15.3536 10.1205 16.0872"
             />
           </svg>
diff --git a/apps/www/data/products/vector/pageData.tsx b/apps/www/data/products/vector/pageData.tsx
index 2da32838233..2ae6b53155f 100644
--- a/apps/www/data/products/vector/pageData.tsx
+++ b/apps/www/data/products/vector/pageData.tsx
@@ -162,7 +162,7 @@ export default {
       <>
         <span className="heading-gradient">Simple yet</span>
         <br />
-        <span className="text-brand-900">powerful APIs</span>
+        <span className="text-brand">powerful APIs</span>
       </>
     ),
     paragraph: 'Easy-to-use client libraries for managing and querying vector stores in Postgres.',
@@ -242,7 +242,7 @@ docs.query(
       <>
         <span className="heading-gradient">Powerful Features</span>
         <br />
-        <span className="text-brand-900">Scale to millions</span>
+        <span className="text-brand">Scale to millions</span>
       </>
     ),
     paragraph:
diff --git a/apps/www/layouts/comparison.tsx b/apps/www/layouts/comparison.tsx
index 020d31e2559..c832c800eda 100644
--- a/apps/www/layouts/comparison.tsx
+++ b/apps/www/layouts/comparison.tsx
@@ -90,7 +90,7 @@ const LayoutComparison = ({ components, props }: Props) => {
           {/* Title and description */}
           <div className="mb-16 max-w-5xl space-y-8">
             <div className="space-y-4">
-              <p className="text-brand-900 text-center">Alternative</p>
+              <p className="text-brand text-center">Alternative</p>
               <h1 className="h1 text-center">{props.blog.title}</h1>
               <div className="text-scale-900 flex justify-center space-x-3 text-sm">
                 <p>{props.blog.date}</p>
diff --git a/apps/www/lib/authors.json b/apps/www/lib/authors.json
index d35168ab4c8..a612a143ea3 100644
--- a/apps/www/lib/authors.json
+++ b/apps/www/lib/authors.json
@@ -268,7 +268,7 @@
   {
     "author_id": "gregnr",
     "author": "Greg Richardson",
-    "position": "Open Source Contributor",
+    "position": "Engineering",
     "author_url": "https://github.com/gregnr",
     "author_image_url": "https://github.com/gregnr.png"
   },
diff --git a/apps/www/lib/mdx/mdxComponents.tsx b/apps/www/lib/mdx/mdxComponents.tsx
index 0ff6f996a7d..55ffb97b991 100644
--- a/apps/www/lib/mdx/mdxComponents.tsx
+++ b/apps/www/lib/mdx/mdxComponents.tsx
@@ -75,6 +75,11 @@ export default function mdxComponents(type?: 'blog' | 'lp' | undefined) {
         )}
       </figure>
     ),
+    Link: (props: HTMLAnchorElement) => (
+      <a href={props.href} target={props.target}>
+        {props.children}
+      </a>
+    ),
     code: (props: any) => <InlineCodeTag>{props.children}</InlineCodeTag>,
   }
 
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 9216ce46332..0ff808fff5f 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -2257,4 +2257,5 @@ module.exports = [
     source: '/docs/guides/platform/oauth-apps/authorize-an-oauth-app',
     destination: '/docs/guides/platform/oauth-apps/build-a-supabase-integration',
   },
+  { permanent: true, source: '/docs/reference/cli/config', destination: '/docs/guides/cli/config' },
 ]
diff --git a/apps/www/package.json b/apps/www/package.json
index 55aacb7ebbb..d12b97bf9f4 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -60,7 +60,7 @@
     "shared-data": "*",
     "swiper": "^6.5.0",
     "swr": "^0.5.4",
-    "three": "^0.154.0",
+    "three": "^0.136.0",
     "typescript": "^5.0.4",
     "ui": "*",
     "use-debounce": "^7.0.1",
@@ -81,7 +81,7 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^17.0.11",
     "@types/react-syntax-highlighter": "^15.5.6",
-    "@types/three": "^0.154.0",
+    "@types/three": "^0.136.0",
     "autoprefixer": "^10.4.14",
     "config": "*",
     "file-loader": "^6.2.0",
diff --git a/apps/www/pages/beta.tsx b/apps/www/pages/beta.tsx
index 8ac450a2b35..f72f5e5a8fd 100644
--- a/apps/www/pages/beta.tsx
+++ b/apps/www/pages/beta.tsx
@@ -118,7 +118,7 @@ const Hero = (props: Props) => {
         <div className="col-span-12 text-scale-900 dark:text-white md:col-span-9 lg:col-span-8 xl:col-span-6">
           <p className="mb-10 text-4xl">Supabase is an open source Firebase alternative.</p>
           <p className="text-2xl">
-            Today, we're moving to <span className="text-brand-900">Beta</span>
+            Today, we're moving to <span className="text-brand">Beta</span>
           </p>
           <time itemProp="datePublished" dateTime="2020-12-03" className="text-sm opacity-80">
             Published December 3rd, 2020
@@ -139,7 +139,7 @@ const Introduction = () => {
             <a
               href="https://news.ycombinator.com/item?id=23319901"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               Alpha
             </a>{' '}
@@ -154,7 +154,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-xendit"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             Xendit
           </a>
@@ -162,7 +162,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-monitoro"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             Monitoro
           </a>
@@ -170,7 +170,7 @@ const Introduction = () => {
           <a
             href="/blog/2020/12/02/case-study-tayfa"
             target="_blank"
-            className="text-brand-900 hover:text-brand-900"
+            className="text-brand hover:text-brand"
           >
             TAYFA
           </a>{' '}
@@ -223,8 +223,7 @@ const TableOfContents = (props: any) => {
       <div className="container grid grid-cols-12 gap-4 px-8 py-20 mx-auto lg:px-28">
         <div className="col-span-12 mb-10 text-base">
           <p className="text-2xl text-black dark:text-white">
-            Supabase <span className="text-brand-900 dark:text-brand-900">Beta</span> is starting
-            now.
+            Supabase <span className="text-brand dark:text-brand">Beta</span> is starting now.
           </p>
         </div>
         <div className="grid grid-cols-12 col-span-12 gap-y-10">
@@ -314,7 +313,7 @@ const Performance = () => {
                       <Bar
                         color={
                           stat.name === 'Supabase'
-                            ? 'bg-brand-900 dark:bg-brand-800'
+                            ? 'bg-brand dark:bg-brand-300'
                             : 'bg-brand-300 dark:bg-brand-400'
                         }
                         finalPercentage={Math.ceil((stat.value / maxValue) * 100)}
@@ -353,7 +352,7 @@ const Performance = () => {
               <a
                 href="https://elixir-lang.org/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 Elixir
               </a>{' '}
@@ -361,7 +360,7 @@ const Performance = () => {
               <a
                 href="https://github.com/supabase/realtime"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 Realtime engine
               </a>
@@ -369,7 +368,7 @@ const Performance = () => {
               <a
                 href="https://postgrest.org/en/v7.0.0/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 PostgREST
               </a>{' '}
@@ -381,7 +380,7 @@ const Performance = () => {
               <a
                 href="https://github.com/supabase/benchmarks/"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 benchmarks
               </a>{' '}
@@ -451,11 +450,7 @@ const Security = () => {
               </li>
               <li className="mb-5">
                 Adopted the{' '}
-                <a
-                  href="https://snyk.io/"
-                  target="_blank"
-                  className="text-brand-900 hover:text-brand-900"
-                >
+                <a href="https://snyk.io/" target="_blank" className="text-brand hover:text-brand">
                   Snyk
                 </a>{' '}
                 dependency monitor as part of our SSDLC on several key component of our system, to
@@ -467,7 +462,7 @@ const Security = () => {
                 <a
                   href="https://github.com/PostgREST/postgrest/pull/1600#issuecomment-735257952"
                   target="_blank"
-                  className="text-brand-900 hover:text-brand-900"
+                  className="text-brand hover:text-brand"
                 >
                   now uses
                 </a>{' '}
@@ -513,7 +508,7 @@ const Reliability = () => {
               <a
                 href="https://status.supabase.com"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 https://status.supabase.com
               </a>{' '}
@@ -557,7 +552,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/auth-signup"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     JavaScript
                   </a>{' '}
@@ -565,7 +560,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/gotrue/server/about#endpoints"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     HTTP
                   </a>
@@ -587,7 +582,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/guides/client-libraries#realtime-changes"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     subscribe to changes in your database
                   </a>{' '}
@@ -606,7 +601,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/select#query-foreign-tables"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     querying from multiple tables
                   </a>{' '}
@@ -614,7 +609,7 @@ const NewFeaturesAndIntegrations = () => {
                   <a
                     href="/docs/reference/javascript/rpc"
                     target="_blank"
-                    className="text-brand-900 hover:text-brand-900"
+                    className="text-brand hover:text-brand"
                   >
                     invoke complex functions
                   </a>
@@ -703,7 +698,7 @@ const BetaPricing = () => (
               <a
                 href="mailto:rory@supabase.io"
                 target="_blank"
-                className="text-brand-900 hover:text-brand-900"
+                className="text-brand hover:text-brand"
               >
                 rory@supabase.io
               </a>
@@ -716,7 +711,7 @@ const BetaPricing = () => (
           </ul>
           <p>
             The Supabase Base plan is now called the Supabase Pro plan as per the{' '}
-            <a href="https://supabase.com/pricing" className="text-brand-900 hover:text-brand-900">
+            <a href="https://supabase.com/pricing" className="text-brand hover:text-brand">
               pricing page
             </a>
             .
@@ -747,7 +742,7 @@ const OpenSource = () => (
             <a
               href="https://github.com/sponsors/supabase/"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               sponsorship
             </a>{' '}
@@ -759,7 +754,7 @@ const OpenSource = () => (
             <a
               href="/blog/2020/12/02/supabase-striveschool"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               partnering with Strive School
             </a>{' '}
@@ -772,7 +767,7 @@ const OpenSource = () => (
             <a
               href="mailto:rory@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               rory@supabase.io
             </a>{' '}
@@ -783,7 +778,7 @@ const OpenSource = () => (
             <a
               href="https://github.com/supabase"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               our GitHub.
             </a>{' '}
@@ -819,7 +814,7 @@ const FundingPartners = () => (
             <a
               href="https://twitter.com/supabase"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               Twitter
             </a>{' '}
@@ -856,7 +851,7 @@ const ScalingOurTeam = () => (
             <a
               href="mailto:work@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               work@supabase.io
             </a>
@@ -917,7 +912,7 @@ const WhatsNext = () => (
             <a
               href="mailto:support@supabase.io"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               support@supabase.io
             </a>{' '}
@@ -925,7 +920,7 @@ const WhatsNext = () => (
             <a
               href="https://github.com/supabase/supabase/discussions"
               target="_blank"
-              className="text-brand-900 hover:text-brand-900"
+              className="text-brand hover:text-brand"
             >
               discussion
             </a>{' '}
diff --git a/apps/www/pages/blog/[slug].tsx b/apps/www/pages/blog/[slug].tsx
index 1b1fcbd5b8b..356c3d5c107 100644
--- a/apps/www/pages/blog/[slug].tsx
+++ b/apps/www/pages/blog/[slug].tsx
@@ -202,7 +202,7 @@ function BlogPostPage(props: any) {
               {/* Title and description */}
               <div className="mb-16 max-w-5xl space-y-8">
                 <div className="space-y-4">
-                  <p className="text-brand-900">Blog post</p>
+                  <p className="text-brand">Blog post</p>
                   <h1 className="h1">{props.blog.title}</h1>
                   <div className="text-scale-900 flex space-x-3 text-sm">
                     <p>{props.blog.date}</p>
diff --git a/apps/www/pages/careers/index.tsx b/apps/www/pages/careers/index.tsx
index a303e9f2e9a..f03c234b0a1 100644
--- a/apps/www/pages/careers/index.tsx
+++ b/apps/www/pages/careers/index.tsx
@@ -101,7 +101,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
       <DefaultLayout>
         <div className="text-scale-1200">
           <div className="container relative mx-auto px-6 py-10 lg:pt-12 lg:px-16 xl:px-20 text-center space-y-4">
-            <h1 className="text-sm text-brand-900 md:text-base">
+            <h1 className="text-sm text-brand md:text-base">
               <span className="sr-only">Supabase </span>Careers
             </h1>
             <h2 className="text-3xl md:text-4xl xl:text-5xl lg:max-w-2xl xl:max-w-3xl lg:mx-auto tracking-[-1.5px]">
@@ -121,9 +121,9 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                 return (
                   <div
                     key={i}
-                    className="border-t-[1px] mt-6 mx-2 md:mx-2 md:mt-0 md:border-0 border-brand-900 w-[134px] md:max-w-none"
+                    className="border-t-[1px] mt-6 mx-2 md:mx-2 md:mt-0 md:border-0 border-brand w-[134px] md:max-w-none"
                   >
-                    <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand-900 w-[60px] lg:w-[100px]"></div>
+                    <div className="hidden md:block border-t-[1px] lg:border-t-2 border-brand w-[60px] lg:w-[100px]"></div>
                     <h2 className="text-3xl lg:text-4xl pt-3 tracking-[-1.5px]">
                       {company.number}
                     </h2>
@@ -153,7 +153,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                       Discord to stay connected to our team, and our community.
                     </p>
                     <div className="max-w-[300px] sm:max-w-md lg:max-w-md mt-20">
-                      <div className="border-t-2 border-brand-900 w-4/12"></div>
+                      <div className="border-t-2 border-brand w-4/12"></div>
                       <h2 className="text-2xl sm:text-3xl lg:text-4xl pt-2 tracking-[-1.5px]">
                         We deeply believe in the efficacy of collaborative open source
                       </h2>
@@ -445,10 +445,10 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                     className="flex lg:block items-start space-x-6 lg:space-x-0 lg:w-full"
                   >
                     <div className="lg:flex items-center">
-                      <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-md text-center w-[44px] px-2 py-1.5 rounded-md">
+                      <h3 className="bg-brand-600 border-[1px] border-brand-300 text-brand text-md text-center w-[44px] px-2 py-1.5 rounded-md">
                         {i + 1}
                       </h3>
-                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-800 lg:pr-6"></div>
+                      <div className="h-[100px] w-[1px] sm:h-[100px] mx-auto lg:h-[1px] lg:w-full bg-brand-300 lg:pr-6"></div>
                     </div>
                     <div className="lg:mt-6">
                       <h2 className="sm:text-lg max-w-[75%] xl:max-w-none xl:w-11/12 lg:max-w-none">
@@ -461,7 +461,7 @@ const CareerPage: NextPage = ({ jobs, contributors }: any) => {
                   </div>
                 )
               })}
-              <h3 className="bg-brand-600 border-[1px] border-brand-800 text-brand-900 text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
+              <h3 className="bg-brand-600 border-[1px] border-brand-300 text-brand text-xl w-[44px] min-h-[40px] px-2 py-1 rounded-md grid justify-items-center items-center">
                 <IconCheck />
               </h3>
             </div>
diff --git a/apps/www/pages/customers/[slug].tsx b/apps/www/pages/customers/[slug].tsx
index 7be097ca5b9..19880b2ca34 100644
--- a/apps/www/pages/customers/[slug].tsx
+++ b/apps/www/pages/customers/[slug].tsx
@@ -122,9 +122,7 @@ function CaseStudyPage(props: any) {
                 <article className="flex flex-col gap-8">
                   <div className="flex flex-col gap-8 max-w-xxl">
                     <Link passHref href="/customers">
-                      <a className="text-brand-900 hover:text-brand-1000 mb-2 mt-0">
-                        Customer Stories
-                      </a>
+                      <a className="text-brand hover:text-brand-600 mb-2 mt-0">Customer Stories</a>
                     </Link>
                     <h1 className="text-scale-1200 text-4xl font-semibold xl:text-5xl">
                       {props.blog.title}
diff --git a/apps/www/pages/edge-functions/edge-functions.tsx b/apps/www/pages/edge-functions/edge-functions.tsx
index 20900033d31..981685a0268 100644
--- a/apps/www/pages/edge-functions/edge-functions.tsx
+++ b/apps/www/pages/edge-functions/edge-functions.tsx
@@ -145,7 +145,7 @@ function Database() {
                     className="bg-scale-100 dark:bg-scale-300 group flex flex-col gap-4 rounded border px-8 py-6"
                     key={i}
                   >
-                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand-900 flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
+                    <div className="bg-scale-300 dark:bg-scale-500 text-scale-1200 group-hover:text-brand flex h-12 w-12 items-center justify-center rounded-md border transition-all group-hover:scale-105">
                       {item.icon ? item.icon : <IconCode strokeWidth={2} />}
                     </div>
 
diff --git a/apps/www/pages/launch-week/6/index.tsx b/apps/www/pages/launch-week/6/index.tsx
index 7f8f8426cc1..4912c976a6b 100644
--- a/apps/www/pages/launch-week/6/index.tsx
+++ b/apps/www/pages/launch-week/6/index.tsx
@@ -1018,7 +1018,7 @@ export default function launchweek() {
                 href="https://supabase.com/blog/launch-week-6-hackathon"
                 target="_blank"
                 rel="nooper noreferrer"
-                className="text-brand-900"
+                className="text-brand"
               >
                 blog post
               </a>
@@ -1052,7 +1052,7 @@ export default function launchweek() {
                   <a
                     href="https://discord.supabase.com/"
                     rel="noopener noreferrer"
-                    className="text-brand-900 flex items-center"
+                    className="text-brand flex items-center"
                     target="_blank"
                   >
                     Join our Discord <IconExternalLink size="small" className="inline-block ml-2" />
@@ -1064,7 +1064,7 @@ export default function launchweek() {
                 <p className="text-slate-900 w-[90%] lg:w-[80%]">
                   Submit your project through{' '}
                   <a
-                    className="text-brand-900"
+                    className="text-brand"
                     href="https://www.madewithsupabase.com/launch-week-6"
                     target="_blank"
                   >
@@ -1091,7 +1091,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Supabase Cache Helpers</h3>
                   <p className="text-slate-1000 text-xs">Previous Best Overall Project Winner</p>
@@ -1105,7 +1105,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Super UI</h3>
                   <p className="text-slate-1000 text-xs">Previous Best Overall Project Runner Up</p>
@@ -1120,7 +1120,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">Quid Faciam Hodie?</h3>
                   <p className="text-slate-1000 text-xs">Winner Best Flutter Project</p>
@@ -1130,7 +1130,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 mb-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">That Hot Dog Game</h3>
                   <p className="text-slate-1000 text-xs">Previous Winner: Most Fun/Interesting</p>
@@ -1145,7 +1145,7 @@ export default function launchweek() {
                 <div className="border border-[#2E2E2E] rounded-xl pl-5 pr-9 py-4 bg-[#121212] w-fit relative max-w-[250px]">
                   <img
                     src="/images/launchweek/link.svg"
-                    className="absolute top-[16px] right-[10px] text-brand-900"
+                    className="absolute top-[16px] right-[10px] text-brand"
                   ></img>
                   <h3 className="text-white">RepoWatch</h3>
                   <p className="text-slate-1000 text-xs">Previous Winner Best Realtime Project</p>
@@ -1177,10 +1177,10 @@ export default function launchweek() {
                   }}
                 >
                   <div className="relative group">
-                    <div className="absolute -inset-0.5 bg-brand-1100 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
+                    <div className="absolute -inset-0.5 bg-brand-600 rounded-full opacity-75 group-hover:opacity-100 group-hover:blur-sm transition duration-500"></div>
                     <a href={creator.link} target="_blank" rel="noopener">
                       <img
-                        className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand-900 hover:shadow-md"
+                        className="relative rounded-full w-12 h-12 border border-[#2E2E2E] border-brand hover:shadow-md"
                         src={creator.profile_picture}
                       />
                     </a>
@@ -1204,7 +1204,7 @@ export default function launchweek() {
               We worked with more than 30 content creators from around the world to drop a mountain
               of content simultaneously!
               <a rel="noopener" target="_blank" href="/blog/the-supabase-content-storm">
-                <div className="text-brand-900 flex items-center mt-2">
+                <div className="text-brand flex items-center mt-2">
                   See all the content
                   <IconExternalLink size="small" className="inline-block ml-1" />
                 </div>
@@ -1220,7 +1220,7 @@ export default function launchweek() {
                 {activeCreator !== null && (
                   <p className="text-slate-900 ">{creators[activeCreator].description}</p>
                 )}
-                <p className="text-brand-900 mt-1">
+                <p className="text-brand mt-1">
                   <a rel="noopener" target="_blank" href={creators[activeCreator].link}>
                     <span>
                       {creators[activeCreator].link_title}
diff --git a/apps/www/pages/launch-week/7/index.tsx b/apps/www/pages/launch-week/7/index.tsx
index 55c3b4348aa..5043d62d84d 100644
--- a/apps/www/pages/launch-week/7/index.tsx
+++ b/apps/www/pages/launch-week/7/index.tsx
@@ -28,11 +28,11 @@ interface Props {
 
 const supabaseAdmin = createClient(
   process.env.NEXT_PUBLIC_SUPABASE_URL ?? 'http://localhost:54321',
+  // ANON KEY
   process.env.SUPABASE_SERVICE_ROLE_SECRET ??
     process.env.NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_SECRET ??
-    ''
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk3MjcwMTIsImV4cCI6MTk4NTMwMzAxMn0.SZLqryz_-stF8dgzeVXmzZWPOqdOrBwqJROlFES8v3I'
 )
-
 export default function TicketHome({ users }: Props) {
   const { isDarkMode, toggleTheme } = useTheme()
 
diff --git a/apps/www/pages/launch-week/7/tickets/index.tsx b/apps/www/pages/launch-week/7/tickets/index.tsx
index 61b1b0cd3a6..0027a45b7c6 100644
--- a/apps/www/pages/launch-week/7/tickets/index.tsx
+++ b/apps/www/pages/launch-week/7/tickets/index.tsx
@@ -131,11 +131,7 @@ export default function TicketsPage({ users }: Props) {
                 <h2 className="text-4xl">
                   Check out <span className="gradient-text-pink-500">all the tickets</span>
                 </h2>
-                <p className="radial-gradient-text-scale-500">
-                  Join us on April 16th for Launch Week 7's final day{' '}
-                  <br className="hidden md:inline-block" /> and find out if you are one of the lucky
-                  winners. Get sharing!
-                </p>
+                <p className="radial-gradient-text-scale-500">Submissions are closed.</p>
                 <div className="mt-1">
                   <Link href="/launch-week/7">
                     <a>
diff --git a/apps/www/pages/launch-week/index.tsx b/apps/www/pages/launch-week/index.tsx
index a44ac87bf85..d7405a095ad 100644
--- a/apps/www/pages/launch-week/index.tsx
+++ b/apps/www/pages/launch-week/index.tsx
@@ -1,25 +1,29 @@
-import { GetServerSideProps } from 'next'
-import { NextSeo } from 'next-seo'
 import { useState, useEffect } from 'react'
-import Image from 'next/image'
+import { GetServerSideProps } from 'next'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
+import Image from 'next/image'
 import { useRouter } from 'next/router'
+import { NextSeo } from 'next-seo'
 import { createClient, Session, SupabaseClient } from '@supabase/supabase-js'
 import { SITE_ORIGIN, SITE_URL } from '~/lib/constants'
 
-import { PageState, ConfDataContext, UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
 import DefaultLayout from '~/components/Layouts/Default'
+import { PageState, ConfDataContext, UserData } from '~/components/LaunchWeek/hooks/use-conf-data'
 import SectionContainer from '~/components/Layouts/SectionContainer'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/8/LaunchWeekLogoHeader'
+import { Meetup } from '~/components/LaunchWeek/8/LW8Meetups'
+import LW8CalloutsSection from '~/components/LaunchWeek/8/LW8CalloutsSection'
 
 import { useTheme } from 'common/Providers'
 
 import 'swiper/swiper.min.css'
-import Head from 'next/head'
 
 const AnimatedParticles = dynamic(
   () => import('~/components/LaunchWeek/8/AnimatedParticles/ParticlesCanvas')
 )
+const LW8Releases = dynamic(() => import('~/components/LaunchWeek/8/Releases'))
+const LW8Meetups = dynamic(() => import('~/components/LaunchWeek/8/LW8Meetups'))
 const TicketContainer = dynamic(() => import('~/components/LaunchWeek/8/Ticket/TicketContainer'))
 const LaunchWeekPrizeSection = dynamic(
   () => import('~/components/LaunchWeek/8/LaunchWeekPrizeSection')
@@ -29,6 +33,7 @@ const CTABanner = dynamic(() => import('~/components/CTABanner'))
 
 interface Props {
   users?: UserData[]
+  meetups?: Meetup[]
 }
 
 const supabaseAdmin = createClient(
@@ -39,7 +44,7 @@ const supabaseAdmin = createClient(
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9idWxkYW5ycHRsb2t0eGNmZnZuIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk3MjcwMTIsImV4cCI6MTk4NTMwMzAxMn0.SZLqryz_-stF8dgzeVXmzZWPOqdOrBwqJROlFES8v3I'
 )
 
-export default function TicketHome({ users }: Props) {
+export default function TicketHome({ users, meetups }: Props) {
   const { query } = useRouter()
 
   const TITLE = 'Supabase LaunchWeek 8'
@@ -63,7 +68,7 @@ export default function TicketHome({ users }: Props) {
   }
 
   const [userData, setUserData] = useState<UserData>(defaultUserData)
-  const [pageState, setPageState] = useState<PageState>('ticket')
+  const [_, setPageState] = useState<PageState>('ticket')
 
   useEffect(() => {
     if (!supabase) {
@@ -138,31 +143,48 @@ export default function TicketHome({ users }: Props) {
                     <LaunchWeekLogoHeader />
                   </div>
                   <div className="absolute inset-0 z-0">
-                    {supabase && <AnimatedParticles supabase={supabase} users={users} />}
+                    <AnimatedParticles />
                     <Image
                       src="/images/launchweek/8/stars.svg"
                       alt="starts background"
                       layout="fill"
                       objectFit="cover"
-                      className="opacity-70"
+                      className="opacity-70 pointer-events-none"
                       draggable={false}
                     />
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
-                  <Image
-                    src="/images/launchweek/8/LW8-gradient.png"
-                    layout="fill"
-                    objectFit="cover"
-                    objectPosition="top"
-                    priority
-                    draggable={false}
-                  />
-                </div>
+              </div>
+              <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <Image
+                  src="/images/launchweek/8/LW8-gradient.png"
+                  layout="fill"
+                  objectFit="cover"
+                  objectPosition="top"
+                  priority
+                  draggable={false}
+                />
               </div>
             </div>
 
-            <div className="relative !w-full max-w-[100vw] min-h-[400px] !px-4 sm:max-w-xl md:max-w-4xl lg:max-w-7xl z-20 flex flex-col justify-around items-center !py-4 md:!py-8 lg:!pb-0 gap-2 md:gap-4 !mx-auto">
+            <div id="twitter-spaces">
+              <SectionContainer className="!pb-0" id="hackathon">
+                <LW8CalloutsSection />
+              </SectionContainer>
+            </div>
+
+            <SectionContainer className="!pt-0">
+              <LW8Releases />
+            </SectionContainer>
+
+            <SectionContainer id="meetups" className="!pt-0">
+              <LW8Meetups meetups={meetups} />
+            </SectionContainer>
+
+            <div
+              id="ticket"
+              className="relative !w-full max-w-[100vw] min-h-[400px] !px-4 sm:max-w-xl md:max-w-4xl lg:max-w-7xl z-20 flex flex-col justify-around items-center !py-4 md:!py-8 lg:!pb-0 gap-2 md:gap-4 !mx-auto"
+            >
               {supabase && (
                 <div className="w-full max-w-[100vw] px-4 flex justify-center py-8 md:py-20">
                   <TicketContainer
@@ -173,8 +195,8 @@ export default function TicketHome({ users }: Props) {
                 </div>
               )}
             </div>
-            <SectionContainer className="!pt-8 !px-4 w-full">
-              <LaunchWeekPrizeSection className="" />
+            <SectionContainer className="!px-4 w-full">
+              <LaunchWeekPrizeSection />
             </SectionContainer>
             {users && <TicketBrickWall users={users.slice(0, 17)} />}
           </div>
@@ -185,15 +207,19 @@ export default function TicketHome({ users }: Props) {
   )
 }
 
-export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+export const getServerSideProps: GetServerSideProps = async () => {
   // fetch users for the TicketBrickWall
   const { data: users } = await supabaseAdmin!
     .from('lw8_tickets_golden')
-    .select('username, golden', { count: 'exact' })
+    .select('username, golden')
+    .limit(17)
+
+  const { data: meetups } = await supabaseAdmin!.from('lw8_meetups').select('*')
 
   return {
     props: {
       users,
+      meetups,
     },
   }
 }
diff --git a/apps/www/pages/launch-week/tickets/[username].tsx b/apps/www/pages/launch-week/tickets/[username].tsx
index 37808e679e4..0aa62979f24 100644
--- a/apps/www/pages/launch-week/tickets/[username].tsx
+++ b/apps/www/pages/launch-week/tickets/[username].tsx
@@ -114,7 +114,7 @@ export default function UsernamePage({ user, users, ogImageUrl }: Props) {
                     )}
                   </div>
                 </SectionContainer>
-                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+                <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
                   <Image
                     src="/images/launchweek/8/LW8-gradient.png"
                     layout="fill"
diff --git a/apps/www/pages/launch-week/tickets/index.tsx b/apps/www/pages/launch-week/tickets/index.tsx
index 6feffbfbc68..69c57824d72 100644
--- a/apps/www/pages/launch-week/tickets/index.tsx
+++ b/apps/www/pages/launch-week/tickets/index.tsx
@@ -154,7 +154,7 @@ export default function TicketsPage({ users }: Props) {
               />
             </div>
           </SectionContainer>
-          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0">
+          <div className="absolute w-full aspect-[1/1] md:aspect-[1.5/1] lg:aspect-[2.5/1] inset-0 z-0 pointer-events-none">
             <Image
               src="/images/launchweek/8/LW8-gradient.png"
               layout="fill"
diff --git a/apps/www/pages/legal/dpa.tsx b/apps/www/pages/legal/dpa.tsx
index 7814c69a208..3e8bd8429fd 100644
--- a/apps/www/pages/legal/dpa.tsx
+++ b/apps/www/pages/legal/dpa.tsx
@@ -52,7 +52,7 @@ const DPA = () => {
                 <p>You can download our latest DPA document by submitting your email here.</p>
 
                 {formSubmitted ? (
-                  <p className="text-brand-900">
+                  <p className="text-brand">
                     Thank you for your submission! A new tab should have opened with the DPA
                     document
                   </p>
diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx
index 1aac63bdcbe..49d24b55151 100644
--- a/apps/www/pages/open-source/index.tsx
+++ b/apps/www/pages/open-source/index.tsx
@@ -82,8 +82,8 @@ const OpenSource = () => {
                   {maintainerPills.map((x) => (
                     <li
                       key={x}
-                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-800 ${
-                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-800' : ''
+                      className={`mx-4 rounded-t-lg inline-block p-2 cursor-pointer hover:text-brand-300 ${
+                        activePill == x ? 'bg-gray-200 dark:bg-gray-400 text-brand-300' : ''
                       }`}
                       onClick={() => setActivePill(x)}
                     >
diff --git a/apps/www/pages/partners/experts/[slug].tsx b/apps/www/pages/partners/experts/[slug].tsx
index ffb5f8fe409..af94fef4e3c 100644
--- a/apps/www/pages/partners/experts/[slug].tsx
+++ b/apps/www/pages/partners/experts/[slug].tsx
@@ -160,7 +160,7 @@ function Partner({
                   <div className="flex items-center justify-between py-2">
                     <span className="text-scale-900">Category</span>
                     <Link href={`/partners/experts#${partner.category.toLowerCase()}`}>
-                      <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                      <a className="text-brand hover:text-brand-300 transition-colors">
                         {partner.category}
                       </a>
                     </Link>
@@ -172,7 +172,7 @@ function Partner({
                       href={partner.website}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-brand-900 hover:text-brand-800 transition-colors"
+                      className="text-brand hover:text-brand-300 transition-colors"
                     >
                       {new URL(partner.website).host}
                     </a>
@@ -185,7 +185,7 @@ function Partner({
                         href={partner.docs}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-300 transition-colors"
                       >
                         <span className="flex items-center space-x-1">
                           <span>Learn</span>
diff --git a/apps/www/pages/partners/experts/index.tsx b/apps/www/pages/partners/experts/index.tsx
index d1f152a074b..eef756d787e 100644
--- a/apps/www/pages/partners/experts/index.tsx
+++ b/apps/www/pages/partners/experts/index.tsx
@@ -78,11 +78,11 @@ function ExpertPartnersPage(props: Props) {
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"
-                          stroke-width="1"
+                          strokeWidth="1"
                         >
                           <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
                             d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
                           />
                         </svg>
@@ -100,11 +100,11 @@ function ExpertPartnersPage(props: Props) {
                           fill="none"
                           viewBox="0 0 24 24"
                           stroke="currentColor"
-                          stroke-width="1"
+                          strokeWidth="1"
                         >
                           <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
                             d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
                           />
                         </svg>
diff --git a/apps/www/pages/partners/integrations/[slug].tsx b/apps/www/pages/partners/integrations/[slug].tsx
index 95a87f58eba..76772b66469 100644
--- a/apps/www/pages/partners/integrations/[slug].tsx
+++ b/apps/www/pages/partners/integrations/[slug].tsx
@@ -201,7 +201,7 @@ function Partner({
                     <div className="flex items-center justify-between py-2">
                       <span className="text-scale-900">Category</span>
                       <Link href={`/partners/integrations#${partner.category.toLowerCase()}`}>
-                        <a className="text-brand-900 hover:text-brand-800 transition-colors">
+                        <a className="text-brand hover:text-brand-300 transition-colors">
                           {partner.category}
                         </a>
                       </Link>
@@ -213,7 +213,7 @@ function Partner({
                         href={partner.website}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 hover:text-brand-800 transition-colors"
+                        className="text-brand hover:text-brand-300 transition-colors"
                       >
                         {new URL(partner.website).host}
                       </a>
@@ -226,7 +226,7 @@ function Partner({
                           href={partner.docs}
                           target="_blank"
                           rel="noreferrer"
-                          className="text-brand-900 hover:text-brand-800 transition-colors"
+                          className="text-brand hover:text-brand-300 transition-colors"
                         >
                           <span className="flex items-center space-x-1">
                             <span>Learn</span>
diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx
index 8eba3c43e9b..eccd6d0ba2c 100644
--- a/apps/www/pages/partners/integrations/index.tsx
+++ b/apps/www/pages/partners/integrations/index.tsx
@@ -202,10 +202,10 @@ function IntegrationPartnersPage(props: Props) {
                     <a className="text-scale-1200">INTEGRATIONS</a>
                   </Link>
                   <Link href={`/partners/experts`}>
-                    <a className="transition-colors text-brand-900 hover:text-brand-800">EXPERTS</a>
+                    <a className="transition-colors text-brand hover:text-brand-300">EXPERTS</a>
                   </Link>
                   <Link href={`/partners/integrations#become-a-partner`}>
-                    <a className="flex items-center space-x-1 transition-colors text-brand-900 hover:text-brand-800">
+                    <a className="flex items-center space-x-1 transition-colors text-brand hover:text-brand-300">
                       BECOME A PARTNER <IconArrowRight />
                     </a>
                   </Link>
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index 3940e1b06e6..1cc52e0a397 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -104,7 +104,7 @@ export default function IndexPage() {
   }) => {
     return (
       <div className="mt-8 px-4 mobile-header">
-        <h2 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
+        <h2 className="gradient-text-brand-300 dark:gradient-text-brand-100 text-3xl font-medium uppercase font-mono">
           {plan}
         </h2>
         <div className="flex items-baseline gap-2">
@@ -150,7 +150,7 @@ export default function IndexPage() {
         <div className="relative z-10 py-16 lg:py-28">
           <div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
             <div className="mx-auto max-w-3xl space-y-2 lg:max-w-none">
-              <h1 className="text-brand-900 text-base">Pricing</h1>
+              <h1 className="text-brand text-base">Pricing</h1>
               <h2 className="h1">Predictable pricing, no surprises</h2>
               <p className="p text-lg">
                 Start building for free, collaborate with a team, then scale to millions of users
@@ -174,7 +174,7 @@ export default function IndexPage() {
                   key={`row-${plan.name}`}
                   className={[
                     plan.name === 'Pro'
-                      ? 'bg-brand-1100 dark:bg-brand-900 border px-0.5 -mt-8 rounded-[6px]'
+                      ? 'bg-brand-600 dark:bg-brand border px-0.5 -mt-8 rounded-[6px]'
                       : '',
                   ].join(' ')}
                 >
@@ -198,13 +198,13 @@ export default function IndexPage() {
                       <div className="mb-2 flex items-center gap-2">
                         <div className="flex items-center gap-2">
                           <h3
-                            className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-normal
+                            className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-normal
                            uppercase flex items-center gap-4 font-mono"
                           >
                             {plan.name}
                           </h3>
                           {plan.nameBadge && (
-                            <span className="bg-brand-500 text-brand-1100 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                            <span className="bg-brand-300 text-brand-600 rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                               {plan.nameBadge}
                             </span>
                           )}
@@ -249,7 +249,7 @@ export default function IndexPage() {
 
                               {plan.warning && (
                                 <p className="-mt-2">
-                                  <span className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                                  <span className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                                     {plan.warning}
                                   </span>
                                 </p>
@@ -273,7 +273,7 @@ export default function IndexPage() {
                         {plan.features.map((feature) => (
                           <li key={feature} className="flex items-center py-2 first:mt-0">
                             <IconCheck
-                              className="text-brand-900 h-4 w-4"
+                              className="text-brand h-4 w-4"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
@@ -308,7 +308,7 @@ export default function IndexPage() {
             <div className="flex flex-col justify-center lg:px-8">
               <div>
                 <h3
-                  className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-normal
+                  className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-normal
                            uppercase flex items-center gap-4 font-mono"
                 >
                   {planEnterprise.name}
@@ -331,11 +331,7 @@ export default function IndexPage() {
               >
                 {planEnterprise.features.map((feature) => (
                   <li key={feature} className="flex items-center py-2 first:mt-0">
-                    <IconCheck
-                      className="text-brand-900 h-4 w-4 "
-                      aria-hidden="true"
-                      strokeWidth={3}
-                    />
+                    <IconCheck className="text-brand h-4 w-4 " aria-hidden="true" strokeWidth={3} />
                     <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
                   </li>
                 ))}
@@ -407,7 +403,7 @@ export default function IndexPage() {
                     </Link>
                     {addon.name === 'Optimized Compute' ? (
                       <button
-                        className="text-brand-1000 text-[13px] leading-4 hover:underline "
+                        className="text-brand-600 text-[13px] leading-4 hover:underline "
                         onClick={() => setShowComputeModal(true)}
                       >
                         {addon.rightCtaText}
@@ -440,7 +436,7 @@ export default function IndexPage() {
           className="grid lg:grid-cols-2 gap-8 items-center mt-12 lg:mt-8 max-w-6xl mx-auto"
         >
           <div>
-            <span className="bg-brand-500 text-brand-1100 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
+            <span className="bg-brand-300 text-brand-600 rounded-md bg-opacity-30 inline-block  dark:bg-scale-400 dark:text-scale-1100 py-0.5 px-2 text-[13px] leading-4 mt-2">
               Available for Pro plan
             </span>
             <h2 className="text-scale-1200 text-4xl mt-4">Cost control with spend caps</h2>
@@ -735,7 +731,7 @@ export default function IndexPage() {
                         scope="col"
                         key={plan.name}
                       >
-                        <h3 className="gradient-text-brand-500 dark:gradient-text-brand-100 text-2xl font-mono font-normal uppercase flex items-center gap-4">
+                        <h3 className="gradient-text-brand-300 dark:gradient-text-brand-100 text-2xl font-mono font-normal uppercase flex items-center gap-4">
                           {plan.name}
                         </h3>
                         <div
@@ -796,7 +792,7 @@ export default function IndexPage() {
 
                             {plan.warning && (
                               <p className="-mt-2">
-                                <span className="bg-scale-100 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
+                                <span className="bg-scale-100 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-[13px] leading-4">
                                   {plan.warning}
                                 </span>
                               </p>
@@ -953,7 +949,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand-900 hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-600"
                 >
                   open a support ticket
                 </a>{' '}
@@ -964,7 +960,7 @@ export default function IndexPage() {
                 <a
                   target="_blank"
                   href="https://supabase.com/dashboard/support/new"
-                  className="transition text-brand-900 hover:text-brand-1000"
+                  className="transition text-brand hover:text-brand-600"
                 >
                   you can contact the team here
                 </a>
diff --git a/apps/www/pages/realtime/Realtime.tsx b/apps/www/pages/realtime/Realtime.tsx
index 24d82a4f836..062ed63e37e 100644
--- a/apps/www/pages/realtime/Realtime.tsx
+++ b/apps/www/pages/realtime/Realtime.tsx
@@ -66,7 +66,7 @@ function RealtimePage() {
             <div className="bg-scale-300 border-scale-500 relative flex h-[372px] w-[560px] items-center justify-center overflow-hidden rounded border drop-shadow-md">
               <div
                 className={[
-                  'border-brand-800 relative h-12 w-48 bg-[#34B27B]',
+                  'border-brand-300 relative h-12 w-48 bg-[#34B27B]',
                   `flex items-center justify-center ${RealtimeStyles['shape']}`,
                 ].join(' ')}
               >
diff --git a/apps/www/pages/support.tsx b/apps/www/pages/support.tsx
index 0ee2f30c399..5dd7c36e5e1 100644
--- a/apps/www/pages/support.tsx
+++ b/apps/www/pages/support.tsx
@@ -38,9 +38,7 @@ const Index = ({}: Props) => {
         <Container>
           <SectionContainer className="">
             <div className="space-y-2 text-center">
-              <h1 className="text-brand-900 font-mono text-base uppercase tracking-widest">
-                Support
-              </h1>
+              <h1 className="text-brand font-mono text-base uppercase tracking-widest">Support</h1>
               <h1 className="h1">Get Support</h1>
               <p className="text-scale-1100 lg:text-lg">
                 The Supabase Support Team is ready to help.
@@ -64,8 +62,8 @@ const Index = ({}: Props) => {
                         our GitHub issues. This can be feature requests too!
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 font-bold">Use this for:</span> Bugs and
-                        other issues
+                        <span className="text-brand font-bold">Use this for:</span> Bugs and other
+                        issues
                       </p>
                     </p>
                   </div>
@@ -112,8 +110,8 @@ const Index = ({}: Props) => {
                         join us on Discord. Browse and ask questions.
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 text-sm font-bold">Use this for:</span>{' '}
-                        General questions
+                        <span className="text-brand text-sm font-bold">Use this for:</span> General
+                        questions
                       </p>
                     </p>
                   </div>
@@ -183,8 +181,8 @@ const Index = ({}: Props) => {
                         or have an issue, please contact us here.
                       </p>
                       <p className="text-scale-1100 mt-2 text-sm">
-                        <span className="text-brand-900 text-sm font-bold">Use this for:</span>{' '}
-                        Issues or questions specific to you
+                        <span className="text-brand text-sm font-bold">Use this for:</span> Issues
+                        or questions specific to you
                       </p>
                     </p>
                   </div>
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/email-auth.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/email-auth.png
new file mode 100644
index 00000000000..77c4dbc3f6f
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/email-auth.png differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/files-page.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/files-page.png
new file mode 100644
index 00000000000..400c4638c82
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/files-page.png differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/login-page.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/login-page.png
new file mode 100644
index 00000000000..191a3c391f8
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/login-page.png differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/new-bucket.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/new-bucket.png
new file mode 100644
index 00000000000..7c036bdc399
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/new-bucket.png differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/new-project.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/new-project.png
new file mode 100644
index 00000000000..7207bca170d
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/new-project.png differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/react-native-storage.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/react-native-storage.png
new file mode 100644
index 00000000000..452144f645a
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/react-native-storage.png differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/supabase-file-upload-react-native.gif b/apps/www/public/images/blog/2023-08-01-react-native-storage/supabase-file-upload-react-native.gif
new file mode 100644
index 00000000000..27b87cba44b
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/supabase-file-upload-react-native.gif differ
diff --git a/apps/www/public/images/blog/2023-08-01-react-native-storage/supabase-storage-files.png b/apps/www/public/images/blog/2023-08-01-react-native-storage/supabase-storage-files.png
new file mode 100644
index 00000000000..8ef9944ab74
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-01-react-native-storage/supabase-storage-files.png differ
diff --git a/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png b/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png
new file mode 100644
index 00000000000..1b75bf3f003
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-02-july-2023-beta-update/july-2023-beta-update.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-dark.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-dark.png
new file mode 100644
index 00000000000..9ea85c5ce48
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-dark.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-light.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-light.png
new file mode 100644
index 00000000000..09b078324d5
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/dot-product-light.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-og.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-og.png
new file mode 100644
index 00000000000..88d980a8f4d
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-og.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-thumb.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-thumb.png
new file mode 100644
index 00000000000..81cc454cb53
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/fewer-dimensions-thumb.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-dark.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-dark.png
new file mode 100644
index 00000000000..92934874ecd
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-dark.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-light.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-light.png
new file mode 100644
index 00000000000..04082a44735
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-98-light.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-dark.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-dark.png
new file mode 100644
index 00000000000..3b5512cb47e
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-dark.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-light.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-light.png
new file mode 100644
index 00000000000..93aa8b8ab7a
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-99-light.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-dark.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-dark.png
new file mode 100644
index 00000000000..f368b6adbee
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-dark.png differ
diff --git a/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-light.png b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-light.png
new file mode 100644
index 00000000000..3c55592a012
Binary files /dev/null and b/apps/www/public/images/blog/2023-08-03-fewer-dimensions-are-better-pgvector/performance-comparison-gte-small-99-light.png differ
diff --git a/apps/www/public/images/blog/lw8-constellation-breakdown/01-x-sine.gif b/apps/www/public/images/blog/lw8-constellation-breakdown/01-x-sine.gif
new file mode 100644
index 00000000000..771d9788284
Binary files /dev/null and b/apps/www/public/images/blog/lw8-constellation-breakdown/01-x-sine.gif differ
diff --git a/apps/www/public/images/blog/lw8-constellation-breakdown/02-circle.gif b/apps/www/public/images/blog/lw8-constellation-breakdown/02-circle.gif
new file mode 100644
index 00000000000..c6067882681
Binary files /dev/null and b/apps/www/public/images/blog/lw8-constellation-breakdown/02-circle.gif differ
diff --git a/apps/www/public/images/blog/lw8-constellation-breakdown/03-eight.gif b/apps/www/public/images/blog/lw8-constellation-breakdown/03-eight.gif
new file mode 100644
index 00000000000..d7192c20b01
Binary files /dev/null and b/apps/www/public/images/blog/lw8-constellation-breakdown/03-eight.gif differ
diff --git a/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-constellation-breakdown-og.png b/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-constellation-breakdown-og.png
new file mode 100644
index 00000000000..ea50db707ad
Binary files /dev/null and b/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-constellation-breakdown-og.png differ
diff --git a/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-constellation-gui-demo.png b/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-constellation-gui-demo.png
new file mode 100644
index 00000000000..707c4bb5374
Binary files /dev/null and b/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-constellation-gui-demo.png differ
diff --git a/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-early-design.png b/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-early-design.png
new file mode 100644
index 00000000000..3abf1d2ead6
Binary files /dev/null and b/apps/www/public/images/blog/lw8-constellation-breakdown/lw8-early-design.png differ
diff --git a/apps/www/public/images/blog/remote/og.jpg b/apps/www/public/images/blog/remote/og.jpg
new file mode 100644
index 00000000000..4d4056c76e8
Binary files /dev/null and b/apps/www/public/images/blog/remote/og.jpg differ
diff --git a/apps/www/public/images/blog/remote/thumb.jpg b/apps/www/public/images/blog/remote/thumb.jpg
new file mode 100644
index 00000000000..edb1ac26bce
Binary files /dev/null and b/apps/www/public/images/blog/remote/thumb.jpg differ
diff --git a/apps/www/public/images/launchweek/8/day0/constellation-pre.svg b/apps/www/public/images/launchweek/8/day0/constellation-pre.svg
new file mode 100644
index 00000000000..a2dd6347fc7
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/day0/constellation-pre.svg
@@ -0,0 +1,443 @@
+<svg width="835" height="398" viewBox="0 0 835 398" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2967_54165)">
+<g filter="url(#filter0_f_2967_54165)">
+<path d="M588.894 101.55C616.391 157.692 587.112 209.848 472.518 265.974C357.924 322.099 207.466 327.016 179.969 270.874C152.472 214.732 139.156 163.586 358.489 156.39C472.984 169.094 561.397 45.4087 588.894 101.55Z" fill="#7032BF" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter1_f_2967_54165)">
+<path d="M348.639 243.11C338.689 268.009 313.673 273.698 262.851 253.389C212.029 233.079 167.181 186.628 177.131 161.729C187.081 136.831 199.521 117.88 264.909 185.587C293.806 225.666 358.589 218.211 348.639 243.11Z" fill="#080316" fill-opacity="0.7"/>
+</g>
+<g filter="url(#filter2_f_2967_54165)">
+<path d="M391.124 260.47C389.317 287.222 367.265 300.332 312.659 296.642C258.054 292.952 201.091 262.55 202.898 235.798C204.706 209.046 210.713 187.188 293.759 231.495C333.584 260.741 392.932 233.718 391.124 260.47Z" fill="#0B84AD" fill-opacity="0.12"/>
+</g>
+<rect x="0.261875" y="0.261875" width="226.888" height="453.663" transform="matrix(4.37114e-08 1 1 -4.37114e-08 160.313 85.3867)" stroke="#CB3FF9" stroke-opacity="0.7" stroke-width="0.523751"/>
+<rect x="-0.261875" y="-0.261875" width="6.56525" height="6.56525" transform="matrix(4.37117e-08 1 1 -4.37111e-08 158.07 82.4727)" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<path d="M157.808 310.156L157.808 309.894L158.07 309.894L164.112 309.894L164.374 309.894L164.374 310.156L164.374 316.198L164.374 316.46L164.112 316.46L158.07 316.46L157.808 316.46L157.808 316.198L157.808 310.156Z" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<rect x="-0.261875" y="-0.261875" width="6.56525" height="6.56525" transform="matrix(4.37114e-08 1 1 -4.37114e-08 610.789 82.3672)" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<rect x="-0.261875" y="-0.261875" width="6.56525" height="6.56525" transform="matrix(4.37115e-08 1 1 -4.37113e-08 611.477 310.234)" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 385.66 236.883)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 397.066 238.961)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619869 0.784706 0.784706 0.619869 349.254 277.785)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 476.062 248.477)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 407.441 235.844)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619869 0.784706 0.784706 0.619869 330.789 262.684)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619865 0.784708 0.784703 0.619872 368.629 246.824)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 375.289 229.621)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 379.43 227.547)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 392.91 223.395)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 388.77 215.098)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 408.477 210.949)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 419.887 220.285)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 442.703 209.914)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 438.559 201.617)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 428.184 191.246)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 410.715 181.043)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 451.168 181.043)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 423.168 166.527)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 442.875 171.711)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 438.723 196.605)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 432.336 189.168)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 448.062 195.57)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 464.66 189.348)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 460.508 171.711)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 448.062 165.492)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 443.91 156.152)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 466.727 161.336)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 456.359 161.336)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 441.832 182.082)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 454.285 146.816)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 452.215 158.223)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 442.875 145.785)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 434.578 146.816)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 434.578 138.52)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 437.684 136.445)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 460.508 135.406)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 445.988 141.633)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 515.227 68.7812)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 496.559 67.75)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 434.578 129.188)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 493.445 73.9727)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 416.887 111.5)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 408.645 118.812)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 449.098 184.16)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 454.285 187.273)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 440.633 190.211)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 434.414 205.77)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619869 0.784706 0.784706 0.619869 326.16 293.184)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 240.211 234.988)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 248.504 233.945)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74207e-08 -8.74249e-08 -1 309.59 212.684)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 248.504 242.25)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74207e-08 -8.74249e-08 -1 245.406 244.324)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 308.551 241.723)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74207e-08 -8.74249e-08 -1 248.504 251.578)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 311.66 235.504)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 315.809 241.723)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 325.145 245.875)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74207e-08 -8.74249e-08 -1 332.406 224.094)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.619869 -0.784706 -0.784706 -0.619869 298.641 290.82)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74207e-08 -8.74249e-08 -1 333.445 235.504)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 275.219 224.258)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74207e-08 -8.74249e-08 -1 291.066 245.102)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74238e-08 -8.74217e-08 -1 344.102 202.527)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 338.91 199.422)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 242.164 126.59)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 362.77 164.156)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 344.102 166.234)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 621.645 12.8359)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74228e-08 -8.74228e-08 -1 577.047 18.7383)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 276.777 190.555)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 335.75 201.348)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 283.645 189.426)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 303.781 189.219)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 281.031 196.441)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 232.445 222.508)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 371.77 157.355)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586278 0.81011 0.810115 -0.586271 371.254 151.336)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 352.816 154.172)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586276 0.810111 0.810114 -0.586273 444.426 85.043)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 349.703 178.035)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586278 0.81011 0.810115 -0.586271 353.852 172.844)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 336.223 173.879)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586278 0.81011 0.810115 -0.586271 373.559 183.223)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 416.195 124.34)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 251.918 178.848)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 331.027 162.473)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586273 0.810114 0.810111 -0.586276 318.305 100.016)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586276 0.810111 0.810114 -0.586273 438.801 82.7969)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586276 0.810111 0.810114 -0.586273 426.172 68.8906)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 415.023 162.207)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 415.527 70.5195)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 423.957 63.1211)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 420.738 75.1445)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 411.676 74.6719)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 373.195 140.82)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258817 0.965926 0.965925 0.258821 370.078 144.969)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 354.527 144.969)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 382.23 152.66)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 505.715 93.7266)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 543.855 56.9766)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 556.301 51.7891)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 527.371 93.082)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 502.801 62.6797)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258817 0.965926 0.965925 0.258821 409.047 190.402)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619865 0.784708 0.784703 0.619872 365.066 247.984)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 378.395 207.836)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 420.926 202.656)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619869 0.784706 0.784706 0.619869 324.617 283.828)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 340.188 246.398)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619869 0.784706 0.784706 0.619869 265.855 319.875)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 341.223 239.133)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.619869 0.784706 0.784706 0.619869 318.109 303.797)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.895443" cy="0.895443" r="0.895443" transform="matrix(-1 0 0 1 476.707 218.992)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 178.207 351.977)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 293.621 222.293)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 223.758 240.25)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965925 0.258822 0.258817 -0.965926 330.738 214.559)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 313.699 209.992)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 305.09 203.293)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 361.73 184.895)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 365.547 188.09)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 358.137 179.656)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965925 0.258822 0.258817 -0.965926 346.234 183.996)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 354.039 198.961)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 355.117 194.957)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965925 0.258822 0.258817 -0.965926 327.098 236.129)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 321.309 221.695)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801844 -0.597533 -0.597533 -0.801844 319.941 294.457)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 311.895 301.312)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 263.645 347.035)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965925 0.258822 0.258817 -0.965926 323.383 217.957)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 237.836 301.473)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 337.91 251.914)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 311.055 247.941)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 361.391 265.805)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 359.488 313.699)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 250.582 233.945)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(1 -8.74217e-08 -8.74238e-08 -1 299.609 223.773)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.586274 0.810113 0.810113 -0.586274 354.891 155.211)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 491.305 123.742)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 353.484 147.039)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 391.582 103.258)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 501.973 72.0703)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.258819 0.965926 0.965926 0.258819 596.883 45.9648)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-1 0 0 1 329.812 238.098)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 364.508 190.164)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 269.344 317.594)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 375.113 234.656)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.356625 -0.934248 -0.934248 0.356625 380.227 349.438)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 257.855 353.223)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.801849 -0.597527 -0.59754 -0.801839 248.352 281.141)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 399.312 225.938)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 397.512 237.062)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 421.176 232.32)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 413.547 236.723)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 448.492 238.566)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258817 0.258822 -0.965925 439.746 235.152)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.965926 0.258819 0.258819 -0.965926 435.613 226.527)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.895443" cy="0.895443" r="0.895443" transform="matrix(0.965925 0.258821 0.258817 -0.965926 375.422 201.934)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.895443" cy="0.895443" r="0.895443" transform="matrix(0.965926 0.258817 0.258821 -0.965925 280.859 236.672)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.895443" cy="0.895443" r="0.895443" transform="matrix(0.965925 0.258821 0.258817 -0.965926 309.348 191.68)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.895443" cy="0.895443" r="0.895443" transform="matrix(0.965925 0.258821 0.258817 -0.965926 318.402 200.512)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613842 -0.998114 -0.997411 0.0719186 395.371 299.418)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613835 -0.998114 -0.99741 0.0719194 397.812 317.898)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613835 -0.998114 -0.99741 0.0719194 389.289 306.645)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613835 -0.998114 -0.99741 0.0719194 411.277 303.367)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613835 -0.998114 -0.99741 0.0719194 396.949 273.375)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613835 -0.998114 -0.99741 0.0719194 404.32 296.234)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.821274 -0.570534 -0.561826 0.827255 268.27 293.363)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613829 -0.998114 -0.99741 0.0719202 371.648 241.102)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613836 -0.998114 -0.99741 0.0719194 401.316 259.496)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.873076 0.487585 0.787549 0.616252 415.828 185.652)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.873078 0.487581 0.787552 0.616248 429.848 184.289)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.873076 0.487585 0.787549 0.616252 417.586 191.141)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.873078 0.487581 0.787552 0.616248 410.117 193.461)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.873077 0.487582 0.787551 0.616249 472.789 181.23)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.873077 0.487582 0.787551 0.616249 479.496 184.137)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 506.297 215.473)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 506.422 208.059)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322553 0.946551 527.848 195.484)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100399 -0.322552 0.946552 501.688 194.836)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 500.922 182.164)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 434.418 247.105)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 416.945 134.176)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100399 -0.322552 0.946552 435.613 116.543)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.1004 -0.322549 0.946553 428.348 105.133)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322553 0.946551 558.824 245.945)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322553 0.946551 565.957 255.609)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 471.695 322.355)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 511.031 242.906)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.821274 -0.570534 -0.561826 0.827255 293.996 277.117)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613836 -0.998114 -0.99741 0.0719194 414.371 129.477)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613829 -0.998114 -0.99741 0.0719202 414.949 138.762)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(-0.0613822 -0.998114 -0.99741 0.071921 320.355 188.062)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322551 0.946552 0.994947 0.100399 478.191 94.0078)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322552 0.946552 0.994947 0.100399 387.461 188.008)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322552 0.946552 0.994947 0.100399 400.461 196.344)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322555 0.946551 0.994947 0.100398 447.957 207.344)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322552 0.946552 0.994947 0.100399 471.176 188.238)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322555 0.946551 0.994947 0.100398 452.121 191.266)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322555 0.946551 0.994947 0.100398 328.27 191.172)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.32255 0.946553 0.994947 0.1004 251.891 188.688)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322546 0.946554 0.994947 0.100401 283.398 224.488)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.542822 0.839848 0.695519 -0.718508 319.191 261.352)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.542822 0.839848 0.695519 -0.718508 322.281 262.465)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322552 0.946552 0.994947 0.100399 329.129 220.852)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.542822 0.839848 0.695519 -0.718508 311.016 290.816)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.32255 0.946553 0.994947 0.1004 254.598 271.105)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777689" cy="0.777941" rx="0.777689" ry="0.777941" transform="matrix(0.0613837 0.998114 0.99741 -0.0719194 382.016 194.566)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322553 0.946551 561.125 145.941)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322553 0.946551 416.945 59.4922)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.994947 -0.100398 -0.322555 0.946551 508.375 242.25)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(-0.322552 0.946552 0.994947 0.100399 445.301 206.695)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777941" cy="0.777941" rx="0.777941" ry="0.777941" transform="matrix(0.951011 -0.309158 -0.561018 -0.827804 443.504 61.1875)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.777941" cy="0.777941" rx="0.777941" ry="0.777941" transform="matrix(0.95101 -0.30916 -0.561016 -0.827805 265.129 226.773)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.958828 0.283988 0.613704 -0.789536 277.863 248.402)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.777941" cy="0.777941" r="0.777941" transform="matrix(0.958827 0.283991 0.6137 -0.789539 397.938 35.7461)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258817 -0.258821 0.965925 384.617 233.137)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.00754667 0.999972 0.999972 0.00754652 489.035 223.578)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258818 -0.25882 0.965926 494.922 98.3828)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258817 -0.258821 0.965925 310.113 194.934)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258819 -0.258819 0.965926 362.25 174.414)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965925 -0.258821 -0.258817 0.965926 269.066 245.648)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965925 -0.258823 -0.258815 0.965927 179.352 375.406)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258817 -0.258821 0.965925 335.867 250.906)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258819 -0.258819 0.965926 397.469 232.645)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258817 -0.258821 0.965925 456.766 147.766)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258817 -0.258821 0.965925 451.578 162.285)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.965926 -0.258817 -0.258821 0.965925 441.207 153.992)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.0075466 0.999972 0.999972 0.0075466 360.039 113.793)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.866027 0.499997 0.500003 -0.866024 335.047 227.664)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266101 -0.963945 -0.963945 -0.266101 311.148 206.645)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(-0.591465 -0.806331 -0.806331 0.591465 291.262 257.77)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266099 -0.963946 -0.963945 -0.266103 422.508 75.0586)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266099 -0.963946 -0.963945 -0.266103 367.5 155.887)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266103 -0.963945 -0.963946 -0.266099 516.711 135.648)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266099 -0.963946 -0.963945 -0.266103 432.492 130.605)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266099 -0.963946 -0.963945 -0.266103 459.73 114.57)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266101 -0.963945 -0.963945 -0.266101 434.887 188.836)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266101 -0.963945 -0.963945 -0.266101 536.098 50.1602)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266103 -0.963945 -0.963946 -0.266099 521.754 119.957)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266099 -0.963946 -0.963945 -0.266103 417.395 202.492)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266101 -0.963945 -0.963945 -0.266101 396.648 218.051)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266101 -0.963945 -0.963945 -0.266101 207.965 368.273)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266099 -0.963946 -0.963945 -0.266103 386.754 224.258)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.866024 0.500003 0.499997 -0.866027 320.938 228.793)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.866025 0.5 0.5 -0.866025 526.32 239.785)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.866029 0.499995 0.500006 -0.866022 312.027 278.125)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.866025 0.5 0.5 -0.866025 363.105 260.141)" fill="#FFFFF9"/>
+<circle cx="0.933529" cy="0.933529" r="0.933529" transform="matrix(0.266101 -0.963945 -0.963945 -0.266101 310.461 217.797)" fill="#FFFFF9"/>
+<g filter="url(#filter3_b_2967_54165)">
+<rect x="431.773" y="145.008" width="263.922" height="31.6513" rx="8" fill="url(#paint0_linear_2967_54165)"/>
+<path d="M453.626 159.832C453.548 159.593 453.445 159.379 453.317 159.189C453.191 158.998 453.041 158.834 452.866 158.699C452.693 158.564 452.496 158.461 452.276 158.39C452.056 158.319 451.815 158.284 451.552 158.284C451.121 158.284 450.729 158.395 450.376 158.618C450.024 158.84 449.743 159.168 449.535 159.601C449.326 160.034 449.222 160.566 449.222 161.196C449.222 161.825 449.328 162.357 449.538 162.79C449.749 163.223 450.034 163.551 450.394 163.774C450.754 163.996 451.159 164.108 451.609 164.108C452.025 164.108 452.392 164.019 452.71 163.841C453.029 163.661 453.278 163.408 453.455 163.081C453.635 162.752 453.725 162.365 453.725 161.92L453.995 161.977H451.808V161.196H454.577V161.977C454.577 162.576 454.45 163.097 454.194 163.539C453.941 163.982 453.59 164.325 453.143 164.569C452.698 164.811 452.186 164.931 451.609 164.931C450.965 164.931 450.399 164.78 449.911 164.477C449.426 164.174 449.047 163.743 448.775 163.184C448.505 162.626 448.37 161.963 448.37 161.196C448.37 160.62 448.447 160.103 448.601 159.644C448.757 159.182 448.977 158.789 449.261 158.465C449.545 158.141 449.882 157.892 450.27 157.719C450.658 157.546 451.085 157.46 451.552 157.46C451.935 157.46 452.293 157.518 452.624 157.634C452.958 157.748 453.255 157.91 453.516 158.12C453.778 158.329 453.997 158.578 454.173 158.87C454.348 159.158 454.469 159.479 454.535 159.832H453.626ZM458.188 164.946C457.696 164.946 457.264 164.828 456.892 164.594C456.523 164.36 456.234 164.032 456.025 163.61C455.819 163.189 455.716 162.697 455.716 162.133C455.716 161.565 455.819 161.069 456.025 160.645C456.234 160.221 456.523 159.892 456.892 159.658C457.264 159.424 457.696 159.306 458.188 159.306C458.68 159.306 459.111 159.424 459.481 159.658C459.852 159.892 460.141 160.221 460.347 160.645C460.555 161.069 460.66 161.565 460.66 162.133C460.66 162.697 460.555 163.189 460.347 163.61C460.141 164.032 459.852 164.36 459.481 164.594C459.111 164.828 458.68 164.946 458.188 164.946ZM458.188 164.193C458.562 164.193 458.87 164.097 459.111 163.905C459.353 163.713 459.532 163.461 459.648 163.149C459.764 162.836 459.822 162.498 459.822 162.133C459.822 161.769 459.764 161.429 459.648 161.114C459.532 160.799 459.353 160.545 459.111 160.35C458.87 160.156 458.562 160.059 458.188 160.059C457.814 160.059 457.506 160.156 457.265 160.35C457.023 160.545 456.845 160.799 456.729 161.114C456.613 161.429 456.555 161.769 456.555 162.133C456.555 162.498 456.613 162.836 456.729 163.149C456.845 163.461 457.023 163.713 457.265 163.905C457.506 164.097 457.814 164.193 458.188 164.193ZM462.777 157.559V164.832H461.939V157.559H462.777ZM466.372 164.946C465.917 164.946 465.516 164.831 465.168 164.601C464.82 164.369 464.548 164.042 464.351 163.621C464.155 163.197 464.056 162.697 464.056 162.119C464.056 161.546 464.155 161.049 464.351 160.627C464.548 160.206 464.821 159.881 465.171 159.651C465.522 159.421 465.927 159.306 466.386 159.306C466.741 159.306 467.021 159.366 467.227 159.484C467.436 159.6 467.594 159.733 467.703 159.882C467.815 160.029 467.901 160.149 467.963 160.244H468.034V157.559H468.872V164.832H468.062V163.994H467.963C467.901 164.093 467.813 164.219 467.7 164.37C467.586 164.52 467.424 164.653 467.213 164.772C467.003 164.888 466.722 164.946 466.372 164.946ZM466.485 164.193C466.821 164.193 467.106 164.105 467.338 163.93C467.57 163.752 467.746 163.507 467.867 163.195C467.987 162.88 468.048 162.517 468.048 162.105C468.048 161.698 467.989 161.341 467.87 161.036C467.752 160.728 467.577 160.489 467.345 160.319C467.113 160.146 466.826 160.059 466.485 160.059C466.13 160.059 465.834 160.15 465.597 160.333C465.363 160.513 465.187 160.758 465.068 161.068C464.952 161.376 464.894 161.721 464.894 162.105C464.894 162.493 464.954 162.846 465.072 163.163C465.193 163.478 465.37 163.729 465.605 163.916C465.841 164.1 466.135 164.193 466.485 164.193ZM473.449 164.832V157.559H475.906C476.477 157.559 476.943 157.662 477.306 157.868C477.67 158.072 477.94 158.348 478.115 158.696C478.29 159.044 478.378 159.432 478.378 159.86C478.378 160.289 478.29 160.678 478.115 161.029C477.942 161.379 477.675 161.658 477.313 161.867C476.95 162.073 476.486 162.176 475.921 162.176H474.159V161.395H475.892C476.283 161.395 476.597 161.327 476.833 161.192C477.07 161.057 477.242 160.875 477.348 160.645C477.457 160.413 477.512 160.152 477.512 159.86C477.512 159.569 477.457 159.309 477.348 159.079C477.242 158.85 477.069 158.67 476.83 158.539C476.591 158.407 476.273 158.341 475.878 158.341H474.33V164.832H473.449ZM481.288 164.96C480.943 164.96 480.629 164.895 480.347 164.765C480.065 164.632 479.842 164.441 479.676 164.193C479.51 163.942 479.427 163.639 479.427 163.284C479.427 162.971 479.489 162.718 479.612 162.524C479.735 162.327 479.9 162.173 480.106 162.062C480.312 161.951 480.539 161.868 480.787 161.814C481.038 161.757 481.291 161.712 481.544 161.679C481.875 161.636 482.144 161.604 482.35 161.583C482.558 161.559 482.71 161.52 482.805 161.466C482.902 161.411 482.95 161.316 482.95 161.181V161.153C482.95 160.803 482.854 160.53 482.662 160.336C482.473 160.142 482.185 160.045 481.8 160.045C481.399 160.045 481.086 160.133 480.858 160.308C480.631 160.483 480.471 160.67 480.379 160.869L479.584 160.585C479.726 160.253 479.915 159.995 480.152 159.811C480.391 159.624 480.651 159.493 480.933 159.42C481.217 159.344 481.497 159.306 481.771 159.306C481.946 159.306 482.148 159.328 482.375 159.37C482.604 159.411 482.826 159.495 483.039 159.623C483.254 159.75 483.433 159.943 483.575 160.201C483.717 160.459 483.788 160.805 483.788 161.238V164.832H482.95V164.093H482.907C482.851 164.212 482.756 164.338 482.623 164.473C482.491 164.608 482.314 164.723 482.094 164.818C481.874 164.913 481.605 164.96 481.288 164.96ZM481.416 164.207C481.747 164.207 482.027 164.142 482.254 164.012C482.484 163.882 482.657 163.713 482.773 163.507C482.891 163.301 482.95 163.085 482.95 162.858V162.091C482.915 162.133 482.836 162.172 482.716 162.208C482.597 162.241 482.46 162.27 482.304 162.297C482.15 162.32 482 162.342 481.853 162.36C481.708 162.377 481.591 162.391 481.501 162.403C481.283 162.431 481.08 162.478 480.89 162.542C480.703 162.603 480.552 162.697 480.436 162.822C480.322 162.945 480.265 163.113 480.265 163.326C480.265 163.618 480.373 163.838 480.589 163.987C480.806 164.134 481.082 164.207 481.416 164.207ZM485.318 164.832V159.377H486.127V160.201H486.184C486.284 159.931 486.464 159.712 486.724 159.544C486.984 159.376 487.278 159.292 487.605 159.292C487.666 159.292 487.743 159.293 487.836 159.296C487.928 159.298 487.998 159.302 488.045 159.306V160.159C488.017 160.152 487.952 160.141 487.85 160.127C487.75 160.11 487.645 160.102 487.534 160.102C487.269 160.102 487.032 160.158 486.824 160.269C486.618 160.378 486.454 160.529 486.333 160.723C486.215 160.915 486.156 161.134 486.156 161.38V164.832H485.318ZM491.752 159.377V160.088H488.926V159.377H491.752ZM489.75 158.071H490.588V163.27C490.588 163.506 490.622 163.684 490.691 163.802C490.762 163.918 490.852 163.996 490.961 164.037C491.072 164.074 491.189 164.093 491.312 164.093C491.404 164.093 491.48 164.089 491.539 164.079C491.599 164.067 491.646 164.058 491.681 164.051L491.852 164.804C491.795 164.825 491.716 164.846 491.614 164.868C491.512 164.891 491.383 164.903 491.227 164.903C490.99 164.903 490.758 164.852 490.531 164.75C490.306 164.649 490.119 164.493 489.97 164.285C489.823 164.077 489.75 163.814 489.75 163.497V158.071ZM493.013 164.832V159.377H493.851V164.832H493.013ZM493.439 158.468C493.276 158.468 493.135 158.413 493.017 158.301C492.901 158.19 492.843 158.056 492.843 157.9C492.843 157.744 492.901 157.61 493.017 157.499C493.135 157.388 493.276 157.332 493.439 157.332C493.603 157.332 493.742 157.388 493.858 157.499C493.977 157.61 494.036 157.744 494.036 157.9C494.036 158.056 493.977 158.19 493.858 158.301C493.742 158.413 493.603 158.468 493.439 158.468ZM497.602 164.946C497.091 164.946 496.65 164.825 496.281 164.583C495.912 164.342 495.628 164.009 495.429 163.586C495.23 163.162 495.131 162.678 495.131 162.133C495.131 161.579 495.232 161.09 495.436 160.667C495.642 160.24 495.928 159.908 496.295 159.669C496.665 159.427 497.095 159.306 497.588 159.306C497.971 159.306 498.317 159.377 498.625 159.52C498.933 159.662 499.185 159.86 499.381 160.116C499.578 160.372 499.7 160.67 499.747 161.011H498.909C498.845 160.762 498.703 160.542 498.483 160.35C498.265 160.156 497.971 160.059 497.602 160.059C497.275 160.059 496.989 160.145 496.743 160.315C496.499 160.483 496.308 160.721 496.171 161.029C496.036 161.334 495.969 161.693 495.969 162.105C495.969 162.526 496.035 162.893 496.167 163.206C496.302 163.518 496.492 163.761 496.736 163.934C496.982 164.106 497.271 164.193 497.602 164.193C497.82 164.193 498.018 164.155 498.195 164.079C498.373 164.003 498.523 163.895 498.646 163.752C498.769 163.61 498.857 163.44 498.909 163.241H499.747C499.7 163.563 499.582 163.853 499.395 164.111C499.211 164.367 498.966 164.57 498.66 164.722C498.357 164.871 498.005 164.946 497.602 164.946ZM501.81 157.559V164.832H500.972V157.559H501.81ZM505.632 164.946C505.107 164.946 504.653 164.83 504.272 164.598C503.893 164.363 503.601 164.037 503.395 163.618C503.191 163.196 503.089 162.706 503.089 162.147C503.089 161.589 503.191 161.096 503.395 160.67C503.601 160.242 503.887 159.908 504.254 159.669C504.624 159.427 505.054 159.306 505.547 159.306C505.831 159.306 506.112 159.354 506.388 159.449C506.665 159.543 506.918 159.697 507.145 159.91C507.372 160.121 507.553 160.4 507.688 160.748C507.823 161.096 507.891 161.525 507.891 162.034V162.389H503.686V161.664H507.038C507.038 161.357 506.977 161.082 506.854 160.841C506.733 160.599 506.56 160.408 506.335 160.269C506.113 160.129 505.85 160.059 505.547 160.059C505.213 160.059 504.924 160.142 504.68 160.308C504.439 160.471 504.253 160.684 504.123 160.947C503.993 161.21 503.928 161.492 503.928 161.792V162.275C503.928 162.687 503.999 163.036 504.141 163.323C504.285 163.607 504.485 163.824 504.741 163.973C504.996 164.119 505.294 164.193 505.632 164.193C505.852 164.193 506.051 164.162 506.229 164.1C506.409 164.037 506.564 163.942 506.694 163.816C506.824 163.689 506.925 163.53 506.996 163.341L507.805 163.568C507.72 163.842 507.577 164.084 507.376 164.292C507.174 164.498 506.926 164.659 506.63 164.775C506.334 164.889 506.001 164.946 505.632 164.946ZM513.029 160.599L512.276 160.812C512.229 160.687 512.159 160.565 512.067 160.446C511.977 160.326 511.854 160.226 511.697 160.148C511.541 160.07 511.341 160.031 511.097 160.031C510.763 160.031 510.485 160.108 510.263 160.262C510.043 160.413 509.933 160.606 509.933 160.841C509.933 161.049 510.008 161.213 510.16 161.334C510.311 161.455 510.548 161.556 510.87 161.636L511.68 161.835C512.167 161.953 512.531 162.134 512.77 162.378C513.009 162.62 513.129 162.931 513.129 163.312C513.129 163.625 513.039 163.904 512.859 164.15C512.681 164.396 512.433 164.591 512.113 164.733C511.793 164.875 511.422 164.946 510.998 164.946C510.442 164.946 509.981 164.825 509.616 164.583C509.252 164.342 509.021 163.989 508.924 163.525L509.719 163.326C509.795 163.62 509.938 163.84 510.149 163.987C510.362 164.134 510.64 164.207 510.984 164.207C511.374 164.207 511.684 164.124 511.914 163.958C512.146 163.79 512.262 163.589 512.262 163.355C512.262 163.165 512.196 163.007 512.063 162.879C511.931 162.749 511.727 162.652 511.452 162.588L510.543 162.375C510.044 162.256 509.677 162.073 509.442 161.824C509.21 161.573 509.094 161.26 509.094 160.883C509.094 160.575 509.181 160.303 509.354 160.066C509.529 159.83 509.767 159.644 510.067 159.509C510.371 159.374 510.714 159.306 511.097 159.306C511.637 159.306 512.061 159.425 512.369 159.662C512.679 159.898 512.899 160.211 513.029 160.599ZM521.294 159.377C521.251 159.018 521.078 158.738 520.775 158.539C520.472 158.341 520.1 158.241 519.66 158.241C519.338 158.241 519.056 158.293 518.815 158.397C518.576 158.502 518.389 158.645 518.254 158.827C518.121 159.009 518.055 159.217 518.055 159.449C518.055 159.643 518.101 159.81 518.193 159.949C518.288 160.087 518.409 160.201 518.556 160.294C518.702 160.384 518.856 160.458 519.017 160.517C519.178 160.574 519.326 160.62 519.461 160.656L520.2 160.855C520.389 160.904 520.6 160.973 520.832 161.061C521.066 161.148 521.29 161.268 521.503 161.419C521.718 161.569 521.896 161.76 522.036 161.995C522.175 162.229 522.245 162.517 522.245 162.858C522.245 163.251 522.142 163.606 521.936 163.923C521.733 164.24 521.434 164.492 521.041 164.679C520.651 164.866 520.176 164.96 519.617 164.96C519.097 164.96 518.646 164.876 518.264 164.708C517.886 164.54 517.587 164.305 517.369 164.005C517.154 163.704 517.032 163.355 517.004 162.957H517.913C517.936 163.232 518.029 163.459 518.19 163.639C518.353 163.816 518.559 163.949 518.808 164.037C519.059 164.122 519.329 164.164 519.617 164.164C519.954 164.164 520.255 164.11 520.523 164.001C520.79 163.89 521.002 163.736 521.159 163.539C521.315 163.341 521.393 163.109 521.393 162.843C521.393 162.602 521.325 162.405 521.191 162.254C521.056 162.102 520.878 161.979 520.658 161.885C520.438 161.79 520.2 161.707 519.944 161.636L519.049 161.38C518.481 161.217 518.031 160.984 517.7 160.681C517.368 160.378 517.203 159.981 517.203 159.491C517.203 159.084 517.313 158.729 517.533 158.426C517.755 158.12 518.054 157.884 518.428 157.716C518.804 157.545 519.224 157.46 519.688 157.46C520.157 157.46 520.574 157.544 520.938 157.712C521.303 157.878 521.592 158.105 521.805 158.394C522.02 158.683 522.134 159.011 522.146 159.377H521.294ZM523.58 164.832V159.377H524.418V164.832H523.58ZM524.006 158.468C523.842 158.468 523.701 158.413 523.583 158.301C523.467 158.19 523.409 158.056 523.409 157.9C523.409 157.744 523.467 157.61 523.583 157.499C523.701 157.388 523.842 157.332 524.006 157.332C524.169 157.332 524.309 157.388 524.425 157.499C524.543 157.61 524.602 157.744 524.602 157.9C524.602 158.056 524.543 158.19 524.425 158.301C524.309 158.413 524.169 158.468 524.006 158.468ZM525.796 164.832V164.193L528.893 160.216V160.159H525.896V159.377H529.972V160.045L526.961 163.994V164.051H530.072V164.832H525.796ZM533.493 164.946C532.968 164.946 532.515 164.83 532.133 164.598C531.755 164.363 531.462 164.037 531.256 163.618C531.053 163.196 530.951 162.706 530.951 162.147C530.951 161.589 531.053 161.096 531.256 160.67C531.462 160.242 531.749 159.908 532.116 159.669C532.485 159.427 532.916 159.306 533.408 159.306C533.692 159.306 533.973 159.354 534.25 159.449C534.527 159.543 534.779 159.697 535.006 159.91C535.233 160.121 535.415 160.4 535.55 160.748C535.684 161.096 535.752 161.525 535.752 162.034V162.389H531.547V161.664H534.9C534.9 161.357 534.838 161.082 534.715 160.841C534.594 160.599 534.421 160.408 534.197 160.269C533.974 160.129 533.711 160.059 533.408 160.059C533.074 160.059 532.786 160.142 532.542 160.308C532.3 160.471 532.114 160.684 531.984 160.947C531.854 161.21 531.789 161.492 531.789 161.792V162.275C531.789 162.687 531.86 163.036 532.002 163.323C532.146 163.607 532.346 163.824 532.602 163.973C532.858 164.119 533.155 164.193 533.493 164.193C533.714 164.193 533.912 164.162 534.09 164.1C534.27 164.037 534.425 163.942 534.555 163.816C534.685 163.689 534.786 163.53 534.857 163.341L535.667 163.568C535.581 163.842 535.438 164.084 535.237 164.292C535.036 164.498 534.787 164.659 534.491 164.775C534.195 164.889 533.863 164.946 533.493 164.946Z" fill="white" fill-opacity="0.68"/>
+<g filter="url(#filter4_b_2967_54165)">
+<rect x="544.773" y="153.008" width="113.922" height="15.6513" rx="2.98" fill="url(#paint1_linear_2967_54165)"/>
+<rect x="545.023" y="153.258" width="113.422" height="15.1513" rx="2.73" stroke="url(#paint2_linear_2967_54165)" stroke-width="0.5"/>
+</g>
+<g opacity="0.8" filter="url(#filter5_b_2967_54165)">
+<rect x="544.773" y="153.008" width="10.3086" height="15.6513" rx="2.98" fill="url(#paint3_linear_2967_54165)"/>
+</g>
+<path d="M670.005 157.559V164.832H669.124V158.483H669.082L667.306 159.662V158.767L669.124 157.559H670.005ZM672.292 164.889C672.117 164.889 671.966 164.826 671.841 164.701C671.715 164.575 671.653 164.425 671.653 164.25C671.653 164.074 671.715 163.924 671.841 163.799C671.966 163.673 672.117 163.61 672.292 163.61C672.467 163.61 672.617 163.673 672.743 163.799C672.868 163.924 672.931 164.074 672.931 164.25C672.931 164.366 672.902 164.472 672.842 164.569C672.786 164.666 672.709 164.744 672.612 164.804C672.517 164.86 672.41 164.889 672.292 164.889ZM676.547 164.931C676.13 164.931 675.755 164.849 675.421 164.683C675.088 164.517 674.82 164.29 674.619 164.001C674.418 163.712 674.307 163.383 674.289 163.014H675.141C675.174 163.343 675.323 163.615 675.588 163.831C675.856 164.044 676.175 164.15 676.547 164.15C676.845 164.15 677.11 164.08 677.343 163.941C677.577 163.801 677.76 163.609 677.893 163.365C678.028 163.119 678.095 162.841 678.095 162.531C678.095 162.214 678.026 161.931 677.886 161.682C677.749 161.431 677.559 161.234 677.318 161.089C677.076 160.945 676.8 160.871 676.49 160.869C676.268 160.867 676.039 160.901 675.805 160.972C675.57 161.041 675.378 161.129 675.226 161.238L674.402 161.139L674.843 157.559H678.621V158.341H675.581L675.325 160.485H675.368C675.517 160.367 675.704 160.269 675.929 160.191C676.154 160.113 676.388 160.074 676.632 160.074C677.077 160.074 677.474 160.18 677.822 160.393C678.172 160.604 678.447 160.893 678.646 161.26C678.847 161.627 678.948 162.046 678.948 162.517C678.948 162.981 678.843 163.395 678.635 163.76C678.429 164.122 678.145 164.408 677.783 164.619C677.421 164.827 677.009 164.931 676.547 164.931Z" fill="white" fill-opacity="0.68"/>
+<rect x="432.023" y="145.258" width="263.422" height="31.1513" rx="7.75" stroke="url(#paint4_linear_2967_54165)" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter6_b_2967_54165)">
+<rect x="431.773" y="185.66" width="263.922" height="31.6513" rx="8" fill="url(#paint5_linear_2967_54165)"/>
+<path d="M448.654 198.212H449.705L452.177 204.249H452.262L454.734 198.212H455.785V205.484H454.961V199.959H454.89L452.617 205.484H451.822L449.549 199.959H449.478V205.484H448.654V198.212ZM459.042 205.612C458.696 205.612 458.383 205.547 458.101 205.417C457.819 205.284 457.596 205.094 457.43 204.845C457.264 204.594 457.181 204.291 457.181 203.936C457.181 203.624 457.243 203.37 457.366 203.176C457.489 202.98 457.654 202.826 457.86 202.714C458.066 202.603 458.293 202.52 458.541 202.466C458.792 202.409 459.044 202.364 459.298 202.331C459.629 202.288 459.898 202.256 460.104 202.235C460.312 202.211 460.464 202.172 460.558 202.118C460.655 202.063 460.704 201.969 460.704 201.834V201.805C460.704 201.455 460.608 201.183 460.416 200.989C460.227 200.795 459.939 200.697 459.553 200.697C459.153 200.697 458.84 200.785 458.612 200.96C458.385 201.135 458.225 201.322 458.133 201.521L457.338 201.237C457.48 200.906 457.669 200.648 457.906 200.463C458.145 200.276 458.405 200.146 458.687 200.072C458.971 199.997 459.25 199.959 459.525 199.959C459.7 199.959 459.901 199.98 460.129 200.023C460.358 200.063 460.58 200.147 460.793 200.275C461.008 200.403 461.187 200.596 461.329 200.854C461.471 201.112 461.542 201.457 461.542 201.891V205.484H460.704V204.746H460.661C460.605 204.864 460.51 204.991 460.377 205.126C460.245 205.261 460.068 205.375 459.848 205.47C459.628 205.565 459.359 205.612 459.042 205.612ZM459.17 204.859C459.501 204.859 459.781 204.794 460.008 204.664C460.238 204.534 460.41 204.366 460.526 204.16C460.645 203.954 460.704 203.737 460.704 203.51V202.743C460.669 202.786 460.59 202.825 460.47 202.86C460.351 202.893 460.214 202.923 460.058 202.949C459.904 202.973 459.753 202.994 459.607 203.013C459.462 203.029 459.345 203.044 459.255 203.055C459.037 203.084 458.834 203.13 458.644 203.194C458.457 203.255 458.306 203.349 458.19 203.474C458.076 203.598 458.019 203.766 458.019 203.979C458.019 204.27 458.127 204.49 458.343 204.639C458.56 204.786 458.836 204.859 459.17 204.859ZM463.697 200.03L465.004 202.26L466.31 200.03H467.276L465.515 202.757L467.276 205.484H466.31L465.004 203.368L463.697 205.484H462.731L464.464 202.757L462.731 200.03H463.697ZM475.148 201.251L474.395 201.464C474.348 201.339 474.278 201.217 474.186 201.099C474.096 200.978 473.973 200.879 473.817 200.8C473.66 200.722 473.46 200.683 473.216 200.683C472.883 200.683 472.604 200.76 472.382 200.914C472.162 201.066 472.052 201.259 472.052 201.493C472.052 201.701 472.127 201.866 472.279 201.987C472.43 202.107 472.667 202.208 472.989 202.288L473.799 202.487C474.287 202.606 474.65 202.787 474.889 203.031C475.128 203.272 475.248 203.583 475.248 203.964C475.248 204.277 475.158 204.556 474.978 204.803C474.8 205.049 474.552 205.243 474.232 205.385C473.912 205.527 473.541 205.598 473.117 205.598C472.561 205.598 472.1 205.477 471.736 205.236C471.371 204.994 471.14 204.642 471.043 204.178L471.839 203.979C471.914 204.272 472.058 204.492 472.268 204.639C472.481 204.786 472.76 204.859 473.103 204.859C473.493 204.859 473.804 204.777 474.033 204.611C474.265 204.443 474.381 204.241 474.381 204.007C474.381 203.818 474.315 203.659 474.182 203.531C474.05 203.401 473.846 203.304 473.572 203.24L472.662 203.027C472.163 202.909 471.796 202.725 471.562 202.477C471.33 202.226 471.214 201.912 471.214 201.536C471.214 201.228 471.3 200.955 471.473 200.719C471.648 200.482 471.886 200.296 472.187 200.161C472.49 200.026 472.833 199.959 473.216 199.959C473.756 199.959 474.18 200.077 474.488 200.314C474.798 200.551 475.018 200.863 475.148 201.251ZM476.509 207.53V200.03H477.319V200.896H477.418C477.48 200.802 477.565 200.681 477.674 200.534C477.785 200.385 477.944 200.252 478.15 200.136C478.358 200.018 478.64 199.959 478.995 199.959C479.454 199.959 479.859 200.074 480.21 200.303C480.56 200.533 480.833 200.858 481.03 201.28C481.226 201.701 481.325 202.198 481.325 202.771C481.325 203.349 481.226 203.85 481.03 204.273C480.833 204.695 480.561 205.022 480.213 205.254C479.865 205.483 479.464 205.598 479.009 205.598C478.659 205.598 478.378 205.54 478.168 205.424C477.957 205.306 477.795 205.172 477.681 205.023C477.567 204.871 477.48 204.746 477.418 204.646H477.347V207.53H476.509ZM477.333 202.757C477.333 203.169 477.393 203.532 477.514 203.847C477.635 204.16 477.811 204.405 478.043 204.582C478.275 204.758 478.559 204.845 478.896 204.845C479.246 204.845 479.538 204.753 479.773 204.568C480.009 204.381 480.187 204.13 480.305 203.815C480.426 203.498 480.487 203.145 480.487 202.757C480.487 202.374 480.427 202.028 480.309 201.72C480.193 201.41 480.017 201.165 479.78 200.985C479.545 200.803 479.251 200.712 478.896 200.712C478.555 200.712 478.268 200.798 478.036 200.971C477.804 201.141 477.629 201.38 477.511 201.688C477.392 201.994 477.333 202.35 477.333 202.757ZM484.89 205.598C484.364 205.598 483.911 205.482 483.53 205.25C483.151 205.016 482.859 204.689 482.653 204.27C482.449 203.848 482.347 203.358 482.347 202.8C482.347 202.241 482.449 201.749 482.653 201.322C482.859 200.894 483.145 200.56 483.512 200.321C483.881 200.08 484.312 199.959 484.805 199.959C485.089 199.959 485.369 200.006 485.646 200.101C485.923 200.196 486.175 200.349 486.403 200.562C486.63 200.773 486.811 201.053 486.946 201.401C487.081 201.749 487.148 202.177 487.148 202.686V203.041H482.944V202.317H486.296C486.296 202.009 486.235 201.734 486.112 201.493C485.991 201.251 485.818 201.061 485.593 200.921C485.371 200.781 485.108 200.712 484.805 200.712C484.471 200.712 484.182 200.795 483.938 200.96C483.697 201.124 483.511 201.337 483.381 201.599C483.25 201.862 483.185 202.144 483.185 202.445V202.928C483.185 203.339 483.256 203.689 483.398 203.975C483.543 204.259 483.743 204.476 483.999 204.625C484.254 204.772 484.551 204.845 484.89 204.845C485.11 204.845 485.309 204.814 485.487 204.753C485.666 204.689 485.821 204.594 485.952 204.469C486.082 204.341 486.183 204.182 486.254 203.993L487.063 204.22C486.978 204.495 486.835 204.736 486.634 204.945C486.432 205.151 486.184 205.312 485.888 205.428C485.592 205.541 485.259 205.598 484.89 205.598ZM490.71 205.598C490.185 205.598 489.731 205.482 489.35 205.25C488.971 205.016 488.679 204.689 488.473 204.27C488.269 203.848 488.168 203.358 488.168 202.8C488.168 202.241 488.269 201.749 488.473 201.322C488.679 200.894 488.965 200.56 489.332 200.321C489.702 200.08 490.133 199.959 490.625 199.959C490.909 199.959 491.19 200.006 491.467 200.101C491.744 200.196 491.996 200.349 492.223 200.562C492.45 200.773 492.631 201.053 492.766 201.401C492.901 201.749 492.969 202.177 492.969 202.686V203.041H488.764V202.317H492.116C492.116 202.009 492.055 201.734 491.932 201.493C491.811 201.251 491.638 201.061 491.413 200.921C491.191 200.781 490.928 200.712 490.625 200.712C490.291 200.712 490.002 200.795 489.759 200.96C489.517 201.124 489.331 201.337 489.201 201.599C489.071 201.862 489.006 202.144 489.006 202.445V202.928C489.006 203.339 489.077 203.689 489.219 203.975C489.363 204.259 489.563 204.476 489.819 204.625C490.075 204.772 490.372 204.845 490.71 204.845C490.93 204.845 491.129 204.814 491.307 204.753C491.487 204.689 491.642 204.594 491.772 204.469C491.902 204.341 492.003 204.182 492.074 203.993L492.884 204.22C492.798 204.495 492.655 204.736 492.454 204.945C492.253 205.151 492.004 205.312 491.708 205.428C491.412 205.541 491.08 205.598 490.71 205.598ZM496.303 205.598C495.849 205.598 495.447 205.483 495.099 205.254C494.751 205.022 494.479 204.695 494.283 204.273C494.086 203.85 493.988 203.349 493.988 202.771C493.988 202.198 494.086 201.701 494.283 201.28C494.479 200.858 494.753 200.533 495.103 200.303C495.453 200.074 495.858 199.959 496.317 199.959C496.673 199.959 496.953 200.018 497.159 200.136C497.367 200.252 497.526 200.385 497.635 200.534C497.746 200.681 497.833 200.802 497.894 200.896H497.965V198.212H498.803V205.484H497.994V204.646H497.894C497.833 204.746 497.745 204.871 497.631 205.023C497.518 205.172 497.356 205.306 497.145 205.424C496.934 205.54 496.654 205.598 496.303 205.598ZM496.417 204.845C496.753 204.845 497.037 204.758 497.269 204.582C497.501 204.405 497.678 204.16 497.798 203.847C497.919 203.532 497.979 203.169 497.979 202.757C497.979 202.35 497.92 201.994 497.802 201.688C497.683 201.38 497.508 201.141 497.276 200.971C497.044 200.798 496.758 200.712 496.417 200.712C496.062 200.712 495.766 200.803 495.529 200.985C495.295 201.165 495.118 201.41 495 201.72C494.884 202.028 494.826 202.374 494.826 202.757C494.826 203.145 494.885 203.498 495.004 203.815C495.124 204.13 495.302 204.381 495.536 204.568C495.773 204.753 496.067 204.845 496.417 204.845Z" fill="white" fill-opacity="0.68"/>
+<g filter="url(#filter7_b_2967_54165)">
+<rect x="544.773" y="193.66" width="113.922" height="15.6513" rx="2.98" fill="url(#paint6_linear_2967_54165)"/>
+<rect x="545.023" y="193.91" width="113.422" height="15.1513" rx="2.73" stroke="url(#paint7_linear_2967_54165)" stroke-width="0.5"/>
+</g>
+<g opacity="0.8" filter="url(#filter8_b_2967_54165)">
+<rect x="544.773" y="193.66" width="71.4336" height="15.6513" rx="2.98" fill="url(#paint8_linear_2967_54165)"/>
+</g>
+<path d="M669.82 205.584C669.285 205.584 668.83 205.438 668.453 205.147C668.077 204.853 667.789 204.429 667.59 203.872C667.391 203.313 667.292 202.639 667.292 201.848C667.292 201.062 667.391 200.391 667.59 199.835C667.791 199.276 668.08 198.85 668.457 198.556C668.835 198.26 669.29 198.112 669.82 198.112C670.351 198.112 670.804 198.26 671.18 198.556C671.559 198.85 671.848 199.276 672.047 199.835C672.248 200.391 672.349 201.062 672.349 201.848C672.349 202.639 672.249 203.313 672.05 203.872C671.852 204.429 671.564 204.853 671.188 205.147C670.811 205.438 670.355 205.584 669.82 205.584ZM669.82 204.803C670.351 204.803 670.763 204.547 671.056 204.036C671.35 203.524 671.496 202.795 671.496 201.848C671.496 201.218 671.429 200.682 671.294 200.239C671.161 199.797 670.97 199.459 670.719 199.227C670.47 198.995 670.171 198.879 669.82 198.879C669.295 198.879 668.884 199.138 668.588 199.657C668.292 200.173 668.144 200.903 668.144 201.848C668.144 202.478 668.21 203.013 668.343 203.453C668.476 203.893 668.666 204.228 668.915 204.458C669.166 204.688 669.468 204.803 669.82 204.803ZM674.069 205.541C673.894 205.541 673.744 205.478 673.618 205.353C673.493 205.228 673.43 205.077 673.43 204.902C673.43 204.727 673.493 204.576 673.618 204.451C673.744 204.326 673.894 204.263 674.069 204.263C674.244 204.263 674.395 204.326 674.52 204.451C674.646 204.576 674.708 204.727 674.708 204.902C674.708 205.018 674.679 205.125 674.62 205.222C674.563 205.319 674.486 205.397 674.389 205.456C674.294 205.513 674.188 205.541 674.069 205.541ZM677.886 198.212V205.484H677.005V199.135H676.963L675.187 200.314V199.419L677.005 198.212H677.886Z" fill="white" fill-opacity="0.68"/>
+<rect x="432.023" y="185.91" width="263.422" height="31.1513" rx="7.75" stroke="url(#paint9_linear_2967_54165)" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter9_b_2967_54165)">
+<rect x="431.773" y="226.309" width="264" height="31.6513" rx="8" fill="url(#paint10_linear_2967_54165)"/>
+<path d="M448.654 246.133V238.86H451.112C451.68 238.86 452.146 238.957 452.511 239.151C452.875 239.343 453.145 239.607 453.32 239.943C453.496 240.279 453.583 240.662 453.583 241.09C453.583 241.519 453.496 241.899 453.32 242.23C453.145 242.562 452.876 242.822 452.514 243.011C452.152 243.198 451.689 243.292 451.126 243.292H449.137V242.496H451.097C451.486 242.496 451.798 242.44 452.035 242.326C452.274 242.212 452.447 242.051 452.553 241.843C452.662 241.632 452.717 241.381 452.717 241.09C452.717 240.799 452.662 240.545 452.553 240.327C452.444 240.109 452.27 239.941 452.031 239.822C451.792 239.702 451.476 239.641 451.083 239.641H449.535V246.133H448.654ZM452.077 242.866L453.867 246.133H452.844L451.083 242.866H452.077ZM456.542 246.261C456.196 246.261 455.883 246.196 455.601 246.065C455.319 245.933 455.096 245.742 454.93 245.494C454.764 245.243 454.681 244.94 454.681 244.585C454.681 244.272 454.743 244.019 454.866 243.825C454.989 243.628 455.154 243.474 455.36 243.363C455.566 243.252 455.793 243.169 456.041 243.114C456.292 243.058 456.544 243.013 456.798 242.979C457.129 242.937 457.398 242.905 457.604 242.884C457.812 242.86 457.964 242.821 458.058 242.766C458.155 242.712 458.204 242.617 458.204 242.482V242.454C458.204 242.103 458.108 241.831 457.916 241.637C457.727 241.443 457.439 241.346 457.053 241.346C456.653 241.346 456.34 241.433 456.112 241.609C455.885 241.784 455.725 241.971 455.633 242.17L454.838 241.886C454.98 241.554 455.169 241.296 455.406 241.112C455.645 240.924 455.905 240.794 456.187 240.721C456.471 240.645 456.75 240.607 457.025 240.607C457.2 240.607 457.401 240.629 457.629 240.671C457.858 240.711 458.08 240.795 458.293 240.923C458.508 241.051 458.687 241.244 458.829 241.502C458.971 241.76 459.042 242.106 459.042 242.539V246.133H458.204V245.394H458.161C458.105 245.513 458.01 245.639 457.877 245.774C457.745 245.909 457.568 246.024 457.348 246.119C457.128 246.213 456.859 246.261 456.542 246.261ZM456.67 245.508C457.001 245.508 457.281 245.443 457.508 245.312C457.738 245.182 457.91 245.014 458.026 244.808C458.145 244.602 458.204 244.386 458.204 244.158V243.391C458.169 243.434 458.09 243.473 457.97 243.509C457.851 243.542 457.714 243.571 457.558 243.597C457.404 243.621 457.253 243.642 457.107 243.661C456.962 243.678 456.845 243.692 456.755 243.704C456.537 243.732 456.334 243.778 456.144 243.842C455.957 243.904 455.806 243.997 455.69 244.123C455.576 244.246 455.519 244.414 455.519 244.627C455.519 244.918 455.627 245.138 455.843 245.288C456.06 245.434 456.336 245.508 456.67 245.508ZM461.41 242.852V246.133H460.572V240.678H461.381V241.531H461.452C461.58 241.254 461.774 241.031 462.035 240.863C462.295 240.692 462.631 240.607 463.043 240.607C463.413 240.607 463.736 240.683 464.013 240.835C464.29 240.984 464.505 241.211 464.659 241.516C464.813 241.819 464.89 242.203 464.89 242.667V246.133H464.052V242.724C464.052 242.295 463.941 241.961 463.718 241.722C463.496 241.481 463.19 241.36 462.802 241.36C462.534 241.36 462.295 241.418 462.085 241.534C461.876 241.65 461.712 241.819 461.591 242.042C461.47 242.264 461.41 242.534 461.41 242.852ZM468.481 246.246C468.026 246.246 467.625 246.132 467.277 245.902C466.929 245.67 466.657 245.343 466.46 244.922C466.264 244.498 466.166 243.997 466.166 243.42C466.166 242.847 466.264 242.35 466.46 241.928C466.657 241.507 466.93 241.181 467.281 240.952C467.631 240.722 468.036 240.607 468.495 240.607C468.85 240.607 469.131 240.666 469.337 240.785C469.545 240.901 469.704 241.033 469.813 241.183C469.924 241.329 470.01 241.45 470.072 241.545H470.143V238.86H470.981V246.133H470.171V245.295H470.072C470.01 245.394 469.923 245.52 469.809 245.671C469.695 245.82 469.533 245.954 469.323 246.072C469.112 246.188 468.831 246.246 468.481 246.246ZM468.595 245.494C468.931 245.494 469.215 245.406 469.447 245.231C469.679 245.053 469.855 244.808 469.976 244.496C470.097 244.181 470.157 243.817 470.157 243.406C470.157 242.998 470.098 242.642 469.98 242.337C469.861 242.029 469.686 241.79 469.454 241.619C469.222 241.446 468.936 241.36 468.595 241.36C468.24 241.36 467.944 241.451 467.707 241.634C467.472 241.813 467.296 242.058 467.178 242.369C467.062 242.676 467.004 243.022 467.004 243.406C467.004 243.794 467.063 244.147 467.181 244.464C467.302 244.779 467.48 245.03 467.714 245.217C467.951 245.401 468.244 245.494 468.595 245.494ZM474.848 246.246C474.356 246.246 473.924 246.129 473.552 245.895C473.183 245.661 472.894 245.333 472.686 244.911C472.48 244.49 472.377 243.997 472.377 243.434C472.377 242.866 472.48 242.37 472.686 241.946C472.894 241.522 473.183 241.193 473.552 240.959C473.924 240.724 474.356 240.607 474.848 240.607C475.341 240.607 475.771 240.724 476.141 240.959C476.512 241.193 476.801 241.522 477.007 241.946C477.216 242.37 477.32 242.866 477.32 243.434C477.32 243.997 477.216 244.49 477.007 244.911C476.801 245.333 476.512 245.661 476.141 245.895C475.771 246.129 475.341 246.246 474.848 246.246ZM474.848 245.494C475.222 245.494 475.53 245.398 475.771 245.206C476.013 245.014 476.192 244.762 476.308 244.45C476.424 244.137 476.482 243.799 476.482 243.434C476.482 243.069 476.424 242.73 476.308 242.415C476.192 242.1 476.013 241.845 475.771 241.651C475.53 241.457 475.222 241.36 474.848 241.36C474.474 241.36 474.166 241.457 473.925 241.651C473.683 241.845 473.505 242.1 473.389 242.415C473.273 242.73 473.215 243.069 473.215 243.434C473.215 243.799 473.273 244.137 473.389 244.45C473.505 244.762 473.683 245.014 473.925 245.206C474.166 245.398 474.474 245.494 474.848 245.494ZM478.599 246.133V240.678H479.409V241.531H479.48C479.593 241.239 479.777 241.013 480.03 240.852C480.283 240.689 480.588 240.607 480.943 240.607C481.303 240.607 481.602 240.689 481.841 240.852C482.083 241.013 482.271 241.239 482.406 241.531H482.463C482.602 241.249 482.812 241.025 483.091 240.859C483.371 240.691 483.706 240.607 484.096 240.607C484.584 240.607 484.983 240.76 485.293 241.065C485.603 241.368 485.758 241.841 485.758 242.482V246.133H484.92V242.482C484.92 242.08 484.81 241.792 484.59 241.619C484.37 241.446 484.11 241.36 483.812 241.36C483.429 241.36 483.132 241.476 482.921 241.708C482.71 241.938 482.605 242.229 482.605 242.582V246.133H481.752V242.397C481.752 242.087 481.652 241.837 481.451 241.648C481.249 241.456 480.99 241.36 480.673 241.36C480.455 241.36 480.252 241.418 480.062 241.534C479.875 241.65 479.724 241.811 479.608 242.017C479.494 242.221 479.437 242.456 479.437 242.724V246.133H478.599ZM488.129 242.852V246.133H487.29V240.678H488.1V241.531H488.171C488.299 241.254 488.493 241.031 488.754 240.863C489.014 240.692 489.35 240.607 489.762 240.607C490.131 240.607 490.455 240.683 490.732 240.835C491.009 240.984 491.224 241.211 491.378 241.516C491.532 241.819 491.609 242.203 491.609 242.667V246.133H490.771V242.724C490.771 242.295 490.659 241.961 490.437 241.722C490.214 241.481 489.909 241.36 489.521 241.36C489.253 241.36 489.014 241.418 488.803 241.534C488.595 241.65 488.43 241.819 488.31 242.042C488.189 242.264 488.129 242.534 488.129 242.852ZM495.427 246.246C494.901 246.246 494.448 246.13 494.067 245.898C493.688 245.664 493.396 245.337 493.19 244.918C492.986 244.497 492.884 244.007 492.884 243.448C492.884 242.889 492.986 242.397 493.19 241.971C493.396 241.542 493.682 241.209 494.049 240.969C494.419 240.728 494.849 240.607 495.342 240.607C495.626 240.607 495.906 240.655 496.183 240.749C496.46 240.844 496.713 240.998 496.94 241.211C497.167 241.422 497.348 241.701 497.483 242.049C497.618 242.397 497.686 242.826 497.686 243.335V243.69H493.481V242.965H496.833C496.833 242.657 496.772 242.383 496.649 242.141C496.528 241.9 496.355 241.709 496.13 241.57C495.908 241.43 495.645 241.36 495.342 241.36C495.008 241.36 494.719 241.443 494.475 241.609C494.234 241.772 494.048 241.985 493.918 242.248C493.788 242.511 493.722 242.792 493.722 243.093V243.576C493.722 243.988 493.794 244.337 493.936 244.624C494.08 244.908 494.28 245.124 494.536 245.273C494.791 245.42 495.088 245.494 495.427 245.494C495.647 245.494 495.846 245.463 496.024 245.401C496.204 245.337 496.359 245.243 496.489 245.117C496.619 244.989 496.72 244.831 496.791 244.641L497.6 244.869C497.515 245.143 497.372 245.385 497.171 245.593C496.969 245.799 496.721 245.96 496.425 246.076C496.129 246.19 495.796 246.246 495.427 246.246ZM502.824 241.9L502.071 242.113C502.024 241.987 501.954 241.866 501.862 241.747C501.772 241.626 501.649 241.527 501.492 241.449C501.336 241.371 501.136 241.332 500.892 241.332C500.558 241.332 500.28 241.409 500.058 241.562C499.838 241.714 499.727 241.907 499.727 242.141C499.727 242.35 499.803 242.514 499.955 242.635C500.106 242.756 500.343 242.856 500.665 242.937L501.475 243.136C501.962 243.254 502.326 243.435 502.565 243.679C502.804 243.92 502.923 244.232 502.923 244.613C502.923 244.925 502.834 245.205 502.654 245.451C502.476 245.697 502.227 245.891 501.908 246.033C501.588 246.175 501.217 246.246 500.793 246.246C500.236 246.246 499.776 246.126 499.411 245.884C499.047 245.643 498.816 245.29 498.719 244.826L499.514 244.627C499.59 244.921 499.733 245.141 499.944 245.288C500.157 245.434 500.435 245.508 500.779 245.508C501.169 245.508 501.479 245.425 501.709 245.259C501.941 245.091 502.057 244.89 502.057 244.656C502.057 244.466 501.991 244.308 501.858 244.18C501.726 244.049 501.522 243.952 501.247 243.888L500.338 243.675C499.839 243.557 499.472 243.374 499.237 243.125C499.005 242.874 498.889 242.56 498.889 242.184C498.889 241.876 498.976 241.604 499.149 241.367C499.324 241.13 499.562 240.945 499.862 240.81C500.165 240.675 500.509 240.607 500.892 240.607C501.432 240.607 501.856 240.726 502.164 240.962C502.474 241.199 502.694 241.512 502.824 241.9ZM508.049 241.9L507.296 242.113C507.248 241.987 507.179 241.866 507.086 241.747C506.996 241.626 506.873 241.527 506.717 241.449C506.561 241.371 506.361 241.332 506.117 241.332C505.783 241.332 505.505 241.409 505.282 241.562C505.062 241.714 504.952 241.907 504.952 242.141C504.952 242.35 505.028 242.514 505.179 242.635C505.331 242.756 505.568 242.856 505.89 242.937L506.699 243.136C507.187 243.254 507.55 243.435 507.789 243.679C508.029 243.92 508.148 244.232 508.148 244.613C508.148 244.925 508.058 245.205 507.878 245.451C507.701 245.697 507.452 245.891 507.132 246.033C506.813 246.175 506.441 246.246 506.017 246.246C505.461 246.246 505.001 246.126 504.636 245.884C504.271 245.643 504.041 245.29 503.944 244.826L504.739 244.627C504.815 244.921 504.958 245.141 505.169 245.288C505.382 245.434 505.66 245.508 506.003 245.508C506.394 245.508 506.704 245.425 506.934 245.259C507.166 245.091 507.282 244.89 507.282 244.656C507.282 244.466 507.215 244.308 507.083 244.18C506.95 244.049 506.747 243.952 506.472 243.888L505.563 243.675C505.063 243.557 504.696 243.374 504.462 243.125C504.23 242.874 504.114 242.56 504.114 242.184C504.114 241.876 504.2 241.604 504.373 241.367C504.548 241.13 504.786 240.945 505.087 240.81C505.39 240.675 505.733 240.607 506.117 240.607C506.657 240.607 507.08 240.726 507.388 240.962C507.698 241.199 507.918 241.512 508.049 241.9Z" fill="white" fill-opacity="0.68"/>
+<g filter="url(#filter10_b_2967_54165)">
+<rect x="544.773" y="234.309" width="113.922" height="15.6513" rx="2.98" fill="url(#paint11_linear_2967_54165)"/>
+<rect x="545.023" y="234.559" width="113.422" height="15.1513" rx="2.73" stroke="url(#paint12_linear_2967_54165)" stroke-width="0.5"/>
+</g>
+<g opacity="0.8" filter="url(#filter11_b_2967_54165)">
+<rect x="544.773" y="234.309" width="18.5" height="15.6513" rx="2.98" fill="url(#paint13_linear_2967_54165)"/>
+</g>
+<path d="M669.721 246.232C669.304 246.232 668.929 246.149 668.595 245.984C668.261 245.818 667.994 245.591 667.793 245.302C667.591 245.013 667.481 244.684 667.462 244.315H668.315C668.348 244.644 668.497 244.916 668.762 245.131C669.03 245.344 669.349 245.451 669.721 245.451C670.019 245.451 670.284 245.381 670.516 245.241C670.751 245.102 670.934 244.91 671.067 244.666C671.202 244.42 671.269 244.142 671.269 243.832C671.269 243.514 671.199 243.232 671.06 242.983C670.922 242.732 670.733 242.534 670.491 242.39C670.25 242.246 669.974 242.172 669.664 242.17C669.442 242.167 669.213 242.202 668.979 242.273C668.744 242.341 668.551 242.43 668.4 242.539L667.576 242.44L668.016 238.86H671.795V239.641H668.755L668.499 241.786H668.542C668.691 241.668 668.878 241.57 669.103 241.491C669.328 241.413 669.562 241.374 669.806 241.374C670.251 241.374 670.648 241.481 670.996 241.694C671.346 241.905 671.621 242.193 671.82 242.56C672.021 242.927 672.121 243.346 672.121 243.817C672.121 244.281 672.017 244.696 671.809 245.06C671.603 245.423 671.319 245.709 670.957 245.92C670.594 246.128 670.183 246.232 669.721 246.232Z" fill="white" fill-opacity="0.68"/>
+<rect x="432.023" y="226.559" width="263.5" height="31.1513" rx="7.75" stroke="url(#paint14_linear_2967_54165)" stroke-width="0.5"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2967_54165" x="135.615" y="57.5215" width="492.223" height="282.414" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="14.665" result="effect1_foregroundBlur_2967_54165"/>
+</filter>
+<filter id="filter1_f_2967_54165" x="139.408" y="102.576" width="246.59" height="199.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="18.165" result="effect1_foregroundBlur_2967_54165"/>
+</filter>
+<filter id="filter2_f_2967_54165" x="174.525" y="177.811" width="244.969" height="147.773" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="14.165" result="effect1_foregroundBlur_2967_54165"/>
+</filter>
+<filter id="filter3_b_2967_54165" x="381.521" y="94.7558" width="364.426" height="132.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter4_b_2967_54165" x="494.521" y="102.756" width="214.426" height="116.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter5_b_2967_54165" x="510.642" y="118.877" width="78.5706" height="83.9144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.0655"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter6_b_2967_54165" x="381.521" y="135.408" width="364.426" height="132.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter7_b_2967_54165" x="494.521" y="143.408" width="214.426" height="116.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter8_b_2967_54165" x="510.642" y="159.529" width="139.696" height="83.9144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.0655"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter9_b_2967_54165" x="381.521" y="176.057" width="364.504" height="132.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter10_b_2967_54165" x="494.521" y="184.057" width="214.426" height="116.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<filter id="filter11_b_2967_54165" x="510.642" y="200.178" width="86.762" height="83.9144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.0655"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2967_54165"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2967_54165" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_2967_54165" x1="313.226" y1="160.833" x2="695.695" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121212" stop-opacity="0.18"/>
+<stop offset="1" stop-color="white" stop-opacity="0.17"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2967_54165" x1="493.602" y1="160.833" x2="658.695" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0.05"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2967_54165" x1="544.773" y1="160.833" x2="658.695" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2967_54165" x1="545.162" y1="153.008" x2="554.368" y2="153.065" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A41CD" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#9A41CD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2967_54165" x1="431.773" y1="160.833" x2="695.695" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2967_54165" x1="313.226" y1="201.486" x2="695.695" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121212" stop-opacity="0.18"/>
+<stop offset="1" stop-color="white" stop-opacity="0.17"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2967_54165" x1="493.602" y1="201.486" x2="658.695" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0.05"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2967_54165" x1="544.773" y1="201.486" x2="658.695" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2967_54165" x1="547.467" y1="193.66" x2="611.142" y2="196.424" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A41CD" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#9A41CD"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2967_54165" x1="431.773" y1="201.486" x2="695.695" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2967_54165" x1="313.191" y1="242.134" x2="695.773" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121212" stop-opacity="0.18"/>
+<stop offset="1" stop-color="white" stop-opacity="0.17"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2967_54165" x1="493.602" y1="242.134" x2="658.695" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0.05"/>
+</linearGradient>
+<linearGradient id="paint12_linear_2967_54165" x1="544.773" y1="242.134" x2="658.695" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_2967_54165" x1="545.471" y1="234.309" x2="561.991" y2="234.494" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A41CD" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#9A41CD"/>
+</linearGradient>
+<linearGradient id="paint14_linear_2967_54165" x1="431.773" y1="242.134" x2="695.773" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_2967_54165">
+<rect width="835" height="398" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/www/public/images/launchweek/8/day0/constellation.svg b/apps/www/public/images/launchweek/8/day0/constellation.svg
new file mode 100644
index 00000000000..beb75dfb5ae
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/day0/constellation.svg
@@ -0,0 +1,440 @@
+<svg width="448" height="398" viewBox="0 0 448 398" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_2960_50603)">
+<path d="M105.474 134.13C86.4035 173.066 106.71 209.238 186.185 248.163C265.66 287.088 370.008 290.498 389.078 251.562C408.148 212.625 417.384 177.153 265.268 172.163C185.862 180.974 124.544 95.1933 105.474 134.13Z" fill="#7032BF" fill-opacity="0.2"/>
+</g>
+<g filter="url(#filter1_f_2960_50603)">
+<path d="M272.099 232.306C279 249.574 296.349 253.52 331.596 239.435C366.843 225.349 397.947 193.134 391.046 175.866C384.146 158.598 375.518 145.455 330.169 192.412C310.128 220.208 265.199 215.038 272.099 232.306Z" fill="#080316"/>
+</g>
+<g filter="url(#filter2_f_2960_50603)">
+<path d="M242.635 244.346C243.888 262.899 259.182 271.991 297.053 269.432C334.924 266.873 374.43 245.789 373.176 227.235C371.923 208.682 367.756 193.522 310.161 224.251C282.541 244.534 241.381 225.792 242.635 244.346Z" fill="#0B84AD" fill-opacity="0.12"/>
+</g>
+<rect x="402.449" y="123.18" width="157.195" height="314.471" transform="rotate(90 402.449 123.18)" stroke="#CB3FF9" stroke-opacity="0.7" stroke-width="0.523751"/>
+<rect x="404.528" y="120.637" width="4.71376" height="4.71376" transform="rotate(90 404.528 120.637)" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<path d="M404.528 278.805L404.528 278.543L404.266 278.543L400.076 278.543L399.814 278.543L399.814 278.805L399.814 282.995L399.814 283.257L400.076 283.257L404.266 283.257L404.528 283.257L404.528 282.995L404.528 278.805Z" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<rect x="90.5509" y="120.562" width="4.71376" height="4.71376" transform="rotate(90 90.5509 120.562)" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<rect x="90.0744" y="278.597" width="4.71376" height="4.71376" transform="rotate(90 90.0744 278.597)" fill="#F0F9F6" stroke="#CB3FF9" stroke-width="0.523751"/>
+<circle cx="232.074" cy="235.719" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="222.848" cy="237.399" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="260.779" cy="269.052" r="0.629111" transform="rotate(51.6934 260.779 269.052)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="158.961" cy="245.09" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="214.461" cy="234.879" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="275.713" cy="256.837" r="0.629111" transform="rotate(51.6934 275.713 256.837)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="245.115" cy="244.013" r="0.629111" transform="rotate(51.6934 245.115 244.013)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="240.461" cy="229.848" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="237.11" cy="228.168" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="226.207" cy="224.813" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="229.555" cy="218.102" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="213.621" cy="214.746" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="204.395" cy="222.297" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="185.942" cy="213.91" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="189.293" cy="207.199" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="197.684" cy="198.813" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="211.809" cy="190.563" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="179.094" cy="190.563" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="201.738" cy="178.821" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="185.801" cy="183.016" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="189.156" cy="203.145" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="194.328" cy="197.133" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="181.606" cy="202.309" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="168.184" cy="197.278" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="171.543" cy="183.016" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="181.606" cy="177.985" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="184.965" cy="170.434" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="166.512" cy="174.625" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="174.899" cy="174.625" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="186.645" cy="191.403" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="176.574" cy="162.883" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="178.25" cy="172.11" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="185.801" cy="162.047" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="192.512" cy="162.883" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="192.512" cy="156.172" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="190" cy="154.496" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="171.543" cy="153.656" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="183.285" cy="158.688" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="127.293" cy="99.7775" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="142.387" cy="98.9416" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="192.512" cy="148.625" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="144.906" cy="103.973" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="206.821" cy="134.321" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="213.485" cy="140.238" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="180.77" cy="193.082" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="176.574" cy="195.598" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="187.617" cy="197.973" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="192.649" cy="210.559" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="279.455" cy="281.501" r="0.629111" transform="rotate(51.6934 279.455 281.501)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="348.433" cy="232.926" r="0.629111" transform="rotate(-180 348.433 232.926)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="341.726" cy="232.086" r="0.629111" transform="rotate(-180 341.726 232.086)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="292.332" cy="214.89" r="0.629111" transform="rotate(-180 292.332 214.89)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="341.726" cy="238.801" r="0.629111" transform="rotate(-180 341.726 238.801)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="344.234" cy="240.476" r="0.629111" transform="rotate(-180 344.234 240.476)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="293.172" cy="238.375" r="0.629111" transform="rotate(-180 293.172 238.375)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="341.726" cy="246.344" r="0.629111" transform="rotate(-180 341.726 246.344)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="290.656" cy="233.347" r="0.629111" transform="rotate(-180 290.656 233.347)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="287.301" cy="238.375" r="0.629111" transform="rotate(-180 287.301 238.375)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="279.75" cy="241.734" r="0.629111" transform="rotate(-180 279.75 241.734)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="273.879" cy="224.121" r="0.629111" transform="rotate(-180 273.879 224.121)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="301.916" cy="277.823" r="0.629111" transform="rotate(-128.307 301.916 277.823)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="273.039" cy="233.347" r="0.629111" transform="rotate(-180 273.039 233.347)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="320.125" cy="224.254" r="0.629111" transform="rotate(-180 320.125 224.254)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="307.312" cy="241.105" r="0.629111" transform="rotate(-180 307.312 241.105)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="264.422" cy="206.679" r="0.629111" transform="rotate(-180 264.422 206.679)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="268.617" cy="204.168" r="0.629111" transform="rotate(-180 268.617 204.168)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="346.855" cy="145.265" r="0.629111" transform="rotate(-180 346.855 145.265)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="249.324" cy="175.648" r="0.629111" transform="rotate(-180 249.324 175.648)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="264.422" cy="177.328" r="0.629111" transform="rotate(-180 264.422 177.328)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="39.9764" cy="53.2732" r="0.629111" transform="rotate(-180 39.9764 53.2732)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="76.0428" cy="58.0467" r="0.629111" transform="rotate(-180 76.0428 58.0467)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="46.3435" cy="22.5115" r="0.629111" transform="rotate(-180 46.3435 22.5115)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="49.5271" cy="23.7693" r="0.629111" transform="rotate(-180 49.5271 23.7693)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="318.618" cy="197.766" r="0.629111" transform="rotate(125.893 318.618 197.766)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="270.926" cy="206.492" r="0.629111" transform="rotate(125.893 270.926 206.492)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="313.063" cy="196.852" r="0.629111" transform="rotate(125.893 313.063 196.852)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="296.778" cy="196.684" r="0.629111" transform="rotate(125.893 296.778 196.684)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="315.176" cy="202.524" r="0.629111" transform="rotate(125.893 315.176 202.524)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="354.469" cy="223.606" r="0.629111" transform="rotate(125.893 354.469 223.606)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="241.793" cy="170.918" r="0.629111" transform="rotate(125.893 241.793 170.918)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="242.215" cy="166.047" r="0.629111" transform="rotate(125.893 242.215 166.047)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="257.122" cy="168.344" r="0.629111" transform="rotate(125.893 257.122 168.344)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="183.039" cy="112.438" r="0.629111" transform="rotate(125.893 183.039 112.438)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="259.641" cy="187.641" r="0.629111" transform="rotate(125.893 259.641 187.641)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="256.286" cy="183.446" r="0.629111" transform="rotate(125.893 256.286 183.446)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="270.543" cy="184.281" r="0.629111" transform="rotate(125.893 270.543 184.281)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="240.348" cy="191.836" r="0.629111" transform="rotate(125.893 240.348 191.836)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="205.872" cy="144.215" r="0.629111" transform="rotate(125.893 205.872 144.215)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="338.719" cy="188.297" r="0.629111" transform="rotate(125.893 338.719 188.297)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="274.743" cy="175.059" r="0.629111" transform="rotate(125.893 274.743 175.059)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="285.032" cy="124.547" r="0.629111" transform="rotate(125.893 285.032 124.547)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="187.59" cy="110.625" r="0.629111" transform="rotate(125.893 187.59 110.625)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="197.801" cy="99.3791" r="0.629111" transform="rotate(125.893 197.801 99.3791)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="206.817" cy="174.84" r="0.629111" transform="rotate(125.893 206.817 174.84)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="206.844" cy="101.325" r="0.629111" transform="rotate(75 206.844 101.325)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="200.028" cy="95.3408" r="0.629111" transform="rotate(75 200.028 95.3408)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="202.629" cy="105.063" r="0.629111" transform="rotate(75 202.629 105.063)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="209.957" cy="104.681" r="0.629111" transform="rotate(75 209.957 104.681)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="241.079" cy="158.173" r="0.629111" transform="rotate(75 241.079 158.173)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="243.598" cy="161.528" r="0.629111" transform="rotate(75 243.598 161.528)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="256.176" cy="161.528" r="0.629111" transform="rotate(75 256.176 161.528)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="233.77" cy="167.751" r="0.629111" transform="rotate(75 233.77 167.751)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="133.911" cy="120.091" r="0.629111" transform="rotate(75 133.911 120.091)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="103.067" cy="90.3721" r="0.629111" transform="rotate(75 103.067 90.3721)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="93.0044" cy="86.1728" r="0.629111" transform="rotate(75 93.0044 86.1728)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="116.399" cy="119.571" r="0.629111" transform="rotate(75 116.399 119.571)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="136.266" cy="94.9814" r="0.629111" transform="rotate(75 136.266 94.9814)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="212.086" cy="198.271" r="0.629111" transform="rotate(75 212.086 198.271)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="247.994" cy="244.95" r="0.629111" transform="rotate(51.6934 247.994 244.95)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="237.946" cy="212.231" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="203.555" cy="208.039" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="280.705" cy="273.938" r="0.629111" transform="rotate(51.6934 280.705 273.938)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="268.848" cy="243.41" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="328.221" cy="303.087" r="0.629111" transform="rotate(51.6934 328.221 303.087)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="268.008" cy="237.539" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="285.967" cy="290.087" r="0.629111" transform="rotate(51.6934 285.967 290.087)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="158.537" cy="221.345" r="0.724133" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="399.078" cy="327.284" r="0.629111" transform="rotate(-143.307 399.078 327.284)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="305.104" cy="222.844" r="0.629111" transform="rotate(165 305.104 222.844)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="361.597" cy="237.368" r="0.629111" transform="rotate(165 361.597 237.368)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="275.085" cy="216.59" r="0.629111" transform="rotate(165 275.085 216.59)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="288.862" cy="212.895" r="0.629111" transform="rotate(165 288.862 212.895)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="295.827" cy="207.481" r="0.629111" transform="rotate(165 295.827 207.481)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="250.022" cy="192.602" r="0.629111" transform="rotate(165 250.022 192.602)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="246.937" cy="195.184" r="0.629111" transform="rotate(165 246.937 195.184)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="252.929" cy="188.368" r="0.629111" transform="rotate(165 252.929 188.368)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="262.554" cy="191.875" r="0.629111" transform="rotate(165 262.554 191.875)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="256.241" cy="203.977" r="0.629111" transform="rotate(165 256.241 203.977)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="255.374" cy="200.739" r="0.629111" transform="rotate(165 255.374 200.739)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="278.03" cy="234.036" r="0.629111" transform="rotate(165 278.03 234.036)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="282.714" cy="222.36" r="0.629111" transform="rotate(165 282.714 222.36)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="284.457" cy="280.768" r="0.629111" transform="rotate(-143.307 284.457 280.768)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="290.969" cy="286.315" r="0.629111" transform="rotate(-143.307 290.969 286.315)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="329.985" cy="323.288" r="0.629111" transform="rotate(-143.307 329.985 323.288)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="281.034" cy="219.336" r="0.629111" transform="rotate(165 281.034 219.336)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="350.856" cy="286.444" r="0.629111" transform="rotate(-143.307 350.856 286.444)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="269.288" cy="246.797" r="0.629111" transform="rotate(165 269.288 246.797)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="291.003" cy="243.586" r="0.629111" transform="rotate(165 291.003 243.586)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="250.296" cy="258.032" r="0.629111" transform="rotate(165 250.296 258.032)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="251.835" cy="296.762" r="0.629111" transform="rotate(165 251.835 296.762)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="340.047" cy="232.086" r="0.629111" transform="rotate(-180 340.047 232.086)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="300.402" cy="223.855" r="0.629111" transform="rotate(-180 300.402 223.855)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="255.446" cy="169.184" r="0.629111" transform="rotate(125.893 255.446 169.184)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="145.567" cy="144.364" r="0.629111" transform="rotate(75 145.567 144.364)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="257.016" cy="163.204" r="0.629111" transform="rotate(75 257.016 163.204)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="226.211" cy="127.798" r="0.629111" transform="rotate(75 226.211 127.798)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="136.938" cy="102.575" r="0.629111" transform="rotate(75 136.938 102.575)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="60.1841" cy="81.4658" r="0.629111" transform="rotate(75 60.1841 81.4658)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="277.235" cy="236.703" r="0.629111" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="247.776" cy="196.864" r="0.629111" transform="rotate(165 247.776 196.864)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="325.379" cy="299.479" r="0.629111" transform="rotate(-143.307 325.379 299.479)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="239.202" cy="232.844" r="0.629111" transform="rotate(165 239.202 232.844)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="236.648" cy="325.746" r="0.629111" transform="rotate(-69.1069 236.648 325.746)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="334.664" cy="328.292" r="0.629111" transform="rotate(-143.307 334.664 328.292)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="342.352" cy="269.999" r="0.629111" transform="rotate(-143.307 342.352 269.999)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="219.632" cy="225.793" r="0.629111" transform="rotate(165 219.632 225.793)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="221.089" cy="234.79" r="0.629111" transform="rotate(165 221.089 234.79)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="201.952" cy="230.954" r="0.629111" transform="rotate(165 201.952 230.954)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="208.116" cy="234.516" r="0.629111" transform="rotate(165 208.116 234.516)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="179.858" cy="236.004" r="0.629111" transform="rotate(165 179.858 236.004)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="186.933" cy="233.243" r="0.629111" transform="rotate(165 186.933 233.243)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="190.276" cy="226.27" r="0.629111" transform="rotate(165 190.276 226.27)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="238.836" cy="206.312" r="0.724133" transform="rotate(165 238.836 206.312)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="315.308" cy="234.406" r="0.724133" transform="rotate(165 315.308 234.406)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="292.269" cy="198.023" r="0.724133" transform="rotate(165 292.269 198.023)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="284.949" cy="205.164" r="0.724133" transform="rotate(165 284.949 205.164)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 223.59 285.66)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 221.617 300.605)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 228.508 291.504)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 210.727 288.855)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 222.312 264.598)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 216.355 283.082)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.821275 -0.570532 0.561827 0.827254 326.375 280.766)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 242.773 238.5)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 218.781 253.375)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.873077 0.487583 -0.78755 0.61625 207.047 193.66)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.873077 0.487583 -0.78755 0.61625 195.707 192.559)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.873077 0.487583 -0.78755 0.61625 205.625 198.098)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.873077 0.487583 -0.78755 0.61625 211.664 199.977)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.873077 0.487583 -0.78755 0.61625 160.984 190.082)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.873077 0.487583 -0.78755 0.61625 155.559 192.434)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 133.883 217.773)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 133.781 211.777)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 116.457 201.609)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 137.609 201.086)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 138.234 190.84)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 192.012 243.359)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 206.141 152.031)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 191.043 137.773)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 196.918 128.547)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 91.4062 242.418)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 85.6406 250.234)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 161.867 304.211)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 130.055 239.961)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.821275 -0.570532 0.561827 0.827254 305.57 267.625)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 208.223 148.23)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 207.758 155.742)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(0.061383 -0.998114 0.99741 0.07192 284.254 195.609)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 156.613 119.547)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 229.984 195.566)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 219.477 202.305)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 181.062 211.199)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 162.285 195.754)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 177.695 198.199)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 277.855 198.125)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 339.621 196.117)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 314.141 225.066)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(-0.542824 0.839847 -0.69552 -0.718507 285.195 254.875)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(-0.542824 0.839847 -0.69552 -0.718507 282.695 255.777)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 277.156 222.125)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(-0.542824 0.839847 -0.69552 -0.718507 291.809 278.703)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 337.43 262.766)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.628907" cy="0.629111" rx="0.628907" ry="0.629111" transform="matrix(-0.0613831 0.998114 -0.99741 -0.0719201 234.391 200.867)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 89.5469 161.543)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 206.141 91.6367)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.994947 -0.100399 0.322552 0.946552 132.203 239.43)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(0.322553 0.946552 -0.994947 0.100399 183.211 210.676)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.629111" cy="0.629111" rx="0.629111" ry="0.629111" transform="matrix(-0.95101 -0.309159 0.561017 -0.827804 184.664 93.0039)" fill="#A095CF" fill-opacity="0.6"/>
+<ellipse cx="0.629111" cy="0.629111" rx="0.629111" ry="0.629111" transform="matrix(-0.95101 -0.309159 0.561017 -0.827804 328.914 226.914)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(-0.958827 0.28399 -0.613701 -0.789538 318.617 244.406)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="0.629111" cy="0.629111" r="0.629111" transform="matrix(-0.958827 0.28399 -0.613701 -0.789538 221.516 72.4336)" fill="#A095CF" fill-opacity="0.6"/>
+<circle cx="233.21" cy="232.592" r="0.754933" transform="rotate(-15 233.21 232.592)" fill="#FFFFF9"/>
+<circle cx="147.098" cy="225.089" r="0.754933" transform="rotate(89.5676 147.098 225.089)" fill="#FFFFF9"/>
+<circle cx="144.007" cy="123.62" r="0.754933" transform="rotate(-15 144.007 123.62)" fill="#FFFFF9"/>
+<circle cx="293.464" cy="201.698" r="0.754933" transform="rotate(-15 293.464 201.698)" fill="#FFFFF9"/>
+<circle cx="251.3" cy="185.104" r="0.754933" transform="rotate(-15 251.3 185.104)" fill="#FFFFF9"/>
+<circle cx="326.655" cy="242.714" r="0.754933" transform="rotate(-15 326.655 242.714)" fill="#FFFFF9"/>
+<circle cx="399.206" cy="347.647" r="0.754933" transform="rotate(-15 399.206 347.647)" fill="#FFFFF9"/>
+<circle cx="272.636" cy="246.964" r="0.754933" transform="rotate(-15 272.636 246.964)" fill="#FFFFF9"/>
+<circle cx="222.819" cy="232.194" r="0.754933" transform="rotate(-15 222.819 232.194)" fill="#FFFFF9"/>
+<circle cx="174.866" cy="163.553" r="0.754933" transform="rotate(-15 174.866 163.553)" fill="#FFFFF9"/>
+<circle cx="179.061" cy="175.296" r="0.754933" transform="rotate(-15 179.061 175.296)" fill="#FFFFF9"/>
+<circle cx="187.448" cy="168.589" r="0.754933" transform="rotate(-15 187.448 168.589)" fill="#FFFFF9"/>
+<circle cx="251.415" cy="136.307" r="0.754933" transform="rotate(89.5676 251.415 136.307)" fill="#FFFFF9"/>
+<circle cx="271.34" cy="227.36" r="0.754934" transform="rotate(150 271.34 227.36)" fill="#FFFFF9"/>
+<circle cx="292.226" cy="209.708" r="0.754933" transform="rotate(-105.432 292.226 209.708)" fill="#FFFFF9"/>
+<circle cx="308.836" cy="251.818" r="0.754933" transform="rotate(-53.7389 308.836 251.818)" fill="#FFFFF9"/>
+<circle cx="202.171" cy="103.294" r="0.754933" transform="rotate(-105.432 202.171 103.294)" fill="#FFFFF9"/>
+<circle cx="246.656" cy="168.657" r="0.754933" transform="rotate(-105.432 246.656 168.657)" fill="#FFFFF9"/>
+<circle cx="125.988" cy="152.294" r="0.754933" transform="rotate(-105.432 125.988 152.294)" fill="#FFFFF9"/>
+<circle cx="194.097" cy="148.212" r="0.754933" transform="rotate(-105.432 194.097 148.212)" fill="#FFFFF9"/>
+<circle cx="172.07" cy="135.247" r="0.754933" transform="rotate(-105.432 172.07 135.247)" fill="#FFFFF9"/>
+<circle cx="192.156" cy="195.306" r="0.754933" transform="rotate(-105.432 192.156 195.306)" fill="#FFFFF9"/>
+<circle cx="110.312" cy="83.1612" r="0.754933" transform="rotate(-105.432 110.312 83.1612)" fill="#FFFFF9"/>
+<circle cx="121.914" cy="139.607" r="0.754933" transform="rotate(-105.432 121.914 139.607)" fill="#FFFFF9"/>
+<circle cx="206.304" cy="206.353" r="0.754933" transform="rotate(-105.432 206.304 206.353)" fill="#FFFFF9"/>
+<circle cx="223.082" cy="218.931" r="0.754933" transform="rotate(-105.432 223.082 218.931)" fill="#FFFFF9"/>
+<circle cx="375.667" cy="340.415" r="0.754933" transform="rotate(-105.432 375.667 340.415)" fill="#FFFFF9"/>
+<circle cx="231.085" cy="223.954" r="0.754933" transform="rotate(-105.432 231.085 223.954)" fill="#FFFFF9"/>
+<circle cx="282.75" cy="228.271" r="0.754934" transform="rotate(150 282.75 228.271)" fill="#FFFFF9"/>
+<circle cx="116.66" cy="237.161" r="0.754934" transform="rotate(150 116.66 237.161)" fill="#FFFFF9"/>
+<circle cx="289.957" cy="268.165" r="0.754934" transform="rotate(150 289.957 268.165)" fill="#FFFFF9"/>
+<circle cx="248.652" cy="253.622" r="0.754934" transform="rotate(150 248.652 253.622)" fill="#FFFFF9"/>
+<circle cx="292.781" cy="218.728" r="0.754933" transform="rotate(-105.432 292.781 218.728)" fill="#FFFFF9"/>
+<g filter="url(#filter3_b_2960_50603)">
+<rect x="49" y="145.008" width="263.922" height="31.6513" rx="8" fill="url(#paint0_linear_2960_50603)"/>
+<path d="M70.8523 159.832C70.7741 159.593 70.6712 159.379 70.5433 159.189C70.4179 158.998 70.2675 158.834 70.0923 158.699C69.9195 158.564 69.723 158.461 69.5028 158.39C69.2827 158.319 69.0412 158.284 68.7784 158.284C68.3475 158.284 67.9557 158.395 67.603 158.618C67.2502 158.84 66.9697 159.168 66.7614 159.601C66.553 160.034 66.4489 160.566 66.4489 161.196C66.4489 161.825 66.5542 162.357 66.7649 162.79C66.9756 163.223 67.2609 163.551 67.6207 163.774C67.9806 163.996 68.3854 164.108 68.8352 164.108C69.2519 164.108 69.6188 164.019 69.9361 163.841C70.2557 163.661 70.5043 163.408 70.6818 163.081C70.8617 162.752 70.9517 162.365 70.9517 161.92L71.2216 161.977H69.0341V161.196H71.804V161.977C71.804 162.576 71.6761 163.097 71.4205 163.539C71.1671 163.982 70.8168 164.325 70.3693 164.569C69.9242 164.811 69.4129 164.931 68.8352 164.931C68.1913 164.931 67.6255 164.78 67.1378 164.477C66.6525 164.174 66.2737 163.743 66.0014 163.184C65.7315 162.626 65.5966 161.963 65.5966 161.196C65.5966 160.62 65.6735 160.103 65.8274 159.644C65.9837 159.182 66.2038 158.789 66.4879 158.465C66.772 158.141 67.1082 157.892 67.4964 157.719C67.8847 157.546 68.312 157.46 68.7784 157.46C69.1619 157.46 69.5194 157.518 69.8509 157.634C70.1847 157.748 70.4818 157.91 70.7422 158.12C71.005 158.329 71.224 158.578 71.3991 158.87C71.5743 159.158 71.6951 159.479 71.7614 159.832H70.8523ZM75.4146 164.946C74.9222 164.946 74.4901 164.828 74.1184 164.594C73.7491 164.36 73.4603 164.032 73.252 163.61C73.046 163.189 72.943 162.697 72.943 162.133C72.943 161.565 73.046 161.069 73.252 160.645C73.4603 160.221 73.7491 159.892 74.1184 159.658C74.4901 159.424 74.9222 159.306 75.4146 159.306C75.907 159.306 76.3379 159.424 76.7072 159.658C77.0789 159.892 77.3677 160.221 77.5737 160.645C77.782 161.069 77.8862 161.565 77.8862 162.133C77.8862 162.697 77.782 163.189 77.5737 163.61C77.3677 164.032 77.0789 164.36 76.7072 164.594C76.3379 164.828 75.907 164.946 75.4146 164.946ZM75.4146 164.193C75.7886 164.193 76.0964 164.097 76.3379 163.905C76.5794 163.713 76.7581 163.461 76.8741 163.149C76.9901 162.836 77.0481 162.498 77.0481 162.133C77.0481 161.769 76.9901 161.429 76.8741 161.114C76.7581 160.799 76.5794 160.545 76.3379 160.35C76.0964 160.156 75.7886 160.059 75.4146 160.059C75.0405 160.059 74.7328 160.156 74.4913 160.35C74.2498 160.545 74.0711 160.799 73.9551 161.114C73.8391 161.429 73.7811 161.769 73.7811 162.133C73.7811 162.498 73.8391 162.836 73.9551 163.149C74.0711 163.461 74.2498 163.713 74.4913 163.905C74.7328 164.097 75.0405 164.193 75.4146 164.193ZM80.0036 157.559V164.832H79.1655V157.559H80.0036ZM83.5982 164.946C83.1436 164.946 82.7424 164.831 82.3944 164.601C82.0463 164.369 81.7741 164.042 81.5776 163.621C81.3811 163.197 81.2828 162.697 81.2828 162.119C81.2828 161.546 81.3811 161.049 81.5776 160.627C81.7741 160.206 82.0475 159.881 82.3979 159.651C82.7483 159.421 83.1531 159.306 83.6124 159.306C83.9675 159.306 84.248 159.366 84.454 159.484C84.6623 159.6 84.821 159.733 84.9299 159.882C85.0411 160.029 85.1275 160.149 85.1891 160.244H85.2601V157.559H86.0982V164.832H85.2885V163.994H85.1891C85.1275 164.093 85.04 164.219 84.9263 164.37C84.8127 164.52 84.6505 164.653 84.4398 164.772C84.2291 164.888 83.9486 164.946 83.5982 164.946ZM83.7118 164.193C84.048 164.193 84.3321 164.105 84.5641 163.93C84.7961 163.752 84.9725 163.507 85.0932 163.195C85.214 162.88 85.2743 162.517 85.2743 162.105C85.2743 161.698 85.2151 161.341 85.0968 161.036C84.9784 160.728 84.8032 160.489 84.5712 160.319C84.3392 160.146 84.0527 160.059 83.7118 160.059C83.3567 160.059 83.0608 160.15 82.824 160.333C82.5897 160.513 82.4133 160.758 82.2949 161.068C82.1789 161.376 82.1209 161.721 82.1209 162.105C82.1209 162.493 82.1801 162.846 82.2985 163.163C82.4192 163.478 82.5968 163.729 82.8311 163.916C83.0679 164.1 83.3614 164.193 83.7118 164.193ZM90.6756 164.832V157.559H93.133C93.7035 157.559 94.1699 157.662 94.5321 157.868C94.8967 158.072 95.1666 158.348 95.3418 158.696C95.517 159.044 95.6046 159.432 95.6046 159.86C95.6046 160.289 95.517 160.678 95.3418 161.029C95.169 161.379 94.9015 161.658 94.5392 161.867C94.177 162.073 93.713 162.176 93.1472 162.176H91.3858V161.395H93.1188C93.5094 161.395 93.8231 161.327 94.0598 161.192C94.2966 161.057 94.4682 160.875 94.5748 160.645C94.6837 160.413 94.7381 160.152 94.7381 159.86C94.7381 159.569 94.6837 159.309 94.5748 159.079C94.4682 158.85 94.2954 158.67 94.0563 158.539C93.8172 158.407 93.4999 158.341 93.1046 158.341H91.5563V164.832H90.6756ZM98.5147 164.96C98.1691 164.96 97.8554 164.895 97.5737 164.765C97.292 164.632 97.0682 164.441 96.9025 164.193C96.7368 163.942 96.6539 163.639 96.6539 163.284C96.6539 162.971 96.7155 162.718 96.8386 162.524C96.9617 162.327 97.1262 162.173 97.3322 162.062C97.5382 161.951 97.7654 161.868 98.014 161.814C98.265 161.757 98.5171 161.712 98.7704 161.679C99.1019 161.636 99.3706 161.604 99.5765 161.583C99.7849 161.559 99.9364 161.52 100.031 161.466C100.128 161.411 100.177 161.316 100.177 161.181V161.153C100.177 160.803 100.081 160.53 99.889 160.336C99.6996 160.142 99.412 160.045 99.0261 160.045C98.626 160.045 98.3123 160.133 98.085 160.308C97.8578 160.483 97.698 160.67 97.6056 160.869L96.8102 160.585C96.9522 160.253 97.1416 159.995 97.3784 159.811C97.6175 159.624 97.8779 159.493 98.1596 159.42C98.4437 159.344 98.7231 159.306 98.9977 159.306C99.1729 159.306 99.3741 159.328 99.6014 159.37C99.831 159.411 100.052 159.495 100.265 159.623C100.481 159.75 100.66 159.943 100.802 160.201C100.944 160.459 101.015 160.805 101.015 161.238V164.832H100.177V164.093H100.134C100.077 164.212 99.9825 164.338 99.85 164.473C99.7174 164.608 99.541 164.723 99.3208 164.818C99.1007 164.913 98.832 164.96 98.5147 164.96ZM98.6426 164.207C98.974 164.207 99.2534 164.142 99.4806 164.012C99.7103 163.882 99.8831 163.713 99.9991 163.507C100.117 163.301 100.177 163.085 100.177 162.858V162.091C100.141 162.133 100.063 162.172 99.9423 162.208C99.8239 162.241 99.6866 162.27 99.5304 162.297C99.3765 162.32 99.2261 162.342 99.0794 162.36C98.935 162.377 98.8178 162.391 98.7278 162.403C98.51 162.431 98.3064 162.478 98.117 162.542C97.93 162.603 97.7785 162.697 97.6625 162.822C97.5488 162.945 97.492 163.113 97.492 163.326C97.492 163.618 97.5997 163.838 97.8152 163.987C98.033 164.134 98.3088 164.207 98.6426 164.207ZM102.544 164.832V159.377H103.354V160.201H103.411C103.51 159.931 103.69 159.712 103.951 159.544C104.211 159.376 104.505 159.292 104.831 159.292C104.893 159.292 104.97 159.293 105.062 159.296C105.154 159.298 105.224 159.302 105.272 159.306V160.159C105.243 160.152 105.178 160.141 105.076 160.127C104.977 160.11 104.872 160.102 104.76 160.102C104.495 160.102 104.258 160.158 104.05 160.269C103.844 160.378 103.681 160.529 103.56 160.723C103.442 160.915 103.382 161.134 103.382 161.38V164.832H102.544ZM108.979 159.377V160.088H106.152V159.377H108.979ZM106.976 158.071H107.814V163.27C107.814 163.506 107.849 163.684 107.917 163.802C107.988 163.918 108.078 163.996 108.187 164.037C108.298 164.074 108.416 164.093 108.539 164.093C108.631 164.093 108.707 164.089 108.766 164.079C108.825 164.067 108.873 164.058 108.908 164.051L109.078 164.804C109.022 164.825 108.942 164.846 108.841 164.868C108.739 164.891 108.61 164.903 108.453 164.903C108.217 164.903 107.985 164.852 107.757 164.75C107.533 164.649 107.346 164.493 107.196 164.285C107.05 164.077 106.976 163.814 106.976 163.497V158.071ZM110.24 164.832V159.377H111.078V164.832H110.24ZM110.666 158.468C110.502 158.468 110.362 158.413 110.243 158.301C110.127 158.19 110.069 158.056 110.069 157.9C110.069 157.744 110.127 157.61 110.243 157.499C110.362 157.388 110.502 157.332 110.666 157.332C110.829 157.332 110.969 157.388 111.085 157.499C111.203 157.61 111.262 157.744 111.262 157.9C111.262 158.056 111.203 158.19 111.085 158.301C110.969 158.413 110.829 158.468 110.666 158.468ZM114.829 164.946C114.317 164.946 113.877 164.825 113.508 164.583C113.138 164.342 112.854 164.009 112.655 163.586C112.456 163.162 112.357 162.678 112.357 162.133C112.357 161.579 112.459 161.09 112.662 160.667C112.868 160.24 113.155 159.908 113.522 159.669C113.891 159.427 114.322 159.306 114.814 159.306C115.198 159.306 115.544 159.377 115.851 159.52C116.159 159.662 116.411 159.86 116.608 160.116C116.804 160.372 116.926 160.67 116.974 161.011H116.135C116.072 160.762 115.93 160.542 115.709 160.35C115.492 160.156 115.198 160.059 114.829 160.059C114.502 160.059 114.215 160.145 113.969 160.315C113.725 160.483 113.535 160.721 113.398 161.029C113.263 161.334 113.195 161.693 113.195 162.105C113.195 162.526 113.261 162.893 113.394 163.206C113.529 163.518 113.718 163.761 113.962 163.934C114.208 164.106 114.497 164.193 114.829 164.193C115.046 164.193 115.244 164.155 115.422 164.079C115.599 164.003 115.75 163.895 115.873 163.752C115.996 163.61 116.083 163.44 116.135 163.241H116.974C116.926 163.563 116.809 163.853 116.622 164.111C116.437 164.367 116.192 164.57 115.887 164.722C115.584 164.871 115.231 164.946 114.829 164.946ZM119.037 157.559V164.832H118.199V157.559H119.037ZM122.859 164.946C122.333 164.946 121.88 164.83 121.499 164.598C121.12 164.363 120.827 164.037 120.621 163.618C120.418 163.196 120.316 162.706 120.316 162.147C120.316 161.589 120.418 161.096 120.621 160.67C120.827 160.242 121.114 159.908 121.481 159.669C121.85 159.427 122.281 159.306 122.773 159.306C123.058 159.306 123.338 159.354 123.615 159.449C123.892 159.543 124.144 159.697 124.371 159.91C124.599 160.121 124.78 160.4 124.915 160.748C125.05 161.096 125.117 161.525 125.117 162.034V162.389H120.913V161.664H124.265C124.265 161.357 124.203 161.082 124.08 160.841C123.96 160.599 123.787 160.408 123.562 160.269C123.339 160.129 123.076 160.059 122.773 160.059C122.44 160.059 122.151 160.142 121.907 160.308C121.665 160.471 121.48 160.684 121.349 160.947C121.219 161.21 121.154 161.492 121.154 161.792V162.275C121.154 162.687 121.225 163.036 121.367 163.323C121.512 163.607 121.712 163.824 121.967 163.973C122.223 164.119 122.52 164.193 122.859 164.193C123.079 164.193 123.278 164.162 123.455 164.1C123.635 164.037 123.79 163.942 123.92 163.816C124.051 163.689 124.151 163.53 124.222 163.341L125.032 163.568C124.947 163.842 124.804 164.084 124.602 164.292C124.401 164.498 124.152 164.659 123.857 164.775C123.561 164.889 123.228 164.946 122.859 164.946ZM130.256 160.599L129.503 160.812C129.455 160.687 129.386 160.565 129.293 160.446C129.203 160.326 129.08 160.226 128.924 160.148C128.768 160.07 128.568 160.031 128.324 160.031C127.99 160.031 127.712 160.108 127.489 160.262C127.269 160.413 127.159 160.606 127.159 160.841C127.159 161.049 127.235 161.213 127.386 161.334C127.538 161.455 127.775 161.556 128.097 161.636L128.906 161.835C129.394 161.953 129.757 162.134 129.996 162.378C130.236 162.62 130.355 162.931 130.355 163.312C130.355 163.625 130.265 163.904 130.085 164.15C129.908 164.396 129.659 164.591 129.339 164.733C129.02 164.875 128.648 164.946 128.224 164.946C127.668 164.946 127.208 164.825 126.843 164.583C126.478 164.342 126.248 163.989 126.151 163.525L126.946 163.326C127.022 163.62 127.165 163.84 127.376 163.987C127.589 164.134 127.867 164.207 128.21 164.207C128.601 164.207 128.911 164.124 129.141 163.958C129.373 163.79 129.489 163.589 129.489 163.355C129.489 163.165 129.422 163.007 129.29 162.879C129.157 162.749 128.954 162.652 128.679 162.588L127.77 162.375C127.27 162.256 126.903 162.073 126.669 161.824C126.437 161.573 126.321 161.26 126.321 160.883C126.321 160.575 126.407 160.303 126.58 160.066C126.755 159.83 126.993 159.644 127.294 159.509C127.597 159.374 127.94 159.306 128.324 159.306C128.864 159.306 129.287 159.425 129.595 159.662C129.905 159.898 130.125 160.211 130.256 160.599ZM138.52 159.377C138.477 159.018 138.305 158.738 138.002 158.539C137.699 158.341 137.327 158.241 136.887 158.241C136.565 158.241 136.283 158.293 136.041 158.397C135.802 158.502 135.615 158.645 135.48 158.827C135.348 159.009 135.281 159.217 135.281 159.449C135.281 159.643 135.328 159.81 135.42 159.949C135.515 160.087 135.635 160.201 135.782 160.294C135.929 160.384 136.083 160.458 136.244 160.517C136.405 160.574 136.553 160.62 136.688 160.656L137.426 160.855C137.616 160.904 137.826 160.973 138.058 161.061C138.293 161.148 138.517 161.268 138.73 161.419C138.945 161.569 139.123 161.76 139.262 161.995C139.402 162.229 139.472 162.517 139.472 162.858C139.472 163.251 139.369 163.606 139.163 163.923C138.959 164.24 138.661 164.492 138.268 164.679C137.877 164.866 137.403 164.96 136.844 164.96C136.323 164.96 135.872 164.876 135.491 164.708C135.112 164.54 134.814 164.305 134.596 164.005C134.381 163.704 134.259 163.355 134.23 162.957H135.139C135.163 163.232 135.255 163.459 135.416 163.639C135.58 163.816 135.786 163.949 136.034 164.037C136.285 164.122 136.555 164.164 136.844 164.164C137.18 164.164 137.482 164.11 137.749 164.001C138.017 163.89 138.229 163.736 138.385 163.539C138.541 163.341 138.619 163.109 138.619 162.843C138.619 162.602 138.552 162.405 138.417 162.254C138.282 162.102 138.105 161.979 137.884 161.885C137.664 161.79 137.426 161.707 137.171 161.636L136.276 161.38C135.708 161.217 135.258 160.984 134.926 160.681C134.595 160.378 134.429 159.981 134.429 159.491C134.429 159.084 134.539 158.729 134.759 158.426C134.982 158.12 135.28 157.884 135.654 157.716C136.031 157.545 136.451 157.46 136.915 157.46C137.384 157.46 137.8 157.544 138.165 157.712C138.53 157.878 138.818 158.105 139.031 158.394C139.247 158.683 139.36 159.011 139.372 159.377H138.52ZM140.806 164.832V159.377H141.644V164.832H140.806ZM141.232 158.468C141.069 158.468 140.928 158.413 140.81 158.301C140.694 158.19 140.636 158.056 140.636 157.9C140.636 157.744 140.694 157.61 140.81 157.499C140.928 157.388 141.069 157.332 141.232 157.332C141.396 157.332 141.535 157.388 141.651 157.499C141.77 157.61 141.829 157.744 141.829 157.9C141.829 158.056 141.77 158.19 141.651 158.301C141.535 158.413 141.396 158.468 141.232 158.468ZM143.023 164.832V164.193L146.119 160.216V160.159H143.122V159.377H147.199V160.045L144.188 163.994V164.051H147.298V164.832H143.023ZM150.72 164.946C150.194 164.946 149.741 164.83 149.36 164.598C148.981 164.363 148.689 164.037 148.483 163.618C148.279 163.196 148.177 162.706 148.177 162.147C148.177 161.589 148.279 161.096 148.483 160.67C148.689 160.242 148.975 159.908 149.342 159.669C149.711 159.427 150.142 159.306 150.635 159.306C150.919 159.306 151.199 159.354 151.476 159.449C151.753 159.543 152.006 159.697 152.233 159.91C152.46 160.121 152.641 160.4 152.776 160.748C152.911 161.096 152.979 161.525 152.979 162.034V162.389H148.774V161.664H152.126C152.126 161.357 152.065 161.082 151.942 160.841C151.821 160.599 151.648 160.408 151.423 160.269C151.201 160.129 150.938 160.059 150.635 160.059C150.301 160.059 150.012 160.142 149.768 160.308C149.527 160.471 149.341 160.684 149.211 160.947C149.081 161.21 149.015 161.492 149.015 161.792V162.275C149.015 162.687 149.086 163.036 149.229 163.323C149.373 163.607 149.573 163.824 149.829 163.973C150.084 164.119 150.381 164.193 150.72 164.193C150.94 164.193 151.139 164.162 151.317 164.1C151.497 164.037 151.652 163.942 151.782 163.816C151.912 163.689 152.013 163.53 152.084 163.341L152.893 163.568C152.808 163.842 152.665 164.084 152.464 164.292C152.262 164.498 152.014 164.659 151.718 164.775C151.422 164.889 151.089 164.946 150.72 164.946Z" fill="white" fill-opacity="0.68"/>
+<g filter="url(#filter4_b_2960_50603)">
+<rect x="162" y="153.008" width="113.922" height="15.6513" rx="2.98" fill="url(#paint1_linear_2960_50603)"/>
+<rect x="162.25" y="153.258" width="113.422" height="15.1513" rx="2.73" stroke="url(#paint2_linear_2960_50603)" stroke-width="0.5"/>
+</g>
+<g opacity="0.8" filter="url(#filter5_b_2960_50603)">
+<rect x="162" y="153.008" width="10.3086" height="15.6513" rx="2.98" fill="url(#paint3_linear_2960_50603)"/>
+</g>
+<path d="M287.232 157.559V164.832H286.351V158.483H286.308L284.533 159.662V158.767L286.351 157.559H287.232ZM289.518 164.889C289.343 164.889 289.193 164.826 289.067 164.701C288.942 164.575 288.879 164.425 288.879 164.25C288.879 164.074 288.942 163.924 289.067 163.799C289.193 163.673 289.343 163.61 289.518 163.61C289.694 163.61 289.844 163.673 289.969 163.799C290.095 163.924 290.158 164.074 290.158 164.25C290.158 164.366 290.128 164.472 290.069 164.569C290.012 164.666 289.935 164.744 289.838 164.804C289.743 164.86 289.637 164.889 289.518 164.889ZM293.774 164.931C293.357 164.931 292.982 164.849 292.648 164.683C292.314 164.517 292.047 164.29 291.845 164.001C291.644 163.712 291.534 163.383 291.515 163.014H292.367C292.401 163.343 292.55 163.615 292.815 163.831C293.082 164.044 293.402 164.15 293.774 164.15C294.072 164.15 294.337 164.08 294.569 163.941C294.803 163.801 294.987 163.609 295.119 163.365C295.254 163.119 295.322 162.841 295.322 162.531C295.322 162.214 295.252 161.931 295.112 161.682C294.975 161.431 294.786 161.234 294.544 161.089C294.303 160.945 294.027 160.871 293.717 160.869C293.494 160.867 293.266 160.901 293.031 160.972C292.797 161.041 292.604 161.129 292.453 161.238L291.629 161.139L292.069 157.559H295.847V158.341H292.808L292.552 160.485H292.595C292.744 160.367 292.931 160.269 293.156 160.191C293.381 160.113 293.615 160.074 293.859 160.074C294.304 160.074 294.7 160.18 295.048 160.393C295.399 160.604 295.673 160.893 295.872 161.26C296.074 161.627 296.174 162.046 296.174 162.517C296.174 162.981 296.07 163.395 295.862 163.76C295.656 164.122 295.372 164.408 295.009 164.619C294.647 164.827 294.235 164.931 293.774 164.931Z" fill="white" fill-opacity="0.68"/>
+<rect x="49.25" y="145.258" width="263.422" height="31.1513" rx="7.75" stroke="url(#paint4_linear_2960_50603)" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter6_b_2960_50603)">
+<rect x="49" y="185.66" width="263.922" height="31.6513" rx="8" fill="url(#paint5_linear_2960_50603)"/>
+<path d="M65.8807 198.212H66.9318L69.4034 204.249H69.4886L71.9602 198.212H73.0114V205.484H72.1875V199.959H72.1165L69.8438 205.484H69.0483L66.7756 199.959H66.7045V205.484H65.8807V198.212ZM76.2686 205.612C75.923 205.612 75.6093 205.547 75.3276 205.417C75.0459 205.284 74.8221 205.094 74.6564 204.845C74.4907 204.594 74.4078 204.291 74.4078 203.936C74.4078 203.624 74.4694 203.37 74.5925 203.176C74.7156 202.98 74.8801 202.826 75.0861 202.714C75.2921 202.603 75.5194 202.52 75.7679 202.466C76.0189 202.409 76.271 202.364 76.5243 202.331C76.8558 202.288 77.1245 202.256 77.3304 202.235C77.5388 202.211 77.6903 202.172 77.785 202.118C77.882 202.063 77.9306 201.969 77.9306 201.834V201.805C77.9306 201.455 77.8347 201.183 77.6429 200.989C77.4535 200.795 77.1659 200.697 76.78 200.697C76.3799 200.697 76.0662 200.785 75.839 200.96C75.6117 201.135 75.4519 201.322 75.3596 201.521L74.5641 201.237C74.7061 200.906 74.8955 200.648 75.1323 200.463C75.3714 200.276 75.6318 200.146 75.9135 200.072C76.1976 199.997 76.477 199.959 76.7516 199.959C76.9268 199.959 77.128 199.98 77.3553 200.023C77.5849 200.063 77.8063 200.147 78.0194 200.275C78.2348 200.403 78.4135 200.596 78.5556 200.854C78.6976 201.112 78.7686 201.457 78.7686 201.891V205.484H77.9306V204.746H77.888C77.8311 204.864 77.7364 204.991 77.6039 205.126C77.4713 205.261 77.2949 205.375 77.0748 205.47C76.8546 205.565 76.5859 205.612 76.2686 205.612ZM76.3965 204.859C76.7279 204.859 77.0073 204.794 77.2346 204.664C77.4642 204.534 77.637 204.366 77.753 204.16C77.8714 203.954 77.9306 203.737 77.9306 203.51V202.743C77.8951 202.786 77.8169 202.825 77.6962 202.86C77.5778 202.893 77.4405 202.923 77.2843 202.949C77.1304 202.973 76.9801 202.994 76.8333 203.013C76.6889 203.029 76.5717 203.044 76.4817 203.055C76.2639 203.084 76.0603 203.13 75.8709 203.194C75.6839 203.255 75.5324 203.349 75.4164 203.474C75.3027 203.598 75.2459 203.766 75.2459 203.979C75.2459 204.27 75.3536 204.49 75.5691 204.639C75.7869 204.786 76.0627 204.859 76.3965 204.859ZM80.9233 200.03L82.2301 202.26L83.5369 200.03H84.5028L82.7415 202.757L84.5028 205.484H83.5369L82.2301 203.368L80.9233 205.484H79.9574L81.6903 202.757L79.9574 200.03H80.9233ZM92.3748 201.251L91.622 201.464C91.5746 201.339 91.5048 201.217 91.4125 201.099C91.3225 200.978 91.1994 200.879 91.0431 200.8C90.8869 200.722 90.6868 200.683 90.443 200.683C90.1092 200.683 89.831 200.76 89.6085 200.914C89.3883 201.066 89.2782 201.259 89.2782 201.493C89.2782 201.701 89.354 201.866 89.5055 201.987C89.657 202.107 89.8938 202.208 90.2157 202.288L91.0254 202.487C91.5131 202.606 91.8765 202.787 92.1156 203.031C92.3547 203.272 92.4743 203.583 92.4743 203.964C92.4743 204.277 92.3843 204.556 92.2044 204.803C92.0268 205.049 91.7782 205.243 91.4586 205.385C91.139 205.527 90.7673 205.598 90.3436 205.598C89.7872 205.598 89.3268 205.477 88.9622 205.236C88.5976 204.994 88.3668 204.642 88.2697 204.178L89.0652 203.979C89.1409 204.272 89.2842 204.492 89.4949 204.639C89.7079 204.786 89.9861 204.859 90.3294 204.859C90.72 204.859 91.0301 204.777 91.2598 204.611C91.4918 204.443 91.6078 204.241 91.6078 204.007C91.6078 203.818 91.5415 203.659 91.4089 203.531C91.2763 203.401 91.0727 203.304 90.7981 203.24L89.889 203.027C89.3895 202.909 89.0225 202.725 88.7882 202.477C88.5562 202.226 88.4402 201.912 88.4402 201.536C88.4402 201.228 88.5266 200.955 88.6994 200.719C88.8746 200.482 89.1125 200.296 89.4132 200.161C89.7162 200.026 90.0595 199.959 90.443 199.959C90.9828 199.959 91.4065 200.077 91.7143 200.314C92.0244 200.551 92.2446 200.863 92.3748 201.251ZM93.7358 207.53V200.03H94.5455V200.896H94.6449C94.7064 200.802 94.7917 200.681 94.9006 200.534C95.0118 200.385 95.1705 200.252 95.3764 200.136C95.5848 200.018 95.8665 199.959 96.2216 199.959C96.6809 199.959 97.0857 200.074 97.4361 200.303C97.7865 200.533 98.0599 200.858 98.2564 201.28C98.4529 201.701 98.5511 202.198 98.5511 202.771C98.5511 203.349 98.4529 203.85 98.2564 204.273C98.0599 204.695 97.7876 205.022 97.4396 205.254C97.0916 205.483 96.6903 205.598 96.2358 205.598C95.8854 205.598 95.6049 205.54 95.3942 205.424C95.1835 205.306 95.0213 205.172 94.9077 205.023C94.794 204.871 94.7064 204.746 94.6449 204.646H94.5739V207.53H93.7358ZM94.5597 202.757C94.5597 203.169 94.62 203.532 94.7408 203.847C94.8615 204.16 95.0379 204.405 95.2699 204.582C95.5019 204.758 95.786 204.845 96.1222 204.845C96.4725 204.845 96.7649 204.753 96.9993 204.568C97.236 204.381 97.4136 204.13 97.532 203.815C97.6527 203.498 97.7131 203.145 97.7131 202.757C97.7131 202.374 97.6539 202.028 97.5355 201.72C97.4195 201.41 97.2431 201.165 97.0064 200.985C96.772 200.803 96.4773 200.712 96.1222 200.712C95.7813 200.712 95.4948 200.798 95.2628 200.971C95.0308 201.141 94.8556 201.38 94.7372 201.688C94.6188 201.994 94.5597 202.35 94.5597 202.757ZM102.116 205.598C101.591 205.598 101.138 205.482 100.756 205.25C100.378 205.016 100.085 204.689 99.8793 204.27C99.6757 203.848 99.5739 203.358 99.5739 202.8C99.5739 202.241 99.6757 201.749 99.8793 201.322C100.085 200.894 100.372 200.56 100.739 200.321C101.108 200.08 101.539 199.959 102.031 199.959C102.315 199.959 102.596 200.006 102.873 200.101C103.15 200.196 103.402 200.349 103.629 200.562C103.857 200.773 104.038 201.053 104.173 201.401C104.308 201.749 104.375 202.177 104.375 202.686V203.041H100.17V202.317H103.523C103.523 202.009 103.461 201.734 103.338 201.493C103.217 201.251 103.045 201.061 102.82 200.921C102.597 200.781 102.334 200.712 102.031 200.712C101.697 200.712 101.409 200.795 101.165 200.96C100.923 201.124 100.737 201.337 100.607 201.599C100.477 201.862 100.412 202.144 100.412 202.445V202.928C100.412 203.339 100.483 203.689 100.625 203.975C100.769 204.259 100.969 204.476 101.225 204.625C101.481 204.772 101.778 204.845 102.116 204.845C102.337 204.845 102.536 204.814 102.713 204.753C102.893 204.689 103.048 204.594 103.178 204.469C103.308 204.341 103.409 204.182 103.48 203.993L104.29 204.22C104.205 204.495 104.061 204.736 103.86 204.945C103.659 205.151 103.41 205.312 103.114 205.428C102.818 205.541 102.486 205.598 102.116 205.598ZM107.937 205.598C107.411 205.598 106.958 205.482 106.577 205.25C106.198 205.016 105.906 204.689 105.7 204.27C105.496 203.848 105.394 203.358 105.394 202.8C105.394 202.241 105.496 201.749 105.7 201.322C105.906 200.894 106.192 200.56 106.559 200.321C106.928 200.08 107.359 199.959 107.852 199.959C108.136 199.959 108.416 200.006 108.693 200.101C108.97 200.196 109.222 200.349 109.45 200.562C109.677 200.773 109.858 201.053 109.993 201.401C110.128 201.749 110.195 202.177 110.195 202.686V203.041H105.991V202.317H109.343C109.343 202.009 109.281 201.734 109.158 201.493C109.038 201.251 108.865 201.061 108.64 200.921C108.417 200.781 108.155 200.712 107.852 200.712C107.518 200.712 107.229 200.795 106.985 200.96C106.744 201.124 106.558 201.337 106.428 201.599C106.297 201.862 106.232 202.144 106.232 202.445V202.928C106.232 203.339 106.303 203.689 106.445 203.975C106.59 204.259 106.79 204.476 107.045 204.625C107.301 204.772 107.598 204.845 107.937 204.845C108.157 204.845 108.356 204.814 108.533 204.753C108.713 204.689 108.868 204.594 108.999 204.469C109.129 204.341 109.229 204.182 109.3 203.993L110.11 204.22C110.025 204.495 109.882 204.736 109.68 204.945C109.479 205.151 109.231 205.312 108.935 205.428C108.639 205.541 108.306 205.598 107.937 205.598ZM113.53 205.598C113.075 205.598 112.674 205.483 112.326 205.254C111.978 205.022 111.706 204.695 111.509 204.273C111.313 203.85 111.214 203.349 111.214 202.771C111.214 202.198 111.313 201.701 111.509 201.28C111.706 200.858 111.979 200.533 112.33 200.303C112.68 200.074 113.085 199.959 113.544 199.959C113.899 199.959 114.18 200.018 114.386 200.136C114.594 200.252 114.753 200.385 114.862 200.534C114.973 200.681 115.059 200.802 115.121 200.896H115.192V198.212H116.03V205.484H115.22V204.646H115.121C115.059 204.746 114.972 204.871 114.858 205.023C114.744 205.172 114.582 205.306 114.371 205.424C114.161 205.54 113.88 205.598 113.53 205.598ZM113.643 204.845C113.98 204.845 114.264 204.758 114.496 204.582C114.728 204.405 114.904 204.16 115.025 203.847C115.146 203.532 115.206 203.169 115.206 202.757C115.206 202.35 115.147 201.994 115.028 201.688C114.91 201.38 114.735 201.141 114.503 200.971C114.271 200.798 113.984 200.712 113.643 200.712C113.288 200.712 112.992 200.803 112.756 200.985C112.521 201.165 112.345 201.41 112.227 201.72C112.111 202.028 112.053 202.374 112.053 202.757C112.053 203.145 112.112 203.498 112.23 203.815C112.351 204.13 112.528 204.381 112.763 204.568C113 204.753 113.293 204.845 113.643 204.845Z" fill="white" fill-opacity="0.68"/>
+<g filter="url(#filter7_b_2960_50603)">
+<rect x="162" y="193.66" width="113.922" height="15.6513" rx="2.98" fill="url(#paint6_linear_2960_50603)"/>
+<rect x="162.25" y="193.91" width="113.422" height="15.1513" rx="2.73" stroke="url(#paint7_linear_2960_50603)" stroke-width="0.5"/>
+</g>
+<g opacity="0.8" filter="url(#filter8_b_2960_50603)">
+<rect x="162" y="193.66" width="71.4336" height="15.6513" rx="2.98" fill="url(#paint8_linear_2960_50603)"/>
+</g>
+<path d="M287.047 205.584C286.512 205.584 286.056 205.438 285.68 205.147C285.303 204.853 285.016 204.429 284.817 203.872C284.618 203.313 284.518 202.639 284.518 201.848C284.518 201.062 284.618 200.391 284.817 199.835C285.018 199.276 285.307 198.85 285.683 198.556C286.062 198.26 286.517 198.112 287.047 198.112C287.577 198.112 288.031 198.26 288.407 198.556C288.786 198.85 289.075 199.276 289.273 199.835C289.475 200.391 289.575 201.062 289.575 201.848C289.575 202.639 289.476 203.313 289.277 203.872C289.078 204.429 288.79 204.853 288.414 205.147C288.038 205.438 287.582 205.584 287.047 205.584ZM287.047 204.803C287.577 204.803 287.989 204.547 288.283 204.036C288.576 203.524 288.723 202.795 288.723 201.848C288.723 201.218 288.656 200.682 288.521 200.239C288.388 199.797 288.196 199.459 287.945 199.227C287.697 198.995 287.397 198.879 287.047 198.879C286.521 198.879 286.111 199.138 285.815 199.657C285.519 200.173 285.371 200.903 285.371 201.848C285.371 202.478 285.437 203.013 285.57 203.453C285.702 203.893 285.893 204.228 286.141 204.458C286.392 204.688 286.694 204.803 287.047 204.803ZM291.296 205.541C291.121 205.541 290.97 205.478 290.845 205.353C290.719 205.228 290.657 205.077 290.657 204.902C290.657 204.727 290.719 204.576 290.845 204.451C290.97 204.326 291.121 204.263 291.296 204.263C291.471 204.263 291.621 204.326 291.747 204.451C291.872 204.576 291.935 204.727 291.935 204.902C291.935 205.018 291.905 205.125 291.846 205.222C291.789 205.319 291.712 205.397 291.615 205.456C291.521 205.513 291.414 205.541 291.296 205.541ZM295.112 198.212V205.484H294.232V199.135H294.189L292.414 200.314V199.419L294.232 198.212H295.112Z" fill="white" fill-opacity="0.68"/>
+<rect x="49.25" y="185.91" width="263.422" height="31.1513" rx="7.75" stroke="url(#paint9_linear_2960_50603)" stroke-width="0.5"/>
+</g>
+<g filter="url(#filter9_b_2960_50603)">
+<rect x="49" y="226.309" width="264" height="31.6513" rx="8" fill="url(#paint10_linear_2960_50603)"/>
+<path d="M65.8807 246.133V238.86H68.3381C68.9063 238.86 69.3726 238.957 69.7372 239.151C70.1018 239.343 70.3717 239.607 70.5469 239.943C70.7221 240.279 70.8097 240.662 70.8097 241.09C70.8097 241.519 70.7221 241.899 70.5469 242.23C70.3717 242.562 70.103 242.822 69.7408 243.011C69.3786 243.198 68.9157 243.292 68.3523 243.292H66.3636V242.496H68.3239C68.7121 242.496 69.0246 242.44 69.2614 242.326C69.5005 242.212 69.6733 242.051 69.7798 241.843C69.8887 241.632 69.9432 241.381 69.9432 241.09C69.9432 240.799 69.8887 240.545 69.7798 240.327C69.6709 240.109 69.4969 239.941 69.2578 239.822C69.0187 239.702 68.7027 239.641 68.3097 239.641H66.7614V246.133H65.8807ZM69.304 242.866L71.0938 246.133H70.071L68.3097 242.866H69.304ZM73.7686 246.261C73.423 246.261 73.1093 246.196 72.8276 246.065C72.5459 245.933 72.3221 245.742 72.1564 245.494C71.9907 245.243 71.9078 244.94 71.9078 244.585C71.9078 244.272 71.9694 244.019 72.0925 243.825C72.2156 243.628 72.3801 243.474 72.5861 243.363C72.7921 243.252 73.0194 243.169 73.2679 243.114C73.5189 243.058 73.771 243.013 74.0243 242.979C74.3558 242.937 74.6245 242.905 74.8304 242.884C75.0388 242.86 75.1903 242.821 75.285 242.766C75.382 242.712 75.4306 242.617 75.4306 242.482V242.454C75.4306 242.103 75.3347 241.831 75.1429 241.637C74.9535 241.443 74.6659 241.346 74.28 241.346C73.8799 241.346 73.5662 241.433 73.339 241.609C73.1117 241.784 72.9519 241.971 72.8596 242.17L72.0641 241.886C72.2061 241.554 72.3955 241.296 72.6323 241.112C72.8714 240.924 73.1318 240.794 73.4135 240.721C73.6976 240.645 73.977 240.607 74.2516 240.607C74.4268 240.607 74.628 240.629 74.8553 240.671C75.0849 240.711 75.3063 240.795 75.5194 240.923C75.7348 241.051 75.9135 241.244 76.0556 241.502C76.1976 241.76 76.2686 242.106 76.2686 242.539V246.133H75.4306V245.394H75.388C75.3311 245.513 75.2364 245.639 75.1039 245.774C74.9713 245.909 74.7949 246.024 74.5748 246.119C74.3546 246.213 74.0859 246.261 73.7686 246.261ZM73.8965 245.508C74.2279 245.508 74.5073 245.443 74.7346 245.312C74.9642 245.182 75.137 245.014 75.253 244.808C75.3714 244.602 75.4306 244.386 75.4306 244.158V243.391C75.3951 243.434 75.3169 243.473 75.1962 243.509C75.0778 243.542 74.9405 243.571 74.7843 243.597C74.6304 243.621 74.4801 243.642 74.3333 243.661C74.1889 243.678 74.0717 243.692 73.9817 243.704C73.7639 243.732 73.5603 243.778 73.3709 243.842C73.1839 243.904 73.0324 243.997 72.9164 244.123C72.8027 244.246 72.7459 244.414 72.7459 244.627C72.7459 244.918 72.8536 245.138 73.0691 245.288C73.2869 245.434 73.5627 245.508 73.8965 245.508ZM78.6364 242.852V246.133H77.7983V240.678H78.608V241.531H78.679C78.8068 241.254 79.0009 241.031 79.2614 240.863C79.5218 240.692 79.858 240.607 80.2699 240.607C80.6392 240.607 80.9624 240.683 81.2393 240.835C81.5163 240.984 81.7318 241.211 81.8857 241.516C82.0395 241.819 82.1165 242.203 82.1165 242.667V246.133H81.2784V242.724C81.2784 242.295 81.1671 241.961 80.9446 241.722C80.7221 241.481 80.4167 241.36 80.0284 241.36C79.7609 241.36 79.5218 241.418 79.3111 241.534C79.1027 241.65 78.9382 241.819 78.8175 242.042C78.6967 242.264 78.6364 242.534 78.6364 242.852ZM85.7076 246.246C85.253 246.246 84.8517 246.132 84.5037 245.902C84.1557 245.67 83.8835 245.343 83.687 244.922C83.4905 244.498 83.3922 243.997 83.3922 243.42C83.3922 242.847 83.4905 242.35 83.687 241.928C83.8835 241.507 84.1569 241.181 84.5073 240.952C84.8577 240.722 85.2625 240.607 85.7218 240.607C86.0769 240.607 86.3574 240.666 86.5634 240.785C86.7717 240.901 86.9303 241.033 87.0392 241.183C87.1505 241.329 87.2369 241.45 87.2985 241.545H87.3695V238.86H88.2076V246.133H87.3979V245.295H87.2985C87.2369 245.394 87.1493 245.52 87.0357 245.671C86.9221 245.82 86.7599 245.954 86.5492 246.072C86.3385 246.188 86.0579 246.246 85.7076 246.246ZM85.8212 245.494C86.1574 245.494 86.4415 245.406 86.6735 245.231C86.9055 245.053 87.0819 244.808 87.2026 244.496C87.3233 244.181 87.3837 243.817 87.3837 243.406C87.3837 242.998 87.3245 242.642 87.2061 242.337C87.0878 242.029 86.9126 241.79 86.6806 241.619C86.4486 241.446 86.1621 241.36 85.8212 241.36C85.4661 241.36 85.1702 241.451 84.9334 241.634C84.699 241.813 84.5227 242.058 84.4043 242.369C84.2883 242.676 84.2303 243.022 84.2303 243.406C84.2303 243.794 84.2895 244.147 84.4078 244.464C84.5286 244.779 84.7061 245.03 84.9405 245.217C85.1773 245.401 85.4708 245.494 85.8212 245.494ZM92.0748 246.246C91.5823 246.246 91.1503 246.129 90.7786 245.895C90.4093 245.661 90.1204 245.333 89.9121 244.911C89.7061 244.49 89.6032 243.997 89.6032 243.434C89.6032 242.866 89.7061 242.37 89.9121 241.946C90.1204 241.522 90.4093 241.193 90.7786 240.959C91.1503 240.724 91.5823 240.607 92.0748 240.607C92.5672 240.607 92.998 240.724 93.3674 240.959C93.7391 241.193 94.0279 241.522 94.2338 241.946C94.4422 242.37 94.5463 242.866 94.5463 243.434C94.5463 243.997 94.4422 244.49 94.2338 244.911C94.0279 245.333 93.7391 245.661 93.3674 245.895C92.998 246.129 92.5672 246.246 92.0748 246.246ZM92.0748 245.494C92.4488 245.494 92.7566 245.398 92.998 245.206C93.2395 245.014 93.4183 244.762 93.5343 244.45C93.6503 244.137 93.7083 243.799 93.7083 243.434C93.7083 243.069 93.6503 242.73 93.5343 242.415C93.4183 242.1 93.2395 241.845 92.998 241.651C92.7566 241.457 92.4488 241.36 92.0748 241.36C91.7007 241.36 91.3929 241.457 91.1515 241.651C90.91 241.845 90.7312 242.1 90.6152 242.415C90.4992 242.73 90.4412 243.069 90.4412 243.434C90.4412 243.799 90.4992 244.137 90.6152 244.45C90.7312 244.762 90.91 245.014 91.1515 245.206C91.3929 245.398 91.7007 245.494 92.0748 245.494ZM95.8256 246.133V240.678H96.6353V241.531H96.7063C96.82 241.239 97.0034 241.013 97.2567 240.852C97.5101 240.689 97.8143 240.607 98.1694 240.607C98.5292 240.607 98.8287 240.689 99.0678 240.852C99.3093 241.013 99.4975 241.239 99.6325 241.531H99.6893C99.829 241.249 100.038 241.025 100.318 240.859C100.597 240.691 100.932 240.607 101.323 240.607C101.81 240.607 102.209 240.76 102.52 241.065C102.83 241.368 102.985 241.841 102.985 242.482V246.133H102.147V242.482C102.147 242.08 102.037 241.792 101.816 241.619C101.596 241.446 101.337 241.36 101.039 241.36C100.655 241.36 100.358 241.476 100.147 241.708C99.9367 241.938 99.8313 242.229 99.8313 242.582V246.133H98.979V242.397C98.979 242.087 98.8784 241.837 98.6772 241.648C98.476 241.456 98.2167 241.36 97.8995 241.36C97.6817 241.36 97.4781 241.418 97.2887 241.534C97.1017 241.65 96.9502 241.811 96.8342 242.017C96.7205 242.221 96.6637 242.456 96.6637 242.724V246.133H95.8256ZM105.355 242.852V246.133H104.517V240.678H105.327V241.531H105.398C105.526 241.254 105.72 241.031 105.98 240.863C106.241 240.692 106.577 240.607 106.989 240.607C107.358 240.607 107.681 240.683 107.958 240.835C108.235 240.984 108.451 241.211 108.604 241.516C108.758 241.819 108.835 242.203 108.835 242.667V246.133H107.997V242.724C107.997 242.295 107.886 241.961 107.663 241.722C107.441 241.481 107.135 241.36 106.747 241.36C106.48 241.36 106.241 241.418 106.03 241.534C105.821 241.65 105.657 241.819 105.536 242.042C105.415 242.264 105.355 242.534 105.355 242.852ZM112.654 246.246C112.128 246.246 111.675 246.13 111.294 245.898C110.915 245.664 110.622 245.337 110.416 244.918C110.213 244.497 110.111 244.007 110.111 243.448C110.111 242.889 110.213 242.397 110.416 241.971C110.622 241.542 110.909 241.209 111.276 240.969C111.645 240.728 112.076 240.607 112.568 240.607C112.852 240.607 113.133 240.655 113.41 240.749C113.687 240.844 113.939 240.998 114.166 241.211C114.394 241.422 114.575 241.701 114.71 242.049C114.845 242.397 114.912 242.826 114.912 243.335V243.69H110.708V242.965H114.06C114.06 242.657 113.998 242.383 113.875 242.141C113.754 241.9 113.582 241.709 113.357 241.57C113.134 241.43 112.871 241.36 112.568 241.36C112.235 241.36 111.946 241.443 111.702 241.609C111.46 241.772 111.275 241.985 111.144 242.248C111.014 242.511 110.949 242.792 110.949 243.093V243.576C110.949 243.988 111.02 244.337 111.162 244.624C111.307 244.908 111.507 245.124 111.762 245.273C112.018 245.42 112.315 245.494 112.654 245.494C112.874 245.494 113.073 245.463 113.25 245.401C113.43 245.337 113.585 245.243 113.715 245.117C113.846 244.989 113.946 244.831 114.017 244.641L114.827 244.869C114.742 245.143 114.598 245.385 114.397 245.593C114.196 245.799 113.947 245.96 113.651 246.076C113.356 246.19 113.023 246.246 112.654 246.246ZM120.051 241.9L119.298 242.113C119.25 241.987 119.181 241.866 119.088 241.747C118.998 241.626 118.875 241.527 118.719 241.449C118.563 241.371 118.363 241.332 118.119 241.332C117.785 241.332 117.507 241.409 117.284 241.562C117.064 241.714 116.954 241.907 116.954 242.141C116.954 242.35 117.03 242.514 117.181 242.635C117.333 242.756 117.57 242.856 117.892 242.937L118.701 243.136C119.189 243.254 119.552 243.435 119.791 243.679C120.03 243.92 120.15 244.232 120.15 244.613C120.15 244.925 120.06 245.205 119.88 245.451C119.703 245.697 119.454 245.891 119.134 246.033C118.815 246.175 118.443 246.246 118.019 246.246C117.463 246.246 117.003 246.126 116.638 245.884C116.273 245.643 116.043 245.29 115.945 244.826L116.741 244.627C116.817 244.921 116.96 245.141 117.171 245.288C117.384 245.434 117.662 245.508 118.005 245.508C118.396 245.508 118.706 245.425 118.936 245.259C119.168 245.091 119.284 244.89 119.284 244.656C119.284 244.466 119.217 244.308 119.085 244.18C118.952 244.049 118.749 243.952 118.474 243.888L117.565 243.675C117.065 243.557 116.698 243.374 116.464 243.125C116.232 242.874 116.116 242.56 116.116 242.184C116.116 241.876 116.202 241.604 116.375 241.367C116.55 241.13 116.788 240.945 117.089 240.81C117.392 240.675 117.735 240.607 118.119 240.607C118.659 240.607 119.082 240.726 119.39 240.962C119.7 241.199 119.92 241.512 120.051 241.9ZM125.275 241.9L124.522 242.113C124.475 241.987 124.405 241.866 124.313 241.747C124.223 241.626 124.1 241.527 123.944 241.449C123.787 241.371 123.587 241.332 123.343 241.332C123.01 241.332 122.731 241.409 122.509 241.562C122.289 241.714 122.179 241.907 122.179 242.141C122.179 242.35 122.254 242.514 122.406 242.635C122.557 242.756 122.794 242.856 123.116 242.937L123.926 243.136C124.413 243.254 124.777 243.435 125.016 243.679C125.255 243.92 125.375 244.232 125.375 244.613C125.375 244.925 125.285 245.205 125.105 245.451C124.927 245.697 124.679 245.891 124.359 246.033C124.039 246.175 123.668 246.246 123.244 246.246C122.688 246.246 122.227 246.126 121.863 245.884C121.498 245.643 121.267 245.29 121.17 244.826L121.966 244.627C122.041 244.921 122.185 245.141 122.395 245.288C122.608 245.434 122.886 245.508 123.23 245.508C123.62 245.508 123.931 245.425 124.16 245.259C124.392 245.091 124.508 244.89 124.508 244.656C124.508 244.466 124.442 244.308 124.309 244.18C124.177 244.049 123.973 243.952 123.699 243.888L122.789 243.675C122.29 243.557 121.923 243.374 121.689 243.125C121.457 242.874 121.341 242.56 121.341 242.184C121.341 241.876 121.427 241.604 121.6 241.367C121.775 241.13 122.013 240.945 122.314 240.81C122.617 240.675 122.96 240.607 123.343 240.607C123.883 240.607 124.307 240.726 124.615 240.962C124.925 241.199 125.145 241.512 125.275 241.9Z" fill="white" fill-opacity="0.68"/>
+<g filter="url(#filter10_b_2960_50603)">
+<rect x="162" y="234.309" width="113.922" height="15.6513" rx="2.98" fill="url(#paint11_linear_2960_50603)"/>
+<rect x="162.25" y="234.559" width="113.422" height="15.1513" rx="2.73" stroke="url(#paint12_linear_2960_50603)" stroke-width="0.5"/>
+</g>
+<g opacity="0.8" filter="url(#filter11_b_2960_50603)">
+<rect x="162" y="234.309" width="18.5" height="15.6513" rx="2.98" fill="url(#paint13_linear_2960_50603)"/>
+</g>
+<path d="M286.947 246.232C286.531 246.232 286.156 246.149 285.822 245.984C285.488 245.818 285.22 245.591 285.019 245.302C284.818 245.013 284.708 244.684 284.689 244.315H285.541C285.574 244.644 285.723 244.916 285.989 245.131C286.256 245.344 286.576 245.451 286.947 245.451C287.246 245.451 287.511 245.381 287.743 245.241C287.977 245.102 288.161 244.91 288.293 244.666C288.428 244.42 288.496 244.142 288.496 243.832C288.496 243.514 288.426 243.232 288.286 242.983C288.149 242.732 287.96 242.534 287.718 242.39C287.477 242.246 287.201 242.172 286.891 242.17C286.668 242.167 286.44 242.202 286.205 242.273C285.971 242.341 285.778 242.43 285.626 242.539L284.803 242.44L285.243 238.86H289.021V239.641H285.982L285.726 241.786H285.768C285.918 241.668 286.105 241.57 286.33 241.491C286.554 241.413 286.789 241.374 287.033 241.374C287.478 241.374 287.874 241.481 288.222 241.694C288.573 241.905 288.847 242.193 289.046 242.56C289.247 242.927 289.348 243.346 289.348 243.817C289.348 244.281 289.244 244.696 289.036 245.06C288.83 245.423 288.545 245.709 288.183 245.92C287.821 246.128 287.409 246.232 286.947 246.232Z" fill="white" fill-opacity="0.68"/>
+<rect x="49.25" y="226.559" width="263.5" height="31.1513" rx="7.75" stroke="url(#paint14_linear_2960_50603)" stroke-width="0.5"/>
+</g>
+<defs>
+<filter id="filter0_f_2960_50603" x="69.4747" y="94.6075" width="359.355" height="213.84" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="14.665" result="effect1_foregroundBlur_2960_50603"/>
+</filter>
+<filter id="filter1_f_2960_50603" x="251.057" y="139.709" width="161.285" height="128.613" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10.165" result="effect1_foregroundBlur_2960_50603"/>
+</filter>
+<filter id="filter2_f_2960_50603" x="214.275" y="178.334" width="187.262" height="119.851" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="14.165" result="effect1_foregroundBlur_2960_50603"/>
+</filter>
+<filter id="filter3_b_2960_50603" x="-1.25199" y="94.7558" width="364.426" height="132.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter4_b_2960_50603" x="111.748" y="102.756" width="214.426" height="116.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter5_b_2960_50603" x="127.869" y="118.877" width="78.5706" height="83.9144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.0655"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter6_b_2960_50603" x="-1.25199" y="135.408" width="364.426" height="132.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter7_b_2960_50603" x="111.748" y="143.408" width="214.426" height="116.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter8_b_2960_50603" x="127.869" y="159.529" width="139.696" height="83.9144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.0655"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter9_b_2960_50603" x="-1.25199" y="176.057" width="364.504" height="132.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter10_b_2960_50603" x="111.748" y="184.057" width="214.426" height="116.156" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="25.126"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<filter id="filter11_b_2960_50603" x="127.869" y="200.178" width="86.762" height="83.9144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="17.0655"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_2960_50603"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_2960_50603" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_2960_50603" x1="-69.5475" y1="160.833" x2="312.922" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121212" stop-opacity="0.18"/>
+<stop offset="1" stop-color="white" stop-opacity="0.17"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2960_50603" x1="110.829" y1="160.833" x2="275.922" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0.05"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2960_50603" x1="162" y1="160.833" x2="275.922" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2960_50603" x1="162.389" y1="153.008" x2="171.595" y2="153.065" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A41CD" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#9A41CD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2960_50603" x1="49" y1="160.833" x2="312.922" y2="160.833" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_2960_50603" x1="-69.5475" y1="201.486" x2="312.922" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121212" stop-opacity="0.18"/>
+<stop offset="1" stop-color="white" stop-opacity="0.17"/>
+</linearGradient>
+<linearGradient id="paint6_linear_2960_50603" x1="110.829" y1="201.486" x2="275.922" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0.05"/>
+</linearGradient>
+<linearGradient id="paint7_linear_2960_50603" x1="162" y1="201.486" x2="275.922" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_2960_50603" x1="164.693" y1="193.66" x2="228.368" y2="196.424" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A41CD" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#9A41CD"/>
+</linearGradient>
+<linearGradient id="paint9_linear_2960_50603" x1="49" y1="201.486" x2="312.922" y2="201.486" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_2960_50603" x1="-69.5826" y1="242.134" x2="313" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121212" stop-opacity="0.18"/>
+<stop offset="1" stop-color="white" stop-opacity="0.17"/>
+</linearGradient>
+<linearGradient id="paint11_linear_2960_50603" x1="110.829" y1="242.134" x2="275.922" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0.05"/>
+</linearGradient>
+<linearGradient id="paint12_linear_2960_50603" x1="162" y1="242.134" x2="275.922" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint13_linear_2960_50603" x1="162.698" y1="234.309" x2="179.217" y2="234.494" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9A41CD" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#9A41CD"/>
+</linearGradient>
+<linearGradient id="paint14_linear_2960_50603" x1="49" y1="242.134" x2="313" y2="242.134" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343232" stop-opacity="0.1"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg b/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
new file mode 100644
index 00000000000..7914a72a43a
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/lw8-hackathon-thumb.svg
@@ -0,0 +1,66 @@
+<svg width="132" height="76" viewBox="0 0 132 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2932_199528)">
+<path d="M135.023 -31.2891H-2.9375V106.672H135.023V-31.2891Z" fill="#020405" stroke="white"/>
+<g opacity="0.3" filter="url(#filter0_f_2932_199528)">
+<path d="M-12.1957 67.4624C2.39617 70.8852 14.3008 38.7141 18.4292 22.2007C27.8868 -9.77554 76.5265 2.15942 62.3399 -20.5841C48.1534 -43.3275 25.1847 -21.2597 -12.1957 -22.1604C-49.5761 -23.0611 -22.3289 12.743 -22.5541 37.5131C-22.7793 62.2832 -65.7892 62.7336 -63.7626 77.3705C-61.736 92.0074 -30.4355 63.184 -12.1957 67.4624Z" fill="#6F13A4"/>
+</g>
+<circle cx="84.4815" cy="49.1861" r="0.417039" transform="rotate(4.39775 84.4815 49.1861)" fill="#7E7E7E"/>
+<circle cx="70.6654" cy="50.5636" r="0.417039" transform="rotate(108.965 70.6654 50.5636)" fill="#7E7E7E"/>
+<circle cx="60.431" cy="61.7823" r="0.417039" transform="rotate(108.965 60.431 61.7823)" fill="#7E7E7E"/>
+<circle cx="52.849" cy="74.38" r="0.417039" transform="rotate(108.965 52.849 74.38)" fill="#7E7E7E"/>
+<circle cx="52.2982" cy="27.4893" r="0.417039" transform="rotate(108.965 52.2982 27.4893)" fill="#7E7E7E"/>
+<circle cx="109.712" cy="62.0753" r="0.417039" transform="rotate(108.965 109.712 62.0753)" fill="#7E7E7E"/>
+<circle cx="81.169" cy="47.1236" r="0.417039" transform="rotate(4.39775 81.169 47.1236)" fill="#7E7E7E"/>
+<circle cx="120.923" cy="24.7525" r="0.417039" transform="rotate(4.39775 120.923 24.7525)" fill="#7E7E7E"/>
+<circle cx="81.1416" cy="48.4634" r="0.417039" transform="rotate(4.39775 81.1416 48.4634)" fill="#7E7E7E"/>
+<circle cx="77.4659" cy="4.05716" r="0.417039" transform="rotate(4.39775 77.4659 4.05716)" fill="#7E7E7E"/>
+<circle cx="77.4971" cy="10.3579" r="0.417039" transform="rotate(4.39775 77.4971 10.3579)" fill="#7E7E7E"/>
+<circle cx="82.6182" cy="8.56888" r="0.417039" transform="rotate(4.39775 82.6182 8.56888)" fill="#7E7E7E"/>
+<circle cx="74.1849" cy="48.2198" r="0.417039" transform="rotate(108.965 74.1849 48.2198)" fill="#7E7E7E"/>
+<circle cx="112.642" cy="50.5574" r="0.417039" transform="rotate(169.398 112.642 50.5574)" fill="#7E7E7E"/>
+<circle cx="120.539" cy="29.4917" r="0.417039" transform="rotate(-86.0346 120.539 29.4917)" fill="#7E7E7E"/>
+<circle cx="124.281" cy="29.019" r="0.417039" transform="rotate(-86.0346 124.281 29.019)" fill="#7E7E7E"/>
+<circle cx="126.234" cy="20.0425" r="0.417039" transform="rotate(-86.0346 126.234 20.0425)" fill="#7E7E7E"/>
+<circle cx="62.8511" cy="25.3355" r="0.417039" transform="rotate(-86.0346 62.8511 25.3355)" fill="#7E7E7E"/>
+<circle cx="130.66" cy="35.4136" r="0.417039" transform="rotate(-86.0346 130.66 35.4136)" fill="#7E7E7E"/>
+<circle cx="126.968" cy="8.71436" r="0.417039" transform="rotate(-86.0346 126.968 8.71436)" fill="#7E7E7E"/>
+<circle cx="74.273" cy="11.9644" r="0.417039" transform="rotate(-86.0346 74.273 11.9644)" fill="#7E7E7E"/>
+<circle cx="89.2027" cy="-0.0864194" r="0.417039" transform="rotate(-86.0346 89.2027 -0.0864194)" fill="#7E7E7E"/>
+<circle cx="67.9839" cy="23.3433" r="0.417039" transform="rotate(-86.0346 67.9839 23.3433)" fill="#7E7E7E"/>
+<circle cx="68.5503" cy="25.4175" r="0.417039" transform="rotate(-86.0346 68.5503 25.4175)" fill="#7E7E7E"/>
+<circle cx="77.316" cy="29.8433" r="0.417039" transform="rotate(-86.0346 77.316 29.8433)" fill="#7E7E7E"/>
+<circle cx="76.0738" cy="32.1011" r="0.417039" transform="rotate(-86.0346 76.0738 32.1011)" fill="#7E7E7E"/>
+<circle cx="84.9293" cy="44.6362" r="0.417039" transform="rotate(-86.0346 84.9293 44.6362)" fill="#7E7E7E"/>
+<circle cx="116.373" cy="51.702" r="0.417039" transform="rotate(169.398 116.373 51.702)" fill="#7E7E7E"/>
+<circle cx="60.2868" cy="67.0926" r="0.417039" transform="rotate(169.398 60.2868 67.0926)" fill="#7E7E7E"/>
+<circle cx="51.7594" cy="33.7059" r="0.417039" transform="rotate(169.398 51.7594 33.7059)" fill="#7E7E7E"/>
+<circle cx="116.045" cy="50.3934" r="0.417039" transform="rotate(169.398 116.045 50.3934)" fill="#7E7E7E"/>
+<circle cx="124.845" cy="75.4598" r="0.417039" transform="rotate(169.398 124.845 75.4598)" fill="#7E7E7E"/>
+<g filter="url(#filter1_d_2932_199528)">
+<ellipse cx="0.0105357" cy="0.0118572" rx="0.0105357" ry="0.0118572" transform="matrix(0.999179 0.040507 -0.108737 0.994071 81.8594 17.4141)" fill="#EADEEC"/>
+<ellipse cx="0.0118517" cy="0.0105419" rx="0.0118517" ry="0.0105419" transform="matrix(0.102081 -0.994776 0.999487 0.0320441 80.8203 17.9219)" fill="#EADEEC"/>
+<ellipse cx="0.0118517" cy="0.0105419" rx="0.0118517" ry="0.0105419" transform="matrix(0.102081 -0.994776 0.999487 0.0320441 81.5117 17.3398)" fill="#EADEEC"/>
+</g>
+<path d="M30.5417 38.0921H26.5594V42.1641H25.535V33.2263H26.5594V37.1958H30.5417V33.2263H31.5661V42.1641H30.5417V38.0921ZM40.6412 42.1641L39.8473 39.4878H36.6332L35.8393 42.1641H34.815L37.6064 33.2263H38.8869L41.6912 42.1641H40.6412ZM38.5796 35.2494L38.2979 34.1354H38.1698L37.8881 35.2494L36.8765 38.6427H39.6168L38.5796 35.2494ZM47.6 42.3177C47.0963 42.3177 46.6439 42.2281 46.2427 42.0488C45.8415 41.861 45.5 41.5793 45.2183 41.2037C44.9451 40.8281 44.7317 40.35 44.578 39.7696C44.4329 39.1805 44.3604 38.4891 44.3604 37.6952C44.3604 36.9013 44.4329 36.2141 44.578 35.6336C44.7317 35.0446 44.9451 34.5623 45.2183 34.1866C45.5 33.811 45.8415 33.5336 46.2427 33.3543C46.6439 33.1665 47.0963 33.0726 47.6 33.0726C48.3341 33.0726 48.9232 33.2305 49.3671 33.5464C49.811 33.8537 50.161 34.3275 50.4171 34.9677L49.5975 35.4671C49.4354 34.9805 49.2006 34.6135 48.8933 34.3659C48.5945 34.1098 48.1634 33.9818 47.6 33.9818C46.9171 33.9818 46.3878 34.2293 46.0122 34.7244C45.6451 35.211 45.4616 35.8683 45.4616 36.6964V38.6939C45.4616 39.522 45.6451 40.1836 46.0122 40.6787C46.3878 41.1653 46.9171 41.4086 47.6 41.4086C48.1805 41.4086 48.6286 41.2763 48.9445 41.0116C49.2604 40.7385 49.4994 40.3458 49.6616 39.8336L50.4811 40.3458C50.225 40.986 49.8622 41.4769 49.3927 41.8183C48.9317 42.1513 48.3341 42.3177 47.6 42.3177ZM56.0454 37.7336L54.8801 39.1933V42.1641H53.8558V33.2263H54.8801V36.2098L54.8033 38.0537H54.9314L56.2503 36.2098L58.4783 33.2263H59.6564L56.7112 37.0549L59.8484 42.1641H58.6448L56.0454 37.7336ZM68.2866 42.1641L67.4927 39.4878H64.2787L63.4848 42.1641H62.4604L65.2519 33.2263H66.5324L69.3366 42.1641H68.2866ZM66.225 35.2494L65.9433 34.1354H65.8153L65.5336 35.2494L64.522 38.6427H67.2622L66.225 35.2494ZM74.5931 34.1226V42.1641H73.5687V34.1226H71.0462V33.2263H77.1157V34.1226H74.5931ZM85.37 38.0921H81.3877V42.1641H80.3633V33.2263H81.3877V37.1958H85.37V33.2263H86.3944V42.1641H85.37V38.0921ZM93.459 42.3177C92.3749 42.3177 91.534 41.9464 90.9365 41.2037C90.3389 40.461 90.0402 39.2915 90.0402 37.6952C90.0402 36.0988 90.3389 34.9293 90.9365 34.1866C91.534 33.444 92.3749 33.0726 93.459 33.0726C94.5432 33.0726 95.384 33.444 95.9816 34.1866C96.5792 34.9293 96.8779 36.0988 96.8779 37.6952C96.8779 39.2915 96.5792 40.461 95.9816 41.2037C95.384 41.9464 94.5432 42.3177 93.459 42.3177ZM93.459 41.4086C94.2017 41.4086 94.7737 41.1653 95.1749 40.6787C95.5761 40.1836 95.7767 39.522 95.7767 38.6939V36.6964C95.7767 35.8683 95.5761 35.211 95.1749 34.7244C94.7737 34.2293 94.2017 33.9818 93.459 33.9818C92.7164 33.9818 92.1444 34.2293 91.7432 34.7244C91.342 35.211 91.1414 35.8683 91.1414 36.6964V38.6939C91.1414 39.522 91.342 40.1836 91.7432 40.6787C92.1444 41.1653 92.7164 41.4086 93.459 41.4086ZM102.342 36.3635L101.561 34.5196H101.433L101.522 36.3635V42.1641H100.523V33.2263H101.778L104.749 39.0269L105.53 40.8708H105.658L105.569 39.0269V33.2263H106.567V42.1641H105.312L102.342 36.3635Z" fill="#9296AA"/>
+</g>
+<defs>
+<filter id="filter0_f_2932_199528" x="-111.277" y="-78.3514" width="223.636" height="207.347" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="23.7226" result="effect1_foregroundBlur_2932_199528"/>
+</filter>
+<filter id="filter1_d_2932_199528" x="79.6286" y="16.1247" width="3.44206" height="2.98893" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="0.595867"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.980333 0 0 0 0 0.508333 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2932_199528"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2932_199528" result="shape"/>
+</filter>
+<clipPath id="clip0_2932_199528">
+<rect width="131.914" height="75.3795" fill="white" transform="translate(0.0859375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/www/public/images/launchweek/8/twitter-spaces-preview.png b/apps/www/public/images/launchweek/8/twitter-spaces-preview.png
new file mode 100644
index 00000000000..bf6ac4ec9c1
Binary files /dev/null and b/apps/www/public/images/launchweek/8/twitter-spaces-preview.png differ
diff --git a/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg b/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg
new file mode 100644
index 00000000000..040168b9ee6
--- /dev/null
+++ b/apps/www/public/images/launchweek/8/twitter-spaces-thumb.svg
@@ -0,0 +1,13 @@
+<svg width="132" height="76" viewBox="0 0 132 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2932_199515)">
+<path d="M135.707 -30.9727H-2.25391V106.988H135.707V-30.9727Z" fill="#020405" stroke="white"/>
+<path d="M53.5312 31.597C52.8096 31.925 52.0318 32.1405 51.2258 32.2436C52.0505 31.7469 52.6878 30.9597 52.9877 30.0132C52.2099 30.4818 51.3477 30.8098 50.4386 30.9972C49.6983 30.1912 48.658 29.7227 47.4772 29.7227C45.2748 29.7227 43.4755 31.522 43.4755 33.7431C43.4755 34.0617 43.513 34.371 43.5786 34.6615C40.2423 34.4928 37.2715 32.8903 35.294 30.463C34.9473 31.0534 34.7505 31.7469 34.7505 32.4779C34.7505 33.8743 35.4534 35.1113 36.5405 35.8142C35.8751 35.8142 35.2566 35.6268 34.713 35.3456C34.713 35.3456 34.713 35.3456 34.713 35.3738C34.713 37.3231 36.1 38.9537 37.9368 39.3192C37.5995 39.4129 37.2433 39.4598 36.8778 39.4598C36.6248 39.4598 36.3718 39.4317 36.1281 39.3848C36.6342 40.9686 38.1055 42.1495 39.8768 42.1776C38.5085 43.2647 36.7748 43.9019 34.8817 43.9019C34.5631 43.9019 34.2444 43.8832 33.9258 43.8457C35.7064 44.9891 37.8244 45.6544 40.0923 45.6544C47.4772 45.6544 51.5351 39.5254 51.5351 34.2117C51.5351 34.0336 51.5351 33.8649 51.5257 33.6869C52.3129 33.1246 52.9877 32.4123 53.5312 31.597Z" fill="#9296AA"/>
+<line x1="72.6041" y1="23.8327" x2="61.7657" y2="51.7278" stroke="#9296AA" stroke-opacity="0.3" stroke-width="0.5"/>
+<path d="M90.9633 36.3271L97.5885 28.7852H96.0188L90.2635 35.3323L85.6702 28.7852H80.3711L87.3187 38.6865L80.3711 46.5946H81.9408L88.0148 39.679L92.8666 46.5946H98.1657L90.9633 36.3271ZM88.8126 38.7734L88.1076 37.7868L82.5069 29.9441H84.9184L89.4396 36.2758L90.1417 37.2624L96.018 45.4922H93.6066L88.8126 38.7734Z" fill="#9296AA"/>
+</g>
+<defs>
+<clipPath id="clip0_2932_199515">
+<rect width="131.914" height="75.3795" fill="white" transform="translate(0.0859375)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/www/public/planetpg-egor_romanov-rss.xml b/apps/www/public/planetpg-egor_romanov-rss.xml
index 6eddea8089c..78e132e7d5b 100644
--- a/apps/www/public/planetpg-egor_romanov-rss.xml
+++ b/apps/www/public/planetpg-egor_romanov-rss.xml
@@ -5,9 +5,16 @@
       <link>https://supabase.com/blog</link>
       <description>Latest Postgres news from Egor Romanov at Supabase</description>
       <language>en</language>
-      <lastBuildDate>Wed, 12 Jul 2023 22:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Wed, 02 Aug 2023 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/planetpg-egor_romanov-rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
+  <title>pgvector: Fewer dimensions are better</title>
+  <link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
+  <description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
+  <pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/pgvector-performance</guid>
   <title>pgvector 0.4.0 performance</title>
   <link>https://supabase.com/blog/pgvector-performance</link>
diff --git a/apps/www/public/planetpg-gregnr-rss.xml b/apps/www/public/planetpg-gregnr-rss.xml
index 7c7fd0ecbd1..5c5db752187 100644
--- a/apps/www/public/planetpg-gregnr-rss.xml
+++ b/apps/www/public/planetpg-gregnr-rss.xml
@@ -5,9 +5,16 @@
       <link>https://supabase.com/blog</link>
       <description>Latest Postgres news from Greg Richardson at Supabase</description>
       <language>en</language>
-      <lastBuildDate>Sun, 05 Feb 2023 23:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Wed, 02 Aug 2023 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/planetpg-gregnr-rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
+  <title>pgvector: Fewer dimensions are better</title>
+  <link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
+  <description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
+  <pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/openai-embeddings-postgres-vector</guid>
   <title>Storing OpenAI embeddings in Postgres with pgvector</title>
   <link>https://supabase.com/blog/openai-embeddings-postgres-vector</link>
diff --git a/apps/www/public/planetpg-oli_rice-rss.xml b/apps/www/public/planetpg-oli_rice-rss.xml
index 6db51113317..9f60e49a86a 100644
--- a/apps/www/public/planetpg-oli_rice-rss.xml
+++ b/apps/www/public/planetpg-oli_rice-rss.xml
@@ -5,9 +5,16 @@
       <link>https://supabase.com/blog</link>
       <description>Latest Postgres news from Oliver Rice at Supabase</description>
       <language>en</language>
-      <lastBuildDate>Thu, 20 Apr 2023 22:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Wed, 02 Aug 2023 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/planetpg-oli_rice-rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
+  <title>pgvector: Fewer dimensions are better</title>
+  <link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
+  <description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
+  <pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/whats-new-in-pg-graphql-v1-2</guid>
   <title>What&apos;s New in pg_graphql v1.2</title>
   <link>https://supabase.com/blog/whats-new-in-pg-graphql-v1-2</link>
diff --git a/apps/www/public/rss.xml b/apps/www/public/rss.xml
index 536de2d4ecd..ff069b452e2 100644
--- a/apps/www/public/rss.xml
+++ b/apps/www/public/rss.xml
@@ -5,9 +5,44 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Mon, 17 Jul 2023 22:00:00 GMT</lastBuildDate>
+      <lastBuildDate>Thu, 03 Aug 2023 22:00:00 GMT</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber</guid>
+  <title>Coding the stars - an interactive constellation with Three.js and React Three Fiber</title>
+  <link>https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber</link>
+  <description>How we built a constellation of stars with Three.js and React Three Fiber.</description>
+  <pubDate>Thu, 03 Aug 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</guid>
+  <title>pgvector: Fewer dimensions are better</title>
+  <link>https://supabase.com/blog/fewer-dimensions-are-better-pgvector</link>
+  <description>Increase performance in pgvector by using embedding vectors with fewer dimensions</description>
+  <pubDate>Wed, 02 Aug 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/beta-update-july-2023</guid>
+  <title>Supabase Beta July 2023</title>
+  <link>https://supabase.com/blog/beta-update-july-2023</link>
+  <description>Launch Week 8 is coming - but we still shipped some goodies during July</description>
+  <pubDate>Tue, 01 Aug 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/react-native-storage</guid>
+  <title>React Native file upload with Supabase Storage</title>
+  <link>https://supabase.com/blog/react-native-storage</link>
+  <description>Learn how to implement authentication and file upload in a React Native app.</description>
+  <pubDate>Mon, 31 Jul 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
+  <guid>https://supabase.com/blog/supabase-lw8-hackathon</guid>
+  <title>Supabase Launch Week 8 Hackathon</title>
+  <link>https://supabase.com/blog/supabase-lw8-hackathon</link>
+  <description>Build an Open Source Project over 10 days. 5 prize categories.</description>
+  <pubDate>Mon, 24 Jul 2023 22:00:00 GMT</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/flutter-authentication</guid>
   <title>Getting started with Flutter authentication</title>
   <link>https://supabase.com/blog/flutter-authentication</link>
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index 72a5293e5c9..3cd425862d9 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -95,11 +95,11 @@ h6:not(.overwrite) {
 }
 
 .heading-gradient-brand {
-  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-1000 to-brand-900 dark:to-brand-800;
+  @apply text-[#3ECF8E00] bg-clip-text bg-gradient-to-b from-brand-600 to-brand dark:to-brand-300;
 }
 
 .toc-animate {
-  @apply !translate-x-1 !text-brand-900;
+  @apply !translate-x-1 !text-brand;
 }
 
 .prose-toc a {
@@ -179,6 +179,16 @@ h6:not(.overwrite) {
   position: relative;
 }
 
+.stroke-text {
+  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: var(--colors-scale9);
+}
+
+.stroke-text.fill {
+  -webkit-text-fill-color: #1ae88f;
+}
+
 /* Database page */
 
 .dashboard-tabs div[role='separator'] {
@@ -328,7 +338,7 @@ launch week
 */
 
 .launch-week-timeline-border--approaching {
-  border-image: linear-gradient(to bottom, var(--colors-brand9), var(--colors-purple7)) 1 100%;
+  border-image: linear-gradient(to bottom, hsl(var(--brand-default)), var(--colors-purple7)) 1 100%;
 }
 
 .launch-week-gradientBg {
@@ -472,9 +482,9 @@ launch week
   filter: blur(calc(var(--auth-ui-card-height) / 6));
   background-image: linear-gradient(
     var(--rotate),
-    var(--colors-brand),
+    hsl(var(--brand-default)),
     #3c67e3 43%,
-    var(--colors-brand)
+    hsl(var(--brand-default))
   );
   opacity: 1;
   transition: opacity 0.5s;
@@ -683,19 +693,26 @@ launch week
 }
 
 [class*='gradient-text-']::selection {
-  background-color: var(--colors-brand9);
+  background-color: hsl(var(--brand-default));
   background-clip: unset;
   -webkit-text-fill-color: white;
 }
 
 @layer utilities {
   .gradient-text-brand-100 {
-    background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
+    background-image: linear-gradient(
+      45deg,
+      hsl(var(--brand-500)) 0%,
+      hsl(var(--brand-default)) 100%
+    );
   }
-  .gradient-text-brand-500 {
-    background-image: linear-gradient(45deg, var(--colors-brand8) 0%, var(--colors-brand9) 100%);
+  .gradient-text-brand-300 {
+    background-image: linear-gradient(
+      45deg,
+      hsl(var(--brand-500)) 0%,
+      hsl(var(--brand-default)) 100%
+    );
   }
-
   .gradient-text-scale-100 {
     background-image: -webkit-linear-gradient(45deg, #fff 0%, var(--colors-green12) 100%);
   }
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index f7eafa21e30..7170ea7a8be 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -29,12 +29,18 @@ module.exports = config({
           '0%': { transform: 'translateX(0%)' },
           '100%': { transform: 'translateX(-100%)' },
         },
+        'pulse-radar': {
+          '0%': { transform: 'scale(0)', opacity: 0 },
+          '50%': { opacity: 0.8 },
+          '100%': { transform: 'scale(100%)', opacity: 0 },
+        },
       },
       animation: {
         'flash-code': 'flash-code 1s forwards',
         'flash-code-slow': 'flash-code 2s forwards',
         spin: 'spin 1s both infinite',
         marquee: 'marquee 35s linear infinite',
+        'pulse-radar': 'pulse-radar 3s linear infinite',
       },
     },
   },
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 432c5409ee5..153418c7ab4 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -61,7 +61,7 @@ services:
 
   auth:
     container_name: supabase-auth
-    image: supabase/gotrue:v2.62.1
+    image: supabase/gotrue:v2.82.4
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -247,7 +247,7 @@ services:
 
   functions:
     container_name: supabase-edge-functions
-    image: supabase/edge-runtime:v1.6.6
+    image: supabase/edge-runtime:v1.8.1
     restart: unless-stopped
     environment:
       JWT_SECRET: ${JWT_SECRET}
@@ -267,7 +267,7 @@ services:
   # Comment out everything below this point if you are using an external Postgres database
   db:
     container_name: supabase-db
-    image: supabase/postgres:15.1.0.90
+    image: supabase/postgres:15.1.0.103
     healthcheck:
       test: pg_isready -U postgres -h localhost
       interval: 5s
diff --git a/i18n/README.ja.md b/i18n/README.ja.md
deleted file mode 100644
index b3c49bdfd73..00000000000
--- a/i18n/README.ja.md
+++ /dev/null
@@ -1,260 +0,0 @@
-<p align="center">
-<img src="https://user-images.githubusercontent.com/8291514/213727234-cda046d6-28c6-491a-b284-b86c5cede25d.png#gh-light-mode-only">
-<img src="https://user-images.githubusercontent.com/8291514/213727225-56186826-bee8-43b5-9b15-86e839d89393.png#gh-dark-mode-only">
-</p>
-
----
-
-# Supabase
-
-[Supabase](https://supabase.com) は、オープンソースの Firebase の代替品です。エンタープライズグレードのオープンソースツールを使って、Firebase の機能を構築しています。
-
-- [x] ホスティングされた Postgres データベースです。[ドックス](https://supabase.com/docs/guides/database)
-- [x] 認証と認可。[ドキュメント](https://supabase.com/docs/guides/auth)
-- [x] 自動生成される API。
-  - [x] REST。[ドキュメント](https://supabase.com/docs/guides/api#rest-api-overview)
-  - [x] GraphQL。[Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
-  - [x] リアルタイムサブスクリプション。[ドキュメント](https://supabase.com/docs/guides/api#realtime-api-overview)
-- [x] 関数。
-  - [x] データベースファンクション。[Docs](https://supabase.com/docs/guides/database/functions)
-  - [x] エッジ機能 [Docs](https://supabase.com/docs/guides/functions)
-- [x] ファイルストレージ。[Docs](https://supabase.com/docs/guides/storage)
-- [x] ダッシュボード
-
-![スーパーベースダッシュボード](https://raw.githubusercontent.com/supabase/supabase/master/apps/www/public/images/github/supabase-dashboard.png)
-
-## ドキュメンテーション
-
-完全なドキュメントは、[supabase.com/docs](https://supabase.com/docs)を参照してください。
-
-貢献の仕方については、[Getting Started](../DEVELOPERS.md) を参照してください。
-
-## コミュニティとサポート
-
-- [コミュニティ・フォーラム](https://github.com/supabase/supabase/discussions)。最適な場所：構築に関するヘルプ、データベースのベストプラクティスに関する議論。
-- [GitHub Issues](https://github.com/supabase/supabase/issues).Supabase を使用していて遭遇したバグやエラーに最適です。
-- [メールサポート](https://supabase.com/docs/support#business-support).あなたのデータベースやインフラに関する問題。
-- [Discord】(https://discord.supabase.com).アプリケーションを共有したり、コミュニティと交流するのに適しています。
-
-## ステータス
-
-- [x] アルファ：Supabase をクローズドな顧客セットでテストしています。
-- [x] Public Alpha：誰でも [supabase.com/dashboard](https://supabase.com/dashboard) でサインアップすることができます。しかし、いくつかの問題がありますので、ご容赦ください。
-- [x] パブリックベータ版：企業以外のほとんどのユースケースで十分に安定している。
-- [ ] パブリック：一般公開 [[ステータス](https://supabase.com/docs/guides/getting-started/features#feature-status)]。
-
-現在、パブリックベータ版です。メジャーアップデートの通知を受けるには、このレポの "releases" を見てください。
-
-<kbd><img src="https://raw.githubusercontent.com/supabase/supabase/d5f7f413ab356dc1a92075cb3cee4e40a957d5b1/web/static/watch-repo.gif" alt="Watch this repo"/></kbd>
-
----
-
-## How it works
-
-Supabase は、オープンソースツールの組み合わせです。私たちは、エンタープライズグレードのオープンソース製品を使って Firebase の機能を構築しています。ツールやコミュニティが存在し、MIT、Apache 2、または同等のオープンライセンスがあれば、そのツールを使用しサポートします。ツールが存在しない場合は、私たち自身で構築し、オープンソース化します。Supabase は、Firebase の 1 対 1 マッピングではありません。私たちの目的は、オープンソースツールを使って Firebase のような開発者体験を開発者に提供することです。
-
-**アーキテクチャー**
-
-Supabase は[hosted platform](https://supabase.com/dashboard)です。サインアップすれば、何もインストールすることなく Supabase を使い始めることができます。
-また、[セルフホスト](https://supabase.com/docs/guides/hosting/overview)や[ローカル開発](https://supabase.com/docs/guides/local-development)も可能です。
-
-![アーキテクチャ](https://github.com/supabase/supabase/blob/master/apps/docs/public/img/supabase-architecture.png)
-
-- [PostgreSQL](https://www.postgresql.org/)は、オブジェクトリレーショナルデータベースシステムで、30 年以上の活発な開発により、信頼性、機能の堅牢性、パフォーマンスで高い評価を受けています。
-- [Realtime](https://github.com/supabase/realtime) は Elixir サーバーで、PostgreSQL の挿入、更新、削除を websocket を使ってリッスンすることが可能です。Realtime は、Postgres の組み込みレプリケーション機能でデータベースの変更をポーリングし、変更を JSON に変換し、JSON を websocket で認可されたクライアントにブロードキャストします。
-- [PostgREST](http://postgrest.org/) は、PostgreSQL データベースを直接 RESTful API に変換するウェブサーバです。
-- [pg_graphql](http://github.com/supabase/pg_graphql/) GraphQL API を公開する PostgreSQL 拡張です。
-- [Storage](https://github.com/supabase/storage-api)は、S3 に保存されたファイルを管理するための RESTful インターフェースを提供し、Postgres を使用してパーミッションを管理する。
-- [Postgres-meta](https://github.com/supabase/postgres-meta) は、Postgres を管理するための RESTful API で、テーブルの取得、ロールの追加、クエリの実行などを行うことができます。
-- [GoTrue](https://github.com/netlify/gotrue)は、ユーザーを管理し、SWT トークンを発行するための SWT ベースの API です。
-- [Kong](https://github.com/Kong/kong)は、クラウドネイティブな API ゲートウェイです。
-
-#### クライアントライブラリ
-
-クライアントライブラリのアプローチはモジュール化されています。各サブライブラリは、1 つの外部システムに対するスタンドアロンな実装です。これは、私たちが既存のツールをサポートする方法の 1 つです。
-
-<table style="table-layout:fixed; white-space: nowrap;">
-  <tr>
-    <th>言語</th>
-    <th>クライアント</th>
-    <th colspan="5">機能クライアント（Supabaseクライアントに同梱されています）</th>
-  </tr>
-  
-  <tr>
-    <th></th>
-    <th>Supabase</th>
-    <th><a href="https://github.com/postgrest/postgrest" target="_blank" rel="noopener noreferrer">PostgREST</a></th>
-    <th><a href="https://github.com/supabase/gotrue" target="_blank" rel="noopener noreferrer">GoTrue</a></th>
-    <th><a href="https://github.com/supabase/realtime" target="_blank" rel="noopener noreferrer">Realtime</a></th>
-    <th><a href="https://github.com/supabase/storage-api" target="_blank" rel="noopener noreferrer">Storage</a></th>
-    <th>Functions</th>
-  </tr>
-  <!-- TEMPLATE FOR NEW ROW -->
-  <!-- START ROW
-  <tr>
-    <td>lang</td>
-    <td><a href="https://github.com/supabase-community/supabase-lang" target="_blank" rel="noopener noreferrer">supabase-lang</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-lang" target="_blank" rel="noopener noreferrer">postgrest-lang</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-lang" target="_blank" rel="noopener noreferrer">gotrue-lang</a></td>
-    <td><a href="https://github.com/supabase-community/realtime-lang" target="_blank" rel="noopener noreferrer">realtime-lang</a></td>
-    <td><a href="https://github.com/supabase-community/storage-lang" target="_blank" rel="noopener noreferrer">storage-lang</a></td>
-  </tr>
-  END ROW -->
-  
-  <th colspan="7">⚡️ 公式 ⚡️</th>
-  
-  <tr>
-    <td>JavaScript (TypeScript)</td>
-    <td><a href="https://github.com/supabase/supabase-js" target="_blank" rel="noopener noreferrer">supabase-js</a></td>
-    <td><a href="https://github.com/supabase/postgrest-js" target="_blank" rel="noopener noreferrer">postgrest-js</a></td>
-    <td><a href="https://github.com/supabase/gotrue-js" target="_blank" rel="noopener noreferrer">gotrue-js</a></td>
-    <td><a href="https://github.com/supabase/realtime-js" target="_blank" rel="noopener noreferrer">realtime-js</a></td>
-    <td><a href="https://github.com/supabase/storage-js" target="_blank" rel="noopener noreferrer">storage-js</a></td>
-    <td><a href="https://github.com/supabase/functions-js" target="_blank" rel="noopener noreferrer">functions-js</a></td>
-  </tr>
-    <tr>
-    <td>Flutter</td>
-    <td><a href="https://github.com/supabase/supabase-flutter" target="_blank" rel="noopener noreferrer">supabase-flutter</a></td>
-    <td><a href="https://github.com/supabase/postgrest-dart" target="_blank" rel="noopener noreferrer">postgrest-dart</a></td>
-    <td><a href="https://github.com/supabase/gotrue-dart" target="_blank" rel="noopener noreferrer">gotrue-dart</a></td>
-    <td><a href="https://github.com/supabase/realtime-dart" target="_blank" rel="noopener noreferrer">realtime-dart</a></td>
-    <td><a href="https://github.com/supabase/storage-dart" target="_blank" rel="noopener noreferrer">storage-dart</a></td>
-    <td><a href="https://github.com/supabase/functions-dart" target="_blank" rel="noopener noreferrer">functions-dart</a></td>
-  </tr>
-  
-  <th colspan="7">💚コミュニティ 💚</th>
-  
-  <tr>
-    <td>C#</td>
-    <td><a href="https://github.com/supabase-community/supabase-csharp" target="_blank" rel="noopener noreferrer">supabase-csharp</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-csharp" target="_blank" rel="noopener noreferrer">postgrest-csharp</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-csharp" target="_blank" rel="noopener noreferrer">gotrue-csharp</a></td>
-    <td><a href="https://github.com/supabase-community/realtime-csharp" target="_blank" rel="noopener noreferrer">realtime-csharp</a></td>
-    <td><a href="https://github.com/supabase-community/storage-csharp" target="_blank" rel="noopener noreferrer">storage-csharp</a></td>
-    <td><a href="https://github.com/supabase-community/functions-csharp" target="_blank" rel="noopener noreferrer">functions-csharp</a></td>
-  </tr>
-  <tr>
-    <td>Go</td>
-    <td>-</td>
-    <td><a href="https://github.com/supabase-community/postgrest-go" target="_blank" rel="noopener noreferrer">postgrest-go</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-go" target="_blank" rel="noopener noreferrer">gotrue-go</a></td>
-    <td>-</td>
-    <td><a href="https://github.com/supabase-community/storage-go" target="_blank" rel="noopener noreferrer">storage-go</a></td>
-    <td><a href="https://github.com/supabase-community/functions-go" target="_blank" rel="noopener noreferrer">functions-go</a></td>
-  </tr>
-  <tr>
-    <td>Java</td>
-    <td>-</td>
-    <td>-</td>
-    <td><a href="https://github.com/supabase-community/gotrue-java" target="_blank" rel="noopener noreferrer">gotrue-java</a></td>
-    <td>-</td>
-    <td><a href="https://github.com/supabase-community/storage-java" target="_blank" rel="noopener noreferrer">storage-java</a></td>
-    <td>-</td>
-  </tr>
-  <tr>
-    <td>Kotlin</td>
-    <td><a href="https://github.com/supabase-community/supabase-kt" target="_blank" rel="noopener noreferrer">supabase-kt</a></td>
-    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Postgrest" target="_blank" rel="noopener noreferrer">postgrest-kt</a></td>
-    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/GoTrue" target="_blank" rel="noopener noreferrer">gotrue-kt</a></td>
-    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Realtime" target="_blank" rel="noopener noreferrer">realtime-kt</a></td>
-    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Storage" target="_blank" rel="noopener noreferrer">storage-kt</a></td>
-    <td><a href="https://github.com/supabase-community/supabase-kt/tree/master/Functions" target="_blank" rel="noopener noreferrer">functions-kt</a></td>
-  </tr>
-  <tr>
-    <td>Python</td>
-    <td><a href="https://github.com/supabase-community/supabase-py" target="_blank" rel="noopener noreferrer">supabase-py</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-py" target="_blank" rel="noopener noreferrer">postgrest-py</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-py" target="_blank" rel="noopener noreferrer">gotrue-py</a></td>
-    <td><a href="https://github.com/supabase-community/realtime-py" target="_blank" rel="noopener noreferrer">realtime-py</a></td>
-    <td><a href="https://github.com/supabase-community/storage-py" target="_blank" rel="noopener noreferrer">storage-py</a></td>
-    <td><a href="https://github.com/supabase-community/functions-py" target="_blank" rel="noopener noreferrer">functions-py</a></td>
-  </tr>
-  <tr>
-    <td>Ruby</td>
-    <td><a href="https://github.com/supabase-community/supabase-rb" target="_blank" rel="noopener noreferrer">supabase-rb</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-rb" target="_blank" rel="noopener noreferrer">postgrest-rb</a></td>
-    <td>-</td>
-    <td>-</td>
-    <td>-</td>
-    <td>-</td>
-  </tr>
-  <tr>
-    <td>Rust</td>
-    <td>-</td>
-    <td><a href="https://github.com/supabase-community/postgrest-rs" target="_blank" rel="noopener noreferrer">postgrest-rs</a></td>
-    <td>-</td>
-    <td>-</td>
-    <td>-</td>
-    <td>-</td>
-  </tr>
-  <tr>
-    <td>Swift</td>
-    <td><a href="https://github.com/supabase-community/supabase-swift" target="_blank" rel="noopener noreferrer">supabase-swift</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-swift" target="_blank" rel="noopener noreferrer">postgrest-swift</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-swift" target="_blank" rel="noopener noreferrer">gotrue-swift</a></td>
-    <td><a href="https://github.com/supabase-community/realtime-swift" target="_blank" rel="noopener noreferrer">realtime-swift</a></td>
-    <td><a href="https://github.com/supabase-community/storage-swift" target="_blank" rel="noopener noreferrer">storage-swift</a></td>
-    <td><a href="https://github.com/supabase-community/functions-swift" target="_blank" rel="noopener noreferrer">functions-swift</a></td>
-  </tr>
-  <tr>
-    <td>Godot Engine (GDScript)</td>
-    <td><a href="https://github.com/supabase-community/godot-engine.supabase" target="_blank" rel="noopener noreferrer">supabase-gdscript</a></td>
-    <td><a href="https://github.com/supabase-community/postgrest-gdscript" target="_blank" rel="noopener noreferrer">postgrest-gdscript</a></td>
-    <td><a href="https://github.com/supabase-community/gotrue-gdscript" target="_blank" rel="noopener noreferrer">gotrue-gdscript</a></td>
-    <td><a href="https://github.com/supabase-community/realtime-gdscript" target="_blank" rel="noopener noreferrer">realtime-gdscript</a></td>
-    <td><a href="https://github.com/supabase-community/storage-gdscript" target="_blank" rel="noopener noreferrer">storage-gdscript</a></td>
-    <td><a href="https://github.com/supabase-community/functions-gdscript" target="_blank" rel="noopener noreferrer">functions-gdscript</a></td>
-  </tr>
-  
-</table>
-
-<!--- Remove this list if you're translating to another language, it's hard to keep updated across multiple files-->
-<!--- Keep only the link to the list of translation files-->
-
-## 翻訳
-
-- [アラビア語｜ العربية](/i18n/README.ar.md)
-- [アルバニア語｜ Shqip](/i18n/README.sq.md)
-- [バングラ / বাংলা](/i18n/README.bn.md)
-- [ブルガリア語 / Български](/i18n/README.bg.md)
-- [カタルーニャ語 / Català](/i18n/README.ca.md)
-- [デンマーク語 / Dansk](/i18n/README.da.md)
-- [オランダ語 / ネーデルランド語](/i18n/README.nl.md)
-- [英語](https://github.com/supabase/supabase)
-- [フィンランド語 / Suomalainen](/i18n/README.fi.md)
-- [フランス語 / Français](/i18n/README.fr.md)
-- [German / Deutsch](/i18n/README.de.md)
-- [ギリシャ語 / Ελληνικά】(/i18n/README.gr.md)
-- [ヘブライ語／עברית](/i18n/README.he.md)
-- [ヒンディー語 / हिंदी】(/i18n/README.hi.md)
-- [ハンガリー語 / マジャール語](/i18n/README.hu.md)
-- [ネパール語 / नेपाली】(/i18n/README.ne.md)
-- [インドネシア語 / バハサ・インドネシア](/i18n/README.id.md)
-- [イタリア語 / イタリア語](/i18n/README.it.md)
-- [日本語 / 日本語](/i18n/README.jp.md)
-- [韓国語/한국어](/i18n/README.ko.md)
-- [マレー語 / バハサ・マレーシア](/i18n/README.ms.md)
-- [ノルウェー語（ブークモール） / Norsk (Bokmål)](/i18n/README.nb-no.md)
-- [ペルシア語 / فارسی](/i18n/README.fa.md)
-- [ポーランド語 / ポーランド語](/i18n/README.pl.md)
-- [ポルトガル語 / Português](/i18n/README.pt.md)
-- [ポルトガル語 (ブラジル) / Português Brasileiro](/i18n/README.pt-br.md)
-- [ルーマニア語 / Română](/i18n/README.ro.md)
-- [ロシア語 / Pусский](/i18n/README.ru.md)
-- [セルビア語 / Srpski](/i18n/README.sr.md)
-- [シンハラ語 / සි퓥퓥](/i18n/README.si.md)
-- [スペイン語／Español](/i18n/README.es.md)
-- [簡体字中国語 / 简体中文](/i18n/README.zh-cn.md)
-- [スウェーデン語 / Svenska](/i18n/README.sv.md)
-- [タイ語 / ไทย](/i18n/README.th.md)
-- [中国語 / 繁体中文](/i18n/README.zh-tw.md)
-- [トルコ語 / Türkçe](/i18n/README.tr.md)
-- [ウクライナ語/Українська](/i18n/README.uk.md)
-- [ベトナム語 / Tiếng Việt](/i18n/README.vi-vn.md)
-- [翻訳一覧](/i18n/languages.md)<!--- Keep only this -->
-
----
-
-## スポンサー
-
-[[新スポンサー](https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png)](https://github.com/sponsors/supabase)
diff --git a/i18n/languages.md b/i18n/languages.md
index cb5d8e7bcff..4f70e5be69f 100644
--- a/i18n/languages.md
+++ b/i18n/languages.md
@@ -21,7 +21,7 @@
 - [Nepali / नेपाली](/i18n/README.ne.md)
 - [Indonesian / Bahasa Indonesia](/i18n/README.id.md)
 - [Italiano / Italian](/i18n/README.it.md)
-- [Japanese / 日本語](/i18n/README.ja.md)
+- [Japanese / 日本語](/i18n/README.jp.md)
 - [Korean / 한국어](/i18n/README.ko.md)
 - [Lithuanian / lietuvių](/i18n/README.lt.md)
 - [Latvian / latviski](/i18n/README.lv.md)
diff --git a/package-lock.json b/package-lock.json
index b0c58cc3eca..433b08e03a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,6 +87,7 @@
         "rehype-slug": "^5.1.0",
         "remark": "^14.0.2",
         "remark-admonitions": "^1.2.1",
+        "remark-emoji": "^3.1.2",
         "remark-gfm": "^3.0.1",
         "remark-slug": "^7.0.1",
         "shiki": "^0.11.1",
@@ -352,7 +353,7 @@
         "shared-data": "*",
         "swiper": "^6.5.0",
         "swr": "^0.5.4",
-        "three": "^0.154.0",
+        "three": "^0.136.0",
         "typescript": "^5.0.4",
         "ui": "*",
         "use-debounce": "^7.0.1",
@@ -373,7 +374,7 @@
         "@types/react-copy-to-clipboard": "^5.0.4",
         "@types/react-dom": "^17.0.11",
         "@types/react-syntax-highlighter": "^15.5.6",
-        "@types/three": "^0.154.0",
+        "@types/three": "^0.136.0",
         "autoprefixer": "^10.4.14",
         "config": "*",
         "file-loader": "^6.2.0",
@@ -398,6 +399,17 @@
         "react": ">=16"
       }
     },
+    "apps/www/node_modules/@types/three": {
+      "version": "0.136.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.136.0.tgz",
+      "integrity": "sha512-yNBe5U3B+eSZU+pmiDxeq3hDyF+ftYghFkY3y0ayZrF8SjoUMVIRXqEfJX39wTSDsiY4/+tkmKgNxhhIKbnxeQ==",
+      "dev": true
+    },
+    "apps/www/node_modules/three": {
+      "version": "0.136.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.136.0.tgz",
+      "integrity": "sha512-+fEMX7nYLz2ZesVP/dyifli5Jf8gR3XPAnFJveQ80aMhibFduzrADnjMbARXh8+W9qLK7rshJCjAIL/6cDxC+A=="
+    },
     "apps/www/node_modules/typescript": {
       "version": "5.0.4",
       "license": "Apache-2.0",
@@ -14234,12 +14246,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/@tweenjs/tween.js": {
-      "version": "18.6.4",
-      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
-      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==",
-      "dev": true
-    },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
       "license": "MIT",
@@ -15049,12 +15055,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/stats.js": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz",
-      "integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==",
-      "dev": true
-    },
     "node_modules/@types/strip-ansi": {
       "version": "5.2.1",
       "dev": true,
@@ -15078,20 +15078,6 @@
         "@types/jest": "*"
       }
     },
-    "node_modules/@types/three": {
-      "version": "0.154.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.154.0.tgz",
-      "integrity": "sha512-IioqpGhch6FdLDh4zazRn3rXHj6Vn2nVOziJdXVbJFi9CaI65LtP9qqUtpzbsHK2Ezlox8NtsLNHSw3AQzucjA==",
-      "dev": true,
-      "dependencies": {
-        "@tweenjs/tween.js": "~18.6.4",
-        "@types/stats.js": "*",
-        "@types/webxr": "*",
-        "fflate": "~0.6.9",
-        "lil-gui": "~0.17.0",
-        "meshoptimizer": "~0.18.1"
-      }
-    },
     "node_modules/@types/uglify-js": {
       "version": "3.17.1",
       "dev": true,
@@ -15170,12 +15156,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/webxr": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.2.tgz",
-      "integrity": "sha512-szL74BnIcok9m7QwYtVmQ+EdIKwbjPANudfuvDrAF8Cljg9MKUlIoc1w5tjj9PMpeSH3U1Xnx//czQybJ0EfSw==",
-      "dev": true
-    },
     "node_modules/@types/yargs": {
       "version": "15.0.15",
       "dev": true,
@@ -20160,6 +20140,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/emoticon": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.0.1.tgz",
+      "integrity": "sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "dev": true,
@@ -21682,12 +21671,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fflate": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
-      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
-      "dev": true
-    },
     "node_modules/figgy-pudding": {
       "version": "3.5.2",
       "license": "ISC"
@@ -26538,12 +26521,6 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/lil-gui": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.17.0.tgz",
-      "integrity": "sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==",
-      "dev": true
-    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "license": "MIT",
@@ -27610,12 +27587,6 @@
         }
       }
     },
-    "node_modules/meshoptimizer": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
-      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
-      "dev": true
-    },
     "node_modules/methods": {
       "version": "1.1.2",
       "dev": true,
@@ -29753,6 +29724,14 @@
         "node": ">=10.5.0"
       }
     },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.6.11",
       "license": "MIT",
@@ -34592,6 +34571,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-emoji": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-3.1.2.tgz",
+      "integrity": "sha512-QwhAzNk27Ol64uV4z/3n55MKrNz9bhr8wg+mO5aGqIYDS+jUarS1d8Y0ZIeEBVhfGkXj6gGYM+727sOgAPvV/A==",
+      "dependencies": {
+        "emoticon": "^4.0.1",
+        "mdast-util-find-and-replace": "^2.2.2",
+        "node-emoji": "^1.11.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/remark-external-links": {
       "version": "8.0.0",
       "dev": true,
@@ -37481,7 +37473,8 @@
     "node_modules/three": {
       "version": "0.154.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
-      "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug=="
+      "integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==",
+      "peer": true
     },
     "node_modules/throat": {
       "version": "6.0.2",
diff --git a/packages/config/code-hike.scss b/packages/config/code-hike.scss
index abae362e750..0a8d5970c18 100644
--- a/packages/config/code-hike.scss
+++ b/packages/config/code-hike.scss
@@ -5,9 +5,9 @@
   --ch-3: #ffcda1;
   --ch-4: #f8f8f2;
   --ch-5: #bda4ff;
-  --ch-6: var(--colors-brand10);
+  --ch-6: hsl(var(--brand-600));
   --ch-7: #569cd6;
-  --ch-8: var(--colors-brand9);
+  --ch-8: hsl(var(--brand-default));
   --ch-9: #ffa198;
   --ch-10: #f0f6fc;
   --ch-11: #490202;
@@ -15,7 +15,8 @@
   --ch-13: #5a1e02;
   --ch-14: #161b22;
   --ch-15: #8b949e;
-  --ch-16: var(--colors-scale1);
+  // --ch-16: hsl(var(--foreground-lighter));
+  --ch-16: #2a2929;
   --ch-17: #264f78;
   --ch-18: #3794ff;
   --ch-19: #ffffff0b;
@@ -34,9 +35,9 @@
   --ch-3: #953800;
   --ch-4: #24292f;
   --ch-5: #8250df;
-  --ch-6: var(--colors-brand10);
+  --ch-6: hsl(var(--brand-600));
   --ch-7: #cf222e;
-  --ch-8: var(--colors-brand9);
+  --ch-8: hsl(var(--brand-default));
   --ch-9: #82071e;
   --ch-10: #f6f8fa;
   --ch-11: #ffebe9;
@@ -44,7 +45,8 @@
   --ch-13: #ffd8b5;
   --ch-14: #eaeef2;
   --ch-15: #57606a;
-  --ch-16: var(--colors-scale1);
+  // --ch-16: hsl(var(--foreground-lighter));
+  --ch-16: #eeeeee;
   --ch-17: #add6ff;
   --ch-18: #1a85ff;
   --ch-19: #fdff0033;
diff --git a/packages/config/default-colors.js b/packages/config/default-colors.js
index 0fecc7196f1..3373e649d3b 100644
--- a/packages/config/default-colors.js
+++ b/packages/config/default-colors.js
@@ -28,8 +28,8 @@ module.exports = {
     brand12: 'hsla(153, 60%, 95%, 1)',
   },
   contrast: {
-    'brand-hiContrast': 'var(--colors-brand-9)',
-    'brand-loContrast': 'var(--colors-brand-4)',
+    'brand-hiContrast': 'hsl(var(--brand-default))',
+    'brand-loContrast': 'hsl(var(--brand-300))',
   },
   scale: {
     scale1: 'var(--colors-slate1)',
diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js
index a089a489db7..68a6d2a82b8 100644
--- a/packages/config/tailwind.config.js
+++ b/packages/config/tailwind.config.js
@@ -216,12 +216,12 @@ const uiConfig = ui({
               fontWeight: '400',
               color: 'var(--colors-scale12)',
               textDecorationLine: 'underline',
-              textDecorationColor: 'var(--colors-brand7)',
+              textDecorationColor: 'hsl(var(--brand-400))',
               textDecorationThickness: '1px',
               textUnderlineOffset: '4px',
             },
             'a:hover': {
-              textDecorationColor: 'var(--colors-brand9)',
+              textDecorationColor: 'hsl(var(--brand-default))',
             },
             figcaption: {
               color: 'var(--colors-scale9)',
diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js
index be34a9cf667..b9f24c04676 100644
--- a/packages/config/ui.config.js
+++ b/packages/config/ui.config.js
@@ -26,7 +26,7 @@ const excludedRadixColors = [
 
 // generates fixed scales
 // based on the root/light mode version
-const fixedOptions = ['scale', 'scaleA', 'brand']
+const fixedOptions = ['scale', 'scaleA']
 
 function radixColorKeys() {
   let keys = Object.keys(radixUiColors)
@@ -51,7 +51,7 @@ function radixColorKeys() {
 }
 
 function generateColorClasses() {
-  const brandColors = ['brand', 'scale', 'scaleA']
+  const brandColors = ['scale', 'scaleA']
   const colors = [...radixColorKeys(), ...brandColors]
 
   let mappedColors = {}
diff --git a/packages/shared-data/pricing.ts b/packages/shared-data/pricing.ts
index e339ea72275..5e0d5c1b83a 100644
--- a/packages/shared-data/pricing.ts
+++ b/packages/shared-data/pricing.ts
@@ -204,17 +204,6 @@ export const pricing: Pricing = {
         },
         usage_based: false,
       },
-      {
-        title: 'Supabase Auth emails',
-        tooltips: { main: 'Rate limits do not apply to Custom SMTP' },
-        plans: {
-          free: '30 / hour',
-          pro: '100 / hour',
-          team: '100 / hour',
-          enterprise: 'Contact Us',
-        },
-        usage_based: false,
-      },
       {
         title: 'Single Sign-On (SAML 2.0)',
         plans: {
diff --git a/packages/ui/build/css/source/global.css b/packages/ui/build/css/source/global.css
index 7116e19977a..8e37bddc961 100644
--- a/packages/ui/build/css/source/global.css
+++ b/packages/ui/build/css/source/global.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 :root {
diff --git a/packages/ui/build/css/themes/dark.css b/packages/ui/build/css/themes/dark.css
index 3748b607d97..8fd815c27c8 100644
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 .dark {
   --brand-default: 152.9deg 60% 52.9%;
-  --brand-400: 153.6deg 41% 12%;
-  --brand-300: 152.7deg 48.5% 26.7%;
-  --brand-200: 148.5deg 43.5% 82%;
+  --brand-600: 153deg 59.5% 70%;
+  --brand-500: 153.5deg 61.8% 21.6%;
+  --brand-400: 153.3deg 65.2% 13.5%;
+  --brand-300: 153.8deg 69.6% 9%;
+  --brand-200: 152.5deg 75% 6.3%;
   --warning-default: 38.9deg 100% 57.1%;
   --warning-600: 38.9deg 89.8% 49.8%;
   --warning-500: 34.8deg 90.9% 21.6%;
diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css
index 41927d7bc60..71845ba29cd 100644
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -1,13 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Mon, 17 Jul 2023 15:59:23 GMT
+ * Generated on Sun, 30 Jul 2023 09:03:47 GMT
  */
 
 .light {
-  --brand-primary: 152.9deg 60% 52.9%;
-  --brand-400: 153.7deg 68.7% 83.7%;
-  --brand-300: 153deg 46% 65.9%;
-  --brand-200: 148.5deg 43.5% 82%;
+  --brand-default: 152.9deg 60% 52.9%;
+  --brand-600: 153.2deg 49.7% 33.5%;
+  --brand-500: 148.7deg 42.7% 69.2%;
+  --brand-400: 149.1deg 59.3% 88.4%;
+  --brand-300: 148.6deg 77.8% 94.7%;
+  --brand-200: 156deg 71.4% 98.6%;
   --warning-default: 38.9deg 100% 57.1%;
   --warning-600: 30.2deg 100% 33.9%;
   --warning-500: 36.3deg 85.7% 67.1%;
diff --git a/packages/ui/build/css/tw-extend/color.js b/packages/ui/build/css/tw-extend/color.js
index e9a280e3825..937addc4752 100644
--- a/packages/ui/build/css/tw-extend/color.js
+++ b/packages/ui/build/css/tw-extend/color.js
@@ -529,15 +529,23 @@ module.exports = {
 },
 "brand-200": {
   cssVariable: "var(--brand-200)",
-  value: "hsl(148.5, 43.5%, 82%)"
+  value: "hsl(152.5, 75%, 6.3%)"
 },
 "brand-300": {
   cssVariable: "var(--brand-300)",
-  value: "hsl(152.70000000000005, 48.5%, 26.7%)"
+  value: "hsl(153.79999999999995, 69.6%, 9%)"
 },
 "brand-400": {
   cssVariable: "var(--brand-400)",
-  value: "hsl(153.60000000000002, 41%, 12%)"
+  value: "hsl(153.29999999999995, 65.2%, 13.5%)"
+},
+"brand-500": {
+  cssVariable: "var(--brand-500)",
+  value: "hsl(153.5, 61.8%, 21.6%)"
+},
+"brand-600": {
+  cssVariable: "var(--brand-600)",
+  value: "hsl(153, 59.5%, 70%)"
 },
 "brand-DEFAULT": {
   cssVariable: "var(--brand-default)",
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index e53f54d332f..ecd99dc70dc 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -146,6 +146,8 @@ export {
   AccordionContent as AccordionContent_Shadcn_,
 } from './src/components/shadcn/ui/accordion'
 
+export { ScrollArea, ScrollBar } from './src/components/shadcn/ui/scroll-area'
+
 // links
 
 export * from './src/components/TextLink'
diff --git a/packages/ui/src/components/Admonition/index.tsx b/packages/ui/src/components/Admonition/index.tsx
index d4b2bec0686..1a076acf41c 100644
--- a/packages/ui/src/components/Admonition/index.tsx
+++ b/packages/ui/src/components/Admonition/index.tsx
@@ -21,7 +21,7 @@ export const Admonition = ({
             : type === 'info'
             ? 'bg-scale-500 border-scale-800'
             : type === 'tip'
-            ? 'bg-brand-300 border-brand-800'
+            ? 'bg-brand-300 border-brand-300'
             : type === 'caution'
             ? 'bg-yellow-400 border-yellow-800'
             : type === 'danger'
diff --git a/packages/ui/src/components/Badge/Badge.module.css b/packages/ui/src/components/Badge/Badge.module.css
index 38c8ed21ddf..79fbcf8ac93 100644
--- a/packages/ui/src/components/Badge/Badge.module.css
+++ b/packages/ui/src/components/Badge/Badge.module.css
@@ -1,5 +1,5 @@
 /* .sbui-badge {
-  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-800;
+  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-500 bg-opacity-10 text-brand-300;
 }
 
 .sbui-badge--large {
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css b/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
index 60a6ec4e374..6296701e328 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.module.css
@@ -10,11 +10,11 @@
 .sbui-breadcrumb--item {
   @apply text-gray-500 hover:text-gray-600;
   @apply cursor-pointer;
-  @apply dark:text-dark-200 dark:hover:text-brand-700;
+  @apply dark:text-dark-200 dark:hover:text-brand-400;
 }
 
 .sbui-breadcrumb--item__active {
-  @apply text-brand-700 dark:text-brand-700;
+  @apply text-brand-400 dark:text-brand-400;
 }
 
 .sbui-breadcrumb--separator {
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
index 8c4d9b48a9a..b3f7703ec93 100644
--- a/packages/ui/src/components/Button/Button.module.css
+++ b/packages/ui/src/components/Button/Button.module.css
@@ -50,8 +50,8 @@
   Button varients
 */
 /* .sbui-btn-primary {
-  @apply text-white bg-brand-800 hover:bg-brand-600;
-  @apply dark:hover:bg-brand-900;
+  @apply text-white bg-brand-300 hover:bg-brand-600;
+  @apply dark:hover:bg-brand;
 } */
 .dark .sbui-btn-primary {
   text-shadow: 0px 0px 4px rgba(38 111 78 / 50%);
@@ -87,7 +87,7 @@
   @apply dark:text-white dark:border-dark-400 dark:hover:text-white dark:hover:border-white;
 } */
 /* .sbui-btn-link {
-  @apply bg-transparent text-brand-800 border-none hover:bg-brand-900 hover:bg-opacity-25;
+  @apply bg-transparent text-brand-300 border-none hover:bg-brand hover:bg-opacity-25;
   box-shadow: none;
 } */
 /* .sbui-btn-text {
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index ae80a6835ae..202bad9b7bf 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -9,7 +9,7 @@ import { cn } from '@ui/lib/utils'
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 const buttonVariants = cva(
   `relative 
-  flex iems-center justify-center
+  flex items-center justify-center
   cursor-pointer 
   inline-flex 
   items-center 
@@ -30,9 +30,9 @@ const buttonVariants = cva(
     variants: {
       type: {
         primary: `
-            bg-brand-fixed-1100 hover:bg-brand-fixed-1000
+            bg-brand-600 dark:bg-brand/70 hover:bg-brand-600/80 dark:hover:bg-brand
             text-white
-            border-brand-fixed-1000 hover:border-brand-fixed-900 dark:border-brand-fixed-1000 dark:hover:border-brand-fixed-1000
+            border-brand dark:border-brand
             focus-visible:outline-brand-600
             shadow-sm`,
         secondary: `
@@ -51,11 +51,11 @@ const buttonVariants = cva(
             focus-visible:outline-brand-600
             shadow-sm`,
         alternative: `
-            text-brand-1100
+            text-brand-600
             bg-brand-200 hover:bg-brand-400
-            border-brand-600 hover:border-brand-800
-            dark:border-brand-700 hover:dark:border-brand-800
-            focus-visible:border-brand-800
+            border-brand-600 hover:border-brand-300
+            dark:border-brand-400 hover:dark:border-brand-300
+            focus-visible:border-brand-300
             focus-visible:outline-brand-600
             shadow-sm`,
         outline: `
@@ -73,7 +73,7 @@ const buttonVariants = cva(
             focus-visible:outline-scale-700
             shadow-sm`,
         link: `
-            text-brand-1100
+            text-brand-600
             border
             border-transparent
             hover:bg-brand-400
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index 0055c0a1519..a955fe0b51d 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -27,8 +27,8 @@
 }
 
 .sbui-checkbox[type='checkbox']:checked {
-  @apply dark:bg-brand-700;
-  @apply bg-brand-700;
+  @apply dark:bg-brand-400;
+  @apply bg-brand-400;
   border-color: transparent;
   background-size: 100% 100%;
   background-position: center;
@@ -38,11 +38,11 @@
 /* .sbui-checkbox {
   @apply border border-solid rounded;
 
-  @apply text-brand-700 border-gray-300 transition-all;
-  @apply hover:border-brand-500 focus:ring-brand-500 focus:outline-none;
+  @apply text-brand-400 border-gray-300 transition-all;
+  @apply hover:border-brand-300 focus:ring-brand-300 focus:outline-none;
 
   @apply dark:bg-transparent dark:border-dark-400 dark:text-white;
-  @apply dark:hover:border-brand-500;
+  @apply dark:hover:border-brand-300;
 
   margin-top: 2px;
 } */
diff --git a/packages/ui/src/components/Command/Command.icons.tsx b/packages/ui/src/components/Command/Command.icons.tsx
index 9d0914765b0..2d259785f22 100644
--- a/packages/ui/src/components/Command/Command.icons.tsx
+++ b/packages/ui/src/components/Command/Command.icons.tsx
@@ -4,7 +4,7 @@ interface AiIconProps {
   className?: string
 }
 
-export const AiIcon = ({ className = 'text-brand-900' }: AiIconProps) => (
+export const AiIcon = ({ className = 'text-brand' }: AiIconProps) => (
   <svg
     className={`w-6 h-6 ${className}`}
     width="16"
@@ -30,7 +30,7 @@ export const AiIcon = ({ className = 'text-brand-900' }: AiIconProps) => (
 export const AiIconChat = () => (
   <div
     className="w-7 h-7
-    bg-gradient-to-r from-brand-900 to-brand-800
+    bg-gradient-to-r from-brand to-brand-300
 
     ring-brand-600
     ring-1
diff --git a/packages/ui/src/components/Command/CommandMenu.tsx b/packages/ui/src/components/Command/CommandMenu.tsx
index c76fb086872..918fdaf001d 100644
--- a/packages/ui/src/components/Command/CommandMenu.tsx
+++ b/packages/ui/src/components/Command/CommandMenu.tsx
@@ -122,7 +122,7 @@ const CommandMenu = ({ projectRef }: CommandMenuProps) => {
                   forceMount
                 >
                   <AiIcon />
-                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-900 to-brand-1100">
+                  <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand to-brand-600">
                     Ask Supabase AI
                     {search ? (
                       <>
diff --git a/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx b/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
index fe59affa469..270c78f66de 100644
--- a/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
+++ b/packages/ui/src/components/Command/GenerateSQL/SQLOutputActions.tsx
@@ -81,7 +81,7 @@ const SQLOutputActions = ({ answer, messages }: SQLOutputActionsProps) => {
           type="default"
           icon={
             showCopied ? (
-              <IconCheck size="tiny" className="text-brand-900" strokeWidth={2} />
+              <IconCheck size="tiny" className="text-brand" strokeWidth={2} />
             ) : (
               <IconClipboard size="tiny" />
             )
@@ -98,7 +98,7 @@ const SQLOutputActions = ({ answer, messages }: SQLOutputActionsProps) => {
           disabled={isSaving}
           icon={
             isSaved ? (
-              <IconCheck size="tiny" className="text-brand-900" strokeWidth={2} />
+              <IconCheck size="tiny" className="text-brand" strokeWidth={2} />
             ) : (
               <IconSave size="tiny" />
             )
diff --git a/packages/ui/src/components/CountdownWidget/CountdownStep.tsx b/packages/ui/src/components/CountdownWidget/CountdownStep.tsx
index b1521b5ff24..35af4febab2 100644
--- a/packages/ui/src/components/CountdownWidget/CountdownStep.tsx
+++ b/packages/ui/src/components/CountdownWidget/CountdownStep.tsx
@@ -1,12 +1,25 @@
 interface CountdownStepProps {
   value: string | number
   unit: string
+  showCard?: boolean
 }
 
-function CountdownStep({ value, unit }: CountdownStepProps) {
+function CountdownStep({ value, unit, showCard = true }: CountdownStepProps) {
   return (
-    <div className="rounded-md p-[1px] overflow-hidden bg-gradient-to-b from-[#514b6130] to-[#514b6100]">
-      <div className="py-1 px-2 rounded-md w-11 leading-4 flex items-center justify-center bg-gradient-to-b from-[#51269c40] to-[#DBB8BF10] backdrop-blur-md">
+    <div
+      className={[
+        showCard
+          ? 'rounded-md p-[1px] overflow-hidden bg-gradient-to-b from-[#514b6130] to-[#514b6100]'
+          : '',
+      ].join(' ')}
+    >
+      <div
+        className={[
+          showCard
+            ? 'py-1 px-2 rounded-md w-11 leading-4 flex items-center justify-center bg-gradient-to-b from-[#51269c40] to-[#DBB8BF10] backdrop-blur-md'
+            : 'flex items-center justify-center w-9 py-1 px-1',
+        ].join(' ')}
+      >
         <span className="m-0">{value}</span>
         <span>{unit}</span>
       </div>
diff --git a/packages/ui/src/components/CountdownWidget/CountdownWidget.tsx b/packages/ui/src/components/CountdownWidget/CountdownWidget.tsx
index ed61492064b..9019c7dc6ed 100644
--- a/packages/ui/src/components/CountdownWidget/CountdownWidget.tsx
+++ b/packages/ui/src/components/CountdownWidget/CountdownWidget.tsx
@@ -5,28 +5,29 @@ interface CountdownWidgetProps {
   hours?: string
   minutes?: string
   seconds?: string
+  showCard?: boolean
 }
 
-function CountdownWidget({ days, hours, minutes, seconds }: CountdownWidgetProps) {
+function CountdownWidget({ days, hours, minutes, seconds, showCard = true }: CountdownWidgetProps) {
   return (
     <div className="flex gap-1 items-center">
       {days !== undefined && (
         <>
-          <CountdownStep value={days} unit="d" /> :
+          <CountdownStep value={days} unit="d" showCard={showCard} /> :
         </>
       )}
       {hours !== undefined && (
         <>
-          <CountdownStep value={hours} unit="h" /> :
+          <CountdownStep value={hours} unit="h" showCard={showCard} /> :
         </>
       )}
       {minutes !== undefined && (
         <>
-          <CountdownStep value={minutes} unit="m" />
+          <CountdownStep value={minutes} unit="m" showCard={showCard} />
           {seconds !== undefined && ' :'}
         </>
       )}
-      {seconds !== undefined && <CountdownStep value={seconds} unit="s" />}
+      {seconds !== undefined && <CountdownStep value={seconds} unit="s" showCard={showCard} />}
     </div>
   )
 }
diff --git a/packages/ui/src/components/Form/Form.stories.tsx b/packages/ui/src/components/Form/Form.stories.tsx
index 277ae09180e..f46c9ac0c29 100644
--- a/packages/ui/src/components/Form/Form.stories.tsx
+++ b/packages/ui/src/components/Form/Form.stories.tsx
@@ -1,14 +1,5 @@
 import { Form } from '.'
-import {
-  Input,
-  Button,
-  InputNumber,
-  Toggle,
-  Checkbox,
-  Radio,
-  Select,
-  Listbox,
-} from '../../index'
+import { Input, Button, InputNumber, Toggle, Checkbox, Radio, Select, Listbox } from '../../index'
 
 import * as Yup from 'yup'
 import { User } from '../Icon/IconImportHandler'
@@ -103,14 +94,8 @@ export const InputLevelValidation = () => {
 export const InputLevelValidationYip = () => {
   // validation schema
   const SignupSchema = Yup.object().shape({
-    firstname: Yup.string()
-      .min(2, 'Too Short!')
-      .max(50, 'Too Long!')
-      .required('Required'),
-    lastname: Yup.string()
-      .min(2, 'Too Short!')
-      .max(50, 'Too Long!')
-      .required('Required'),
+    firstname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
+    lastname: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Required'),
     email: Yup.string().email('Invalid email').required('Required'),
   })
 
@@ -131,24 +116,9 @@ export const InputLevelValidationYip = () => {
     >
       {({ isSubmitting }: any) => (
         <div className="space-y-4">
-          <Input
-            id="firstname"
-            name="firstname"
-            label="firstname"
-            placeholder="firstname"
-          />
-          <Input
-            id="lastname"
-            name="lastname"
-            label="lastname"
-            placeholder="lastname"
-          />
-          <Input
-            id="email"
-            name="email"
-            label="Email"
-            placeholder="This is your email"
-          />
+          <Input id="firstname" name="firstname" label="firstname" placeholder="firstname" />
+          <Input id="lastname" name="lastname" label="lastname" placeholder="lastname" />
+          <Input id="email" name="email" label="Email" placeholder="This is your email" />
           <Button loading={isSubmitting} type="primary" htmlType="submit">
             Submit
           </Button>
@@ -239,9 +209,7 @@ export const LargerExample = () => {
 
           if (!values.email) {
             errors.email = 'Required'
-          } else if (
-            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
-          ) {
+          } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
             errors.email = 'Invalid email address'
           }
 
@@ -286,21 +254,9 @@ export const LargerExample = () => {
           <>
             <div className="space-y-8">
               <p>{isSubmitting ? 'submitting' : 'not submitting'}</p>
-              <Input
-                id="email"
-                label="Email"
-                placeholder="something@gmail.com"
-              />
-              <Input
-                id="last_name"
-                label="last name"
-                placeholder="something in here"
-              />
-              <Select
-                id="profession"
-                label="Profession"
-                placeholder="something in here"
-              >
+              <Input id="email" label="Email" placeholder="something@gmail.com" />
+              <Input id="last_name" label="last name" placeholder="something in here" />
+              <Select id="profession" label="Profession" placeholder="something in here">
                 <Select.Option key="empty-enum" value="">
                   ---
                 </Select.Option>
@@ -349,11 +305,7 @@ export const LargerExample = () => {
                 type="list"
               >
                 <Radio value="pizza" label="Pizza" description="hello world" />
-                <Radio
-                  value="burger"
-                  label="Burger"
-                  description="hello world"
-                />
+                <Radio value="burger" label="Burger" description="hello world" />
                 <Radio value="fries" label="Fries" description="hello world" />
               </Radio.Group>
 
@@ -370,20 +322,12 @@ export const LargerExample = () => {
                       value={person.value}
                       label={person.label}
                       addOnBefore={({ active, selected }: any) => (
-                        <img
-                          src={person.avatar}
-                          alt=""
-                          className="h-6 w-6 rounded-full"
-                        />
+                        <img src={person.avatar} alt="" className="h-6 w-6 rounded-full" />
                       )}
                       children={({ active, selected }: any) => {
                         // console.log('selected', selected)
                         // console.log('active', active)
-                        return (
-                          <span className={'font-normal block truncate'}>
-                            {person.label}
-                          </span>
-                        )
+                        return <span className={'font-normal block truncate'}>{person.label}</span>
                       }}
                     />
                   )
@@ -456,12 +400,10 @@ export const CardForm = () => {
           <Panel
             header={
               <>
-                <h3 className="text-scale-1200 text-xl font-semibold">
-                  Custom Options
-                </h3>
+                <h3 className="text-scale-1200 text-xl font-semibold">Custom Options</h3>
                 <p className="text-scale-900">
-                  These settings apply to payment pages you create using Stripe
-                  Checkout and Payment Links.
+                  These settings apply to payment pages you create using Stripe Checkout and Payment
+                  Links.
                 </p>
               </>
             }
@@ -469,18 +411,10 @@ export const CardForm = () => {
               <>
                 <div className="border-t border-scale-400"></div>
                 <div className="py-3 px-6 flex gap-2 justify-end">
-                  <Button
-                    loading={isSubmitting}
-                    type="secondary"
-                    htmlType="submit"
-                  >
+                  <Button loading={isSubmitting} type="secondary" htmlType="submit">
                     Cancel
                   </Button>
-                  <Button
-                    loading={isSubmitting}
-                    type="primary"
-                    htmlType="submit"
-                  >
+                  <Button loading={isSubmitting} type="primary" htmlType="submit">
                     Save
                   </Button>
                 </div>
@@ -490,11 +424,7 @@ export const CardForm = () => {
             {/* <p>{isSubmitting ? 'submitting' : 'not submitting'}</p> */}
             {/* <div className="border-t border-scale-400"></div> */}
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <Toggle
                 className="col-span-8"
@@ -506,11 +436,7 @@ export const CardForm = () => {
             </Section>
             <div className="border-t border-scale-400"></div>
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <Radio.Group
                 className="col-span-8"
@@ -537,11 +463,7 @@ export const CardForm = () => {
             </Section>
             <div className="border-t border-scale-400"></div>
             <Section
-              header={
-                <label className="text-sm text-scale-1200 col-span-4">
-                  Faster checkout
-                </label>
-              }
+              header={<label className="text-sm text-scale-1200 col-span-4">Faster checkout</label>}
             >
               <div className="col-span-8 space-y-4">
                 <Input name="app_id" label="Application ID in Stripe" />
@@ -551,7 +473,7 @@ export const CardForm = () => {
                   descriptionText={
                     <span>
                       This can be found in{' '}
-                      <span className="text-brand-900 underline cursor-pointer transition hover:text-brand-800">
+                      <span className="text-brand underline cursor-pointer transition hover:text-brand-300">
                         the developer settings
                       </span>
                     </span>
diff --git a/packages/ui/src/components/Form/examples/AuthForm.tsx b/packages/ui/src/components/Form/examples/AuthForm.tsx
index 5053216d6bb..1b4987e2387 100644
--- a/packages/ui/src/components/Form/examples/AuthForm.tsx
+++ b/packages/ui/src/components/Form/examples/AuthForm.tsx
@@ -40,7 +40,7 @@ const DocsButton = () => {
                 transition
               "
     >
-      <div className="bg-brand-900 h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
+      <div className="bg-brand h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
         {/* <img
             className="text-white w-12 h-12"
             src="/icons/docs-illustration.svg"
@@ -51,7 +51,7 @@ const DocsButton = () => {
         <p className="text-scale-900 text-xs">
           Learn how to use Supabase Auth with Auth Policies to pick and choose what users see what.
         </p>
-        <p className="text-brand-900 mt-2 flex items-center gap-1 text-xs">
+        <p className="text-brand mt-2 flex items-center gap-1 text-xs">
           See Documenation
           <span className="transition group-hover:translate-x-1">
             <IconArrowRight strokeWidth={2} width={12} />
@@ -338,8 +338,8 @@ const AuthForm = () => {
             </div>
             <div className="flex items-center gap-3">
               {active ? (
-                <div className="bg-brand-200 border-brand-700 text-brand-900 flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
-                  <span className="bg-brand-900 text-brand-200 rounded-full p-0.5 text-xs">
+                <div className="bg-brand-200 border-brand-400 text-brand flex items-center gap-1 rounded-full border py-1 px-1 text-xs">
+                  <span className="bg-brand text-brand-200 rounded-full p-0.5 text-xs">
                     <IconCheck strokeWidth={2} size={12} />
                   </span>
                   <span className="px-1">Enabled</span>
@@ -1114,7 +1114,7 @@ export function WholeForm() {
                 transition
               "
             >
-              <div className="bg-brand-900 h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
+              <div className="bg-brand h-10 w-10 rounded p-1 transition duration-500 group-hover:-rotate-3 group-hover:scale-110">
                 {/* <img
             className="text-white w-12 h-12"
             src="/icons/docs-illustration.svg"
@@ -1126,7 +1126,7 @@ export function WholeForm() {
                   Learn how to use Supabase Auth with Auth Policies to pick and choose what users
                   see what.
                 </p>
-                <p className="text-brand-900 mt-2 flex items-center gap-1 text-xs">
+                <p className="text-brand mt-2 flex items-center gap-1 text-xs">
                   See Documenation
                   <span className="transition group-hover:translate-x-1">
                     <IconArrowRight strokeWidth={2} width={12} />
diff --git a/packages/ui/src/components/GlassPanel/GlassPanel.tsx b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
index 4f84bb995da..043d9daf007 100644
--- a/packages/ui/src/components/GlassPanel/GlassPanel.tsx
+++ b/packages/ui/src/components/GlassPanel/GlassPanel.tsx
@@ -37,7 +37,9 @@ const GlassPanel = ({
     <div
       className={[
         'shrink-0',
-        showIconBg ? 'bg-green-600 w-8 h-8 flex items-center justify-center rounded' : '',
+        showIconBg
+          ? 'bg-brand-300 border border-brand-400 w-8 h-8 flex items-center justify-center rounded'
+          : '',
       ].join(' ')}
     >
       {props.children}
@@ -114,7 +116,7 @@ const GlassPanel = ({
         </div>
 
         {children && <span className="text-sm text-scale-1100 flex-grow">{children}</span>}
-        {showLink && <span className="text-brand-900 justify-end text-sm">Learn more</span>}
+        {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
       </div>
     </div>
   )
diff --git a/packages/ui/src/components/Icon/Icon.module.css b/packages/ui/src/components/Icon/Icon.module.css
index a9a9de6e63e..14798373b2d 100644
--- a/packages/ui/src/components/Icon/Icon.module.css
+++ b/packages/ui/src/components/Icon/Icon.module.css
@@ -3,7 +3,7 @@
 }
 
 .sbui-icon-container--brand {
-  @apply bg-brand-800 bg-opacity-10 text-brand-800;
+  @apply bg-brand-300 bg-opacity-10 text-brand-300;
 }
 
 .sbui-icon-container--gray {
diff --git a/packages/ui/src/components/Icon/IconBackground.tsx b/packages/ui/src/components/Icon/IconBackground.tsx
index 4b73319ba46..703fcb59848 100644
--- a/packages/ui/src/components/Icon/IconBackground.tsx
+++ b/packages/ui/src/components/Icon/IconBackground.tsx
@@ -1,5 +1,5 @@
 export const IconBackground: React.FC = (props) => (
-  <div className="shrink-0 bg-green-600 w-8 h-8 flex items-center justify-center rounded">
+  <div className="shrink-0 bg-brand-300 border border-brand-400 w-8 h-8 flex items-center justify-center rounded">
     {props.children}
   </div>
 )
diff --git a/packages/ui/src/components/IconPanel/IconPanel.tsx b/packages/ui/src/components/IconPanel/IconPanel.tsx
index 00fc05a700f..90eb83e55e4 100644
--- a/packages/ui/src/components/IconPanel/IconPanel.tsx
+++ b/packages/ui/src/components/IconPanel/IconPanel.tsx
@@ -70,7 +70,13 @@ const IconPanel = ({
                 <img
                   className={iconSize === 'lg' ? 'w-8' : 'w-5'}
                   src={`${icon}${hasLightIcon && !isDarkMode ? '-light' : ''}.svg`}
-                  alt={title !== undefined ? `${title} Icon` : tooltip !== undefined ? `${tooltip} Icon` : 'Icon'}
+                  alt={
+                    title !== undefined
+                      ? `${title} Icon`
+                      : tooltip !== undefined
+                      ? `${tooltip} Icon`
+                      : 'Icon'
+                  }
                 />
               </IconContainer>
             ) : (
@@ -92,7 +98,7 @@ const IconPanel = ({
                 )}
               </div>
               {children && <span className="text-sm text-scale-1100 not-prose">{children}</span>}
-              {showLink && <span className="text-brand-900 justify-end text-sm">Learn more</span>}
+              {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
             </div>
           </div>
         </div>
diff --git a/packages/ui/src/components/Listbox/SelectStyled.module.css b/packages/ui/src/components/Listbox/SelectStyled.module.css
index e2cc7c937ff..14b34d1c018 100644
--- a/packages/ui/src/components/Listbox/SelectStyled.module.css
+++ b/packages/ui/src/components/Listbox/SelectStyled.module.css
@@ -7,7 +7,7 @@
   @apply text-gray-700 border border-solid border-gray-300;
   @apply cursor-default focus:outline-none focus:ring-1 focus:ring-brand-600 focus:border-brand-600;
   @apply dark:bg-transparent dark:text-white dark:border-gray-500;
-  @apply dark:focus:border-brand-500;
+  @apply dark:focus:border-brand-300;
   -webkit-appearance: none;
   -moz-appearance: none;
   text-indent: 1px;
diff --git a/packages/ui/src/components/Loading/Loading.module.css b/packages/ui/src/components/Loading/Loading.module.css
index fe814195451..4f2c5d1503e 100644
--- a/packages/ui/src/components/Loading/Loading.module.css
+++ b/packages/ui/src/components/Loading/Loading.module.css
@@ -10,7 +10,7 @@
 }
 
 .sbui-loading-spinner {
-  @apply text-brand-800 animate-spin;
+  @apply text-brand-300 animate-spin;
   margin: auto;
   position: absolute;
   top: 0;
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 189981a4242..a78c227d664 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -26,7 +26,7 @@
 }
 
 .sbui-menu__item--active--bar {
-  @apply border-l-4 border-brand-500;
+  @apply border-l-4 border-brand-300;
   border-left-style: solid;
 }
 
diff --git a/packages/ui/src/components/Modal/Modal.module.css b/packages/ui/src/components/Modal/Modal.module.css
index 447c46d3585..f7808e0531a 100644
--- a/packages/ui/src/components/Modal/Modal.module.css
+++ b/packages/ui/src/components/Modal/Modal.module.css
@@ -114,7 +114,7 @@
 }
 
 .sbui-modal-icon-container--success {
-  @apply text-brand-500 bg-brand-500 bg-opacity-20;
+  @apply text-brand-300 bg-brand-300 bg-opacity-20;
 }
 
 .sbui-modal-close-container {
diff --git a/packages/ui/src/components/Modal/Modal.stories.tsx b/packages/ui/src/components/Modal/Modal.stories.tsx
index 863c71ddef9..218bc53277f 100644
--- a/packages/ui/src/components/Modal/Modal.stories.tsx
+++ b/packages/ui/src/components/Modal/Modal.stories.tsx
@@ -147,7 +147,7 @@ export const Default = (args: any) => (
     {...args}
     header={
       <div className="flex items-center gap-2 text-scale-1200">
-        <div className="text-brand-700">
+        <div className="text-brand-400">
           <IconLink2 />
         </div>
         <div className="flex items-baseline gap-2">
diff --git a/packages/ui/src/components/Modal/Modal.tsx b/packages/ui/src/components/Modal/Modal.tsx
index fa42ee94ea0..2dde90265c7 100644
--- a/packages/ui/src/components/Modal/Modal.tsx
+++ b/packages/ui/src/components/Modal/Modal.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 // @ts-ignore
 import ModalStyles from './Modal.module.css'
 import { Button, IconX, Space } from './../../../index'
+import { cn } from '@ui/lib/utils'
 import { AnimationTailwindClasses } from '../../types'
 
 import * as Dialog from '@radix-ui/react-dialog'
@@ -188,9 +189,9 @@ const Modal = ({
   )
 }
 
-function Content({ children }: { children: React.ReactNode }) {
+function Content({ children, className }: { children: React.ReactNode; className?: string }) {
   const __styles = styleHandler('modal')
-  return <div className={__styles.content}>{children}</div>
+  return <div className={cn(__styles.content, className)}>{children}</div>
 }
 
 export function Separator() {
diff --git a/packages/ui/src/components/Radio/Radio.module.css b/packages/ui/src/components/Radio/Radio.module.css
index cf7cee7cc14..79a393d9617 100644
--- a/packages/ui/src/components/Radio/Radio.module.css
+++ b/packages/ui/src/components/Radio/Radio.module.css
@@ -43,9 +43,9 @@
   @apply h-4 w-4 ml-0 mr-3.5 rounded-2xl border border-solid transition-all;
 
   @apply text-brand-600 cursor-pointer border-gray-500;
-  @apply focus:ring-brand-500 hover:border-brand-700 focus:outline-none;
+  @apply focus:ring-brand-300 hover:border-brand-400 focus:outline-none;
 
-  @apply dark:bg-transparent dark:hover:border-brand-700;
+  @apply dark:bg-transparent dark:hover:border-brand-400;
 } */
 
 /* .sbui-radio:checked {
diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css
index 9769765d554..f5cc40ac1ff 100644
--- a/packages/ui/src/components/Tabs/Tabs.module.css
+++ b/packages/ui/src/components/Tabs/Tabs.module.css
@@ -12,7 +12,7 @@
 }
 
 .sbui-tab-button-underline--active {
-  @apply border-brand-700;
+  @apply border-brand-400;
   @apply rounded-none;
   @apply text-gray-600;
   @apply dark:text-white;
diff --git a/packages/ui/src/components/Typography/Link.module.css b/packages/ui/src/components/Typography/Link.module.css
index afc0911abfc..448eb19b3f4 100644
--- a/packages/ui/src/components/Typography/Link.module.css
+++ b/packages/ui/src/components/Typography/Link.module.css
@@ -1,3 +1,3 @@
 a.sbui-typography-link {
-  @apply text-sm text-brand-700 dark:text-brand-700 cursor-pointer;
+  @apply text-sm text-brand-400 dark:text-brand-400 cursor-pointer;
 }
diff --git a/packages/ui/src/components/Typography/Typography.module.css b/packages/ui/src/components/Typography/Typography.module.css
index 95a20672200..33f2cabca71 100644
--- a/packages/ui/src/components/Typography/Typography.module.css
+++ b/packages/ui/src/components/Typography/Typography.module.css
@@ -91,6 +91,6 @@
 }
 
 .dark .sbui-typography::selection {
-  /* @apply bg-brand-500; */
+  /* @apply bg-brand-300; */
   backgroundcolor: '#6f7bb635';
 }
diff --git a/packages/ui/src/components/shadcn/stories/Select.stories.tsx b/packages/ui/src/components/shadcn/stories/Select.stories.tsx
index da44645c8b6..3a63c0598fc 100644
--- a/packages/ui/src/components/shadcn/stories/Select.stories.tsx
+++ b/packages/ui/src/components/shadcn/stories/Select.stories.tsx
@@ -51,7 +51,7 @@ export function Default() {
   )
 }
 
-export function withSeperators() {
+export function withSeparators() {
   return (
     <Select>
       <SelectTrigger className="w-[180px]">
diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx
index 6846cabce76..2b4eaf92bf3 100644
--- a/packages/ui/src/components/shadcn/ui/badge.tsx
+++ b/packages/ui/src/components/shadcn/ui/badge.tsx
@@ -9,7 +9,7 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: 'bg-surface-200 text-light border border-scale-700',
-        brand: 'bg-brand-200 text-brand-primary border border-brand-700',
+        brand: 'bg-brand-200 text-brand-primary border border-brand-400',
         secondary:
           'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
         destructive: 'bg-destructive-400 text-destructive border border-destructive-300',
@@ -56,7 +56,7 @@ const badgeVariants = cva(
 //         },
 //         dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
 //         color: {
-//           brand: 'bg-brand-200 text-brand-1100 border border-brand-700',
+//           brand: 'bg-brand-200 text-brand-600 border border-brand-400',
 //           scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
 //           tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
 //           red: `bg-red-200 text-red-1100 border border-red-700`,
diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts
index 8fd22a61deb..e9d0afb240a 100644
--- a/packages/ui/src/lib/tailwind-demo-classes.ts
+++ b/packages/ui/src/lib/tailwind-demo-classes.ts
@@ -41,6 +41,8 @@ export default {
     "bg-brand-200",
     "bg-brand-300",
     "bg-brand-400",
+    "bg-brand-500",
+    "bg-brand-600",
     "bg-brand"
   ],
   "palletes": [
diff --git a/packages/ui/src/lib/theme/customThemeExample.ts b/packages/ui/src/lib/theme/customThemeExample.ts
index 284a945e2d8..91eb4ad1bcd 100644
--- a/packages/ui/src/lib/theme/customThemeExample.ts
+++ b/packages/ui/src/lib/theme/customThemeExample.ts
@@ -35,7 +35,7 @@ const default__padding_and_text = {
 export default {
   button: {
     type: {
-      primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand-900`,
+      primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand`,
     },
   },
 }
diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts
index dc20809681e..832713fae83 100644
--- a/packages/ui/src/lib/theme/defaultTheme.ts
+++ b/packages/ui/src/lib/theme/defaultTheme.ts
@@ -210,13 +210,13 @@ export default {
    */
 
   badge: {
-    base: 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-opacity-10',
+    base: 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-normal bg-opacity-10',
     size: {
       large: 'px-3 py-0.5 rounded-full text-sm',
     },
     dot: '-ml-0.5 mr-1.5 h-2 w-2 rounded-full',
     color: {
-      brand: 'bg-brand-200 text-brand-1100 border border-brand-700',
+      brand: 'bg-brand-500 text-brand-600 border border-brand-400',
       scale: 'bg-scale-200 text-scale-1100 border border-scale-700',
       tomato: `bg-tomato-200 text-tomato-1100 border border-tomato-700`,
       red: `bg-red-200 text-red-1100 border border-red-700`,
@@ -269,10 +269,10 @@ export default {
         description: `text-scale-1100`,
       },
       success: {
-        base: `bg-brand-300 dark:bg-brand-100 border-brand-700`,
-        icon: `text-brand-900`,
-        header: `text-brand-1200`,
-        description: `text-brand-1100`,
+        base: `bg-brand-300 dark:bg-brand-100 border-brand-400`,
+        icon: `text-brand`,
+        header: `text-brand-600`,
+        description: `text-brand-600`,
       },
       neutral: {
         base: `bg-scale-300 dark:bg-scale-300 border-scale-500`,
@@ -568,7 +568,7 @@ export default {
       bg-transparent
       ${defaults.focus}
       focus:ring-scale-400
-      text-brand-900
+      text-brand
       border-scale-700
       shadow-sm
       rounded
@@ -629,7 +629,7 @@ export default {
       focus:ring-brand-400
       border-scale-700
 
-      text-brand-900
+      text-brand
       shadow-sm
       cursor-pointer
       peer
@@ -934,8 +934,8 @@ export default {
       hover:bg-scale-700
     `,
     active: `
-      !bg-brand-900
-      !hover:bg-brand-900
+      !bg-brand
+      !hover:bg-brand
     `,
     handle_container: {
       tiny: 'h-4 w-7',
@@ -1268,8 +1268,8 @@ export default {
             z-10
 
             border-l
-            border-brand-900
-            group-hover:border-brand-900
+            border-brand
+            group-hover:border-brand
           `,
           rounded: `rounded-md`,
         },
@@ -1455,8 +1455,8 @@ export default {
     option_active: `text-scale-1200 bg-scale-600`,
     option_disabled: `cursor-not-allowed opacity-50`,
     option_inner: `flex items-center space-x-3`,
-    option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand-900`,
-    option_check_active: `text-brand-900`,
+    option_check: `absolute inset-y-0 right-0 flex items-center pr-3 text-brand`,
+    option_check_active: `text-brand`,
     option_check_icon: `h-5 w-5`,
   },
 
@@ -1500,7 +1500,7 @@ export default {
     },
     spinner: `
       absolute
-      text-brand-900 animate-spin
+      text-brand animate-spin
       inset-0
       m-auto
     `,
diff --git a/spec/cli_v1_commands.yaml b/spec/cli_v1_commands.yaml
index d7db35da785..5d953ab7bd2 100644
--- a/spec/cli_v1_commands.yaml
+++ b/spec/cli_v1_commands.yaml
@@ -1137,9 +1137,13 @@ commands:
     summary: Apply pending migrations to local database
     tags: []
     links: []
-    usage: supabase migration up
+    usage: supabase migration up [flags]
     subcommands: []
-    flags: []
+    flags:
+      - id: include-all
+        name: --include-all
+        description: Include all migrations not found on remote history table.
+        default_value: 'false'
   - id: supabase-migration-squash
     title: supabase migration squash
     summary: Squash migrations to a single file
@@ -1424,6 +1428,24 @@ commands:
   - id: supabase-inspect-db-vacuum-stats
     title: supabase inspect db vacuum-stats
     summary: Show statistics related to vacuum operations per table
+    description: |2
+
+      This shows you stats about the vacuum activities for each table. Due to Postgres' [MVCC](https://www.postgresql.org/docs/current/mvcc.html) when data is updated or deleted new rows are created and old rows are made invisible and marked as "dead tuples". Usually the [autovaccum](https://supabase.com/docs/guides/platform/database-size#vacuum-operations) process will aysnchronously clean the dead tuples.
+
+      The command lists when the last vacuum and last auto vacuum took place, the row count on the table as well as the count of dead rows and whether autovacuum is expected to run or not. If the number of dead rows is much higher than the row count, or if an autovacuum is expected but has not been performed for some time, this can indicate that autovacuum is not able to keep up and that your vacuum settings need to be tweaked or that you require more compute or disk IOPS to allow autovaccum to complete.
+
+
+      ```
+              SCHEMA        │              TABLE               │ LAST VACUUM │ LAST AUTO VACUUM │      ROW COUNT       │ DEAD ROW COUNT │ EXPECT AUTOVACUUM?
+      ──────────────────────┼──────────────────────────────────┼─────────────┼──────────────────┼──────────────────────┼────────────────┼─────────────────────
+       auth                 │ users                            │             │ 2023-06-26 12:34 │               18,030 │              0 │ no
+       public               │ profiles                         │             │ 2023-06-26 23:45 │               13,420 │             28 │ no
+       public               │ logs                             │             │ 2023-06-26 01:23 │            1,313,033 │      3,318,228 │ yes
+       storage              │ objects                          │             │                  │             No stats │              0 │ no
+       storage              │ buckets                          │             │                  │             No stats │              0 │ no
+       supabase_migrations  │ schema_migrations                │             │                  │             No stats │              0 │ no
+
+      ```
     tags: []
     links: []
     usage: supabase inspect db vacuum-stats
@@ -1436,6 +1458,15 @@ commands:
   - id: supabase-inspect-db-unused-indexes
     title: supabase inspect db unused-indexes
     summary: Show indexes with low usage
+    description: |2
+
+      This command displays indexes that have < 50 scans recorded against them, and are greater than 5 pages in size, ordered by size relative to the number of index scans. This command is generally useful for discovering indexes that are unused. Indexes can impact write performance, as well as read performance should they occupy space in memory, its a good idea to remove indexes that are not needed or being used.
+
+      ```
+              TABLE        │                   INDEX                    │ INDEX SIZE │ INDEX SCANS
+      ─────────────────────┼────────────────────────────────────────────┼────────────┼──────────────
+       public.users        │ user_id_created_at_idx                     │ 97 MB      │           0
+      ```
     tags: []
     links: []
     usage: supabase inspect db unused-indexes
@@ -1448,6 +1479,17 @@ commands:
   - id: supabase-inspect-db-total-table-sizes
     title: supabase inspect db total-table-sizes
     summary: Show total table sizes, including table index sizes
+    description: |2-
+
+      This command displays the total size of each table in the database. It is the sum of the values that `pg_table_size()` and `pg_indexes_size()` gives for each table.
+
+      ```
+                      NAME               │    SIZE
+      ───────────────────────────────────┼─────────────
+        job_run_details                  │ 395 MB
+        slack_msgs                       │ 648 kB
+        emails                           │ 640 kB
+      ```
     tags: []
     links: []
     usage: supabase inspect db total-table-sizes
@@ -1460,6 +1502,15 @@ commands:
   - id: supabase-inspect-db-total-index-size
     title: supabase inspect db total-index-size
     summary: Show total size of all indexes
+    description: |2-
+
+      This command displays the total size of all indexes on the database. It is calculated by taking the number of pages (reported in `relpages`) and multiplying it by the page size (8192 bytes).
+
+      ```
+          SIZE
+        ─────────
+          12 MB
+      ```
     tags: []
     links: []
     usage: supabase inspect db total-index-size
@@ -1473,6 +1524,20 @@ commands:
     title: supabase inspect db table-sizes
     summary: |
       Show table sizes of individual tables without their index sizes
+    description: |2-
+
+      This command displays the size of each table in the database. It is calculated by using the system administration function `pg_table_size()`, which includes the size of the main data fork, free space map, visibility map and TOAST data. It does not include the size of the table's indexes.
+
+
+      ```
+                        NAME               │    SIZE
+        ───────────────────────────────────┼─────────────
+          job_run_details                  │ 385 MB
+          emails                           │ 584 kB
+          job                              │ 40 kB
+          sessions                         │ 0 bytes
+          prod_resource_notifications_meta │ 0 bytes
+      ```
     tags: []
     links: []
     usage: supabase inspect db table-sizes
@@ -1485,6 +1550,19 @@ commands:
   - id: supabase-inspect-db-table-record-counts
     title: supabase inspect db table-record-counts
     summary: Show estimated number of rows per table
+    description: |2-
+
+      This command displays an estimated count of rows per table, descending by estimated count. The estimated count is derived from `n_live_tup`, which is updated by vacuum operations. Due to the way `n_live_tup` is populated, sparse vs. dense pages can result in estimations that are significantly out from the real count of rows.
+
+
+      ```
+             NAME    │ ESTIMATED COUNT
+        ─────────────┼──────────────────
+          logs       │          322943
+          emails     │            1103
+          job        │               1
+          migrations │               0
+      ```
     tags: []
     links: []
     usage: supabase inspect db table-record-counts
@@ -1497,6 +1575,19 @@ commands:
   - id: supabase-inspect-db-table-index-sizes
     title: supabase inspect db table-index-sizes
     summary: Show index sizes of individual tables
+    description: |2
+
+      This command displays the total size of indexes for each table. It is calculated by using the system administration function `pg_indexes_size()`.
+
+      ```
+                       TABLE               │ INDEX SIZE
+        ───────────────────────────────────┼─────────────
+          job_run_details                  │ 10104 kB
+          users                            │ 128 kB
+          job                              │ 32 kB
+          instances                        │ 8192 bytes
+          http_request_queue               │ 0 bytes
+      ```
     tags: []
     links: []
     usage: supabase inspect db table-index-sizes
@@ -1509,6 +1600,21 @@ commands:
   - id: supabase-inspect-db-seq-scans
     title: supabase inspect db seq-scans
     summary: Show number of sequential scans recorded against all tables
+    description: |2+
+
+      This command displays the number of sequential scans recorded against all tables, descending by count of sequential scans. Tables that have very high numbers of sequential scans may be underindexed, and it may be worth investigating queries that read from these tables.
+
+
+      ```
+                        NAME               │ COUNT
+        ───────────────────────────────────┼─────────
+          emails                           │ 182435
+          users                            │  25063
+          job_run_details                  │     60
+          schema_migrations                │      0
+          migrations                       │      0
+      ```
+
     tags: []
     links: []
     usage: supabase inspect db seq-scans
@@ -1521,6 +1627,39 @@ commands:
   - id: supabase-inspect-db-role-connections
     title: supabase inspect db role-connections
     summary: Show number of active connections for all database roles
+    description: |2
+
+      This command shows the number of active connections for each database roles to see which specific role might be consuming more connections than expected.
+
+      This is a Supabase specific command. You can see this breakdown on the dashboard as well:
+      https://app.supabase.com/project/_/database/roles
+
+      The maximum number of active connections depends [on your instance size](https://supabase.com/docs/guides/platform/compute-add-ons). You can [manually overwrite](https://supabase.com/docs/guides/platform/performance#allowing-higher-number-of-connections) the allowed number of connection but it is not advised.
+
+      ```
+
+
+                  ROLE NAME         │ ACTIVE CONNCTION
+        ────────────────────────────┼───────────────────
+          authenticator             │                5
+          postgres                  │                5
+          supabase_admin            │                1
+          pgbouncer                 │                1
+          anon                      │                0
+          authenticated             │                0
+          service_role              │                0
+          dashboard_user            │                0
+          supabase_auth_admin       │                0
+          supabase_storage_admin    │                0
+          supabase_functions_admin  │                0
+          pgsodium_keyholder        │                0
+          pg_read_all_data          │                0
+          pg_write_all_data         │                0
+          pg_monitor                │                0
+
+      Active connections 12/90
+
+      ```
     tags: []
     links: []
     usage: supabase inspect db role-connections
@@ -1533,6 +1672,19 @@ commands:
   - id: supabase-inspect-db-replication-slots
     title: supabase inspect db replication-slots
     summary: Show information about replication slots on the database
+    description: |2-
+
+      This command shows information about [logical replication slots](https://www.postgresql.org/docs/current/logical-replication.html) that are setup on the database. It shows if the slot is active, the state of the WAL sender process ('startup', 'catchup', 'streaming', 'backup', 'stopping') the replication client address and the replication lag in GB.
+
+      This command is useful to check that the amount of replication lag is as low as possible, replication lag can occur due to network latency issues, slow disk I/O, long running transactions or lack of ability for the subscriber to consume WAL fast enough.
+
+
+      ```
+                             NAME                    │ ACTIVE │ STATE   │ REPLICATION CLIENT ADDRESS │ REPLICATION LAG GB
+        ─────────────────────────────────────────────┼────────┼─────────┼────────────────────────────┼─────────────────────
+          supabase_realtime_replication_slot         │ t      │ N/A     │ N/A                        │                  0
+          datastream                                 │ t      │ catchup │ 24.201.24.106              │                 45
+      ```
     tags: []
     links: []
     usage: supabase inspect db replication-slots
@@ -1546,6 +1698,22 @@ commands:
     title: supabase inspect db outliers
     summary: |
       Show queries from pg_stat_statements ordered by total execution time
+    description: |2
+
+      This command displays statements, obtained from `pg_stat_statements`, ordered by the amount of time to execute in aggregate. This includes the statement itself, the total execution time for that statement, the proportion of total execution time for all statements that statement has taken up, the number of times that statement has been called, and the amount of time that statement spent on synchronous I/O (reading/writing from the file system).
+
+      Typically, an efficient query will have an appropriate ratio of calls to total execution time, with as little time spent on I/O as possible. Queries that have a high total execution time but low call count should be investigated to improve their performance. Queries that have a high proportion of execution time being spent on synchronous I/O should also be investigated.
+
+      ```
+
+                       QUERY                   │ EXECUTION TIME   │ PROPORTION OF EXEC TIME │ NUMBER CALLS │ SYNC IO TIME
+      ─────────────────────────────────────────┼──────────────────┼─────────────────────────┼──────────────┼───────────────
+       SELECT * FROM archivable_usage_events.. │ 154:39:26.431466 │ 72.2%                   │ 34,211,877   │ 00:00:00
+       COPY public.archivable_usage_events (.. │ 50:38:33.198418  │ 23.6%                   │ 13           │ 13:34:21.00108
+       COPY public.usage_events (id, reporte.. │ 02:32:16.335233  │ 1.2%                    │ 13           │ 00:34:19.784318
+       INSERT INTO usage_events (id, retaine.. │ 01:42:59.436532  │ 0.8%                    │ 12,328,187   │ 00:00:00
+       SELECT * FROM usage_events WHERE (alp.. │ 01:18:10.754354  │ 0.6%                    │ 102,114,301  │ 00:00:00
+      ```
     tags: []
     links: []
     usage: supabase inspect db outliers
@@ -1559,6 +1727,17 @@ commands:
     title: supabase inspect db long-running-queries
     summary: |
       Show currently running queries running for longer than 5 minutes
+    description: |2
+
+      This command displays currently running queries, that have been running for longer than 5 minutes, descending by duration. Very long running queries can be a source of multiple issues, such as preventing DDL statements completing or vacuum being unable to update `relfrozenxid`.
+
+      ```
+        PID  │     DURATION    │                                         QUERY
+      ───────┼─────────────────┼───────────────────────────────────────────────────────────────────────────────────────
+       19578 | 02:29:11.200129 | EXPLAIN SELECT  "students".* FROM "students"  WHERE "students"."id" = 1450645 LIMIT 1
+       19465 | 02:26:05.542653 | EXPLAIN SELECT  "students".* FROM "students"  WHERE "students"."id" = 1889881 LIMIT 1
+       19632 | 02:24:46.962818 | EXPLAIN SELECT  "students".* FROM "students"  WHERE "students"."id" = 1581884 LIMIT 1
+      ```
     tags: []
     links: []
     usage: supabase inspect db long-running-queries
@@ -1572,6 +1751,17 @@ commands:
     title: supabase inspect db locks
     summary: |
       Show queries which have taken out an exclusive lock on a relation
+    description: |2
+
+      This command displays queries that have taken out an exclusive lock on a relation. Exclusive locks typically prevent other operations on that relation from taking place, and can be a cause of "hung" queries that are waiting for a lock to be granted.
+
+      If you see a query that is hanging for a very long time or causing blocking issues you may consider killing the query by connecting to the database and running `SELECT pg_cancel_backend(PID);` to cancel the query. If the query still does not stop you can force a hard stop by running `SELECT pg_terminate_backend(PID);`
+
+      ```
+           PID   │ RELNAME │ TRANSACTION ID │ GRANTED │                  QUERY                  │   AGE
+        ─────────┼─────────┼────────────────┼─────────┼─────────────────────────────────────────┼───────────
+          328112 │ null    │              0 │ t       │ SELECT * FROM logs;                     │ 00:04:20
+      ```
     tags: []
     links: []
     usage: supabase inspect db locks
@@ -1584,6 +1774,7 @@ commands:
   - id: supabase-inspect-db-index-usage
     title: supabase inspect db index-usage
     summary: Show information about the efficiency of indexes
+    description: "\n\nThis command provides information on the efficiency of indexes, represented as what percentage of total scans were index scans. A low percentage can indicate under indexing, or wrong data being indexed.\n\n```\n       TABLE NAME     │ PERCENTAGE OF TIMES INDEX USED │ ROWS IN TABLE\n  ────────────────────┼────────────────────────────────┼────────────────\n    user_events       │                             99 │       4225318 \n    user_feed         │                             99 │       3581573\n    unindexed_table   │                              0 │        322911\n    job               │                            100 │         33242\n    schema_migrations │                             97 │             0\n    migrations        │ Insufficient data              │             0\n```"
     tags: []
     links: []
     usage: supabase inspect db index-usage
@@ -1596,6 +1787,20 @@ commands:
   - id: supabase-inspect-db-index-sizes
     title: supabase inspect db index-sizes
     summary: Show index sizes of individual indexes
+    description: |2-
+
+      This command displays the size of each each index in the database. It is calculated by taking the number of pages (reported in `relpages`) and multiplying it by the page size (8192 bytes).
+
+      ```
+                    NAME              │    SIZE
+        ──────────────────────────────┼─────────────
+          user_events_index           │ 2082 MB
+          job_run_details_pkey        │ 3856 kB
+          schema_migrations_pkey      │ 16 kB
+          refresh_tokens_token_unique │ 8192 bytes
+          users_instance_id_idx       │ 0 bytes
+          buckets_pkey                │ 0 bytes
+      ```
     tags: []
     links: []
     usage: supabase inspect db index-sizes
@@ -1609,6 +1814,21 @@ commands:
     title: supabase inspect db calls
     summary: |
       Show queries from pg_stat_statements ordered by total times called
+    description: |2
+
+      This command is much like the `supabase inspect db outliers` command, but ordered by the number of times a statement has been called.
+
+      You can use this information to see which queries are called most often, which can potentially be good candidates for optimisation.
+
+      ```
+
+                              QUERY                      │ TOTAL EXECUTION TIME │ PROPORTION OF TOTAL EXEC TIME │ NUMBER CALLS │  SYNC IO TIME
+        ─────────────────────────────────────────────────┼──────────────────────┼───────────────────────────────┼──────────────┼──────────────────
+          SELECT * FROM users WHERE id = $1              │ 14:50:11.828939      │ 89.8%                         │  183,389,757 │ 00:00:00.002018
+          SELECT * FROM user_events                      │ 01:20:23.466633      │ 1.4%                          │       78,325 │ 00:00:00
+          INSERT INTO users (email, name) VALUES ($1, $2)│ 00:40:11.616882      │ 0.8%                          │       54,003 │ 00:00:00.000322
+
+      ```
     tags: []
     links: []
     usage: supabase inspect db calls
@@ -1621,6 +1841,20 @@ commands:
   - id: supabase-inspect-db-cache-hit
     title: supabase inspect db cache-hit
     summary: Show cache hit rates for tables and indices
+    description: |2-
+
+      This command provides information on the efficiency of the buffer cache and how often your queries have to go hit the disk rather than reading from memory. Information on both index reads (`index hit rate`) as well as table reads (`table hit rate`) are shown. In general, databases with low cache hit rates perform worse as it is slower to go to disk than retrieve data from memory. If your table hit rate is low, this can indicate that you do not have enough RAM and you may benefit from upgrading to a larger compute addon with more memory. If your index hit rate is low, this may indicate that there is scope to add more appropriate indexes.
+
+      The hit rates are calculated as a ratio of number of table or index blocks fetched from the postgres buffer cache against the sum of cached blocks and uncached blocks read from disk.
+
+      On smaller compute plans (free, small, medium), a ratio of below 99% can indicate a problem. On larger plans the hit rates may be lower but performance will remain constant as the data may use the OS cache rather than Postgres buffer cache.
+
+      ```
+               NAME      │  RATIO
+        ─────────────────┼───────────
+          index hit rate │ 0.996621
+          table hit rate │ 0.999341
+       ```
     tags: []
     links: []
     usage: supabase inspect db cache-hit
@@ -1634,6 +1868,15 @@ commands:
     title: supabase inspect db blocking
     summary: |
       Show queries that are holding locks and the queries that are waiting for them to be released
+    description: |2
+
+      This command shows you statements that are currently holding locks and blocking, as well as the statement that is being blocked. This can be used in conjunction with `inspect db locks` to determine which statements need to be terminated in order to resolve lock contention.
+
+      ```
+          BLOCKED PID │ BLOCKING STATEMENT           │ BLOCKING DURATION │ BLOCKING PID │ BLOCKED STATEMENT                                                                      │ BLOCKED DURATION
+        ──────────────┼──────────────────────────────┼───────────────────┼──────────────┼────────────────────────────────────────────────────────────────────────────────────────┼───────────────────
+          253         │ select count(*) from mytable │ 00:00:03.838314   │        13495 │ UPDATE "mytable" SET "updated_at" = '2023─08─03 14:07:04.746688' WHERE "id" = 83719341 │ 00:00:03.821826
+      ```
     tags: []
     links: []
     usage: supabase inspect db blocking
@@ -1647,6 +1890,20 @@ commands:
     title: supabase inspect db bloat
     summary: |
       Estimates space allocated to a relation that is full of dead tuples
+    description: |2
+
+      This command displays an estimation of table "bloat" - Due to Postgres' [MVCC](https://www.postgresql.org/docs/current/mvcc.html) when data is updated or deleted new rows are created and old rows are made invisible and marked as "dead tuples". Usually the [autovaccum](https://supabase.com/docs/guides/platform/database-size#vacuum-operations) process will asynchronously clean the dead tuples. Sometimes the autovaccum is unable to work fast enough to reduce or prevent tables from becoming bloated. High bloat can slow down queries, cause excessive IOPS and waste space in your database.
+
+      Tables with a high bloat ratio should be investigated to see if there are vacuuming is not quick enough or there are other issues.
+
+      ```
+          TYPE  │ SCHEMA NAME │        OBJECT NAME         │ BLOAT │ WASTE
+        ────────┼─────────────┼────────────────────────────┼───────┼─────────────
+          table │ public      │ very_bloated_table         │  41.0 │ 700 MB
+          table │ public      │ my_table                   │   4.0 │ 76 MB
+          table │ public      │ happy_table                │   1.0 │ 1472 kB
+          index │ public      │ happy_table::my_nice_index │   0.7 │ 880 kB
+      ```
     tags: []
     links: []
     usage: supabase inspect db bloat
@@ -2131,6 +2388,10 @@ commands:
         description: |
           Print the migrations that would be applied, but don't actually apply them.
         default_value: 'false'
+      - id: include-all
+        name: --include-all
+        description: Include all migrations not found on remote history table.
+        default_value: 'false'
       - id: include-roles
         name: --include-roles
         description: Include custom roles from supabase/roles.sql.
diff --git a/spec/cli_v1_config.yaml b/spec/cli_v1_config.yaml
index 09b38779278..308a3e0c4ae 100644
--- a/spec/cli_v1_config.yaml
+++ b/spec/cli_v1_config.yaml
@@ -15,7 +15,7 @@ info:
   description: |
     A `config.toml` file is generated after running `supabase init`.
 
-    This file is located in the `supabase` folder under `supabase/config.toml`.
+    This file is located in the `supabase` folder under `supabase/config.toml`. You can edit this file to change the settings for your locally running project. After you make changes, you will need to restart using `supabase stop` and then `supabase start` for the changes to take effect.
   tags:
     - id: general
       title: General
@@ -57,6 +57,9 @@ parameters:
     links:
       - name: 'PostgREST configuration'
         link: 'https://postgrest.org/en/stable/configuration.html'
+    usage: |
+      [api]
+      port = 54321
 
   - id: 'api.schemas'
     title: 'api.schemas'
diff --git a/spec/supabase_kt_v0.yml b/spec/supabase_kt_v0.yml
index 256778c0e98..265d6a037c9 100644
--- a/spec/supabase_kt_v0.yml
+++ b/spec/supabase_kt_v0.yml
@@ -2563,7 +2563,7 @@ functions:
           - `NotAuthenticated`, 
           - `LoadingFromStorage`, 
           - `NetworkError`, 
-          - `Authenticated(sesssion)`
+          - `Authenticated(session)`
   - id: reset-password-for-email
     title: 'Send a password reset request'
     notes: |
@@ -2571,12 +2571,10 @@ functions:
       - The password reset flow consist of 2 broad steps: (i) Allow the user to login via the password reset link; (ii) Update the user's password.
       - The `sendRecoveryEmail()` only sends a password reset link to the user's email.
       To update the user's password, see [`modifyUser()`](/docs/reference/kotlin/auth-updateuser).
-      - When the user clicks the reset link in the email they are redirected back to your application.
-      You can configure the URL that the user is redirected to with the `redirectUrl` parameter.
-      See [redirect URLs and wildcards](/docs/guides/auth#redirect-urls-and-wildcards) to add additional redirect URLs to your project.
+      - The user gets redirected back to your app, assuming you setup [OTP handling](/docs/reference/kotlin/initializing)
       - After the user has been redirected successfully, prompt them for a new password and call `modifyUser()`:
         ```kotlin
-        client.gotrue.modifyUser(Email) {
+        client.gotrue.modifyUser {
             password = "1234567"
         }
         ```
@@ -3098,9 +3096,10 @@ functions:
           function()
           //invoke it with a body:
           function(body)
-          //invoke it with custom headers:
+          //invoke it with custom request options:
           function(body) {
-              set("Header", "Value")
+              header("Header", "Value")
+              parameter("Key", "Value") //url parameter
           }
           ```
   - id: subscribe
diff --git a/spec/supabase_py_v2.yml b/spec/supabase_py_v2.yml
index e99bb5128e2..34e1e68a6fa 100644
--- a/spec/supabase_py_v2.yml
+++ b/spec/supabase_py_v2.yml
@@ -257,7 +257,7 @@ functions:
         description: Sets the session data from refresh_token and returns current session or an error if the refresh_token is invalid.
         code: |
           ```
-          res = supabase.auth.set_session({"access_token": access_token, "refresh_token": refresh_token)
+          res = supabase.auth.set_session(access_token, refresh_token)
           ```
   - id: refresh-session
     title: 'refresh_session()'
diff --git a/studio/.storybook/preview.css b/studio/.storybook/preview.css
index c12137dbd9d..7838b9a4816 100644
--- a/studio/.storybook/preview.css
+++ b/studio/.storybook/preview.css
@@ -85,11 +85,11 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+  @apply bg-brand-300 text-scale-fixed-100 border-brand-300;
 }
 
 .react-datepicker__day--in-selecting-range {
-  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+  @apply bg-brand-400 text-scale-fixed-100 border-brand-400;
 }
 
 .react-datepicker__day--selecting-range-start {
@@ -101,13 +101,13 @@
 }
 
 .react-datepicker__day--selected {
-  @apply bg-brand-800 text-white;
+  @apply bg-brand-300 text-white;
 }
 
 .react-datepicker__day--range-start {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--range-end {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
diff --git a/studio/components/README.md b/studio/components/README.md
index 42687fd8e57..e98e5723878 100644
--- a/studio/components/README.md
+++ b/studio/components/README.md
@@ -29,16 +29,15 @@
 ## Template for building components
 
 ```ts
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
 // Declare the prop types of your component
-interface Props {
+interface ComponentAProps {
   sampleProp: string
 }
 
 // Name your component accordingly
-const ComponentA: FC<Props> = ({ sampleProp }) => {
+const ComponentA = ({ sampleProp }: ComponentAProps) => {
   return <div>ComponentA: {sampleProp}</div>
 }
 
diff --git a/studio/components/grid/components/common/BlockKeys.tsx b/studio/components/grid/components/common/BlockKeys.tsx
index 388fb92703c..bb3ecbab495 100644
--- a/studio/components/grid/components/common/BlockKeys.tsx
+++ b/studio/components/grid/components/common/BlockKeys.tsx
@@ -1,5 +1,5 @@
 import { useClickedOutside } from 'hooks'
-import { FC, useRef, useEffect, useCallback, KeyboardEvent, ReactNode } from 'react'
+import { KeyboardEvent, ReactNode, useCallback, useEffect, useRef } from 'react'
 
 interface BlockKeysProps {
   value: string | null
@@ -13,7 +13,7 @@ interface BlockKeysProps {
  * We use this with cell editor to allow editor component to handle keys.
  * Example: press enter to add newline on textEditor
  */
-export const BlockKeys: FC<BlockKeysProps> = ({ value, children, onEscape, onEnter }) => {
+export const BlockKeys = ({ value, children, onEscape, onEnter }: BlockKeysProps) => {
   const ref = useRef(null)
   const isClickedOutside = useClickedOutside(ref)
 
diff --git a/studio/components/grid/components/common/DropdownControl.tsx b/studio/components/grid/components/common/DropdownControl.tsx
index e57ddf97e9a..3b51e0471ca 100644
--- a/studio/components/grid/components/common/DropdownControl.tsx
+++ b/studio/components/grid/components/common/DropdownControl.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 import { Dropdown } from 'ui'
 
 interface DropdownControlProps {
@@ -15,7 +15,7 @@ interface DropdownControlProps {
   isNested?: boolean
 }
 
-export const DropdownControl: FC<DropdownControlProps> = (p) => {
+export const DropdownControl = (p: PropsWithChildren<DropdownControlProps>) => {
   const { className, children, side, align, isNested } = p
   return (
     <Dropdown
@@ -30,7 +30,7 @@ export const DropdownControl: FC<DropdownControlProps> = (p) => {
   )
 }
 
-const DropdownItems: FC<DropdownControlProps> = ({ options, onSelect }) => {
+const DropdownItems = ({ options, onSelect }: DropdownControlProps) => {
   return (
     <div className="dropdown-control" style={{ maxHeight: '30vh' }}>
       {options.length == 0 && <p className="dropdown-control__empty-text">No more items</p>}
diff --git a/studio/components/grid/components/common/EmptyValue.tsx b/studio/components/grid/components/common/EmptyValue.tsx
index d5f7b7d13c7..b1196a5c556 100644
--- a/studio/components/grid/components/common/EmptyValue.tsx
+++ b/studio/components/grid/components/common/EmptyValue.tsx
@@ -1,11 +1,3 @@
-import * as React from 'react'
-
-type EmptyValueProps = {}
-
-export const EmptyValue: React.FC<EmptyValueProps> = ({}) => {
-  return (
-    <span className="sb-grid-empty-value" style={{ opacity: 0.5 }}>
-      EMPTY
-    </span>
-  )
+export const EmptyValue = () => {
+  return <span className="sb-grid-empty-value opacity-50">EMPTY</span>
 }
diff --git a/studio/components/grid/components/common/MonacoEditor.tsx b/studio/components/grid/components/common/MonacoEditor.tsx
index f1cf3b61b8f..8ffa784ebeb 100644
--- a/studio/components/grid/components/common/MonacoEditor.tsx
+++ b/studio/components/grid/components/common/MonacoEditor.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react'
 import Editor from '@monaco-editor/react'
 
 type MonacoEditorProps = {
@@ -10,14 +9,14 @@ type MonacoEditorProps = {
   onMount?: (editor: any) => void
 }
 
-export const MonacoEditor: React.FC<MonacoEditorProps> = ({
+export const MonacoEditor = ({
   width,
   height,
   value,
   language,
   onChange,
   onMount,
-}) => {
+}: MonacoEditorProps) => {
   function handleEditorOnMount(editor: any) {
     // add margin above first line
     editor.changeViewZones((accessor: any) => {
diff --git a/studio/components/grid/components/common/NullValue.tsx b/studio/components/grid/components/common/NullValue.tsx
index 342c1ac1365..a2f45c9398c 100644
--- a/studio/components/grid/components/common/NullValue.tsx
+++ b/studio/components/grid/components/common/NullValue.tsx
@@ -1,11 +1,3 @@
-import * as React from 'react'
-
-type NullValueProps = {}
-
-export const NullValue: React.FC<NullValueProps> = ({}) => {
-  return (
-    <span className="null-value" style={{ opacity: 0.5 }}>
-      NULL
-    </span>
-  )
+export const NullValue = () => {
+  return <span className="null-value opacity-50">NULL</span>
 }
diff --git a/studio/components/grid/components/grid/AddColumn.tsx b/studio/components/grid/components/grid/AddColumn.tsx
index d4daba4c134..23a318f9bf4 100644
--- a/studio/components/grid/components/grid/AddColumn.tsx
+++ b/studio/components/grid/components/grid/AddColumn.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { CalculatedColumn } from '@supabase/react-data-grid'
 import { Button, IconPlus } from 'ui'
+
 import { ADD_COLUMN_KEY } from '../../constants'
 import { useTrackedState } from '../../store'
 import { DefaultFormatter } from '../formatter'
@@ -17,13 +17,7 @@ export const AddColumn: CalculatedColumn<any, any> = {
   isLastFrozenColumn: false,
   rowGroup: false,
   headerRenderer(props) {
-    return (
-      <AddColumnHeader
-        aria-label="Add New Row"
-        value={props.allRowsSelected}
-        onChange={props.onAllRowsSelectionChange}
-      />
-    )
+    return <AddColumnHeader aria-label="Add New Row" />
   },
   formatter: DefaultFormatter,
 }
@@ -33,12 +27,7 @@ type SharedInputProps = Pick<
   'disabled' | 'tabIndex' | 'onClick' | 'aria-label' | 'aria-labelledby'
 >
 
-interface AddColumnHeaderProps extends SharedInputProps {
-  value: boolean
-  onChange: (value: boolean, isShiftClick: boolean) => void
-}
-
-const AddColumnHeader: React.FC<AddColumnHeaderProps> = () => {
+const AddColumnHeader = ({}: SharedInputProps) => {
   const state = useTrackedState()
   const { onAddColumn } = state
   return (
diff --git a/studio/components/grid/components/header/Header.tsx b/studio/components/grid/components/header/Header.tsx
index 1a27e3a5fff..029dd615bda 100644
--- a/studio/components/grid/components/header/Header.tsx
+++ b/studio/components/grid/components/header/Header.tsx
@@ -142,7 +142,7 @@ const DefaultHeader = ({
                               <div
                                 className={[
                                   'border border-scale-1100 w-[15px] h-[4px] translate-x-0.5',
-                                  'transition duration-200 group-data-[highlighted]:border-brand-900 group-data-[highlighted]:translate-x-0',
+                                  'transition duration-200 group-data-[highlighted]:border-brand group-data-[highlighted]:translate-x-0',
                                 ].join(' ')}
                               />
                             </div>
@@ -168,7 +168,7 @@ const DefaultHeader = ({
                               <div
                                 className={[
                                   'border border-scale-1100 w-[4px] h-[15px] -translate-y-0.5',
-                                  'transition duration-200 group-data-[highlighted]:border-brand-900 group-data-[highlighted]:translate-y-0',
+                                  'transition duration-200 group-data-[highlighted]:border-brand group-data-[highlighted]:translate-y-0',
                                 ].join(' ')}
                               />
                             </div>
@@ -192,8 +192,8 @@ const DefaultHeader = ({
                               <IconFileText className="-translate-x-[2px]" />
                               <IconArrowUp
                                 className={clsx(
-                                  'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-700 rounded-full',
-                                  'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand-900 group-data-[highlighted]:opacity-100'
+                                  'transition duration-200 absolute bottom-0 right-0 translate-y-1 opacity-0 bg-brand-400 rounded-full',
+                                  'group-data-[highlighted]:translate-y-0 group-data-[highlighted]:text-brand group-data-[highlighted]:opacity-100'
                                 )}
                                 strokeWidth={3}
                                 size={12}
diff --git a/studio/components/grid/components/header/RefreshButton.tsx b/studio/components/grid/components/header/RefreshButton.tsx
index 27bd851fcac..ae4f21faa4b 100644
--- a/studio/components/grid/components/header/RefreshButton.tsx
+++ b/studio/components/grid/components/header/RefreshButton.tsx
@@ -51,7 +51,7 @@ const RefreshButton = ({ table, isRefetching }: RefreshButtonProps) => {
         !status ? (
           <IconRefreshCw className="text-scale-1000" strokeWidth={1.5} />
         ) : status === 'saved' ? (
-          <IconCheck className="text-brand-900" strokeWidth={3} />
+          <IconCheck className="text-brand" strokeWidth={3} />
         ) : (
           <></>
         )
diff --git a/studio/components/grid/components/menu/ColumnMenu.tsx b/studio/components/grid/components/menu/ColumnMenu.tsx
index 70938ad12ee..a9d79bc014e 100644
--- a/studio/components/grid/components/menu/ColumnMenu.tsx
+++ b/studio/components/grid/components/menu/ColumnMenu.tsx
@@ -1,23 +1,24 @@
-import { CalculatedColumn } from '@supabase/react-data-grid'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { CalculatedColumn } from '@supabase/react-data-grid'
 import {
   Button,
+  Divider,
   Dropdown,
   IconChevronDown,
-  Divider,
   IconEdit,
-  IconTrash,
   IconLock,
+  IconTrash,
   IconUnlock,
 } from 'ui'
+
 import { useDispatch, useTrackedState } from '../../store'
 
-type ColumnMenuProps = {
+interface ColumnMenuProps {
   column: CalculatedColumn<any, unknown>
   isEncrypted?: boolean
 }
 
-const ColumnMenu: React.FC<ColumnMenuProps> = ({ column, isEncrypted }) => {
+const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
   const state = useTrackedState()
   const dispatch = useDispatch()
   const { onEditColumn: onEditColumnFunc, onDeleteColumn: onDeleteColumnFunc } = state
diff --git a/studio/components/interfaces/App/CommandMenuWrapper.tsx b/studio/components/interfaces/App/CommandMenuWrapper.tsx
index e94fe6797d1..a1be2dc01dd 100644
--- a/studio/components/interfaces/App/CommandMenuWrapper.tsx
+++ b/studio/components/interfaces/App/CommandMenuWrapper.tsx
@@ -75,12 +75,14 @@ const CommandMenuWrapper = ({ children }: PropsWithChildren<{}>) => {
 
     try {
       const snippet = createSqlSnippetSkeleton({
+        id: uuidv4(),
         name: title || 'Generated query',
         owner_id: profile?.id,
+        project_id: selectedProject?.id,
         sql: formattedSql,
       })
-      const data = { ...snippet, id: uuidv4() }
-      snap.addSnippet(data as SqlSnippet, ref, true)
+
+      snap.addSnippet(snippet as SqlSnippet, ref)
       ui.setNotification({
         category: 'success',
         message: `Successfully saved snippet!`,
diff --git a/studio/components/interfaces/App/RouteValidationWrapper.tsx b/studio/components/interfaces/App/RouteValidationWrapper.tsx
index f2bb8a31b74..3b82a9b1679 100644
--- a/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -7,7 +7,7 @@ import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useFlag, useStore } from 'hooks'
 import useLatest from 'hooks/misc/useLatest'
-import { DEFAULT_HOME, LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { DEFAULT_HOME, IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 // Ideally these could all be within a _middleware when we use Next 12
 const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
@@ -68,7 +68,9 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
       // Check validity of project that the user is trying to access
       const projects = projectsRef.current ?? []
       const isValidProject = projects.some((project) => project.ref === ref)
-      const isValidBranch = projects.some((project) => project.preview_branch_refs.includes(ref))
+      const isValidBranch = IS_PLATFORM
+        ? projects.some((project) => project.preview_branch_refs.includes(ref))
+        : true
 
       if (!isValidProject && !isValidBranch) {
         ui.setNotification({ category: 'error', message: 'This project does not exist' })
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
index a9665541e76..a40dd0dbdf8 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/FormField.tsx
@@ -1,17 +1,18 @@
-import { BASE_PATH } from 'lib/constants'
-import { FC, useState } from 'react'
+import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'
-import { Button, Input, InputNumber, Toggle, Listbox, IconEye, IconEyeOff } from 'ui'
+import { Button, IconEye, IconEyeOff, Input, InputNumber, Listbox, Toggle } from 'ui'
+
+import { BASE_PATH } from 'lib/constants'
 import { Enum } from './AuthProvidersForm.types'
 
-interface Props {
+interface FormFieldProps {
   name: string
   properties: any
   formValues: any
   disabled?: boolean
 }
 
-const FormField: FC<Props> = ({ name, properties, formValues, disabled = false }) => {
+const FormField = ({ name, properties, formValues, disabled = false }: FormFieldProps) => {
   const [hidden, setHidden] = useState(!!properties.isSecret)
 
   if (properties.show && !properties.show.matches.includes(formValues[properties.show.key]))
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 0851c3e397f..72177f07f78 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -104,8 +104,8 @@ const ProviderForm = ({ provider }: ProviderFormProps) => {
           </div>
           <div className="flex items-center gap-3">
             {isActive ? (
-              <div className="flex items-center gap-1 rounded-full border border-brand-700 bg-brand-200 py-1 px-1 text-xs text-brand-900">
-                <span className="rounded-full bg-brand-900 p-0.5 text-xs text-brand-200">
+              <div className="flex items-center gap-1 rounded-full border border-brand-400 bg-brand-200 py-1 px-1 text-xs text-brand">
+                <span className="rounded-full bg-brand p-0.5 text-xs text-brand-200">
                   <IconCheck strokeWidth={2} size={12} />
                 </span>
                 <span className="px-1">Enabled</span>
diff --git a/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index d1e9e700792..4ab4bdf3300 100644
--- a/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -1,20 +1,20 @@
-import ReactMarkdown from 'react-markdown'
-import { FC, useState, useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Input, Form } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Form, Input } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
-import { FormSchema } from 'types'
-import { FormActions, FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import CodeEditor from 'components/ui/CodeEditor'
+import { FormActions, FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import InformationBox from 'components/ui/InformationBox'
+import { useCheckPermissions, useStore } from 'hooks'
+import { FormSchema } from 'types'
 
-interface Props {
+interface TemplateEditorProps {
   template: FormSchema
 }
 
-const TemplateEditor: FC<Props> = ({ template }) => {
+const TemplateEditor = ({ template }: TemplateEditorProps) => {
   const { ui, authConfig } = useStore()
   const [bodyValue, setBodyValue] = useState('')
 
diff --git a/studio/components/interfaces/Auth/Policies/Policies.tsx b/studio/components/interfaces/Auth/Policies/Policies.tsx
index 17e208dba11..512efd4fcad 100644
--- a/studio/components/interfaces/Auth/Policies/Policies.tsx
+++ b/studio/components/interfaces/Auth/Policies/Policies.tsx
@@ -1,25 +1,25 @@
-import { useState, FC } from 'react'
-import { isEmpty } from 'lodash'
-import { IconHelpCircle } from 'ui'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
+import type { PostgresRole, PostgresTable } from '@supabase/postgres-meta'
 import { useParams } from 'common/hooks'
 import { PolicyEditorModal, PolicyTableRow } from 'components/interfaces/Auth/Policies'
-import type { PostgresRole, PostgresTable } from '@supabase/postgres-meta'
+import { useStore } from 'hooks'
+import { isEmpty } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { IconHelpCircle } from 'ui'
 
-import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import InformationBox from 'components/ui/InformationBox'
 
-interface Props {
+interface PoliciesProps {
   tables: PostgresTable[]
   hasTables: boolean
   isLocked: boolean
 }
 
-const Policies: FC<Props> = ({ tables, hasTables, isLocked }) => {
+const Policies = ({ tables, hasTables, isLocked }: PoliciesProps) => {
   const router = useRouter()
   const { ref } = useParams()
 
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
index 41a33ad7c28..e5470be4daf 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
@@ -1,12 +1,15 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Radio } from 'ui'
 
-interface Props {
+interface PolicyAllowedOperationProps {
   operation: string
   onSelectOperation: (operation: string) => void
 }
 
-const PolicyAllowedOperation: FC<Props> = ({ operation = '', onSelectOperation }) => {
+const PolicyAllowedOperation = ({
+  operation = '',
+  onSelectOperation = noop,
+}: PolicyAllowedOperationProps) => {
   return (
     <div className="flex justify-between space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
index 5cc064272fc..6f87834faae 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
@@ -1,11 +1,12 @@
-import { FC, useEffect } from 'react'
-import { IconHelpCircle } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { noop } from 'lodash'
+import { useEffect } from 'react'
+import { IconHelpCircle } from 'ui'
 
-import { usePrevious } from 'hooks'
 import SqlEditor from 'components/ui/SqlEditor'
+import { usePrevious } from 'hooks'
 
-interface Props {
+interface PolicyDefinitionProps {
   operation: string
   definition: string
   check: string
@@ -13,13 +14,13 @@ interface Props {
   onUpdatePolicyCheck: (check: string | undefined) => void
 }
 
-const PolicyDefinition: FC<Props> = ({
+const PolicyDefinition = ({
   operation = '',
   definition = '',
   check = '',
-  onUpdatePolicyUsing,
-  onUpdatePolicyCheck,
-}) => {
+  onUpdatePolicyUsing = noop,
+  onUpdatePolicyCheck = noop,
+}: PolicyDefinitionProps) => {
   const showUsing = (operation: string) =>
     ['SELECT', 'UPDATE', 'DELETE', 'ALL'].includes(operation) || !operation
   const showCheck = (operation: string) => ['INSERT', 'UPDATE', 'ALL'].includes(operation)
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
index 0cef3581c9d..df2b9690668 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
@@ -1,13 +1,17 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Button, IconExternalLink } from 'ui'
 
-interface Props {
+interface PolicyEditorFooterProps {
   showTemplates: boolean
   onViewTemplates: () => void
   onReviewPolicy: () => void
 }
 
-const PolicyEditorFooter: FC<Props> = ({ showTemplates, onViewTemplates, onReviewPolicy }) => (
+const PolicyEditorFooter = ({
+  showTemplates,
+  onViewTemplates = noop,
+  onReviewPolicy = noop,
+}: PolicyEditorFooterProps) => (
   <div className="flex justify-between items-center border-t px-6 py-4 dark:border-dark">
     <a
       href="https://supabase.com/docs/learn/auth-deep-dive/auth-policies"
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
index 047932cfbc8..c0060c27fc2 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
@@ -1,13 +1,12 @@
-import { FC } from 'react'
 import { Input } from 'ui'
 
-interface Props {
+interface PolicyNameProps {
   name: string
   limit?: number
   onUpdatePolicyName: (name: string) => void
 }
 
-const PolicyName: FC<Props> = ({ name = '', limit = 100, onUpdatePolicyName }) => {
+const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
   return (
     <div className="flex space-x-12">
       <div className="flex w-1/3 flex-col space-y-2">
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
index 27ab7ffc122..4ddb70f931f 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
@@ -1,15 +1,14 @@
-import { FC } from 'react'
 import type { PostgresRole } from '@supabase/postgres-meta'
 
 import MultiSelect from 'components/ui/MultiSelect'
 
-interface Props {
+interface PolicyRolesProps {
   roles: PostgresRole[]
   selectedRoles: string[]
   onUpdateSelectedRoles: (roles: string[]) => void
 }
 
-const PolicyRoles: FC<Props> = ({ roles, selectedRoles, onUpdateSelectedRoles }) => {
+const PolicyRoles = ({ roles, selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => {
   // @ts-ignore
   const formattedRoles = roles.map((role) => {
     return {
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
index 5b249d11b2d..20225f7153b 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
@@ -1,17 +1,16 @@
-import { FC } from 'react'
+import type { PostgresRole } from '@supabase/postgres-meta'
 import { Modal } from 'ui'
 
-import PolicyName from './PolicyName'
-import PolicyDefinition from './PolicyDefinition'
 import PolicyAllowedOperation from './PolicyAllowedOperation'
-import PolicyRoles from './PolicyRoles'
+import PolicyDefinition from './PolicyDefinition'
 import PolicyEditorFooter from './PolicyEditorFooter'
-import type { PostgresRole } from '@supabase/postgres-meta'
+import PolicyName from './PolicyName'
+import PolicyRoles from './PolicyRoles'
 
 // Exposed for StoragePoliciesEditor.js
 export { PolicyName, PolicyRoles }
 
-interface Props {
+interface PolicyEditorProps {
   isNewPolicy: boolean
   roles: PostgresRole[]
   policyFormFields: any
@@ -20,14 +19,14 @@ interface Props {
   onReviewPolicy: () => void
 }
 
-const PolicyEditor: FC<Props> = ({
+const PolicyEditor = ({
   isNewPolicy = true,
   roles = [],
   policyFormFields = {},
   onUpdatePolicyFormFields = () => {},
   onViewTemplates = () => {},
   onReviewPolicy = () => {},
-}) => {
+}: PolicyEditorProps) => {
   const operation = policyFormFields?.command ?? ''
   const definition = policyFormFields?.definition ?? ''
   const check = policyFormFields?.check ?? ''
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
index 3aefb8abc8f..74e8bf8dc10 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
@@ -1,8 +1,9 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { IconChevronLeft } from 'ui'
+
 import { POLICY_MODAL_VIEWS } from 'components/interfaces/Auth/Policies'
 
-interface Props {
+interface PolicyEditorModalTitleProps {
   view: string
   schema: string
   table: string
@@ -10,13 +11,13 @@ interface Props {
   onSelectBackFromTemplates: () => void
 }
 
-const PolicyEditorModalTitle: FC<Props> = ({
+const PolicyEditorModalTitle = ({
   view,
   schema,
   table,
   isNewPolicy,
-  onSelectBackFromTemplates = () => {},
-}) => {
+  onSelectBackFromTemplates = noop,
+}: PolicyEditorModalTitleProps) => {
   const getTitle = () => {
     if (view === POLICY_MODAL_VIEWS.EDITOR || view === POLICY_MODAL_VIEWS.SELECTION) {
       return `${isNewPolicy ? 'Adding new policy to' : 'Editing policy from'} ${schema}.${table}`
diff --git a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
index 4d1ffb1107f..c6fc98dfefe 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
@@ -1,31 +1,30 @@
-import { Modal } from 'ui'
-import { FC, useState, useEffect } from 'react'
-import { isEmpty } from 'lodash'
 import type { PostgresRole } from '@supabase/postgres-meta'
+import { isEmpty, noop } from 'lodash'
+import { useEffect, useState } from 'react'
+import { Modal } from 'ui'
 
+import ConfirmationModal from 'components/ui/ConfirmationModal'
 import { useStore } from 'hooks'
-import PolicyEditorModalTitle from './PolicyEditorModalTitle'
-import { getGeneralPolicyTemplates } from './PolicyEditorModal.constants'
-
-import PolicyEditor from '../PolicyEditor'
-import PolicyReview from '../PolicyReview'
-import PolicyTemplates from '../PolicyTemplates'
-import PolicySelection from '../PolicySelection'
-import {
-  createSQLPolicy,
-  createPayloadForCreatePolicy,
-  createPayloadForUpdatePolicy,
-} from '../Policies.utils'
 import { POLICY_MODAL_VIEWS } from '../Policies.constants'
 import {
   PolicyFormField,
   PostgresPolicyCreatePayload,
   PostgresPolicyUpdatePayload,
 } from '../Policies.types'
+import {
+  createPayloadForCreatePolicy,
+  createPayloadForUpdatePolicy,
+  createSQLPolicy,
+} from '../Policies.utils'
+import PolicyEditor from '../PolicyEditor'
+import PolicyReview from '../PolicyReview'
+import PolicySelection from '../PolicySelection'
+import PolicyTemplates from '../PolicyTemplates'
 import { PolicyTemplate } from '../PolicyTemplates/PolicyTemplates.constants'
-import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { getGeneralPolicyTemplates } from './PolicyEditorModal.constants'
+import PolicyEditorModalTitle from './PolicyEditorModalTitle'
 
-interface Props {
+interface PolicyEditorModalProps {
   visible: boolean
   roles?: PostgresRole[]
   schema: string
@@ -37,17 +36,17 @@ interface Props {
   onSaveSuccess: () => void
 }
 
-const PolicyEditorModal: FC<Props> = ({
+const PolicyEditorModal = ({
   visible = false,
   roles = [],
   schema = '',
   table = '',
   selectedPolicyToEdit = {},
-  onSelectCancel = () => {},
-  onCreatePolicy = () => {},
-  onUpdatePolicy = () => {},
-  onSaveSuccess = () => {},
-}) => {
+  onSelectCancel = noop,
+  onCreatePolicy = () => false,
+  onUpdatePolicy = () => false,
+  onSaveSuccess = noop,
+}: PolicyEditorModalProps) => {
   const { ui } = useStore()
 
   const newPolicyTemplate: PolicyFormField = {
diff --git a/studio/components/interfaces/Auth/Policies/PolicyReview.tsx b/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
index 4e532247ff6..50812e2bb05 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
@@ -1,20 +1,20 @@
-import { Button, Modal } from 'ui'
-import { isEmpty } from 'lodash'
-import { FC, useState } from 'react'
 import SqlEditor from 'components/ui/SqlEditor'
+import { isEmpty, noop } from 'lodash'
+import { useState } from 'react'
+import { Button, Modal } from 'ui'
 import { PolicyForReview } from './Policies.types'
 
-interface Props {
+interface PolicyReviewProps {
   policy: PolicyForReview
   onSelectBack: () => void
   onSelectSave: () => void
 }
 
-const PolicyReview: FC<Props> = ({
+const PolicyReview = ({
   policy = {},
-  onSelectBack = () => {},
-  onSelectSave = () => {},
-}) => {
+  onSelectBack = noop,
+  onSelectSave = noop,
+}: PolicyReviewProps) => {
   const [isSaving, setIsSaving] = useState(false)
   const onSavePolicy = () => {
     setIsSaving(true)
diff --git a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
index af4727eeb8f..2eaabd516ee 100644
--- a/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
@@ -1,18 +1,19 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { IconEdit, IconGrid, Modal } from 'ui'
+
 import CardButton from 'components/ui/CardButton'
 
-interface Props {
+interface PolicySelectionProps {
   description: string
   onViewTemplates: () => void
   onViewEditor: () => void
 }
 
-const PolicySelection: FC<Props> = ({
+const PolicySelection = ({
   description = '',
-  onViewTemplates = () => {},
-  onViewEditor = () => {},
-}) => {
+  onViewTemplates = noop,
+  onViewEditor = noop,
+}: PolicySelectionProps) => {
   return (
     <Modal.Content>
       <div className="space-y-6 py-8">
@@ -62,7 +63,7 @@ const PolicySelection: FC<Props> = ({
           <a
             target="_blank"
             rel="noreferrer"
-            className="text-brand-900 transition-colors hover:text-brand-1200"
+            className="text-brand transition-colors hover:text-brand-600"
             href="https://supabase.com/docs/guides/auth#policies"
           >
             here
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
index aa9dcb9cc88..5ba615f4159 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
@@ -1,23 +1,23 @@
-import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, Dropdown, IconEdit, IconTrash, IconMoreVertical } from 'ui'
 import type { PostgresPolicy } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop } from 'lodash'
+import { Button, Dropdown, IconEdit, IconMoreVertical, IconTrash } from 'ui'
 
-import { useCheckPermissions } from 'hooks'
 import Panel from 'components/ui/Panel'
+import { useCheckPermissions } from 'hooks'
 
-interface Props {
+interface PolicyRowProps {
   policy: PostgresPolicy
   onSelectEditPolicy: (policy: PostgresPolicy) => void
   onSelectDeletePolicy: (policy: PostgresPolicy) => void
 }
 
-const PolicyRow: FC<Props> = ({
+const PolicyRow = ({
   policy,
-  onSelectEditPolicy = () => {},
-  onSelectDeletePolicy = () => {},
-}) => {
+  onSelectEditPolicy = noop,
+  onSelectDeletePolicy = noop,
+}: PolicyRowProps) => {
   const canUpdatePolicies = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'policies')
 
   return (
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
index 4a7b088580c..4fefe5456e8 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -1,25 +1,26 @@
-import Link from 'next/link'
-import { FC } from 'react'
-import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Badge, Button, IconLock } from 'ui'
 import type { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop } from 'lodash'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Badge, Button, IconLock } from 'ui'
+
 import { useCheckPermissions } from 'hooks'
 
-interface Props {
+interface PolicyTableRowHeaderProps {
   table: PostgresTable
   isLocked: boolean
   onSelectToggleRLS: (table: PostgresTable) => void
   onSelectCreatePolicy: (table: PostgresTable) => void
 }
 
-const PolicyTableRowHeader: FC<Props> = ({
+const PolicyTableRowHeader = ({
   table,
   isLocked,
-  onSelectToggleRLS = () => {},
-  onSelectCreatePolicy = () => {},
-}) => {
+  onSelectToggleRLS = noop,
+  onSelectCreatePolicy = noop,
+}: PolicyTableRowHeaderProps) => {
   const router = useRouter()
   const { ref } = router.query
   const canToggleRLS = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables')
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx
index 70c4b48f9cb..1bdc4ec26c5 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx
@@ -1,13 +1,14 @@
-import { FC } from 'react'
-import type { PostgresTable, PostgresPolicy } from '@supabase/postgres-meta'
+import type { PostgresPolicy, PostgresTable } from '@supabase/postgres-meta'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
-import PolicyTableRowHeader from './PolicyTableRowHeader'
-import PolicyRow from './PolicyRow'
-import Panel from 'components/ui/Panel'
 import { Alert } from 'ui'
 
-interface Props {
+import Panel from 'components/ui/Panel'
+import { useStore } from 'hooks'
+import PolicyRow from './PolicyRow'
+import PolicyTableRowHeader from './PolicyTableRowHeader'
+
+interface PolicyTableRowProps {
   table: PostgresTable
   isLocked: boolean
   onSelectToggleRLS: (table: PostgresTable) => void
@@ -16,14 +17,14 @@ interface Props {
   onSelectDeletePolicy: (policy: PostgresPolicy) => void
 }
 
-const PolicyTableRow: FC<Props> = ({
+const PolicyTableRow = ({
   table,
   isLocked,
-  onSelectToggleRLS = () => {},
-  onSelectCreatePolicy = () => {},
-  onSelectEditPolicy = () => {},
-  onSelectDeletePolicy = () => {},
-}) => {
+  onSelectToggleRLS = noop,
+  onSelectCreatePolicy = noop,
+  onSelectEditPolicy = noop,
+  onSelectDeletePolicy = noop,
+}: PolicyTableRowProps) => {
   const { meta } = useStore()
   const policies = meta.policies.list(
     (policy: PostgresPolicy) => policy.schema === table.schema && policy.table === table.name
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx b/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
index 97b59f24ad2..f3b57719a60 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
@@ -1,13 +1,12 @@
-import { FC } from 'react'
-import { isEmpty } from 'lodash'
 import SqlEditor from 'components/ui/SqlEditor'
+import { isEmpty } from 'lodash'
 import { PolicyTemplate } from './PolicyTemplates.constants'
 
-interface Props {
+interface TemplatePreviewProps {
   selectedTemplate: PolicyTemplate
 }
 
-const TemplatePreview: FC<Props> = ({ selectedTemplate }) => {
+const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
   const { id, templateName, description, statement } = selectedTemplate
   return (
     <div className="space-y-8" style={{ width: '70%' }}>
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx b/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
index 897ea16839a..7b595e819b8 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
@@ -1,20 +1,21 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Menu } from 'ui'
+
 import { PolicyTemplate } from './PolicyTemplates.constants'
 
-interface Props {
+interface TemplatesListProps {
   templates: PolicyTemplate[]
   templatesNote: string
   selectedTemplate: PolicyTemplate
   setSelectedTemplate: (template: PolicyTemplate) => void
 }
 
-const TemplatesList: FC<Props> = ({
+const TemplatesList = ({
   templates = [],
   templatesNote = '',
   selectedTemplate,
-  setSelectedTemplate = () => {},
-}) => (
+  setSelectedTemplate = noop,
+}: TemplatesListProps) => (
   <div className="flex flex-col justify-between border-r dark:border-dark" style={{ width: '30%' }}>
     <div
       className="hide-scrollbar  divide-border-primary space-y-0 divide-y divide-solid overflow-y-auto"
diff --git a/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx b/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
index 543c96ee061..f1d8aab1539 100644
--- a/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
+++ b/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
@@ -1,22 +1,22 @@
+import { isEmpty, noop } from 'lodash'
+import { useState } from 'react'
 import { Button } from 'ui'
-import { FC, useState } from 'react'
-import { isEmpty } from 'lodash'
 
-import TemplatesList from './TemplatesList'
-import TemplatePreview from './TemplatePreview'
 import { PolicyTemplate } from './PolicyTemplates.constants'
+import TemplatePreview from './TemplatePreview'
+import TemplatesList from './TemplatesList'
 
-interface Props {
+interface PolicyTemplatesProps {
   templates: PolicyTemplate[]
   templatesNote: string
   onUseTemplate: (template: PolicyTemplate) => void
 }
 
-const PolicyTemplates: FC<Props> = ({
+const PolicyTemplates = ({
   templates = [],
   templatesNote = '',
-  onUseTemplate = () => {},
-}) => {
+  onUseTemplate = noop,
+}: PolicyTemplatesProps) => {
   const [selectedTemplate, setSelectedTemplate] = useState(templates[0])
   return (
     <div>
diff --git a/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx b/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
index 44f60d3b15b..81bbb966fda 100644
--- a/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
+++ b/studio/components/interfaces/Auth/RedirectUrls/RedirectUrlList.tsx
@@ -1,18 +1,18 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { Button, IconGlobe, IconTrash } from 'ui'
 
+import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers'
+import { EmptyListState } from 'components/ui/States'
 import { useStore } from 'hooks'
 import ValueContainer from './ValueContainer'
-import { EmptyListState } from 'components/ui/States'
-import { HorizontalShimmerWithIcon } from 'components/ui/Shimmers'
 
-interface Props {
+interface RedirectUrlListProps {
   canUpdate: boolean
   onSelectUrlToDelete: (url: string) => void
 }
 
-const RedirectUrlList: FC<Props> = ({ canUpdate, onSelectUrlToDelete }) => {
+const RedirectUrlList = ({ canUpdate, onSelectUrlToDelete = noop }: RedirectUrlListProps) => {
   const { authConfig } = useStore()
 
   const URI_ALLOW_LIST_ARRAY = authConfig.config.URI_ALLOW_LIST
diff --git a/studio/components/interfaces/Auth/RedirectUrls/ValueContainer.tsx b/studio/components/interfaces/Auth/RedirectUrls/ValueContainer.tsx
index c7dd41fb552..610817e94fe 100644
--- a/studio/components/interfaces/Auth/RedirectUrls/ValueContainer.tsx
+++ b/studio/components/interfaces/Auth/RedirectUrls/ValueContainer.tsx
@@ -1,10 +1,6 @@
-import { FC, ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 
-interface Props {
-  children: ReactNode
-}
-
-const ValueContainer: FC<Props> = ({ children }) => (
+const ValueContainer = ({ children }: PropsWithChildren<{}>) => (
   <div
     className="
       bg-scale-100 dark:bg-scale-300 border-scale-500 text-scale-1200 flex items-center 
diff --git a/studio/components/interfaces/Auth/Users/UsersListItem.tsx b/studio/components/interfaces/Auth/Users/UsersListItem.tsx
index 7ae8c894989..a43497bf10d 100644
--- a/studio/components/interfaces/Auth/Users/UsersListItem.tsx
+++ b/studio/components/interfaces/Auth/Users/UsersListItem.tsx
@@ -1,20 +1,19 @@
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Badge } from 'ui'
 
-import Table from 'components/to-be-cleaned/Table'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
+import Table from 'components/to-be-cleaned/Table'
 import UserDropdown from './UserDropdown'
-import { getDateFromIsoString } from './Users.utils'
 import { User } from './Users.types'
+import { getDateFromIsoString } from './Users.utils'
 
-interface Props {
+interface UserListItemProps {
   user: User
   canRemoveUser: boolean
   canRemoveMFAFactors: boolean
 }
 
-const UserListItem: FC<Props> = ({ user, canRemoveUser, canRemoveMFAFactors }) => {
+const UserListItem = ({ user, canRemoveUser, canRemoveMFAFactors }: UserListItemProps) => {
   const isUserConfirmed = user.email_confirmed_at || user.phone_confirmed_at
   const createdAt = getDateFromIsoString(user.created_at)
   const lastSignedIn = getDateFromIsoString(user.last_sign_in_at)
diff --git a/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx b/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
index 104eae62698..92cfca9fae7 100644
--- a/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
+++ b/studio/components/interfaces/BillingV2/AddNewPaymentMethodModal/AddPaymentMethodForm.tsx
@@ -1,9 +1,10 @@
-import { FC, useState } from 'react'
+import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import { useState } from 'react'
 import { Button, Modal } from 'ui'
-import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js'
+
 import { useStore } from 'hooks'
 
-interface Props {
+interface AddPaymentMethodFormProps {
   returnUrl: string
   onCancel: () => void
   onConfirm: () => void
@@ -13,7 +14,7 @@ interface Props {
 // manually creating and attaching payment methods via the API
 // Small UX annoyance here, that the page will be refreshed
 
-const AddPaymentMethodForm: FC<Props> = ({ returnUrl, onCancel, onConfirm }) => {
+const AddPaymentMethodForm = ({ returnUrl, onCancel, onConfirm }: AddPaymentMethodFormProps) => {
   const { ui } = useStore()
   const stripe = useStripe()
   const elements = useElements()
diff --git a/studio/components/interfaces/BillingV2/Billing.constants.ts b/studio/components/interfaces/BillingV2/Billing.constants.ts
index 519a1ca2afc..c4a48de2d74 100644
--- a/studio/components/interfaces/BillingV2/Billing.constants.ts
+++ b/studio/components/interfaces/BillingV2/Billing.constants.ts
@@ -10,7 +10,7 @@ export const CANCELLATION_REASONS = [
   'Dashboard is too complicated',
   'Postgres is too complicated',
   'Problem not solved',
-  'Bug issues',
+  'Too many bugs/issues',
   'I decided to use something else',
   'My work has finished/discontinued',
   'I’m migrating to/starting a new project',
diff --git a/studio/components/interfaces/BillingV2/InvoiceStatusBadge.tsx b/studio/components/interfaces/BillingV2/InvoiceStatusBadge.tsx
index ecf6a931eef..d6a1a12a6cc 100644
--- a/studio/components/interfaces/BillingV2/InvoiceStatusBadge.tsx
+++ b/studio/components/interfaces/BillingV2/InvoiceStatusBadge.tsx
@@ -1,9 +1,9 @@
-import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { Badge } from 'ui'
+
 import { InvoiceStatus } from './Invoices.types'
 
-interface Props {
+interface InvoiceStatusBadgeProps {
   status: InvoiceStatus
 }
 
@@ -33,7 +33,7 @@ export const invoiceStatusMapping: Record<InvoiceStatus, { label: string; badgeC
   },
 }
 
-const InvoiceStatusBadge: FC<Props> = ({ status }) => {
+const InvoiceStatusBadge = ({ status }: InvoiceStatusBadgeProps) => {
   const statusMapping = invoiceStatusMapping[status]
 
   return (
diff --git a/studio/components/interfaces/BillingV2/Invoices.tsx b/studio/components/interfaces/BillingV2/Invoices.tsx
index 74c40ec8971..38a7737a1fa 100644
--- a/studio/components/interfaces/BillingV2/Invoices.tsx
+++ b/studio/components/interfaces/BillingV2/Invoices.tsx
@@ -1,22 +1,21 @@
-import { FC, useState, useEffect } from 'react'
-import { Button, Loading, IconFileText, IconDownload, IconChevronLeft, IconChevronRight } from 'ui'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button, IconChevronLeft, IconChevronRight, IconDownload, IconFileText, Loading } from 'ui'
 
-import { useStore } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { get, head } from 'lib/common/fetch'
 import Table from 'components/to-be-cleaned/Table'
-
+import { useStore } from 'hooks'
+import { get, head } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
 import InvoiceStatusBadge from './InvoiceStatusBadge'
 import { Invoice, InvoiceStatus } from './Invoices.types'
 
 const PAGE_LIMIT = 10
 
-interface Props {
+interface InvoicesProps {
   projectRef: string
 }
 
-const Invoices: FC<Props> = ({ projectRef }) => {
+const Invoices = ({ projectRef }: InvoicesProps) => {
   const { ui } = useStore()
   const [loading, setLoading] = useState<any>(false)
 
diff --git a/studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx b/studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx
new file mode 100644
index 00000000000..9d565fbbe48
--- /dev/null
+++ b/studio/components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo.tsx
@@ -0,0 +1,52 @@
+import Link from 'next/link'
+import { IconInfo } from 'ui'
+
+import InformationBox from 'components/ui/InformationBox'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+import { Organization } from 'types'
+
+interface NoProjectsOnPaidOrgInfoProps {
+  organization?: Organization
+}
+
+const NoProjectsOnPaidOrgInfo = ({ organization }: NoProjectsOnPaidOrgInfoProps) => {
+  const { data: allProjects } = useProjectsQuery({
+    enabled: organization?.subscription_id !== undefined,
+  })
+  const projectCount =
+    allProjects?.filter((project) => project.organization_id === organization?.id).length ?? 0
+
+  const { data: orgSubscription } = useOrgSubscriptionQuery(
+    { orgSlug: organization?.slug },
+    { enabled: organization?.subscription_id !== undefined }
+  )
+
+  if (projectCount > 0 || orgSubscription?.plan === undefined || orgSubscription.plan.id === 'free')
+    return null
+
+  return (
+    <InformationBox
+      defaultVisibility={true}
+      hideCollapse
+      title={`Your organization is on the ${orgSubscription.plan.name} plan with no projects running`}
+      icon={<IconInfo strokeWidth={2} />}
+      description={
+        <div>
+          The monthly fees for the paid plan still apply. To cancel your subscription, head over to
+          your{' '}
+          <Link href={`/org/${organization?.slug}/billing`}>
+            <a>
+              <span className="text-sm text-green-900 transition hover:text-green-1000">
+                organization billing settings
+              </span>
+              .
+            </a>
+          </Link>
+        </div>
+      }
+    />
+  )
+}
+
+export default NoProjectsOnPaidOrgInfo
diff --git a/studio/components/interfaces/BillingV2/SpendCapModal.tsx b/studio/components/interfaces/BillingV2/SpendCapModal.tsx
index 81e06529ddd..ef662f146cd 100644
--- a/studio/components/interfaces/BillingV2/SpendCapModal.tsx
+++ b/studio/components/interfaces/BillingV2/SpendCapModal.tsx
@@ -1,14 +1,13 @@
-import { FC } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconHelpCircle, Modal } from 'ui'
 import Link from 'next/link'
+import { Button, IconHelpCircle, Modal } from 'ui'
 
-interface Props {
+interface SpendCapModalProps {
   visible: boolean
   onHide: () => void
 }
 
-const SpendCapModal: FC<Props> = ({ visible, onHide }) => {
+const SpendCapModal = ({ visible, onHide }: SpendCapModalProps) => {
   return (
     <Modal hideFooter visible={visible} size="xlarge" header="Spend cap" onCancel={() => onHide()}>
       <div className="py-4 space-y-4">
@@ -165,7 +164,7 @@ const SpendCapModal: FC<Props> = ({ visible, onHide }) => {
             <p>
               See{' '}
               <Link href="https://supabase.com/pricing" passHref>
-                <a className="text-brand-900" target="_blank" rel="noreferrer">
+                <a className="text-brand" target="_blank" rel="noreferrer">
                   <span>pricing page</span>
                 </a>
               </Link>{' '}
diff --git a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
index b228c80fcee..44d6b61b008 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Subscription.tsx
@@ -7,9 +7,9 @@ import { SUBSCRIPTION_PANEL_KEYS, useSubscriptionPageStateSnapshot } from 'state
 import { useSelectedOrganization } from 'hooks'
 import { useEffect } from 'react'
 
-export interface SubscriptionProps {}
+export interface SubscriptionProps { }
 
-const Subscription = ({}: SubscriptionProps) => {
+const Subscription = ({ }: SubscriptionProps) => {
   const router = useRouter()
   const organization = useSelectedOrganization()
   const snap = useSubscriptionPageStateSnapshot()
@@ -24,32 +24,6 @@ const Subscription = ({}: SubscriptionProps) => {
   const panel = router.query.panel
   const isOrgBilling = !!organization?.subscription_id
 
-  useEffect(() => {
-    if (isOrgBilling) {
-      const { ref, panel } = router.query
-      let redirectUri = `/org/${organization.slug}/billing`
-      switch (panel) {
-        case 'subscriptionPlan':
-          redirectUri = `/org/${organization.slug}/billing?panel=subscriptionPlan`
-          break
-        case 'costControl':
-          redirectUri = `/org/${organization.slug}/billing?panel=costControl`
-          break
-        case 'computeInstance':
-          redirectUri = `/project/${ref}/settings/addons?panel=computeInstance`
-          break
-        case 'pitr':
-          redirectUri = `/project/${ref}/settings/addons?panel=pitr`
-          break
-        case 'customDomain':
-          redirectUri = `/project/${ref}/settings/addons?panel=customDomain`
-          break
-      }
-
-      router.push(redirectUri)
-    }
-  }, [router, organization?.slug, isOrgBilling])
-
   useEffect(() => {
     if (panel && typeof panel === 'string' && allowedValues.includes(panel)) {
       snap.setPanelKey(panel as SUBSCRIPTION_PANEL_KEYS)
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
index af9608f0dd0..cbf139f924b 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/EnterpriseCard.tsx
@@ -18,13 +18,13 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+          <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+            <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -43,7 +43,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
         <ul role="list" className="text-xs text-scale-1000 md:grid md:grid-cols-2 md:gap-x-10">
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
-              <IconCheck className="text-brand-900 h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
index 443c4b9b08a..0bfde8d1793 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
@@ -75,7 +75,7 @@ const SubscriptionTier = ({}: SubscriptionTierProps) => {
           <div className="col-span-12 lg:col-span-7 space-y-6">
             <div>
               <p className="text-sm">This project is currently on the plan:</p>
-              <p className="text-2xl text-brand-900 uppercase">{tierName}</p>
+              <p className="text-2xl text-brand uppercase">{tierName}</p>
             </div>
             <div>
               <ProjectUpdateDisabledTooltip projectUpdateDisabled={projectUpdateDisabled}>
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
index 2472ed8332c..b2c2c5c914a 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
@@ -155,13 +155,13 @@ const TierUpdateSidePanel = () => {
                 >
                   <div className="w-full">
                     <div className="flex items-center space-x-2">
-                      <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+                      <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
                       {isCurrentPlan ? (
                         <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
                           Current plan
                         </div>
                       ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+                        <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
                           {plan.nameBadge}
                         </div>
                       ) : (
@@ -180,7 +180,7 @@ const TierUpdateSidePanel = () => {
                       <p className="text-scale-1000 text-sm">{tierMeta?.costUnit}</p>
                     </div>
                     <div className={clsx('flex mt-1 mb-4', !tierMeta?.warning && 'opacity-0')}>
-                      <div className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
+                      <div className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
                         {tierMeta?.warning}
                       </div>
                     </div>
@@ -258,7 +258,7 @@ const TierUpdateSidePanel = () => {
                         <li key={feature} className="flex py-2">
                           <div className="w-[12px]">
                             <IconCheck
-                              className="h-3 w-3 text-brand-900 translate-y-[2.5px]"
+                              className="h-3 w-3 text-brand translate-y-[2.5px]"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
index abb971d2db1..0aab04f6ba7 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
@@ -195,7 +195,7 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
                 The disk is expanded to be 50% larger. Auto-scaling can only take place once every 6
                 hours. You can also{' '}
                 <Link passHref href={`/project/${ref}/settings/database#diskManagement`}>
-                  <a className="text-brand-900 transition hover:text-brand-1000">preprovision</a>
+                  <a className="text-brand transition hover:text-brand-600">preprovision</a>
                 </Link>{' '}
                 disk for loading larger amounts of data.
               </p>
diff --git a/studio/components/interfaces/BranchManagement/BranchManagement.tsx b/studio/components/interfaces/BranchManagement/BranchManagement.tsx
index cbe3798f39b..5cd9623eb07 100644
--- a/studio/components/interfaces/BranchManagement/BranchManagement.tsx
+++ b/studio/components/interfaces/BranchManagement/BranchManagement.tsx
@@ -1,37 +1,73 @@
-import { partition } from 'lodash'
+import { isError, partition } from 'lodash'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { Button, IconSearch, Input } from 'ui'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconAlertTriangle,
+  IconGitBranch,
+  IconSearch,
+  Input,
+  Modal,
+} from 'ui'
 
 import { useParams } from 'common'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
+import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import AlertError from 'components/ui/AlertError'
+import ConfirmationModal from 'components/ui/ConfirmationModal'
 import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useBranchDeleteMutation } from 'data/branches/branch-delete-mutation'
+import { useBranchesDisableMutation } from 'data/branches/branches-disable-mutation'
 import { Branch, useBranchesQuery } from 'data/branches/branches-query'
-import { useSelectedProject, useStore } from 'hooks'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useSelectedOrganization, useSelectedProject, useStore } from 'hooks'
+import { useAppUiStateSnapshot } from 'state/app'
 import { MainBranchPanel } from './BranchPanels'
 import CreateBranchSidePanel from './CreateBranchSidePanel'
 import PreviewBranches from './PreviewBranches'
 import PullRequests from './PullRequests'
-import UpdateBranchSidePanel from './UpdateBranchSidePanel'
-import { useRouter } from 'next/router'
 
 const BranchManagement = () => {
   const { ui } = useStore()
   const router = useRouter()
   const { ref } = useParams()
   const projectDetails = useSelectedProject()
+  const selectedOrg = useSelectedOrganization()
+
+  const hasAccessToBranching =
+    selectedOrg?.opt_in_tags?.includes('PREVIEW_BRANCHES_OPT_IN') ?? false
 
   const isBranch = projectDetails?.parent_project_ref !== undefined
+  const hasBranchEnabled = projectDetails?.is_branch_enabled
   const projectRef =
     projectDetails !== undefined ? (isBranch ? projectDetails.parent_project_ref : ref) : undefined
 
+  const snap = useAppUiStateSnapshot()
   const [showCreateBranch, setShowCreateBranch] = useState(false)
-  const [selectedBranchToUpdate, setSelectedBranchToUpdate] = useState<Branch>()
+  const [showDisableBranching, setShowDisableBranching] = useState(false)
   const [selectedBranchToDelete, setSelectedBranchToDelete] = useState<Branch>()
 
-  const { data: branches, error, isLoading, isError, isSuccess } = useBranchesQuery({ projectRef })
+  const {
+    data: integrations,
+    error: integrationsError,
+    isLoading: isLoadingIntegrations,
+    isError: isErrorIntegrations,
+    isSuccess: isSuccessIntegrations,
+  } = useOrgIntegrationsQuery({ orgSlug: selectedOrg?.slug })
+
+  const githubConnections = integrations
+    ?.filter((integration) => integration.integration.name === 'GitHub')
+    .flatMap((integration) => integration.connections)
+  const githubConnection = githubConnections?.find(
+    (connection) => connection.supabase_project_ref === ref
+  )
+
+  const { data: branches } = useBranchesQuery({ projectRef })
   const [[mainBranch], previewBranches] = partition(branches, (branch) => branch.is_default)
 
   const { mutate: deleteBranch, isLoading: isDeleting } = useBranchDeleteMutation({
@@ -50,12 +86,72 @@ const BranchManagement = () => {
     },
   })
 
+  const { mutate: disableBranching, isLoading: isDisabling } = useBranchesDisableMutation({
+    onSuccess: () => {
+      ui.setNotification({
+        category: 'success',
+        message: 'Successfully disabled branching for project',
+      })
+      setShowDisableBranching(false)
+    },
+  })
+
+  const generateCreatePullRequestURL = (branch?: string) => {
+    if (githubConnection === undefined) return 'https://github.com'
+
+    return branch !== undefined
+      ? `https://github.com/${githubConnection.metadata.name}/compare/${mainBranch?.git_branch}...${branch}`
+      : `https://github.com/${githubConnection.metadata.name}/compare`
+  }
+
   const onConfirmDeleteBranch = () => {
     if (selectedBranchToDelete == undefined) return console.error('No branch selected')
     if (projectRef == undefined) return console.error('Project ref is required')
     deleteBranch({ id: selectedBranchToDelete?.id, projectRef })
   }
 
+  const onConfirmDisableBranching = () => {
+    if (projectRef == undefined) return console.error('Project ref is required')
+    if (!previewBranches) return console.error('No branches available')
+    disableBranching({ projectRef, branchIds: previewBranches?.map((branch) => branch.id) })
+  }
+
+  if (!hasBranchEnabled) {
+    // [Joshen] Some empty state here
+    return (
+      <ProductEmptyState title="Database Branching">
+        <p className="text-sm text-light">
+          {hasAccessToBranching
+            ? 'Create preview branches to experiment changes to your database schema in a safe, non-destructible environment.'
+            : "Register for early access and you'll be contacted by email when your organization is enrolled in database branching."}
+        </p>
+        {hasAccessToBranching ? (
+          <div className="!mt-4">
+            <Button
+              icon={<IconGitBranch strokeWidth={1.5} />}
+              onClick={() => snap.setShowEnableBranchingModal(true)}
+            >
+              Enable branching
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center space-x-2 !mt-4">
+            <Link passHref href={'/'}>
+              <a rel="noreferrer" target="_blank">
+                <Button>Join waitlist</Button>
+              </a>
+            </Link>
+            <Link passHref href={'/'}>
+              <a rel="noreferrer" target="_blank">
+                <Button type="default">View the docs</Button>
+              </a>
+            </Link>
+          </div>
+        )}
+      </ProductEmptyState>
+    )
+  }
+
   return (
     <>
       <ScaffoldContainer>
@@ -69,15 +165,28 @@ const BranchManagement = () => {
               <Button onClick={() => setShowCreateBranch(true)}>Create preview branch</Button>
             </div>
             <div className="">
-              {isLoading && <GenericSkeletonLoader />}
-              {isError && <AlertError error={error} subject="Failed to retrieve branches" />}
-              {isSuccess && (
+              {isLoadingIntegrations && <GenericSkeletonLoader />}
+              {isErrorIntegrations && (
+                <AlertError
+                  error={integrationsError}
+                  subject="Failed to retrieve GitHub integration connection"
+                />
+              )}
+              {isSuccessIntegrations && (
                 <>
-                  <MainBranchPanel branch={mainBranch} onSelectUpdate={() => {}} />
-                  <PullRequests previewBranches={previewBranches} />
-                  <PreviewBranches
+                  <MainBranchPanel
+                    repo={githubConnection?.metadata.name}
+                    branch={mainBranch}
+                    onSelectDisableBranching={() => setShowDisableBranching(true)}
+                  />
+                  <PullRequests
                     previewBranches={previewBranches}
-                    onSelectUpdateBranch={setSelectedBranchToUpdate}
+                    generateCreatePullRequestURL={generateCreatePullRequestURL}
+                    onSelectDeleteBranch={setSelectedBranchToDelete}
+                  />
+                  <PreviewBranches
+                    generateCreatePullRequestURL={generateCreatePullRequestURL}
+                    onSelectCreateBranch={() => setShowCreateBranch(true)}
                     onSelectDeleteBranch={setSelectedBranchToDelete}
                   />
                 </>
@@ -92,24 +201,60 @@ const BranchManagement = () => {
         visible={selectedBranchToDelete !== undefined}
         onCancel={() => setSelectedBranchToDelete(undefined)}
         onConfirm={() => onConfirmDeleteBranch()}
-        title="Delete branch"
         loading={isDeleting}
-        confirmLabel={`Delete branch`}
+        title="Delete branch"
+        confirmLabel="Delete branch"
         confirmPlaceholder="Type in name of branch"
         confirmString={selectedBranchToDelete?.name ?? ''}
-        text={`This will delete your branch "${selectedBranchToDelete?.name}"`}
+        text={`This will delete your database preview branch "${selectedBranchToDelete?.name}"`}
         alert="You cannot recover this branch once it is deleted!"
       />
 
+      <ConfirmationModal
+        danger
+        size="medium"
+        loading={isDisabling}
+        visible={showDisableBranching}
+        header="Confirm disable branching for project"
+        buttonLabel="Confirm disable branching"
+        buttonLoadingLabel="Disabling branching..."
+        onSelectConfirm={() => onConfirmDisableBranching()}
+        onSelectCancel={() => setShowDisableBranching(false)}
+      >
+        <Modal.Content>
+          <div className="py-6">
+            <Alert_Shadcn_ variant="warning">
+              <IconAlertTriangle strokeWidth={2} />
+              <AlertTitle_Shadcn_>This action cannot be undone</AlertTitle_Shadcn_>
+              <AlertDescription_Shadcn_>
+                All database preview branches will be removed upon disabling branching. You may
+                still re-enable branching again thereafter, but your existing preview branches will
+                not be restored.
+              </AlertDescription_Shadcn_>
+            </Alert_Shadcn_>
+            <ul className="mt-4 space-y-5">
+              <li className="flex gap-3">
+                <div>
+                  <strong className="text-sm">Before you disable branching, consider:</strong>
+                  <ul className="space-y-2 mt-2 text-sm text-light">
+                    <li className="list-disc ml-6">
+                      Your project no longer requires database previews.
+                    </li>
+                    <li className="list-disc ml-6">
+                      None of your database previews are currently being used in any app.
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </Modal.Content>
+      </ConfirmationModal>
+
       <CreateBranchSidePanel
         visible={showCreateBranch}
         onClose={() => setShowCreateBranch(false)}
       />
-
-      <UpdateBranchSidePanel
-        selectedBranch={selectedBranchToUpdate}
-        onClose={() => setSelectedBranchToUpdate(undefined)}
-      />
     </>
   )
 }
diff --git a/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index 383902267ca..3e716f7164d 100644
--- a/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -1,15 +1,18 @@
 import clsx from 'clsx'
+import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { noop } from 'lodash'
+import Link from 'next/link'
 import { PropsWithChildren, forwardRef, useState } from 'react'
 import {
   Badge,
   Button,
+  Dropdown,
   DropdownMenuContent_Shadcn_,
   DropdownMenuItem_Shadcn_,
   DropdownMenuTrigger_Shadcn_,
   DropdownMenu_Shadcn_,
-  IconEdit,
+  IconExternalLink,
   IconGitBranch,
   IconGitHub,
   IconMoreVertical,
@@ -18,20 +21,29 @@ import {
   cn,
 } from 'ui'
 
-import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { Branch } from 'data/branches/branches-query'
+import { GitHubPullRequest } from 'data/integrations/integrations-github-pull-requests-query'
 
 interface BranchPanelProps {
-  branch: Branch
+  repo?: string
+  branch?: Branch
   onSelectUpdate?: () => void
   onSelectDelete?: () => void
+  onSelectDisableBranching?: () => void
+  generateCreatePullRequestURL?: (branch?: string) => string
 }
 
-const MainBranchPanel = ({ branch, onSelectUpdate = noop }: BranchPanelProps) => {
+const MainBranchPanel = ({
+  repo,
+  branch,
+  onSelectUpdate = noop,
+  onSelectDisableBranching = noop,
+}: BranchPanelProps) => {
   const { ref } = useParams()
   const [open, setOpen] = useState(false)
-  const isActive = ref === branch.project_ref
+  const isActive = ref === branch?.project_ref
 
   return (
     <div className="border rounded-lg">
@@ -41,32 +53,67 @@ const MainBranchPanel = ({ branch, onSelectUpdate = noop }: BranchPanelProps) =>
             <IconGitHub size={18} strokeWidth={2} />
           </div>
           <p>Github branch workflow</p>
+          <Link passHref href={`https://github.com/${repo}`}>
+            <a target="_blank" rel="noreferrer">
+              <Button
+                type="text"
+                size="small"
+                className="text-light hover:text py-1 px-1.5"
+                iconRight={<IconExternalLink size={14} strokeWidth={1.5} />}
+              >
+                {repo}
+              </Button>
+            </a>
+          </Link>
         </div>
       </div>
       <div className="bg-surface-100 border-t shadow-sm flex justify-between items-center pl-8 pr-6 py-3 rounded-b-lg text-sm">
-        <div className="flex items-center space-x-4">
-          <div className="w-8 h-8 bg-amber-300 rounded-md flex items-center justify-center">
-            <IconShield size={18} strokeWidth={2} className="text-amber-900" />
-          </div>
-          <p>{branch.name}</p>
-          <Badge color="amber">Production</Badge>
-          {isActive && <Badge color="green">Selected</Badge>}
-        </div>
-        <div className="flex items-center space-x-4">
-          <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
-            <DropdownMenuTrigger_Shadcn_>
-              <Button asChild type="text" className="px-1" icon={<IconMoreVertical size={14} />}>
-                <span></span>
-              </Button>
-            </DropdownMenuTrigger_Shadcn_>
-            <DropdownMenuContent_Shadcn_ side="bottom" align="end">
-              <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectUpdate()}>
-                <IconEdit size={14} />
-                Edit branch
-              </DropdownMenuItem_Shadcn_>
-            </DropdownMenuContent_Shadcn_>
-          </DropdownMenu_Shadcn_>
-        </div>
+        {branch === undefined ? (
+          <ShimmeringLoader className="w-full" />
+        ) : (
+          <>
+            <div className="flex items-center space-x-4">
+              <div className="w-8 h-8 bg-amber-300 rounded-md flex items-center justify-center">
+                <IconShield size={18} strokeWidth={2} className="text-amber-900" />
+              </div>
+              <p>{branch?.name}</p>
+              <Badge color="amber">Production</Badge>
+              {isActive && <Badge color="green">Selected</Badge>}
+            </div>
+            <div className="flex items-center space-x-4">
+              <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
+                <DropdownMenuTrigger_Shadcn_>
+                  <Button
+                    asChild
+                    type="text"
+                    className="px-1"
+                    icon={<IconMoreVertical size={14} />}
+                  >
+                    <span></span>
+                  </Button>
+                </DropdownMenuTrigger_Shadcn_>
+                <DropdownMenuContent_Shadcn_ side="bottom" align="end">
+                  <Link passHref href={`/project/${ref}/settings/general`}>
+                    <DropdownMenuItem_Shadcn_
+                      asChild
+                      className="flex gap-2"
+                      onSelect={() => onSelectUpdate()}
+                    >
+                      <a>Change production branch</a>
+                    </DropdownMenuItem_Shadcn_>
+                  </Link>
+                  <Dropdown.Separator />
+                  <DropdownMenuItem_Shadcn_
+                    className="flex gap-2"
+                    onSelect={() => onSelectDisableBranching()}
+                  >
+                    Disable branching
+                  </DropdownMenuItem_Shadcn_>
+                </DropdownMenuContent_Shadcn_>
+              </DropdownMenu_Shadcn_>
+            </div>
+          </>
+        )}
       </div>
     </div>
   )
@@ -90,28 +137,35 @@ const BranchContainer = ({ className, children }: PropsWithChildren<{ className?
 
 const BranchPanel = ({
   branch,
-  onSelectUpdate = noop,
+  generateCreatePullRequestURL,
   onSelectDelete = noop,
 }: BranchPanelProps) => {
   const { ref } = useParams()
   const [open, setOpen] = useState(false)
 
-  const isActive = ref === branch.project_ref
-  const daysFromNow = dayjs().diff(dayjs(branch.created_at), 'day')
-  const formattedTimeFromNow = dayjs(branch.created_at).fromNow()
-  const formattedCreatedAt = dayjs(branch.created_at).format('DD MMM YYYY, HH:mm:ss (ZZ)')
+  const isActive = ref === branch?.project_ref
+  const daysFromNow = dayjs().diff(dayjs(branch?.created_at), 'day')
+  const formattedTimeFromNow = dayjs(branch?.created_at).fromNow()
+  const formattedCreatedAt = dayjs(branch?.created_at).format('DD MMM YYYY, HH:mm:ss (ZZ)')
+
+  const pullRequestURL = generateCreatePullRequestURL?.(branch?.git_branch) ?? 'https://github.com'
 
   return (
     <BranchContainer className="bg-surface-100">
       <div className="flex items-center space-x-4">
-        <IconGitBranch className="text-brand-900" size={16} strokeWidth={2} />
-        <p>{branch.name}</p>
+        <IconGitBranch size={16} strokeWidth={2} />
+        <p>{branch?.name}</p>
         {isActive && <Badge color="green">Selected</Badge>}
-        <p className="text-scale-1000">
+        <p className="text-light">
           {daysFromNow > 1 ? `Created on ${formattedCreatedAt}` : `Created ${formattedTimeFromNow}`}
         </p>
       </div>
-      <div>
+      <div className="flex items-center space-x-4">
+        <Link passHref href={pullRequestURL}>
+          <a target="_blank" rel="noreferrer">
+            <Button icon={<IconExternalLink />}>Create pull request</Button>
+          </a>
+        </Link>
         <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
           <DropdownMenuTrigger_Shadcn_>
             <Button asChild type="text" className="px-1" icon={<IconMoreVertical size={14} />}>
@@ -119,10 +173,6 @@ const BranchPanel = ({
             </Button>
           </DropdownMenuTrigger_Shadcn_>
           <DropdownMenuContent_Shadcn_ side="bottom" align="end">
-            <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectUpdate()}>
-              <IconEdit size={14} />
-              Edit branch
-            </DropdownMenuItem_Shadcn_>
             <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectDelete()}>
               <IconTrash size={14} />
               Delete branch
@@ -156,5 +206,61 @@ const BranchHeader = forwardRef<HTMLDivElement, BranchHeader>(
   }
 )
 
+const PullRequestPanel = ({
+  pr,
+  onSelectDelete = noop,
+}: {
+  pr: GitHubPullRequest
+  onSelectDelete: () => void
+}) => {
+  const [open, setOpen] = useState(false)
+  const daysFromNow = dayjs().diff(dayjs(pr.created_at), 'day')
+  const formattedTimeFromNow = dayjs(pr.created_at).fromNow()
+  const formattedCreatedAt = dayjs(pr.created_at).format('DD MMM YYYY, HH:mm:ss (ZZ)')
+
+  return (
+    <BranchContainer className="bg-surface-100">
+      <div className="w-full">
+        <div className="flex items-center justify-between">
+          <div>
+            <div className="flex items-center space-x-4">
+              <IconGitBranch className="text-brand-900" size={16} strokeWidth={2} />
+              <p>{pr.branch}</p>
+              <p className="text-light">
+                {daysFromNow > 1
+                  ? `Created on ${formattedCreatedAt}`
+                  : `Created ${formattedTimeFromNow}`}
+              </p>
+            </div>
+            <p className="text-scale-1000 ml-8 mt-0.5">{pr.title}</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <Link passHref href={pr.url}>
+              <a target="_blank" rel="noreferrer">
+                <Button type="default" icon={<IconExternalLink />}>
+                  View pull request
+                </Button>
+              </a>
+            </Link>
+            <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
+              <DropdownMenuTrigger_Shadcn_>
+                <Button asChild type="text" className="px-1" icon={<IconMoreVertical size={14} />}>
+                  <span></span>
+                </Button>
+              </DropdownMenuTrigger_Shadcn_>
+              <DropdownMenuContent_Shadcn_ side="bottom" align="end">
+                <DropdownMenuItem_Shadcn_ className="flex gap-2" onSelect={() => onSelectDelete()}>
+                  <IconTrash size={14} />
+                  Delete branch
+                </DropdownMenuItem_Shadcn_>
+              </DropdownMenuContent_Shadcn_>
+            </DropdownMenu_Shadcn_>
+          </div>
+        </div>
+      </div>
+    </BranchContainer>
+  )
+}
+
 BranchHeader.displayName = 'BranchHeader'
-export { BranchHeader, BranchContainer, BranchPanel, MainBranchPanel }
+export { BranchContainer, BranchHeader, BranchPanel, MainBranchPanel, PullRequestPanel }
diff --git a/studio/components/interfaces/BranchManagement/CreateBranchSidePanel.tsx b/studio/components/interfaces/BranchManagement/CreateBranchSidePanel.tsx
index 7ca6d3f87af..7cc6ada19ac 100644
--- a/studio/components/interfaces/BranchManagement/CreateBranchSidePanel.tsx
+++ b/studio/components/interfaces/BranchManagement/CreateBranchSidePanel.tsx
@@ -1,32 +1,89 @@
-import { useRef } from 'react'
-import { Button, Form, Input, Listbox, SidePanel } from 'ui'
+import { useEffect, useState } from 'react'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconExternalLink,
+  IconGitBranch,
+  IconSearch,
+  Input,
+  SidePanel,
+} from 'ui'
 
 import { useParams } from 'common'
+import AlertError from 'components/ui/AlertError'
+import NoSearchResults from 'components/ui/NoSearchResults'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useBranchCreateMutation } from 'data/branches/branch-create-mutation'
-import { useSelectedProject, useStore } from 'hooks'
+import { useBranchesQuery } from 'data/branches/branches-query'
+import { useGithubBranchesQuery } from 'data/integrations/integrations-github-branches-query'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useSelectedOrganization, useSelectedProject, useStore } from 'hooks'
+import Link from 'next/link'
 
 interface CreateBranchSidePanelProps {
   visible: boolean
   onClose: () => void
 }
 
-const MOCK_BRANCHES = [
-  { id: 1, name: 'feat/branch-01' },
-  { id: 2, name: 'feat/branch-02' },
-]
+// [Joshen] Optimization: Remove Form component, just use Combobox
 
 const CreateBranchSidePanel = ({ visible, onClose }: CreateBranchSidePanelProps) => {
   const { ui } = useStore()
-  const submitRef: any = useRef()
   const { ref } = useParams()
   const projectDetails = useSelectedProject()
+  const selectedOrg = useSelectedOrganization()
+
+  const [searchValue, setSearchValue] = useState('')
+  const [selectedBranch, setSelectedBranch] = useState<string>()
+
+  useEffect(() => {
+    if (visible) {
+      setSelectedBranch(undefined)
+    }
+  }, [visible])
 
   const isBranch = projectDetails?.parent_project_ref !== undefined
   const projectRef =
     projectDetails !== undefined ? (isBranch ? projectDetails.parent_project_ref : ref) : undefined
 
-  const formId = 'create-branch-form'
-  const initialValues = { branchName: '', gitBranch: 'no-selection' }
+  const { data: branches } = useBranchesQuery({ projectRef })
+  const {
+    data: integrations,
+    error: integrationsError,
+    isLoading: isLoadingIntegrations,
+    isSuccess: isSuccessIntegrations,
+    isError: isErrorIntegrations,
+  } = useOrgIntegrationsQuery({
+    orgSlug: selectedOrg?.slug,
+  })
+  const githubIntegration = integrations?.find(
+    (integration) =>
+      integration.integration.name === 'GitHub' &&
+      integration.connections.some((connection) => connection.supabase_project_ref === ref)
+  )
+
+  const githubConnection = githubIntegration?.connections?.find(
+    (connection) => connection.supabase_project_ref === ref
+  )
+  const [repoOwner, repoName] = githubConnection?.metadata.name.split('/') || []
+  const {
+    data: githubBranches,
+    error: githubBranchesError,
+    isLoading: isLoadingBranches,
+    isSuccess: isSuccessBranches,
+    isError: isErrorBranches,
+  } = useGithubBranchesQuery({
+    organizationIntegrationId: githubIntegration?.id,
+    repoOwner,
+    repoName,
+  })
+  const branchOptions =
+    searchValue.length > 0
+      ? (githubBranches || [])?.filter((branch) => branch.name.includes(searchValue))
+      : githubBranches || []
+
   const { mutate: createBranch, isLoading: isCreating } = useBranchCreateMutation({
     onSuccess: () => {
       ui.setNotification({ category: 'success', message: `Successfully created new branch` })
@@ -34,89 +91,127 @@ const CreateBranchSidePanel = ({ visible, onClose }: CreateBranchSidePanelProps)
     },
   })
 
-  const validate = (values: any) => {
-    const errors: any = {}
-    if (values.branchName.length === 0)
-      errors.branchName = 'Please provide a name for your preview branch'
-    if (values.gitBranch.length === 0 || values.gitBranch === 'no-selection')
-      errors.gitBranch = 'Please select a Git branch to link to this database preview branch'
-    return errors
-  }
-
-  const onConfirmCreate = (values: any) => {
+  const onCreateBranch = (branch: string) => {
     if (!projectRef) return console.error('Project ref is required')
-    createBranch({ projectRef, ...values })
+    setSelectedBranch(branch)
+    createBranch({ projectRef, branchName: branch, gitBranch: branch })
   }
 
   return (
     <SidePanel
+      hideFooter
+      size="large"
       visible={visible}
       loading={isCreating}
       onCancel={onClose}
       header="Create a new database preview branch"
-      customFooter={
-        <div className="flex w-full justify-end space-x-3 border-t border-scale-500 px-3 py-4">
-          <Button
-            size="tiny"
-            type="default"
-            htmlType="button"
-            onClick={onClose}
-            disabled={isCreating}
-          >
-            Cancel
-          </Button>
-          <Button
-            size="tiny"
-            type="primary"
-            htmlType="button"
-            disabled={isCreating}
-            loading={isCreating}
-            onClick={() => submitRef?.current?.click()}
-          >
-            Confirm
-          </Button>
-        </div>
-      }
     >
-      <div className="py-6">
+      <div className="py-6 space-y-4 ">
         <SidePanel.Content>
-          <Form
-            validateOnBlur
-            id={formId}
-            initialValues={initialValues}
-            validate={validate}
-            onSubmit={onConfirmCreate}
-          >
-            {() => {
-              return (
-                <div className="space-y-6">
-                  <Input id="branchName" label="Branch name" />
-                  <Listbox size="medium" id="gitBranch" name="gitBranch" label="Git branch">
-                    <Listbox.Option
-                      label="---"
-                      key="no-selection"
-                      id="no-selection"
-                      value="no-selection"
-                    >
-                      ---
-                    </Listbox.Option>
-                    {MOCK_BRANCHES.map((branch) => (
-                      <Listbox.Option
-                        key={branch.id}
-                        id={branch.id.toString()}
-                        value={branch.name}
-                        label={branch.name}
-                      >
-                        <p className="text-scale-1200">{branch.name}</p>
-                      </Listbox.Option>
-                    ))}
-                  </Listbox>
+          {isLoadingIntegrations && <GenericSkeletonLoader />}
+          {isSuccessIntegrations && (
+            <div>
+              <p className="text-sm text-scale-1100">
+                Your project is currently connected to the repository:
+              </p>
+              <div className="flex items-center space-x-2">
+                <p>{githubConnection?.metadata.name}</p>
+                <Link passHref href={`https://github.com/${repoOwner}/${repoName}`}>
+                  <a target="_blank" rel="noreferrer">
+                    <IconExternalLink size={14} strokeWidth={1.5} />
+                  </a>
+                </Link>
+              </div>
+            </div>
+          )}
+        </SidePanel.Content>
 
-                  <button ref={submitRef} type="submit" className="hidden" />
+        <SidePanel.Separator />
+
+        <SidePanel.Content>
+          <div>
+            <p className="text-sm prose mb-2">
+              Select a Git branch to create a database preview from
+            </p>
+            {(isLoadingIntegrations || isLoadingBranches) && <GenericSkeletonLoader />}
+            {(isErrorIntegrations || isErrorBranches) && (
+              <AlertError
+                error={integrationsError || githubBranchesError}
+                subject="Failed to retrieve Github branches"
+              />
+            )}
+            {isSuccessIntegrations && isSuccessBranches && (
+              <>
+                <Input
+                  placeholder="Search branch..."
+                  className="mb-3"
+                  value={searchValue}
+                  icon={<IconSearch />}
+                  onChange={(event) => setSearchValue(event.target.value)}
+                />
+                {branchOptions.length === 0 && searchValue.length === 0 && (
+                  <Alert_Shadcn_ variant="default" className="!pl-4">
+                    <AlertTitle_Shadcn_>No branches available in repository</AlertTitle_Shadcn_>
+                    <AlertDescription_Shadcn_>
+                      <p>Create a branch in the {repoName} repository on Github first</p>
+                      <Link passHref href={`https://github.com/${repoOwner}/${repoName}`}>
+                        <a target="_blank" rel="noreferrer">
+                          <Button type="default" iconRight={<IconExternalLink />} className="mt-2">
+                            Create a new branch on Github
+                          </Button>
+                        </a>
+                      </Link>
+                    </AlertDescription_Shadcn_>
+                  </Alert_Shadcn_>
+                )}
+                {branchOptions.length === 0 && searchValue.length > 0 && (
+                  <NoSearchResults
+                    searchString={searchValue}
+                    onResetFilter={() => setSearchValue('')}
+                  />
+                )}
+                <div className="[&>*:first-child]:rounded-t-md">
+                  {branchOptions?.map((branch) => {
+                    const isProductionBranch = branches?.find(
+                      (b) => b.git_branch === branch.name && b.is_default
+                    )
+                    const alreadyHasDatabaseBranch =
+                      branches?.some((b) => b.git_branch === branch.name) ?? false
+                    return (
+                      <div
+                        key={branch.name}
+                        className="px-6 py-4 bg-surface-200 last:rounded-b-md border border-b-0 last:border-b"
+                      >
+                        <div className="w-full flex items-center justify-between">
+                          <div className="flex items-center space-x-3">
+                            <IconGitBranch size={14} strokeWidth={1.5} />
+                            <p className="text-sm">{branch.name}</p>
+                          </div>
+                          <Button
+                            type={isProductionBranch ? 'warning' : 'default'}
+                            loading={isCreating}
+                            disabled={isCreating || alreadyHasDatabaseBranch}
+                            onClick={() => onCreateBranch(branch.name)}
+                            className={
+                              selectedBranch !== undefined && selectedBranch !== branch.name
+                                ? 'opacity-0'
+                                : ''
+                            }
+                          >
+                            {isProductionBranch
+                              ? 'Production branch'
+                              : alreadyHasDatabaseBranch
+                              ? 'Branch already created'
+                              : 'Create branch'}
+                          </Button>
+                        </div>
+                      </div>
+                    )
+                  })}
                 </div>
-              )
-            }}
-          </Form>
+              </>
+            )}
+          </div>
         </SidePanel.Content>
       </div>
     </SidePanel>
diff --git a/studio/components/interfaces/BranchManagement/PreviewBranches.tsx b/studio/components/interfaces/BranchManagement/PreviewBranches.tsx
index 4bd7f567b27..6b11a67ae32 100644
--- a/studio/components/interfaces/BranchManagement/PreviewBranches.tsx
+++ b/studio/components/interfaces/BranchManagement/PreviewBranches.tsx
@@ -1,58 +1,127 @@
-import { Branch } from 'data/branches/branches-query'
-import { BranchContainer, BranchHeader, BranchPanel } from './BranchPanels'
 import { Button, IconExternalLink, IconGitBranch } from 'ui'
 
+import { Branch, useBranchesQuery } from 'data/branches/branches-query'
+import { BranchContainer, BranchHeader, BranchPanel } from './BranchPanels'
+import { useParams } from 'common'
+import { useGithubPullRequestsQuery } from 'data/integrations/integrations-github-pull-requests-query'
+import { partition } from 'lodash'
+import { useSelectedOrganization } from 'hooks'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import AlertError from 'components/ui/AlertError'
+
 interface PreviewBranchesProps {
-  previewBranches: Branch[]
-  onSelectUpdateBranch: (branch: Branch) => void
+  generateCreatePullRequestURL: (branch?: string) => string
+  onSelectCreateBranch: () => void
   onSelectDeleteBranch: (branch: Branch) => void
 }
 
 const PreviewBranches = ({
-  previewBranches,
-  onSelectUpdateBranch,
+  generateCreatePullRequestURL,
+  onSelectCreateBranch,
   onSelectDeleteBranch,
 }: PreviewBranchesProps) => {
+  const { ref } = useParams()
+  const selectedOrg = useSelectedOrganization()
+
+  const { data: integrations } = useOrgIntegrationsQuery({
+    orgSlug: selectedOrg?.slug,
+  })
+  const githubIntegration = integrations?.find(
+    (integration) =>
+      integration.integration.name === 'GitHub' &&
+      integration.organization.slug === selectedOrg?.slug
+  )
+  const githubConnection = githubIntegration?.connections.find(
+    (connection) => connection.supabase_project_ref === ref
+  )
+  const [repoOwner, repoName] = githubConnection?.metadata.name.split('/') || []
+
+  const {
+    data: branches,
+    error: branchesError,
+    isLoading: isLoadingBranches,
+    isError: isErrorBranches,
+    isSuccess: isSuccessBranches,
+  } = useBranchesQuery({ projectRef: ref })
+  const [[mainBranch], previewBranches] = partition(branches, (branch) => branch.is_default)
+
+  const { data: allPullRequests } = useGithubPullRequestsQuery({
+    organizationIntegrationId: githubIntegration?.id,
+    repoOwner,
+    repoName,
+    target: mainBranch?.git_branch,
+  })
+
+  const previewBranchesNotInPR = previewBranches.filter(
+    (branch) => !allPullRequests?.find((pr) => pr.branch === branch.git_branch)
+  )
+
   return (
     <>
-      <BranchHeader markdown={previewBranches.length > 0 ? `#### Preview branches` : undefined} />
-      {previewBranches.length === 0 ? (
+      {previewBranches.length > 0 && previewBranchesNotInPR.length > 0 && (
+        <BranchHeader markdown={previewBranches.length > 0 ? `#### Preview branches` : undefined} />
+      )}
+
+      {isLoadingBranches && (
         <BranchContainer>
-          <div className="flex items-center flex-col justify-center w-full py-8">
-            <p>No database preview branches</p>
-            <p className="text-scale-1000">Database preview branches will be shown here</p>
-            <div className="w-[500px] border rounded-md mt-4">
-              <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
-                <div className="flex items-center space-x-4">
-                  <IconGitBranch strokeWidth={2} className="text-scale-1100" />
-                  <div>
-                    <p>Create a preview branch</p>
-                    <p className="text-scale-1000">Start developing in preview</p>
-                  </div>
-                </div>
-                <Button type="default">Create preview branch</Button>
-              </div>
-              <div className="px-5 py-3 border-t flex items-center justify-between">
-                <div>
-                  <p>Not sure what to do?</p>
-                  <p className="text-scale-1000">Browse our documentation</p>
-                </div>
-                <Button type="default" iconRight={<IconExternalLink />}>
-                  Docs
-                </Button>
-              </div>
-            </div>
+          <div className="w-full">
+            <GenericSkeletonLoader />
           </div>
         </BranchContainer>
-      ) : (
-        previewBranches.map((branch) => (
-          <BranchPanel
-            key={branch.id}
-            branch={branch}
-            onSelectUpdate={() => onSelectUpdateBranch(branch)}
-            onSelectDelete={() => onSelectDeleteBranch(branch)}
-          />
-        ))
+      )}
+
+      {isErrorBranches && (
+        <BranchContainer>
+          <div className="w-full">
+            <AlertError error={branchesError} subject="Failed to retrieve GitHub branches" />
+          </div>
+        </BranchContainer>
+      )}
+
+      {isSuccessBranches && (
+        <>
+          {previewBranches.length === 0 ? (
+            <BranchContainer>
+              <div className="flex items-center flex-col justify-center w-full py-8">
+                <p>No database preview branches</p>
+                <p className="text-scale-1000">Database preview branches will be shown here</p>
+                <div className="w-[500px] border rounded-md mt-4">
+                  <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
+                    <div className="flex items-center space-x-4">
+                      <IconGitBranch strokeWidth={2} className="text-scale-1100" />
+                      <div>
+                        <p>Create a preview branch</p>
+                        <p className="text-scale-1000">Start developing in preview</p>
+                      </div>
+                    </div>
+                    <Button type="default" onClick={() => onSelectCreateBranch()}>
+                      Create preview branch
+                    </Button>
+                  </div>
+                  <div className="px-5 py-3 border-t flex items-center justify-between">
+                    <div>
+                      <p>Not sure what to do?</p>
+                      <p className="text-scale-1000">Browse our documentation</p>
+                    </div>
+                    <Button type="default" iconRight={<IconExternalLink />}>
+                      Docs
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </BranchContainer>
+          ) : (
+            previewBranchesNotInPR.map((branch) => (
+              <BranchPanel
+                key={branch.id}
+                branch={branch}
+                generateCreatePullRequestURL={generateCreatePullRequestURL}
+                onSelectDelete={() => onSelectDeleteBranch(branch)}
+              />
+            ))
+          )}
+        </>
       )}
     </>
   )
diff --git a/studio/components/interfaces/BranchManagement/PullRequests.tsx b/studio/components/interfaces/BranchManagement/PullRequests.tsx
index 0e1fd0aeefd..882840d6693 100644
--- a/studio/components/interfaces/BranchManagement/PullRequests.tsx
+++ b/studio/components/interfaces/BranchManagement/PullRequests.tsx
@@ -1,56 +1,142 @@
-import { Branch } from 'data/branches/branches-query'
-import { BranchContainer, BranchHeader } from './BranchPanels'
+import Link from 'next/link'
 import { Button, IconExternalLink, IconGitBranch } from 'ui'
 
+import { useParams } from 'common'
+import { Branch, useBranchesQuery } from 'data/branches/branches-query'
+import { useGithubPullRequestsQuery } from 'data/integrations/integrations-github-pull-requests-query'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useSelectedOrganization } from 'hooks'
+import { BranchContainer, BranchHeader, PullRequestPanel } from './BranchPanels'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import AlertError from 'components/ui/AlertError'
+
 interface PullRequestsProps {
   previewBranches: Branch[]
+  generateCreatePullRequestURL: (branch?: string) => string
+  onSelectDeleteBranch: (branch: Branch) => void
 }
 
-const PullRequests = ({ previewBranches }: PullRequestsProps) => {
-  const pullRequests = []
+const PullRequests = ({
+  previewBranches,
+  generateCreatePullRequestURL,
+  onSelectDeleteBranch,
+}: PullRequestsProps) => {
+  const { ref } = useParams()
+  const selectedOrg = useSelectedOrganization()
+  const pullRequestUrl = generateCreatePullRequestURL()
+
+  const { data: integrations, isLoading: isLoadingIntegrations } = useOrgIntegrationsQuery({
+    orgSlug: selectedOrg?.slug,
+  })
+  const githubIntegration = integrations?.find(
+    (integration) =>
+      integration.integration.name === 'GitHub' &&
+      integration.organization.slug === selectedOrg?.slug
+  )
+
+  const githubConnection = githubIntegration?.connections?.find(
+    (connection) => connection.supabase_project_ref === ref
+  )
+  const [repoOwner, repoName] = githubConnection?.metadata.name.split('/') || []
+
+  const { data: branches, isLoading: isLoadingBranches } = useBranchesQuery({ projectRef: ref })
+  const mainBranch = branches?.find((branch) => branch.is_default)
+
+  const {
+    data: allPullRequests,
+    error: pullRequestsError,
+    isLoading: isLoadingPullRequests,
+    isError: isErrorPullRequests,
+    isSuccess: isSuccessPullRequests,
+  } = useGithubPullRequestsQuery({
+    organizationIntegrationId: githubIntegration?.id,
+    repoOwner,
+    repoName,
+    target: mainBranch?.git_branch,
+  })
+  const pullRequests = allPullRequests?.filter((pr) =>
+    branches?.some((branch) => branch.git_branch === pr.branch)
+  )
+
+  const showEmptyState = previewBranches.length === 0 || (pullRequests || []).length === 0
 
   return (
     <>
       <BranchHeader
-        markdown={
-          pullRequests.length > 0 && previewBranches.length > 0
-            ? `#### Open pull requests`
-            : undefined
-        }
+        markdown={!showEmptyState ? `#### Preview branches in pull requests` : undefined}
       />
-      {previewBranches.length === 0 || pullRequests.length === 0 ? (
+
+      {(isLoadingBranches || isLoadingPullRequests || isLoadingIntegrations) && (
         <BranchContainer>
-          <div className="flex items-center flex-col justify-center w-full py-8">
-            <p>No pull requests made yet for this repository</p>
-            <p className="text-scale-1000">
-              Only pull requests with the ./migration directory changes will show here.
-            </p>
-            {previewBranches.length > 0 && (
-              <div className="w-96 border rounded-md mt-4">
-                <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
-                  <div className="flex items-center space-x-4">
-                    <IconGitBranch strokeWidth={2} className="text-scale-1100" />
-                    <p>Create a pull request</p>
-                  </div>
-                  <Button type="default" iconRight={<IconExternalLink />}>
-                    Github
-                  </Button>
-                </div>
-                <div className="px-5 py-3 border-t flex items-center justify-between">
-                  <div>
-                    <p>Not sure what to do?</p>
-                    <p className="text-scale-1000">Browse our documentation</p>
-                  </div>
-                  <Button type="default" iconRight={<IconExternalLink />}>
-                    Docs
-                  </Button>
-                </div>
-              </div>
-            )}
+          <div className="w-full">
+            <GenericSkeletonLoader />
           </div>
         </BranchContainer>
-      ) : (
-        <BranchContainer>State 3</BranchContainer>
+      )}
+
+      {isErrorPullRequests && (
+        <BranchContainer>
+          <div className="w-full">
+            <AlertError
+              error={pullRequestsError}
+              subject="Failed to retrieve GitHub pull requests"
+            />
+          </div>
+        </BranchContainer>
+      )}
+
+      {isSuccessPullRequests && (
+        <>
+          {showEmptyState ? (
+            <BranchContainer>
+              <div className="flex items-center flex-col justify-center w-full py-8">
+                <p>No pull requests made yet for this repository</p>
+                <p className="text-scale-1000">
+                  Only pull requests with the ./migration directory changes will show here.
+                </p>
+                {previewBranches.length > 0 && (
+                  <div className="w-96 border rounded-md mt-4">
+                    <div className="px-5 py-3 bg-surface-100 flex items-center justify-between">
+                      <div className="flex items-center space-x-4">
+                        <IconGitBranch strokeWidth={2} className="text-scale-1100" />
+                        <p>Create a pull request</p>
+                      </div>
+                      <Link passHref href={pullRequestUrl}>
+                        <a target="_blank" rel="noreferrer">
+                          <Button type="default" iconRight={<IconExternalLink />}>
+                            Github
+                          </Button>
+                        </a>
+                      </Link>
+                    </div>
+                    <div className="px-5 py-3 border-t flex items-center justify-between">
+                      <div>
+                        <p>Not sure what to do?</p>
+                        <p className="text-scale-1000">Browse our documentation</p>
+                      </div>
+                      <Button type="default" iconRight={<IconExternalLink />}>
+                        Docs
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </BranchContainer>
+          ) : (
+            pullRequests?.map((pr) => {
+              const branch = branches?.find((branch) => branch.git_branch === pr.branch)
+              return (
+                <PullRequestPanel
+                  key={pr.id}
+                  pr={pr}
+                  onSelectDelete={() => {
+                    if (branch !== undefined) onSelectDeleteBranch(branch)
+                  }}
+                />
+              )
+            })
+          )}
+        </>
       )}
     </>
   )
diff --git a/studio/components/interfaces/BranchManagement/UpdateBranchSidePanel.tsx b/studio/components/interfaces/BranchManagement/UpdateBranchSidePanel.tsx
deleted file mode 100644
index 4899a922c11..00000000000
--- a/studio/components/interfaces/BranchManagement/UpdateBranchSidePanel.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useParams } from 'common'
-import { useBranchUpdateMutation } from 'data/branches/branch-update-mutation'
-import { Branch } from 'data/branches/branches-query'
-import { useStore } from 'hooks'
-import { useRef } from 'react'
-import { Button, Form, Input, SidePanel } from 'ui'
-
-interface UpdateBranchSidePanelProps {
-  selectedBranch?: Branch
-  onClose: () => void
-}
-
-const UpdateBranchSidePanel = ({ selectedBranch, onClose }: UpdateBranchSidePanelProps) => {
-  const { ui } = useStore()
-  const submitRef: any = useRef()
-  const { ref: projectRef } = useParams()
-  const { mutate: updateBranch, isLoading: isUpdating } = useBranchUpdateMutation({
-    onSuccess: () => {
-      onClose()
-      ui.setNotification({ category: 'success', message: 'Successfully updated branch' })
-    },
-  })
-
-  const formId = 'update-branch-form'
-  const initialValues = {
-    branchName: selectedBranch?.name,
-    gitBranch: selectedBranch?.git_branch,
-  }
-
-  const validate = (values: any) => {
-    const errors: any = {}
-    if (values.branchName.length === 0) errors.branchName = 'Please provide a branch name'
-    if (values.gitBranch.length === 0) errors.gitBranch = 'Please provide a Git branch'
-    return errors
-  }
-
-  const onConfirmUpdate = (values: any) => {
-    if (selectedBranch === undefined) return console.error('No branch selected')
-    if (projectRef === undefined) return console.error('Project ref is required')
-    updateBranch({ ...values, id: selectedBranch.id, projectRef })
-  }
-
-  return (
-    <SidePanel
-      visible={selectedBranch !== undefined}
-      header={`Update branch: ${selectedBranch?.name}`}
-      onCancel={onClose}
-      customFooter={
-        <div className="flex w-full justify-end space-x-3 border-t border-scale-500 px-3 py-4">
-          <Button
-            size="tiny"
-            type="default"
-            htmlType="button"
-            onClick={onClose}
-            disabled={isUpdating}
-          >
-            Cancel
-          </Button>
-          <Button
-            size="tiny"
-            type="primary"
-            htmlType="button"
-            disabled={isUpdating}
-            loading={isUpdating}
-            onClick={() => submitRef?.current?.click()}
-          >
-            Confirm
-          </Button>
-        </div>
-      }
-    >
-      <div className="py-6">
-        <SidePanel.Content>
-          <Form
-            validateOnBlur
-            id={formId}
-            initialValues={initialValues}
-            validate={validate}
-            onSubmit={onConfirmUpdate}
-          >
-            {() => {
-              return (
-                <div className="space-y-6">
-                  <Input id="branchName" label="Branch name" />
-                  <Input disabled id="gitBranch" label="Git branch" />
-                  <button ref={submitRef} type="submit" className="hidden" />
-                </div>
-              )
-            }}
-          </Form>
-        </SidePanel.Content>
-      </div>
-    </SidePanel>
-  )
-}
-
-export default UpdateBranchSidePanel
diff --git a/studio/components/interfaces/Database/Backups/BackupsError.tsx b/studio/components/interfaces/Database/Backups/BackupsError.tsx
index 1587d28fa87..8325dc6f8a0 100644
--- a/studio/components/interfaces/Database/Backups/BackupsError.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsError.tsx
@@ -9,7 +9,7 @@ const BackupsError = () => {
         <p className="text-sm">
           Failed to retrieve backups for this project. Please contact{' '}
           <Link href="/support/new">
-            <a className="text-brand-900">support</a>
+            <a className="text-brand">support</a>
           </Link>
           .
         </p>
diff --git a/studio/components/interfaces/Database/Backups/BackupsList.tsx b/studio/components/interfaces/Database/Backups/BackupsList.tsx
index fd379d00293..4bf28b80dee 100644
--- a/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -36,6 +36,7 @@ const BackupsList = () => {
         primaryText="Free Plan does not include project backups."
         projectRef={projectRef}
         secondaryText="Upgrade to the Pro plan for up to 7 days of scheduled backups."
+        addon="pitr"
       />
     )
   }
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
index 9a1e23206e7..cdb28c620c3 100644
--- a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -67,7 +67,7 @@ const PITRNotice = ({}) => {
           <p className="text-sm text-scale-1100">
             Database changes are logged every <span className="text-scale-1200">2 minutes</span>,
             with a total recovery period of up to{' '}
-            <span className="text-brand-900">{retentionPeriod} days</span>.
+            <span className="text-brand">{retentionPeriod} days</span>.
           </p>
         </div>
       </div>
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx
index 93fd29b5a17..a6195189189 100644
--- a/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRStatus.tsx
@@ -1,22 +1,25 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
 import dayjs from 'dayjs'
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 import { Button, IconAlertCircle } from 'ui'
-import * as Tooltip from '@radix-ui/react-tooltip'
 
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { FormPanel } from 'components/ui/Forms'
 import { useCheckPermissions, useStore } from 'hooks'
 import { Timezone } from './PITR.types'
-import { FormPanel } from 'components/ui/Forms'
 import TimezoneSelection from './TimezoneSelection'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-interface Props {
+interface PITRStatusProps {
   selectedTimezone: Timezone
   onUpdateTimezone: (timezone: Timezone) => void
   onSetConfiguration: () => void
 }
 
-const PITRStatus: FC<Props> = ({ selectedTimezone, onUpdateTimezone, onSetConfiguration }) => {
+const PITRStatus = ({
+  selectedTimezone,
+  onUpdateTimezone,
+  onSetConfiguration,
+}: PITRStatusProps) => {
   const { backups } = useStore()
   const { earliestPhysicalBackupDateUnix, latestPhysicalBackupDateUnix } =
     backups?.configuration?.physicalBackupData ?? {}
diff --git a/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx b/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx
index 90b2b7e6032..2d8466f0ef0 100644
--- a/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/TimeInput.tsx
@@ -1,7 +1,7 @@
-import dayjs from 'dayjs'
-import { isNaN } from 'lodash'
-import { ChangeEvent, FC, useEffect, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import dayjs from 'dayjs'
+import { isNaN, noop } from 'lodash'
+import { ChangeEvent, useEffect, useState } from 'react'
 import { IconClock } from 'ui'
 
 import { Time } from './PITR.types'
@@ -15,14 +15,14 @@ import { formatNumberToTwoDigits, formatTimeToTimeString } from './PITR.utils'
 
 // [Joshen] Potential extension, give option to toggle 24 hours or AM/PM
 
-interface Props {
+interface TimeInputProps {
   defaultTime?: Time
   minimumTime?: Time
   maximumTime?: Time
   onChange?: (time: Time) => void
 }
 
-const TimeInput: FC<Props> = ({ defaultTime, minimumTime, maximumTime, onChange = () => {} }) => {
+const TimeInput = ({ defaultTime, minimumTime, maximumTime, onChange = noop }: TimeInputProps) => {
   const [isFocused, setIsFocused] = useState(false)
   const [error, setError] = useState<string>()
   const [time, setTime] = useState<Time>(defaultTime || { h: 0, m: 0, s: 0 })
diff --git a/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx b/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
index 3a1254f7f99..a5be77082e2 100644
--- a/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/TimezoneSelection.tsx
@@ -1,21 +1,21 @@
-import { FC, useState, FormEvent } from 'react'
-import { Listbox, IconSearch, IconGlobe } from 'ui'
+import { FormEvent, useState } from 'react'
+import { IconGlobe, IconSearch, Listbox } from 'ui'
 
 import { ALL_TIMEZONES } from './PITR.constants'
 
-interface Props {
+interface TimezoneSelectionProps {
   hideLabel?: boolean
   dropdownWidth?: string
   selectedTimezone: any
   onSelectTimezone: (timezone: any) => void
 }
 
-const TimezoneSelection: FC<Props> = ({
+const TimezoneSelection = ({
   hideLabel,
   dropdownWidth,
   selectedTimezone,
   onSelectTimezone,
-}) => {
+}: TimezoneSelectionProps) => {
   const [searchString, setSearchString] = useState<string>('')
 
   const timezoneOptions =
diff --git a/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index 9f569536579..bd1cfb234ba 100644
--- a/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -1,17 +1,17 @@
-import { FC, useEffect, useState } from 'react'
-import { Button, Input, Form, Modal, Listbox, IconPlus, IconDatabase } from 'ui'
 import type { PostgresExtension, PostgresSchema } from '@supabase/postgres-meta'
+import { useEffect, useState } from 'react'
+import { Button, Form, IconDatabase, IconPlus, Input, Listbox, Modal } from 'ui'
 
-import { useStore } from 'hooks'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useStore } from 'hooks'
 
-interface Props {
+interface EnableExtensionModalProps {
   visible: boolean
   extension: PostgresExtension
   onCancel: () => void
 }
 
-const EnableExtensionModal: FC<Props> = ({ visible, extension, onCancel }) => {
+const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionModalProps) => {
   const { ui, meta } = useStore()
   const [defaultSchema, setDefaultSchema] = useState()
   const [fetchingSchemaInfo, setFetchingSchemaInfo] = useState(false)
diff --git a/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx b/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
index 0dacb0b2358..98655676d3c 100644
--- a/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
+++ b/studio/components/interfaces/Database/Extensions/ExtensionCard.tsx
@@ -1,18 +1,18 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Badge, IconLoader, Toggle } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Badge, IconLoader, Toggle } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
-import EnableExtensionModal from './EnableExtensionModal'
+import { useCheckPermissions, useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
+import EnableExtensionModal from './EnableExtensionModal'
 
-interface Props {
+interface ExtensionCardProps {
   extension: any
 }
 
-const ExtensionCard: FC<Props> = ({ extension }) => {
+const ExtensionCard = ({ extension }: ExtensionCardProps) => {
   const { ui, meta } = useStore()
 
   const isOn = extension.installed_version !== null
diff --git a/studio/components/interfaces/Database/Extensions/Extensions.tsx b/studio/components/interfaces/Database/Extensions/Extensions.tsx
index c6d771b111d..5a958585e20 100644
--- a/studio/components/interfaces/Database/Extensions/Extensions.tsx
+++ b/studio/components/interfaces/Database/Extensions/Extensions.tsx
@@ -1,20 +1,18 @@
-import { FC, useEffect, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { partition, isNull } from 'lodash'
-import { Input, IconSearch, IconAlertCircle, Button, IconBookOpen } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { isNull, partition } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { Button, IconAlertCircle, IconBookOpen, IconSearch, Input } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
+import InformationBox from 'components/ui/InformationBox'
+import NoSearchResults from 'components/ui/NoSearchResults'
+import { useCheckPermissions, useStore } from 'hooks'
 import ExtensionCard from './ExtensionCard'
 import { HIDDEN_EXTENSIONS } from './Extensions.constants'
-import NoSearchResults from 'components/ui/NoSearchResults'
-import InformationBox from 'components/ui/InformationBox'
-import Link from 'next/link'
 
-interface Props {}
-
-const Extensions: FC<Props> = ({}) => {
+const Extensions = () => {
   const { meta } = useStore()
   const { filter } = useParams()
   const [filterString, setFilterString] = useState<string>('')
diff --git a/studio/components/interfaces/Database/Functions/CreateFunction.tsx b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
index cc087fe23ca..048d0cbd75d 100644
--- a/studio/components/interfaces/Database/Functions/CreateFunction.tsx
+++ b/studio/components/interfaces/Database/Functions/CreateFunction.tsx
@@ -1,18 +1,18 @@
-import { FC, useEffect, useContext, createContext, FormEvent, useState } from 'react'
-import { isEmpty, mapValues, has, filter, keyBy, isUndefined, partition, isNull } from 'lodash'
-import { observer, useLocalObservable } from 'mobx-react-lite'
-import { Button, Input, SidePanel, IconTrash, Radio, IconPlus, Toggle, Modal, Listbox } from 'ui'
-import { Dictionary } from 'components/grid'
+import { filter, has, isEmpty, isNull, isUndefined, keyBy, mapValues, partition } from 'lodash'
 import { makeAutoObservable } from 'mobx'
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import { FormEvent, createContext, useContext, useEffect, useState } from 'react'
+import { Button, IconPlus, IconTrash, Input, Listbox, Modal, Radio, SidePanel, Toggle } from 'ui'
 
-import { useStore } from 'hooks'
-import Panel from 'components/ui/Panel'
-import SqlEditor from 'components/ui/SqlEditor'
+import { Dictionary } from 'components/grid'
+import { Function } from 'components/interfaces/Functions/Functions.types'
 import { POSTGRES_DATA_TYPES } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
 import ConfirmationModal from 'components/ui/ConfirmationModal'
+import Panel from 'components/ui/Panel'
+import SqlEditor from 'components/ui/SqlEditor'
+import { useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
 import { SupaResponse } from 'types'
-import { Function } from 'components/interfaces/Functions/Functions.types'
 
 // [Refactor] Remove local state, just use the Form component
 
@@ -287,13 +287,13 @@ function hasWhitespace(value: string) {
 
 const CreateFunctionContext = createContext<ICreateFunctionStore | null>(null)
 
-type CreateFunctionProps = {
+interface CreateFunctionProps {
   func: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible }) => {
+const CreateFunction = ({ func, visible, setVisible }: CreateFunctionProps) => {
   const { ui, meta } = useStore()
   const _localState = useLocalObservable(() => new CreateFunctionStore())
   _localState.meta = meta as any
@@ -469,7 +469,7 @@ const CreateFunction: FC<CreateFunctionProps> = ({ func, visible, setVisible })
 
 export default observer(CreateFunction)
 
-const InputName: FC = observer(({}) => {
+const InputName = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
   return (
     <Input
@@ -491,11 +491,11 @@ const InputName: FC = observer(({}) => {
   )
 })
 
-type InputMultiArgumentsProps = {
+interface InputMultiArgumentsProps {
   readonly?: boolean
 }
 
-const InputMultiArguments: FC<InputMultiArgumentsProps> = observer(({ readonly }) => {
+const InputMultiArguments = observer(({ readonly }: InputMultiArgumentsProps) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onAddArgument() {
@@ -542,14 +542,14 @@ const InputMultiArguments: FC<InputMultiArgumentsProps> = observer(({ readonly }
   )
 })
 
-type InputArgumentProps = {
+interface InputArgumentProps {
   idx: number
   name: string
   type: string
   error?: string
   readonly?: boolean
 }
-const InputArgument: FC<InputArgumentProps> = observer(({ idx, name, type, error, readonly }) => {
+const InputArgument = observer(({ idx, name, type, error, readonly }: InputArgumentProps) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onNameChange(e: FormEvent<HTMLInputElement>) {
@@ -615,7 +615,7 @@ const InputArgument: FC<InputArgumentProps> = observer(({ idx, name, type, error
   )
 })
 
-const InputMultiConfigParams: FC = observer(({}) => {
+const InputMultiConfigParams = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onAddArgument() {
@@ -656,13 +656,13 @@ const InputMultiConfigParams: FC = observer(({}) => {
   )
 })
 
-type InputConfigParamProps = {
+interface InputConfigParamProps {
   idx: number
   name: string
   value: string
   error?: { name?: string; value?: string }
 }
-const InputConfigParam: FC<InputConfigParamProps> = observer(({ idx, name, value, error }) => {
+const InputConfigParam = observer(({ idx, name, value, error }: InputConfigParamProps) => {
   const _localState = useContext(CreateFunctionContext)
 
   function onNameChange(e: FormEvent<HTMLInputElement>) {
@@ -718,7 +718,7 @@ const InputConfigParam: FC<InputConfigParamProps> = observer(({ idx, name, value
   )
 })
 
-const InputDefinition: FC = observer(({}) => {
+const InputDefinition = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
   return (
     <div className="space-y-4">
@@ -749,7 +749,7 @@ const InputDefinition: FC = observer(({}) => {
   )
 })
 
-const SelectSchema: FC = observer(({}) => {
+const SelectSchema = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
@@ -772,7 +772,7 @@ const SelectSchema: FC = observer(({}) => {
   )
 })
 
-const SelectLanguage: FC = observer(({}) => {
+const SelectLanguage = observer(({}) => {
   const { meta } = useStore()
   const _localState = useContext(CreateFunctionContext)
 
@@ -810,7 +810,7 @@ const SelectLanguage: FC = observer(({}) => {
   )
 })
 
-const SelectReturnType: FC = observer(({}) => {
+const SelectReturnType = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
@@ -843,7 +843,7 @@ const SelectReturnType: FC = observer(({}) => {
   )
 })
 
-const SelectBehavior: FC = observer(({}) => {
+const SelectBehavior = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
@@ -868,7 +868,7 @@ const SelectBehavior: FC = observer(({}) => {
   )
 })
 
-const RadioSecurity: FC = observer(({}) => {
+const RadioSecurity = observer(({}) => {
   const _localState = useContext(CreateFunctionContext)
 
   return (
diff --git a/studio/components/interfaces/Database/Functions/DeleteFunction.tsx b/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
index e24850821c2..4e31a8d8e54 100644
--- a/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
+++ b/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
@@ -1,16 +1,17 @@
-import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
+import { useState } from 'react'
+
 import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import { useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
 
-type DeleteFunctionProps = {
+interface DeleteFunctionProps {
   func?: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const DeleteFunction: FC<DeleteFunctionProps> = ({ func, visible, setVisible }) => {
+const DeleteFunction = ({ func, visible, setVisible }: DeleteFunctionProps) => {
   const { ui, meta } = useStore()
   const [loading, setLoading] = useState(false)
   const { id, name, schema } = func ?? {}
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
index 84da9135f79..b3438d353eb 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
@@ -3,26 +3,25 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { includes, noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { FC } from 'react'
+import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'ui'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
 import { useCheckPermissions, useStore } from 'hooks'
-import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'ui'
 
-interface Props {
+interface FunctionListProps {
   schema: string
   filterString: string
   editFunction: (fn: any) => void
   deleteFunction: (fn: any) => void
 }
 
-const FunctionList: FC<Props> = ({
+const FunctionList = ({
   schema,
   filterString,
   editFunction = noop,
   deleteFunction = noop,
-}) => {
+}: FunctionListProps) => {
   const { project: selectedProject } = useProjectContext()
   const router = useRouter()
   const { meta } = useStore()
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
index 14432ade492..92a90ea0d6e 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -1,27 +1,26 @@
-import { FC, useState } from 'react'
-import { uniqBy, map as lodashMap, includes } from 'lodash'
-import { Button, IconSearch, IconLoader, Input } from 'ui'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PostgresFunction } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { includes, map as lodashMap, noop, uniqBy } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconLoader, IconSearch, Input } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
-import AlphaPreview from 'components/to-be-cleaned/AlphaPreview'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import { useCheckPermissions, useStore } from 'hooks'
 import SchemaTable from './SchemaTable'
 
-interface Props {
+interface FunctionsListProps {
   createFunction: () => void
   editFunction: (fn: PostgresFunction) => void
   deleteFunction: (fn: PostgresFunction) => void
 }
 
-const FunctionsList: FC<Props> = ({
-  createFunction = () => {},
-  editFunction = () => {},
-  deleteFunction = () => {},
-}) => {
+const FunctionsList = ({
+  createFunction = noop,
+  editFunction = noop,
+  deleteFunction = noop,
+}: FunctionsListProps) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/SchemaTable.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/SchemaTable.tsx
index aac4af5bda6..242f14ac128 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/SchemaTable.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/SchemaTable.tsx
@@ -1,22 +1,22 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
 import FunctionList from './FunctionList'
 
-interface Props {
+interface SchemaTableProps {
   schema: string
   filterString: string
   editFunction: (fn: any) => void
   deleteFunction: (fn: any) => void
 }
 
-const SchemaTable: FC<Props> = ({
+const SchemaTable = ({
   schema,
   filterString,
-  editFunction = () => {},
-  deleteFunction = () => {},
-}) => {
+  editFunction = noop,
+  deleteFunction = noop,
+}: SchemaTableProps) => {
   return (
     <div key={schema} className="">
       <div className="sticky top-0 backdrop-blur backdrop-filter">
diff --git a/studio/components/interfaces/Database/Hooks/HooksList/SchemaTable.tsx b/studio/components/interfaces/Database/Hooks/HooksList/SchemaTable.tsx
index 7175735cc79..35bc890a3f6 100644
--- a/studio/components/interfaces/Database/Hooks/HooksList/SchemaTable.tsx
+++ b/studio/components/interfaces/Database/Hooks/HooksList/SchemaTable.tsx
@@ -1,22 +1,22 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
 import HookList from './HookList'
 
-interface Props {
+interface SchemaTableProps {
   schema: string
   filterString: string
   editHook: (hook: any) => void
   deleteHook: (hook: any) => void
 }
 
-const SchemaTable: FC<Props> = ({
+const SchemaTable = ({
   schema,
   filterString,
-  editHook = () => {},
-  deleteHook = () => {},
-}) => {
+  editHook = noop,
+  deleteHook = noop,
+}: SchemaTableProps) => {
   return (
     <div key={schema} className="">
       <div className="sticky top-0 backdrop-blur backdrop-filter">
diff --git a/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx b/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
index b4f2153339c..ab1d31a5941 100644
--- a/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
+++ b/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
@@ -16,7 +16,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> link --project-ref {ref}
+            <span className="text-brand-600">supabase</span> link --project-ref {ref}
           </>
         )
       },
@@ -27,7 +27,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> migration new new-migration
+            <span className="text-brand-600">supabase</span> migration new new-migration
           </>
         )
       },
@@ -38,7 +38,7 @@ const MigrationsEmptyState = () => {
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> db push
+            <span className="text-brand-600">supabase</span> db push
           </>
         )
       },
diff --git a/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/studio/components/interfaces/Database/Publications/PublicationsList.tsx
index 385235c3f96..c3b32829d41 100644
--- a/studio/components/interfaces/Database/Publications/PublicationsList.tsx
+++ b/studio/components/interfaces/Database/Publications/PublicationsList.tsx
@@ -1,19 +1,20 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Button, Input, Toggle, IconSearch, IconAlertCircle } from 'ui'
+import { noop } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconAlertCircle, IconSearch, Input, Toggle } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 import Table from 'components/to-be-cleaned/Table'
-import NoSearchResults from 'components/ui/NoSearchResults'
 import InformationBox from 'components/ui/InformationBox'
+import NoSearchResults from 'components/ui/NoSearchResults'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface PublicationsListProps {
   onSelectPublication: (id: number) => void
 }
 
-const PublicationsList: FC<Props> = ({ onSelectPublication = () => {} }) => {
+const PublicationsList = ({ onSelectPublication = noop }: PublicationsListProps) => {
   const { ui, meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 
diff --git a/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx b/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
index 1a0c0ef867c..5d5013e7dab 100644
--- a/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
+++ b/studio/components/interfaces/Database/Publications/PublicationsTableItem.tsx
@@ -1,18 +1,18 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Badge, Toggle } from 'ui'
 import type { PostgresPublication, PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Badge, Toggle } from 'ui'
 
-import { useCheckPermissions, useStore } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface PublicationsTableItemProps {
   table: PostgresTable
   selectedPublication: PostgresPublication
 }
 
-const PublicationsTableItem: FC<Props> = ({ table, selectedPublication }) => {
+const PublicationsTableItem = ({ table, selectedPublication }: PublicationsTableItemProps) => {
   const { ui, meta } = useStore()
   const enabledForAllTables = selectedPublication.tables == null
 
diff --git a/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
index a24f038b8a9..17e274c821e 100644
--- a/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
+++ b/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
@@ -1,21 +1,21 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Button, Input, IconChevronLeft, IconSearch, IconAlertCircle } from 'ui'
 import type { PostgresPublication } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconAlertCircle, IconChevronLeft, IconSearch, Input } from 'ui'
 
+import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
+import Table from 'components/to-be-cleaned/Table'
+import InformationBox from 'components/ui/InformationBox'
 import { useCheckPermissions, useStore } from 'hooks'
 import PublicationsTableItem from './PublicationsTableItem'
-import Table from 'components/to-be-cleaned/Table'
-import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
-import InformationBox from 'components/ui/InformationBox'
 
-interface Props {
+interface PublicationsTablesProps {
   selectedPublication: PostgresPublication
   onSelectBack: () => void
 }
 
-const PublicationsTables: FC<Props> = ({ selectedPublication, onSelectBack }) => {
+const PublicationsTables = ({ selectedPublication, onSelectBack }: PublicationsTablesProps) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
 
diff --git a/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx b/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
index c313ec041f5..859ccac2cfb 100644
--- a/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
+++ b/studio/components/interfaces/Database/Roles/CreateRolePanel.tsx
@@ -1,15 +1,17 @@
-import { FC, useRef, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Form, IconHelpCircle, Input, SidePanel, Button, Toggle } from 'ui'
-import { ROLE_PERMISSIONS } from './Roles.constants'
-import { FormSection, FormSectionLabel, FormSectionContent } from 'components/ui/Forms'
+import { useRef, useState } from 'react'
+import { Button, Form, IconHelpCircle, Input, SidePanel, Toggle } from 'ui'
+
+import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
 import { useStore } from 'hooks'
-interface Props {
+import { ROLE_PERMISSIONS } from './Roles.constants'
+
+interface CreateRolePanelProps {
   visible: boolean
   onClose: () => void
 }
 
-const CreateRolePanel: FC<Props> = ({ visible, onClose }) => {
+const CreateRolePanel = ({ visible, onClose }: CreateRolePanelProps) => {
   const formId = 'create-new-role'
   const submitRef: any = useRef()
   const { ui, meta } = useStore()
diff --git a/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx b/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx
index c4388e74ad0..e72b7bd5bc1 100644
--- a/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx
+++ b/studio/components/interfaces/Database/Roles/DeleteRoleModal.tsx
@@ -1,15 +1,16 @@
-import { FC, useState } from 'react'
-import { Modal } from 'ui'
 import { PostgresRole } from '@supabase/postgres-meta'
+import { useState } from 'react'
+import { Modal } from 'ui'
+
 import { useStore } from 'hooks'
 
-interface Props {
+interface DeleteRoleModalProps {
   role: PostgresRole
   visible: boolean
   onClose: () => void
 }
 
-const DeleteRoleModal: FC<Props> = ({ role, visible, onClose }) => {
+const DeleteRoleModal = ({ role, visible, onClose }: DeleteRoleModalProps) => {
   const { ui, meta } = useStore()
   const [isDeleting, setIsDeleting] = useState(false)
 
diff --git a/studio/components/interfaces/Database/Roles/RoleRow.tsx b/studio/components/interfaces/Database/Roles/RoleRow.tsx
index cd2de5f63be..e61b44c5f36 100644
--- a/studio/components/interfaces/Database/Roles/RoleRow.tsx
+++ b/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -1,28 +1,28 @@
-import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PostgresRole } from '@supabase/postgres-meta'
+import { useState } from 'react'
 import {
   Button,
-  Form,
-  Dropdown,
-  IconChevronUp,
-  Toggle,
   Collapsible,
-  IconTrash,
+  Dropdown,
+  Form,
+  IconChevronUp,
   IconHelpCircle,
   IconMoreVertical,
+  IconTrash,
+  Toggle,
 } from 'ui'
 
 import { useStore } from 'hooks'
 import { ROLE_PERMISSIONS } from './Roles.constants'
 
-interface Props {
+interface RoleRowProps {
   role: PostgresRole
   disabled?: boolean
   onSelectDelete: (role: PostgresRole) => void
 }
 
-const RoleRow: FC<Props> = ({ role, disabled = false, onSelectDelete }) => {
+const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps) => {
   const { ui, meta } = useStore()
   const [isExpanded, setIsExpanded] = useState(false)
 
@@ -114,8 +114,8 @@ const RoleRow: FC<Props> = ({ role, disabled = false, onSelectDelete }) => {
                   {role.active_connections > 0 && (
                     <div className="relative h-2 w-2">
                       <span className="flex h-2 w-2">
-                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-900 opacity-75"></span>
-                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-900 opacity-75"></span>
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand opacity-75"></span>
+                        <span className="relative inline-flex h-2 w-2 rounded-full bg-brand opacity-75"></span>
                       </span>
                     </div>
                   )}
diff --git a/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 4a9dfc3ac67..cd5467b1fde 100644
--- a/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -205,7 +205,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
     <>
       {data.isForeign ? (
         <div className="rounded-lg overflow-hidden">
-          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand-900 text-gray-300">
+          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand text-gray-300">
             {data.name}
             {targetPosition && (
               <Handle
@@ -219,7 +219,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
         </div>
       ) : (
         <div className="rounded-lg overflow-hidden" style={{ width: NODE_WIDTH / 2 }}>
-          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand-900 text-gray-300">
+          <header className="text-[0.5rem] leading-5 font-bold px-2 text-center bg-brand text-gray-300">
             {data.name}
           </header>
 
@@ -230,7 +230,7 @@ function TableNode({ data, targetPosition, sourcePosition }: NodeProps<TableNode
             >
               <span
                 className={clsx(
-                  column.isPrimary && 'border-l-2 border-l-brand-900 pl-[6px] pr-2',
+                  column.isPrimary && 'border-l-2 border-l-brand pl-[6px] pr-2',
                   'pl-2 text-ellipsis overflow-hidden whitespace-nowrap'
                 )}
               >
diff --git a/studio/components/interfaces/Database/Tables/ColumnList.tsx b/studio/components/interfaces/Database/Tables/ColumnList.tsx
index 03b9a1ff1c4..63f0c15a2ce 100644
--- a/studio/components/interfaces/Database/Tables/ColumnList.tsx
+++ b/studio/components/interfaces/Database/Tables/ColumnList.tsx
@@ -1,15 +1,16 @@
-import { FC, useState } from 'react'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Input, Button, IconSearch, IconPlus, IconChevronLeft, IconEdit3, IconTrash } from 'ui'
 import type { PostgresTable } from '@supabase/postgres-meta'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { Button, IconChevronLeft, IconEdit3, IconPlus, IconSearch, IconTrash, Input } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
-import Table from 'components/to-be-cleaned/Table'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
+import Table from 'components/to-be-cleaned/Table'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface ColumnListProps {
   selectedTable: PostgresTable
   onSelectBack: () => void
   onAddColumn: () => void
@@ -17,13 +18,13 @@ interface Props {
   onDeleteColumn: (column: any) => void
 }
 
-const ColumnList: FC<Props> = ({
+const ColumnList = ({
   selectedTable,
-  onSelectBack = () => {},
-  onAddColumn = () => {},
-  onEditColumn = () => {},
-  onDeleteColumn = () => {},
-}) => {
+  onSelectBack = noop,
+  onAddColumn = noop,
+  onEditColumn = noop,
+  onDeleteColumn = noop,
+}: ColumnListProps) => {
   const { meta } = useStore()
   const [filterString, setFilterString] = useState<string>('')
   const columns =
diff --git a/studio/components/interfaces/Database/Tables/TableList.tsx b/studio/components/interfaces/Database/Tables/TableList.tsx
index 075c2873ecd..25afa0a600d 100644
--- a/studio/components/interfaces/Database/Tables/TableList.tsx
+++ b/studio/components/interfaces/Database/Tables/TableList.tsx
@@ -1,28 +1,28 @@
-import { FC, useState } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import type { PostgresSchema, PostgresTable } from '@supabase/postgres-meta'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { noop, partition } from 'lodash'
 import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
 import {
   Button,
+  IconCheck,
+  IconColumns,
+  IconEdit3,
+  IconLock,
   IconPlus,
-  Input,
   IconSearch,
   IconTrash,
-  IconEdit3,
-  IconColumns,
+  Input,
   Listbox,
-  IconLock,
-  IconCheck,
 } from 'ui'
-import { partition } from 'lodash'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { useStore, useCheckPermissions } from 'hooks'
-import Table from 'components/to-be-cleaned/Table'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
-import type { PostgresTable, PostgresSchema } from '@supabase/postgres-meta'
+import Table from 'components/to-be-cleaned/Table'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface TableListProps {
   selectedSchema: string
   onSelectSchema: (schema: string) => void
   onAddTable: () => void
@@ -31,14 +31,14 @@ interface Props {
   onOpenTable: (table: any) => void
 }
 
-const TableList: FC<Props> = ({
+const TableList = ({
   selectedSchema,
-  onSelectSchema = () => {},
-  onAddTable = () => {},
-  onEditTable = () => {},
-  onDeleteTable = () => {},
-  onOpenTable = () => {},
-}) => {
+  onSelectSchema = noop,
+  onAddTable = noop,
+  onEditTable = noop,
+  onDeleteTable = noop,
+  onOpenTable = noop,
+}: TableListProps) => {
   const { meta } = useStore()
   const { isLoading } = meta.tables
   const [filterString, setFilterString] = useState<string>('')
diff --git a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
index a360ffce43d..5a926b5f487 100644
--- a/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
+++ b/studio/components/interfaces/Database/Triggers/CreateTrigger.tsx
@@ -1,29 +1,29 @@
-import { FC, useEffect, createContext, useContext, useState } from 'react'
+import { Dictionary } from 'components/grid'
+import { has, isEmpty, mapValues, union, without } from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'
-import { isEmpty, mapValues, has, without, union } from 'lodash'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useState } from 'react'
+import SVG from 'react-inlinesvg'
 import {
-  Input,
-  SidePanel,
-  Checkbox,
-  Listbox,
-  IconPlayCircle,
-  IconPauseCircle,
-  IconTerminal,
   Badge,
   Button,
+  Checkbox,
+  IconPauseCircle,
+  IconPlayCircle,
+  IconTerminal,
+  Input,
+  Listbox,
   Modal,
+  SidePanel,
 } from 'ui'
-import { Dictionary } from 'components/grid'
-import { useRouter } from 'next/router'
-import SVG from 'react-inlinesvg'
 
-import ChooseFunctionForm from './ChooseFunctionForm'
+import ConfirmationModal from 'components/ui/ConfirmationModal'
 import FormEmptyBox from 'components/ui/FormBoxEmpty'
 import NoTableState from 'components/ui/States/NoTableState'
 import { useStore } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
-import ConfirmationModal from 'components/ui/ConfirmationModal'
+import ChooseFunctionForm from './ChooseFunctionForm'
 
 class CreateTriggerFormState {
   id: number | undefined
@@ -249,13 +249,13 @@ function hasWhitespace(value: string) {
 
 const CreateTriggerContext = createContext<ICreateTriggerStore | null>(null)
 
-type CreateTriggerProps = {
+interface CreateTriggerProps {
   trigger?: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible }) => {
+const CreateTrigger = ({ trigger, visible, setVisible }: CreateTriggerProps) => {
   const { ui, meta } = useStore()
   const [isClosingPanel, setIsClosingPanel] = useState(false)
   const _localState = useLocalObservable(() => new CreateTriggerStore())
@@ -413,7 +413,7 @@ const CreateTrigger: FC<CreateTriggerProps> = ({ trigger, visible, setVisible })
 
 export default observer(CreateTrigger)
 
-const InputName: FC = observer(({}) => {
+const InputName = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Input
@@ -435,7 +435,7 @@ const InputName: FC = observer(({}) => {
   )
 })
 
-const SelectEnabledMode: FC = observer(({}) => {
+const SelectEnabledMode = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Listbox
@@ -508,7 +508,7 @@ const SelectEnabledMode: FC = observer(({}) => {
   )
 })
 
-const SelectOrientation: FC = observer(({}) => {
+const SelectOrientation = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Listbox
@@ -537,7 +537,7 @@ const SelectOrientation: FC = observer(({}) => {
   )
 })
 
-const ListboxTable: FC = observer(({}) => {
+const ListboxTable = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
 
   return (
@@ -597,7 +597,7 @@ const ListboxTable: FC = observer(({}) => {
   )
 })
 
-const CheckboxEvents: FC = observer(({}) => {
+const CheckboxEvents = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     // @ts-ignore
@@ -643,7 +643,7 @@ const CheckboxEvents: FC = observer(({}) => {
   )
 })
 
-const ListboxActivation: FC = observer(({}) => {
+const ListboxActivation = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <Listbox
@@ -699,7 +699,7 @@ const ListboxActivation: FC = observer(({}) => {
   )
 })
 
-const FunctionForm: FC = observer(({}) => {
+const FunctionForm = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
 
   return (
@@ -718,7 +718,7 @@ const FunctionForm: FC = observer(({}) => {
   )
 })
 
-const FunctionEmpty: FC = observer(({}) => {
+const FunctionEmpty = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
   return (
     <button
@@ -742,7 +742,7 @@ const FunctionEmpty: FC = observer(({}) => {
   )
 })
 
-const FunctionWithArguments: FC = observer(({}) => {
+const FunctionWithArguments = observer(({}) => {
   const _localState = useContext(CreateTriggerContext)
 
   return (
diff --git a/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx b/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
index b58b6ce089b..259398425d6 100644
--- a/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
+++ b/studio/components/interfaces/Database/Triggers/DeleteTrigger.tsx
@@ -1,16 +1,17 @@
-import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
-import { useStore } from 'hooks'
+import { useState } from 'react'
+
 import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import { useStore } from 'hooks'
 import { isResponseOk } from 'lib/common/fetch'
 
-type DeleteTriggerProps = {
+interface DeleteTriggerProps {
   trigger?: any
   visible: boolean
   setVisible: (value: boolean) => void
-} & any
+}
 
-const DeleteTrigger: FC<DeleteTriggerProps> = ({ store, trigger, visible, setVisible }) => {
+const DeleteTrigger = ({ trigger, visible, setVisible }: DeleteTriggerProps) => {
   const { ui, meta } = useStore()
   const [loading, setLoading] = useState(false)
   const { id, name, schema } = trigger ?? {}
diff --git a/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx b/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx
index b84e7897c68..f13f1868c05 100644
--- a/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx
+++ b/studio/components/interfaces/Database/Triggers/TriggersList/SchemaTable.tsx
@@ -1,17 +1,16 @@
-import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
 import TriggerList from './TriggerList'
 
-interface Props {
+interface SchemaTableProps {
   filterString: string
   schema: string
   editTrigger: (trigger: any) => void
   deleteTrigger: (trigger: any) => void
 }
 
-const SchemaTable: FC<Props> = ({ filterString, schema, editTrigger, deleteTrigger }) => {
+const SchemaTable = ({ filterString, schema, editTrigger, deleteTrigger }: SchemaTableProps) => {
   return (
     <div key={schema} className="">
       <div className="sticky top-0 backdrop-blur backdrop-filter">
diff --git a/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx b/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
index 51212f9b822..5b9b220d3fc 100644
--- a/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
+++ b/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
@@ -1,21 +1,20 @@
-import { FC } from 'react'
-import { includes } from 'lodash'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from 'ui'
+import { includes } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { Badge, Button, Dropdown, IconEdit3, IconMoreVertical, IconTrash } from 'ui'
 
-import { useStore, useCheckPermissions } from 'hooks'
 import Table from 'components/to-be-cleaned/Table'
+import { useCheckPermissions, useStore } from 'hooks'
 
-interface Props {
+interface TriggerListProps {
   filterString: string
   schema: string
   editTrigger: (trigger: any) => void
   deleteTrigger: (trigger: any) => void
 }
 
-const TriggerList: FC<Props> = ({ filterString, schema, editTrigger, deleteTrigger }) => {
+const TriggerList = ({ filterString, schema, editTrigger, deleteTrigger }: TriggerListProps) => {
   const { meta } = useStore()
   const triggers = meta.triggers.list()
   const filteredTriggers = triggers.filter((x: any) =>
diff --git a/studio/components/interfaces/Database/Wrappers/InputField.tsx b/studio/components/interfaces/Database/Wrappers/InputField.tsx
index 193b59c6d18..3eec5cde850 100644
--- a/studio/components/interfaces/Database/Wrappers/InputField.tsx
+++ b/studio/components/interfaces/Database/Wrappers/InputField.tsx
@@ -1,15 +1,16 @@
 import Link from 'next/link'
-import { FC, useState } from 'react'
-import { Button, Input, IconHelpCircle, IconEye, IconEyeOff, IconLoader } from 'ui'
+import { useState } from 'react'
+import { Button, IconEye, IconEyeOff, IconHelpCircle, IconLoader, Input } from 'ui'
+
 import { ServerOption } from './Wrappers.types'
 
-interface Props {
+interface InputFieldProps {
   option: ServerOption
   loading: boolean
   error: any
 }
 
-const InputField: FC<Props> = ({ option, loading, error }) => {
+const InputField = ({ option, loading, error }: InputFieldProps) => {
   const [showHidden, setShowHidden] = useState(!option.hidden)
   if (option.isTextArea) {
     return (
diff --git a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
index 42d4f0c4a1a..c25c1bc3397 100644
--- a/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrapperTableEditor.tsx
@@ -254,7 +254,7 @@ const TableForm = ({
                         key={column.name}
                         className={[
                           'px-2 py-1 rounded cursor-pointer transition',
-                          `${isSelected ? 'bg-brand-800' : 'bg-scale-500 hover:bg-scale-700'}`,
+                          `${isSelected ? 'bg-brand-300' : 'bg-scale-500 hover:bg-scale-700'}`,
                         ].join(' ')}
                         onClick={() => {
                           if (isSelected) {
diff --git a/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx b/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
index 7a74cdb78ec..2fc27512e7e 100644
--- a/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrappersDisabledState.tsx
@@ -107,7 +107,7 @@ const WrappersDisabledState = () => {
                 </div>
               </div>
               <div className="flex items-center space-x-2 my-1 ml-[1px]">
-                <Link href="https://supabase.com/docs/guides/database/extensions/wrappers">
+                <Link href="https://supabase.com/docs/guides/database/extensions/wrappers/overview">
                   <a target="_blank" rel="noreferrer">
                     <Button type="default" icon={<IconExternalLink />}>
                       About Wrappers
@@ -118,7 +118,7 @@ const WrappersDisabledState = () => {
             </div>
           ) : (
             <div className="flex items-center space-x-2">
-              <Link href="https://supabase.com/docs/guides/database/extensions/wrappers">
+              <Link href="https://supabase.com/docs/guides/database/extensions/wrappers/overview">
                 <a target="_blank" rel="noreferrer">
                   <Button type="default" icon={<IconExternalLink />}>
                     About Wrappers
diff --git a/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx b/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx
index 5fdab17e076..a44288c5a94 100644
--- a/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx
+++ b/studio/components/interfaces/Database/Wrappers/WrappersDropdown.tsx
@@ -1,21 +1,21 @@
-import Link from 'next/link'
-import Image from 'next/image'
-import { FC, Fragment } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Button, Dropdown, IconPlus } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Fragment } from 'react'
+import { Button, Dropdown, IconPlus } from 'ui'
 
-import { useCheckPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
+import { useCheckPermissions } from 'hooks'
 import { WRAPPERS } from './Wrappers.constants'
 
-interface Props {
+interface WrapperDropdownProps {
   buttonText?: string
   align?: 'center' | 'end'
 }
 
-const WrapperDropdown: FC<Props> = ({ buttonText = 'Add wrapper', align = 'end' }) => {
+const WrapperDropdown = ({ buttonText = 'Add wrapper', align = 'end' }: WrapperDropdownProps) => {
   const { ref } = useParams()
   const canManageWrappers = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'wrappers')
 
diff --git a/studio/components/interfaces/Docs/LangSelector.tsx b/studio/components/interfaces/Docs/LangSelector.tsx
index e9bf2158ef0..2d89f836c53 100644
--- a/studio/components/interfaces/Docs/LangSelector.tsx
+++ b/studio/components/interfaces/Docs/LangSelector.tsx
@@ -1,13 +1,12 @@
-import { FC } from 'react'
-import { Button, Dropdown, IconKey } from 'ui'
-import { useCheckPermissions } from 'hooks'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useCheckPermissions } from 'hooks'
+import { Button, Dropdown, IconKey } from 'ui'
 
 import { showApiKey } from 'components/interfaces/Docs/Docs.types'
 
 const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' }
 
-interface Props {
+interface LangSelectorProps {
   selectedLang: string
   setSelectedLang: (selectedLang: string) => void
   showApiKey: showApiKey
@@ -16,14 +15,14 @@ interface Props {
   autoApiService: any
 }
 
-const LangSelector: FC<Props> = ({
+const LangSelector = ({
   selectedLang,
   setSelectedLang,
   showApiKey,
   setShowApiKey,
   apiKey,
   autoApiService,
-}) => {
+}: LangSelectorProps) => {
   const canReadServiceKey = useCheckPermissions(
     PermissionAction.READ,
     'service_api_keys.service_role_key'
diff --git a/studio/components/interfaces/Functions/CommandRender.tsx b/studio/components/interfaces/Functions/CommandRender.tsx
index 6a3b83b2a86..c56be3351b5 100644
--- a/studio/components/interfaces/Functions/CommandRender.tsx
+++ b/studio/components/interfaces/Functions/CommandRender.tsx
@@ -38,7 +38,7 @@ const Command = ({ item }: any) => {
               }}
             >
               {isCopied ? (
-                <div className="text-brand-900">
+                <div className="text-brand">
                   <IconCheck size={14} strokeWidth={3} />
                 </div>
               ) : (
diff --git a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index a601e794816..3d984779e4e 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -181,9 +181,7 @@ const EdgeFunctionDetails = () => {
                         <div className="flex items-center space-x-2">
                           <p className="text-sm">
                             Import maps are{' '}
-                            <span
-                              className={clsx(hasImportMap ? 'text-brand-900' : 'text-amber-900')}
-                            >
+                            <span className={clsx(hasImportMap ? 'text-brand' : 'text-amber-900')}>
                               {hasImportMap ? 'used' : 'not used'}
                             </span>{' '}
                             for this function
diff --git a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
index bc2ae902432..e8ec2079990 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
@@ -10,7 +10,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions deploy{' '}
+            <span className="text-brand-600">supabase</span> functions deploy{' '}
             {selectedFunction?.slug}
           </>
         )
@@ -23,7 +23,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions delete{' '}
+            <span className="text-brand-600">supabase</span> functions delete{' '}
             {selectedFunction?.slug}
           </>
         )
@@ -39,7 +39,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets list
+            <span className="text-brand-600">supabase</span> secrets list
           </>
         )
       },
@@ -51,7 +51,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
+            <span className="text-brand-600">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
           </>
         )
       },
@@ -63,7 +63,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> secrets unset NAME1 NAME2
+            <span className="text-brand-600">supabase</span> secrets unset NAME1 NAME2
           </>
         )
       },
@@ -80,7 +80,7 @@ export const generateCLICommands = (
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">curl</span> -L -X POST '{functionUrl}' -H
+            <span className="text-brand-600">curl</span> -L -X POST '{functionUrl}' -H
             'Authorization: Bearer [YOUR ANON KEY]' {`--data '{"name":"Functions"}'`}
           </>
         )
diff --git a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index 4237781074c..946befc0a33 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -1,19 +1,19 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import dayjs from 'dayjs'
 import { useRouter } from 'next/router'
-import { FC, useState } from 'react'
+import { useState } from 'react'
+import { IconCheck, IconClipboard } from 'ui'
 
 import { useParams } from 'common/hooks'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
 import { EdgeFunctionsResponse } from 'data/edge-functions/edge-functions-query'
-import { IconCheck, IconClipboard } from 'ui'
 
-interface Props {
+interface EdgeFunctionsListItemProps {
   function: EdgeFunctionsResponse
 }
 
-const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
+const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) => {
   const router = useRouter()
   const { ref } = useParams()
   const [isCopied, setIsCopied] = useState(false)
@@ -21,7 +21,7 @@ const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
   const { project } = useProjectContext()
   // get the .co or .net TLD from the restUrl
   const restUrl = project?.restUrl
-  const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
+  const restUrlTld = restUrl !== undefined ? new URL(restUrl as string).hostname.split('.').pop() : 'co'
   const functionUrl = `https://${ref}.supabase.${restUrlTld}/functions/v1/${item.slug}`
 
   return (
@@ -55,7 +55,7 @@ const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
             }}
           >
             {isCopied ? (
-              <div className="text-brand-900">
+              <div className="text-brand">
                 <IconCheck size={14} strokeWidth={3} />
               </div>
             ) : (
diff --git a/studio/components/interfaces/Functions/TerminalInstructions.tsx b/studio/components/interfaces/Functions/TerminalInstructions.tsx
index 3862be68f51..87eecf571df 100644
--- a/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -1,19 +1,23 @@
-import CommandRender from 'components/interfaces/Functions/CommandRender'
-import { useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
-import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useParams } from 'common/hooks'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { FC, useState } from 'react'
+import { useState } from 'react'
 import { Button, IconBookOpen, IconCode, IconMaximize2, IconMinimize2, IconTerminal } from 'ui'
+
+import CommandRender from 'components/interfaces/Functions/CommandRender'
+import { useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
+import { useProjectApiQuery } from 'data/config/project-api-query'
 import { Commands } from './Functions.types'
 
-interface Props {
+interface TerminalInstructionsProps {
   closable?: boolean
   removeBorder?: boolean
 }
 
-const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = false }) => {
+const TerminalInstructions = ({
+  closable = false,
+  removeBorder = false,
+}: TerminalInstructionsProps) => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
   const [showInstructions, setShowInstructions] = useState(!closable)
@@ -39,7 +43,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions new hello-world
+            <span className="text-brand-600">supabase</span> functions new hello-world
           </>
         )
       },
@@ -51,7 +55,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">supabase</span> functions deploy hello-world
+            <span className="text-brand-600">supabase</span> functions deploy hello-world
             --project-ref {projectRef}
           </>
         )
@@ -66,7 +70,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false, removeBorder = fals
       jsx: () => {
         return (
           <>
-            <span className="text-brand-1100">curl</span> -L -X POST 'https://{functionsEndpoint}
+            <span className="text-brand-600">curl</span> -L -X POST 'https://{functionsEndpoint}
             /hello-world' -H 'Authorization: Bearer [YOUR ANON KEY]'{' '}
             {`--data '{"name":"Functions"}'`}
           </>
diff --git a/studio/components/interfaces/Home/ClientLibrary.tsx b/studio/components/interfaces/Home/ClientLibrary.tsx
index ff78b50643a..ddd8dea5ec4 100644
--- a/studio/components/interfaces/Home/ClientLibrary.tsx
+++ b/studio/components/interfaces/Home/ClientLibrary.tsx
@@ -1,8 +1,8 @@
-import { FC } from 'react'
-import { IconBookOpen, IconGitHub, Button, Badge } from 'ui'
+import { Badge, Button, IconBookOpen, IconGitHub } from 'ui'
+
 import { BASE_PATH } from 'lib/constants'
 
-interface Props {
+interface ClientLibraryProps {
   language: string
   officialSupport?: boolean
   docsUrl?: string
@@ -10,7 +10,13 @@ interface Props {
   altIconName?: string
 }
 
-const ClientLibrary: FC<Props> = ({ language, officialSupport, docsUrl, gitUrl, altIconName }) => {
+const ClientLibrary = ({
+  language,
+  officialSupport,
+  docsUrl,
+  gitUrl,
+  altIconName,
+}: ClientLibraryProps) => {
   return (
     <div className="flex items-start space-x-6">
       <img
diff --git a/studio/components/interfaces/Home/ExampleProject.tsx b/studio/components/interfaces/Home/ExampleProject.tsx
index 811897aafce..897e4f27d89 100644
--- a/studio/components/interfaces/Home/ExampleProject.tsx
+++ b/studio/components/interfaces/Home/ExampleProject.tsx
@@ -1,16 +1,16 @@
-import { FC } from 'react'
-import { IconChevronRight, useTheme } from 'ui'
 import Link from 'next/link'
+import { IconChevronRight, useTheme } from 'ui'
+
 import { BASE_PATH } from 'lib/constants'
 
-interface Props {
+interface ExampleProjectProps {
   framework: string
   title: string
   description: string
   url: string
 }
 
-const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
+const ExampleProject = ({ framework, title, description, url }: ExampleProjectProps) => {
   const { isDarkMode } = useTheme()
 
   return (
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index 815ac8cec05..c0847e3788d 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -139,7 +139,7 @@ const APIKeys = () => {
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
                   <Link href={`/project/${projectRef}/settings/api`}>
-                    <a className="transition text-brand-800 hover:text-brand-900">here</a>
+                    <a className="transition text-brand hover:text-brand-600">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>
diff --git a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
index 090b720fb29..608dc285f31 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -1,16 +1,13 @@
 import Link from 'next/link'
-import { FC } from 'react'
-import SVG from 'react-inlinesvg'
 import { useRouter } from 'next/router'
-import { Button, IconKey, IconArchive, IconExternalLink, IconCode, IconActivity } from 'ui'
+import SVG from 'react-inlinesvg'
+import { Button, IconActivity, IconArchive, IconCode, IconExternalLink, IconKey } from 'ui'
 
 import Panel from 'components/ui/Panel'
 import APIKeys from './APIKeys'
 import GetStartedHero from './GetStartedHero'
 
-interface Props {}
-
-const NewProjectPanel: FC<Props> = ({}) => {
+const NewProjectPanel = () => {
   const router = useRouter()
   const { ref } = router.query
 
@@ -242,7 +239,7 @@ const NewProjectPanel: FC<Props> = ({}) => {
             <p className="text-base text-scale-1100 lg:max-w-sm">
               Interact with your database through the{' '}
               <Link href="https://supabase.com/docs/reference">
-                <a className="text-brand-900">Supabase client libraries</a>
+                <a className="text-brand">Supabase client libraries</a>
               </Link>{' '}
               with your API keys.
             </p>
diff --git a/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx
index 1657583775c..8a9b8f0f8eb 100644
--- a/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/PausedProjectCard.tsx
@@ -1,19 +1,19 @@
-import { FC } from 'react'
+import { noop } from 'lodash'
 import { Badge, Button } from 'ui'
 
 import { Project } from 'types'
 
-interface Props {
+interface PausedProjectCardProps {
   project: Project
   onSelectRestore: () => void
   onSelectDelete: () => void
 }
 
-const PausedProjectCard: FC<Props> = ({
+const PausedProjectCard = ({
   project,
-  onSelectRestore = () => {},
-  onSelectDelete = () => {},
-}) => {
+  onSelectRestore = noop,
+  onSelectDelete = noop,
+}: PausedProjectCardProps) => {
   return (
     <li className="col-span-1 flex rounded-md shadow-sm">
       <a className="col-span-3 w-full md:col-span-1 ">
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index ad3689be4f9..0b1801f51a2 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -1,20 +1,40 @@
-import { Badge, IconAlertTriangle, IconLoader, IconPauseCircle } from 'ui'
+import {
+  Badge,
+  IconAlertTriangle,
+  IconGitBranch,
+  IconGitHub,
+  IconLoader,
+  IconPauseCircle,
+  IconTriangle,
+} from 'ui'
 
 import CardButton from 'components/ui/CardButton'
 import { useProjectReadOnlyStatus } from 'hooks/misc/useProjectReadOnlyStatus'
-import { PROJECT_STATUS } from 'lib/constants'
+import { BASE_PATH, PROJECT_STATUS } from 'lib/constants'
 import { Project } from 'types'
+import { IntegrationProjectConnection } from 'data/integrations/integrations.types'
 
 export interface ProjectCardProps {
   project: Project
   rewriteHref?: string
+  githubIntegration?: IntegrationProjectConnection
+  vercelIntegration?: IntegrationProjectConnection
 }
 
-const ProjectCard = ({ project, rewriteHref }: ProjectCardProps) => {
+const ProjectCard = ({
+  project,
+  rewriteHref,
+  githubIntegration,
+  vercelIntegration,
+}: ProjectCardProps) => {
   const { name, ref: projectRef } = project
   const desc = `${project.cloud_provider} | ${project.region}`
 
   const isReadonly = useProjectReadOnlyStatus(projectRef)
+  const isBranchingEnabled = project.preview_branch_refs.length > 0
+  const isGithubIntegrated = githubIntegration !== undefined
+  const isVercelIntegrated = vercelIntegration !== undefined
+  const githubRepository = githubIntegration?.metadata.name ?? undefined
 
   // Project status should supersede is read only status
   const isHealthy = project.status === PROJECT_STATUS.ACTIVE_HEALTHY
@@ -28,8 +48,32 @@ const ProjectCard = ({ project, rewriteHref }: ProjectCardProps) => {
       <CardButton
         linkHref={rewriteHref ? rewriteHref : `/project/${projectRef}`}
         title={
-          <div className="flex w-full flex-row justify-between gap-1">
-            <span className="flex-shrink truncate">{name}</span>
+          <div className="w-full justify-between space-y-1">
+            <p className="flex-shrink truncate">{name}</p>
+            <div className="flex items-center space-x-1.5">
+              {isVercelIntegrated && (
+                <div className="w-fit p-1 border rounded-md flex items-center border-scale-600">
+                  <img
+                    src={`${BASE_PATH}/img/icons/vercel-icon.svg`}
+                    alt="Vercel Icon"
+                    className="w-3"
+                  />
+                </div>
+              )}
+              {isBranchingEnabled && (
+                <div className="w-fit p-1 border rounded-md flex items-center border-scale-600">
+                  <IconGitBranch size={12} strokeWidth={1.5} />
+                </div>
+              )}
+              {isGithubIntegrated && (
+                <>
+                  <div className="w-fit p-1 border rounded-md flex items-center border-scale-600">
+                    <IconGitHub size={12} strokeWidth={1.5} />
+                  </div>
+                  <p className="text-xs !ml-2 text-scale-1100">{githubRepository}</p>
+                </>
+              )}
+            </div>
           </div>
         }
         footer={
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index 1868b9c2689..d24aa81b1d0 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -18,6 +18,7 @@ import { makeRandomString } from 'lib/helpers'
 import { Organization, Project, ResponseError } from 'types'
 import ProjectCard from './ProjectCard'
 import ShimmeringCard from './ShimmeringCard'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
 
 export interface ProjectListProps {
   rewriteHref?: (projectRef: string) => string
diff --git a/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx b/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx
index e2d5fa355cd..918ec592631 100644
--- a/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ShimmeringCard.tsx
@@ -1,9 +1,6 @@
-import { FC } from 'react'
 import CardButton from 'components/ui/CardButton'
 
-interface Props {}
-
-const ShimmeringCard: FC<Props> = ({}) => {
+const ShimmeringCard = () => {
   return (
     <CardButton title="" footer={<div className="shimmering-loader rounded py-3 mx-1 w-1/3" />}>
       <div className="flex flex-col justify-between space-y-2">
diff --git a/studio/components/interfaces/Home/ProjectUsage.tsx b/studio/components/interfaces/Home/ProjectUsage.tsx
index 428df4bcca3..56cd338a0c9 100644
--- a/studio/components/interfaces/Home/ProjectUsage.tsx
+++ b/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -1,7 +1,10 @@
+import { useParams } from 'common'
 import dayjs from 'dayjs'
+import sumBy from 'lodash/sumBy'
 import Link from 'next/link'
-import { FC, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { ChartIntervals } from 'types'
 import {
   Button,
   Dropdown,
@@ -12,12 +15,10 @@ import {
   IconZap,
   Loading,
 } from 'ui'
-import Panel from 'components/ui/Panel'
-import { ChartIntervals } from 'types'
-import { useParams } from 'common/hooks'
-import { UsageApiCounts, useProjectLogStatsQuery } from 'data/analytics/project-log-stats-query'
+
 import BarChart from 'components/ui/Charts/BarChart'
-import sumBy from 'lodash/sumBy'
+import Panel from 'components/ui/Panel'
+import { UsageApiCounts, useProjectLogStatsQuery } from 'data/analytics/project-log-stats-query'
 import useFillTimeseriesSorted from 'hooks/analytics/useFillTimeseriesSorted'
 
 const CHART_INTERVALS: ChartIntervals[] = [
@@ -31,9 +32,8 @@ const CHART_INTERVALS: ChartIntervals[] = [
   { key: 'hourly', label: '24 hours', startValue: 24, startUnit: 'hour', format: 'MMM D, ha' },
   { key: 'daily', label: '7 days', startValue: 7, startUnit: 'day', format: 'MMM D' },
 ]
-interface Props {}
 
-const ProjectUsage: FC<Props> = ({}) => {
+const ProjectUsage = () => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
 
diff --git a/studio/components/interfaces/Home/ProjectUsageSection.tsx b/studio/components/interfaces/Home/ProjectUsageSection.tsx
index 932f22577be..8fc59369cf7 100644
--- a/studio/components/interfaces/Home/ProjectUsageSection.tsx
+++ b/studio/components/interfaces/Home/ProjectUsageSection.tsx
@@ -1,13 +1,12 @@
-import { FC } from 'react'
+import { useParams } from 'common'
 import { observer } from 'mobx-react-lite'
-import { IconLoader, IconAlertCircle } from 'ui'
+import { IconAlertCircle, IconLoader } from 'ui'
 
-import { useParams } from 'common/hooks'
-import { ProjectUsage, NewProjectPanel } from 'components/interfaces/Home'
+import { NewProjectPanel, ProjectUsage } from 'components/interfaces/Home'
 import InformationBox from 'components/ui/InformationBox'
 import { ProjectUsageResponseUsageKeys, useProjectUsageQuery } from 'data/usage/project-usage-query'
 
-const ProjectUsageSection: FC = observer(({}) => {
+const ProjectUsageSection = observer(() => {
   const { ref: projectRef } = useParams()
   const { data: usage, error: usageError, isLoading } = useProjectUsageQuery({ projectRef })
 
@@ -43,7 +42,7 @@ const ProjectUsageSection: FC = observer(({}) => {
           <IconLoader className="animate-spin" size={14} />
           <p className="text-sm">Retrieving project usage statistics</p>
         </div>
-      ) : hasProjectData ? (
+      ) : true ? (
         <ProjectUsage />
       ) : (
         <NewProjectPanel />
diff --git a/studio/components/interfaces/Integrations/IntegrationPanels.tsx b/studio/components/interfaces/Integrations/IntegrationPanels.tsx
index ad89a42d0ab..26028c0a79f 100644
--- a/studio/components/interfaces/Integrations/IntegrationPanels.tsx
+++ b/studio/components/interfaces/Integrations/IntegrationPanels.tsx
@@ -6,8 +6,10 @@ import { Markdown } from 'components/interfaces/Markdown'
 import { Integration, IntegrationProjectConnection } from 'data/integrations/integrations.types'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { BASE_PATH } from 'lib/constants'
-import { getVercelConfigurationUrl } from 'lib/integration-utils'
 import { Badge, Button, IconArrowRight, IconExternalLink, IconGitHub, IconSquare, cn } from 'ui'
+import { getIntegrationConfigurationUrl } from 'lib/integration-utils'
+import Link from 'next/link'
+import { BooleanFormatter } from 'components/grid/components/formatter'
 
 const ICON_STROKE_WIDTH = 2
 const ICON_SIZE = 14
@@ -24,9 +26,9 @@ const HandleIcon = ({ type, className }: { type: HandleIconType; className?: str
     case 'GitHub':
       return <IconGitHub strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />
       break
-    case 'Netlify':
-      return <IconSquare strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />
-      break
+    // case 'Netlify':
+    //   return <IconSquare strokeWidth={ICON_STROKE_WIDTH} size={ICON_SIZE} />
+    //   break
     case 'Vercel':
       return (
         <svg
@@ -91,9 +93,11 @@ const IntegrationInstallation = React.forwardRef<HTMLLIElement, IntegrationInsta
           </div>
           <div className="flex flex-col gap-0">
             <div className="flex items-center gap-2">
-              <span className="text-scale-1200 font-medium">
-                {/* {title} integration connection •{' '} */}
-                {integration.metadata?.account.name || integration.metadata?.gitHubConnectionOwner}
+              <span className="text font-medium">
+                {integration.metadata?.account.name ||
+                  (integration.metadata !== undefined &&
+                    'gitHubConnectionOwner' in integration.metadata &&
+                    integration.metadata?.gitHubConnectionOwner)}
               </span>
 
               <Badge color="scale" className="capitalize">
@@ -101,26 +105,26 @@ const IntegrationInstallation = React.forwardRef<HTMLLIElement, IntegrationInsta
               </Badge>
             </div>
             <div className="flex flex-col gap-0">
-              <span className="text-scale-900 text-sm">
+              <span className="text-lighter text-xs">
                 Created {dayjs(integration.inserted_at).fromNow()}
               </span>
-              <span className="text-scale-900 text-sm">
+              <span className="text-lighter text-xs">
                 Added by {integration?.added_by?.primary_email}
               </span>
             </div>
           </div>
         </div>
 
-        <Button type="default" asChild iconRight={<IconExternalLink />}>
-          {/* hard coded to vercel for now, TODO: move to a prop */}
-          <a
-            href={getVercelConfigurationUrl(integration)}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Manage
-          </a>
-        </Button>
+        <Link
+          href={getIntegrationConfigurationUrl(integration)}
+          target="_blank"
+          rel="noopener noreferrer"
+          passHref
+        >
+          <Button type="default" asChild iconRight={<IconExternalLink />}>
+            <a>Manage</a>
+          </Button>
+        </Link>
       </li>
     )
   }
@@ -130,10 +134,15 @@ export interface IntegrationConnectionProps extends React.HTMLAttributes<HTMLLIE
   connection: IntegrationProjectConnection
   type: Integration['integration']['name']
   actions?: React.ReactNode
+  showNode?: boolean
+  orientation?: 'horizontal' | 'vertical'
 }
 
 const IntegrationConnection = React.forwardRef<HTMLLIElement, IntegrationConnectionProps>(
-  ({ className, connection, type, actions, ...props }, ref) => {
+  (
+    { className, connection, type, actions, showNode = true, orientation = 'horizontal', ...props },
+    ref
+  ) => {
     const { data: projects } = useProjectsQuery()
     const project = projects?.find((project) => project.ref === connection.supabase_project_ref)
 
@@ -142,18 +151,31 @@ const IntegrationConnection = React.forwardRef<HTMLLIElement, IntegrationConnect
         ref={ref}
         key={connection.id}
         {...props}
-        className={cn('ml-6 pl-8 pb-2 border-l border-scale-600 dark:border-scale-400', 'relative')}
+        className={cn(
+          showNode && 'pl-8  ml-6 border-l border-scale-600 dark:border-scale-400',
+          'pb-2',
+          'relative'
+        )}
       >
-        <div className="absolute w-8 rounded-bl-full border-b border-l border-scale-600 dark:border-scale-400 h-10 -left-px"></div>
-        <div className="bg-surface-100 border shadow-sm flex justify-between items-center px-8 py-4 rounded-lg">
-          <div className="flex flex-col gap-1">
+        {showNode && (
+          <div className="absolute w-8 rounded-bl-full border-b border-l border-scale-600 dark:border-scale-400 h-10 -left-px"></div>
+        )}
+        <div
+          className={cn(
+            orientation === 'horizontal'
+              ? 'flex items-center justify-between'
+              : 'flex flex-col gap-3',
+            'bg-surface-100 border shadow-sm px-8 py-4 rounded-lg'
+          )}
+        >
+          <div className={'flex flex-col gap-1'}>
             <div className="flex gap-2 items-center">
               <HandleIcon type={'Supabase'} />
-              <span>{project?.name}</span>
+              <span className="text-sm">{project?.name}</span>
               <IconArrowRight size={14} className="text-scale-900" strokeWidth={1.5} />
               {!connection?.metadata?.framework ? (
                 <div className="bg-black text-white w-4 h-4 rounded flex items-center justify-center">
-                  <HandleIcon type={'Vercel'} className={'!w-2.5'} />
+                  <HandleIcon type={type} className={'!w-2.5'} />
                 </div>
               ) : (
                 <img
@@ -163,14 +185,14 @@ const IntegrationConnection = React.forwardRef<HTMLLIElement, IntegrationConnect
                   alt={`icon`}
                 />
               )}
-              <span>{connection.metadata?.name}</span>
+              <span className="text-sm">{connection.metadata?.name}</span>
             </div>
 
             <div className="flex flex-col gap-0">
-              <span className="text-scale-900 text-sm">
+              <span className="text-scale-900 text-xs">
                 Connected {dayjs(connection?.inserted_at).fromNow()}
               </span>
-              <span className="text-scale-900 text-sm">
+              <span className="text-scale-900 text-xs">
                 Added by {connection?.added_by?.primary_email}
               </span>
             </div>
@@ -206,7 +228,7 @@ const IntegrationConnectionOption = React.forwardRef<HTMLLIElement, IntegrationC
             <span>{connection.metadata.name}</span>
           </div>
 
-          <span className="text-scale-900 text-sm">
+          <span className="text-lighter text-xs">
             Connected {dayjs(connection.inserted_at).fromNow()}
           </span>
         </div>
@@ -219,15 +241,23 @@ const IntegrationConnectionOption = React.forwardRef<HTMLLIElement, IntegrationC
 
 const EmptyIntegrationConnection = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+  React.HTMLAttributes<HTMLDivElement> & { showNode?: boolean }
+>(({ className, showNode = true, ...props }, ref) => {
   return (
     <div
       ref={ref}
       {...props}
-      className={cn('ml-6 pl-8 pb-2 border-l', 'last:border-l-transparent', 'relative', className)}
+      className={cn(
+        showNode && 'ml-6 pl-8  border-l',
+        'pb-2 ',
+        'last:border-l-transparent',
+        'relative',
+        className
+      )}
     >
-      <div className="absolute w-8 rounded-bl-full border-b border-l border-scale-600 dark:border-scale-400 h-10 -left-px"></div>
+      {showNode && (
+        <div className="absolute w-8 rounded-bl-full border-b border-l border-scale-600 dark:border-scale-400 h-10 -left-px"></div>
+      )}
       <div
         className={cn(
           'w-full',
diff --git a/studio/components/interfaces/Integrations/OrganizationPicker.tsx b/studio/components/interfaces/Integrations/OrganizationPicker.tsx
new file mode 100644
index 00000000000..5b6f3fe4d7c
--- /dev/null
+++ b/studio/components/interfaces/Integrations/OrganizationPicker.tsx
@@ -0,0 +1,130 @@
+import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils'
+import { useIntegrationsQuery } from 'data/integrations/integrations-query'
+import { IntegrationName } from 'data/integrations/integrations.types'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useMemo, useRef, useState } from 'react'
+
+import { Organization } from 'types'
+import {
+  Badge,
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  IconChevronDown,
+  IconHexagon,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+export interface OrganizationPickerProps {
+  integrationName: IntegrationName
+  configurationId?: string
+  selectedOrg: Organization | null
+  onSelectedOrgChange: (organization: Organization) => void
+}
+
+const OrganizationPicker = ({
+  integrationName,
+  configurationId,
+  selectedOrg,
+  onSelectedOrgChange,
+}: OrganizationPickerProps) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLButtonElement>(null)
+
+  const { data: integrationData } = useIntegrationsQuery()
+  const { data: organizationsData, isLoading: isLoadingOrganization } = useOrganizationsQuery()
+
+  const installed = useMemo(
+    () =>
+      integrationData && organizationsData
+        ? getHasInstalledObject({
+            integrationName,
+            integrationData,
+            organizationsData,
+            installationId: configurationId,
+          })
+        : {},
+    [configurationId, integrationData, integrationName, organizationsData]
+  )
+
+  return (
+    <>
+      <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            ref={ref}
+            type="default"
+            size="medium"
+            block
+            className="justify-start"
+            icon={<IconHexagon />}
+            loading={isLoadingOrganization}
+            disabled={isLoadingOrganization}
+            iconRight={
+              <span className="grow flex justify-end">
+                <IconChevronDown className={''} />
+              </span>
+            }
+          >
+            <span className="flex gap-2">
+              <span className="truncate">{selectedOrg?.name}</span>
+              {selectedOrg && configurationId && installed[selectedOrg.slug] && (
+                <Badge color="scale">Integration Installed</Badge>
+              )}
+            </span>
+          </Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_
+          className="p-0 w-full"
+          side="bottom"
+          align="center"
+          style={{ width: ref.current?.offsetWidth }}
+        >
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Search organizations..." />
+            <CommandList_Shadcn_>
+              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+              <CommandGroup_Shadcn_>
+                {organizationsData?.map((org) => {
+                  return (
+                    <CommandItem_Shadcn_
+                      value={org.slug}
+                      key={org.slug}
+                      className="flex gap-2 items-center"
+                      onSelect={(slug) => {
+                        const org = organizationsData?.find(
+                          (org) => org.slug.toLowerCase() === slug.toLowerCase()
+                        )
+                        if (org) {
+                          onSelectedOrgChange(org)
+                        }
+
+                        setOpen(false)
+                      }}
+                    >
+                      <IconHexagon />
+                      <span className="truncate">{org.name}</span>{' '}
+                      {configurationId && installed[org.slug] && (
+                        <Badge color="scale" className="!flex-none">
+                          Integration Installed
+                        </Badge>
+                      )}
+                    </CommandItem_Shadcn_>
+                  )
+                })}
+              </CommandGroup_Shadcn_>
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </>
+  )
+}
+
+export default OrganizationPicker
diff --git a/studio/components/interfaces/Integrations/ProjectLinker.tsx b/studio/components/interfaces/Integrations/ProjectLinker.tsx
index e220c54f1d2..2bebe5af4b7 100644
--- a/studio/components/interfaces/Integrations/ProjectLinker.tsx
+++ b/studio/components/interfaces/Integrations/ProjectLinker.tsx
@@ -1,13 +1,9 @@
-import { ENV_VAR_RAW_KEYS } from 'components/interfaces/Integrations/Integrations-Vercel.constants'
-import { Markdown } from 'components/interfaces/Markdown'
-import { vercelIcon } from 'components/to-be-cleaned/ListIcons'
-import { useIntegrationConnectionsCreateMutation } from 'data/integrations/integration-connections-create-mutation'
-import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
-import { VercelProjectsResponse } from 'data/integrations/integrations-vercel-projects-query'
+import { ReactNode, useRef, useState } from 'react'
+
 import { IntegrationProjectConnection } from 'data/integrations/integrations.types'
+import { IntegrationConnectionsCreateVariables } from 'data/integrations/types'
 import { useSelectedOrganization } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
-import { useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
 import {
   Button,
@@ -24,22 +20,33 @@ import {
   cn,
 } from 'ui'
 
-interface Project {
+export interface Project {
   id: string
   name: string
   ref: string
 }
 
+export interface ForeignProject {
+  id: string
+  name: string
+}
+
 export interface ProjectLinkerProps {
   organizationIntegrationId: string | undefined
-  foreignProjects: VercelProjectsResponse[]
+  foreignProjects: ForeignProject[]
   supabaseProjects: Project[]
-  onCreateConnections?: () => void
+  onCreateConnections: (variables: IntegrationConnectionsCreateVariables) => void
   installedConnections: IntegrationProjectConnection[] | undefined
-  setLoading?: (x: boolean) => void
-  showSkip?: boolean
+  isLoading?: boolean
+  integrationIcon: ReactNode
+  getForeignProjectIcon?: (project: ForeignProject) => ReactNode
+  choosePrompt?: string
+  onSkip?: () => void
   loadingForeignProjects?: boolean
   loadingSupabaseProjects?: boolean
+
+  defaultSupabaseProjectRef?: string
+  defaultForeignProjectId?: string
 }
 
 const ProjectLinker = ({
@@ -48,77 +55,63 @@ const ProjectLinker = ({
   supabaseProjects,
   onCreateConnections: _onCreateConnections,
   installedConnections = [],
-  setLoading,
-  showSkip = false,
+  isLoading,
+  integrationIcon,
+  getForeignProjectIcon,
+  choosePrompt = 'Choose a project',
+  onSkip,
   loadingForeignProjects,
   loadingSupabaseProjects,
+
+  defaultSupabaseProjectRef,
+  defaultForeignProjectId,
 }: ProjectLinkerProps) => {
   const [supabaseProjectsComboBoxOpen, setSupabaseProjectsComboboxOpen] = useState(false)
-  const [vercelProjectsComboBoxOpen, setVercelProjectsComboboxOpen] = useState(false)
+  const [foreignProjectsComboBoxOpen, setForeignProjectsComboboxOpen] = useState(false)
   const supabaseProjectsComboBoxRef = useRef<HTMLButtonElement>(null)
-  const vercelProjectsComboBoxRef = useRef<HTMLButtonElement>(null)
+  const foreignProjectsComboBoxRef = useRef<HTMLButtonElement>(null)
 
   const selectedOrganization = useSelectedOrganization()
 
-  const [supabaseProjectRef, setSupabaseProjectRef] = useState<string | undefined>(undefined)
-  const [vercelProjectId, setVercelProjectId] = useState<string | undefined>(undefined)
-
-  const { mutateAsync: syncEnvs } = useIntegrationsVercelConnectionSyncEnvsMutation()
-  const { mutate: createConnections, isLoading } = useIntegrationConnectionsCreateMutation({
-    async onSuccess({ id }) {
-      try {
-        await syncEnvs({ connectionId: id })
-      } catch (error: any) {
-        toast.error('Failed to sync environment variables: ', error.message)
-      }
-
-      if (setLoading) setLoading(false)
-      _onCreateConnections?.()
-    },
-    onError() {
-      if (setLoading) setLoading(false)
-    },
-  })
+  const [supabaseProjectRef, setSupabaseProjectRef] = useState<string | undefined>(
+    defaultSupabaseProjectRef
+  )
+  const [foreignProjectId, setForeignProjectId] = useState<string | undefined>(
+    defaultForeignProjectId
+  )
 
   // create a flat array of foreign project ids. ie, ["prj_MlkO6AiLG5ofS9ojKrkS3PhhlY3f", ..]
   const flatInstalledConnectionsIds = new Set(installedConnections.map((x) => x.foreign_project_id))
 
-  // check that vercel project is not already installed
-  const filteredForeignProjects: VercelProjectsResponse[] = foreignProjects.filter(
-    (foreignProject) => {
-      return !flatInstalledConnectionsIds.has(foreignProject.id)
-    }
-  )
-
   const selectedSupabaseProject = supabaseProjectRef
     ? supabaseProjects.find((x) => x.ref?.toLowerCase() === supabaseProjectRef?.toLowerCase())
     : undefined
 
-  const selectedVercelProject = vercelProjectId
-    ? filteredForeignProjects.find((x) => x.id?.toLowerCase() === vercelProjectId?.toLowerCase())
+  const selectedForeignProject = foreignProjectId
+    ? foreignProjects.find((x) => x.id?.toLowerCase() === foreignProjectId?.toLowerCase())
     : undefined
 
   function onCreateConnections() {
-    const projectDetails = selectedVercelProject
+    const projectDetails = selectedForeignProject
 
     if (!organizationIntegrationId) return console.error('No integration ID set')
-    if (!selectedVercelProject?.id) return console.error('No Vercel project ID set')
+    if (!selectedForeignProject?.id) return console.error('No Foreign project ID set')
     if (!selectedSupabaseProject?.ref) return console.error('No Supabase project ref set')
 
-    if (setLoading) setLoading(true)
+    const alreadyInstalled = flatInstalledConnectionsIds.has(foreignProjectId ?? '')
+    if (alreadyInstalled) {
+      return toast.error(
+        `Unable to connect to ${selectedForeignProject.name}: Selected repository already has an installed connection to a project`
+      )
+    }
 
-    createConnections({
+    _onCreateConnections({
       organizationIntegrationId,
       connection: {
-        foreign_project_id: selectedVercelProject?.id,
+        foreign_project_id: selectedForeignProject?.id,
         supabase_project_ref: selectedSupabaseProject?.ref,
         metadata: {
           ...projectDetails,
-          supabaseConfig: {
-            projectEnvVars: {
-              write: true,
-            },
-          },
         },
       },
       orgSlug: selectedOrganization?.slug,
@@ -162,7 +155,7 @@ const ProjectLinker = ({
                   type="default"
                   size="medium"
                   block
-                  disabled={loadingSupabaseProjects}
+                  disabled={defaultSupabaseProjectRef !== undefined || loadingSupabaseProjects}
                   loading={loadingSupabaseProjects}
                   className="justify-start"
                   icon={
@@ -175,9 +168,11 @@ const ProjectLinker = ({
                     </div>
                   }
                   iconRight={
-                    <span className="grow flex justify-end">
-                      <IconChevronDown className={''} />
-                    </span>
+                    defaultSupabaseProjectRef === undefined ? (
+                      <span className="grow flex justify-end">
+                        <IconChevronDown className={''} />
+                      </span>
+                    ) : null
                   }
                 >
                   {selectedSupabaseProject ? selectedSupabaseProject.name : 'Choose Project'}
@@ -194,14 +189,14 @@ const ProjectLinker = ({
                   <CommandList_Shadcn_ className="!max-h-[170px]">
                     <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
                     <CommandGroup_Shadcn_>
-                      {supabaseProjects.map((project) => {
+                      {supabaseProjects.map((project, i) => {
                         return (
                           <CommandItem_Shadcn_
-                            value={project.ref}
+                            value={`${project.name}-${i}`}
                             key={project.ref}
                             className="flex gap-2 items-center"
-                            onSelect={(ref) => {
-                              if (ref) setSupabaseProjectRef(ref)
+                            onSelect={() => {
+                              if (project.ref) setSupabaseProjectRef(project.ref)
                               setSupabaseProjectsComboboxOpen(false)
                             }}
                           >
@@ -225,23 +220,16 @@ const ProjectLinker = ({
           <div className="border border-scale-1000 h-px w-16 border-dashed self-end mb-5"></div>
           <Panel>
             <div className="bg-black shadow rounded p-1 w-12 h-12 flex justify-center items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="white"
-                viewBox="0 0 512 512"
-                className="w-6"
-              >
-                <path fillRule="evenodd" d="M256,48,496,464H16Z" />
-              </svg>
+              {integrationIcon}
             </div>
 
             <Popover_Shadcn_
-              open={vercelProjectsComboBoxOpen}
-              onOpenChange={setVercelProjectsComboboxOpen}
+              open={foreignProjectsComboBoxOpen}
+              onOpenChange={setForeignProjectsComboboxOpen}
             >
               <PopoverTrigger_Shadcn_ asChild>
                 <Button
-                  ref={vercelProjectsComboBoxRef}
+                  ref={foreignProjectsComboBoxRef}
                   type="default"
                   size="medium"
                   block
@@ -249,20 +237,9 @@ const ProjectLinker = ({
                   loading={loadingForeignProjects}
                   className="justify-start"
                   icon={
-                    selectedVercelProject ? (
-                      selectedVercelProject?.framework ? (
-                        vercelIcon
-                      ) : (
-                        <img
-                          src={`${BASE_PATH}/img/icons/frameworks/${selectedVercelProject.framework}.svg`}
-                          width={21}
-                          height={21}
-                          alt={`icon`}
-                        />
-                      )
-                    ) : (
-                      <></>
-                    )
+                    selectedForeignProject
+                      ? getForeignProjectIcon?.(selectedForeignProject)
+                      : integrationIcon
                   }
                   iconRight={
                     <span className="grow flex justify-end">
@@ -270,42 +247,32 @@ const ProjectLinker = ({
                     </span>
                   }
                 >
-                  {(selectedVercelProject && selectedVercelProject.name) ??
-                    'Choose a Vercel Project'}
+                  {(selectedForeignProject && selectedForeignProject.name) ?? choosePrompt}
                 </Button>
               </PopoverTrigger_Shadcn_>
               <PopoverContent_Shadcn_
                 className="p-0 w-full"
                 side="bottom"
                 align="center"
-                style={{ width: vercelProjectsComboBoxRef.current?.offsetWidth }}
+                style={{ width: foreignProjectsComboBoxRef.current?.offsetWidth }}
               >
                 <Command_Shadcn_>
                   <CommandInput_Shadcn_ placeholder="Search organization..." />
                   <CommandList_Shadcn_ className="!max-h-[170px]">
                     <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
                     <CommandGroup_Shadcn_>
-                      {filteredForeignProjects.map((project) => {
+                      {foreignProjects.map((project, i) => {
                         return (
                           <CommandItem_Shadcn_
-                            value={project.id}
                             key={project.id}
+                            value={`${project.name}-${i}`}
                             className="flex gap-2 items-center"
-                            onSelect={(id) => {
-                              if (id) setVercelProjectId(id)
-                              setVercelProjectsComboboxOpen(false)
+                            onSelect={() => {
+                              if (project.id) setForeignProjectId(project.id)
+                              setForeignProjectsComboboxOpen(false)
                             }}
                           >
-                            {!project?.framework ? (
-                              vercelIcon
-                            ) : (
-                              <img
-                                src={`${BASE_PATH}/img/icons/frameworks/${project.framework}.svg`}
-                                width={21}
-                                height={21}
-                                alt={`icon`}
-                              />
-                            )}
+                            {getForeignProjectIcon?.(project) ?? integrationIcon}
                             <span>{project.name}</span>
                           </CommandItem_Shadcn_>
                         )
@@ -319,12 +286,12 @@ const ProjectLinker = ({
         </div>
       </div>
       <div className="flex w-full justify-end gap-2">
-        {showSkip && (
+        {onSkip !== undefined && (
           <Button
             size="medium"
             type="default"
             onClick={() => {
-              _onCreateConnections?.()
+              onSkip()
             }}
           >
             Skip
@@ -340,26 +307,14 @@ const ProjectLinker = ({
             loadingForeignProjects ||
             loadingSupabaseProjects ||
             isLoading ||
-            // check wether both project types are not undefined
+            // check whether both project types are not undefined
             !selectedSupabaseProject ||
-            !selectedVercelProject
+            !selectedForeignProject
           }
         >
           Connect project
         </Button>
       </div>
-      <Markdown
-        content={`
-The following environment variables will be added:
-
-${ENV_VAR_RAW_KEYS.map((x, idx) => {
-  return `
-  \n
-  - \`${x}\`
-`
-})}
-`}
-      />
     </div>
   )
 }
diff --git a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index c463ce98397..7a864aef626 100644
--- a/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -132,7 +132,7 @@ const AuditLogs = () => {
                   return (
                     <Alert title="" variant="info" className="mx-3 pl-2 pr-2 pt-1 pb-2">
                       Your organization has a log retention period of{' '}
-                      <span className="text-brand-900">
+                      <span className="text-brand">
                         {retentionPeriod} day
                         {retentionPeriod > 1 ? 's' : ''}
                       </span>
diff --git a/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx b/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
index f0012187c9a..d7f869fb452 100644
--- a/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
@@ -1,13 +1,12 @@
-import { FC } from 'react'
 import { Badge } from 'ui'
 
-interface Props {
+interface CreditBalanceProps {
   balance: string | number
   isCredit: boolean
   isDebt: boolean
 }
 
-const CreditBalance: FC<Props> = ({ balance, isCredit, isDebt }) => {
+const CreditBalance = ({ balance, isCredit, isDebt }: CreditBalanceProps) => {
   return (
     <div className="flex items-center justify-between">
       <div className="space-y-1">
diff --git a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
index dd7c89c898f..87ea901dfea 100644
--- a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
@@ -1,17 +1,17 @@
-import Link from 'next/link'
 import dayjs from 'dayjs'
-import { FC, useEffect } from 'react'
+import Link from 'next/link'
+import { useEffect } from 'react'
 import { IconChevronRight, IconLoader } from 'ui'
 
-import { useStore } from 'hooks'
 import Panel from 'components/ui/Panel'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { useStore } from 'hooks'
 
 interface ProjectSummaryProps {
   project: any
 }
 
-const ProjectSummary: FC<ProjectSummaryProps> = ({ project }) => {
+const ProjectSummary = ({ project }: ProjectSummaryProps) => {
   const { ui } = useStore()
   const {
     data: subscription,
@@ -68,7 +68,7 @@ interface ProjectsSummaryProps {
   projects: any
 }
 
-const ProjectsSummary: FC<ProjectsSummaryProps> = ({ projects }) => {
+const ProjectsSummary = ({ projects }: ProjectsSummaryProps) => {
   return (
     <div className="space-y-2">
       <h4>Projects at a glance</h4>
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/BillingSettings.constants.ts b/studio/components/interfaces/Organization/BillingSettingsV2/BillingSettings.constants.ts
index 3e16e7b2138..d2f5238e5f4 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/BillingSettings.constants.ts
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/BillingSettings.constants.ts
@@ -8,7 +8,7 @@ export const CANCELLATION_REASONS = [
   'Dashboard is too complicated',
   'Postgres is too complicated',
   'Problem not solved',
-  'Bug issues',
+  'Too many bugs/issues',
   'I decided to use something else',
   'My work has finished/discontinued',
   'I’m migrating to/starting a new project',
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
index af9608f0dd0..cbf139f924b 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/EnterpriseCard.tsx
@@ -18,13 +18,13 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
     >
       <div className="flex flex-col justify-center px-4">
         <div className="flex items-center space-x-2">
-          <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+          <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
           {isCurrentPlan ? (
             <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
               Current plan
             </div>
           ) : plan.nameBadge ? (
-            <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+            <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
               {plan.nameBadge}
             </div>
           ) : null}
@@ -43,7 +43,7 @@ const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
         <ul role="list" className="text-xs text-scale-1000 md:grid md:grid-cols-2 md:gap-x-10">
           {plan.features.map((feature) => (
             <li key={feature} className="flex items-center py-2 first:mt-0">
-              <IconCheck className="text-brand-900 h-4 w-4" aria-hidden="true" strokeWidth={3} />
+              <IconCheck className="text-brand h-4 w-4" aria-hidden="true" strokeWidth={3} />
               <span className="dark:text-scale-1200 mb-0 ml-3 ">{feature}</span>
             </li>
           ))}
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
index fd50323a60e..9ec255913b8 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/PlanUpdateSidePanel.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useOrgPlansQuery } from 'data/subscriptions/org-plans-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
-import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
+import { SubscriptionTier, useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
 import { useCheckPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import Telemetry from 'lib/telemetry'
@@ -110,9 +110,14 @@ const PlanUpdateSidePanel = () => {
       return ui.setNotification({ category: 'error', message: 'Please select a payment method' })
     }
 
-    updateOrgSubscription({ slug, tier: selectedTier, paymentMethod: selectedPaymentMethod })
+    // If the user is downgrading from team, should have spend cap disabled by default 
+    const tier = subscription?.plan?.id === 'team' && selectedTier === PRICING_TIER_PRODUCT_IDS.PRO ? PRICING_TIER_PRODUCT_IDS.PAYG as SubscriptionTier : selectedTier
+
+    updateOrgSubscription({ slug, tier, paymentMethod: selectedPaymentMethod })
   }
 
+  const planMeta = selectedTier ? availablePlans.find((p) => p.id === selectedTier.split('tier_')[1]) : null
+
   return (
     <>
       <SidePanel
@@ -157,13 +162,13 @@ const PlanUpdateSidePanel = () => {
                 >
                   <div className="w-full">
                     <div className="flex items-center space-x-2">
-                      <p className={clsx('text-brand-900 text-sm uppercase')}>{plan.name}</p>
+                      <p className={clsx('text-brand text-sm uppercase')}>{plan.name}</p>
                       {isCurrentPlan ? (
                         <div className="text-xs bg-scale-500 text-scale-1000 rounded px-2 py-0.5">
                           Current plan
                         </div>
                       ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-400 text-brand-900 rounded px-2 py-0.5">
+                        <div className="text-xs bg-brand-400 text-brand rounded px-2 py-0.5">
                           {plan.nameBadge}
                         </div>
                       ) : (
@@ -182,7 +187,7 @@ const PlanUpdateSidePanel = () => {
                       <p className="text-scale-1000 text-sm">{tierMeta?.costUnitOrg}</p>
                     </div>
                     <div className={clsx('flex mt-1 mb-4', !tierMeta?.warning && 'opacity-0')}>
-                      <div className="bg-scale-200 text-brand-1100 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
+                      <div className="bg-scale-200 text-brand-600 border shadow-sm rounded-md bg-opacity-30 py-0.5 px-2 text-xs">
                         {tierMeta?.warning}
                       </div>
                     </div>
@@ -250,7 +255,7 @@ const PlanUpdateSidePanel = () => {
                         <li key={feature} className="flex py-2">
                           <div className="w-[12px]">
                             <IconCheck
-                              className="h-3 w-3 text-brand-900 translate-y-[2.5px]"
+                              className="h-3 w-3 text-brand translate-y-[2.5px]"
                               aria-hidden="true"
                               strokeWidth={3}
                             />
@@ -289,7 +294,7 @@ const PlanUpdateSidePanel = () => {
         onCancel={() => setSelectedTier(undefined)}
         onConfirm={onUpdateSubscription}
         overlayClassName="pointer-events-none"
-        header={`Confirm to upgrade to ${subscriptionPlanMeta?.name}`}
+        header={`Confirm ${planMeta?.change_type === 'downgrade' ? 'downgrade' : 'upgrade'} to ${subscriptionPlanMeta?.name}`}
       >
         <Modal.Content>
           <div className="py-6 space-y-2">
diff --git a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
index c5b258bcca0..c5c07a0f72f 100644
--- a/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Organization/BillingSettingsV2/Subscription/Subscription.tsx
@@ -75,9 +75,7 @@ const Subscription = () => {
             <div className="space-y-6">
               <div>
                 <p className="text-sm">This organization is currently on the plan:</p>
-                <p className="text-2xl text-brand-900 uppercase">
-                  {currentPlan?.name ?? 'Unknown'}
-                </p>
+                <p className="text-2xl text-brand uppercase">{currentPlan?.name ?? 'Unknown'}</p>
               </div>
 
               <div>
diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index 00489485bea..d9c6c825ab8 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -21,6 +21,7 @@ import { isResponseOk, patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { Organization } from 'types'
 import OrganizationDeletePanel from './OrganizationDeletePanel'
+import NoProjectsOnPaidOrgInfo from 'components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo'
 
 const GeneralSettings = () => {
   const queryClient = useQueryClient()
@@ -72,6 +73,8 @@ const GeneralSettings = () => {
 
   return (
     <ScaffoldContainerLegacy>
+      <NoProjectsOnPaidOrgInfo organization={selectedOrganization} />
+
       <Form id={formId} initialValues={initialValues} onSubmit={onUpdateOrganization}>
         {({ isSubmitting, handleReset, values, initialValues, resetForm }: any) => {
           const hasChanges = JSON.stringify(values) !== JSON.stringify(initialValues)
@@ -172,7 +175,7 @@ const GeneralSettings = () => {
                                 <a
                                   target="_blank"
                                   rel="noreferrer"
-                                  className="text-brand-900 border-b border-brand-900"
+                                  className="text-brand border-b border-brand"
                                 >
                                   privacy policy
                                 </a>
diff --git a/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx b/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
index ca259432a49..e3d2f7a0184 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
@@ -3,7 +3,19 @@ import { observer } from 'mobx-react-lite'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
-import { Alert, Button, IconHelpCircle, Listbox, Loading, Modal, Toggle } from 'ui'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconHelpCircle,
+  Listbox,
+  Loading,
+  Modal,
+  Toggle,
+} from 'ui'
 
 import { SpendCapModal } from 'components/interfaces/BillingV2'
 import { useOrganizationBillingMigrationMutation } from 'data/organizations/organization-migrate-billing-mutation'
@@ -114,39 +126,66 @@ const MigrateOrganizationBillingButton = observer(() => {
         <div className="space-y-4 py-3">
           <Modal.Content>
             <div className="space-y-2">
-              <Alert title="About the migration" withIcon variant="info">
-                <div className="text-sm space-y-2">
-                  <p>
-                    Migrating to new organization-level billing combines subscriptions for all
-                    projects in the organization into a single subscription.
-                  </p>
+              <Alert_Shadcn_ variant="destructive">
+                <IconAlertCircle strokeWidth={2} />
+                <AlertTitle_Shadcn_>Irreversible</AlertTitle_Shadcn_>
+                <AlertDescription_Shadcn_>
+                  Once migrated to the new organization-level billing, you cannot go back to the old
+                  project-level billing.
+                </AlertDescription_Shadcn_>
+              </Alert_Shadcn_>
 
-                  <p>
-                    For a detailed breakdown of changes, see{' '}
-                    <Link href="https://www.notion.so/supabase/Organization-Level-Billing-9c159d69375b4af095f0b67881276582?pvs=4">
-                      <a target="_blank" rel="noreferrer" className="underline">
-                        Billing Migration Docs
-                      </a>
-                    </Link>
-                    . To transfer projects to a different organization, visit{' '}
-                    <Link href="/projects/_/settings/general">
-                      <a target="_blank" rel="noreferrer" className="underline">
-                        General settings
-                      </a>
-                    </Link>
-                    .
-                  </p>
-                </div>
-              </Alert>
+              {migrationPreviewData?.addons_to_be_removed &&
+                migrationPreviewData.addons_to_be_removed.length > 0 && (
+                  <Alert_Shadcn_ variant="warning">
+                    <IconAlertTriangle strokeWidth={2} />
+                    <AlertTitle_Shadcn_>Project addons will be removed</AlertTitle_Shadcn_>
+                    <AlertDescription_Shadcn_>
+                      <div>
+                        The following project addons will be removed when downgrading
+                        <ul className="list-disc list-inside pl-4">
+                          {migrationPreviewData.addons_to_be_removed.map((addon) =>
+                            addon.addons.map((variant) => (
+                              <li key={`${addon.projectRef}-${variant.variant}`}>
+                                {variant.type === 'pitr'
+                                  ? 'PITR - '
+                                  : variant.type === 'compute_instance'
+                                  ? 'Compute Instance - '
+                                  : ''}
+                                {variant.name} for project {addon.projectName || addon.projectRef}
+                              </li>
+                            ))
+                          )}
+                        </ul>
+                      </div>
+                    </AlertDescription_Shadcn_>
+                  </Alert_Shadcn_>
+                )}
+            </div>
+          </Modal.Content>
+          <Modal.Separator />
+          <Modal.Content>
+            <div className="text-scale-1000 text-sm space-y-2">
+              <p>
+                Migrating to new organization-level billing combines subscriptions for all projects
+                in the organization into a single subscription.
+              </p>
 
-              <Alert title="Irreversible" withIcon variant="danger">
-                <div className="text-sm">
-                  <p>
-                    Once migrated to the new organization-level billing, you cannot go back to the
-                    old project-level billing.
-                  </p>
-                </div>
-              </Alert>
+              <p>
+                For a detailed breakdown of changes, see{' '}
+                <Link href="https://www.notion.so/supabase/Organization-Level-Billing-9c159d69375b4af095f0b67881276582?pvs=4">
+                  <a target="_blank" rel="noreferrer" className="underline">
+                    Billing Migration Docs
+                  </a>
+                </Link>
+                . To transfer projects to a different organization, visit{' '}
+                <Link href="/projects/_/settings/general">
+                  <a target="_blank" rel="noreferrer" className="underline">
+                    General settings
+                  </a>
+                </Link>
+                .
+              </p>
             </div>
           </Modal.Content>
           <Modal.Separator />
@@ -261,16 +300,22 @@ const MigrateOrganizationBillingButton = observer(() => {
           <Modal.Content>
             <Loading active={tier !== '' && migrationPreviewIsLoading}>
               {migrationPreviewError && (
-                <Alert title="Organization cannot be migrated" variant="danger">
-                  <span>{migrationPreviewError.message}</span>
-                </Alert>
+                <Alert_Shadcn_ variant="destructive">
+                  <IconAlertCircle strokeWidth={2} />
+                  <AlertTitle_Shadcn_>Organization cannot be migrated</AlertTitle_Shadcn_>
+                  <AlertDescription_Shadcn_>
+                    {migrationPreviewError.message}
+                  </AlertDescription_Shadcn_>
+                </Alert_Shadcn_>
               )}
             </Loading>
 
             {migrationError && (
-              <Alert title="Organization cannot be migrated" variant="danger">
-                <span>{migrationError.message}</span>
-              </Alert>
+              <Alert_Shadcn_ variant="destructive">
+                <IconAlertCircle strokeWidth={2} />
+                <AlertTitle_Shadcn_>Organization cannot be migrated</AlertTitle_Shadcn_>
+                <AlertDescription_Shadcn_>{migrationError.message}</AlertDescription_Shadcn_>
+              </Alert_Shadcn_>
             )}
           </Modal.Content>
           <Modal.Content>
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
index c0a351aff61..08ee496acad 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/Integration.tsx
@@ -11,42 +11,38 @@ import {
   ScaffoldSectionContent,
   ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
-import { useIntegrationsVercelInstalledConnectionDeleteMutation } from 'data/integrations/integrations-vercel-installed-connection-delete-mutation'
+import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
 import {
+  IntegrationName,
   IntegrationProjectConnection,
   Integration as TIntegration,
 } from 'data/integrations/integrations.types'
-import { useSelectedOrganization } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
 import { pluralize } from 'lib/helpers'
 import { EMPTY_ARR } from 'lib/void'
-import { useGithubConnectionConfigPanelSnapshot } from 'state/github-connection-config-panel'
-import { Button, Dropdown, IconChevronDown, IconTrash } from 'ui'
+import { useCallback, useState } from 'react'
+import { Button, Dropdown, IconChevronDown, IconLoader, IconRefreshCw, IconTrash, Modal } from 'ui'
 
 export interface IntegrationProps {
   title: string
-  orgName?: string
   description?: string
   note?: string
   detail?: string
   integrations?: TIntegration[]
+  onAddConnection: (integrationId: string) => void
+  onDeleteConnection: (connection: IntegrationProjectConnection) => void | Promise<void>
 }
 
 const Integration = ({
   title,
-  orgName,
   description,
   note,
   detail,
   integrations = EMPTY_ARR,
+  onAddConnection,
+  onDeleteConnection,
 }: IntegrationProps) => {
-  const snapshot = useGithubConnectionConfigPanelSnapshot()
-
-  const selectedOrganization = useSelectedOrganization()
-
-  const { mutate: deleteMutate, isLoading: isDeleteLoading } =
-    useIntegrationsVercelInstalledConnectionDeleteMutation()
-
   const ConnectionHeading = ({ integration }: { integration: TIntegration }) => {
     return (
       <IntegrationConnectionHeader
@@ -60,17 +56,6 @@ Repository connections for ${title?.toLowerCase()}
     )
   }
 
-  // Call the mutation when needed
-  const handleDelete = (organizationIntegrationId: string, projectIntegrationId: string) => {
-    const variables = {
-      organization_integration_id: organizationIntegrationId,
-      id: projectIntegrationId,
-      orgSlug: selectedOrganization?.slug,
-    }
-
-    deleteMutate(variables)
-  }
-
   return (
     <>
       <ScaffoldContainer>
@@ -89,60 +74,28 @@ Repository connections for ${title?.toLowerCase()}
               {integrations.length > 0 &&
                 integrations.map((integration, i) => {
                   return (
-                    <div key={i}>
-                      <IntegrationInstallation title={title} key={i} integration={integration} />
+                    <div key={integration.id}>
+                      <IntegrationInstallation title={title} integration={integration} />
+
                       {integration.connections.length > 0 ? (
                         <>
                           <ConnectionHeading integration={integration} />
 
                           <ul className="flex flex-col">
-                            {integration.connections.map(
-                              (connection: IntegrationProjectConnection, i) => (
-                                <IntegrationConnection
-                                  key={i}
-                                  connection={connection}
-                                  type={integration.integration.name}
-                                  actions={
-                                    <Dropdown
-                                      side="bottom"
-                                      align="end"
-                                      size="large"
-                                      overlay={
-                                        <>
-                                          <Dropdown.Item
-                                            icon={<IconTrash size={14} />}
-                                            onSelect={() =>
-                                              handleDelete(integration.id, connection.id)
-                                            }
-                                          >
-                                            Delete
-                                          </Dropdown.Item>
-                                        </>
-                                      }
-                                    >
-                                      <Button
-                                        asChild
-                                        iconRight={<IconChevronDown />}
-                                        type="default"
-                                      >
-                                        <span>Manage</span>
-                                      </Button>
-                                    </Dropdown>
-                                  }
-                                />
-                              )
-                            )}
+                            {integration.connections.map((connection) => (
+                              <IntegrationConnectionItem
+                                key={connection.id}
+                                connection={connection}
+                                type={title as IntegrationName}
+                                onDeleteConnection={onDeleteConnection}
+                              />
+                            ))}
                           </ul>
                         </>
                       ) : (
                         <ConnectionHeading integration={integration} />
                       )}
-                      <EmptyIntegrationConnection
-                        onClick={() => {
-                          snapshot.setOrganizationIntegrationId(integration.id)
-                          snapshot.setOpen(true)
-                        }}
-                      >
+                      <EmptyIntegrationConnection onClick={() => onAddConnection(integration.id)}>
                         Add new project connection
                       </EmptyIntegrationConnection>
                     </div>
@@ -158,3 +111,107 @@ Repository connections for ${title?.toLowerCase()}
 }
 
 export default Integration
+
+type IntegrationConnectionItemProps = {
+  connection: IntegrationProjectConnection
+  type: IntegrationName
+  onDeleteConnection: (connection: IntegrationProjectConnection) => void | Promise<void>
+}
+
+const IntegrationConnectionItem = ({
+  connection,
+  type,
+  onDeleteConnection,
+}: IntegrationConnectionItemProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [dropdownVisible, setDropdownVisible] = useState(false)
+
+  const onConfirm = useCallback(async () => {
+    try {
+      await onDeleteConnection(connection)
+    } finally {
+      setIsOpen(false)
+    }
+  }, [connection, onDeleteConnection])
+
+  const onCancel = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const { mutateAsync: syncEnvs, isLoading: isSyncEnvLoading } =
+    useIntegrationsVercelConnectionSyncEnvsMutation()
+
+  const onReSyncEnvVars = useCallback(async () => {
+    try {
+      await syncEnvs({ connectionId: connection.id })
+    } finally {
+      setDropdownVisible(false)
+    }
+  }, [connection, syncEnvs])
+
+  return (
+    <>
+      <IntegrationConnection
+        connection={connection}
+        type={type}
+        actions={
+          <Dropdown
+            open={dropdownVisible}
+            onOpenChange={() => setDropdownVisible(!dropdownVisible)}
+            modal={false}
+            side="bottom"
+            align="end"
+            size="medium"
+            overlay={
+              <>
+                {type === 'Vercel' && (
+                  <>
+                    <Dropdown.Item
+                      icon={
+                        isSyncEnvLoading ? (
+                          <IconLoader className="animate-spin" size={14} />
+                        ) : (
+                          <IconRefreshCw size={14} />
+                        )
+                      }
+                      onSelect={(event) => {
+                        event.preventDefault()
+                        onReSyncEnvVars()
+                      }}
+                      disabled={isSyncEnvLoading}
+                    >
+                      Resync environment variables
+                    </Dropdown.Item>
+                    <Dropdown.Separator />
+                  </>
+                )}
+                <Dropdown.Item icon={<IconTrash size={14} />} onSelect={() => setIsOpen(true)}>
+                  Delete connection
+                </Dropdown.Item>
+              </>
+            }
+          >
+            <Button asChild iconRight={<IconChevronDown />} type="default">
+              <span>Manage</span>
+            </Button>
+          </Dropdown>
+        }
+      />
+
+      <ConfirmationModal
+        visible={isOpen}
+        danger={true}
+        header="Confirm to delete"
+        buttonLabel="Delete"
+        onSelectCancel={onCancel}
+        onSelectConfirm={onConfirm}
+      >
+        <Modal.Content>
+          <p className="py-4 text-sm text-light">
+            {`This action cannot be undone. Are you sure you want to delete this connection?`}
+          </p>
+        </Modal.Content>
+      </ConfirmationModal>
+    </>
+  )
+}
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx b/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx
index b80cd93b40a..a0be0c4b15c 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/IntegrationSettings.tsx
@@ -1,19 +1,25 @@
+import { useCallback, useState } from 'react'
+
+import { useParams } from 'common'
 import { ScaffoldDivider } from 'components/layouts/Scaffold'
+import { useIntegrationsGitHubInstalledConnectionDeleteMutation } from 'data/integrations/integrations-github-connection-delete-mutation'
 import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useIntegrationsVercelInstalledConnectionDeleteMutation } from 'data/integrations/integrations-vercel-installed-connection-delete-mutation'
 import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query'
-import { useSelectedOrganization } from 'hooks'
-import { getVercelConfigurationUrl } from 'lib/integration-utils'
+import { IntegrationProjectConnection } from 'data/integrations/integrations.types'
+import { getIntegrationConfigurationUrl } from 'lib/integration-utils'
 import Integration from './Integration'
+import SidePanelGitHubRepoLinker from './SidePanelGitHubRepoLinker'
 import SidePanelVercelProjectLinker from './SidePanelVercelProjectLinker'
 
 const IntegrationSettings = () => {
-  const org = useSelectedOrganization()
-  const { data } = useOrgIntegrationsQuery({ orgSlug: org?.slug })
+  const { slug } = useParams()
+  const { data } = useOrgIntegrationsQuery({ orgSlug: slug })
 
   const vercelIntegrations = data
     ?.filter((integration) => integration.integration.name === 'Vercel')
     .map((integration) => {
-      if (integration.metadata) {
+      if (integration.metadata && integration.integration.name === 'Vercel') {
         const avatarSrc =
           !integration.metadata.account.avatar && integration.metadata.account.type === 'Team'
             ? `https://vercel.com/api/www/avatar?teamId=${integration.metadata.account.team_id}&s=48`
@@ -39,11 +45,56 @@ const IntegrationSettings = () => {
   )
   const vercelProjectCount = vercelProjectsData?.length ?? 0
 
+  const [addPanelOpen, setAddPanelOpen] = useState<undefined | 'VERCEL' | 'GITHUB'>(undefined)
+  const [addPanelIntegrationId, setAddPanelIntegrationId] = useState<string | undefined>(undefined)
+
+  const onAddVercelConnection = useCallback((integrationId: string) => {
+    setAddPanelIntegrationId(integrationId)
+    setAddPanelOpen('VERCEL')
+  }, [])
+
+  const onAddGitHubConnection = useCallback((integrationId: string) => {
+    setAddPanelIntegrationId(integrationId)
+    setAddPanelOpen('GITHUB')
+  }, [])
+
+  const onCloseAddPanel = useCallback(() => {
+    setAddPanelOpen(undefined)
+    setAddPanelIntegrationId(undefined)
+  }, [])
+
+  const { mutateAsync: deleteVercelConnection } =
+    useIntegrationsVercelInstalledConnectionDeleteMutation()
+
+  const onDeleteVercelConnection = useCallback(
+    async (connection: IntegrationProjectConnection) => {
+      await deleteVercelConnection({
+        id: connection.id,
+        organization_integration_id: connection.organization_integration_id,
+        orgSlug: slug,
+      })
+    },
+    [deleteVercelConnection, slug]
+  )
+
+  const { mutateAsync: deleteGitHubConnection } =
+    useIntegrationsGitHubInstalledConnectionDeleteMutation()
+
+  const onDeleteGitHubConnection = useCallback(
+    async (connection: IntegrationProjectConnection) => {
+      await deleteGitHubConnection({
+        connectionId: connection.id,
+        integrationId: connection.organization_integration_id,
+        orgSlug: slug,
+      })
+    },
+    [deleteGitHubConnection, slug]
+  )
+
   return (
     <>
       <Integration
         title="Vercel"
-        orgName={org?.name}
         detail={`
 ## Vercel Integration
 
@@ -59,26 +110,25 @@ You can also link multiple Vercel Projects to the same Supabase project.
           vercelProjectCount > 0 && vercelIntegration !== undefined
             ? `
 Your Vercel connection has access to ${vercelProjectCount} Vercel Projects. 
-You can change the scope of the access for Supabase by configuring [here](${getVercelConfigurationUrl(
+You can change the scope of the access for Supabase by configuring [here](${getIntegrationConfigurationUrl(
                 vercelIntegration
               )}).
 `
             : undefined
         }
         integrations={vercelIntegrations}
+        onAddConnection={onAddVercelConnection}
+        onDeleteConnection={onDeleteVercelConnection}
       />
       <ScaffoldDivider />
       <Integration
         title="GitHub"
-        orgName={org?.name}
         detail={`
 ## GitHub Connections
 
 Connect any of your GitHub repositories to a project.
 `}
         description={`
-GitHub connections are coming soon.
-
 ### How will GitHub connections work?
 
 You will be able to connect a GitHub repository to a Supabase project. 
@@ -87,8 +137,19 @@ The GitHub app will watch for changes in your repository such as file changes, b
 These connections will be part of a GitHub workflow that is currently in development.
 `}
         integrations={githubIntegrations}
+        onAddConnection={onAddGitHubConnection}
+        onDeleteConnection={onDeleteGitHubConnection}
+      />
+      <SidePanelVercelProjectLinker
+        isOpen={addPanelOpen === 'VERCEL'}
+        organizationIntegrationId={addPanelIntegrationId}
+        onClose={onCloseAddPanel}
+      />
+      <SidePanelGitHubRepoLinker
+        isOpen={addPanelOpen === 'GITHUB'}
+        organizationIntegrationId={addPanelIntegrationId}
+        onClose={onCloseAddPanel}
       />
-      <SidePanelVercelProjectLinker />
     </>
   )
 }
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx
new file mode 100644
index 00000000000..82a5dd7cb25
--- /dev/null
+++ b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker.tsx
@@ -0,0 +1,151 @@
+import { useMemo } from 'react'
+
+import ProjectLinker from 'components/interfaces/Integrations/ProjectLinker'
+import { Markdown } from 'components/interfaces/Markdown'
+import { useIntegrationGitHubConnectionsCreateMutation } from 'data/integrations/integrations-github-connections-create-mutation'
+import { useGitHubReposQuery } from 'data/integrations/integrations-github-repos-query'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useSelectedOrganization } from 'hooks'
+import { EMPTY_ARR } from 'lib/void'
+import { SidePanel } from 'ui'
+import { useIntegrationsGitHubInstalledConnectionDeleteMutation } from 'data/integrations/integrations-github-connection-delete-mutation'
+import { IntegrationConnectionsCreateVariables } from 'data/integrations/types'
+
+const GITHUB_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" className="w-6">
+    <path
+      fill="#ffffff"
+      fillRule="evenodd"
+      d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+)
+
+export type SidePanelGitHubRepoLinkerProps = {
+  isOpen?: boolean
+  onClose?: () => void
+  organizationIntegrationId?: string
+  projectRef?: string
+}
+
+const SidePanelGitHubRepoLinker = ({
+  isOpen = false,
+  onClose,
+  organizationIntegrationId,
+  projectRef,
+}: SidePanelGitHubRepoLinkerProps) => {
+  const selectedOrganization = useSelectedOrganization()
+
+  const { data: integrationData } = useOrgIntegrationsQuery({
+    orgSlug: selectedOrganization?.slug,
+  })
+  const githubIntegrations = integrationData?.filter(
+    (integration) => integration.integration.name === 'GitHub'
+  ) // github
+  const existingProjectGithubConnection = githubIntegrations?.[0]?.connections.find(
+    (connection) => connection.supabase_project_ref === projectRef
+  )
+
+  /**
+   * Find the right integration
+   *
+   * we use the snapshot.organizationIntegrationId which should be set whenever this sidepanel is opened
+   */
+  const selectedIntegration = githubIntegrations?.find((x) => x.id === organizationIntegrationId)
+
+  /**
+   * Supabase projects available
+   */
+  const { data: supabaseProjectsData } = useProjectsQuery({
+    enabled: organizationIntegrationId !== undefined,
+  })
+
+  const supabaseProjects = useMemo(
+    () =>
+      supabaseProjectsData
+        ?.filter((project) => project.organization_id === selectedOrganization?.id)
+        .map((project) => ({ id: project.id.toString(), name: project.name, ref: project.ref })) ??
+      EMPTY_ARR,
+    [selectedOrganization?.id, supabaseProjectsData]
+  )
+
+  const { data: githubProjectsData } = useGitHubReposQuery(
+    {
+      integrationId: organizationIntegrationId,
+    },
+    { enabled: organizationIntegrationId !== undefined }
+  )
+
+  const githubRepos = useMemo(
+    () =>
+      githubProjectsData?.map((repo) => ({
+        id: repo.id.toString(),
+        name: repo.full_name,
+      })) ?? EMPTY_ARR,
+    [githubProjectsData]
+  )
+
+  const { mutate: createConnections, isLoading: isCreatingConnection } =
+    useIntegrationGitHubConnectionsCreateMutation({
+      onSuccess() {
+        onClose?.()
+      },
+    })
+
+  const { mutate: deleteGitHubConnection } =
+    useIntegrationsGitHubInstalledConnectionDeleteMutation()
+
+  const createGithubConnection = (variables: IntegrationConnectionsCreateVariables) => {
+    const existingProjectGithubConnection = githubIntegrations?.[0].connections.find(
+      (connection) => connection.supabase_project_ref === variables.connection.supabase_project_ref
+    )
+    if (existingProjectGithubConnection !== undefined && selectedOrganization !== undefined) {
+      deleteGitHubConnection({
+        connectionId: existingProjectGithubConnection.id,
+        integrationId: existingProjectGithubConnection.organization_integration_id,
+        orgSlug: selectedOrganization.slug,
+      })
+    }
+    createConnections(variables)
+  }
+
+  return (
+    <SidePanel
+      header={'Add GitHub repository'}
+      size="large"
+      visible={isOpen}
+      hideFooter
+      onCancel={() => onClose?.()}
+    >
+      <div className="py-10 flex flex-col gap-6 bg-body h-full">
+        <SidePanel.Content>
+          <Markdown
+            content={`
+### Choose repository to connect to
+
+Check the details below before proceeding
+          `}
+          />
+        </SidePanel.Content>
+        <SidePanel.Content className="flex flex-col gap-2">
+          <ProjectLinker
+            defaultSupabaseProjectRef={projectRef}
+            defaultForeignProjectId={existingProjectGithubConnection?.foreign_project_id}
+            organizationIntegrationId={selectedIntegration?.id}
+            foreignProjects={githubRepos}
+            supabaseProjects={supabaseProjects}
+            onCreateConnections={createGithubConnection}
+            installedConnections={selectedIntegration?.connections}
+            isLoading={isCreatingConnection}
+            integrationIcon={GITHUB_ICON}
+            choosePrompt="Choose GitHub Repo"
+          />
+        </SidePanel.Content>
+      </div>
+    </SidePanel>
+  )
+}
+
+export default SidePanelGitHubRepoLinker
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoSelection.tsx b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoSelection.tsx
index 4b978dd0ae2..53a4bb42ed8 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoSelection.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoSelection.tsx
@@ -3,7 +3,6 @@ import { Markdown } from 'components/interfaces/Markdown'
 // import { useIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
 import { useStore } from 'hooks'
 import { observer } from 'mobx-react-lite'
-import { useGithubConnectionConfigPanelSnapshot } from 'state/github-connection-config-panel'
 import { IconGitHub, IconSearch, Input, Select, SidePanel } from 'ui'
 
 // TO DO
@@ -13,8 +12,6 @@ const GitHubRepoSelection = () => {
   const { slug } = useParams()
   // const { data } = useIntegrationsQuery({ orgSlug: slug })
 
-  const githubConnectionConfigPanelSnapshot = useGithubConnectionConfigPanelSnapshot()
-
   return (
     <SidePanel
       header={'Add GitHub repository'}
diff --git a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
index 6beed7de861..f2b092bf758 100644
--- a/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
+++ b/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
@@ -1,16 +1,36 @@
-import { useMemo } from 'react'
+import { keyBy } from 'lodash'
+import { useCallback, useMemo } from 'react'
 
-import ProjectLinker from 'components/interfaces/Integrations/ProjectLinker'
+import { ENV_VAR_RAW_KEYS } from 'components/interfaces/Integrations/Integrations-Vercel.constants'
+import ProjectLinker, { ForeignProject } from 'components/interfaces/Integrations/ProjectLinker'
 import { Markdown } from 'components/interfaces/Markdown'
+import { vercelIcon } from 'components/to-be-cleaned/ListIcons'
 import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useIntegrationVercelConnectionsCreateMutation } from 'data/integrations/integrations-vercel-connections-create-mutation'
 import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useSelectedOrganization } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
 import { EMPTY_ARR } from 'lib/void'
-import { useGithubConnectionConfigPanelSnapshot } from 'state/github-connection-config-panel'
 import { SidePanel } from 'ui'
 
-const SidePanelVercelProjectLinker = () => {
+const VERCEL_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 512 512" className="w-6">
+    <path fill-rule="evenodd" d="M256,48,496,464H16Z" />
+  </svg>
+)
+
+export type SidePanelVercelProjectLinkerProps = {
+  isOpen?: boolean
+  onClose?: () => void
+  organizationIntegrationId?: string
+}
+
+const SidePanelVercelProjectLinker = ({
+  isOpen = false,
+  onClose,
+  organizationIntegrationId,
+}: SidePanelVercelProjectLinkerProps) => {
   const selectedOrganization = useSelectedOrganization()
 
   const { data: integrationData } = useOrgIntegrationsQuery({
@@ -20,19 +40,12 @@ const SidePanelVercelProjectLinker = () => {
     (integration) => integration.integration.name === 'Vercel'
   ) // vercel
 
-  const snapshot = useGithubConnectionConfigPanelSnapshot()
-
   /**
    * Find the right integration
    *
    * we use the snapshot.organizationIntegrationId which should be set whenever this sidepanel is opened
    */
-  const selectedIntegration = vercelIntegrations?.find(
-    (x) => x.id === snapshot.organizationIntegrationId
-  )
-
-  const organizationIntegrationId = snapshot.organizationIntegrationId
-  const open = snapshot.open
+  const selectedIntegration = vercelIntegrations?.find((x) => x.id === organizationIntegrationId)
 
   /**
    * Supabase projects available
@@ -58,14 +71,60 @@ const SidePanelVercelProjectLinker = () => {
   )
 
   const vercelProjects = useMemo(() => vercelProjectsData ?? EMPTY_ARR, [vercelProjectsData])
+  const vercelProjectsById = useMemo(() => keyBy(vercelProjects, 'id'), [vercelProjects])
+
+  const getForeignProjectIcon = useCallback(
+    (_project: ForeignProject) => {
+      const project = vercelProjectsById[_project.id]
+
+      return !project?.framework ? (
+        vercelIcon
+      ) : (
+        <img
+          src={`${BASE_PATH}/img/icons/frameworks/${project.framework}.svg`}
+          width={21}
+          height={21}
+          alt={`icon`}
+        />
+      )
+    },
+    [vercelProjectsById]
+  )
+
+  const { mutate: createConnections, isLoading: isCreatingConnection } =
+    useIntegrationVercelConnectionsCreateMutation({
+      onSuccess() {
+        onClose?.()
+      },
+    })
+
+  const onCreateConnections = useCallback(
+    (vars) => {
+      createConnections({
+        ...vars,
+        connection: {
+          ...vars.connection,
+          metadata: {
+            ...vars.connection.metadata,
+            supabaseConfig: {
+              projectEnvVars: {
+                write: true,
+              },
+            },
+          },
+        },
+      })
+    },
+    [createConnections]
+  )
 
   return (
     <SidePanel
       header={'Add GitHub repository'}
       size="large"
-      visible={open}
+      visible={isOpen}
       hideFooter
-      onCancel={() => snapshot.setOpen(false)}
+      onCancel={() => onClose?.()}
     >
       <div className="py-10 flex flex-col gap-6 bg-body h-full">
         <SidePanel.Content>
@@ -82,10 +141,24 @@ Check the details below before proceeding
             organizationIntegrationId={selectedIntegration?.id}
             foreignProjects={vercelProjects}
             supabaseProjects={supabaseProjects}
-            onCreateConnections={() => {
-              snapshot.setOpen(false)
-            }}
+            onCreateConnections={onCreateConnections}
             installedConnections={selectedIntegration?.connections}
+            isLoading={isCreatingConnection}
+            integrationIcon={VERCEL_ICON}
+            getForeignProjectIcon={getForeignProjectIcon}
+            choosePrompt="Choose Vercel Project"
+          />
+          <Markdown
+            content={`
+The following environment variables will be added:
+
+${ENV_VAR_RAW_KEYS.map((x) => {
+  return `
+  \n
+  - \`${x}\`
+`
+})}
+`}
           />
         </SidePanel.Content>
         <SidePanel.Content>
diff --git a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
index 3339804832c..1d05c9c572c 100644
--- a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
@@ -1,16 +1,20 @@
-import { FC } from 'react'
+import Link from 'next/link'
 import { Button, IconAlertCircle } from 'ui'
+
 import InformationBox from 'components/ui/InformationBox'
 import { MemberWithFreeProjectLimit } from 'data/organizations/free-project-limit-check-query'
-import Link from 'next/link'
 
-interface Props {
+interface FreeProjectLimitWarningProps {
   membersExceededLimit: MemberWithFreeProjectLimit[]
   orgLevelBilling: boolean
   orgSlug: string
 }
 
-const FreeProjectLimitWarning: FC<Props> = ({ membersExceededLimit, orgLevelBilling, orgSlug }) => {
+const FreeProjectLimitWarning = ({
+  membersExceededLimit,
+  orgLevelBilling,
+  orgSlug,
+}: FreeProjectLimitWarningProps) => {
   return (
     <div>
       <InformationBox
diff --git a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
index d8b4360ef66..6f45bc8ca34 100644
--- a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
@@ -28,9 +28,7 @@ const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps) => {
         <span className="font-mono truncate">{app.id}</span>
         <Button
           type="default"
-          icon={
-            isCopied ? <IconCheck className="text-brand-900" strokeWidth={3} /> : <IconClipboard />
-          }
+          icon={isCopied ? <IconCheck className="text-brand" strokeWidth={3} /> : <IconClipboard />}
           className="ml-2 px-1"
           onClick={() => {
             copyToClipboard(app.id)
diff --git a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
index 6157cf4748d..44d4a7851f1 100644
--- a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
+++ b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
@@ -45,11 +45,7 @@ const OAuthAppRow = ({ app, onSelectEdit, onSelectDelete }: OAuthAppRowProps) =>
           <Button
             type="default"
             icon={
-              isCopied ? (
-                <IconCheck className="text-brand-900" strokeWidth={3} />
-              ) : (
-                <IconClipboard />
-              )
+              isCopied ? <IconCheck className="text-brand" strokeWidth={3} /> : <IconClipboard />
             }
             className="ml-2 px-1"
             onClick={() => {
diff --git a/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx b/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx
index 9f08f55e877..0a0024a4a99 100644
--- a/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/RolesHelperModal/RolesHelperModal.tsx
@@ -1,11 +1,10 @@
-import { FC, Fragment, useState } from 'react'
-import { IconCheck, IconHelpCircle, IconInfo, Modal } from 'ui'
-import { PERMISSIONS_MAPPING } from './RolesHelperModal.constants'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { Fragment, useState } from 'react'
+import { IconCheck, IconHelpCircle, IconInfo, Modal } from 'ui'
 
-interface Props {}
+import { PERMISSIONS_MAPPING } from './RolesHelperModal.constants'
 
-const RolesHelperModal: FC<Props> = ({}) => {
+const RolesHelperModal = () => {
   const [showModal, setShowModal] = useState(false)
 
   const permissionColumnClassName = 'w-[40%] text-sm pl-4 font-bold'
diff --git a/studio/components/interfaces/Organization/Usage/Usage.constants.tsx b/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
index 0743b1ac3d8..d38ad187a07 100644
--- a/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
@@ -103,10 +103,11 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
 
           const isApproachingLimit = hasLimit && usageRatio >= USAGE_APPROACHING_THRESHOLD
           const isExceededLimit = hasLimit && usageRatio >= 1
+          const isCapped = usageMeta?.capped
 
           return (
             <div>
-              {(isApproachingLimit || isExceededLimit) && (
+              {(isApproachingLimit || isExceededLimit) && isCapped && (
                 <Alert
                   withIcon
                   variant={isExceededLimit ? 'danger' : 'warning'}
diff --git a/studio/components/interfaces/Reports/ReportFilterBar.tsx b/studio/components/interfaces/Reports/ReportFilterBar.tsx
index 5d4dce0d3bc..98cf3f8d25a 100644
--- a/studio/components/interfaces/Reports/ReportFilterBar.tsx
+++ b/studio/components/interfaces/Reports/ReportFilterBar.tsx
@@ -1,24 +1,25 @@
-import { FC, useState, ComponentProps } from 'react'
+import { ComponentProps, useState } from 'react'
 import {
-  Dropdown,
-  Popover,
   Button,
-  IconPlus,
-  IconChevronDown,
-  Select,
-  Input,
-  IconX,
-  IconKey,
+  Dropdown,
   IconBox,
+  IconChevronDown,
   IconCode,
   IconDatabase,
+  IconKey,
+  IconPlus,
+  IconX,
   IconZap,
+  Input,
+  Popover,
+  Select,
 } from 'ui'
+
 import DatePickers from '../Settings/Logs/Logs.DatePickers'
 import { REPORTS_DATEPICKER_HELPERS } from './Reports.constants'
 import { ReportFilterItem } from './Reports.types'
 
-interface Props {
+interface ReportFilterBarProps {
   filters: ReportFilterItem[]
   onAddFilter: (filter: ReportFilterItem) => void
   onRemoveFilters: (filters: ReportFilterItem[]) => void
@@ -80,7 +81,7 @@ const PRODUCT_FILTERS = [
   },
 ]
 
-const ReportFilterBar: FC<Props> = ({
+const ReportFilterBar = ({
   filters,
   onAddFilter,
   onDatepickerChange,
@@ -88,7 +89,7 @@ const ReportFilterBar: FC<Props> = ({
   datepickerFrom = '',
   onRemoveFilters,
   datepickerHelpers,
-}) => {
+}: ReportFilterBarProps) => {
   const filterKeys = [
     'request.path',
     'request.method',
diff --git a/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts b/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts
index 1b5bdee8ee3..2452670ac5f 100644
--- a/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts
+++ b/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts
@@ -15,21 +15,27 @@ export const getResultsMarkdown = (results: any[]) => {
 }
 
 export const createSqlSnippetSkeleton = ({
+  id,
   name,
   sql,
   owner_id,
+  project_id,
 }: {
+  id?: string
   name?: string
   sql?: string
   owner_id?: number
+  project_id?: number
 } = {}): UserContent<SqlSnippets.Content> => {
   return {
     ...NEW_SQL_SNIPPET_SKELETON,
+    id,
     ...(name && { name }),
     ...(owner_id && { owner_id }),
+    ...(project_id && { project_id }),
     content: {
       ...NEW_SQL_SNIPPET_SKELETON.content,
-      content_id: '',
+      content_id: id ?? '',
       sql: sql ?? '',
     },
   }
diff --git a/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx b/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
index 3c729c690d2..62c3cfb01ac 100644
--- a/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
+++ b/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite'
 
 import { useParams, useTelemetryProps } from 'common'
 import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.constants'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useCheckPermissions, useStore } from 'hooks'
 import { uuidv4 } from 'lib/helpers'
@@ -19,6 +20,7 @@ const SQLTemplates = observer(() => {
   const { ref } = useParams()
   const router = useRouter()
   const { profile } = useProfile()
+  const { project } = useProjectContext()
   const [sql, quickStart] = partition(SQL_TEMPLATES, { type: 'template' })
 
   const telemetryProps = useTelemetryProps()
@@ -28,10 +30,9 @@ const SQLTemplates = observer(() => {
     subject: { id: profile?.id },
   })
 
-  // [Joshen TODO] Removed optimistic query creation logic for now, need to figure out
-  // how to do that after using ids as part of the URL
   const handleNewQuery = async (sql: string, name: string) => {
-    if (!ref) return console.error('Project ref is required')
+    if (!project) return console.error('Project is required')
+    if (!profile) return console.error('Profile is required')
     if (!canCreateSQLSnippet) {
       return ui.setNotification({
         category: 'info',
@@ -40,10 +41,16 @@ const SQLTemplates = observer(() => {
     }
 
     try {
-      const snippet = createSqlSnippetSkeleton({ name, sql, owner_id: profile?.id })
-      const data = { ...snippet, id: uuidv4() }
-      snap.addSnippet(data as SqlSnippet, ref, true)
-      router.push(`/project/${ref}/sql/${data.id}`)
+      const snippet = createSqlSnippetSkeleton({
+        id: uuidv4(),
+        name,
+        sql,
+        owner_id: profile.id,
+        project_id: project.id,
+      })
+
+      snap.addSnippet(snippet as SqlSnippet, project.ref)
+      router.push(`/project/${project.ref}/sql/${snippet.id}`)
     } catch (error: any) {
       ui.setNotification({
         category: 'error',
diff --git a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index a39a293c3c7..05bc9c02c20 100644
--- a/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -47,7 +47,7 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
       {showSavedText ? (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <IconCheck className="text-brand-800" size={14} strokeWidth={3} />
+            <IconCheck className="text-brand-300" size={14} strokeWidth={3} />
           </Tooltip.Trigger>
           <Tooltip.Content side="bottom">
             <Tooltip.Arrow className="radix-tooltip-arrow" />
diff --git a/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx b/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
index ed3a3240a09..9104db59821 100644
--- a/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
+++ b/studio/components/interfaces/Settings/Addons/CustomDomainSidePanel.tsx
@@ -145,7 +145,7 @@ const CustomDomainSidePanel = () => {
             Custom domains allow you to present a branded experience to your users. You may set up
             your custom domain in the{' '}
             <Link href={`/project/${projectRef}/settings/general`}>
-              <a className="text-brand-900">General Settings</a>
+              <a className="text-brand">General Settings</a>
             </Link>{' '}
             page after enabling the add-on.
           </p>
diff --git a/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
index 6792ab6557e..c477c4e46ae 100644
--- a/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
+++ b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
@@ -1,5 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { FC, Fragment, useState } from 'react'
+import { Fragment, useState } from 'react'
+import { Input } from 'ui'
 import { AutoField } from 'uniforms-bootstrap4'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
@@ -13,7 +14,6 @@ import { useCheckPermissions, useStore } from 'hooks'
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { pluckObjectFields } from 'lib/helpers'
-import { Input } from 'ui'
 
 const ConnectionPooling = () => {
   const { project } = useProjectContext()
@@ -34,6 +34,8 @@ const ConnectionPooling = () => {
     'ignore_startup_parameters',
     'pool_mode',
     'pgbouncer_enabled',
+    'max_client_conn',
+    'connectionString',
   ]
   const bouncerInfo = isSuccess ? pluckObjectFields(formModel, BOUNCER_FIELDS) : {}
 
@@ -105,6 +107,8 @@ interface ConfigProps {
     ignore_startup_parameters: 'string'
     pool_mode: string
     pgbouncer_enabled: boolean
+    max_client_conn: number
+    connectionString: string
   }
   connectionInfo: {
     db_host: string
@@ -115,7 +119,7 @@ interface ConfigProps {
   }
 }
 
-export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, connectionInfo }) => {
+export const PgbouncerConfig = ({ projectRef, bouncerInfo, connectionInfo }: ConfigProps) => {
   const { ui } = useStore()
 
   const canUpdateConnectionPoolingConfiguration = useCheckPermissions(
@@ -123,11 +127,12 @@ export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, conn
     'projects'
   )
 
-  const [updates, setUpdates] = useState<any>({
+  const [updates, setUpdates] = useState({
     pool_mode: bouncerInfo.pool_mode || 'transaction',
     default_pool_size: bouncerInfo.default_pool_size || undefined,
     ignore_startup_parameters: bouncerInfo.ignore_startup_parameters || '',
     pgbouncer_enabled: bouncerInfo.pgbouncer_enabled,
+    max_client_conn: bouncerInfo.max_client_conn || undefined,
   })
 
   const updateConfig = async (updatedConfig: any) => {
@@ -174,6 +179,16 @@ export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, conn
         type: 'string',
         help: 'Defaults are either blank or "extra_float_digits"',
       },
+      max_client_conn: {
+        title: 'Max Client Connections',
+        oneOf: [{ type: 'integer' }, { type: 'null' }],
+        help: 'The maximum number of concurrent client connections allowed. Overrides default optimizations; refer to https://supabase.com/docs/guides/platform/custom-postgres-config#pooler-config',
+      },
+      default_pool_size: {
+        title: 'Default Pool Size',
+        oneOf: [{ type: 'integer' }, { type: 'null' }],
+        help: 'The maximum number of connections made to the underlying Postgres cluster, per user+db combination. Overrides default optimizations; refer to https://supabase.com/docs/guides/platform/custom-postgres-config#pooler-config',
+      },
     },
     required: ['pool_mode'],
     type: 'object',
@@ -182,7 +197,7 @@ export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, conn
   return (
     <div>
       <SchemaFormPanel
-        title="Connection Pooling"
+        title="Connection Pooling Custom Configuration"
         schema={formSchema}
         model={updates}
         submitLabel="Save"
@@ -219,6 +234,10 @@ export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, conn
               </div>
               <Divider light />
               <AutoField name="ignore_startup_parameters" />
+              <Divider light />
+              <AutoField name="max_client_conn" />
+              <Divider light />
+              <AutoField name="default_pool_size" />
             </>
           )}
           <Divider light />
@@ -239,11 +258,7 @@ export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, conn
             copy
             disabled
             label="Connection string"
-            value={
-              `postgres://${connectionInfo.db_user}:[YOUR-PASSWORD]@` +
-              `${connectionInfo.db_host}:${connectionInfo.db_port}` +
-              `/${connectionInfo.db_name}`
-            }
+            value={bouncerInfo.connectionString}
           />
         </div>
       </SchemaFormPanel>
diff --git a/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
index 16f5414552e..71edc6c46f7 100644
--- a/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
+++ b/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
@@ -1,24 +1,26 @@
-import Link from 'next/link'
-import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconAlertCircle, IconExternalLink, IconGlobe, IconLock } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams } from 'common'
+import Link from 'next/link'
+import { useState } from 'react'
+import { Button, IconAlertCircle, IconExternalLink, IconGlobe, IconLock } from 'ui'
 
-import { useCheckPermissions } from 'hooks'
-import { useParams } from 'common/hooks'
+import { FormHeader, FormPanel } from 'components/ui/Forms'
 import Panel from 'components/ui/Panel'
-import { FormPanel, FormHeader } from 'components/ui/Forms'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import AddRestrictionModal from './AddRestrictionModal'
-import RemoveRestrictionModal from './RemoveRestrictionModal'
-import DisallowAllModal from './DisallowAllModal'
-import AllowAllModal from './AllowAllModal'
 import { useNetworkRestrictionsQuery } from 'data/network-restrictions/network-restrictions-query'
+import { useCheckPermissions } from 'hooks'
+import AddRestrictionModal from './AddRestrictionModal'
+import AllowAllModal from './AllowAllModal'
+import DisallowAllModal from './DisallowAllModal'
+import RemoveRestrictionModal from './RemoveRestrictionModal'
 
-const AllowAllAccessButton: FC<{ disabled: boolean; onClick: (value: boolean) => void }> = ({
-  disabled,
-  onClick,
-}) => (
+interface AccessButtonProps {
+  disabled: boolean
+  onClick: (value: boolean) => void
+}
+
+const AllowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
   <Tooltip.Root delayDuration={0}>
     <Tooltip.Trigger>
       <Button type="default" disabled={disabled} onClick={() => onClick(true)}>
@@ -45,10 +47,7 @@ const AllowAllAccessButton: FC<{ disabled: boolean; onClick: (value: boolean) =>
   </Tooltip.Root>
 )
 
-const DisallowAllAccessButton: FC<{ disabled: boolean; onClick: (value: boolean) => void }> = ({
-  disabled,
-  onClick,
-}) => (
+const DisallowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
   <Tooltip.Root delayDuration={0}>
     <Tooltip.Trigger>
       <Button type="default" disabled={disabled} onClick={() => onClick(true)}>
diff --git a/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx b/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
index bcc89cb21ba..037469a7376 100644
--- a/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
+++ b/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
@@ -1,23 +1,22 @@
-import { FC, useState } from 'react'
-import { Alert, Button, Form, Input, Modal } from 'ui'
+import { useParams } from 'common'
+import { Alert, Button, Modal } from 'ui'
 
-import { useStore } from 'hooks'
-import { useParams } from 'common/hooks'
 import { useNetworkRestrictionsApplyMutation } from 'data/network-restrictions/network-retrictions-apply-mutation'
+import { useStore } from 'hooks'
 
-interface Props {
+interface RemoveRestrictionModalProps {
   visible: boolean
   restrictedIps: string[]
   selectedRestriction?: string
   onClose: () => void
 }
 
-const RemoveRestrictionModal: FC<Props> = ({
+const RemoveRestrictionModal = ({
   visible,
   restrictedIps,
   selectedRestriction,
   onClose,
-}) => {
+}: RemoveRestrictionModalProps) => {
   const { ui } = useStore()
   const { ref } = useParams()
   const { mutate: applyNetworkRestrictions, isLoading: isApplying } =
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
index abb91c8a96e..d2e68280594 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
@@ -69,6 +69,7 @@ const CustomDomainConfig = () => {
               ? 'To configure a custom domain for your project, please upgrade to the Pro plan with the custom domains add-on selected'
               : 'To configure a custom domain for your project, please enable the add-on'
           }
+          addon="customDomain"
         />
       ) : (
         <Panel>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
index f1512f48028..ebeb95f35c8 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainDelete.tsx
@@ -36,7 +36,7 @@ const CustomDomainDelete = ({ projectRef, customDomain }: CustomDomainDeleteProp
           <p className="text-xs text-scale-1100">Active custom domain:</p>
           <div className="flex items-center space-x-2">
             <code className="text-lg mx-0 flex items-center space-x-2">
-              <div className="h-2 w-2 rounded-full bg-brand-900" />
+              <div className="h-2 w-2 rounded-full bg-brand" />
               <span>{customDomain.hostname}</span>
             </code>
           </div>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
index ebf5ff5e3ec..3cce8d4f062 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
@@ -84,7 +84,7 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
                     <p>
                       You may also visit{' '}
                       <Link href={`https://whatsmydns.net/#TXT/${customDomain.hostname}`}>
-                        <a className="text-brand-900">here</a>
+                        <a className="text-brand">here</a>
                       </Link>{' '}
                       to check if your DNS has been propagated successfully before clicking verify.
                     </p>
@@ -93,7 +93,7 @@ const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomain
                   <p>
                     You may also visit{' '}
                     <Link href={`https://whatsmydns.net/#TXT/${customDomain.hostname}`}>
-                      <a className="text-brand-900">here</a>
+                      <a className="text-brand">here</a>
                     </Link>{' '}
                     to check if your DNS has been propagated successfully before clicking verify.
                   </p>
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
index b4ba127f6c1..c0d00b54c24 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
@@ -67,7 +67,7 @@ const ProjectUpgradeAlert = () => {
   return (
     <>
       <Alert
-        icon={<IconPackage className="text-brand-900" strokeWidth={1.5} />}
+        icon={<IconPackage className="text-brand" strokeWidth={1.5} />}
         variant="success"
         title="Your project can be upgraded to the latest version of Postgres"
       >
@@ -114,7 +114,7 @@ const ProjectUpgradeAlert = () => {
                                       <p className="flex items-center space-x-1">
                                         <span>This update has breaking changes. Read more </span>
                                         <Link href={change.url}>
-                                          <a className="text-brand-900 opacity-90 flex items-center space-x-1">
+                                          <a className="text-brand opacity-90 flex items-center space-x-1">
                                             <span>here</span>
                                             <IconExternalLink size="tiny" strokeWidth={2} />
                                           </a>
diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
index 896cb36b6bf..d599cb2cc96 100644
--- a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -262,7 +262,7 @@ const TransferProjectButton = () => {
                         <span>
                           {' '}
                           Your current organization will be granted{' '}
-                          <span className="text-brand-900">
+                          <span className="text-brand">
                             ${transferPreviewData.credits_on_source_organization}
                           </span>{' '}
                           in credits as proration.
@@ -277,7 +277,7 @@ const TransferProjectButton = () => {
                         <span>
                           {' '}
                           The target organization will be billed{' '}
-                          <span className="text-brand-900">
+                          <span className="text-brand">
                             ${transferPreviewData.costs_on_target_organization}
                           </span>{' '}
                           immediately to prorate for the remainder of the billing period.
diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
index ff8ce40428d..e3eb9a72d01 100644
--- a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
+++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
@@ -1,15 +1,11 @@
-import { FC } from 'react'
-
-import { useSelectedProject } from 'hooks'
-import Panel from 'components/ui/Panel'
-
-import TransferProjectButton from './TransferProjectButton'
-import { FormHeader } from 'components/ui/Forms'
 import { IconTruck } from 'ui'
 
-interface Props {}
+import { FormHeader } from 'components/ui/Forms'
+import Panel from 'components/ui/Panel'
+import { useSelectedProject } from 'hooks'
+import TransferProjectButton from './TransferProjectButton'
 
-const TransferProjectPanel: FC<Props> = ({}) => {
+const TransferProjectPanel = () => {
   const project = useSelectedProject()
 
   if (project === undefined) return <></>
diff --git a/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index a7a9d228670..b6f23047f79 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -1,24 +1,22 @@
-import { FC } from 'react'
-import { Button, Divider, IconX } from 'ui'
+import { Button, IconX } from 'ui'
 
-import { LogData, QueryType } from './Logs.types'
-
-import DatabaseApiSelectionRender from './LogSelectionRenderers/DatabaseApiSelectionRender'
-import DatabasePostgresSelectionRender from './LogSelectionRenderers/DatabasePostgresSelectionRender'
-import FunctionInvocationSelectionRender from './LogSelectionRenderers/FunctionInvocationSelectionRender'
-import FunctionLogsSelectionRender from './LogSelectionRenderers/FunctionLogsSelectionRender'
-import DefaultExplorerSelectionRenderer from './LogSelectionRenderers/DefaultExplorerSelectionRenderer'
-import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer'
+import CopyButton from 'components/ui/CopyButton'
+import Connecting from 'components/ui/Loading/Loading'
+import useSingleLog from 'hooks/analytics/useSingleLog'
 import {
+  LogsEndpointParams,
   isDefaultLogPreviewFormat,
   isUnixMicro,
-  LogsEndpointParams,
   unixMicroToIsoTimestamp,
 } from '.'
-import useSingleLog from 'hooks/analytics/useSingleLog'
-import Connecting from 'components/ui/Loading/Loading'
-import CopyButton from 'components/ui/CopyButton'
 import AuthSelectionRenderer from './LogSelectionRenderers/AuthSelectionRenderer'
+import DatabaseApiSelectionRender from './LogSelectionRenderers/DatabaseApiSelectionRender'
+import DatabasePostgresSelectionRender from './LogSelectionRenderers/DatabasePostgresSelectionRender'
+import DefaultExplorerSelectionRenderer from './LogSelectionRenderers/DefaultExplorerSelectionRenderer'
+import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer'
+import FunctionInvocationSelectionRender from './LogSelectionRenderers/FunctionInvocationSelectionRender'
+import FunctionLogsSelectionRender from './LogSelectionRenderers/FunctionLogsSelectionRender'
+import { LogData, QueryType } from './Logs.types'
 
 export interface LogSelectionProps {
   log: LogData | null
@@ -28,13 +26,13 @@ export interface LogSelectionProps {
   params: Partial<LogsEndpointParams>
 }
 
-const LogSelection: FC<LogSelectionProps> = ({
+const LogSelection = ({
   projectRef,
   log: partialLog,
   onClose,
   queryType,
   params = {},
-}) => {
+}: LogSelectionProps) => {
   const { logData: fullLog, isLoading } = useSingleLog(
     projectRef,
     queryType,
diff --git a/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx b/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
index 5c37144823d..7ac849da75b 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
+++ b/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
@@ -1,16 +1,16 @@
-import dayjs from 'dayjs'
-import { FC, useState } from 'react'
-import { Button, IconChevronRight, IconMaximize2, IconPlay } from 'ui'
-import Table from 'components/to-be-cleaned/Table'
 import { useRouter } from 'next/router'
-import SqlSnippetCode from './Logs.SqlSnippetCode'
-import { timestampLocalFormatter, TimestampLocalFormatter } from './LogsFormatters'
+import { useState } from 'react'
+import { Button, IconChevronRight, IconPlay } from 'ui'
 
-interface Props {
+import Table from 'components/to-be-cleaned/Table'
+import SqlSnippetCode from './Logs.SqlSnippetCode'
+import { timestampLocalFormatter } from './LogsFormatters'
+
+interface SavedQueriesItemProps {
   item: any
 }
 
-const SavedQueriesItem: FC<Props> = ({ item }: Props) => {
+const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
   const [expand, setExpand] = useState<boolean>(false)
 
   const router = useRouter()
@@ -33,14 +33,10 @@ const SavedQueriesItem: FC<Props> = ({ item }: Props) => {
           <span className="text-scale-1100">{item.description}</span>
         </Table.td>
         <Table.td className="">
-          <span className="text-scale-1100">
-            {timestampLocalFormatter(item.inserted_at)}
-          </span>
+          <span className="text-scale-1100">{timestampLocalFormatter(item.inserted_at)}</span>
         </Table.td>
         <Table.td className="">
-          <span className="text-scale-1100">
-            {timestampLocalFormatter(item.updated_at)}
-          </span>
+          <span className="text-scale-1100">{timestampLocalFormatter(item.updated_at)}</span>
         </Table.td>
         <Table.td className=" text-right">
           <Button
diff --git a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index 6ea93cd06f8..9a31cbe0b2d 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -276,7 +276,7 @@ export function jsonSyntaxHighlight(input: Object) {
         if (/:$/.test(match)) {
           cls = 'key text-scale-1200'
         } else {
-          cls = 'string text-brand-1100'
+          cls = 'string text-brand-600'
         }
       } else if (/true|false/.test(match)) {
         cls = 'boolean text-blue-900'
diff --git a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
index b4ab97e9727..c59b4848e40 100644
--- a/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/PreviewFilterPanel.tsx
@@ -1,12 +1,13 @@
-import React, { FC, useEffect, useState } from 'react'
-import { Button, Input, IconRefreshCw, IconSearch, IconExternalLink, IconEye, IconEyeOff } from 'ui'
+import { useEffect, useState } from 'react'
+import { Button, IconExternalLink, IconEye, IconEyeOff, IconRefreshCw, IconSearch, Input } from 'ui'
+
+import CSVButton from 'components/ui/CSVButton'
 import { Filters, LogSearchCallback, LogTemplate, PREVIEWER_DATEPICKER_HELPERS } from '.'
+import DatePickers from './Logs.DatePickers'
 import { FILTER_OPTIONS, LogsTableName } from './Logs.constants'
 import LogsFilterPopover from './LogsFilterPopover'
-import DatePickers from './Logs.DatePickers'
-import CSVButton from 'components/ui/CSVButton'
 
-interface Props {
+interface PreviewFilterPanelProps {
   defaultSearchValue?: string
   defaultToValue?: string
   defaultFromValue?: string
@@ -29,7 +30,7 @@ interface Props {
 /**
  * Logs control panel header + wrapper
  */
-const PreviewFilterPanel: FC<Props> = ({
+const PreviewFilterPanel = ({
   isLoading,
   newCount,
   onRefresh,
@@ -45,7 +46,7 @@ const PreviewFilterPanel: FC<Props> = ({
   onFiltersChange,
   filters,
   table,
-}) => {
+}: PreviewFilterPanelProps) => {
   const [search, setSearch] = useState('')
 
   const hasEdits = search !== defaultSearchValue
diff --git a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
index c0a9419c7e8..530286775ea 100644
--- a/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
+++ b/studio/components/interfaces/Settings/Vault/Secrets/SecretRow.tsx
@@ -66,11 +66,11 @@ const SecretRow: FC<Props> = ({ secret, onSelectEdit, onSelectRemove }) => {
           <IconKey
             size={14}
             strokeWidth={2}
-            className="text-scale-1000 transition group-hover:text-brand-900"
+            className="text-scale-1000 transition group-hover:text-brand"
           />
           <Link href={`/project/${ref}/settings/vault/keys?id=${secret.key_id}`}>
             <a
-              className="text-scale-1100 font-mono text-xs cursor-pointer transition group-hover:text-brand-900"
+              className="text-scale-1100 font-mono text-xs cursor-pointer transition group-hover:text-brand"
               title={secret.key_id}
             >
               {secret.key_id}
diff --git a/studio/components/interfaces/Settings/Vault/VaultToggle.tsx b/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
index e96511cf63c..b41cc8f6910 100644
--- a/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
+++ b/studio/components/interfaces/Settings/Vault/VaultToggle.tsx
@@ -1,18 +1,15 @@
-import Link from 'next/link'
-import { observer } from 'mobx-react-lite'
-import { FC, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams, useTheme } from 'common'
+import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+import { useState } from 'react'
 import { Button, IconExternalLink } from 'ui'
 
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useCheckPermissions, useStore } from 'hooks'
-import { useParams } from 'common/hooks'
 import { BASE_PATH } from 'lib/constants'
-import { useTheme } from 'common'
 
-interface Props {}
-
-const VaultToggle: FC<Props> = () => {
+const VaultToggle = () => {
   const { meta, ui } = useStore()
   const { ref } = useParams()
   const { isDarkMode } = useTheme()
diff --git a/studio/components/interfaces/Storage/CreateBucketModal.tsx b/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 3d098675683..abb5cb45596 100644
--- a/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -209,7 +209,7 @@ const CreateBucketModal = ({ visible, onClose }: CreateBucketModalProps) => {
                               <p className="text-scale-1000 text-sm">
                                 Note: The{' '}
                                 <Link href={`/project/${ref}/settings/storage`}>
-                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                  <a className="text-brand opacity-80 hover:opacity-100 transition">
                                     global upload limit
                                   </a>
                                 </Link>{' '}
diff --git a/studio/components/interfaces/Storage/EditBucketModal.tsx b/studio/components/interfaces/Storage/EditBucketModal.tsx
index 650c68f2828..59b691e7435 100644
--- a/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -221,7 +221,7 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
                               <p className="text-scale-1000 text-sm">
                                 Note: The{' '}
                                 <Link href={`/project/${ref}/settings/storage`}>
-                                  <a className="text-brand-900 opacity-80 hover:opacity-100 transition">
+                                  <a className="text-brand opacity-80 hover:opacity-100 transition">
                                     global upload limit
                                   </a>
                                 </Link>{' '}
diff --git a/studio/components/interfaces/Support/Success.tsx b/studio/components/interfaces/Support/Success.tsx
index 1fcd9d937e3..7fad08f1770 100644
--- a/studio/components/interfaces/Support/Success.tsx
+++ b/studio/components/interfaces/Support/Success.tsx
@@ -18,8 +18,8 @@ const Success: FC<Props> = ({ sentCategory = '' }) => {
   return (
     <div className="mt-10 w-[620px] flex flex-col items-center space-y-4">
       <div className="relative">
-        <IconMail strokeWidth={1.5} size={60} className="text-brand-900" />
-        <div className="h-6 w-6 rounded-full bg-brand-900 absolute bottom-1 -right-1.5 flex items-center justify-center">
+        <IconMail strokeWidth={1.5} size={60} className="text-brand" />
+        <div className="h-6 w-6 rounded-full bg-brand absolute bottom-1 -right-1.5 flex items-center justify-center">
           <IconCheck strokeWidth={4} size={18} />
         </div>
       </div>
diff --git a/studio/components/interfaces/Support/SupportForm.tsx b/studio/components/interfaces/Support/SupportForm.tsx
index d4a4f692e9f..65a25739e63 100644
--- a/studio/components/interfaces/Support/SupportForm.tsx
+++ b/studio/components/interfaces/Support/SupportForm.tsx
@@ -655,6 +655,9 @@ const SupportForm = ({ setSentCategory }: SupportFormProps) => {
                         <p className="text-scale-1000">We will contact you at</p>
                         <p className="text-scale-1200 font-medium">{respondToEmail}</p>
                       </div>
+                      <div className="flex items-center space-x-1 justify-end block text-sm mt-0 mb-2">
+                        <p className="text-scale-1000">Please ensure you haven't blocked Hubspot in your emails</p>
+                      </div>
                       <div className="flex justify-end">
                         <Button
                           htmlType="submit"
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.constants.ts
index 407f2798911..16c4174ddee 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.constants.ts
@@ -31,6 +31,11 @@ const defaultTextBasedValues: Suggestion[] = [
 // using meta-store's extensions to generate this partially on top of vanilla expressions
 export const typeExpressionSuggestions: Dictionary<Suggestion[]> = {
   uuid: [
+    {
+      name: 'auth.uid()',
+      value: 'auth.uid()',
+      description: "Returns the user's ID when rows are added or updated through the API",
+    },
     {
       name: 'gen_random_uuid()',
       value: 'gen_random_uuid()',
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index fb4c5d6f350..c98ba5e41fa 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -367,7 +367,7 @@ const ColumnEditor = ({
                       <p>
                         You will need to{' '}
                         <Link href={`/project/${ref}/database/extensions?filter=pgsodium`}>
-                          <a className="text-brand-800 hover:text-brand-900 transition">install</a>
+                          <a className="text-brand-300 hover:text-brand transition">install</a>
                         </Link>{' '}
                         the extension <code className="text-xs">pgsodium</code> first before being
                         able to encrypt your column.
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
index df57a2cf8f2..9c9dc4f4d08 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnForeignKey.tsx
@@ -134,8 +134,7 @@ const ColumnForeignKeyAdded: FC<{
         <div className="flex flex-col space-y-4 text-scale-1100">
           <div className="space-y-2">
             <span>
-              The following foreign key relation will be{' '}
-              <span className="text-brand-900">added</span>:
+              The following foreign key relation will be <span className="text-brand">added</span>:
             </span>
             <div className="flex items-center space-x-2 text-scale-1200">
               <span
@@ -234,8 +233,7 @@ const ColumnForeignKeyUpdated: FC<{
         <div className="flex flex-col space-y-4">
           <div className="space-y-2">
             <p>
-              The foreign key relation will be <span className="text-brand-900">updated</span> as
-              such:
+              The foreign key relation will be <span className="text-brand">updated</span> as such:
             </p>
             <div className="flex items-start space-x-2">
               <code className="text-xs font-mono">{columnName}</code>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index d40c56df3ee..65871c80afd 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -1,16 +1,16 @@
-import React, { FC, useEffect, useState } from 'react'
-import { get, find, isEmpty, sortBy } from 'lodash'
+import type { PostgresColumn, PostgresSchema, PostgresTable } from '@supabase/postgres-meta'
 import { Dictionary } from 'components/grid'
-import { SidePanel, Input, Listbox, IconHelpCircle, IconDatabase, Toggle } from 'ui'
-import type { PostgresTable, PostgresColumn, PostgresSchema } from '@supabase/postgres-meta'
+import { find, get, isEmpty, sortBy } from 'lodash'
+import { FC, useEffect, useState } from 'react'
+import { IconDatabase, IconHelpCircle, Input, Listbox, SidePanel } from 'ui'
 
-import { useStore } from 'hooks'
-import ActionBar from '../ActionBar'
-import { ForeignKey } from './ForeignKeySelector.types'
-import { ColumnField } from '../SidePanelEditor.types'
 import InformationBox from 'components/ui/InformationBox'
 import { FOREIGN_KEY_DELETION_ACTION } from 'data/database/database-query-constants'
+import { useStore } from 'hooks'
+import ActionBar from '../ActionBar'
+import { ColumnField } from '../SidePanelEditor.types'
 import { FOREIGN_KEY_DELETION_OPTIONS } from './ForeignKeySelector.constants'
+import { ForeignKey } from './ForeignKeySelector.types'
 import { generateDeletionActionDescription } from './ForeignKeySelector.utils'
 
 interface Props {
@@ -98,10 +98,13 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
     }
     const table = find(tables, { id: tableId })
     if (table) {
+      const primaryColumn = table.primary_keys[0].name
+      const firstColumn = table.columns?.length ? table.columns[0].name : undefined
+
       setSelectedForeignKey({
         schema: table.schema,
         table: table.name,
-        column: table.columns?.length ? table.columns[0].name : undefined,
+        column: primaryColumn ?? firstColumn,
         deletionAction: FOREIGN_KEY_DELETION_ACTION.NO_ACTION,
       })
     }
@@ -330,7 +333,7 @@ const ForeignKeySelector: FC<Props> = ({ column, visible = false, closePanel, sa
                         href="https://supabase.com/docs/guides/database/postgres/cascade-deletes"
                         target="_blank"
                         rel="noreferrer"
-                        className="text-brand-900 opacity-75"
+                        className="text-brand opacity-75"
                       >
                         Learn more about cascade deletes
                       </a>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
index a77e38a9039..a878ab46238 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
@@ -20,7 +20,7 @@ const columnRender = (name: string, isPrimaryKey = false) => {
       {isPrimaryKey && (
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger>
-            <div className="text-brand-900">
+            <div className="text-brand">
               <IconKey size="tiny" strokeWidth={2} />
             </div>
           </Tooltip.Trigger>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
index 585853061ee..ddee6d5ee0c 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts
@@ -2,7 +2,15 @@ import { sortBy, concat } from 'lodash'
 import { PostgresDataTypeOption } from './SidePanelEditor.types'
 
 export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ'
-export const NUMERICAL_TYPES = ['int2', 'int4', 'int8', 'float4', 'float8', 'numeric']
+export const NUMERICAL_TYPES = [
+  'int2',
+  'int4',
+  'int8',
+  'float4',
+  'float8',
+  'numeric',
+  'double precision',
+]
 export const JSON_TYPES = ['json', 'jsonb']
 export const TEXT_TYPES = ['text', 'varchar']
 
@@ -11,7 +19,7 @@ export const DATE_TYPES = ['date']
 export const TIME_TYPES = ['time', 'timetz']
 export const DATETIME_TYPES = concat(TIMESTAMP_TYPES, DATE_TYPES, TIME_TYPES)
 
-export const OTHER_DATA_TYPES = ['uuid', 'bool']
+export const OTHER_DATA_TYPES = ['uuid', 'bool', 'vector']
 export const POSTGRES_DATA_TYPES = sortBy(
   concat(NUMERICAL_TYPES, JSON_TYPES, TEXT_TYPES, DATETIME_TYPES, OTHER_DATA_TYPES)
 )
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
index 286d80c2665..73506ebc68e 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
@@ -57,7 +57,7 @@ const SpreadSheetFileUpload: FC<Props> = ({
           onClick={() => (uploadButtonRef.current as any)?.click()}
         >
           <p className="text-sm">
-            Drag and drop, or <span className="text-brand-900">browse</span> your files
+            Drag and drop, or <span className="text-brand">browse</span> your files
           </p>
         </div>
       ) : (
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.constants.ts
index d0dac2adb38..7b924cffdbe 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.constants.ts
@@ -24,7 +24,7 @@ export const DEFAULT_COLUMNS: ColumnField[] = [
     defaultValue: 'now()',
     check: null,
     foreignKey: undefined,
-    isNullable: true,
+    isNullable: false,
     isUnique: false,
     isArray: false,
     isPrimaryKey: false,
diff --git a/studio/components/layouts/AppLayout/AppHeader.tsx b/studio/components/layouts/AppLayout/AppHeader.tsx
index e6bcbe9bca9..d845b167b32 100644
--- a/studio/components/layouts/AppLayout/AppHeader.tsx
+++ b/studio/components/layouts/AppLayout/AppHeader.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import { useParams } from 'common'
-import { useFlag, useSelectedOrganization } from 'hooks'
+import { useFlag, useSelectedOrganization, useSelectedProject } from 'hooks'
 import FeedbackDropdown from '../ProjectLayout/LayoutHeader/FeedbackDropdown'
 import HelpPopover from '../ProjectLayout/LayoutHeader/HelpPopover'
 import NotificationsPopover from '../ProjectLayout/LayoutHeader/NotificationsPopover'
@@ -11,18 +11,24 @@ import ProjectDropdown from './ProjectDropdown'
 import SettingsButton from './SettingsButton'
 import UserSettingsDropdown from './UserSettingsDropdown'
 import BranchDropdown from './BranchDropdown'
+import EnableBranchingButton from './EnableBranchingButton/EnableBranchingButton'
 
 const AppHeader = () => {
   const router = useRouter()
   const { ref } = useParams()
+  const project = useSelectedProject()
   const organization = useSelectedOrganization()
   const enableBranchManagement = useFlag('branchManagement')
 
+  const isBranchingSupported = project?.cloud_provider === 'FLY'
+  const isBranchingEnabled =
+    project?.is_branch_enabled === true || project?.parent_project_ref !== undefined
+
   return (
     <div className="flex items-center justify-between px-4 py-1 bg-scale-200 border-b">
-      <div className="flex items-center space-x-4">
+      <div className="flex items-center space-x-1">
         <Link href={organization !== undefined ? `/org/${organization?.slug}` : '/'}>
-          <a className="block">
+          <a className="block mr-3">
             <img
               src={`${router.basePath}/img/supabase-logo.svg`}
               alt="Supabase"
@@ -32,7 +38,9 @@ const AppHeader = () => {
         </Link>
         <OrganizationDropdown />
         {ref !== undefined && <ProjectDropdown />}
-        {ref !== undefined && enableBranchManagement && <BranchDropdown />}
+        {ref !== undefined && isBranchingSupported && enableBranchManagement && (
+          <>{isBranchingEnabled ? <BranchDropdown /> : <EnableBranchingButton />}</>
+        )}
       </div>
 
       <div className="flex items-center gap-4">
diff --git a/studio/components/layouts/AppLayout/BranchDropdown.tsx b/studio/components/layouts/AppLayout/BranchDropdown.tsx
index 4e7e3378cb1..6eb09304f71 100644
--- a/studio/components/layouts/AppLayout/BranchDropdown.tsx
+++ b/studio/components/layouts/AppLayout/BranchDropdown.tsx
@@ -1,10 +1,11 @@
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useRef, useState } from 'react'
-import Link from 'next/link'
 
 import { useParams } from 'common'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { Branch, useBranchesQuery } from 'data/branches/branches-query'
+import { useSelectedProject } from 'hooks'
 import {
   Badge,
   Button,
@@ -18,12 +19,11 @@ import {
   IconCheck,
   IconCode,
   IconGitBranch,
-  IconPlus,
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
+  ScrollArea,
 } from 'ui'
-import { useSelectedProject } from 'hooks'
 import { sanitizeRoute } from './ProjectDropdown'
 
 const BranchLink = ({
@@ -126,14 +126,16 @@ const BranchDropdown = () => {
                 <CommandList_Shadcn_>
                   <CommandEmpty_Shadcn_>No branches found</CommandEmpty_Shadcn_>
                   <CommandGroup_Shadcn_>
-                    {branches?.map((branch) => (
-                      <BranchLink
-                        key={branch.id}
-                        branch={branch}
-                        isSelected={branch.id === selectedBranch?.id}
-                        setOpen={setOpen}
-                      />
-                    ))}
+                    <ScrollArea className={(branches || []).length > 7 ? 'h-[210px]' : ''}>
+                      {branches?.map((branch) => (
+                        <BranchLink
+                          key={branch.id}
+                          branch={branch}
+                          isSelected={branch.id === selectedBranch?.id}
+                          setOpen={setOpen}
+                        />
+                      ))}
+                    </ScrollArea>
                   </CommandGroup_Shadcn_>
                   <CommandGroup_Shadcn_ className="border-t">
                     <Link passHref href={`/project/${ref}/branches`}>
diff --git a/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx b/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx
new file mode 100644
index 00000000000..a6c48cad0d4
--- /dev/null
+++ b/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingWaitlistPopover.tsx
@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import {
+  Badge,
+  Button,
+  IconGitBranch,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+const BranchingWaitlistPopover = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button type="default" icon={<IconGitBranch strokeWidth={1.5} />}>
+          Enable branching
+        </Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_
+        align="start"
+        side="bottom"
+        className="space-y-4 w-80"
+        style={{ marginLeft: '-18px' }}
+      >
+        <Badge color="scale">Alpha Testing</Badge>
+        <div className="flex items-center space-x-2">
+          <IconGitBranch strokeWidth={2} />
+          <p>Database Branching</p>
+        </div>
+        <p className="text-xs text-light">
+          Register for early access and you'll be contacted by email when your organization is
+          enrolled in database branching.
+        </p>
+        <div className="flex items-center space-x-2">
+          <Link passHref href={'/'}>
+            <a rel="noreferrer" target="_blank">
+              <Button>Join waitlist</Button>
+            </a>
+          </Link>
+          <Link passHref href={'/'}>
+            <a rel="noreferrer" target="_blank">
+              <Button type="default">View the docs</Button>
+            </a>
+          </Link>
+        </div>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
+
+export default BranchingWaitlistPopover
diff --git a/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx b/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx
new file mode 100644
index 00000000000..a25064e2241
--- /dev/null
+++ b/studio/components/layouts/AppLayout/EnableBranchingButton/EnableBranchingButton.tsx
@@ -0,0 +1,196 @@
+import { useParams } from 'common'
+import { useEffect, useState } from 'react'
+import { Button, IconFileText, IconGitBranch, Modal } from 'ui'
+
+import SidePanelGitHubRepoLinker from 'components/interfaces/Organization/IntegrationSettings/SidePanelGitHubRepoLinker'
+import AlertError from 'components/ui/AlertError'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import { useBranchCreateMutation } from 'data/branches/branch-create-mutation'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { IntegrationName } from 'data/integrations/integrations.types'
+import { useSelectedOrganization, useStore } from 'hooks'
+import { useAppUiStateSnapshot } from 'state/app'
+import BranchingWaitlistPopover from './BranchingWaitlistPopover'
+import GithubRepositorySelection from './GithubRepositorySelection'
+import VercelProjectSelection from './VercelProjectSelection'
+
+const EnableBranchingButton = () => {
+  const { ui } = useStore()
+  const { ref } = useParams()
+  const selectedOrg = useSelectedOrganization()
+
+  const snap = useAppUiStateSnapshot()
+  const [selectedBranch, setSelectedBranch] = useState<string>()
+  const [addConnectionType, setAddConnectionType] = useState<IntegrationName>()
+
+  useEffect(() => {
+    if (snap.showEnableBranchingModal) setSelectedBranch(undefined)
+  }, [snap.showEnableBranchingModal])
+
+  const {
+    data: integrations,
+    error: integrationsError,
+    isLoading: isLoadingIntegrations,
+    isSuccess: isSuccessIntegrations,
+    isError: isErrorIntegrations,
+  } = useOrgIntegrationsQuery({
+    orgSlug: selectedOrg?.slug,
+  })
+
+  const { mutate: createBranch, isLoading: isCreating } = useBranchCreateMutation({
+    onSuccess: () => {
+      ui.setNotification({ category: 'success', message: `Successfully created new branch` })
+      snap.setShowEnableBranchingModal(false)
+    },
+  })
+
+  const hasAccessToBranching =
+    selectedOrg?.opt_in_tags?.includes('PREVIEW_BRANCHES_OPT_IN') ?? false
+
+  const hasGithubIntegrationInstalled =
+    integrations?.some((integration) => integration.integration.name === 'GitHub') ?? false
+  const githubIntegration = integrations?.find(
+    (integration) =>
+      integration.integration.name === 'GitHub' &&
+      integration.connections.some((connection) => connection.supabase_project_ref === ref)
+  )
+
+  // [Joshen] Leaving this out first
+  // const hasVercelIntegrationInstalled =
+  //   integrations?.some((integration) => integration.integration.name === 'Vercel') ?? false
+  // const vercelIntegration = integrations?.find(
+  //   (integration) =>
+  //     integration.integration.name === 'Vercel' &&
+  //     integration.connections.some((connection) => connection.supabase_project_ref === ref)
+  // )
+
+  const onEnableBranching = () => {
+    if (!ref) return console.error('Project ref is required')
+    if (!selectedBranch) return console.error('No branch selected')
+    createBranch({ projectRef: ref, branchName: selectedBranch, gitBranch: selectedBranch })
+  }
+
+  if (!hasAccessToBranching) {
+    return <BranchingWaitlistPopover />
+  }
+
+  return (
+    <>
+      <Button
+        icon={<IconGitBranch strokeWidth={1.5} />}
+        type="default"
+        onClick={() => snap.setShowEnableBranchingModal(true)}
+      >
+        Enable branching
+      </Button>
+      <Modal
+        hideFooter
+        visible={snap.showEnableBranchingModal}
+        onCancel={() => snap.setShowEnableBranchingModal(false)}
+        className="!bg"
+        size="medium"
+      >
+        <Modal.Content className="px-7 py-5 flex items-center space-x-4">
+          <IconGitBranch strokeWidth={2} size={20} />
+          <div>
+            <p className="text">Enable database branching</p>
+            <p className="text-sm text-light">Management environments in Supabase</p>
+          </div>
+        </Modal.Content>
+
+        {isLoadingIntegrations && (
+          <>
+            <Modal.Separator />
+            <Modal.Content className="px-7 py-6">
+              <GenericSkeletonLoader />
+            </Modal.Content>
+            <Modal.Separator />
+          </>
+        )}
+
+        {isErrorIntegrations && (
+          <>
+            <Modal.Separator />
+            <Modal.Content className="px-7 py-6">
+              <AlertError error={integrationsError} subject="Failed to retrieve integrations" />
+            </Modal.Content>
+            <Modal.Separator />
+          </>
+        )}
+
+        {isSuccessIntegrations && (
+          <>
+            <GithubRepositorySelection
+              integration={githubIntegration}
+              selectedBranch={selectedBranch}
+              hasGithubIntegrationInstalled={hasGithubIntegrationInstalled}
+              setSelectedBranch={setSelectedBranch}
+              onSelectConnectRepo={() => setAddConnectionType('GitHub')}
+            />
+
+            {/* <VercelProjectSelection integration={vercelIntegration} /> */}
+
+            {/* <Modal.Separator /> */}
+          </>
+        )}
+
+        {/* [Joshen TODO] Feels like this copy writing needs some relooking before we ship, make sure they are factual too */}
+        <Modal.Content className="px-7 py-6 flex flex-col gap-3">
+          <p className="text-sm text-light">Please keep in mind the following:</p>
+          <div className="flex flex-row gap-4">
+            <div>
+              <figure className="w-10 h-10 rounded-md bg-warning-200 border border-warning-300 flex items-center justify-center">
+                <IconFileText className="text-amber-900" size={20} strokeWidth={2} />
+              </figure>
+            </div>
+            <div>
+              <p className="text-sm text">
+                You will not be able to use the dashboard to make changes to the database
+              </p>
+              <p className="text-sm text-light">
+                Schema changes for database preview branches must be done via Git. We are
+                nonetheless working on allowing the dashboard to make schema changes for preview
+                branches.
+              </p>
+            </div>
+          </div>
+        </Modal.Content>
+
+        <Modal.Separator />
+
+        <Modal.Content className="px-7">
+          <div className="flex items-center space-x-2 py-2 pb-4">
+            <Button
+              size="medium"
+              block
+              disabled={isCreating}
+              type="default"
+              onClick={() => snap.setShowEnableBranchingModal(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              size="medium"
+              block
+              disabled={selectedBranch === undefined || isCreating}
+              loading={isCreating}
+              type="primary"
+              onClick={() => onEnableBranching()}
+            >
+              I understand, enable branching
+            </Button>
+          </div>
+        </Modal.Content>
+      </Modal>
+
+      <SidePanelGitHubRepoLinker
+        isOpen={addConnectionType === 'GitHub'}
+        projectRef={ref}
+        organizationIntegrationId={githubIntegration?.id}
+        onClose={() => setAddConnectionType(undefined)}
+      />
+    </>
+  )
+}
+
+export default EnableBranchingButton
diff --git a/studio/components/layouts/AppLayout/EnableBranchingButton/GithubRepositorySelection.tsx b/studio/components/layouts/AppLayout/EnableBranchingButton/GithubRepositorySelection.tsx
new file mode 100644
index 00000000000..b966cb1d4e7
--- /dev/null
+++ b/studio/components/layouts/AppLayout/EnableBranchingButton/GithubRepositorySelection.tsx
@@ -0,0 +1,192 @@
+import clsx from 'clsx'
+import { useParams } from 'common'
+import Link from 'next/link'
+import { useRef, useState } from 'react'
+import {
+  Badge,
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  IconCheck,
+  IconChevronDown,
+  Modal,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+import {
+  EmptyIntegrationConnection,
+  IntegrationConnection,
+} from 'components/interfaces/Integrations/IntegrationPanels'
+import AlertError from 'components/ui/AlertError'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useGithubBranchesQuery } from 'data/integrations/integrations-github-branches-query'
+import { Integration } from 'data/integrations/integrations.types'
+
+interface GithubRepositorySelectionProps {
+  integration?: Integration
+  selectedBranch?: string
+  hasGithubIntegrationInstalled: boolean
+  setSelectedBranch: (name: string) => void
+  onSelectConnectRepo: () => void
+}
+
+const GithubRepositorySelection = ({
+  integration,
+  selectedBranch,
+  hasGithubIntegrationInstalled,
+  setSelectedBranch,
+  onSelectConnectRepo,
+}: GithubRepositorySelectionProps) => {
+  const { ref } = useParams()
+  const [open, setOpen] = useState(false)
+  const comboBoxRef = useRef<HTMLButtonElement>(null)
+
+  const githubConnection = integration?.connections.find(
+    (connection) => connection.supabase_project_ref === ref
+  )
+  const [repoOwner, repoName] = githubConnection?.metadata.name.split('/') ?? []
+
+  const {
+    data: githubBranches,
+    error: githubBranchesError,
+    isLoading: isLoadingBranches,
+    isSuccess: isSuccessBranches,
+    isError: isErrorBranches,
+  } = useGithubBranchesQuery({
+    organizationIntegrationId: integration?.id,
+    repoOwner,
+    repoName,
+  })
+
+  return (
+    <div
+      className={clsx(
+        'border-t border-b',
+        !hasGithubIntegrationInstalled ? 'border-warning-300 bg-warning-200' : ''
+      )}
+    >
+      <Modal.Content className="px-7">
+        <div className="py-6">
+          <div className="flex items-center space-x-2">
+            <p>Git Connection</p>
+            <Badge color="amber">Required</Badge>
+          </div>
+          <p className="text-sm text-light !mb-4">
+            {githubConnection !== undefined
+              ? 'Your database preview branches will be based on the branches in the following repository that your project is connected with:'
+              : 'Your database preview branches will be based on the branches in the Git repository that your project is connected with.'}
+          </p>
+          {!hasGithubIntegrationInstalled && (
+            <Link passHref href="/">
+              <a target="_blank" rel="noreferrer">
+                <Button type="default" className="!mt-3">
+                  Install Github Integration
+                </Button>
+              </a>
+            </Link>
+          )}
+          {hasGithubIntegrationInstalled && !githubConnection && (
+            <EmptyIntegrationConnection showNode={false} onClick={() => onSelectConnectRepo()} />
+          )}
+          {integration && githubConnection && (
+            <>
+              <ul className="mb-3">
+                <IntegrationConnection
+                  type={'GitHub'}
+                  connection={githubConnection}
+                  showNode={false}
+                  actions={
+                    <Button type="default" onClick={() => onSelectConnectRepo()}>
+                      Configure connection
+                    </Button>
+                  }
+                  orientation="vertical"
+                />
+              </ul>
+
+              <div>
+                <label className="block text-sm text-light mb-2" htmlFor="branch-selector">
+                  Select your production branch:
+                </label>
+                {isLoadingBranches && <ShimmeringLoader />}
+                {isErrorBranches && (
+                  <AlertError
+                    error={githubBranchesError}
+                    subject="Failed to retrieve Github branches"
+                  />
+                )}
+                {isSuccessBranches && (
+                  <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
+                    <PopoverTrigger_Shadcn_ asChild name="branch-selector">
+                      <Button
+                        block
+                        type="default"
+                        size="medium"
+                        ref={comboBoxRef}
+                        className={clsx(
+                          'justify-start',
+                          selectedBranch === undefined ? 'text-light' : 'text'
+                        )}
+                        iconRight={
+                          <span className="grow flex justify-end">
+                            <IconChevronDown className={''} />
+                          </span>
+                        }
+                      >
+                        {selectedBranch || 'Select a branch'}
+                      </Button>
+                    </PopoverTrigger_Shadcn_>
+                    <PopoverContent_Shadcn_
+                      className="p-0"
+                      side="bottom"
+                      align="start"
+                      style={{ width: comboBoxRef.current?.offsetWidth }}
+                    >
+                      <Command_Shadcn_>
+                        <CommandInput_Shadcn_ placeholder="Find branch..." />
+                        <CommandList_Shadcn_>
+                          <CommandEmpty_Shadcn_>No branches found</CommandEmpty_Shadcn_>
+                          <CommandGroup_Shadcn_>
+                            {githubBranches?.map((branch) => (
+                              <CommandItem_Shadcn_
+                                asChild
+                                key={branch.name}
+                                value={branch.name}
+                                className="cursor-pointer w-full flex items-center justify-between"
+                                onSelect={() => {
+                                  setOpen(false)
+                                  setSelectedBranch(branch.name)
+                                }}
+                                onClick={() => {
+                                  setOpen(false)
+                                  setSelectedBranch(branch.name)
+                                }}
+                              >
+                                <a>
+                                  {branch.name}
+                                  {branch.name === selectedBranch && <IconCheck />}
+                                </a>
+                              </CommandItem_Shadcn_>
+                            ))}
+                          </CommandGroup_Shadcn_>
+                        </CommandList_Shadcn_>
+                      </Command_Shadcn_>
+                    </PopoverContent_Shadcn_>
+                  </Popover_Shadcn_>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </Modal.Content>
+    </div>
+  )
+}
+
+export default GithubRepositorySelection
diff --git a/studio/components/layouts/AppLayout/EnableBranchingButton/VercelProjectSelection.tsx b/studio/components/layouts/AppLayout/EnableBranchingButton/VercelProjectSelection.tsx
new file mode 100644
index 00000000000..333f096d07c
--- /dev/null
+++ b/studio/components/layouts/AppLayout/EnableBranchingButton/VercelProjectSelection.tsx
@@ -0,0 +1,43 @@
+import { useParams } from 'common'
+import { Badge, Button, Modal } from 'ui'
+
+import { Integration } from 'data/integrations/integrations.types'
+import Link from 'next/link'
+
+interface VercelProjectSelectionProps {
+  integration?: Integration
+}
+
+const VercelProjectSelection = ({ integration }: VercelProjectSelectionProps) => {
+  const { ref } = useParams()
+  const vercelProjectIntegration = integration?.connections.find(
+    (connection) => connection.supabase_project_ref === ref
+  )
+
+  return (
+    <Modal.Content>
+      <div className="space-y-1 py-6">
+        <div className="flex items-center space-x-2">
+          <p>Frontend Cloud Previews</p>
+          <Badge color="gray">Optional</Badge>
+        </div>
+        <p className="text-sm text-light">
+          Previews can be available by connecting your Supabase project to a Vercel project.
+        </p>
+        {!integration && (
+          <Link passHref href="https://vercel.com/integrations/supabase-v2-local">
+            <a target="_blank" rel="noreferrer">
+              <Button type="default" className="!mt-3">
+                Install Vercel Integration
+              </Button>
+            </a>
+          </Link>
+        )}
+        {integration && !vercelProjectIntegration && <div>Connect project</div>}
+        {integration && vercelProjectIntegration && <div>Select project</div>}
+      </div>
+    </Modal.Content>
+  )
+}
+
+export default VercelProjectSelection
diff --git a/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
index 79fe2d975e5..caa3220099e 100644
--- a/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
+++ b/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import {
   Badge,
   Button,
@@ -16,6 +16,7 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
+  ScrollArea,
 } from 'ui'
 
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
@@ -26,7 +27,6 @@ import { useFlag, useSelectedOrganization } from 'hooks'
 const OrganizationDropdown = () => {
   const router = useRouter()
   const orgCreationV2 = useFlag('orgcreationv2')
-  const orgNameRef = useRef<HTMLAnchorElement>(null)
   const selectedOrganization = useSelectedOrganization()
   const { data: organizations, isLoading: isLoadingOrganizations } = useOrganizationsQuery()
 
@@ -39,64 +39,61 @@ const OrganizationDropdown = () => {
   )
 
   const [open, setOpen] = useState(false)
-  const popoverOffset = (orgNameRef.current?.offsetWidth ?? 0) + 12
 
   if (isLoadingOrganizations) {
     return <ShimmeringLoader className="w-[90px]" />
   }
 
   return (
-    <div className="flex items-center space-x-2 px-2">
-      <Link passHref href={slug ? `/org/${slug}` : '/'}>
-        <a ref={orgNameRef} className="flex items-center space-x-2">
-          <p className="text-sm">{orgName}</p>
-          {isSuccess && <Badge color="scale">{subscription?.plan.name}</Badge>}
-        </a>
-      </Link>
-
+    <div className="flex items-center px-2">
       <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
         <PopoverTrigger_Shadcn_ asChild>
-          <Button
-            type="text"
-            className="px-1"
-            icon={<IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />}
-          />
+          <div className="flex items-center space-x-2 cursor-pointer">
+            <Button
+              type="text"
+              iconRight={
+                <IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />
+              }
+            >
+              <div className="flex items-center space-x-2">
+                <p className="text-sm">{orgName}</p>
+                {isSuccess && <Badge color="scale">{subscription?.plan.name}</Badge>}
+              </div>
+            </Button>
+          </div>
         </PopoverTrigger_Shadcn_>
-        <PopoverContent_Shadcn_
-          className="p-0"
-          side="bottom"
-          align="start"
-          style={{ marginLeft: `-${popoverOffset}px` }}
-        >
+        <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Find organization..." />
             <CommandList_Shadcn_>
               <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
               <CommandGroup_Shadcn_>
-                {organizations?.map((org) => {
-                  const href = router.pathname.includes('[slug]')
-                    ? router.pathname.replace('[slug]', org.slug)
-                    : `/org/${org.slug}`
-                  return (
-                    <Link passHref href={href} key={org.slug}>
-                      <CommandItem_Shadcn_
-                        asChild
-                        value={org.name}
-                        className="cursor-pointer w-full flex items-center justify-between"
-                        onSelect={() => {
-                          setOpen(false)
-                          router.push(href)
-                        }}
-                        onClick={() => setOpen(false)}
-                      >
-                        <a>
-                          {org.name}
-                          {org.slug === slug && <IconCheck />}
-                        </a>
-                      </CommandItem_Shadcn_>
-                    </Link>
-                  )
-                })}
+                <ScrollArea className={(organizations || []).length > 7 ? 'h-[210px]' : ''}>
+                  {organizations?.map((org) => {
+                    const href = router.pathname.includes('[slug]')
+                      ? router.pathname.replace('[slug]', org.slug)
+                      : `/org/${org.slug}`
+                    return (
+                      <Link passHref href={href} key={org.slug}>
+                        <CommandItem_Shadcn_
+                          asChild
+                          value={org.name}
+                          className="cursor-pointer w-full flex items-center justify-between"
+                          onSelect={() => {
+                            setOpen(false)
+                            router.push(href)
+                          }}
+                          onClick={() => setOpen(false)}
+                        >
+                          <a>
+                            {org.name}
+                            {org.slug === slug && <IconCheck />}
+                          </a>
+                        </CommandItem_Shadcn_>
+                      </Link>
+                    )
+                  })}
+                </ScrollArea>
               </CommandGroup_Shadcn_>
               <CommandGroup_Shadcn_ className="border-t">
                 <Link passHref href={orgCreationV2 ? `/new-with-subscription` : `/new`}>
diff --git a/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index db802d7fe65..ae528bc14c2 100644
--- a/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
-import { useRef, useState } from 'react'
+import { useState } from 'react'
 import {
   Badge,
   Button,
@@ -17,15 +17,16 @@ import {
   PopoverContent_Shadcn_,
   PopoverTrigger_Shadcn_,
   Popover_Shadcn_,
+  ScrollArea,
 } from 'ui'
 
+import { useParams } from 'common'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
 import { useSelectedOrganization, useSelectedProject } from 'hooks'
-import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import { IS_PLATFORM } from 'lib/constants'
 import { Organization, Project } from 'types'
-import { useParams } from 'common'
 
 // [Fran] the idea is to let users change projects without losing the current page,
 // but at the same time we need to redirect correctly between urls that might be
@@ -81,7 +82,7 @@ const ProjectLink = ({
       <CommandItem_Shadcn_
         asChild
         key={project.ref}
-        value={project.name}
+        value={`${project.name}-${project.ref}`}
         className="cursor-pointer w-full flex items-center justify-between"
         onSelect={() => {
           router.push(href)
@@ -103,7 +104,6 @@ const ProjectDropdown = () => {
   const { ref } = useParams()
   const projectDetails = useSelectedProject()
   const selectedOrganization = useSelectedOrganization()
-  const projectNameRef = useRef<HTMLAnchorElement>(null)
   const { data: allProjects, isLoading: isLoadingProjects } = useProjectsQuery()
 
   const isBranch = projectDetails?.parent_project_ref !== undefined
@@ -117,56 +117,48 @@ const ProjectDropdown = () => {
     { enabled: !isOrgBilling }
   )
   const projects = allProjects
-    ?.filter((x) => x.status !== PROJECT_STATUS.INACTIVE)
-    .filter((x) => x.organization_id === selectedOrganization?.id)
+    ?.filter((x) => x.organization_id === selectedOrganization?.id)
     .sort((a, b) => a.name.localeCompare(b.name))
   const selectedProject = isBranch
     ? parentProject
     : projectDetails || projects?.find((project) => project.ref === ref)
 
   const [open, setOpen] = useState(false)
-  const popoverOffset = (projectNameRef.current?.offsetWidth ?? 0) + 12
 
   if (isLoadingProjects) {
     return <ShimmeringLoader className="w-[90px]" />
   }
 
   return IS_PLATFORM ? (
-    <div className="flex items-center space-x-2 px-2">
-      <Link href={`/project/${ref}`}>
-        <a ref={projectNameRef} className="flex items-center space-x-2">
-          <p className="text-sm">{selectedProject?.name}</p>
-          {isSuccess && !isOrgBilling && <Badge color="slate">{subscription?.plan.name}</Badge>}
-        </a>
-      </Link>
-
+    <div className="flex items-center px-2">
       <Popover_Shadcn_ open={open} onOpenChange={setOpen} modal={false}>
         <PopoverTrigger_Shadcn_ asChild>
           <Button
             type="text"
-            className="px-1"
-            icon={<IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />}
-          />
+            iconRight={<IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} />}
+          >
+            <div className="flex items-center space-x-2">
+              <p className="text-sm">{selectedProject?.name}</p>
+              {isSuccess && !isOrgBilling && <Badge color="slate">{subscription?.plan.name}</Badge>}
+            </div>
+          </Button>
         </PopoverTrigger_Shadcn_>
-        <PopoverContent_Shadcn_
-          className="p-0"
-          side="bottom"
-          align="start"
-          style={{ marginLeft: `-${popoverOffset}px` }}
-        >
+        <PopoverContent_Shadcn_ className="p-0" side="bottom" align="start">
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Find project..." />
             <CommandList_Shadcn_>
               <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
               <CommandGroup_Shadcn_>
-                {projects?.map((project) => (
-                  <ProjectLink
-                    key={project.ref}
-                    project={project}
-                    organization={selectedOrganization}
-                    setOpen={setOpen}
-                  />
-                ))}
+                <ScrollArea className={(projects || []).length > 7 ? 'h-[210px]' : ''}>
+                  {projects?.map((project) => (
+                    <ProjectLink
+                      key={project.ref}
+                      project={project}
+                      organization={selectedOrganization}
+                      setOpen={setOpen}
+                    />
+                  ))}
+                </ScrollArea>
               </CommandGroup_Shadcn_>
               <CommandGroup_Shadcn_ className="border-t">
                 <Link
diff --git a/studio/components/layouts/AppLayout/SettingsButton.tsx b/studio/components/layouts/AppLayout/SettingsButton.tsx
index 7576d779903..ed5eb2f3a77 100644
--- a/studio/components/layouts/AppLayout/SettingsButton.tsx
+++ b/studio/components/layouts/AppLayout/SettingsButton.tsx
@@ -11,7 +11,7 @@ const SettingsButton = () => {
     <Tooltip.Root delayDuration={0}>
       <Link href={slug ? `/org/${slug}/general` : '/'} passHref>
         <Tooltip.Trigger type="button" asChild className="px-1">
-          <a>
+          <a id="organization-settings">
             <IconSettings size={18} strokeWidth={1.5} className="text-scale-1100" />
           </a>
         </Tooltip.Trigger>
@@ -25,7 +25,7 @@ const SettingsButton = () => {
               'border border-scale-200',
             ].join(' ')}
           >
-            <span className="text-xs text-scale-1200">Settings</span>
+            <span className="text-xs text-scale-1200">Organization settings</span>
           </div>
         </Tooltip.Content>
       </Tooltip.Portal>
diff --git a/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx b/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
index 51bba7ff4d7..19871d5866f 100644
--- a/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
+++ b/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
@@ -35,8 +35,13 @@ const UserSettingsDropdown = () => {
 
   return (
     <DropdownMenu_Shadcn_ open={open} onOpenChange={() => setOpen(!open)} modal={false}>
-      <DropdownMenuTrigger_Shadcn_ className="flex items-center justify-center border font-bold rounded-full h-7 w-7 text-scale-1100 bg-surface-100">
-        {profile?.first_name ? profile?.first_name?.[0] : <IconUser size={14} strokeWidth={2} />}
+      <DropdownMenuTrigger_Shadcn_ asChild>
+        <button
+          id="user-settings-dropdown"
+          className="flex items-center justify-center border font-bold rounded-full h-7 w-7 text-scale-1100 bg-surface-100"
+        >
+          {profile?.first_name ? profile?.first_name?.[0] : <IconUser size={14} strokeWidth={2} />}
+        </button>
       </DropdownMenuTrigger_Shadcn_>
       <DropdownMenuContent_Shadcn_ align="end" className="w-60">
         <DropdownMenuGroup_Shadcn_>
diff --git a/studio/components/layouts/FunctionsLayout.tsx b/studio/components/layouts/FunctionsLayout.tsx
index caa3776b772..d1ed493472a 100644
--- a/studio/components/layouts/FunctionsLayout.tsx
+++ b/studio/components/layouts/FunctionsLayout.tsx
@@ -75,7 +75,7 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
                 <div
                   className={[
                     'h-6 w-6 rounded border border-brand-600 bg-brand-300',
-                    'flex items-center justify-center text-brand-900',
+                    'flex items-center justify-center text-brand',
                   ].join(' ')}
                 >
                   <IconCode size={14} strokeWidth={3} />
diff --git a/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx
new file mode 100644
index 00000000000..f08a6ca6c0e
--- /dev/null
+++ b/studio/components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout.tsx
@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react'
+
+import { BASE_PATH } from 'lib/constants'
+import IntegrationWindowLayout from './IntegrationWindowLayout'
+
+const GITHUB_ICON = (
+  <div className="bg-black shadow rounded p-1 w-8 h-8 flex justify-center items-center">
+    <img
+      src={`${BASE_PATH}/img/icons/github-icon-dark.svg`}
+      alt="GitHub Icon"
+      className="w-[18px]"
+    />
+  </div>
+)
+
+const GitHubIntegrationWindowLayout = ({ children }: PropsWithChildren<{}>) => {
+  return (
+    <IntegrationWindowLayout title="Supabase + GitHub Integration" integrationIcon={GITHUB_ICON}>
+      {children}
+    </IntegrationWindowLayout>
+  )
+}
+
+export default GitHubIntegrationWindowLayout
diff --git a/studio/components/layouts/IntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx
similarity index 54%
rename from studio/components/layouts/IntegrationWindowLayout.tsx
rename to studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx
index d84d961c57e..4aa3e3a6a81 100644
--- a/studio/components/layouts/IntegrationWindowLayout.tsx
+++ b/studio/components/layouts/IntegrationsLayout/IntegrationWindowLayout.tsx
@@ -1,20 +1,27 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import { IconChevronRight, IconX, cn } from 'ui'
-import { withAuth, useFlag } from 'hooks'
-import { observer } from 'mobx-react-lite'
-import { BASE_PATH } from 'lib/constants'
-import React from 'react'
-import { ScaffoldContainer } from './Scaffold'
 import { useParams } from 'common'
+import { useFlag, withAuth } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
+import { PropsWithChildren, ReactNode, forwardRef } from 'react'
+import { IconX, cn } from 'ui'
+import { ScaffoldContainer } from '../Scaffold'
 
-const IntegrationWindowLayout: FC<any> = ({ organization, project, children }) => {
+export type IntegrationWindowLayoutProps = {
+  title: string
+  integrationIcon: ReactNode
+}
+
+const IntegrationWindowLayout = ({
+  title,
+  integrationIcon,
+  children,
+}: PropsWithChildren<IntegrationWindowLayoutProps>) => {
   const ongoingIncident = useFlag('ongoingIncident')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
 
   return (
     <div className="flex w-full flex-col" style={{ height: maxHeight, maxHeight }}>
-      <Header organization={organization} project={project} />
+      <Header title={title} integrationIcon={integrationIcon} />
+
       {children}
     </div>
   )
@@ -22,18 +29,16 @@ const IntegrationWindowLayout: FC<any> = ({ organization, project, children }) =
 
 const INTEGRATION_LAYOUT_MAX_WIDTH = '' // 'max-w-[720px]'
 
-export default withAuth(observer(IntegrationWindowLayout))
+export default withAuth(IntegrationWindowLayout)
 
-export const IntegrationWindowLayoutWithoutAuth = observer(IntegrationWindowLayout)
+export const IntegrationWindowLayoutWithoutAuth = IntegrationWindowLayout
 
-const Header: FC<any> = ({ organization, project }) => {
-  let stepNumber = organization ? 1 : project ? 2 : 0
-  const { externalId } = useParams()
-
-  const title = externalId
-    ? 'Supabase + Vercel Deploy Button'
-    : 'Supabase + Vercel Integration Marketplace Connector'
+export type HeaderProps = {
+  title: string
+  integrationIcon: ReactNode
+}
 
+const Header = ({ title, integrationIcon }: HeaderProps) => {
   return (
     <div className="bg">
       <ScaffoldContainer className={cn('py-3', INTEGRATION_LAYOUT_MAX_WIDTH)}>
@@ -43,16 +48,7 @@ const Header: FC<any> = ({ organization, project }) => {
               <img src={`${BASE_PATH}/img/supabase-logo.svg`} alt="Supabase" className="w-4" />
             </div>
             <IconX className="text-scale-800" strokeWidth={2} size={16} />
-            <div className="bg-black shadow rounded p-1 w-8 h-8 flex justify-center items-center">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="white"
-                viewBox="0 0 512 512"
-                className="w-4"
-              >
-                <path fillRule="evenodd" d="M256,48,496,464H16Z" />
-              </svg>
-            </div>
+            {integrationIcon}
           </div>
           <span className="text-sm" title={title}>
             {title}
@@ -66,7 +62,7 @@ const Header: FC<any> = ({ organization, project }) => {
 const maxWidthClasses = 'mx-auto w-full max-w-[1600px]'
 const paddingClasses = 'px-6 lg:px-14 xl:px-28 2xl:px-32'
 
-const IntegrationScaffoldContainer = React.forwardRef<
+const IntegrationScaffoldContainer = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
diff --git a/studio/components/layouts/IntegrationsLayout/Integrations.utils.ts b/studio/components/layouts/IntegrationsLayout/Integrations.utils.ts
new file mode 100644
index 00000000000..0d19f996f5c
--- /dev/null
+++ b/studio/components/layouts/IntegrationsLayout/Integrations.utils.ts
@@ -0,0 +1,54 @@
+import { IntegrationsData } from 'data/integrations/integrations-query'
+import { IntegrationName } from 'data/integrations/integrations.types'
+import { Organization } from 'types'
+
+export function getHasInstalledObject({
+  integrationName,
+  integrationData,
+  organizationsData,
+  installationId,
+}: {
+  integrationName: IntegrationName
+  integrationData: IntegrationsData
+  organizationsData: Organization[]
+  installationId?: string | number
+}): { [orgSlug: string]: boolean } {
+  if (integrationName === 'Vercel') {
+    return Object.fromEntries(
+      organizationsData
+        .map((org) => [
+          org.slug,
+          Boolean(
+            integrationData.find(
+              (integration) =>
+                integration.organization.slug === org.slug &&
+                integration.integration.name === 'Vercel'
+            )
+          ),
+        ])
+        .filter(([, v]) => Boolean(v))
+    )
+  }
+
+  if (integrationName === 'GitHub') {
+    return Object.fromEntries(
+      organizationsData
+        .map((org) => [
+          org.slug,
+          Boolean(
+            integrationData.find(
+              (integration) =>
+                integration.organization.slug === org.slug &&
+                integration.integration.name === 'GitHub' &&
+                integration.metadata !== undefined &&
+                'installation_id' in integration.metadata &&
+                String(integration.metadata.installation_id) === String(installationId)
+            )
+          ),
+        ])
+        .filter(([, v]) => Boolean(v))
+    )
+  }
+
+  return {}
+}
diff --git a/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx b/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx
new file mode 100644
index 00000000000..a70e1ef9bae
--- /dev/null
+++ b/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx
@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react'
+
+import { useParams } from 'common'
+import { BASE_PATH } from 'lib/constants'
+import IntegrationWindowLayout from './IntegrationWindowLayout'
+
+const VERCEL_ICON = (
+  <div className="bg-black shadow rounded p-1 w-8 h-8 flex justify-center items-center">
+    <img src={`${BASE_PATH}/img/icons/vercel-icon.svg`} alt="Vercel Icon" className="w-4" />
+  </div>
+)
+
+const VercelIntegrationWindowLayout = ({ children }: PropsWithChildren<{}>) => {
+  const { externalId } = useParams()
+
+  const title = externalId
+    ? 'Supabase + Vercel Deploy Button'
+    : 'Supabase + Vercel Integration Marketplace Connector'
+
+  return (
+    <IntegrationWindowLayout title={title} integrationIcon={VERCEL_ICON}>
+      {children}
+    </IntegrationWindowLayout>
+  )
+}
+
+export default VercelIntegrationWindowLayout
diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index a41e89137a2..908c1578a2f 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -3,7 +3,7 @@ import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
 import ExampleProject from 'components/interfaces/Home/ExampleProject'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import Link from 'next/link'
-import { FC, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { Badge, Button, IconArrowRight, IconLoader } from 'ui'
 
 import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
@@ -55,8 +55,8 @@ const BuildingState = ({ project }: BuildingStateProps) => {
               <div className="flex items-center gap-2">
                 <IconLoader className="animate-spin" size={12} />
                 <span>
-                  {project.status === PROJECT_STATUS.RESTORING
-                    ? 'Restoring project'
+                  {project.status === PROJECT_STATUS.UNKNOWN
+                    ? 'Initiating project set up'
                     : 'Setting up project'}
                 </span>
               </div>
@@ -82,7 +82,7 @@ const BuildingState = ({ project }: BuildingStateProps) => {
                       Browse the Supabase{' '}
                       <Link href="https://supabase.com/docs">
                         <a
-                          className="mb-0 text-brand-900 transition-colors hover:text-brand-1200"
+                          className="mb-0 text-brand transition-colors hover:text-brand-600"
                           target="_blank"
                           rel="noreferrer"
                         >
diff --git a/studio/components/layouts/ProjectLayout/ConnectingState.tsx b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
index ba2ae591e0b..f9da7b84d57 100644
--- a/studio/components/layouts/ProjectLayout/ConnectingState.tsx
+++ b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
@@ -106,13 +106,13 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               <p className="text-sm text-scale-1200">
                 Your project might be facing resource constraints and hence is having trouble
                 connecting. You can verify this by checking your{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/settings/database`}>
                     <a>database's health</a>
                   </Link>
                 </span>{' '}
                 or your remaining daily disk IO budget via a{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/reports`}>
                     <a>customizable project report</a>
                   </Link>
@@ -121,7 +121,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               </p>
               <p className="text-sm text-scale-1200">
                 If your project is facing resource constraints, you can{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/project/${project.ref}/reports`}>
                     <a>upgrade</a>
                   </Link>
@@ -131,7 +131,7 @@ const ConnectingState = ({ project }: ConnectingStateProps) => {
               <p className="text-sm text-scale-1200">
                 However, if your project still fails to connect thereafter, you can open a support
                 ticket{' '}
-                <span className="text-brand-1000">
+                <span className="text-brand-600">
                   <Link href={`/support/new?ref=${project.ref}`}>here</Link>
                 </span>
                 .
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 39851aa93b4..cb18ee373cc 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -222,14 +222,14 @@ const FeedbackWidget: FC<Props> = ({
           Have a technical issue? Contact{' '}
           <Link href="/support/new">
             <a>
-              <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
+              <span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
                 Supabase support
               </span>
             </a>
           </Link>{' '}
           or{' '}
           <a href="https://supabase.com/docs" target="_blank" rel="noreferrer">
-            <span className="cursor-pointer text-brand-900 transition-colors hover:text-brand-1200">
+            <span className="cursor-pointer text-brand transition-colors hover:text-brand-600">
               browse our docs
             </span>
           </a>
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
index 05f28ff10ef..411eee235f6 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -33,6 +33,7 @@ const HelpPopover = ({ alt = false }: HelpPopoverProps) => {
           <Tooltip.Trigger asChild>
             <div className="relative flex items-center">
               <Button
+                id="help-popover-button"
                 type={alt ? 'text' : 'default'}
                 className={alt ? 'px-1' : ''}
                 icon={
diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 0ce4030e476..90d627cc098 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -171,7 +171,9 @@ const ContentWrapper = ({ isLoading, children }: ContentWrapperProps) => {
 
   const isProjectUpgrading = selectedProject?.status === PROJECT_STATUS.UPGRADING
   const isProjectRestoring = selectedProject?.status === PROJECT_STATUS.RESTORING
-  const isProjectBuilding = selectedProject?.status === PROJECT_STATUS.COMING_UP
+  const isProjectBuilding =
+    selectedProject?.status === PROJECT_STATUS.COMING_UP ||
+    selectedProject?.status === PROJECT_STATUS.UNKNOWN
   const isProjectPausing =
     selectedProject?.status === PROJECT_STATUS.GOING_DOWN ||
     selectedProject?.status === PROJECT_STATUS.PAUSING
diff --git a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index 77527ba7c50..81e4a6e7a39 100644
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -90,7 +90,7 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
                   {product !== undefined ? (
                     <>
                       Restore this project to access the{' '}
-                      <span className="text-brand-900">{product}</span> page
+                      <span className="text-brand">{product}</span> page
                     </>
                   ) : (
                     'Restore this project and get back to building the next big thing!'
diff --git a/studio/components/layouts/ProjectLayout/RestoringState.tsx b/studio/components/layouts/ProjectLayout/RestoringState.tsx
index 12cd01d836a..19c19c4a590 100644
--- a/studio/components/layouts/ProjectLayout/RestoringState.tsx
+++ b/studio/components/layouts/ProjectLayout/RestoringState.tsx
@@ -59,7 +59,7 @@ const RestoringState: FC<Props> = ({}) => {
           <div className="space-y-6 pt-6">
             <div className="flex px-8 space-x-8">
               <div className="mt-1">
-                <IconCheckCircle className="text-brand-900" size={18} strokeWidth={2} />
+                <IconCheckCircle className="text-brand" size={18} strokeWidth={2} />
               </div>
               <div className="space-y-1">
                 <p>Restoration complete!</p>
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index 2f6b15649e5..dc7e4cd26cc 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -74,7 +74,7 @@ const UpgradingState = () => {
             {isCompleted ? (
               <div className="grid gap-4">
                 <div className="relative mx-auto max-w-[300px]">
-                  <IconCheckCircle className="text-brand-900" size={40} strokeWidth={1.5} />
+                  <IconCheckCircle className="text-brand" size={40} strokeWidth={1.5} />
                 </div>
                 <div className="space-y-2">
                   <p className="text-center">Upgrade completed!</p>
@@ -176,7 +176,7 @@ const UpgradingState = () => {
                                 />
                               </div>
                             ) : isCompleted ? (
-                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-800 border-brand-700">
+                              <div className="flex items-center justify-center w-5 h-5 border rounded-full bg-brand-300 border-brand-400">
                                 <IconCheck size={12} className="text-white" strokeWidth={2} />
                               </div>
                             ) : (
diff --git a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index 0c07827d53c..b6707a940bb 100644
--- a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -16,6 +16,7 @@ import { useProfile } from 'lib/profile'
 import { useSnippets, useSqlEditorStateSnapshot } from 'state/sql-editor'
 import { Button, Dropdown, IconPlus, IconSearch, IconX, Input, Menu, useCommandMenu } from 'ui'
 import { COMMAND_ROUTES } from 'ui/src/components/Command/Command.constants'
+import { useProjectContext } from '../ProjectLayout/ProjectContext'
 import QueryItem from './QueryItem'
 
 const SideBarContent = observer(() => {
@@ -26,6 +27,7 @@ const SideBarContent = observer(() => {
   const [filterString, setFilterString] = useState('')
   const { setPages, setIsOpen } = useCommandMenu()
   const showCmdkHelper = useFlag('dashboardCmdk')
+  const { project } = useProjectContext()
 
   const snap = useSqlEditorStateSnapshot()
   const { isLoading, isSuccess } = useSqlSnippetsQuery(ref, {
@@ -58,7 +60,8 @@ const SideBarContent = observer(() => {
   })
 
   const handleNewQuery = async () => {
-    if (!ref) return console.error('Project ref is required')
+    if (!project) return console.error('Project is required')
+    if (!profile) return console.error('Profile is required')
     if (!canCreateSQLSnippet) {
       return ui.setNotification({
         category: 'info',
@@ -67,12 +70,16 @@ const SideBarContent = observer(() => {
     }
 
     try {
-      const snippet = createSqlSnippetSkeleton({ name: 'Untitled query', owner_id: profile?.id })
-      const data = { ...snippet, id: uuidv4() }
+      const snippet = createSqlSnippetSkeleton({
+        id: uuidv4(),
+        name: 'Untitled query',
+        owner_id: profile.id,
+        project_id: project.id,
+      })
 
-      snap.addSnippet(data as SqlSnippet, ref, true)
+      snap.addSnippet(snippet as SqlSnippet, project.ref)
 
-      router.push(`/project/${ref}/sql/${data.id}`)
+      router.push(`/project/${project.ref}/sql/${snippet.id}`)
     } catch (error: any) {
       ui.setNotification({
         category: 'error',
diff --git a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
index ee1ff6fe3d7..bf8a585a2e6 100644
--- a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
+++ b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
@@ -28,7 +28,9 @@ const OrganizationSettingsMenu = () => {
           <SettingsMenuItem
             key={link.label}
             label={link.label}
-            href={link.pathname.replace('[slug]', organization?.slug ?? '')}
+            href={
+              organization !== undefined ? link.pathname.replace('[slug]', organization.slug) : '/'
+            }
             isActive={link.pathname === router.pathname}
           />
         ))}
diff --git a/studio/components/to-be-cleaned/ProductEmptyState.tsx b/studio/components/to-be-cleaned/ProductEmptyState.tsx
index 33ee6b1e1a8..09eaff00b57 100644
--- a/studio/components/to-be-cleaned/ProductEmptyState.tsx
+++ b/studio/components/to-be-cleaned/ProductEmptyState.tsx
@@ -1,11 +1,10 @@
-import { Button, IconExternalLink } from 'ui'
-import { FC, ReactNode } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { PropsWithChildren } from 'react'
+import { Button, IconExternalLink } from 'ui'
 
-interface Props {
+interface ProductEmptyStateProps {
   title?: string
   size?: 'medium' | 'large'
-  children?: ReactNode
   ctaButtonLabel?: string
   infoButtonLabel?: string
   infoButtonUrl?: string
@@ -14,7 +13,7 @@ interface Props {
   disabledMessage?: string
 }
 
-const ProductEmptyState: FC<Props> = ({
+const ProductEmptyState = ({
   title = '',
   size = 'medium',
   children,
@@ -24,7 +23,7 @@ const ProductEmptyState: FC<Props> = ({
   onClickCta = () => {},
   disabled = false,
   disabledMessage = '',
-}) => {
+}: PropsWithChildren<ProductEmptyStateProps>) => {
   const hasAction = (ctaButtonLabel && onClickCta) || (infoButtonUrl && infoButtonLabel)
 
   return (
diff --git a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
index 2f7227836d3..fa14c67cd88 100644
--- a/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageExplorer/FileExplorerHeaderSelection.tsx
@@ -13,7 +13,7 @@ const FileExplorerHeaderSelection = () => {
   } = storageExplorerStore
 
   return (
-    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-700 px-2 py-1 shadow dark:bg-brand-600">
+    <div className="z-10 flex h-[40px] items-center rounded-t-md bg-brand-400 px-2 py-1 shadow dark:bg-brand-600">
       <Button
         icon={<IconX size={16} strokeWidth={2} />}
         type="text"
diff --git a/studio/components/ui/AlertError.tsx b/studio/components/ui/AlertError.tsx
index 7b6af8e4c98..dfd6b976a9a 100644
--- a/studio/components/ui/AlertError.tsx
+++ b/studio/components/ui/AlertError.tsx
@@ -1,6 +1,13 @@
 import Link from 'next/link'
 import { ResponseError } from 'types'
-import { Alert, Button } from 'ui'
+import {
+  Alert,
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconAlertCircle,
+} from 'ui'
 
 export interface AlertErrorProps {
   ref?: string
@@ -20,26 +27,21 @@ const AlertError = ({ ref, subject, error, className }: AlertErrorProps) => {
   if (error) href += `&message=Error:%20${error.message}`
 
   return (
-    <Alert
-      withIcon
-      className={className}
-      variant="warning"
-      title={subject}
-      actions={[
-        <Link key="contact-support" href={href}>
-          <a>
-            <Button type="default" className="ml-4">
-              Contact support
-            </Button>
-          </a>
-        </Link>,
-      ]}
-    >
-      {error && <p className="mb-1">Error: {error.message}</p>}
-      <p>
+    <Alert_Shadcn_ className={className} variant="warning" title={subject}>
+      <IconAlertCircle className="h-4 w-4" />
+      <AlertTitle_Shadcn_>{subject}</AlertTitle_Shadcn_>
+      <AlertDescription_Shadcn_ className="flex flex-col gap-3">
+        {error?.message && <p>Error: {error?.message}</p>}
         Try refreshing your browser, but if the issue persists, please reach out to us via support.
-      </p>
-    </Alert>
+        <div>
+          <Link key="contact-support" href={href} passHref>
+            <Button type="warning" asChild>
+              <a>Contact support</a>
+            </Button>
+          </Link>
+        </div>
+      </AlertDescription_Shadcn_>
+    </Alert_Shadcn_>
   )
 }
 
diff --git a/studio/components/ui/CardButton.tsx b/studio/components/ui/CardButton.tsx
index ab4e0a954a4..cd8016d9788 100644
--- a/studio/components/ui/CardButton.tsx
+++ b/studio/components/ui/CardButton.tsx
@@ -1,8 +1,8 @@
-import React, { FC } from 'react'
-import { IconChevronRight, IconLoader } from 'ui'
 import Link from 'next/link'
+import React from 'react'
+import { IconChevronRight, IconLoader } from 'ui'
 
-interface Props {
+interface CardButtonProps {
   title: string | React.ReactNode
   description?: string
   children?: React.ReactNode
@@ -17,7 +17,7 @@ interface Props {
   loading?: boolean
 }
 
-const CardButton: FC<Props> = ({
+const CardButton = ({
   title,
   description,
   children,
@@ -30,7 +30,7 @@ const CardButton: FC<Props> = ({
   icon,
   containerHeightClassName = 'h-32',
   loading = false,
-}) => {
+}: CardButtonProps) => {
   const LinkContainer = ({ children }: { children: React.ReactNode }) => (
     <Link href={linkHref}>
       <a>{children}</a>
@@ -84,14 +84,14 @@ const CardButton: FC<Props> = ({
       )}
       {icon && <ImageContainer>{icon}</ImageContainer>}
       <div className="flex h-full w-full flex-col space-y-2">
-        <h5 className="text-scale-1200">{title}</h5>
+        {typeof title === 'string' ? <h5 className="text-scale-1200">{title}</h5> : title}
         {(children || description) && (
           <div className="flex w-full flex-1 flex-col">
             <p className="text-sm text-scale-1100">{description}</p>
             <div className="w-full">{children && children}</div>
           </div>
         )}
-        {footer && <div className="w-full">{footer}</div>}
+        {footer && <div className="w-full !mt-auto">{footer}</div>}
       </div>
       {isLink && (
         <div
diff --git a/studio/components/ui/Charts/Charts.constants.ts b/studio/components/ui/Charts/Charts.constants.ts
index 7aa3a6de752..d760c7bf7e6 100644
--- a/studio/components/ui/Charts/Charts.constants.ts
+++ b/studio/components/ui/Charts/Charts.constants.ts
@@ -5,8 +5,8 @@
 export const CHART_COLORS = {
   TICK: 'var(--colors-scale6)',
   AXIS: 'var(--colors-scale6)',
-  GREEN_1: 'var(--colors-brand9)', // #3ECF8E
-  GREEN_2: 'var(--colors-brand6)',
+  GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
+  GREEN_2: 'hsl(var(--brand-500))',
 }
 
 // refer to packages/ui/radix-colors.js for full list of colors
@@ -25,8 +25,8 @@ export const STACK_COLORS = [
 }))
 
 export const USAGE_COLORS = {
-  200: 'var(--colors-brand9)',
-  201: 'var(--colors-brand8)',
+  200: 'hsl(var(--brand-default))',
+  201: 'hsl(var(--brand-500))',
   400: 'var(--colors-amber9)',
   401: 'var(--colors-amber8)',
   404: 'var(--colors-amber7)',
diff --git a/studio/components/ui/ConfirmationModal.tsx b/studio/components/ui/ConfirmationModal.tsx
index 1465a529c8e..842572933c0 100644
--- a/studio/components/ui/ConfirmationModal.tsx
+++ b/studio/components/ui/ConfirmationModal.tsx
@@ -4,6 +4,7 @@ import { Button, Modal } from 'ui'
 export interface ConfirmationModalProps {
   visible: boolean
   danger?: boolean
+  loading?: boolean
   header: string | JSX.Element
   description?: string
   size?: 'small' | 'tiny' | 'medium' | 'large'
@@ -15,6 +16,7 @@ export interface ConfirmationModalProps {
 
 const ConfirmationModal = ({
   visible = false,
+  loading: loading_ = false,
   danger = false,
   header = '',
   description = '',
@@ -31,6 +33,10 @@ const ConfirmationModal = ({
     }
   }, [visible])
 
+  useEffect(() => {
+    setLoading(loading_)
+  }, [loading_])
+
   const [loading, setLoading] = useState(false)
 
   const onConfirm: MouseEventHandler<HTMLButtonElement> = (e) => {
diff --git a/studio/components/ui/DisabledWarningDueToIncident.tsx b/studio/components/ui/DisabledWarningDueToIncident.tsx
index eb23010dce8..ffca14cef6e 100644
--- a/studio/components/ui/DisabledWarningDueToIncident.tsx
+++ b/studio/components/ui/DisabledWarningDueToIncident.tsx
@@ -17,7 +17,7 @@ const DisabledWarningDueToIncident: FC<Props> = ({ title }) => {
         <div className="space-y-3">
           <p className="text-sm leading-normal">
             Our engineers are currently working on a fix. You can follow updates on{' '}
-            <a className="text-brand-900" href="https://status.supabase.com/">
+            <a className="text-brand" href="https://status.supabase.com/">
               https://status.supabase.com/
             </a>
           </p>
diff --git a/studio/components/ui/Loading/Loading.tsx b/studio/components/ui/Loading/Loading.tsx
index f71606fe8ae..f8a407c7c6a 100644
--- a/studio/components/ui/Loading/Loading.tsx
+++ b/studio/components/ui/Loading/Loading.tsx
@@ -1,10 +1,7 @@
-import React, { FC } from 'react'
 import Lottie from 'lottie-react'
 import loadingAnim from './Loading.anim.json'
 
-interface Props {}
-
-const Connecting: FC<Props> = () => (
+const Connecting = () => (
   <div className="w-full h-full flex flex-col items-center justify-center">
     <div className="w-28">
       <Lottie loop={true} autoplay={true} animationData={loadingAnim} />
diff --git a/studio/components/ui/Logs/LogsExplorerHeader.tsx b/studio/components/ui/Logs/LogsExplorerHeader.tsx
index a57a5c76f0f..2425c0e48cb 100644
--- a/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -29,7 +29,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
       <div className="flex items-center gap-3">
         <div
           className="flex h-6 w-6 items-center justify-center rounded border
-            border-brand-600 bg-brand-300 text-brand-900
+            border-brand-600 bg-brand-300 text-brand
           "
         >
           <IconList size={14} strokeWidth={3} />
@@ -81,7 +81,7 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
                 respective source. Do note that to access nested keys, you would need to perform the
                 necessary{' '}
                 <Link href="https://supabase.com/docs/guides/platform/logs#unnesting-arrays">
-                  <a target="_blank" rel="noreferrer" className="text-brand-900">
+                  <a target="_blank" rel="noreferrer" className="text-brand">
                     unnesting joins
                     <IconExternalLink
                       size="tiny"
@@ -159,7 +159,7 @@ const Field = ({
         {isCopied ? (
           <Tooltip.Root delayDuration={0}>
             <Tooltip.Trigger>
-              <IconCheck size={14} strokeWidth={3} className="text-brand-900" />
+              <IconCheck size={14} strokeWidth={3} className="text-brand" />
             </Tooltip.Trigger>
             <Tooltip.Portal>
               <Tooltip.Content side="bottom">
diff --git a/studio/components/ui/OrganizationPicker.tsx b/studio/components/ui/OrganizationPicker.tsx
deleted file mode 100644
index c6308ef4a6b..00000000000
--- a/studio/components/ui/OrganizationPicker.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { useIntegrationsQuery } from 'data/integrations/integrations-query'
-import { IntegrationName } from 'data/integrations/integrations.types'
-import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { useState } from 'react'
-import { Organization } from 'types'
-import { Badge, IconHexagon, Listbox } from 'ui'
-
-export interface OrganizationPickerProps {
-  label?: string
-  onSelectedOrgChange?: (org: Organization) => void
-  integrationName: IntegrationName
-}
-
-const OrganizationPicker = ({
-  label = 'Choose an organization',
-  onSelectedOrgChange,
-  integrationName,
-}: OrganizationPickerProps) => {
-  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
-
-  /**
-   * array of integrations installed on all
-   */
-  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery()
-
-  /**
-   * filter integrations to match integrationName
-   */
-  const vercelIntegrationsInstalled = integrationData?.filter(
-    (integration) => integration.integration.name === 'Vercel'
-  )
-
-  const { data, isLoading } = useOrganizationsQuery({
-    onSuccess(organizations) {
-      const firstOrg = organizations?.[0]
-      if (firstOrg && selectedOrg === null) {
-        setSelectedOrg(firstOrg)
-        onSelectedOrgChange?.(firstOrg)
-      }
-    },
-  })
-
-  function _onSelectedOrgChange(slug: string) {
-    const org = data?.find((org) => org.slug === slug)
-
-    if (org) {
-      setSelectedOrg(org)
-      onSelectedOrgChange?.(org)
-    }
-  }
-
-  if (isLoading || integrationDataLoading) {
-    return (
-      <Listbox label={label} value="loading" disabled>
-        <Listbox.Option key="loading" value="loading" label="Loading...">
-          Loading...
-        </Listbox.Option>
-      </Listbox>
-    )
-  }
-
-  /**
-   * Organization type with `installationInstalled` added
-   */
-  interface OrganizationsResponseWithInstalledData extends Organization {
-    installationInstalled?: boolean
-  }
-
-  /**
-   * A flat array of org slugs that have integration installed
-   */
-  const flatInstalledConnectionsIds =
-    integrationData && integrationData.length > 0
-      ? integrationData?.map((x) => x.organization.slug)
-      : []
-
-  /**
-   * Organizations with extra `installationInstalled` attribute
-   * Used to show label/badge and allow/disallow installing
-   */
-  const organizationsWithInstalledData: OrganizationsResponseWithInstalledData[] = data
-    ? data.map((org) => {
-        return {
-          ...org,
-          installationInstalled: !flatInstalledConnectionsIds.includes(org.slug) ? true : false,
-        }
-      })
-    : []
-
-  return (
-    <Listbox label={label} value={selectedOrg?.slug} onChange={_onSelectedOrgChange}>
-      {organizationsWithInstalledData?.map((org) => {
-        const label = (
-          <div className="flex gap-3 items-center">
-            {org.name}
-            {org.installationInstalled && <Badge color="scale">Integration Installed</Badge>}
-          </div>
-        )
-        return (
-          <Listbox.Option
-            key={org.id}
-            value={org.slug}
-            // @ts-expect-error
-            label={label}
-            addOnBefore={({ active, selected }: any) => <IconHexagon />}
-          >
-            {label}
-          </Listbox.Option>
-        )
-      })}
-    </Listbox>
-  )
-}
-
-export default OrganizationPicker
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index d69993f4ab9..38ba5a101fd 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -39,7 +39,7 @@ const PasswordStrengthBar = ({
           ? passwordStrengthMessage
           : 'This is the password to your postgres database, so it must be strong and hard to guess.'}{' '}
         <span
-          className="text-brand-800 underline hover:text-brand-900 transition cursor-pointer"
+          className="text-brand opacity-50 underline hover:opacity-100 transition cursor-pointer"
           onClick={generateStrongPassword}
         >
           Generate a password
diff --git a/studio/components/ui/ProductMenu/ProductMenu.tsx b/studio/components/ui/ProductMenu/ProductMenu.tsx
index 500cc95ba70..3d12c17ac06 100644
--- a/studio/components/ui/ProductMenu/ProductMenu.tsx
+++ b/studio/components/ui/ProductMenu/ProductMenu.tsx
@@ -1,14 +1,14 @@
-import { FC } from 'react'
 import { Badge, Menu } from 'ui'
-import ProductMenuItem from './ProductMenuItem'
-import { ProductMenuGroup, ProductMenuGroupItem } from './ProductMenu.types'
 
-interface Props {
+import { ProductMenuGroup, ProductMenuGroupItem } from './ProductMenu.types'
+import ProductMenuItem from './ProductMenuItem'
+
+interface ProductMenuProps {
   page?: string
   menu: ProductMenuGroup[]
 }
 
-const ProductMenu: FC<Props> = ({ page, menu }) => {
+const ProductMenu = ({ page, menu }: ProductMenuProps) => {
   return (
     <div className="flex flex-col space-y-8 overflow-y-auto">
       <Menu type="pills">
diff --git a/studio/components/ui/UpgradeToPro.tsx b/studio/components/ui/UpgradeToPro.tsx
index 9c36fb4b2cf..3436f9cc8a2 100644
--- a/studio/components/ui/UpgradeToPro.tsx
+++ b/studio/components/ui/UpgradeToPro.tsx
@@ -12,9 +12,10 @@ interface Props {
   primaryText: string
   projectRef: string
   secondaryText: string
+  addon?: 'pitr' | 'customDomain' | 'computeInstance'
 }
 
-const UpgradeToPro: FC<Props> = ({ icon, primaryText, projectRef, secondaryText }) => {
+const UpgradeToPro: FC<Props> = ({ icon, primaryText, projectRef, secondaryText, addon }) => {
   const { data: subscription } = useProjectSubscriptionV2Query({ projectRef })
   const plan = subscription?.plan?.id
 
@@ -45,8 +46,8 @@ const UpgradeToPro: FC<Props> = ({ icon, primaryText, projectRef, secondaryText
             <Tooltip.Trigger>
               <Button type="primary" disabled={!canUpdateSubscription || projectUpdateDisabled}>
                 <Link
-                  href={`/project/${projectRef}/settings/billing/subscription${
-                    plan === 'free' ? '?panel=subscriptionPlan' : ''
+                  href={`/project/${projectRef}/settings/billing/subscription?panel=${
+                    plan === 'free' ? 'subscriptionPlan' : addon || 'subscriptionPlan'
                   }`}
                 >
                   <a>{plan === 'free' ? 'Upgrade to Pro' : 'Enable Addon'}</a>
diff --git a/studio/data/__templates/README.md b/studio/data/__templates/README.md
index d3be296edcd..9a5d6f25d6f 100644
--- a/studio/data/__templates/README.md
+++ b/studio/data/__templates/README.md
@@ -72,7 +72,7 @@ return (
 
 ### Mutations
 
-The parameter `onError` can be passed when intializing the mutation, where an appropriate UI behavior should be triggered (usually a toast will be fine). If `onError` is not provided, we will then default to a toast message that will be called from within the mutation itself which should handle most cases. However, if there is a specific way that the error should be handled, then this should be passed via the `onError` parameter. (There's no need to repeat the error handling if the default behavior is sufficient)
+The parameter `onError` can be passed when initializing the mutation, where an appropriate UI behavior should be triggered (usually a toast will be fine). If `onError` is not provided, we will then default to a toast message that will be called from within the mutation itself which should handle most cases. However, if there is a specific way that the error should be handled, then this should be passed via the `onError` parameter. (There's no need to repeat the error handling if the default behavior is sufficient)
 
 We should also aim to convert most of the `mutateAsync` to `mutate`, otherwise we'd need to wrap all the `mutateAsync` calls in try catches just to ensure that the client doesn't crash when the request throws an error in the mutation. There's currently a mix due to the Form component that we're using, in particular when a method from the Form component such as `resetForm` needs to be called after the request is completed successfully.
 
@@ -88,7 +88,7 @@ const { mutate: someAction } = useMutation({
 
 const onConfirm = async () => {
   // Assuming that your mutation needs a URL param like project ref
-  // This check is just to satistfy the linting - there's an implicit assumption that
+  // This check is just to satisfy the linting - there's an implicit assumption that
   // projectRef here will definitely be available since its obtained from the URL
   if (!projectRef) return console.error('Project ref is required')
 
diff --git a/studio/data/api.d.ts b/studio/data/api.d.ts
index 8a16ffd26b7..835dda10d13 100644
--- a/studio/data/api.d.ts
+++ b/studio/data/api.d.ts
@@ -42,6 +42,13 @@ export interface paths {
     /** Get infrastructure status */
     get: operations["StatusController_getStatus"];
   };
+  "/platform/projects-resource-warnings": {
+    /**
+     * Gets resource warnings for all projects accessible by the user 
+     * @description Only returns the minimal project info
+     */
+    get: operations["ProjectsResourceWarningsController_getProjectsResourceWarnings"];
+  };
   "/platform/auth/{ref}/config": {
     /** Gets GoTrue config */
     get: operations["GoTrueConfigController_getGoTrueConfig"];
@@ -99,7 +106,7 @@ export interface paths {
     get: operations["HooksController_getHookLogs"];
   };
   "/platform/database/{ref}/hook-enable": {
-    /** Enables hooks on the project */
+    /** Enables Database Webhooks on the project */
     post: operations["HooksController_enableHooks"];
   };
   "/platform/database/{ref}/owner-reassign": {
@@ -713,6 +720,38 @@ export interface paths {
   "/platform/integrations/vercel/connections/{connection_id}": {
     /** Deletes vercel project connection */
     delete: operations["VercelConnectionsController_deleteVercelConnection"];
+    /** Updates a Vercel connection for a supabase project */
+    patch: operations["VercelConnectionsController_updateVercelConnection"];
+  };
+  "/platform/integrations/github": {
+    /** Create github integration */
+    post: operations["GitHubIntegrationController_createGitHubIntegration"];
+  };
+  "/platform/integrations/github/connections/{organization_integration_id}": {
+    /** Gets installed github project connections for the given organization integration */
+    get: operations["GitHubConnectionsController_getGitHubConnections"];
+  };
+  "/platform/integrations/github/connections": {
+    /** Connects a GitHub project to a supabase project */
+    post: operations["GitHubConnectionsController_createGitHubConnection"];
+  };
+  "/platform/integrations/github/connections/{connection_id}": {
+    /** Deletes github project connection */
+    delete: operations["GitHubConnectionsController_deleteGitHubConnection"];
+    /** Updates a GitHub connection for a supabase project */
+    patch: operations["GitHubConnectionsController_updateGitHubConnection"];
+  };
+  "/platform/integrations/github/repos/{organization_integration_id}": {
+    /** Gets github repos for the given organization */
+    get: operations["GitHubRepoController_getRepos"];
+  };
+  "/platform/integrations/github/branches/{organization_integration_id}/{repo_owner}/{repo_name}": {
+    /** Gets github branches for a given repo */
+    get: operations["GitHubBranchController_getBranches"];
+  };
+  "/platform/integrations/github/pull-requests/{organization_integration_id}/{repo_owner}/{repo_name}/{target}": {
+    /** Gets github pull requests for a given repo */
+    get: operations["GitHubPullRequestController_getPullRequests"];
   };
   "/system/auth/{ref}/templates/{template}": {
     /** Gets GoTrue template */
@@ -790,10 +829,18 @@ export interface paths {
     /** Previews the migration of the organization to the new org level billing. */
     post: operations["BillingMigrationController_preview"];
   };
+  "/system/projects/{ref}/config/update-jwt/complete": {
+    /** Handle update project jwt on completion */
+    post: operations["ProjectUpdateJwtController_completeUpdateJwt"];
+  };
   "/system/integrations/vercel/webhooks": {
     /** Processes Vercel event */
     post: operations["VercelWebhooksController_processEvent"];
   };
+  "/system/integrations/github/webhooks": {
+    /** Processes GitHub event */
+    post: operations["GitHubWebhooksController_processEvent"];
+  };
   "/system/stripe/webhooks-v2": {
     /** Processes Stripe event */
     post: operations["StripeWebhooksController_processEvent"];
@@ -871,7 +918,7 @@ export interface paths {
     get: operations["HooksController_getHookLogs"];
   };
   "/v0/database/{ref}/hook-enable": {
-    /** Enables hooks on the project */
+    /** Enables Database Webhooks on the project */
     post: operations["HooksController_enableHooks"];
   };
   "/v0/organizations": {
@@ -1343,10 +1390,6 @@ export interface paths {
     /** Updates project's postgrest config */
     patch: operations["PostgrestConfigController_updatePostgRESTConfig"];
   };
-  "/v1/projects/{ref}/database/query": {
-    /** Run sql query */
-    post: operations["QueryController_runQuery"];
-  };
   "/v1/projects/{ref}/secrets": {
     /**
      * List all secrets 
@@ -1423,6 +1466,34 @@ export interface paths {
     /** Updates project's pgbouncer config */
     patch: operations["V1PgbouncerConfigController_updatePgbouncerConfig"];
   };
+  "/v1/projects/{ref}/config/auth": {
+    /** Gets project's auth config */
+    get: operations["V1AuthConfigController_getV1AuthConfig"];
+    /** Updates a project's auth config */
+    patch: operations["V1AuthConfigController_updateV1AuthConfig"];
+  };
+  "/v1/projects/{ref}/config/auth/sso/providers": {
+    /** Lists all SSO providers */
+    get: operations["ProvidersController_listAllProviders"];
+    /** Creates a new SSO provider */
+    post: operations["ProvidersController_createProviderForProject"];
+  };
+  "/v1/projects/{ref}/config/auth/sso/providers/{provider_id}": {
+    /** Gets a SSO provider by its UUID */
+    get: operations["ProvidersController_getProviderById"];
+    /** Updates a SSO provider by its UUID */
+    put: operations["ProvidersController_updateProviderById"];
+    /** Removes a SSO provider by its UUID */
+    delete: operations["ProvidersController_removeProviderById"];
+  };
+  "/v1/projects/{ref}/database/query": {
+    /** Run sql query */
+    post: operations["V1QueryController_v1RunQuery"];
+  };
+  "/v1/projects/{ref}/database/webhooks/enable": {
+    /** Enables Database Webhooks on the project */
+    post: operations["V1DatabaseWebhooksController_v1EnableDatabaseWebhooks"];
+  };
   "/v1/projects/{ref}/functions": {
     /**
      * List all functions 
@@ -1459,20 +1530,6 @@ export interface paths {
      */
     get: operations["FunctionSlugController_getFunctionBody"];
   };
-  "/v1/projects/{ref}/config/auth/sso/providers": {
-    /** Lists all SSO providers */
-    get: operations["ProvidersController_listAllProviders"];
-    /** Creates a new SSO provider */
-    post: operations["ProvidersController_createProviderForProject"];
-  };
-  "/v1/projects/{ref}/config/auth/sso/providers/{provider_id}": {
-    /** Gets a SSO provider by its UUID */
-    get: operations["ProvidersController_getProviderById"];
-    /** Updates a SSO provider by its UUID */
-    put: operations["ProvidersController_updateProviderById"];
-    /** Removes a SSO provider by its UUID */
-    delete: operations["ProvidersController_removeProviderById"];
-  };
   "/v1/organizations": {
     /**
      * List all organizations 
@@ -1578,36 +1635,18 @@ export interface components {
       password: string;
       redirectTo?: string;
     };
+    ProjectResourceWarningsResponse: {
+      project: string;
+      is_readonly_mode_enabled: boolean;
+      is_disk_io_budget_below_threshold: boolean;
+      is_disk_space_usage_beyond_threshold: boolean;
+      is_cpu_load_beyond_threshold: boolean;
+      is_memory_and_swap_usage_beyond_threshold: boolean;
+    };
     GetGoTrueConfigResponse: {
-      app_version: string;
-      isFreeTier: boolean;
-      SAML_PRIVATE_KEY_ENCRYPTED?: string;
-      id: number;
-      project_id: number;
-      updated_at: string;
       SITE_URL: string;
       DISABLE_SIGNUP: boolean;
-      RATE_LIMIT_HEADER: string;
       JWT_EXP: number;
-      JWT_AUD: string;
-      JWT_DEFAULT_GROUP_NAME: string;
-      EXTERNAL_GITHUB_ENABLED: boolean;
-      EXTERNAL_GITHUB_CLIENT_ID: string;
-      EXTERNAL_GITHUB_SECRET: string;
-      EXTERNAL_BITBUCKET_ENABLED: boolean;
-      EXTERNAL_BITBUCKET_CLIENT_ID: string;
-      EXTERNAL_BITBUCKET_SECRET: string;
-      EXTERNAL_GOOGLE_ENABLED: boolean;
-      EXTERNAL_GOOGLE_CLIENT_ID: string;
-      EXTERNAL_GOOGLE_SECRET: string;
-      EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS?: string;
-      EXTERNAL_GITLAB_ENABLED: boolean;
-      EXTERNAL_GITLAB_CLIENT_ID: string;
-      EXTERNAL_GITLAB_SECRET: string;
-      EXTERNAL_GITLAB_URL: string;
-      EXTERNAL_KAKAO_ENABLED: boolean;
-      EXTERNAL_KAKAO_CLIENT_ID: string;
-      EXTERNAL_KAKAO_SECRET: string;
       SMTP_ADMIN_EMAIL: string;
       SMTP_HOST: string;
       SMTP_PORT: string;
@@ -1615,64 +1654,22 @@ export interface components {
       SMTP_PASS?: string | null;
       SMTP_PASS_ENCRYPTED?: string | null;
       SMTP_MAX_FREQUENCY: number;
+      SMTP_SENDER_NAME?: string;
       MAILER_AUTOCONFIRM: boolean;
-      MAILER_URLPATHS_INVITE: string;
-      MAILER_URLPATHS_CONFIRMATION: string;
-      MAILER_URLPATHS_RECOVERY: string;
-      MAILER_URLPATHS_EMAIL_CHANGE: string;
       MAILER_SUBJECTS_INVITE: string;
       MAILER_SUBJECTS_CONFIRMATION: string;
       MAILER_SUBJECTS_RECOVERY: string;
       MAILER_SUBJECTS_EMAIL_CHANGE: string;
-      MAILER_TEMPLATES_INVITE: string;
-      MAILER_TEMPLATES_INVITE_CONTENT: string;
-      MAILER_TEMPLATES_CONFIRMATION: string;
-      MAILER_TEMPLATES_CONFIRMATION_CONTENT: string;
-      MAILER_TEMPLATES_RECOVERY: string;
-      MAILER_TEMPLATES_RECOVERY_CONTENT: string;
-      MAILER_TEMPLATES_EMAIL_CHANGE: string;
-      MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: string;
       MAILER_SUBJECTS_MAGIC_LINK: string;
-      MAILER_TEMPLATES_MAGIC_LINK: string;
+      MAILER_TEMPLATES_INVITE_CONTENT: string;
+      MAILER_TEMPLATES_CONFIRMATION_CONTENT: string;
+      MAILER_TEMPLATES_RECOVERY_CONTENT: string;
+      MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: string;
       MAILER_TEMPLATES_MAGIC_LINK_CONTENT: string;
-      MAX_ENROLLED_FACTORS: number;
       MFA_MAX_ENROLLED_FACTORS: number;
-      EXTERNAL_AZURE_ENABLED: boolean;
-      EXTERNAL_AZURE_CLIENT_ID: string;
-      EXTERNAL_AZURE_SECRET: string;
-      EXTERNAL_FACEBOOK_ENABLED: boolean;
-      EXTERNAL_FACEBOOK_CLIENT_ID: string;
-      EXTERNAL_FACEBOOK_SECRET: string;
       URI_ALLOW_LIST: string;
-      EXTERNAL_TWITTER_ENABLED: boolean;
-      EXTERNAL_TWITTER_CLIENT_ID: string;
-      EXTERNAL_TWITTER_SECRET: string;
-      EXTERNAL_APPLE_ENABLED: boolean;
-      EXTERNAL_APPLE_CLIENT_ID: string;
-      EXTERNAL_APPLE_SECRET: string;
-      EXTERNAL_IOS_BUNDLE_ID?: string;
-      EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS?: string;
-      EXTERNAL_DISCORD_ENABLED: boolean;
-      EXTERNAL_DISCORD_CLIENT_ID: string;
-      EXTERNAL_DISCORD_SECRET: string;
-      EXTERNAL_TWITCH_ENABLED: boolean;
-      EXTERNAL_TWITCH_CLIENT_ID: string;
-      EXTERNAL_TWITCH_SECRET: string;
-      SMTP_SENDER_NAME?: string;
       EXTERNAL_EMAIL_ENABLED: boolean;
       EXTERNAL_PHONE_ENABLED: boolean;
-      SMS_AUTOCONFIRM: boolean;
-      SMS_MAX_FREQUENCY: number;
-      SMS_OTP_EXP: number;
-      SMS_OTP_LENGTH: number;
-      SMS_PROVIDER: string;
-      SMS_TWILIO_ACCOUNT_SID: string;
-      SMS_TWILIO_AUTH_TOKEN: string;
-      SMS_TWILIO_MESSAGE_SERVICE_SID: string;
-      SMS_TWILIO_VERIFY_ACCOUNT_SID: string;
-      SMS_TWILIO_VERIFY_AUTH_TOKEN: string;
-      SMS_TWILIO_VERIFY_MESSAGE_SERVICE_SID: string;
-      SMS_TEMPLATE: string;
       SAML_ENABLED?: boolean;
       SECURITY_CAPTCHA_ENABLED: boolean;
       SECURITY_CAPTCHA_PROVIDER: string;
@@ -1680,74 +1677,98 @@ export interface components {
       RATE_LIMIT_EMAIL_SENT: number;
       RATE_LIMIT_SMS_SENT: number;
       MAILER_SECURE_EMAIL_CHANGE_ENABLED: boolean;
-      EXTERNAL_SPOTIFY_ENABLED: boolean;
-      EXTERNAL_SPOTIFY_CLIENT_ID: string;
-      EXTERNAL_SPOTIFY_SECRET: string;
-      EXTERNAL_SLACK_ENABLED: boolean;
-      EXTERNAL_SLACK_CLIENT_ID: string;
-      EXTERNAL_SLACK_SECRET: string;
+      REFRESH_TOKEN_ROTATION_ENABLED: boolean;
+      PASSWORD_MIN_LENGTH: number;
+      SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: boolean;
+      SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: number;
+      MAILER_OTP_EXP: number;
+      SMS_AUTOCONFIRM: boolean;
+      SMS_MAX_FREQUENCY: number;
+      SMS_OTP_EXP: number;
+      SMS_OTP_LENGTH: number;
+      SMS_PROVIDER: string;
       SMS_MESSAGEBIRD_ACCESS_KEY: string;
       SMS_MESSAGEBIRD_ORIGINATOR: string;
-      REFRESH_TOKEN_ROTATION_ENABLED: boolean;
+      SMS_TEXTLOCAL_API_KEY: string;
+      SMS_TEXTLOCAL_SENDER: string;
+      SMS_TWILIO_ACCOUNT_SID: string;
+      SMS_TWILIO_AUTH_TOKEN: string;
+      SMS_TWILIO_MESSAGE_SERVICE_SID: string;
+      SMS_TWILIO_VERIFY_ACCOUNT_SID: string;
+      SMS_TWILIO_VERIFY_AUTH_TOKEN: string;
+      SMS_TWILIO_VERIFY_MESSAGE_SERVICE_SID: string;
+      SMS_VONAGE_API_KEY: string;
+      SMS_VONAGE_API_SECRET: string;
+      SMS_VONAGE_FROM: string;
+      SMS_TEMPLATE: string;
+      EXTERNAL_APPLE_ENABLED: boolean;
+      EXTERNAL_APPLE_CLIENT_ID: string;
+      EXTERNAL_APPLE_SECRET: string;
+      EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS?: string;
+      EXTERNAL_AZURE_ENABLED: boolean;
+      EXTERNAL_AZURE_CLIENT_ID: string;
+      EXTERNAL_AZURE_SECRET: string;
+      EXTERNAL_AZURE_URL: string;
+      EXTERNAL_BITBUCKET_ENABLED: boolean;
+      EXTERNAL_BITBUCKET_CLIENT_ID: string;
+      EXTERNAL_BITBUCKET_SECRET: string;
+      EXTERNAL_DISCORD_ENABLED: boolean;
+      EXTERNAL_DISCORD_CLIENT_ID: string;
+      EXTERNAL_DISCORD_SECRET: string;
+      EXTERNAL_FACEBOOK_ENABLED: boolean;
+      EXTERNAL_FACEBOOK_CLIENT_ID: string;
+      EXTERNAL_FACEBOOK_SECRET: string;
+      EXTERNAL_FIGMA_ENABLED: boolean;
+      EXTERNAL_FIGMA_CLIENT_ID: string;
+      EXTERNAL_FIGMA_SECRET: string;
+      EXTERNAL_GITHUB_ENABLED: boolean;
+      EXTERNAL_GITHUB_CLIENT_ID: string;
+      EXTERNAL_GITHUB_SECRET: string;
+      EXTERNAL_GITLAB_ENABLED: boolean;
+      EXTERNAL_GITLAB_CLIENT_ID: string;
+      EXTERNAL_GITLAB_SECRET: string;
+      EXTERNAL_GITLAB_URL: string;
+      EXTERNAL_GOOGLE_ENABLED: boolean;
+      EXTERNAL_GOOGLE_CLIENT_ID: string;
+      EXTERNAL_GOOGLE_SECRET: string;
+      EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS?: string;
+      EXTERNAL_KAKAO_ENABLED: boolean;
+      EXTERNAL_KAKAO_CLIENT_ID: string;
+      EXTERNAL_KAKAO_SECRET: string;
+      EXTERNAL_KEYCLOAK_ENABLED: boolean;
+      EXTERNAL_KEYCLOAK_CLIENT_ID: string;
+      EXTERNAL_KEYCLOAK_SECRET: string;
+      EXTERNAL_KEYCLOAK_URL: string;
       EXTERNAL_LINKEDIN_ENABLED: boolean;
       EXTERNAL_LINKEDIN_CLIENT_ID: string;
       EXTERNAL_LINKEDIN_SECRET: string;
       EXTERNAL_NOTION_ENABLED: boolean;
       EXTERNAL_NOTION_CLIENT_ID: string;
       EXTERNAL_NOTION_SECRET: string;
-      SMS_VONAGE_API_KEY: string;
-      SMS_VONAGE_API_SECRET: string;
-      SMS_VONAGE_FROM: string;
-      SMS_TEXTLOCAL_API_KEY: string;
-      SMS_TEXTLOCAL_SENDER: string;
-      EXTERNAL_ZOOM_ENABLED: boolean;
-      EXTERNAL_ZOOM_CLIENT_ID: string;
-      EXTERNAL_ZOOM_SECRET: string;
-      EXTERNAL_AZURE_URL: string;
-      PASSWORD_MIN_LENGTH: number;
-      EXTERNAL_KEYCLOAK_ENABLED: boolean;
-      EXTERNAL_KEYCLOAK_CLIENT_ID: string;
-      EXTERNAL_KEYCLOAK_SECRET: string;
-      EXTERNAL_KEYCLOAK_URL: string;
+      EXTERNAL_SLACK_ENABLED: boolean;
+      EXTERNAL_SLACK_CLIENT_ID: string;
+      EXTERNAL_SLACK_SECRET: string;
+      EXTERNAL_SPOTIFY_ENABLED: boolean;
+      EXTERNAL_SPOTIFY_CLIENT_ID: string;
+      EXTERNAL_SPOTIFY_SECRET: string;
+      EXTERNAL_TWITCH_ENABLED: boolean;
+      EXTERNAL_TWITCH_CLIENT_ID: string;
+      EXTERNAL_TWITCH_SECRET: string;
+      EXTERNAL_TWITTER_ENABLED: boolean;
+      EXTERNAL_TWITTER_CLIENT_ID: string;
+      EXTERNAL_TWITTER_SECRET: string;
       EXTERNAL_WORKOS_ENABLED: boolean;
       EXTERNAL_WORKOS_CLIENT_ID: string;
       EXTERNAL_WORKOS_SECRET: string;
       EXTERNAL_WORKOS_URL: string;
-      EXTERNAL_FIGMA_ENABLED: boolean;
-      EXTERNAL_FIGMA_CLIENT_ID: string;
-      EXTERNAL_FIGMA_SECRET: string;
-      EXTERNAL_FIGMA_URL: string;
-      MFA_ENABLED: boolean;
-      SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: boolean;
-      SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: number;
-      MAILER_OTP_EXP: number;
-      RATE_LIMIT_VERIFY: number;
-      RATE_LIMIT_TOKEN_REFRESH: number;
+      EXTERNAL_ZOOM_ENABLED: boolean;
+      EXTERNAL_ZOOM_CLIENT_ID: string;
+      EXTERNAL_ZOOM_SECRET: string;
     };
     UpdateGoTrueConfigBody: {
       SITE_URL: string;
       DISABLE_SIGNUP: boolean;
-      RATE_LIMIT_HEADER: string;
       JWT_EXP: number;
-      JWT_AUD: string;
-      JWT_DEFAULT_GROUP_NAME: string;
-      EXTERNAL_GITHUB_ENABLED: boolean;
-      EXTERNAL_GITHUB_CLIENT_ID: string;
-      EXTERNAL_GITHUB_SECRET: string;
-      EXTERNAL_BITBUCKET_ENABLED: boolean;
-      EXTERNAL_BITBUCKET_CLIENT_ID: string;
-      EXTERNAL_BITBUCKET_SECRET: string;
-      EXTERNAL_GOOGLE_ENABLED: boolean;
-      EXTERNAL_GOOGLE_CLIENT_ID: string;
-      EXTERNAL_GOOGLE_SECRET: string;
-      EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS?: string;
-      EXTERNAL_GITLAB_ENABLED: boolean;
-      EXTERNAL_GITLAB_CLIENT_ID: string;
-      EXTERNAL_GITLAB_SECRET: string;
-      EXTERNAL_GITLAB_URL: string;
-      EXTERNAL_KAKAO_ENABLED: boolean;
-      EXTERNAL_KAKAO_CLIENT_ID: string;
-      EXTERNAL_KAKAO_SECRET: string;
       SMTP_ADMIN_EMAIL: string;
       SMTP_HOST: string;
       SMTP_PORT: string;
@@ -1755,64 +1776,22 @@ export interface components {
       SMTP_PASS?: string | null;
       SMTP_PASS_ENCRYPTED?: string | null;
       SMTP_MAX_FREQUENCY: number;
+      SMTP_SENDER_NAME?: string;
       MAILER_AUTOCONFIRM: boolean;
-      MAILER_URLPATHS_INVITE: string;
-      MAILER_URLPATHS_CONFIRMATION: string;
-      MAILER_URLPATHS_RECOVERY: string;
-      MAILER_URLPATHS_EMAIL_CHANGE: string;
       MAILER_SUBJECTS_INVITE: string;
       MAILER_SUBJECTS_CONFIRMATION: string;
       MAILER_SUBJECTS_RECOVERY: string;
       MAILER_SUBJECTS_EMAIL_CHANGE: string;
-      MAILER_TEMPLATES_INVITE: string;
-      MAILER_TEMPLATES_INVITE_CONTENT: string;
-      MAILER_TEMPLATES_CONFIRMATION: string;
-      MAILER_TEMPLATES_CONFIRMATION_CONTENT: string;
-      MAILER_TEMPLATES_RECOVERY: string;
-      MAILER_TEMPLATES_RECOVERY_CONTENT: string;
-      MAILER_TEMPLATES_EMAIL_CHANGE: string;
-      MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: string;
       MAILER_SUBJECTS_MAGIC_LINK: string;
-      MAILER_TEMPLATES_MAGIC_LINK: string;
+      MAILER_TEMPLATES_INVITE_CONTENT: string;
+      MAILER_TEMPLATES_CONFIRMATION_CONTENT: string;
+      MAILER_TEMPLATES_RECOVERY_CONTENT: string;
+      MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: string;
       MAILER_TEMPLATES_MAGIC_LINK_CONTENT: string;
-      MAX_ENROLLED_FACTORS: number;
       MFA_MAX_ENROLLED_FACTORS: number;
-      EXTERNAL_AZURE_ENABLED: boolean;
-      EXTERNAL_AZURE_CLIENT_ID: string;
-      EXTERNAL_AZURE_SECRET: string;
-      EXTERNAL_FACEBOOK_ENABLED: boolean;
-      EXTERNAL_FACEBOOK_CLIENT_ID: string;
-      EXTERNAL_FACEBOOK_SECRET: string;
       URI_ALLOW_LIST: string;
-      EXTERNAL_TWITTER_ENABLED: boolean;
-      EXTERNAL_TWITTER_CLIENT_ID: string;
-      EXTERNAL_TWITTER_SECRET: string;
-      EXTERNAL_APPLE_ENABLED: boolean;
-      EXTERNAL_APPLE_CLIENT_ID: string;
-      EXTERNAL_APPLE_SECRET: string;
-      EXTERNAL_IOS_BUNDLE_ID?: string;
-      EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS?: string;
-      EXTERNAL_DISCORD_ENABLED: boolean;
-      EXTERNAL_DISCORD_CLIENT_ID: string;
-      EXTERNAL_DISCORD_SECRET: string;
-      EXTERNAL_TWITCH_ENABLED: boolean;
-      EXTERNAL_TWITCH_CLIENT_ID: string;
-      EXTERNAL_TWITCH_SECRET: string;
-      SMTP_SENDER_NAME?: string;
       EXTERNAL_EMAIL_ENABLED: boolean;
       EXTERNAL_PHONE_ENABLED: boolean;
-      SMS_AUTOCONFIRM: boolean;
-      SMS_MAX_FREQUENCY: number;
-      SMS_OTP_EXP: number;
-      SMS_OTP_LENGTH: number;
-      SMS_PROVIDER: string;
-      SMS_TWILIO_ACCOUNT_SID: string;
-      SMS_TWILIO_AUTH_TOKEN: string;
-      SMS_TWILIO_MESSAGE_SERVICE_SID: string;
-      SMS_TWILIO_VERIFY_ACCOUNT_SID: string;
-      SMS_TWILIO_VERIFY_AUTH_TOKEN: string;
-      SMS_TWILIO_VERIFY_MESSAGE_SERVICE_SID: string;
-      SMS_TEMPLATE: string;
       SAML_ENABLED?: boolean;
       SECURITY_CAPTCHA_ENABLED: boolean;
       SECURITY_CAPTCHA_PROVIDER: string;
@@ -1820,74 +1799,98 @@ export interface components {
       RATE_LIMIT_EMAIL_SENT: number;
       RATE_LIMIT_SMS_SENT: number;
       MAILER_SECURE_EMAIL_CHANGE_ENABLED: boolean;
-      EXTERNAL_SPOTIFY_ENABLED: boolean;
-      EXTERNAL_SPOTIFY_CLIENT_ID: string;
-      EXTERNAL_SPOTIFY_SECRET: string;
-      EXTERNAL_SLACK_ENABLED: boolean;
-      EXTERNAL_SLACK_CLIENT_ID: string;
-      EXTERNAL_SLACK_SECRET: string;
+      REFRESH_TOKEN_ROTATION_ENABLED: boolean;
+      PASSWORD_MIN_LENGTH: number;
+      SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: boolean;
+      SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: number;
+      MAILER_OTP_EXP: number;
+      SMS_AUTOCONFIRM: boolean;
+      SMS_MAX_FREQUENCY: number;
+      SMS_OTP_EXP: number;
+      SMS_OTP_LENGTH: number;
+      SMS_PROVIDER: string;
       SMS_MESSAGEBIRD_ACCESS_KEY: string;
       SMS_MESSAGEBIRD_ORIGINATOR: string;
-      REFRESH_TOKEN_ROTATION_ENABLED: boolean;
+      SMS_TEXTLOCAL_API_KEY: string;
+      SMS_TEXTLOCAL_SENDER: string;
+      SMS_TWILIO_ACCOUNT_SID: string;
+      SMS_TWILIO_AUTH_TOKEN: string;
+      SMS_TWILIO_MESSAGE_SERVICE_SID: string;
+      SMS_TWILIO_VERIFY_ACCOUNT_SID: string;
+      SMS_TWILIO_VERIFY_AUTH_TOKEN: string;
+      SMS_TWILIO_VERIFY_MESSAGE_SERVICE_SID: string;
+      SMS_VONAGE_API_KEY: string;
+      SMS_VONAGE_API_SECRET: string;
+      SMS_VONAGE_FROM: string;
+      SMS_TEMPLATE: string;
+      EXTERNAL_APPLE_ENABLED: boolean;
+      EXTERNAL_APPLE_CLIENT_ID: string;
+      EXTERNAL_APPLE_SECRET: string;
+      EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS?: string;
+      EXTERNAL_AZURE_ENABLED: boolean;
+      EXTERNAL_AZURE_CLIENT_ID: string;
+      EXTERNAL_AZURE_SECRET: string;
+      EXTERNAL_AZURE_URL: string;
+      EXTERNAL_BITBUCKET_ENABLED: boolean;
+      EXTERNAL_BITBUCKET_CLIENT_ID: string;
+      EXTERNAL_BITBUCKET_SECRET: string;
+      EXTERNAL_DISCORD_ENABLED: boolean;
+      EXTERNAL_DISCORD_CLIENT_ID: string;
+      EXTERNAL_DISCORD_SECRET: string;
+      EXTERNAL_FACEBOOK_ENABLED: boolean;
+      EXTERNAL_FACEBOOK_CLIENT_ID: string;
+      EXTERNAL_FACEBOOK_SECRET: string;
+      EXTERNAL_FIGMA_ENABLED: boolean;
+      EXTERNAL_FIGMA_CLIENT_ID: string;
+      EXTERNAL_FIGMA_SECRET: string;
+      EXTERNAL_GITHUB_ENABLED: boolean;
+      EXTERNAL_GITHUB_CLIENT_ID: string;
+      EXTERNAL_GITHUB_SECRET: string;
+      EXTERNAL_GITLAB_ENABLED: boolean;
+      EXTERNAL_GITLAB_CLIENT_ID: string;
+      EXTERNAL_GITLAB_SECRET: string;
+      EXTERNAL_GITLAB_URL: string;
+      EXTERNAL_GOOGLE_ENABLED: boolean;
+      EXTERNAL_GOOGLE_CLIENT_ID: string;
+      EXTERNAL_GOOGLE_SECRET: string;
+      EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS?: string;
+      EXTERNAL_KAKAO_ENABLED: boolean;
+      EXTERNAL_KAKAO_CLIENT_ID: string;
+      EXTERNAL_KAKAO_SECRET: string;
+      EXTERNAL_KEYCLOAK_ENABLED: boolean;
+      EXTERNAL_KEYCLOAK_CLIENT_ID: string;
+      EXTERNAL_KEYCLOAK_SECRET: string;
+      EXTERNAL_KEYCLOAK_URL: string;
       EXTERNAL_LINKEDIN_ENABLED: boolean;
       EXTERNAL_LINKEDIN_CLIENT_ID: string;
       EXTERNAL_LINKEDIN_SECRET: string;
       EXTERNAL_NOTION_ENABLED: boolean;
       EXTERNAL_NOTION_CLIENT_ID: string;
       EXTERNAL_NOTION_SECRET: string;
-      SMS_VONAGE_API_KEY: string;
-      SMS_VONAGE_API_SECRET: string;
-      SMS_VONAGE_FROM: string;
-      SMS_TEXTLOCAL_API_KEY: string;
-      SMS_TEXTLOCAL_SENDER: string;
-      EXTERNAL_ZOOM_ENABLED: boolean;
-      EXTERNAL_ZOOM_CLIENT_ID: string;
-      EXTERNAL_ZOOM_SECRET: string;
-      EXTERNAL_AZURE_URL: string;
-      PASSWORD_MIN_LENGTH: number;
-      EXTERNAL_KEYCLOAK_ENABLED: boolean;
-      EXTERNAL_KEYCLOAK_CLIENT_ID: string;
-      EXTERNAL_KEYCLOAK_SECRET: string;
-      EXTERNAL_KEYCLOAK_URL: string;
+      EXTERNAL_SLACK_ENABLED: boolean;
+      EXTERNAL_SLACK_CLIENT_ID: string;
+      EXTERNAL_SLACK_SECRET: string;
+      EXTERNAL_SPOTIFY_ENABLED: boolean;
+      EXTERNAL_SPOTIFY_CLIENT_ID: string;
+      EXTERNAL_SPOTIFY_SECRET: string;
+      EXTERNAL_TWITCH_ENABLED: boolean;
+      EXTERNAL_TWITCH_CLIENT_ID: string;
+      EXTERNAL_TWITCH_SECRET: string;
+      EXTERNAL_TWITTER_ENABLED: boolean;
+      EXTERNAL_TWITTER_CLIENT_ID: string;
+      EXTERNAL_TWITTER_SECRET: string;
       EXTERNAL_WORKOS_ENABLED: boolean;
       EXTERNAL_WORKOS_CLIENT_ID: string;
       EXTERNAL_WORKOS_SECRET: string;
       EXTERNAL_WORKOS_URL: string;
-      EXTERNAL_FIGMA_ENABLED: boolean;
-      EXTERNAL_FIGMA_CLIENT_ID: string;
-      EXTERNAL_FIGMA_SECRET: string;
-      EXTERNAL_FIGMA_URL: string;
-      MFA_ENABLED: boolean;
-      SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: boolean;
-      SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: number;
-      MAILER_OTP_EXP: number;
-      RATE_LIMIT_VERIFY: number;
-      RATE_LIMIT_TOKEN_REFRESH: number;
+      EXTERNAL_ZOOM_ENABLED: boolean;
+      EXTERNAL_ZOOM_CLIENT_ID: string;
+      EXTERNAL_ZOOM_SECRET: string;
     };
     GoTrueConfig: {
       SITE_URL: string;
       DISABLE_SIGNUP: boolean;
-      RATE_LIMIT_HEADER: string;
       JWT_EXP: number;
-      JWT_AUD: string;
-      JWT_DEFAULT_GROUP_NAME: string;
-      EXTERNAL_GITHUB_ENABLED: boolean;
-      EXTERNAL_GITHUB_CLIENT_ID: string;
-      EXTERNAL_GITHUB_SECRET: string;
-      EXTERNAL_BITBUCKET_ENABLED: boolean;
-      EXTERNAL_BITBUCKET_CLIENT_ID: string;
-      EXTERNAL_BITBUCKET_SECRET: string;
-      EXTERNAL_GOOGLE_ENABLED: boolean;
-      EXTERNAL_GOOGLE_CLIENT_ID: string;
-      EXTERNAL_GOOGLE_SECRET: string;
-      EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS?: string;
-      EXTERNAL_GITLAB_ENABLED: boolean;
-      EXTERNAL_GITLAB_CLIENT_ID: string;
-      EXTERNAL_GITLAB_SECRET: string;
-      EXTERNAL_GITLAB_URL: string;
-      EXTERNAL_KAKAO_ENABLED: boolean;
-      EXTERNAL_KAKAO_CLIENT_ID: string;
-      EXTERNAL_KAKAO_SECRET: string;
       SMTP_ADMIN_EMAIL: string;
       SMTP_HOST: string;
       SMTP_PORT: string;
@@ -1895,64 +1898,22 @@ export interface components {
       SMTP_PASS?: string | null;
       SMTP_PASS_ENCRYPTED?: string | null;
       SMTP_MAX_FREQUENCY: number;
+      SMTP_SENDER_NAME?: string;
       MAILER_AUTOCONFIRM: boolean;
-      MAILER_URLPATHS_INVITE: string;
-      MAILER_URLPATHS_CONFIRMATION: string;
-      MAILER_URLPATHS_RECOVERY: string;
-      MAILER_URLPATHS_EMAIL_CHANGE: string;
       MAILER_SUBJECTS_INVITE: string;
       MAILER_SUBJECTS_CONFIRMATION: string;
       MAILER_SUBJECTS_RECOVERY: string;
       MAILER_SUBJECTS_EMAIL_CHANGE: string;
-      MAILER_TEMPLATES_INVITE: string;
-      MAILER_TEMPLATES_INVITE_CONTENT: string;
-      MAILER_TEMPLATES_CONFIRMATION: string;
-      MAILER_TEMPLATES_CONFIRMATION_CONTENT: string;
-      MAILER_TEMPLATES_RECOVERY: string;
-      MAILER_TEMPLATES_RECOVERY_CONTENT: string;
-      MAILER_TEMPLATES_EMAIL_CHANGE: string;
-      MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: string;
       MAILER_SUBJECTS_MAGIC_LINK: string;
-      MAILER_TEMPLATES_MAGIC_LINK: string;
+      MAILER_TEMPLATES_INVITE_CONTENT: string;
+      MAILER_TEMPLATES_CONFIRMATION_CONTENT: string;
+      MAILER_TEMPLATES_RECOVERY_CONTENT: string;
+      MAILER_TEMPLATES_EMAIL_CHANGE_CONTENT: string;
       MAILER_TEMPLATES_MAGIC_LINK_CONTENT: string;
-      MAX_ENROLLED_FACTORS: number;
       MFA_MAX_ENROLLED_FACTORS: number;
-      EXTERNAL_AZURE_ENABLED: boolean;
-      EXTERNAL_AZURE_CLIENT_ID: string;
-      EXTERNAL_AZURE_SECRET: string;
-      EXTERNAL_FACEBOOK_ENABLED: boolean;
-      EXTERNAL_FACEBOOK_CLIENT_ID: string;
-      EXTERNAL_FACEBOOK_SECRET: string;
       URI_ALLOW_LIST: string;
-      EXTERNAL_TWITTER_ENABLED: boolean;
-      EXTERNAL_TWITTER_CLIENT_ID: string;
-      EXTERNAL_TWITTER_SECRET: string;
-      EXTERNAL_APPLE_ENABLED: boolean;
-      EXTERNAL_APPLE_CLIENT_ID: string;
-      EXTERNAL_APPLE_SECRET: string;
-      EXTERNAL_IOS_BUNDLE_ID?: string;
-      EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS?: string;
-      EXTERNAL_DISCORD_ENABLED: boolean;
-      EXTERNAL_DISCORD_CLIENT_ID: string;
-      EXTERNAL_DISCORD_SECRET: string;
-      EXTERNAL_TWITCH_ENABLED: boolean;
-      EXTERNAL_TWITCH_CLIENT_ID: string;
-      EXTERNAL_TWITCH_SECRET: string;
-      SMTP_SENDER_NAME?: string;
       EXTERNAL_EMAIL_ENABLED: boolean;
       EXTERNAL_PHONE_ENABLED: boolean;
-      SMS_AUTOCONFIRM: boolean;
-      SMS_MAX_FREQUENCY: number;
-      SMS_OTP_EXP: number;
-      SMS_OTP_LENGTH: number;
-      SMS_PROVIDER: string;
-      SMS_TWILIO_ACCOUNT_SID: string;
-      SMS_TWILIO_AUTH_TOKEN: string;
-      SMS_TWILIO_MESSAGE_SERVICE_SID: string;
-      SMS_TWILIO_VERIFY_ACCOUNT_SID: string;
-      SMS_TWILIO_VERIFY_AUTH_TOKEN: string;
-      SMS_TWILIO_VERIFY_MESSAGE_SERVICE_SID: string;
-      SMS_TEMPLATE: string;
       SAML_ENABLED?: boolean;
       SECURITY_CAPTCHA_ENABLED: boolean;
       SECURITY_CAPTCHA_PROVIDER: string;
@@ -1960,53 +1921,93 @@ export interface components {
       RATE_LIMIT_EMAIL_SENT: number;
       RATE_LIMIT_SMS_SENT: number;
       MAILER_SECURE_EMAIL_CHANGE_ENABLED: boolean;
-      EXTERNAL_SPOTIFY_ENABLED: boolean;
-      EXTERNAL_SPOTIFY_CLIENT_ID: string;
-      EXTERNAL_SPOTIFY_SECRET: string;
-      EXTERNAL_SLACK_ENABLED: boolean;
-      EXTERNAL_SLACK_CLIENT_ID: string;
-      EXTERNAL_SLACK_SECRET: string;
+      REFRESH_TOKEN_ROTATION_ENABLED: boolean;
+      PASSWORD_MIN_LENGTH: number;
+      SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: boolean;
+      SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: number;
+      MAILER_OTP_EXP: number;
+      SMS_AUTOCONFIRM: boolean;
+      SMS_MAX_FREQUENCY: number;
+      SMS_OTP_EXP: number;
+      SMS_OTP_LENGTH: number;
+      SMS_PROVIDER: string;
       SMS_MESSAGEBIRD_ACCESS_KEY: string;
       SMS_MESSAGEBIRD_ORIGINATOR: string;
-      REFRESH_TOKEN_ROTATION_ENABLED: boolean;
+      SMS_TEXTLOCAL_API_KEY: string;
+      SMS_TEXTLOCAL_SENDER: string;
+      SMS_TWILIO_ACCOUNT_SID: string;
+      SMS_TWILIO_AUTH_TOKEN: string;
+      SMS_TWILIO_MESSAGE_SERVICE_SID: string;
+      SMS_TWILIO_VERIFY_ACCOUNT_SID: string;
+      SMS_TWILIO_VERIFY_AUTH_TOKEN: string;
+      SMS_TWILIO_VERIFY_MESSAGE_SERVICE_SID: string;
+      SMS_VONAGE_API_KEY: string;
+      SMS_VONAGE_API_SECRET: string;
+      SMS_VONAGE_FROM: string;
+      SMS_TEMPLATE: string;
+      EXTERNAL_APPLE_ENABLED: boolean;
+      EXTERNAL_APPLE_CLIENT_ID: string;
+      EXTERNAL_APPLE_SECRET: string;
+      EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS?: string;
+      EXTERNAL_AZURE_ENABLED: boolean;
+      EXTERNAL_AZURE_CLIENT_ID: string;
+      EXTERNAL_AZURE_SECRET: string;
+      EXTERNAL_AZURE_URL: string;
+      EXTERNAL_BITBUCKET_ENABLED: boolean;
+      EXTERNAL_BITBUCKET_CLIENT_ID: string;
+      EXTERNAL_BITBUCKET_SECRET: string;
+      EXTERNAL_DISCORD_ENABLED: boolean;
+      EXTERNAL_DISCORD_CLIENT_ID: string;
+      EXTERNAL_DISCORD_SECRET: string;
+      EXTERNAL_FACEBOOK_ENABLED: boolean;
+      EXTERNAL_FACEBOOK_CLIENT_ID: string;
+      EXTERNAL_FACEBOOK_SECRET: string;
+      EXTERNAL_FIGMA_ENABLED: boolean;
+      EXTERNAL_FIGMA_CLIENT_ID: string;
+      EXTERNAL_FIGMA_SECRET: string;
+      EXTERNAL_GITHUB_ENABLED: boolean;
+      EXTERNAL_GITHUB_CLIENT_ID: string;
+      EXTERNAL_GITHUB_SECRET: string;
+      EXTERNAL_GITLAB_ENABLED: boolean;
+      EXTERNAL_GITLAB_CLIENT_ID: string;
+      EXTERNAL_GITLAB_SECRET: string;
+      EXTERNAL_GITLAB_URL: string;
+      EXTERNAL_GOOGLE_ENABLED: boolean;
+      EXTERNAL_GOOGLE_CLIENT_ID: string;
+      EXTERNAL_GOOGLE_SECRET: string;
+      EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS?: string;
+      EXTERNAL_KAKAO_ENABLED: boolean;
+      EXTERNAL_KAKAO_CLIENT_ID: string;
+      EXTERNAL_KAKAO_SECRET: string;
+      EXTERNAL_KEYCLOAK_ENABLED: boolean;
+      EXTERNAL_KEYCLOAK_CLIENT_ID: string;
+      EXTERNAL_KEYCLOAK_SECRET: string;
+      EXTERNAL_KEYCLOAK_URL: string;
       EXTERNAL_LINKEDIN_ENABLED: boolean;
       EXTERNAL_LINKEDIN_CLIENT_ID: string;
       EXTERNAL_LINKEDIN_SECRET: string;
       EXTERNAL_NOTION_ENABLED: boolean;
       EXTERNAL_NOTION_CLIENT_ID: string;
       EXTERNAL_NOTION_SECRET: string;
-      SMS_VONAGE_API_KEY: string;
-      SMS_VONAGE_API_SECRET: string;
-      SMS_VONAGE_FROM: string;
-      SMS_TEXTLOCAL_API_KEY: string;
-      SMS_TEXTLOCAL_SENDER: string;
-      EXTERNAL_ZOOM_ENABLED: boolean;
-      EXTERNAL_ZOOM_CLIENT_ID: string;
-      EXTERNAL_ZOOM_SECRET: string;
-      EXTERNAL_AZURE_URL: string;
-      PASSWORD_MIN_LENGTH: number;
-      EXTERNAL_KEYCLOAK_ENABLED: boolean;
-      EXTERNAL_KEYCLOAK_CLIENT_ID: string;
-      EXTERNAL_KEYCLOAK_SECRET: string;
-      EXTERNAL_KEYCLOAK_URL: string;
+      EXTERNAL_SLACK_ENABLED: boolean;
+      EXTERNAL_SLACK_CLIENT_ID: string;
+      EXTERNAL_SLACK_SECRET: string;
+      EXTERNAL_SPOTIFY_ENABLED: boolean;
+      EXTERNAL_SPOTIFY_CLIENT_ID: string;
+      EXTERNAL_SPOTIFY_SECRET: string;
+      EXTERNAL_TWITCH_ENABLED: boolean;
+      EXTERNAL_TWITCH_CLIENT_ID: string;
+      EXTERNAL_TWITCH_SECRET: string;
+      EXTERNAL_TWITTER_ENABLED: boolean;
+      EXTERNAL_TWITTER_CLIENT_ID: string;
+      EXTERNAL_TWITTER_SECRET: string;
       EXTERNAL_WORKOS_ENABLED: boolean;
       EXTERNAL_WORKOS_CLIENT_ID: string;
       EXTERNAL_WORKOS_SECRET: string;
       EXTERNAL_WORKOS_URL: string;
-      EXTERNAL_FIGMA_ENABLED: boolean;
-      EXTERNAL_FIGMA_CLIENT_ID: string;
-      EXTERNAL_FIGMA_SECRET: string;
-      EXTERNAL_FIGMA_URL: string;
-      MFA_ENABLED: boolean;
-      SECURITY_UPDATE_PASSWORD_REQUIRE_REAUTHENTICATION: boolean;
-      SECURITY_REFRESH_TOKEN_REUSE_INTERVAL: number;
-      MAILER_OTP_EXP: number;
-      RATE_LIMIT_VERIFY: number;
-      RATE_LIMIT_TOKEN_REFRESH: number;
-      id: number;
-      project_id: number;
-      updated_at: string;
-      SAML_PRIVATE_KEY_ENCRYPTED?: string;
+      EXTERNAL_ZOOM_ENABLED: boolean;
+      EXTERNAL_ZOOM_CLIENT_ID: string;
+      EXTERNAL_ZOOM_SECRET: string;
     };
     UserBody: {
       id?: string;
@@ -2257,7 +2258,7 @@ export interface components {
       unlimited: boolean;
       capped: boolean;
       /** @enum {string} */
-      metric: "EGRESS" | "DATABASE_EGRESS" | "DATABASE_SIZE" | "STORAGE_EGRESS" | "STORAGE_SIZE" | "MONTHLY_ACTIVE_USERS" | "MONTHLY_ACTIVE_SSO_USERS" | "FUNCTION_INVOCATIONS" | "FUNCTION_COUNT" | "STORAGE_IMAGES_TRANSFORMED" | "REALTIME_MESSAGE_COUNT" | "REALTIME_PEAK_CONNECTIONS" | "COMPUTE_HOURS_XS" | "COMPUTE_HOURS_SM" | "COMPUTE_HOURS_MD" | "COMPUTE_HOURS_L" | "COMPUTE_HOURS_XL" | "COMPUTE_HOURS_2XL" | "COMPUTE_HOURS_4XL" | "COMPUTE_HOURS_8XL" | "COMPUTE_HOURS_12XL" | "COMPUTE_HOURS_16XL";
+      metric: "EGRESS" | "DATABASE_EGRESS" | "DATABASE_SIZE" | "STORAGE_EGRESS" | "STORAGE_SIZE" | "MONTHLY_ACTIVE_USERS" | "MONTHLY_ACTIVE_SSO_USERS" | "FUNCTION_INVOCATIONS" | "FUNCTION_COUNT" | "STORAGE_IMAGES_TRANSFORMED" | "REALTIME_MESSAGE_COUNT" | "REALTIME_PEAK_CONNECTIONS" | "COMPUTE_HOURS_BRANCH" | "COMPUTE_HOURS_XS" | "COMPUTE_HOURS_SM" | "COMPUTE_HOURS_MD" | "COMPUTE_HOURS_L" | "COMPUTE_HOURS_XL" | "COMPUTE_HOURS_2XL" | "COMPUTE_HOURS_4XL" | "COMPUTE_HOURS_8XL" | "COMPUTE_HOURS_12XL" | "COMPUTE_HOURS_16XL";
       /** @enum {string} */
       pricing_strategy: "UNIT" | "PACKAGE" | "NONE";
       pricing_free_units?: number;
@@ -2503,7 +2504,7 @@ export interface components {
     };
     BillingUsageBasedPrice: {
       /** @enum {string} */
-      metric: "EGRESS" | "DATABASE_EGRESS" | "DATABASE_SIZE" | "STORAGE_EGRESS" | "STORAGE_SIZE" | "MONTHLY_ACTIVE_USERS" | "MONTHLY_ACTIVE_SSO_USERS" | "FUNCTION_INVOCATIONS" | "FUNCTION_COUNT" | "STORAGE_IMAGES_TRANSFORMED" | "REALTIME_MESSAGE_COUNT" | "REALTIME_PEAK_CONNECTIONS" | "COMPUTE_HOURS_XS" | "COMPUTE_HOURS_SM" | "COMPUTE_HOURS_MD" | "COMPUTE_HOURS_L" | "COMPUTE_HOURS_XL" | "COMPUTE_HOURS_2XL" | "COMPUTE_HOURS_4XL" | "COMPUTE_HOURS_8XL" | "COMPUTE_HOURS_12XL" | "COMPUTE_HOURS_16XL";
+      metric: "EGRESS" | "DATABASE_EGRESS" | "DATABASE_SIZE" | "STORAGE_EGRESS" | "STORAGE_SIZE" | "MONTHLY_ACTIVE_USERS" | "MONTHLY_ACTIVE_SSO_USERS" | "FUNCTION_INVOCATIONS" | "FUNCTION_COUNT" | "STORAGE_IMAGES_TRANSFORMED" | "REALTIME_MESSAGE_COUNT" | "REALTIME_PEAK_CONNECTIONS" | "COMPUTE_HOURS_BRANCH" | "COMPUTE_HOURS_XS" | "COMPUTE_HOURS_SM" | "COMPUTE_HOURS_MD" | "COMPUTE_HOURS_L" | "COMPUTE_HOURS_XL" | "COMPUTE_HOURS_2XL" | "COMPUTE_HOURS_4XL" | "COMPUTE_HOURS_8XL" | "COMPUTE_HOURS_12XL" | "COMPUTE_HOURS_16XL";
       /** @enum {string} */
       pricingStrategy: "UNIT" | "PACKAGE" | "NONE";
       pricingOptions: components["schemas"]["BillingPricingOptionsUnit"] | components["schemas"]["BillingPricingOptionsPackage"] | components["schemas"]["BillingPricingOptionsNone"];
@@ -2998,6 +2999,8 @@ export interface components {
       status: string;
       subscription_id: string;
       is_readonly_mode_enabled?: boolean;
+      is_branch_enabled: boolean;
+      preview_branch_refs: (string)[];
     };
     AmiSearchOptions: {
       search_tags?: Record<string, never>;
@@ -3037,6 +3040,8 @@ export interface components {
       status: string;
       subscription_id: string;
       is_readonly_mode_enabled?: boolean;
+      is_branch_enabled: boolean;
+      preview_branch_refs: (string)[];
       endpoint: string;
       anon_key: string;
       service_key: string;
@@ -3122,16 +3127,6 @@ export interface components {
       postgrest: string;
       "supabase-postgres": string;
     };
-    BranchResponse: {
-      id: string;
-      name: string;
-      project_ref: string;
-      parent_project_ref: string;
-      is_default: boolean;
-      git_branch: string;
-      created_at: string;
-      updated_at: string;
-    };
     ProjectDetailResponse: {
       cloud_provider: string;
       db_host: string;
@@ -3152,7 +3147,7 @@ export interface components {
       volumeSizeGb?: number;
       maxDatabasePreprovisionGb?: number;
       lastDatabaseResizeAt?: string;
-      preview_branches: (components["schemas"]["BranchResponse"])[];
+      is_branch_enabled: boolean;
       parent_project_ref?: string;
     };
     ProjectRefResponse: {
@@ -3178,7 +3173,7 @@ export interface components {
       back_ups: (components["schemas"]["BackupId"])[];
     };
     RestartServiceRequest: {
-      services: ("adminapi" | "api-gateway" | "functions" | "gotrue" | "kong" | "pgbouncer" | "pgsodium" | "postgresql" | "postgrest" | "realtime" | "storage" | "walg")[];
+      services: ("adminapi" | "api-gateway" | "functions" | "gotrue" | "kong" | "pgbouncer" | "pgsodium" | "postgresql" | "postgrest" | "realtime" | "storage" | "walg" | "autoshutdown")[];
       source_notification_id?: string;
       region: string;
     };
@@ -3297,6 +3292,7 @@ export interface components {
       /** @enum {string} */
       pool_mode: "transaction" | "session" | "statement";
       max_client_conn?: number | null;
+      connectionString: string;
     };
     UpdatePgbouncerConfigBody: {
       default_pool_size?: number;
@@ -3848,9 +3844,51 @@ export interface components {
     CreateVercelConnectionResponse: {
       id: string;
     };
+    UpdateVercelConnectionsBody: {
+      metadata: Record<string, never>;
+    };
     DeleteVercelConnectionResponse: {
       id: string;
     };
+    CreateGitHubIntegrationBody: {
+      installation_id: number;
+      organization_slug: string;
+      metadata: Record<string, never>;
+    };
+    CreateGitHubIntegrationResponse: {
+      id: string;
+    };
+    GetGitHubConnections: {
+      id: string;
+      inserted_at: string;
+      updated_at: string;
+      organization_integration_id: string;
+      supabase_project_ref: string;
+      foreign_project_id: string;
+      metadata: Record<string, never>;
+    };
+    CreateGitHubConnectionsBody: {
+      organization_integration_id: string;
+      connection: components["schemas"]["IntegrationConnection"];
+    };
+    UpdateGitHubConnectionsBody: {
+      metadata: Record<string, never>;
+    };
+    GetGithubRepo: {
+      id: number;
+      full_name: string;
+    };
+    GetGithubBranch: {
+      name: string;
+    };
+    GetGithubPullRequest: {
+      id: number;
+      url: string;
+      title: string;
+      branch: string;
+      created_at: string;
+      created_by?: string;
+    };
     FunctionResponse: {
       id: string;
       slug: string;
@@ -3941,6 +3979,16 @@ export interface components {
       branch_name?: string;
       git_branch?: string;
     };
+    BranchResponse: {
+      id: string;
+      name: string;
+      project_ref: string;
+      parent_project_ref: string;
+      is_default: boolean;
+      git_branch?: string;
+      created_at: string;
+      updated_at: string;
+    };
     DatabaseResponse: {
       /** @description Database host */
       host: string;
@@ -4054,19 +4102,25 @@ export interface components {
       override_enabled: boolean;
       override_active_until: string;
     };
-    FunctionSlugResponse: {
-      id: string;
-      slug: string;
-      name: string;
-      /** @enum {string} */
-      status: "ACTIVE" | "REMOVED" | "THROTTLED";
-      version: number;
-      created_at: number;
-      updated_at: number;
-      verify_jwt?: boolean;
-      import_map?: boolean;
-      entrypoint_path?: string;
-      import_map_path?: string;
+    AuthConfigResponse: {
+      smtp_admin_email?: string;
+      smtp_host?: string;
+      smtp_port?: string;
+      smtp_user?: string;
+      smtp_pass?: string;
+      smtp_max_frequency?: number;
+      smtp_sender_name?: string;
+      rate_limit_email_sent?: number;
+    };
+    UpdateAuthConfigBody: {
+      smtp_admin_email?: string;
+      smtp_host?: string;
+      smtp_port?: string;
+      smtp_user?: string;
+      smtp_pass?: string;
+      smtp_max_frequency?: number;
+      smtp_sender_name?: string;
+      rate_limit_email_sent?: number;
     };
     AttributeValue: {
       default?: Record<string, never> | number | string | boolean;
@@ -4146,6 +4200,20 @@ export interface components {
       created_at?: string;
       updated_at?: string;
     };
+    FunctionSlugResponse: {
+      id: string;
+      slug: string;
+      name: string;
+      /** @enum {string} */
+      status: "ACTIVE" | "REMOVED" | "THROTTLED";
+      version: number;
+      created_at: number;
+      updated_at: number;
+      verify_jwt?: boolean;
+      import_map?: boolean;
+      entrypoint_path?: string;
+      import_map_path?: string;
+    };
     OAuthAppResponse: {
       id: string;
       name: string;
@@ -4371,6 +4439,19 @@ export interface operations {
       500: never;
     };
   };
+  /**
+   * Gets resource warnings for all projects accessible by the user 
+   * @description Only returns the minimal project info
+   */
+  ProjectsResourceWarningsController_getProjectsResourceWarnings: {
+    responses: {
+      200: {
+        content: {
+          "application/json": (components["schemas"]["ProjectResourceWarningsResponse"])[];
+        };
+      };
+    };
+  };
   /** Gets GoTrue config */
   GoTrueConfigController_getGoTrueConfig: {
     parameters: {
@@ -4709,25 +4790,18 @@ export interface operations {
       500: never;
     };
   };
-  /** Enables hooks on the project */
+  /** Enables Database Webhooks on the project */
   HooksController_enableHooks: {
     parameters: {
-      header: {
-        "x-connection-encrypted": string;
-      };
       path: {
         /** @description Project ref */
         ref: string;
       };
     };
     responses: {
-      201: {
-        content: {
-          "application/json": Record<string, never>;
-        };
-      };
+      201: never;
       403: never;
-      /** @description Failed to enable hooks on the project */
+      /** @description Failed to enable Database Webhooks on the project */
       500: never;
     };
   };
@@ -5024,7 +5098,7 @@ export interface operations {
   OrgDailyStatsController_getDailyStats: {
     parameters: {
       query: {
-        metric: "EGRESS" | "DATABASE_EGRESS" | "DATABASE_SIZE" | "STORAGE_EGRESS" | "STORAGE_SIZE" | "MONTHLY_ACTIVE_USERS" | "MONTHLY_ACTIVE_SSO_USERS" | "FUNCTION_INVOCATIONS" | "FUNCTION_COUNT" | "STORAGE_IMAGES_TRANSFORMED" | "REALTIME_MESSAGE_COUNT" | "REALTIME_PEAK_CONNECTIONS" | "COMPUTE_HOURS_XS" | "COMPUTE_HOURS_SM" | "COMPUTE_HOURS_MD" | "COMPUTE_HOURS_L" | "COMPUTE_HOURS_XL" | "COMPUTE_HOURS_2XL" | "COMPUTE_HOURS_4XL" | "COMPUTE_HOURS_8XL" | "COMPUTE_HOURS_12XL" | "COMPUTE_HOURS_16XL";
+        metric: "EGRESS" | "DATABASE_EGRESS" | "DATABASE_SIZE" | "STORAGE_EGRESS" | "STORAGE_SIZE" | "MONTHLY_ACTIVE_USERS" | "MONTHLY_ACTIVE_SSO_USERS" | "FUNCTION_INVOCATIONS" | "FUNCTION_COUNT" | "STORAGE_IMAGES_TRANSFORMED" | "REALTIME_MESSAGE_COUNT" | "REALTIME_PEAK_CONNECTIONS" | "COMPUTE_HOURS_BRANCH" | "COMPUTE_HOURS_XS" | "COMPUTE_HOURS_SM" | "COMPUTE_HOURS_MD" | "COMPUTE_HOURS_L" | "COMPUTE_HOURS_XL" | "COMPUTE_HOURS_2XL" | "COMPUTE_HOURS_4XL" | "COMPUTE_HOURS_8XL" | "COMPUTE_HOURS_12XL" | "COMPUTE_HOURS_16XL";
         interval: string;
         endDate: string;
         startDate: string;
@@ -6003,6 +6077,9 @@ export interface operations {
   /** Run sql query */
   QueryController_runQuery: {
     parameters: {
+      header: {
+        "x-connection-encrypted": string;
+      };
       path: {
         /** @description Project ref */
         ref: string;
@@ -8415,6 +8492,158 @@ export interface operations {
       500: never;
     };
   };
+  /** Updates a Vercel connection for a supabase project */
+  VercelConnectionsController_updateVercelConnection: {
+    parameters: {
+      path: {
+        connection_id: string;
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateVercelConnectionsBody"];
+      };
+    };
+    responses: {
+      200: never;
+      /** @description Failed to update Vercel connection */
+      500: never;
+    };
+  };
+  /** Create github integration */
+  GitHubIntegrationController_createGitHubIntegration: {
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateGitHubIntegrationBody"];
+      };
+    };
+    responses: {
+      201: {
+        content: {
+          "application/json": components["schemas"]["CreateGitHubIntegrationResponse"];
+        };
+      };
+      /** @description Failed to create github integration */
+      500: never;
+    };
+  };
+  /** Gets installed github project connections for the given organization integration */
+  GitHubConnectionsController_getGitHubConnections: {
+    parameters: {
+      path: {
+        organization_integration_id: string;
+      };
+    };
+    responses: {
+      200: {
+        content: {
+          "application/json": (components["schemas"]["GetGitHubConnections"])[];
+        };
+      };
+      /** @description Failed to get installed github connections for the given organization integration */
+      500: never;
+    };
+  };
+  /** Connects a GitHub project to a supabase project */
+  GitHubConnectionsController_createGitHubConnection: {
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateGitHubConnectionsBody"];
+      };
+    };
+    responses: {
+      201: never;
+      /** @description Failed to create project connections */
+      500: never;
+    };
+  };
+  /** Deletes github project connection */
+  GitHubConnectionsController_deleteGitHubConnection: {
+    parameters: {
+      path: {
+        connection_id: string;
+      };
+    };
+    responses: {
+      200: never;
+      /** @description Failed to delete github integration project connection */
+      500: never;
+    };
+  };
+  /** Updates a GitHub connection for a supabase project */
+  GitHubConnectionsController_updateGitHubConnection: {
+    parameters: {
+      path: {
+        connection_id: string;
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateGitHubConnectionsBody"];
+      };
+    };
+    responses: {
+      200: never;
+      /** @description Failed to update GitHub connection */
+      500: never;
+    };
+  };
+  /** Gets github repos for the given organization */
+  GitHubRepoController_getRepos: {
+    parameters: {
+      path: {
+        organization_integration_id: string;
+      };
+    };
+    responses: {
+      200: {
+        content: {
+          "application/json": (components["schemas"]["GetGithubRepo"])[];
+        };
+      };
+      /** @description Failed to get github repos for the given organization */
+      500: never;
+    };
+  };
+  /** Gets github branches for a given repo */
+  GitHubBranchController_getBranches: {
+    parameters: {
+      path: {
+        organization_integration_id: string;
+        repo_owner: string;
+        repo_name: string;
+      };
+    };
+    responses: {
+      200: {
+        content: {
+          "application/json": (components["schemas"]["GetGithubBranch"])[];
+        };
+      };
+      /** @description Failed to get github branches for a given repo */
+      500: never;
+    };
+  };
+  /** Gets github pull requests for a given repo */
+  GitHubPullRequestController_getPullRequests: {
+    parameters: {
+      path: {
+        organization_integration_id: string;
+        repo_owner: string;
+        repo_name: string;
+        target: string;
+      };
+    };
+    responses: {
+      200: {
+        content: {
+          "application/json": (components["schemas"]["GetGithubPullRequest"])[];
+        };
+      };
+      /** @description Failed to get github pull requests for a given repo */
+      500: never;
+    };
+  };
   /** Gets GoTrue template */
   AuthTemplateController_getTemplate: {
     parameters: {
@@ -8758,6 +8987,18 @@ export interface operations {
       500: never;
     };
   };
+  /** Handle update project jwt on completion */
+  ProjectUpdateJwtController_completeUpdateJwt: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string;
+      };
+    };
+    responses: {
+      201: never;
+    };
+  };
   /** Processes Vercel event */
   VercelWebhooksController_processEvent: {
     parameters: {
@@ -8776,6 +9017,25 @@ export interface operations {
       500: never;
     };
   };
+  /** Processes GitHub event */
+  GitHubWebhooksController_processEvent: {
+    parameters: {
+      header: {
+        "x-github-delivery": string;
+        "x-hub-signature-256": string;
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["Buffer"];
+      };
+    };
+    responses: {
+      201: never;
+      /** @description Failed to process GitHub event */
+      500: never;
+    };
+  };
   /** Processes Stripe event */
   StripeWebhooksController_processEvent: {
     parameters: {
@@ -9573,105 +9833,46 @@ export interface operations {
       500: never;
     };
   };
-  /**
-   * Retrieve a function 
-   * @description Retrieves a function with the specified slug and project.
-   */
-  FunctionSlugController_getFunction: {
+  /** Gets project's auth config */
+  V1AuthConfigController_getV1AuthConfig: {
     parameters: {
       path: {
         /** @description Project ref */
         ref: string;
-        /** @description Function slug */
-        function_slug: string;
       };
     };
     responses: {
       200: {
         content: {
-          "application/json": components["schemas"]["FunctionSlugResponse"];
+          "application/json": components["schemas"]["AuthConfigResponse"];
         };
       };
       403: never;
-      /** @description Failed to retrieve function with given slug */
+      /** @description Failed to retrieve project's auth config */
       500: never;
     };
   };
-  /**
-   * Delete a function 
-   * @description Deletes a function with the specified slug from the specified project.
-   */
-  FunctionSlugController_deleteFunction: {
+  /** Updates a project's auth config */
+  V1AuthConfigController_updateV1AuthConfig: {
     parameters: {
       path: {
         /** @description Project ref */
         ref: string;
-        /** @description Function slug */
-        function_slug: string;
-      };
-    };
-    responses: {
-      200: never;
-      403: never;
-      /** @description Failed to delete function with given slug */
-      500: never;
-    };
-  };
-  /**
-   * Update a function 
-   * @description Updates a function with the specified slug and project.
-   */
-  FunctionSlugController_updateFunction: {
-    parameters: {
-      query?: {
-        slug?: string;
-        name?: string;
-        verify_jwt?: boolean;
-        import_map?: boolean;
-        entrypoint_path?: string;
-        import_map_path?: string;
-      };
-      path: {
-        /** @description Project ref */
-        ref: string;
-        /** @description Function slug */
-        function_slug: string;
       };
     };
     requestBody: {
       content: {
-        "application/json": components["schemas"]["UpdateFunctionBody"];
-        "application/vnd.denoland.eszip": components["schemas"]["UpdateFunctionBody"];
+        "application/json": components["schemas"]["UpdateAuthConfigBody"];
       };
     };
     responses: {
       200: {
         content: {
-          "application/json": components["schemas"]["FunctionResponse"];
+          "application/json": components["schemas"]["AuthConfigResponse"];
         };
       };
       403: never;
-      /** @description Failed to update function with given slug */
-      500: never;
-    };
-  };
-  /**
-   * Retrieve a function body 
-   * @description Retrieves a function body for the specified slug and project.
-   */
-  FunctionSlugController_getFunctionBody: {
-    parameters: {
-      path: {
-        /** @description Project ref */
-        ref: string;
-        /** @description Function slug */
-        function_slug: string;
-      };
-    };
-    responses: {
-      200: never;
-      403: never;
-      /** @description Failed to retrieve function body with given slug */
+      /** @description Failed to update project's auth config */
       500: never;
     };
   };
@@ -9783,6 +9984,147 @@ export interface operations {
       404: never;
     };
   };
+  /** Run sql query */
+  V1QueryController_v1RunQuery: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string;
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["RunQueryBody"];
+      };
+    };
+    responses: {
+      201: {
+        content: {
+          "application/json": Record<string, never>;
+        };
+      };
+      403: never;
+      /** @description Failed to run sql query */
+      500: never;
+    };
+  };
+  /** Enables Database Webhooks on the project */
+  V1DatabaseWebhooksController_v1EnableDatabaseWebhooks: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string;
+      };
+    };
+    responses: {
+      201: never;
+      403: never;
+      /** @description Failed to enable Database Webhooks on the project */
+      500: never;
+    };
+  };
+  /**
+   * Retrieve a function 
+   * @description Retrieves a function with the specified slug and project.
+   */
+  FunctionSlugController_getFunction: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string;
+        /** @description Function slug */
+        function_slug: string;
+      };
+    };
+    responses: {
+      200: {
+        content: {
+          "application/json": components["schemas"]["FunctionSlugResponse"];
+        };
+      };
+      403: never;
+      /** @description Failed to retrieve function with given slug */
+      500: never;
+    };
+  };
+  /**
+   * Delete a function 
+   * @description Deletes a function with the specified slug from the specified project.
+   */
+  FunctionSlugController_deleteFunction: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string;
+        /** @description Function slug */
+        function_slug: string;
+      };
+    };
+    responses: {
+      200: never;
+      403: never;
+      /** @description Failed to delete function with given slug */
+      500: never;
+    };
+  };
+  /**
+   * Update a function 
+   * @description Updates a function with the specified slug and project.
+   */
+  FunctionSlugController_updateFunction: {
+    parameters: {
+      query?: {
+        slug?: string;
+        name?: string;
+        verify_jwt?: boolean;
+        import_map?: boolean;
+        entrypoint_path?: string;
+        import_map_path?: string;
+      };
+      path: {
+        /** @description Project ref */
+        ref: string;
+        /** @description Function slug */
+        function_slug: string;
+      };
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateFunctionBody"];
+        "application/vnd.denoland.eszip": components["schemas"]["UpdateFunctionBody"];
+      };
+    };
+    responses: {
+      200: {
+        content: {
+          "application/json": components["schemas"]["FunctionResponse"];
+        };
+      };
+      403: never;
+      /** @description Failed to update function with given slug */
+      500: never;
+    };
+  };
+  /**
+   * Retrieve a function body 
+   * @description Retrieves a function body for the specified slug and project.
+   */
+  FunctionSlugController_getFunctionBody: {
+    parameters: {
+      path: {
+        /** @description Project ref */
+        ref: string;
+        /** @description Function slug */
+        function_slug: string;
+      };
+    };
+    responses: {
+      200: never;
+      403: never;
+      /** @description Failed to retrieve function body with given slug */
+      500: never;
+    };
+  };
   /** Create an organization */
   OrganizationsController_createOrganization: {
     requestBody: {
diff --git a/studio/data/branches/branch-create-mutation.ts b/studio/data/branches/branch-create-mutation.ts
index a9296b688af..bd9933ddff0 100644
--- a/studio/data/branches/branch-create-mutation.ts
+++ b/studio/data/branches/branch-create-mutation.ts
@@ -4,6 +4,7 @@ import { toast } from 'react-hot-toast'
 import { post } from 'data/fetchers'
 import { ResponseError } from 'types'
 import { branchKeys } from './keys'
+import { projectKeys } from 'data/projects/keys'
 
 export type BranchCreateVariables = {
   projectRef: string
@@ -50,6 +51,7 @@ export const useBranchCreateMutation = ({
       async onSuccess(data, variables, context) {
         const { projectRef } = variables
         await queryClient.invalidateQueries(branchKeys.list(projectRef))
+        await queryClient.invalidateQueries(projectKeys.detail(projectRef))
         await onSuccess?.(data, variables, context)
       },
       async onError(data, variables, context) {
diff --git a/studio/data/branches/branch-delete-mutation.ts b/studio/data/branches/branch-delete-mutation.ts
index 2f5974fcce7..736a66b9162 100644
--- a/studio/data/branches/branch-delete-mutation.ts
+++ b/studio/data/branches/branch-delete-mutation.ts
@@ -10,7 +10,7 @@ export type BranchDeleteVariables = {
   projectRef: string
 }
 
-export async function deleteBranch({ id }: BranchDeleteVariables) {
+export async function deleteBranch({ id }: Pick<BranchDeleteVariables, 'id'>) {
   const { data, error } = await del('/v1/branches/{branch_id}', {
     params: { path: { branch_id: id } },
   })
diff --git a/studio/data/branches/branches-disable-mutation.ts b/studio/data/branches/branches-disable-mutation.ts
new file mode 100644
index 00000000000..32f3cdbaedc
--- /dev/null
+++ b/studio/data/branches/branches-disable-mutation.ts
@@ -0,0 +1,69 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
+import { del } from 'data/fetchers'
+import { projectKeys } from 'data/projects/keys'
+import { ResponseError } from 'types'
+import { deleteBranch } from './branch-delete-mutation'
+import { branchKeys } from './keys'
+
+export type BranchesDisableVariables = {
+  branchIds: string[]
+  projectRef: string
+}
+
+export async function disableBranching({ branchIds, projectRef }: BranchesDisableVariables) {
+  // Delete all preview branches first
+  if (branchIds.length > 0) {
+    const res = await Promise.all(
+      branchIds.map(async (id) => {
+        try {
+          return await deleteBranch({ id })
+        } catch (error) {
+          return error
+        }
+      })
+    )
+    const hasError = res.some((item: any) => item.message !== 'ok')
+    if (hasError) throw new Error('Failed to disable branching: Unable to delete all branches')
+  }
+
+  // Then disable branching
+  const { data, error } = await del('/v1/projects/{ref}/branches', {
+    params: { path: { ref: projectRef } },
+  })
+  if (error) throw error
+  return data
+}
+
+type BranchesDisableData = Awaited<ReturnType<typeof disableBranching>>
+
+export const useBranchesDisableMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<BranchesDisableData, ResponseError, BranchesDisableVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+  return useMutation<BranchesDisableData, ResponseError, BranchesDisableVariables>(
+    (vars) => disableBranching(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { projectRef } = variables
+        await queryClient.invalidateQueries(branchKeys.list(projectRef))
+        await queryClient.invalidateQueries(projectKeys.detail(projectRef))
+        await onSuccess?.(data, variables, context)
+      },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to disable branching: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/branches/branches-query.ts b/studio/data/branches/branches-query.ts
index b7dd3bf0042..77940400bfb 100644
--- a/studio/data/branches/branches-query.ts
+++ b/studio/data/branches/branches-query.ts
@@ -1,8 +1,8 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { get } from 'data/fetchers'
-import { branchKeys } from './keys'
-import { ResponseError } from 'types'
 import { components } from 'data/api'
+import { get } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { branchKeys } from './keys'
 
 export type BranchesVariables = {
   projectRef?: string
diff --git a/studio/data/content/content-create-mutation.ts b/studio/data/content/content-create-mutation.ts
deleted file mode 100644
index cb9fb9a6de8..00000000000
--- a/studio/data/content/content-create-mutation.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import toast from 'react-hot-toast'
-import { isResponseOk, post } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { ResponseError, UserContent } from 'types'
-import { contentKeys } from './keys'
-
-type CreateContentVariables = {
-  projectRef: string
-  payload: UserContent
-}
-
-export async function createContent(
-  { projectRef, payload }: CreateContentVariables,
-  signal?: AbortSignal
-) {
-  const response = await post<UserContent[]>(`${API_URL}/projects/${projectRef}/content`, payload, {
-    signal,
-  })
-
-  if (!isResponseOk(response)) {
-    throw response.error
-  }
-
-  return { content: response }
-}
-
-type CreateContentData = Awaited<ReturnType<typeof createContent>>
-
-export const useContentCreateMutation = ({
-  onSuccess,
-  onError,
-  ...options
-}: Omit<
-  UseMutationOptions<CreateContentData, ResponseError, CreateContentVariables>,
-  'mutationFn'
-> = {}) => {
-  const queryClient = useQueryClient()
-
-  return useMutation<CreateContentData, ResponseError, CreateContentVariables>(
-    (args) => createContent(args),
-    {
-      async onSuccess(data, variables, context) {
-        const { projectRef } = variables
-        await Promise.all([queryClient.invalidateQueries(contentKeys.list(projectRef))])
-        await onSuccess?.(data, variables, context)
-      },
-      async onError(data, variables, context) {
-        if (onError === undefined) {
-          toast.error(`Failed to create content: ${data.message}`)
-        } else {
-          onError(data, variables, context)
-        }
-      },
-      ...options,
-    }
-  )
-}
diff --git a/studio/data/content/content-update-mutation.ts b/studio/data/content/content-update-mutation.ts
deleted file mode 100644
index 7d50bd8d68b..00000000000
--- a/studio/data/content/content-update-mutation.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import toast from 'react-hot-toast'
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
-import { isResponseOk, patch } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { ResponseError, UserContent } from 'types'
-import { contentKeys } from './keys'
-
-type UpdateContentVariables = {
-  projectRef: string
-  id: string
-  content: Partial<UserContent>
-}
-
-export async function updateContent(
-  { projectRef, id, content }: UpdateContentVariables,
-  signal?: AbortSignal
-) {
-  const created = await patch<UserContent[]>(
-    `${API_URL}/projects/${projectRef}/content?id=${id}`,
-    content,
-    { signal }
-  )
-  if (!isResponseOk(created)) {
-    throw created.error
-  }
-
-  return { content: created[0] }
-}
-
-type UpdateContentData = Awaited<ReturnType<typeof updateContent>>
-
-export const useContentUpdateMutation = ({
-  onSuccess,
-  onError,
-  ...options
-}: Omit<
-  UseMutationOptions<UpdateContentData, ResponseError, UpdateContentVariables>,
-  'mutationFn'
-> = {}) => {
-  const queryClient = useQueryClient()
-
-  return useMutation<UpdateContentData, ResponseError, UpdateContentVariables>(
-    (args) => updateContent(args),
-    {
-      async onSuccess(data, variables, context) {
-        const { projectRef } = variables
-        await Promise.all([queryClient.invalidateQueries(contentKeys.list(projectRef))])
-        await onSuccess?.(data, variables, context)
-      },
-      async onError(data, variables, context) {
-        if (onError === undefined) {
-          toast.error(`Failed to update content: ${data.message}`)
-        } else {
-          onError(data, variables, context)
-        }
-      },
-      ...options,
-    }
-  )
-}
diff --git a/studio/data/content/content-upsert-mutation.ts b/studio/data/content/content-upsert-mutation.ts
new file mode 100644
index 00000000000..d003b453fe3
--- /dev/null
+++ b/studio/data/content/content-upsert-mutation.ts
@@ -0,0 +1,64 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+
+import { components } from 'data/api'
+import { put } from 'data/fetchers'
+import { contentKeys } from './keys'
+import { Content } from './content-query'
+
+export type UpsertContentPayload = Omit<components['schemas']['UpsertContentParams'], 'content'> & {
+  content: Content['content']
+}
+
+export type UpsertContentVariables = {
+  projectRef: string
+  payload: UpsertContentPayload
+}
+
+export async function upsertContent(
+  { projectRef, payload }: UpsertContentVariables,
+  signal?: AbortSignal
+) {
+  const { data, error } = await put('/platform/projects/{ref}/content', {
+    params: { path: { ref: projectRef } },
+    body: {
+      id: payload.id,
+      name: payload.name,
+      description: payload.description,
+      project_id: payload.project_id,
+      owner_id: payload.owner_id,
+      type: payload.type,
+      visibility: payload.visibility,
+      content: payload.content as any,
+    },
+    signal,
+  })
+  if (error) throw error
+
+  return data
+}
+
+export type UpsertContentData = Awaited<ReturnType<typeof upsertContent>>
+
+export const useContentUpsertMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<UpsertContentData, unknown, UpsertContentVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<UpsertContentData, unknown, UpsertContentVariables>(
+    (args) => upsertContent(args),
+    {
+      async onSuccess(data, variables, context) {
+        const { projectRef } = variables
+
+        await Promise.all([queryClient.invalidateQueries(contentKeys.list(projectRef))])
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/database/database-query-constants.ts b/studio/data/database/database-query-constants.ts
index 1506830a48a..9182c754036 100644
--- a/studio/data/database/database-query-constants.ts
+++ b/studio/data/database/database-query-constants.ts
@@ -24,22 +24,8 @@ export enum CONSTRAINT_TYPE {
 
 export const CREATE_PG_GET_TABLEDEF_SQL = minify(
   /* SQL */ `
-    do $$ 
-    <<first_block>>
-    DECLARE
-        cnt int;
-    BEGIN
-      SELECT count(*) into cnt
-      FROM pg_catalog.pg_type t LEFT JOIN pg_catalog.pg_namespace n ON n.oid = t.typnamespace WHERE (t.typrelid = 0 OR (SELECT c.relkind = 'c' FROM pg_catalog.pg_class c WHERE c.oid = t.typrelid)) 
-      AND NOT EXISTS(SELECT 1 FROM pg_catalog.pg_type el WHERE el.oid = t.typelem AND el.typarray = t.oid)
-      AND n.nspname <> 'pg_catalog' AND n.nspname <> 'information_schema' AND pg_catalog.pg_type_is_visible(t.oid)
-      -- AND pg_catalog.format_type(t.oid, NULL) in ('tabledef_fkeys','tabledef_trigs', 'tabledefs');
-      AND pg_catalog.format_type(t.oid, NULL) in ('tabledefs');
-      IF cnt = 0 THEN
-        RAISE INFO 'Creating custom types.';
-        CREATE TYPE pg_temp.tabledefs AS ENUM ('PKEY_INTERNAL','PKEY_EXTERNAL','FKEYS_INTERNAL', 'FKEYS_EXTERNAL', 'FKEYS_COMMENTED', 'FKEYS_NONE', 'INCLUDE_TRIGGERS', 'NO_TRIGGERS');
-      END IF;
-    end first_block $$;
+    DROP TYPE IF EXISTS pg_temp.tabledefs CASCADE;
+    CREATE TYPE pg_temp.tabledefs AS ENUM ('PKEY_EXTERNAL','FKEYS_INTERNAL', 'FKEYS_EXTERNAL', 'FKEYS_COMMENTED', 'FKEYS_NONE', 'INCLUDE_TRIGGERS', 'NO_TRIGGERS');
     
     -- DROP FUNCTION pg_temp.pg_get_coldef(text,text,text,boolean);
     CREATE OR REPLACE FUNCTION pg_temp.pg_get_coldef(
@@ -92,6 +78,8 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
         v_indexrec record;
         v_primary boolean := False;
         v_constraint_name text;
+        v_constraint_def  text;
+        v_pkey_def        text := '';
         v_fkey_defs text;
         v_trigger text := '';
         v_partition_key text := '';
@@ -116,7 +104,6 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
         pkcnt            int := 0;
         fkcnt            int := 0;
         trigcnt          int := 0;
-        pktype           tabledefs := 'PKEY_INTERNAL';	  
         fktype           tabledefs := 'FKEYS_INTERNAL';
         trigtype         tabledefs := 'NO_TRIGGERS';
         arglen           integer;
@@ -154,9 +141,8 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
                 ELSEIF avarg = 'INCLUDE_TRIGGERS' OR avarg = 'NO_TRIGGERS' THEN
                     trigcnt = trigcnt + 1;
                     trigtype = avarg;
-                ELSEIF avarg = 'PKEY_INTERNAL' OR avarg = 'PKEY_EXTERNAL' THEN
+                ELSEIF avarg = 'PKEY_EXTERNAL' THEN
                     pkcnt = pkcnt + 1;
-                    pktype = avarg;				
                 END IF;
             END LOOP;
             IF fkcnt > 1 THEN 
@@ -262,26 +248,31 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
         -- define all of the columns in the table unless we are in progress creating an inheritance-based child table
         IF NOT bPartition THEN
           FOR v_colrec IN
-            SELECT c.column_name, c.data_type, c.udt_name, c.character_maximum_length, c.is_nullable, c.column_default, c.numeric_precision, c.numeric_scale, c.is_identity, c.identity_generation        
+            SELECT c.column_name, c.data_type, c.udt_name, c.udt_schema, c.character_maximum_length, c.is_nullable, c.column_default, c.numeric_precision, c.numeric_scale, c.is_identity, c.identity_generation        
             FROM information_schema.columns c WHERE (table_schema, table_name) = (in_schema, in_table) ORDER BY ordinal_position
           LOOP
+            IF bVerbose THEN RAISE INFO '(col loop) name=% type=% udt_name=% udt_schema=%', v_colrec.column_name, v_colrec.data_type, v_colrec.udt_name, v_colrec.udt_schema; END IF;  
             SELECT CASE WHEN pg_get_serial_sequence(v_qualified, v_colrec.column_name) IS NOT NULL THEN True ELSE False END into bSerial;
             IF bVerbose THEN
               SELECT pg_get_serial_sequence(v_qualified, v_colrec.column_name) into v_temp;
               IF v_temp IS NULL THEN v_temp = 'NA'; END IF;
               SELECT pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name) INTO v_diag1;
-              -- RAISE NOTICE 'DEBUG table: %  Column: %  datatype: %  Serial=%  serialval=%  coldef=%', v_qualified, v_colrec.column_name, v_colrec.data_type, bSerial, v_temp, v_diag1;
-              -- RAISE NOTICE 'DEBUG tabledef: %', v_table_ddl;
+              --RAISE NOTICE 'DEBUG table: %  Column: %  datatype: %  Serial=%  serialval=%  coldef=%', v_qualified, v_colrec.column_name, v_colrec.data_type, bSerial, v_temp, v_diag1;
+              --RAISE NOTICE 'DEBUG tabledef: %', v_table_ddl;
             END IF;
             
             v_table_ddl := v_table_ddl || '  ' -- note: two char spacer to start, to indent the column
               || v_colrec.column_name || ' ' || 
             CASE WHEN v_colrec.udt_name in ('geometry', 'box2d', 'box2df', 'box3d', 'geography', 'geometry_dump', 'gidx', 'spheroid', 'valid_detail')
-            THEN v_colrec.udt_name WHEN v_colrec.data_type = 'USER-DEFINED' THEN in_schema || '.' || v_colrec.udt_name 
-            -- Issue#6 fix: handle arrays
-            WHEN v_colrec.data_type = 'ARRAY' THEN pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name) 
-            -- Issue#8 fix: handle serial. Note: NOT NULL is implied so no need to declare it explicitly
-            WHEN pg_get_serial_sequence(v_qualified, v_colrec.column_name) IS NOT NULL THEN pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name)  
+              THEN v_colrec.udt_name 
+            WHEN v_colrec.data_type = 'USER-DEFINED' 
+              THEN v_colrec.udt_schema || '.' || v_colrec.udt_name 
+            WHEN v_colrec.data_type = 'ARRAY' 
+                -- Issue#6 fix: handle arrays
+              THEN pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name) 
+            WHEN pg_get_serial_sequence(v_qualified, v_colrec.column_name) IS NOT NULL 
+              -- Issue#8 fix: handle serial. Note: NOT NULL is implied so no need to declare it explicitly
+              THEN pg_temp.pg_get_coldef(in_schema, in_table,v_colrec.column_name)  
             ELSE v_colrec.data_type END 
             || CASE WHEN v_colrec.is_identity = 'YES' THEN CASE WHEN v_colrec.identity_generation = 'ALWAYS' THEN ' GENERATED ALWAYS AS IDENTITY' ELSE ' GENERATED BY DEFAULT AS IDENTITY' END ELSE '' END
             || CASE WHEN v_colrec.character_maximum_length IS NOT NULL THEN ('(' || v_colrec.character_maximum_length || ')') 
@@ -311,23 +302,36 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
             LOOP
             IF v_constraintrec.type_rank = 1 THEN
                 v_primary := True;
-                v_constraint_name := v_constraintrec.constraint_name;
+                IF pkcnt = 0 THEN
+                    v_constraint_name := v_constraintrec.constraint_name;
+                    v_constraint_def  := v_constraintrec.constraint_definition;
+                ELSE
+                  -- Issue#16 handle external PG def
+                  v_constraint_name := v_constraintrec.constraint_name;
+                  SELECT 'ALTER TABLE ONLY ' || in_schema || '.' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_pkey_def 
+                  FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and  r.contype = 'p' and n.oid = r.connamespace and n.nspname = in_schema AND c.relname = in_table;              
+                END IF;
                 IF bPartition THEN
                   continue;
-              END IF;
+                END IF;
+            ELSE
+                v_constraint_name := v_constraintrec.constraint_name;
+                v_constraint_def  := v_constraintrec.constraint_definition;
             END IF;
-            -- if bVerbose THEN RAISE INFO 'DEBUG4: constraint name= %', v_constraintrec.constraint_name; END IF;
+            if bVerbose THEN RAISE INFO 'DEBUG4: constraint name=% constraint_def=%', v_constraint_name,v_constraint_def; END IF;
             constraintarr := constraintarr || v_constraintrec.constraint_name:: text;
       
             IF fktype <> 'FKEYS_INTERNAL' AND v_constraintrec.constraint_type = 'f' THEN
                 continue;
             END IF;
-      
-            v_table_ddl := v_table_ddl || '  ' -- note: two char spacer to start, to indent the column
-              || 'CONSTRAINT' || ' '
-              || v_constraintrec.constraint_name || ' '
-              || v_constraintrec.constraint_definition
-              || ',' || E'\\n';
+            
+            IF pkcnt = 0 THEN
+              v_table_ddl := v_table_ddl || '  ' -- note: two char spacer to start, to indent the column
+                || 'CONSTRAINT' || ' '
+                || v_constraint_name || ' '
+                || v_constraint_def
+                || ',' || E'\\n';
+            END IF;
           END LOOP;
         
         ELSE
@@ -349,23 +353,37 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
             LOOP
             IF v_constraintrec.type_rank = 1 THEN
                 v_primary := True;
-                v_constraint_name := v_constraintrec.constraint_name;
+                IF pkcnt = 0 THEN
+                    v_constraint_name := v_constraintrec.constraint_name;
+                    v_constraint_def  := v_constraintrec.constraint_definition;
+                ELSE
+                  -- Issue#16 handle external PG def
+                  v_constraint_name := v_constraintrec.constraint_name;
+                  SELECT 'ALTER TABLE ONLY ' || in_schema || '.' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' INTO v_pkey_def 
+                  FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and  r.contype = 'p' and n.oid = r.connamespace and n.nspname = in_schema AND c.relname = in_table;              
+                END IF;
                 IF bPartition THEN
                   continue;
-              END IF;
+                END IF;           
+            ELSE
+                v_constraint_name := v_constraintrec.constraint_name;
+                v_constraint_def  := v_constraintrec.constraint_definition;
             END IF;
-            -- if bVerbose THEN RAISE INFO 'DEBUG4: constraint name= %', v_constraintrec.constraint_name; END IF;
+            -- SELECT 'ALTER TABLE ONLY ' || c.relname || ' ADD CONSTRAINT ' || r.conname || ' ' || pg_catalog.pg_get_constraintdef(r.oid, true) || ';' as pkeyddl FROM pg_catalog.pg_constraint r, pg_class c, pg_namespace n where r.conrelid = c.oid and  r.contype = 'p' and n.oid = r.connamespace and n.nspname = 'sample' AND c.relname = 'extensions_table';
+            if bVerbose THEN RAISE INFO 'DEBUG4: constraint name=% constraint_def=%', v_constraint_name,v_constraint_def; END IF;
             constraintarr := constraintarr || v_constraintrec.constraint_name:: text;
       
             IF fktype <> 'FKEYS_INTERNAL' AND v_constraintrec.constraint_type = 'f' THEN
                 continue;
             END IF;
       
-            v_table_ddl := v_table_ddl || '  ' -- note: two char spacer to start, to indent the column
-              || 'CONSTRAINT' || ' '
-              || v_constraintrec.constraint_name || ' '
-              || v_constraintrec.constraint_definition
-              || ',' || E'\\n';
+            IF pkcnt = 0 THEN
+              v_table_ddl := v_table_ddl || '  ' -- note: two char spacer to start, to indent the column
+                || 'CONSTRAINT' || ' '
+                || v_constraint_name || ' '
+                || v_constraint_def
+                || ',' || E'\\n';
+            END IF;
           END LOOP;
         END IF;      
         IF bVerbose THEN RAISE INFO '(3)tabledef so far: %', v_table_ddl; END IF;
@@ -411,6 +429,13 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
         -- v_table_ddl := v_table_ddl || ') ' || v_relopts || ' ' || v_tablespace || E';\\n';  
         -- END IF;
         -- RAISE NOTICE 'ddlsofar3: %', v_table_ddl;
+    
+        -- Issue#16 create the external PKEY def if indicated
+        IF v_pkey_def <> '' THEN
+            v_table_ddl := v_table_ddl || v_pkey_def || E'\\n';    
+        END IF;
+      
+        IF bVerbose THEN RAISE INFO '(6)tabledef so far: %', v_table_ddl; END IF;
       
         -- create indexes
         FOR v_indexrec IN
@@ -441,7 +466,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
           END IF;
           
         END LOOP;
-        IF bVerbose THEN RAISE INFO '(6)tabledef so far: %', v_table_ddl; END IF;
+        IF bVerbose THEN RAISE INFO '(7)tabledef so far: %', v_table_ddl; END IF;
         
         -- Handle external foreign key defs here if applicable. 
         IF fktype = 'FKEYS_EXTERNAL' THEN
@@ -472,7 +497,7 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
               v_table_ddl := v_table_ddl || v_fkey_defs;
           END IF;
         END IF;
-        IF bVerbose THEN RAISE INFO '(7)tabledef so far: %', v_table_ddl; END IF;
+        IF bVerbose THEN RAISE INFO '(8)tabledef so far: %', v_table_ddl; END IF;
       
         IF trigtype = 'INCLUDE_TRIGGERS' THEN
           -- Issue#14: handle multiple triggers for a table
@@ -485,6 +510,9 @@ export const CREATE_PG_GET_TABLEDEF_SQL = minify(
               IF bVerbose THEN RAISE INFO 'triggerdef = %', v_trigrec.triggerdef; END IF;
           END LOOP;       	    
         END IF;
+      
+        -- add empty line
+        v_table_ddl := v_table_ddl || E'\\n';
     
         RETURN v_table_ddl;
       
diff --git a/studio/data/database/database-size-query.ts b/studio/data/database/database-size-query.ts
new file mode 100644
index 00000000000..3676d47365d
--- /dev/null
+++ b/studio/data/database/database-size-query.ts
@@ -0,0 +1,36 @@
+import { UseQueryOptions } from '@tanstack/react-query'
+import { ExecuteSqlData, useExecuteSqlQuery } from '../sql/execute-sql-query'
+
+export const getDatabaseSizeQuery = () => {
+  const sql = /* SQL */ `
+select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;
+`.trim()
+
+  return sql
+}
+
+export type DatabaseSizeVariables = {
+  projectRef?: string
+  connectionString?: string
+}
+
+export type DatabaseSizeData = { result: { db_size: number }[] }
+export type DatabaseSizeError = unknown
+
+export const useDatabaseSizeQuery = <TData extends DatabaseSizeData = DatabaseSizeData>(
+  { projectRef, connectionString }: DatabaseSizeVariables,
+  options: UseQueryOptions<ExecuteSqlData, DatabaseSizeError, TData> = {}
+) => {
+  return useExecuteSqlQuery(
+    {
+      projectRef,
+      connectionString,
+      sql: getDatabaseSizeQuery(),
+      queryKey: ['database-size'],
+    },
+    {
+      ...options,
+      staleTime: 1000 * 60, // default good for a minute
+    }
+  )
+}
diff --git a/studio/data/database/pooling-configuration-query.ts b/studio/data/database/pooling-configuration-query.ts
index 38f457e6401..348cb639a98 100644
--- a/studio/data/database/pooling-configuration-query.ts
+++ b/studio/data/database/pooling-configuration-query.ts
@@ -2,8 +2,8 @@ import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query
 import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { useCallback } from 'react'
-import { databaseKeys } from './keys'
 import { ResponseError } from 'types'
+import { databaseKeys } from './keys'
 
 export type PoolingConfigurationVariables = {
   projectRef: string
@@ -23,6 +23,7 @@ export type PoolingConfiguration = {
   pgbouncer_enabled: boolean
   pgbouncer_status: string
   pool_mode: string
+  connectionString: string
 }
 
 export async function getPoolingConfiguration(
diff --git a/studio/data/integrations/github-integration-create-mutation.ts b/studio/data/integrations/github-integration-create-mutation.ts
new file mode 100644
index 00000000000..6439bb68665
--- /dev/null
+++ b/studio/data/integrations/github-integration-create-mutation.ts
@@ -0,0 +1,63 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
+import { post } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { integrationKeys } from './keys'
+
+export type GitHubIntegrationCreateVariables = {
+  installationId: number
+  orgSlug: string
+  metadata: { [key: string]: string }
+}
+
+export async function createGitHubIntegration({
+  installationId,
+  orgSlug,
+  metadata,
+}: GitHubIntegrationCreateVariables) {
+  const { data, error } = await post('/platform/integrations/github', {
+    body: {
+      installation_id: installationId,
+      organization_slug: orgSlug,
+      metadata: metadata as any,
+    },
+  })
+  if (error) throw error
+
+  return data
+}
+
+type GitHubIntegrationCreateData = Awaited<ReturnType<typeof createGitHubIntegration>>
+
+export const useGitHubIntegrationCreateMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<GitHubIntegrationCreateData, ResponseError, GitHubIntegrationCreateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+  return useMutation<GitHubIntegrationCreateData, ResponseError, GitHubIntegrationCreateVariables>(
+    (vars) => createGitHubIntegration(vars),
+    {
+      async onSuccess(data, variables, context) {
+        await Promise.all([
+          queryClient.invalidateQueries(integrationKeys.integrationsList()),
+          queryClient.invalidateQueries(integrationKeys.integrationsListWithOrg(variables.orgSlug)),
+          queryClient.invalidateQueries(integrationKeys.githubRepoList(data.id)),
+        ])
+        await onSuccess?.(data, variables, context)
+      },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to create Github integration: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/integrations/integrations-github-branches-query.ts b/studio/data/integrations/integrations-github-branches-query.ts
new file mode 100644
index 00000000000..c894ec47223
--- /dev/null
+++ b/studio/data/integrations/integrations-github-branches-query.ts
@@ -0,0 +1,57 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'data/fetchers'
+import { integrationKeys } from './keys'
+import { ResponseError } from 'types'
+
+export type GithubBranchesVariables = {
+  organizationIntegrationId?: string
+  repoOwner: string
+  repoName: string
+}
+
+export async function getGithubBranches(
+  { organizationIntegrationId, repoOwner, repoName }: GithubBranchesVariables,
+  signal?: AbortSignal
+) {
+  if (!organizationIntegrationId) throw new Error('Organization integration ID is required')
+
+  const { data, error } = await get(
+    `/platform/integrations/github/branches/{organization_integration_id}/{repo_owner}/{repo_name}`,
+    {
+      params: {
+        path: {
+          organization_integration_id: organizationIntegrationId,
+          repo_owner: repoOwner,
+          repo_name: repoName,
+        },
+      },
+      signal,
+    }
+  )
+
+  if (error) throw error
+  return data
+}
+
+export type GithubBranchesData = Awaited<ReturnType<typeof getGithubBranches>>
+export type GithubBranchesError = ResponseError
+
+export const useGithubBranchesQuery = <TData = GithubBranchesData>(
+  { organizationIntegrationId, repoOwner, repoName }: GithubBranchesVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<GithubBranchesData, GithubBranchesError, TData> = {}
+) =>
+  useQuery<GithubBranchesData, GithubBranchesError, TData>(
+    integrationKeys.githubBranchesList(organizationIntegrationId, repoOwner, repoName),
+    ({ signal }) => getGithubBranches({ organizationIntegrationId, repoOwner, repoName }, signal),
+    {
+      enabled:
+        enabled &&
+        typeof organizationIntegrationId !== 'undefined' &&
+        typeof repoOwner !== 'undefined' &&
+        typeof repoName !== 'undefined',
+      ...options,
+    }
+  )
diff --git a/studio/data/integrations/integrations-github-connection-delete-mutation.ts b/studio/data/integrations/integrations-github-connection-delete-mutation.ts
new file mode 100644
index 00000000000..f3bd4f08cfd
--- /dev/null
+++ b/studio/data/integrations/integrations-github-connection-delete-mutation.ts
@@ -0,0 +1,59 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
+import { del } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { integrationKeys } from './keys'
+
+type DeleteVariables = {
+  connectionId: string
+
+  integrationId: string
+  orgSlug: string | undefined
+}
+
+export async function deleteConnection({ connectionId }: DeleteVariables, signal?: AbortSignal) {
+  const { data, error } = await del('/platform/integrations/github/connections/{connection_id}', {
+    params: { path: { connection_id: connectionId } },
+  })
+  if (error) throw error
+
+  return data
+}
+
+type DeleteContentData = Awaited<ReturnType<typeof deleteConnection>>
+
+export const useIntegrationsGitHubInstalledConnectionDeleteMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<DeleteContentData, ResponseError, DeleteVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+  return useMutation<DeleteContentData, ResponseError, DeleteVariables>(
+    (args) => deleteConnection(args),
+    {
+      async onSuccess(data, variables, context) {
+        await Promise.all([
+          queryClient.invalidateQueries(integrationKeys.integrationsList()),
+          queryClient.invalidateQueries(integrationKeys.integrationsListWithOrg(variables.orgSlug)),
+          queryClient.invalidateQueries(integrationKeys.githubRepoList(variables.integrationId)),
+          queryClient.invalidateQueries(
+            integrationKeys.githubConnectionsList(variables.integrationId)
+          ),
+        ])
+        await onSuccess?.(data, variables, context)
+      },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to delete Github connection: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/integrations/integrations-github-connections-create-mutation.ts b/studio/data/integrations/integrations-github-connections-create-mutation.ts
new file mode 100644
index 00000000000..66133d432d5
--- /dev/null
+++ b/studio/data/integrations/integrations-github-connections-create-mutation.ts
@@ -0,0 +1,70 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
+import { post } from 'data/fetchers'
+import { ResponseError } from 'types'
+import { integrationKeys } from './keys'
+import { IntegrationConnectionsCreateVariables } from './types'
+
+export async function createIntegrationGitHubConnections({
+  organizationIntegrationId,
+  connection,
+}: IntegrationConnectionsCreateVariables) {
+  const { data, error } = await post('/platform/integrations/github/connections', {
+    body: {
+      organization_integration_id: organizationIntegrationId,
+      connection,
+    },
+  })
+  if (error) {
+    throw error
+  }
+
+  return data
+}
+
+export type IntegrationGitHubConnectionsCreateData = Awaited<
+  ReturnType<typeof createIntegrationGitHubConnections>
+>
+
+export const useIntegrationGitHubConnectionsCreateMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<
+    IntegrationGitHubConnectionsCreateData,
+    ResponseError,
+    IntegrationConnectionsCreateVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+  return useMutation<
+    IntegrationGitHubConnectionsCreateData,
+    ResponseError,
+    IntegrationConnectionsCreateVariables
+  >((vars) => createIntegrationGitHubConnections(vars), {
+    async onSuccess(data, variables, context) {
+      await Promise.all([
+        queryClient.invalidateQueries(integrationKeys.integrationsList()),
+        queryClient.invalidateQueries(integrationKeys.integrationsListWithOrg(variables.orgSlug)),
+        queryClient.invalidateQueries(
+          integrationKeys.githubRepoList(variables.organizationIntegrationId)
+        ),
+        queryClient.invalidateQueries(
+          integrationKeys.githubConnectionsList(variables.organizationIntegrationId)
+        ),
+      ])
+      await onSuccess?.(data, variables, context)
+    },
+    async onError(data, variables, context) {
+      if (onError === undefined) {
+        toast.error(`Failed to create Github connection: ${data.message}`)
+      } else {
+        onError(data, variables, context)
+      }
+    },
+    ...options,
+  })
+}
diff --git a/studio/data/integrations/integrations-github-pull-requests-query.ts b/studio/data/integrations/integrations-github-pull-requests-query.ts
new file mode 100644
index 00000000000..acc3ca168d6
--- /dev/null
+++ b/studio/data/integrations/integrations-github-pull-requests-query.ts
@@ -0,0 +1,65 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'data/fetchers'
+import { integrationKeys } from './keys'
+import { ResponseError } from 'types'
+import { components } from 'data/api'
+
+export type GithubPullRequestsVariables = {
+  organizationIntegrationId?: string
+  repoOwner: string
+  repoName: string
+  target?: string
+}
+
+export type GitHubPullRequest = components['schemas']['GetGithubPullRequest']
+
+export async function getGitHubPullRequests(
+  { organizationIntegrationId, repoOwner, repoName, target }: GithubPullRequestsVariables,
+  signal?: AbortSignal
+) {
+  if (!organizationIntegrationId) throw new Error('Organization integration ID is required')
+  if (!target) throw new Error('Target branch is required')
+
+  const { data, error } = await get(
+    `/platform/integrations/github/pull-requests/{organization_integration_id}/{repo_owner}/{repo_name}/{target}`,
+    {
+      params: {
+        path: {
+          organization_integration_id: organizationIntegrationId,
+          repo_owner: repoOwner,
+          repo_name: repoName,
+          target,
+        },
+      },
+      signal,
+    }
+  )
+
+  if (error) throw error
+  return data
+}
+
+export type GithubPullRequestsData = Awaited<ReturnType<typeof getGitHubPullRequests>>
+export type GithubPullRequestsError = ResponseError
+
+export const useGithubPullRequestsQuery = <TData = GithubPullRequestsData>(
+  { organizationIntegrationId, repoOwner, repoName, target }: GithubPullRequestsVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<GithubPullRequestsData, GithubPullRequestsError, TData> = {}
+) =>
+  useQuery<GithubPullRequestsData, GithubPullRequestsError, TData>(
+    integrationKeys.githubPullRequestsList(organizationIntegrationId, repoOwner, repoName, target),
+    ({ signal }) =>
+      getGitHubPullRequests({ organizationIntegrationId, repoOwner, repoName, target }, signal),
+    {
+      enabled:
+        enabled &&
+        typeof organizationIntegrationId !== 'undefined' &&
+        typeof repoOwner !== 'undefined' &&
+        typeof repoName !== 'undefined' &&
+        typeof target !== 'undefined',
+      ...options,
+    }
+  )
diff --git a/studio/data/integrations/integrations-github-repos-query.ts b/studio/data/integrations/integrations-github-repos-query.ts
index 4b1141df100..ea09b8be7f8 100644
--- a/studio/data/integrations/integrations-github-repos-query.ts
+++ b/studio/data/integrations/integrations-github-repos-query.ts
@@ -1,137 +1,51 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+
+import { get } from 'data/fetchers'
+import { ResponseError } from 'types'
 import { integrationKeys } from './keys'
 
-// repos fetch
-export type IntegrationsVariables = {
-  orgSlug?: string
+export type GitHubReposVariables = {
+  integrationId: string | undefined
 }
 
-export type IntegrationProjectConnection = {
-  id: string
-  createdAt: string
-  from: {
-    name: string
-  }
-  to: {
-    name: string
-  }
-}
-
-export type Integration = {
-  id: string
-  type: 'VERCEL' | 'NETLIFY' | 'GITHUB'
-  createdBy: string
-  createdAt: string
-  connections: IntegrationProjectConnection[]
-  metadata?: {
-    vercelTeam?: string
-    gitHubConnectionOwner?: string
-  }
-}
-
-export type IntegrationsResponse = Integration[]
-
-export async function getIntegrations({ orgSlug }: IntegrationsVariables, signal?: AbortSignal) {
-  if (!orgSlug) {
-    throw new Error('orgSlug is required')
+export async function getGitHubRepos(
+  { integrationId }: GitHubReposVariables,
+  signal?: AbortSignal
+) {
+  if (!integrationId) {
+    throw new Error('integrationId is required')
   }
 
-  const response: IntegrationsResponse = [
+  const { data, error } = await get(
+    '/platform/integrations/github/repos/{organization_integration_id}',
     {
-      id: '1',
-      type: 'VERCEL',
-      createdBy: 'alaister@supabase.io',
-      createdAt: '2023-06-05T06:56:25.565Z',
-      metadata: {
-        vercelTeam: 'alaister-team',
+      params: {
+        path: {
+          organization_integration_id: integrationId,
+        },
       },
-      connections: [
-        {
-          id: '1.0',
-          createdAt: '2023-06-05T01:56:25.565Z',
-          to: {
-            name: 'www prod',
-          },
-          from: {
-            name: 'alaister project prod',
-          },
-        },
-        {
-          id: '1.1',
-          createdAt: '2023-06-14T06:56:25.565Z',
-          to: {
-            name: 'www staging',
-          },
-          from: {
-            name: 'alaister project staging',
-          },
-        },
-        {
-          id: '1.1',
-          createdAt: '2023-06-02T21:56:25.565Z',
-          to: {
-            name: 'bees knees',
-          },
-          from: {
-            name: 'jonny bee project',
-          },
-        },
-      ],
-    },
-    {
-      id: '2',
-      type: 'VERCEL',
-      createdBy: 'alaister@supabase.io',
-      createdAt: '2023-06-05T06:56:25.565Z',
-      metadata: {
-        vercelTeam: 'alaister-team',
-      },
-      connections: [],
-    },
-    {
-      id: '3',
-      type: 'GITHUB',
-      createdBy: 'Alaister',
-      createdAt: '2023-06-05T06:56:25.565Z',
-      metadata: {
-        gitHubConnectionOwner: 'alaister',
-      },
-      connections: [
-        {
-          id: '1.2',
-          createdAt: '2023-06-05T06:56:25.565Z',
-          to: {
-            name: 'supabase/supabase',
-          },
-          from: {
-            name: 'alaister project',
-          },
-        },
-      ],
-    },
-  ]
+      signal,
+    }
+  )
+  if (error) {
+    throw error
+  }
 
-  // const response = await get(`${API_URL}/projects/${orgSlug}/integrations`, {
-  //   signal,
-  // })
-  // if (response.error) {
-  //   throw response.error
-  // }
-
-  return response as IntegrationsResponse
+  return data
 }
 
-export type IntegrationsData = Awaited<ReturnType<typeof getIntegrations>>
-export type IntegrationsError = unknown
+export type GitHubReposData = Awaited<ReturnType<typeof getGitHubRepos>>
+export type GitHubReposError = ResponseError
 
-export const useIntegrationsGitHubReposQuery = <TData = IntegrationsData>(
-  { orgSlug }: IntegrationsVariables,
-  { enabled = true, ...options }: UseQueryOptions<IntegrationsData, IntegrationsError, TData> = {}
+export const useGitHubReposQuery = <TData = GitHubReposData>(
+  { integrationId }: GitHubReposVariables,
+  { enabled = true, ...options }: UseQueryOptions<GitHubReposData, GitHubReposError, TData> = {}
 ) =>
-  useQuery<IntegrationsData, IntegrationsError, TData>(
-    integrationKeys.integrationsList(), // TODO: make a unique key for github repos
-    ({ signal }) => getIntegrations({ orgSlug }, signal),
-    { enabled: enabled && typeof orgSlug !== 'undefined', ...options }
+  useQuery<GitHubReposData, GitHubReposError, TData>(
+    integrationKeys.githubRepoList(integrationId),
+    ({ signal }) => getGitHubRepos({ integrationId }, signal),
+    {
+      enabled: enabled && typeof integrationId !== 'undefined',
+      ...options,
+    }
   )
diff --git a/studio/data/integrations/integrations-query-org-only.ts b/studio/data/integrations/integrations-query-org-only.ts
index 664f4aced96..926897a5dba 100644
--- a/studio/data/integrations/integrations-query-org-only.ts
+++ b/studio/data/integrations/integrations-query-org-only.ts
@@ -1,8 +1,10 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+
 import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
+import { ResponseError } from 'types'
+import { Integration, IntegrationsVariables } from './integrations.types'
 import { integrationKeys } from './keys'
-import { IntegrationsVariables, Integration } from './integrations.types'
 
 export type IntegrationsResponse = Integration[]
 
@@ -22,7 +24,7 @@ export async function getIntegrations({ orgSlug }: IntegrationsVariables, signal
 
 export type IntegrationsData = Awaited<ReturnType<typeof getIntegrations>>
 export type ProjectIntegrationConnectionsData = Awaited<ReturnType<typeof getIntegrations>>
-export type IntegrationsError = unknown
+export type IntegrationsError = ResponseError
 
 export const useOrgIntegrationsQuery = <TData = IntegrationsData>(
   { orgSlug }: IntegrationsVariables,
diff --git a/studio/data/integrations/integrations-query.ts b/studio/data/integrations/integrations-query.ts
index a522135fa2a..9ec6b5a0353 100644
--- a/studio/data/integrations/integrations-query.ts
+++ b/studio/data/integrations/integrations-query.ts
@@ -1,25 +1,24 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+
+import { get } from 'data/fetchers'
+import { ResponseError } from 'types'
 import { integrationKeys } from './keys'
-import { IntegrationsVariables, Integration } from './integrations.types'
 
-export type IntegrationsResponse = Integration[]
-
-export async function getIntegrations({}: {}, signal?: AbortSignal) {
-  const response = await get(`${API_URL}/integrations`, {
+export async function getIntegrations(signal?: AbortSignal) {
+  const { data, error } = await get('/platform/integrations', {
+    params: { query: { integration_name: '' } },
     signal,
   })
-  if (response.error) {
-    throw response.error
+  if (error) {
+    throw error
   }
 
-  return response as IntegrationsResponse
+  return data
 }
 
 export type IntegrationsData = Awaited<ReturnType<typeof getIntegrations>>
 export type ProjectIntegrationConnectionsData = Awaited<ReturnType<typeof getIntegrations>>
-export type IntegrationsError = unknown
+export type IntegrationsError = ResponseError
 
 export const useIntegrationsQuery = <TData = IntegrationsData>({
   enabled = true,
@@ -27,6 +26,6 @@ export const useIntegrationsQuery = <TData = IntegrationsData>({
 }: UseQueryOptions<IntegrationsData, IntegrationsError, TData> = {}) =>
   useQuery<IntegrationsData, IntegrationsError, TData>(
     integrationKeys.integrationsList(),
-    ({ signal }) => getIntegrations({}, signal),
+    ({ signal }) => getIntegrations(signal),
     { enabled: enabled, ...options }
   )
diff --git a/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts b/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
index 357bc3b6438..78240f76f43 100644
--- a/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
+++ b/studio/data/integrations/integrations-vercel-connection-sync-envs-mutation.ts
@@ -1,5 +1,8 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
 import { post } from 'data/fetchers'
+import { ResponseError } from 'types'
 
 export type IntegrationsVercelConnectionSyncEnvsVariables = {
   connectionId: string
@@ -29,25 +32,31 @@ type IntegrationsVercelConnectionSyncEnvsData = Awaited<
 
 export const useIntegrationsVercelConnectionSyncEnvsMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
   UseMutationOptions<
     IntegrationsVercelConnectionSyncEnvsData,
-    unknown,
+    ResponseError,
     IntegrationsVercelConnectionSyncEnvsVariables
   >,
   'mutationFn'
 > = {}) => {
-  const queryClient = useQueryClient()
-
   return useMutation<
     IntegrationsVercelConnectionSyncEnvsData,
-    unknown,
+    ResponseError,
     IntegrationsVercelConnectionSyncEnvsVariables
   >((vars) => syncEnvsIntegrationsVercelConnection(vars), {
     async onSuccess(data, variables, context) {
       await onSuccess?.(data, variables, context)
     },
+    async onError(data, variables, context) {
+      if (onError === undefined) {
+        toast.error(`Failed to sync environment variables: ${data.message}`)
+      } else {
+        onError(data, variables, context)
+      }
+    },
     ...options,
   })
 }
diff --git a/studio/data/integrations/integration-connections-create-mutation.ts b/studio/data/integrations/integrations-vercel-connections-create-mutation.ts
similarity index 76%
rename from studio/data/integrations/integration-connections-create-mutation.ts
rename to studio/data/integrations/integrations-vercel-connections-create-mutation.ts
index 19bf3d3f989..9ea64f86836 100644
--- a/studio/data/integrations/integration-connections-create-mutation.ts
+++ b/studio/data/integrations/integrations-vercel-connections-create-mutation.ts
@@ -4,18 +4,9 @@ import { toast } from 'react-hot-toast'
 import { post } from 'data/fetchers'
 import { ResponseError } from 'types'
 import { integrationKeys } from './keys'
+import { IntegrationConnectionsCreateVariables } from './types'
 
-export type IntegrationConnectionsCreateVariables = {
-  organizationIntegrationId: string
-  connection: {
-    foreign_project_id: string
-    supabase_project_ref: string
-    metadata: any
-  }
-  orgSlug: string | undefined
-}
-
-export async function createIntegrationConnections({
+export async function createIntegrationVercelConnections({
   organizationIntegrationId,
   connection,
 }: IntegrationConnectionsCreateVariables) {
@@ -36,15 +27,17 @@ export async function createIntegrationConnections({
   return data
 }
 
-type IntegrationConnectionsCreateData = Awaited<ReturnType<typeof createIntegrationConnections>>
+export type IntegrationVercelConnectionsCreateData = Awaited<
+  ReturnType<typeof createIntegrationVercelConnections>
+>
 
-export const useIntegrationConnectionsCreateMutation = ({
+export const useIntegrationVercelConnectionsCreateMutation = ({
   onSuccess,
   onError,
   ...options
 }: Omit<
   UseMutationOptions<
-    IntegrationConnectionsCreateData,
+    IntegrationVercelConnectionsCreateData,
     ResponseError,
     IntegrationConnectionsCreateVariables
   >,
@@ -52,10 +45,10 @@ export const useIntegrationConnectionsCreateMutation = ({
 > = {}) => {
   const queryClient = useQueryClient()
   return useMutation<
-    IntegrationConnectionsCreateData,
+    IntegrationVercelConnectionsCreateData,
     ResponseError,
     IntegrationConnectionsCreateVariables
-  >((vars) => createIntegrationConnections(vars), {
+  >((vars) => createIntegrationVercelConnections(vars), {
     async onSuccess(data, variables, context) {
       await Promise.all([
         queryClient.invalidateQueries(integrationKeys.integrationsList()),
diff --git a/studio/data/integrations/integrations.types.ts b/studio/data/integrations/integrations.types.ts
index 13dbf066ea1..eb2bf344d11 100644
--- a/studio/data/integrations/integrations.types.ts
+++ b/studio/data/integrations/integrations.types.ts
@@ -156,7 +156,7 @@ export type userDetails = {
 type addedBy = userDetails
 type updatedBy = userDetails
 
-export type IntegrationName = 'Vercel' | 'Netlify' | 'GitHub'
+export type IntegrationName = 'Vercel' | 'GitHub' // | 'Netlify'
 export type VercelAccountType = 'Team' | 'Personal'
 export type VercelSource = 'marketplace' | 'deploy button'
 
@@ -177,11 +177,27 @@ export type VercelTeamAccount = BaseVercelAccount & {
   team_slug: string
 }
 
-export type Integration = {
+export type VercelMetadata = {
+  vercelTeam?: string
+  gitHubConnectionOwner?: string
+  account: VercelAccount | VercelTeamAccount
+  configuration_id: string
+}
+
+export type GitHubAccount = {
+  name: string
+  type: 'User' | 'Organization'
+  avatar: string
+  installed_by_user_id: number
+}
+
+export type GitHubMetadata = {
+  installation_id: number
+  account: GitHubAccount
+}
+
+export type IntegrationBase = {
   id: string
-  integration: {
-    name: IntegrationName
-  }
   added_by: addedBy
   inserted_at: string
   updated_at: string
@@ -189,10 +205,20 @@ export type Integration = {
   organization: {
     slug: string
   }
-  metadata?: {
-    vercelTeam?: string
-    gitHubConnectionOwner?: string
-    account: VercelAccount | VercelTeamAccount
-    configuration_id: string
-  }
 }
+
+export type Integration =
+  | (IntegrationBase & {
+      id: string
+      integration: {
+        name: 'Vercel'
+      }
+      metadata?: VercelMetadata
+    })
+  | (IntegrationBase & {
+      id: string
+      integration: {
+        name: 'GitHub'
+      }
+      metadata?: GitHubMetadata
+    })
diff --git a/studio/data/integrations/keys.ts b/studio/data/integrations/keys.ts
index c099d9d7783..f881bb9d572 100644
--- a/studio/data/integrations/keys.ts
+++ b/studio/data/integrations/keys.ts
@@ -4,6 +4,28 @@ export const integrationKeys = {
   integrationsList: () => ['organizations', 'integrations'] as const,
   vercelProjectList: (organization_integration_id: string | undefined) =>
     ['organizations', organization_integration_id, 'vercel-projects'] as const,
+  githubRepoList: (organization_integration_id: string | undefined) =>
+    ['organizations', organization_integration_id, 'github-repos'] as const,
   vercelConnectionsList: (organization_integration_id: string | undefined) =>
     ['organizations', organization_integration_id, 'vercel-connections'] as const,
+  githubBranchesList: (
+    organization_integration_id: string | undefined,
+    repo_owner: string,
+    repo_name: string
+  ) => ['organizations', organization_integration_id, 'branches', repo_owner, repo_name],
+  githubPullRequestsList: (
+    organization_integration_id: string | undefined,
+    repo_owner: string,
+    repo_name: string,
+    target: string | undefined
+  ) => [
+    'organizations',
+    organization_integration_id,
+    'pull-requests',
+    repo_owner,
+    repo_name,
+    target,
+  ],
+  githubConnectionsList: (organization_integration_id: string | undefined) =>
+    ['organizations', organization_integration_id, 'github-connections'] as const,
 }
diff --git a/studio/data/integrations/types.ts b/studio/data/integrations/types.ts
new file mode 100644
index 00000000000..50ff9e34d05
--- /dev/null
+++ b/studio/data/integrations/types.ts
@@ -0,0 +1,9 @@
+export type IntegrationConnectionsCreateVariables = {
+  organizationIntegrationId: string
+  connection: {
+    foreign_project_id: string
+    supabase_project_ref: string
+    metadata: any
+  }
+  orgSlug: string | undefined
+}
diff --git a/studio/data/organizations/organization-migrate-billing-preview-query.ts b/studio/data/organizations/organization-migrate-billing-preview-query.ts
index ac6f1cc5c93..8f9a117d5e6 100644
--- a/studio/data/organizations/organization-migrate-billing-preview-query.ts
+++ b/studio/data/organizations/organization-migrate-billing-preview-query.ts
@@ -10,6 +10,17 @@ export type OrganizationBillingMigrationPreviewVariables = {
 
 export type OrganizationBillingMigrationPreviewResponse = {
   added_credits: number
+  addons_to_be_removed?: {
+    projectRef: string
+    projectName: string
+    addons: { variant: string; name: string; type: string }[]
+  }[]
+  monthly_invoice_breakdown?: {
+    description: string
+    unit_price: number
+    quantity: number
+    total_price: number
+  }[]
 }
 
 export async function previewOrganizationBillingMigration(
diff --git a/studio/hooks/misc/useStore.tsx b/studio/hooks/misc/useStore.tsx
index 025301498b5..840ebc3ffb5 100644
--- a/studio/hooks/misc/useStore.tsx
+++ b/studio/hooks/misc/useStore.tsx
@@ -1,12 +1,12 @@
 import { useMonaco } from '@monaco-editor/react'
+import { useTheme } from 'common'
 import { autorun } from 'mobx'
-import { createContext, FC, useContext, useEffect } from 'react'
+import { createContext, PropsWithChildren, useContext, useEffect } from 'react'
 import toast from 'react-hot-toast'
 
-import { IRootStore } from 'stores'
 import { getTheme } from 'components/ui/CodeEditor'
 import SparkBar from 'components/ui/SparkBar'
-import { useTheme } from 'common'
+import { IRootStore } from 'stores'
 
 const StoreContext = createContext<IRootStore>(undefined!)
 
@@ -22,7 +22,7 @@ export function useStore() {
 interface StoreProvider {
   rootStore: IRootStore
 }
-export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
+export const StoreProvider = ({ children, rootStore }: PropsWithChildren<StoreProvider>) => {
   const monaco = useMonaco()
   const { ui } = rootStore
   const { isDarkMode } = useTheme()
@@ -55,7 +55,7 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
                     value={progress}
                     max={100}
                     type="horizontal"
-                    barClass="bg-brand-900"
+                    barClass="bg-brand"
                     labelBottom={message}
                     labelTop={`${progress.toFixed(2)}%`}
                   />
diff --git a/studio/lib/gotrue.ts b/studio/lib/gotrue.ts
index d83f9e902c9..9a285edf300 100644
--- a/studio/lib/gotrue.ts
+++ b/studio/lib/gotrue.ts
@@ -1,6 +1,5 @@
 import { User } from '@supabase/gotrue-js'
 import { gotrueClient } from 'common'
-import { DEFAULT_HOME, IS_PLATFORM } from './constants'
 export { STORAGE_KEY } from 'common'
 
 export const auth = gotrueClient
@@ -37,7 +36,7 @@ export const getIdentity = (gotrueUser: User) => {
 
 // NOTE: do not use any imports in this function as it is used standalone in the documents head
 // [Joshen] Potentially can remove after full move over to /dashboard
-export const getReturnToPath = (fallback = DEFAULT_HOME) => {
+export const getReturnToPath = (fallback = '/projects') => {
   const searchParams = new URLSearchParams(location.search)
 
   // [Joshen] Remove base path value ("/dashboard") from returnTo
diff --git a/studio/lib/integration-utils.ts b/studio/lib/integration-utils.ts
index 976b5af7942..37f18345ba2 100644
--- a/studio/lib/integration-utils.ts
+++ b/studio/lib/integration-utils.ts
@@ -1,5 +1,5 @@
-import { SupaResponse } from 'types'
 import { Integration } from 'data/integrations/integrations.types'
+import { SupaResponse } from 'types'
 import { isResponseOk } from './common/fetch'
 
 async function fetchGitHub<T = any>(url: string, responseJson = true): Promise<SupaResponse<T>> {
@@ -113,10 +113,33 @@ export async function getInitialMigrationSQLFromGitHubRepo(
   return `${migrations};${migrationsTableSql};${seed}`
 }
 
-export function getVercelConfigurationUrl(integration: Integration) {
+type VercelIntegration = Extract<Integration, { integration: { name: 'Vercel' } }>
+type GitHubIntegration = Extract<Integration, { integration: { name: 'GitHub' } }>
+
+export function getIntegrationConfigurationUrl(integration: Integration) {
+  if (integration.integration.name === 'Vercel') {
+    return getVercelConfigurationUrl(integration as VercelIntegration)
+  }
+
+  if (integration.integration.name === 'GitHub') {
+    return getGitHubConfigurationUrl(integration as GitHubIntegration)
+  }
+
+  return ''
+}
+
+export function getVercelConfigurationUrl(integration: VercelIntegration) {
   return `https://vercel.com/dashboard/${
     integration.metadata?.account.type === 'Team'
       ? `${integration.metadata?.account.team_slug}/`
       : ''
   }integrations/${integration.metadata?.configuration_id}`
 }
+
+export function getGitHubConfigurationUrl(integration: GitHubIntegration) {
+  return `https://github.com/${
+    integration.metadata?.account.type === 'Organization'
+      ? `organizations/${integration.metadata?.account.name}/`
+      : ''
+  }settings/installations/${integration.metadata?.installation_id}`
+}
diff --git a/studio/next.config.js b/studio/next.config.js
index fd60e53fd46..2264edfaffd 100644
--- a/studio/next.config.js
+++ b/studio/next.config.js
@@ -203,7 +203,12 @@ const nextConfig = {
     ]
   },
   images: {
-    domains: ['github.com', 'api-frameworks.vercel.sh', 'vercel.com'],
+    domains: [
+      'github.com',
+      'avatars.githubusercontent.com',
+      'api-frameworks.vercel.sh',
+      'vercel.com',
+    ],
   },
   // Ref: https://nextjs.org/docs/advanced-features/output-file-tracing#caveats
   experimental: {
diff --git a/studio/pages/integrations/github/[integrationId]/choose-project.tsx b/studio/pages/integrations/github/[integrationId]/choose-project.tsx
new file mode 100644
index 00000000000..2bf35deb49b
--- /dev/null
+++ b/studio/pages/integrations/github/[integrationId]/choose-project.tsx
@@ -0,0 +1,118 @@
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+import { useParams } from 'common'
+import ProjectLinker from 'components/interfaces/Integrations/ProjectLinker'
+import { Markdown } from 'components/interfaces/Markdown'
+import GitHubIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout'
+import { ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
+import { useIntegrationGitHubConnectionsCreateMutation } from 'data/integrations/integrations-github-connections-create-mutation'
+import { useGitHubReposQuery } from 'data/integrations/integrations-github-repos-query'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { BASE_PATH } from 'lib/constants'
+import { EMPTY_ARR } from 'lib/void'
+import { NextPageWithLayout } from 'types'
+import { IconBook, IconLifeBuoy, LoadingLine } from 'ui'
+
+const GITHUB_ICON = (
+  <img
+    src={`${BASE_PATH}/img/icons/github-icon-dark.svg`}
+    alt="GitHub Icon"
+    className="w-6 text-red-500"
+  />
+)
+
+const ChooseProjectGitHubPage: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { integrationId, slug, organizationSlug } = useParams()
+  const orgSlug = slug ?? organizationSlug
+
+  const { data: integrations } = useOrgIntegrationsQuery({
+    orgSlug,
+  })
+  const { data: organizations } = useOrganizationsQuery()
+  const { data: allProjects } = useProjectsQuery()
+  const { data: allRepos } = useGitHubReposQuery({ integrationId })
+
+  const integration = integrations?.find((integration) => integration.id === integrationId)
+  const organization = organizations?.find((organization) => organization.slug === orgSlug)
+  const projects = useMemo(
+    () =>
+      allProjects
+        ?.filter((project) => project.organization_id === organization?.id)
+        .map((project) => ({ id: project.id.toString(), name: project.name, ref: project.ref })) ??
+      EMPTY_ARR,
+    [allProjects, organization?.id]
+  )
+
+  const repos = useMemo(
+    () =>
+      allRepos?.map((repo) => ({
+        id: repo.id.toString(),
+        name: repo.full_name,
+      })) ?? EMPTY_ARR,
+    [allRepos]
+  )
+
+  const { mutate: createConnections, isLoading: isCreatingConnection } =
+    useIntegrationGitHubConnectionsCreateMutation({
+      onSuccess() {
+        router.push(`/org/${orgSlug}/integrations`)
+      },
+    })
+
+  return (
+    <>
+      <main className="overflow-auto flex flex-col h-full">
+        <LoadingLine loading={isCreatingConnection} />
+        <>
+          <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
+            <header>
+              <h1 className="text-xl text-scale-1200">
+                Link a Supabase project to a GitHub repository
+              </h1>
+              <Markdown
+                className="text-scale-900"
+                // explain what this integration does
+                content={`
+This Supabase integration will allow you to link a Supabase project to a GitHub repository. This will allow you to deploy your database schema to your Supabase project.
+`}
+              />
+            </header>
+            <ProjectLinker
+              organizationIntegrationId={integration?.id}
+              foreignProjects={repos ?? EMPTY_ARR}
+              supabaseProjects={projects}
+              onCreateConnections={createConnections}
+              installedConnections={integration?.connections}
+              isLoading={isCreatingConnection}
+              integrationIcon={GITHUB_ICON}
+              choosePrompt="Choose GitHub Repo"
+              onSkip={() => {
+                router.push(`/org/${orgSlug}/integrations`)
+              }}
+            />
+          </ScaffoldContainer>
+        </>
+
+        <ScaffoldDivider />
+      </main>
+      <ScaffoldContainer className="bg-body flex flex-row gap-6 py-6 border-t">
+        <div className="flex items-center gap-2 text-xs text-scale-900">
+          <IconBook size={16} /> Docs
+        </div>
+        <div className="flex items-center gap-2 text-xs text-scale-900">
+          <IconLifeBuoy size={16} /> Support
+        </div>
+      </ScaffoldContainer>
+    </>
+  )
+}
+
+ChooseProjectGitHubPage.getLayout = (page) => (
+  <GitHubIntegrationWindowLayout>{page}</GitHubIntegrationWindowLayout>
+)
+
+export default ChooseProjectGitHubPage
diff --git a/studio/pages/integrations/github/install.tsx b/studio/pages/integrations/github/install.tsx
new file mode 100644
index 00000000000..54eca73be8c
--- /dev/null
+++ b/studio/pages/integrations/github/install.tsx
@@ -0,0 +1,192 @@
+import { useRouter } from 'next/router'
+import { useMemo, useState } from 'react'
+
+import { useParams } from 'common'
+import OrganizationPicker from 'components/interfaces/Integrations/OrganizationPicker'
+import { Markdown } from 'components/interfaces/Markdown'
+import GitHubIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/GitHubIntegrationWindowLayout'
+import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils'
+import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
+import { useGitHubIntegrationCreateMutation } from 'data/integrations/github-integration-create-mutation'
+import { useIntegrationsQuery } from 'data/integrations/integrations-query'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useStore } from 'hooks'
+import { NextPageWithLayout, Organization } from 'types'
+import {
+  Alert,
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  IconAlertTriangle,
+  IconBook,
+  IconLifeBuoy,
+  LoadingLine,
+} from 'ui'
+
+const GitHubIntegration: NextPageWithLayout = () => {
+  const router = useRouter()
+  const { ui } = useStore()
+  const { installation_id: installationId } = useParams()
+  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
+  const [organizationIntegrationId, setOrganizationIntegrationId] = useState<string | null>(null)
+
+  /**
+   * Fetch the list of organization based integration installations for GitHub.
+   *
+   * Array of integrations installed on all
+   */
+  const { data: integrationData } = useIntegrationsQuery()
+
+  const { data: organizationsData } = useOrganizationsQuery({
+    onSuccess(organizations) {
+      const firstOrg = organizations?.[0]
+      if (firstOrg && selectedOrg === null) {
+        setSelectedOrg(firstOrg)
+        router.query.organizationSlug = firstOrg.slug
+      }
+    },
+  })
+
+  const { mutate, isLoading: isLoadingGitHubIntegrationCreateMutation } =
+    useGitHubIntegrationCreateMutation({
+      onSuccess({ id }) {
+        setOrganizationIntegrationId(id)
+
+        router.push({
+          pathname: `/integrations/github/${id}/choose-project`,
+          query: { ...router.query, slug: selectedOrg?.slug },
+        })
+      },
+    })
+
+  const installed = useMemo(
+    () =>
+      integrationData && organizationsData
+        ? getHasInstalledObject({
+            integrationName: 'GitHub',
+            integrationData,
+            organizationsData,
+            installationId,
+          })
+        : {},
+    [installationId, integrationData, organizationsData]
+  )
+
+  function onInstall() {
+    const orgSlug = selectedOrg?.slug
+
+    const installedIntegration = integrationData?.find(
+      (x) =>
+        x.organization.slug === orgSlug &&
+        x.metadata !== undefined &&
+        'installation_id' in x.metadata &&
+        String(x.metadata?.installation_id) === String(installationId)
+    )
+    const isIntegrationInstalled = Boolean(installedIntegration)
+
+    if (!orgSlug) {
+      return ui.setNotification({ category: 'error', message: 'Please select an organization' })
+    }
+
+    if (!installationId) {
+      return ui.setNotification({ category: 'error', message: 'GitHub Installation ID is missing' })
+    }
+
+    /**
+     * Only install if instgration hasn't already been installed
+     */
+    if (!isIntegrationInstalled) {
+      mutate({
+        installationId: Number(installationId),
+        orgSlug,
+        metadata: {},
+      })
+    } else {
+      router.push({
+        pathname: `/integrations/github/${installedIntegration?.id}/choose-project`,
+        query: router.query,
+      })
+    }
+  }
+
+  const disableInstallationForm = Boolean(selectedOrg && installed[selectedOrg.slug])
+
+  return (
+    <>
+      <main className="overflow-auto flex flex-col h-full bg">
+        <LoadingLine loading={isLoadingGitHubIntegrationCreateMutation} />
+        {organizationIntegrationId === null && (
+          <>
+            <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
+              <ScaffoldColumn className="mx-auto">
+                <h1 className="text-xl text-scale-1200">Choose organization</h1>
+                <>
+                  <Markdown content={`Choose the Supabase organization you wish to install in`} />
+                  <OrganizationPicker
+                    integrationName="GitHub"
+                    selectedOrg={selectedOrg}
+                    onSelectedOrgChange={(org) => {
+                      router.query.organizationSlug = org.slug
+                      setSelectedOrg(org)
+                    }}
+                    configurationId={installationId}
+                  />
+                  {disableInstallationForm && (
+                    <Alert_Shadcn_ variant="warning">
+                      <IconAlertTriangle className="h-4 w-4" strokeWidth={2} />
+                      <AlertTitle_Shadcn_>
+                        GitHub Integration is already installed.
+                      </AlertTitle_Shadcn_>
+                      <AlertDescription_Shadcn_>
+                        You will need to choose another organization to install the integration.
+                      </AlertDescription_Shadcn_>
+                    </Alert_Shadcn_>
+                  )}
+                  <div className="flex flex-row w-full justify-end">
+                    <Button
+                      size="medium"
+                      className="self-end"
+                      disabled={isLoadingGitHubIntegrationCreateMutation || disableInstallationForm}
+                      loading={isLoadingGitHubIntegrationCreateMutation}
+                      onClick={onInstall}
+                    >
+                      Install integration
+                    </Button>
+                  </div>
+                </>
+              </ScaffoldColumn>
+            </ScaffoldContainer>
+            <ScaffoldContainer className="flex flex-col gap-6 py-3">
+              <Alert
+                withIcon
+                variant="info"
+                title="You can uninstall this Integration at any time."
+              >
+                <Markdown
+                  content={`Remove this integration at any time via GitHub or the Supabase dashboard.`}
+                />
+              </Alert>
+            </ScaffoldContainer>
+          </>
+        )}
+
+        <ScaffoldDivider />
+      </main>
+      <ScaffoldContainer className="bg-body flex flex-row gap-6 py-6">
+        <div className="flex items-center gap-2 text-xs text-scale-900">
+          <IconBook size={16} /> Docs
+        </div>
+        <div className="flex items-center gap-2 text-xs text-scale-900">
+          <IconLifeBuoy size={16} /> Support
+        </div>
+      </ScaffoldContainer>
+    </>
+  )
+}
+
+GitHubIntegration.getLayout = (page) => (
+  <GitHubIntegrationWindowLayout>{page}</GitHubIntegrationWindowLayout>
+)
+
+export default GitHubIntegration
diff --git a/studio/pages/integrations/vercel.tsx b/studio/pages/integrations/vercel.tsx
deleted file mode 100644
index 9b2a5ac0c5a..00000000000
--- a/studio/pages/integrations/vercel.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useEffect } from 'react'
-
-import IntegrationWindowLayout from 'components/layouts/IntegrationWindowLayout'
-import { useRouter } from 'next/router'
-import { NextPageWithLayout } from 'types'
-
-const VercelIntegration: NextPageWithLayout = () => {
-  const router = useRouter()
-
-  useEffect(() => {
-    router.push({ pathname: '/integrations/vercel/install', query: router.query })
-  }, [router])
-
-  return <></>
-}
-
-VercelIntegration.getLayout = (page) => <IntegrationWindowLayout>{page}</IntegrationWindowLayout>
-
-export default VercelIntegration
diff --git a/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
index 77755e83f76..248126f21ff 100644
--- a/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
+++ b/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
@@ -5,15 +5,14 @@ import { ChangeEvent, useRef, useState } from 'react'
 
 import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
-import IntegrationWindowLayout from 'components/layouts/IntegrationWindowLayout'
+import { VercelIntegrationLayout } from 'components/layouts'
 import { ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
 import { useProjectApiQuery } from 'data/config/project-api-query'
-import { useIntegrationConnectionsCreateMutation } from 'data/integrations/integration-connections-create-mutation'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
+import { useIntegrationVercelConnectionsCreateMutation } from 'data/integrations/integrations-vercel-connections-create-mutation'
 import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query'
-import { Integration } from 'data/integrations/integrations.types'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectCreateMutation } from 'data/projects/project-create-mutation'
 import { useSelectedOrganization, useStore } from 'hooks'
@@ -62,7 +61,7 @@ const VercelIntegration: NextPageWithLayout = () => {
   )
 }
 
-VercelIntegration.getLayout = (page) => <IntegrationWindowLayout>{page}</IntegrationWindowLayout>
+VercelIntegration.getLayout = (page) => <VercelIntegrationLayout>{page}</VercelIntegrationLayout>
 
 const CreateProject = ({
   loading,
@@ -94,7 +93,7 @@ const CreateProject = ({
   } = useParams()
 
   const { mutateAsync: createConnections, isLoading: isLoadingCreateConnections } =
-    useIntegrationConnectionsCreateMutation()
+    useIntegrationVercelConnectionsCreateMutation()
   const { mutateAsync: syncEnvs } = useIntegrationsVercelConnectionSyncEnvsMutation()
 
   const { data: organizationData, isLoading: isLoadingOrganizationsQuery } = useOrganizationsQuery()
@@ -108,9 +107,7 @@ const CreateProject = ({
   /**
    * the vercel integration installed for organization chosen
    */
-  const organizationIntegration: Integration | undefined = integrationData?.find(
-    (x) => x.organization.slug === slug
-  )
+  const organizationIntegration = integrationData?.find((x) => x.organization.slug === slug)
 
   /**
    * Vercel projects available for this integration
diff --git a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
index fa67ca265bb..9e302c67622 100644
--- a/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
+++ b/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
@@ -1,23 +1,32 @@
-import { useMemo, useState } from 'react'
+import { keyBy } from 'lodash'
+import { useCallback, useMemo } from 'react'
+import { toast } from 'react-hot-toast'
 
 import { useParams } from 'common'
-import ProjectLinker from 'components/interfaces/Integrations/ProjectLinker'
+import { ENV_VAR_RAW_KEYS } from 'components/interfaces/Integrations/Integrations-Vercel.constants'
+import ProjectLinker, { ForeignProject } from 'components/interfaces/Integrations/ProjectLinker'
 import { Markdown } from 'components/interfaces/Markdown'
-import IntegrationWindowLayout from 'components/layouts/IntegrationWindowLayout'
+import { VercelIntegrationLayout } from 'components/layouts'
 import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
+import { vercelIcon } from 'components/to-be-cleaned/ListIcons'
 import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import { useIntegrationsVercelConnectionSyncEnvsMutation } from 'data/integrations/integrations-vercel-connection-sync-envs-mutation'
+import { useIntegrationVercelConnectionsCreateMutation } from 'data/integrations/integrations-vercel-connections-create-mutation'
 import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
+import { BASE_PATH } from 'lib/constants'
 import { EMPTY_ARR } from 'lib/void'
 import { NextPageWithLayout, Organization } from 'types'
 import { IconBook, IconLifeBuoy, LoadingLine } from 'ui'
 
+const VERCEL_ICON = (
+  <img src={`${BASE_PATH}/img/icons/vercel-icon.svg`} alt="Vercel Icon" className="w-4" />
+)
+
 const VercelIntegration: NextPageWithLayout = () => {
   const { slug, configurationId, next, organizationSlug } = useParams()
 
-  const [loading, setLoading] = useState<boolean>(false)
-
   /**
    * Fetch the list of organization based integration installations for Vercel.
    *
@@ -33,7 +42,12 @@ const VercelIntegration: NextPageWithLayout = () => {
 
   const organization = data?.find((organization: Organization) => organization.slug === slug)
 
-  const integration = integrationData?.find((x) => x.metadata?.configuration_id === configurationId)
+  const integration = integrationData?.find(
+    (x) =>
+      x.metadata !== undefined &&
+      'configuration_id' in x.metadata &&
+      x.metadata?.configuration_id === configurationId
+  )
 
   const { data: supabaseProjectsData, isLoading: isLoadingSupabaseProjectsData } = useProjectsQuery(
     {
@@ -47,7 +61,7 @@ const VercelIntegration: NextPageWithLayout = () => {
         ?.filter((project) => project.organization_id === organization?.id)
         .map((project) => ({ id: project.id.toString(), name: project.name, ref: project.ref })) ??
       EMPTY_ARR,
-    [organizationSlug, supabaseProjectsData]
+    [organization?.id, supabaseProjectsData]
   )
 
   const { data: vercelProjectsData, isLoading: isLoadingVercelProjectsData } =
@@ -59,10 +73,65 @@ const VercelIntegration: NextPageWithLayout = () => {
     )
 
   const vercelProjects = useMemo(() => vercelProjectsData ?? EMPTY_ARR, [vercelProjectsData])
+  const vercelProjectsById = useMemo(() => keyBy(vercelProjects, 'id'), [vercelProjects])
+
+  const getForeignProjectIcon = useCallback(
+    (_project: ForeignProject) => {
+      const project = vercelProjectsById[_project.id]
+
+      return !project?.framework ? (
+        vercelIcon
+      ) : (
+        <img
+          src={`${BASE_PATH}/img/icons/frameworks/${project.framework}.svg`}
+          width={21}
+          height={21}
+          alt={`icon`}
+        />
+      )
+    },
+    [vercelProjectsById]
+  )
+
+  const { mutateAsync: syncEnvs } = useIntegrationsVercelConnectionSyncEnvsMutation()
+  const { mutate: createConnections, isLoading: isCreatingConnection } =
+    useIntegrationVercelConnectionsCreateMutation({
+      async onSuccess({ id }) {
+        try {
+          await syncEnvs({ connectionId: id })
+        } catch (error: any) {
+          toast.error('Failed to sync environment variables: ', error.message)
+        }
+
+        if (next) {
+          window.location.href = next
+        }
+      },
+    })
+
+  const onCreateConnections = useCallback(
+    (vars) => {
+      createConnections({
+        ...vars,
+        connection: {
+          ...vars.connection,
+          metadata: {
+            ...vars.connection.metadata,
+            supabaseConfig: {
+              projectEnvVars: {
+                write: true,
+              },
+            },
+          },
+        },
+      })
+    },
+    [createConnections]
+  )
 
   return (
     <>
-      <LoadingLine loading={loading} />
+      <LoadingLine loading={isCreatingConnection} />
       <main className="overflow-auto flex flex-col h-full">
         <>
           <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
@@ -78,21 +147,37 @@ This Supabase integration manages your environment variables automatically to pr
 `}
                 />
               </header>
+
               <ProjectLinker
                 organizationIntegrationId={integration?.id}
                 foreignProjects={vercelProjects}
                 supabaseProjects={supabaseProjects}
-                onCreateConnections={() => {
+                onCreateConnections={onCreateConnections}
+                installedConnections={integration?.connections}
+                isLoading={isCreatingConnection}
+                integrationIcon={VERCEL_ICON}
+                getForeignProjectIcon={getForeignProjectIcon}
+                choosePrompt="Choose Vercel Project"
+                onSkip={() => {
                   if (next) {
                     window.location.href = next
                   }
                 }}
-                installedConnections={integration?.connections}
-                setLoading={setLoading}
-                showSkip={true}
                 loadingForeignProjects={isLoadingVercelProjectsData}
                 loadingSupabaseProjects={isLoadingSupabaseProjectsData}
               />
+              <Markdown
+                content={`
+The following environment variables will be added:
+
+${ENV_VAR_RAW_KEYS.map((x) => {
+  return `
+  \n
+  - \`${x}\`
+`
+})}
+`}
+              />
             </ScaffoldColumn>
           </ScaffoldContainer>
         </>
@@ -111,6 +196,6 @@ This Supabase integration manages your environment variables automatically to pr
   )
 }
 
-VercelIntegration.getLayout = (page) => <IntegrationWindowLayout>{page}</IntegrationWindowLayout>
+VercelIntegration.getLayout = (page) => <VercelIntegrationLayout>{page}</VercelIntegrationLayout>
 
 export default VercelIntegration
diff --git a/studio/pages/integrations/vercel/install.tsx b/studio/pages/integrations/vercel/install.tsx
index a323420f3d5..95419081f5b 100644
--- a/studio/pages/integrations/vercel/install.tsx
+++ b/studio/pages/integrations/vercel/install.tsx
@@ -1,47 +1,30 @@
+import { useRouter } from 'next/router'
+import { useEffect, useMemo, useState } from 'react'
+import { toast } from 'react-hot-toast'
+
 import { useParams } from 'common'
+import OrganizationPicker from 'components/interfaces/Integrations/OrganizationPicker'
 import { Markdown } from 'components/interfaces/Markdown'
-import IntegrationWindowLayout from 'components/layouts/IntegrationWindowLayout'
+import { getHasInstalledObject } from 'components/layouts/IntegrationsLayout/Integrations.utils'
+import VercelIntegrationWindowLayout from 'components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout'
 import { ScaffoldColumn, ScaffoldContainer, ScaffoldDivider } from 'components/layouts/Scaffold'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
-import { IntegrationName } from 'data/integrations/integrations.types'
 import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useStore } from 'hooks'
-import { useRouter } from 'next/router'
-import { useEffect, useRef, useState } from 'react'
-import { useVercelIntegrationInstallationState } from 'state/vercel-integration-installation'
 import { NextPageWithLayout, Organization } from 'types'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
   Alert_Shadcn_,
-  Badge,
   Button,
-  CommandEmpty_Shadcn_,
-  CommandGroup_Shadcn_,
-  CommandInput_Shadcn_,
-  CommandItem_Shadcn_,
-  CommandList_Shadcn_,
-  Command_Shadcn_,
   IconAlertTriangle,
   IconBook,
-  IconChevronDown,
-  IconHexagon,
   IconInfo,
   IconLifeBuoy,
   LoadingLine,
-  PopoverContent_Shadcn_,
-  PopoverTrigger_Shadcn_,
-  Popover_Shadcn_,
 } from 'ui'
 
-/**
- * Organization type with `installationInstalled` added
- */
-interface OrganizationsResponseWithInstalledData extends Organization {
-  installationInstalled?: boolean
-}
-
 /**
  * Variations of the Vercel integration flow.
  * They require different UI and logic.
@@ -55,71 +38,49 @@ export type VercelIntegrationFlow = 'deploy-button' | 'marketing'
 const VercelIntegration: NextPageWithLayout = () => {
   const router = useRouter()
   const { ui } = useStore()
-  const { code, configurationId, next, teamId, source, externalId } = useParams()
-  const [selectedOrg, setSelectedOrg] = useState<OrganizationsResponseWithInstalledData | null>(
-    null
-  )
+  const { code, configurationId, teamId, source, externalId } = useParams()
+  const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
   const [organizationIntegrationId, setOrganizationIntegrationId] = useState<string | null>(null)
 
-  const snapshot = useVercelIntegrationInstallationState()
-
-  const flow: VercelIntegrationFlow = externalId ? 'marketing' : 'deploy-button'
-
   /**
    * Fetch the list of organization based integration installations for Vercel.
    *
    * Array of integrations installed on all
    */
-  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery()
+  const { data: integrationData } = useIntegrationsQuery()
 
   const { data: organizationsData, isLoading: isLoadingOrganizationsQuery } =
     useOrganizationsQuery()
 
   useEffect(() => {
     if (organizationsData !== undefined && integrationData !== undefined) {
-      const firstOrg = organizationsWithInstalls(organizationsData)?.[0]
+      const firstOrg = organizationsData[0]
 
       if (firstOrg && selectedOrg === null) {
         setSelectedOrg(firstOrg)
-        snapshot.setSelectedOrganizationSlug(firstOrg.slug)
         router.query.organizationSlug = firstOrg.slug
       }
     }
   }, [organizationsData, integrationData])
 
-  /**
-   * Find installedConnections
-   */
-  function organizationsWithInstalls(organizations?: OrganizationsResponseWithInstalledData[]) {
-    /**
-     * Flat array of org slugs that have integration installed
-     *
-     */
-    const flatInstalledConnectionsIds: string[] | [] =
-      integrationData && integrationData.length > 0
-        ? integrationData
-            .filter((x) => x.integration.name === 'Vercel')
-            .map((x) => x.organization.slug)
-        : []
-
-    return organizations
-      ? organizations?.map((org) => {
-          return {
-            ...org,
-            installationInstalled: flatInstalledConnectionsIds.includes(org.slug) ? true : false,
-          }
-        })
-      : []
-  }
-
   /**
    * Organizations with extra `installationInstalled` attribute
    *
    * Used to show label/badge and allow/disallow installing
    *
    */
-  const organizationsWithInstalledData: OrganizationsResponseWithInstalledData[] =
-    organizationsWithInstalls(organizationsData)
+  const installed = useMemo(
+    () =>
+      integrationData && organizationsData
+        ? getHasInstalledObject({
+            integrationName: 'Vercel',
+            integrationData,
+            organizationsData,
+            installationId: configurationId,
+          })
+        : {},
+    [configurationId, integrationData, organizationsData]
+  )
 
   /**
    * Handle the correct route change based on whether the vercel integration
@@ -145,26 +106,19 @@ const VercelIntegration: NextPageWithLayout = () => {
   const { mutate, isLoading: isLoadingVercelIntegrationCreateMutation } =
     useVercelIntegrationCreateMutation({
       onSuccess({ id }) {
-        const orgSlug = selectedOrg?.slug
-
         setOrganizationIntegrationId(id)
 
         handleRouteChange()
       },
-      onError(error: any) {
-        ui.setNotification({
-          category: 'error',
-          message: `Creating Vercel integration failed: ${error.message}`,
-        })
+      onError(error) {
+        toast.error(`Creating Vercel integration failed: ${error.message}`)
       },
     })
 
   function onInstall() {
     const orgSlug = selectedOrg?.slug
 
-    const isIntegrationInstalled = organizationsWithInstalledData.some(
-      (x) => x.slug === orgSlug && x.installationInstalled
-    )
+    const isIntegrationInstalled = orgSlug ? installed[orgSlug] : false
 
     if (!orgSlug) {
       return ui.setNotification({ category: 'error', message: 'Please select an organization' })
@@ -186,7 +140,7 @@ const VercelIntegration: NextPageWithLayout = () => {
     }
 
     /**
-     * Only install if instgration hasn't already been installed
+     * Only install if integration hasn't already been installed
      */
     if (!isIntegrationInstalled) {
       mutate({
@@ -207,13 +161,13 @@ const VercelIntegration: NextPageWithLayout = () => {
   const disableInstallationForm =
     (isLoadingVercelIntegrationCreateMutation && !dataLoading) ||
     // disables installation button if integration is already installed and it is Marketplace flow
-    (selectedOrg && selectedOrg?.installationInstalled && source === 'marketplace' && !dataLoading)
+    (selectedOrg && installed[selectedOrg.slug] && source === 'marketplace' && !dataLoading)
       ? true
       : false
 
   return (
     <>
-      <main className="overflow-auto flex flex-col h-full">
+      <main className="overflow-auto flex flex-col h-full bg">
         <LoadingLine loading={isLoadingVercelIntegrationCreateMutation} />
         {organizationIntegrationId === null && (
           <>
@@ -224,17 +178,12 @@ const VercelIntegration: NextPageWithLayout = () => {
                   <Markdown content={`Choose the Supabase organization you wish to install in`} />
                   <OrganizationPicker
                     integrationName="Vercel"
-                    organizationsWithInstalledData={organizationsWithInstalledData}
-                    onSelectedOrgChange={(e: string) => {
-                      const org = organizationsWithInstalledData?.find((org) => org.slug === e)
-
-                      if (org) {
-                        setSelectedOrg(org)
-                        router.query.organizationSlug = org.slug
-                      }
-                    }}
                     selectedOrg={selectedOrg}
-                    dataLoading={dataLoading}
+                    onSelectedOrgChange={(org) => {
+                      setSelectedOrg(org)
+                      router.query.organizationSlug = org.slug
+                    }}
+                    configurationId={configurationId}
                   />
                   {disableInstallationForm && (
                     <Alert_Shadcn_ variant="warning">
@@ -251,7 +200,7 @@ const VercelIntegration: NextPageWithLayout = () => {
                     <Button
                       size="medium"
                       className="self-end"
-                      disabled={disableInstallationForm}
+                      disabled={disableInstallationForm || isLoadingVercelIntegrationCreateMutation}
                       loading={isLoadingVercelIntegrationCreateMutation}
                       onClick={onInstall}
                     >
@@ -289,93 +238,8 @@ const VercelIntegration: NextPageWithLayout = () => {
   )
 }
 
-VercelIntegration.getLayout = (page) => <IntegrationWindowLayout>{page}</IntegrationWindowLayout>
-
-export interface OrganizationPickerProps {
-  label?: string
-  onSelectedOrgChange: (slug: string) => void
-  integrationName: IntegrationName
-  dataLoading: boolean
-  organizationsWithInstalledData: OrganizationsResponseWithInstalledData[]
-  selectedOrg: OrganizationsResponseWithInstalledData | null
-}
-
-const OrganizationPicker = ({
-  label = 'Choose an organization',
-  onSelectedOrgChange,
-  selectedOrg,
-  dataLoading,
-  organizationsWithInstalledData,
-}: OrganizationPickerProps) => {
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
-        <PopoverTrigger_Shadcn_ asChild>
-          <Button
-            ref={ref}
-            type="default"
-            size="medium"
-            block
-            className="justify-start"
-            icon={<IconHexagon />}
-            loading={dataLoading}
-            disabled={dataLoading}
-            iconRight={
-              <span className="grow flex justify-end">
-                <IconChevronDown className={''} />
-              </span>
-            }
-          >
-            <span className="flex gap-2">
-              <span className="truncate">{selectedOrg?.name}</span>
-              {selectedOrg?.installationInstalled && (
-                <Badge color="scale">Integration Installed</Badge>
-              )}
-            </span>
-          </Button>
-        </PopoverTrigger_Shadcn_>
-        <PopoverContent_Shadcn_
-          className="p-0 w-full"
-          side="bottom"
-          align="center"
-          style={{ width: ref.current?.offsetWidth }}
-        >
-          <Command_Shadcn_>
-            <CommandInput_Shadcn_ placeholder="Search organization..." />
-            <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
-              <CommandGroup_Shadcn_>
-                {organizationsWithInstalledData?.map((org) => {
-                  return (
-                    <CommandItem_Shadcn_
-                      value={org.slug}
-                      key={org.slug}
-                      className="flex gap-2 items-center"
-                      onSelect={(slug) => {
-                        if (slug) onSelectedOrgChange(slug)
-                        setOpen(false)
-                      }}
-                    >
-                      <IconHexagon />
-                      <span className="truncate">{org.name}</span>{' '}
-                      {org?.installationInstalled && (
-                        <Badge color="scale" className="!flex-none">
-                          Integration Installed
-                        </Badge>
-                      )}
-                    </CommandItem_Shadcn_>
-                  )
-                })}
-              </CommandGroup_Shadcn_>
-            </CommandList_Shadcn_>
-          </Command_Shadcn_>
-        </PopoverContent_Shadcn_>
-      </Popover_Shadcn_>
-    </>
-  )
-}
+VercelIntegration.getLayout = (page) => (
+  <VercelIntegrationWindowLayout>{page}</VercelIntegrationWindowLayout>
+)
 
 export default VercelIntegration
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index 56130ed0c13..dc9b553a419 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -137,7 +137,7 @@ const JoinOrganizationPage = () => {
         <p className="text-scale-900">
           To accept this invitation, you will need to{' '}
           <a
-            className="cursor-pointer text-brand-900"
+            className="cursor-pointer text-brand"
             onClick={async () => {
               await signOut()
               router.reload()
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index a73d3a53d2a..cda74baff83 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -50,6 +50,7 @@ import {
   Toggle,
 } from 'ui'
 import Link from 'next/link'
+import { useProjectsQuery } from 'data/projects/projects-query'
 
 const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
@@ -87,6 +88,14 @@ const Wizard: NextPageWithLayout = () => {
     { enabled: billedViaOrg }
   )
 
+  const { data: allProjects } = useProjectsQuery({
+    enabled: currentOrg?.subscription_id !== undefined,
+  })
+
+  const orgProjectCount = (allProjects || []).filter(
+    (proj) => proj.organization_id === currentOrg?.id
+  ).length
+
   const [availableRegions, setAvailableRegions] = useState(
     getAvailableRegions(PROVIDERS[cloudProvider].id)
   )
@@ -482,15 +491,15 @@ const Wizard: NextPageWithLayout = () => {
                   description={
                     <div className="space-y-3">
                       <p className="text-sm leading-normal">
-                        This organization uses organization level billing and is on the{' '}
-                        <span className="text-brand-900">{orgSubscription?.plan?.name} plan</span>.
+                        This organization uses the new organization-level billing and is on the{' '}
+                        <span className="text-brand">{orgSubscription?.plan?.name} plan</span>.
                       </p>
 
-                      {orgSubscription?.plan?.id !== 'free' && (
+                      {/* Show info when launching a new project in a paid org that already has at least one project */}
+                      {orgSubscription?.plan?.id !== 'free' && orgProjectCount > 0 && (
                         <p>
-                          Your plan comes with $10 of Compute Credits. Launching another project
-                          incurs additional compute costs - if you exhaust your Compute Credits, the
-                          additional compute hours result in additional usage charges.
+                          Launching another project incurs additional compute costs (starting at $10
+                          per month).
                         </p>
                       )}
 
diff --git a/studio/pages/org/[slug]/index.tsx b/studio/pages/org/[slug]/index.tsx
index b1e1245555c..1607bf71bdd 100644
--- a/studio/pages/org/[slug]/index.tsx
+++ b/studio/pages/org/[slug]/index.tsx
@@ -9,6 +9,8 @@ import AlertError from 'components/ui/AlertError'
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
+import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-org-only'
+import NoProjectsOnPaidOrgInfo from 'components/interfaces/BillingV2/NoProjectsOnPaidOrgInfo'
 
 const ProjectsPage: NextPageWithLayout = () => {
   const {
@@ -20,19 +22,30 @@ const ProjectsPage: NextPageWithLayout = () => {
   } = useProjectsQuery()
 
   const organization = useSelectedOrganization()
-  const projects = allProjects?.filter((project) => project.organization_id === organization?.id)
+  const projects = allProjects
+    ?.filter((project) => project.organization_id === organization?.id)
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  const { data: integrations } = useOrgIntegrationsQuery({ orgSlug: organization?.slug })
+  const githubConnections = integrations
+    ?.filter((integration) => integration.integration.name === 'GitHub')
+    .flatMap((integration) => integration.connections)
 
   return (
-    <ScaffoldContainer>
+    <ScaffoldContainer className="h-full overflow-y-auto">
       <ScaffoldSection>
         <div className="col-span-12 space-y-8">
-          <Link href={`/new/${organization?.slug}`}>
-            <a>
-              <Button size="medium" type="default" iconRight={<IconPlus />}>
-                New project
-              </Button>
-            </a>
-          </Link>
+          <NoProjectsOnPaidOrgInfo organization={organization} />
+
+          <div>
+            <Link href={`/new/${organization?.slug}`}>
+              <a>
+                <Button size="medium" type="default" iconRight={<IconPlus />}>
+                  New project
+                </Button>
+              </a>
+            </Link>
+          </div>
           <div className="space-y-4">
             <h4 className="text-lg">Projects</h4>
             {isLoadingProjects && (
@@ -65,7 +78,13 @@ const ProjectsPage: NextPageWithLayout = () => {
                 ) : (
                   <ul className="mx-auto grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
                     {projects?.map((project) => (
-                      <ProjectCard key={project.ref} project={project} />
+                      <ProjectCard
+                        key={project.ref}
+                        project={project}
+                        githubIntegration={githubConnections?.find(
+                          (connection) => connection.supabase_project_ref === project.ref
+                        )}
+                      />
                     ))}
                   </ul>
                 )}
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx
index c193e99317a..e4f8b718a03 100644
--- a/studio/pages/project/[ref]/api/index.tsx
+++ b/studio/pages/project/[ref]/api/index.tsx
@@ -1,12 +1,11 @@
+import { useParams } from 'common'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { FC, createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 
-import { useParams } from 'common/hooks'
 import { GeneralContent, ResourceContent, RpcContent } from 'components/interfaces/Docs'
 import LangSelector from 'components/interfaces/Docs/LangSelector'
 import { DocsLayout } from 'components/layouts'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 import { snakeToCamel } from 'lib/helpers'
@@ -45,12 +44,11 @@ const PageConfig: NextPageWithLayout = () => {
 
   const router = useRouter()
   const { query } = router
-  const { project } = useProjectContext()
   PageState.projectRef = query.ref
 
   return (
     <PageContext.Provider value={PageState}>
-      <DocView project={project} />
+      <DocView />
     </PageContext.Provider>
   )
 }
@@ -61,7 +59,7 @@ export default observer(PageConfig)
 
 const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' }
 
-const DocView: FC<any> = observer(({}) => {
+const DocView = observer(() => {
   const PageState: any = useContext(PageContext)
   const { ref: projectRef, page, resource, rpc } = useParams()
   const [selectedLang, setSelectedLang] = useState<any>('js')
diff --git a/studio/pages/project/[ref]/building.tsx b/studio/pages/project/[ref]/building.tsx
index e611ff479ff..b4ebc0a961e 100644
--- a/studio/pages/project/[ref]/building.tsx
+++ b/studio/pages/project/[ref]/building.tsx
@@ -1,6 +1,6 @@
-import { FC, useEffect } from 'react'
-import { useRouter } from 'next/router'
 import { ProjectLayoutWithAuth } from 'components/layouts'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import { NextPageWithLayout } from 'types'
 
 const ProjectBuildingPage: NextPageWithLayout = () => {
@@ -13,7 +13,7 @@ ProjectBuildingPage.getLayout = (page) => (
 
 export default ProjectBuildingPage
 
-const RedirectToDashboard: FC = () => {
+const RedirectToDashboard = () => {
   const router = useRouter()
   const { ref } = router.query
 
diff --git a/studio/pages/project/[ref]/database/backups/pitr.tsx b/studio/pages/project/[ref]/database/backups/pitr.tsx
index 7b6a865f9d1..10021383c5e 100644
--- a/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -83,6 +83,7 @@ const PITR = observer(() => {
             ? 'Upgrade to the Pro plan with the PITR add-on selected to enable point in time recovery for your project.'
             : 'Please enable the add-on to enable point in time recovery for your project.'
         }
+        addon="pitr"
       />
     )
   }
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index a4f83a5ca93..2a6fe5fbd3b 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -64,7 +64,7 @@ const DatabaseScheduledBackups: NextPageWithLayout = () => {
                   needed, as PITR supports a superset of functionality, in terms of the granular
                   recovery that can be performed.{' '}
                   <a
-                    className="text-brand-900 transition-colors hover:text-brand-1200"
+                    className="text-brand transition-colors hover:text-brand-600"
                     href="https://supabase.com/docs/guides/platform/backups"
                   >
                     Learn more
diff --git a/studio/pages/project/[ref]/functions/index.tsx b/studio/pages/project/[ref]/functions/index.tsx
index 0673931084f..b19b56009a5 100644
--- a/studio/pages/project/[ref]/functions/index.tsx
+++ b/studio/pages/project/[ref]/functions/index.tsx
@@ -44,7 +44,7 @@ const PageLayout: NextPageWithLayout = () => {
         body={
           <>
             {functions.length > 0 &&
-              functions.map((item: any) => <EdgeFunctionsListItem key={item.id} function={item} />)}
+              functions.map((item) => <EdgeFunctionsListItem key={item.id} function={item} />)}
           </>
         }
       />
diff --git a/studio/pages/project/[ref]/logs/explorer/templates.tsx b/studio/pages/project/[ref]/logs/explorer/templates.tsx
index db2173b63f4..7eb8d932f42 100644
--- a/studio/pages/project/[ref]/logs/explorer/templates.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/templates.tsx
@@ -41,8 +41,8 @@ const Template = ({ projectRef, template }: { projectRef?: string; template: Log
           bg-scale-1200
           text-scale-100
           transition-colors
-          group-hover:bg-brand-900
-          group-hover:text-brand-1200
+          group-hover:bg-brand
+          group-hover:text-brand-600
         "
         >
           <div className="scale-100 group-hover:scale-110">
diff --git a/studio/pages/project/[ref]/reports/database.tsx b/studio/pages/project/[ref]/reports/database.tsx
index 045faf731bf..49367c6f4e5 100644
--- a/studio/pages/project/[ref]/reports/database.tsx
+++ b/studio/pages/project/[ref]/reports/database.tsx
@@ -1,9 +1,8 @@
 import dayjs from 'dayjs'
 import { observer } from 'mobx-react-lite'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { useParams } from 'common/hooks'
-import { useStore } from 'hooks'
 import { TIME_PERIODS_INFRA, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 import { NextPageWithLayout } from 'types'
@@ -15,8 +14,9 @@ import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import Panel from 'components/ui/Panel'
 import SparkBar from 'components/ui/SparkBar'
-import { useProjectUsageQuery } from 'data/usage/project-usage-query'
+import { useDatabaseSizeQuery } from 'data/database/database-size-query'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 const DatabaseReport: NextPageWithLayout = () => {
   return (
@@ -35,36 +35,21 @@ DatabaseReport.getLayout = (page) => <ReportsLayout title="Database">{page}</Rep
 export default DatabaseReport
 
 const DatabaseUsage = observer(() => {
-  const { meta, ui } = useStore()
-  const { project } = useProjectContext()
-  const [databaseSize, setDatabaseSize] = useState<any>(0)
-  const [dateRange, setDateRange] = useState<any>(undefined)
-
   const { ref: projectRef } = useParams()
+  const { project } = useProjectContext()
   const { data: usage } = useProjectUsageQuery({ projectRef })
   const { data: subscription } = useProjectSubscriptionV2Query({ projectRef })
 
+  const [dateRange, setDateRange] = useState<any>(undefined)
+
   const databaseSizeLimit = usage?.db_size?.limit ?? 0
   const databaseEgressLimit = usage?.db_egress?.limit ?? 0
 
-  useEffect(() => {
-    let cancel = false
-    const getDatabaseSize = async () => {
-      const res = await meta.query(
-        'select sum(pg_database_size(pg_database.datname))::bigint as db_size from pg_database;'
-      )
-      if (!res.error && !cancel) {
-        setDatabaseSize(res[0].db_size)
-      } else {
-        ui.setNotification({ category: 'error', message: 'Failed to retrieve database size' })
-      }
-    }
-    getDatabaseSize()
-
-    return () => {
-      cancel = true
-    }
-  }, [])
+  const { data } = useDatabaseSizeQuery({
+    projectRef: project?.ref,
+    connectionString: project?.connectionString,
+  })
+  const databaseSize = data?.result[0].db_size ?? 0
 
   const databaseSizeUsageRatio = databaseSize / databaseSizeLimit
   const sizeIsApproaching = databaseSizeUsageRatio >= USAGE_APPROACHING_THRESHOLD
@@ -90,11 +75,7 @@ const DatabaseUsage = observer(() => {
                   value={databaseSize}
                   max={databaseSizeLimit > 0 ? databaseSizeLimit : Infinity}
                   barClass={`${
-                    sizeIsExceeded
-                      ? 'bg-red-900'
-                      : sizeIsApproaching
-                      ? 'bg-yellow-900'
-                      : 'bg-brand-900'
+                    sizeIsExceeded ? 'bg-red-900' : sizeIsApproaching ? 'bg-yellow-900' : 'bg-brand'
                   }`}
                   labelBottom={formatBytes(databaseSize)}
                   labelTop={databaseSizeLimit > 0 ? formatBytes(databaseSizeLimit) : ''}
@@ -134,7 +115,7 @@ const DatabaseUsage = observer(() => {
                       ? 'bg-red-900'
                       : egressIsApproaching
                       ? 'bg-yellow-900'
-                      : 'bg-brand-900'
+                      : 'bg-brand'
                   }`}
                   labelBottom={formatBytes(usage?.db_egress?.usage ?? 0)}
                   labelTop={databaseEgressLimit > 0 ? formatBytes(databaseEgressLimit) : ''}
diff --git a/studio/pages/project/[ref]/reports/query-performance.tsx b/studio/pages/project/[ref]/reports/query-performance.tsx
index e23ede36487..a8c3b156bd2 100644
--- a/studio/pages/project/[ref]/reports/query-performance.tsx
+++ b/studio/pages/project/[ref]/reports/query-performance.tsx
@@ -45,7 +45,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
   }
 
   const checkAlert = (
-    <div className="w-5 h-5 text-brand-1400 text-brand-900 flex items-center justify-center">
+    <div className="w-5 h-5 text-brand-1400 text-brand flex items-center justify-center">
       <IconCheckCircle strokeWidth={2} size={16} />
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/addons.tsx b/studio/pages/project/[ref]/settings/addons.tsx
index db292501c79..d8cd7e0fac3 100644
--- a/studio/pages/project/[ref]/settings/addons.tsx
+++ b/studio/pages/project/[ref]/settings/addons.tsx
@@ -21,7 +21,7 @@ const ProjectAddons: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/project/${ref}/settings/billing/subscription`}>
-            <a className="text-brand-900">project's subscription</a>
+            <a className="text-brand">project's subscription</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/project/[ref]/settings/billing/invoices.tsx b/studio/pages/project/[ref]/settings/billing/invoices.tsx
index 7b50f1e3c0f..e44997f57bc 100644
--- a/studio/pages/project/[ref]/settings/billing/invoices.tsx
+++ b/studio/pages/project/[ref]/settings/billing/invoices.tsx
@@ -5,29 +5,21 @@ import { SettingsLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
-import { Alert } from 'ui'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 const ProjectBilling: NextPageWithLayout = () => {
   const organization = useSelectedOrganization()
   const isOrgBilling = !!organization?.subscription_id
+  const router = useRouter()
 
-  if (isOrgBilling) {
-    return (
-      <div className="p-4">
-        <Alert
-          withIcon
-          variant="info"
-          title="This page is only available for projects which are on their own subscription"
-        >
-          You might be looking for the{' '}
-          <Link href={`/org/${organization?.slug}/invoices`}>
-            <a className="text-brand-900">organization's invoices</a>
-          </Link>{' '}
-          page instead.
-        </Alert>
-      </div>
-    )
-  }
+  useEffect(() => {
+    if (isOrgBilling) {
+      router.push(`/org/${organization.slug}/invoices`)
+    }
+  }, [router, organization?.slug, isOrgBilling])
+
+  if (isOrgBilling) return null
 
   return (
     <div className="w-full h-full overflow-y-auto content">
diff --git a/studio/pages/project/[ref]/settings/billing/subscription.tsx b/studio/pages/project/[ref]/settings/billing/subscription.tsx
index d787c003404..b1c2a7a5f2c 100644
--- a/studio/pages/project/[ref]/settings/billing/subscription.tsx
+++ b/studio/pages/project/[ref]/settings/billing/subscription.tsx
@@ -1,31 +1,44 @@
-import Link from 'next/link'
-
 import SubscriptionV2 from 'components/interfaces/BillingV2/Subscription/Subscription'
 import { SettingsLayout } from 'components/layouts'
 import { useSelectedOrganization } from 'hooks'
 import { NextPageWithLayout } from 'types'
-import { Alert } from 'ui'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 
 const ProjectBilling: NextPageWithLayout = () => {
   const organization = useSelectedOrganization()
   const isOrgBilling = !!organization?.subscription_id
+  const router = useRouter()
 
+  useEffect(() => {
+    if (isOrgBilling) {
+      const { ref, panel } = router.query
+      let redirectUri = `/org/${organization.slug}/billing`
+      switch (panel) {
+        case 'subscriptionPlan':
+          redirectUri = `/org/${organization.slug}/billing?panel=subscriptionPlan`
+          break
+        case 'costControl':
+          redirectUri = `/org/${organization.slug}/billing?panel=costControl`
+          break
+        case 'computeInstance':
+          redirectUri = `/project/${ref}/settings/addons?panel=computeInstance`
+          break
+        case 'pitr':
+          redirectUri = `/project/${ref}/settings/addons?panel=pitr`
+          break
+        case 'customDomain':
+          redirectUri = `/project/${ref}/settings/addons?panel=customDomain`
+          break
+      }
+
+      router.push(redirectUri)
+    }
+  }, [router, organization?.slug, isOrgBilling])
+
+  // No need to bother rendering, we'll redirect anyway
   if (isOrgBilling) {
-    return (
-      <div className="p-4">
-        <Alert
-          withIcon
-          variant="info"
-          title="This page is only available for projects which are on their own subscription"
-        >
-          Subscription management can be found on the{' '}
-          <Link href={`/org/${organization?.slug}/billing`}>
-            <a className="text-brand-900">organization's billing</a>
-          </Link>{' '}
-          page instead.
-        </Alert>
-      </div>
-    )
+    return null
   }
 
   return <SubscriptionV2 />
diff --git a/studio/pages/project/[ref]/settings/infrastructure.tsx b/studio/pages/project/[ref]/settings/infrastructure.tsx
index 629177a1dcc..ea2bdbcf75e 100644
--- a/studio/pages/project/[ref]/settings/infrastructure.tsx
+++ b/studio/pages/project/[ref]/settings/infrastructure.tsx
@@ -23,7 +23,7 @@ const ProjectInfrastructure: NextPageWithLayout = () => {
         >
           You might be looking for the{' '}
           <Link href={`/project/${ref}/settings/billing/usage`}>
-            <a className="text-brand-900">project's usage</a>
+            <a className="text-brand">project's usage</a>
           </Link>{' '}
           page instead.
         </Alert>
diff --git a/studio/pages/project/_/[[...routeSlug]].tsx b/studio/pages/project/_/[[...routeSlug]].tsx
index 5dd5959f40a..e3237621cf7 100644
--- a/studio/pages/project/_/[[...routeSlug]].tsx
+++ b/studio/pages/project/_/[[...routeSlug]].tsx
@@ -1,16 +1,13 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import { NextPage } from 'next'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
+import { NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
+import ProjectList from 'components/interfaces/Home/ProjectList'
 import { withAuth } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
-import ProjectList from 'components/interfaces/Home/ProjectList'
 
-interface Props {}
-
-const Header: FC<Props> = () => {
+const Header = () => {
   return (
     <div className="dark:border-dark border-b p-3">
       <div className="flex items-center space-x-2">
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 8d042dbddad..159151dc291 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -50,7 +50,7 @@ const SupportPage = () => {
                           isLoading ? (
                             <IconLoader className="animate-spin" />
                           ) : isHealthy ? (
-                            <div className="h-2 w-2 bg-brand-900 rounded-full" />
+                            <div className="h-2 w-2 bg-brand rounded-full" />
                           ) : (
                             <div className="h-2 w-2 bg-yellow-900 rounded-full" />
                           )
diff --git a/studio/pages/vercel/integrate.tsx b/studio/pages/vercel/integrate.tsx
index 93150b6eec1..db220547025 100644
--- a/studio/pages/vercel/integrate.tsx
+++ b/studio/pages/vercel/integrate.tsx
@@ -218,7 +218,7 @@ const ProjectLinksEmptyState = () => (
       then close this window and retry adding integration.
     </p>
     <Link href="https://supabase.com/dashboard">
-      <a className="text-brand-900">
+      <a className="text-brand">
         Start a new Supabase project<span aria-hidden="true"> &rarr;</span>
       </a>
     </Link>
diff --git a/studio/public/img/icons/vercel-icon.svg b/studio/public/img/icons/vercel-icon.svg
new file mode 100644
index 00000000000..ff2881f0c67
--- /dev/null
+++ b/studio/public/img/icons/vercel-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 512 512">
+  <path fill-rule="evenodd" d="M256,48,496,464H16Z" />
+</svg>
\ No newline at end of file
diff --git a/studio/state/app.ts b/studio/state/app.ts
new file mode 100644
index 00000000000..f6f7d9ab9a9
--- /dev/null
+++ b/studio/state/app.ts
@@ -0,0 +1,14 @@
+import { proxy, snapshot, useSnapshot } from 'valtio'
+
+export const appUiState = proxy({
+  showEnableBranchingModal: false,
+
+  setShowEnableBranchingModal: (value: boolean) => {
+    appUiState.showEnableBranchingModal = value
+  },
+})
+
+export const getAppUiStateSnapshot = () => snapshot(appUiState)
+
+export const useAppUiStateSnapshot = (options?: Parameters<typeof useSnapshot>[1]) =>
+  useSnapshot(appUiState, options)
diff --git a/studio/state/github-connection-config-panel.ts b/studio/state/github-connection-config-panel.ts
deleted file mode 100644
index 78feb1a3615..00000000000
--- a/studio/state/github-connection-config-panel.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { proxy, snapshot, useSnapshot } from 'valtio'
-
-export const githubConnectionConfigPanelState = proxy({
-  open: false as boolean,
-  setOpen: (open: boolean) => {
-    githubConnectionConfigPanelState.open = open
-  },
-  organizationIntegrationId: undefined as string | undefined,
-  setOrganizationIntegrationId: (organizationIntegrationId: string) => {
-    githubConnectionConfigPanelState.organizationIntegrationId = organizationIntegrationId
-  },
-})
-
-export const getGithubConnectionConfigPanelSnapshot = () =>
-  snapshot(githubConnectionConfigPanelState)
-
-export const useGithubConnectionConfigPanelSnapshot = (
-  options?: Parameters<typeof useSnapshot>[1]
-) => useSnapshot(githubConnectionConfigPanelState, options)
diff --git a/studio/state/sql-editor.ts b/studio/state/sql-editor.ts
index 49833b3d8f1..df3572c0a4f 100644
--- a/studio/state/sql-editor.ts
+++ b/studio/state/sql-editor.ts
@@ -1,9 +1,8 @@
-import { createContent } from 'data/content/content-create-mutation'
-import { Content } from 'data/content/content-query'
-import { updateContent } from 'data/content/content-update-mutation'
+import { UpsertContentPayload, upsertContent } from 'data/content/content-upsert-mutation'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
 import { debounce, memoize } from 'lodash'
 import { useMemo } from 'react'
+import { SqlSnippets } from 'types'
 import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 import { devtools, proxySet } from 'valtio/utils'
 
@@ -31,7 +30,6 @@ export const sqlEditorState = proxy({
     [key: string]: boolean
   },
 
-  needsCreating: proxySet<string>([]),
   needsSaving: proxySet<string>([]),
   savingStates: {} as {
     [key: string]: 'IDLE' | 'UPDATING' | 'UPDATING_FAILED'
@@ -64,7 +62,7 @@ export const sqlEditorState = proxy({
       sqlEditorState.addSnippet(snippet, projectRef)
     })
   },
-  addSnippet: (snippet: SqlSnippet, projectRef: string, isNew?: boolean) => {
+  addSnippet: (snippet: SqlSnippet, projectRef: string) => {
     if (snippet.id && !sqlEditorState.snippets[snippet.id]) {
       sqlEditorState.snippets[snippet.id] = {
         snippet,
@@ -80,9 +78,6 @@ export const sqlEditorState = proxy({
         sqlEditorState.orders[projectRef].unshift(snippet.id)
         sqlEditorState.reorderSnippets(projectRef)
       }
-      if (isNew) {
-        sqlEditorState.needsCreating.add(snippet.id)
-      }
     }
     sqlEditorState.loaded[projectRef] = true
   },
@@ -98,7 +93,6 @@ export const sqlEditorState = proxy({
     )
 
     sqlEditorState.needsSaving.delete(id)
-    sqlEditorState.needsCreating.delete(id)
   },
   setSplitSizes: (id: string, splitSizes: number[]) => {
     if (sqlEditorState.snippets[id]) {
@@ -174,68 +168,46 @@ export const useSnippets = (projectRef: string | undefined) => {
   }, [projectRef, snapshot.orders, snapshot.snippets])
 }
 
-async function update(id: string, projectRef: string, content: Partial<Content>) {
+async function upsert(id: string, projectRef: string, payload: UpsertContentPayload) {
   try {
     sqlEditorState.savingStates[id] = 'UPDATING'
-    await updateContent({ projectRef, id, content })
+    await upsertContent({
+      projectRef,
+      payload,
+    })
     sqlEditorState.savingStates[id] = 'IDLE'
   } catch (error) {
     sqlEditorState.savingStates[id] = 'UPDATING_FAILED'
   }
 }
 
-const memoizedUpdate = memoize((_id: string) => debounce(update, 1000))
-const debouncedUpdate = (id: string, projectRef: string, content: Partial<Content>) =>
-  memoizedUpdate(id)(id, projectRef, content)
+const memoizedUpdate = memoize((_id: string) => debounce(upsert, 1000))
+const debouncedUpdate = (id: string, projectRef: string, payload: UpsertContentPayload) =>
+  memoizedUpdate(id)(id, projectRef, payload)
 
 if (typeof window !== 'undefined') {
   devtools(sqlEditorState, { name: 'sqlEditorState', enabled: true })
 
-  subscribe(sqlEditorState.needsCreating, () => {
-    const state = getSqlEditorStateSnapshot()
-
-    state.needsCreating.forEach((id) => {
-      const snippet = state.snippets[id]
-
-      if (snippet) {
-        sqlEditorState.savingStates[id] = 'UPDATING'
-        createContent({
-          projectRef: snippet.projectRef,
-          payload: {
-            ...snippet.snippet,
-            type: 'sql',
-          },
-        })
-          .then(() => {
-            sqlEditorState.savingStates[id] = 'IDLE'
-            sqlEditorState.needsCreating.delete(id)
-          })
-          .catch(() => {
-            sqlEditorState.savingStates[id] = 'UPDATING_FAILED'
-          })
-      }
-    })
-  })
-
   subscribe(sqlEditorState.needsSaving, () => {
     const state = getSqlEditorStateSnapshot()
 
-    Array.from(state.needsSaving)
-      .filter((id) => !state.needsCreating.has(id))
-      .forEach((id) => {
-        const snippet = state.snippets[id]
+    Array.from(state.needsSaving).forEach((id) => {
+      const snippet = state.snippets[id]
 
-        if (snippet) {
-          debouncedUpdate(id, snippet.projectRef, {
-            content: { ...snippet.snippet.content, content_id: id },
-            type: 'sql',
-            id,
-            name: snippet.snippet.name,
-            description: snippet.snippet.description,
-          })
+      if (snippet) {
+        debouncedUpdate(id, snippet.projectRef, {
+          ...snippet.snippet,
+          name: snippet.snippet.name ?? 'Untitled',
+          description: snippet.snippet.description ?? '',
+          visibility: 'user',
+          project_id: snippet.snippet.project_id ?? 0,
+          content: { ...snippet.snippet.content, content_id: id } as SqlSnippets.Content,
+          type: 'sql',
+          id,
+        })
 
-          sqlEditorState.needsSaving.delete(id)
-        }
-      })
+        sqlEditorState.needsSaving.delete(id)
+      }
+    })
   })
 }
diff --git a/studio/state/vercel-integration-installation.ts b/studio/state/vercel-integration-installation.ts
deleted file mode 100644
index 737879f6fe1..00000000000
--- a/studio/state/vercel-integration-installation.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { proxy, snapshot, useSnapshot } from 'valtio'
-
-export const vercelIntegrationInstallationState = proxy({
-  selectedOrganizationSlug: '' as string,
-  setSelectedOrganizationSlug: (selectedOrganizationSlug: string) => {
-    vercelIntegrationInstallationState.selectedOrganizationSlug = selectedOrganizationSlug
-  },
-})
-
-export const getVercelIntegrationInstallationState = () =>
-  snapshot(vercelIntegrationInstallationState)
-
-export const useVercelIntegrationInstallationState = (
-  options?: Parameters<typeof useSnapshot>[1]
-) => useSnapshot(vercelIntegrationInstallationState, options)
diff --git a/studio/styles/code.scss b/studio/styles/code.scss
index e98880bd3bc..d679eb8e7c6 100644
--- a/studio/styles/code.scss
+++ b/studio/styles/code.scss
@@ -46,7 +46,7 @@
 
   .token.string {
     font-style: normal !important;
-    @apply text-brand-900 #{!important};
+    @apply text-brand #{!important};
   }
 
   .token.constant {
@@ -60,12 +60,12 @@
   }
 
   .token.number {
-    @apply text-brand-900 #{!important};
+    @apply text-brand #{!important};
   }
 
   .token.boolean,
   .token.doc-comment.class-name {
-    @apply text-brand-900;
+    @apply text-brand;
   }
 
   .codeBlock {
diff --git a/studio/styles/date-picker.scss b/studio/styles/date-picker.scss
index d43d5286e2a..491e5a5e1f8 100644
--- a/studio/styles/date-picker.scss
+++ b/studio/styles/date-picker.scss
@@ -73,11 +73,11 @@
 }
 
 .react-datepicker__day--in-range {
-  @apply bg-brand-800 text-scale-fixed-100 border-brand-800;
+  @apply bg-brand-300 text-scale-fixed-100 border-brand-300;
 }
 
 .react-datepicker__day--in-selecting-range {
-  @apply bg-brand-700 text-scale-fixed-100 border-brand-700;
+  @apply bg-brand-400 text-scale-fixed-100 border-brand-400;
 }
 
 .react-datepicker__day--selecting-range-start {
@@ -90,17 +90,17 @@
 
 .react-datepicker__day--selected,
 .react-datepicker__day--selected.react-datepicker__day--highlighted {
-  @apply bg-brand-800 text-white;
+  @apply bg-brand-300 text-white;
 }
 
 .react-datepicker__day--range-start {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--range-end {
-  @apply bg-brand-900 text-white hover:text-scale-700 hover:bg-white;
+  @apply bg-brand text-white hover:text-scale-700 hover:bg-white;
 }
 
 .react-datepicker__day--highlighted {
   @apply bg-brand-600 text-scale-1100;
-}
\ No newline at end of file
+}
diff --git a/studio/styles/grid.scss b/studio/styles/grid.scss
index 9ac86a2ddc3..831262f414a 100644
--- a/studio/styles/grid.scss
+++ b/studio/styles/grid.scss
@@ -174,8 +174,8 @@
   }
 
   [type='checkbox']:checked {
-    @apply dark:bg-brand-900;
-    @apply bg-brand-900;
+    @apply dark:bg-brand;
+    @apply bg-brand;
     border-color: transparent;
     background-size: 100% 100%;
     background-position: center;
@@ -186,7 +186,7 @@
     @apply cursor-pointer rounded border border-solid;
 
     @apply text-brand-600 border-scale-400 transition-all;
-    @apply hover:border-brand-900 focus:ring-brand-500 focus:outline-none;
+    @apply hover:border-brand focus:ring-brand-300 focus:outline-none;
 
     @apply dark:border-scale-500 dark:bg-transparent dark:text-white;
     @apply dark:hover:border-green-900;
@@ -388,7 +388,7 @@
 .sb-grid-select-editor {
   button {
     @apply border-none rounded-none shadow-none;
-    box-shadow: none !important
+    box-shadow: none !important;
   }
 }
 
@@ -491,7 +491,7 @@
 }
 
 .sb-grid-column-header__inner svg {
-  @apply border-brand-900 text-brand-900 dark:border-brand-900 dark:text-brand-900;
+  @apply border-brand text-brand dark:border-brand dark:text-brand;
 }
 
 /*
@@ -523,7 +523,7 @@
 }
 
 .sb-grid-select-cell__header__input {
-  /* @apply focus:ring-brand-500; */
+  /* @apply focus:ring-brand-300; */
   @apply border-scale-300;
 }
 
diff --git a/studio/styles/react-data-grid-logs.scss b/studio/styles/react-data-grid-logs.scss
index ede173ea6af..723030f95b7 100644
--- a/studio/styles/react-data-grid-logs.scss
+++ b/studio/styles/react-data-grid-logs.scss
@@ -15,7 +15,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand-900;
+      @apply border-r border-brand;
       border-right-width: 4px;
     }
 
@@ -43,7 +43,7 @@
 
   .rdg-row {
     &.rdg-row--focused {
-      @apply border-r border-brand-900;
+      @apply border-r border-brand;
       border-right-width: 4px;
     }
 
@@ -77,8 +77,8 @@
   background: linear-gradient(
     to right,
     var(--colors-scale2) 0%,
-    var(--colors-brand9) 25%,
-    var(--colors-brand4) 35%,
+    hsl(var(--brand-default)) 25%,
+    hsl(var(--brand-300)) 35%,
     var(--colors-scale2) 45%,
     var(--colors-scale3) 75%
   );
diff --git a/studio/styles/ui.scss b/studio/styles/ui.scss
index 2a122876c3d..afe63893d05 100644
--- a/studio/styles/ui.scss
+++ b/studio/styles/ui.scss
@@ -263,7 +263,7 @@
     }
 
     a:hover {
-      @apply text-brand-1000;
+      @apply text-brand-600;
     }
 
     p:last-child {
@@ -289,7 +289,7 @@
     }
 
     .is-highlighted {
-      @apply text-brand-900;
+      @apply text-brand;
     }
   }
   .codeblock-container + .codeblock-container {
@@ -299,7 +299,7 @@
 
 ::-moz-selection {
   /* Code for Firefox */
-  @apply bg-brand-900;
+  @apply bg-brand;
   color: #333 !important;
 }
 
@@ -408,7 +408,7 @@
 
 .form-field-markdown {
   a {
-    @apply text-brand-900 transition opacity-75 hover:opacity-100 underline;
+    @apply text-brand transition opacity-75 hover:opacity-100 underline;
   }
 }
 
diff --git a/studio/tests/unit/get-return-to-path.test.ts b/studio/tests/unit/get-return-to-path.test.ts
index 5b11a40ae13..f7951444c17 100644
--- a/studio/tests/unit/get-return-to-path.test.ts
+++ b/studio/tests/unit/get-return-to-path.test.ts
@@ -1,9 +1,8 @@
 import { getReturnToPath } from 'lib/gotrue'
-import { DEFAULT_HOME } from 'lib/constants'
 
 describe(`getReturnToPath`, () => {
   it(`returns to /projects when no fallback is provided`, () => {
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`returns to /custom when fallback is provided`, () => {
@@ -34,7 +33,7 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=https://google.com` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`does not allow XSS`, () => {
@@ -43,7 +42,7 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=javascript:alert(1)` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 
   it(`does not allow XSS with encoded characters`, () => {
@@ -52,6 +51,6 @@ describe(`getReturnToPath`, () => {
     // @ts-ignore
     window.location = { search: `?returnTo=javascript%3Aalert%281%29` }
 
-    expect(getReturnToPath()).toBe(DEFAULT_HOME)
+    expect(getReturnToPath()).toBe('/projects')
   })
 })
diff --git a/studio/types/base.ts b/studio/types/base.ts
index dd506a691b1..8c99c88ed41 100644
--- a/studio/types/base.ts
+++ b/studio/types/base.ts
@@ -34,6 +34,7 @@ export interface Project extends ProjectBase {
   lastDatabaseResizeAt?: string | null
   maxDatabasePreprovisionGb?: string | null
   parent_project_ref?: string
+  is_branch_enabled?: boolean
 
   /**
    * postgrestStatus is available on client side only.