diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 8ff54ba58c6..71029382f99 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -357,6 +357,11 @@ export const SocialLoginItems = [
     icon: '/docs/img/icons/discord-icon',
     url: '/guides/auth/social-login/auth-discord',
   },
+  {
+    name: 'Figma',
+    icon: '/docs/img/icons/figma-icon',
+    url: '/guides/auth/social-login/auth-figma',
+  },
   {
     name: 'Kakao',
     icon: '/docs/img/icons/kakao-icon',
diff --git a/apps/docs/data/authProviders.ts b/apps/docs/data/authProviders.ts
index 9694f1daf12..6a9a4b4d30c 100644
--- a/apps/docs/data/authProviders.ts
+++ b/apps/docs/data/authProviders.ts
@@ -49,6 +49,16 @@ const authProviders = [
     selfHosted: true,
     authType: 'social',
   },
+  {
+    name: 'Figma',
+    logo: '/docs/img/icons/figma-icon',
+    href: '/guides/auth/social-login/auth-figma',
+    official: true,
+    supporter: 'Supabase',
+    platform: true,
+    selfHosted: true,
+    authType: 'social',
+  },
   {
     name: 'GitHub',
     logo: '/docs/img/icons/github-icon',
diff --git a/apps/docs/pages/guides/ai/choosing-compute-addon.mdx b/apps/docs/pages/guides/ai/choosing-compute-addon.mdx
index 1a27b1e52cd..4ab4e13e808 100644
--- a/apps/docs/pages/guides/ai/choosing-compute-addon.mdx
+++ b/apps/docs/pages/guides/ai/choosing-compute-addon.mdx
@@ -4,29 +4,24 @@ export const TabPanel = Tabs.Panel
 
 export const meta = {
   id: 'ai-choosing-compute-addon',
-  title: 'Choosing Compute Add-on',
-  description: 'Choosing the right Compute Add-on for your workload.',
-  subtitle: 'Choosing the right Compute Add-on for your workload.',
+  title: 'Choosing your Compute Add-on',
+  description: 'Choosing the right Compute Add-on for your vector workload.',
+  subtitle: 'Choosing the right Compute Add-on for your vector workload.',
   sidebar_label: 'Choosing Compute Add-on',
 }
 
-This guide will help you choose the right Compute Add-on for your workload. We'll provide general guidance, as it is impossible to provide specific instructions for every possible use case. The goal is to give you a starting point from which you can make your own benchmarks and optimizations.
+You have two options for scaling your vector workload:
 
-Note that it is only useful for index searches, not for sequential scans. Sequential scans will result to significantly higher latencies and lower throughput, but will guarantee 100% precision and will not be RAM bound. Therefore it is possible to use a smaller plan for sequential scans.
+1. Increase the size of your database. This guide will help you choose the right size for your workload.
+2. Spread your workload across multiple databases. You can find more details about this approach in [Engineering for Scale](engineering-for-scale).
 
-For more information about engineering at scale, see our [Engineering for Scale](/docs/guides/ai/engineering-for-scale) guide.
+## Dimensionality
 
-## Simple workloads
+The number of dimensions in your embeddings is the most important factor in choosing the right Compute Add-on. In general, the lower the dimensionality the better the performance. We've provided guidance for some of the more common embedding dimensions below. For each benchmark, we used [Vecs](https://github.com/supabase/vecs) to create a collection, upload the embeddings to a single table, and create an `inner-product` index for the embedding column. We then ran a series of queries to measure the performance of different compute add-ons:
 
-We've run a set of benchmarks using
+### 1536 Dimensions
 
-- The [dbpedia-entities-openai-1M](https://huggingface.co/datasets/KShivendu/dbpedia-entities-openai-1M) dataset. This dataset contains 1,000,000 embeddings for text, with each embedding being 1536 dimensions made using OpenAI API.
-- The [gist-960-angular](http://corpus-texmex.irisa.fr/) dataset. This dataset contains 1,000,000 embeddings for images, with each embedding being 960 dimensions.
-- The [GloVe Reddit comments](https://nlp.stanford.edu/projects/glove/) dataset, which contains 1,623,397 embeddings for words, with each embedding being 512 dimensions.
-
-We used [Vecs](https://github.com/supabase/vecs) to create a collection, upload the embeddings to a single table, and create an `inner-product` index for the embedding column. We then ran a series of queries to measure the performance of different compute add-ons:
-
-### Results
+This benchmark uses the [dbpedia-entities-openai-1M](https://huggingface.co/datasets/KShivendu/dbpedia-entities-openai-1M) dataset, which contains 1,000,000 embeddings of text. Each embedding is 1536 dimensions created with the [OpenAI Embeddings API](https://platform.openai.com/docs/guides/embeddings).
 
 <Tabs
   scrollable
@@ -36,8 +31,6 @@ We used [Vecs](https://github.com/supabase/vecs) to create a collection, upload
 >
 <TabPanel id="dbpedia1536" label="OpenAI-1536, probes = 10">
 
-Emdeddings of 1536 dimensions by OpenAI for dbpedia dataset with 1,000,000 vectors.
-
 | Plan   | Vectors   | Lists | RPS  | Latency Mean | Latency p95 | RAM Usage          | RAM    |
 | ------ | --------- | ----- | ---- | ------------ | ----------- | ------------------ | ------ |
 | Free   | 20,000    | 40    | 135  | 0.372 sec    | 0.412 sec   | 1 GB + 200 Mb Swap | 1 GB   |
@@ -56,8 +49,6 @@ For 1,000,000 vectors 10 probes results to precision of 0.91. And for 500,000 ve
 </TabPanel>
 <TabPanel id="dbpedia1536_40" label="OpenAI-1536, probes = 40">
 
-Emdeddings of 1536 dimensions by OpenAI for dbpedia dataset with 1,000,000 vectors.
-
 | Plan   | Vectors   | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM    |
 | ------ | --------- | ----- | --- | ------------ | ----------- | --------- | ------ |
 | Free   | 20,000    | 40    | -   | -            | -           | -         | 1 GB   |
@@ -74,9 +65,32 @@ Emdeddings of 1536 dimensions by OpenAI for dbpedia dataset with 1,000,000 vecto
 For 1,000,000 vectors 40 probes results to precision of 0.98. Note that exact values may vary depending on the dataset and queries, we recommend to run benchmarks with your own data to get precise results. Use this table as a reference.
 
 </TabPanel>
-<TabPanel id="gist960" label="gist-960, probes = 10">
+</Tabs>
 
-Emdeddings of 960 dimensions from gist-960 dataset with 1,000,000 vectors.
+<div>
+  <img
+    alt="multi database"
+    className="dark:hidden"
+    src="/docs/img/ai/going-prod/size-to-rps--light.png"
+  />
+  <img
+    alt="multi database"
+    className="hidden dark:block"
+    src="/docs/img/ai/going-prod/size-to-rps--dark.png"
+  />
+</div>
+
+### 960 Dimensions
+
+This benchmark uses the [gist-960-angular](http://corpus-texmex.irisa.fr/) dataset, which contains 1,000,000 embeddings of images. Each embedding is 960 dimensions.
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="gist960"
+>
+<TabPanel id="gist960" label="gist-960, probes = 10">
 
 | Plan   | Vectors   | Lists | RPS  | Latency Mean | Latency p95 | RAM Usage          | RAM    |
 | ------ | --------- | ----- | ---- | ------------ | ----------- | ------------------ | ------ |
@@ -92,9 +106,19 @@ Emdeddings of 960 dimensions from gist-960 dataset with 1,000,000 vectors.
 | 16XL   | 1,000,000 | 1000  | 1345 | 0.072 sec    | 0.106 sec   | 17.5 GB            | 256 GB |
 
 </TabPanel>
-<TabPanel id="glove512" label="GloVe-512, probes = 10">
+</Tabs>
 
-Emdeddings of 512 dimensions from GloVe Reddit comments dataset with 1,623,397 vectors.
+### 512 Dimensions
+
+This benchmark uses the [GloVe Reddit comments](https://nlp.stanford.edu/projects/glove/) dataset, which contains 1,623,397 embeddings of text. Each embedding is 512 dimensions. Random vectors were generated for queries.
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="glove512"
+>
+<TabPanel id="glove512" label="GloVe-512, probes = 10">
 
 | Plan   | Vectors   | Lists | RPS  | Latency Mean | Latency p95 | RAM Usage          | RAM    |
 | ------ | --------- | ----- | ---- | ------------ | ----------- | ------------------ | ------ |
@@ -109,13 +133,9 @@ Emdeddings of 512 dimensions from GloVe Reddit comments dataset with 1,623,397 v
 | 12XL   | 1,623,397 | 1275  | 3700 | 0.020 sec    | 0.036 sec   | 26 GB              | 192 GB |
 | 16XL   | 1,623,397 | 1275  | 3700 | 0.025 sec    | 0.042 sec   | 29 GB              | 256 GB |
 
-Random vectors were generated for queries.
-
 </TabPanel>
 <TabPanel id="glove512_60" label="GloVe-512, probes = 60">
 
-Emdeddings of 512 dimensions from GloVe Reddit comments dataset with 1,623,397 vectors.
-
 | Plan   | Vectors   | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM    |
 | ------ | --------- | ----- | --- | ------------ | ----------- | --------- | ------ |
 | Free   | 100,000   | 100   | -   | -            | -           | -         | 1 GB   |
@@ -130,8 +150,6 @@ Emdeddings of 512 dimensions from GloVe Reddit comments dataset with 1,623,397 v
 | 12XL   | 1,623,397 | 1275  | 840 | 0.093 sec    | 0.124 sec   | 26 GB     | 192 GB |
 | 16XL   | 1,623,397 | 1275  | 940 | 0.084 sec    | 0.108 sec   | 29 GB     | 256 GB |
 
-Random vectors were generated for queries.
-
 </TabPanel>
 </Tabs>
 
@@ -141,7 +159,34 @@ It is possible to upload more vectors to a single table if Memory allows it (for
 
 </Admonition>
 
-## Methodology
+## Performance tips
+
+There are various ways to improve your pgvector performance. Here are some tips:
+
+### Pre-warming your database
+
+It's useful to execute a few thousand “warm-up” queries before going into production. This helps help with RAM utilization. This can also help to determine that you've selected the right instance size for your workload.
+
+### Increase the number of lists
+
+You can increase the Requests per Second by increasing the number of `lists`. This also has an important caveat: building the index takes longer with more lists.
+
+<div>
+  <img
+    alt="multi database"
+    className="dark:hidden"
+    src="/docs/img/ai/instance-type/lists-for-1m--light.png"
+  />
+  <img
+    alt="multi database"
+    className="hidden dark:block"
+    src="/docs/img/ai/instance-type/lists-for-1m--dark.png"
+  />
+</div>
+
+Check out more tips and the complete step-by-step guide in [Going to Production for AI applications](going-to-prod).
+
+## Benchmark Methodology
 
 We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikbern/ann-benchmarks) methodology. A Python test runner is responsible for uploading the data, creating the index, and running the queries. The pgvector engine is implemented using [vecs](https://github.com/supabase/vecs), a Python client for pgvector.
 
diff --git a/apps/docs/pages/guides/auth/social-login/auth-figma.mdx b/apps/docs/pages/guides/auth/social-login/auth-figma.mdx
new file mode 100644
index 00000000000..1b7ce0b5305
--- /dev/null
+++ b/apps/docs/pages/guides/auth/social-login/auth-figma.mdx
@@ -0,0 +1,77 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'auth-figma',
+  title: 'Login with Figma',
+  description: 'Add Figma OAuth to your Supabase project',
+}
+
+To enable Figma Auth for your project, you need to set up a Figma OAuth application and add the application credentials to your Supabase Dashboard.
+
+## Overview
+
+Setting up Figma logins for your application consists of 3 parts:
+
+- Create and configure a Figma App on the [Figma Developers page](https://www.figma.com/developers).
+- Add your Figma `client_id` and `client_secret` to your [Supabase Project](https://app.supabase.com).
+- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
+
+## Access the Figma Developers page
+
+- Go to the [Figma Developers page](https://www.figma.com/developers)
+- Click on `My apps` at the top right
+- Log in (if necessary)
+
+![Figma Developers page](/docs/img/guides/auth-figma/figma_developers_page.png)
+
+## Find your callback URL
+
+<SocialProviderSetup provider="Figma" />
+
+## Create a Figma OAuth app
+
+- Enter your `App name`, `Website URL` and upload your app logo
+- Click on `Add callback`
+- Add your `Callback URL`
+- Click on `Save`
+
+![Create Figma app](/docs/img/guides/auth-figma/figma_create_app.png)
+
+- Copy and save your newly-generated `Client ID`
+- Copy and save your newly-generated `Client Secret`
+
+![Get Figma app credentials](/docs/img/guides/auth-figma/figma_app_credentials.png)
+
+## Enter your Figma credentials into your Supabase Project
+
+<SocialProviderSettingsSupabase provider="Figma" />
+
+## Add login code to your client app
+
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `figma` as the `provider`:
+
+```js
+async function signInWithFigma() {
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'figma',
+  })
+}
+```
+
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+
+```js
+async function signout() {
+  const { error } = await supabase.auth.signOut()
+}
+```
+
+## Resources
+
+- [Supabase Account - Free Plan OK](https://supabase.com)
+- [Supabase JS Client](https://github.com/supabase/supabase-js)
+- [Figma Developers page](https://www.figma.com/developers)
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/public/img/ai/instance-type/lists-for-1m--dark.png b/apps/docs/public/img/ai/instance-type/lists-for-1m--dark.png
new file mode 100644
index 00000000000..713ae4f4459
Binary files /dev/null and b/apps/docs/public/img/ai/instance-type/lists-for-1m--dark.png differ
diff --git a/apps/docs/public/img/ai/instance-type/lists-for-1m--light.png b/apps/docs/public/img/ai/instance-type/lists-for-1m--light.png
new file mode 100644
index 00000000000..20356170933
Binary files /dev/null and b/apps/docs/public/img/ai/instance-type/lists-for-1m--light.png differ
diff --git a/apps/docs/public/img/guides/auth-figma/figma_app_credentials.png b/apps/docs/public/img/guides/auth-figma/figma_app_credentials.png
new file mode 100755
index 00000000000..e4d582ab9fb
Binary files /dev/null and b/apps/docs/public/img/guides/auth-figma/figma_app_credentials.png differ
diff --git a/apps/docs/public/img/guides/auth-figma/figma_create_app.png b/apps/docs/public/img/guides/auth-figma/figma_create_app.png
new file mode 100755
index 00000000000..7caeb2c0057
Binary files /dev/null and b/apps/docs/public/img/guides/auth-figma/figma_create_app.png differ
diff --git a/apps/docs/public/img/guides/auth-figma/figma_developers_page.png b/apps/docs/public/img/guides/auth-figma/figma_developers_page.png
new file mode 100755
index 00000000000..8ceee422d79
Binary files /dev/null and b/apps/docs/public/img/guides/auth-figma/figma_developers_page.png differ
diff --git a/apps/docs/public/img/icons/figma-icon.svg b/apps/docs/public/img/icons/figma-icon.svg
new file mode 100644
index 00000000000..38539ba64cd
--- /dev/null
+++ b/apps/docs/public/img/icons/figma-icon.svg
@@ -0,0 +1 @@
+<svg width="300" height="300" viewBox="-50 0 300 300" xmlns="http://www.w3.org/2000/svg"><style>.st0{fill:#0acf83}.st1{fill:#a259ff}.st2{fill:#f24e1e}.st3{fill:#ff7262}.st4{fill:#1abcfe}</style><path id="path0_fill" class="st0" d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z"/><path id="path1_fill" class="st1" d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z"/><path id="path1_fill_1_" class="st2" d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z"/><path id="path2_fill" class="st3" d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z"/><path id="path3_fill" class="st4" d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z"/></svg>
diff --git a/package-lock.json b/package-lock.json
index 53406a85595..b0c58cc3eca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18056,11 +18056,13 @@
       }
     },
     "node_modules/cmdk-supabase": {
-      "version": "0.2.2",
-      "license": "MIT",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cmdk-supabase/-/cmdk-supabase-1.0.7.tgz",
+      "integrity": "sha512-5Ts9dZTLSqNwCEFzps/dtNK6Q1baje1JuA+5qjEvtfkk+SGZG0S5D1uqxbAk7YQqF/ctGZHxe8O+0+vNPYMk2A==",
       "dependencies": {
-        "@radix-ui/react-dialog": "1.0.0",
+        "@radix-ui/react-dialog": "^1.0.4",
         "@radix-ui/react-id": "^0.0.6",
+        "@radix-ui/react-slot": "1.0.2",
         "command-score": "0.1.2",
         "use-sync-external-store": "^1.2.0"
       },
@@ -18069,112 +18071,10 @@
         "react-dom": "^17.0"
       }
     },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/primitive": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-context": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-dismissable-layer": "1.0.0",
-        "@radix-ui/react-focus-guards": "1.0.0",
-        "@radix-ui/react-focus-scope": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-portal": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-slot": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-escape-keydown": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
     "node_modules/cmdk-supabase/node_modules/@radix-ui/react-id": {
       "version": "0.0.6",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-0.0.6.tgz",
+      "integrity": "sha512-PzmraF34fYggsYvTIZVJ5S68WMp3aKUN3HkSmGnz4zn9zpRjkAbbg7Xn3ueQI3FQsLWKgyUfnpsmWFDndpcqYg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10"
       },
@@ -18182,119 +18082,6 @@
         "react": "^16.8 || ^17.0"
       }
     },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-presence": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-slot": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/react-remove-scroll": {
-      "version": "2.5.4",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "dev": true,
@@ -18437,7 +18224,8 @@
     },
     "node_modules/command-score": {
       "version": "0.1.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
+      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
     },
     "node_modules/commander": {
       "version": "6.2.1",
@@ -40809,7 +40597,7 @@
         "autoprefixer": "^10.4.14",
         "class-variance-authority": "^0.6.0",
         "clsx": "^1.2.1",
-        "cmdk-supabase": "^0.2.2",
+        "cmdk-supabase": "^1.0.7",
         "color": "^4.2.3",
         "colorjs.io": "^0.4.3",
         "common-tags": "^1.8.2",
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 88f5d9b0ef5..e53f54d332f 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -139,6 +139,13 @@ export {
   PopoverContent as PopoverContent_Shadcn_,
 } from './src/components/shadcn/ui/popover'
 
+export {
+  Accordion as Accordion_Shadcn_,
+  AccordionItem as AccordionItem_Shadcn_,
+  AccordionTrigger as AccordionTrigger_Shadcn_,
+  AccordionContent as AccordionContent_Shadcn_,
+} from './src/components/shadcn/ui/accordion'
+
 // links
 
 export * from './src/components/TextLink'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 207a450235d..59f0f58500e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -54,7 +54,7 @@
     "autoprefixer": "^10.4.14",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
-    "cmdk-supabase": "^0.2.2",
+    "cmdk-supabase": "^1.0.7",
     "color": "^4.2.3",
     "colorjs.io": "^0.4.3",
     "common-tags": "^1.8.2",
diff --git a/packages/ui/src/components/Dropdown/Dropdown.tsx b/packages/ui/src/components/Dropdown/Dropdown.tsx
index 9e9d688f687..a1c1a3b25fe 100644
--- a/packages/ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/ui/src/components/Dropdown/Dropdown.tsx
@@ -103,7 +103,7 @@ export function Item({ icon, className, ...props }: ItemProps) {
       {...props}
     >
       {icon && icon}
-      <span>{props.children}</span>
+      <span className="w-full">{props.children}</span>
     </RadixDropdown.Item>
   )
 }
diff --git a/packages/ui/src/components/shadcn/ui/accordion.tsx b/packages/ui/src/components/shadcn/ui/accordion.tsx
index c5950299253..c5d5ec3dc15 100644
--- a/packages/ui/src/components/shadcn/ui/accordion.tsx
+++ b/packages/ui/src/components/shadcn/ui/accordion.tsx
@@ -16,8 +16,8 @@ AccordionItem.displayName = 'AccordionItem'
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & { hideIcon?: boolean }
+>(({ className, children, hideIcon, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+      {!hideIcon && <ChevronDown className="h-4 w-4 transition-transform duration-200" />}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
diff --git a/packages/ui/src/components/shadcn/ui/command.tsx b/packages/ui/src/components/shadcn/ui/command.tsx
index 24f15e9e715..2f57d3bd0d7 100644
--- a/packages/ui/src/components/shadcn/ui/command.tsx
+++ b/packages/ui/src/components/shadcn/ui/command.tsx
@@ -70,8 +70,12 @@ CommandList.displayName = CommandPrimitive.List.displayName
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn('py-6 text-center text-sm', className)}
+    {...props}
+  />
 ))
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName
diff --git a/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx b/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx
index 93eb4f2b669..e4141e48221 100644
--- a/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/shadcn/ui/dropdown-menu.tsx
@@ -153,7 +153,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
 ))
diff --git a/spec/supabase_dart_v1.yml b/spec/supabase_dart_v1.yml
index 46bf3067102..70a69f18086 100644
--- a/spec/supabase_dart_v1.yml
+++ b/spec/supabase_dart_v1.yml
@@ -1768,13 +1768,22 @@ functions:
       - id: conditional-chaining
         name: Conditional Chaining
         description: |
-          Filters can be built up one step at a time and then executed. For example:
+          Filters can be built up one step at a time and then executed as shown in the example code.
         code: |
           ```dart
-          final data = await supabase
-            .from('users')
-            .select()
-            .eq('address->postcode', 90210);
+          final filterByName = null;
+          final filterPopLow = 1000;
+          final filterPopHigh = 10000;
+
+          var query = supabase
+            .from('cities')
+            .select('name, country_id');
+
+          if (filterByName != null)  { query = query.eq('name', filterByName); }
+          if (filterPopLow != null)  { query = query.gte('population', filterPopLow); }
+          if (filterPopHigh != null) { query = query.lt('population', filterPopHigh); }
+
+          final data = await query;
           ```
       - id: filter-by-value-within-json-column
         name: Filter by values within a JSON column
diff --git a/studio/components/interfaces/Account/AccessTokenList.tsx b/studio/components/interfaces/Account/AccessTokenList.tsx
index 5746aab2995..9b76f1c93b0 100644
--- a/studio/components/interfaces/Account/AccessTokenList.tsx
+++ b/studio/components/interfaces/Account/AccessTokenList.tsx
@@ -25,7 +25,7 @@ const AccessTokenList = observer(() => {
 
   return (
     <>
-      <div className="max-w-7xl">
+      <div>
         <Table
           head={[
             <Table.th key="header-token">Token</Table.th>,
diff --git a/studio/components/interfaces/App/AppBannerWrapper.tsx b/studio/components/interfaces/App/AppBannerWrapper.tsx
index 3f3faa61251..581ca0c6669 100644
--- a/studio/components/interfaces/App/AppBannerWrapper.tsx
+++ b/studio/components/interfaces/App/AppBannerWrapper.tsx
@@ -1,26 +1,12 @@
-import { FC } from 'react'
-import Link from 'next/link'
+import IncidentBanner from 'components/layouts/AppLayout/IncidentBanner'
 import { useFlag } from 'hooks'
-import { IconExternalLink } from 'ui'
+import { PropsWithChildren } from 'react'
 
-const AppBannerWrapper: FC = ({ children }) => {
+const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
   const ongoingIncident = useFlag('ongoingIncident')
-
   return (
     <div className="min-h-full flex flex-col">
-      {ongoingIncident && (
-        <Link href="https://status.supabase.com">
-          <a target="_blank" rel="noreferrer">
-            <div className="flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 text-scale-400 transition hover:bg-green-1000 dark:text-scale-1200">
-              <p className="text-sm font-medium">
-                We are currently investigating a technical issue, follow status.supabase.com for
-                updates
-              </p>
-              <IconExternalLink size={16} strokeWidth={2} />
-            </div>
-          </a>
-        </Link>
-      )}
+      {ongoingIncident && <IncidentBanner />}
 
       {children}
     </div>
diff --git a/studio/components/interfaces/App/RouteValidationWrapper.tsx b/studio/components/interfaces/App/RouteValidationWrapper.tsx
index aacae694dc3..9fd0b0c8cbf 100644
--- a/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -4,16 +4,17 @@ import { PropsWithChildren, useEffect } from 'react'
 
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useProjectsQuery } from 'data/projects/projects-query'
-import { useStore } from 'hooks'
+import { useFlag, useStore } from 'hooks'
 import useLatest from 'hooks/misc/useLatest'
+import { useParams } from 'common'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 // Ideally these could all be within a _middleware when we use Next 12
 const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
   const { ui } = useStore()
-
   const router = useRouter()
-  const projectRef = router.query.ref
-  const orgSlug = router.query.slug
+  const { ref, slug } = useParams()
+  const navLayoutV2 = useFlag('navigationLayoutV2')
 
   /**
    * Array of urls/routes that should be ignored
@@ -43,14 +44,14 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
     // check if current route is excempted from route validation check
     if (isExceptUrl()) return
 
-    if (orgsInitialized && orgSlug) {
+    if (orgsInitialized && slug) {
       // Check validity of organization that user is trying to access
       const organizations = organizationsRef.current ?? []
-      const isValidOrg = organizations.some((org) => org.slug === orgSlug)
+      const isValidOrg = organizations.some((org) => org.slug === slug)
 
       if (!isValidOrg) {
         ui.setNotification({ category: 'error', message: 'This organization does not exist' })
-        router.push('/projects')
+        router.push(navLayoutV2 ? `/org/${organizations[0].slug}` : '/projects')
         return
       }
     }
@@ -63,19 +64,43 @@ const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
     // check if current route is excempted from route validation check
     if (isExceptUrl()) return
 
-    if (projectsInitialized && projectRef) {
+    if (projectsInitialized && ref) {
       // Check validity of project that the user is trying to access
       const projects = projectsRef.current ?? []
-      const isValidProject = projects.some((project) => project.ref === projectRef)
+      const isValidProject = projects.some((project) => project.ref === ref)
 
       if (!isValidProject) {
         ui.setNotification({ category: 'error', message: 'This project does not exist' })
-        router.push('/projects')
+        router.push(navLayoutV2 ? `/org/${organizations?.[0].slug}` : '/projects')
         return
       }
     }
   }, [projectsInitialized])
 
+  useEffect(() => {
+    if (orgsInitialized && slug) {
+      // Save organization slug to local storage
+      const organizations = organizationsRef.current ?? []
+      const organization = organizations.find((org) => org.slug === slug)
+      if (organization) {
+        localStorage.setItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION, organization.slug)
+      }
+    }
+  }, [slug, orgsInitialized])
+
+  useEffect(() => {
+    if (projectsInitialized && ref) {
+      // Save organization slug to local storage
+      const projects = projectsRef.current ?? []
+      const project = projects.find((project) => project.ref === ref)
+      const organizationId = project?.organization_id
+      const organization = organizations?.find((organization) => organization.id === organizationId)
+      if (organization) {
+        localStorage.setItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION, organization.slug)
+      }
+    }
+  }, [ref, projectsInitialized])
+
   return <>{children}</>
 }
 
diff --git a/studio/components/interfaces/Auth/Auth.types.ts b/studio/components/interfaces/Auth/Auth.types.ts
index 55b756c31bd..49973dde46b 100644
--- a/studio/components/interfaces/Auth/Auth.types.ts
+++ b/studio/components/interfaces/Auth/Auth.types.ts
@@ -30,6 +30,10 @@ export interface AuthConfig {
   EXTERNAL_FACEBOOK_CLIENT_ID: string | null
   EXTERNAL_FACEBOOK_SECRET: string | null
 
+  EXTERNAL_FIGMA_ENABLED: boolean
+  EXTERNAL_FIGMA_CLIENT_ID: string | null
+  EXTERNAL_FIGMA_SECRET: string | null
+
   EXTERNAL_GITHUB_ENABLED: false
   EXTERNAL_GITHUB_CLIENT_ID: string | null
   EXTERNAL_GITHUB_SECRET: string | null
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index 20bf8488a3a..ad3689be4f9 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -24,7 +24,7 @@ const ProjectCard = ({ project, rewriteHref }: ProjectCardProps) => {
   const isRestoring = project.status === PROJECT_STATUS.RESTORING
 
   return (
-    <li className="col-span-1">
+    <li className="col-span-1 list-none">
       <CardButton
         linkHref={rewriteHref ? rewriteHref : `/project/${projectRef}`}
         title={
diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index 73b69322234..00489485bea 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from 'react'
 import { Collapsible, Form, IconChevronRight, Input, Toggle } from 'ui'
 
 import { useParams } from 'common/hooks'
+import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
 import {
   FormActions,
   FormPanel,
@@ -18,9 +19,8 @@ import { invalidateOrganizationsQuery } from 'data/organizations/organizations-q
 import { useCheckPermissions, useFlag, useSelectedOrganization, useStore } from 'hooks'
 import { isResponseOk, patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import OrganizationDeletePanel from './OrganizationDeletePanel'
-import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
 import { Organization } from 'types'
+import OrganizationDeletePanel from './OrganizationDeletePanel'
 
 const GeneralSettings = () => {
   const queryClient = useQueryClient()
diff --git a/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
index 5e81d11cadc..ddd6c3498f2 100644
--- a/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
+++ b/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
@@ -82,7 +82,7 @@ const InfrastructureInfo = () => {
                   label="Current version"
                   actions={[
                     isOnLatestVersion && (
-                      <Tooltip.Root delayDuration={0}>
+                      <Tooltip.Root key="tooltip-latest" delayDuration={0}>
                         <Tooltip.Trigger>
                           <Badge color="green" className="mr-1">
                             Latest
diff --git a/studio/components/layouts/AccountLayout/AccountLayout.tsx b/studio/components/layouts/AccountLayout/AccountLayout.tsx
index bf3734d64af..7efdbaa5e11 100644
--- a/studio/components/layouts/AccountLayout/AccountLayout.tsx
+++ b/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -8,6 +8,7 @@ import { useSignOut } from 'lib/auth'
 import { IS_PLATFORM } from 'lib/constants'
 import { SidebarSection } from './AccountLayout.types'
 import WithSidebar from './WithSidebar'
+import SettingsLayout from '../SettingsLayout/SettingsLayout'
 
 export interface AccountLayoutProps {
   title: string
@@ -23,12 +24,12 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
   const selectedOrganization = useSelectedOrganization()
 
   const ongoingIncident = useFlag('ongoingIncident')
+  const navLayoutV2 = useFlag('navigationLayoutV2')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
 
   const signOut = useSignOut()
   const onClickLogout = async () => {
     await signOut()
-
     await router.push('/sign-in')
   }
 
@@ -126,6 +127,10 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
       : []),
   ]
 
+  if (navLayoutV2) {
+    return <SettingsLayout>{children}</SettingsLayout>
+  }
+
   return (
     <>
       <Head>
@@ -137,7 +142,12 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
           style={{ height: maxHeight, maxHeight }}
           className="flex flex-col flex-1 w-full overflow-y-auto"
         >
-          <WithSidebar title={title} breadcrumbs={breadcrumbs} sections={sectionsWithHeaders}>
+          <WithSidebar
+            hideSidebar={navLayoutV2}
+            title={title}
+            breadcrumbs={breadcrumbs}
+            sections={sectionsWithHeaders}
+          >
             {children}
           </WithSidebar>
         </main>
diff --git a/studio/components/layouts/AccountLayout/WithSidebar.tsx b/studio/components/layouts/AccountLayout/WithSidebar.tsx
index 4413ab6a3cb..cdf48e39a65 100644
--- a/studio/components/layouts/AccountLayout/WithSidebar.tsx
+++ b/studio/components/layouts/AccountLayout/WithSidebar.tsx
@@ -1,12 +1,12 @@
+import { useFlag } from 'hooks'
+import { isUndefined } from 'lodash'
 import Link from 'next/link'
 import { FC, ReactNode } from 'react'
-import { isUndefined } from 'lodash'
-import { Menu, IconArrowUpRight, Badge, IconLogOut } from 'ui'
-import { useFlag } from 'hooks'
+import { Badge, IconArrowUpRight, IconLogOut, Menu } from 'ui'
 import LayoutHeader from '../ProjectLayout/LayoutHeader'
 import { SidebarLink, SidebarSection } from './AccountLayout.types'
 
-interface Props {
+interface WithSidebarProps {
   title: string
   breadcrumbs: any[]
   sections: SidebarSection[]
@@ -27,7 +27,7 @@ The information hierarchy for WithSidebar is:
     SidebarItem
       SidebarLink
 */
-const WithSidebar: FC<Props> = ({
+const WithSidebar = ({
   title,
   header,
   breadcrumbs = [],
@@ -37,9 +37,10 @@ const WithSidebar: FC<Props> = ({
   subitemsParentKey,
   hideSidebar = false,
   customSidebarContent,
-}) => {
+}: WithSidebarProps) => {
   const noContent = !sections && !customSidebarContent
   const ongoingIncident = useFlag('ongoingIncident')
+  const navLayoutV2 = useFlag('navigationLayoutV2')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
 
   return (
@@ -89,7 +90,7 @@ const WithSidebar: FC<Props> = ({
         </div>
       )}
       <div className="flex flex-1 flex-col">
-        <LayoutHeader breadcrumbs={breadcrumbs} />
+        {!navLayoutV2 && <LayoutHeader breadcrumbs={breadcrumbs} />}
         <div className="flex-1 flex-grow overflow-auto">{children}</div>
       </div>
     </div>
diff --git a/studio/components/layouts/AppLayout/AppHeader.tsx b/studio/components/layouts/AppLayout/AppHeader.tsx
new file mode 100644
index 00000000000..5ea83c6e56a
--- /dev/null
+++ b/studio/components/layouts/AppLayout/AppHeader.tsx
@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import { useParams } from 'common'
+import { useSelectedOrganization } from 'hooks'
+import FeedbackDropdown from '../ProjectLayout/LayoutHeader/FeedbackDropdown'
+import HelpPopover from '../ProjectLayout/LayoutHeader/HelpPopover'
+import NotificationsPopover from '../ProjectLayout/LayoutHeader/NotificationsPopover'
+import OrganizationDropdown from './OrganizationDropdown'
+import ProjectDropdown from './ProjectDropdown'
+import SettingsButton from './SettingsButton'
+import UserSettingsDropdown from './UserSettingsDropdown'
+
+const AppHeader = () => {
+  const router = useRouter()
+  const { ref } = useParams()
+  const organization = useSelectedOrganization()
+
+  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">
+        <Link href={organization !== undefined ? `/org/${organization?.slug}` : '/'}>
+          <a className="block">
+            <img
+              src={`${router.basePath}/img/supabase-logo.svg`}
+              alt="Supabase"
+              className="mx-auto h-[40px] w-6 cursor-pointer rounded"
+            />
+          </a>
+        </Link>
+        <OrganizationDropdown />
+        {ref !== undefined && <ProjectDropdown />}
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          <FeedbackDropdown alt />
+          <NotificationsPopover alt />
+          <HelpPopover alt />
+          <SettingsButton />
+        </div>
+        <div className="flex items-center gap-3">
+          <UserSettingsDropdown />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AppHeader
diff --git a/studio/components/layouts/AppLayout/AppLayout.tsx b/studio/components/layouts/AppLayout/AppLayout.tsx
new file mode 100644
index 00000000000..5abf9b3a826
--- /dev/null
+++ b/studio/components/layouts/AppLayout/AppLayout.tsx
@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react'
+
+import AppHeader from './AppHeader'
+import { useFlag } from 'hooks'
+
+const AppLayout = ({ children }: PropsWithChildren<{}>) => {
+  const navLayoutV2 = useFlag('navigationLayoutV2')
+  const ongoingIncident = useFlag('ongoingIncident')
+
+  const appHeaderHeight = navLayoutV2 ? 49 : 0
+  const incidentBannerHeight = 44
+
+  return (
+    <div>
+      {navLayoutV2 && <AppHeader />}
+      <div
+        style={{
+          height: ongoingIncident
+            ? `calc(100vh - ${incidentBannerHeight}px - ${appHeaderHeight}px)`
+            : `calc(100vh - ${appHeaderHeight}px)`,
+          maxHeight: ongoingIncident
+            ? `calc(100vh - ${incidentBannerHeight}px - ${appHeaderHeight}px)`
+            : `calc(100vh - ${appHeaderHeight}px)`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default AppLayout
diff --git a/studio/components/layouts/AppLayout/IncidentBanner.tsx b/studio/components/layouts/AppLayout/IncidentBanner.tsx
new file mode 100644
index 00000000000..4004c1922cb
--- /dev/null
+++ b/studio/components/layouts/AppLayout/IncidentBanner.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import { IconExternalLink } from 'ui'
+
+const IncidentBanner = () => {
+  return (
+    <Link href="https://status.supabase.com">
+      <a target="_blank" rel="noreferrer">
+        <div className="flex cursor-pointer items-center justify-center space-x-2 bg-green-900 py-3 text-scale-400 transition hover:bg-green-1000 dark:text-scale-1200">
+          <p className="text-sm font-medium">
+            We are currently investigating a technical issue, follow status.supabase.com for updates
+          </p>
+          <IconExternalLink size={16} strokeWidth={2} />
+        </div>
+      </a>
+    </Link>
+  )
+}
+
+export default IncidentBanner
diff --git a/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
new file mode 100644
index 00000000000..035e4073307
--- /dev/null
+++ b/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
@@ -0,0 +1,129 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useRef, useState } from 'react'
+import {
+  Badge,
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  IconCheck,
+  IconCode,
+  IconPlus,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+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()
+
+  const slug = selectedOrganization?.slug
+  const orgName = selectedOrganization?.name
+  const isOrgBilling = !!selectedOrganization?.subscription_id
+  const { data: subscription, isSuccess } = useOrgSubscriptionQuery(
+    { orgSlug: slug },
+    { enabled: isOrgBilling }
+  )
+
+  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>
+
+      <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} />}
+          />
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_
+          className="p-0"
+          side="bottom"
+          align="start"
+          style={{ marginLeft: `-${popoverOffset}px` }}
+        >
+          <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)
+                    : router.pathname.includes('[ref]/settings')
+                    ? `/org/${org.slug}/general`
+                    : `/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>
+                  )
+                })}
+              </CommandGroup_Shadcn_>
+              <CommandGroup_Shadcn_ className="border-t">
+                <Link passHref href={orgCreationV2 ? `/new-with-subscription` : `/new`}>
+                  <CommandItem_Shadcn_
+                    asChild
+                    className="cursor-pointer flex items-center space-x-2 w-full"
+                    onSelect={(e) => {
+                      setOpen(false)
+                      router.push(orgCreationV2 ? `/new-with-subscription` : `/new`)
+                    }}
+                    onClick={() => setOpen(false)}
+                  >
+                    <a>
+                      <IconPlus size={14} strokeWidth={1.5} />
+                      <p>New organization</p>
+                    </a>
+                  </CommandItem_Shadcn_>
+                </Link>
+              </CommandGroup_Shadcn_>
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </div>
+  )
+}
+
+export default OrganizationDropdown
diff --git a/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/studio/components/layouts/AppLayout/ProjectDropdown.tsx
new file mode 100644
index 00000000000..9a882441d23
--- /dev/null
+++ b/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -0,0 +1,200 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { ParsedUrlQuery } from 'querystring'
+import { useRef, useState } from 'react'
+import {
+  Badge,
+  Button,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  Command_Shadcn_,
+  IconCheck,
+  IconCode,
+  IconPlus,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
+
+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 { 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
+// unique to a project e.g. '/project/projectRef/editor/tableId'
+// Right now, I'm gonna assume that any router query after the projectId,
+// is a unique project id/marker so we'll redirect the user to the
+// highest common route with just projectRef in the router queries.
+
+export const sanitizeRoute = (route: string, routerQueries: ParsedUrlQuery) => {
+  const queryArray = Object.entries(routerQueries)
+
+  if (queryArray.length > 1) {
+    // [Joshen] Ideally we shouldn't use hard coded numbers, but temp workaround
+    // for storage bucket route since its longer
+    const isStorageBucketRoute = 'bucketId' in routerQueries
+    return route
+      .split('/')
+      .slice(0, isStorageBucketRoute ? 5 : 4)
+      .join('/')
+  } else {
+    return route
+  }
+}
+
+const ProjectLink = ({
+  project,
+  organization,
+  setOpen,
+}: {
+  project: Project
+  organization?: Organization
+  setOpen: (value: boolean) => void
+}) => {
+  const router = useRouter()
+  const { ref } = useParams()
+  const sanitizedRoute = sanitizeRoute(router.route, router.query)
+  const isOrgBilling = !!organization?.subscription_id
+
+  // [Joshen] Temp while we're interim between v1 and v2 billing
+  let href = sanitizedRoute?.replace('[ref]', project.ref) ?? `/project/${project.ref}`
+  if (href.endsWith('settings/addons') && !isOrgBilling) {
+    href = href.replace('settings/addons', 'settings/billing/subscription')
+  } else if (href.endsWith('settings/billing/subscription') && isOrgBilling) {
+    href = href.replace('settings/billing/subscription', 'settings/addons')
+  } else if (href.endsWith('settings/infrastructure') && !isOrgBilling) {
+    href = href.replace('settings/infrastructure', 'settings/billing/usage')
+  } else if (href.endsWith('settings/billing/usage') && !isOrgBilling) {
+    href = href.replace('settings/billing/usage', 'settings/infrastructure')
+  }
+
+  return (
+    <Link passHref href={href}>
+      <CommandItem_Shadcn_
+        asChild
+        key={project.ref}
+        value={project.name}
+        className="cursor-pointer w-full flex items-center justify-between"
+        onSelect={() => {
+          router.push(href)
+          setOpen(false)
+        }}
+        onClick={() => setOpen(false)}
+      >
+        <a>
+          {project.name}
+          {project.ref === ref && <IconCheck />}
+        </a>
+      </CommandItem_Shadcn_>
+    </Link>
+  )
+}
+
+const ProjectDropdown = () => {
+  const router = useRouter()
+  const { ref } = useParams()
+  const projectDetails = useSelectedProject()
+  const selectedOrganization = useSelectedOrganization()
+  const projectNameRef = useRef<HTMLAnchorElement>(null)
+  const { data: allProjects, isLoading: isLoadingProjects } = useProjectsQuery()
+
+  const isOrgBilling = !!selectedOrganization?.subscription_id
+  const { data: subscription, isSuccess } = useProjectSubscriptionV2Query(
+    { projectRef: ref },
+    { enabled: !isOrgBilling }
+  )
+  const projects = allProjects
+    ?.filter((x) => x.status !== PROJECT_STATUS.INACTIVE)
+    .filter((x) => x.organization_id === selectedOrganization?.id)
+    .sort((a, b) => a.name.localeCompare(b.name))
+  const selectedProject = 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/${selectedProject?.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>
+
+      <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} />}
+          />
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_
+          className="p-0"
+          side="bottom"
+          align="start"
+          style={{ marginLeft: `-${popoverOffset}px` }}
+        >
+          <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}
+                  />
+                ))}
+              </CommandGroup_Shadcn_>
+              <CommandGroup_Shadcn_ className="border-t">
+                <Link
+                  passHref
+                  href={`/new/${selectedOrganization?.slug}`}
+                  onClick={() => {
+                    setOpen(false)
+                  }}
+                >
+                  <CommandItem_Shadcn_
+                    asChild
+                    className="cursor-pointer flex items-center space-x-2 w-full"
+                    onSelect={() => {
+                      setOpen(false)
+                      router.push(`/new/${selectedOrganization?.slug}`)
+                    }}
+                    onClick={() => setOpen(false)}
+                  >
+                    <a>
+                      <IconPlus size={14} strokeWidth={1.5} />
+                      <p>New project</p>
+                    </a>
+                  </CommandItem_Shadcn_>
+                </Link>
+              </CommandGroup_Shadcn_>
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </div>
+  ) : (
+    <Button type="text">
+      <span className="text-sm">{selectedProject?.name}</span>
+    </Button>
+  )
+}
+
+export default ProjectDropdown
diff --git a/studio/components/layouts/AppLayout/SettingsButton.tsx b/studio/components/layouts/AppLayout/SettingsButton.tsx
new file mode 100644
index 00000000000..7576d779903
--- /dev/null
+++ b/studio/components/layouts/AppLayout/SettingsButton.tsx
@@ -0,0 +1,36 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { useSelectedOrganization } from 'hooks'
+import Link from 'next/link'
+import { IconSettings } from 'ui'
+
+const SettingsButton = () => {
+  const selectedOrganization = useSelectedOrganization()
+  const slug = selectedOrganization?.slug
+
+  return (
+    <Tooltip.Root delayDuration={0}>
+      <Link href={slug ? `/org/${slug}/general` : '/'} passHref>
+        <Tooltip.Trigger type="button" asChild className="px-1">
+          <a>
+            <IconSettings size={18} strokeWidth={1.5} className="text-scale-1100" />
+          </a>
+        </Tooltip.Trigger>
+      </Link>
+      <Tooltip.Portal>
+        <Tooltip.Content side="bottom">
+          <Tooltip.Arrow className="radix-tooltip-arrow" />
+          <div
+            className={[
+              'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+              'border border-scale-200',
+            ].join(' ')}
+          >
+            <span className="text-xs text-scale-1200">Settings</span>
+          </div>
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  )
+}
+
+export default SettingsButton
diff --git a/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx b/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
new file mode 100644
index 00000000000..b1e37ff0ef9
--- /dev/null
+++ b/studio/components/layouts/AppLayout/UserSettingsDropdown.tsx
@@ -0,0 +1,120 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import {
+  DropdownMenuCheckboxItem_Shadcn_,
+  DropdownMenuContent_Shadcn_,
+  DropdownMenuGroup_Shadcn_,
+  DropdownMenuItem_Shadcn_,
+  DropdownMenuLabel_Shadcn_,
+  DropdownMenuRadioGroup_Shadcn_,
+  DropdownMenuRadioItem_Shadcn_,
+  DropdownMenuSeparator_Shadcn_,
+  DropdownMenuShortcut_Shadcn_,
+  DropdownMenuSubContent_Shadcn_,
+  DropdownMenuSubTrigger_Shadcn_,
+  DropdownMenuSub_Shadcn_,
+  DropdownMenuTrigger_Shadcn_,
+  DropdownMenu_Shadcn_,
+  IconCheck,
+  IconUser,
+  useCommandMenu,
+} from 'ui'
+
+import { useTheme } from 'common'
+import { useSignOut } from 'lib/auth'
+import { useProfile } from 'lib/profile'
+import { useState } from 'react'
+
+const UserSettingsDropdown = () => {
+  const signOut = useSignOut()
+  const router = useRouter()
+  const [open, setOpen] = useState(false)
+  const { profile } = useProfile()
+  const { setIsOpen: setCommandMenuOpen } = useCommandMenu()
+  const { isDarkMode, toggleTheme } = useTheme()
+
+  const onClickLogout = async () => {
+    await signOut()
+    await router.push('/sign-in')
+  }
+
+  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_>
+      <DropdownMenuContent_Shadcn_ align="end" className="w-60">
+        <DropdownMenuGroup_Shadcn_>
+          <div key="profile" className="px-2 py-1.5">
+            <p className="text-sm text-scale-1200">
+              {profile?.first_name} {profile?.last_name}
+            </p>
+            <p className="text-sm text-scale-1000 truncate">{profile?.primary_email}</p>
+          </div>
+
+          <DropdownMenuSeparator_Shadcn_ />
+          <Link passHref href="/account/me">
+            <DropdownMenuItem_Shadcn_
+              className="cursor-pointer"
+              onSelect={() => {
+                router.push('/account/me')
+              }}
+              onClick={() => setOpen(false)}
+              asChild
+            >
+              <a>Preferences</a>
+            </DropdownMenuItem_Shadcn_>
+          </Link>
+          <Link passHref href="/account/tokens">
+            <DropdownMenuItem_Shadcn_
+              className="cursor-pointer"
+              onSelect={() => {
+                router.push('/account/tokens')
+              }}
+              onClick={() => setOpen(false)}
+              asChild
+            >
+              <a>Access tokens</a>
+            </DropdownMenuItem_Shadcn_>
+          </Link>
+          <DropdownMenuSeparator_Shadcn_ />
+          <DropdownMenuItem_Shadcn_
+            className="cursor-pointer"
+            onSelect={() => {
+              setOpen(false)
+              setCommandMenuOpen(true)
+            }}
+          >
+            <span>Command menu</span>
+            <DropdownMenuShortcut_Shadcn_>⌘K</DropdownMenuShortcut_Shadcn_>
+          </DropdownMenuItem_Shadcn_>
+          <DropdownMenuSeparator_Shadcn_ />
+          <DropdownMenuLabel_Shadcn_>Theme</DropdownMenuLabel_Shadcn_>
+          <DropdownMenuRadioGroup_Shadcn_
+            value={isDarkMode ? 'dark' : 'light'}
+            onValueChange={(x) => {
+              const dark = x === 'dark'
+              toggleTheme(Boolean(dark))
+            }}
+          >
+            <DropdownMenuRadioItem_Shadcn_ value={'dark'}>Dark</DropdownMenuRadioItem_Shadcn_>
+            <DropdownMenuRadioItem_Shadcn_ value={'light'}>Light</DropdownMenuRadioItem_Shadcn_>
+          </DropdownMenuRadioGroup_Shadcn_>
+
+          <DropdownMenuSeparator_Shadcn_ />
+          <DropdownMenuItem_Shadcn_
+            className="cursor-pointer"
+            onClick={() => {
+              onClickLogout()
+              setOpen(false)
+            }}
+          >
+            <span>Log out</span>
+          </DropdownMenuItem_Shadcn_>
+        </DropdownMenuGroup_Shadcn_>
+      </DropdownMenuContent_Shadcn_>
+    </DropdownMenu_Shadcn_>
+  )
+}
+
+export default UserSettingsDropdown
diff --git a/studio/components/layouts/OrganizationLayout.tsx b/studio/components/layouts/OrganizationLayout.tsx
index 91ec8e0880a..691f99f25b5 100644
--- a/studio/components/layouts/OrganizationLayout.tsx
+++ b/studio/components/layouts/OrganizationLayout.tsx
@@ -5,16 +5,23 @@ import { PropsWithChildren } from 'react'
 import { Tabs } from 'ui'
 import { AccountLayout } from './'
 import { ScaffoldContainer, ScaffoldDivider, ScaffoldHeader, ScaffoldTitle } from './Scaffold'
+import SettingsLayout from './SettingsLayout/SettingsLayout'
 
 const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
   const selectedOrganization = useSelectedOrganization()
   const router = useRouter()
   const { slug } = useParams()
   const id = router.asPath.split('/').at(-1)?.split('?')[0]?.split('#')[0]
+  const isOrgBilling = !!selectedOrganization?.subscription_id
+
+  const navLayoutV2 = useFlag('navigationLayoutV2')
   const showOAuthApps = useFlag('oauthApps')
   const showAuditLogs = useFlag('auditLogs')
   const showIntegrationsV2 = useFlag('integrationsV2')
-  const isOrgBilling = !!selectedOrganization?.subscription_id
+
+  if (navLayoutV2) {
+    return <SettingsLayout>{children}</SettingsLayout>
+  }
 
   return (
     <AccountLayout
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
index 34efce3944f..be10c7d934e 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackDropdown.tsx
@@ -1,8 +1,19 @@
 import { useState } from 'react'
-import { Button, IconMessageCircle, Popover } from 'ui'
+import {
+  Button,
+  IconMessageCircle,
+  Popover,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
+} from 'ui'
 import FeedbackWidget from './FeedbackWidget'
 
-const FeedbackDropdown = () => {
+interface FeedbackDropdownProps {
+  alt?: boolean
+}
+
+const FeedbackDropdown = ({ alt = false }: FeedbackDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [feedback, setFeedback] = useState('')
   const [screenshot, setScreenshot] = useState<string>()
@@ -18,16 +29,29 @@ const FeedbackDropdown = () => {
   }
 
   return (
-    <Popover
+    <Popover_Shadcn_
+      modal={false}
       open={isOpen}
       onOpenChange={(e) => {
         setIsOpen(e)
         if (!e) setScreenshot(undefined)
       }}
-      size="content"
-      side="bottom"
-      align="end"
-      overlay={
+    >
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button
+          asChild
+          onClick={onOpen}
+          type="default"
+          icon={
+            alt ? null : (
+              <IconMessageCircle size={16} strokeWidth={1.5} className="text-scale-900" />
+            )
+          }
+        >
+          <span className="hidden md:flex">Feedback</span>
+        </Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ side="bottom" align="end" className="w-full p-0">
         <FeedbackWidget
           onClose={onClose}
           feedback={feedback}
@@ -35,17 +59,8 @@ const FeedbackDropdown = () => {
           screenshot={screenshot}
           setScreenshot={setScreenshot}
         />
-      }
-    >
-      <Button
-        asChild
-        onClick={onOpen}
-        type="default"
-        icon={<IconMessageCircle size={16} strokeWidth={1.5} className="text-scale-900" />}
-      >
-        <span className="hidden md:flex">Feedback</span>
-      </Button>
-    </Popover>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
   )
 }
 
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 0b9571b34ba..39851aa93b4 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -2,7 +2,21 @@ import { toPng } from 'html-to-image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ChangeEvent, FC, useEffect, useRef, useState } from 'react'
-import { Button, Dropdown, IconCamera, IconImage, IconUpload, IconX, Input, Popover } from 'ui'
+import {
+  Button,
+  Dropdown,
+  DropdownMenuContent_Shadcn_,
+  DropdownMenuItem_Shadcn_,
+  DropdownMenuSeparator_Shadcn_,
+  DropdownMenuTrigger_Shadcn_,
+  DropdownMenu_Shadcn_,
+  IconCamera,
+  IconImage,
+  IconUpload,
+  IconX,
+  Input,
+  Popover,
+} from 'ui'
 
 import { useParams } from 'common'
 import { useSendFeedbackMutation } from 'data/feedback/feedback-send'
@@ -125,13 +139,12 @@ const FeedbackWidget: FC<Props> = ({
         value={feedback}
         onChange={onFeedbackChange}
       />
-      <Popover.Separator />
+      <div className="w-full h-px bg-border" />
       <div className="w-80 space-y-3 px-3 py-2 pb-4">
         <div className="flex justify-between space-x-2">
-          <Button type="default" onClick={onClose} className="hover:border-gray-500">
+          <Button type="default" onClick={onClose}>
             Cancel
           </Button>
-
           <div className="flex items-center space-x-2">
             {screenshot !== undefined ? (
               <div
@@ -143,7 +156,7 @@ const FeedbackWidget: FC<Props> = ({
                 }}
                 className="cursor-pointer rounded h-[26px] w-[30px] border border-scale-600 relative bg-cover bg-center bg-no-repeat"
               >
-                <div
+                <button
                   className={[
                     'cursor-pointer rounded-full bg-red-900 h-3 w-3',
                     'flex items-center justify-center absolute -top-1 -right-1',
@@ -154,42 +167,43 @@ const FeedbackWidget: FC<Props> = ({
                   }}
                 >
                   <IconX size={8} strokeWidth={3} />
-                </div>
+                </button>
               </div>
             ) : (
-              <Dropdown
-                className="feedback-dropdown"
-                size="small"
-                overlay={[
-                  <Dropdown.Item
+              <DropdownMenu_Shadcn_>
+                <DropdownMenuTrigger_Shadcn_>
+                  <Button
+                    asChild
+                    type="default"
+                    disabled={isSavingScreenshot}
+                    loading={isSavingScreenshot}
+                    className="px-2 py-1.5"
+                    icon={<IconImage size={14} />}
+                  >
+                    <span></span>
+                  </Button>
+                </DropdownMenuTrigger_Shadcn_>
+                <DropdownMenuContent_Shadcn_ side="bottom" align="end">
+                  <DropdownMenuItem_Shadcn_
+                    className="flex gap-2"
                     key="upload-screenshot"
-                    icon={<IconUpload size={14} />}
-                    onClick={() => {
+                    onSelect={() => {
                       if (uploadButtonRef.current) (uploadButtonRef.current as any).click()
                     }}
                   >
+                    <IconUpload size={14} />
                     Upload screenshot
-                  </Dropdown.Item>,
-                  <Dropdown.Item
+                  </DropdownMenuItem_Shadcn_>
+                  <DropdownMenuItem_Shadcn_
+                    className="flex gap-2"
                     key="capture-screenshot"
-                    icon={<IconCamera size={14} />}
-                    onClick={() => captureScreenshot()}
+                    onSelect={() => captureScreenshot()}
                   >
+                    <IconCamera size={14} />
                     Capture screenshot
-                  </Dropdown.Item>,
-                ]}
-              >
-                <Button
-                  asChild
-                  type="default"
-                  disabled={isSavingScreenshot}
-                  loading={isSavingScreenshot}
-                  className="px-2 py-1.5"
-                  icon={<IconImage size={14} />}
-                >
-                  <span></span>
-                </Button>
-              </Dropdown>
+                  </DropdownMenuItem_Shadcn_>
+                </DropdownMenuContent_Shadcn_>
+              </DropdownMenu_Shadcn_>
             )}
             <input
               type="file"
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
index e89da6190d4..05f28ff10ef 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -1,148 +1,172 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import SVG from 'react-inlinesvg'
 import {
   Button,
+  IconActivity,
+  IconBookOpen,
   IconHelpCircle,
   IconMail,
   IconMessageCircle,
-  Popover,
-  IconBookOpen,
-  IconActivity,
   IconTool,
+  Popover,
+  PopoverContent_Shadcn_,
+  PopoverTrigger_Shadcn_,
+  Popover_Shadcn_,
 } from 'ui'
-import { useRouter } from 'next/router'
-import { FC } from 'react'
-import Link from 'next/link'
-import Image from 'next/image'
 
-import SVG from 'react-inlinesvg'
+interface HelpPopoverProps {
+  alt?: boolean
+}
 
-interface Props {}
-
-const HelpPopover: FC<Props> = () => {
+const HelpPopover = ({ alt = false }: HelpPopoverProps) => {
   const router = useRouter()
   const projectRef = router.query.ref
   const supportUrl = `/support/new${projectRef ? `?ref=${projectRef}` : ''}`
 
   return (
-    <Popover
-      size="content"
-      align="end"
-      side="bottom"
-      sideOffset={8}
-      overlay={
-        <div className="my-4 w-[400px] space-y-4">
-          <div className="my-5 space-y-4 px-5">
-            <h5 className="text-scale-1200">Need help with your project?</h5>
-            <p className="text-sm text-scale-900">
-              For issues with your project hosted on supabase.com, or other inquiries about our
-              hosted services.
-            </p>
-            <div className="space-x-1">
-              <Link passHref href="https://supabase.com/docs/guides/platform/troubleshooting">
-                <Button asChild type="default" icon={<IconTool />}>
-                  <a target="_blank" rel="noreferrer">
-                    Troubleshooting
-                  </a>
-                </Button>
-              </Link>
-              <Link passHref href="https://supabase.com/docs/">
-                <Button asChild type="text" size="tiny" icon={<IconBookOpen />}>
-                  <a target="_blank" rel="noreferrer">
-                    Docs
-                  </a>
-                </Button>
-              </Link>
-              <Link passHref href="https://status.supabase.com/">
-                <Button asChild type="text" size="tiny" icon={<IconActivity />}>
-                  <a target="_blank" rel="noreferrer">
-                    Supabase Status
-                  </a>
-                </Button>
-              </Link>
+    <Popover_Shadcn_>
+      <Tooltip.Root delayDuration={0}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Tooltip.Trigger asChild>
+            <div className="relative flex items-center">
+              <Button
+                type={alt ? 'text' : 'default'}
+                className={alt ? 'px-1' : ''}
+                icon={
+                  <IconHelpCircle
+                    size={alt ? 18 : 16}
+                    strokeWidth={1.5}
+                    className={alt ? 'text-scale-1100' : 'text-scale-900'}
+                  />
+                }
+              >
+                {!alt && <span>Help</span>}
+              </Button>
             </div>
+          </Tooltip.Trigger>
+        </PopoverTrigger_Shadcn_>
+        {alt ? (
+          <Tooltip.Portal>
+            <Tooltip.Content side="bottom">
+              <Tooltip.Arrow className="radix-tooltip-arrow" />
+              <div
+                className={[
+                  'rounded bg-scale-100 py-1 px-2 leading-none shadow',
+                  'space-y-2 border border-scale-200',
+                ].join(' ')}
+              >
+                <p className="text-xs text-scale-1200">Help</p>
+              </div>
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        ) : null}
+      </Tooltip.Root>
+      <PopoverContent_Shadcn_ className="w-[400px] space-y-4 p-0 py-5" align="end" side="bottom">
+        <div className="mb-5 space-y-4 px-5">
+          <h5 className="text-scale-1200">Need help with your project?</h5>
+          <p className="text-sm text-scale-900">
+            For issues with your project hosted on supabase.com, or other inquiries about our hosted
+            services.
+          </p>
+          <div className="space-x-1">
+            <Link passHref href="https://supabase.com/docs/guides/platform/troubleshooting">
+              <Button asChild type="default" icon={<IconTool />}>
+                <a target="_blank" rel="noreferrer">
+                  Troubleshooting
+                </a>
+              </Button>
+            </Link>
+            <Link passHref href="https://supabase.com/docs/">
+              <Button asChild type="text" size="tiny" icon={<IconBookOpen />}>
+                <a target="_blank" rel="noreferrer">
+                  Docs
+                </a>
+              </Button>
+            </Link>
+            <Link passHref href="https://status.supabase.com/">
+              <Button asChild type="text" size="tiny" icon={<IconActivity />}>
+                <a target="_blank" rel="noreferrer">
+                  Supabase Status
+                </a>
+              </Button>
+            </Link>
+          </div>
+          <p className="text-sm text-scale-900">
+            Expected response time is based on your billing plan. Pro and Pay as You Go plans are
+            prioritized.
+          </p>
+          <div>
+            <Link passHref href={supportUrl}>
+              <Button asChild type="default" icon={<IconMail />}>
+                <a>Contact Support</a>
+              </Button>
+            </Link>
+          </div>
+        </div>
+        <Popover.Separator />
+        <div className="mb-4 space-y-2">
+          <div className="mb-4 px-5">
+            <h5 className={'mb-2'}>Reach out to the community</h5>
+
             <p className="text-sm text-scale-900">
-              Expected response time is based on your billing plan. Pro and Pay as You Go plans are
-              prioritized.
+              For other support, including questions on our client libraries, advice, or best
+              practices.
             </p>
-            <div>
-              <Link passHref href={supportUrl}>
-                <Button asChild type="default" icon={<IconMail />}>
-                  <a>Contact Support</a>
+          </div>
+          <div className="px-5">
+            <div
+              className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md"
+              style={{ background: '#404EED' }}
+            >
+              <a
+                href="https://discord.supabase.com"
+                target="_blank"
+                rel="noreferrer"
+                className="dark block cursor-pointer"
+              >
+                <Image
+                  className="absolute left-0 top-0 opacity-50"
+                  src={`${router.basePath}/img/support/discord-bg-small.jpg`}
+                  layout="fill"
+                  objectFit="cover"
+                  alt="discord illustration header"
+                />
+                <Button
+                  type="secondary"
+                  icon={<SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />}
+                >
+                  <span style={{ color: '#404EED' }}>Join Discord server</span>
                 </Button>
-              </Link>
+              </a>
             </div>
           </div>
-          <Popover.Separator />
-          <div className="mb-4 space-y-2">
-            <div className="mb-4 px-5">
-              <h5 className={'mb-2'}>Reach out to the community</h5>
-
-              <p className="text-sm text-scale-900">
-                For other support, including questions on our client libraries, advice, or best
-                practices.
-              </p>
-            </div>
-            <div className="px-5">
-              <div
-                className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md"
-                style={{ background: '#404EED' }}
+          <div className="px-5">
+            <div className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md">
+              <a
+                href="https://github.com/supabase/supabase/discussions"
+                target="_blank"
+                rel="noreferrer"
+                className="block cursor-pointer"
               >
-                <a
-                  href="https://discord.supabase.com"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="dark block cursor-pointer"
-                >
-                  <Image
-                    className="absolute left-0 top-0 opacity-50"
-                    src={`${router.basePath}/img/support/discord-bg-small.jpg`}
-                    layout="fill"
-                    objectFit="cover"
-                    alt="discord illustration header"
-                  />
-                  <Button
-                    type="secondary"
-                    icon={
-                      <SVG src={`${router.basePath}/img/discord-icon.svg`} className="h-4 w-4" />
-                    }
-                  >
-                    <span style={{ color: '#404EED' }}>Join Discord server</span>
-                  </Button>
-                </a>
-              </div>
-            </div>
-            <div className="px-5">
-              <div className="relative space-y-2 overflow-hidden rounded px-5 py-4 pb-12 shadow-md">
-                <a
-                  href="https://github.com/supabase/supabase/discussions"
-                  target="_blank"
-                  rel="noreferrer"
-                  className="block cursor-pointer"
-                >
-                  <Image
-                    className="absolute left-0 top-0 opacity-50"
-                    src={`${router.basePath}/img/support/github-bg.jpg?v-1`}
-                    layout="fill"
-                    objectFit="cover"
-                    alt="discord illustration header"
-                  />
-                  <Button type="secondary" icon={<IconMessageCircle />}>
-                    GitHub Discussions
-                  </Button>
-                </a>
-              </div>
+                <Image
+                  className="absolute left-0 top-0 opacity-50"
+                  src={`${router.basePath}/img/support/github-bg.jpg?v-1`}
+                  layout="fill"
+                  objectFit="cover"
+                  alt="discord illustration header"
+                />
+                <Button type="secondary" icon={<IconMessageCircle />}>
+                  GitHub Discussions
+                </Button>
+              </a>
             </div>
           </div>
         </div>
-      }
-    >
-      <Button
-        asChild
-        type="default"
-        icon={<IconHelpCircle size={16} strokeWidth={1.5} className="text-scale-900" />}
-      >
-        <span>Help</span>
-      </Button>
-    </Popover>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
   )
 }
 
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
index 92d8ac76d10..d11b4f510a2 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -12,15 +12,19 @@ import { Fragment, useState } from 'react'
 import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import { useNotificationsQuery } from 'data/notifications/notifications-query'
 import { getProjectDetail } from 'data/projects/project-detail-query'
-import { invalidateProjectsQuery, setProjectPostgrestStatus } from 'data/projects/projects-query'
+import { setProjectPostgrestStatus } from 'data/projects/projects-query'
 import { useStore } from 'hooks'
 import { delete_, patch, post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { Project } from 'types'
-import { Alert, Button, IconArrowRight, IconBell, Popover } from 'ui'
+import { Alert, Button, IconArrowRight, IconBell, IconInbox, Popover } from 'ui'
 import NotificationRow from './NotificationRow'
 
-const NotificationsPopover = () => {
+interface NotificationsPopoverProps {
+  alt?: boolean
+}
+
+const NotificationsPopover = ({ alt = false }: NotificationsPopoverProps) => {
   const queryClient = useQueryClient()
   const router = useRouter()
   const { meta, ui } = useStore()
@@ -33,11 +37,12 @@ const NotificationsPopover = () => {
 
   const [targetNotification, setTargetNotification] = useState<Notification>()
 
-  if (!notifications || !Array.isArray(notifications)) return <></>
+  if (!notifications || !Array.isArray(notifications)) return null
 
-  const hasNewNotifications = notifications.some(
+  const newNotifications = notifications?.filter(
     (notification) => notification.notification_status === NotificationStatus.New
   )
+  const hasNewNotifications = newNotifications.length > 0
 
   const onOpenChange = async (open: boolean) => {
     // TODO(alaister): move this to a mutation
@@ -232,21 +237,47 @@ const NotificationsPopover = () => {
       >
         <Tooltip.Root delayDuration={0}>
           <Tooltip.Trigger asChild>
-            <div className="relative flex">
+            <div className="relative flex items-center">
+              {hasNewNotifications && (
+                <>
+                  {alt ? null : (
+                    <div className="absolute -top-1 -right-1 z-50 flex h-3 w-3 items-center justify-center">
+                      <div className="h-full w-full animate-ping rounded-full bg-green-800 opacity-60"></div>
+                      <div className="z-60 absolute top-0 right-0 h-full w-full rounded-full bg-green-900 opacity-80"></div>
+                    </div>
+                  )}
+                </>
+              )}
               <Button
                 asChild
                 id="notification-button"
-                type="default"
-                icon={<IconBell size={16} strokeWidth={1.5} className="text-scale-1200" />}
+                type={alt ? 'text' : 'default'}
+                className={alt ? 'px-1' : ''}
+                icon={
+                  hasNewNotifications ? (
+                    <div className="-mr-3.5 z-10 h-4 w-4 flex items-center justify-center rounded-full bg-white">
+                      <p className="text-xs text-scale-100">{newNotifications.length}</p>
+                    </div>
+                  ) : alt ? (
+                    <IconInbox size={18} strokeWidth={1.5} className="text-scale-1100" />
+                  ) : (
+                    <IconBell size={16} strokeWidth={1.5} className="text-scale-1200" />
+                  )
+                }
+                iconRight={
+                  hasNewNotifications ? (
+                    <>
+                      {alt ? (
+                        <IconInbox size={18} strokeWidth={1.5} className="text-scale-1100" />
+                      ) : (
+                        <IconBell size={16} strokeWidth={1.5} className="text-scale-1200" />
+                      )}
+                    </>
+                  ) : null
+                }
               >
                 <span></span>
               </Button>
-              {hasNewNotifications && (
-                <div className="absolute -top-1 -right-1 z-50 flex h-3 w-3 items-center justify-center">
-                  <div className="h-full w-full animate-ping rounded-full bg-green-800 opacity-60"></div>
-                  <div className="z-60 absolute top-0 right-0 h-full w-full rounded-full bg-green-900 opacity-80"></div>
-                </div>
-              )}
             </div>
           </Tooltip.Trigger>
           <Tooltip.Portal>
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
index 80152718fc4..232e27d29f5 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
@@ -1,13 +1,15 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
-import { Button, Dropdown, IconPlus, Popover } from 'ui'
+import { Badge, Button, Dropdown, IconCode, IconPlus, Popover } from 'ui'
 
 import { useProjectsQuery } from 'data/projects/projects-query'
 import { useSelectedOrganization, useSelectedProject } from 'hooks'
 import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { Organization, Project } from 'types'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
 
 // [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
@@ -71,13 +73,23 @@ const ProjectLink = ({
   )
 }
 
-const ProjectDropdown = () => {
+const ProjectDropdown = ({ alt }: { alt?: boolean }) => {
   const selectedProject = useSelectedProject()
   const selectedOrganization = useSelectedOrganization()
-  const { data: allProjects } = useProjectsQuery()
+  const { data: allProjects, isLoading: isLoadingProjects } = useProjectsQuery()
   const { data: allOrganizations } = useOrganizationsQuery()
   const selectedOrganizationSlug = selectedOrganization?.slug
 
+  const isOrgBilling = !!selectedOrganization?.subscription_id
+  const { data: subscription, isSuccess } = useProjectSubscriptionV2Query(
+    { projectRef: selectedProject?.ref },
+    { enabled: alt && !isOrgBilling }
+  )
+
+  if (isLoadingProjects && alt) {
+    return <ShimmeringLoader className="w-[90px]" />
+  }
+
   return IS_PLATFORM ? (
     <Dropdown
       side="bottom"
@@ -100,13 +112,23 @@ const ProjectDropdown = () => {
         </>
       }
     >
-      <Button asChild type="text" size="tiny" className="my-1">
-        <span>{selectedProject?.name}</span>
+      <Button
+        type="text"
+        iconRight={
+          alt ? <IconCode className="text-scale-1100 rotate-90" strokeWidth={2} size={12} /> : null
+        }
+      >
+        <span className="text-sm">{selectedProject?.name}</span>
+        {alt && isSuccess && !isOrgBilling && (
+          <Badge color="slate" className="ml-2">
+            {subscription?.plan.name}
+          </Badge>
+        )}
       </Button>
     </Dropdown>
   ) : (
-    <Button asChild type="text" size="tiny">
-      <span>{selectedProject?.name}</span>
+    <Button type="text">
+      <span className="text-sm">{selectedProject?.name}</span>
     </Button>
   )
 }
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index 50bdff1621b..4efb7bf31a4 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -2,7 +2,6 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { isUndefined } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { FC } from 'react'
 
 import { useTheme } from 'common'
 import { useParams } from 'common/hooks'
@@ -27,15 +26,13 @@ import {
 } from './NavigationBar.utils'
 import NavigationIconButton from './NavigationIconButton'
 
-interface Props {}
-
-const NavigationBar: FC<Props> = ({}) => {
+const NavigationBar = ({}) => {
   const router = useRouter()
   const { isDarkMode, toggleTheme } = useTheme()
   const { ref: projectRef } = useParams()
 
   const { project } = useProjectContext()
-  const ongoingIncident = useFlag('ongoingIncident')
+  const navLayoutV2 = useFlag('navigationLayoutV2')
 
   const activeRoute = router.pathname.split('/')[3]
   const toolRoutes = generateToolRoutes(projectRef, project)
@@ -46,22 +43,23 @@ const NavigationBar: FC<Props> = ({}) => {
   const { setIsOpen } = useCommandMenu()
   return (
     <div
-      style={{ height: ongoingIncident ? 'calc(100vh - 44px)' : '100vh' }}
       className={[
         'flex w-14 flex-col justify-between overflow-y-hidden p-2',
         'border-r bg-body border-scale-500',
       ].join(' ')}
     >
       <ul className="flex flex-col space-y-2">
-        <Link href="/projects">
-          <a className="block">
-            <img
-              src={`${router.basePath}/img/supabase-logo.svg`}
-              alt="Supabase"
-              className="mx-auto h-[40px] w-6 cursor-pointer rounded"
-            />
-          </a>
-        </Link>
+        {!navLayoutV2 && (
+          <Link href="/projects">
+            <a className="block">
+              <img
+                src={`${router.basePath}/img/supabase-logo.svg`}
+                alt="Supabase"
+                className="mx-auto h-[40px] w-6 cursor-pointer rounded"
+              />
+            </a>
+          </Link>
+        )}
         <NavigationIconButton
           isActive={isUndefined(activeRoute) && !isUndefined(router.query.ref)}
           route={{
@@ -71,7 +69,7 @@ const NavigationBar: FC<Props> = ({}) => {
             link: `/project/${projectRef}`,
           }}
         />
-        <div className="bg-scale-500 h-px w-full"></div>
+        <div className="bg-scale-500 h-px w-full" />
         {toolRoutes.map((route) => (
           <NavigationIconButton
             key={route.key}
@@ -97,77 +95,82 @@ const NavigationBar: FC<Props> = ({}) => {
           />
         ))}
       </ul>
-      <ul className="flex flex-col space-y-4 items-center">
-        {IS_PLATFORM && showCmdkHelper && (
-          <Tooltip.Root delayDuration={0}>
-            <Tooltip.Trigger asChild>
-              <Button
-                type="text"
-                size="tiny"
-                onClick={() => setIsOpen(true)}
-                className="border-none"
-              >
-                <div className="py-1">
-                  <IconSearch size={18} strokeWidth={2} className="text-scale-900" />
-                </div>
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content side="right">
-                <Tooltip.Arrow className="radix-tooltip-arrow" />
-                <div
-                  className={[
-                    'rounded  py-1 px-2 leading-none shadow',
-                    'border border-scale-200 flex items-center space-x-1',
-                  ].join(' ')}
+      {!navLayoutV2 && (
+        <ul className="flex flex-col space-y-4 items-center">
+          {IS_PLATFORM && showCmdkHelper && (
+            <Tooltip.Root delayDuration={0}>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type="text"
+                  size="tiny"
+                  onClick={() => setIsOpen(true)}
+                  className="border-none"
                 >
-                  {os === 'macos' ? (
-                    <IconCommand size={11.5} strokeWidth={1.5} className="text-scale-1200" />
-                  ) : (
-                    <p className="text-xs">CTRL</p>
-                  )}
-                  <p className="text-xs">K</p>
-                </div>
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-        )}
-        <Dropdown
-          side="right"
-          align="start"
-          overlay={
-            <>
-              {IS_PLATFORM && (
-                <>
-                  <Link href="/account/me">
-                    <Dropdown.Item key="header" icon={<IconSettings size={14} strokeWidth={1.5} />}>
-                      Account Preferences
-                    </Dropdown.Item>
-                  </Link>
-                  <Dropdown.Separator />
-                </>
-              )}
-              <Dropdown.Label>Theme</Dropdown.Label>
-              <Dropdown.RadioGroup
-                key="theme"
-                value={isDarkMode ? 'dark' : 'light'}
-                onChange={(e: any) => toggleTheme(e === 'dark')}
-              >
-                {/* [Joshen] Removing system default for now, needs to be supported in useTheme from common packages */}
-                {/* <Dropdown.Radio value="system">System default</Dropdown.Radio> */}
-                <Dropdown.Radio value="dark">Dark</Dropdown.Radio>
-                <Dropdown.Radio value="light">Light</Dropdown.Radio>
-              </Dropdown.RadioGroup>
-            </>
-          }
-        >
-          <Button asChild type="text" size="tiny">
-            <span className="py-1 h-10 border-none">
-              <IconUser size={18} strokeWidth={2} className="text-scale-900" />
-            </span>
-          </Button>
-        </Dropdown>
-      </ul>
+                  <div className="py-1">
+                    <IconSearch size={18} strokeWidth={2} className="text-scale-900" />
+                  </div>
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content side="right">
+                  <Tooltip.Arrow className="radix-tooltip-arrow" />
+                  <div
+                    className={[
+                      'rounded  py-1 px-2 leading-none shadow',
+                      'border border-scale-200 flex items-center space-x-1',
+                    ].join(' ')}
+                  >
+                    {os === 'macos' ? (
+                      <IconCommand size={11.5} strokeWidth={1.5} className="text-scale-1200" />
+                    ) : (
+                      <p className="text-xs">CTRL</p>
+                    )}
+                    <p className="text-xs">K</p>
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+          <Dropdown
+            side="right"
+            align="start"
+            overlay={
+              <>
+                {IS_PLATFORM && (
+                  <>
+                    <Link href="/account/me">
+                      <Dropdown.Item
+                        key="header"
+                        icon={<IconSettings size={14} strokeWidth={1.5} />}
+                      >
+                        Account Preferences
+                      </Dropdown.Item>
+                    </Link>
+                    <Dropdown.Separator />
+                  </>
+                )}
+                <Dropdown.Label>Theme</Dropdown.Label>
+                <Dropdown.RadioGroup
+                  key="theme"
+                  value={isDarkMode ? 'dark' : 'light'}
+                  onChange={(e: any) => toggleTheme(e === 'dark')}
+                >
+                  {/* [Joshen] Removing system default for now, needs to be supported in useTheme from common packages */}
+                  {/* <Dropdown.Radio value="system">System default</Dropdown.Radio> */}
+                  <Dropdown.Radio value="dark">Dark</Dropdown.Radio>
+                  <Dropdown.Radio value="light">Light</Dropdown.Radio>
+                </Dropdown.RadioGroup>
+              </>
+            }
+          >
+            <Button asChild type="text" size="tiny">
+              <span className="py-1 h-10 border-none">
+                <IconUser size={18} strokeWidth={2} className="text-scale-900" />
+              </span>
+            </Button>
+          </Dropdown>
+        </ul>
+      )}
     </div>
   )
 }
diff --git a/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx b/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
index aac652b82f0..35f9456eb82 100644
--- a/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
+++ b/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
@@ -1,18 +1,12 @@
-import { FC, ReactNode } from 'react'
-import { useFlag } from 'hooks'
+import { PropsWithChildren } from 'react'
 
-interface Props {
+interface ProductMenuBarProps {
   title: string
-  children: ReactNode
 }
 
-const ProductMenuBar: FC<Props> = ({ title, children }) => {
-  const ongoingIncident = useFlag('ongoingIncident')
-  const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
-
+const ProductMenuBar = ({ title, children }: PropsWithChildren<ProductMenuBarProps>) => {
   return (
     <div
-      style={{ height: maxHeight, maxHeight }}
       className={[
         'hide-scrollbar flex w-64 flex-col border-r', // Layout
         'bg-scale-200', // Light mode
@@ -25,7 +19,9 @@ const ProductMenuBar: FC<Props> = ({ title, children }) => {
       >
         <h4 className="text-lg">{title}</h4>
       </div>
-      <div className="flex-grow overflow-y-auto">{children}</div>
+      <div className="flex-grow overflow-y-auto" style={{ maxHeight: 'calc(100vh - 96px)' }}>
+        {children}
+      </div>
     </div>
   )
 }
diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 8d20baea54e..4b23582c1ef 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -16,6 +16,7 @@ import { ProjectContextProvider } from './ProjectContext'
 import ProjectPausedState from './ProjectPausedState'
 import RestoringState from './RestoringState'
 import UpgradingState from './UpgradingState'
+import AppLayout from '../AppLayout/AppLayout'
 
 // [Joshen] This is temporary while we unblock users from managing their project
 // if their project is not responding well for any reason. Eventually needs a bit of an overhaul
@@ -59,61 +60,61 @@ const ProjectLayout = ({
 }: PropsWithChildren<ProjectLayoutProps>) => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
-  const ongoingIncident = useFlag('ongoingIncident')
   const selectedOrganization = useSelectedOrganization()
   const selectedProject = useSelectedProject()
   const projectName = selectedProject?.name
   const organizationName = selectedOrganization?.name
 
+  const navLayoutV2 = useFlag('navigationLayoutV2')
+
   const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
   const ignorePausedState =
     router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
   const showPausedState = isPaused && !ignorePausedState
 
   return (
-    <ProjectContextProvider projectRef={projectRef}>
-      <Head>
-        <title>
-          {title
-            ? `${title} | Supabase`
-            : selectedTable
-            ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
-            : projectName
-            ? `${projectName} | ${organizationName} | Supabase`
-            : organizationName
-            ? `${organizationName} | Supabase`
-            : 'Supabase'}
-        </title>
-        <meta name="description" content="Supabase Studio" />
-      </Head>
-      <div className="flex h-full">
-        {/* Left-most navigation side bar to access products */}
-        {!hideIconBar && <NavigationBar />}
+    <AppLayout>
+      <ProjectContextProvider projectRef={projectRef}>
+        <Head>
+          <title>
+            {title
+              ? `${title} | Supabase`
+              : selectedTable
+              ? `${selectedTable} | ${projectName} | ${organizationName} | Supabase`
+              : projectName
+              ? `${projectName} | ${organizationName} | Supabase`
+              : organizationName
+              ? `${organizationName} | Supabase`
+              : 'Supabase'}
+          </title>
+          <meta name="description" content="Supabase Studio" />
+        </Head>
+        <div className="flex h-full">
+          {/* Left-most navigation side bar to access products */}
+          {!hideIconBar && <NavigationBar />}
 
-        {/* Product menu bar */}
-        {!showPausedState && (
-          <MenuBarWrapper isLoading={isLoading} productMenu={productMenu}>
-            <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
-          </MenuBarWrapper>
-        )}
-
-        <main
-          className="flex flex-col flex-1 w-full overflow-x-hidden"
-          style={{ height: ongoingIncident ? 'calc(100vh - 44px)' : '100vh' }}
-        >
-          {!hideHeader && <LayoutHeader />}
-          {showPausedState ? (
-            <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
-              <div className="w-full">
-                <ProjectPausedState product={product} />
-              </div>
-            </div>
-          ) : (
-            <ContentWrapper isLoading={isLoading}>{children}</ContentWrapper>
+          {/* Product menu bar */}
+          {!showPausedState && (
+            <MenuBarWrapper isLoading={isLoading} productMenu={productMenu}>
+              <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
+            </MenuBarWrapper>
           )}
-        </main>
-      </div>
-    </ProjectContextProvider>
+
+          <main className="flex flex-col flex-1 w-full overflow-x-hidden">
+            {!navLayoutV2 && !hideHeader && <LayoutHeader />}
+            {showPausedState ? (
+              <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
+                <div className="w-full">
+                  <ProjectPausedState product={product} />
+                </div>
+              </div>
+            ) : (
+              <ContentWrapper isLoading={isLoading}>{children}</ContentWrapper>
+            )}
+          </main>
+        </div>
+      </ProjectContextProvider>
+    </AppLayout>
   )
 }
 
@@ -210,44 +211,44 @@ export const ProjectLayoutNonBlocking = ({
   const selectedProject = useSelectedProject()
   const router = useRouter()
   const { ref: projectRef } = useParams()
-  const ongoingIncident = useFlag('ongoingIncident')
   const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
   const ignorePausedState =
     router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
   const showPausedState = isPaused && !ignorePausedState
 
+  const navLayoutV2 = useFlag('navigationLayoutV2')
+
   return (
-    <ProjectContextProvider projectRef={projectRef}>
-      <Head>
-        <title>{title ? `${title} | Supabase` : 'Supabase'}</title>
-        <meta name="description" content="Supabase Studio" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <div className="flex h-full">
-        {/* Left-most navigation side bar to access products */}
-        {!hideIconBar && <NavigationBar />}
+    <AppLayout>
+      <ProjectContextProvider projectRef={projectRef}>
+        <Head>
+          <title>{title ? `${title} | Supabase` : 'Supabase'}</title>
+          <meta name="description" content="Supabase Studio" />
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <div className="flex h-full">
+          {/* Left-most navigation side bar to access products */}
+          {!hideIconBar && <NavigationBar />}
 
-        {/* Product menu bar */}
-        {productMenu && !showPausedState && (
-          <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
-        )}
-
-        <main
-          className="flex w-full flex-1 flex-col overflow-x-hidden"
-          style={{ height: ongoingIncident ? 'calc(100vh - 44px)' : '100vh' }}
-        >
-          {!hideHeader && <LayoutHeader />}
-          {showPausedState ? (
-            <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
-              <div className="w-full">
-                <ProjectPausedState product={product} />
-              </div>
-            </div>
-          ) : (
-            children
+          {/* Product menu bar */}
+          {productMenu && !showPausedState && (
+            <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
           )}
-        </main>
-      </div>
-    </ProjectContextProvider>
+
+          <main className="flex w-full flex-1 flex-col overflow-x-hidden">
+            {!navLayoutV2 && !hideHeader && <LayoutHeader />}
+            {showPausedState ? (
+              <div className="mx-auto my-16 w-full h-full max-w-7xl flex items-center">
+                <div className="w-full">
+                  <ProjectPausedState product={product} />
+                </div>
+              </div>
+            ) : (
+              children
+            )}
+          </main>
+        </div>
+      </ProjectContextProvider>
+    </AppLayout>
   )
 }
diff --git a/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx b/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx
new file mode 100644
index 00000000000..2793fa28c80
--- /dev/null
+++ b/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx
@@ -0,0 +1,51 @@
+import { useFlag, useSelectedOrganization, useSelectedProject, useStore, withAuth } from 'hooks'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect } from 'react'
+import { generateSettingsMenu } from './SettingsMenu.utils'
+
+import ProductMenu from 'components/ui/ProductMenu'
+import ProjectLayout from '..'
+import { useParams } from 'common'
+
+interface SettingsLayoutProps {
+  title?: string
+}
+
+const SettingsLayout = ({ title, children }: PropsWithChildren<SettingsLayoutProps>) => {
+  const router = useRouter()
+  const { ref } = useParams()
+  const { ui, meta } = useStore()
+  const project = useSelectedProject()
+  const organization = useSelectedOrganization()
+  const isOrgBilling = !!organization?.subscription_id
+
+  // billing pages live under /billing/invoices and /billing/subscription, etc
+  // so we need to pass the [5]th part of the url to the menu
+  const page = router.pathname.includes('billing')
+    ? router.pathname.split('/')[5]
+    : router.pathname.split('/')[4]
+
+  const isVaultEnabled = useFlag('vaultExtension')
+  const menuRoutes = generateSettingsMenu(ref, project, isVaultEnabled, isOrgBilling)
+
+  useEffect(() => {
+    if (ui.selectedProjectRef) {
+      meta.extensions.load()
+    }
+  }, [ui.selectedProjectRef])
+
+  return (
+    <ProjectLayout
+      title={title || 'Settings'}
+      product="Settings"
+      productMenu={<ProductMenu page={page} menu={menuRoutes} />}
+    >
+      <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
+        {children}
+      </main>
+    </ProjectLayout>
+  )
+}
+
+export default withAuth(observer(SettingsLayout))
diff --git a/studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts b/studio/components/layouts/ProjectSettingsLayout/SettingsMenu.utils.ts
similarity index 100%
rename from studio/components/layouts/SettingsLayout/SettingsMenu.utils.ts
rename to studio/components/layouts/ProjectSettingsLayout/SettingsMenu.utils.ts
diff --git a/studio/components/layouts/SettingsLayout/AccountSettingsMenu.tsx b/studio/components/layouts/SettingsLayout/AccountSettingsMenu.tsx
new file mode 100644
index 00000000000..80c3b593dd3
--- /dev/null
+++ b/studio/components/layouts/SettingsLayout/AccountSettingsMenu.tsx
@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import SettingsMenuItem from './SettingsMenuItem'
+
+const AccountSettingsMenu = () => {
+  const router = useRouter()
+  const accountSettings = [
+    { label: 'Preferences', pathname: `/account/me` },
+    { label: 'Access Tokens', pathname: `/account/tokens` },
+  ]
+
+  return (
+    <div className="space-y-10">
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Account Settings</p>
+        {accountSettings.map((link) => (
+          <SettingsMenuItem
+            key={link.label}
+            label={link.label}
+            href={link.pathname}
+            isActive={link.pathname === router.pathname}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default AccountSettingsMenu
diff --git a/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
new file mode 100644
index 00000000000..ee1ff6fe3d7
--- /dev/null
+++ b/studio/components/layouts/SettingsLayout/OrganizationSettingsMenu.tsx
@@ -0,0 +1,59 @@
+import { useRouter } from 'next/router'
+
+import { useSelectedOrganization } from 'hooks'
+import SettingsMenuItem from './SettingsMenuItem'
+
+const OrganizationSettingsMenu = () => {
+  const router = useRouter()
+  const organization = useSelectedOrganization()
+  const organizationSettings = [
+    { label: 'General', pathname: `/org/[slug]/general` },
+    { label: 'Members', pathname: `/org/[slug]/team` },
+    { label: 'Integrations', pathname: `/org/[slug]/integrations` },
+    { label: 'Billing', pathname: `/org/[slug]/billing` },
+    { label: 'Usage', pathname: `/org/[slug]/usage` },
+    { label: 'Invoices', pathname: `/org/[slug]/invoices` },
+    { label: 'OAuth Apps', pathname: `/org/[slug]/apps` },
+    { label: 'Audit Logs', pathname: `/org/[slug]/audit` },
+  ]
+
+  // const { data: allProjects } = useProjectsQuery()
+  // const projects = allProjects?.filter((project) => project.organization_id === organization?.id)
+
+  return (
+    <div className="space-y-10">
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Organization</p>
+        {organizationSettings.map((link) => (
+          <SettingsMenuItem
+            key={link.label}
+            label={link.label}
+            href={link.pathname.replace('[slug]', organization?.slug ?? '')}
+            isActive={link.pathname === router.pathname}
+          />
+        ))}
+      </div>
+
+      {/* [Joshen] Hiding below until we figure out a better UX for consolidating settings on projects */}
+      {/* <div className="space-y-2">
+        <p className="text-sm font-medium">Projects</p>
+        <Accordion_Shadcn_ type="single" collapsible className="w-full">
+          {projects?.map((project) => (
+            <ProjectSettingsMenuItem key={project.ref} project={project} />
+          ))}
+        </Accordion_Shadcn_>
+      </div>
+      <div>
+        <Link href={`/new/${organization?.slug}`}>
+          <a>
+            <Button type="default" size="small">
+              Create new project
+            </Button>
+          </a>
+        </Link>
+      </div> */}
+    </div>
+  )
+}
+
+export default OrganizationSettingsMenu
diff --git a/studio/components/layouts/SettingsLayout/ProjectSettingsMenuItem.tsx b/studio/components/layouts/SettingsLayout/ProjectSettingsMenuItem.tsx
new file mode 100644
index 00000000000..2132e439e40
--- /dev/null
+++ b/studio/components/layouts/SettingsLayout/ProjectSettingsMenuItem.tsx
@@ -0,0 +1,71 @@
+import { useRouter } from 'next/router'
+import {
+  AccordionContent_Shadcn_,
+  AccordionItem_Shadcn_,
+  AccordionTrigger_Shadcn_,
+  IconChevronRight,
+} from 'ui'
+
+import { useSelectedOrganization } from 'hooks'
+import { Project } from 'types'
+import SettingsMenuItem from './SettingsMenuItem'
+
+interface ProjectSettingsMenuItemProps {
+  project: Project
+}
+
+const ProjectSettingsMenuItem = ({ project }: ProjectSettingsMenuItemProps) => {
+  const router = useRouter()
+  const organization = useSelectedOrganization()
+  const isOrgBilling = !!organization?.subscription_id
+
+  // [Joshen] Links need to be updated once we start implementing these
+  const projectSettings = isOrgBilling
+    ? [
+        { label: 'General', pathname: `/project/[ref]/settings/general` },
+        { label: 'Infrastructure', pathname: `/project/[ref]/settings/infrastructure` },
+        { label: 'Add Ons', pathname: `/project/[ref]/settings/addons` },
+      ]
+    : [
+        { label: 'General', pathname: `/project/[ref]/settings/general` },
+        { label: 'Subscription', pathname: `/project/[ref]/settings/billing/subscription` },
+        { label: 'Usage', pathname: `/project/[ref]/settings/billing/usage` },
+        { label: 'Invoices', pathname: `/project/[ref]/settings/billing/invoices` },
+      ]
+
+  return (
+    <AccordionItem_Shadcn_ value={project.ref} className="!border-none">
+      <AccordionTrigger_Shadcn_
+        hideIcon
+        className="py-1.5 hover:!no-underline [&[data-state=open]>div>svg]:!rotate-90 [&[data-state=open]>div>p]:text-scale-1200"
+      >
+        <div className="flex items-center space-x-2">
+          <IconChevronRight
+            className="h-4 w-4 transition-transform duration-200"
+            strokeWidth={1.5}
+          />
+          <p className="text-scale-1100 text-sm font-normal transition duration-200">
+            {project.name}
+          </p>
+        </div>
+      </AccordionTrigger_Shadcn_>
+      <AccordionContent_Shadcn_>
+        <div className="space-y-2 pl-6 mt-1">
+          {projectSettings.map((link) => {
+            const href = link.pathname.replace('[ref]', project.ref)
+            return (
+              <SettingsMenuItem
+                key={link.label}
+                label={link.label}
+                href={href}
+                isActive={href === router.asPath}
+              />
+            )
+          })}
+        </div>
+      </AccordionContent_Shadcn_>
+    </AccordionItem_Shadcn_>
+  )
+}
+
+export default ProjectSettingsMenuItem
diff --git a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
index 61c49d15af0..81ec13f6e89 100644
--- a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
+++ b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
@@ -1,51 +1,30 @@
-import { useFlag, useSelectedOrganization, useSelectedProject, useStore, withAuth } from 'hooks'
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
-import { PropsWithChildren, useEffect } from 'react'
-import { generateSettingsMenu } from './SettingsMenu.utils'
-
+import { PropsWithChildren } from 'react'
+import AppLayout from '../AppLayout/AppLayout'
 import { useParams } from 'common'
-import ProductMenu from 'components/ui/ProductMenu'
-import ProjectLayout from '../'
-
-interface SettingsLayoutProps {
-  title?: string
-}
-
-const SettingsLayout = ({ title, children }: PropsWithChildren<SettingsLayoutProps>) => {
-  const { ref } = useParams()
-  const { ui, meta } = useStore()
-  const project = useSelectedProject()
-  const organization = useSelectedOrganization()
-  const isOrgBilling = !!organization?.subscription_id
+import OrganizationSettingsMenu from './OrganizationSettingsMenu'
+import AccountSettingsMenu from './AccountSettingsMenu'
+import { useRouter } from 'next/router'
 
+const SettingsLayout = ({ children }: PropsWithChildren<{}>) => {
   const router = useRouter()
-  // billing pages live under /billing/invoices and /billing/subscription, etc
-  // so we need to pass the [5]th part of the url to the menu
-  const page = router.pathname.includes('billing')
-    ? router.pathname.split('/')[5]
-    : router.pathname.split('/')[4]
-
-  const isVaultEnabled = useFlag('vaultExtension')
-  const menuRoutes = generateSettingsMenu(ref, project, isVaultEnabled, isOrgBilling)
-
-  useEffect(() => {
-    if (ui.selectedProjectRef) {
-      meta.extensions.load()
-    }
-  }, [ui.selectedProjectRef])
+  const { ref, slug } = useParams()
 
   return (
-    <ProjectLayout
-      title={title || 'Settings'}
-      product="Settings"
-      productMenu={<ProductMenu page={page} menu={menuRoutes} />}
-    >
-      <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
-        {children}
-      </main>
-    </ProjectLayout>
+    <AppLayout>
+      <div className="flex h-full">
+        {router.pathname !== '/projects' && (
+          <div className="h-full overflow-y-auto min-w-[280px] border-r px-8 py-8">
+            {slug === undefined && ref === undefined ? (
+              <AccountSettingsMenu />
+            ) : (
+              <OrganizationSettingsMenu />
+            )}
+          </div>
+        )}
+        <div className="h-full overflow-y-auto flex-grow">{children}</div>
+      </div>
+    </AppLayout>
   )
 }
 
-export default withAuth(observer(SettingsLayout))
+export default SettingsLayout
diff --git a/studio/components/layouts/SettingsLayout/SettingsMenuItem.tsx b/studio/components/layouts/SettingsLayout/SettingsMenuItem.tsx
new file mode 100644
index 00000000000..e8bcf9b13a0
--- /dev/null
+++ b/studio/components/layouts/SettingsLayout/SettingsMenuItem.tsx
@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import Link from 'next/link'
+
+interface SettingsMenuItemProps {
+  href: string
+  label: string
+  isActive: boolean
+}
+
+const SettingsMenuItem = ({ href, label, isActive }: SettingsMenuItemProps) => {
+  return (
+    <div>
+      <Link href={href}>
+        <a
+          className={clsx(
+            'text-sm',
+            isActive ? 'text-scale-1200' : 'text-scale-1100 hover:text-scale-1200 transition'
+          )}
+        >
+          {label}
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default SettingsMenuItem
diff --git a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index 1e8f7e114e6..7e7190a73e9 100644
--- a/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react'
 import { noop, partition } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import {
+  Alert,
   Button,
   Dropdown,
   IconCheck,
@@ -83,7 +84,6 @@ const TableEditorMenu = ({
   )
 
   const schemas: PostgresSchema[] = meta.schemas.list()
-
   const schema = schemas.find((schema) => schema.name === selectedSchema)
   const canCreateTables = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables')
 
@@ -110,6 +110,13 @@ const TableEditorMenu = ({
             <IconLoader className="animate-spin" size={12} />
             <span className="text-xs text-scale-900">Loading schemas...</span>
           </div>
+        ) : meta.schemas.hasError ? (
+          <Alert variant="warning" title="Failed to load schemas" className="!px-3 !py-3">
+            <p className="mb-2">Error: {meta.schemas?.error?.message}</p>
+            <Button type="default" size="tiny" onClick={() => meta.schemas.load()}>
+              Reload schemas
+            </Button>
+          </Alert>
         ) : (
           <Listbox
             size="tiny"
diff --git a/studio/components/layouts/index.ts b/studio/components/layouts/index.ts
index b5ffd3d933f..3213ebfbf7e 100644
--- a/studio/components/layouts/index.ts
+++ b/studio/components/layouts/index.ts
@@ -9,7 +9,7 @@ import TableEditorLayout from './TableEditorLayout/TableEditorLayout'
 import SQLEditorLayout from './SQLEditorLayout/SQLEditorLayout'
 import DatabaseLayout from './DatabaseLayout/DatabaseLayout'
 import DocsLayout from './DocsLayout/DocsLayout'
-import SettingsLayout from './SettingsLayout/SettingsLayout'
+import SettingsLayout from './ProjectSettingsLayout/SettingsLayout'
 import StorageLayout from './StorageLayout/StorageLayout'
 import AccountLayout from './AccountLayout/AccountLayout'
 import { AccountLayoutWithoutAuth } from './AccountLayout/AccountLayout'
diff --git a/studio/components/to-be-cleaned/KeyMap.tsx b/studio/components/to-be-cleaned/KeyMap.tsx
index d70714b6741..a68221cabb2 100644
--- a/studio/components/to-be-cleaned/KeyMap.tsx
+++ b/studio/components/to-be-cleaned/KeyMap.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react'
-
 /**
  * Render keyMap
  *
@@ -13,7 +11,7 @@ const customKeyChars: any = {
   enter: '↵',
 }
 
-const KeyMap: FC<any> = ({ keyMap }) => {
+const KeyMap = ({ keyMap }: any) => {
   if (!keyMap) return null
 
   const keys = keyMap.split('+')
diff --git a/studio/components/to-be-cleaned/ProductEmptyState.tsx b/studio/components/to-be-cleaned/ProductEmptyState.tsx
index be23e0edc04..33ee6b1e1a8 100644
--- a/studio/components/to-be-cleaned/ProductEmptyState.tsx
+++ b/studio/components/to-be-cleaned/ProductEmptyState.tsx
@@ -39,7 +39,7 @@ const ProductEmptyState: FC<Props> = ({
               <div className="flex items-center space-x-2">
                 {ctaButtonLabel && onClickCta && (
                   <Tooltip.Root delayDuration={0}>
-                    <Tooltip.Trigger>
+                    <Tooltip.Trigger asChild>
                       <Button type="primary" onClick={onClickCta} disabled={disabled}>
                         {ctaButtonLabel}
                       </Button>
diff --git a/studio/data/organizations/organizations-query.ts b/studio/data/organizations/organizations-query.ts
index 4e3b207811f..4bf70566dd8 100644
--- a/studio/data/organizations/organizations-query.ts
+++ b/studio/data/organizations/organizations-query.ts
@@ -14,7 +14,6 @@ export async function getOrganizations(signal?: AbortSignal): Promise<Organizati
   }
 
   const sorted = (data as Organization[]).sort((a, b) => a.name.localeCompare(b.name))
-
   return sorted
 }
 
diff --git a/studio/hooks/misc/useSelectedOrganization.ts b/studio/hooks/misc/useSelectedOrganization.ts
index c2446380fc5..bc6be1b3710 100644
--- a/studio/hooks/misc/useSelectedOrganization.ts
+++ b/studio/hooks/misc/useSelectedOrganization.ts
@@ -3,15 +3,25 @@ import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useMemo } from 'react'
 
 import { useSelectedProject } from './useSelectedProject'
+import { LOCAL_STORAGE_KEYS } from 'lib/constants'
 
 export function useSelectedOrganization({ enabled = true } = {}) {
   const { slug } = useParams()
   const { data } = useOrganizationsQuery({ enabled })
   const selectedProject = useSelectedProject()
 
+  const localStorageSlug = useMemo(() => {
+    return typeof window !== 'undefined'
+      ? localStorage.getItem(LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION)
+      : null
+  }, [])
+
   return useMemo(() => {
-    return data?.find(
-      (org) => org.slug === slug || (selectedProject && org.id === selectedProject.organization_id)
-    )
-  }, [data, selectedProject, slug])
+    return data?.find((org) => {
+      if (slug !== undefined) return org.slug === slug
+      if (selectedProject !== undefined) return org.id === selectedProject.organization_id
+      if (localStorageSlug !== undefined) return org.slug === localStorageSlug
+      return undefined
+    })
+  }, [data, selectedProject, slug, localStorageSlug])
 }
diff --git a/studio/hooks/misc/useSelectedProject.ts b/studio/hooks/misc/useSelectedProject.ts
index 824bb14a073..d5c1d82dfc2 100644
--- a/studio/hooks/misc/useSelectedProject.ts
+++ b/studio/hooks/misc/useSelectedProject.ts
@@ -4,6 +4,5 @@ import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 export function useSelectedProject() {
   const { ref } = useParams()
   const { data } = useProjectDetailQuery({ ref })
-
   return data
 }
diff --git a/studio/lib/common/fetch/base.ts b/studio/lib/common/fetch/base.ts
index e7cdfdeceb1..1e338f28ca1 100644
--- a/studio/lib/common/fetch/base.ts
+++ b/studio/lib/common/fetch/base.ts
@@ -1,6 +1,7 @@
 import { auth } from 'lib/gotrue'
 import { isUndefined } from 'lodash'
 import { SupaResponse } from 'types/base'
+import { Session } from '@supabase/gotrue-js'
 
 export function handleError<T>(e: any, requestId: string): SupaResponse<T> {
   const message = e?.message ? `An error has occurred: ${e.message}` : 'An error has occurred'
@@ -86,15 +87,32 @@ export async function handleResponseError<T = unknown>(
   }
 }
 
+let currentSession: Session | null = null
+
+auth.onAuthStateChange((event, session) => {
+  currentSession = session
+})
+
 export async function getAccessToken() {
   // ignore if server-side
   if (typeof window === 'undefined') return ''
 
-  const {
-    data: { session },
-  } = await auth.getSession()
+  const aboutToExpire = currentSession?.expires_at
+    ? currentSession.expires_at - Math.ceil(Date.now() / 1000) < 60
+    : false
 
-  return session?.access_token
+  if (!currentSession || aboutToExpire) {
+    const {
+      data: { session },
+    } = await auth.getSession()
+
+    currentSession = session
+  }
+
+  // using memory version as gotrue-js can be a bit slow when using
+  // #getSession() as it has to read directly from local storage
+
+  return currentSession?.access_token
 }
 
 export async function constructHeaders(requestId: string, optionHeaders?: { [prop: string]: any }) {
diff --git a/studio/lib/constants/index.ts b/studio/lib/constants/index.ts
index 24743c4904f..3e3b66f24b2 100644
--- a/studio/lib/constants/index.ts
+++ b/studio/lib/constants/index.ts
@@ -85,3 +85,7 @@ export const STRIPE_PUBLIC_KEY =
   process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY || 'pk_test_XVwg5IZH3I9Gti98hZw6KRzd00v5858heG'
 
 export const USAGE_APPROACHING_THRESHOLD = 0.75
+
+export const LOCAL_STORAGE_KEYS = {
+  RECENTLY_VISITED_ORGANIZATION: 'supabase-organization',
+}
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx
index 6051ab68387..b0652d80767 100644
--- a/studio/pages/_app.tsx
+++ b/studio/pages/_app.tsx
@@ -62,6 +62,11 @@ dayjs.extend(relativeTime)
 
 dart(Prism)
 
+// [Joshen TODO] Once we settle on the new nav layout - we'll need a lot of clean up in terms of our layout components
+// a lot of them are unnecessary and introduce way too many cluttered CSS especially with the height styles that make
+// debugging way too difficult. Ideal scenario is we just have one AppLayout to control the height and scroll areas of
+// the dashboard, all other layout components should not be doing that
+
 function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
   const queryClient = useRootQueryClient()
   const [rootStore] = useState(() => new RootStore())
diff --git a/studio/pages/api/auth/[ref]/config.ts b/studio/pages/api/auth/[ref]/config.ts
index 34878dd37f3..aa9cd2c48bc 100644
--- a/studio/pages/api/auth/[ref]/config.ts
+++ b/studio/pages/api/auth/[ref]/config.ts
@@ -64,6 +64,9 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
     EXTERNAL_FACEBOOK_ENABLED: false,
     EXTERNAL_FACEBOOK_CLIENT_ID: null,
     EXTERNAL_FACEBOOK_SECRET: null,
+    EXTERNAL_FIGMA_ENABLED: false,
+    EXTERNAL_FIGMA_CLIENT_ID: null,
+    EXTERNAL_FIGMA_SECRET: null,
     EXTERNAL_GITHUB_ENABLED: false,
     EXTERNAL_GITHUB_CLIENT_ID: null,
     EXTERNAL_GITHUB_SECRET: null,
diff --git a/studio/pages/org/[slug]/general.tsx b/studio/pages/org/[slug]/general.tsx
index 245a3e23f05..d186365fad5 100644
--- a/studio/pages/org/[slug]/general.tsx
+++ b/studio/pages/org/[slug]/general.tsx
@@ -1,4 +1,4 @@
-import { GeneralSettings } from 'components/interfaces/Organization'
+import { GeneralSettings as GeneralSettingsLegacy } from 'components/interfaces/Organization'
 import { OrganizationLayout } from 'components/layouts'
 import Loading from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
@@ -14,7 +14,7 @@ const OrgGeneralSettings: NextPageWithLayout = () => {
       {selectedOrganization === undefined && isLoadingPermissions ? (
         <Loading />
       ) : (
-        <GeneralSettings />
+        <GeneralSettingsLegacy />
       )}
     </>
   )
diff --git a/studio/pages/org/[slug]/index.tsx b/studio/pages/org/[slug]/index.tsx
new file mode 100644
index 00000000000..b1e1245555c
--- /dev/null
+++ b/studio/pages/org/[slug]/index.tsx
@@ -0,0 +1,83 @@
+import Link from 'next/link'
+import { Button, IconPlus } from 'ui'
+
+import ProjectCard from 'components/interfaces/Home/ProjectList/ProjectCard'
+import ShimmeringCard from 'components/interfaces/Home/ProjectList/ShimmeringCard'
+import AppLayout from 'components/layouts/AppLayout/AppLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
+import AlertError from 'components/ui/AlertError'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
+
+const ProjectsPage: NextPageWithLayout = () => {
+  const {
+    data: allProjects,
+    error: projectsError,
+    isLoading: isLoadingProjects,
+    isError: isErrorProjects,
+    isSuccess: isSuccessProjects,
+  } = useProjectsQuery()
+
+  const organization = useSelectedOrganization()
+  const projects = allProjects?.filter((project) => project.organization_id === organization?.id)
+
+  return (
+    <ScaffoldContainer>
+      <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>
+          <div className="space-y-4">
+            <h4 className="text-lg">Projects</h4>
+            {isLoadingProjects && (
+              <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">
+                <ShimmeringCard />
+                <ShimmeringCard />
+              </ul>
+            )}
+            {isErrorProjects && (
+              <AlertError error={projectsError} subject="Failed to retrieve projects" />
+            )}
+            {isSuccessProjects && (
+              <>
+                {(projects?.length ?? 0) === 0 ? (
+                  <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 p-6 text-center">
+                    <div className="space-y-1">
+                      <p>No projects</p>
+                      <p className="text-sm text-scale-1100">
+                        Get started by creating a new project.
+                      </p>
+                    </div>
+                    <div>
+                      <Link href={`/new/${organization?.slug}`}>
+                        <a>
+                          <Button icon={<IconPlus />}>New Project</Button>
+                        </a>
+                      </Link>
+                    </div>
+                  </div>
+                ) : (
+                  <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} />
+                    ))}
+                  </ul>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </ScaffoldSection>
+    </ScaffoldContainer>
+  )
+}
+
+ProjectsPage.getLayout = (page) => <AppLayout>{page}</AppLayout>
+
+export default ProjectsPage
diff --git a/studio/pages/projects.tsx b/studio/pages/projects.tsx
index 8fe0df5780d..5b26b3ccdb1 100644
--- a/studio/pages/projects.tsx
+++ b/studio/pages/projects.tsx
@@ -5,11 +5,15 @@ import AlertError from 'components/ui/AlertError'
 import Connecting from 'components/ui/Loading/Loading'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useAutoProjectsPrefetch } from 'data/projects/projects-query'
-import { IS_PLATFORM } from 'lib/constants'
+import { useFlag } from 'hooks'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useProfile } from 'lib/profile'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
 import { NextPageWithLayout } from 'types'
 
 const ProjectsPage: NextPageWithLayout = () => {
+  const router = useRouter()
   const {
     data: organizations,
     isLoading: isOrganizationLoading,
@@ -19,24 +23,40 @@ const ProjectsPage: NextPageWithLayout = () => {
   useAutoProjectsPrefetch()
 
   const { isLoading: isProfileLoading } = useProfile()
-
   const isLoading = isOrganizationLoading || isProfileLoading
+  const navLayoutV2 = useFlag('navigationLayoutV2')
+  const hasWindowLoaded = typeof window !== 'undefined'
+
+  useEffect(() => {
+    if (navLayoutV2 && isSuccess && hasWindowLoaded) {
+      const localStorageSlug = localStorage.getItem(
+        LOCAL_STORAGE_KEYS.RECENTLY_VISITED_ORGANIZATION
+      )
+      const verifiedSlug = organizations.some((org) => org.slug === localStorageSlug)
+
+      if (organizations.length === 0) router.push('/new')
+      else if (localStorageSlug && verifiedSlug) router.push(`/org/${localStorageSlug}`)
+      else router.push(`/org/${organizations[0].slug}`)
+    }
+  }, [navLayoutV2, isSuccess, hasWindowLoaded])
 
   return (
     <>
-      {isLoading && (
-        <div className="flex h-full items-center justify-center space-x-2">
+      {navLayoutV2 && isLoading && (
+        <div className={`flex items-center justify-center h-full`}>
           <Connecting />
         </div>
       )}
 
       {isError && (
-        <div className="py-4 px-5">
+        <div
+          className={`py-4 px-5 ${navLayoutV2 ? 'h-full flex items-center justify-center' : ''}`}
+        >
           <AlertError subject="Failed to retrieve organizations" />
         </div>
       )}
 
-      {isSuccess && (
+      {!navLayoutV2 && isSuccess && (
         <div className="py-4 px-5">
           {IS_PLATFORM && (
             <div className="my-2">
diff --git a/studio/public/img/icons/figma-icon.svg b/studio/public/img/icons/figma-icon.svg
new file mode 100644
index 00000000000..38539ba64cd
--- /dev/null
+++ b/studio/public/img/icons/figma-icon.svg
@@ -0,0 +1 @@
+<svg width="300" height="300" viewBox="-50 0 300 300" xmlns="http://www.w3.org/2000/svg"><style>.st0{fill:#0acf83}.st1{fill:#a259ff}.st2{fill:#f24e1e}.st3{fill:#ff7262}.st4{fill:#1abcfe}</style><path id="path0_fill" class="st0" d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z"/><path id="path1_fill" class="st1" d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z"/><path id="path1_fill_1_" class="st2" d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z"/><path id="path2_fill" class="st3" d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z"/><path id="path3_fill" class="st4" d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z"/></svg>
diff --git a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
index e4442f75f71..78d1113b998 100644
--- a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
+++ b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
@@ -666,6 +666,44 @@ const EXTERNAL_PROVIDER_FACEBOOK = {
   },
 }
 
+const EXTERNAL_PROVIDER_FIGMA = {
+  $schema: JSON_SCHEMA_VERSION,
+  type: 'object',
+  title: 'Figma',
+  properties: {
+    EXTERNAL_FIGMA_ENABLED: {
+      title: 'Figma enabled',
+      type: 'boolean',
+    },
+    EXTERNAL_FIGMA_CLIENT_ID: {
+      title: 'Client ID',
+      type: 'string',
+    },
+    EXTERNAL_FIGMA_SECRET: {
+      title: 'Client Secret',
+      type: 'string',
+      isSecret: true,
+    },
+  },
+  validationSchema: object().shape({
+    EXTERNAL_FIGMA_ENABLED: boolean().required(),
+    EXTERNAL_FIGMA_CLIENT_ID: string().when('EXTERNAL_FIGMA_ENABLED', {
+      is: true,
+      then: (schema) => schema.required('Client ID is required'),
+      otherwise: (schema) => schema,
+    }),
+    EXTERNAL_FIGMA_SECRET: string().when('EXTERNAL_FIGMA_ENABLED', {
+      is: true,
+      then: (schema) => schema.required('Client Secret is required'),
+      otherwise: (schema) => schema,
+    }),
+  }),
+  misc: {
+    iconKey: 'figma-icon',
+    requiresRedirect: true,
+  },
+}
+
 const EXTERNAL_PROVIDER_GITHUB = {
   $schema: JSON_SCHEMA_VERSION,
   type: 'object',
@@ -1283,6 +1321,7 @@ export const PROVIDERS_SCHEMAS = [
   EXTERNAL_PROVIDER_BITBUCKET,
   EXTERNAL_PROVIDER_DISCORD,
   EXTERNAL_PROVIDER_FACEBOOK,
+  EXTERNAL_PROVIDER_FIGMA,
   EXTERNAL_PROVIDER_GITHUB,
   EXTERNAL_PROVIDER_GITLAB,
   EXTERNAL_PROVIDER_GOOGLE,
diff --git a/studio/stores/jsonSchema/auth_gotrue_config.json b/studio/stores/jsonSchema/auth_gotrue_config.json
index 9d820c8d39b..7f87191cb6e 100644
--- a/studio/stores/jsonSchema/auth_gotrue_config.json
+++ b/studio/stores/jsonSchema/auth_gotrue_config.json
@@ -157,6 +157,18 @@
       "title": "Facebook secret",
       "type": "string"
     },
+    "EXTERNAL_FIGMA_ENABLED": {
+      "title": "Figma enabled",
+      "type": "boolean"
+    },
+    "EXTERNAL_FIGMA_CLIENT_ID": {
+      "title": "Figma client ID",
+      "type": "string"
+    },
+    "EXTERNAL_FIGMA_SECRET": {
+      "title": "Figma secret",
+      "type": "string"
+    },
     "EXTERNAL_GITHUB_ENABLED": {
       "title": "GitHub enabled",
       "type": "boolean"
diff --git a/supabase/config.toml b/supabase/config.toml
index 7b1702d2d8e..f0c3d816b66 100644
--- a/supabase/config.toml
+++ b/supabase/config.toml
@@ -59,8 +59,8 @@ double_confirm_changes = true
 enable_confirmations = false
 
 # Use an external OAuth provider. The full list of providers are: `apple`, `azure`, `bitbucket`,
-# `discord`, `facebook`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`, `twitch`,
-# `twitter`, `slack`, `spotify`, `workos`, `zoom`.
+# `discord`, `facebook`, `figma`, `github`, `gitlab`, `google`, `keycloak`, `linkedin`, `notion`,
+# `twitch`, `twitter`, `slack`, `spotify`, `workos`, `zoom`.
 [auth.external.apple]
 enabled = false
 client_id = ""