diff --git a/README.md b/README.md
index 61f7e504e2..5cd68c3014 100644
--- a/README.md
+++ b/README.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
 - [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Auto-generated APIs.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Functions.
   - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
diff --git a/apps/docs/components/Navigation/Footer.tsx b/apps/docs/components/Navigation/Footer.tsx
index 600f81f40e..32f1b4f73d 100644
--- a/apps/docs/components/Navigation/Footer.tsx
+++ b/apps/docs/components/Navigation/Footer.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { Button } from 'ui'
 import { primaryLinks, secondaryLinks } from '~/data/footer'
-import { LayoutMainContent } from '../../layouts/DefaultLayout'
+import { LayoutMainContent } from '~/layouts/DefaultLayout'
 
 const Footer = () => (
   <LayoutMainContent className="pt-0">
@@ -75,20 +75,18 @@ const Footer = () => (
         </Button>
         <Button type="text" asChild>
           <a href="https://youtube.com/c/supabase" target="_blank" rel="noreferrer noopener">
-            <a>
-              <svg
-                width="16"
-                height="17"
-                viewBox="0 0 16 17"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
-                  fill="var(--colors-scale9)"
-                />
-              </svg>
-            </a>
+            <svg
+              width="16"
+              height="17"
+              viewBox="0 0 16 17"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
+                fill="var(--colors-scale9)"
+              />
+            </svg>
           </a>
         </Button>
         <Button type="text" asChild>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 6dbec8a0a3..07a43a57d9 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -349,6 +349,11 @@ export const SocialLoginItems = [
     icon: '/docs/img/icons/discord-icon',
     url: '/guides/auth/social-login/auth-discord',
   },
+  {
+    name: 'Kakao',
+    icon: '/docs/img/icons/kakao-icon',
+    url: '/guides/auth/social-login/auth-kakao',
+  },
   {
     name: 'Keycloak',
     icon: '/docs/img/icons/keycloak-icon',
diff --git a/apps/docs/components/reference/RefSectionHandler.tsx b/apps/docs/components/reference/RefSectionHandler.tsx
index 26b3f0350a..e100cfbcb2 100644
--- a/apps/docs/components/reference/RefSectionHandler.tsx
+++ b/apps/docs/components/reference/RefSectionHandler.tsx
@@ -60,6 +60,7 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
   const pageTitle = getPageTitle()
   const section = props.sections.find((section) => section.slug === slug)
   const fullTitle = `${pageTitle}${section ? ` - ${section.title}` : ''}`
+  const path = router.asPath.replace('/crawlers', '')
 
   return (
     <>
@@ -72,7 +73,7 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
           content={`https://supabase.com/docs/img/supabase-og-image.png`}
         />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <link rel="canonical" href={`https://supabase.com${router.basePath}${router.asPath}`} />
+        <link rel="canonical" href={`https://supabase.com${router.basePath}${path}`} />
       </Head>
       {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
       <RefSubLayout>
diff --git a/apps/docs/data/authProviders.ts b/apps/docs/data/authProviders.ts
index a1053a3077..9694f1daf1 100644
--- a/apps/docs/data/authProviders.ts
+++ b/apps/docs/data/authProviders.ts
@@ -79,6 +79,16 @@ const authProviders = [
     selfHosted: true,
     authType: 'social',
   },
+  {
+    name: 'Kakao',
+    logo: '/docs/img/icons/kakao-icon',
+    href: '/guides/auth/social-login/auth-kakao',
+    official: true,
+    supporter: 'Supabase',
+    platform: true,
+    selfHosted: true,
+    authType: 'social',
+  },
   {
     name: 'Keycloak',
     logo: '/docs/img/icons/keycloak-icon',
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 1ddc56fd1f..aeb409b091 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -1,5 +1,5 @@
-import '../../../packages/ui/build/css/themes/light.css'
 import '../../../packages/ui/build/css/themes/dark.css'
+import '../../../packages/ui/build/css/themes/light.css'
 
 import 'config/code-hike.scss'
 import '../styles/main.scss?v=1.0.0'
@@ -13,6 +13,7 @@ import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import { AppPropsWithLayout } from 'types'
 import { CommandMenuProvider } from 'ui'
+import { TabsProvider } from 'ui/src/components/Tabs'
 import Favicons from '~/components/Favicons'
 import SiteLayout from '~/layouts/SiteLayout'
 import { API_URL, IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'
@@ -150,9 +151,11 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       <AuthContainer>
         <ThemeProvider>
           <CommandMenuProvider site="docs">
-            <SiteLayout>
-              <Component {...pageProps} />
-            </SiteLayout>
+            <TabsProvider>
+              <SiteLayout>
+                <Component {...pageProps} />
+              </SiteLayout>
+            </TabsProvider>
           </CommandMenuProvider>
         </ThemeProvider>
       </AuthContainer>
diff --git a/apps/docs/pages/guides/ai/engineering-for-scale.mdx b/apps/docs/pages/guides/ai/engineering-for-scale.mdx
index 663550fc4a..0621207930 100644
--- a/apps/docs/pages/guides/ai/engineering-for-scale.mdx
+++ b/apps/docs/pages/guides/ai/engineering-for-scale.mdx
@@ -12,7 +12,7 @@ Content sources for vectors can be extremely large. As you grow you should run y
 
 ## Simple workloads
 
-For small workloads it's typical to store your data in a single database.
+For small workloads, it's typical to store your data in a single database.
 
 If you've used [Vecs](/docs/guides/ai/vecs-python-client) to create 3 different collections, you can expose collections to your web or mobile application using [views](/docs/guides/database/tables#views):
 
@@ -93,9 +93,9 @@ docs.query(
 
 ### Accessing external collections using Wrappers
 
-Supabase supports [Foreign Data Wrappers](/blog/postgres-foreign-data-wrappers-rust). Wrappers allow you connect two databases together so that you can query them over the network.
+Supabase supports [Foreign Data Wrappers](/blog/postgres-foreign-data-wrappers-rust). Wrappers allow you to connect two databases together so that you can query them over the network.
 
-This involves 2 steps: connecting to your remote database from the primary, and creating a Foreign Table.
+This involves 2 steps: connecting to your remote database from the primary and creating a Foreign Table.
 
 #### Connecting your remote database
 
@@ -140,7 +140,7 @@ const { data, error } = await supabase
 
 ### Enterprise architecture
 
-This diagram provides an example architecture, allowing you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need, in this example we show one only:
+This diagram provides an example architecture that allows you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need (in this example we only show one):
 
 <div>
   <img
diff --git a/apps/docs/pages/guides/ai/managing-collections.mdx b/apps/docs/pages/guides/ai/managing-collections.mdx
index 5849f6aa52..58e700e292 100644
--- a/apps/docs/pages/guides/ai/managing-collections.mdx
+++ b/apps/docs/pages/guides/ai/managing-collections.mdx
@@ -7,7 +7,7 @@ export const meta = {
   sidebar_label: 'Managing collections',
 }
 
-A collection is an group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
+A collection is a group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
 
 Supabase provides a [Python client](/docs/guides/ai/vecs-python-client) called `vecs` for managing unstructured vector stores in Postgres. If you come from a data science background, this unstructured data approach will feel familiar. If you are more interested in a structured data approach, see [Vector columns](/docs/guides/ai/vector-columns) or read our guide on [Structured & Unstructured Embeddings](/docs/guides/ai/structured-unstructured-embeddings).
 
@@ -32,7 +32,7 @@ vx = vecs.create_client(DB_CONNECTION)
 
 ### Create collection
 
-You can create a collection to store vectors specifying the collections name and the number of dimensions in the vectors you intend to store.
+You can create a collection to store vectors specifying the collection's name and the number of dimensions in the vectors you intend to store.
 
 ```python
 docs = vx.create_collection(name="docs", dimension=3)
@@ -75,7 +75,7 @@ docs.upsert(
 Collections can be queried immediately after being created.
 However, for good performance, the collection should be indexed after records have been upserted.
 
-Indexes should be created **after** the collection has been populated with records. Building an index on an empty collection will result in significantly reduced recall. Once the index has been created you can still upsert new documents into the collection but you should rebuild the index if the size of the collection more than doubles.
+Indexes should be created **after** the collection has been populated with records. Building an index on an empty collection will significantly reduce recall. Once the index has been created you can still upsert new documents into the collection but you should rebuild the index if the size of the collection more than doubles.
 
 Only one index may exist per-collection. By default, creating an index will replace any existing index.
 
diff --git a/apps/docs/pages/guides/auth.mdx b/apps/docs/pages/guides/auth.mdx
index f215fbad07..ebc76e00d8 100644
--- a/apps/docs/pages/guides/auth.mdx
+++ b/apps/docs/pages/guides/auth.mdx
@@ -91,20 +91,20 @@ const getURL = () => {
   let url =
     process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
     process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
-    'http://localhost:3000/';
+    'http://localhost:3000/'
   // Make sure to include `https://` when not localhost.
-  url = url.includes('http') ? url : `https://${url}`;
-  // Make sure to including trailing `/`.
-  url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
-  return url;
-};
+  url = url.includes('http') ? url : `https://${url}`
+  // Make sure to include a trailing `/`.
+  url = url.charAt(url.length - 1) === '/' ? url : `${url}/`
+  return url
+}
 
 const { data, error } = await supabase.auth.signInWithOAuth({
-  provider: 'github'
+  provider: 'github',
   options: {
-    redirectTo: getURL()
-  }
-}
+    redirectTo: getURL(),
+  },
+})
 ```
 
 #### Mobile deep linking URIs
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
index 14738f7307..fc23df156a 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
@@ -14,16 +14,8 @@ This submodule provides convenience helpers for implementing user authentication
 
 ## Install the Next.js helper library
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-<TabPanel id="npm" label="npm">
-
-```sh
-npm install @supabase/auth-helpers-nextjs
+```sh Terminal
+npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
 ```
 
 This library supports the following tooling versions:
@@ -33,31 +25,10 @@ This library supports the following tooling versions:
 
 Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
 
-```sh
+```sh Terminal
 npm install @supabase/auth-helpers-react
 ```
 
-</TabPanel>
-<TabPanel id="yarn" label="Yarn">
-
-```sh
-yarn add @supabase/auth-helpers-nextjs
-```
-
-This library supports the following tooling versions:
-
-- Node.js: `^10.13.0 || >=12.0.0`
-- Next.js: `>=10`
-
-Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
-
-```sh
-yarn add @supabase/auth-helpers-react
-```
-
-</TabPanel>
-</Tabs>
-
 ## Set up environment variables
 
 Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index b7c1287de3..ade0d0405e 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -29,7 +29,7 @@ If you are using the `pages` directory, check out [Auth Helpers in Next.js Pages
 
 Use the `create-next-app` command and the `with-supabase` template to automate the configuration of cookie-based auth with the Next.js Auth Helpers.
 
-```sh
+```sh Terminal
 npx create-next-app -e with-supabase
 ```
 
@@ -54,7 +54,7 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
 
 Run the development server and navigate to http://localhost:3000.
 
-```bash
+```sh Terminal
 npm run dev
 ```
 
@@ -62,29 +62,10 @@ npm run dev
 
 ### Install Next.js Auth Helpers library
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-
-<TabPanel id="npm" label="npm">
-
-```sh
-npm install @supabase/auth-helpers-nextjs
+```sh Terminal
+npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
 ```
 
-</TabPanel>
-<TabPanel id="yarn" label="Yarn">
-
-```sh
-yarn add @supabase/auth-helpers-nextjs
-```
-
-</TabPanel>
-</Tabs>
-
 ### Declare Environment Variables
 
 Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
@@ -645,7 +626,7 @@ const supabase = createClientComponentClient({ isSingleton: false })
 
 <div className="video-container">
   <iframe
-    src="https://www.youtube-nocookie.com/embed/SUS1t6Kq7-8"
+    src="https://www.youtube-nocookie.com/embed/ywvXGW6P4Gs"
     frameBorder="1"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     allowFullScreen
diff --git a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
index c2e092a2ab..e1769bca84 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
@@ -22,36 +22,14 @@ This submodule provides convenience helpers for implementing user authentication
 
 ## Install the Remix helper library
 
-<Tabs
-  scrollable
-  size="small"
-  type="underlined"
-  defaultActiveId="npm"
->
-<TabPanel id="npm" label="npm">
-
-```sh
-npm install @supabase/auth-helpers-remix
+```sh Terminal
+npm install @supabase/auth-helpers-remix @supabase/supabase-js
 ```
 
 This library supports the following tooling versions:
 
 - Remix: `>=1.7.2`
 
-</TabPanel>
-<TabPanel id="yarn" label="Yarn">
-
-```sh
-yarn add @supabase/auth-helpers-remix
-```
-
-This library supports the following tooling versions:
-
-- Remix: `>=1.7.2`
-
-</TabPanel>
-</Tabs>
-
 ## Set up environment variables
 
 Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example).
diff --git a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
index a9d4a88378..bf5cb06403 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
@@ -16,7 +16,7 @@ This submodule provides convenience helpers for implementing user authentication
 This library supports Node.js `^16.15.0`.
 
 ```sh Terminal
-npm install @supabase/auth-helpers-sveltekit
+npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
 ```
 
 ### Declare Environment Variables
diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/pages/guides/auth/server-side-rendering.mdx
index 362197b60b..7ba79d757f 100644
--- a/apps/docs/pages/guides/auth/server-side-rendering.mdx
+++ b/apps/docs/pages/guides/auth/server-side-rendering.mdx
@@ -7,58 +7,40 @@ export const meta = {
   description: 'Render pages with user information on the server.',
 }
 
-Single-page apps with server-side rendering (SSR) is a popular way to optimize rendering
-performance and leverage advanced caching strategies.
+Single-page apps with server-side rendering (SSR) is a popular way to optimize rendering performance and leverage advanced caching strategies.
 
-Supabase Auth supports server-side rendering when you need access to user
-information, or your server needs to authorize API requests on behalf of your
-user to render content.
+Supabase Auth supports server-side rendering when you need access to user information, or your server needs to authorize API requests on behalf of your user to render content.
 
-When a user authenticates with Supabase Auth, two pieces of information are
-issued by the server:
+When a user authenticates with Supabase Auth, two pieces of information are issued by the server:
 
 1. **Access token** in the form of a JWT.
 2. **Refresh token** which is a randomly generated string.
 
-Most Supabase projects have their auth server listening on
-`<project-ref>.supabase.co/auth/v1`, thus the access token and refresh token are
-set as `sb-access-token` and `sb-refresh-token` cookies on the
-`<project-ref>.supabase.co` domain.
+Most Supabase projects have their auth server listening on `<project-ref>.supabase.co/auth/v1`, thus the access token and refresh token are set as `sb-access-token` and `sb-refresh-token` cookies on the `<project-ref>.supabase.co` domain.
 
 <Admonition type="note">
 
-These cookie names are for internal Supabase use only and may change without
-warning. They are included in this guide for illustration purposes only.
+These cookie names are for internal Supabase use only and may change without warning. They are included in this guide for illustration purposes only.
 
 </Admonition>
 
-Web browsers limit access to cookies across domains, consistent with the
-[Same-Origin Policy
-(SOP)](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy).
+Web browsers limit access to cookies across domains, consistent with the [Same-Origin Policy (SOP)](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy).
 
-Your web application cannot access these cookies,
-nor will these cookies be sent to your application's server.
+Your web application cannot access these cookies, nor will these cookies be sent to your application's server.
 
 ## Understanding the authentication flow
 
-When you call one of the `signIn` methods, the client library running in the
-browser sends the request to the Supabase Auth server. The Auth server determines
-whether to verify a phone number, email and password combination, a Magic Link,
-or use a social login (if you have any setup in your project).
+When you call one of the `signIn` methods, the client library running in the browser sends the request to the Supabase Auth server. The Auth server determines whether to verify a phone number, email and password combination, a Magic Link, or use a social login (if you have any setup in your project).
 
-Upon successful verification of the identity of the user, the Supabase Auth
-server redirects the user back to your single-page app.
+Upon successful verification of the identity of the user, the Supabase Auth server redirects the user back to your single-page app.
 
 <Admonition type="tip">
 
-You can configure [redirects URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) in the Supabase Dashboard. You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards)
-like `*` and `**` to allow redirects to different forms of URLs.
+You can configure [redirects URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) in the Supabase Dashboard. You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards) like `*` and `**` to allow redirects to different forms of URLs.
 
 </Admonition>
 
-Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The **PKCE** flow is generally preferred when on the server.
-It introduces a few additional steps which guard a against replay and URL capture attacks. Unlike the implicit flow, it also allows users to access the
-`access_token` and `refresh_token` on the server.
+Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The **PKCE** flow is generally preferred when on the server. It introduces a few additional steps which guard a against replay and URL capture attacks. Unlike the implicit flow, it also allows users to access the `access_token` and `refresh_token` on the server.
 
 <Accordion
   type="default"
@@ -74,30 +56,23 @@ It introduces a few additional steps which guard a against replay and URL captur
         id={`ssr-implicit-flow`}
       >
 
-When using the implicit flow, a redirect URL will be returned with the following structure:
-```
-https://yourapp.com/...#access_token=<...>&refresh_token=<...>&...
-```
+        When using the implicit flow, a redirect URL will be returned with the following structure:
+        ```
+        https://yourapp.com/...#access_token=<...>&refresh_token=<...>&...
+        ```
 
-The first access and refresh tokens after a successful verification are
-contained in the URL fragment (anything after the `#` sign) of the redirect
-location. This is intentional and not configurable.
+        The first access and refresh tokens after a successful verification are contained in the URL fragment (anything after the `#` sign) of the redirect location. This is intentional and not configurable.
 
-The client libraries are designed to listen for this type of URL, extract
-the access token, refresh token and some extra information from it, and finally
-persist it in local storage for further use by the library and your app.
+        The client libraries are designed to listen for this type of URL, extract the access token, refresh token and some extra information from it, and finally persist it in local storage for further use by the library and your app.
 
-<Admonition type="info">
+        <Admonition type="info">
+
+        Web browsers do not send the URL fragment to the server they're making the request to. Since you may not be hosting the single-page app on a server under your direct control (such as on GitHub Pages or other freemium hosting providers), we want to prevent hosting services from getting access to your user's authorization credentials by default.
+        
+        Even if the server is under your direct control, `GET` requests and their full URLs are often logged. This approach also avoids leaking credentials in request or access logs. If you wish to obtain the `access_token` and `refresh_token` on a server, please consider using the PKCE flow.
+
+        </Admonition>
 
-Web browsers do not send the URL fragment to the server they're making the
-request to. Since you may not be hosting the single-page app on a server under
-your direct control (such as on GitHub Pages or other freemium hosting
-providers), we want to prevent hosting services from getting access to your
-user's authorization credentials by default. Even if the server is under your
-direct control, `GET` requests and their full URLs are often logged. This
-approach also avoids leaking credentials in request or access logs. If you wish to obtain the
-`access_token` and `refresh_token` on a server, please consider using the PKCE flow.
-</Admonition>
       </Accordion.Item>
     </div>
     <div className="border-b pb-3">
@@ -105,18 +80,21 @@ approach also avoids leaking credentials in request or access logs. If you wish
         header={<span className="text-scale-1200 font-bold">PKCE</span>}
         id={`ssr-pkce-flow`}
       >
+      
         When using the PKCE flow, a redirect URL will be returned with the following structure:
         ```
         https://yourapp.com/...?code=<...>
         ```
         The `code` parameter is commonly known as the Auth Code and can be exchanged for an access token by calling `exchangeCodeForSession(code)`.
+
         <Admonition type="info">
-          For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You
-          will need to restart the authentication flow from scratch if you wish to obtain a new access token.
+
+        For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You will need to restart the authentication flow from scratch if you wish to obtain a new access token.
+        
         </Admonition>
 
-        As the flow is run server side,  `localStorage` may not be available. You may configure the client library to use a custom storage adapter an alternate backing storage such as cookies
-        by setting the `storage` option to an object with the following methods:
+        As the flow is run server side, `localStorage` may not be available. You may configure the client library to use a custom storage adapter an alternate backing storage such as cookies by setting the `storage` option to an object with the following methods:
+
         ```js
         const customStorageAdapter: SupportedStorage = {
           getItem: (key) => {
@@ -161,26 +139,19 @@ approach also avoids leaking credentials in request or access logs. If you wish
              }
         )
         ```
-        You can read more about the PKCE flow [here](https://oauth.net/2/pkce/)
+        [Learn more](https://oauth.net/2/pkce/) about the PKCE flow.
+
       </Accordion.Item>
     </div>
 </Accordion>
 
 ## Bringing it together
 
-As seen from the authentication flow, the initial request after successful
-login made by the browser to your app's server after user login **does not
-contain any information about the user**. This is because first the client-side
-JavaScript library must run before it makes the access and refresh token
-available to your server.
+As seen from the authentication flow, the initial request after successful login made by the browser to your app's server after user login **does not contain any information about the user**. This is because first the client-side JavaScript library must run before it makes the access and refresh token available to your server.
 
-It is very important to make sure that the redirect route right after login
-works without any server-side rendering. Other routes requiring authorization
-do not have the same limitation, provided you send the access and refresh
-tokens to your server.
+It is very important to make sure that the redirect route right after login works without any server-side rendering. Other routes requiring authorization do not have the same limitation, provided you send the access and refresh tokens to your server.
 
-This is traditionally done by setting cookies. Here's an example you
-can add to the root of your application:
+This is traditionally done by setting cookies. Here's an example you can add to the root of your application:
 
 ```typescript
 supabase.auth.onAuthStateChange((event, session) => {
@@ -197,15 +168,9 @@ supabase.auth.onAuthStateChange((event, session) => {
 })
 ```
 
-This uses the standard
-[`document.cookie` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)
-to set cookies on all paths of your app's domain. All subsequent requests
-made by the browser to your app's server include the `my-access-token` and
-`my-refresh-token` cookies (the names of the cookies and additional
-parameters can be changed).
+This uses the standard [`document.cookie` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie) to set cookies on all paths of your app's domain. All subsequent requests made by the browser to your app's server include the `my-access-token` and `my-refresh-token` cookies (the names of the cookies and additional parameters can be changed).
 
-In your server-side rendering code you can now access user and session
-information:
+In your server-side rendering code you can now access user and session information:
 
 ```typescript
 const refreshToken = req.cookies['my-refresh-token']
@@ -228,23 +193,13 @@ if (refreshToken && accessToken) {
 await supabase.auth.getUser()
 ```
 
-Use `setSession({ access_token, refresh_token })` instead of
-`setSession(refreshToken)` or `getUser(accessToken)` as refresh tokens or access tokens alone do not properly identify a user session.
+Use `setSession({ access_token, refresh_token })` instead of `setSession(refreshToken)` or `getUser(accessToken)` as refresh tokens or access tokens alone do not properly identify a user session.
 
 Access tokens are valid only for a short amount of time.
 
-Even though refresh tokens are long-lived, there is no guarantee that a user
-has an active session. They may have logged out and your application failed to
-remove the `my-refresh-token` cookie, or some other failure occurred that left
-a stale refresh token in the browser. Furthermore, a refresh token can only be
-used a few seconds after it was first used. Only use a refresh token if the
-access token is about to expire, which will avoid the introduction of difficult
-to diagnose logout bugs in your app.
+Even though refresh tokens are long-lived, there is no guarantee that a user has an active session. They may have logged out and your application failed to remove the `my-refresh-token` cookie, or some other failure occurred that left a stale refresh token in the browser. Furthermore, a refresh token can only be used a few seconds after it was first used. Only use a refresh token if the access token is about to expire, which will avoid the introduction of difficult to diagnose logout bugs in your app.
 
-A good practice is to handle unauthorized errors by deferring rendering the
-page in the browser instead of in the server. Some user information is
-contained in the access token though, so in certain cases, you may be able to
-use this potentially stale information to render a page.
+A good practice is to handle unauthorized errors by deferring rendering the page in the browser instead of in the server. Some user information is contained in the access token though, so in certain cases, you may be able to use this potentially stale information to render a page.
 
 ## Frequently Asked Questions
 
@@ -256,57 +211,36 @@ To improve experience for your users, we recommend redirecting users to one spec
 
 ### How do I make the cookies `HttpOnly`?
 
-This is not necessary. Both the access token and refresh token are designed to
-be passed around to different components in your application. The browser-based
-side of your application needs access to the refresh token to properly maintain
-a browser session anyway.
+This is not necessary. Both the access token and refresh token are designed to be passed around to different components in your application. The browser-based side of your application needs access to the refresh token to properly maintain a browser session anyway.
 
 ### My server is getting invalid refresh token errors. What's going on?
 
-It is likely that the refresh token sent from the browser to your server is
-stale. Make sure the `onAuthStateChange` listener callback is free of bugs and
-is registered relatively early in your application's lifetime.
+It is likely that the refresh token sent from the browser to your server is stale. Make sure the `onAuthStateChange` listener callback is free of bugs and is registered relatively early in your application's lifetime
 
-When you receive this error on the server-side, try to defer
-rendering to the browser where the client library can access an up-to-date
-refresh token and present the user with a better experience.
+When you receive this error on the server-side, try to defer rendering to the browser where the client library can access an up-to-date refresh token and present the user with a better experience.
 
 ### Should I set a shorter `Max-Age` parameter on the cookies?
 
-The `Max-Age` or `Expires` cookie parameters only control whether the browser
-sends the value to the server. Since a refresh token represents the
-long-lived authentication session of the user on that browser, setting a short
-`Max-Age` or `Expires` parameter on the cookies only results in a degraded
-user experience.
+The `Max-Age` or `Expires` cookie parameters only control whether the browser sends the value to the server. Since a refresh token represents the long-lived authentication session of the user on that browser, setting a short `Max-Age` or `Expires` parameter on the cookies only results in a degraded user experience.
 
-The only way to ensure that a user has logged out or their session has ended
-is to get the user's details with `getUser()`.
+The only way to ensure that a user has logged out or their session has ended is to get the user's details with `getUser()`.
 
 ### What should I use for the `SameSite` property?
 
-Make sure you [understand the behavior of the property in different
-situations](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)
-as some properties can degrade the user experience.
+Make sure you [understand the behavior of the property in different situations](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite) as some properties can degrade the user experience.
 
-A good default is to use `Lax` which sends cookies when users are
-navigating to your site. Cookies typically require the `Secure` attribute,
-which only sends them over HTTPS. However, this can be a problem when
-developing on `localhost`.
+A good default is to use `Lax` which sends cookies when users are navigating to your site. Cookies typically require the `Secure` attribute, which only sends them over HTTPS. However, this can be a problem when developing on `localhost`.
 
 ### Can I use server-side rendering with a CDN or cache?
 
-Yes, but you need to be careful to include at least the refresh token cookie
-value in the cache key. Otherwise you may be accidentally serving pages with
-data belonging to different users!
+Yes, but you need to be careful to include at least the refresh token cookie value in the cache key. Otherwise you may be accidentally serving pages with data belonging to different users!
 
-Also be sure you set proper cache control headers. We recommend invalidating
-cache keys every hour or less.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page
+Also be sure you set proper cache control headers. We recommend invalidating cache keys every hour or less.
 
 ### Which authentication flows have PKCE support?
 
 At present, PKCE is supported on the Magic Link, OAuth, Sign Up, and Password Recovery routes. These correspond to the `signInWithOtp`, `signInWithOAuth`, `signUp`, and `resetPasswordForEmail` methods on the Supabase client library. When using PKCE with Phone and Email OTPs, there is no behavior change with respect to the implicit flow - an access token will be returned in the body when a request is successful.
 
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx
index 3f85b32427..2285fbd35a 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx
+++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx
@@ -4,95 +4,53 @@ import AppleSecretGenerator from '~/components/AppleSecretGenerator'
 export const meta = {
   id: 'auth-apple',
   title: 'Login with Apple',
-  description: 'Add Apple OAuth to your Supabase project',
+  description: 'Use Sign in with Apple with Supabase',
 }
 
-To enable Apple Auth for your project, you need to set up an Apple OAuth application and add the application credentials to your Supabase Dashboard.
+Supabase Auth supports using [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) on the web and in native apps for iOS, macOS, watchOS or tvOS.
 
 ## Overview
 
-Apple OAuth consists of six broad steps:
+To support Sign in with Apple, you need to configure the [Apple provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
 
-- Obtaining an `App Id` with “Sign In with Apple” capabilities.
-- Obtaining a `Services Id` - this will serve as the `client_id`.
-- Obtaining a `secret key` that will be used to get our `client_secret`.
-- Generating the `client_secret` using the `secret key`.
-- Add your `client id` and `client secret` keys to your [Supabase Project](https://supabase.com/dashboard).
-- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
+There are three general ways to use Sign in with Apple, depending on the application you're trying to build:
 
-## Access your Apple Developer account
+- Sign in on the web or in web-based apps
+  - Using an OAuth flow initiated by Supabase Auth using the [Sign in with Apple REST API](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api).
+  - Using [Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) directly in the browser, usually suitable for websites.
+- Sign in natively inside iOS, macOS, watchOS or tvOS apps using [Apple's Authentication Services](https://developer.apple.com/documentation/authenticationservices)
 
-- Go to [developer.apple.com](https://developer.apple.com).
-- Click on `Account` at the top right to log in.
+In some cases you're able to use the OAuth flow within web-based native apps such as with [React Native](https://reactnative.dev), [Expo](https://expo.dev) or other similar frameworks. It is best practice to use native Sign in with Apple capabilities on those platforms instead.
 
-![Apple Developer Portal.](/docs/img/guides/auth-apple/apple-developer-portal.png)
+Before you can use Sign in with Apple, you need to obtain an [Apple Developer](https://developer.apple.com) account.
 
-## Obtain an App ID
+## Using the OAuth flow for web
 
-- Go to `Certificates, Identifiers & Profiles`.
-- Click on `Identifiers` at the left.
-- Click on the `+` sign in the upper left next to `Identifiers`.
-- Select `App IDs` and click `Continue`.
-- Select type `App` and click `Continue`.
-- Fill out your app information:
-  - App description.
-  - Bundle ID (Apple recommends reverse-domain name style, so if your domain is acme.com and your app is called roadrunner, use: "com.acme.roadrunner").
-  - Scroll down and check `Sign In With Apple`.
-  - Click `Continue` at the top right.
-  - Click `Register` at the top right.
+Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly.
 
-## Obtain a Services ID
+Behind the scenes, Supabase Auth uses the [REST APIs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api) provided by Apple.
 
-This will serve as the `client_id` when you make API calls to authenticate the user.
+To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library:
 
-- Go to `Certificates, Identifiers & Profiles`.
-- Click on `Identifiers` at the left.
-- Click on the `+` sign in the upper left next to `Identifiers`.
-- Select `Services IDs` and click `Continue`.
-- Fill out your information:
-  - App description.
-  - Bundle ID (you can't use the same Bundle ID from the previous step, but you can just add something to the beginning, such as "app." to make it app.com.acme.roadrunner").
-  - SAVE THIS ID -- this ID will become your `client_id` later.
-  - Click `Continue` at the top right.
-  - Click `Register` at the top right.
+```ts
+supabase.auth.signInWithOAuth({
+  provider: 'apple',
+})
+```
 
-## Find your callback URL
+This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.
 
-<SocialProviderSetup provider="Apple" />
+### Configuration
 
-## Configure your Services ID
+You will require the following information:
 
-- Under `Identifiers`, click on your newly-created Services ID.
-- Check the box next to `Sign In With Apple` to enable it.
-- Click `Configure` to the right.
-- Make sure your newly created Bundle ID is selected under `Primary App ID`
-- Add your domain to the `Domains and Subdomains` box (do not add `https://`, just add the domain).
-- In the `Return URLs` box, type the callback URL of your app which you found in the previous step and click `Next` at the bottom right.
-- Click `Done` at the bottom.
-- Click `Continue` at the top right.
-- Click `Save` at the top right.
-
-## Download your secret key
-
-Now you'll need to download a `secret key` file from Apple that will be used to generate your `client_secret`.
-
-- Go to `Certificates, Identifiers & Profiles`.
-- Click on `Keys` at the left.
-- Click on the `+` sign in the upper left next to `Keys`.
-- Enter a `Key Name`.
-- Check `Sign In with Apple`.
-- Click `Configure` to the right.
-- Select your newly-created Services ID from the dropdown selector.
-- Click `Save` at the top right.
-- Click `Continue` at the top right.
-- Click `Register` at the top right.
-- Click `Download` at the top right.
-- Save the downloaded file -- this contains your "secret key" that will be used to generate your `client_secret`.
-- Click `Done` at the top right.
-
-## Generate a client secret
-
-You need to configure a client secret when using Sign in with Apple for Web. This is a specially crafted [JWT signed with a secret key downloaded from Apple's Developer Center](https://developer.apple.com/documentation/signinwithapplerestapi/generate_and_validate_tokens).
+1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console.
+2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console.
+3. An **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
+4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`.
+5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `<project-id>.supabase.co` while the redirect URL is `https://<project-id>.supabase.co/auth/v1/callback`.
+6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar!
+7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers).
 
 <Admonition>
   Use this tool to generate a new Apple client secret. No keys leave your browser!
@@ -100,34 +58,113 @@ You need to configure a client secret when using Sign in with Apple for Web. Thi
 
 <AppleSecretGenerator />
 
-## Add your OAuth credentials to Supabase
+## Using native sign in
 
-<SocialProviderSettingsSupabase provider="Apple" />
+Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent.
 
-## Add login code to your client app
+When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.
 
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `apple` as the `provider`:
+If you are building an iOS or macOS app using Flutter, you can use [apple_sign_in](https://pub.dev/packages/sign_in_with_apple) package to quickly get the user's consent and sign them in to your Supabase project:
 
-```js
-async function signInWithApple() {
-  const { data, error } = await supabase.auth.signInWithOAuth({
+```dart
+import 'package:sign_in_with_apple/sign_in_with_apple.dart';
+import 'package:crypto/crypto.dart';
+
+Future<AuthResponse> signInWithApple() {
+
+  // Generate a random string
+  final rawNonce = _generateRandomString();
+  final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
+
+  final credential = await SignInWithApple.getAppleIDCredential(
+    scopes: [
+      AppleIDAuthorizationScopes.email,
+      AppleIDAuthorizationScopes.fullName,
+    ],
+    nonce: hashedNonce,
+  );
+
+  final idToken = credential.identityToken;
+  if (idToken == null) {
+    throw 'Could not find ID Token from generated credential.';
+  }
+
+  return signInWithIdToken(
+    provider: Provider.apple,
+    idToken: idToken,
+    nonce: rawNonce,
+  );
+}
+```
+
+In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:
+
+```ts
+await supabase.auth.signInWithIdToken({
+  provider: 'apple',
+  token: '<identity token received from the OS>',
+})
+```
+
+Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
+
+- [invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication)
+- [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/)
+
+For apps written in Swift, please consult the [community maintained library](/docs/reference/swift/introduction).
+
+### Configuration
+
+Native sign in requires less configuration steps than OAuth flow. You will need to perform these steps:
+
+1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
+2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
+
+Note that if you're building a native app only, you do not need to setup the OAuth flow.
+
+## Using Sign in with Apple JS
+
+[Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only.
+
+You can use the `signInWithIdToken()` method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS:
+
+```ts
+function signIn() {
+  const data = await AppleID.auth.signIn()
+
+  await supabase.auth.signInWithIdToken({
     provider: 'apple',
+    token: data.id_token,
+    nonce: '<nonce used in AppleID.auth.init>',
   })
 }
 ```
 
-When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+Alternatively, you can use the `AppleIDSignInOnSuccess` event with the `usePopup` option:
 
-```js
-async function signout() {
-  const { error } = await supabase.auth.signOut()
-}
+```ts
+// Listen for authorization success.
+document.addEventListener('AppleIDSignInOnSuccess', async (event) => {
+  await supabase.auth.signInWithIdToken({
+    provider: 'apple',
+    token: event.data.id_token,
+    nonce: '<value used in appleid-signin-nonce meta tag>',
+  })
+})
 ```
 
-## Resources
+Please make sure you request for the scope `name email` when initializing the library.
 
-- [Apple Developer Account](https://developer.apple.com).
-- Thanks to [Janak Amarasena](https://medium.com/@janakda) who did all the heavy lifting in [How to configure Sign In with Apple](https://medium.com/identity-beyond-borders/how-to-configure-sign-in-with-apple-77c61e336003).
+### Configuration
+
+To use Sign in with Apple JS you need to configure these options:
+
+1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
+2. Obtain a **Services ID** attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.website`.
+3. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple.
+4. Register the Services ID you created to your project's [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
+
+Note that if you're using Sign in with Apple JS you do not need to configure the OAuth settings.
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx
index 7b73157b46..164306f722 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx
+++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx
@@ -3,120 +3,288 @@ import Layout from '~/layouts/DefaultGuideLayout'
 export const meta = {
   id: 'auth-google',
   title: 'Login with Google',
-  description: 'Add Google OAuth to your Supabase project',
+  description: 'Use Sign in with Google on the web, in native apps or with Chrome extensions',
 }
 
-To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard.
+Supabase Auth supports Sign in with Google on the web, native Android applications and Chrome extensions.
 
 ## Overview
 
-Setting up Google logins for your application consists of 3 parts:
+To support Sign in with Google you need to configure the [Google provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
 
-- Create and configure a Google Project on the [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
-- Add your Google OAuth keys to your [Supabase Project](https://supabase.com/dashboard)
-- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
+There are three general ways to use Sign in with Google, depending on the application you're building:
 
-## Access your Google Cloud Platform account
+- Sign in on the web or in web-based apps
+  - Using an OAuth flow initiated by Supabase Auth using [Google Identity Authorization with OAuth 2.0 for Web Server Applications](https://developers.google.com/identity/protocols/oauth2/web-server).
+  - Using a [personalized sign-in button](https://developers.google.com/identity/gsi/web/guides/personalized-button) or [One Tap](https://developers.google.com/identity/gsi/web/guides/display-google-one-tap) and [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for users already logged in to their Google account.
+- Sign in in native Android apps and Chrome extensions
 
-- Go to [cloud.google.com](https://cloud.google.com).
-- Click on `Sign in` at the top right to log in.
+In some cases you're able to use the OAuth flow within web-based native apps such as with React Native, Expo or other similar frameworks. It is best practice to use native Sign in with Google capabilities whenever possible.
 
-![Google Developer Portal.](/docs/img/guides/auth-google/google-portal.png)
+Before you can use Sign in with Google, you need to obtain a [Google Cloud Platform](https://console.cloud.google.com/home/dashboard) account and have a project ready or create a new one.
 
-## Create a Google Cloud Platform Project
+## Using the OAuth flow for the web
 
-- Click on `Select a Project` at the top left.
-  - (Or, if a project is currently selected, click on the current project name at the top left.)
-- Click `New Project` at the top right.
-- Fill in your app information, then click `Create`.
-  - (This can take a few minutes.)
-- This should bring you to the dashboard for your new project.
+Sign in with Google's OAuth flow is designed for web or browser based sign in methods. It can be used in web-based apps as well as in websites, though sometimes it is worthwhile considering using One Tap login directly.
 
-## Create the OAuth Keys for your project
+Behind the scenes, Supabase Auth uses the [Google OAuth 2.0 APIs](https://developers.google.com/identity/openid-connect/openid-connect), which are OpenID Connect certified, to perform the authentication.
 
-From your project's dashboard screen:
+To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library:
 
-- In the search bar at the top labeled `Search products and resources` type `OAuth`.
-- Click on `OAuth consent screen` from the list of results.
-- On the `OAuth consent screen` page select `External`.
-- Click `Create`.
-
-## Edit your app information
-
-- On the `Edit app registration` page fill out your app information.
-- Click `Save and continue` at the bottom.
-
-## Find your callback URL
-
-<SocialProviderSetup provider="Google" />
-
-## Create your Google credentials
-
-- Click `Credentials` at the left to go to the `Credentials` page on the Google Cloud Platform console.
-- Click `Create Credentials` near the top then select `OAuth client ID`
-- On the `Create OAuth client ID` page, select your application type. If you're not sure, choose `Web application`.
-- Fill in your app name.
-- At the bottom, under `Authorized redirect URIs` click `Add URI`.
-- Enter your callback URI under `Authorized redirect URIs` at the bottom.
-- Enter your callback URI in the `Valid OAuth Redirect URIs` box.
-- Click `Save Changes` at the bottom right.
-- Click `Create`.
-
-Copy your new OAuth credentials
-
-- A box will appear called `OAuth client created`.
-- Copy and save the values under `Your Client ID` and `Your Client Secret`.
-
-## Enter your Google credentials into your Supabase Project
-
-<SocialProviderSettingsSupabase provider="Google" />
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `google` as the `provider`:
-
-```js
-async function signInWithGoogle() {
-  const { data, error } = await supabase.auth.signInWithOAuth({
-    provider: 'google',
-  })
-}
+```ts
+supabase.auth.signInWithOAuth({
+  provider: 'google',
+})
 ```
 
-You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient).
+This call takes the user to Google's consent screen. When the flow ends, the user's profile information is exchanegd and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.
 
-When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+You can additionally extract the `provider_token` from the session (on initial login only) which is the OAuth 2.0 access token issued by Google that grants your application access to the Google services for the authenticated users. Please store this token in local storage, cookies or in your database or server.
 
-```js
-async function signout() {
-  const { error } = await supabase.auth.signOut()
-}
-```
+Google does not send out a refresh token by default, so you will need to pass parameters like these to `signInWithOAuth()` in order to extract the `provider_refresh_token`:
 
-## Obtain the provider refresh token
-
-Google OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to add additional query parameters:
-
-```js
-async function signInWithGoogle() {
-  const { data, error } = await supabase.auth.signInWithOAuth({
-    provider: 'google',
-    options: {
-      queryParams: {
-        access_type: 'offline',
-        prompt: 'consent',
-        hd: 'domain.com', // google will also allow OAuth logins to be restricted to a specified domain using the 'hd' parameter
-      },
+```ts
+const { data, error } = await supabase.auth.signInWithOAuth({
+  provider: 'google',
+  options: {
+    queryParams: {
+      access_type: 'offline',
+      prompt: 'consent',
     },
+  },
+})
+```
+
+### Configuration
+
+To use the OAuth 2.0 flow, you will require the following information:
+
+1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. In _Authorized redirect URIs_ enter `https://<project-id>.supabase.co/auth/v1/callback`. This URL will be seen by your users, and you can customize it by configuring [custom domains](/docs/guides/platform/custom-domains).
+2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. Within _Authorized domains_ make sure you add your Supabase project's domain `<project-id>.supabase.co`. Configure the non-sensitive scopes by making sure the following ones are selected: `.../auth/userinfo.email`, `.../auth/userinfo.profile`, `openid`. If you're selecting other sensitive scopes, your app may require additional verification. In those cases, it's best to use [custom domains](/docs/guides/platform/custom-domains).
+3. Finally, add the client ID and secret from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers).
+
+## Using native sign in
+
+Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Google flow on Android uses the [operating system's built-in functionalities](https://developers.google.com/android/reference/com/google/android/gms/auth/api/identity/package-summary) to prompt the user for consent. Note that native sign-in has been rebranded as _One Tap sign-in on Android_ by Google, which you should not confuse with _One Tap sign in for web_, as mentioned below.
+
+When the user provides consent, Google issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.
+
+If you are building a Flutter app, you can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) package to sign a user into your Supabase project:
+
+````dart
+import 'package:crypto/crypto.dart';
+import 'package:flutter_appauth/flutter_appauth.dart';
+
+// Generate a random string
+final rawNonce = generateRandomString();
+final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
+
+// Your registered Google client ID here.
+// This will be different for iOS and Android
+const clientId = 'YOUR_GOODLE_CLIENT_ID';
+
+// bundle ID for iOS, package name for Android here
+final packageName = 'io.supabase.example';
+
+/// fixed for google login
+final redirectUrl = '$packageName:/google_auth';
+
+/// fixed for google login
+const discoveryUrl =
+    'https://accounts.google.com/.well-known/openid-configuration';
+
+final appAuth = FlutterAppAuth();
+
+// authorize the user by opening the concent page
+final result = await appAuth.authorize(
+  AuthorizationRequest(
+    clientId,
+    redirectUrl,
+    discoveryUrl: discoveryUrl,
+    nonce: hashedNonce,
+    scopes: [
+      'openid',
+      'email',
+    ],
+  ),
+);
+
+if (result == null) {
+  throw AuthException(
+      'Could not find AuthorizationResponse after authorizing');
+}
+
+// Request the access and id token to google
+final tokenResponse = await appAuth.token(
+  TokenRequest(
+    clientId,
+    redirectUrl,
+    authorizationCode: result.authorizationCode,
+    discoveryUrl: discoveryUrl,
+    codeVerifier: result.codeVerifier,
+    nonce: result.nonce,
+    scopes: [
+      'openid',
+      'email',
+    ],
+  ),
+);
+
+final idToken = tokenResponse?.idToken;
+
+if (idToken == null) {
+  throw AuthException('Could not find idToken from the token response');
+}
+
+await signInWithIdToken(
+  provider: Provider.google,
+  idToken: idToken,
+  accessToken: tokenResponse?.accessToken,
+  nonce: rawNonce,
+);```
+
+In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:
+
+```ts
+await supabase.auth.signInWithIdToken({
+  provider: 'google',
+  token: '<identity token received from the OS>',
+  access_token: '<access token received from the OS>'
+})
+````
+
+Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
+
+- [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin).
+
+For apps written in Kotlin, please consult the [community maintained library](/docs/reference/kotlin/introduction).
+
+### Configuration
+
+1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ or _iOS_ depending on the mobile operating system your app is built for.
+
+- For Android, use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app.
+- For iOS, use the instructions on screen to provide the app Bundle ID, and App Store ID and Team ID if the app is already published on the Apple AppStore.
+
+2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
+3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_.
+
+Note that you do not have to configure the OAuth flow in the Supabase Dashboard in order to use native sign in.
+
+## Using native sign in for Chrome extensions
+
+Similar to the native sign in for Android, you can use the Chrome browser's [identity APIs](https://developer.chrome.com/docs/extensions/reference/identity/) to launch an authentication flow.
+
+First, you need to configure your `manifest.json` file like so:
+
+```json
+{
+  "permissions": ["identity"],
+  "oauth2": {
+    "client_id": "<client ID>",
+    "scopes": ["openid", "email", "profile"]
+  }
+}
+```
+
+Then you should call the [`chrome.identity.launchWebAuthFlow()`](https://developer.chrome.com/docs/extensions/reference/identity/#method-launchWebAuthFlow) function to trigger the sign in flow. On success, call the `supabase.auth.signInWithIdToken()` function to complete sign in with your Supabase project.
+
+```ts
+const manifest = chrome.runtime.getManifest()
+
+const url = new URL('https://accounts.google.com/o/oauth2/auth')
+
+url.searchParams.set('client_id', manifest.oauth2.client_id)
+url.searchParams.set('response_type', 'id_token')
+url.searchParams.set('access_type', 'offline')
+url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`)
+url.searchParams.set('scope', manifest.oauth2.scopes.join(' '))
+
+chrome.identity.launchWebAuthFlow(
+  {
+    url: url.href,
+    interactive: true,
+  },
+  async (redirectedTo) => {
+    if (chrome.runtime.lastError) {
+      // auth was not successful
+    } else {
+      // auth was successful, extract the ID token from the redirectedTo URL
+      const url = new URL(redirectedTo)
+      const params = new URLSearchParams(url.hash)
+
+      const { data, error } = await supabase.auth.signInWithIdToken({
+        provider: 'google',
+        token: params.get('id_token'),
+      })
+    }
+  }
+)
+```
+
+### Configuration
+
+You will need to configure a client ID for your Chrome extension:
+
+1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Chrome extension_ for the application type. For _Item ID_ provide the unique ID of your Chrome extension. You can get this by calling `chrome.runtime.id` within the extension, or from the Web Store URL of the extension. For example, the [Google Translate extension](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb) has the Web Store URL `https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb` and the last part `aapbdbdomjkkjkaonfhkkikfgjllcleb` is its unique ID.
+2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app.
+3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_.
+
+Note that you do not have to configure the OAuth flow in the Supabase Dashboard to sign in with Google inside Chrome extensions.
+
+## Using personalized sign-in buttons, One Tap or automatic sign-in
+
+Most web apps and websites can utilize Google's [personalized sign-in buttons](https://developers.google.com/identity/gsi/web/guides/personalized-button), [One Tap](https://developers.google.com/identity/gsi/web/guides/features) or [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for the best user experience.
+
+Under the hood, these sign in methods end with an identity token being issued by [Sign in with Google for Web](https://developers.google.com/identity/gsi/web/guides/overview). You can then use the `supabase.auth.signInWithIdToken()` method to immediately issue an access and refresh tokens for the user, without needing to build any additional UIs or flows.
+
+To get started, you can use the [HTML Code Generator](https://developers.google.com/identity/gsi/web/tools/configurator) to customize the look, feel, features and behavior of the Sign in with Google button. Make sure you pick the _Swap to JavaScript callback_ option and name the function that will receive a [`CredentialResponse`](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) when sign in completes.
+
+For example, this HTML code shows a typical Sign in with Google button:
+
+```html
+<div
+  id="g_id_onload"
+  data-client_id="<client ID>"
+  data-context="signin"
+  data-ux_mode="popup"
+  data-callback="handleSignInWithGoogle"
+  data-nonce=""
+  data-auto_select="true"
+  data-itp_support="true"
+></div>
+
+<div
+  class="g_id_signin"
+  data-type="standard"
+  data-shape="pill"
+  data-theme="outline"
+  data-text="signin_with"
+  data-size="large"
+  data-logo_alignment="left"
+></div>
+```
+
+When the user signs in, the `handleSignInWithGoogle` function will be called:
+
+```ts
+async function handleSignInWithGoogle(response) {
+  const { data, error } = await supabase.auth.signInWithIdToken({
+    token: response.credential,
+    nonce: 'NONCE', // must be the same one as provided in data-nonce (if any)
   })
 }
 ```
 
-## Resources
+Use of nonce is recommended, though optional. Make sure each nonce is generated randomly and available both in the `data-nonce` attribute as well as in the `handleSignInWithGoogle` callback function; otherwise the ID token will not be accepted.
 
-- [Supabase Account - Free Plan OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
+### Configuration
+
+1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. As you're using the Google sign in button, you should configure the _Authorized JavaScript origins_ and _Authorized redirect URIs_ to the website where the buttons appear. You should not use your Supabase project domain name. For this use case, the client secret provided is not needed and can be ignored.
+2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
+3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
+
+Note that you do not have to configure the OAuth flow client ID and secret in the Supabae Dashboard when using this approach!
 
 export const Page = ({ children }) => <Layout meta={meta} children={children} />
 
diff --git a/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx b/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
new file mode 100644
index 0000000000..bc939d6123
--- /dev/null
+++ b/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
@@ -0,0 +1,97 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+  id: 'auth-kakao',
+  title: 'Login with Kakao',
+  description: 'Add Kakao OAuth to your Supabase project',
+}
+
+To enable Kakao Auth for your project, you need to set up an Kakao OAuth application and add the application credentials to your Supabase Dashboard.
+
+## Overview
+
+Kakao OAuth consists of six broad steps:
+
+- Create and configure your app in the [Kakao Developer Portal](https://developers.kakao.com).
+- Obtaining a `REST API key` - this will serve as the `client_id`.
+- Generating the `Client secret code` - this will serve as the `client_secret`.
+- Additional configurations on Kakao Developers Portal.
+- Add your `client id` and `client secret` keys to your [Supabase Project](https://supabase.com/dashboard).
+- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
+
+## Access your Kakao Developer account
+
+- Go to [Kakao Developers Portal](https://developers.kakao.com).
+- Click on `Login` at the top right to log in.
+
+![Kakao Developers Portal.](/docs/img/guides/auth-kakao/kakao-developers-page.png)
+
+## Create and configure your app
+
+- Go to `My Application`.
+- Click on `Add an application` at the top.
+- Fill out your app information:
+  - App icon.
+  - App name.
+  - Company name.
+- Click `Save` at the bottom right.
+
+## Obtain a REST API key
+
+This will serve as the `client_id` when you make API calls to authenticate the user.
+
+- Go to `My Application`.
+- Click on your app.
+- You will be redirected to `Summary` tab of your app.
+- In the `App Keys` section you will see `REST API key` -- this ID will become your `client_id` later.
+
+## Find your callback URL
+
+<SocialProviderSetup provider="Kakao" />- To add callback URL on Kakao, go to `Product settings` >
+`Kakao Login` > `Redirect URI`.
+
+## Generate and activate a `client_secret`
+
+- Go to `Product settings` > `Kakao Login` > `Security`.
+- Click on the `Kakao Login` switch to enable Kakao Login.
+- Click on `generate code` at the bottom to generate the `Client secret code` -- this will serve as a `client_secret` for your supabase project.
+- Make sure you enabled `Client sercet code` by selecting `enable` from the `Activation state` section.
+
+## Additional configurations on Kakao Developers Portal
+
+- Make sure the Kakao Login is enabled in the `Kakao Login` tab.
+- Set following scopes under the "Consent Items": account_email, profile_image, profile_nickname
+
+![Consent items needs to be set.](/docs/img/guides/auth-kakao/kakao-developers-consent-items-set.png)
+
+## Add your OAuth credentials to Supabase
+
+<SocialProviderSettingsSupabase provider="Kakao" />
+
+## Add login code to your client app
+
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `kakao` as the `provider`:
+
+```js
+async function signInWithKakao() {
+  const { data, error } = await supabase.auth.signInWithOAuth({
+    provider: 'kakao',
+  })
+}
+```
+
+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
+
+- [Kakao Developers Portal](https://developers.kakao.com).
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/database/connecting-to-postgres.mdx b/apps/docs/pages/guides/database/connecting-to-postgres.mdx
index d63aa46aa2..c49cc1dbe2 100644
--- a/apps/docs/pages/guides/database/connecting-to-postgres.mdx
+++ b/apps/docs/pages/guides/database/connecting-to-postgres.mdx
@@ -11,15 +11,15 @@ Supabase provides several options for programmatically connecting to your Postgr
 
 1. Direct connections using Postgres' standard connection system
 2. Connection pooling using PgBouncer
-3. Programmatic access uing the [Serverless APIs](/docs/guides/api)
+3. Programmatic access using the [Serverless APIs](/docs/guides/api)
 
 ## Serverless APIs
 
 Supabase provides auto-updating [APIs](/docs/guides/database/api). This is the easiest way to get started if you are managing data (fetching, inserting, updating). We provides several types of API to suit your preferences:
 
-- [REST](/docs/guides/database/api#rest-api): interact with your database through a REST interface.
-- [GraphQL](/docs/guides/database/api#graphql-api): interact with your database through a GraphQL interface.
-- [Realtime](/docs/guides/database/api#realtime-api): listen to database changes over websockets.
+- [REST](/docs/guides/api#rest-api-overview): interact with your database through a REST interface.
+- [GraphQL](/docs/guides/api#graphql-api-overview): interact with your database through a GraphQL interface.
+- [Realtime](/docs/guides/api#realtime-api-overview): listen to database changes over websockets.
 
 ## Direct connections
 
diff --git a/apps/docs/pages/guides/database/json.mdx b/apps/docs/pages/guides/database/json.mdx
index 2016d9854d..b7f35e96e5 100644
--- a/apps/docs/pages/guides/database/json.mdx
+++ b/apps/docs/pages/guides/database/json.mdx
@@ -244,7 +244,7 @@ create table customers (
 );
 
 alter table customers
-add constriant check_metadata check (
+add constraint check_metadata check (
   json_matches_schema(
     '{
         "type": "object",
diff --git a/apps/docs/pages/guides/functions/secrets.mdx b/apps/docs/pages/guides/functions/secrets.mdx
index ffbe792004..9f0b8be850 100644
--- a/apps/docs/pages/guides/functions/secrets.mdx
+++ b/apps/docs/pages/guides/functions/secrets.mdx
@@ -12,6 +12,15 @@ It's common that you will need to use sensitive information or environment-speci
 Deno.env.get(MY_SECRET_NAME)
 ```
 
+### Local Development
+
+When developing functions locally, you be able to load environment variables two ways:
+
+1. Through a default `.env` file placed at `supabase/functions/.env`, which will get loaded on `supabase start`
+2. Through the `--env-file` option for `supabase functions serve`, for example: `supabase functions serve --env-file ./path/to/.env-file`
+
+To perform a one-time setup of your local development secrets, use the first option to create the `.env` file that will apply to all functions.
+
 ### Default secrets
 
 By default, Edge Functions have access to these secrets:
diff --git a/apps/docs/pages/guides/getting-started/features.mdx b/apps/docs/pages/guides/getting-started/features.mdx
index 91bf0da4a5..1d9513517e 100755
--- a/apps/docs/pages/guides/getting-started/features.mdx
+++ b/apps/docs/pages/guides/getting-started/features.mdx
@@ -84,11 +84,11 @@ Build login and registration pages with custom themes. [Docs](/docs/guides/auth/
 
 ### Auto-generated REST API
 
-RESTful APIs are autogenerated from your database, without a single line of code. [Docs](/docs/guides/database/api#rest-api-overview).
+RESTful APIs are autogenerated from your database, without a single line of code. [Docs](/docs/guides/api#rest-api-overview).
 
 ### Auto-generated GraphQL API
 
-Fast GraphQL APIs using our custom Postgres GraphQL extension. [Docs](/docs/guides/database/api#graphql-api-overview).
+Fast GraphQL APIs using our custom Postgres GraphQL extension. [Docs](/docs/guides/api#graphql-api-overview).
 
 ### Realtime Database changes
 
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx
index 5c49766f51..f30b5184fd 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/nuxtjs.mdx
@@ -88,6 +88,7 @@ export const meta = {
 
       ```vue src/App.vue
       <script setup>
+      import { createClient } from '@supabase/supabase-js'
       const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
       const countries = ref([])
 
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
index e2e8452441..108325ba6d 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
@@ -74,7 +74,7 @@ It can be challenging to authenticate your users in all these different environm
 Install the auth helpers for Next.js
 
 ```bash
-npm install @supabase/auth-helpers-nextjs
+npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
 ```
 
 ### NextJS Middleware
@@ -241,7 +241,7 @@ export default function AuthForm() {
 
 </TabPanel>
 </Tabs>
-  
+
 <Admonition type="note">
 
 If you are using TypeScript for this project, see [generating types](/docs/guides/api/rest/generating-types) to automatically generate types from your database tables.
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
index aa330f7154..91a53b8cb3 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -55,7 +55,7 @@ It can be challenging to authenticate your users in all these different environm
 Install the auth helpers for SvelteKit:
 
 ```bash
-npm install @supabase/auth-helpers-sveltekit
+npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
 ```
 
 Add the code below to your `src/hooks.server.ts` to initialize the client on the server:
diff --git a/apps/docs/pages/guides/integrations/integrations.mdx b/apps/docs/pages/guides/integrations/integrations.mdx
index a42b311571..755b5ebd5d 100644
--- a/apps/docs/pages/guides/integrations/integrations.mdx
+++ b/apps/docs/pages/guides/integrations/integrations.mdx
@@ -16,8 +16,8 @@ The Supabase Marketplace brings together all the tools you need to extend your S
 Supabase provides several integration points:
 
 - The [Postgres connection](/docs/guides/database/connecting-to-postgres). Anything that works with Postgres also works with Supabase projects.
-- The [Project REST API](/docs/guides/database/api#rest-api) & client libraries.
-- The [Project GraphQL API](/docs/guides/database/api#graphql-api).
+- The [Project REST API](/docs/guides/api#rest-api-overview) & client libraries.
+- The [Project GraphQL API](/docs/guides/api#graphql-api-overview).
 - The [Platform API](/docs/reference/api).
 
 ## List your integration
diff --git a/apps/docs/pages/guides/realtime/postgres-changes.mdx b/apps/docs/pages/guides/realtime/postgres-changes.mdx
index ea72540662..523855cd8c 100644
--- a/apps/docs/pages/guides/realtime/postgres-changes.mdx
+++ b/apps/docs/pages/guides/realtime/postgres-changes.mdx
@@ -331,34 +331,37 @@ const channel = supabase
 ## Custom Tokens
 
 You may choose to sign your own tokens to customize claims that can be checked in your RLS policies.
-In order for this to work you must pass `apikey` in both Realtime's `headers` and `params` when creating the client.
 
-The `apikey` in `params` must be either the `anon` or `service_role` token that Supabase provides for every project.
-You can find these tokens under [Project API keys](https://supabase.com/dashboard/project/_/settings/api) in your project's dashboard.
-This will authenticate your request in the API gateway.
+Your project JWT secret is found with your [Project API keys](https://supabase.com/dashboard/project/_/settings/api) in your dashboard.
 
 <Admonition type="caution">
   Do not expose the `service_role` token on the client because the role is authorized to bypass
   row-level security.
 </Admonition>
 
-The `apikey` in `headers` can be your custom token signed with the JWT secret of your Supabase project.
-This is forwarded to the Realtime server and it will verify your custom token and use its claims to authorize database changes
-when RLS is enabled.
+To use your own JWT with Realtime make sure to set the token after instantiating the Supabase client and before connecting to a Channel.
 
 ```js
 const { createClient } = require('@supabase/supabase-js')
 
-const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY, {
-  realtime: {
-    headers: {
-      apikey: `Bearer ${your_custom_token}`,
+const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY, {})
+
+// Set your custom JWT here
+supabase.realtime.setAuth('your-custom-jwt')
+
+const channel = supabase
+  .channel('db-changes')
+  .on(
+    'postgres_changes',
+    {
+      event: '*',
+      schema: 'public',
+      table: 'messages',
+      filter: 'body=eq.bye',
     },
-    params: {
-      apikey: process.env.SUPABASE_KEY,
-    },
-  },
-})
+    (payload) => console.log(payload)
+  )
+  .subscribe()
 ```
 
 ### Refreshed Tokens
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 31c0a5a03f..00432dc6d1 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -88,7 +88,7 @@ export const meta = {
 
         <TextLink
           label="Explore more resources"
-          url="/docs/guides/resources"
+          url="/guides/resources"
           className="no-underline text-brand-900 text-sm"
         />
       </div>
diff --git a/apps/docs/public/img/guides/auth-kakao/kakao-developers-consent-items-set.png b/apps/docs/public/img/guides/auth-kakao/kakao-developers-consent-items-set.png
new file mode 100644
index 0000000000..b59c461698
Binary files /dev/null and b/apps/docs/public/img/guides/auth-kakao/kakao-developers-consent-items-set.png differ
diff --git a/apps/docs/public/img/guides/auth-kakao/kakao-developers-page.png b/apps/docs/public/img/guides/auth-kakao/kakao-developers-page.png
new file mode 100644
index 0000000000..81d30550eb
Binary files /dev/null and b/apps/docs/public/img/guides/auth-kakao/kakao-developers-page.png differ
diff --git a/apps/docs/public/img/icons/kakao-icon.svg b/apps/docs/public/img/icons/kakao-icon.svg
new file mode 100644
index 0000000000..e721ec2b43
--- /dev/null
+++ b/apps/docs/public/img/icons/kakao-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 256 256"><path fill="#FFE812" d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z"/><path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z"/><path fill="#FFE812" d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z"/></svg>
\ No newline at end of file
diff --git a/apps/www/_alternatives/supabase-vs-firebase.mdx b/apps/www/_alternatives/supabase-vs-firebase.mdx
index d4b262f394..2ed8ec1883 100644
--- a/apps/www/_alternatives/supabase-vs-firebase.mdx
+++ b/apps/www/_alternatives/supabase-vs-firebase.mdx
@@ -28,7 +28,7 @@ Supabase is an open source firebase alternative, but instead of being built arou
 
 At Supabase we’ve always been huge fans of Firebase - so we started adding a few things on top of PostgreSQL in an attempt to reach feature parity, including:
 
-- Auto-generated API - [query your data straight from the client](https://supabase.com/docs/guides/database/api#rest-api-2).
+- Auto-generated API - [query your data straight from the client](https://supabase.com/docs/guides/api#rest-api-overview).
 - Realtime - [changes in your data will be streamed directly to your application](https://supabase.com/docs/reference/dart/subscribe).
 - Auth - [a simple to integrate auth system and SQL based rules engine](https://supabase.com/auth).
 - Functions - [javascript and typescript functions that deploy out globally](https://supabase.com/edge-functions).
diff --git a/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx b/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx
index af3994eb18..ac4707720b 100644
--- a/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx
+++ b/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx
@@ -16,7 +16,7 @@ Heroku is a cloud application platform that offers managed PostgreSQL as a servi
 
 Supabase also offers managed Postgres, the main difference is that with each deployment you also get:
 
-- Auto-generated API - [never write an API again](https://supabase.com/docs/guides/database/api#rest-api-2)
+- Auto-generated API - [never write an API again](https://supabase.com/docs/guides/api#rest-api-overview)
 - Realtime - [subscribe to data changes via websockets](https://supabase.com/docs/reference/dart/subscribe)
 - Auth - [users can log in and out of your application](https://supabase.com/auth)
 - Functions - [deploy custom logic to the edge](https://supabase.com/edge-functions)
@@ -43,7 +43,7 @@ These are some of the key differences between Heroku Postgres and Supabase in te
 
 - Supabase is more than just the raw database, it also comes with:
   - [Connection pooling](https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool) so that you won’t run out of connections in a serverless environment.
-  - [Auto-generated APIs](https://supabase.com/docs/guides/database/api#rest-api-2) based on your schema, so you can communicate with your database directly from the client.
+  - [Auto-generated APIs](https://supabase.com/docs/guides/api#rest-api-overview) based on your schema, so you can communicate with your database directly from the client.
   - [Realtime API](https://supabase.com/docs/reference/dart/subscribe) is useful for when you want to subscribe to changes to your database over websockets.
   - [Auth API](https://supabase.com/auth) can be used to leverage Postgres’s Row Level Security model, and control access to sensitive data on a per user, or per group level.
   - [Functions](https://supabase.com/edge-functions) can be deployed out to the edge directly from the Supabase CLI, which means you can run sensitive business logic or transformations in a serverless fashion.
diff --git a/apps/www/_blog/2020-12-02-case-study-monitoro.mdx b/apps/www/_blog/2020-12-02-case-study-monitoro.mdx
index 0c628e8c39..df53fac79d 100644
--- a/apps/www/_blog/2020-12-02-case-study-monitoro.mdx
+++ b/apps/www/_blog/2020-12-02-case-study-monitoro.mdx
@@ -8,7 +8,6 @@ author_image_url: https://github.com/roryw10.png
 authorURL: https://github.com/roryw10
 image: /images/blog/supabase-monitoro.png
 tags:
-  - case-study
   - no-code
 date: '12-02-2020'
 video: https://www.youtube.com/v/8A6_pg41M2s
diff --git a/apps/www/_blog/2020-12-02-case-study-tayfa.mdx b/apps/www/_blog/2020-12-02-case-study-tayfa.mdx
index a4d03ff3e5..c494482fc6 100644
--- a/apps/www/_blog/2020-12-02-case-study-tayfa.mdx
+++ b/apps/www/_blog/2020-12-02-case-study-tayfa.mdx
@@ -8,7 +8,6 @@ author_image_url: https://github.com/roryw10.png
 authorURL: https://github.com/roryw10
 image: /images/blog/supabase-tayfa.png
 tags:
-  - case-study
   - no-code
 date: '12-02-2020'
 ---
diff --git a/apps/www/_blog/2020-12-02-case-study-xendit.mdx b/apps/www/_blog/2020-12-02-case-study-xendit.mdx
index 80d8822fb1..5d61a0c70d 100644
--- a/apps/www/_blog/2020-12-02-case-study-xendit.mdx
+++ b/apps/www/_blog/2020-12-02-case-study-xendit.mdx
@@ -9,7 +9,6 @@ authorURL: https://github.com/roryw10
 image: supabase-xendit.png
 thumb: supabase-xendit-thumb.jpg
 tags:
-  - case-study
   - fintech
 date: '12-02-2020'
 ---
diff --git a/apps/www/_blog/2021-02-09-case-study-roboflow.mdx b/apps/www/_blog/2021-02-09-case-study-roboflow.mdx
index 97888890d8..5b33ea3b7d 100644
--- a/apps/www/_blog/2021-02-09-case-study-roboflow.mdx
+++ b/apps/www/_blog/2021-02-09-case-study-roboflow.mdx
@@ -9,7 +9,6 @@ authorURL: https://github.com/roryw10
 image: roboflow-og.png
 thumb: roboflow-website.png
 tags:
-  - case-study
   - AI
 date: '02-09-2021'
 ---
diff --git a/apps/www/_blog/2021-03-08-toad-a-link-shortener-with-simple-apis-for-low-coders.mdx b/apps/www/_blog/2021-03-08-toad-a-link-shortener-with-simple-apis-for-low-coders.mdx
index a87778aaeb..c1ddf4af7e 100644
--- a/apps/www/_blog/2021-03-08-toad-a-link-shortener-with-simple-apis-for-low-coders.mdx
+++ b/apps/www/_blog/2021-03-08-toad-a-link-shortener-with-simple-apis-for-low-coders.mdx
@@ -10,7 +10,6 @@ image: toadli-og.jpg
 thumb: toadli-website.jpg
 tags:
   - supabase
-  - case-study
 date: '03-08-2021'
 ---
 
diff --git a/apps/www/_blog/2021-07-26-epsilon3-self-hosting.mdx b/apps/www/_blog/2021-07-26-epsilon3-self-hosting.mdx
index f5005583c8..905bbccdeb 100644
--- a/apps/www/_blog/2021-07-26-epsilon3-self-hosting.mdx
+++ b/apps/www/_blog/2021-07-26-epsilon3-self-hosting.mdx
@@ -8,7 +8,7 @@ authorURL: https://github.com/roryw10
 image: epsilon3/og-epsilon3.jpg
 thumb: epsilon3/cover-epsilon3.jpg
 tags:
-  - case-study
+  - supabase
 date: '2021-07-26'
 toc_depth: 2
 ---
diff --git a/apps/www/_blog/2021-07-27-spot-flutter-with-postgres.mdx b/apps/www/_blog/2021-07-27-spot-flutter-with-postgres.mdx
index c459d5edfa..0bd7f8fce6 100644
--- a/apps/www/_blog/2021-07-27-spot-flutter-with-postgres.mdx
+++ b/apps/www/_blog/2021-07-27-spot-flutter-with-postgres.mdx
@@ -8,7 +8,7 @@ authorURL: https://github.com/roryw10
 image: spot/og-spot-flutter-supabase.jpg
 thumb: spot/cover-spot-flutter-supabase.jpg
 tags:
-  - case-study
+  - flutter
 date: '2021-07-27'
 toc_depth: 2
 ---
diff --git a/apps/www/_blog/2021-07-28-mobbin-supabase-200000-users.mdx b/apps/www/_blog/2021-07-28-mobbin-supabase-200000-users.mdx
index c4c623169c..20afbe235d 100644
--- a/apps/www/_blog/2021-07-28-mobbin-supabase-200000-users.mdx
+++ b/apps/www/_blog/2021-07-28-mobbin-supabase-200000-users.mdx
@@ -8,7 +8,6 @@ authorURL: https://github.com/roryw10
 image: mobbin/og-mobbin-supabase.jpg
 thumb: mobbin/cover-mobbin-supabase.jpg
 tags:
-  - case-study
   - auth
 date: '2021-07-28'
 toc_depth: 2
diff --git a/apps/www/_blog/2021-10-19-replenysh-time-to-value-in-less-than-24-hours.mdx b/apps/www/_blog/2021-10-19-replenysh-time-to-value-in-less-than-24-hours.mdx
index b656195aa4..0523ff7be5 100644
--- a/apps/www/_blog/2021-10-19-replenysh-time-to-value-in-less-than-24-hours.mdx
+++ b/apps/www/_blog/2021-10-19-replenysh-time-to-value-in-less-than-24-hours.mdx
@@ -8,7 +8,6 @@ authorURL: https://github.com/roryw10
 image: replenysh/og-replenysh.png
 thumb: replenysh/thumb-replenysh.png
 tags:
-  - case-study
   - auth
 date: '2021-10-19'
 toc_depth: 2
diff --git a/apps/www/_blog/2022-05-26-how-supabase-accelerates-development-of-all-pull-together.mdx b/apps/www/_blog/2022-05-26-how-supabase-accelerates-development-of-all-pull-together.mdx
index 36fd3e5367..94d82b824b 100644
--- a/apps/www/_blog/2022-05-26-how-supabase-accelerates-development-of-all-pull-together.mdx
+++ b/apps/www/_blog/2022-05-26-how-supabase-accelerates-development-of-all-pull-together.mdx
@@ -6,7 +6,6 @@ image: all-pull-together/all-pull-together-thumb.png
 thumb: all-pull-together/all-pull-together-thumb.png
 tags:
   - community
-  - case-study
   - q-and-a
 date: '2022-05-26'
 toc_depth: 3
diff --git a/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx b/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx
index 0e42f6dcdf..d14a6253af 100644
--- a/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx
+++ b/apps/www/_blog/2022-12-16-launch-week-6-wrap-up.mdx
@@ -86,7 +86,7 @@ Today released pg_graphql 1.0 release and its general availability on our platfo
 
 - Read the [announcement](/blog/pg-graphql-v1)
 - Browse the [GitHub repo](https://github.com/supabase/pg_graphql/)
-- View the [docs](/docs/guides/database/api#graphql-api)
+- View the [docs](/docs/guides/api#graphql-api-overview)
 
 ## Postgres Point-in-Time Recovery
 
diff --git a/apps/www/_blog/2023-02-16-case-study-happyteams.mdx b/apps/www/_blog/2023-02-16-case-study-happyteams.mdx
index cd7366094c..47c9032982 100644
--- a/apps/www/_blog/2023-02-16-case-study-happyteams.mdx
+++ b/apps/www/_blog/2023-02-16-case-study-happyteams.mdx
@@ -5,7 +5,6 @@ author: rory_wilding
 image: 2023-02-16-case-study-happyteams/case-study-happyteams.png
 thumb: 2023-02-16-case-study-happyteams/case-study-happyteams.png
 tags:
-  - case-study
 date: '2023-02-16'
 toc_depth: 3
 ---
diff --git a/apps/www/_blog/2023-05-31-vecs.mdx b/apps/www/_blog/2023-05-31-vecs.mdx
index c111b3a3ef..3c5c159feb 100644
--- a/apps/www/_blog/2023-05-31-vecs.mdx
+++ b/apps/www/_blog/2023-05-31-vecs.mdx
@@ -2,8 +2,8 @@
 title: 'Supabase Vecs: a vector client for Postgres'
 description: Introducing Supabase Vecs, a PostgreSQL vector client
 author: oli_rice
-image: 2023-06-01-vecs/og-image.jpg
-thumb: 2023-06-01-vecs/og-image.jpg
+image: 2023-06-01-vecs/og-image-v2.jpg
+thumb: 2023-06-01-vecs/og-image-v2.jpg
 tags:
   - postgres
   - AI
diff --git a/apps/www/_blog/2023-06-27-native-mobile-auth.mdx b/apps/www/_blog/2023-06-27-native-mobile-auth.mdx
new file mode 100644
index 0000000000..d9a3c7aeb4
--- /dev/null
+++ b/apps/www/_blog/2023-06-27-native-mobile-auth.mdx
@@ -0,0 +1,133 @@
+---
+title: Native Mobile Auth Support for Google and Apple Sign in
+description: Supabase auth adds full support for native mobile sign in with Apple and Google.
+author: stojan,tyler_shukert
+image: native-mobile-auth/native-mobile-auth.png
+thumb: native-mobile-auth/native-mobile-auth.png
+tags:
+  - auth
+date: '2023-06-27'
+toc_depth: 3
+---
+
+Supabase supports OAuth logins with 17 providers including Apple, Google, Microsoft, GitHub, … But for native mobile apps, this meant that developers had to use a web browser to sign in. It’s not an ideal flow for users, who are already used to signing in with the operating system’s native dialogs when possible. Today, we are excited to announce full native support for Sign in with Apple and Google on iOS and Android. But this is not all! Supabase Auth now can now be used with one-tap sign in methods like: Sign in with Apple JS, Sign in with Google for Web or even in Chrome extensions.
+
+## Native Sign in with Apple and Google
+
+Developers of native iOS and Android apps (using Flutter or React Native) can now take advantage of OS-provided authentication dialogs for Apple and Google. This is available on iOS, macOS, tvOS and watchOS apps in the Apple ecosystem, and all Android variants in the Google ecosystem.
+
+In full transparency, this was always sort-of possible but there were some edge cases that were not covered well with Supabase Auth. We’ve since ironed out the developer experience and made this into a fully supported feature.
+
+Behind the scenes, these native sign in methods use ID tokens. They’re a formalized version of a JWT that is issued by Apple or Google and contain profile information. Supabase Auth now can properly validate the ID tokens and create new or link to existing user accounts based on email similarity.
+
+### Using Sign in with Google in a Flutter App
+
+To setup Sign in with Google in your Flutter native app, you need to set up your Google Cloud project for each platform:
+
+- For iOS apps: [Get started with Google Sign In for iOS and macOS](https://developers.google.com/identity/sign-in/ios/start-integrating#get_an_oauth_client_id)
+- For Android apps: [Get started with One Tap sign-in and sign-up for Android](https://developers.google.com/identity/one-tap/android/get-started)
+
+We’ve revamped the Google provider [configuration screen in the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers). Besides the existing OAuth flow, you can now add additional _Authorized Client IDs_ meant for native sign in.
+
+The client ID you obtained from the setup instructions above should be added to _Authorized Client IDs._
+
+![Supabase dashboard Google provider](/images/blog/native-mobile-auth/google-setting.png)
+
+It really is as simple as that.
+
+### Using Sign in with Apple in a Flutter App
+
+We introduced support for native Sign in with Apple in our [previous launch week](https://supabase.com/blog/supabase-auth-sso-pkce#native-apple-login-on-ios#native-apple-login-on-ios), but today we are adding support for multiple apps on a single Supabase project.
+
+All you need to do is to register all of the bundle IDs of your apps in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_ as a comma separated string.
+
+![Supabase dashboard Apple provider](/images/blog/native-mobile-auth/apple-setting.png)
+
+## Using Sign in with Apple and Google in React Native Apps
+
+If you use React Native to build your native apps, you can still benefit. Please check out these resources to see how you can show the native authentication dialog and obtain an ID token from the operating system:
+
+- https://github.com/invertase/react-native-apple-authentication
+- [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/)
+- https://github.com/react-native-google-signin/google-signin
+
+You would still need to configure the _Authorized Client IDs_ as shown in the Flutter examples above.
+
+Finally, once you’ve received a valid ID token from the operating system you can call `supabase.auth.signInWithIdToken()` to complete the sign in with your Supabase project.
+
+For Sign in with Apple:
+
+```tsx
+await supabase.auth.signInWithIdToken({
+  provider: 'apple',
+  token: '<id token>',
+})
+```
+
+For Sign in with Google:
+
+```tsx
+await supabase.auth.signInWithIdToken({
+  provider: 'google',
+  token: '<id token>',
+})
+```
+
+We also have some sample implementation for Expo apps in our [create-t3-turbo example](https://github.com/supabase-community/create-t3-turbo/blob/main/apps/expo/src/app/profile.tsx#L47).
+
+## Using Sign in with Apple and Google in Flutter Apps
+
+Once you have configured your Supabase instance, you can utilize third party libraries like **[sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) or [google_one_tap_sign_in](https://pub.dev/packages/google_one_tap_sign_in) to perform naive sign in, and pass the ID token to Supabase to complete the sign in.**
+
+For Sign in with Apple:
+
+```dart
+final credential = await SignInWithApple.getAppleIDCredential(
+  scopes: [
+    AppleIDAuthorizationScopes.email,
+    AppleIDAuthorizationScopes.fullName,
+  ],
+);
+
+await supabase.auth.signInWithIdToken(
+  provider: Provider.apple,
+  idToken: credential.identityToken!,
+);
+```
+
+And for Google:
+
+```dart
+var result = await GoogleOneTapSignIn.handleSignIn(webClientId: '<client ID>');
+
+supabase.auth.signInWithIdToken(
+  provider: Provider.google,
+  idToken: result.data!.idToken!,
+);
+```
+
+You can find more detailed instructions on the [here](https://github.com/supabase/supabase-flutter#authentication).
+
+## Sign in with Apple JS, Google One Tap and Chrome Extensions
+
+Although sign in on native platforms was the focus of the team when working on this feature, incidentally we’ve added proper support for Sign in with Apple JS, Google’s One Tap and support for authenticating within Google Chrome extensions.
+
+You can now take advantage of these web frameworks, most notably Google’s One Tap and Automatic Sign-in support for a frictionless onboarding experience for your users.
+
+All you need to do is configure the web frameworks and use the `signInWithIdToken()` method to pass the ID token provided by the Google and Apple libraries.
+
+For example, to use Google One tap you should first [generate an embed code for the Google Sign in Button](https://developers.google.com/identity/gsi/web/tools/configurator). Register this method as the callback that will receive the authentication response from the button:
+
+```tsx
+async function handleSignInWithGoogle(response) {
+  const { data, error } = await supabase.auth.signInWithIdToken({
+    token: response.credential,
+    nonce: 'NONCE', // must be the same one as provided in data-nonce (if any)
+  })
+}
+```
+
+## Resources
+
+- [Login with Apple Guide](https://supabase.com/docs/guides/auth/social-login/auth-apple)
+- [Login with Google Guide](https://supabase.com/docs/guides/auth/social-login/auth-google)
diff --git a/apps/www/_customers/mendableai.mdx b/apps/www/_customers/mendableai.mdx
index bcaa5e6cf5..44d70141b7 100644
--- a/apps/www/_customers/mendableai.mdx
+++ b/apps/www/_customers/mendableai.mdx
@@ -34,8 +34,9 @@ about: Mendable is Chat Powered Search for Documentation.
 
 Mendable was experiencing tremendous success, growing Weekly Active Users nearly 300% since March. They needed a tool to store and search through large amounts of vector data to improve the efficiency and accuracy of their similarity search operations. They tried Faiss, Weaviate, and Pinecone, but found them to be expensive and not very intuitive, especially when it came to storing metadata along with the vectors.
 
-Why they chose Supabase:
-Mendable discovered that Supabase supports pgvector and found it to be a simple and cost-effective solution. They were impressed with the open source nature of Supabase, as well as its ability to store metadata alongside the vectors. They also appreciated the intuitive interface and ease of use.
+## Why they chose Supabase
+
+Mendable discovered that Supabase supports [pgvector](https://supabase.com/docs/guides/database/extensions/pgvector) and found it to be a simple and cost-effective solution. They were impressed with the open source nature of Supabase, as well as its ability to store metadata alongside the vectors. They also appreciated the intuitive interface and ease of use.
 
 <Quote img="caleb-peffer.jpg" caption="Caleb Peffer - CEO, Mendable">
   We tried other vector databases - we tried Faiss, we tried Weaviate, we tried Pinecone. We found
@@ -45,18 +46,18 @@ Mendable discovered that Supabase supports pgvector and found it to be a simple
 
 ## What They Built
 
-Using Supabase and pgvector, Mendable was able to build a more efficient and accurate search function for their AI chatbot. By storing vector data alongside metadata in Supabase, Mendable was able to quickly and easily search through their customers documentation to find the most relevant responses to queries. They found that Supabase's solution was just as performant as dedicated vector databases, but without the high cost.
+Using [Supabase Vector](https://supabase.com/vector), Mendable was able to build a more efficient and accurate search function for their AI chatbot. By storing vector data alongside metadata in Supabase, Mendable was able to quickly and easily search through their customers documentation to find the most relevant responses to queries. They found that Supabase's solution was just as performant as dedicated vector databases, but without the high cost.
 
 ## The Results
 
 Thanks to Supabase and pgvector, Mendable was able to significantly improve the efficiency and accuracy of their Chat Powered Search for Documentation. They were able to build faster and more cost-effectively using Supabase’s open source stack.
 
-## Tech stack
-
-Mendable's tech stack includes React, Next.js, Express, Vercel, and Supabase.
-
 <Quote img="caleb-peffer.jpg" caption="Caleb Peffer - CEO, Mendable">
   We looked at the alternatives and chose Supabase because it’s open source, it’s simpler, and, for
   all the ways we need use it, Supabase has been just as performant - if not more performant - than
   the other vector databases.
 </Quote>
+
+## Tech stack
+
+Mendable's tech stack includes React, Next.js, Express, Vercel, and Supabase.
diff --git a/apps/www/layouts/comparison.tsx b/apps/www/layouts/comparison.tsx
index 0d55186d0f..020d31e255 100644
--- a/apps/www/layouts/comparison.tsx
+++ b/apps/www/layouts/comparison.tsx
@@ -72,7 +72,7 @@ const LayoutComparison = ({ components, props }: Props) => {
             // to do: author urls should be internal in future
             // currently we have external links to github profiles
             authors: [props.blog.author_url],
-            tags: props.blog.tags.map((cat: string) => {
+            tags: props.blog.tags?.map((cat: string) => {
               return cat
             }),
           },
diff --git a/apps/www/lib/posts.tsx b/apps/www/lib/posts.tsx
index c0a7fad040..82b0ba2df6 100644
--- a/apps/www/lib/posts.tsx
+++ b/apps/www/lib/posts.tsx
@@ -78,7 +78,7 @@ export const getSortedPosts = (
 
   if (tags) {
     sortedPosts = sortedPosts.filter((post: any) => {
-      const found = tags.some((tag: any) => post.tags.includes(tag))
+      const found = tags.some((tag: any) => post.tags?.includes(tag))
       return found
     })
   }
@@ -151,7 +151,7 @@ export const getAllCategories = (directory: Directories) => {
 
   posts.map((post: any) => {
     // add tags into categories array
-    post.tags.map((tag: string) => {
+    post.tags?.map((tag: string) => {
       if (!categories.includes(tag)) return categories.push(tag)
     })
   })
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 341fdabd2d..e41861d6bc 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -708,17 +708,17 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2020/12/02/case-study-monitoro',
-    destination: '/blog/case-study-monitoro',
+    destination: '/customers',
   },
   {
     permanent: true,
     source: '/blog/2020/12/02/case-study-tayfa',
-    destination: '/blog/case-study-tayfa',
+    destination: '/customers',
   },
   {
     permanent: true,
     source: '/blog/2020/12/02/case-study-xendit',
-    destination: '/blog/case-study-xendit',
+    destination: '/customers/xendit',
   },
   {
     permanent: true,
@@ -743,7 +743,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2021/02/09/case-study-roboflow',
-    destination: '/blog/case-study-roboflow',
+    destination: '/customers/roboflow',
   },
   {
     permanent: true,
@@ -763,7 +763,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2021/03/08/toad-a-link-shortener-with-simple-apis-for-low-coders',
-    destination: '/blog/toad-a-link-shortener-with-simple-apis-for-low-coders',
+    destination: '/customers',
   },
   {
     permanent: true,
@@ -853,7 +853,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2021/07/26/epsilon3-self-hosting',
-    destination: '/blog/epsilon3-self-hosting',
+    destination: '/customers/epsilon3',
   },
   {
     permanent: true,
@@ -868,7 +868,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2021/07/27/spot-flutter-with-postgres',
-    destination: '/blog/spot-flutter-with-postgres',
+    destination: '/customers',
   },
   {
     permanent: true,
@@ -878,7 +878,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2021/07/28/mobbin-supabase-200000-users',
-    destination: '/blog/mobbin-supabase-200000-users',
+    destination: '/customers/mobbin',
   },
   {
     permanent: true,
@@ -938,7 +938,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2021/10/19/replenysh-time-to-value-in-less-than-24-hours',
-    destination: '/blog/replenysh-time-to-value-in-less-than-24-hours',
+    destination: '/customers/replenysh',
   },
   {
     permanent: true,
@@ -1103,7 +1103,7 @@ module.exports = [
   {
     permanent: true,
     source: '/blog/2022/05/26/how-supabase-accelerates-development-of-all-pull-together',
-    destination: '/blog/how-supabase-accelerates-development-of-all-pull-together',
+    destination: '/customers',
   },
   {
     permanent: true,
@@ -1931,6 +1931,11 @@ module.exports = [
 
   // old case studies moved to /customers
 
+  {
+    permanent: true,
+    source: '/blog/tags/case-study',
+    destination: '/customers',
+  },
   {
     permanent: true,
     source: '/blog/case-study-monitoro',
@@ -1983,8 +1988,8 @@ module.exports = [
   },
   {
     permanent: true,
-    source: '/blog/how-supabase-accelerates-development-of-all-pull-together',
-    destination: '/customers',
+    source: '/blog/case-study-happyteams',
+    destination: '/customers/happyteams',
   },
   {
     permanent: true,
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 4ca575bd20..09c560806f 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -70,7 +70,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
           site_name: 'Supabase',
           images: [
             {
-              url: `https://supabase.com${basePath}/images/og/og-image.jpg`,
+              url: `https://supabase.com${basePath}/images/og/og-image-v2.jpg`,
               width: 800,
               height: 600,
               alt: 'Supabase Og Image',
diff --git a/apps/www/pages/beta.tsx b/apps/www/pages/beta.tsx
index f06adaf0e1..15a2889046 100644
--- a/apps/www/pages/beta.tsx
+++ b/apps/www/pages/beta.tsx
@@ -991,7 +991,7 @@ const Beta = (props: Props) => {
           },
           images: [
             {
-              url: 'https://supabase.com/og/og-image.jpg',
+              url: 'https://supabase.com/og/og-image-v2.jpg',
             },
           ],
         }}
diff --git a/apps/www/pages/blog.tsx b/apps/www/pages/blog.tsx
index e5a4e1740c..29b78124eb 100644
--- a/apps/www/pages/blog.tsx
+++ b/apps/www/pages/blog.tsx
@@ -26,7 +26,7 @@ export async function getStaticProps() {
   fs.writeFileSync('./public/rss.xml', rss)
 
   // generate a series of rss feeds for each author (for PlanetPG)
-  const planetPgPosts = allPostsData.filter((post: any) => post.tags.includes('planetpg'))
+  const planetPgPosts = allPostsData.filter((post: any) => post.tags?.includes('planetpg'))
   const planetPgAuthors = planetPgPosts.map((post: any) => post.author.split(','))
   const uniquePlanetPgAuthors = new Set([].concat(...planetPgAuthors))
 
@@ -73,7 +73,7 @@ function Blog(props: any) {
       category === 'all'
         ? shiftedBlogs
         : props.blogs.filter((post: any) => {
-            const found = post.tags.includes(category)
+            const found = post.tags?.includes(category)
             return found
           })
     )
@@ -99,7 +99,7 @@ function Blog(props: any) {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
diff --git a/apps/www/pages/blog/[slug].tsx b/apps/www/pages/blog/[slug].tsx
index e58397f150..1b1fcbd5b8 100644
--- a/apps/www/pages/blog/[slug].tsx
+++ b/apps/www/pages/blog/[slug].tsx
@@ -110,7 +110,7 @@ function BlogPostPage(props: any) {
     <div className="space-y-8 py-8 lg:py-0">
       <div>
         <div className="flex flex-wrap gap-2">
-          {props.blog.tags.map((tag: string) => {
+          {props.blog.tags?.map((tag: string) => {
             return (
               <a href={`/blog/tags/${tag}`} key={`category-badge-${tag}`}>
                 <Badge>{tag}</Badge>
@@ -164,7 +164,7 @@ function BlogPostPage(props: any) {
             // to do: author urls should be internal in future
             // currently we have external links to github profiles
             authors: [props.blog.author_url],
-            tags: props.blog.tags.map((cat: string) => {
+            tags: props.blog.tags?.map((cat: string) => {
               return cat
             }),
           },
diff --git a/apps/www/pages/brand-assets.tsx b/apps/www/pages/brand-assets.tsx
index 72eb3c161c..6d42e3b577 100644
--- a/apps/www/pages/brand-assets.tsx
+++ b/apps/www/pages/brand-assets.tsx
@@ -29,7 +29,7 @@ const Index = () => {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
diff --git a/apps/www/pages/company.tsx b/apps/www/pages/company.tsx
index bb2775767c..fcc3f48840 100644
--- a/apps/www/pages/company.tsx
+++ b/apps/www/pages/company.tsx
@@ -38,7 +38,7 @@ const Index = ({}: Props) => {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
diff --git a/apps/www/pages/contact/mfa.tsx b/apps/www/pages/contact/mfa.tsx
index 6ea62b717b..17cdae433e 100644
--- a/apps/www/pages/contact/mfa.tsx
+++ b/apps/www/pages/contact/mfa.tsx
@@ -20,7 +20,7 @@ const EnterpriseContactPage = () => {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
diff --git a/apps/www/pages/customers/index.tsx b/apps/www/pages/customers/index.tsx
index edda1a3144..171e61b53b 100644
--- a/apps/www/pages/customers/index.tsx
+++ b/apps/www/pages/customers/index.tsx
@@ -50,7 +50,7 @@ function CustomerStoriesPage(props: any) {
       category === 'all'
         ? props.blogs
         : props.blogs.filter((post: any) => {
-            const found = post.tags.includes(category)
+            const found = post.tags?.includes(category)
             return found
           })
     )
diff --git a/apps/www/pages/open-source/index.tsx b/apps/www/pages/open-source/index.tsx
index e4f9b46e25..1aac63bdcb 100644
--- a/apps/www/pages/open-source/index.tsx
+++ b/apps/www/pages/open-source/index.tsx
@@ -50,7 +50,7 @@ const OpenSource = () => {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
@@ -94,7 +94,7 @@ const OpenSource = () => {
               </div>
               <div className="grid lg:grid-cols-2 gap-4">
                 {maintainers
-                  .filter((x) => activePill == 'All' || x.tags.includes(activePill))
+                  .filter((x) => activePill == 'All' || x.tags?.includes(activePill))
                   .sort((a, b) => a.handle.localeCompare(b.handle))
                   .map((x, idx) => (
                     <div className="" key={idx}>
diff --git a/apps/www/pages/pricing/index.tsx b/apps/www/pages/pricing/index.tsx
index eb71f1ffd8..5179ad7c8e 100644
--- a/apps/www/pages/pricing/index.tsx
+++ b/apps/www/pages/pricing/index.tsx
@@ -140,7 +140,7 @@ export default function IndexPage() {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
diff --git a/apps/www/pages/supasquad.mdx b/apps/www/pages/supasquad.mdx
index 04eee13ef5..17fa4496ae 100644
--- a/apps/www/pages/supasquad.mdx
+++ b/apps/www/pages/supasquad.mdx
@@ -37,7 +37,7 @@ Spread the word on social channels and help to answer Supabase-related questions
 
 ### Builder
 
-Build Supabase examples, blog about them, and add them to the [SupaSquad GitHub Org](https://github.com/supasquad).
+Build Supabase examples, blog about them, and add them to the [Supabase repo](https://github.com/supabase/supabase/tree/master/examples).
 
 ### Author
 
@@ -59,7 +59,6 @@ Help us maintain the community guidelines in our GitHub and Community-led commun
 - Free credits that you can use for Squad efforts.
 - Direct access to members of the Supabase team for questions, suggestions, etc.
 - Help shape the future of the program.
-- Invited to the [SupaSquad GitHub Org](https://github.com/supasquad) to collaborate with the other squad members.
 - Exclusive Supabase Team swag drops are usually exclusively reserved for the Supabase core team.
 
 ## How to join
diff --git a/apps/www/pages/support.tsx b/apps/www/pages/support.tsx
index a37ba9435c..0ee2f30c39 100644
--- a/apps/www/pages/support.tsx
+++ b/apps/www/pages/support.tsx
@@ -29,7 +29,7 @@ const Index = ({}: Props) => {
           url: `https://supabase.com/${router.pathname}`,
           images: [
             {
-              url: `https://supabase.com/images/og/og-image.jpg`,
+              url: `https://supabase.com/images/og/og-image-v2.jpg`,
             },
           ],
         }}
diff --git a/apps/www/public/images/blog/native-mobile-auth/apple-setting.png b/apps/www/public/images/blog/native-mobile-auth/apple-setting.png
new file mode 100644
index 0000000000..2191153072
Binary files /dev/null and b/apps/www/public/images/blog/native-mobile-auth/apple-setting.png differ
diff --git a/apps/www/public/images/blog/native-mobile-auth/google-setting.png b/apps/www/public/images/blog/native-mobile-auth/google-setting.png
new file mode 100644
index 0000000000..aa0e2bf576
Binary files /dev/null and b/apps/www/public/images/blog/native-mobile-auth/google-setting.png differ
diff --git a/apps/www/public/images/blog/native-mobile-auth/native-mobile-auth.png b/apps/www/public/images/blog/native-mobile-auth/native-mobile-auth.png
new file mode 100644
index 0000000000..32ae2d8710
Binary files /dev/null and b/apps/www/public/images/blog/native-mobile-auth/native-mobile-auth.png differ
diff --git a/apps/www/public/images/og/og-image-v2.jpg b/apps/www/public/images/og/og-image-v2.jpg
new file mode 100644
index 0000000000..c2165818c4
Binary files /dev/null and b/apps/www/public/images/og/og-image-v2.jpg differ
diff --git a/apps/www/public/images/og/og-image.jpg b/apps/www/public/images/og/og-image.jpg
deleted file mode 100644
index 7c10220bf5..0000000000
Binary files a/apps/www/public/images/og/og-image.jpg and /dev/null differ
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 3e28b3acdc..28c0406029 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -9,7 +9,7 @@ version: "3.8"
 services:
   studio:
     container_name: supabase-studio
-    image: supabase/studio:20230330-99fed3d
+    image: supabase/studio:20230622-d8395eb
     restart: unless-stopped
     healthcheck:
       test:
@@ -57,7 +57,7 @@ services:
 
   auth:
     container_name: supabase-auth
-    image: supabase/gotrue:v2.60.7
+    image: supabase/gotrue:v2.62.1
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -130,7 +130,7 @@ services:
 
   realtime:
     container_name: realtime-dev.supabase-realtime
-    image: supabase/realtime:v2.5.1
+    image: supabase/realtime:v2.10.1
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -168,7 +168,7 @@ services:
 
   storage:
     container_name: supabase-storage
-    image: supabase/storage-api:v0.28.2
+    image: supabase/storage-api:v0.40.4
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -211,7 +211,7 @@ services:
 
   imgproxy:
     container_name: supabase-imgproxy
-    image: darthsim/imgproxy:v3.13
+    image: darthsim/imgproxy:v3.8.0
     healthcheck:
       test: [ "CMD", "imgproxy", "health" ]
       timeout: 5s
@@ -227,7 +227,7 @@ services:
 
   meta:
     container_name: supabase-meta
-    image: supabase/postgres-meta:v0.60.7
+    image: supabase/postgres-meta:v0.66.3
     depends_on:
       db:
         # Disable this if you are using an external Postgres database
@@ -243,7 +243,7 @@ services:
 
   functions:
     container_name: supabase-edge-functions
-    image: supabase/edge-runtime:v1.2.12
+    image: supabase/edge-runtime:v1.5.2
     restart: unless-stopped
     environment:
       JWT_SECRET: ${JWT_SECRET}
@@ -263,7 +263,7 @@ services:
   # Comment out everything below this point if you are using an external Postgres database
   db:
     container_name: supabase-db
-    image: supabase/postgres:15.1.0.54-rc0
+    image: supabase/postgres:15.1.0.90
     healthcheck:
       test: pg_isready -U postgres -h localhost
       interval: 5s
diff --git a/examples/auth/nextjs/package-lock.json b/examples/auth/nextjs/package-lock.json
index 7b6d00438c..7f7f8fb27e 100644
--- a/examples/auth/nextjs/package-lock.json
+++ b/examples/auth/nextjs/package-lock.json
@@ -8,7 +8,8 @@
       "name": "full-nextjs-auth-helpers",
       "version": "0.1.0",
       "dependencies": {
-        "@supabase/auth-helpers-nextjs": "^0.7.0-next.8",
+        "@supabase/auth-helpers-nextjs": "^0.7.1",
+        "@supabase/supabase-js": "^2.26.0",
         "@types/node": "^20.2.3",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
@@ -324,11 +325,11 @@
       "dev": true
     },
     "node_modules/@supabase/auth-helpers-nextjs": {
-      "version": "0.7.0-next.8",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.7.0-next.8.tgz",
-      "integrity": "sha512-7pCbdnyAQo+D4qYQCvfg4B3OHIPtrILy/4LNwmF+1uheDeK7B6pxfN2SVeOR2TU3lolxMwEKUP6Q0h1qiCXbQg==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.7.2.tgz",
+      "integrity": "sha512-n5IyGBYJV/WiR5Rgw4CUaiJYiOv9yW2of4ZP4EyzKt2O6/6rztt7PcGE4AoK2vERw+fb5F2QtJBdt6J5eOYCCw==",
       "dependencies": {
-        "@supabase/auth-helpers-shared": "0.4.0-next.3",
+        "@supabase/auth-helpers-shared": "0.4.1",
         "set-cookie-parser": "^2.6.0"
       },
       "peerDependencies": {
@@ -336,9 +337,9 @@
       }
     },
     "node_modules/@supabase/auth-helpers-shared": {
-      "version": "0.4.0-next.3",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.4.0-next.3.tgz",
-      "integrity": "sha512-ELvEbYPJdTlwvqXsHkRN8ADcRe1IQxHt+UNqxbV2SKIpJCieQ4BMsgUVI/w+e3gMQHRbydk0PaJpOa9aStzMyg==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.4.1.tgz",
+      "integrity": "sha512-IEDX9JzWkIjQiLUaP4Qy5YDiG0jFQatWfS+jw8cCQs6QfbNdEPd2Y3qonwGHnM90CZom9SvjuylBv2pFVAL7Lw==",
       "dependencies": {
         "jose": "^4.14.3"
       },
@@ -347,37 +348,33 @@
       }
     },
     "node_modules/@supabase/functions-js": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.1.tgz",
-      "integrity": "sha512-bIR1Puae6W+1/MzPfYBWOG/SCWGo4B5CB7c0ZZksvliNEAzhxNBJ0UFKYINcGdGtxG8ZC+1xr3utWpNZNwnoRw==",
-      "peer": true,
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.2.tgz",
+      "integrity": "sha512-QCR6pwJs9exCl37bmpMisUd6mf+0SUBJ6mUpiAjEkSJ/+xW8TCuO14bvkWHADd5hElJK9MxNlMQXxSA4DRz9nQ==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/gotrue-js": {
-      "version": "2.27.1",
-      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.27.1.tgz",
-      "integrity": "sha512-rewbfKTC9DZNnPy4rRpr5ViBXre55wEXPWOueh/ZgwunR1TGmntRcraIM6SDKrP6iRD6ucx325a467uZ5U+KWg==",
-      "peer": true,
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.31.0.tgz",
+      "integrity": "sha512-YcwlbbNfedlue/HVIXtYBb4fuOrs29gNOTl6AmyxPp4zryRxzFvslVN9kmLDBRUAVU9fnPJh2bgOR3chRjJX5w==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/postgrest-js": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.6.1.tgz",
-      "integrity": "sha512-WDBUPOCOwcZonaCwEodwdA8hwWYOiXroDF9vWGxZxKAnuSVE2Ieci/kvhR4EsWvgGST2h90LRowgO+msXe8+fA==",
-      "peer": true,
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.7.1.tgz",
+      "integrity": "sha512-xPRYLaZrkLbXNlzmHW6Wtf9hmcBLjjI5xUz2zj8oE2hgXGaYoZBBkpN9bmW9i17Z1f6Ujxa942AqK439XOA36A==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/realtime-js": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
-      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
-      "peer": true,
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.3.tgz",
+      "integrity": "sha512-c7TzL81sx2kqyxsxcDduJcHL9KJdCOoKimGP6lQSqiZKX42ATlBZpWbyy9KFGFBjAP4nyopMf5JhPi2ZH9jyNw==",
       "dependencies": {
         "@types/phoenix": "^1.5.4",
         "@types/websocket": "^1.0.3",
@@ -388,21 +385,19 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
       "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
-      "peer": true,
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.22.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.22.0.tgz",
-      "integrity": "sha512-omkgSWL1HwnpXZZy+yshFLx/qqxwk9kx9jbRM6IHNEylKrH/sz6JX7rGyIOmN9niDxMRjsCu1nwuBhD6IiF2xg==",
-      "peer": true,
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.26.0.tgz",
+      "integrity": "sha512-RXmTPTobaYAwkSobadHZmEVLmzX3SGrtRZIGfLWnLv92VzBRrjuXn0a+bJqKl50GUzsyqPA+j5pod7EwMkcH5A==",
       "dependencies": {
         "@supabase/functions-js": "^2.1.0",
-        "@supabase/gotrue-js": "^2.26.0",
-        "@supabase/postgrest-js": "^1.1.1",
-        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/gotrue-js": "^2.31.0",
+        "@supabase/postgrest-js": "^1.7.0",
+        "@supabase/realtime-js": "^2.7.3",
         "@supabase/storage-js": "^2.5.1",
         "cross-fetch": "^3.1.5"
       }
@@ -427,10 +422,9 @@
       "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw=="
     },
     "node_modules/@types/phoenix": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
-      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA==",
-      "peer": true
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.0.tgz",
+      "integrity": "sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g=="
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
@@ -464,7 +458,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
       "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
-      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -797,7 +790,6 @@
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
       "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -897,7 +889,6 @@
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
       "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==",
-      "peer": true,
       "dependencies": {
         "node-fetch": "^2.6.11"
       }
@@ -924,7 +915,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
       "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-      "peer": true,
       "dependencies": {
         "es5-ext": "^0.10.50",
         "type": "^1.0.1"
@@ -1165,7 +1155,6 @@
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
       "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "es6-iterator": "^2.0.3",
         "es6-symbol": "^3.1.3",
@@ -1179,7 +1168,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
       "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-      "peer": true,
       "dependencies": {
         "d": "1",
         "es5-ext": "^0.10.35",
@@ -1190,7 +1178,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
       "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-      "peer": true,
       "dependencies": {
         "d": "^1.0.1",
         "ext": "^1.1.2"
@@ -1651,7 +1638,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
       "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
-      "peer": true,
       "dependencies": {
         "type": "^2.7.2"
       }
@@ -1659,8 +1645,7 @@
     "node_modules/ext/node_modules/type": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
-      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
-      "peer": true
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -2380,8 +2365,7 @@
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "peer": true
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
@@ -2687,14 +2671,12 @@
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
-      "peer": true
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "node_modules/node-fetch": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
       "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
-      "peer": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -2714,7 +2696,6 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
       "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
-      "peer": true,
       "bin": {
         "node-gyp-build": "bin.js",
         "node-gyp-build-optional": "optional.js",
@@ -3477,8 +3458,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "peer": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
@@ -3521,8 +3501,7 @@
     "node_modules/type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-      "peer": true
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -3564,7 +3543,6 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
       "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "peer": true,
       "dependencies": {
         "is-typedarray": "^1.0.0"
       }
@@ -3609,7 +3587,6 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
       "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -3620,14 +3597,12 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "peer": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/websocket": {
       "version": "1.0.34",
       "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
       "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
-      "peer": true,
       "dependencies": {
         "bufferutil": "^4.0.1",
         "debug": "^2.2.0",
@@ -3644,7 +3619,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "peer": true,
       "dependencies": {
         "ms": "2.0.0"
       }
@@ -3652,14 +3626,12 @@
     "node_modules/websocket/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "peer": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "peer": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -3747,7 +3719,6 @@
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
       "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.32"
       }
@@ -3954,54 +3925,50 @@
       "dev": true
     },
     "@supabase/auth-helpers-nextjs": {
-      "version": "0.7.0-next.8",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.7.0-next.8.tgz",
-      "integrity": "sha512-7pCbdnyAQo+D4qYQCvfg4B3OHIPtrILy/4LNwmF+1uheDeK7B6pxfN2SVeOR2TU3lolxMwEKUP6Q0h1qiCXbQg==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.7.2.tgz",
+      "integrity": "sha512-n5IyGBYJV/WiR5Rgw4CUaiJYiOv9yW2of4ZP4EyzKt2O6/6rztt7PcGE4AoK2vERw+fb5F2QtJBdt6J5eOYCCw==",
       "requires": {
-        "@supabase/auth-helpers-shared": "0.4.0-next.3",
+        "@supabase/auth-helpers-shared": "0.4.1",
         "set-cookie-parser": "^2.6.0"
       }
     },
     "@supabase/auth-helpers-shared": {
-      "version": "0.4.0-next.3",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.4.0-next.3.tgz",
-      "integrity": "sha512-ELvEbYPJdTlwvqXsHkRN8ADcRe1IQxHt+UNqxbV2SKIpJCieQ4BMsgUVI/w+e3gMQHRbydk0PaJpOa9aStzMyg==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-helpers-shared/-/auth-helpers-shared-0.4.1.tgz",
+      "integrity": "sha512-IEDX9JzWkIjQiLUaP4Qy5YDiG0jFQatWfS+jw8cCQs6QfbNdEPd2Y3qonwGHnM90CZom9SvjuylBv2pFVAL7Lw==",
       "requires": {
         "jose": "^4.14.3"
       }
     },
     "@supabase/functions-js": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.1.tgz",
-      "integrity": "sha512-bIR1Puae6W+1/MzPfYBWOG/SCWGo4B5CB7c0ZZksvliNEAzhxNBJ0UFKYINcGdGtxG8ZC+1xr3utWpNZNwnoRw==",
-      "peer": true,
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.2.tgz",
+      "integrity": "sha512-QCR6pwJs9exCl37bmpMisUd6mf+0SUBJ6mUpiAjEkSJ/+xW8TCuO14bvkWHADd5hElJK9MxNlMQXxSA4DRz9nQ==",
       "requires": {
         "cross-fetch": "^3.1.5"
       }
     },
     "@supabase/gotrue-js": {
-      "version": "2.27.1",
-      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.27.1.tgz",
-      "integrity": "sha512-rewbfKTC9DZNnPy4rRpr5ViBXre55wEXPWOueh/ZgwunR1TGmntRcraIM6SDKrP6iRD6ucx325a467uZ5U+KWg==",
-      "peer": true,
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.31.0.tgz",
+      "integrity": "sha512-YcwlbbNfedlue/HVIXtYBb4fuOrs29gNOTl6AmyxPp4zryRxzFvslVN9kmLDBRUAVU9fnPJh2bgOR3chRjJX5w==",
       "requires": {
         "cross-fetch": "^3.1.5"
       }
     },
     "@supabase/postgrest-js": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.6.1.tgz",
-      "integrity": "sha512-WDBUPOCOwcZonaCwEodwdA8hwWYOiXroDF9vWGxZxKAnuSVE2Ieci/kvhR4EsWvgGST2h90LRowgO+msXe8+fA==",
-      "peer": true,
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.7.1.tgz",
+      "integrity": "sha512-xPRYLaZrkLbXNlzmHW6Wtf9hmcBLjjI5xUz2zj8oE2hgXGaYoZBBkpN9bmW9i17Z1f6Ujxa942AqK439XOA36A==",
       "requires": {
         "cross-fetch": "^3.1.5"
       }
     },
     "@supabase/realtime-js": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
-      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
-      "peer": true,
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.3.tgz",
+      "integrity": "sha512-c7TzL81sx2kqyxsxcDduJcHL9KJdCOoKimGP6lQSqiZKX42ATlBZpWbyy9KFGFBjAP4nyopMf5JhPi2ZH9jyNw==",
       "requires": {
         "@types/phoenix": "^1.5.4",
         "@types/websocket": "^1.0.3",
@@ -4012,21 +3979,19 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
       "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
-      "peer": true,
       "requires": {
         "cross-fetch": "^3.1.5"
       }
     },
     "@supabase/supabase-js": {
-      "version": "2.22.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.22.0.tgz",
-      "integrity": "sha512-omkgSWL1HwnpXZZy+yshFLx/qqxwk9kx9jbRM6IHNEylKrH/sz6JX7rGyIOmN9niDxMRjsCu1nwuBhD6IiF2xg==",
-      "peer": true,
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.26.0.tgz",
+      "integrity": "sha512-RXmTPTobaYAwkSobadHZmEVLmzX3SGrtRZIGfLWnLv92VzBRrjuXn0a+bJqKl50GUzsyqPA+j5pod7EwMkcH5A==",
       "requires": {
         "@supabase/functions-js": "^2.1.0",
-        "@supabase/gotrue-js": "^2.26.0",
-        "@supabase/postgrest-js": "^1.1.1",
-        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/gotrue-js": "^2.31.0",
+        "@supabase/postgrest-js": "^1.7.0",
+        "@supabase/realtime-js": "^2.7.3",
         "@supabase/storage-js": "^2.5.1",
         "cross-fetch": "^3.1.5"
       }
@@ -4051,10 +4016,9 @@
       "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw=="
     },
     "@types/phoenix": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
-      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA==",
-      "peer": true
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.0.tgz",
+      "integrity": "sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g=="
     },
     "@types/prop-types": {
       "version": "15.7.5",
@@ -4088,7 +4052,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
       "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
-      "peer": true,
       "requires": {
         "@types/node": "*"
       }
@@ -4315,7 +4278,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
       "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
-      "peer": true,
       "requires": {
         "node-gyp-build": "^4.3.0"
       }
@@ -4384,7 +4346,6 @@
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
       "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==",
-      "peer": true,
       "requires": {
         "node-fetch": "^2.6.11"
       }
@@ -4408,7 +4369,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
       "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-      "peer": true,
       "requires": {
         "es5-ext": "^0.10.50",
         "type": "^1.0.1"
@@ -4601,7 +4561,6 @@
       "version": "0.10.62",
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
       "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
-      "peer": true,
       "requires": {
         "es6-iterator": "^2.0.3",
         "es6-symbol": "^3.1.3",
@@ -4612,7 +4571,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
       "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-      "peer": true,
       "requires": {
         "d": "1",
         "es5-ext": "^0.10.35",
@@ -4623,7 +4581,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
       "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-      "peer": true,
       "requires": {
         "d": "^1.0.1",
         "ext": "^1.1.2"
@@ -4968,7 +4925,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
       "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
-      "peer": true,
       "requires": {
         "type": "^2.7.2"
       },
@@ -4976,8 +4932,7 @@
         "type": {
           "version": "2.7.2",
           "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
-          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
-          "peer": true
+          "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
         }
       }
     },
@@ -5485,8 +5440,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "peer": true
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
     "is-weakmap": {
       "version": "2.0.1",
@@ -5705,14 +5659,12 @@
     "next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
-      "peer": true
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "node-fetch": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
       "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
-      "peer": true,
       "requires": {
         "whatwg-url": "^5.0.0"
       }
@@ -5720,8 +5672,7 @@
     "node-gyp-build": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
-      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
-      "peer": true
+      "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ=="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -6228,8 +6179,7 @@
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "peer": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "tsconfig-paths": {
       "version": "3.14.2",
@@ -6268,8 +6218,7 @@
     "type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-      "peer": true
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
     },
     "type-check": {
       "version": "0.4.0",
@@ -6299,7 +6248,6 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
       "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "peer": true,
       "requires": {
         "is-typedarray": "^1.0.0"
       }
@@ -6333,7 +6281,6 @@
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
       "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "peer": true,
       "requires": {
         "node-gyp-build": "^4.3.0"
       }
@@ -6341,14 +6288,12 @@
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "peer": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "websocket": {
       "version": "1.0.34",
       "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
       "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
-      "peer": true,
       "requires": {
         "bufferutil": "^4.0.1",
         "debug": "^2.2.0",
@@ -6362,7 +6307,6 @@
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "peer": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -6370,8 +6314,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "peer": true
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
         }
       }
     },
@@ -6379,7 +6322,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "peer": true,
       "requires": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -6445,8 +6387,7 @@
     "yaeti": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
-      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
-      "peer": true
+      "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug=="
     },
     "yallist": {
       "version": "4.0.0",
diff --git a/examples/auth/nextjs/package.json b/examples/auth/nextjs/package.json
index 97dd88bcd4..1e70631c6a 100644
--- a/examples/auth/nextjs/package.json
+++ b/examples/auth/nextjs/package.json
@@ -9,7 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@supabase/auth-helpers-nextjs": "^0.7.0",
+    "@supabase/auth-helpers-nextjs": "^0.7.1",
+    "@supabase/supabase-js": "^2.26.0",
     "@types/node": "^20.2.3",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
diff --git a/examples/todo-list/nextjs-todo-list/lib/initSupabase.ts b/examples/todo-list/nextjs-todo-list/lib/initSupabase.ts
index 5457bdff41..7827f47d5a 100644
--- a/examples/todo-list/nextjs-todo-list/lib/initSupabase.ts
+++ b/examples/todo-list/nextjs-todo-list/lib/initSupabase.ts
@@ -1,7 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
-import { Database } from './schema'
 
 export const supabase = createClient(
-  process.env.NEXT_PUBLIC_SUPABASE_URL,
-  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+  process.env.NEXT_PUBLIC_SUPABASE_URL ?? '',
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? ''
 )
diff --git a/examples/user-management/nextjs-user-management/package-lock.json b/examples/user-management/nextjs-user-management/package-lock.json
index 70c2257977..3fc8087103 100644
--- a/examples/user-management/nextjs-user-management/package-lock.json
+++ b/examples/user-management/nextjs-user-management/package-lock.json
@@ -11,6 +11,7 @@
         "@supabase/auth-helpers-nextjs": "^0.7.1",
         "@supabase/auth-ui-react": "^0.4.2",
         "@supabase/auth-ui-shared": "^0.1.6",
+        "@supabase/supabase-js": "^2.26.0",
         "@types/node": "20.1.4",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
@@ -375,34 +376,30 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.1.1.tgz",
       "integrity": "sha512-bIR1Puae6W+1/MzPfYBWOG/SCWGo4B5CB7c0ZZksvliNEAzhxNBJ0UFKYINcGdGtxG8ZC+1xr3utWpNZNwnoRw==",
-      "peer": true,
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/gotrue-js": {
-      "version": "2.26.0",
-      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.26.0.tgz",
-      "integrity": "sha512-orxz8nwaF5D1nY/9H5xxTfFSCTvYeDLx24UO/Mxsx83xFP0t5RNxQZ0lEHBOhHhXJ4vR/COv79AxoWCOTu/7Rg==",
-      "peer": true,
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.31.0.tgz",
+      "integrity": "sha512-YcwlbbNfedlue/HVIXtYBb4fuOrs29gNOTl6AmyxPp4zryRxzFvslVN9kmLDBRUAVU9fnPJh2bgOR3chRjJX5w==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/postgrest-js": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.6.1.tgz",
-      "integrity": "sha512-WDBUPOCOwcZonaCwEodwdA8hwWYOiXroDF9vWGxZxKAnuSVE2Ieci/kvhR4EsWvgGST2h90LRowgO+msXe8+fA==",
-      "peer": true,
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.7.1.tgz",
+      "integrity": "sha512-xPRYLaZrkLbXNlzmHW6Wtf9hmcBLjjI5xUz2zj8oE2hgXGaYoZBBkpN9bmW9i17Z1f6Ujxa942AqK439XOA36A==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/realtime-js": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.2.tgz",
-      "integrity": "sha512-Fi6xAl5PUkqnjl3wo4rdcQIbMG3+yTRX1aUZe/yfvTG84RMvmCXJ1yN6MmafVLeZpU1xkaz5Vx4L0tnHcLiy6w==",
-      "peer": true,
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.7.3.tgz",
+      "integrity": "sha512-c7TzL81sx2kqyxsxcDduJcHL9KJdCOoKimGP6lQSqiZKX42ATlBZpWbyy9KFGFBjAP4nyopMf5JhPi2ZH9jyNw==",
       "dependencies": {
         "@types/phoenix": "^1.5.4",
         "@types/websocket": "^1.0.3",
@@ -413,21 +410,19 @@
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.5.1.tgz",
       "integrity": "sha512-nkR0fQA9ScAtIKA3vNoPEqbZv1k5B5HVRYEvRWdlP6mUpFphM9TwPL2jZ/ztNGMTG5xT6SrHr+H7Ykz8qzbhjw==",
-      "peer": true,
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
     },
     "node_modules/@supabase/supabase-js": {
-      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.21.0.tgz",
-      "integrity": "sha512-FW3ZzBoc4orSgfX0dXrmJoXAcI/hiekmqXTkN64vjtUF2Urp3UjyAf71UTtV9Jl6ejHoe3K++e0+Rg9zKUJh5w==",
-      "peer": true,
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.26.0.tgz",
+      "integrity": "sha512-RXmTPTobaYAwkSobadHZmEVLmzX3SGrtRZIGfLWnLv92VzBRrjuXn0a+bJqKl50GUzsyqPA+j5pod7EwMkcH5A==",
       "dependencies": {
         "@supabase/functions-js": "^2.1.0",
-        "@supabase/gotrue-js": "^2.23.0",
-        "@supabase/postgrest-js": "^1.1.1",
-        "@supabase/realtime-js": "^2.7.2",
+        "@supabase/gotrue-js": "^2.31.0",
+        "@supabase/postgrest-js": "^1.7.0",
+        "@supabase/realtime-js": "^2.7.3",
         "@supabase/storage-js": "^2.5.1",
         "cross-fetch": "^3.1.5"
       }
@@ -451,10 +446,9 @@
       "integrity": "sha512-At4pvmIOki8yuwLtd7BNHl3CiWNbtclUbNtScGx4OHfBd4/oWoJC8KRCIxXwkdndzhxOsPXihrsOoydxBjlE9Q=="
     },
     "node_modules/@types/phoenix": {
-      "version": "1.5.6",
-      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.5.6.tgz",
-      "integrity": "sha512-e7jZ6I9uyRGsg7MNwQcarmBvRlbGb9DibbocE9crVnxqsy6C23RMxLWbJ2CQ3vgCW7taoL1L+F02EcjA6ld7XA==",
-      "peer": true
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.0.tgz",
+      "integrity": "sha512-qwfpsHmFuhAS/dVd4uBIraMxRd56vwBUYQGZ6GpXnFuM2XMRFJbIyruFKKlW2daQliuYZwe0qfn/UjFCDKic5g=="
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
@@ -488,7 +482,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
       "integrity": "sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==",
-      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -823,7 +816,6 @@
       "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.7.tgz",
       "integrity": "sha512-kukuqc39WOHtdxtw4UScxF/WVnMFVSQVKhtx3AjZJzhd0RGZZldcrfSEbVsWWe6KNH253574cq5F+wpv0G9pJw==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -940,7 +932,6 @@
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.6.tgz",
       "integrity": "sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==",
-      "peer": true,
       "dependencies": {
         "node-fetch": "^2.6.11"
       }
@@ -967,7 +958,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
       "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-      "peer": true,
       "dependencies": {
         "es5-ext": "^0.10.50",
         "type": "^1.0.1"
@@ -1240,7 +1230,6 @@
       "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
       "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "es6-iterator": "^2.0.3",
         "es6-symbol": "^3.1.3",
@@ -1254,7 +1243,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
       "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-      "peer": true,
       "dependencies": {
         "d": "1",
         "es5-ext": "^0.10.35",
@@ -1265,7 +1253,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
       "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
-      "peer": true,
       "dependencies": {
         "d": "^1.0.1",
         "ext": "^1.1.2"
@@ -1731,7 +1718,6 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
       "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
-      "peer": true,
       "dependencies": {
         "type": "^2.7.2"
       }
@@ -1739,8 +1725,7 @@
     "node_modules/ext/node_modules/type": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz",
-      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==",
-      "peer": true
+      "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw=="
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -2468,8 +2453,7 @@
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==",
-      "peer": true
+      "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
@@ -2807,14 +2791,12 @@
     "node_modules/next-tick": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
-      "peer": true
+      "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
     },
     "node_modules/node-fetch": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.11.tgz",
       "integrity": "sha512-4I6pdBY1EthSqDmJkiNk3JIT8cswwR9nfeW/cPdUagJYEQG7R95WRH74wpz7ma8Gh/9dI9FP+OU+0E4FvtA55w==",
-      "peer": true,
       "dependencies": {
         "whatwg-url": "^5.0.0"
       },
@@ -2834,7 +2816,6 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.0.tgz",
       "integrity": "sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==",
-      "peer": true,
       "bin": {
         "node-gyp-build": "bin.js",
         "node-gyp-build-optional": "optional.js",
@@ -3723,8 +3704,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "peer": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
@@ -3764,8 +3744,7 @@
     "node_modules/type": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-      "peer": true
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
     },
     "node_modules/type-check": {
       "version": "0.4.0",
@@ -3806,7 +3785,6 @@
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
       "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "peer": true,
       "dependencies": {
         "is-typedarray": "^1.0.0"
       }
@@ -3858,7 +3836,6 @@
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
       "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "node-gyp-build": "^4.3.0"
       },
@@ -3869,14 +3846,12 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "peer": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/websocket": {
       "version": "1.0.34",
       "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.34.tgz",
       "integrity": "sha512-PRDso2sGwF6kM75QykIesBijKSVceR6jL2G8NGYyq2XrItNC2P5/qL5XeR056GhA+Ly7JMFvJb9I312mJfmqnQ==",
-      "peer": true,
       "dependencies": {
         "bufferutil": "^4.0.1",
         "debug": "^2.2.0",
@@ -3893,7 +3868,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "peer": true,
       "dependencies": {
         "ms": "2.0.0"
       }
@@ -3901,14 +3875,12 @@
     "node_modules/websocket/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "peer": true
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "peer": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -3993,7 +3965,6 @@
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
       "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.32"
       }
diff --git a/examples/user-management/nextjs-user-management/package.json b/examples/user-management/nextjs-user-management/package.json
index 46855c9727..27ebcd19f6 100644
--- a/examples/user-management/nextjs-user-management/package.json
+++ b/examples/user-management/nextjs-user-management/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@supabase/auth-helpers-nextjs": "^0.7.1",
+    "@supabase/supabase-js": "^2.26.0",
     "@supabase/auth-ui-react": "^0.4.2",
     "@supabase/auth-ui-shared": "^0.1.6",
     "@types/node": "20.1.4",
diff --git a/i18n/README.bg.md b/i18n/README.bg.md
index e6e2592881..78a4634659 100644
--- a/i18n/README.bg.md
+++ b/i18n/README.bg.md
@@ -12,9 +12,9 @@
 - [x] Хоствана база данни Postgres. [Документи](https://supabase.com/docs/guides/database)
 - [x] Удостоверяване и оторизация. [Документи](https://supabase.com/docs/guides/auth)
 - [x] Автоматично генерирани API.
-  - [x] REST. [Документи](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Документи](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Абонаменти в реално време. [Документи](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Документи](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Документи](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Абонаменти в реално време. [Документи](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Функции.
   - [x] Функции за бази данни. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Крайни функции [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.bn.md b/i18n/README.bn.md
index 220d342c70..a6eaa0878f 100644
--- a/i18n/README.bn.md
+++ b/i18n/README.bn.md
@@ -12,9 +12,9 @@
 - [x] হোস্ট করা পোস্টগ্রেস ডাটাবেস. [ডক্স](https://supabase.com/docs/guides/database)
 - [x] অথেনটিকেশন এবং অথরাইজড . [ডক্স](https://supabase.com/docs/guides/auth)
 - [x] স্বয়ংক্রিয়ভাবে তৈরি এপিআই.
-  - [x] রেস্ট. [ডক্স](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] রিয়েলটাইম সাবস্ক্রিপশন. [ডক্স](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] গ্রাফকিউএল (বেটা). [ডক্স](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] রেস্ট. [ডক্স](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] রিয়েলটাইম সাবস্ক্রিপশন. [ডক্স](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] গ্রাফকিউএল (বেটা). [ডক্স](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] ফাংশনস.
   - [x] ডাটাবেস ফাংশনস. [ডক্স](https://supabase.com/docs/guides/database/functions)
   - [x] এজ ফাংশনস. [ডক্স](https://supabase.com/docs/guides/functions)
@@ -43,7 +43,7 @@
 - [x] পাবলিক বেটা: বেশিরভাগ নন-এন্টারপ্রাইজ ব্যবহারের ক্ষেত্রে যথেষ্ট স্থিতিশীল
 - [ ] পাবলিক: প্রোডাকশন রেডি
 
-আমরা বর্তমানে পাবলিক বেটাতে আছি। বড় আপডেটের বিজ্ঞপ্তি পেতে এই রিপুর "রিলিজ" দেখুন।
+আমরা বর্তমানে পাবলিক বিটাতে আছি। বড় আপডেটের বিজ্ঞপ্তি পেতে এই রেপোর "রিলিজ" দেখুন।
 
 <kbd><img src="https://raw.githubusercontent.com/supabase/supabase/d5f7f413ab356dc1a92075cb3cee4e40a957d5b1/web/static/watch-repo.gif" alt="এই রিপু দেখুন"/></kbd>
 
diff --git a/i18n/README.cs.md b/i18n/README.cs.md
index 2ee5648eeb..5b66bfa1f3 100644
--- a/i18n/README.cs.md
+++ b/i18n/README.cs.md
@@ -12,9 +12,9 @@
 - [x] hostovaná databáze Postgres. [Dokumenty](https://supabase.com/docs/guides/database)
 - [x] Ověřování a autorizace. [Dokumenty](https://supabase.com/docs/guides/auth)
 - [x] Automaticky generované rozhraní API.
-  - [x] REST. [Dokumenty](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumenty](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Odběry v reálném čase. [Dokumenty](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumenty](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumenty](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Odběry v reálném čase. [Dokumenty](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkce.
   - [x] Databázové funkce. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Okrajové funkce [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.da.md b/i18n/README.da.md
index 9312c336ab..f0100027ee 100644
--- a/i18n/README.da.md
+++ b/i18n/README.da.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
 - [x] Autentifikation og autorisering. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Automatisk genererede API'er.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Realtidsabonnementer. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Realtidsabonnementer. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funktioner.
   - [x] Databasefunktioner. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge-funktioner [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.de.md b/i18n/README.de.md
index 76d4c57323..fc2a2ec307 100644
--- a/i18n/README.de.md
+++ b/i18n/README.de.md
@@ -12,9 +12,9 @@
 - [x] Gehostete Postgres-Datenbank. [Docs](https://supabase.com/docs/guides/database)
 - [x] Authentifizierung und Autorisierung. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Auto-generierte APIs.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Echtzeit-Abonnements. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Echtzeit-Abonnements. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funktionen.
   - [x] Datenbank-Funktionen. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge-Funktionen [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.el.md b/i18n/README.el.md
index ab2a9e0d4c..72825e1a5c 100644
--- a/i18n/README.el.md
+++ b/i18n/README.el.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
 - [x] Αυθεντικοποίηση και εξουσιοδότηση. [Έγγραφα](https://supabase.com/docs/guides/auth)
 - [x] Αυτόματα παραγόμενα APIs.
-  - [x] REST. [Έγγραφα](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Συνδρομές σε πραγματικό χρόνο. [Έγγραφα](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Έγγραφα](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Συνδρομές σε πραγματικό χρόνο. [Έγγραφα](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Συναρτήσεις.
   - [x] Συναρτήσεις βάσης δεδομένων. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.es.md b/i18n/README.es.md
index 7ef62c5b19..8eabbc6b79 100644
--- a/i18n/README.es.md
+++ b/i18n/README.es.md
@@ -12,9 +12,9 @@
 - Base de datos Postgres alojada. [Documentación](https://supabase.com/docs/guides/database)
 - [x] Autenticación y autorización. [Documentos](https://supabase.com/docs/guides/auth)
 - [x] API autogeneradas.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Documentos](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Suscripciones en tiempo real. [Documentos](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Documentos](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Suscripciones en tiempo real. [Documentos](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funciones.
   - [x] Funciones de base de datos. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Funciones de borde [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.et.md b/i18n/README.et.md
index 32aea36daa..154ab2136c 100644
--- a/i18n/README.et.md
+++ b/i18n/README.et.md
@@ -12,9 +12,9 @@
 - [x] Hostitud Postgres andmebaas. [Dokumendid](https://supabase.com/docs/guides/database)
 - [x] Autentimine ja autoriseerimine. [Dokumendid](https://supabase.com/docs/guides/auth)
 - [x] Automaatselt genereeritud APId.
-  - [x] REST. [Dokumendid](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumendid](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Reaalajas toimivad tellimused. [Dokumendid](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumendid](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumendid](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Reaalajas toimivad tellimused. [Dokumendid](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funktsioonid.
   - [x] Andmebaasi funktsioonid. [Dokumendid](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.fi.md b/i18n/README.fi.md
index 98966d05bb..70bd873e5e 100644
--- a/i18n/README.fi.md
+++ b/i18n/README.fi.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
 - [x] Tunnistus ja valtuutus. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Automaattisesti luodut API:t.
-  - [x] REST. [Asiakirjat](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Asiakirjat](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Reaaliaikaiset tilaukset. [Asiakirjat](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Asiakirjat](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Asiakirjat](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Reaaliaikaiset tilaukset. [Asiakirjat](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funktiot.
   - [x] Tietokantafunktiot. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Reunatoiminnot [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.fr.md b/i18n/README.fr.md
index 6c50af2eb9..1cdbaffcda 100644
--- a/i18n/README.fr.md
+++ b/i18n/README.fr.md
@@ -12,9 +12,9 @@
 - [x] Base de données Postgres hébergée. [Docs](https://supabase.com/docs/guides/database)
 - [x] Authentification et autorisation. [Docs](https://supabase.com/docs/guides/auth)
 - [x] API générées automatiquement.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Abonnements en temps réel. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Abonnements en temps réel. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Fonctions.
   - [x] Fonctions de base de données. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Fonctions Edge [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.hi.md b/i18n/README.hi.md
index 035fb28723..0d60992109 100644
--- a/i18n/README.hi.md
+++ b/i18n/README.hi.md
@@ -12,9 +12,9 @@
 - [x] होस्टेड पोस्टग्रेज डेटाबेस। [प्रलेखन](https://supabase.com/docs/guides/database)
 - [x] प्रमाणीकरण और प्राधिकरण। [प्रलेखन](https://supabase.com/docs/guides/auth)
 - [x] उत्पन्न एपीआईस।
-  - [x] रेस्ट। [प्रलेखन](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] रीयलटाइम सदस्यता। [प्रलेखन](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] ग्राफ़क्यूएल (प्रयोगात्मक)। [प्रलेखन](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] रेस्ट। [प्रलेखन](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] रीयलटाइम सदस्यता। [प्रलेखन](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] ग्राफ़क्यूएल (प्रयोगात्मक)। [प्रलेखन](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] फ़ंक्शंस।
   - [x] डेटाबेस फ़ंक्शंस। [प्रलेखन](https://supabase.com/docs/guides/database/functions)
   - [x] एज फ़ंक्शंस। [प्रलेखन](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.hu.md b/i18n/README.hu.md
index 896e9b33fe..e45f0426b1 100644
--- a/i18n/README.hu.md
+++ b/i18n/README.hu.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres adatbázis. [Docs](https://supabase.com/docs/guides/database)
 - [x] Hitelesítés és engedélyezés. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Automatikusan generált API-k.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Valós idejű előfizetések. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Valós idejű előfizetések. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkciók.
   - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.id.md b/i18n/README.id.md
index e8cb7df5e1..297eddab02 100644
--- a/i18n/README.id.md
+++ b/i18n/README.id.md
@@ -12,9 +12,9 @@
 - [x] Basis Data Postgres yang dihosting. [Dokumen](https://supabase.com/docs/guides/database)
 - [x] Otentikasi dan Otorisasi. [Dokumen](https://supabase.com/docs/guides/auth)
 - [x] API yang dibuat secara otomatis.
-  - [x] REST. [Documents](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Documents](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Langganan realtime. [Documents](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Documents](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Documents](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Langganan realtime. [Documents](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Fungsi-fungsi.
   - [x] Fungsi-fungsi Basis Data. [Documents](https://supabase.com/docs/guides/database/functions)
   - [x] Fungsi Tepi [Documents](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.it.md b/i18n/README.it.md
index 6c8494b52c..822cd80bfb 100644
--- a/i18n/README.it.md
+++ b/i18n/README.it.md
@@ -12,9 +12,9 @@
 - Database Postgres ospitato. [Documenti](https://supabase.com/docs/guides/database)
 - [x] Autenticazione e autorizzazione. [Documenti](https://supabase.com/docs/guides/auth)
 - [x] API generate automaticamente.
-  - [x] REST. [Documenti](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Documenti](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Sottoscrizioni in tempo reale. [Documenti](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Documenti](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Documenti](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Sottoscrizioni in tempo reale. [Documenti](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funzioni.
   - [x] Funzioni di database. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Funzioni Edge [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.ja.md b/i18n/README.ja.md
index 3dc032bc36..b3c49bdfd7 100644
--- a/i18n/README.ja.md
+++ b/i18n/README.ja.md
@@ -12,9 +12,9 @@
 - [x] ホスティングされた Postgres データベースです。[ドックス](https://supabase.com/docs/guides/database)
 - [x] 認証と認可。[ドキュメント](https://supabase.com/docs/guides/auth)
 - [x] 自動生成される API。
-  - [x] REST。[ドキュメント](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL。[Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] リアルタイムサブスクリプション。[ドキュメント](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST。[ドキュメント](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL。[Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] リアルタイムサブスクリプション。[ドキュメント](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] 関数。
   - [x] データベースファンクション。[Docs](https://supabase.com/docs/guides/database/functions)
   - [x] エッジ機能 [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.jp.md b/i18n/README.jp.md
index ae7e4d456f..35a5f5150c 100644
--- a/i18n/README.jp.md
+++ b/i18n/README.jp.md
@@ -12,9 +12,9 @@
 - [x] ホスティングされた Postgres データベース [Docs](https://supabase.com/docs/guides/database)
 - [x] 認証・認可 [Docs](https://supabase.com/docs/guides/auth)
 - [x] API を自動生成
-  - [x] REST [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] リアルタイムサブスクリプション [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] GraphQL (Beta) [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] REST [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] リアルタイムサブスクリプション [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] GraphQL (Beta) [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] 関数
   - [x] データベース関数 [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.ko.md b/i18n/README.ko.md
index f70b96349e..89a6e2eea2 100644
--- a/i18n/README.ko.md
+++ b/i18n/README.ko.md
@@ -12,9 +12,9 @@
 - [x] 호스팅된 Postgres 데이터베이스. [문서](https://supabase.com/docs/guides/database)
 - [x] 인증 및 권한 부여. [문서](https://supabase.com/docs/guides/auth)
 - [x] 자동 생성 API.
-  - [x] REST. [문서](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [문서](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] 실시간 구독. [문서](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [문서](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [문서](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] 실시간 구독. [문서](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] 함수.
   - [x] 데이터베이스 함수. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] 엣지 기능 [문서](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.lt.md b/i18n/README.lt.md
index e19a3d5388..d5e1c69d4e 100644
--- a/i18n/README.lt.md
+++ b/i18n/README.lt.md
@@ -12,9 +12,9 @@
 - [x] Prieglobos Postgres duomenų bazė. [Dokumentai](https://supabase.com/docs/guides/database)
 - [x] Autentiškumo nustatymas ir autorizavimas. [Dokumentai](https://supabase.com/docs/guides/auth)
 - [x] Automatiškai generuojamos API.
-  - [x] REST. [Dokumentai](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumentai](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Realaus laiko prenumeratos. [Dokumentai](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumentai](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumentai](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Realaus laiko prenumeratos. [Dokumentai](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkcijos.
   - [x] Duomenų bazės funkcijos. [Dokumentai](https://supabase.com/docs/guides/database/functions)
   - [x] Kraštų funkcijos [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.lv.md b/i18n/README.lv.md
index d58a7e3f79..518bb79b79 100644
--- a/i18n/README.lv.md
+++ b/i18n/README.lv.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres datubāze. [Dokumenti](https://supabase.com/docs/guides/database)
 - [x] Autentifikācija un autorizācija. [Dokumenti](https://supabase.com/docs/guides/auth)
 - [x] Automātiski ģenerēti API.
-  - [x] REST. [Dokumenti](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumenti](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Reāllaika abonēšana. [Dokumenti](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumenti](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumenti](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Reāllaika abonēšana. [Dokumenti](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkcijas.
   - [x] Datubāzes funkcijas. [Dokumenti](https://supabase.com/docs/guides/database/functions)
   - [x] Edge funkcijas [Dokumenti](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.nb.md b/i18n/README.nb.md
index 7e6b83b6ea..3ec01daad1 100644
--- a/i18n/README.nb.md
+++ b/i18n/README.nb.md
@@ -12,9 +12,9 @@
 - [x] Hostet Postgres-database. [Dokumenter](https://supabase.com/docs/guides/database)
 - [x] Autentisering og autorisasjon. [Dokumenter](https://supabase.com/docs/guides/auth)
 - [x] Autogenererte API-er.
-  - [x] REST. [Dokumenter](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumenter](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Sanntidsabonnementer. [Dokumenter](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumenter](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumenter](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Sanntidsabonnementer. [Dokumenter](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funksjoner.
   - [x] Databasefunksjoner. [Dokumenter](https://supabase.com/docs/guides/database/functions)
   - [x] Edge-funksjoner [Dokumenter](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.nl.md b/i18n/README.nl.md
index 71404c96d5..6a6bdae073 100644
--- a/i18n/README.nl.md
+++ b/i18n/README.nl.md
@@ -12,9 +12,9 @@
 - [x]Gehoste Postgres Database. [Docs](https://supabase.com/docs/guides/database)
 - [x] Authenticatie en Autorisatie. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Automatisch gegenereerde API's.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Realtime abonnementen. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Realtime abonnementen. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Functies.
   - [x] Database functies. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Randfuncties. [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.pl.md b/i18n/README.pl.md
index 8ba151c9c4..7ec47d0a22 100644
--- a/i18n/README.pl.md
+++ b/i18n/README.pl.md
@@ -12,9 +12,9 @@
 - [x] hostowana baza danych Postgres [x]. [Dokumenty](https://supabase.com/docs/guides/database)
 - [x] uwierzytelnianie i autoryzacja [x]. [Dokumenty](https://supabase.com/docs/guides/auth)
 - [x] Automatycznie generowane interfejsy API.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Subskrypcje w czasie rzeczywistym. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Subskrypcje w czasie rzeczywistym. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkcje.
   - [x] Funkcje bazy danych. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Funkcje brzegowe [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.pt-PT.md b/i18n/README.pt-PT.md
index 223f2e80bc..7d8d478120 100644
--- a/i18n/README.pt-PT.md
+++ b/i18n/README.pt-PT.md
@@ -12,9 +12,9 @@
 - [x] Base de dados Postgres alojada. [Docs](https://supabase.com/docs/guides/database)
 - [x] Autenticação e autorização. [Docs](https://supabase.com/docs/guides/auth)
 - [x] APIs geradas automaticamente.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Assinaturas em tempo real. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Assinaturas em tempo real. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funções.
   - [x] Funções de base de dados. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Funções de Borda [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.pt-br.md b/i18n/README.pt-br.md
index df9207a25f..8b51680401 100644
--- a/i18n/README.pt-br.md
+++ b/i18n/README.pt-br.md
@@ -12,9 +12,9 @@
 - [x] Banco de dados Postgres hospedado. [Docs](https://supabase.com/docs/guides/database)
 - [x] Autenticação e autorização. [Docs](https://supabase.com/docs/guides/auth)
 - [x] APIs geradas automaticamente.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Assinaturas em tempo real. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Assinaturas em tempo real. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funções.
   - [x] Funções de banco de dados. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Funções de borda [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.ro.md b/i18n/README.ro.md
index 6d2c762f76..f48e674704 100644
--- a/i18n/README.ro.md
+++ b/i18n/README.ro.md
@@ -12,9 +12,9 @@
 - [x] Baza de date Postgres găzduită. [Docs](https://supabase.com/docs/guides/database)
 - [x] Autentificare și autorizare. [Docs](https://supabase.com/docs/guides/auth)
 - [x] API-uri generate automat.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Abonamente în timp real. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Abonamente în timp real. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funcții.
   - [x] Funcții de baze de date. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Funcții de margine. [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.ru.md b/i18n/README.ru.md
index 169ca49d09..142ce34396 100644
--- a/i18n/README.ru.md
+++ b/i18n/README.ru.md
@@ -12,9 +12,9 @@
 - [x] Хостируемая база данных Postgres. [Docs](https://supabase.com/docs/guides/database)
 - [x] Аутентификация и авторизация. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Автоматически генерируемые API.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Подписки в реальном времени. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Подписки в реальном времени. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Функции.
   - [x] Функции базы данных. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.sk.md b/i18n/README.sk.md
index 1b58505a2f..b3c6d49d1a 100644
--- a/i18n/README.sk.md
+++ b/i18n/README.sk.md
@@ -12,9 +12,9 @@
 - [x] hostovaná databáza Postgres. [Dokumenty](https://supabase.com/docs/guides/database)
 - [x] Autentifikácia a autorizácia. [Dokumenty](https://supabase.com/docs/guides/auth)
 - [x] Automaticky generované rozhrania API.
-  - [x] REST. [Dokumenty](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumenty](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Odbery v reálnom čase. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumenty](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumenty](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Odbery v reálnom čase. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkcie.
   - [x] Databázové funkcie. [Docs](https://supabase.com/docs/guides/database/functions)
   - [x] Okrajové funkcie [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.sl.md b/i18n/README.sl.md
index 90199ad7bb..b29bd18538 100644
--- a/i18n/README.sl.md
+++ b/i18n/README.sl.md
@@ -12,9 +12,9 @@
 - [x] Gostovana podatkovna baza Postgres. [Dokumenti](https://supabase.com/docs/guides/database)
 - [x] Avtentikacija in avtorizacija. [Dokumenti](https://supabase.com/docs/guides/auth)
 - [x] Samodejno generirani API-ji.
-  - [x] REST. [Dokumenti](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Dokumenti](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Naročnine v realnem času. [Dokumenti](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokumenti](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Dokumenti](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Naročnine v realnem času. [Dokumenti](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funkcije.
   - [x] Funkcije podatkovne zbirke. [Dokumenti](https://supabase.com/docs/guides/database/functions)
   - [x] Funkcije robov [Dokumenti](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.sr.md b/i18n/README.sr.md
index 6963294cab..c331c8feb2 100644
--- a/i18n/README.sr.md
+++ b/i18n/README.sr.md
@@ -12,9 +12,9 @@
 - [x] Hostovana Postgres Baza. [Dokumentacija](https://supabase.com/docs/guides/database)
 - [x] Autentifikacija i Autorizacija. [Dokumentacija](https://supabase.com/docs/guides/auth)
 - [x] Auto-generisani API-ji.
-  - [x] REST. [Dokumentacija](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] Subskripcije u realnom vremenu. [Dokumentacija](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] GraphQL (Beta). [Dokumentacija](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] REST. [Dokumentacija](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] Subskripcije u realnom vremenu. [Dokumentacija](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] GraphQL (Beta). [Dokumentacija](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] Funkcije.
   - [x] Funkcije u bazi. [Dokumentacija](https://supabase.com/docs/guides/database/functions)
   - [x] Edge Funkcije [Dokumentacija](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.sv.md b/i18n/README.sv.md
index c287cfce07..e7378520d2 100644
--- a/i18n/README.sv.md
+++ b/i18n/README.sv.md
@@ -12,9 +12,9 @@
 - [x] Hosted Postgres-databas. [Docs](https://supabase.com/docs/guides/database)
 - [x] Autentisering och auktorisering. [Docs](https://supabase.com/docs/guides/auth)
 - [x] Automatiskt genererade API:er.
-  - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Prenumerationer i realtid. [Dokument](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Prenumerationer i realtid. [Dokument](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Funktioner.
   - [x] Databasfunktioner. [Dokument](https://supabase.com/docs/guides/database/functions)
   - [x] Edge-funktioner [Docs](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.ta.md b/i18n/README.ta.md
index 6f72a22c64..e24ed892e8 100644
--- a/i18n/README.ta.md
+++ b/i18n/README.ta.md
@@ -12,9 +12,9 @@
 - [x] ஹோஸ்ட் செய்யப்பட்ட பூஸ்ட்ஜீஆர்இஎஸ் தரவுத்தளம். [ஆவணம்](https://supabase.com/docs/guides/database)
 - [x] அங்கீகாரம் மற்றும் அங்கீகாரம்.. [ஆவணம்](https://supabase.com/docs/guides/auth)
 - [x] தானாக உருவாக்கப்பட்ட ஏபிஐ கள்.
-  - [x] ராஸ்ட். [ஆவணம்](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] நிகழ்நேர சந்தாக்கள். [ஆவணம்](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] கிராப்க்யூஎல் (பீட்டா). [ஆவணம்](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] ராஸ்ட். [ஆவணம்](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] நிகழ்நேர சந்தாக்கள். [ஆவணம்](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] கிராப்க்யூஎல் (பீட்டா). [ஆவணம்](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] செயல்பாடுகள்.
   - [x] தரவுத்தளம் செயல்பாடுகள். [ஆவணம்](https://supabase.com/docs/guides/database/functions)
   - [x] விளிம்பு செயல்பாடுகள் [ஆவணம்](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.tr.md b/i18n/README.tr.md
index ca781dcf7a..f09c2c2607 100644
--- a/i18n/README.tr.md
+++ b/i18n/README.tr.md
@@ -12,9 +12,9 @@
 - [x] Barındırılan Postgres Veritabanı. [Dokümanlar](https://supabase.com/docs/guides/database)
 - [x] Kimlik Doğrulama ve Yetkilendirme. [Dokümanlar](https://supabase.com/docs/guides/auth)
 - [x] Otomatik oluşturulan API'ler.
-  - [x] REST. [Dokümanlar](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Gerçek zamanlı abonelikler. [Dokümanlar](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Dokümanlar](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Gerçek zamanlı abonelikler. [Dokümanlar](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Fonksiyonlar.
   - [x] Veritabanı Fonksiyonları. [Dokümanlar](https://supabase.com/docs/guides/database/functions)
   - [x] Kenar İşlevleri [Dokümanlar](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.uk.md b/i18n/README.uk.md
index 7986e487b4..d6a2407eb6 100644
--- a/i18n/README.uk.md
+++ b/i18n/README.uk.md
@@ -12,9 +12,9 @@
 - [x] Розміщена база даних Postgres. [Документи](https://supabase.com/docs/guides/database)
 - [x] Аутентифікація та авторизація. [Документи](https://supabase.com/docs/guides/auth)
 - [x] Автоматично згенеровані API.
-  - [x] REST. [Документи](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL. [Документи](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] Підписки в режимі реального часу. [Документи](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST. [Документи](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL. [Документи](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] Підписки в режимі реального часу. [Документи](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] Функції.
   - [x] Функції бази даних. [Документи](https://supabase.com/docs/guides/database/functions)
   - [x] Граничні функції [Документи](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.vi-vn.md b/i18n/README.vi-vn.md
index 8611c02831..70b55bc984 100644
--- a/i18n/README.vi-vn.md
+++ b/i18n/README.vi-vn.md
@@ -12,9 +12,9 @@
 - [x] Cơ sở dữ liệu Postgres tự quản lý. [Tài liệu](https://supabase.com/docs/guides/database)
 - [x] Xác thực và uỷ quyền. [Tài liệu](https://supabase.com/docs/guides/auth)
 - [x] APIs tự động khởi tạo.
-  - [x] REST. [Tài liệu](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] Lắng nghe thay đổi thời gian thực. [Tài liệu](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] GraphQL (Thử nghiệm). [Tài liệu](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] REST. [Tài liệu](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] Lắng nghe thay đổi thời gian thực. [Tài liệu](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] GraphQL (Thử nghiệm). [Tài liệu](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] Chức năng hàm.
   - [x] Hàm dành cho cơ sở dữ liệu (Database functions). [Tài liệu](https://supabase.com/docs/guides/database/functions)
   - [x] Hàm được phân phối trên toàn cầu (Edge Functions). [Tài liệu](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.zh-cn.md b/i18n/README.zh-cn.md
index 9b3fac393c..9980e8afb3 100644
--- a/i18n/README.zh-cn.md
+++ b/i18n/README.zh-cn.md
@@ -12,9 +12,9 @@
 - [x] Postgres 数据库托管。[文档](https://supabase.com/docs/guides/database)
 - [x] 身份验证和授权。[文档](https://supabase.com/docs/guides/auth)
 - [x] 自动生成的 API。
-  - [x] REST。[文档](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] 实时订阅。[文档](https://supabase.com/docs/guides/database/api#realtime-api)
-  - [x] GraphQL（测试版）。[文档](https://supabase.com/docs/guides/database/api#graphql-api)
+  - [x] REST。[文档](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] 实时订阅。[文档](https://supabase.com/docs/guides/api#realtime-api-overview)
+  - [x] GraphQL（测试版）。[文档](https://supabase.com/docs/guides/api#graphql-api-overview)
 - [x] 函数。
   - [x] 数据库函数。[文档](https://supabase.com/docs/guides/database/functions)
   - [x] 边缘函数。[文档](https://supabase.com/docs/guides/functions)
diff --git a/i18n/README.zh-tw.md b/i18n/README.zh-tw.md
index 5d64965522..15da9bfc47 100644
--- a/i18n/README.zh-tw.md
+++ b/i18n/README.zh-tw.md
@@ -12,9 +12,9 @@
 - [x] 托管的 Postgres 数据库。[文档](https://supabase.com/docs/guides/database)
 - [x] 认证和授权。[文档](https://supabase.com/docs/guides/auth)
 - [x] 自动生成的 API。
-  - [x] REST.[文档](https://supabase.com/docs/guides/database/api#rest-api)
-  - [x] GraphQL。[文件](https://supabase.com/docs/guides/database/api#graphql-api)
-  - [x] 实时订阅。[文档](https://supabase.com/docs/guides/database/api#realtime-api)
+  - [x] REST.[文档](https://supabase.com/docs/guides/api#rest-api-overview)
+  - [x] GraphQL。[文件](https://supabase.com/docs/guides/api#graphql-api-overview)
+  - [x] 实时订阅。[文档](https://supabase.com/docs/guides/api#realtime-api-overview)
 - [x] 函数。
   - [x] 数据库函数。[文件](https://supabase.com/docs/guides/database/functions)
   - [x] 边缘功能 [文档](https://supabase.com/docs/guides/functions)
diff --git a/package-lock.json b/package-lock.json
index 2291fa1b4f..1b914615e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
       "workspaces": [
         "apps/www",
         "apps/docs",
-        "apps/new-docs",
         "studio",
         "tests",
         "packages/*"
@@ -42805,7 +42804,7 @@
       "license": "MIT",
       "dependencies": {
         "@headlessui/react": "^1.7.14",
-        "@supabase/gotrue-js": "^2.31.0",
+        "@supabase/gotrue-js": "^2.35.0",
         "@supabase/ui": "^0.37.0-alpha.50",
         "react-use": "^17.4.0"
       },
@@ -42818,9 +42817,9 @@
       }
     },
     "packages/common/node_modules/@supabase/gotrue-js": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.31.0.tgz",
-      "integrity": "sha512-YcwlbbNfedlue/HVIXtYBb4fuOrs29gNOTl6AmyxPp4zryRxzFvslVN9kmLDBRUAVU9fnPJh2bgOR3chRjJX5w==",
+      "version": "2.35.0",
+      "resolved": "https://registry.npmjs.org/@supabase/gotrue-js/-/gotrue-js-2.35.0.tgz",
+      "integrity": "sha512-bLNIrBzFNRR61qUN8VZ4iV7q+fPilWyYQi0CZlxuHBiPtVcNPTul02DbNvgvw76hNz+mB5maay/Y17lSHnSRmw==",
       "dependencies": {
         "cross-fetch": "^3.1.5"
       }
diff --git a/packages/common/gotrue.ts b/packages/common/gotrue.ts
index 9df248b619..2ef1061dfe 100644
--- a/packages/common/gotrue.ts
+++ b/packages/common/gotrue.ts
@@ -1,9 +1,18 @@
 import { GoTrueClient } from '@supabase/gotrue-js'
 
 export const STORAGE_KEY = process.env.NEXT_PUBLIC_STORAGE_KEY || 'supabase.dashboard.auth.token'
+export const AUTH_DEBUG_KEY =
+  process.env.NEXT_PUBLIC_AUTH_DEBUG_KEY || 'supabase.dashboard.auth.debug'
+
+const debug =
+  process.env.NEXT_PUBLIC_IS_PLATFORM === 'true' &&
+  globalThis &&
+  globalThis.localStorage &&
+  globalThis.localStorage.getItem(AUTH_DEBUG_KEY) === 'true'
 
 export const gotrueClient = new GoTrueClient({
   url: process.env.NEXT_PUBLIC_GOTRUE_URL,
   storageKey: STORAGE_KEY,
   detectSessionInUrl: true,
+  debug,
 })
diff --git a/packages/common/package.json b/packages/common/package.json
index eba24a4fae..f41a62d834 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -6,7 +6,7 @@
   "license": "MIT",
   "dependencies": {
     "@headlessui/react": "^1.7.14",
-    "@supabase/gotrue-js": "^2.31.0",
+    "@supabase/gotrue-js": "^2.35.0",
     "@supabase/ui": "^0.37.0-alpha.50",
     "react-use": "^17.4.0"
   },
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index aba66a6dfe..0ee08f3cc3 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -1,13 +1,8 @@
-import * as React from 'react'
-import { TabsContext } from './TabsContext'
-
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { useRouter } from 'next/router'
-
-// @ts-ignore
-// import TabsStyles from './Tabs.module.css'
-
+import * as React from 'react'
 import styleHandler from '../../lib/theme/styleHandler'
+import { useTabGroup } from './TabsProvider'
 
 interface TabsProps {
   type?: 'pills' | 'underlined' | 'cards' | 'rounded-pills'
@@ -45,12 +40,9 @@ const Tabs: React.FC<TabsProps> & TabsSubComponents = ({
   children,
 }) => {
   const [activeTab, setActiveTab] = React.useState(
-    defaultActiveId
-      ? defaultActiveId
-      : // if no defaultActiveId is set use the first panel
-      children && children[0].props
-      ? children[0].props.id
-      : ''
+    defaultActiveId ??
+      // if no defaultActiveId is set use the first panel
+      children?.[0]?.props?.id
   )
 
   const router = useRouter()
@@ -58,40 +50,42 @@ const Tabs: React.FC<TabsProps> & TabsSubComponents = ({
 
   let __styles = styleHandler('tabs')
 
-  // activeId state can be overriden externally with `active`
-  // defaults to the first panelif we have one or url hash if not
-  const active = activeId ? activeId : activeTab ? activeTab : hash
-
-  function onTabClick(id: string) {
-    const newTabSelected = id !== active
-    setActiveTab(id)
-    if (onClick) onClick(id)
-    if (onChange && newTabSelected) onChange(id)
+  if (children && !Array.isArray(children)) {
+    children = [children]
   }
 
-  // for styling the tabs for underline style
-  const underlined = type === 'underlined'
-  // for styling the tabs for cards style
+  // Exclude children that are just conditional elements
+  children = children.filter((it) => it)
+
+  const tabIds = children.map((tab) => tab.props.id)
+
+  const { groupActiveId, setGroupActiveId } = useTabGroup(tabIds)
+
+  const active = activeId ?? groupActiveId ?? activeTab ?? hash
+
+  function onTabClick(id: string) {
+    setActiveTab(id)
+    setGroupActiveId?.(id)
+
+    onClick?.(id)
+    if (id !== active) {
+      onChange?.(id)
+    }
+  }
 
   const listClasses = [__styles[type].list]
   if (scrollable) listClasses.push(__styles.scrollable)
   if (listClassNames) listClasses.push(listClassNames)
 
-  // if only 1 react child, it needs to be converted to a list/array
-  // this is so 1 tab can be displayed
-  if (children && !Array.isArray(children)) {
-    children = [children]
-  }
-
   return (
-    <TabsPrimitive.Root defaultValue={defaultActiveId} value={active} className={__styles.base}>
+    <TabsPrimitive.Root value={active} className={__styles.base}>
       <TabsPrimitive.List className={listClasses.join(' ')}>
         {addOnBefore}
         {children.map((tab) => {
-          const activeMatch = active === tab.props.id
+          const isActive = active === tab.props.id
 
           const triggerClasses = [__styles[type].base, __styles.size[size]]
-          if (activeMatch) {
+          if (isActive) {
             triggerClasses.push(__styles[type].active)
           } else {
             triggerClasses.push(__styles[type].inactive)
@@ -118,10 +112,9 @@ const Tabs: React.FC<TabsProps> & TabsSubComponents = ({
             </TabsPrimitive.Trigger>
           )
         })}
-        {/* </Space> */}
         {addOnAfter}
       </TabsPrimitive.List>
-      <TabsContext.Provider value={{ activeId: active }}>{children}</TabsContext.Provider>
+      {children}
     </TabsPrimitive.Root>
   )
 }
@@ -142,16 +135,9 @@ export const Panel: React.FC<PanelProps> = ({ children, id, className }) => {
   let __styles = styleHandler('tabs')
 
   return (
-    <TabsContext.Consumer>
-      {({ activeId }) => {
-        const active = activeId === id
-        return (
-          <TabsPrimitive.Content value={id} className={[__styles.content, className].join(' ')}>
-            {children}
-          </TabsPrimitive.Content>
-        )
-      }}
-    </TabsContext.Consumer>
+    <TabsPrimitive.Content value={id} className={[__styles.content, className].join(' ')}>
+      {children}
+    </TabsPrimitive.Content>
   )
 }
 
diff --git a/packages/ui/src/components/Tabs/TabsContext.tsx b/packages/ui/src/components/Tabs/TabsContext.tsx
deleted file mode 100644
index b4a3471f16..0000000000
--- a/packages/ui/src/components/Tabs/TabsContext.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createContext } from 'react'
-
-// Make sure the shape of the default value passed to
-// createContext matches the shape that the consumers expect!
-export const TabsContext = createContext({
-  activeId: '',
-})
diff --git a/packages/ui/src/components/Tabs/TabsProvider.tsx b/packages/ui/src/components/Tabs/TabsProvider.tsx
new file mode 100644
index 0000000000..feb6a74941
--- /dev/null
+++ b/packages/ui/src/components/Tabs/TabsProvider.tsx
@@ -0,0 +1,103 @@
+import { xor } from 'lodash'
+import {
+  Dispatch,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+
+export interface TabGroup {
+  tabIds: string[]
+  activeId: string
+}
+
+interface TabsContextValue {
+  tabGroups: TabGroup[]
+  setTabGroups: Dispatch<SetStateAction<TabGroup[]>>
+}
+
+const TabsContext = createContext<TabsContextValue>({
+  tabGroups: [],
+  setTabGroups: () => {},
+})
+
+/**
+ * Tracks active Tab IDs across the site so that tabs
+ * with the same ID stay in sync (eg. JS vs TS tabs).
+ */
+const TabsProvider = ({ children }: PropsWithChildren<{}>) => {
+  const [tabGroups, setTabGroups] = useState<TabGroup[]>([])
+
+  return <TabsContext.Provider value={{ tabGroups, setTabGroups }}>{children}</TabsContext.Provider>
+}
+
+export interface UseTabGroupValue {
+  /**
+   * The active tab ID for the tab group.
+   * This value is shared with all matching tab
+   * groups within the context.
+   */
+  groupActiveId?: string
+
+  /**
+   * Set the active tab ID for the tab group.
+   * Value will be shared with all matching tab
+   * groups within the context.
+   */
+  setGroupActiveId?(id: string): void
+}
+
+/**
+ * Hook to retrieve and set the active tab ID for
+ * the current tab group.
+ * The value will be shared with all matching tab
+ * groups within the context.
+ *
+ * Silently fails if no `TabsProvider` is set.
+ */
+export const useTabGroup = (tabIds: string[]): UseTabGroupValue => {
+  const tabsContext = useContext(TabsContext)
+
+  if (!tabsContext) {
+    return {}
+  }
+
+  const { tabGroups, setTabGroups } = tabsContext
+
+  const groupActiveId = useMemo(
+    () => tabGroups.find((group) => xor(group.tabIds, tabIds).length === 0)?.activeId,
+    [tabGroups]
+  )
+
+  const setGroupActiveId = useCallback((id: string) => {
+    setTabGroups((groups) => {
+      // Clone the array
+      const newGroups = groups.concat()
+
+      const existingGroupIndex = groups.findIndex((group) => xor(group.tabIds, tabIds).length === 0)
+
+      const tabGroup: TabGroup = {
+        tabIds,
+        activeId: id,
+      }
+
+      // If this group already exists, replace it
+      // Otherwise add to the end
+      if (existingGroupIndex !== -1) {
+        newGroups.splice(existingGroupIndex, 1, tabGroup)
+      } else {
+        newGroups.push(tabGroup)
+      }
+
+      return newGroups
+    })
+  }, [])
+
+  return { groupActiveId, setGroupActiveId }
+}
+
+export default TabsProvider
diff --git a/packages/ui/src/components/Tabs/index.tsx b/packages/ui/src/components/Tabs/index.tsx
index 91e13405f9..14400819be 100644
--- a/packages/ui/src/components/Tabs/index.tsx
+++ b/packages/ui/src/components/Tabs/index.tsx
@@ -1 +1,2 @@
 export { default as Tabs } from './Tabs'
+export { default as TabsProvider } from './TabsProvider'
diff --git a/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx b/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx
index 9715d795b1..7a8fe25e9a 100644
--- a/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx
+++ b/packages/ui/src/lib/Layout/FormLayout/FormLayout.tsx
@@ -125,12 +125,12 @@ export function FormLayout({
   )
 
   const renderDescription = descriptionText && (
-    <p
+    <div
       className={[__styles.description.base, __styles.description.size[size]].join(' ')}
       id={id + '-description'}
     >
       {descriptionText}
-    </p>
+    </div>
   )
 
   return (
diff --git a/spec/cli_v1_commands.yaml b/spec/cli_v1_commands.yaml
index c66b66318b..91f0d6d6b3 100644
--- a/spec/cli_v1_commands.yaml
+++ b/spec/cli_v1_commands.yaml
@@ -1,7 +1,7 @@
 clispec: '001'
 info:
   id: cli
-  version: 1.62.3
+  version: 1.75.1
   title: Supabase CLI
   language: sh
   source: https://github.com/supabase/cli
@@ -45,253 +45,6 @@ flags:
     description: path to a Supabase project directory
     default_value: ''
 commands:
-  - id: supabase-sso
-    title: supabase sso
-    summary: Manage SSO authentication for your project
-    description: |-
-      Manage SSO authentication for Supabase projects.
-    tags:
-      - management-api
-    links: []
-    subcommands:
-      - supabase-sso-list
-      - supabase-sso-show
-      - supabase-sso-add
-      - supabase-sso-remove
-      - supabase-sso-update
-      - supabase-sso-info
-    flags:
-      - id: project-ref
-        name: --project-ref <string>
-        description: Project ref of the Supabase project.
-        default_value: ''
-        type: string
-        required: true
-        inherit: true
-      - id: output
-        name: --output [ pretty | json | yaml | toml ]
-        description: Output format of the command, useful when using the CLI in scripts or CI workflows.
-        default_value: pretty
-        type: '[ pretty | json | yaml | toml ]'
-        inherit: true
-        accepted_values:
-          - name: pretty
-            value: pretty
-            type: '[ pretty | json | yaml | toml ]'
-          - name: json
-            value: json
-            type: '[ pretty | json | yaml | toml ]'
-          - name: yaml
-            value: yaml
-            type: '[ pretty | json | yaml | toml ]'
-          - name: toml
-            value: toml
-            type: '[ pretty | json | yaml | toml ]'
-            description: |-
-              Use only with certain commands to output the raw SAML 2.0 Metadata XML stored in your project's authentication configuration.
-  - id: supabase-sso-info
-    title: supabase sso info
-    summary: Show important SAML 2.0 information about your project
-    description: |-
-      Returns all of the important SSO information necessary for your project to be registered with a SAML 2.0 compatible identity provider.
-    tags:
-      - management-api
-    flags: []
-    links: []
-    examples:
-      - id: basic-usage
-        name: Show project information
-        code: |-
-          supabase sso info --project-ref abcdefghijklmnopqrst
-        response: |-
-          Information about your project's SAML 2.0 configuration.
-  - id: supabase-sso-add
-    title: supabase sso add
-    summary: Add a connection to a SSO identity provider
-    description: |-
-      Add and configure a new connection to a SSO identity provider to your Supabase project.
-    tags:
-      - management-api
-    examples:
-      - id: basic-usage
-        name: Add with Metadata URL
-        code: |-
-          supabase sso add \
-            --project-ref abcdefgijklmnopqrst \
-            --type saml \
-            --metadata-url 'https://...' \
-            --domains company.com
-        response: |-
-          Information about the added identity provider. You can use
-          company.com as the domain name on the frontend side to initiate a SSO
-          request to the identity provider.
-      - id: with-xml
-        name: Add with Metadata File
-        code: |-
-          supabase sso add \
-            --project-ref abcdefgijklmnopqrst \
-            --type saml \
-            --metadata-file /path/to/metadata/file.xml \
-            --domains company.com
-        response: |-
-          Information about the added identity provider. You can use
-          company.com as the domain name on the frontend side to initiate a SSO
-          request to the identity provider.
-    flags:
-      - id: type
-        name: --type saml
-        description: |-
-          Type of identity provider being added. Only SAML 2.0 supported at this time.
-        type: string
-        accepted_values:
-          - name: saml
-            type: string
-        required: true
-      - id: metadata-url
-        name: --metadata-url <URL>
-        description: |-
-          A URL (typically HTTPS) that points to a SAML 2.0 Metadata XML document describing the SAML features supported by the identity provider being added.
-          Mutually exclusive with --metadata-file.
-        type: string
-        required: true
-      - id: metadata-file
-        name: --metadata-file <path to file>
-        description: |
-          A path to a file containing a SAML 2.0 Metadata XML document describing the SAML features supported by the identity provider being added. Prefer using --metadata-url if possible.
-
-          Mutually exclusive with --metadata-url.
-        type: string
-        required: true
-      - id: domains
-        name: domains
-        description: |-
-          A comma separated list of email domains to associate with this identity provider. Used to quickly sign users in on the frontend by identifying the correct identity provider based on the email address of the user.
-        type: string
-      - id: attribute-mapping-file
-        name: attribute-mapping-file
-        type: string
-        description: |-
-          A file containing a JSON document describing the attribute mappings attached to this identity provider. User information contained in the SAML assertion will be mapped according to the rules laid out in this document.
-  - id: supabase-sso-remove
-    title: supabase sso remove <provider-id>
-    summary: Remove a connection to a SSO identity provider
-    description: |-
-      Remove a connection to an already added SSO identity provider. Removing the provider will prevent existing users from logging in. Please treat this command with care.
-    tags:
-      - management-api
-    links: []
-    flags: []
-    examples:
-      - id: basic-usage
-        name: Remove a provider
-        code: |-
-          supabase sso remove 6df4d73f-bf21-405f-a084-b11adf19fea5 \
-            --project-ref abcdefghijklmnopqrst
-        response: |-
-          Information about the removed identity provider. It's a good idea to
-          save this in case you need it later on.
-  - id: supabase-sso-update
-    title: supabase sso update <provider-id>
-    summary: Update the configuration of an identity provider
-    description: |-
-      Update the configuration settings of a already added SSO identity provider.
-    tags:
-      - management-api
-    links: []
-    examples:
-      - id: basic-usage
-        name: Replace domains
-        code: |-
-          supabase sso update 6df4d73f-bf21-405f-a084-b11adf19fea5 \
-            --project-ref abcdefghijklmnopqrst \
-            --domains new-company.com,new-company.net
-        response: |-
-          Information about the updated provider.
-      - id: add-domains
-        name: Add an additional domain
-        code: |-
-          supabase sso update 6df4d73f-bf21-405f-a084-b11adf19fea5 \
-            --project-ref abcdefghijklmnopqrst \
-            --add-domains company.net
-        response: |-
-          Information about the updated provider.
-      - id: remove-domains
-        name: Remove a domain
-        code: |-
-          supabase sso update 6df4d73f-bf21-405f-a084-b11adf19fea5 \
-            --project-ref abcdefghijklmnopqrst \
-            --remove-domains company.org
-        response: |-
-          Information about the updated provider.
-    flags:
-      - id: metadata-url
-        name: --metadata-url <URL>
-        description: |-
-          A URL (typically HTTPS) that points to a SAML 2.0 Metadata XML document describing the SAML features supported by the identity provider being added.
-          Mutually exclusive with --metadata-file.
-        type: string
-      - id: metadata-file
-        name: --metadata-file <path to file>
-        description: |
-          A path to a file containing a SAML 2.0 Metadata XML document describing the SAML features supported by the identity provider being added. Prefer using --metadata-url if possible.
-
-          Mutually exclusive with --metadata-url.
-        type: string
-      - id: domains
-        name: domains
-        description: |-
-          A comma separated list of email domains to associate with this identity provider. Used to quickly sign users in on the frontend by identifying the correct identity provider based on the email address of the user. When provided all of the domains already attached to the identity provider will be replaced with this list.
-        type: string
-      - id: add-domains
-        name: add-domains
-        description: |-
-          Associates these additional email domains to the existing set of domains. See --domains for a detailed explanation.
-      - id: remove-domains
-        name: remove-domains
-        description: |-
-          Removes these email domains from the existing set of domains. See --domains for a detailed explanation.
-      - id: attribute-mapping-file
-        name: attribute-mapping-file
-        type: string
-        description: |-
-          A file containing a JSON document describing the attribute mappings attached to this identity provider. User information contained in the SAML assertion will be mapped according to the rules laid out in this document.
-  - id: supabase-sso-list
-    title: supabase sso list
-    summary: Lists all connections to identity providers
-    description: |-
-      List all connections to a SSO identity provider to your Supabase project.
-    tags:
-      - management-api
-    links: []
-    flags: []
-  - id: supabase-sso-show
-    title: supabase sso show <provider-id>
-    summary: Show information about an identity provider.
-    description: |-
-      Provides the information about an established connection to an identity provider. You can use --metadata to obtain the raw SAML 2.0 Metadata XML document stored in your project's configuration.
-    tags:
-      - management-api
-    examples:
-      - id: basic-usage
-        name: Show information
-        code: |-
-          supabase sso show 6df4d73f-bf21-405f-a084-b11adf19fea5 \
-            --project-ref abcdefghijklmnopqrst
-        response: |-
-          Information about the identity provider in pretty output.
-      - id: metadata-output
-        name: Get raw SAML 2.0 Metadata XML
-        code: |-
-          supabase sso show 6df4d73f-bf21-405f-a084-b11adf19fea5 \
-            --project-ref abcdefghijklmnopqrst \
-            --metadata
-        response: |-
-          Raw SAML 2.0 XML assigned to this identity provider. This is the
-          version used in the authentication project, and if using a SAML 2.0
-          Metadata URL it may change depending on the caching information
-          contained within the metadata.
-    links: []
-    flags: []
   - id: supabase-vanity-subdomains
     title: supabase vanity-subdomains
     summary: Manage vanity subdomains for Supabase projects
@@ -455,7 +208,7 @@ commands:
 
       Requires `supabase/config.toml` to be created in your current working directory by running `supabase init`.
 
-      All Docker resources are cleaned up by default. Use `--backup` flag to persist your local development data between restarts.
+      All Docker resources are maintained across restarts.  Use `--no-backup` flag to reset your local development data between restarts.
     examples:
       - id: basic-usage
         name: Basic usage
@@ -607,6 +360,359 @@ commands:
         name: --ignore-health-check
         description: Ignore unhealthy services and exit 0
         default_value: 'false'
+  - id: supabase-sso
+    title: supabase sso
+    summary: Manage Single Sign-On (SSO) authentication for projects
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-sso-add
+      - supabase-sso-info
+      - supabase-sso-list
+      - supabase-sso-remove
+      - supabase-sso-show
+      - supabase-sso-update
+    flags: []
+  - id: supabase-sso-update
+    title: supabase sso update
+    summary: Update information about an SSO identity provider
+    description: |
+      Update the configuration settings of a already added SSO identity provider.
+    examples:
+      - id: basic-usage
+        name: Replace domains
+        code: |-
+          supabase sso update 6df4d73f-bf21-405f-a084-b11adf19fea5 \
+            --project-ref abcdefghijklmnopqrst \
+            --domains new-company.com,new-company.net
+        response: Information about the updated provider.
+      - id: add-domains
+        name: Add an additional domain
+        code: |-
+          supabase sso update 6df4d73f-bf21-405f-a084-b11adf19fea5 \
+            --project-ref abcdefghijklmnopqrst \
+            --add-domains company.net
+        response: Information about the updated provider.
+      - id: remove-domains
+        name: Remove a domain
+        code: |-
+          supabase sso update 6df4d73f-bf21-405f-a084-b11adf19fea5 \
+            --project-ref abcdefghijklmnopqrst \
+            --remove-domains company.org
+        response: Information about the updated provider.
+    tags: []
+    links: []
+    usage: supabase sso update <provider-id> [flags]
+    subcommands: []
+    flags:
+      - id: add-domains
+        name: --add-domains <strings>
+        description: |
+          Add this comma separated list of email domains to the identity provider.
+        default_value: '[]'
+      - id: attribute-mapping-file
+        name: --attribute-mapping-file <string>
+        description: |
+          File containing a JSON mapping between SAML attributes to custom JWT claims.
+        default_value: ''
+      - id: domains
+        name: --domains <strings>
+        description: |
+          Replace domains with this comma separated list of email domains.
+        default_value: '[]'
+      - id: metadata-file
+        name: --metadata-file <string>
+        description: |
+          File containing a SAML 2.0 Metadata XML document describing the identity provider.
+        default_value: ''
+      - id: metadata-url
+        name: --metadata-url <string>
+        description: |
+          URL pointing to a SAML 2.0 Metadata XML document describing the identity provider.
+        default_value: ''
+      - id: remove-domains
+        name: --remove-domains <strings>
+        description: |
+          Remove this comma separated list of email domains from the identity provider.
+        default_value: '[]'
+      - id: skip-url-validation
+        name: --skip-url-validation
+        description: |
+          Whether local validation of the SAML 2.0 Metadata URL should not be performed.
+        default_value: 'false'
+      - id: output
+        name: -o, --output <[ pretty | json | toml | yaml ]>
+        description: Output format
+        default_value: pretty
+        accepted_values:
+          - id: pretty
+            name: pretty
+            type: '[ pretty | json | toml | yaml ]'
+          - id: json
+            name: json
+            type: '[ pretty | json | toml | yaml ]'
+          - id: toml
+            name: toml
+            type: '[ pretty | json | toml | yaml ]'
+          - id: yaml
+            name: yaml
+            type: '[ pretty | json | toml | yaml ]'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-sso-show
+    title: supabase sso show
+    summary: Show information about an SSO identity provider
+    description: |
+      Provides the information about an established connection to an identity provider. You can use --metadata to obtain the raw SAML 2.0 Metadata XML document stored in your project's configuration.
+    examples:
+      - id: basic-usage
+        name: Show information
+        code: |-
+          supabase sso show 6df4d73f-bf21-405f-a084-b11adf19fea5 \
+            --project-ref abcdefghijklmnopqrst
+        response: Information about the identity provider in pretty output.
+      - id: metadata-output
+        name: Get raw SAML 2.0 Metadata XML
+        code: |-
+          supabase sso show 6df4d73f-bf21-405f-a084-b11adf19fea5 \
+            --project-ref abcdefghijklmnopqrst \
+            --metadata
+        response: |-
+          Raw SAML 2.0 XML assigned to this identity provider. This is the
+          version used in the authentication project, and if using a SAML 2.0
+          Metadata URL it may change depending on the caching information
+          contained within the metadata.
+    tags: []
+    links: []
+    usage: supabase sso show <provider-id> [flags]
+    subcommands: []
+    flags:
+      - id: metadata
+        name: --metadata
+        description: Show SAML 2.0 XML Metadata only
+        default_value: 'false'
+      - id: output
+        name: -o, --output <[ pretty | json | toml | yaml ]>
+        description: Output format
+        default_value: pretty
+        accepted_values:
+          - id: pretty
+            name: pretty
+            type: '[ pretty | json | toml | yaml ]'
+          - id: json
+            name: json
+            type: '[ pretty | json | toml | yaml ]'
+          - id: toml
+            name: toml
+            type: '[ pretty | json | toml | yaml ]'
+          - id: yaml
+            name: yaml
+            type: '[ pretty | json | toml | yaml ]'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-sso-remove
+    title: supabase sso remove
+    summary: Remove an existing SSO identity provider
+    description: |
+      Remove a connection to an already added SSO identity provider. Removing the provider will prevent existing users from logging in. Please treat this command with care.
+    examples:
+      - id: basic-usage
+        name: Remove a provider
+        code: |-
+          supabase sso remove 6df4d73f-bf21-405f-a084-b11adf19fea5 \
+            --project-ref abcdefghijklmnopqrst
+        response: |-
+          Information about the removed identity provider. It's a good idea to
+          save this in case you need it later on.
+    tags: []
+    links: []
+    usage: supabase sso remove <provider-id>
+    subcommands: []
+    flags:
+      - id: output
+        name: -o, --output <[ pretty | json | toml | yaml ]>
+        description: Output format
+        default_value: pretty
+        accepted_values:
+          - id: pretty
+            name: pretty
+            type: '[ pretty | json | toml | yaml ]'
+          - id: json
+            name: json
+            type: '[ pretty | json | toml | yaml ]'
+          - id: toml
+            name: toml
+            type: '[ pretty | json | toml | yaml ]'
+          - id: yaml
+            name: yaml
+            type: '[ pretty | json | toml | yaml ]'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-sso-list
+    title: supabase sso list
+    summary: List all SSO identity providers for a project
+    description: |
+      List all connections to a SSO identity provider to your Supabase project.
+    tags: []
+    links: []
+    usage: supabase sso list
+    subcommands: []
+    flags:
+      - id: output
+        name: -o, --output <[ pretty | json | toml | yaml ]>
+        description: Output format
+        default_value: pretty
+        accepted_values:
+          - id: pretty
+            name: pretty
+            type: '[ pretty | json | toml | yaml ]'
+          - id: json
+            name: json
+            type: '[ pretty | json | toml | yaml ]'
+          - id: toml
+            name: toml
+            type: '[ pretty | json | toml | yaml ]'
+          - id: yaml
+            name: yaml
+            type: '[ pretty | json | toml | yaml ]'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-sso-info
+    title: supabase sso info
+    summary: |
+      Returns the SAML SSO settings required for the identity provider
+    description: |
+      Returns all of the important SSO information necessary for your project to be registered with a SAML 2.0 compatible identity provider.
+    examples:
+      - id: basic-usage
+        name: Show project information
+        code: supabase sso info --project-ref abcdefghijklmnopqrst
+        response: Information about your project's SAML 2.0 configuration.
+    tags: []
+    links: []
+    usage: supabase sso info
+    subcommands: []
+    flags:
+      - id: output
+        name: -o, --output <[ pretty | json | toml | yaml ]>
+        description: Output format
+        default_value: pretty
+        accepted_values:
+          - id: pretty
+            name: pretty
+            type: '[ pretty | json | toml | yaml ]'
+          - id: json
+            name: json
+            type: '[ pretty | json | toml | yaml ]'
+          - id: toml
+            name: toml
+            type: '[ pretty | json | toml | yaml ]'
+          - id: yaml
+            name: yaml
+            type: '[ pretty | json | toml | yaml ]'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-sso-add
+    title: supabase sso add
+    summary: Add a new SSO identity provider
+    description: |
+      Add and configure a new connection to a SSO identity provider to your Supabase project.
+    examples:
+      - id: basic-usage
+        name: Add with Metadata URL
+        code: |-
+          supabase sso add \
+            --project-ref abcdefgijklmnopqrst \
+            --type saml \
+            --metadata-url 'https://...' \
+            --domains company.com
+        response: |-
+          Information about the added identity provider. You can use
+          company.com as the domain name on the frontend side to initiate a SSO
+          request to the identity provider.
+      - id: with-xml
+        name: Add with Metadata File
+        code: |-
+          supabase sso add \
+            --project-ref abcdefgijklmnopqrst \
+            --type saml \
+            --metadata-file /path/to/metadata/file.xml \
+            --domains company.com
+        response: |-
+          Information about the added identity provider. You can use
+          company.com as the domain name on the frontend side to initiate a SSO
+          request to the identity provider.
+    tags: []
+    links: []
+    usage: supabase sso add [flags]
+    subcommands: []
+    flags:
+      - id: attribute-mapping-file
+        name: --attribute-mapping-file <string>
+        description: |
+          File containing a JSON mapping between SAML attributes to custom JWT claims.
+        default_value: ''
+      - id: domains
+        name: --domains <strings>
+        description: |
+          Comma separated list of email domains to associate with the added identity provider.
+        default_value: '[]'
+      - id: metadata-file
+        name: --metadata-file <string>
+        description: |
+          File containing a SAML 2.0 Metadata XML document describing the identity provider.
+        default_value: ''
+      - id: metadata-url
+        name: --metadata-url <string>
+        description: |
+          URL pointing to a SAML 2.0 Metadata XML document describing the identity provider.
+        default_value: ''
+      - id: skip-url-validation
+        name: --skip-url-validation
+        description: |
+          Whether local validation of the SAML 2.0 Metadata URL should not be performed.
+        default_value: 'false'
+      - id: type
+        name: -t, --type <[ saml ]>
+        description: Type of identity provider (according to supported protocol).
+        required: true
+        default_value: ''
+        accepted_values:
+          - id: saml
+            name: saml
+            type: '[ saml ]'
+      - id: output
+        name: -o, --output <[ pretty | json | toml | yaml ]>
+        description: Output format
+        default_value: pretty
+        accepted_values:
+          - id: pretty
+            name: pretty
+            type: '[ pretty | json | toml | yaml ]'
+          - id: json
+            name: json
+            type: '[ pretty | json | toml | yaml ]'
+          - id: toml
+            name: toml
+            type: '[ pretty | json | toml | yaml ]'
+          - id: yaml
+            name: yaml
+            type: '[ pretty | json | toml | yaml ]'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
   - id: supabase-ssl-enforcement
     title: supabase ssl-enforcement
     summary: Manage SSL enforcement configuration
@@ -722,6 +828,7 @@ commands:
       - management-api
     links: []
     subcommands:
+      - supabase-projects-api-keys
       - supabase-projects-create
       - supabase-projects-list
     flags: []
@@ -812,6 +919,74 @@ commands:
           - id: us-west-2
             name: us-west-2
             type: string
+  - id: supabase-projects-api-keys
+    title: supabase projects api-keys
+    summary: List all API keys for a Supabase project
+    tags: []
+    links: []
+    usage: supabase projects api-keys [flags]
+    subcommands: []
+    flags:
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-postgres-config
+    title: supabase postgres-config
+    summary: Manage Postgres database config
+    tags:
+      - management-api
+    links: []
+    subcommands:
+      - supabase-postgres-config-get
+      - supabase-postgres-config-update
+    flags: []
+  - id: supabase-postgres-config-update
+    title: supabase postgres-config update
+    summary: Update Postgres database config
+    description: |-
+      Overriding the default Postgres config could result in unstable database behavior.
+      Custom configuration also overrides the optimizations generated based on the compute add-ons in use.
+    tags: []
+    links: []
+    usage: supabase postgres-config update [flags]
+    subcommands: []
+    flags:
+      - id: config
+        name: --config <strings>
+        description: Config overrides specified as a 'key=value' pair
+        default_value: '[]'
+      - id: replace-existing-overrides
+        name: --replace-existing-overrides
+        description: |
+          If true, replaces all existing overrides with the ones provided. If false (default), merges existing overrides with the ones provided.
+        default_value: 'false'
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
+  - id: supabase-postgres-config-get
+    title: supabase postgres-config get
+    summary: Get the current Postgres database config overrides
+    tags: []
+    links: []
+    usage: supabase postgres-config get
+    subcommands: []
+    flags:
+      - id: experimental
+        name: --experimental
+        description: enable experimental features
+        required: true
+        default_value: 'false'
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
   - id: supabase-orgs
     title: supabase orgs
     summary: Manage Supabase organizations
@@ -819,6 +994,7 @@ commands:
       - management-api
     links: []
     subcommands:
+      - supabase-orgs-create
       - supabase-orgs-list
     flags: []
   - id: supabase-orgs-list
@@ -830,6 +1006,15 @@ commands:
     usage: supabase orgs list
     subcommands: []
     flags: []
+  - id: supabase-orgs-create
+    title: supabase orgs create
+    summary: Create an organization
+    description: Create an organization for the logged-in user.
+    tags: []
+    links: []
+    usage: supabase orgs create
+    subcommands: []
+    flags: []
   - id: supabase-network-restrictions
     title: supabase network-restrictions
     summary: Manage network restrictions
@@ -944,6 +1129,7 @@ commands:
       - supabase-migration-list
       - supabase-migration-new
       - supabase-migration-repair
+      - supabase-migration-squash
       - supabase-migration-up
     flags: []
   - id: supabase-migration-up
@@ -954,6 +1140,30 @@ commands:
     usage: supabase migration up
     subcommands: []
     flags: []
+  - id: supabase-migration-squash
+    title: supabase migration squash
+    summary: Squash migrations to a single file
+    tags: []
+    links: []
+    usage: supabase migration squash [flags]
+    subcommands: []
+    flags:
+      - id: db-url
+        name: --db-url <string>
+        description: connect using the specified database url
+        default_value: ''
+      - id: linked
+        name: --linked
+        description: Update migration history of the linked project.
+        default_value: 'false'
+      - id: password
+        name: -p, --password <string>
+        description: Password to your remote Postgres database.
+        default_value: ''
+      - id: version
+        name: --version <string>
+        description: Squash up to the specified version.
+        default_value: ''
   - id: supabase-migration-repair
     title: supabase migration repair
     summary: Repair the migration history table
@@ -1176,6 +1386,53 @@ commands:
         description: Project ref of the Supabase project.
         required: true
         default_value: ''
+  - id: supabase-inspect
+    title: supabase inspect
+    summary: Tools to inspect your Supabase Database
+    tags:
+      - local-dev
+    links: []
+    subcommands:
+      - supabase-inspect-db:cache-hit
+      - supabase-inspect-db:index-usage
+      - supabase-inspect-db:replication-slots
+    flags: []
+  - id: supabase-inspect-db:replication-slots
+    title: supabase inspect db:replication-slots
+    summary: Shows information about replication slots on the database
+    tags: []
+    links: []
+    usage: supabase inspect db:replication-slots
+    subcommands: []
+    flags:
+      - id: db-url
+        name: --db-url <string>
+        description: connect using the specified database url
+        default_value: ''
+  - id: supabase-inspect-db:index-usage
+    title: supabase inspect db:index-usage
+    summary: Shows information about the efficiency of indexes
+    tags: []
+    links: []
+    usage: supabase inspect db:index-usage
+    subcommands: []
+    flags:
+      - id: db-url
+        name: --db-url <string>
+        description: connect using the specified database url
+        default_value: ''
+  - id: supabase-inspect-db:cache-hit
+    title: supabase inspect db:cache-hit
+    summary: Shows cache hit rates for tables and indices
+    tags: []
+    links: []
+    usage: supabase inspect db:cache-hit
+    subcommands: []
+    flags:
+      - id: db-url
+        name: --db-url <string>
+        description: connect using the specified database url
+        default_value: ''
   - id: supabase-init
     title: supabase init
     summary: Initialize a local project
@@ -1200,9 +1457,13 @@ commands:
     tags:
       - local-dev
     links: []
-    usage: supabase init
+    usage: supabase init [flags]
     subcommands: []
-    flags: []
+    flags:
+      - id: with-vscode-workspace
+        name: --with-vscode-workspace
+        description: Generate VS Code workspace.
+        default_value: 'false'
   - id: supabase-gen
     title: supabase gen
     summary: Run code generation tools
@@ -1299,6 +1560,7 @@ commands:
       - supabase-functions-delete
       - supabase-functions-deploy
       - supabase-functions-download
+      - supabase-functions-list
       - supabase-functions-new
       - supabase-functions-serve
     flags: []
@@ -1307,7 +1569,7 @@ commands:
     summary: Serve all Functions locally
     tags: []
     links: []
-    usage: supabase functions serve <Function name> [flags]
+    usage: supabase functions serve [flags]
     subcommands: []
     flags:
       - id: env-file
@@ -1331,6 +1593,19 @@ commands:
     usage: supabase functions new <Function name>
     subcommands: []
     flags: []
+  - id: supabase-functions-list
+    title: supabase functions list
+    summary: List all Functions in Supabase
+    description: List all Functions in the linked Supabase project.
+    tags: []
+    links: []
+    usage: supabase functions list [flags]
+    subcommands: []
+    flags:
+      - id: project-ref
+        name: --project-ref <string>
+        description: Project ref of the Supabase project.
+        default_value: ''
   - id: supabase-functions-download
     title: supabase functions download
     summary: Download a Function from Supabase
@@ -1762,6 +2037,10 @@ commands:
         name: --role-only
         description: Dumps only cluster roles.
         default_value: 'false'
+      - id: use-copy
+        name: --use-copy
+        description: Uses copy statements in place of inserts.
+        default_value: 'false'
       - id: db-url
         name: --db-url <string>
         description: connect using the specified database url
diff --git a/spec/common-cli-sections.json b/spec/common-cli-sections.json
index a1dd861525..ba3c23a319 100644
--- a/spec/common-cli-sections.json
+++ b/spec/common-cli-sections.json
@@ -191,6 +191,12 @@
         "slug": "supabase-migration-repair",
         "type": "cli-command"
       },
+      {
+        "id": "supabase-migration-squash",
+        "title": "Squash migrations to a single file",
+        "slug": "supabase-migration-squash",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-migration-up",
         "title": "Apply pending migrations locally",
@@ -199,6 +205,36 @@
       }
     ]
   },
+  {
+    "type": "category",
+    "title": "Inspect",
+    "items": [
+      {
+        "id": "supabase-inspect",
+        "title": "Inspect database statistics",
+        "slug": "supabase-inspect",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-inspect-db:cache-hit",
+        "title": "Show cache hit rates for tables and indexes",
+        "slug": "supabase-inspect-db:cache-hit",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-inspect-db:index-usage",
+        "title": "Show usage efficiency of indexes",
+        "slug": "supabase-inspect-db:index-usage",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-inspect-db:replication-slots",
+        "title": "Show information about replication slots",
+        "slug": "supabase-inspect-db:replication-slots",
+        "type": "cli-command"
+      }
+    ]
+  },
   {
     "type": "category",
     "title": "Projects",
@@ -220,6 +256,12 @@
         "title": "List all projects",
         "slug": "supabase-projects-list",
         "type": "cli-command"
+      },
+      {
+        "id": "supabase-projects-api-keys",
+        "title": "Show API keys for a Supabase project",
+        "slug": "supabase-projects-api-keys",
+        "type": "cli-command"
       }
     ]
   },
@@ -257,6 +299,12 @@
         "slug": "supabase-functions-new",
         "type": "cli-command"
       },
+      {
+        "id": "supabase-functions-list",
+        "title": "List all functions",
+        "slug": "supabase-functions-list",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-functions-download",
         "title": "Download a function",
@@ -323,6 +371,12 @@
         "slug": "supabase-sso",
         "type": "cli-command"
       },
+      {
+        "id": "supabase-sso-add",
+        "title": "Add an identity provider",
+        "slug": "supabase-sso-add",
+        "type": "cli-command"
+      },
       {
         "id": "supabase-sso-list",
         "title": "List all identity providers",
@@ -331,14 +385,14 @@
       },
       {
         "id": "supabase-sso-show",
-        "title": "Show information for an identity providers",
+        "title": "Show information for an identity provider",
         "slug": "supabase-sso-show",
         "type": "cli-command"
       },
       {
-        "id": "supabase-sso-add",
-        "title": "Add an identity provider",
-        "slug": "supabase-sso-add",
+        "id": "supabase-sso-info",
+        "title": "See your project's SSO information",
+        "slug": "supabase-sso-info",
         "type": "cli-command"
       },
       {
@@ -352,12 +406,6 @@
         "title": "Remove an identity provider",
         "slug": "supabase-sso-remove",
         "type": "cli-command"
-      },
-      {
-        "id": "supabase-sso-info",
-        "title": "See your project's SSO information",
-        "slug": "supabase-sso-info",
-        "type": "cli-command"
       }
     ]
   },
@@ -493,24 +541,48 @@
     "items": [
       {
         "id": "supabase-ssl-enforcement",
-        "title": "Manage SSL enforcement configuration",
+        "title": "Manage SSL enforcement configurations",
         "slug": "supabase-ssl-enforcement",
         "type": "cli-command"
       },
       {
         "id": "supabase-ssl-enforcement-get",
-        "title": "Get the current SSL enforcement configuration",
+        "title": "Get the current SSL enforcement configurations",
         "slug": "supabase-ssl-enforcement-get",
         "type": "cli-command"
       },
       {
         "id": "supabase-ssl-enforcement-update",
-        "title": "Update SSL enforcement configuration",
+        "title": "Update SSL enforcement configurations",
         "slug": "supabase-ssl-enforcement-update",
         "type": "cli-command"
       }
     ]
   },
+  {
+    "type": "category",
+    "title": "Postgres Config",
+    "items": [
+      {
+        "id": "supabase-postgres-config",
+        "title": "Manage Postgres configurations",
+        "slug": "supabase-ssl-enforcement",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-postgres-config-get",
+        "title": "Get the current Postgres config overrides",
+        "slug": "supabase-postgres-config-get",
+        "type": "cli-command"
+      },
+      {
+        "id": "supabase-postgres-config-update",
+        "title": "Update Postgres configurations",
+        "slug": "supabase-postgres-config-update",
+        "type": "cli-command"
+      }
+    ]
+  },
   {
     "type": "category",
     "title": "Autocompletion Scripts",
diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json
index d3b7525192..1b9765031e 100644
--- a/spec/common-client-libs-sections.json
+++ b/spec/common-client-libs-sections.json
@@ -343,7 +343,7 @@
           },
           {
             "id": "single",
-            "title": "Retrieve the query as one row",
+            "title": "Retrieve one row of data",
             "slug": "single",
             "product": "database",
             "parent": "modifiers",
@@ -351,7 +351,7 @@
           },
           {
             "id": "maybe-single",
-            "title": "Retrieve the query as 0-1 rows",
+            "title": "Retrieve zero or one row of data",
             "slug": "maybesingle",
             "product": "database",
             "parent": "modifiers",
@@ -359,7 +359,7 @@
           },
           {
             "id": "csv",
-            "title": "Retrieve the query as a CSV string",
+            "title": "Retrieve as a CSV",
             "slug": "db-csv",
             "product": "database",
             "parent": "modifiers",
diff --git a/spec/examples/examples.yml b/spec/examples/examples.yml
index d0c62aa01c..bd034b9422 100644
--- a/spec/examples/examples.yml
+++ b/spec/examples/examples.yml
@@ -240,7 +240,7 @@ functions:
         js: |
           ```js
           const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
+            provider: 'github',
             options: {
               redirectTo: 'https://example.com/welcome'
             }
@@ -255,7 +255,7 @@ functions:
         js: |
           ```js
           const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
+            provider: 'github',
             options: {
               scopes: 'repo gist notifications'
             }
diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index baa6871ad0..bc497746e4 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -297,7 +297,7 @@ functions:
         code: |
           ```js
           const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
+            provider: 'github',
             options: {
               redirectTo: 'https://example.com/welcome'
             }
@@ -312,7 +312,7 @@ functions:
         code: |
           ```js
           const { data, error } = await supabase.auth.signInWithOAuth({
-            provider: 'github'
+            provider: 'github',
             options: {
               scopes: 'repo gist notifications'
             }
@@ -4335,7 +4335,7 @@ functions:
     $ref: '@supabase/realtime-js.RealtimeChannel.on'
     notes: |
       - By default, Broadcast and Presence are enabled for all projects.
-      - By default, listening to database changes is disabled for new projects due to database performance and security concerns. You can turn it on by managing Realtime's [replication](/docs/guides/database/api#realtime-api-overview).
+      - By default, listening to database changes is disabled for new projects due to database performance and security concerns. You can turn it on by managing Realtime's [replication](/docs/guides/api#realtime-api-overview).
       - You can receive the "previous" data for updates and deletes by setting the table's `REPLICA IDENTITY` to `FULL` (e.g., `ALTER TABLE your_table REPLICA IDENTITY FULL;`).
       - Row level security is not applied to delete statements. When RLS is enabled and replica identity is set to full, only the primary key is sent to clients.
     examples:
diff --git a/studio/__mocks__/hooks.js b/studio/__mocks__/hooks.js
index b65063f737..0b0c07a3e5 100644
--- a/studio/__mocks__/hooks.js
+++ b/studio/__mocks__/hooks.js
@@ -1,5 +1,6 @@
 export const useFlag = jest.fn().mockReturnValue(true)
 export const checkPermissions = jest.fn().mockReturnValue(true)
+export const useCheckPermissions = jest.fn().mockReturnValue(true)
 
 const { useStore: _useStore, StoreProvider: _StoreProvider } = jest.requireActual('hooks')
 export const useStore = _useStore
diff --git a/studio/components/interfaces/App/CommandMenuWrapper.tsx b/studio/components/interfaces/App/CommandMenuWrapper.tsx
index c45cae8447..c144d66e64 100644
--- a/studio/components/interfaces/App/CommandMenuWrapper.tsx
+++ b/studio/components/interfaces/App/CommandMenuWrapper.tsx
@@ -1,31 +1,31 @@
-import remarkGfm from 'remark-gfm'
-import ReactMarkdown from 'react-markdown'
-import { PropsWithChildren, useMemo } from 'react'
-import { useParams } from 'common'
-import { CommandMenuProvider, markdownComponents } from 'ui'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useParams } from 'common'
+import { PropsWithChildren, useMemo } from 'react'
+import { CommandMenuProvider } from 'ui'
 
-import { uuidv4 } from 'lib/helpers'
-import { checkPermissions, useFlag, useStore } from 'hooks'
-import { createSqlSnippetSkeleton } from '../SQLEditor/SQLEditor.utils'
-import { useSqlEditorStateSnapshot } from 'state/sql-editor'
 import { codeBlock } from 'common-tags'
-import { SqlSnippet } from 'data/content/sql-snippets-query'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { useProjectApiQuery } from 'data/config/project-api-query'
+import { SqlSnippet } from 'data/content/sql-snippets-query'
 import { useEntityDefinitionsQuery } from 'data/database/entity-definitions-query'
-import { useProfileQuery } from 'data/profile/profile-query'
+import { checkPermissions, useFlag, useSelectedOrganization, useStore } from 'hooks'
+import { uuidv4 } from 'lib/helpers'
+import { useProfile } from 'lib/profile'
+import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { createSqlSnippetSkeleton } from '../SQLEditor/SQLEditor.utils'
 
-const CommandMenuWrapper = observer(({ children }: PropsWithChildren<{}>) => {
+const CommandMenuWrapper = ({ children }: PropsWithChildren<{}>) => {
   const { ref } = useParams()
   const { ui } = useStore()
-  const { opt_in_tags } = ui.selectedOrganization ?? {}
+  const selectedOrganization = useSelectedOrganization()
+  const { project: selectedProject } = useProjectContext()
+  const opt_in_tags = selectedOrganization?.opt_in_tags
 
   const snap = useSqlEditorStateSnapshot()
   const allowCMDKDataOptIn = useFlag('dashboardCmdkDataOptIn')
   const isOptedInToAI = opt_in_tags?.includes('AI_SQL_GENERATOR_OPT_IN') ?? false
 
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
   const { data: settings } = useProjectApiQuery({ projectRef: ref })
   const canCreateSQLSnippet = checkPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'sql', owner_id: profile?.id },
@@ -39,8 +39,8 @@ const CommandMenuWrapper = observer(({ children }: PropsWithChildren<{}>) => {
 
   const { data } = useEntityDefinitionsQuery(
     {
-      projectRef: ui.selectedProject?.ref,
-      connectionString: ui.selectedProject?.connectionString,
+      projectRef: selectedProject?.ref,
+      connectionString: selectedProject?.connectionString,
     },
     { enabled: isOptedInToAI }
   )
@@ -105,6 +105,6 @@ const CommandMenuWrapper = observer(({ children }: PropsWithChildren<{}>) => {
       {children}
     </CommandMenuProvider>
   )
-})
+}
 
 export default CommandMenuWrapper
diff --git a/studio/components/interfaces/App/RouteValidationWrapper.tsx b/studio/components/interfaces/App/RouteValidationWrapper.tsx
index f6ca98bf22..aacae694dc 100644
--- a/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -1,15 +1,15 @@
-import { FC, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect } from 'react'
 
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useProjectsQuery } from 'data/projects/projects-query'
 import { useStore } from 'hooks'
-import { Organization, Project } from 'types'
+import useLatest from 'hooks/misc/useLatest'
 
 // Ideally these could all be within a _middleware when we use Next 12
-const RouteValidationWrapper: FC = ({ children }) => {
-  const { ui, app } = useStore()
-  const orgsInitialized = app.organizations.isInitialized
-  const projectsInitialized = app.projects.isInitialized
+const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
+  const { ui } = useStore()
 
   const router = useRouter()
   const projectRef = router.query.ref
@@ -36,14 +36,17 @@ const RouteValidationWrapper: FC = ({ children }) => {
     return excemptUrls.includes(router?.pathname)
   }
 
+  const { data: organizations, isSuccess: orgsInitialized } = useOrganizationsQuery()
+  const organizationsRef = useLatest(organizations)
+
   useEffect(() => {
     // check if current route is excempted from route validation check
     if (isExceptUrl()) return
 
     if (orgsInitialized && orgSlug) {
       // Check validity of organization that user is trying to access
-      const organizations = app.organizations.list()
-      const isValidOrg = organizations.some((org: Organization) => org.slug === orgSlug)
+      const organizations = organizationsRef.current ?? []
+      const isValidOrg = organizations.some((org) => org.slug === orgSlug)
 
       if (!isValidOrg) {
         ui.setNotification({ category: 'error', message: 'This organization does not exist' })
@@ -53,14 +56,17 @@ const RouteValidationWrapper: FC = ({ children }) => {
     }
   }, [orgsInitialized])
 
+  const { data: projects, isSuccess: projectsInitialized } = useProjectsQuery()
+  const projectsRef = useLatest(projects)
+
   useEffect(() => {
     // check if current route is excempted from route validation check
     if (isExceptUrl()) return
 
     if (projectsInitialized && projectRef) {
       // Check validity of project that the user is trying to access
-      const projects = app.projects.list()
-      const isValidProject = projects.some((project: Project) => project.ref === projectRef)
+      const projects = projectsRef.current ?? []
+      const isValidProject = projects.some((project) => project.ref === projectRef)
 
       if (!isValidProject) {
         ui.setNotification({ category: 'error', message: 'This project does not exist' })
diff --git a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 0b41fdface..cab31f8178 100644
--- a/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -1,24 +1,26 @@
-import { FC, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
 import { Alert, Button, Collapsible, Form, IconCheck, IconChevronUp, Input } from 'ui'
 
-import { useStore, checkPermissions } from 'hooks'
-import { BASE_PATH } from 'lib/constants'
-import { Provider } from './AuthProvidersForm.types'
-import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants'
-import FormField from './FormField'
-import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 import { useParams } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
+import { checkPermissions, useStore } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
+import { ProviderCollapsibleClasses } from './AuthProvidersForm.constants'
+import { Provider } from './AuthProvidersForm.types'
+import FormField from './FormField'
 
-interface Props {
+export interface ProviderFormProps {
   provider: Provider
 }
 
-const ProviderForm: FC<Props> = ({ provider }) => {
+const ProviderForm = ({ provider }: ProviderFormProps) => {
   const [open, setOpen] = useState(false)
   const { authConfig, ui } = useStore()
+  const { project: selectedProject } = useProjectContext()
   const { ref } = useParams()
   const doubleNegativeKeys = ['MAILER_AUTOCONFIRM', 'SMS_AUTOCONFIRM']
   const canUpdateConfig = checkPermissions(PermissionAction.UPDATE, 'custom_config_gotrue')
@@ -149,18 +151,20 @@ const ProviderForm: FC<Props> = ({ provider }) => {
                   )}
                   {provider.misc.requiresRedirect && (
                     <>
-                      <ReactMarkdown className="text-xs text-scale-900">
-                        {provider.misc.helper}
-                      </ReactMarkdown>
                       <Input
                         copy
                         readOnly
                         disabled
-                        label="Redirect URL"
+                        label="Callback URL (for OAuth)"
                         value={
                           customDomainData?.customDomain?.status === 'active'
                             ? `https://${customDomainData.customDomain?.hostname}/auth/v1/callback`
-                            : `https://${ui.selectedProjectRef}.supabase.co/auth/v1/callback`
+                            : `https://${selectedProject?.ref}.supabase.co/auth/v1/callback`
+                        }
+                        descriptionText={
+                          <ReactMarkdown unwrapDisallowed disallowedElements={['p']}>
+                            {provider.misc.helper}
+                          </ReactMarkdown>
                         }
                       />
                     </>
diff --git a/studio/components/interfaces/Auth/AutoSchemaForm.tsx b/studio/components/interfaces/Auth/AutoSchemaForm.tsx
index 046f2b88e5..614fe8ba38 100644
--- a/studio/components/interfaces/Auth/AutoSchemaForm.tsx
+++ b/studio/components/interfaces/Auth/AutoSchemaForm.tsx
@@ -31,7 +31,7 @@ const AutoSchemaForm = observer(() => {
     SECURITY_CAPTCHA_ENABLED: authConfig.config.SECURITY_CAPTCHA_ENABLED || false,
     SECURITY_CAPTCHA_SECRET: authConfig.config.SECURITY_CAPTCHA_SECRET || '',
     SECURITY_CAPTCHA_PROVIDER: authConfig.config.SECURITY_CAPTCHA_PROVIDER || 'hcaptcha',
-    MAX_ENROLLED_FACTORS: authConfig.config.MAX_ENROLLED_FACTORS,
+    MFA_MAX_ENROLLED_FACTORS: authConfig.config.MFA_MAX_ENROLLED_FACTORS || 10,
   }
 
   const schema = object({
@@ -55,7 +55,7 @@ const AutoSchemaForm = observer(() => {
         .oneOf(['hcaptcha', 'turnstile'])
         .required('Captcha provider must be either hcaptcha or turnstile'),
     }),
-    MAX_ENROLLED_FACTORS: number()
+    MFA_MAX_ENROLLED_FACTORS: number()
       .min(0, 'Must be be a value more than 0')
       .max(30, 'Must be a value less than 30'),
   })
@@ -215,7 +215,7 @@ const AutoSchemaForm = observer(() => {
               >
                 <FormSectionContent loading={!isLoaded}>
                   <InputNumber
-                    id="MAX_ENROLLED_FACTORS"
+                    id="MFA_MAX_ENROLLED_FACTORS"
                     size="small"
                     label="Maximum number of enrolled factors"
                     disabled={!canUpdateConfig}
diff --git a/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx
index 3cacf12808..6cbdd65410 100644
--- a/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx
+++ b/studio/components/interfaces/Auth/Users/AddUserDropdown.tsx
@@ -1,6 +1,6 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { checkPermissions } from 'hooks'
+import { useCheckPermissions } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
 import { useState } from 'react'
 import semver from 'semver'
@@ -21,8 +21,8 @@ const AddUserDropdown = ({ projectKpsVersion }: AddUserDropdownProps) => {
       )
     : true
 
-  const canInviteUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'invite_user')
-  const canCreateUsers = checkPermissions(PermissionAction.AUTH_EXECUTE, 'create_user')
+  const canInviteUsers = useCheckPermissions(PermissionAction.AUTH_EXECUTE, 'invite_user')
+  const canCreateUsers = useCheckPermissions(PermissionAction.AUTH_EXECUTE, 'create_user')
 
   const [inviteVisible, setInviteVisible] = useState(false)
   const [createVisible, setCreateVisible] = useState(false)
diff --git a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
index d8f6c0335f..60d8715ba3 100644
--- a/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx
@@ -1,15 +1,15 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
-import { loadStripe } from '@stripe/stripe-js'
 import { Elements } from '@stripe/react-stripe-js'
+import { loadStripe } from '@stripe/stripe-js'
 import { FC, useCallback, useEffect, useState } from 'react'
 
-import { Modal } from 'ui'
-import { useStore } from 'hooks'
-import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
+import { useTheme } from 'common'
+import { useSelectedOrganization, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, STRIPE_PUBLIC_KEY } from 'lib/constants'
+import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
+import { Modal } from 'ui'
 import AddPaymentMethodForm from './AddPaymentMethodForm'
-import { useTheme } from 'common'
 
 interface Props {
   visible: boolean
@@ -60,10 +60,12 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel, onC
     captchaRef?.resetCaptcha()
   }
 
+  const selectedOrganization = useSelectedOrganization()
+
   const setupIntent = async (hcaptchaToken: string | undefined) => {
     setIntent(undefined)
 
-    const orgSlug = ui.selectedOrganization?.slug ?? ''
+    const orgSlug = selectedOrganization?.slug ?? ''
     const intent = await post(`${API_URL}/organizations/${orgSlug}/payments/setup-intent`, {
       hcaptchaToken,
     })
diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/ComputeInstanceSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/ComputeInstanceSidePanel.tsx
index 35a3241b55..955d6a82d8 100644
--- a/studio/components/interfaces/BillingV2/Subscription/AddOns/ComputeInstanceSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/ComputeInstanceSidePanel.tsx
@@ -1,15 +1,20 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
 import { useParams, useTheme } from 'common'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { setProjectStatus } from 'data/projects/projects-query'
 import { useProjectAddonRemoveMutation } from 'data/subscriptions/project-addon-remove-mutation'
 import { useProjectAddonUpdateMutation } from 'data/subscriptions/project-addon-update-mutation'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
 import { checkPermissions, useStore } from 'hooks'
 import { BASE_PATH, PROJECT_STATUS } from 'lib/constants'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import Telemetry from 'lib/telemetry'
 import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { Alert, Button, IconExternalLink, Modal, Radio, SidePanel } from 'ui'
 
@@ -34,10 +39,12 @@ const COMPUTE_CATEGORY_OPTIONS: {
 ]
 
 const ComputeInstanceSidePanel = () => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const router = useRouter()
   const { ref: projectRef } = useParams()
   const { isDarkMode } = useTheme()
+  const { project: selectedProject } = useProjectContext()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [showConfirmationModal, setShowConfirmationModal] = useState(false)
@@ -55,7 +62,7 @@ const ComputeInstanceSidePanel = () => {
   const { mutateAsync: updateAddon } = useProjectAddonUpdateMutation()
   const { mutateAsync: removeAddon } = useProjectAddonRemoveMutation()
 
-  const projectId = ui.selectedProject?.id
+  const projectId = selectedProject?.id
   const selectedAddons = addons?.selected_addons ?? []
   const availableAddons = addons?.available_addons ?? []
 
@@ -79,6 +86,17 @@ const ComputeInstanceSidePanel = () => {
         setSelectedCategory('micro')
         setSelectedOption('ci_micro')
       }
+      Telemetry.sendActivity(
+        {
+          activity: 'Side Panel Viewed',
+          source: 'Dashboard',
+          data: {
+            title: 'Change project compute size',
+            section: 'Add ons',
+          },
+        },
+        router
+      )
     }
   }, [visible, isLoading])
 
@@ -102,7 +120,7 @@ const ComputeInstanceSidePanel = () => {
           selectedCompute?.name || 'Micro'
         }. Your project is currently being restarted to update its instance`,
       })
-      app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)
+      setProjectStatus(queryClient, projectRef, PROJECT_STATUS.RESTORING)
       onClose()
       router.push(`/project/${projectRef}`)
     } catch (error: any) {
@@ -169,6 +187,18 @@ const ComputeInstanceSidePanel = () => {
                       onClick={() => {
                         setSelectedCategory(option.id)
                         if (option.id === 'micro') setSelectedOption('ci_micro')
+                        Telemetry.sendActivity(
+                          {
+                            activity: 'Option Selected',
+                            source: 'Dashboard',
+                            data: {
+                              title: 'Change project compute size',
+                              section: 'Add ons',
+                              option: option.name,
+                            },
+                          },
+                          router
+                        )
                       }}
                     >
                       <img
diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/CustomDomainSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/CustomDomainSidePanel.tsx
index bab2e1459d..46c5be4a06 100644
--- a/studio/components/interfaces/BillingV2/Subscription/AddOns/CustomDomainSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/CustomDomainSidePanel.tsx
@@ -10,9 +10,12 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { Alert, Button, IconExternalLink, Radio, SidePanel } from 'ui'
+import Telemetry from 'lib/telemetry'
+import { useRouter } from 'next/router'
 
 const CustomDomainSidePanel = () => {
   const { ui } = useStore()
+  const router = useRouter()
   const { ref: projectRef } = useParams()
 
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false)
@@ -51,6 +54,17 @@ const CustomDomainSidePanel = () => {
       } else {
         setSelectedOption('cd_none')
       }
+      Telemetry.sendActivity(
+        {
+          activity: 'Side Panel Viewed',
+          source: 'Dashboard',
+          data: {
+            title: 'Custom domains',
+            section: 'Add ons',
+          },
+        },
+        router
+      )
     }
   }, [visible, isLoading])
 
@@ -128,7 +142,21 @@ const CustomDomainSidePanel = () => {
               type="large-cards"
               size="tiny"
               id="custom-domain"
-              onChange={(event: any) => setSelectedOption(event.target.value)}
+              onChange={(event: any) => {
+                setSelectedOption(event.target.value)
+                Telemetry.sendActivity(
+                  {
+                    activity: 'Option Selected',
+                    source: 'Dashboard',
+                    data: {
+                      title: 'Custom domains',
+                      section: 'Add ons',
+                      option: event.target.label,
+                    },
+                  },
+                  router
+                )
+              }}
             >
               <Radio
                 name="custom-domain"
diff --git a/studio/components/interfaces/BillingV2/Subscription/AddOns/PITRSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/AddOns/PITRSidePanel.tsx
index 712570e02a..b944e79cd6 100644
--- a/studio/components/interfaces/BillingV2/Subscription/AddOns/PITRSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/AddOns/PITRSidePanel.tsx
@@ -11,6 +11,8 @@ import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { Alert, Button, IconExternalLink, Radio, SidePanel } from 'ui'
+import Telemetry from 'lib/telemetry'
+import { useRouter } from 'next/router'
 
 const PITR_CATEGORY_OPTIONS: {
   id: 'off' | 'on'
@@ -34,6 +36,7 @@ const PITR_CATEGORY_OPTIONS: {
 
 const PITRSidePanel = () => {
   const { ui } = useStore()
+  const router = useRouter()
   const { ref: projectRef } = useParams()
   const { isDarkMode } = useTheme()
 
@@ -72,6 +75,17 @@ const PITRSidePanel = () => {
         setSelectedCategory('off')
         setSelectedOption('pitr_0')
       }
+      Telemetry.sendActivity(
+        {
+          activity: 'Side Panel Viewed',
+          source: 'Dashboard',
+          data: {
+            title: 'Point in Time Recovery',
+            section: 'Add ons',
+          },
+        },
+        router
+      )
     }
   }, [visible, isLoading])
 
@@ -152,6 +166,18 @@ const PITRSidePanel = () => {
                     onClick={() => {
                       setSelectedCategory(option.id)
                       if (option.id === 'off') setSelectedOption('pitr_0')
+                      Telemetry.sendActivity(
+                        {
+                          activity: 'Option Selected',
+                          source: 'Dashboard',
+                          data: {
+                            title: 'Point in Time Recovery',
+                            section: 'Add ons',
+                            option: option.name,
+                          },
+                        },
+                        router
+                      )
                     }}
                   >
                     <img
diff --git a/studio/components/interfaces/BillingV2/Subscription/CostControl/SpendCapSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/CostControl/SpendCapSidePanel.tsx
index 74fccb42c8..3a8bb65b1e 100644
--- a/studio/components/interfaces/BillingV2/Subscription/CostControl/SpendCapSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/CostControl/SpendCapSidePanel.tsx
@@ -11,6 +11,8 @@ import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { Alert, Button, Collapsible, IconChevronRight, IconExternalLink, SidePanel } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { pricing } from 'shared-data/pricing'
+import Telemetry from 'lib/telemetry'
+import { useRouter } from 'next/router'
 
 const SPEND_CAP_OPTIONS: {
   name: string
@@ -34,6 +36,7 @@ const SPEND_CAP_OPTIONS: {
 
 const SpendCapSidePanel = () => {
   const { ui } = useStore()
+  const router = useRouter()
   const { ref: projectRef } = useParams()
   const { isDarkMode } = useTheme()
 
@@ -58,6 +61,17 @@ const SpendCapSidePanel = () => {
   useEffect(() => {
     if (visible && subscription !== undefined) {
       setSelectedOption(isSpendCapOn ? 'on' : 'off')
+      Telemetry.sendActivity(
+        {
+          activity: 'Side Panel Viewed',
+          source: 'Dashboard',
+          data: {
+            title: 'Spend cap',
+            section: 'Cost Control',
+          },
+        },
+        router
+      )
     }
   }, [visible, isLoading, subscription, isSpendCapOn])
 
@@ -206,7 +220,21 @@ const SpendCapSidePanel = () => {
                   <div
                     key={option.value}
                     className={clsx('col-span-4 group space-y-1', isFreePlan && 'opacity-75')}
-                    onClick={() => !isFreePlan && setSelectedOption(option.value)}
+                    onClick={() => {
+                      !isFreePlan && setSelectedOption(option.value)
+                      Telemetry.sendActivity(
+                        {
+                          activity: 'Option Selected',
+                          source: 'Dashboard',
+                          data: {
+                            title: 'Spend cap',
+                            section: 'Cost Control',
+                            option: option.name,
+                          },
+                        },
+                        router
+                      )
+                    }}
                   >
                     <img
                       alt="Spend Cap"
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/AddNewPaymentMethodModal.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/AddNewPaymentMethodModal.tsx
index b00322e827..d5383ced14 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/AddNewPaymentMethodModal.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/AddNewPaymentMethodModal.tsx
@@ -1,15 +1,16 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { Elements } from '@stripe/react-stripe-js'
 import { loadStripe } from '@stripe/stripe-js'
+import { useCallback, useEffect, useState } from 'react'
+
+import { useTheme } from 'common'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import { useStore } from 'hooks'
+import { useSelectedOrganization, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, STRIPE_PUBLIC_KEY } from 'lib/constants'
-import { useCallback, useEffect, useState } from 'react'
 import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
 import { Modal } from 'ui'
 import AddNewPaymentMethodForm from './AddNewPaymentMethodForm'
-import { useTheme } from 'common'
 
 // [Joshen] Directly brought over from old Billing folder, so we can deprecate that folder easily next time
 
@@ -66,10 +67,12 @@ const AddNewPaymentMethodModal = ({
     captchaRef?.resetCaptcha()
   }
 
+  const selectedOrganization = useSelectedOrganization()
+
   const setupIntent = async (hcaptchaToken: string | undefined) => {
     setIntent(undefined)
 
-    const orgSlug = ui.selectedOrganization?.slug ?? ''
+    const orgSlug = selectedOrganization?.slug ?? ''
     const intent = await post(`${API_URL}/organizations/${orgSlug}/payments/setup-intent`, {
       hcaptchaToken,
     })
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/ExitSurveyModal.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/ExitSurveyModal.tsx
index 404045ec10..2a9e5c84af 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/ExitSurveyModal.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/ExitSurveyModal.tsx
@@ -1,17 +1,19 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
-import * as Tooltip from '@radix-ui/react-tooltip'
+import { useQueryClient } from '@tanstack/react-query'
+import { includes, without } from 'lodash'
+import { useRouter } from 'next/router'
+import { useReducer, useRef, useState } from 'react'
+
 import { useParams } from 'common'
+import { setProjectStatus } from 'data/projects/projects-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useProjectSubscriptionUpdateMutation } from 'data/subscriptions/project-subscription-update-mutation'
 import { useFlag, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { includes, without } from 'lodash'
-import { useRouter } from 'next/router'
-import { useReducer, useRef, useState } from 'react'
 import { Button, Input, Modal } from 'ui'
-import ProjectUpdateDisabledTooltip from '../../ProjectUpdateDisabledTooltip'
 import { CANCELLATION_REASONS } from '../../Billing.constants'
+import ProjectUpdateDisabledTooltip from '../../ProjectUpdateDisabledTooltip'
 
 export interface ExitSurveyModalProps {
   visible: boolean
@@ -21,7 +23,8 @@ export interface ExitSurveyModalProps {
 // [Joshen] For context - Exit survey is only when going to free plan from a paid plan
 
 const ExitSurveyModal = ({ visible, onClose }: ExitSurveyModalProps) => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const { ref: projectRef } = useParams()
   const captchaRef = useRef<HCaptcha>(null)
   const router = useRouter()
@@ -35,7 +38,6 @@ const ExitSurveyModal = ({ visible, onClose }: ExitSurveyModalProps) => {
   const { data: addons } = useProjectAddonsQuery({ projectRef })
   const { mutateAsync: updateSubscriptionTier } = useProjectSubscriptionUpdateMutation()
 
-  const projectId = ui.selectedProject?.id ?? -1
   const subscriptionAddons = addons?.selected_addons ?? []
   const hasComputeInstance = subscriptionAddons.find((addon) => addon.type === 'compute_instance')
 
@@ -118,7 +120,7 @@ const ExitSurveyModal = ({ visible, onClose }: ExitSurveyModalProps) => {
           : 'Successfully downgraded project to the free plan',
       })
       if (hasComputeInstance) {
-        app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)
+        setProjectStatus(queryClient, projectRef, PROJECT_STATUS.RESTORING)
         router.push(`/project/${projectRef}`)
       }
       onClose(true)
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/MembersExceedLimitModal.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/MembersExceedLimitModal.tsx
index 82d3c77020..501e925913 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/MembersExceedLimitModal.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/MembersExceedLimitModal.tsx
@@ -1,5 +1,5 @@
 import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
-import { useStore } from 'hooks'
+import { useSelectedOrganization } from 'hooks'
 import { Button, Modal } from 'ui'
 
 export interface MembersExceedLimitModalProps {
@@ -8,8 +8,8 @@ export interface MembersExceedLimitModalProps {
 }
 
 const MembersExceedLimitModal = ({ visible, onClose }: MembersExceedLimitModalProps) => {
-  const { ui } = useStore()
-  const slug = ui.selectedOrganization?.slug
+  const selectedOrganization = useSelectedOrganization()
+  const slug = selectedOrganization?.slug
   const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug })
 
   return (
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/PaymentMethodSelection.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/PaymentMethodSelection.tsx
index 6c499a3b6c..f0716fe15f 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/PaymentMethodSelection.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/PaymentMethodSelection.tsx
@@ -1,12 +1,13 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useEffect, useMemo, useState } from 'react'
+
 import { useParams } from 'common'
 import { useOrganizationCustomerProfileQuery } from 'data/organizations/organization-customer-profile-query'
 import { useOrganizationPaymentMethodsQuery } from 'data/organizations/organization-payment-methods-query'
-import { checkPermissions, useStore } from 'hooks'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
 import { getURL } from 'lib/helpers'
-import { useEffect, useMemo, useState } from 'react'
 import { Button, IconAlertCircle, IconCreditCard, IconLoader, IconPlus, Listbox } from 'ui'
 import AddNewPaymentMethodModal from './AddNewPaymentMethodModal'
 
@@ -21,7 +22,8 @@ const PaymentMethodSelection = ({
 }: PaymentMethodSelectionProps) => {
   const { ui } = useStore()
   const { ref: projectRef } = useParams()
-  const slug = ui.selectedOrganization?.slug
+  const selectedOrganization = useSelectedOrganization()
+  const slug = selectedOrganization?.slug
   const [showAddNewPaymentMethodModal, setShowAddNewPaymentMethodModal] = useState(false)
 
   const {
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionPaymentMethod.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionPaymentMethod.tsx
index 1b1a26c910..5d976888e0 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionPaymentMethod.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionPaymentMethod.tsx
@@ -1,18 +1,19 @@
-import Panel from 'components/ui/Panel'
-import { ProjectSubscriptionResponse } from 'data/subscriptions/project-subscription-v2-query'
-import { Button, IconCreditCard, Modal } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useState } from 'react'
-import PaymentMethodSelection from './PaymentMethodSelection'
+
 import { useParams } from 'common'
+import Panel from 'components/ui/Panel'
 import {
   SubscriptionTier,
   updateSubscriptionTier,
 } from 'data/subscriptions/project-subscription-update-mutation'
-import { checkPermissions, useStore } from 'hooks'
+import { ProjectSubscriptionResponse } from 'data/subscriptions/project-subscription-v2-query'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { BASE_PATH } from 'lib/constants'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
+import { Button, IconCreditCard, Modal } from 'ui'
+import PaymentMethodSelection from './PaymentMethodSelection'
 
 export interface SubscriptionTierProps {
   subscription: ProjectSubscriptionResponse
@@ -26,7 +27,8 @@ const SubscriptionPaymentMethod = ({
   const { ref: projectRef } = useParams()
   const { ui } = useStore()
 
-  const currentOrgSlug = ui.selectedOrganization?.slug
+  const selectedOrganization = useSelectedOrganization()
+  const currentOrgSlug = selectedOrganization?.slug
 
   const canUpdatePaymentMethod = checkPermissions(
     PermissionAction.BILLING_WRITE,
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
index 3d22dee00f..663096404e 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/SubscriptionTier.tsx
@@ -1,22 +1,23 @@
+import dayjs from 'dayjs'
+import Link from 'next/link'
+
 import { useParams } from 'common'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import SparkBar from 'components/ui/SparkBar'
 import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
-import dayjs from 'dayjs'
+import { useFlag, useSelectedOrganization } from 'hooks'
 import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { Alert, Button, IconExternalLink } from 'ui'
-import TierUpdateSidePanel from './TierUpdateSidePanel'
-import Link from 'next/link'
-import { useFlag, useStore } from 'hooks'
 import ProjectUpdateDisabledTooltip from '../../ProjectUpdateDisabledTooltip'
 import SubscriptionPaymentMethod from './SubscriptionPaymentMethod'
+import TierUpdateSidePanel from './TierUpdateSidePanel'
 
 export interface SubscriptionTierProps {}
 
 const SubscriptionTier = ({}: SubscriptionTierProps) => {
   const { ref: projectRef } = useParams()
-  const { ui } = useStore()
-  const orgSlug = ui.selectedOrganization?.slug ?? ''
+  const selectedOrganization = useSelectedOrganization()
+  const orgSlug = selectedOrganization?.slug ?? ''
   const snap = useSubscriptionPageStateSnapshot()
   const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
   const { data: subscription, isLoading, refetch } = useProjectSubscriptionV2Query({ projectRef })
diff --git a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
index d2b685bb27..4e70127394 100644
--- a/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
+++ b/studio/components/interfaces/BillingV2/Subscription/Tier/TierUpdateSidePanel.tsx
@@ -1,28 +1,33 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import clsx from 'clsx'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+
 import { useParams } from 'common'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useProjectPlansQuery } from 'data/subscriptions/project-plans-query'
 import { useProjectSubscriptionUpdateMutation } from 'data/subscriptions/project-subscription-update-mutation'
-import { checkPermissions, useStore } from 'hooks'
-import Link from 'next/link'
-import { useEffect, useState } from 'react'
+import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
+import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
+import Telemetry from 'lib/telemetry'
+import { useRouter } from 'next/router'
+import { plans as subscriptionsPlans } from 'shared-data/plans'
 import { useSubscriptionPageStateSnapshot } from 'state/subscription-page'
 import { Alert, Button, IconCheck, IconExternalLink, Modal, SidePanel } from 'ui'
 import EnterpriseCard from './EnterpriseCard'
 import ExitSurveyModal from './ExitSurveyModal'
 import MembersExceedLimitModal from './MembersExceedLimitModal'
 import PaymentMethodSelection from './PaymentMethodSelection'
-import { plans as subscriptionsPlans } from 'shared-data/plans'
-import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
-import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import * as Tooltip from '@radix-ui/react-tooltip'
 
 const TierUpdateSidePanel = () => {
   const { ui } = useStore()
-  const slug = ui.selectedOrganization?.slug
+  const router = useRouter()
+  const selectedOrganization = useSelectedOrganization()
+  const slug = selectedOrganization?.slug
   const { ref: projectRef } = useParams()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -58,6 +63,17 @@ const TierUpdateSidePanel = () => {
   useEffect(() => {
     if (visible) {
       setSelectedTier(undefined)
+      Telemetry.sendActivity(
+        {
+          activity: 'Side Panel Viewed',
+          source: 'Dashboard',
+          data: {
+            title: 'Change Subscription Plan',
+            section: 'Subscription plan',
+          },
+        },
+        router
+      )
     }
   }, [visible])
 
@@ -192,7 +208,22 @@ const TierUpdateSidePanel = () => {
                                 !canUpdateSubscription
                               }
                               type={isDowngradeOption ? 'default' : 'primary'}
-                              onClick={() => setSelectedTier(plan.id as any)}
+                              onClick={() => {
+                                setSelectedTier(plan.id as any)
+                                Telemetry.sendActivity(
+                                  {
+                                    activity: 'Popup Viewed',
+                                    source: 'Dashboard',
+                                    data: {
+                                      title: isDowngradeOption
+                                        ? 'Downgrade'
+                                        : 'Upgrade' + ' to ' + plan.name,
+                                      section: 'Subscription plan',
+                                    },
+                                  },
+                                  router
+                                )
+                              }}
                             >
                               {isDowngradeOption ? 'Downgrade' : 'Upgrade'} to {plan.name}
                             </Button>
diff --git a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
index 1681ee1cdc..b46e60bd77 100644
--- a/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Infrastructure.tsx
@@ -60,7 +60,7 @@ const Infrastructure = ({
 
   const { data: cpuUsageData, isLoading: isLoadingCpuUsageData } = useInfraMonitoringQuery({
     projectRef,
-    attribute: 'cpu_usage',
+    attribute: 'max_cpu_usage',
     interval,
     startDate,
     endDate,
@@ -91,7 +91,7 @@ const Infrastructure = ({
   )
 
   const chartMeta: { [key: string]: { data: DataPoint[]; isLoading: boolean } } = {
-    cpu_usage: {
+    max_cpu_usage: {
       isLoading: isLoadingCpuUsageData,
       data: cpuUsageData?.data ?? [],
     },
@@ -226,7 +226,7 @@ const Infrastructure = ({
                   </div>
                 )}
 
-                {attribute.key === 'cpu_usage' && (
+                {attribute.key === 'max_cpu_usage' && (
                   <p className="text-sm text-scale-1000">
                     Your compute instance has {currentComputeInstanceSpecs.cpu_cores} CPU cores.
                   </p>
diff --git a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
index c4d2b2c138..abb971d2db 100644
--- a/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
+++ b/studio/components/interfaces/BillingV2/Usage/Usage.constants.tsx
@@ -49,11 +49,11 @@ export const USAGE_CATEGORIES: CategoryMeta[] = [
     attributes: [
       {
         anchor: 'cpu',
-        key: 'cpu_usage',
-        attribute: 'cpu_usage',
+        key: 'max_cpu_usage',
+        attribute: 'max_cpu_usage',
         name: 'CPU',
         unit: 'percentage',
-        description: 'CPU usage of your server',
+        description: 'Max CPU usage of your server',
         chartDescription: '',
         links: [
           {
diff --git a/studio/components/interfaces/Database/Backups/BackupItem.tsx b/studio/components/interfaces/Database/Backups/BackupItem.tsx
index e17c909e7e..79ab41f927 100644
--- a/studio/components/interfaces/Database/Backups/BackupItem.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupItem.tsx
@@ -1,14 +1,15 @@
-import dayjs from 'dayjs'
-import { FC, useState } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { Badge, Button, IconDownload } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
+import { FC, useState } from 'react'
 
-import { useStore, checkPermissions } from 'hooks'
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { post } from 'lib/common/fetch'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
+import { setProjectStatus } from 'data/projects/projects-query'
+import { checkPermissions, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { Badge, Button, IconDownload } from 'ui'
 
 interface Props {
   projectRef: string
@@ -17,13 +18,13 @@ interface Props {
 }
 
 const BackupItem: FC<Props> = ({ projectRef, backup, index }) => {
+  const queryClient = useQueryClient()
   const router = useRouter()
-  const { app, ui } = useStore()
+  const { ui } = useStore()
 
   const [isDownloading, setDownloading] = useState<boolean>(false)
   const [isRestoring, setRestoring] = useState<boolean>(false)
 
-  const projectId = ui.selectedProject?.id ?? -1
   const canTriggerScheduledBackups = checkPermissions(
     PermissionAction.INFRA_EXECUTE,
     'queue_job.restore.prepare'
@@ -34,7 +35,7 @@ const BackupItem: FC<Props> = ({ projectRef, backup, index }) => {
     try {
       post(`${API_URL}/database/${projectRef}/backups/restore`, backup).then(() => {
         setTimeout(() => {
-          app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)
+          setProjectStatus(queryClient, projectRef, PROJECT_STATUS.RESTORING)
           ui.setNotification({
             category: 'success',
             message: `Restoring database back to ${dayjs(backup.inserted_at).format(
@@ -132,4 +133,4 @@ const BackupItem: FC<Props> = ({ projectRef, backup, index }) => {
   )
 }
 
-export default observer(BackupItem)
+export default BackupItem
diff --git a/studio/components/interfaces/Database/Backups/BackupsList.tsx b/studio/components/interfaces/Database/Backups/BackupsList.tsx
index 59e94d83ed..8b402c75b8 100644
--- a/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -1,23 +1,21 @@
-import { FC } from 'react'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { observer } from 'mobx-react-lite'
 
-import { useStore, checkPermissions } from 'hooks'
-import Loading from 'components/ui/Loading'
-import UpgradeToPro from 'components/ui/UpgradeToPro'
-import Panel from 'components/ui/Panel'
-
-import BackupItem from './BackupItem'
-import BackupsError from './BackupsError'
-import BackupsEmpty from './BackupsEmpty'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import InformationBox from 'components/ui/InformationBox'
+import Loading from 'components/ui/Loading'
+import Panel from 'components/ui/Panel'
+import UpgradeToPro from 'components/ui/UpgradeToPro'
+import { checkPermissions, useStore } from 'hooks'
 import { IconAlertCircle, IconClock } from 'ui'
+import BackupItem from './BackupItem'
+import BackupsEmpty from './BackupsEmpty'
+import BackupsError from './BackupsError'
 
-interface Props {}
-
-const BackupsList: FC<Props> = ({}) => {
-  const { ui, backups } = useStore()
-  const projectRef = ui.selectedProject?.ref || 'default'
+const BackupsList = () => {
+  const { project: selectedProject } = useProjectContext()
+  const { backups } = useStore()
+  const projectRef = selectedProject?.ref || 'default'
   const canTriggerScheduledBackups = checkPermissions(
     PermissionAction.INFRA_EXECUTE,
     'queue_job.restore.prepare'
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
index 1517f52ff3..85ba4eed38 100644
--- a/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
@@ -1,35 +1,37 @@
-import dayjs from 'dayjs'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { useQueryClient } from '@tanstack/react-query'
 import { format } from 'date-fns'
+import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 import DatePicker from 'react-datepicker'
-import { Button, Modal, IconChevronLeft, IconChevronRight, IconHelpCircle, Alert } from 'ui'
-import * as Tooltip from '@radix-ui/react-tooltip'
+import { Alert, Button, IconChevronLeft, IconChevronRight, IconHelpCircle, Modal } from 'ui'
 
 import { useParams } from 'common'
+import { FormHeader, FormPanel } from 'components/ui/Forms'
+import InformationBox from 'components/ui/InformationBox'
+import { setProjectStatus } from 'data/projects/projects-query'
 import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { FormHeader, FormPanel } from 'components/ui/Forms'
-import InformationBox from 'components/ui/InformationBox'
-import TimeInput from './TimeInput'
-import TimezoneSelection from './TimezoneSelection'
+import BackupsEmpty from '../BackupsEmpty'
 import { Timezone } from './PITR.types'
-import PITRStatus from './PITRStatus'
 import {
   constrainDateToRange,
   formatNumberToTwoDigits,
   getClientTimezone,
   getDatesBetweenRange,
 } from './PITR.utils'
-import { useRouter } from 'next/router'
-import BackupsEmpty from '../BackupsEmpty'
+import PITRStatus from './PITRStatus'
+import TimeInput from './TimeInput'
+import TimezoneSelection from './TimezoneSelection'
 
-const PITRSelection = ({}) => {
+const PITRSelection = () => {
+  const queryClient = useQueryClient()
   const router = useRouter()
   const { ref } = useParams()
 
-  const { app, ui, backups } = useStore()
-  const projectId = ui.selectedProject?.id ?? -1
+  const { ui, backups } = useStore()
 
   const [selectedTimezone, setSelectedTimezone] = useState<Timezone>(getClientTimezone())
 
@@ -114,7 +116,7 @@ const PITRSelection = ({}) => {
     } else {
       setTimeout(() => {
         setShowConfirmation(false)
-        app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)
+        setProjectStatus(queryClient, projectRef, PROJECT_STATUS.RESTORING)
         router.push(`/project/${projectRef}`)
       }, 3000)
     }
diff --git a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
index f08cdfde80..025e271ef8 100644
--- a/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
+++ b/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
@@ -1,13 +1,14 @@
-import { FC } from 'react'
-import { useRouter } from 'next/router'
-import { includes } from 'lodash'
-import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'ui'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { includes, noop } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { FC } from 'react'
 
-import { checkPermissions, useStore } from 'hooks'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
+import { checkPermissions, useStore } from 'hooks'
+import { Button, Dropdown, IconEdit3, IconFileText, IconMoreVertical, IconTrash } from 'ui'
 
 interface Props {
   schema: string
@@ -19,18 +20,19 @@ interface Props {
 const FunctionList: FC<Props> = ({
   schema,
   filterString,
-  editFunction = () => {},
-  deleteFunction = () => {},
+  editFunction = noop,
+  deleteFunction = noop,
 }) => {
+  const { project: selectedProject } = useProjectContext()
   const router = useRouter()
-  const { ui, meta } = useStore()
+  const { meta } = useStore()
   const functions = meta.functions.list((fn: any) => !meta.excludedSchemas.includes(fn.schema))
   const filteredFunctions = functions.filter((x: any) =>
     includes(x.name.toLowerCase(), filterString.toLowerCase())
   )
   const _functions = filteredFunctions.filter((x) => x.schema == schema)
   const isApiDocumentAvailable = schema == 'public'
-  const projectRef = ui.selectedProject?.ref
+  const projectRef = selectedProject?.ref
 
   const canUpdateFunctions = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'functions')
 
diff --git a/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx b/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
index 4525d36fee..522a3fae31 100644
--- a/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
+++ b/studio/components/interfaces/Database/Hooks/EditHookPanel.tsx
@@ -1,24 +1,23 @@
-import Image from 'next/image'
-import { useState, useRef, useEffect, MutableRefObject } from 'react'
 import { PostgresTable, PostgresTrigger } from '@supabase/postgres-meta'
-import { Button, SidePanel, Form, Input, Listbox, Checkbox, Radio, Badge, Modal } from 'ui'
+import Image from 'next/image'
+import { MutableRefObject, useEffect, useRef, useState } from 'react'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { tryParseJson, uuidv4 } from 'lib/helpers'
-import HTTPRequestFields from './HTTPRequestFields'
-import { isValidHttpUrl } from './Hooks.utils'
-import { AVAILABLE_WEBHOOK_TYPES, HOOK_EVENTS } from './Hooks.constants'
-import ConfirmationModal from 'components/ui/ConfirmationModal'
-import { FormSection, FormSectionLabel, FormSectionContent } from 'components/ui/Forms'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-
+import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
+import { useDatabaseTriggerCreateMutation } from 'data/database-triggers/database-trigger-create-mutation'
+import { useDatabaseTriggerUpdateMutation } from 'data/database-triggers/database-trigger-update-transaction-mutation'
 import {
   EdgeFunctionsResponse,
   useEdgeFunctionsQuery,
 } from 'data/edge-functions/edge-functions-query'
-import { useDatabaseTriggerCreateMutation } from 'data/database-triggers/database-trigger-create-mutation'
-import { useDatabaseTriggerUpdateMutation } from 'data/database-triggers/database-trigger-update-transaction-mutation'
+import { useStore } from 'hooks'
+import { tryParseJson, uuidv4 } from 'lib/helpers'
+import { Button, Checkbox, Form, Input, Listbox, Modal, Radio, SidePanel } from 'ui'
+import HTTPRequestFields from './HTTPRequestFields'
+import { AVAILABLE_WEBHOOK_TYPES, HOOK_EVENTS } from './Hooks.constants'
+import { isValidHttpUrl } from 'lib/helpers'
 
 export interface EditHookPanelProps {
   visible: boolean
@@ -52,7 +51,7 @@ const EditHookPanel = ({ visible, selectedHook, onClose }: EditHookPanelProps) =
   const { mutateAsync: updateDatabaseTrigger } = useDatabaseTriggerUpdateMutation()
 
   const tables = meta.tables.list().sort((a, b) => (a.schema > b.schema ? 0 : -1))
-  const restUrl = ui.selectedProject?.restUrl
+  const restUrl = project?.restUrl
   const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
 
   const isEdgeFunction = (url: string) =>
diff --git a/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx b/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx
index 0eb915a6b8..cc4cf1919c 100644
--- a/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx
+++ b/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx
@@ -1,22 +1,23 @@
+import clsx from 'clsx'
 import Link from 'next/link'
+
+import { useParams } from 'common/hooks'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { FormSection, FormSectionContent, FormSectionLabel } from 'components/ui/Forms'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
+import { uuidv4 } from 'lib/helpers'
 import {
   Button,
-  Listbox,
-  Input,
-  SidePanel,
-  IconTrash,
-  IconPlus,
   Dropdown,
   IconChevronDown,
+  IconPlus,
+  IconTrash,
+  Input,
+  Listbox,
+  SidePanel,
 } from 'ui'
-import { FormSection, FormSectionLabel, FormSectionContent } from 'components/ui/Forms'
 import { HTTPArgument } from './EditHookPanel'
-import { useStore } from 'hooks'
-import { useParams } from 'common/hooks'
-import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
-import clsx from 'clsx'
-import { uuidv4 } from 'lib/helpers'
-import { useProjectApiQuery } from 'data/config/project-api-query'
 
 interface HTTPRequestFieldsProps {
   type: 'http_request' | 'supabase_function'
@@ -43,7 +44,7 @@ const HTTPRequestFields = ({
   onUpdateParameter,
   onRemoveParameter,
 }: HTTPRequestFieldsProps) => {
-  const { ui } = useStore()
+  const { project: selectedProject } = useProjectContext()
   const { ref } = useParams()
   const { data: settings } = useProjectApiQuery({ projectRef: ref })
   const { data: functions } = useEdgeFunctionsQuery({ projectRef: ref })
@@ -100,7 +101,7 @@ const HTTPRequestFields = ({
           ) : type === 'supabase_function' && edgeFunctions.length > 0 ? (
             <Listbox id="http_url" name="http_url" label="Select which edge function to trigger">
               {edgeFunctions.map((fn) => {
-                const restUrl = ui.selectedProject?.restUrl
+                const restUrl = selectedProject?.restUrl
                 const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
                 const functionUrl = `https://${ref}.functions.supabase.${restUrlTld}/${fn.slug}`
 
diff --git a/studio/components/interfaces/Database/Hooks/Hooks.utils.ts b/studio/components/interfaces/Database/Hooks/Hooks.utils.ts
index 75f0d78c39..43e8a40c57 100644
--- a/studio/components/interfaces/Database/Hooks/Hooks.utils.ts
+++ b/studio/components/interfaces/Database/Hooks/Hooks.utils.ts
@@ -28,13 +28,3 @@ export const convertKeyValue = (value: string) => {
 export const hasWhitespace = (value: string) => {
   return /\s/.test(value)
 }
-
-export const isValidHttpUrl = (value: string) => {
-  let url: URL
-  try {
-    url = new URL(value)
-  } catch (_) {
-    return false
-  }
-  return url.protocol === 'http:' || url.protocol === 'https:'
-}
diff --git a/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx b/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
index c175467218..df502f33d7 100644
--- a/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
+++ b/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
@@ -1,32 +1,24 @@
-import Image from 'next/image'
-import { FC } from 'react'
-import { includes } from 'lodash'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Badge, Button, Dropdown, IconMoreVertical, IconTrash, IconEdit3 } from 'ui'
+import { includes, noop } from 'lodash'
+import Image from 'next/image'
 
-import { checkPermissions, useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { BASE_PATH } from 'lib/constants'
-import Table from 'components/to-be-cleaned/Table'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import Table from 'components/to-be-cleaned/Table'
 import { useDatabaseHooks } from 'data/database-triggers/database-triggers-query'
+import { checkPermissions } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
+import { Badge, Button, Dropdown, IconEdit3, IconMoreVertical, IconTrash } from 'ui'
 
-interface Props {
+export interface HookListProps {
   schema: string
   filterString: string
   editHook: (hook: any) => void
   deleteHook: (hook: any) => void
 }
 
-const HookList: FC<Props> = ({
-  schema,
-  filterString,
-  editHook = () => {},
-  deleteHook = () => {},
-}) => {
-  const { ui } = useStore()
+const HookList = ({ schema, filterString, editHook = noop, deleteHook = noop }: HookListProps) => {
   const { ref } = useParams()
   const { project } = useProjectContext()
   const { data: hooks } = useDatabaseHooks({
@@ -34,7 +26,7 @@ const HookList: FC<Props> = ({
     connectionString: project?.connectionString,
   })
 
-  const restUrl = ui.selectedProject?.restUrl
+  const restUrl = project?.restUrl
   const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
 
   const filteredHooks = (hooks ?? []).filter(
@@ -137,4 +129,4 @@ const HookList: FC<Props> = ({
   )
 }
 
-export default observer(HookList)
+export default HookList
diff --git a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index cea9b1e2fb..4237781074 100644
--- a/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -1,14 +1,13 @@
-import dayjs from 'dayjs'
-import { FC, useState } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { IconCheck, IconClipboard } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
+import { FC, useState } from 'react'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Table from 'components/to-be-cleaned/Table'
 import { EdgeFunctionsResponse } from 'data/edge-functions/edge-functions-query'
+import { IconCheck, IconClipboard } from 'ui'
 
 interface Props {
   function: EdgeFunctionsResponse
@@ -16,12 +15,12 @@ interface Props {
 
 const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
   const router = useRouter()
-  const { ui } = useStore()
   const { ref } = useParams()
   const [isCopied, setIsCopied] = useState(false)
 
+  const { project } = useProjectContext()
   // get the .co or .net TLD from the restUrl
-  const restUrl = ui.selectedProject?.restUrl
+  const restUrl = project?.restUrl
   const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
   const functionUrl = `https://${ref}.supabase.${restUrlTld}/functions/v1/${item.slug}`
 
@@ -103,4 +102,4 @@ const EdgeFunctionsListItem: FC<Props> = ({ function: item }) => {
   )
 }
 
-export default observer(EdgeFunctionsListItem)
+export default EdgeFunctionsListItem
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index a22a0682b9..13ee057ed9 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -1,20 +1,19 @@
-import { FC } from 'react'
-import { Badge, IconLoader, IconPauseCircle } from 'ui'
-
-import { Project } from 'types'
 import CardButton from 'components/ui/CardButton'
 import { PROJECT_STATUS } from 'lib/constants'
+import { Project } from 'types'
+import { Badge, IconLoader, IconPauseCircle } from 'ui'
 
-interface Props {
+export interface ProjectCardProps {
   project: Project
   rewriteHref?: string
 }
 
-const ProjectCard: FC<Props> = ({ project, rewriteHref }) => {
+const ProjectCard = ({ project, rewriteHref }: ProjectCardProps) => {
   const { name, ref: projectRef } = project
   const desc = `${project.cloud_provider} | ${project.region}`
 
-  const isPausing = project.status === PROJECT_STATUS.GOING_DOWN
+  const isPausing =
+    project.status === PROJECT_STATUS.GOING_DOWN || project.status === PROJECT_STATUS.PAUSING
   const isPaused = project.status === PROJECT_STATUS.INACTIVE
   const isRestoring = project.status === PROJECT_STATUS.RESTORING
 
diff --git a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index 4f26eeb077..e4ee9880f3 100644
--- a/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -1,102 +1,64 @@
-import Link from 'next/link'
-import { FC } from 'react'
-import { Badge, Button, IconPlus } from 'ui'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { groupBy } from 'lodash'
 import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+import { Badge, Button, IconPlus } from 'ui'
 
+import AlertError from 'components/ui/AlertError'
+import {
+  OverdueInvoicesResponse,
+  useOverdueInvoicesQuery,
+} from 'data/invoices/invoices-overdue-query'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useCheckPermissions } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
-import { checkPermissions, useStore } from 'hooks'
-import { Organization, Project } from 'types'
 import { makeRandomString } from 'lib/helpers'
+import { Organization, Project, ResponseError } from 'types'
 import ProjectCard from './ProjectCard'
 import ShimmeringCard from './ShimmeringCard'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useOverdueInvoicesQuery } from 'data/invoices/invoices-overdue-query'
 
-interface Props {
+export interface ProjectListProps {
   rewriteHref?: (projectRef: string) => string
 }
 
-const ProjectList: FC<Props> = ({ rewriteHref }) => {
-  const { app, ui } = useStore()
-  const { organizations, projects } = app
-  const { isLoading: isLoadingProjects } = projects
-
+const ProjectList = ({ rewriteHref }: ProjectListProps) => {
+  const { data: organizations } = useOrganizationsQuery()
+  const {
+    data: allProjects,
+    isLoading: isLoadingProjects,
+    isError: isErrorProjects,
+    error: projectsError,
+  } = useProjectsQuery()
+  const {
+    isLoading: _isLoadingPermissions,
+    isError: isErrorPermissions,
+    error: permissionsError,
+  } = usePermissionsQuery()
   const { data: allOverdueInvoices } = useOverdueInvoicesQuery({ enabled: IS_PLATFORM })
-
-  const isLoadingPermissions = IS_PLATFORM ? (ui?.permissions ?? []).length === 0 : false
+  const projectsByOrg = groupBy(allProjects, 'organization_id')
+  const isLoadingPermissions = IS_PLATFORM ? _isLoadingPermissions : false
 
   return (
     <>
-      {organizations.list().map((org: Organization) => {
-        const { id, name, slug, subscription_id } = org
-        const sortedProjects = projects.list(
-          ({ organization_id }: Project) => organization_id == id
-        )
-        const isEmpty = sortedProjects?.length == 0
-        const canReadProjects = checkPermissions(PermissionAction.READ, 'projects', undefined, id)
-
-        const overdueInvoices = (allOverdueInvoices || []).filter((it) => it.organization_id === id)
-
+      {organizations?.map((organization) => {
         return (
-          <div className="space-y-3" key={makeRandomString(5)}>
-            <div className="flex space-x-4 items-center">
-              <h4 className="text-lg flex items-center">{name}{subscription_id ? <Badge className='ml-3'>V2</Badge> : <></>}</h4>
-
-              {!!overdueInvoices.length && (
-                <div>
-                  <Link href={`/org/${slug}/invoices`}>
-                    <a>
-                      <Button type="danger">Outstanding Invoices</Button>
-                    </a>
-                  </Link>
-                </div>
-              )}
-            </div>
-
-            {isLoadingPermissions || 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>
-            ) : (
-              <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">
-                {!canReadProjects ? (
-                  <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 py-8 px-6 text-center">
-                    <div className="space-y-1">
-                      <p>You need additional permissions to view projects from this organization</p>
-                      <p className="text-sm text-scale-1100">
-                        Contact your organization owner or adminstrator for assistance.
-                      </p>
-                    </div>
-                  </div>
-                ) : isEmpty ? (
-                  <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/${slug}`}>
-                        <a>
-                          <Button icon={<IconPlus />}>New Project</Button>
-                        </a>
-                      </Link>
-                    </div>
-                  </div>
-                ) : (
-                  sortedProjects?.map((project: Project) => (
-                    <ProjectCard
-                      key={makeRandomString(5)}
-                      project={project}
-                      rewriteHref={rewriteHref ? rewriteHref(project.ref) : undefined}
-                    />
-                  ))
-                )}
-              </ul>
+          <OrganizationProjects
+            key={organization.id}
+            organization={organization}
+            projects={projectsByOrg[organization.id]}
+            overdueInvoices={(allOverdueInvoices ?? []).filter(
+              (it) => it.organization_id === organization.id
             )}
-          </div>
+            rewriteHref={rewriteHref}
+            isLoadingPermissions={isLoadingPermissions}
+            isErrorPermissions={isErrorPermissions}
+            permissionsError={permissionsError}
+            isLoadingProjects={isLoadingProjects}
+            isErrorProjects={isErrorProjects}
+            projectsError={projectsError}
+          />
         )
       })}
     </>
@@ -104,3 +66,109 @@ const ProjectList: FC<Props> = ({ rewriteHref }) => {
 }
 
 export default observer(ProjectList)
+
+type OrganizationProjectsProps = {
+  organization: Organization
+  projects: Project[]
+  overdueInvoices: OverdueInvoicesResponse[]
+  isLoadingPermissions: boolean
+  isErrorPermissions: boolean
+  permissionsError: ResponseError | null
+  isLoadingProjects: boolean
+  isErrorProjects: boolean
+  projectsError: ResponseError | null
+  rewriteHref?: (projectRef: string) => string
+}
+
+const OrganizationProjects = ({
+  organization: { id, name, slug, subscription_id },
+  projects,
+  overdueInvoices,
+  isLoadingPermissions,
+  isErrorPermissions,
+  permissionsError,
+  isLoadingProjects,
+  isErrorProjects,
+  projectsError,
+  rewriteHref,
+}: OrganizationProjectsProps) => {
+  const isEmpty = !projects || projects.length === 0
+  const canReadProjects = useCheckPermissions(PermissionAction.READ, 'projects', undefined, id)
+
+  return (
+    <div className="space-y-3" key={makeRandomString(5)}>
+      <div className="flex space-x-4 items-center">
+        <h4 className="text-lg flex items-center">
+          {name}
+          {subscription_id ? <Badge className="ml-3">V2</Badge> : <></>}
+        </h4>
+
+        {!!overdueInvoices.length && (
+          <div>
+            <Link href={`/org/${slug}/invoices`}>
+              <a>
+                <Button type="danger">Outstanding Invoices</Button>
+              </a>
+            </Link>
+          </div>
+        )}
+      </div>
+
+      {isLoadingPermissions || 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>
+      ) : (
+        <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">
+          {isErrorPermissions ? (
+            <div className="col-span-3">
+              <AlertError
+                subject="Unable to retrieve permissions for your account"
+                error={permissionsError}
+              />
+            </div>
+          ) : isErrorProjects ? (
+            <div className="col-span-3">
+              <AlertError
+                subject={`Unable to retrieve projects under ${name}`}
+                error={projectsError}
+              />
+            </div>
+          ) : !canReadProjects ? (
+            <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 py-8 px-6 text-center">
+              <div className="space-y-1">
+                <p>You need additional permissions to view projects from this organization</p>
+                <p className="text-sm text-scale-1100">
+                  Contact your organization owner or administrator for assistance.
+                </p>
+              </div>
+            </div>
+          ) : isEmpty ? (
+            <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/${slug}`}>
+                  <a>
+                    <Button icon={<IconPlus />}>New Project</Button>
+                  </a>
+                </Link>
+              </div>
+            </div>
+          ) : (
+            projects?.map((project) => (
+              <ProjectCard
+                key={makeRandomString(5)}
+                project={project}
+                rewriteHref={rewriteHref ? rewriteHref(project.ref) : undefined}
+              />
+            ))
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}
diff --git a/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx b/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
index 010510676a..9a95fc2ee2 100644
--- a/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/BillingAddress/BillingAddress.tsx
@@ -1,25 +1,25 @@
-import { FC, useState } from 'react'
-import { isEqual } from 'lodash'
-import { Dictionary } from 'components/grid'
-import { Form, Input, Button, Listbox } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { isEqual } from 'lodash'
+import { useState } from 'react'
+import { Button, Form, Input, Listbox } from 'ui'
 
-import { checkPermissions, useStore } from 'hooks'
+import NoPermission from 'components/ui/NoPermission'
+import Panel from 'components/ui/Panel'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { patch } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { COUNTRIES } from './BillingAddress.constants'
-import Panel from 'components/ui/Panel'
-import NoPermission from 'components/ui/NoPermission'
 
-interface Props {
+export interface BillingAddressProps {
   loading: boolean
-  address: Dictionary<any>
+  address: { [key: string]: any }
   onAddressUpdated: (address: any) => void
 }
 
-const BillingAddress: FC<Props> = ({ loading, address, onAddressUpdated }) => {
+const BillingAddress = ({ loading, address, onAddressUpdated }: BillingAddressProps) => {
   const { ui } = useStore()
-  const orgSlug = ui.selectedOrganization?.slug ?? ''
+  const selectedOrganization = useSelectedOrganization()
+  const orgSlug = selectedOrganization?.slug ?? ''
   const { city, country, line1, line2, postal_code, state } = address
 
   const canReadBillingAddress = checkPermissions(PermissionAction.BILLING_READ, 'stripe.customer')
diff --git a/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index b5279fd175..7fa6c9c14b 100644
--- a/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -1,16 +1,21 @@
-import { useEffect } from 'react'
-import { Form, Input } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useStore, checkPermissions } from 'hooks'
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+
 import { useParams } from 'common/hooks'
-import { API_URL } from 'lib/constants'
-import { patch } from 'lib/common/fetch'
 import { FormActions, FormPanel, FormSection, FormSectionContent } from 'components/ui/Forms'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { Form, Input } from 'ui'
 
 const BillingEmail = () => {
-  const { app, ui } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const { slug } = useParams()
-  const { name, billing_email } = ui.selectedOrganization ?? {}
+  const selectedOrganization = useSelectedOrganization()
+  const { name, billing_email } = selectedOrganization ?? {}
 
   const formId = 'org-billing-email'
   const initialValues = {
@@ -45,7 +50,7 @@ const BillingEmail = () => {
         initialValues: { billing_email },
       })
 
-      app.onOrgUpdated(response)
+      invalidateOrganizationsQuery(queryClient)
       ui.setNotification({
         category: 'success',
         message: 'Successfully saved settings',
diff --git a/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx b/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx
index 0e700116ef..ca01db97c3 100644
--- a/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/BillingSettings.tsx
@@ -1,25 +1,27 @@
-import { useState, useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
 
-import { Project } from 'types'
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { API_URL } from 'lib/constants'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { checkPermissions, useFlag, useSelectedOrganization, useStore } from 'hooks'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { get } from 'lib/common/fetch'
-
-import ProjectsSummary from './ProjectsSummary'
+import { API_URL } from 'lib/constants'
+import BillingAddress from './BillingAddress/BillingAddress'
+import BillingEmail from './BillingEmail'
 import CreditBalance from './CreditBalance'
 import PaymentMethods from './PaymentMethods'
-import BillingAddress from './BillingAddress/BillingAddress'
+import ProjectsSummary from './ProjectsSummary'
 import TaxID from './TaxID/TaxID'
-import BillingEmail from './BillingEmail'
+import OrganizationBillingMigrationPanel from '../GeneralSettings/OrganizationBillingMigrationPanel'
 
 const BillingSettings = () => {
-  const { app, ui } = useStore()
+  const { ui } = useStore()
   const { slug } = useParams()
 
-  const organization = ui.selectedOrganization
-  const projects = app.projects.list((x: Project) => x.organization_id == organization?.id) || []
+  const organization = useSelectedOrganization()
+  const { data: allProjects } = useProjectsQuery()
+  const projects =
+    allProjects?.filter((project) => project.organization_id === organization?.id) ?? []
 
   const [customer, setCustomer] = useState<any>(null)
   const [isLoadingCustomer, setIsLoadingCustomer] = useState(false)
@@ -39,11 +41,10 @@ const BillingSettings = () => {
       ? customerBalance.toString().replace('-', '')
       : customerBalance
 
-  useEffect(() => {
-    getCustomerProfile()
-    getPaymentMethods()
-    getTaxIds()
-  }, [slug])
+  const orgBillingMigrationEnabled = useFlag('orgBillingMigration')
+  const canMigrateOrganization = checkPermissions(PermissionAction.UPDATE, 'organizations')
+  const selectedOrganization = useSelectedOrganization()
+  const { subscription_id } = selectedOrganization ?? {}
 
   const getCustomerProfile = async () => {
     try {
@@ -93,9 +94,18 @@ const BillingSettings = () => {
     }
   }
 
+  useEffect(() => {
+    getCustomerProfile()
+    getPaymentMethods()
+    getTaxIds()
+  }, [slug])
+
   return (
     <article className="container my-4 max-w-4xl space-y-8">
       <div className="space-y-8">
+        {orgBillingMigrationEnabled && canMigrateOrganization && !subscription_id && (
+          <OrganizationBillingMigrationPanel />
+        )}
         <ProjectsSummary projects={projects} />
         <CreditBalance balance={balance} isCredit={isCredit} isDebt={isDebt} />
         <PaymentMethods
@@ -124,4 +134,4 @@ const BillingSettings = () => {
   )
 }
 
-export default observer(BillingSettings)
+export default BillingSettings
diff --git a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
index c77d8b7fa7..d74754969c 100644
--- a/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/PaymentMethods.tsx
@@ -1,28 +1,28 @@
-import { FC, useState } from 'react'
-import {
-  Dropdown,
-  IconPlus,
-  IconCreditCard,
-  Button,
-  Input,
-  Badge,
-  Modal,
-  Alert,
-  IconMoreHorizontal,
-  IconX,
-} from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useState } from 'react'
+import {
+  Alert,
+  Badge,
+  Button,
+  Dropdown,
+  IconCreditCard,
+  IconMoreHorizontal,
+  IconPlus,
+  IconX,
+  Input,
+  Modal,
+} from 'ui'
 
-import { checkPermissions, useStore } from 'hooks'
-import { delete_, patch } from 'lib/common/fetch'
-import { getURL } from 'lib/helpers'
-import { API_URL, BASE_PATH } from 'lib/constants'
-import Panel from 'components/ui/Panel'
 import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
 import NoPermission from 'components/ui/NoPermission'
+import Panel from 'components/ui/Panel'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
+import { delete_, patch } from 'lib/common/fetch'
+import { API_URL, BASE_PATH } from 'lib/constants'
+import { getURL } from 'lib/helpers'
 
-interface Props {
+export interface PaymentMethodsProps {
   loading: boolean
   defaultPaymentMethod: string
   paymentMethods: any[]
@@ -31,16 +31,17 @@ interface Props {
   onPaymentMethodAdded: () => void
 }
 
-const PaymentMethods: FC<Props> = ({
+const PaymentMethods = ({
   loading,
   defaultPaymentMethod,
   paymentMethods,
   onDefaultMethodUpdated,
   onPaymentMethodsDeleted,
   onPaymentMethodAdded,
-}) => {
+}: PaymentMethodsProps) => {
   const { ui } = useStore()
-  const orgSlug = ui.selectedOrganization?.slug ?? ''
+  const selectedOrganization = useSelectedOrganization()
+  const orgSlug = selectedOrganization?.slug ?? ''
 
   const [selectedMethodForDefault, setSelectedMethodForDefault] = useState<any>()
   const [selectedMethodToDelete, setSelectedMethodToDelete] = useState<any>()
diff --git a/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx b/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
index 02a33a6333..0a7dc257eb 100644
--- a/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/TaxID/TaxID.tsx
@@ -1,18 +1,18 @@
-import { FC, useEffect, useState } from 'react'
-import { isEqual } from 'lodash'
-import { Input, Button, IconPlus, IconX, Listbox } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { isEqual } from 'lodash'
+import { useEffect, useState } from 'react'
+import { Button, IconPlus, IconX, Input, Listbox } from 'ui'
 
-import { checkPermissions, useFlag, useStore } from 'hooks'
-import { uuidv4 } from 'lib/helpers'
-import { post, delete_ } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import Panel from 'components/ui/Panel'
-import { StripeTaxId, TAX_IDS } from './TaxID.constants'
 import NoPermission from 'components/ui/NoPermission'
+import Panel from 'components/ui/Panel'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
+import { delete_, post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { uuidv4 } from 'lib/helpers'
+import { StripeTaxId, TAX_IDS } from './TaxID.constants'
 import { sanitizeTaxID } from './TaxID.utils'
 
-interface Props {
+export interface TaxIDProps {
   loading: boolean
   taxIds: any[]
   onTaxIdsUpdated: (taxIds: any) => void
@@ -21,9 +21,10 @@ interface Props {
 // Stripe recommends to delete tax ids and create new ones to update
 // https://stripe.com/docs/billing/customer/tax-ids
 
-const TaxID: FC<Props> = ({ loading, taxIds, onTaxIdsUpdated }) => {
+const TaxID = ({ loading, taxIds, onTaxIdsUpdated }: TaxIDProps) => {
   const { ui } = useStore()
-  const slug = ui.selectedOrganization?.slug ?? ''
+  const selectedOrganization = useSelectedOrganization()
+  const slug = selectedOrganization?.slug ?? ''
 
   const [isSaving, setIsSaving] = useState(false)
   const [errors, setErrors] = useState<string[]>([])
diff --git a/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx b/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
index c166fad4e7..0f101f4871 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/DeleteOrganizationButton.tsx
@@ -1,18 +1,21 @@
-import { useState, useContext } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { Button, Form, Modal, Input } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { Button, Form, Input, Modal } from 'ui'
 
-import { useStore, checkPermissions } from 'hooks'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
 import { delete_ } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 
-const DeleteOrganizationButton = observer(() => {
+const DeleteOrganizationButton = () => {
   const router = useRouter()
-  const { app, ui } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
 
-  const { slug: orgSlug, name: orgName } = ui.selectedOrganization || {}
+  const selectedOrganization = useSelectedOrganization()
+  const { slug: orgSlug, name: orgName } = selectedOrganization ?? {}
 
   const [isOpen, setIsOpen] = useState(false)
   const [value, setValue] = useState('')
@@ -47,7 +50,7 @@ const DeleteOrganizationButton = observer(() => {
       })
       setSubmitting(false)
     } else {
-      app.onOrgDeleted(ui.selectedOrganization)
+      invalidateOrganizationsQuery(queryClient)
       setSubmitting(false)
       router.push('/')
       ui.setNotification({
@@ -119,6 +122,6 @@ const DeleteOrganizationButton = observer(() => {
       </Modal>
     </>
   )
-})
+}
 
 export default DeleteOrganizationButton
diff --git a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
index 6849fe6a8b..6cc42c3705 100644
--- a/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
+++ b/studio/components/interfaces/Organization/GeneralSettings/GeneralSettings.tsx
@@ -1,16 +1,12 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
+import { observer } from 'mobx-react-lite'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Collapsible, Form, IconChevronRight, IconHelpCircle, Input, Toggle } from 'ui'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { Collapsible, Form, IconChevronRight, Input, Toggle } from 'ui'
 
-import { useStore, checkPermissions, useFlag } from 'hooks'
 import { useParams } from 'common/hooks'
-import { API_URL } from 'lib/constants'
-import { patch } from 'lib/common/fetch'
-
-import OrganizationDeletePanel from './OrganizationDeletePanel'
 import {
   FormActions,
   FormPanel,
@@ -18,12 +14,19 @@ import {
   FormSectionContent,
   FormSectionLabel,
 } from 'components/ui/Forms'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
+import { checkPermissions, useFlag, useSelectedOrganization, useStore } from 'hooks'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import OrganizationDeletePanel from './OrganizationDeletePanel'
 
 const GeneralSettings = () => {
-  const { app, ui } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const { slug } = useParams()
   const [open, setOpen] = useState(false)
-  const { name, opt_in_tags } = ui.selectedOrganization ?? {}
+  const selectedOrganization = useSelectedOrganization()
+  const { name, opt_in_tags } = selectedOrganization ?? {}
 
   const formId = 'org-general-settings'
   const isOptedIntoAi = opt_in_tags?.includes('AI_SQL_GENERATOR_OPT_IN')
@@ -34,7 +37,6 @@ const GeneralSettings = () => {
 
   const canUpdateOrganization = checkPermissions(PermissionAction.UPDATE, 'organizations')
   const canDeleteOrganization = checkPermissions(PermissionAction.UPDATE, 'organizations')
-
   const onUpdateOrganization = async (values: any, { setSubmitting, resetForm }: any) => {
     if (!canUpdateOrganization) {
       return ui.setNotification({
@@ -49,7 +51,7 @@ const GeneralSettings = () => {
     const optInTags = values.isOptedIntoAi ? ['AI_SQL_GENERATOR_OPT_IN'] : []
     const response = await patch(`${API_URL}/organizations/${slug}`, {
       name: values.name,
-      billing_email: ui.selectedOrganization?.billing_email ?? '',
+      billing_email: selectedOrganization?.billing_email ?? '',
       ...(allowCMDKDataOptIn && { opt_in_tags: optInTags }),
     })
 
@@ -60,7 +62,7 @@ const GeneralSettings = () => {
       })
     } else {
       resetForm({ values, initialValues: values })
-      app.onOrgUpdated(response)
+      invalidateOrganizationsQuery(queryClient)
       ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
     }
     setSubmitting(false)
@@ -78,7 +80,7 @@ const GeneralSettings = () => {
           useEffect(() => {
             const values = { name: name ?? '', isOptedIntoAi }
             resetForm({ values, initialValues: values })
-          }, [ui.selectedOrganization?.slug])
+          }, [selectedOrganization?.slug])
 
           return (
             <FormPanel
diff --git a/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx b/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
new file mode 100644
index 0000000000..49024811da
--- /dev/null
+++ b/studio/components/interfaces/Organization/GeneralSettings/MigrateOrganizationBillingButton.tsx
@@ -0,0 +1,289 @@
+import { useState, useEffect, useMemo } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Button, Form, Modal, Listbox, Loading, Alert, IconHelpCircle, Toggle } from 'ui'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+
+import { useStore, checkPermissions, useSelectedOrganization } from 'hooks'
+import { PRICING_TIER_LABELS_ORG } from 'lib/constants'
+import { useOrganizationBillingMigrationMutation } from 'data/organizations/organization-migrate-billing-mutation'
+import { useOrganizationBillingMigrationPreview } from 'data/organizations/organization-migrate-billing-preview-query'
+import Link from 'next/link'
+import SpendCapModal from 'components/interfaces/Billing/SpendCapModal'
+import { useRouter } from 'next/router'
+import InformationBox from 'components/ui/InformationBox'
+
+const MigrateOrganizationBillingButton = observer(() => {
+  const { ui } = useStore()
+  const router = useRouter()
+
+  const organization = useSelectedOrganization()
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [tier, setTier] = useState('')
+  const [showSpendCapHelperModal, setShowSpendCapHelperModal] = useState(false)
+  const [isSpendCapEnabled, setIsSpendCapEnabled] = useState(true)
+
+  const dbTier = useMemo(() => {
+    if (tier === '') return ''
+    if (tier === 'PRO' && !isSpendCapEnabled) {
+      return `tier_payg`
+    } else {
+      return `tier_` + tier.toLocaleLowerCase()
+    }
+  }, [tier, isSpendCapEnabled])
+
+  const { error: migrationError, mutateAsync: migrateBilling } =
+    useOrganizationBillingMigrationMutation()
+
+  const {
+    data: migrationPreviewData,
+    error: migrationPreviewError,
+    isLoading: migrationPreviewIsLoading,
+    remove,
+    refetch: previewMigration,
+  } = useOrganizationBillingMigrationPreview(
+    { tier: dbTier, organizationSlug: organization?.slug },
+    { enabled: false, refetchOnWindowFocus: false }
+  )
+
+  useEffect(() => {
+    if (dbTier) {
+      previewMigration()
+    }
+  }, [dbTier])
+
+  useEffect(() => {
+    if (isOpen) {
+      // reset state
+      setTier('')
+    } else {
+      // Invalidate cache
+      remove()
+    }
+  }, [isOpen])
+
+  const canMigrateOrganization = checkPermissions(PermissionAction.UPDATE, 'organizations')
+
+  const toggle = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const onValidate = (values: any) => {
+    const errors: any = {}
+    if (!values.tier) {
+      errors.tier = 'Please select a plan.'
+    }
+    return errors
+  }
+
+  const onConfirmMigrate = async (values: any, { setSubmitting }: any) => {
+    if (!canMigrateOrganization) {
+      return ui.setNotification({
+        category: 'error',
+        message: 'You do not have the required permissions to migrate this organization',
+      })
+    }
+
+    setSubmitting(true)
+
+    try {
+      await migrateBilling({ organizationSlug: organization?.slug, tier: dbTier })
+      ui.setNotification({
+        message: 'Successfully migrated to organization-level billing',
+        category: 'success',
+        duration: 5000,
+      })
+      router.push('/projects')
+      setIsOpen(false)
+    } catch {
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <>
+      <div>
+        <Button loading={!organization?.slug} onClick={() => setIsOpen(true)} type="primary">
+          Migrate organization
+        </Button>
+      </div>
+      <Modal
+        closable
+        hideFooter
+        size="large"
+        visible={isOpen}
+        onCancel={toggle}
+        header={
+          <div className="flex items-baseline gap-2">
+            <h5 className="text-sm text-scale-1200">Migrate organization</h5>
+          </div>
+        }
+      >
+        <Form
+          validateOnBlur
+          initialValues={{ tier: '', isSpendCapEnabled: true }}
+          onSubmit={onConfirmMigrate}
+          validate={onValidate}
+        >
+          {({ isSubmitting }: { isSubmitting: boolean }) => (
+            <div className="space-y-4 py-3">
+              <Modal.Content>
+                <div className="space-y-2">
+                  <Alert title="About the migration" withIcon variant="info">
+                    <div className="text-sm space-y-2">
+                      <p>
+                        Migrating to new organization-level billing combines subscriptions for all
+                        projects in the organization into a single subscription. This cannot be
+                        reversed.{' '}
+                      </p>
+
+                      <p>
+                        For a detailed breakdown of changes, see{' '}
+                        <Link href="https://www.notion.so/supabase/Organization-Level-Billing-9c159d69375b4af095f0b67881276582?pvs=4">
+                          <a target="_blank" rel="noreferrer" className="underline">
+                            Billing Migration Docs
+                          </a>
+                        </Link>
+                        . To transfer projects to a different organization, visit{' '}
+                        <Link href="/projects/_/settings/general">
+                          <a target="_blank" rel="noreferrer" className="underline">
+                            General settings
+                          </a>
+                        </Link>
+                        .
+                      </p>
+                    </div>
+                  </Alert>
+                </div>
+              </Modal.Content>
+              <Modal.Separator />
+              <Modal.Content>
+                <Listbox
+                  id="tier"
+                  label="Organization Pricing Plan"
+                  layout="horizontal"
+                  value={tier}
+                  onChange={setTier}
+                  className="flex items-center"
+                >
+                  <Listbox.Option label="Select plan" value="" disabled className="hidden">
+                    Select Plan
+                  </Listbox.Option>
+                  {Object.entries(PRICING_TIER_LABELS_ORG).map(([k, v]) => {
+                    return (
+                      <Listbox.Option key={k} label={v} value={k}>
+                        {v}
+                      </Listbox.Option>
+                    )
+                  })}
+                </Listbox>
+
+                <p className="text-sm text-scale-1000 mt-4">
+                  The pricing plan, along with included usage limits will apply to your entire
+                  organization. See{' '}
+                  <a
+                    className="underline"
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://supabase.com/pricing"
+                  >
+                    Pricing
+                  </a>{' '}
+                  for more details. Please contact support if you are an Enterprise customer.
+                </p>
+
+                {tier !== '' && tier !== 'FREE' && (
+                  <div className="my-2 space-y-1 pb-4">
+                    <p className="text-sm text-scale-1000">
+                      Paid plans come with one compute instance included. Additional projects will
+                      at least cost the compute instance hours used (min $7/month). See{' '}
+                      <Link href="https://www.notion.so/supabase/Organization-Level-Billing-9c159d69375b4af095f0b67881276582?pvs=4">
+                        <a target="_blank" rel="noreferrer" className="underline">
+                          Compute Instance Usage Billing
+                        </a>
+                      </Link>{' '}
+                      for more details.
+                    </p>
+                  </div>
+                )}
+                <Modal.Separator />
+                {tier === 'PRO' && (
+                  <div className="mt-4 grid grid-cols-8 gap-8 ">
+                    <div className="space-y-2 col-span-5">
+                      <h4 className="flex items-center gap-4">
+                        Spend Cap{' '}
+                        <IconHelpCircle
+                          size={16}
+                          strokeWidth={1.5}
+                          className="transition opacity-50 cursor-pointer hover:opacity-100"
+                          onClick={() => setShowSpendCapHelperModal(true)}
+                        />
+                      </h4>
+                      <p className="text-sm text-scale-1000">
+                        When enabled, usage is limited to the plan's quota, with restrictions when
+                        limits are exceeded.{' '}
+                      </p>
+                      <p className="text-sm text-scale-1000">
+                        To scale beyond Pro limits without restrictions, disable the spend cap and
+                        pay for over-usage beyond the quota.
+                      </p>
+                    </div>
+
+                    <div className="col-span-3">
+                      <Toggle
+                        id="isSpendCapEnabled"
+                        layout="vertical"
+                        label={
+                          <div className="flex space-x-4">
+                            <span>Enable Spend Cap</span>
+                          </div>
+                        }
+                        checked={isSpendCapEnabled}
+                        onChange={() => setIsSpendCapEnabled(!isSpendCapEnabled)}
+                      />
+                    </div>
+
+                    <SpendCapModal
+                      visible={showSpendCapHelperModal}
+                      onHide={() => setShowSpendCapHelperModal(false)}
+                    />
+                  </div>
+                )}
+              </Modal.Content>
+              <Modal.Content>
+                <Loading active={tier !== '' && migrationPreviewIsLoading}>
+                  {migrationPreviewError && (
+                    <Alert title="Organization cannot be migrated" variant="danger">
+                      <span>{migrationPreviewError.message}</span>
+                    </Alert>
+                  )}
+                </Loading>
+
+                {migrationError && (
+                  <Alert title="Organization cannot be migrated" variant="danger">
+                    <span>{migrationError.message}</span>
+                  </Alert>
+                )}
+              </Modal.Content>
+              <Modal.Content>
+                <Button
+                  block
+                  size="small"
+                  type="primary"
+                  htmlType="submit"
+                  loading={isSubmitting}
+                  disabled={migrationPreviewData === undefined || isSubmitting}
+                >
+                  I understand, migrate this organization
+                </Button>
+              </Modal.Content>
+            </div>
+          )}
+        </Form>
+      </Modal>
+    </>
+  )
+})
+
+export default MigrateOrganizationBillingButton
diff --git a/studio/components/interfaces/Organization/GeneralSettings/OrganizationBillingMigrationPanel.tsx b/studio/components/interfaces/Organization/GeneralSettings/OrganizationBillingMigrationPanel.tsx
new file mode 100644
index 0000000000..b59e528088
--- /dev/null
+++ b/studio/components/interfaces/Organization/GeneralSettings/OrganizationBillingMigrationPanel.tsx
@@ -0,0 +1,49 @@
+import { observer } from 'mobx-react-lite'
+import { Alert, Badge, Button, IconExternalLink, IconTruck } from 'ui'
+
+import Panel from 'components/ui/Panel'
+import MigrateOrganizationBillingButton from './MigrateOrganizationBillingButton'
+import Link from 'next/link'
+
+const OrganizationBillingMigrationPanel = observer(() => {
+  return (
+    <div className="space-y-2">
+      <div className="flex gap-4 items-center">
+        <h4>Organization-level billing</h4>
+        <Badge color="green">
+          <span className="flex gap-2 items-center text-xs uppercase">
+            <IconTruck width={12} /> New
+          </span>
+        </Badge>
+      </div>
+      <p className="text-sm opacity-50">Migrate this project to organization-level billing</p>
+      <Panel>
+        <Panel.Content>
+          <div className="flex justify-between gap-12">
+            <div className="space-y-2">
+              <p className="text-sm text-scale-1100">
+                You will have a single subscription for all projects inside the organization, rather
+                than individual subscriptions per project.
+              </p>
+              <p className="text-sm text-scale-1100">
+                Migrating your organization billing is not reversible.
+              </p>
+            </div>
+            <div className="flex items-center gap-4 ml-12">
+              <Link href="https://www.notion.so/supabase/Organization-Level-Billing-9c159d69375b4af095f0b67881276582?pvs=4">
+                <a target="_blank" rel="noreferrer">
+                  <Button type="default" icon={<IconExternalLink strokeWidth={1.5} />}>
+                    Documentation
+                  </Button>
+                </a>
+              </Link>
+              <MigrateOrganizationBillingButton />
+            </div>
+          </div>
+        </Panel.Content>
+      </Panel>
+    </div>
+  )
+})
+
+export default OrganizationBillingMigrationPanel
diff --git a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index 1fa2fed1ed..80d8403c1b 100644
--- a/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react'
-import { Button, Loading, IconFileText, IconDownload, IconChevronLeft, IconChevronRight } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 
-import { checkPermissions, useStore } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { get, head } from 'lib/common/fetch'
-import Table from 'components/to-be-cleaned/Table'
-import NoPermission from 'components/ui/NoPermission'
 import InvoiceStatusBadge from 'components/interfaces/Billing/InvoiceStatusBadge'
 import { Invoice, InvoiceStatus } from 'components/interfaces/Billing/Invoices.types'
+import Table from 'components/to-be-cleaned/Table'
+import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
+import { get, head } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { Button, IconChevronLeft, IconChevronRight, IconDownload, IconFileText, Loading } from 'ui'
 
 const PAGE_LIMIT = 10
 
@@ -23,7 +23,8 @@ const InvoicesSettings = () => {
   const [count, setCount] = useState(0)
   const [invoices, setInvoices] = useState<Invoice[]>([])
 
-  const { stripe_customer_id, slug } = ui.selectedOrganization ?? {}
+  const selectedOrganization = useSelectedOrganization()
+  const { stripe_customer_id, slug } = selectedOrganization ?? {}
   const offset = (page - 1) * PAGE_LIMIT
 
   const canReadInvoices = checkPermissions(PermissionAction.READ, 'invoices')
diff --git a/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index 12bcbc13e2..a722a30123 100644
--- a/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -1,15 +1,17 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { Button, IconEdit2, IconInfo, Input, Listbox } from 'ui'
-import { useRouter } from 'next/router'
 
-import { API_URL, BASE_PATH, PRICING_TIER_LABELS_ORG } from 'lib/constants'
+import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import type { PaymentMethod } from '@stripe/stripe-js'
+import InformationBox from 'components/ui/InformationBox'
+import Panel from 'components/ui/Panel'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
-import Panel from 'components/ui/Panel'
-import { useElements, useStripe, PaymentElement } from '@stripe/react-stripe-js'
-import type { PaymentMethod } from '@stripe/stripe-js'
+import { API_URL, BASE_PATH, PRICING_TIER_LABELS_ORG } from 'lib/constants'
 import { getURL } from 'lib/helpers'
-import InformationBox from 'components/ui/InformationBox'
 
 const ORG_KIND_TYPES = {
   PERSONAL: 'Personal',
@@ -38,7 +40,8 @@ interface NewOrgFormProps {
  * No org selected yet, create a new one
  */
 const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const router = useRouter()
   const stripe = useStripe()
   const elements = useElements()
@@ -49,7 +52,7 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
   const [newOrgLoading, setNewOrgLoading] = useState(false)
   const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>()
 
-  const [dbPricingTierKey, setDbPricingTierKey] = useState('PRO')
+  const [dbPricingTierKey, setDbPricingTierKey] = useState('FREE')
 
   function validateOrgName(name: any) {
     const value = name ? name.trim() : ''
@@ -72,7 +75,7 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
     setDbPricingTierKey(value)
   }
 
-  async function createOrg(paymentMethodId: string) {
+  async function createOrg(paymentMethodId?: string) {
     const response = await post(
       `${API_URL}/organizations`,
       {
@@ -97,7 +100,7 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
       })
     } else {
       const org = response
-      app.onOrgAdded(org)
+      await invalidateOrganizationsQuery(queryClient)
       router.push(`/new/${org.slug}`)
     }
     setNewOrgLoading(false)
@@ -118,7 +121,9 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
     }
     setNewOrgLoading(true)
 
-    if (!paymentMethod) {
+    if (dbPricingTierKey === 'FREE') {
+      await createOrg()
+    } else if (!paymentMethod) {
       const { error, setupIntent } = await stripe.confirmSetup({
         elements,
         redirect: 'if_required',
@@ -290,41 +295,43 @@ const NewOrgForm = ({ onPaymentMethodReset }: NewOrgFormProps) => {
             </Listbox>
           </Panel.Content>
 
-          <Panel.Content>
-            {paymentMethod?.card !== undefined ? (
-              <div key={paymentMethod.id} className="flex items-center justify-between">
-                <div className="flex items-center space-x-8">
-                  <img
-                    alt="Card"
-                    src={`${BASE_PATH}/img/payment-methods/${paymentMethod.card.brand
-                      .replace(' ', '-')
-                      .toLowerCase()}.png`}
-                    width="32"
-                  />
-                  <Input
-                    readOnly
-                    className="w-64"
-                    size="small"
-                    value={`•••• •••• •••• ${paymentMethod.card.last4}`}
-                  />
-                  <p className="text-sm tabular-nums">
-                    Expires: {paymentMethod.card.exp_month}/{paymentMethod.card.exp_year}
-                  </p>
+          {dbPricingTierKey !== 'FREE' && (
+            <Panel.Content>
+              {paymentMethod?.card !== undefined ? (
+                <div key={paymentMethod.id} className="flex items-center justify-between">
+                  <div className="flex items-center space-x-8">
+                    <img
+                      alt="Card"
+                      src={`${BASE_PATH}/img/payment-methods/${paymentMethod.card.brand
+                        .replace(' ', '-')
+                        .toLowerCase()}.png`}
+                      width="32"
+                    />
+                    <Input
+                      readOnly
+                      className="w-64"
+                      size="small"
+                      value={`•••• •••• •••• ${paymentMethod.card.last4}`}
+                    />
+                    <p className="text-sm tabular-nums">
+                      Expires: {paymentMethod.card.exp_month}/{paymentMethod.card.exp_year}
+                    </p>
+                  </div>
+                  <div>
+                    <Button
+                      type="outline"
+                      icon={<IconEdit2 />}
+                      onClick={() => resetPaymentMethod()}
+                      disabled={newOrgLoading}
+                      className="hover:border-gray-500"
+                    />
+                  </div>
                 </div>
-                <div>
-                  <Button
-                    type="outline"
-                    icon={<IconEdit2 />}
-                    onClick={() => resetPaymentMethod()}
-                    disabled={newOrgLoading}
-                    className="hover:border-gray-500"
-                  />
-                </div>
-              </div>
-            ) : (
-              <PaymentElement />
-            )}
-          </Panel.Content>
+              ) : (
+                <PaymentElement />
+              )}
+            </Panel.Content>
+          )}
         </Panel>
       </form>
     </>
diff --git a/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx b/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx
index 7a94402fe1..74ae3d7735 100644
--- a/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/EmptyPaymentMethodWarning.tsx
@@ -1,53 +1,53 @@
 import { useState } from 'react'
-import { observer } from 'mobx-react-lite'
+
+import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
+import InformationBox from 'components/ui/InformationBox'
+import { useSelectedOrganization } from 'hooks'
+import { getURL } from 'lib/helpers'
 import { Button, IconAlertCircle } from 'ui'
 
-import { useStore } from 'hooks'
-import { getURL } from 'lib/helpers'
-import InformationBox from 'components/ui/InformationBox'
-import { AddNewPaymentMethodModal } from 'components/interfaces/Billing'
+const EmptyPaymentMethodWarning = ({
+  onPaymentMethodAdded,
+}: {
+  onPaymentMethodAdded: () => void
+}) => {
+  const selectedOrganization = useSelectedOrganization()
+  const slug = selectedOrganization?.slug
 
-const EmptyPaymentMethodWarning = observer(
-  ({ onPaymentMethodAdded }: { onPaymentMethodAdded: () => void }) => {
-    const { ui } = useStore()
-    const slug = ui.selectedOrganization?.slug
+  const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState<boolean>(false)
 
-    const [showAddPaymentMethodModal, setShowAddPaymentMethodModal] = useState<boolean>(false)
+  const onLocalPaymentMethodAdded = () => {
+    setShowAddPaymentMethodModal(false)
 
-    const onLocalPaymentMethodAdded = () => {
-      setShowAddPaymentMethodModal(false)
-
-      return onPaymentMethodAdded()
-    }
-
-    return (
-      <div className="mt-4">
-        <InformationBox
-          icon={<IconAlertCircle size="large" strokeWidth={1.5} />}
-          defaultVisibility={true}
-          hideCollapse
-          title="Your organization has no payment methods"
-          description={
-            <div className="space-y-3">
-              <p className="text-sm leading-normal">
-                You need to add a payment method for your organization before creating a paid
-                project.
-              </p>
-              <Button type="secondary" onClick={() => setShowAddPaymentMethodModal(true)}>
-                Add a payment method
-              </Button>
-            </div>
-          }
-        />
-        <AddNewPaymentMethodModal
-          visible={showAddPaymentMethodModal}
-          returnUrl={`${getURL()}/new/${slug}`}
-          onCancel={() => setShowAddPaymentMethodModal(false)}
-          onConfirm={() => onLocalPaymentMethodAdded()}
-        />
-      </div>
-    )
+    return onPaymentMethodAdded()
   }
-)
+
+  return (
+    <div className="mt-4">
+      <InformationBox
+        icon={<IconAlertCircle size="large" strokeWidth={1.5} />}
+        defaultVisibility={true}
+        hideCollapse
+        title="Your organization has no payment methods"
+        description={
+          <div className="space-y-3">
+            <p className="text-sm leading-normal">
+              You need to add a payment method for your organization before creating a paid project.
+            </p>
+            <Button type="secondary" onClick={() => setShowAddPaymentMethodModal(true)}>
+              Add a payment method
+            </Button>
+          </div>
+        }
+      />
+      <AddNewPaymentMethodModal
+        visible={showAddPaymentMethodModal}
+        returnUrl={`${getURL()}/new/${slug}`}
+        onCancel={() => setShowAddPaymentMethodModal(false)}
+        onConfirm={() => onLocalPaymentMethodAdded()}
+      />
+    </div>
+  )
+}
 
 export default EmptyPaymentMethodWarning
diff --git a/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx b/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx
index a80724fb25..61bc8a39cf 100644
--- a/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/NotOrganizationOwnerWarning.tsx
@@ -13,7 +13,7 @@ const NotOrganizationOwnerWarning = () => {
         description={
           <div className="space-y-3">
             <p className="text-sm leading-normal">
-              Contact your organization owner or adminstrator to create a new project.
+              Contact your organization owner or administrator to create a new project.
             </p>
           </div>
         }
diff --git a/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx b/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx
new file mode 100644
index 0000000000..16d4edac3f
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx
@@ -0,0 +1,33 @@
+export interface AuthorizeRequesterDetailsProps {
+  icon: string | null
+  name: string
+  domain: string
+}
+
+const AuthorizeRequesterDetails = ({ icon, name, domain }: AuthorizeRequesterDetailsProps) => {
+  return (
+    <div className="flex space-x-4">
+      <div>
+        <div className="flex items-center">
+          <div
+            className="w-14 h-14 md:w-16 md:h-16 bg-center bg-no-repeat bg-cover flex items-center justify-center rounded-md border border-scale-600"
+            style={{
+              backgroundImage: icon !== null ? `url('${icon}')` : 'none',
+            }}
+          >
+            {icon === null && <p className="text-scale-1000 text-lg">{name[0]}</p>}
+          </div>
+        </div>
+      </div>
+      <p className="text-sm text-scale-1100">
+        {name} ({domain}) is requesting API access to an organization. The application will be able
+        to{' '}
+        <span className="text-amber-1200">
+          read and write the organization's settings and all of its projects.
+        </span>
+      </p>
+    </div>
+  )
+}
+
+export default AuthorizeRequesterDetails
diff --git a/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
new file mode 100644
index 0000000000..d8b4360ef6
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
@@ -0,0 +1,57 @@
+import Table from 'components/to-be-cleaned/Table'
+import { AuthorizedApp } from 'data/oauth/authorized-apps-query'
+import dayjs from 'dayjs'
+import { copyToClipboard } from 'lib/helpers'
+import { useState } from 'react'
+import { Button, IconCheck, IconClipboard, IconTrash } from 'ui'
+
+export interface AuthorizedAppRowProps {
+  app: AuthorizedApp
+  onSelectRevoke: () => void
+}
+
+const AuthorizedAppRow = ({ app, onSelectRevoke }: AuthorizedAppRowProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  return (
+    <Table.tr>
+      <Table.td>
+        <div
+          className="w-[30px] h-[30px] rounded-full bg-no-repeat bg-cover bg-center border border-scale-600 flex items-center justify-center"
+          style={{ backgroundImage: app.icon ? `url('${app.icon}')` : 'none' }}
+        >
+          {!!app.icon ? '' : `${app.name[0]}`}
+        </div>
+      </Table.td>
+      <Table.td>{app.name}</Table.td>
+      <Table.td>
+        <span className="font-mono truncate">{app.id}</span>
+        <Button
+          type="default"
+          icon={
+            isCopied ? <IconCheck className="text-brand-900" strokeWidth={3} /> : <IconClipboard />
+          }
+          className="ml-2 px-1"
+          onClick={() => {
+            copyToClipboard(app.id)
+            setIsCopied(true)
+            setTimeout(() => {
+              setIsCopied(false)
+            }, 3000)
+          }}
+        />
+      </Table.td>
+      <Table.td>{dayjs(app.authorized_at).format('DD/MM/YYYY, HH:mm:ss')}</Table.td>
+      <Table.td align="right">
+        <Button
+          type="default"
+          icon={<IconTrash />}
+          className="px-1"
+          onClick={() => onSelectRevoke()}
+        />
+      </Table.td>
+    </Table.tr>
+  )
+}
+
+export default AuthorizedAppRow
diff --git a/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx b/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
new file mode 100644
index 0000000000..d0e3ee7b9e
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
@@ -0,0 +1,72 @@
+import { useParams } from 'common'
+import { useOAuthAppDeleteMutation } from 'data/oauth/oauth-app-delete-mutation'
+import { OAuthApp } from 'data/oauth/oauth-apps-query'
+import { useStore } from 'hooks'
+import { Alert, IconLock, Modal } from 'ui'
+
+export interface DeleteAppModalProps {
+  selectedApp?: OAuthApp
+  onClose: () => void
+}
+
+const DeleteAppModal = ({ selectedApp, onClose }: DeleteAppModalProps) => {
+  const { ui } = useStore()
+  const { slug } = useParams()
+  const { mutateAsync: deleteOAuthApp, isLoading: isDeleting } = useOAuthAppDeleteMutation()
+
+  const onConfirmDelete = async () => {
+    if (!slug) return console.error('Slug is required')
+    if (!selectedApp?.id) return console.error('App ID is required')
+
+    try {
+      await deleteOAuthApp({ slug, id: selectedApp?.id })
+      ui.setNotification({
+        category: 'success',
+        message: `Successfully deleted the app "${selectedApp?.name}"`,
+      })
+      onClose()
+    } catch (error) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to delete OAuth app: ${(error as any).message}`,
+      })
+    }
+  }
+
+  return (
+    <Modal
+      size="medium"
+      alignFooter="right"
+      header={`Confirm to delete ${selectedApp?.name}`}
+      visible={selectedApp !== undefined}
+      loading={isDeleting}
+      onCancel={onClose}
+      onConfirm={onConfirmDelete}
+    >
+      <Modal.Content>
+        <div className="py-4">
+          <Alert withIcon variant="warning" title="This action cannot be undone">
+            Deleting {selectedApp?.name} will invalidate any access tokens from this application
+            that were authorized by users.
+          </Alert>
+          <ul className="mt-4 space-y-5">
+            <li className="flex gap-3 text-sm">
+              <IconLock w={14} className="flex-shrink-0" />
+              <div>
+                <strong>Before you remove this application, consider:</strong>
+                <ul className="space-y-2 mt-2">
+                  <li className="list-disc ml-4">
+                    No users are currently using this application. It will no longer be available
+                    for use after deletion.
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+export default DeleteAppModal
diff --git a/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
new file mode 100644
index 0000000000..52765963ce
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
@@ -0,0 +1,79 @@
+import Table from 'components/to-be-cleaned/Table'
+import { OAuthApp } from 'data/oauth/oauth-apps-query'
+import dayjs from 'dayjs'
+import { copyToClipboard } from 'lib/helpers'
+import { useState } from 'react'
+import {
+  Button,
+  Dropdown,
+  IconCheck,
+  IconClipboard,
+  IconEdit,
+  IconMoreVertical,
+  IconTrash,
+} from 'ui'
+
+export interface OAuthAppRowProps {
+  app: OAuthApp
+  onSelectEdit: () => void
+  onSelectDelete: () => void
+}
+
+const OAuthAppRow = ({ app, onSelectEdit, onSelectDelete }: OAuthAppRowProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+
+  return (
+    <Table.tr>
+      <Table.td>
+        <div
+          className="w-[30px] h-[30px] rounded-full bg-no-repeat bg-cover bg-center border border-scale-600 flex items-center justify-center"
+          style={{ backgroundImage: app.icon ? `url('${app.icon}')` : 'none' }}
+        >
+          {!!app.icon ? '' : `${app.name[0]}`}
+        </div>
+      </Table.td>
+      <Table.td>{app.name}</Table.td>
+      <Table.td>
+        <span className="font-mono truncate">{app.client_id}</span>
+        <Button
+          type="default"
+          icon={
+            isCopied ? <IconCheck className="text-brand-900" strokeWidth={3} /> : <IconClipboard />
+          }
+          className="ml-2 px-1"
+          onClick={() => {
+            copyToClipboard(app.client_id)
+            setIsCopied(true)
+            setTimeout(() => {
+              setIsCopied(false)
+            }, 3000)
+          }}
+        />
+      </Table.td>
+      <Table.td>
+        <span className="font-mono">{app.client_secret_alias}...</span>
+      </Table.td>
+      <Table.td>{dayjs(app.created_at).format('DD/MM/YYYY, HH:mm:ss')}</Table.td>
+      <Table.td align="right">
+        <Dropdown
+          size="tiny"
+          align="end"
+          side="bottom"
+          overlay={[
+            <Dropdown.Item key="edit" icon={<IconEdit />} onClick={() => onSelectEdit()}>
+              Edit app
+            </Dropdown.Item>,
+            <Dropdown.Separator key="separator" />,
+            <Dropdown.Item key="delete" icon={<IconTrash />} onClick={() => onSelectDelete()}>
+              Delete app
+            </Dropdown.Item>,
+          ]}
+        >
+          <Button type="default" icon={<IconMoreVertical />} className="px-1" />
+        </Dropdown>
+      </Table.td>
+    </Table.tr>
+  )
+}
+
+export default OAuthAppRow
diff --git a/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx b/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
new file mode 100644
index 0000000000..416679f43e
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
@@ -0,0 +1,230 @@
+import { useState } from 'react'
+
+import { useParams } from 'common'
+import Table from 'components/to-be-cleaned/Table'
+import AlertError from 'components/ui/AlertError'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { OAuthAppCreateResponse } from 'data/oauth/oauth-app-create-mutation'
+import { OAuthApp, useOAuthAppsQuery } from 'data/oauth/oauth-apps-query'
+import { Alert, Button, IconX, Input } from 'ui'
+import DeleteAppModal from './DeleteAppModal'
+import OAuthAppRow from './OAuthAppRow'
+import PublishAppModal from './PublishAppSidePanel'
+import { AuthorizedApp, useAuthorizedAppsQuery } from 'data/oauth/authorized-apps-query'
+import AuthorizedAppRow from './AuthorizedAppRow'
+import RevokeAppModal from './RevokeAppModal'
+
+// [Joshen] Note on nav UX
+// Kang Ming mentioned that it might be better to split Published Apps and Authorized Apps into 2 separate tabs
+// to prevent any confusion (case study: Github). Authorized apps could be in the "integrations" tab, but let's
+// check in again after we wrap up Vercel integration
+
+const OAuthApps = () => {
+  const { slug } = useParams()
+  const [createdApp, setCreatedApp] = useState<OAuthAppCreateResponse>()
+  const [showPublishModal, setShowPublishModal] = useState(false)
+  const [selectedAppToUpdate, setSelectedAppToUpdate] = useState<OAuthApp>()
+  const [selectedAppToDelete, setSelectedAppToDelete] = useState<OAuthApp>()
+  const [selectedAppToRevoke, setSelectedAppToRevoke] = useState<AuthorizedApp>()
+
+  const {
+    data: publishedApps,
+    isLoading: isLoadingPublishedApps,
+    isSuccess: isSuccessPublishedApps,
+    isError: isErrorPublishedApps,
+  } = useOAuthAppsQuery({ slug })
+
+  const sortedPublishedApps = publishedApps?.sort((a, b) => {
+    return Number(new Date(a.created_at)) - Number(new Date(b.created_at))
+  })
+
+  const {
+    data: authorizedApps,
+    isLoading: isLoadingAuthorizedApps,
+    isSuccess: isSuccessAuthorizedApps,
+    isError: isErrorAuthorizedApps,
+  } = useAuthorizedAppsQuery({ slug })
+
+  const sortedAuthorizedApps = authorizedApps?.sort((a, b) => {
+    return Number(new Date(a.authorized_at)) - Number(new Date(b.authorized_at))
+  })
+
+  return (
+    <>
+      <div className="container my-4 max-w-5xl space-y-8">
+        <div>
+          <div className="flex items-center justify-between">
+            <div>
+              <p>Published Apps</p>
+              <p className="text-scale-1000 text-sm">
+                Build integrations that extend Supabase's functionality
+              </p>
+            </div>
+            <Button type="primary" onClick={() => setShowPublishModal(true)}>
+              Add application
+            </Button>
+          </div>
+
+          <div className="mt-4">
+            {isLoadingPublishedApps && (
+              <div className="space-y-2">
+                <ShimmeringLoader />
+                <ShimmeringLoader className="w-3/4" />
+                <ShimmeringLoader className="w-1/2" />
+              </div>
+            )}
+
+            {isErrorPublishedApps && (
+              <AlertError subject="Unable to retrieve published OAuth apps" />
+            )}
+
+            {createdApp !== undefined && (
+              <Alert withIcon variant="success" title="Successfully published a new application!">
+                <div className="absolute top-4 right-4">
+                  <Button
+                    type="text"
+                    icon={<IconX size={18} />}
+                    className="px-1"
+                    onClick={() => setCreatedApp(undefined)}
+                  />
+                </div>
+                <div className="w-full space-y-4">
+                  <p className="text-sm">
+                    Ensure that you store the client secret securely - you will not be able to see
+                    it again.
+                  </p>
+                  <div className="space-y-4">
+                    <Input
+                      copy
+                      readOnly
+                      size="small"
+                      // layout="horizontal"
+                      label="Client ID"
+                      className="max-w-xl input-mono"
+                      value={createdApp.client_id}
+                      onChange={() => {}}
+                    />
+                    <Input
+                      copy
+                      readOnly
+                      size="small"
+                      // layout="horizontal"
+                      label="Client secret"
+                      className="max-w-xl input-mono"
+                      value={createdApp.client_secret}
+                      onChange={() => {}}
+                    />
+                  </div>
+                </div>
+              </Alert>
+            )}
+
+            {isSuccessPublishedApps && (
+              <>
+                {(publishedApps?.length ?? 0) === 0 ? (
+                  <div className="bg-scale-100 dark:bg-scale-300 border rounded p-4 flex items-center justify-between">
+                    <p className="prose text-sm">You do not have any published applications yet</p>
+                  </div>
+                ) : (
+                  <Table
+                    className="mt-4"
+                    head={[
+                      <Table.th key="icon" className="w-[30px]"></Table.th>,
+                      <Table.th key="name">Name</Table.th>,
+                      <Table.th key="client-id">Client ID</Table.th>,
+                      <Table.th key="client-secret">Client Secret</Table.th>,
+                      <Table.th key="client-secret">Created at</Table.th>,
+                      <Table.th key="delete-action"></Table.th>,
+                    ]}
+                    body={
+                      sortedPublishedApps?.map((app) => (
+                        <OAuthAppRow
+                          key={app.id}
+                          app={app}
+                          onSelectEdit={() => {
+                            setShowPublishModal(true)
+                            setSelectedAppToUpdate(app)
+                          }}
+                          onSelectDelete={() => setSelectedAppToDelete(app)}
+                        />
+                      )) ?? []
+                    }
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <p>Authorized Apps</p>
+          <p className="text-scale-1000 text-sm">
+            Applications that have access to your organization's settings and projects
+          </p>
+
+          <div className="mt-4">
+            {isLoadingAuthorizedApps && (
+              <div className="space-y-2">
+                <ShimmeringLoader />
+                <ShimmeringLoader className="w-3/4" />
+                <ShimmeringLoader className="w-1/2" />
+              </div>
+            )}
+
+            {isErrorAuthorizedApps && <AlertError subject="Unable to retrieve authorized apps" />}
+
+            {isSuccessAuthorizedApps && (
+              <>
+                {(authorizedApps.length ?? 0) === 0 ? (
+                  <div className="bg-scale-100 dark:bg-scale-300 border rounded p-4 flex items-center justify-between">
+                    <p className="prose text-sm">You do not have any authorized applications yet</p>
+                  </div>
+                ) : (
+                  <Table
+                    className="mt-4"
+                    head={[
+                      <Table.th key="icon" className="w-[30px]"></Table.th>,
+                      <Table.th key="name">Name</Table.th>,
+                      <Table.th key="id">ID</Table.th>,
+                      <Table.th key="client-secret">Authorized at</Table.th>,
+                      <Table.th key="delete-action"></Table.th>,
+                    ]}
+                    body={
+                      sortedAuthorizedApps?.map((app) => (
+                        <AuthorizedAppRow
+                          key={app.id}
+                          app={app}
+                          onSelectRevoke={() => setSelectedAppToRevoke(app)}
+                        />
+                      )) ?? []
+                    }
+                  />
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <PublishAppModal
+        visible={showPublishModal}
+        selectedApp={selectedAppToUpdate}
+        onClose={() => {
+          setSelectedAppToUpdate(undefined)
+          setShowPublishModal(false)
+        }}
+        onCreateSuccess={setCreatedApp}
+      />
+      <DeleteAppModal
+        selectedApp={selectedAppToDelete}
+        onClose={() => setSelectedAppToDelete(undefined)}
+      />
+      <RevokeAppModal
+        selectedApp={selectedAppToRevoke}
+        onClose={() => setSelectedAppToRevoke(undefined)}
+      />
+    </>
+  )
+}
+
+export default OAuthApps
diff --git a/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel.tsx b/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel.tsx
new file mode 100644
index 0000000000..43eaa6e904
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/PublishAppSidePanel.tsx
@@ -0,0 +1,397 @@
+import clsx from 'clsx'
+import { ChangeEvent, useEffect, useRef, useState } from 'react'
+
+import { useParams } from 'common'
+import {
+  OAuthAppCreateResponse,
+  useOAuthAppCreateMutation,
+} from 'data/oauth/oauth-app-create-mutation'
+import { useOAuthAppUpdateMutation } from 'data/oauth/oauth-app-update-mutation'
+import { OAuthApp } from 'data/oauth/oauth-apps-query'
+import { useStore } from 'hooks'
+import { isValidHttpUrl, uuidv4 } from 'lib/helpers'
+import { Badge, Button, Dropdown, Form, IconEdit, IconUpload, Input, Modal, SidePanel } from 'ui'
+import { uploadAttachment } from 'lib/upload'
+import AuthorizeRequesterDetails from './AuthorizeRequesterDetails'
+
+export interface PublishAppModalProps {
+  visible: boolean
+  selectedApp?: OAuthApp
+  onClose: () => void
+  onCreateSuccess: (app: OAuthAppCreateResponse) => void
+}
+
+const PublishAppModal = ({
+  visible,
+  selectedApp,
+  onClose,
+  onCreateSuccess,
+}: PublishAppModalProps) => {
+  const { ui } = useStore()
+  const { slug } = useParams()
+  const uploadButtonRef = useRef<any>()
+  const { mutateAsync: createOAuthApp } = useOAuthAppCreateMutation()
+  const { mutateAsync: updateOAuthApp } = useOAuthAppUpdateMutation()
+
+  const [showPreview, setShowPreview] = useState(false)
+  const [iconFile, setIconFile] = useState<File>()
+  const [iconUrl, setIconUrl] = useState<string>()
+  const [errors, setErrors] = useState<{ [key: string]: string }>({})
+  const [urls, setUrls] = useState<{ id: string; value: string }[]>([{ id: uuidv4(), value: '' }])
+
+  useEffect(() => {
+    if (visible) {
+      setErrors({})
+      setIconFile(undefined)
+
+      if (selectedApp !== undefined) {
+        setUrls(
+          selectedApp.redirect_uris.map((url) => {
+            return { id: uuidv4(), value: url }
+          })
+        )
+        setIconUrl(selectedApp.icon === null ? undefined : selectedApp.icon)
+      } else {
+        setUrls([{ id: uuidv4(), value: '' }])
+        setIconUrl(undefined)
+      }
+    }
+  }, [visible, selectedApp])
+
+  const onUpdateUrl = (id: string, value: string) => {
+    const updatedUrls = urls.map((url) => {
+      if (url.id === id) return { id, value }
+      else return url
+    })
+    setUrls(updatedUrls)
+    setErrors({})
+  }
+
+  const removeUrl = (id: string) => {
+    const updatedUrls = urls.filter((url) => url.id !== id)
+    setUrls(updatedUrls)
+  }
+
+  const onFileUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    event.persist()
+    const [file] = event.target.files || (event as any).dataTransfer.items
+    setIconFile(file)
+    setIconUrl(URL.createObjectURL(file))
+    event.target.value = ''
+  }
+
+  const validate = (values: any) => {
+    const errors: any = {}
+    if (!values.name) errors.name = 'Please provide a name for your application'
+    if (!values.website) errors.website = 'Please provide a URL for your site'
+    if (!isValidHttpUrl(values.website)) errors.website = 'Please provide a valid URL for your site'
+    return errors
+  }
+
+  const onSubmit = async (values: any, { setSubmitting }: any) => {
+    if (!slug) return console.error('Slug is required')
+
+    const redirect_uris = urls.filter((url) => url.value.length > 0).map((url) => url.value)
+    if (redirect_uris.length === 0) {
+      setSubmitting(false)
+      setErrors({ urls: 'Please provide at least one URL' })
+      return
+    } else {
+      setErrors({})
+    }
+
+    const { name, website } = values
+    const uploadedIconUrl =
+      iconFile !== undefined
+        ? await uploadAttachment('oauth-app-icons', `${slug}/${uuidv4()}.png`, iconFile)
+        : iconUrl
+
+    if (selectedApp === undefined) {
+      // Create application
+      try {
+        const res = await createOAuthApp({
+          slug,
+          name,
+          website,
+          redirect_uris,
+          icon: uploadedIconUrl,
+        })
+        ui.setNotification({
+          category: 'success',
+          message: `Successfully created OAuth app "${name}"!`,
+        })
+        onClose()
+        onCreateSuccess(res)
+      } catch (error: any) {
+        setSubmitting(false)
+        ui.setNotification({
+          category: 'error',
+          message: `Failed to create OAuth app: ${error.message}`,
+        })
+      }
+    } else {
+      // Update application
+      try {
+        await updateOAuthApp({
+          id: selectedApp.id,
+          slug,
+          name,
+          website,
+          redirect_uris,
+          icon: uploadedIconUrl === undefined ? null : uploadedIconUrl,
+        })
+        ui.setNotification({
+          category: 'success',
+          message: `Successfully updated OAuth app "${name}"!`,
+        })
+        onClose()
+      } catch (error: any) {
+        setSubmitting(false)
+        ui.setNotification({
+          category: 'error',
+          message: `Failed to update OAuth app: ${error.message}`,
+        })
+      }
+    }
+  }
+
+  return (
+    <>
+      <SidePanel
+        hideFooter
+        size="large"
+        visible={visible}
+        header={
+          selectedApp !== undefined ? 'Update OAuth application' : 'Publish a new OAuth application'
+        }
+        onCancel={() => onClose()}
+      >
+        <Form
+          validateOnBlur
+          className="h-full"
+          initialValues={{ name: '', website: '' }}
+          validate={validate}
+          onSubmit={onSubmit}
+        >
+          {({
+            isSubmitting,
+            resetForm,
+            values,
+          }: {
+            isSubmitting: boolean
+            resetForm: any
+            values: any
+          }) => {
+            // [Joshen] although this "technically" is breaking the rules of React hooks
+            // it won't error because the hooks are always rendered in the same order
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            useEffect(() => {
+              if (visible && selectedApp !== undefined) {
+                const values = { name: selectedApp.name, website: selectedApp.website }
+                resetForm({ values, initialValues: values })
+              }
+              // eslint-disable-next-line react-hooks/exhaustive-deps
+            }, [visible, selectedApp])
+
+            return (
+              <>
+                <div className="h-full flex flex-col">
+                  <div className="flex-grow">
+                    <SidePanel.Content>
+                      <div className="py-4 flex items-start justify-between gap-10">
+                        <div className="space-y-4 w-full">
+                          <Input
+                            id="name"
+                            label="Application name"
+                            descriptionText={selectedApp?.id && `ID: ${selectedApp.id}`}
+                          />
+                          <Input
+                            id="website"
+                            label="Website URL"
+                            placeholder="https://my-website.com"
+                          />
+                        </div>
+                        <div>
+                          {iconUrl !== undefined ? (
+                            <div
+                              className={clsx(
+                                'shadow transition group relative',
+                                'bg-center bg-cover bg-no-repeat',
+                                'mt-4 mr-4 space-y-2 rounded-full h-[120px] w-[120px] flex flex-col items-center justify-center'
+                              )}
+                              style={{
+                                backgroundImage: iconUrl ? `url("${iconUrl}")` : 'none',
+                              }}
+                            >
+                              <div className="absolute bottom-1 right-1">
+                                <Dropdown
+                                  size="tiny"
+                                  align="end"
+                                  side="bottom"
+                                  overlay={[
+                                    <Dropdown.Item
+                                      key="upload"
+                                      onClick={() => {
+                                        if (uploadButtonRef.current)
+                                          (uploadButtonRef.current as any).click()
+                                      }}
+                                    >
+                                      Upload image
+                                    </Dropdown.Item>,
+                                    <Dropdown.Item
+                                      key="remove"
+                                      onClick={() => {
+                                        setIconFile(undefined)
+                                        setIconUrl(undefined)
+                                      }}
+                                    >
+                                      Remove image
+                                    </Dropdown.Item>,
+                                  ]}
+                                >
+                                  <Button type="default" icon={<IconEdit />} className="px-1" />
+                                </Dropdown>
+                              </div>
+                            </div>
+                          ) : (
+                            <div
+                              className={clsx(
+                                'border border-scale-700 transition opacity-75 hover:opacity-100',
+                                'mt-4 mr-4 space-y-2 rounded-full h-[120px] w-[120px] flex flex-col items-center justify-center cursor-pointer'
+                              )}
+                              onClick={() => {
+                                if (uploadButtonRef.current)
+                                  (uploadButtonRef.current as any).click()
+                              }}
+                            >
+                              <IconUpload size={18} strokeWidth={1.5} className="text-scale-1200" />
+                              <p className="text-xs text-scale-1100">Upload logo</p>
+                            </div>
+                          )}
+                          <input
+                            multiple
+                            type="file"
+                            ref={uploadButtonRef}
+                            className="hidden"
+                            accept="image/png, image/jpeg"
+                            onChange={onFileUpload}
+                          />
+                        </div>
+                      </div>
+                    </SidePanel.Content>
+
+                    <SidePanel.Separator />
+
+                    <SidePanel.Content className="py-4">
+                      <div className="mb-2 flex items-center justify-between">
+                        <div>
+                          <p className="prose text-sm">Authorization callback URLs</p>
+                          <p className="text-sm text-scale-1000">
+                            All URLs must use HTTPS, except for localhost
+                          </p>
+                        </div>
+                        <Button onClick={() => setUrls(urls.concat({ id: uuidv4(), value: '' }))}>
+                          Add URL
+                        </Button>
+                      </div>
+                      <div className="space-y-2 pb-2">
+                        {urls.map((url) => (
+                          <Input
+                            key={url.id}
+                            value={url.value}
+                            onChange={(event) => onUpdateUrl(url.id, event.target.value)}
+                            placeholder="e.g https://my-website.com"
+                            actions={[
+                              urls.length > 1 ? (
+                                <Button
+                                  key="remove-url"
+                                  type="default"
+                                  onClick={() => removeUrl(url.id)}
+                                >
+                                  Remove
+                                </Button>
+                              ) : null,
+                            ]}
+                          />
+                        ))}
+                        {errors.urls && <p className="text-red-900 text-sm">{errors.urls}</p>}
+                      </div>
+                    </SidePanel.Content>
+                    <SidePanel.Separator />
+                  </div>
+
+                  <SidePanel.Separator />
+
+                  <SidePanel.Content>
+                    <div className="pt-2 pb-3 flex items-center justify-between">
+                      <Button
+                        type="default"
+                        onClick={() => setShowPreview(true)}
+                        disabled={values.name.length === 0 || values.website.length === 0}
+                      >
+                        Preview consent for users
+                      </Button>
+                      <div className="flex items-center space-x-2">
+                        <Button type="default" disabled={isSubmitting} onClick={() => onClose()}>
+                          Cancel
+                        </Button>
+                        <Button htmlType="submit" loading={isSubmitting} disabled={isSubmitting}>
+                          Confirm
+                        </Button>
+                      </div>
+                    </div>
+                  </SidePanel.Content>
+                </div>
+
+                <Modal
+                  hideFooter
+                  className="!w-[500px]"
+                  visible={showPreview}
+                  onCancel={() => setShowPreview(false)}
+                >
+                  <Modal.Content>
+                    <div className="pt-4 pb-2 px-2 flex items-center justify-between">
+                      <p>Authorize API access for {values.name}</p>
+                      <Badge color="green">Preview</Badge>
+                    </div>
+                  </Modal.Content>
+                  <Modal.Separator />
+                  <Modal.Content>
+                    <div className="px-2 py-4">
+                      <AuthorizeRequesterDetails
+                        icon={iconUrl || null}
+                        name={values.name}
+                        domain={values.website}
+                      />
+                      <div className="pt-4 space-y-2">
+                        <p className="prose text-sm">
+                          Select an organization to grant API access to
+                        </p>
+                        <div className="border border-scale-600 text-scale-1000 rounded px-4 py-2 text-sm bg-scale-400">
+                          Organizations that you have access to will be listed here
+                        </div>
+                      </div>
+                    </div>
+                  </Modal.Content>
+                  <Modal.Separator />
+                  <Modal.Content>
+                    <div className="pt-2 pb-3 flex items-center justify-between">
+                      <p className="prose text-xs">
+                        This is what your users will see when authorizing with your app
+                      </p>
+                      <Button type="default" onClick={() => setShowPreview(false)}>
+                        Close
+                      </Button>
+                    </div>
+                  </Modal.Content>
+                </Modal>
+              </>
+            )
+          }}
+        </Form>
+      </SidePanel>
+    </>
+  )
+}
+
+export default PublishAppModal
diff --git a/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx b/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
new file mode 100644
index 0000000000..7d49e8d54c
--- /dev/null
+++ b/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
@@ -0,0 +1,73 @@
+import { useParams } from 'common'
+import { useAuthorizedAppRevokeMutation } from 'data/oauth/authorized-app-revoke-mutation'
+import { AuthorizedApp } from 'data/oauth/authorized-apps-query'
+import { useStore } from 'hooks'
+import { Alert, IconAlertOctagon, IconLock, Modal } from 'ui'
+
+export interface RevokeAppModalProps {
+  selectedApp?: AuthorizedApp
+  onClose: () => void
+}
+
+const RevokeAppModal = ({ selectedApp, onClose }: RevokeAppModalProps) => {
+  const { ui } = useStore()
+  const { slug } = useParams()
+  const { mutateAsync: revokeAuthorizedApp, isLoading: isDeleting } =
+    useAuthorizedAppRevokeMutation()
+
+  const onConfirmDelete = async () => {
+    if (!slug) return console.error('Slug is required')
+    if (!selectedApp?.id) return console.error('App ID is required')
+
+    try {
+      await revokeAuthorizedApp({ slug, id: selectedApp?.id })
+      ui.setNotification({
+        category: 'success',
+        message: `Successfully revoked the app "${selectedApp?.name}"`,
+      })
+      onClose()
+    } catch (error) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to revoke app: ${(error as any).message}`,
+      })
+    }
+  }
+
+  return (
+    <Modal
+      size="medium"
+      alignFooter="right"
+      header={`Confirm to revoke ${selectedApp?.name}`}
+      visible={selectedApp !== undefined}
+      loading={isDeleting}
+      onCancel={onClose}
+      onConfirm={onConfirmDelete}
+    >
+      <Modal.Content>
+        <div className="py-4">
+          <Alert withIcon variant="warning" title="This action cannot be undone">
+            {selectedApp?.name} application will no longer have access to your organization's
+            settings and projects.
+          </Alert>
+          <ul className="mt-4 space-y-5">
+            <li className="flex gap-3 text-sm">
+              <IconLock w={14} className="flex-shrink-0" />
+              <div>
+                <strong>Before you remove this app, consider:</strong>
+                <ul className="space-y-2 mt-2">
+                  <li className="list-disc ml-4">
+                    No users are currently using this application. The application will no longer
+                    have access to your organization after being revoked.
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </Modal.Content>
+    </Modal>
+  )
+}
+
+export default RevokeAppModal
diff --git a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index 099999fe0a..0038fdf50e 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -2,18 +2,18 @@ import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { observer } from 'mobx-react-lite'
 import { FC } from 'react'
-import { Button, Dropdown, IconMoreHorizontal, IconTrash } from 'ui'
 
-import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
-import { checkPermissions, useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { Member, Role } from 'types'
-
+import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 import { useOrganizationMemberDeleteMutation } from 'data/organizations/organization-member-delete-mutation'
 import { useOrganizationMemberInviteCreateMutation } from 'data/organizations/organization-member-invite-create-mutation'
 import { useOrganizationMemberInviteDeleteMutation } from 'data/organizations/organization-member-invite-delete-mutation'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { checkPermissions, useSelectedOrganization, useStore } from 'hooks'
+import { Member, Role } from 'types'
+import { Button, Dropdown, IconMoreHorizontal, IconTrash } from 'ui'
 import { isInviteExpired } from '../Organization.utils'
-import { getRolesManagementPermissions } from './TeamSettings.utils'
+import { useGetRolesManagementPermissions } from './TeamSettings.utils'
 
 interface Props {
   member: Member
@@ -23,7 +23,13 @@ interface Props {
 const MemberActions: FC<Props> = ({ member, roles }) => {
   const { ui } = useStore()
   const { slug } = useParams()
-  const { rolesRemovable } = getRolesManagementPermissions(roles)
+  const selectedOrganization = useSelectedOrganization()
+  const { data: permissions } = usePermissionsQuery()
+  const { rolesRemovable } = useGetRolesManagementPermissions(
+    selectedOrganization?.id,
+    roles,
+    permissions ?? []
+  )
 
   const isExpired = isInviteExpired(member?.invited_at ?? '')
   const isPendingInviteAcceptance = member.invited_id
diff --git a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
index 1727cb59ea..1f1335bc84 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -1,23 +1,23 @@
-import Image from 'next/image'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { useState, Fragment } from 'react'
 import { observer } from 'mobx-react-lite'
-import { Badge, Button, Loading, Listbox, IconUser, Modal, IconAlertCircle, IconLoader } from 'ui'
+import Image from 'next/image'
+import { Fragment, useState } from 'react'
 
-import { Member } from 'types'
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import Table from 'components/to-be-cleaned/Table'
-import MemberActions from './MemberActions'
-import RolesHelperModal from './RolesHelperModal/RolesHelperModal'
-import { getRolesManagementPermissions } from './TeamSettings.utils'
-import { isInviteExpired, getUserDisplayName } from '../Organization.utils'
-import { useOrganizationRolesQuery } from 'data/organizations/organization-roles-query'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useOrganizationDetailQuery } from 'data/organizations/organization-detail-query'
 import { useOrganizationMemberUpdateMutation } from 'data/organizations/organization-member-update-mutation'
-import { useProfileQuery } from 'data/profile/profile-query'
+import { useOrganizationRolesQuery } from 'data/organizations/organization-roles-query'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useSelectedOrganization, useStore } from 'hooks'
+import { useProfile } from 'lib/profile'
+import { Member } from 'types'
+import { Badge, Button, IconAlertCircle, IconLoader, IconUser, Listbox, Loading, Modal } from 'ui'
+import { getUserDisplayName, isInviteExpired } from '../Organization.utils'
+import MemberActions from './MemberActions'
+import RolesHelperModal from './RolesHelperModal/RolesHelperModal'
+import { useGetRolesManagementPermissions } from './TeamSettings.utils'
 
 interface SelectedMember extends Member {
   oldRoleId: number
@@ -31,8 +31,10 @@ export interface MembersViewProps {
 const MembersView = ({ searchString }: MembersViewProps) => {
   const { ui } = useStore()
   const { slug } = useParams()
+  const selectedOrganization = useSelectedOrganization()
 
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
+  const { data: permissions } = usePermissionsQuery()
   const { data: detailData, isLoading: isLoadingOrgDetails } = useOrganizationDetailQuery({ slug })
   const { data: rolesData, isLoading: isLoadingRoles } = useOrganizationRolesQuery({ slug })
   const { mutate: updateOrganizationMember, isLoading } = useOrganizationMemberUpdateMutation({
@@ -52,7 +54,11 @@ const MembersView = ({ searchString }: MembersViewProps) => {
 
   const roles = rolesData?.roles ?? []
   const members = detailData?.members ?? []
-  const { rolesAddable, rolesRemovable } = getRolesManagementPermissions(roles)
+  const { rolesAddable, rolesRemovable } = useGetRolesManagementPermissions(
+    selectedOrganization?.id,
+    roles,
+    permissions ?? []
+  )
 
   const [selectedMember, setSelectedMember] = useState<SelectedMember>()
   const [userRoleChangeModalVisible, setUserRoleChangeModalVisible] = useState(false)
diff --git a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
index 7752b2f122..b490d2081c 100644
--- a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -1,34 +1,40 @@
-import { useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Button, Input, IconSearch } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { useState } from 'react'
+import { Button, IconSearch, Input } from 'ui'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { delete_ } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import InviteMemberButton from './InviteMemberButton'
-import MembersView from './MembersView'
-import { getRolesManagementPermissions, hasMultipleOwners } from './TeamSettings.utils'
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
 import { useOrganizationDetailQuery } from 'data/organizations/organization-detail-query'
 import { useOrganizationRolesQuery } from 'data/organizations/organization-roles-query'
-import { useProfileQuery } from 'data/profile/profile-query'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useSelectedOrganization, useStore } from 'hooks'
+import { delete_ } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { useProfile } from 'lib/profile'
+import InviteMemberButton from './InviteMemberButton'
+import MembersView from './MembersView'
+import { hasMultipleOwners, useGetRolesManagementPermissions } from './TeamSettings.utils'
 
 const TeamSettings = () => {
   const { ui } = useStore()
   const { slug } = useParams()
 
-  const { data: profile } = useProfileQuery()
-  const isOwner = ui.selectedOrganization?.is_owner
+  const { profile } = useProfile()
+  const selectedOrganization = useSelectedOrganization()
+  const isOwner = selectedOrganization?.is_owner
 
+  const { data: permissions } = usePermissionsQuery()
   const { data: detailData } = useOrganizationDetailQuery({ slug })
   const { data: rolesData } = useOrganizationRolesQuery({ slug })
 
   const members = detailData?.members ?? []
   const roles = rolesData?.roles ?? []
 
-  const { rolesAddable } = getRolesManagementPermissions(roles)
+  const { rolesAddable } = useGetRolesManagementPermissions(
+    selectedOrganization?.id,
+    roles,
+    permissions ?? []
+  )
 
   const [isLeaving, setIsLeaving] = useState(false)
   const [searchString, setSearchString] = useState('')
@@ -128,4 +134,4 @@ const TeamSettings = () => {
   )
 }
 
-export default observer(TeamSettings)
+export default TeamSettings
diff --git a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.utils.ts b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.utils.ts
index 9651dacc86..a245ffacce 100644
--- a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.utils.ts
+++ b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.utils.ts
@@ -1,23 +1,43 @@
-import { Member, Role } from 'types'
-import { checkPermissions } from 'hooks'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { doPermissionsCheck, useGetPermissions } from 'hooks'
+import { Member, Permission, Role } from 'types'
 
-export const getRolesManagementPermissions = (
-  roles: Role[]
+export const useGetRolesManagementPermissions = (
+  orgId?: number,
+  roles?: Role[],
+  permissions?: Permission[]
 ): { rolesAddable: Number[]; rolesRemovable: Number[] } => {
+  const { permissions: allPermissions, organizationId } = useGetPermissions(
+    permissions,
+    orgId,
+    permissions !== undefined && orgId !== undefined
+  )
+
   const rolesAddable: Number[] = []
   const rolesRemovable: Number[] = []
-  if (!roles) return { rolesAddable, rolesRemovable }
+  if (!roles || !orgId) return { rolesAddable, rolesRemovable }
 
   roles.forEach((role: Role) => {
-    const canAdd = checkPermissions(PermissionAction.CREATE, 'auth.subject_roles', {
-      resource: { role_id: role.id },
-    })
+    const canAdd = doPermissionsCheck(
+      allPermissions,
+      PermissionAction.CREATE,
+      'auth.subject_roles',
+      {
+        resource: { role_id: role.id },
+      },
+      organizationId
+    )
     if (canAdd) rolesAddable.push(role.id)
 
-    const canRemove = checkPermissions(PermissionAction.DELETE, 'auth.subject_roles', {
-      resource: { role_id: role.id },
-    })
+    const canRemove = doPermissionsCheck(
+      allPermissions,
+      PermissionAction.DELETE,
+      'auth.subject_roles',
+      {
+        resource: { role_id: role.id },
+      },
+      organizationId
+    )
     if (canRemove) rolesRemovable.push(role.id)
   })
 
diff --git a/studio/components/interfaces/Organization/index.ts b/studio/components/interfaces/Organization/index.ts
index beee07cbc4..2c02467f0f 100644
--- a/studio/components/interfaces/Organization/index.ts
+++ b/studio/components/interfaces/Organization/index.ts
@@ -3,5 +3,6 @@ import TeamSettings from './TeamSettings/TeamSettings'
 import BillingSettings from './BillingSettings/BillingSettings'
 import InvoicesSettings from './InvoicesSettings/InvoicesSettings'
 import NewOrgForm from './NewOrg/NewOrgForm'
+import OAuthApps from './OAuthApps/OAuthApps'
 
-export { GeneralSettings, TeamSettings, BillingSettings, InvoicesSettings, NewOrgForm }
+export { GeneralSettings, TeamSettings, BillingSettings, InvoicesSettings, NewOrgForm, OAuthApps }
diff --git a/studio/components/interfaces/Reports/Reports.tsx b/studio/components/interfaces/Reports/Reports.tsx
index 5ab137f59b..f08e517394 100644
--- a/studio/components/interfaces/Reports/Reports.tsx
+++ b/studio/components/interfaces/Reports/Reports.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import dayjs from 'dayjs'
 import { groupBy, isNull } from 'lodash'
 import { toJS } from 'mobx'
-import dayjs from 'dayjs'
+import { useEffect, useState } from 'react'
 import {
   Badge,
   Button,
@@ -14,26 +15,25 @@ import {
   IconSave,
   IconSettings,
 } from 'ui'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
-import { uuidv4 } from 'lib/helpers'
-import { METRIC_CATEGORIES, METRICS, TIME_PERIODS_REPORTS } from 'lib/constants'
-import { useProjectContentStore } from 'stores/projectContentStore'
-import Loading from 'components/ui/Loading'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
+import Loading from 'components/ui/Loading'
 import NoPermission from 'components/ui/NoPermission'
+import { useCheckPermissions } from 'hooks'
+import { METRIC_CATEGORIES, METRICS, TIME_PERIODS_REPORTS } from 'lib/constants'
+import { uuidv4 } from 'lib/helpers'
+import { useProfile } from 'lib/profile'
+import { useProjectContentStore } from 'stores/projectContentStore'
 import GridResize from './GridResize'
 import { LAYOUT_COLUMN_COUNT } from './Reports.constants'
-import { useProfileQuery } from 'data/profile/profile-query'
 
 const DEFAULT_CHART_COLUMN_COUNT = 12
 const DEFAULT_CHART_ROW_COUNT = 4
 
 const Reports = () => {
   const { id, ref } = useParams()
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
 
   const [report, setReport] = useState<any>()
 
@@ -46,7 +46,7 @@ const Reports = () => {
   const [endDate, setEndDate] = useState<any>(null)
 
   const contentStore = useProjectContentStore(ref)
-  const canReadReport = checkPermissions(PermissionAction.READ, 'user_content', {
+  const canReadReport = useCheckPermissions(PermissionAction.READ, 'user_content', {
     resource: {
       type: 'report',
       visibility: report?.visibility,
@@ -54,7 +54,7 @@ const Reports = () => {
     },
     subject: { id: profile?.id },
   })
-  const canUpdateReport = checkPermissions(PermissionAction.UPDATE, 'user_content', {
+  const canUpdateReport = useCheckPermissions(PermissionAction.UPDATE, 'user_content', {
     resource: {
       type: 'report',
       visibility: report?.visibility,
diff --git a/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx b/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
index 1aa386bdac..3c729c690d 100644
--- a/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
+++ b/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
@@ -1,29 +1,29 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { partition } from 'lodash'
 import { observer } from 'mobx-react-lite'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import Telemetry from 'lib/telemetry'
-import { checkPermissions, useStore } from 'hooks'
+import { useParams, useTelemetryProps } from 'common'
 import { SQL_TEMPLATES } from 'components/interfaces/SQLEditor/SQLEditor.constants'
-import SQLCard from './SQLCard'
-import { createSqlSnippetSkeleton } from '../SQLEditor.utils'
-import { useTelemetryProps, useParams } from 'common'
-import { useRouter } from 'next/router'
 import { SqlSnippet } from 'data/content/sql-snippets-query'
-import { useProfileQuery } from 'data/profile/profile-query'
-import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { useCheckPermissions, useStore } from 'hooks'
 import { uuidv4 } from 'lib/helpers'
+import { useProfile } from 'lib/profile'
+import Telemetry from 'lib/telemetry'
+import { useRouter } from 'next/router'
+import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { createSqlSnippetSkeleton } from '../SQLEditor.utils'
+import SQLCard from './SQLCard'
 
 const SQLTemplates = observer(() => {
   const { ui } = useStore()
   const { ref } = useParams()
   const router = useRouter()
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
   const [sql, quickStart] = partition(SQL_TEMPLATES, { type: 'template' })
 
   const telemetryProps = useTelemetryProps()
   const snap = useSqlEditorStateSnapshot()
-  const canCreateSQLSnippet = checkPermissions(PermissionAction.CREATE, 'user_content', {
+  const canCreateSQLSnippet = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'sql', owner_id: profile?.id },
     subject: { id: profile?.id },
   })
diff --git a/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
index b9d6b89725..13385ecd93 100644
--- a/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
+++ b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
@@ -1,24 +1,22 @@
-import { FC, useState, useEffect, Fragment } from 'react'
-import { observer } from 'mobx-react-lite'
-import { checkPermissions, useStore } from 'hooks'
-import { pluckObjectFields } from 'lib/helpers'
-import Loading from 'components/ui/Loading'
-import Panel from 'components/ui/Panel'
-import Divider from 'components/ui/Divider'
-import { AutoField } from 'uniforms-bootstrap4'
-import { API_URL } from 'lib/constants'
-import { patch } from 'lib/common/fetch'
-import ToggleField from 'components/to-be-cleaned/forms/ToggleField'
-import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
-import { Input } from 'ui'
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { FC, Fragment, useEffect, useState } from 'react'
+import { AutoField } from 'uniforms-bootstrap4'
 
-interface Props {}
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
+import Divider from 'components/ui/Divider'
+import Panel from 'components/ui/Panel'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { checkPermissions, useStore } from 'hooks'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { pluckObjectFields } from 'lib/helpers'
+import { Input } from 'ui'
 
-const ConnectionPooling: FC<Props> = () => {
-  const { ui, app } = useStore()
-  const projectRef = ui.selectedProject?.ref ?? 'default'
+const ConnectionPooling = () => {
+  const { app } = useStore()
+  const { project } = useProjectContext()
+  const projectRef = project?.ref ?? 'default'
 
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const [poolingConfiguration, setPoolingConfiguration] = useState<any>()
@@ -103,7 +101,7 @@ const ConnectionPooling: FC<Props> = () => {
   )
 }
 
-export default observer(ConnectionPooling)
+export default ConnectionPooling
 
 interface ConfigProps {
   projectRef: string
@@ -122,139 +120,137 @@ interface ConfigProps {
   }
 }
 
-export const PgbouncerConfig: FC<ConfigProps> = observer(
-  ({ projectRef, bouncerInfo, connectionInfo }) => {
-    const { ui } = useStore()
+export const PgbouncerConfig: FC<ConfigProps> = ({ projectRef, bouncerInfo, connectionInfo }) => {
+  const { ui } = useStore()
 
-    const canUpdateConnectionPoolingConfiguration = checkPermissions(
-      PermissionAction.UPDATE,
-      'projects'
-    )
+  const canUpdateConnectionPoolingConfiguration = checkPermissions(
+    PermissionAction.UPDATE,
+    'projects'
+  )
 
-    const [updates, setUpdates] = useState<any>({
-      pool_mode: bouncerInfo.pool_mode || 'transaction',
-      default_pool_size: bouncerInfo.default_pool_size || '',
-      ignore_startup_parameters: bouncerInfo.ignore_startup_parameters || '',
-      pgbouncer_enabled: bouncerInfo.pgbouncer_enabled,
-    })
+  const [updates, setUpdates] = useState<any>({
+    pool_mode: bouncerInfo.pool_mode || 'transaction',
+    default_pool_size: bouncerInfo.default_pool_size || '',
+    ignore_startup_parameters: bouncerInfo.ignore_startup_parameters || '',
+    pgbouncer_enabled: bouncerInfo.pgbouncer_enabled,
+  })
 
-    const updateConfig = async (updatedConfig: any) => {
-      try {
-        const response = await patch(`${API_URL}/projects/${projectRef}/config/pgbouncer`, {
-          pgbouncer_enabled: updatedConfig.pgbouncer_enabled,
-          default_pool_size: updatedConfig.default_pool_size,
-          ignore_startup_parameters: updatedConfig.ignore_startup_parameters,
-          pool_mode: updatedConfig.pool_mode,
-          max_client_conn: updatedConfig.max_client_conn,
-        })
-        if (response.error) {
-          throw response.error
-        } else {
-          setUpdates({ ...response })
-          ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
-        }
-      } catch (error: any) {
-        ui.setNotification({
-          category: 'error',
-          message: `Failed to update config: ${error.message}`,
-        })
+  const updateConfig = async (updatedConfig: any) => {
+    try {
+      const response = await patch(`${API_URL}/projects/${projectRef}/config/pgbouncer`, {
+        pgbouncer_enabled: updatedConfig.pgbouncer_enabled,
+        default_pool_size: updatedConfig.default_pool_size,
+        ignore_startup_parameters: updatedConfig.ignore_startup_parameters,
+        pool_mode: updatedConfig.pool_mode,
+        max_client_conn: updatedConfig.max_client_conn,
+      })
+      if (response.error) {
+        throw response.error
+      } else {
+        setUpdates({ ...response })
+        ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
       }
+    } catch (error: any) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to update config: ${error.message}`,
+      })
     }
-
-    const formSchema = {
-      properties: {
-        pool_mode: {
-          title: 'Pool Mode',
-          type: 'string',
-          options: [
-            {
-              label: 'Transaction',
-              value: 'transaction',
-            },
-            {
-              label: 'Session',
-              value: 'session',
-            },
-          ],
-        },
-        ignore_startup_parameters: {
-          title: 'Ignore Startup Parameters',
-          type: 'string',
-          help: 'Defaults are either blank or "extra_float_digits"',
-        },
-      },
-      required: ['pool_mode'],
-      type: 'object',
-    }
-
-    return (
-      <div>
-        <SchemaFormPanel
-          title="Connection Pooling"
-          schema={formSchema}
-          model={updates}
-          submitLabel="Save"
-          cancelLabel="Cancel"
-          onChangeModel={(model: any) => setUpdates(model)}
-          onSubmit={(model: any) => updateConfig(model)}
-          onReset={() => setUpdates(bouncerInfo)}
-          disabled={!canUpdateConnectionPoolingConfiguration}
-          disabledMessage="You need additional permissions to update connection pooling settings"
-        >
-          <div className="space-y-6 py-4">
-            {bouncerInfo.pgbouncer_enabled && (
-              <>
-                <AutoField
-                  name="pool_mode"
-                  showInlineError
-                  errorMessage="You must select one of the two options"
-                />
-                <div className="!mt-1 flex" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
-                  <p className="text-sm text-scale-900">
-                    Specify when a connection can be returned to the pool. To find out the most
-                    suitable mode for your use case,{' '}
-                    <a
-                      className="text-green-900"
-                      target="_blank"
-                      rel="noreferrer"
-                      href="https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool"
-                    >
-                      click here
-                    </a>
-                    .
-                  </p>
-                </div>
-                <Divider light />
-                <AutoField name="ignore_startup_parameters" />
-              </>
-            )}
-            <Divider light />
-            <Input
-              className="input-mono"
-              layout="horizontal"
-              readOnly
-              copy
-              disabled
-              value={connectionInfo.db_port}
-              label="Port"
-            />
-            <Divider light />
-            <Input
-              className="input-mono"
-              layout="vertical"
-              readOnly
-              copy
-              disabled
-              label="Connection string"
-              value={
-                `postgres://${connectionInfo.db_user}:[YOUR-PASSWORD]@` +
-                `${connectionInfo.db_host}:${connectionInfo.db_port}` +
-                `/${connectionInfo.db_name}`
-              }
-            />
-          </div>
-        </SchemaFormPanel>
-      </div>
-    )
   }
-)
+
+  const formSchema = {
+    properties: {
+      pool_mode: {
+        title: 'Pool Mode',
+        type: 'string',
+        options: [
+          {
+            label: 'Transaction',
+            value: 'transaction',
+          },
+          {
+            label: 'Session',
+            value: 'session',
+          },
+        ],
+      },
+      ignore_startup_parameters: {
+        title: 'Ignore Startup Parameters',
+        type: 'string',
+        help: 'Defaults are either blank or "extra_float_digits"',
+      },
+    },
+    required: ['pool_mode'],
+    type: 'object',
+  }
+
+  return (
+    <div>
+      <SchemaFormPanel
+        title="Connection Pooling"
+        schema={formSchema}
+        model={updates}
+        submitLabel="Save"
+        cancelLabel="Cancel"
+        onChangeModel={(model: any) => setUpdates(model)}
+        onSubmit={(model: any) => updateConfig(model)}
+        onReset={() => setUpdates(bouncerInfo)}
+        disabled={!canUpdateConnectionPoolingConfiguration}
+        disabledMessage="You need additional permissions to update connection pooling settings"
+      >
+        <div className="space-y-6 py-4">
+          {bouncerInfo.pgbouncer_enabled && (
+            <>
+              <AutoField
+                name="pool_mode"
+                showInlineError
+                errorMessage="You must select one of the two options"
+              />
+              <div className="!mt-1 flex" style={{ marginLeft: 'calc(33% + 0.5rem)' }}>
+                <p className="text-sm text-scale-900">
+                  Specify when a connection can be returned to the pool. To find out the most
+                  suitable mode for your use case,{' '}
+                  <a
+                    className="text-green-900"
+                    target="_blank"
+                    rel="noreferrer"
+                    href="https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool"
+                  >
+                    click here
+                  </a>
+                  .
+                </p>
+              </div>
+              <Divider light />
+              <AutoField name="ignore_startup_parameters" />
+            </>
+          )}
+          <Divider light />
+          <Input
+            className="input-mono"
+            layout="horizontal"
+            readOnly
+            copy
+            disabled
+            value={connectionInfo.db_port}
+            label="Port"
+          />
+          <Divider light />
+          <Input
+            className="input-mono"
+            layout="vertical"
+            readOnly
+            copy
+            disabled
+            label="Connection string"
+            value={
+              `postgres://${connectionInfo.db_user}:[YOUR-PASSWORD]@` +
+              `${connectionInfo.db_host}:${connectionInfo.db_port}` +
+              `/${connectionInfo.db_name}`
+            }
+          />
+        </div>
+      </SchemaFormPanel>
+    </div>
+  )
+}
diff --git a/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx b/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
index c3d88b9915..098c514f2f 100644
--- a/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
+++ b/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
@@ -13,6 +13,7 @@ import { API_URL, DEFAULT_MINIMUM_PASSWORD_STRENGTH } from 'lib/constants'
 
 import Panel from 'components/ui/Panel'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
+import { getProjectDetail } from 'data/projects/project-detail-query'
 
 const ResetDbPassword: FC<any> = ({ disabled = false }) => {
   const { ui, app, meta } = useStore()
@@ -65,7 +66,11 @@ const ResetDbPassword: FC<any> = ({ disabled = false }) => {
       setIsUpdatingPassword(true)
       const res = await patch(`${API_URL}/projects/${ref}/db-password`, { password })
       if (!res.error) {
-        await app.projects.fetchDetail(ref, (project) => meta.setProjectDetails(project))
+        const project = await getProjectDetail({ ref })
+        if (project) {
+          meta.setProjectDetails(project)
+        }
+
         ui.setNotification({ category: 'success', message: res.message })
         setShowResetDbPass(false)
       } else {
diff --git a/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
index d43cee3453..1970db5630 100644
--- a/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
+++ b/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconDownload, Toggle, IconLoader, Alert } from 'ui'
+import { Button, IconDownload, Toggle, IconLoader, Alert, IconExternalLink } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { checkPermissions, useStore, useFlag } from 'hooks'
@@ -25,7 +25,11 @@ const SSLConfiguration = () => {
   const sslEnforcement = useFlag('sslEnforcement')
 
   const { data: projectSettings } = useProjectSettingsQuery({ projectRef: ref })
-  const { data: sslEnforcementConfiguration, isLoading } = useSSLEnforcementQuery({
+  const {
+    data: sslEnforcementConfiguration,
+    isLoading,
+    isSuccess,
+  } = useSSLEnforcementQuery({
     projectRef: ref,
   })
   const { mutateAsync: updateSSLEnforcement } = useSSLEnforcementUpdateMutation()
@@ -73,7 +77,7 @@ const SSLConfiguration = () => {
     <div>
       <div className="flex items-center justify-between">
         <FormHeader title="SSL Configuration" description="" />
-        {/* <div className="flex items-center space-x-2 mb-6">
+        <div className="flex items-center space-x-2 mb-6">
           <Link href="https://supabase.com/docs/guides/platform/ssl-enforcement">
             <a target="_blank">
               <Button type="default" icon={<IconExternalLink />}>
@@ -81,10 +85,10 @@ const SSLConfiguration = () => {
               </Button>
             </a>
           </Link>
-        </div> */}
+        </div>
       </div>
       <FormPanel>
-        {sslEnforcement && hasAccessToSSLEnforcement && (
+        {sslEnforcement && (
           <FormSection
             header={
               <FormSectionLabel
@@ -94,7 +98,7 @@ const SSLConfiguration = () => {
                     <p className="text-sm text-scale-1000">
                       Reject non-SSL connections to your database
                     </p>
-                    {!sslEnforcementConfiguration?.appliedSuccessfully && (
+                    {isSuccess && !sslEnforcementConfiguration?.appliedSuccessfully && (
                       <Alert
                         withIcon
                         variant="warning"
@@ -121,11 +125,41 @@ const SSLConfiguration = () => {
                 {(isLoading || isSubmitting) && (
                   <IconLoader className="animate-spin" strokeWidth={1.5} size={16} />
                 )}
-                <Toggle
-                  checked={isEnforced}
-                  disabled={isLoading || isSubmitting || !canUpdateSSLEnforcement}
-                  onChange={toggleSSLEnforcement}
-                />
+                <Tooltip.Root delayDuration={0}>
+                  <Tooltip.Trigger>
+                    <Toggle
+                      checked={isEnforced}
+                      disabled={
+                        isLoading ||
+                        isSubmitting ||
+                        !canUpdateSSLEnforcement ||
+                        !hasAccessToSSLEnforcement
+                      }
+                      onChange={toggleSSLEnforcement}
+                    />
+                  </Tooltip.Trigger>
+                  {(!canUpdateSSLEnforcement || !hasAccessToSSLEnforcement) && (
+                    <Tooltip.Portal>
+                      <Tooltip.Content align="center" 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 w-[250px]',
+                          ].join(' ')}
+                        >
+                          <span className="text-xs text-scale-1200 text-center flex items-center justify-center">
+                            {!canUpdateSSLEnforcement
+                              ? 'You need additional permissions to update SSL enforcement for your project'
+                              : !hasAccessToSSLEnforcement
+                              ? 'Your project does not have access to SSL enforcement'
+                              : ''}
+                          </span>
+                        </div>
+                      </Tooltip.Content>
+                    </Tooltip.Portal>
+                  )}
+                </Tooltip.Root>
               </div>
             </FormSectionContent>
           </FormSection>
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
index e4c254536a..0f5bbc5360 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
@@ -1,29 +1,25 @@
 import Link from 'next/link'
-import { observer } from 'mobx-react-lite'
-import { IconAlertCircle } from 'ui'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { useProjectApiQuery } from 'data/config/project-api-query'
-import {
-  CustomDomainResponse,
-  useCustomDomainsQuery,
-} from 'data/custom-domains/custom-domains-query'
-import Panel from 'components/ui/Panel'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { FormHeader } from 'components/ui/Forms'
+import Panel from 'components/ui/Panel'
 import UpgradeToPro from 'components/ui/UpgradeToPro'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
+import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
+import { IconAlertCircle } from 'ui'
+import CustomDomainActivate from './CustomDomainActivate'
 import CustomDomainDelete from './CustomDomainDelete'
 import CustomDomainVerify from './CustomDomainVerify'
-import CustomDomainActivate from './CustomDomainActivate'
 import CustomDomainsConfigureHostname from './CustomDomainsConfigureHostname'
 import CustomDomainsShimmerLoader from './CustomDomainsShimmerLoader'
-import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 
 const CustomDomainConfig = () => {
-  const { ui } = useStore()
+  const { project } = useProjectContext()
   const { ref } = useParams()
 
-  const tier = ui.selectedProject?.subscription_tier
+  const tier = project?.subscription_tier
   const { isLoading: isSettingsLoading, data: settings } = useProjectApiQuery({
     projectRef: ref,
   })
@@ -103,4 +99,4 @@ const CustomDomainConfig = () => {
   )
 }
 
-export default observer(CustomDomainConfig)
+export default CustomDomainConfig
diff --git a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
index b1fe6d9553..b630039ef3 100644
--- a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectButton.tsx
@@ -1,24 +1,28 @@
-import { FC, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Button, Input } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Button, Input } from 'ui'
 
-import { useStore, checkPermissions } from 'hooks'
-import { API_URL, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
-import { delete_, post } from 'lib/common/fetch'
-import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
 import { CANCELLATION_REASONS } from 'components/interfaces/BillingV2/Billing.constants'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import TextConfirmModal from 'components/ui/Modals/TextConfirmModal'
+import { invalidateProjectsQuery } from 'data/projects/projects-query'
+import { checkPermissions, useStore } from 'hooks'
+import { delete_, post } from 'lib/common/fetch'
+import { API_URL, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 
-interface Props {
+export interface DeleteProjectButtonProps {
   type?: 'danger' | 'default'
 }
 
-const DeleteProjectButton: FC<Props> = ({ type = 'danger' }) => {
+const DeleteProjectButton = ({ type = 'danger' }: DeleteProjectButtonProps) => {
+  const queryClient = useQueryClient()
   const router = useRouter()
-  const { app, ui } = useStore()
+  const { ui } = useStore()
 
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
   const projectRef = project?.ref
   const projectTier = project?.subscription_tier ?? PRICING_TIER_PRODUCT_IDS.FREE
   const isFree = projectTier === PRICING_TIER_PRODUCT_IDS.FREE
@@ -66,7 +70,7 @@ const DeleteProjectButton: FC<Props> = ({ type = 'danger' }) => {
     try {
       const response = await delete_(`${API_URL}/projects/${projectRef}`)
       if (response.error) throw response.error
-      app.onProjectDeleted(response)
+      await invalidateProjectsQuery(queryClient)
       ui.setNotification({ category: 'success', message: `Successfully deleted ${project.name}` })
       router.push(`/projects`)
     } catch (error: any) {
diff --git a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
index 4c8c7267fd..b4afefdac5 100644
--- a/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
+++ b/studio/components/interfaces/Settings/General/DeleteProjectPanel/DeleteProjectPanel.tsx
@@ -1,19 +1,13 @@
-import { FC } from 'react'
-import { Alert } from 'ui'
-
-import { useStore } from 'hooks'
-import Panel from 'components/ui/Panel'
-
-import DeleteProjectButton from './DeleteProjectButton'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { FormHeader } from 'components/ui/Forms'
+import Panel from 'components/ui/Panel'
+import { Alert } from 'ui'
+import DeleteProjectButton from './DeleteProjectButton'
 
-interface Props {}
+const DeleteProjectPanel = () => {
+  const { project } = useProjectContext()
 
-const DeleteProjectPanel: FC<Props> = ({}) => {
-  const { ui } = useStore()
-  const project = ui.selectedProject
-
-  if (project === undefined) return <></>
+  if (project === undefined) return null
 
   return (
     <section>
diff --git a/studio/components/interfaces/Settings/General/General.tsx b/studio/components/interfaces/Settings/General/General.tsx
index 2fce9ce289..a1630be4b4 100644
--- a/studio/components/interfaces/Settings/General/General.tsx
+++ b/studio/components/interfaces/Settings/General/General.tsx
@@ -1,24 +1,25 @@
-import { FC } from 'react'
-import { Form, Input } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { Form, Input } from 'ui'
 
-import { useStore, checkPermissions } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { patch } from 'lib/common/fetch'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import {
+  FormActions,
   FormHeader,
   FormPanel,
-  FormActions,
   FormSection,
-  FormSectionLabel,
   FormSectionContent,
+  FormSectionLabel,
 } from 'components/ui/Forms'
+import { invalidateProjectsQuery } from 'data/projects/projects-query'
+import { checkPermissions, useStore } from 'hooks'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
 
-interface Props {}
-
-const General: FC<Props> = ({}) => {
-  const { app, ui } = useStore()
-  const project = ui.selectedProject
+const General = () => {
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
+  const { project } = useProjectContext()
 
   const formId = 'project-general-settings'
   const initialValues = { name: project?.name ?? '', ref: project?.ref ?? '' }
@@ -37,7 +38,7 @@ const General: FC<Props> = ({}) => {
       const { name } = response
       resetForm({ values: { name }, initialValues: { name } })
 
-      app.onProjectUpdated(response)
+      await invalidateProjectsQuery(queryClient)
       ui.setNotification({
         category: 'success',
         message: 'Successfully saved settings',
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx b/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
index 449c6f1fb1..55f1736fcc 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/PauseProjectButton.tsx
@@ -1,14 +1,17 @@
-import { FC, useState } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
-import { Button, IconPause } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { FC, useState } from 'react'
 
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
+import { setProjectStatus } from 'data/projects/projects-query'
 import { checkPermissions, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
+import { Button, IconPause } from 'ui'
 
 interface Props {
   projectId: number
@@ -16,7 +19,9 @@ interface Props {
 }
 
 const PauseProjectButton: FC<Props> = observer(({ projectRef, projectId }) => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
+  const { project } = useProjectContext()
   const router = useRouter()
   const [loading, setLoading] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
@@ -24,7 +29,7 @@ const PauseProjectButton: FC<Props> = observer(({ projectRef, projectId }) => {
   const openModal = () => setIsModalOpen(true)
   const closeModal = () => setIsModalOpen(false)
 
-  const isPaused = ui?.selectedProject?.status === PROJECT_STATUS.INACTIVE
+  const isPaused = project?.status === PROJECT_STATUS.INACTIVE
   const canPauseProject = checkPermissions(
     PermissionAction.INFRA_EXECUTE,
     'queue_jobs.projects.pause'
@@ -49,8 +54,7 @@ const PauseProjectButton: FC<Props> = observer(({ projectRef, projectId }) => {
       })
       setLoading(false)
     } else {
-      app.onProjectPaused(projectId)
-      app.onProjectStatusUpdated(projectId, PROJECT_STATUS.GOING_DOWN)
+      setProjectStatus(queryClient, projectRef, PROJECT_STATUS.PAUSING)
 
       ui.setNotification({ category: 'success', message: 'Pausing project' })
       router.push(`/project/${projectRef}`)
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
index 0af657cae0..b4ba127f6c 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/ProjectUpgradeAlert/ProjectUpgradeAlert.tsx
@@ -1,30 +1,31 @@
+import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { FC, useState } from 'react'
+import { useState } from 'react'
 import {
   Alert,
   Button,
   Form,
-  Modal,
-  IconPackage,
-  Listbox,
   IconAlertCircle,
   IconExternalLink,
+  IconPackage,
+  Listbox,
+  Modal,
 } from 'ui'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
+import InformationBox from 'components/ui/InformationBox'
+import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-eligibility-query'
+import { setProjectStatus } from 'data/projects/projects-query'
+import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_ADMIN_URL, PROJECT_STATUS } from 'lib/constants'
-import InformationBox from 'components/ui/InformationBox'
 import { BREAKING_CHANGES } from './ProjectUpgradeAlert.constants'
-import { useProjectUpgradeEligibilityQuery } from 'data/config/project-upgrade-eligibility-query'
 
-interface Props {}
-
-const ProjectUpgradeAlert: FC<Props> = ({}) => {
+const ProjectUpgradeAlert = () => {
+  const queryClient = useQueryClient()
   const router = useRouter()
-  const { app, ui } = useStore()
+  const { ui } = useStore()
   const { ref } = useParams()
   const [showUpgradeModal, setShowUpgradeModal] = useState(false)
 
@@ -38,6 +39,14 @@ const ProjectUpgradeAlert: FC<Props> = ({}) => {
   const onConfirmUpgrade = async (values: any, { setSubmitting }: any) => {
     setSubmitting(true)
 
+    if (!ref) {
+      ui.setNotification({
+        category: 'error',
+        message: 'Project ref not found',
+      })
+      return
+    }
+
     const res = await post(`${API_ADMIN_URL}/projects/${ref}/upgrade`, {
       target_version: values.version,
     })
@@ -49,12 +58,9 @@ const ProjectUpgradeAlert: FC<Props> = ({}) => {
       })
       setSubmitting(false)
     } else {
-      const projectId = ui.selectedProject?.id
-      if (projectId !== undefined) {
-        app.onProjectStatusUpdated(projectId, PROJECT_STATUS.UPGRADING)
-        ui.setNotification({ category: 'success', message: 'Upgrading project' })
-        router.push(`/project/${ref}?upgradeInitiated=true`)
-      }
+      setProjectStatus(queryClient, ref, PROJECT_STATUS.UPGRADING)
+      ui.setNotification({ category: 'success', message: 'Upgrading project' })
+      router.push(`/project/${ref}?upgradeInitiated=true`)
     }
   }
 
diff --git a/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx b/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
index 8099afc7b6..c11859ad69 100644
--- a/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
+++ b/studio/components/interfaces/Settings/General/Infrastructure/RestartServerButton.tsx
@@ -1,27 +1,29 @@
-import { FC, useState } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
 import { Button, Dropdown, IconChevronDown } from 'ui'
 
-import { Project } from 'types'
-import { useStore, checkPermissions } from 'hooks'
+import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
+import { setProjectPostgrestStatus } from 'data/projects/projects-query'
+import { checkPermissions, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
+import { Project } from 'types'
 
-interface Props {
+export interface RestartServerButtonProps {
   project: Project
 }
 
-const RestartServerButton: FC<Props> = ({ project }) => {
-  const { ui, app } = useStore()
+const RestartServerButton = ({ project }: RestartServerButtonProps) => {
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const router = useRouter()
   const [loading, setLoading] = useState(false)
   const [serviceToRestart, setServiceToRestart] = useState<'project' | 'database'>()
 
-  const projectId = project.id
   const projectRef = project.ref
   const projectRegion = project.region
 
@@ -69,7 +71,7 @@ const RestartServerButton: FC<Props> = ({ project }) => {
   }
 
   const onRestartSuccess = () => {
-    app.onProjectPostgrestStatusUpdated(projectId, 'OFFLINE')
+    setProjectPostgrestStatus(queryClient, projectRef, 'OFFLINE')
     ui.setNotification({ category: 'success', message: 'Restarting server' })
     router.push(`/project/${projectRef}`)
     setLoading(false)
diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
new file mode 100644
index 0000000000..073260b00d
--- /dev/null
+++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -0,0 +1,358 @@
+import { FC, useEffect, useMemo, useState } from 'react'
+import {
+  Alert,
+  Button,
+  IconAlertCircle,
+  IconLoader,
+  IconShield,
+  IconTool,
+  IconUsers,
+  Listbox,
+  Loading,
+  Modal,
+} from 'ui'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+
+import { useStore, useSelectedProject, useCheckPermissions } from 'hooks'
+import { useProjectTransferPreviewQuery } from 'data/projects/project-transfer-preview-query'
+import { useProjectTransferMutation } from 'data/projects/project-transfer-mutation'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import Link from 'next/link'
+
+const TransferProjectButton: FC<{}> = () => {
+  const { ui } = useStore()
+
+  const project = useSelectedProject()
+  const projectRef = project?.ref
+  const projectOrgId = project?.organization_id
+  const { data: allOrganizations } = useOrganizationsQuery()
+
+  const organizations = (allOrganizations || [])
+    .filter((it) => it.id !== projectOrgId)
+    // Only orgs with org-level subscription
+    .filter((it) => it.subscription_id)
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [selectedOrg, setSelectedOrg] = useState()
+
+  const { error: transferError, mutateAsync: transferProject } = useProjectTransferMutation()
+
+  const {
+    data: transferPreviewData,
+    error: transferPreviewError,
+    isLoading: transferPreviewIsLoading,
+    remove,
+  } = useProjectTransferPreviewQuery(
+    { projectRef, targetOrganizationSlug: selectedOrg },
+    { enabled: !isLoading && isOpen }
+  )
+
+  useEffect(() => {
+    if (isOpen) {
+      // reset state
+      setSelectedOrg(undefined)
+      setIsLoading(false)
+    } else {
+      // Invalidate cache
+      remove()
+    }
+  }, [isOpen])
+
+  const canTransferProject = useCheckPermissions(PermissionAction.UPDATE, 'projects')
+
+  const toggle = () => {
+    setIsOpen(!isOpen)
+  }
+
+  async function handleTransferProject() {
+    if (project === undefined) return
+    if (selectedOrg === undefined) return
+
+    setIsLoading(true)
+
+    try {
+      await transferProject({ projectRef, targetOrganizationSlug: selectedOrg })
+      ui.setNotification({
+        category: 'success',
+
+        duration: 5000,
+        message: `Successfully transferred project ${project?.name}.`,
+      })
+      setIsOpen(false)
+    } catch {
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Tooltip.Root delayDuration={0}>
+        <Tooltip.Trigger>
+          <Button onClick={toggle} type="default" disabled={!canTransferProject}>
+            Transfer project
+          </Button>
+        </Tooltip.Trigger>
+        {!canTransferProject && (
+          <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', // background
+                  'border border-scale-200 ', //border
+                ].join(' ')}
+              >
+                <span className="text-xs text-scale-1200">
+                  You need additional permissions to delete this project
+                </span>
+              </div>
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        )}
+      </Tooltip.Root>
+
+      <Modal
+        closable
+        onCancel={() => toggle()}
+        visible={isOpen}
+        loading={isLoading}
+        size={'xlarge'}
+        header={`Transfer project ${project?.name}`}
+        customFooter={
+          <div className="flex items-center space-x-2 justify-end">
+            <Button type="default" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={() => handleTransferProject()}
+              disabled={
+                !transferPreviewData || !transferPreviewData.valid || isLoading || !selectedOrg
+              }
+            >
+              Transfer Project
+            </Button>
+          </div>
+        }
+      >
+        <div className="space-y-4 py-4 text-scale-1100">
+          <Modal.Content>
+            <p className="text-sm">
+              To transfer projects, the owner must be a member of both the source and target
+              organizations.
+            </p>
+
+            <p className="font-bold mt-6 text-sm">Transferring considerations:</p>
+
+            <ul className="mt-4 space-y-5 text-sm px-4">
+              <li className="flex gap-4">
+                <span className="shrink-0 mt-1">
+                  <IconLoader />
+                </span>
+                <div>
+                  <p className="font-bold">No downtime</p>
+                  <p>There is no downtime or restrictions involved when transferring a project.</p>
+                </div>
+              </li>
+
+              <li className="flex gap-4">
+                <span className="shrink-0 mt-1">
+                  <IconShield />
+                </span>
+                <div>
+                  <p className="font-bold">Permissions</p>
+                  <p>
+                    Depending on your role in the target organization, your level of permissions may
+                    change after transfer.
+                  </p>
+                </div>
+              </li>
+
+              <li className="flex gap-4">
+                <span className="shrink-0 mt-1">
+                  <IconTool w={14} className="flex-shrink-0" />
+                </span>
+                <div>
+                  <p className="font-bold">Features</p>
+                  <p>
+                    Moving your project to an organization with a smaller subscription plan may
+                    result in the loss of certain features (i.e. image transformations).
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </Modal.Content>
+          <Modal.Content>
+            {organizations && (
+              <div className="mt-8 mx-4 border-t pt-4 space-y-2">
+                {organizations.length === 0 ? (
+                  <div className="flex items-center gap-2 bg-scale-400 p-3 text-sm">
+                    <IconAlertCircle /> You do not have any organizations with an organization-level
+                    subscription.
+                  </div>
+                ) : (
+                  <Listbox
+                    label="Select Target Organization"
+                    layout="vertical"
+                    value={selectedOrg}
+                    onChange={(slug) => setSelectedOrg(slug)}
+                    placeholder="Select Organization"
+                  >
+                    <Listbox.Option disabled key="no-results" label="Select Organization" value="">
+                      Select Organization
+                    </Listbox.Option>
+                    {organizations.map((x: any) => (
+                      <Listbox.Option
+                        key={x.id}
+                        label={x.name}
+                        value={x.slug}
+                        addOnBefore={() => <IconUsers />}
+                      >
+                        {x.name}
+                      </Listbox.Option>
+                    ))}
+                  </Listbox>
+                )}
+
+                <p className="text-scale-1000 text-sm">
+                  The target organization needs to use{' '}
+                  <Link href="https://www.notion.so/supabase/Organization-Level-Billing-9c159d69375b4af095f0b67881276582?pvs=4">
+                    <a target="_blank" rel="noreferrer" className="underline">
+                      organization-level-billing
+                    </a>
+                  </Link>
+                  . To migrate an organization to the new billing, head to your{' '}
+                  <Link href="/org/_/billing">
+                    <a target="_blank" rel="noreferrer" className="underline">
+                      organizations billing settings
+                    </a>
+                  </Link>
+                  .
+                </p>
+              </div>
+            )}
+          </Modal.Content>
+
+          <Loading active={selectedOrg !== undefined && transferPreviewIsLoading}>
+            <Modal.Content>
+              <div className="px-4">
+                {transferPreviewData && transferPreviewData.valid && (
+                  <div className="text-sm text-scale-1100 p-4 bg-scale-400">
+                    {transferPreviewData.source_subscription_plan !==
+                    transferPreviewData.target_subscription_plan ? (
+                      <div>
+                        <p>
+                          Your project is currently on the{' '}
+                          {transferPreviewData.source_subscription_plan} plan, whereas the target
+                          organization uses the {transferPreviewData.target_subscription_plan} plan.
+                        </p>
+                      </div>
+                    ) : (
+                      <div>
+                        Your project and the target organization are both on the{' '}
+                        {transferPreviewData.source_subscription_plan} subscription plan.
+                      </div>
+                    )}
+
+                    <div className="my-4">
+                      {transferPreviewData.credits_on_source_organization === 0 ? (
+                        <span>
+                          {' '}
+                          Your current organization won't be granted any prorated credits.
+                        </span>
+                      ) : (
+                        <span>
+                          {' '}
+                          Your current organization will be granted{' '}
+                          <span className="text-brand-900">
+                            ${transferPreviewData.credits_on_source_organization}
+                          </span>{' '}
+                          in credits as proration.
+                        </span>
+                      )}
+                      {transferPreviewData.costs_on_target_organization === 0 ? (
+                        <span>
+                          {' '}
+                          The target organization won't be charged any immediate upfront payment.
+                        </span>
+                      ) : (
+                        <span>
+                          {' '}
+                          The target organization will be billed{' '}
+                          <span className="text-brand-900">
+                            ${transferPreviewData.costs_on_target_organization}
+                          </span>{' '}
+                          immediately to prorate for the remainder of the billing period.
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+                {transferPreviewData && transferPreviewData.warnings.length > 0 && (
+                  <Alert
+                    withIcon
+                    variant="warning"
+                    title="Warnings for project transfer"
+                    className="mt-3"
+                  >
+                    <div className="space-y-1">
+                      {transferPreviewData.warnings.map((warning) => (
+                        <p key={warning.key}>{warning.message}</p>
+                      ))}
+                    </div>
+                  </Alert>
+                )}
+                {transferPreviewData && transferPreviewData.errors.length > 0 && (
+                  <Alert withIcon variant="danger" title="Project cannot be transferred">
+                    <div className="space-y-1">
+                      {transferPreviewData.errors.map((error) => (
+                        <p key={error.key}>{error.message}</p>
+                      ))}
+                    </div>
+                    {transferPreviewData.members_exceeding_free_project_limit.length > 0 && (
+                      <div className="space-y-2">
+                        <p className="text-sm text-scale-1100">
+                          These members have reached their maximum limits for the number of active
+                          Free plan projects within organizations where they are an administrator or
+                          owner:
+                        </p>
+                        <ul className="pl-5 text-sm list-disc text-scale-1100">
+                          {(transferPreviewData.members_exceeding_free_project_limit || []).map(
+                            (member, idx: number) => (
+                              <li key={`member-${idx}`}>
+                                {member.name} (Limit: {member.limit} free projects)
+                              </li>
+                            )
+                          )}
+                        </ul>
+                        <p className="text-sm text-scale-1100">
+                          These members will need to either delete, pause, or upgrade one or more of
+                          their projects before you can downgrade this project.
+                        </p>
+                      </div>
+                    )}
+                  </Alert>
+                )}
+                {transferPreviewError && !transferError && (
+                  <Alert withIcon variant="danger" title="Project cannot be transferred">
+                    <p>{transferPreviewError.message}</p>
+                  </Alert>
+                )}
+                {transferError && (
+                  <Alert withIcon variant="danger" title="Project cannot be transferred">
+                    <p>{transferError.message}</p>
+                  </Alert>
+                )}
+              </div>
+            </Modal.Content>
+          </Loading>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default TransferProjectButton
diff --git a/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
new file mode 100644
index 0000000000..ff8ce40428
--- /dev/null
+++ b/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
@@ -0,0 +1,46 @@
+import { FC } from 'react'
+
+import { useSelectedProject } from 'hooks'
+import Panel from 'components/ui/Panel'
+
+import TransferProjectButton from './TransferProjectButton'
+import { FormHeader } from 'components/ui/Forms'
+import { IconTruck } from 'ui'
+
+interface Props {}
+
+const TransferProjectPanel: FC<Props> = ({}) => {
+  const project = useSelectedProject()
+
+  if (project === undefined) return <></>
+
+  return (
+    <section>
+      <FormHeader
+        title="Transfer Project"
+        description="Transfer your project to a different organization with no downtime."
+      />
+      <Panel>
+        <Panel.Content>
+          <div className="flex justify-between items-center gap-8">
+            <div className="flex space-x-4">
+              <IconTruck className="mt-1" />
+              <div className="space-y-1 xl:max-w-lg">
+                <p className="text-sm">Transfer project to another organization</p>
+                <p className="text-sm text-scale-1100">
+                  To transfer projects, the owner must be a member of both the source and target
+                  organizations.
+                </p>
+              </div>
+            </div>
+            <div>
+              <TransferProjectButton />
+            </div>
+          </div>
+        </Panel.Content>
+      </Panel>
+    </section>
+  )
+}
+
+export default TransferProjectPanel
diff --git a/studio/components/interfaces/Settings/General/index.ts b/studio/components/interfaces/Settings/General/index.ts
index 8ff5b36ea7..ecd3345f01 100644
--- a/studio/components/interfaces/Settings/General/index.ts
+++ b/studio/components/interfaces/Settings/General/index.ts
@@ -3,5 +3,15 @@ import Infrastructure from './Infrastructure/Infrastructure'
 import CustomDomainConfig from './CustomDomainConfig/CustomDomainConfig'
 import DeleteProjectPanel from './DeleteProjectPanel/DeleteProjectPanel'
 import DeleteProjectButton from './DeleteProjectPanel/DeleteProjectButton'
+import TransferProjectButton from './TransferProjectPanel/TransferProjectButton'
+import TransferProjectPanel from './TransferProjectPanel/TransferProjectPanel'
 
-export { General, Infrastructure, CustomDomainConfig, DeleteProjectPanel, DeleteProjectButton }
+export {
+  General,
+  Infrastructure,
+  CustomDomainConfig,
+  DeleteProjectPanel,
+  DeleteProjectButton,
+  TransferProjectPanel,
+  TransferProjectButton,
+}
diff --git a/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/studio/components/interfaces/Settings/Logs/Logs.utils.ts
index 006f78c3ff..f8ff4d249a 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.utils.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.utils.ts
@@ -234,7 +234,7 @@ export const genChartQuery = (
   const where = _genWhereStatement(table, filters)
 
   let joins = 'cross join unnest(t.metadata) as metadata'
-  if (table === LogsTableName.EDGE) {
+  if (table === LogsTableName.EDGE || table === LogsTableName.FN_EDGE) {
     joins += ' \n  cross join unnest(metadata.request) as request'
     joins += ' \n  cross join unnest(metadata.response) as response'
   } else if (table === LogsTableName.POSTGRES) {
diff --git a/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index 3f20bd4a7c..8687e36e43 100644
--- a/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -1,20 +1,20 @@
-import { Button, Dropdown, IconChevronDown, IconPlay, Badge, Popover, Alert } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { Alert, Badge, Button, Dropdown, IconChevronDown, IconPlay, Popover } from 'ui'
 
-import {
-  EXPLORER_DATEPICKER_HELPERS,
-  LogsTableName,
-  LogsWarning,
-  LOGS_SOURCE_DESCRIPTION,
-  LogTemplate,
-} from '.'
-import DatePickers from './Logs.DatePickers'
+import { useCheckPermissions } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
+import { useProfile } from 'lib/profile'
 import Link from 'next/link'
 import React from 'react'
-import { checkPermissions } from 'hooks'
-import { IS_PLATFORM } from 'lib/constants'
-import { useProfileQuery } from 'data/profile/profile-query'
+import {
+  EXPLORER_DATEPICKER_HELPERS,
+  LOGS_SOURCE_DESCRIPTION,
+  LogTemplate,
+  LogsTableName,
+  LogsWarning,
+} from '.'
+import DatePickers from './Logs.DatePickers'
 
 export interface LogsQueryPanelProps {
   templates?: LogTemplate[]
@@ -45,8 +45,8 @@ const LogsQueryPanel = ({
   onDateChange,
   warnings,
 }: LogsQueryPanelProps) => {
-  const { data: profile } = useProfileQuery()
-  const canCreateLogQuery = checkPermissions(PermissionAction.CREATE, 'user_content', {
+  const { profile } = useProfile()
+  const canCreateLogQuery = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'log_sql', owner_id: profile?.id },
     subject: { id: profile?.id },
   })
diff --git a/studio/components/interfaces/SignIn/SignInForm.tsx b/studio/components/interfaces/SignIn/SignInForm.tsx
index d9adb6e4b6..cd8be13472 100644
--- a/studio/components/interfaces/SignIn/SignInForm.tsx
+++ b/studio/components/interfaces/SignIn/SignInForm.tsx
@@ -3,10 +3,12 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useStore } from 'hooks'
 import { usePushNext } from 'hooks/misc/useAutoAuthRedirect'
 import { auth } from 'lib/gotrue'
+import { incrementSignInClicks } from 'lib/local-storage'
 import Link from 'next/link'
 import { useRef, useState } from 'react'
 import { Button, Form, Input } from 'ui'
 import { object, string } from 'yup'
+import * as Sentry from '@sentry/nextjs'
 
 const signInSchema = object({
   email: string().email('Must be a valid email').required('Email is required'),
@@ -33,6 +35,11 @@ const SignInForm = () => {
       token = captchaResponse?.response ?? null
     }
 
+    const signInClicks = incrementSignInClicks()
+    if (signInClicks > 1) {
+      Sentry.captureMessage('Sign in without previous sign out detected')
+    }
+
     const { error } = await auth.signInWithPassword({
       email,
       password,
diff --git a/studio/components/interfaces/SignIn/SignInWithGitHub.tsx b/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
index 091b2ee750..d6cad1da89 100644
--- a/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
+++ b/studio/components/interfaces/SignIn/SignInWithGitHub.tsx
@@ -1,10 +1,22 @@
+import { useState } from 'react'
 import { BASE_PATH } from 'lib/constants'
 import { auth, getReturnToPath } from 'lib/gotrue'
+import { incrementSignInClicks } from 'lib/local-storage'
 import { Button, IconGitHub } from 'ui'
+import * as Sentry from '@sentry/nextjs'
 
 const SignInWithGitHub = () => {
+  const [loading, setLoading] = useState(false)
+
   async function handleGithubSignIn() {
+    setLoading(true)
+
     try {
+      const signInClicks = incrementSignInClicks()
+      if (signInClicks > 1) {
+        Sentry.captureMessage('Sign in without previous sign out detected')
+      }
+
       const { error } = await auth.signInWithOAuth({
         provider: 'github',
         options: {
@@ -18,6 +30,8 @@ const SignInWithGitHub = () => {
       if (error) throw error
     } catch (error) {
       console.error(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -28,6 +42,7 @@ const SignInWithGitHub = () => {
       icon={<IconGitHub width={18} height={18} />}
       size="large"
       type="default"
+      loading={loading}
     >
       Continue with GitHub
     </Button>
diff --git a/studio/components/interfaces/SignIn/SignUpForm.tsx b/studio/components/interfaces/SignIn/SignUpForm.tsx
index b84ae70b19..b206e80e8a 100644
--- a/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -7,6 +7,7 @@ import { useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, BASE_PATH } from 'lib/constants'
 import { passwordSchema } from 'lib/schemas'
+import { resetSignInClicks } from 'lib/local-storage'
 import PasswordConditionsHelper from './PasswordConditionsHelper'
 
 const signUpSchema = passwordSchema.shape({
@@ -33,6 +34,8 @@ const SignUpForm = () => {
       token = captchaResponse?.response ?? null
     }
 
+    resetSignInClicks()
+
     const response = await post(`${API_URL}/signup`, {
       email,
       password,
diff --git a/studio/components/interfaces/Support/SupportForm.tsx b/studio/components/interfaces/Support/SupportForm.tsx
index 9337a56cc6..3bec0ff172 100644
--- a/studio/components/interfaces/Support/SupportForm.tsx
+++ b/studio/components/interfaces/Support/SupportForm.tsx
@@ -1,47 +1,49 @@
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect, useState, FC, ChangeEvent, useRef } from 'react'
+import { CLIENT_LIBRARIES } from 'common/constants'
 import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
+import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import {
   Button,
+  Checkbox,
+  Form,
+  IconAlertCircle,
+  IconExternalLink,
+  IconLoader,
   IconMail,
   IconPlus,
   IconX,
   Input,
   Listbox,
-  Form,
-  IconLoader,
-  IconAlertCircle,
-  IconExternalLink,
-  Checkbox,
 } from 'ui'
-import { CLIENT_LIBRARIES } from 'common/constants'
-
-import { Project } from 'types'
-import { useStore, useFlag } from 'hooks'
-import { post, get } from 'lib/common/fetch'
-import { detectBrowser } from 'lib/helpers'
-import { API_URL, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 
+import { useParams } from 'common'
 import Divider from 'components/ui/Divider'
+import InformationBox from 'components/ui/InformationBox'
 import Connecting from 'components/ui/Loading'
 import MultiSelect from 'components/ui/MultiSelect'
-import InformationBox from 'components/ui/InformationBox'
-import { formatMessage, uploadAttachments } from './SupportForm.utils'
-import { CATEGORY_OPTIONS, SEVERITY_OPTIONS, SERVICE_OPTIONS } from './Support.constants'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useProjectSubscriptionV2Query } from 'data/subscriptions/project-subscription-v2-query'
+import { useFlag, useStore } from 'hooks'
+import useLatest from 'hooks/misc/useLatest'
+import { get, post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { detectBrowser } from 'lib/helpers'
+import { useProfile } from 'lib/profile'
+import { Project } from 'types'
 import DisabledStateForFreeTier from './DisabledStateForFreeTier'
-import { useProfileQuery } from 'data/profile/profile-query'
+import { CATEGORY_OPTIONS, SERVICE_OPTIONS, SEVERITY_OPTIONS } from './Support.constants'
+import { formatMessage, uploadAttachments } from './SupportForm.utils'
 
 const MAX_ATTACHMENTS = 5
 
-interface Props {
+export interface SupportFormProps {
   setSentCategory: (value: string) => void
 }
 
-const SupportForm: FC<Props> = ({ setSentCategory }) => {
-  const { ui, app } = useStore()
-  const router = useRouter()
-  const { ref, subject, category, message } = router.query
+const SupportForm = ({ setSentCategory }: SupportFormProps) => {
+  const { ui } = useStore()
+  const { ref, subject, category, message } = useParams()
 
   const uploadButtonRef = useRef()
   const enableFreeSupport = useFlag('enableFreeSupport')
@@ -49,22 +51,19 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
   const [uploadedDataUrls, setUploadedDataUrls] = useState<string[]>([])
   const [selectedServices, setSelectedServices] = useState<string[]>([])
 
-  // Get all orgs and projects from global store
-  const sortedOrganizations = app.organizations.list()
-  const sortedProjects = app.projects.list()
+  const { data: organizations, isSuccess: isOrganizationsSuccess } = useOrganizationsQuery()
+  // for use in useEffect
+  const organizationsRef = useLatest(organizations)
 
-  const isInitialized = app.projects.isInitialized
+  const { data: allProjects, isSuccess: isProjectsSuccess } = useProjectsQuery()
+  const { data: subscription, isLoading: isLoadingSubscription } = useProjectSubscriptionV2Query({
+    projectRef: ref,
+  })
+
+  const isInitialized = isOrganizationsSuccess && isProjectsSuccess
   const projectDefaults: Partial<Project>[] = [{ ref: 'no-project', name: 'No specific project' }]
 
-  const projects = [...sortedProjects, ...projectDefaults]
-
-  const planNames = {
-    [PRICING_TIER_PRODUCT_IDS.FREE]: 'Free',
-    [PRICING_TIER_PRODUCT_IDS.PRO]: 'Pro',
-    [PRICING_TIER_PRODUCT_IDS.PAYG]: 'Pro',
-    [PRICING_TIER_PRODUCT_IDS.TEAM]: 'Team',
-    [PRICING_TIER_PRODUCT_IDS.ENTERPRISE]: 'Enterprise',
-  }
+  const projects = [...(allProjects ?? []), ...projectDefaults]
 
   useEffect(() => {
     if (!uploadedFiles) return
@@ -76,7 +75,7 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
     }
   }, [uploadedFiles])
 
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
   const respondToEmail = profile?.primary_email ?? 'your email'
 
   if (!isInitialized) {
@@ -87,7 +86,7 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
     )
   }
 
-  const selectedProject = sortedProjects.find((project) => project.ref === ref)
+  const selectedProject = projects.find((project) => project.ref === ref)
   const selectedCategory = CATEGORY_OPTIONS.find((option) => {
     if (option.value.toLowerCase() === ((category as string) ?? '').toLowerCase()) return option
   })
@@ -95,16 +94,16 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
   const initialProjectRef =
     selectedProject !== undefined
       ? selectedProject.ref
-      : sortedProjects.length > 0
-      ? sortedProjects[0].ref
+      : projects.length > 0
+      ? projects[0].ref
       : 'no-project'
   const initialOrganizationSlug =
     initialProjectRef !== 'no-project'
-      ? sortedOrganizations.find((org) => {
-          const project = sortedProjects.find((project) => project.ref === initialProjectRef)
+      ? organizations?.find((org) => {
+          const project = projects.find((project) => project.ref === initialProjectRef)
           return org.id === project?.organization_id
         })?.slug
-      : sortedOrganizations[0]?.slug
+      : organizations?.[0]?.slug
   const initialValues = {
     category: selectedCategory !== undefined ? selectedCategory.value : CATEGORY_OPTIONS[0].value,
     severity: 'Low',
@@ -209,9 +208,7 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
         )
 
         const selectedProject = projects.find((project) => project.ref === values.projectRef)
-        const isFreeProject =
-          (selectedProject?.subscription_tier ?? PRICING_TIER_PRODUCT_IDS.FREE) ===
-          PRICING_TIER_PRODUCT_IDS.FREE
+        const isFreeProject = (subscription?.plan.id ?? 'free') === 'free'
         const isDisabled =
           !enableFreeSupport &&
           isFreeProject &&
@@ -222,13 +219,13 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
           if (values.projectRef === 'no-project') {
-            const updatedValues = { ...values, organizationSlug: sortedOrganizations[0]?.slug }
+            const updatedValues = {
+              ...values,
+              organizationSlug: organizationsRef.current?.[0]?.slug,
+            }
             resetForm({ values: updatedValues, initialValues: updatedValues })
           } else if (selectedProject) {
-            if (!selectedProject.subscription_tier) {
-              app.projects.fetchSubscriptionTier(selectedProject as Project)
-            }
-            const organization = sortedOrganizations.find(
+            const organization = organizationsRef.current?.find(
               (org) => org.id === selectedProject.organization_id
             )
             if (organization) {
@@ -269,9 +266,7 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
               <div className="grid grid-cols-2 gap-4">
                 <Listbox id="projectRef" layout="vertical" label="Which project is affected?">
                   {projects.map((option) => {
-                    const organization = sortedOrganizations.find(
-                      (x) => x.id === option.organization_id
-                    )
+                    const organization = organizations?.find((x) => x.id === option.organization_id)
                     return (
                       <Listbox.Option
                         key={`option-${option.ref}`}
@@ -300,14 +295,12 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
                   })}
                 </Listbox>
               </div>
-              {selectedProject?.subscription_tier ? (
+              {subscription ? (
                 <p className="text-sm text-scale-1000 mt-2">
                   This project is on the{' '}
-                  <span className="text-scale-1100">
-                    {planNames[selectedProject?.subscription_tier]} plan
-                  </span>
+                  <span className="text-scale-1100">{subscription.plan.name} plan</span>
                 </p>
-              ) : selectedProject?.ref !== 'no-project' ? (
+              ) : isLoadingSubscription ? (
                 <div className="flex items-center space-x-2 mt-2">
                   <IconLoader size={14} className="animate-spin" />
                   <p className="text-sm text-scale-1000">Checking project's plan</p>
@@ -317,14 +310,14 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
               )}
             </div>
 
-            {values.projectRef === 'no-project' && sortedOrganizations.length > 0 && (
+            {values.projectRef === 'no-project' && (organizations?.length ?? 0) > 0 && (
               <div className="px-6">
                 <Listbox
                   id="organizationSlug"
                   layout="vertical"
                   label="Which organization is affected?"
                 >
-                  {sortedOrganizations.map((option) => {
+                  {organizations?.map((option) => {
                     return (
                       <Listbox.Option
                         key={`option-${option.slug}`}
@@ -339,7 +332,7 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
               </div>
             )}
 
-            {selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.FREE && (
+            {subscription?.plan.id === 'free' && (
               <div className="px-6">
                 <InformationBox
                   icon={<IconAlertCircle strokeWidth={2} />}
@@ -353,7 +346,9 @@ const SupportForm: FC<Props> = ({ setSentCategory }) => {
                         Enhanced SLAs for support are available on our Enterprise Plan.
                       </p>
                       <div className="flex items-center space-x-2">
-                        <Link href={`/project/${values.projectRef}/settings/billing/subscription?panel=subscriptionPlan`}>
+                        <Link
+                          href={`/project/${values.projectRef}/settings/billing/subscription?panel=subscriptionPlan`}
+                        >
                           <a>
                             <Button>Upgrade project</Button>
                           </a>
diff --git a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index 0472136aba..1bfbcfd4ae 100644
--- a/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -1,32 +1,33 @@
-import { FC } from 'react'
-import Link from 'next/link'
-import { Button, IconAlertCircle, IconCode, IconLock } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import type { PostgresPolicy, PostgresTable } from '@supabase/postgres-meta'
-
-import { useStore, checkPermissions } from 'hooks'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import Link from 'next/link'
 
-interface Props {
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useCheckPermissions, useStore } from 'hooks'
+import { Button, IconAlertCircle, IconCode, IconLock } from 'ui'
+
+export interface GridHeaderActionsProps {
   table: PostgresTable
   apiPreviewPanelOpen: boolean
   setApiPreviewPanelOpen: (apiPreviewPanelOpen: boolean) => void
   refreshDocs: () => void
 }
 
-const GridHeaderActions: FC<Props> = ({
+const GridHeaderActions = ({
   table,
   apiPreviewPanelOpen,
   setApiPreviewPanelOpen,
   refreshDocs,
-}) => {
-  const { ui, meta } = useStore()
-  const projectRef = ui.selectedProject?.ref
+}: GridHeaderActionsProps) => {
+  const { meta } = useStore()
+  const { project } = useProjectContext()
+  const projectRef = project?.ref
   const policies = meta.policies.list((policy: PostgresPolicy) => policy.table_id === table.id)
 
-  const isReadOnly =
-    !checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables') &&
-    !checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'columns')
+  const canSqlWriteTables = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'tables')
+  const canSqlWriteColumns = useCheckPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'columns')
+  const isReadOnly = !canSqlWriteTables && !canSqlWriteColumns
 
   function handlePreviewToggle() {
     setApiPreviewPanelOpen(!apiPreviewPanelOpen)
diff --git a/studio/components/layouts/AccountLayout/AccountLayout.tsx b/studio/components/layouts/AccountLayout/AccountLayout.tsx
index b503f30826..f4b7599e8a 100644
--- a/studio/components/layouts/AccountLayout/AccountLayout.tsx
+++ b/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -1,26 +1,26 @@
 import Head from 'next/head'
-import { FC, ReactNode } from 'react'
 import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
+import { PropsWithChildren } from 'react'
 
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useFlag, useSelectedOrganization, withAuth } from 'hooks'
 import { useSignOut } from 'lib/auth'
-import { useStore, withAuth, useFlag } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
-import WithSidebar from './WithSidebar'
 import { SidebarSection } from './AccountLayout.types'
+import WithSidebar from './WithSidebar'
 
-interface Props {
+export interface AccountLayoutProps {
   title: string
   breadcrumbs: {
     key: string
     label: string
   }[]
-  children: ReactNode
 }
 
-const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
+const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<AccountLayoutProps>) => {
   const router = useRouter()
-  const { app, ui } = useStore()
+  const { data: organizations } = useOrganizationsQuery()
+  const selectedOrganization = useSelectedOrganization()
 
   const ongoingIncident = useFlag('ongoingIncident')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
@@ -32,11 +32,10 @@ const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
     await router.push('/sign-in')
   }
 
-  const organizationsLinks = app.organizations
-    .list()
+  const organizationsLinks = (organizations ?? [])
     .map((organization) => ({
       isActive:
-        router.pathname.startsWith('/org/') && ui.selectedOrganization?.slug === organization.slug,
+        router.pathname.startsWith('/org/') && selectedOrganization?.slug === organization.slug,
       label: organization.name + (organization.subscription_id ? ' (V2)' : ''),
       href: `/org/${organization.slug}/general`,
       key: organization.slug,
@@ -147,6 +146,6 @@ const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
   )
 }
 
-export default withAuth(observer(AccountLayout))
+export default withAuth(AccountLayout)
 
-export const AccountLayoutWithoutAuth = observer(AccountLayout)
+export const AccountLayoutWithoutAuth = AccountLayout
diff --git a/studio/components/layouts/AuthLayout/AuthLayout.tsx b/studio/components/layouts/AuthLayout/AuthLayout.tsx
index 8acef13d52..6ffb607327 100644
--- a/studio/components/layouts/AuthLayout/AuthLayout.tsx
+++ b/studio/components/layouts/AuthLayout/AuthLayout.tsx
@@ -1,22 +1,22 @@
-import { FC, ReactNode, useState, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect, useState } from 'react'
 
-import ProjectLayout from '../'
-import { useStore, withAuth } from 'hooks'
+import { useParams } from 'common'
 import Error from 'components/ui/Error'
 import ProductMenu from 'components/ui/ProductMenu'
+import { useStore, withAuth } from 'hooks'
+import ProjectLayout from '../'
 import { generateAuthMenu } from './AuthLayout.utils'
 
-interface Props {
+export interface AuthLayoutProps {
   title?: string
-  children: ReactNode
 }
 
-const AuthLayout: FC<Props> = ({ title, children }) => {
+const AuthLayout = ({ title, children }: PropsWithChildren<AuthLayoutProps>) => {
   const { ui, meta } = useStore()
   const { isInitialized, isLoading, error } = meta.tables
-  const projectRef = ui.selectedProject?.ref ?? 'default'
+  const { ref: projectRef = 'default' } = useParams()
 
   const router = useRouter()
   const page = router.pathname.split('/')[4]
@@ -24,13 +24,13 @@ const AuthLayout: FC<Props> = ({ title, children }) => {
   const [loaded, setLoaded] = useState<boolean>(isInitialized)
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (ui.selectedProjectRef) {
       meta.policies.load()
       meta.tables.load()
       meta.roles.load()
       meta.schemas.load()
     }
-  }, [ui.selectedProject?.ref])
+  }, [ui.selectedProjectRef])
 
   useEffect(() => {
     if (!isLoading && !loaded) {
diff --git a/studio/components/layouts/BillingLayout.tsx b/studio/components/layouts/BillingLayout.tsx
index 402c8b480e..5404de66c6 100644
--- a/studio/components/layouts/BillingLayout.tsx
+++ b/studio/components/layouts/BillingLayout.tsx
@@ -1,24 +1,22 @@
 import Link from 'next/link'
-import { FC, ReactNode } from 'react'
-import { useStore, withAuth } from 'hooks'
-import { observer } from 'mobx-react-lite'
-import { IconX } from 'ui'
+import { PropsWithChildren } from 'react'
 
 import BaseLayout from 'components/layouts'
+import { useSelectedOrganization, useSelectedProject, withAuth } from 'hooks'
+import { IconX } from 'ui'
 
-interface Props {
-  children: ReactNode
-}
+export interface BillingLayoutProps {}
 
-const BillingLayout: FC<Props> = ({ children }) => {
-  const { ui } = useStore()
+const BillingLayout = ({ children }: PropsWithChildren<BillingLayoutProps>) => {
+  const selectedOrganization = useSelectedOrganization()
+  const selectedProject = useSelectedProject()
 
   return (
     <BaseLayout hideHeader hideIconBar>
       <div className="flex h-full w-full flex-col">
         {/* Header */}
         <div className="flex items-center space-x-4 border-b py-4 px-5 dark:border-dark">
-          <Link href={`/project/${ui.selectedProject?.ref}/settings/billing/subscription`} passHref>
+          <Link href={`/project/${selectedProject?.ref}/settings/billing/subscription`} passHref>
             <a className="text-scale-900 transition-colors hover:text-scale-1200">
               <IconX size={16} strokeWidth={1.5} />
             </a>
@@ -27,7 +25,7 @@ const BillingLayout: FC<Props> = ({ children }) => {
             <h1 className="text-sm text-scale-1200">Customize your plan</h1>
             <div className="h-6 w-px bg-scale-600"></div>
             <div className="flex items-center space-x-3">
-              <p className="text-sm text-scale-1100">{ui.selectedOrganization?.name}</p>
+              <p className="text-sm text-scale-1100">{selectedOrganization?.name}</p>
               <span className="text-scale-800">
                 <svg
                   viewBox="0 0 24 24"
@@ -43,7 +41,7 @@ const BillingLayout: FC<Props> = ({ children }) => {
                   <path d="M16 3.549L7.12 20.600"></path>
                 </svg>
               </span>
-              <p className="text-sm text-scale-1100">{ui.selectedProject?.name}</p>
+              <p className="text-sm text-scale-1100">{selectedProject?.name}</p>
             </div>
           </div>
         </div>
@@ -55,4 +53,4 @@ const BillingLayout: FC<Props> = ({ children }) => {
   )
 }
 
-export default withAuth(observer(BillingLayout))
+export default withAuth(BillingLayout)
diff --git a/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx b/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
index 6c721abe77..aed4e7515c 100644
--- a/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
+++ b/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
@@ -1,26 +1,25 @@
-import { FC, ReactNode, useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect, useState } from 'react'
 
-import { useFlag, useStore, withAuth } from 'hooks'
-import ProjectLayout from '../'
 import Error from 'components/ui/Error'
 import ProductMenu from 'components/ui/ProductMenu'
-import { generateDatabaseMenu } from './DatabaseMenu.utils'
+import { useFlag, useSelectedProject, useStore, withAuth } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
+import ProjectLayout from '../'
+import { generateDatabaseMenu } from './DatabaseMenu.utils'
 
-interface Props {
+export interface DatabaseLayoutProps {
   title?: string
-  children: ReactNode
 }
 
-const DatabaseLayout: FC<Props> = ({ title, children }) => {
-  const { meta, ui, vault, backups } = useStore()
+const DatabaseLayout = ({ title, children }: PropsWithChildren<DatabaseLayoutProps>) => {
+  const { ui, meta, vault, backups } = useStore()
   const { isLoading: isSchemasLoading } = meta.schemas
   const { isLoading: isVaultLoading } = vault
 
   const { isInitialized, error } = meta.tables
-  const project = ui.selectedProject
+  const project = useSelectedProject()
 
   const router = useRouter()
   const page = router.pathname.split('/')[4]
@@ -34,7 +33,7 @@ const DatabaseLayout: FC<Props> = ({ title, children }) => {
   const [loaded, setLoaded] = useState<boolean>(isInitialized)
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (ui.selectedProjectRef) {
       // Eventually should only load the required stores based on the pages
       meta.schemas.load()
       meta.tables.load()
@@ -48,13 +47,13 @@ const DatabaseLayout: FC<Props> = ({ title, children }) => {
         backups.load()
       }
     }
-  }, [ui.selectedProject?.ref])
+  }, [ui.selectedProjectRef])
 
   useEffect(() => {
     if (isVaultEnabled) {
       vault.load()
     }
-  }, [ui.selectedProject?.ref, isVaultEnabled])
+  }, [ui.selectedProjectRef, isVaultEnabled])
 
   // Optimization required: load logic should be at the page level
   // e.g backups page is waiting for meta.tables to load finish when it doesnt even need that data
@@ -77,7 +76,10 @@ const DatabaseLayout: FC<Props> = ({ title, children }) => {
       isLoading={!loaded}
       product="Database"
       productMenu={
-        <ProductMenu page={page} menu={generateDatabaseMenu(project, foreignDataWrappersEnabled, pgNetExtensionExists)} />
+        <ProductMenu
+          page={page}
+          menu={generateDatabaseMenu(project, foreignDataWrappersEnabled, pgNetExtensionExists)}
+        />
       }
     >
       <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
diff --git a/studio/components/layouts/DocsLayout/DocsLayout.tsx b/studio/components/layouts/DocsLayout/DocsLayout.tsx
index a4923f5607..d14142740f 100644
--- a/studio/components/layouts/DocsLayout/DocsLayout.tsx
+++ b/studio/components/layouts/DocsLayout/DocsLayout.tsx
@@ -1,20 +1,21 @@
-import { ReactElement, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
+import { ReactElement, useEffect } from 'react'
 
-import ProjectLayout from '../'
-import { useStore, withAuth } from 'hooks'
 import Error from 'components/ui/Error'
 import ProductMenu from 'components/ui/ProductMenu'
-import { generateDocsMenu } from './DocsLayout.utils'
+import { useSelectedProject, useStore, withAuth } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
+import ProjectLayout from '../'
+import { generateDocsMenu } from './DocsLayout.utils'
 
 function DocsLayout({ title, children }: { title: string; children: ReactElement }) {
   const router = useRouter()
-  const { meta, ui } = useStore()
+  const { meta } = useStore()
   const { data, isLoading, error } = meta.openApi
+  const selectedProject = useSelectedProject()
 
-  const isPaused = ui.selectedProject?.status === PROJECT_STATUS.INACTIVE
+  const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
 
   const getPage = () => {
     if (router.pathname.endsWith('graphiql')) return 'graphiql'
@@ -25,10 +26,10 @@ function DocsLayout({ title, children }: { title: string; children: ReactElement
   }
 
   useEffect(() => {
-    if (ui.selectedProject?.ref && !isPaused) {
+    if (selectedProject?.ref && !isPaused) {
       meta.openApi.load()
     }
-  }, [ui.selectedProject?.ref])
+  }, [selectedProject?.ref])
 
   if (error) {
     return (
@@ -38,7 +39,7 @@ function DocsLayout({ title, children }: { title: string; children: ReactElement
     )
   }
 
-  const projectRef = ui.selectedProject?.ref ?? 'default'
+  const projectRef = selectedProject?.ref ?? 'default'
   const tableNames = (data?.tables ?? []).map((table: any) => table.name)
   const functionNames = (data?.functions ?? []).map((fn: any) => fn.name)
 
diff --git a/studio/components/layouts/FunctionsLayout.tsx b/studio/components/layouts/FunctionsLayout.tsx
index f8caaf4780..8c5c69d1d2 100644
--- a/studio/components/layouts/FunctionsLayout.tsx
+++ b/studio/components/layouts/FunctionsLayout.tsx
@@ -63,7 +63,6 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
                 </div>
                 <div className="flex items-center space-x-4">
                   <h1 className="text-2xl text-scale-1200">Edge Functions</h1>
-                  <p className="mt-1 text-scale-1000">Beta</p>
                 </div>
               </div>
             </div>
@@ -97,7 +96,6 @@ const FunctionsLayout: FC<Props> = ({ title, children }) => {
                         Edge Functions
                       </h1>
                     </Link>
-                    <p className="mt-1 text-scale-1000">Beta</p>
                     {name && (
                       <div className="mt-1.5 flex items-center space-x-4">
                         <span className="text-scale-1000">
diff --git a/studio/components/layouts/LogsLayout/LogsLayout.tsx b/studio/components/layouts/LogsLayout/LogsLayout.tsx
index 1d889b1735..ff331f16c4 100644
--- a/studio/components/layouts/LogsLayout/LogsLayout.tsx
+++ b/studio/components/layouts/LogsLayout/LogsLayout.tsx
@@ -1,26 +1,25 @@
-import { PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useRouter } from 'next/router'
-import { checkPermissions, useStore, withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { PropsWithChildren } from 'react'
+
 import NoPermission from 'components/ui/NoPermission'
-import { generateLogsMenu } from './LogsMenu.utils'
 import ProductMenu from 'components/ui/ProductMenu'
+import { useCheckPermissions, useSelectedProject, withAuth } from 'hooks'
+import ProjectLayout from '../'
+import { generateLogsMenu } from './LogsMenu.utils'
 
 interface LogsLayoutProps {
   title?: string
 }
 
 const LogsLayout = ({ title, children }: PropsWithChildren<LogsLayoutProps>) => {
-  const { ui } = useStore()
   const router = useRouter()
   const pathArr = router.pathname.split('/')
   const page = pathArr[pathArr.length - 1]
 
-  const project = ui.selectedProject
+  const project = useSelectedProject()
 
-  const canUseLogsExplorer = checkPermissions(PermissionAction.ANALYTICS_READ, 'logflare')
+  const canUseLogsExplorer = useCheckPermissions(PermissionAction.ANALYTICS_READ, 'logflare')
 
   if (!canUseLogsExplorer) {
     return (
@@ -45,4 +44,4 @@ const LogsLayout = ({ title, children }: PropsWithChildren<LogsLayoutProps>) =>
   )
 }
 
-export default withAuth(observer(LogsLayout))
+export default withAuth(LogsLayout)
diff --git a/studio/components/layouts/OrganizationLayout.tsx b/studio/components/layouts/OrganizationLayout.tsx
index 0b323386d0..c4479bcf78 100644
--- a/studio/components/layouts/OrganizationLayout.tsx
+++ b/studio/components/layouts/OrganizationLayout.tsx
@@ -1,18 +1,13 @@
-import { useStore } from 'hooks'
-import { observer } from 'mobx-react-lite'
-import { FC, ReactNode } from 'react'
-import { AccountLayout } from './'
+import { useSelectedOrganization } from 'hooks'
+import { PropsWithChildren } from 'react'
+import AccountLayout from './AccountLayout/AccountLayout'
 
-interface Props {
-  children: ReactNode
-}
-
-const OrganizationLayout: FC<Props> = ({ children }) => {
-  const { ui } = useStore()
+const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
+  const selectedOrganization = useSelectedOrganization()
 
   return (
     <AccountLayout
-      title={ui.selectedOrganization?.name ?? 'Supabase'}
+      title={selectedOrganization?.name ?? 'Supabase'}
       breadcrumbs={[{ key: `org-settings`, label: 'Settings' }]}
     >
       {children}
@@ -20,4 +15,4 @@ const OrganizationLayout: FC<Props> = ({ children }) => {
   )
 }
 
-export default observer(OrganizationLayout)
+export default OrganizationLayout
diff --git a/studio/components/layouts/ProjectLayout/BuildingState.tsx b/studio/components/layouts/ProjectLayout/BuildingState.tsx
index 11ec2af1c9..a41e89137a 100644
--- a/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -1,25 +1,26 @@
+import { useQueryClient } from '@tanstack/react-query'
+import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
+import ExampleProject from 'components/interfaces/Home/ExampleProject'
+import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import Link from 'next/link'
 import { FC, useEffect, useRef } from 'react'
-import { observer } from 'mobx-react-lite'
-import { Badge, IconArrowRight, IconLoader, Button } from 'ui'
-import ExampleProject from 'components/interfaces/Home/ExampleProject'
-import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
-import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
+import { Badge, Button, IconArrowRight, IconLoader } from 'ui'
 
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { useStore } from 'hooks'
-import { getWithTimeout } from 'lib/common/fetch'
-import { Project } from 'types'
 import { DisplayApiSettings, DisplayConfigSettings } from 'components/ui/ProjectSettings'
+import { invalidateProjectsQuery } from 'data/projects/projects-query'
+import { getWithTimeout } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { Project } from 'types'
 
-interface Props {
+export interface BuildingStateProps {
   project: Project
 }
 
-const BuildingState: FC<Props> = ({ project }) => {
-  const { ui, app } = useStore()
+const BuildingState = ({ project }: BuildingStateProps) => {
+  const queryClient = useQueryClient()
   const checkServerInterval = useRef<number>()
 
+  // TODO: move to react-query
   async function checkServer() {
     if (!project) return
 
@@ -30,9 +31,8 @@ const BuildingState: FC<Props> = ({ project }) => {
       const { status } = projectStatus
       if (status === PROJECT_STATUS.ACTIVE_HEALTHY) {
         clearInterval(checkServerInterval.current)
-        // re-fetch project detail.
-        // This will also trigger UI state change to show project building completed
-        await app.projects.fetchDetail(project.ref)
+
+        await invalidateProjectsQuery(queryClient)
       }
     }
   }
@@ -156,7 +156,7 @@ const BuildingState: FC<Props> = ({ project }) => {
     </div>
   )
 }
-export default observer(BuildingState)
+export default BuildingState
 
 const ChecklistItem = ({ description }: any) => {
   return (
diff --git a/studio/components/layouts/ProjectLayout/ConnectingState.tsx b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
index 4378343983..ba2ae591e0 100644
--- a/studio/components/layouts/ProjectLayout/ConnectingState.tsx
+++ b/studio/components/layouts/ProjectLayout/ConnectingState.tsx
@@ -1,19 +1,19 @@
+import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
-import { FC, useEffect, useRef, useState } from 'react'
-import { observer } from 'mobx-react-lite'
+import { useEffect, useRef, useState } from 'react'
 import { Badge, Button, IconLoader, IconMonitor, IconServer, Modal } from 'ui'
 
-import { Project } from 'types'
-import { useStore } from 'hooks'
 import ShimmerLine from 'components/ui/ShimmerLine'
+import { setProjectPostgrestStatus } from 'data/projects/projects-query'
 import pingPostgrest from 'lib/pingPostgrest'
+import { Project } from 'types'
 
-interface Props {
+export interface ConnectingStateProps {
   project: Project
 }
 
-const ConnectingState: FC<Props> = ({ project }) => {
-  const { app } = useStore()
+const ConnectingState = ({ project }: ConnectingStateProps) => {
+  const queryClient = useQueryClient()
   const checkProjectConnectionIntervalRef = useRef<number>()
 
   const [showHelperButton, setShowHelperButton] = useState(false)
@@ -40,7 +40,7 @@ const ConnectingState: FC<Props> = ({ project }) => {
     const result = await pingPostgrest(project.ref, { kpsVersion: project.kpsVersion })
     if (result) {
       clearInterval(checkProjectConnectionIntervalRef.current)
-      app.onProjectPostgrestStatusUpdated(project.id, 'ONLINE')
+      setProjectPostgrestStatus(queryClient, project.ref, 'ONLINE')
     }
   }
 
@@ -144,4 +144,4 @@ const ConnectingState: FC<Props> = ({ project }) => {
   )
 }
 
-export default observer(ConnectingState)
+export default ConnectingState
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 4ec5f0064a..834f8feb80 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -1,39 +1,36 @@
-import Link from 'next/link'
-import { observer } from 'mobx-react-lite'
 import { useParams } from 'common'
+import Link from 'next/link'
 import { Badge } from 'ui'
 
+import { getResourcesExceededLimits } from 'components/ui/OveragesBanner/OveragesBanner.utils'
+import { useProjectReadOnlyQuery } from 'data/config/project-read-only-query'
+import { useProjectUsageQuery } from 'data/usage/project-usage-query'
+import { useFlag, useSelectedOrganization, useSelectedProject } from 'hooks'
 import { IS_PLATFORM, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
-import { useFlag, useStore } from 'hooks'
 import BreadcrumbsView from './BreadcrumbsView'
-import OrgDropdown from './OrgDropdown'
-import ProjectDropdown from './ProjectDropdown'
 import FeedbackDropdown from './FeedbackDropdown'
 import HelpPopover from './HelpPopover'
 import NotificationsPopover from './NotificationsPopover'
-import { getResourcesExceededLimits } from 'components/ui/OveragesBanner/OveragesBanner.utils'
-import { useProjectUsageQuery } from 'data/usage/project-usage-query'
-import { useProjectReadOnlyQuery } from 'data/config/project-read-only-query'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import OrgDropdown from './OrgDropdown'
+import ProjectDropdown from './ProjectDropdown'
 
 const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
-  const { ui } = useStore()
-  const { selectedOrganization, selectedProject } = ui
+  const selectedOrganization = useSelectedOrganization()
+  const selectedProject = useSelectedProject()
 
   const { ref: projectRef } = useParams()
-  const { project } = useProjectContext()
   const { data: isReadOnlyMode } = useProjectReadOnlyQuery({
-    projectRef: project?.ref,
-    connectionString: project?.connectionString,
+    projectRef: selectedProject?.ref,
+    connectionString: selectedProject?.connectionString,
   })
 
   const { data: usage } = useProjectUsageQuery({ projectRef })
   const resourcesExceededLimits = getResourcesExceededLimits(usage)
 
   const projectHasNoLimits =
-    ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.PAYG ||
-    ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE ||
-    ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.TEAM
+    selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.PAYG ||
+    selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE ||
+    selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.TEAM
 
   const showOverUsageBadge =
     useFlag('overusageBadge') &&
@@ -120,4 +117,4 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
     </div>
   )
 }
-export default observer(LayoutHeader)
+export default LayoutHeader
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx
index a523bd84c4..54d19628a3 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx
@@ -1,19 +1,20 @@
-import dayjs from 'dayjs'
-import { FC, useState } from 'react'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { Notification, NotificationStatus } from '@supabase/shared-types/out/notifications'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { useState } from 'react'
 
-import { useStore } from 'hooks'
 import { notificationKeys } from 'data/notifications/keys'
-import { Project } from 'types'
-import { formatNotificationCTAText, formatNotificationText } from './NotificationRows.utils'
-import NotificationActions from './NotificationActions'
-import { get, delete_ } from 'lib/common/fetch'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useStore } from 'hooks'
+import { delete_, get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
+import { Project } from 'types'
 import { Button, IconX } from 'ui'
+import NotificationActions from './NotificationActions'
+import { formatNotificationCTAText, formatNotificationText } from './NotificationRows.utils'
 
-interface Props {
+export interface NotificationRowProps {
   notification: Notification
   onSelectRestartProject: (project: Project, notification: Notification) => void
   onSelectApplyMigration: (project: Project, notification: Notification) => void
@@ -21,17 +22,18 @@ interface Props {
   onSelectFinalizeMigration: (project: Project, notification: Notification) => void
 }
 
-const NotificationRow: FC<Props> = ({
+const NotificationRow = ({
   notification,
   onSelectRestartProject,
   onSelectApplyMigration,
   onSelectRollbackMigration,
   onSelectFinalizeMigration,
-}) => {
-  const { app, ui } = useStore()
+}: NotificationRowProps) => {
+  const { ui } = useStore()
   const queryClient = useQueryClient()
   const [dismissing, setDismissing] = useState(false)
-  const [project] = app.projects.list((project: Project) => project.id === notification.project_id)
+  const { data: projects } = useProjectsQuery()
+  const project = projects?.find((project) => project.id === notification.project_id)
 
   const insertedAt = dayjs(notification.inserted_at).format('DD MMM YYYY, HH:mma')
   const changelogLink = (notification.data as any).changelog_link
@@ -41,10 +43,11 @@ const NotificationRow: FC<Props> = ({
   // have been removed, double check with Qiao before removing.
   // Relevant PR: https://github.com/supabase/supabase/pull/9229
   const { data: ownerReassignStatus } = useQuery(
-    ['projects', project.ref, 'owner-reassign'],
-    ({ signal }) => get(`${API_URL}/database/${project.ref}/owner-reassign`, { signal }),
+    ['projects', project?.ref, 'owner-reassign'],
+    ({ signal }) => get(`${API_URL}/database/${project?.ref}/owner-reassign`, { signal }),
     {
-      enabled: (notification.data as any).upgrade_type === 'schema-migration',
+      enabled:
+        (notification.data as any).upgrade_type === 'schema-migration' && project !== undefined,
     }
   )
 
@@ -65,6 +68,8 @@ const NotificationRow: FC<Props> = ({
     setDismissing(false)
   }
 
+  if (!project) return null
+
   return (
     <div className="flex py-2">
       <div className="flex min-w-[50px] justify-center">
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
index 129a2568e6..1ff8530f54 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -1,27 +1,29 @@
-import dayjs from 'dayjs'
-import { FC, Fragment, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Alert, Button, IconBell, Popover, IconArrowRight } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
+  ActionType,
   Notification,
   NotificationStatus,
-  ActionType,
 } from '@supabase/shared-types/out/notifications'
+import { useQueryClient } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
+import { Fragment, useState } from 'react'
 
-import { Project } from 'types'
+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 { 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 NotificationRow from './NotificationRow'
-import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
-import { useNotificationsQuery } from 'data/notifications/notifications-query'
 
-interface Props {}
-
-const NotificationsPopover: FC<Props> = () => {
+const NotificationsPopover = () => {
+  const queryClient = useQueryClient()
   const router = useRouter()
-  const { app, meta, ui } = useStore()
+  const { meta, ui } = useStore()
   const { data: notifications, refetch } = useNotificationsQuery()
 
   const [projectToRestart, setProjectToRestart] = useState<Project>()
@@ -57,7 +59,7 @@ const NotificationsPopover: FC<Props> = () => {
 
     const { id } = targetNotification
 
-    const { id: projectId, ref, region } = projectToRestart
+    const { ref, region } = projectToRestart
     const serviceNamesByActionName: Record<string, string> = {
       [ActionType.PgBouncerRestart]: 'pgbouncer',
       [ActionType.SchedulePostgresRestart]: 'postgresql',
@@ -82,7 +84,7 @@ const NotificationsPopover: FC<Props> = () => {
         error,
       })
     } else {
-      app.onProjectPostgrestStatusUpdated(projectId, 'OFFLINE')
+      setProjectPostgrestStatus(queryClient, ref, 'OFFLINE')
       ui.setNotification({ category: 'success', message: `Restarting services` })
       router.push(`/project/${ref}`)
     }
@@ -102,9 +104,11 @@ const NotificationsPopover: FC<Props> = () => {
     if (!projectToApplyMigration) return
     const res = await post(`${API_URL}/database/${projectToApplyMigration.ref}/owner-reassign`, {})
     if (!res.error) {
-      await app.projects.fetchDetail(projectToApplyMigration.ref, (project) =>
+      const project = await getProjectDetail({ ref: projectToApplyMigration.ref })
+      if (project) {
         meta.setProjectDetails(project)
-      )
+      }
+
       ui.setNotification({
         category: 'success',
         message: `Successfully applied migration for project "${projectToApplyMigration.name}"`,
@@ -126,9 +130,11 @@ const NotificationsPopover: FC<Props> = () => {
       {}
     )
     if (!res.error) {
-      await app.projects.fetchDetail(projectToRollbackMigration.ref, (project) =>
+      const project = await getProjectDetail({ ref: projectToRollbackMigration.ref })
+      if (project) {
         meta.setProjectDetails(project)
-      )
+      }
+
       ui.setNotification({
         category: 'success',
         message: `Successfully rolled back migration for project "${projectToRollbackMigration.name}"`,
@@ -150,9 +156,11 @@ const NotificationsPopover: FC<Props> = () => {
       {}
     )
     if (!res.error) {
-      await app.projects.fetchDetail(projectToFinalizeMigration.ref, (project) =>
+      const project = await getProjectDetail({ ref: projectToFinalizeMigration.ref })
+      if (project) {
         meta.setProjectDetails(project)
-      )
+      }
+
       ui.setNotification({
         category: 'success',
         message: `Successfully finalized migration for project "${projectToFinalizeMigration.name}"`,
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
index b2033eace7..5e2bfffa05 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/OrgDropdown.tsx
@@ -1,17 +1,17 @@
-import { useRouter } from 'next/router'
 import { toJS } from 'mobx'
-import { observer } from 'mobx-react-lite'
-import { Button, Dropdown, IconPlus } from 'ui'
+import { useRouter } from 'next/router'
 
-import { useFlag, useStore } from 'hooks'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useFlag, useSelectedOrganization, useStore } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
+import { Button, Dropdown, IconPlus } from 'ui'
 
 const OrgDropdown = () => {
   const router = useRouter()
-  const { app, ui } = useStore()
+  const { ui } = useStore()
 
-  const sortedOrganizations: any[] = app.organizations.list()
-  const selectedOrganization: any = ui.selectedOrganization
+  const { data: organizations } = useOrganizationsQuery()
+  const selectedOrganization = useSelectedOrganization()
 
   const orgCreationV2 = useFlag('orgcreationv2')
 
@@ -21,8 +21,8 @@ const OrgDropdown = () => {
       align="start"
       overlay={
         <>
-          {sortedOrganizations
-            .sort((a, b) => a.name.localeCompare(b.name))
+          {organizations
+            ?.sort((a, b) => a.name.localeCompare(b.name))
             .map((x) => {
               const slug = toJS(x.slug)
 
@@ -68,14 +68,14 @@ const OrgDropdown = () => {
       }
     >
       <Button asChild type="text" size="tiny">
-        <span>{selectedOrganization.name}</span>
+        <span>{selectedOrganization?.name}</span>
       </Button>
     </Dropdown>
   ) : (
     <Button asChild type="text" size="tiny">
-      <span>{selectedOrganization.name}</span>
+      <span>{selectedOrganization?.name}</span>
     </Button>
   )
 }
 
-export default observer(OrgDropdown)
+export default OrgDropdown
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
index 6de692d35f..b56940ded5 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/ProjectDropdown.tsx
@@ -1,10 +1,10 @@
 import Link from 'next/link'
-import { observer } from 'mobx-react-lite'
-import { Button, Dropdown, IconPlus, Popover } from 'ui'
 import { useRouter } from 'next/router'
 import { ParsedUrlQuery } from 'querystring'
+import { Button, Dropdown, IconPlus, Popover } from 'ui'
 
-import { useStore } from 'hooks'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useSelectedOrganization, useSelectedProject } from 'hooks'
 import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
 
 // [Fran] the idea is to let users change projects without losing the current page,
@@ -31,10 +31,10 @@ export const sanitizeRoute = (route: string, routerQueries: ParsedUrlQuery) => {
 }
 
 const ProjectDropdown = () => {
-  const { app, ui } = useStore()
-  const selectedOrganizationProjects = app.projects.list()
-  const selectedOrganizationSlug = ui.selectedOrganization?.slug
-  const selectedProject: any = ui.selectedProject
+  const selectedOrganization = useSelectedOrganization()
+  const selectedProject = useSelectedProject()
+  const { data: allProjects } = useProjectsQuery()
+  const selectedOrganizationSlug = selectedOrganization?.slug
   const router = useRouter()
   const sanitizedRoute = sanitizeRoute(router.route, router.query)
 
@@ -44,10 +44,10 @@ const ProjectDropdown = () => {
       align="start"
       overlay={
         <>
-          {selectedOrganizationProjects
-            .filter((x: any) => x.status !== PROJECT_STATUS.INACTIVE)
-            .sort((a: any, b: any) => a.name.localeCompare(b.name))
-            .map((x: any) => (
+          {allProjects
+            ?.filter((x) => x.status !== PROJECT_STATUS.INACTIVE)
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((x) => (
               <Link
                 key={x.ref}
                 href={sanitizedRoute?.replace('[ref]', x.ref) ?? `/project/${x.ref}`}
@@ -56,7 +56,7 @@ const ProjectDropdown = () => {
                 <a className="block">
                   <Dropdown.Item
                     className={
-                      selectedProject.name === x.name
+                      selectedProject?.name === x.name
                         ? 'font-bold bg-slate-400 dark:bg-slate-500'
                         : ''
                     }
@@ -76,14 +76,14 @@ const ProjectDropdown = () => {
       }
     >
       <Button asChild type="text" size="tiny" className="my-1">
-        <span>{selectedProject.name}</span>
+        <span>{selectedProject?.name}</span>
       </Button>
     </Dropdown>
   ) : (
     <Button asChild type="text" size="tiny">
-      <span>{selectedProject.name}</span>
+      <span>{selectedProject?.name}</span>
     </Button>
   )
 }
 
-export default observer(ProjectDropdown)
+export default ProjectDropdown
diff --git a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index 944df1f6c2..50bdff1621 100644
--- a/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -1,46 +1,46 @@
-import Link from 'next/link'
-import { FC } from 'react'
+import * as Tooltip from '@radix-ui/react-tooltip'
 import { isUndefined } from 'lodash'
-import { observer } from 'mobx-react-lite'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
+import { FC } from 'react'
+
+import { useTheme } from 'common'
+import { useParams } from 'common/hooks'
+import { useFlag } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
+import { detectOS } from 'lib/helpers'
 import {
   Button,
   Dropdown,
+  IconCommand,
   IconHome,
+  IconSearch,
   IconSettings,
   IconUser,
-  IconSearch,
   useCommandMenu,
-  IconCommand,
 } from 'ui'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { useFlag, useStore } from 'hooks'
-import { IS_PLATFORM } from 'lib/constants'
+import { useProjectContext } from '../ProjectContext'
 import {
   generateOtherRoutes,
   generateProductRoutes,
   generateToolRoutes,
 } from './NavigationBar.utils'
 import NavigationIconButton from './NavigationIconButton'
-import { useParams } from 'common/hooks'
-import { useTheme } from 'common'
-import { detectOS } from 'lib/helpers'
 
 interface Props {}
 
 const NavigationBar: FC<Props> = ({}) => {
   const router = useRouter()
-  const { ui } = useStore()
   const { isDarkMode, toggleTheme } = useTheme()
   const { ref: projectRef } = useParams()
 
-  const projectBaseInfo = ui.selectedProjectBaseInfo
+  const { project } = useProjectContext()
   const ongoingIncident = useFlag('ongoingIncident')
 
   const activeRoute = router.pathname.split('/')[3]
-  const toolRoutes = generateToolRoutes(projectRef, projectBaseInfo)
-  const productRoutes = generateProductRoutes(projectRef, projectBaseInfo)
-  const otherRoutes = generateOtherRoutes(projectRef, projectBaseInfo)
+  const toolRoutes = generateToolRoutes(projectRef, project)
+  const productRoutes = generateProductRoutes(projectRef, project)
+  const otherRoutes = generateOtherRoutes(projectRef, project)
   const showCmdkHelper = useFlag('dashboardCmdk')
   const os = detectOS()
   const { setIsOpen } = useCommandMenu()
@@ -172,4 +172,4 @@ const NavigationBar: FC<Props> = ({}) => {
   )
 }
 
-export default observer(NavigationBar)
+export default NavigationBar
diff --git a/studio/components/layouts/ProjectLayout/PausingState.tsx b/studio/components/layouts/ProjectLayout/PausingState.tsx
index 1e19e5cf3b..ddd078ccf2 100644
--- a/studio/components/layouts/ProjectLayout/PausingState.tsx
+++ b/studio/components/layouts/ProjectLayout/PausingState.tsx
@@ -1,12 +1,11 @@
-import { FC } from 'react'
-import { Badge, IconLoader, IconCircle } from 'ui'
 import { Project } from 'types'
+import { Badge, IconCircle, IconLoader } from 'ui'
 
-interface Props {
+export interface PausingStateProps {
   project: Project
 }
 
-const PausingState: FC<Props> = ({ project }) => {
+const PausingState = ({ project }: PausingStateProps) => {
   return (
     <div className="mx-auto my-16 w-full max-w-7xl space-y-16">
       <div className="mx-6 space-y-16">
diff --git a/studio/components/layouts/ProjectLayout/ProjectContext.tsx b/studio/components/layouts/ProjectLayout/ProjectContext.tsx
index 8fc28f5292..b06457c84f 100644
--- a/studio/components/layouts/ProjectLayout/ProjectContext.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectContext.tsx
@@ -1,8 +1,7 @@
 import { useParams } from 'common/hooks'
-import { useStore } from 'hooks'
+import { useProjectDetailQuery } from 'data/projects/project-detail-query'
 import { PROJECT_STATUS } from 'lib/constants'
-import { observer } from 'mobx-react-lite'
-import { createContext, PropsWithChildren, useContext, useMemo } from 'react'
+import { PropsWithChildren, createContext, useContext, useMemo } from 'react'
 import { Project } from 'types'
 
 type ProjectContextType = {
@@ -23,29 +22,21 @@ type ProjectContextProviderProps = {
   projectRef: string | undefined
 }
 
-export const ProjectContextProvider = observer(
-  ({ projectRef, children }: PropsWithChildren<ProjectContextProviderProps>) => {
-    // TODO(alaister): This will eventually be replaced with a react-query query
-    // once we remove mobx
-    const { ui } = useStore()
+export const ProjectContextProvider = ({
+  projectRef,
+  children,
+}: PropsWithChildren<ProjectContextProviderProps>) => {
+  const { data: selectedProject, isLoading } = useProjectDetailQuery({ ref: projectRef })
 
-    const value = useMemo<ProjectContextType>(() => {
-      if (ui.selectedProject?.ref === projectRef) {
-        return {
-          project: ui.selectedProject,
-          isLoading: false,
-        }
-      }
+  const value = useMemo<ProjectContextType>(() => {
+    return {
+      project: selectedProject,
+      isLoading: isLoading,
+    }
+  }, [selectedProject, isLoading])
 
-      return {
-        project: undefined,
-        isLoading: true,
-      }
-    }, [ui.selectedProject?.ref, projectRef])
-
-    return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>
-  }
-)
+  return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>
+}
 
 export const ProjectContextFromParamsProvider = ({ children }: PropsWithChildren<{}>) => {
   const { ref: projectRef } = useParams()
diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index f00bbca7e2..e2dae22e23 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -1,22 +1,21 @@
 import Head from 'next/head'
-import { ReactNode, Fragment } from 'react'
-import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { useStore, withAuth, useFlag } from 'hooks'
-import { useParams } from 'common/hooks'
-import { PROJECT_STATUS } from 'lib/constants'
+import { Fragment, PropsWithChildren, ReactNode } from 'react'
 
+import { useParams } from 'common/hooks'
 import Connecting from 'components/ui/Loading'
-import NavigationBar from './NavigationBar/NavigationBar'
-import ProductMenuBar from './ProductMenuBar'
-import LayoutHeader from './LayoutHeader'
-import ConnectingState from './ConnectingState'
-import PausingState from './PausingState'
+import { useFlag, useSelectedOrganization, useSelectedProject, withAuth } from 'hooks'
+import { PROJECT_STATUS } from 'lib/constants'
 import BuildingState from './BuildingState'
+import ConnectingState from './ConnectingState'
+import LayoutHeader from './LayoutHeader'
+import NavigationBar from './NavigationBar/NavigationBar'
+import PausingState from './PausingState'
+import ProductMenuBar from './ProductMenuBar'
 import { ProjectContextProvider } from './ProjectContext'
+import ProjectPausedState from './ProjectPausedState'
 import RestoringState from './RestoringState'
 import UpgradingState from './UpgradingState'
-import ProjectPausedState from './ProjectPausedState'
 
 export interface ProjectLayoutProps {
   title?: string
@@ -25,7 +24,6 @@ export interface ProjectLayoutProps {
   productMenu?: ReactNode
   hideHeader?: boolean
   hideIconBar?: boolean
-  children: ReactNode
   selectedTable?: string
 }
 
@@ -38,15 +36,16 @@ const ProjectLayout = ({
   hideHeader = false,
   hideIconBar = false,
   selectedTable,
-}: ProjectLayoutProps) => {
-  const { ui } = useStore()
+}: PropsWithChildren<ProjectLayoutProps>) => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
   const ongoingIncident = useFlag('ongoingIncident')
-  const projectName = ui.selectedProject?.name
-  const organizationName = ui.selectedOrganization?.name
+  const selectedOrganization = useSelectedOrganization()
+  const selectedProject = useSelectedProject()
+  const projectName = selectedProject?.name
+  const organizationName = selectedOrganization?.name
 
-  const isPaused = ui.selectedProject?.status === PROJECT_STATUS.INACTIVE
+  const isPaused = selectedProject?.status === PROJECT_STATUS.INACTIVE
   const ignorePausedState =
     router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
   const showPausedState = isPaused && !ignorePausedState
@@ -98,9 +97,9 @@ const ProjectLayout = ({
   )
 }
 
-export const ProjectLayoutWithAuth = withAuth(observer(ProjectLayout))
+export const ProjectLayoutWithAuth = withAuth(ProjectLayout)
 
-export default observer(ProjectLayout)
+export default ProjectLayout
 
 interface MenuBarWrapperProps {
   isLoading: boolean
@@ -108,10 +107,10 @@ interface MenuBarWrapperProps {
   children: ReactNode
 }
 
-const MenuBarWrapper = observer(({ isLoading, productMenu, children }: MenuBarWrapperProps) => {
-  const { ui } = useStore()
-  return <>{!isLoading && productMenu && ui.selectedProject !== undefined ? children : null}</>
-})
+const MenuBarWrapper = ({ isLoading, productMenu, children }: MenuBarWrapperProps) => {
+  const selectedProject = useSelectedProject()
+  return <>{!isLoading && productMenu && selectedProject !== undefined ? children : null}</>
+}
 
 interface ContentWrapperProps {
   isLoading: boolean
@@ -130,8 +129,8 @@ interface ContentWrapperProps {
  *
  * [TODO] Next iteration should scrape long polling and just listen to the project's status
  */
-const ContentWrapper = observer(({ isLoading, children }: ContentWrapperProps) => {
-  const { ui } = useStore()
+const ContentWrapper = ({ isLoading, children }: ContentWrapperProps) => {
+  const selectedProject = useSelectedProject()
   const router = useRouter()
 
   const routesToIgnorePostgrestConnection = [
@@ -140,95 +139,95 @@ const ContentWrapper = observer(({ isLoading, children }: ContentWrapperProps) =
     '/project/[ref]/settings/database',
     '/project/[ref]/settings/billing/subscription',
     '/project/[ref]/settings/billing/usage',
-    '/project/[ref]/settings/billing/invoices'
+    '/project/[ref]/settings/billing/invoices',
   ]
 
   const requiresDbConnection: boolean = router.pathname !== '/project/[ref]/settings/general'
   const requiresPostgrestConnection = !routesToIgnorePostgrestConnection.includes(router.pathname)
 
-  const isProjectUpgrading = ui.selectedProject?.status === PROJECT_STATUS.UPGRADING
-  const isProjectRestoring = ui.selectedProject?.status === PROJECT_STATUS.RESTORING
-  const isProjectBuilding = ui.selectedProject?.status === PROJECT_STATUS.COMING_UP
-  const isProjectPausing = ui.selectedProject?.status === PROJECT_STATUS.GOING_DOWN
-  const isProjectOffline = ui.selectedProject?.postgrestStatus === 'OFFLINE'
+  const isProjectUpgrading = selectedProject?.status === PROJECT_STATUS.UPGRADING
+  const isProjectRestoring = selectedProject?.status === PROJECT_STATUS.RESTORING
+  const isProjectBuilding = selectedProject?.status === PROJECT_STATUS.COMING_UP
+  const isProjectPausing =
+    selectedProject?.status === PROJECT_STATUS.GOING_DOWN ||
+    selectedProject?.status === PROJECT_STATUS.PAUSING
+  const isProjectOffline = selectedProject?.postgrestStatus === 'OFFLINE'
 
   return (
     <>
-      {isLoading || ui.selectedProject === undefined ? (
+      {isLoading || selectedProject === undefined ? (
         <Connecting />
       ) : isProjectUpgrading ? (
         <UpgradingState />
       ) : isProjectPausing ? (
-        <PausingState project={ui.selectedProject} />
+        <PausingState project={selectedProject} />
       ) : requiresPostgrestConnection && isProjectOffline ? (
-        <ConnectingState project={ui.selectedProject} />
+        <ConnectingState project={selectedProject} />
       ) : requiresDbConnection && isProjectRestoring ? (
         <RestoringState />
       ) : requiresDbConnection && isProjectBuilding ? (
-        <BuildingState project={ui.selectedProject} />
+        <BuildingState project={selectedProject} />
       ) : (
-        <Fragment key={ui.selectedProject.ref}>{children}</Fragment>
+        <Fragment key={selectedProject.ref}>{children}</Fragment>
       )}
     </>
   )
-})
+}
 
 /**
  * Shows the children irregardless of whether the selected project has loaded or not
  * We'll eventually want to use this instead of the current ProjectLayout to prevent
  * a catch-all spinner on the dashboard
  */
-export const ProjectLayoutNonBlocking = observer(
-  ({
-    title,
-    product = '',
-    productMenu,
-    children,
-    hideHeader = false,
-    hideIconBar = false,
-  }: ProjectLayoutProps) => {
-    const { ui } = useStore()
-    const router = useRouter()
-    const { ref: projectRef } = useParams()
-    const ongoingIncident = useFlag('ongoingIncident')
-    const isPaused = ui.selectedProject?.status === PROJECT_STATUS.INACTIVE
-    const ignorePausedState =
-      router.pathname === '/project/[ref]' || router.pathname.includes('/project/[ref]/settings')
-    const showPausedState = isPaused && !ignorePausedState
+export const ProjectLayoutNonBlocking = ({
+  title,
+  product = '',
+  productMenu,
+  children,
+  hideHeader = false,
+  hideIconBar = false,
+}: PropsWithChildren<ProjectLayoutProps>) => {
+  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
 
-    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 />}
+  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 />}
 
-          {/* Product menu bar */}
-          {productMenu && !showPausedState && (
-            <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
-          )}
+        {/* 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>
+        <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>
-            ) : (
-              children
-            )}
-          </main>
-        </div>
-      </ProjectContextProvider>
-    )
-  }
-)
+            </div>
+          ) : (
+            children
+          )}
+        </main>
+      </div>
+    </ProjectContextProvider>
+  )
+}
diff --git a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index 3bc5d3a4bd..b4f140347c 100644
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -1,25 +1,30 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
 import { useState } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
-import { Modal, Button, IconPauseCircle } from 'ui'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions, useStore, useFlag } from 'hooks'
-import { post } from 'lib/common/fetch'
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { useParams } from 'common'
 import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
 import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
-import { useParams } from 'common'
+import { setProjectStatus } from 'data/projects/projects-query'
+import { checkPermissions, useFlag, useSelectedOrganization, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { Button, IconPauseCircle, Modal } from 'ui'
+import { useProjectContext } from './ProjectContext'
 
 export interface ProjectPausedStateProps {
   product?: string
 }
 
 const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const { ref } = useParams()
-  const project = ui.selectedProject
-  const orgSlug = ui.selectedOrganization?.slug
+  const selectedOrganization = useSelectedOrganization()
+  const { project } = useProjectContext()
+  const orgSlug = selectedOrganization?.slug
 
   const kpsEnabled = useFlag('initWithKps')
   const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug: orgSlug })
@@ -53,7 +58,7 @@ const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
     }
 
     await post(`${API_URL}/projects/${project.ref}/restore`, { kps_enabled: kpsEnabled })
-    app.onProjectUpdated({ ...project, status: PROJECT_STATUS.RESTORING })
+    setProjectStatus(queryClient, project.ref, PROJECT_STATUS.RESTORING)
     ui.setNotification({ category: 'success', message: 'Restoring project' })
   }
 
diff --git a/studio/components/layouts/ProjectLayout/RestoringState.tsx b/studio/components/layouts/ProjectLayout/RestoringState.tsx
index ce1e8130d4..12cd01d836 100644
--- a/studio/components/layouts/ProjectLayout/RestoringState.tsx
+++ b/studio/components/layouts/ProjectLayout/RestoringState.tsx
@@ -1,16 +1,18 @@
 import Link from 'next/link'
 import { FC, useEffect, useRef, useState } from 'react'
-import { Button, IconAlertCircle, IconCheckCircle, IconLoader } from 'ui'
 
+import { getProjectDetail } from 'data/projects/project-detail-query'
 import { useStore } from 'hooks'
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { getWithTimeout } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { Button, IconAlertCircle, IconCheckCircle, IconLoader } from 'ui'
+import { useProjectContext } from './ProjectContext'
 
 interface Props {}
 
 const RestoringState: FC<Props> = ({}) => {
-  const { app, ui, meta } = useStore()
-  const project = ui.selectedProject
+  const { meta } = useStore()
+  const { project } = useProjectContext()
   const checkServerInterval = useRef<number>()
 
   const [loading, setLoading] = useState(false)
@@ -41,8 +43,13 @@ const RestoringState: FC<Props> = ({}) => {
   }
 
   const onConfirm = async () => {
+    if (!project) return console.error('Project is required')
+
     setLoading(true)
-    await app.projects.fetchDetail(project?.ref ?? '', (project) => meta.setProjectDetails(project))
+    const projectDetail = await getProjectDetail({ ref: project?.ref })
+    if (projectDetail) {
+      meta.setProjectDetails(projectDetail)
+    }
   }
 
   return (
diff --git a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
index 0ec3881d62..2f6b15649e 100644
--- a/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
+++ b/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
@@ -1,42 +1,44 @@
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import { useState } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
 import {
   Button,
-  IconCircle,
-  IconCheckCircle,
-  IconSettings,
   IconAlertCircle,
-  IconLoader,
   IconCheck,
+  IconCheckCircle,
+  IconCircle,
+  IconLoader,
   IconMaximize2,
   IconMinimize2,
+  IconSettings,
 } from 'ui'
-import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { IS_PLATFORM } from 'lib/constants'
-import { DATABASE_UPGRADE_MESSAGES } from './UpgradingState.constants'
 import { useProjectUpgradingStatusQuery } from 'data/config/project-upgrade-status-query'
+import { getProjectDetail } from 'data/projects/project-detail-query'
+import { useStore } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
+import { useProjectContext } from '../ProjectContext'
+import { DATABASE_UPGRADE_MESSAGES } from './UpgradingState.constants'
 
 const UpgradingState = () => {
   const { ref } = useParams()
-  const { app, ui, meta } = useStore()
+  const { meta } = useStore()
+  const { project } = useProjectContext()
   const [loading, setLoading] = useState(false)
   const [isExpanded, setIsExpanded] = useState(false)
   const { data } = useProjectUpgradingStatusQuery(
     {
       projectRef: ref,
-      projectStatus: ui.selectedProject?.status,
+      projectStatus: project?.status,
     },
     {
       enabled: IS_PLATFORM,
     }
   )
 
-  const project = ui.selectedProject
   const { initiated_at, status, progress, target_version, error } =
     data?.databaseUpgradeStatus ?? {}
   const progressStage = Number((progress || '').split('_')[0])
@@ -51,7 +53,11 @@ const UpgradingState = () => {
 
   const refetchProjectDetails = async () => {
     setLoading(true)
-    await app.projects.fetchDetail(project?.ref ?? '', (project) => meta.setProjectDetails(project))
+
+    const projectDetail = await getProjectDetail({ ref })
+    if (projectDetail) {
+      meta.setProjectDetails(projectDetail)
+    }
   }
 
   const subject = 'Upgrade%20failed%20for%20project'
diff --git a/studio/components/layouts/ReportsLayout/ReportsLayout.tsx b/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
index 6c789413f9..f151735777 100644
--- a/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
+++ b/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { useStore, withAuth } from 'hooks'
-import ProjectLayout from '../'
+import { PropsWithChildren } from 'react'
+
 import ProductMenu from 'components/ui/ProductMenu'
+import { useSelectedProject, withAuth } from 'hooks'
+import ProjectLayout from '../'
 import { generateReportsMenu } from './ReportsMenu.utils'
 
 interface ReportsLayoutProps {
@@ -11,10 +11,9 @@ interface ReportsLayoutProps {
 }
 
 const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps>) => {
-  const { ui } = useStore()
   const router = useRouter()
 
-  const project = ui.selectedProject
+  const project = useSelectedProject()
   const page = router.pathname.split('/')[4] || ''
 
   return (
@@ -30,4 +29,4 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
   )
 }
 
-export default withAuth(observer(ReportsLayout))
+export default withAuth(ReportsLayout)
diff --git a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index e487409344..c83802db39 100644
--- a/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -1,39 +1,28 @@
-import { partition } from 'lodash'
-import { useState, useMemo } from 'react'
-import { observer } from 'mobx-react-lite'
-import {
-  Button,
-  Menu,
-  Input,
-  IconSearch,
-  IconPlus,
-  IconX,
-  Dropdown,
-  IconChevronDown,
-  useCommandMenu,
-} from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { partition } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { useMemo, useState } from 'react'
 
-import { checkPermissions, useFlag, useStore } from 'hooks'
+import { useParams } from 'common'
+import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils'
+import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { SqlSnippet, useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
+import { useCheckPermissions, useFlag, useStore } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
 import { uuidv4 } from 'lib/helpers'
-
-import ProductMenuItem from 'components/ui/ProductMenu/ProductMenuItem'
-import { useParams } from 'common'
+import { useProfile } from 'lib/profile'
 import { useSnippets, useSqlEditorStateSnapshot } from 'state/sql-editor'
-import { SqlSnippet, useSqlSnippetsQuery } from 'data/content/sql-snippets-query'
-import { useProfileQuery } from 'data/profile/profile-query'
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import QueryItem from './QueryItem'
-import { createSqlSnippetSkeleton } from 'components/interfaces/SQLEditor/SQLEditor.utils'
-import { useRouter } from 'next/router'
+import { Button, Dropdown, IconPlus, IconSearch, IconX, Input, Menu, useCommandMenu } from 'ui'
 import { COMMAND_ROUTES } from 'ui/src/components/Command/Command.constants'
+import QueryItem from './QueryItem'
 
 const SideBarContent = observer(() => {
   const { ui } = useStore()
   const { ref, id } = useParams()
   const router = useRouter()
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
   const [filterString, setFilterString] = useState('')
   const { setPages, setIsOpen } = useCommandMenu()
   const showCmdkHelper = useFlag('dashboardCmdk')
@@ -61,7 +50,7 @@ const SideBarContent = observer(() => {
     filterString.length === 0
       ? queries
       : queries.filter((tab) => tab.name.toLowerCase().includes(filterString.toLowerCase()))
-  const canCreateSQLSnippet = checkPermissions(PermissionAction.CREATE, 'user_content', {
+  const canCreateSQLSnippet = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'sql', owner_id: profile?.id },
     subject: { id: profile?.id },
   })
@@ -94,26 +83,21 @@ const SideBarContent = observer(() => {
     <div className="mt-6">
       <Menu type="pills">
         {IS_PLATFORM && (
-          <div className="my-4 mx-3 space-y-1 px-3">
-            <div className="flex items-center">
-              <Button
-                className={showCmdkHelper ? 'rounded-r-none px-3' : undefined}
-                block
-                icon={<IconPlus />}
-                type="default"
-                disabled={isLoading}
-                style={{ justifyContent: 'start' }}
-                onClick={() => handleNewQuery()}
-              >
-                New query
-              </Button>
-              {showCmdkHelper && (
-                <Dropdown
-                  align="end"
-                  side="bottom"
-                  sideOffset={3}
-                  className="max-w-[210px]"
-                  overlay={[
+          <div className="my-4 mx-3 space-y-2 px-3">
+            <div className="flex items-center mb-3 w-full justify-center min-w-[210px] ">
+              <Dropdown
+                align="start"
+                side="bottom"
+                sideOffset={3}
+                className="max-w-[210px]"
+                overlay={[
+                  <Dropdown.Item key="new-blank-query" onClick={() => handleNewQuery()}>
+                    <div className="space-y-1">
+                      <p className="block text-scale-1200 text-xs">New blank query</p>
+                    </div>
+                  </Dropdown.Item>,
+                  <div key={'divider'} className="my-1 border-t border-scale-400" />,
+                  showCmdkHelper ? (
                     <Dropdown.Item
                       key="new-ai-query"
                       onClick={() => {
@@ -122,22 +106,23 @@ const SideBarContent = observer(() => {
                       }}
                     >
                       <div className="space-y-1">
-                        <p className="block text-scale-1200">New AI query</p>
-                        <p className="block text-scale-1100">
-                          Generate a SQL query using Supabase AI
-                        </p>
+                        <p className="block text-scale-1200 text-xs">New AI query</p>
                       </div>
-                    </Dropdown.Item>,
-                  ]}
+                    </Dropdown.Item>
+                  ) : null,
+                ]}
+              >
+                <Button
+                  block
+                  icon={<IconPlus />}
+                  className="min-w-[208px]"
+                  type="outline"
+                  disabled={isLoading}
+                  style={{ justifyContent: 'start' }}
                 >
-                  <Button
-                    disabled={isLoading}
-                    type="default"
-                    className="rounded-l-none px-[4px] py-[5px]"
-                    icon={<IconChevronDown />}
-                  />
-                </Dropdown>
-              )}
+                  New query
+                </Button>
+              </Dropdown>
             </div>
             <Input
               size="tiny"
diff --git a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
index 983a2c6739..4c4d2425c3 100644
--- a/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
+++ b/studio/components/layouts/SettingsLayout/SettingsLayout.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactNode, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
-import { useFlag, useStore, withAuth } from 'hooks'
+import { useFlag, useSelectedProject, useStore, withAuth } from 'hooks'
 import { generateSettingsMenu } from './SettingsMenu.utils'
 
 import ProjectLayout from '../'
@@ -14,8 +14,7 @@ interface Props {
 
 const SettingsLayout: FC<Props> = ({ title, children }) => {
   const { ui, meta } = useStore()
-  const projectRef = ui.selectedProjectRef as string
-  const projectBaseInfo = ui.selectedProjectBaseInfo
+  const project = useSelectedProject()
 
   const router = useRouter()
   // billing pages live under /billing/invoices and /billing/subscription, etc
@@ -25,13 +24,13 @@ const SettingsLayout: FC<Props> = ({ title, children }) => {
     : router.pathname.split('/')[4]
 
   const isVaultEnabled = useFlag('vaultExtension')
-  const menuRoutes = generateSettingsMenu(projectRef, projectBaseInfo, isVaultEnabled)
+  const menuRoutes = generateSettingsMenu(project?.ref as string, project, isVaultEnabled)
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (project?.ref) {
       meta.extensions.load()
     }
-  }, [ui.selectedProject?.ref])
+  }, [project?.ref])
 
   return (
     <ProjectLayout
diff --git a/studio/components/layouts/StorageLayout/StorageLayout.tsx b/studio/components/layouts/StorageLayout/StorageLayout.tsx
index 4993b2c015..9592b2f9c6 100644
--- a/studio/components/layouts/StorageLayout/StorageLayout.tsx
+++ b/studio/components/layouts/StorageLayout/StorageLayout.tsx
@@ -1,10 +1,9 @@
-import { observer } from 'mobx-react-lite'
 import { ReactNode, useEffect } from 'react'
 
 import { useParams } from 'common/hooks'
 import DeleteBucketModal from 'components/to-be-cleaned/Storage/DeleteBucketModal'
 import { AutoApiService, useProjectApiQuery } from 'data/config/project-api-query'
-import { useStore, withAuth } from 'hooks'
+import { useSelectedProject, useStore, withAuth } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
 import ProjectLayout from '../'
@@ -18,6 +17,7 @@ export interface StorageLayoutProps {
 const StorageLayout = ({ title, children }: StorageLayoutProps) => {
   const { ui } = useStore()
   const { ref: projectRef } = useParams()
+  const project = useSelectedProject()
 
   const storageExplorerStore = useStorageStore()
   const { selectedBucketToEdit, closeDeleteBucketModal, showDeleteBucketModal } =
@@ -26,7 +26,7 @@ const StorageLayout = ({ title, children }: StorageLayoutProps) => {
   const { data: settings, isLoading } = useProjectApiQuery({ projectRef })
   const apiService = settings?.autoApiService
 
-  const isPaused = ui.selectedProject?.status === PROJECT_STATUS.INACTIVE
+  const isPaused = project?.status === PROJECT_STATUS.INACTIVE
 
   useEffect(() => {
     if (!isLoading && apiService) initializeStorageStore(apiService)
@@ -64,4 +64,4 @@ const StorageLayout = ({ title, children }: StorageLayoutProps) => {
   )
 }
 
-export default withAuth(observer(StorageLayout))
+export default withAuth(StorageLayout)
diff --git a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
index 60143db8f7..4479159c2c 100644
--- a/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
+++ b/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
@@ -1,21 +1,21 @@
-import { PropsWithChildren, useEffect } from 'react'
-import { useRouter } from 'next/router'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
 import { observer } from 'mobx-react-lite'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect } from 'react'
 
-import { checkPermissions, useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { Entity } from 'data/entity-types/entity-type-query'
+import Connecting from 'components/ui/Loading/Loading'
+import NoPermission from 'components/ui/NoPermission'
 import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants'
+import { Entity } from 'data/entity-types/entity-type-query'
+import { checkPermissions, useSelectedProject, useStore } from 'hooks'
+import useEntityType from 'hooks/misc/useEntityType'
+import useLatest from 'hooks/misc/useLatest'
 import { useIsTableLoaded, useTableEditorStateSnapshot } from 'state/table-editor'
 import ProjectLayout from '../'
-import TableEditorMenu from './TableEditorMenu'
-import NoPermission from 'components/ui/NoPermission'
-import useEntityType from 'hooks/misc/useEntityType'
-import Connecting from 'components/ui/Loading/Loading'
-import useLatest from 'hooks/misc/useLatest'
 import useTableRowsPrefetchWrapper from './TableEditorLayout.utils'
+import TableEditorMenu from './TableEditorMenu'
 
 export interface TableEditorLayoutProps {
   selectedSchema?: string
@@ -37,7 +37,8 @@ const TableEditorLayout = ({
   onDuplicateTable = noop,
   children,
 }: PropsWithChildren<TableEditorLayoutProps>) => {
-  const { vault, meta, ui } = useStore()
+  const { ui, vault, meta } = useStore()
+  const selectedProject = useSelectedProject()
   const router = useRouter()
   const { ref, id: _id } = useParams()
   const id = _id ? Number(_id) : undefined
@@ -49,14 +50,14 @@ const TableEditorLayout = ({
   const isVaultEnabled = vaultExtension !== undefined && vaultExtension.installed_version !== null
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (ui.selectedProjectRef) {
       meta.schemas.load()
       meta.types.load()
       meta.policies.load()
       meta.publications.load()
       meta.extensions.load()
     }
-  }, [ui.selectedProject?.ref])
+  }, [ui.selectedProjectRef])
 
   const isLoaded = useIsTableLoaded(ref, id)
 
@@ -112,7 +113,7 @@ const TableEditorLayout = ({
     if (isVaultEnabled) {
       vault.load()
     }
-  }, [ui.selectedProject?.ref, isVaultEnabled])
+  }, [selectedProject?.ref, isVaultEnabled])
 
   if (!canReadTables) {
     return (
diff --git a/studio/components/to-be-cleaned/Docs/Snippets.js b/studio/components/to-be-cleaned/Docs/Snippets.js
index 4e0568b70c..98d9b8eb02 100644
--- a/studio/components/to-be-cleaned/Docs/Snippets.js
+++ b/studio/components/to-be-cleaned/Docs/Snippets.js
@@ -47,8 +47,8 @@ supabase: Client = create_client(url, key)
     dart: {
       language: 'dart',
       code: `
-final supabaseUrl = '${endpoint}'
-final supabaseKey = String.fromEnvironment('SUPABASE_KEY')
+const supabaseUrl = '${endpoint}';
+const supabaseKey = String.fromEnvironment('SUPABASE_KEY');
 
 Future<void> main() async {
   await Supabase.initialize(url: supabaseUrl, anonKey: supabaseKey);
@@ -378,6 +378,7 @@ const { data, error } = await supabase
   .insert([
     { some_column: 'someValue', other_column: 'otherValue' },
   ])
+  .select()
 `,
     },
   }),
@@ -402,6 +403,7 @@ const { data, error } = await supabase
     { some_column: 'someValue' },
     { some_column: 'otherValue' },
   ])
+  .select()
 `,
     },
   }),
@@ -423,7 +425,8 @@ curl -X POST '${endpoint}/rest/v1/${resourceId}' \\
       code: `
 const { data, error } = await supabase
   .from('${resourceId}')
-  .upsert({ some_column: 'someValue' }).select()
+  .upsert({ some_column: 'someValue' })
+  .select()
 `,
     },
   }),
@@ -447,6 +450,7 @@ const { data, error } = await supabase
   .from('${resourceId}')
   .update({ other_column: 'otherValue' })
   .eq('some_column', 'someValue')
+  .select()
 `,
     },
   }),
@@ -463,7 +467,7 @@ curl -X DELETE '${endpoint}/rest/v1/${resourceId}?some_column=eq.someValue' \\
     js: {
       language: 'js',
       code: `
-const { data, error } = await supabase
+const { error } = await supabase
   .from('${resourceId}')
   .delete()
   .eq('some_column', 'someValue')
diff --git a/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js b/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
index c0d03ac03c..ddfa2ba75b 100644
--- a/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
+++ b/studio/components/to-be-cleaned/Dropdown/OrganizationDropdown.js
@@ -1,17 +1,11 @@
-import React from 'react'
 import { useRouter } from 'next/router'
-import { toJS } from 'mobx'
-import { Button, Dropdown, IconPlus } from 'ui'
-import { observer } from 'mobx-react-lite'
+
 import { useFlag } from 'hooks'
+import { Button, Dropdown, IconPlus } from 'ui'
 
 const OrganizationDropdown = ({ organizations }) => {
   const router = useRouter()
 
-  const organizationList = Object.values(toJS(organizations.data)).sort((a, b) =>
-    a.name.localeCompare(b.name)
-  )
-
   const orgCreationV2 = useFlag('orgcreationv2')
 
   return (
@@ -21,7 +15,7 @@ const OrganizationDropdown = ({ organizations }) => {
       overlay={
         <>
           <Dropdown.Label>Choose organization</Dropdown.Label>
-          {organizationList
+          {organizations
             .sort((a, b) => a.name.localeCompare(b.name))
             .map((x) => (
               <Dropdown.Item
@@ -53,4 +47,4 @@ const OrganizationDropdown = ({ organizations }) => {
     </Dropdown>
   )
 }
-export default observer(OrganizationDropdown)
+export default OrganizationDropdown
diff --git a/studio/components/ui/AlertError.tsx b/studio/components/ui/AlertError.tsx
new file mode 100644
index 0000000000..b8a8a614d9
--- /dev/null
+++ b/studio/components/ui/AlertError.tsx
@@ -0,0 +1,44 @@
+import Link from 'next/link'
+import { ResponseError } from 'types'
+import { Alert, Button } from 'ui'
+
+export interface AlertErrorProps {
+  ref?: string
+  subject?: string
+  error?: ResponseError | null
+}
+
+// [Joshen] To standardize the language for all error UIs
+
+const AlertError = ({ ref, subject, error }: AlertErrorProps) => {
+  const subjectString = subject?.replace(/ /g, '%20')
+  let href = `/support/new?category=dashboard_bug`
+
+  if (ref) href += `&ref=${ref}`
+  if (subjectString) href += `&subject=${subjectString}`
+  if (error) href += `&message=Error:%20${error.message}`
+
+  return (
+    <Alert
+      withIcon
+      variant="warning"
+      title={subject}
+      actions={[
+        <Link key="contact-support" href={href}>
+          <a>
+            <Button type="default" className="ml-4">
+              Contact support
+            </Button>
+          </a>
+        </Link>,
+      ]}
+    >
+      {error && <p className="mb-1">Error: {error.message}</p>}
+      <p>
+        Try refreshing your browser, but if the issue persists, please reach out to us via support.
+      </p>
+    </Alert>
+  )
+}
+
+export default AlertError
diff --git a/studio/components/ui/OveragesBanner/OveragesBanner.tsx b/studio/components/ui/OveragesBanner/OveragesBanner.tsx
index 9962c9d5ca..f07981140d 100644
--- a/studio/components/ui/OveragesBanner/OveragesBanner.tsx
+++ b/studio/components/ui/OveragesBanner/OveragesBanner.tsx
@@ -85,7 +85,7 @@ const OveragesBanner: FC<Props> = ({ tier, minimal }) => {
         actions={
           minimal ? (
             <div className="flex h-full items-center">
-              <Link href={`/project/${projectRef}/settings/billing/subscription`}>
+              <Link href={`/project/${projectRef}/settings/billing/usage`}>
                 <a>
                   <Button type="default">Explore usage details</Button>
                 </a>
diff --git a/studio/components/ui/PasswordStrengthBar.tsx b/studio/components/ui/PasswordStrengthBar.tsx
index 2c472fad53..4bd35b7b47 100644
--- a/studio/components/ui/PasswordStrengthBar.tsx
+++ b/studio/components/ui/PasswordStrengthBar.tsx
@@ -1,8 +1,4 @@
-import {
-  DEFAULT_MINIMUM_PASSWORD_STRENGTH,
-  PASSWORD_STRENGTH_COLOR,
-  PASSWORD_STRENGTH_PERCENTAGE,
-} from 'lib/constants'
+import { PASSWORD_STRENGTH_COLOR, PASSWORD_STRENGTH_PERCENTAGE } from 'lib/constants'
 
 interface Props {
   passwordStrengthScore: number
diff --git a/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx b/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
index e1bebe6e64..fce70a3dc2 100644
--- a/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
+++ b/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
@@ -1,12 +1,12 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
-import { IconAlertCircle, IconLoader, Input } from 'ui'
+import { Button, IconAlertCircle, IconBookOpen, IconLoader, Input } from 'ui'
 
-import Panel from 'components/ui/Panel'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
-import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
-import { checkPermissions } from 'hooks'
 import { useParams } from 'common/hooks'
+import Panel from 'components/ui/Panel'
+import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
+import { useProjectSettingsQuery } from 'data/config/project-settings-query'
+import { checkPermissions } from 'hooks'
 import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
 
 const DisplayApiSettings = () => {
@@ -44,7 +44,13 @@ const DisplayApiSettings = () => {
           <p className="text-sm text-scale-1000">
             Your API is secured behind an API gateway which requires an API Key for every request.
             <br />
-            You can use the keys below to use Supabase client libraries.
+            You can use the keys below in the Supabase client libraries.
+            <br />
+            <a href="https://supabase.com/docs#client-libraries" target="_blank" rel="noreferrer">
+              <Button icon={<IconBookOpen />} type="default" className="mt-4">
+                Client Docs
+              </Button>
+            </a>
           </p>
         </div>
       }
diff --git a/studio/components/ui/UpgradeToPro.tsx b/studio/components/ui/UpgradeToPro.tsx
index fb17a75452..fe0a055afa 100644
--- a/studio/components/ui/UpgradeToPro.tsx
+++ b/studio/components/ui/UpgradeToPro.tsx
@@ -1,13 +1,13 @@
-import { Button } from 'ui'
-import { observer } from 'mobx-react-lite'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { PermissionAction } from '@supabase/shared-types/out/constants'
 import Link from 'next/link'
 import { FC, ReactNode } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
 
-import { checkPermissions, useStore, useFlag } from 'hooks'
 import { useParams } from 'common/hooks'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { checkPermissions, useFlag } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { Button } from 'ui'
 
 interface Props {
   icon?: ReactNode
@@ -17,16 +17,15 @@ interface Props {
 }
 
 const UpgradeToPro: FC<Props> = ({ icon, primaryText, projectRef, secondaryText }) => {
-  const { ui } = useStore()
   const { ref } = useParams()
-  const tier = ui.selectedProject?.subscription_tier
+  const { project } = useProjectContext()
+  const tier = project?.subscription_tier
 
   const canUpdateSubscription = checkPermissions(
     PermissionAction.BILLING_WRITE,
     'stripe.subscriptions'
   )
   const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
-  const isEnterprise = tier === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
 
   return (
     <div
@@ -48,11 +47,11 @@ const UpgradeToPro: FC<Props> = ({ icon, primaryText, projectRef, secondaryText
           <Tooltip.Root delayDuration={0}>
             <Tooltip.Trigger>
               <Button type="primary" disabled={!canUpdateSubscription || projectUpdateDisabled}>
-                <Link href={`/project/${ref}/settings/billing/subscription?panel=subscriptionPlan`}>
+                <Link href={`/project/${ref}/settings/billing/subscription?panel=${tier === PRICING_TIER_PRODUCT_IDS.FREE ? 'subscriptionPlan' : 'customDomain'}`}>
                   <a>
                     {tier === PRICING_TIER_PRODUCT_IDS.FREE
                       ? 'Upgrade to Pro'
-                      : 'Modify subscription'}
+                      : 'Enable Custom Domain'}
                   </a>
                 </Link>
               </Button>
@@ -93,4 +92,4 @@ const UpgradeToPro: FC<Props> = ({ icon, primaryText, projectRef, secondaryText
   )
 }
 
-export default observer(UpgradeToPro)
+export default UpgradeToPro
diff --git a/studio/data/analytics/infra-monitoring-query.ts b/studio/data/analytics/infra-monitoring-query.ts
index 642baeacfb..1783de0193 100644
--- a/studio/data/analytics/infra-monitoring-query.ts
+++ b/studio/data/analytics/infra-monitoring-query.ts
@@ -8,7 +8,13 @@ import { analyticsKeys } from './keys'
 
 export type InfraMonitoringVariables = {
   projectRef?: string
-  attribute: 'cpu_usage' | 'disk_io_budget' | 'ram_usage' | 'disk_io_consumption' | 'swap_usage'
+  attribute:
+    | 'max_cpu_usage'
+    | 'avg_cpu_usage'
+    | 'disk_io_budget'
+    | 'ram_usage'
+    | 'disk_io_consumption'
+    | 'swap_usage'
   startDate?: string
   endDate?: string
   interval?: '1m' | '5m' | '10m' | '30m' | '1h' | '1d'
diff --git a/studio/data/oauth/authorized-app-revoke-mutation.ts b/studio/data/oauth/authorized-app-revoke-mutation.ts
new file mode 100644
index 0000000000..d47499a4a7
--- /dev/null
+++ b/studio/data/oauth/authorized-app-revoke-mutation.ts
@@ -0,0 +1,44 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { oauthAppKeys } from './keys'
+
+export type AuthorizedAppRevokeVariables = {
+  id: string
+  slug: string
+}
+
+export async function revokeAuthorizedApp({ id, slug }: AuthorizedAppRevokeVariables) {
+  if (!id) throw new Error('App ID is required')
+  if (!slug) throw new Error('Organization slug is required')
+
+  const response = await delete_(
+    `${API_ADMIN_URL}/organizations/${slug}/oauth/apps/${id}?type=authorized`
+  )
+  if (response.error) throw response.error
+  return response
+}
+
+type AuthorizedAppRevokeData = Awaited<ReturnType<typeof revokeAuthorizedApp>>
+
+export const useAuthorizedAppRevokeMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<AuthorizedAppRevokeData, unknown, AuthorizedAppRevokeVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<AuthorizedAppRevokeData, unknown, AuthorizedAppRevokeVariables>(
+    (vars) => revokeAuthorizedApp(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { slug } = variables
+        await queryClient.invalidateQueries(oauthAppKeys.authorizedApps(slug))
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/oauth/authorized-apps-query.ts b/studio/data/oauth/authorized-apps-query.ts
new file mode 100644
index 0000000000..6c37cdaf44
--- /dev/null
+++ b/studio/data/oauth/authorized-apps-query.ts
@@ -0,0 +1,59 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { oauthAppKeys } from './keys'
+import { ResponseError } from 'types'
+
+export type AuthorizedAppsVariables = {
+  slug?: string
+}
+
+export type AuthorizedApp = {
+  id: string
+  icon: string | null
+  name: string
+  website: string
+  authorized_at: string
+}
+
+export async function getAuthorizedApps({ slug }: AuthorizedAppsVariables, signal?: AbortSignal) {
+  if (!slug) throw new Error('Organization slug is required')
+
+  const response = await get(`${API_ADMIN_URL}/organizations/${slug}/oauth/apps?type=authorized`, {
+    signal,
+  })
+  if (response.error) throw response.error
+  return response as AuthorizedApp[]
+}
+
+export type AuthorizedAppsData = Awaited<ReturnType<typeof getAuthorizedApps>>
+export type AuthorizedAppsError = ResponseError
+
+export const useAuthorizedAppsQuery = <TData = AuthorizedAppsData>(
+  { slug }: AuthorizedAppsVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<AuthorizedAppsData, AuthorizedAppsError, TData> = {}
+) =>
+  useQuery<AuthorizedAppsData, AuthorizedAppsError, TData>(
+    oauthAppKeys.authorizedApps(slug),
+    ({ signal }) => getAuthorizedApps({ slug }, signal),
+    {
+      enabled: enabled && typeof slug !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useAuthorizedAppsPrefetch = ({ slug }: AuthorizedAppsVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (slug) {
+      client.prefetchQuery(oauthAppKeys.authorizedApps(slug), ({ signal }) =>
+        getAuthorizedApps({ slug }, signal)
+      )
+    }
+  }, [slug])
+}
diff --git a/studio/data/oauth/keys.ts b/studio/data/oauth/keys.ts
new file mode 100644
index 0000000000..53b0231094
--- /dev/null
+++ b/studio/data/oauth/keys.ts
@@ -0,0 +1,4 @@
+export const oauthAppKeys = {
+  oauthApps: (slug: string | undefined) => [slug, 'oauth-apps'] as const,
+  authorizedApps: (slug: string | undefined) => [slug, 'authorized-apps'] as const,
+}
diff --git a/studio/data/oauth/oauth-app-create-mutation.ts b/studio/data/oauth/oauth-app-create-mutation.ts
new file mode 100644
index 0000000000..14152e5472
--- /dev/null
+++ b/studio/data/oauth/oauth-app-create-mutation.ts
@@ -0,0 +1,63 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { oauthAppKeys } from './keys'
+
+export type OAuthAppCreateVariables = {
+  slug: string
+  name: string
+  website: string
+  icon?: string
+  redirect_uris: string[]
+}
+
+export type OAuthAppCreateResponse = {
+  id: string
+  client_id: string
+  client_secret: string
+}
+
+export async function createOAuthApp({
+  slug,
+  name,
+  website,
+  icon,
+  redirect_uris,
+}: OAuthAppCreateVariables) {
+  if (!slug) throw new Error('Organization slug is required')
+  if (!name) throw new Error('OAuth app name is required')
+  if (!website) throw new Error('OAuth app URL is required')
+
+  const response = await post(`${API_ADMIN_URL}/organizations/${slug}/oauth/apps`, {
+    name,
+    website,
+    icon,
+    redirect_uris,
+  })
+  if (response.error) throw response.error
+  return response as OAuthAppCreateResponse
+}
+
+type OAuthAppCreateData = Awaited<ReturnType<typeof createOAuthApp>>
+
+export const useOAuthAppCreateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<OAuthAppCreateData, unknown, OAuthAppCreateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<OAuthAppCreateData, unknown, OAuthAppCreateVariables>(
+    (vars) => createOAuthApp(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { slug } = variables
+        await queryClient.invalidateQueries(oauthAppKeys.oauthApps(slug))
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/oauth/oauth-app-delete-mutation.ts b/studio/data/oauth/oauth-app-delete-mutation.ts
new file mode 100644
index 0000000000..28592be674
--- /dev/null
+++ b/studio/data/oauth/oauth-app-delete-mutation.ts
@@ -0,0 +1,44 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { oauthAppKeys } from './keys'
+
+export type OAuthAppDeleteVariables = {
+  id: string
+  slug: string
+}
+
+export async function deleteOAuthApp({ id, slug }: OAuthAppDeleteVariables) {
+  if (!id) throw new Error('OAuth app ID is required')
+  if (!slug) throw new Error('Organization slug is required')
+
+  const response = await delete_(
+    `${API_ADMIN_URL}/organizations/${slug}/oauth/apps/${id}?type=published`
+  )
+  if (response.error) throw response.error
+  return response
+}
+
+type OAuthAppDeleteData = Awaited<ReturnType<typeof deleteOAuthApp>>
+
+export const useOAuthAppDeleteMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<OAuthAppDeleteData, unknown, OAuthAppDeleteVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<OAuthAppDeleteData, unknown, OAuthAppDeleteVariables>(
+    (vars) => deleteOAuthApp(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { slug } = variables
+        await queryClient.invalidateQueries(oauthAppKeys.oauthApps(slug))
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/oauth/oauth-app-update-mutation.ts b/studio/data/oauth/oauth-app-update-mutation.ts
new file mode 100644
index 0000000000..acc4ab79f3
--- /dev/null
+++ b/studio/data/oauth/oauth-app-update-mutation.ts
@@ -0,0 +1,61 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { put } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { oauthAppKeys } from './keys'
+
+export type OAuthAppUpdateVariables = {
+  id: string
+  slug: string
+  name: string
+  website: string
+  icon?: string | null
+  redirect_uris: string[]
+}
+
+export async function updateOAuthApp({
+  id,
+  slug,
+  name,
+  website,
+  icon,
+  redirect_uris,
+}: OAuthAppUpdateVariables) {
+  if (!id) throw new Error('OAuth app ID is required')
+  if (!slug) throw new Error('Organization slug is required')
+  if (!name) throw new Error('OAuth app name is required')
+  if (!website) throw new Error('OAuth app URL is required')
+  if (!redirect_uris || redirect_uris.length === 0) throw new Error('Redirect URIs are required')
+
+  const response = await put(`${API_ADMIN_URL}/organizations/${slug}/oauth/apps/${id}`, {
+    name,
+    website,
+    icon,
+    redirect_uris,
+  })
+  if (response.error) throw response.error
+  return response
+}
+
+type OAuthAppUpdateData = Awaited<ReturnType<typeof updateOAuthApp>>
+
+export const useOAuthAppUpdateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<OAuthAppUpdateData, unknown, OAuthAppUpdateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<OAuthAppUpdateData, unknown, OAuthAppUpdateVariables>(
+    (vars) => updateOAuthApp(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { slug } = variables
+        await queryClient.invalidateQueries(oauthAppKeys.oauthApps(slug))
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/oauth/oauth-apps-query.ts b/studio/data/oauth/oauth-apps-query.ts
new file mode 100644
index 0000000000..5dc6a229ce
--- /dev/null
+++ b/studio/data/oauth/oauth-apps-query.ts
@@ -0,0 +1,59 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { oauthAppKeys } from './keys'
+import { ResponseError } from 'types'
+
+export type OAuthAppsVariables = {
+  slug?: string
+}
+
+export type OAuthApp = {
+  id: string
+  icon: string | null
+  client_id: string
+  client_secret_alias: string
+  created_at: string
+  name: string
+  website: string
+  redirect_uris: string[]
+}
+
+export async function getOAuthApps({ slug }: OAuthAppsVariables, signal?: AbortSignal) {
+  if (!slug) throw new Error('Organization slug is required')
+
+  const response = await get(`${API_ADMIN_URL}/organizations/${slug}/oauth/apps?type=published`, {
+    signal,
+  })
+  if (response.error) throw response.error
+  return response as OAuthApp[]
+}
+
+export type OAuthAppsData = Awaited<ReturnType<typeof getOAuthApps>>
+export type OAuthAppsError = ResponseError
+
+export const useOAuthAppsQuery = <TData = OAuthAppsData>(
+  { slug }: OAuthAppsVariables,
+  { enabled = true, ...options }: UseQueryOptions<OAuthAppsData, OAuthAppsError, TData> = {}
+) =>
+  useQuery<OAuthAppsData, OAuthAppsError, TData>(
+    oauthAppKeys.oauthApps(slug),
+    ({ signal }) => getOAuthApps({ slug }, signal),
+    {
+      enabled: enabled && typeof slug !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useOAuthAppsPrefetch = ({ slug }: OAuthAppsVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (slug) {
+      client.prefetchQuery(oauthAppKeys.oauthApps(slug), ({ signal }) =>
+        getOAuthApps({ slug }, signal)
+      )
+    }
+  }, [slug])
+}
diff --git a/studio/data/organizations/keys.ts b/studio/data/organizations/keys.ts
index 72e646037b..a7b2d23016 100644
--- a/studio/data/organizations/keys.ts
+++ b/studio/data/organizations/keys.ts
@@ -7,4 +7,7 @@ export const organizationKeys = {
     ['organizations', slug, 'free-project-limit-check'] as const,
   customerProfile: (slug: string | undefined) =>
     ['organizations', slug, 'customer-profile'] as const,
+  migrateBilling: (slug: string | undefined) => ['organizations', slug, 'migrate-billing'] as const,
+  migrateBillingPreview: (slug: string | undefined) =>
+    ['organizations', slug, 'migrate-billing', 'preview'] as const,
 }
diff --git a/studio/data/organizations/organization-migrate-billing-mutation.ts b/studio/data/organizations/organization-migrate-billing-mutation.ts
new file mode 100644
index 0000000000..b9a9827173
--- /dev/null
+++ b/studio/data/organizations/organization-migrate-billing-mutation.ts
@@ -0,0 +1,66 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { organizationKeys } from './keys'
+
+export type OrganizationBillingMigrationVariables = {
+  organizationSlug?: string
+  tier?: string
+}
+
+type OrganizationBillingMigrationError = {
+  message: string
+}
+
+export async function migrateBilling({
+  organizationSlug,
+  tier,
+}: OrganizationBillingMigrationVariables) {
+  if (!organizationSlug) throw new Error('organizationSlug is required')
+  if (!tier) throw new Error('tier is required')
+
+  const payload: { tier: string } = {
+    tier,
+  }
+
+  const response = await post(
+    `${API_URL}/organizations/${organizationSlug}/org-billing-migration`,
+    payload
+  )
+  if (response.error) throw response.error
+
+  return response
+}
+
+type OrganizationBillingMigrationData = Awaited<ReturnType<typeof migrateBilling>>
+
+export const useOrganizationBillingMigrationMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<
+    OrganizationBillingMigrationData,
+    OrganizationBillingMigrationError,
+    OrganizationBillingMigrationVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    OrganizationBillingMigrationData,
+    OrganizationBillingMigrationError,
+    OrganizationBillingMigrationVariables
+  >((vars) => migrateBilling(vars), {
+    async onSuccess(data, variables, context) {
+      const { organizationSlug } = variables
+      await Promise.all([
+        queryClient.invalidateQueries(organizationKeys.detail(organizationSlug)),
+        queryClient.invalidateQueries(organizationKeys.list()),
+        queryClient.invalidateQueries(organizationKeys.freeProjectLimitCheck(organizationSlug)),
+      ])
+      await onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
diff --git a/studio/data/organizations/organization-migrate-billing-preview-query.ts b/studio/data/organizations/organization-migrate-billing-preview-query.ts
new file mode 100644
index 0000000000..ac6f1cc5c9
--- /dev/null
+++ b/studio/data/organizations/organization-migrate-billing-preview-query.ts
@@ -0,0 +1,86 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { organizationKeys } from './keys'
+
+export type OrganizationBillingMigrationPreviewVariables = {
+  organizationSlug?: string
+  tier?: string
+}
+
+export type OrganizationBillingMigrationPreviewResponse = {
+  added_credits: number
+}
+
+export async function previewOrganizationBillingMigration(
+  { organizationSlug, tier }: OrganizationBillingMigrationPreviewVariables,
+  signal?: AbortSignal
+) {
+  if (!organizationSlug) throw new Error('organizationSlug is required')
+  if (!tier) throw new Error('tier is required')
+
+  const payload: { tier: string } = {
+    tier,
+  }
+
+  const response = await post(
+    `${API_URL}/organizations/${organizationSlug}/org-billing-migration/preview`,
+    payload,
+    { signal }
+  )
+
+  if (response.error) throw response.error
+
+  return response as OrganizationBillingMigrationPreviewResponse
+}
+
+export type OrganizationBillingMigrationPreviewData = Awaited<
+  ReturnType<typeof previewOrganizationBillingMigration>
+>
+export type OrganizationBillingMigrationPreviewError = {
+  message: string
+}
+
+export const useOrganizationBillingMigrationPreview = <
+  TData = OrganizationBillingMigrationPreviewData
+>(
+  { organizationSlug, tier }: OrganizationBillingMigrationPreviewVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<
+    OrganizationBillingMigrationPreviewData,
+    OrganizationBillingMigrationPreviewError,
+    TData
+  > = {}
+) =>
+  useQuery<
+    OrganizationBillingMigrationPreviewData,
+    OrganizationBillingMigrationPreviewError,
+    TData
+  >(
+    organizationKeys.migrateBillingPreview(organizationSlug),
+    ({ signal }) => previewOrganizationBillingMigration({ organizationSlug, tier }, signal),
+    {
+      enabled: enabled && typeof organizationSlug !== 'undefined' && typeof tier !== 'undefined',
+      ...options,
+
+      retry: (failureCount, error) => {
+        // Don't retry on 400s
+        if (
+          typeof error === 'object' &&
+          error !== null &&
+          'code' in error &&
+          (error as any).code === 400
+        ) {
+          return false
+        }
+
+        if (failureCount < 3) {
+          return true
+        }
+
+        return false
+      },
+    }
+  )
diff --git a/studio/data/organizations/organizations-query.ts b/studio/data/organizations/organizations-query.ts
index 598c8b17df..c58439c1f6 100644
--- a/studio/data/organizations/organizations-query.ts
+++ b/studio/data/organizations/organizations-query.ts
@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { QueryClient, useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
 import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { useCallback } from 'react'
@@ -7,11 +7,13 @@ import { organizationKeys } from './keys'
 
 export type OrganizationsResponse = Organization[]
 
-export async function getOrganizations(signal?: AbortSignal) {
+export async function getOrganizations(signal?: AbortSignal): Promise<OrganizationsResponse> {
   const data = await get(`${API_URL}/organizations`, { signal })
   if (data.error) throw data.error
 
-  return data as OrganizationsResponse
+  const sorted = (data as Organization[]).sort((a, b) => a.name.localeCompare(b.name))
+
+  return sorted
 }
 
 export type OrganizationsData = Awaited<ReturnType<typeof getOrganizations>>
@@ -27,11 +29,16 @@ export const useOrganizationsQuery = <TData = OrganizationsData>({
     { enabled: enabled, ...options }
   )
 
+export function prefetchOrganizations(client: QueryClient) {
+  return client.prefetchQuery(organizationKeys.list(), ({ signal }) => getOrganizations(signal))
+}
+
 export const useOrganizationsPrefetch = () => {
   const client = useQueryClient()
 
-  return useCallback(
-    () => client.prefetchQuery(organizationKeys.list(), ({ signal }) => getOrganizations(signal)),
-    []
-  )
+  return useCallback(() => prefetchOrganizations(client), [])
+}
+
+export function invalidateOrganizationsQuery(client: QueryClient) {
+  return client.invalidateQueries(organizationKeys.list())
 }
diff --git a/studio/data/permissions/permissions-query.ts b/studio/data/permissions/permissions-query.ts
index 0dff675037..0fea45d187 100644
--- a/studio/data/permissions/permissions-query.ts
+++ b/studio/data/permissions/permissions-query.ts
@@ -1,8 +1,8 @@
 import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
 import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { useCallback } from 'react'
-import { Permission } from 'types'
+import { Permission, ResponseError } from 'types'
 import { permissionKeys } from './keys'
 
 export type PermissionsResponse = Permission[]
@@ -11,15 +11,13 @@ export async function getPermissions(signal?: AbortSignal) {
   const response = await get(`${API_URL}/profile/permissions`, {
     signal,
   })
-  if (response.error) {
-    throw response.error
-  }
+  if (response.error) throw response.error
 
   return response as PermissionsResponse
 }
 
 export type PermissionsData = Awaited<ReturnType<typeof getPermissions>>
-export type PermissionsError = unknown
+export type PermissionsError = ResponseError
 
 export const usePermissionsQuery = <TData = PermissionsData>(
   options: UseQueryOptions<PermissionsData, PermissionsError, TData> = {}
@@ -27,7 +25,10 @@ export const usePermissionsQuery = <TData = PermissionsData>(
   useQuery<PermissionsData, PermissionsError, TData>(
     permissionKeys.list(),
     ({ signal }) => getPermissions(signal),
-    options
+    {
+      ...options,
+      enabled: IS_PLATFORM && options.enabled,
+    }
   )
 
 export const usePermissionsPrefetch = () => {
diff --git a/studio/data/projects/keys.ts b/studio/data/projects/keys.ts
index 7a3d357e9c..8e3e5c10db 100644
--- a/studio/data/projects/keys.ts
+++ b/studio/data/projects/keys.ts
@@ -1,4 +1,10 @@
 export const projectKeys = {
-  list: () => ['projects'] as const,
-  detail: (projectRef: string | undefined) => ['projects', projectRef, 'detail'] as const,
+  list: () => ['all-projects'] as const,
+  detail: (projectRef: string | undefined) => ['project', projectRef, 'detail'] as const,
+  projectTransfer: (projectRef: string | undefined, targetOrganizationSlug: string | undefined) =>
+    ['projects', 'transfer', projectRef, targetOrganizationSlug] as const,
+  projectTransferPreview: (
+    projectRef: string | undefined,
+    targetOrganizationSlug: string | undefined
+  ) => ['projects', 'transfer', projectRef, targetOrganizationSlug, 'preview'] as const,
 }
diff --git a/studio/data/projects/project-detail-query.ts b/studio/data/projects/project-detail-query.ts
index 552ede409d..4e7acae201 100644
--- a/studio/data/projects/project-detail-query.ts
+++ b/studio/data/projects/project-detail-query.ts
@@ -26,6 +26,7 @@ export const useProjectDetailQuery = <TData = ProjectDetailData>(
     ({ signal }) => getProjectDetail({ ref }, signal),
     {
       enabled: enabled && typeof ref !== 'undefined',
+      staleTime: 30 * 1000, // 30 seconds
       ...options,
     }
   )
diff --git a/studio/data/projects/project-transfer-mutation.ts b/studio/data/projects/project-transfer-mutation.ts
new file mode 100644
index 0000000000..45cfe5abdc
--- /dev/null
+++ b/studio/data/projects/project-transfer-mutation.ts
@@ -0,0 +1,60 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { projectKeys } from './keys'
+
+export type ProjectTransferVariables = {
+  projectRef?: string
+  targetOrganizationSlug?: string
+}
+
+type ProjectTransferError = {
+  message: string
+}
+
+export async function transferProject({
+  projectRef,
+  targetOrganizationSlug,
+}: ProjectTransferVariables) {
+  if (!projectRef) throw new Error('projectRef is required')
+  if (!targetOrganizationSlug) throw new Error('targetOrganizationSlug is required')
+
+  const payload: { target_organization_slug: string } = {
+    target_organization_slug: targetOrganizationSlug,
+  }
+
+  const response = await post(`${API_URL}/projects/${projectRef}/transfer`, payload)
+  if (response.error) throw response.error
+
+  return response
+}
+
+type ProjectTransferData = Awaited<ReturnType<typeof transferProject>>
+
+export const useProjectTransferMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<ProjectTransferData, ProjectTransferError, ProjectTransferVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<ProjectTransferData, ProjectTransferError, ProjectTransferVariables>(
+    (vars) => transferProject(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { projectRef, targetOrganizationSlug } = variables
+        await Promise.all([
+          queryClient.invalidateQueries(
+            projectKeys.projectTransferPreview(projectRef, targetOrganizationSlug)
+          ),
+          queryClient.invalidateQueries(projectKeys.detail(projectRef)),
+          queryClient.invalidateQueries(projectKeys.list()),
+        ])
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/projects/project-transfer-preview-query.ts b/studio/data/projects/project-transfer-preview-query.ts
new file mode 100644
index 0000000000..a5edae66ca
--- /dev/null
+++ b/studio/data/projects/project-transfer-preview-query.ts
@@ -0,0 +1,123 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { projectKeys } from './keys'
+
+export type ProjectTransferPreviewVariables = {
+  projectRef?: string
+  targetOrganizationSlug?: string
+}
+
+export type PlanId = 'free' | 'pro' | 'team' | 'enterprise'
+
+type MemberExceedingFreeProjectLimit = {
+  name: string
+  limit: number
+}
+
+type PreviewTransferInfo = {
+  key: string
+  message: string
+}
+
+export type PreviewProjectTransferResponse = {
+  valid: boolean
+
+  warnings: PreviewTransferInfo[]
+  errors: PreviewTransferInfo[]
+
+  members_exceeding_free_project_limit: MemberExceedingFreeProjectLimit[]
+
+  has_permissions_on_source_organization: boolean
+  has_access_to_target_organization: boolean
+
+  source_project_eligible: boolean
+
+  target_organization_eligible: boolean | null
+  target_organization_has_free_project_slots: boolean | null
+
+  credits_on_source_organization: number
+  costs_on_target_organization: number
+  charge_on_target_organization: number
+
+  source_subscription_plan: PlanId
+  target_subscription_plan: PlanId | null
+}
+
+export async function previewProjectTransfer(
+  { projectRef, targetOrganizationSlug }: ProjectTransferPreviewVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) throw new Error('projectRef is required')
+  if (!targetOrganizationSlug) throw new Error('targetOrganizationSlug is required')
+
+  const response = await post(
+    `${API_URL}/projects/${projectRef}/transfer/preview`,
+    {
+      target_organization_slug: targetOrganizationSlug,
+    },
+    { signal }
+  )
+  if (response.error) throw response.error
+
+  return response as PreviewProjectTransferResponse
+}
+
+export type ProjectTransferPreviewData = Awaited<ReturnType<typeof previewProjectTransfer>>
+export type ProjectTransferPreviewError = {
+  message: string
+}
+
+export const useProjectTransferPreviewQuery = <TData = ProjectTransferPreviewData>(
+  { projectRef, targetOrganizationSlug }: ProjectTransferPreviewVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ProjectTransferPreviewData, ProjectTransferPreviewError, TData> = {}
+) =>
+  useQuery<ProjectTransferPreviewData, ProjectTransferPreviewError, TData>(
+    projectKeys.projectTransferPreview(projectRef, targetOrganizationSlug),
+    ({ signal }) => previewProjectTransfer({ projectRef, targetOrganizationSlug }, signal),
+    {
+      enabled:
+        enabled &&
+        typeof projectRef !== 'undefined' &&
+        typeof targetOrganizationSlug !== 'undefined',
+      ...options,
+
+      retry: (failureCount, error) => {
+        // Don't retry on 400s
+        if (
+          typeof error === 'object' &&
+          error !== null &&
+          'code' in error &&
+          (error as any).code === 400
+        ) {
+          return false
+        }
+
+        if (failureCount < 3) {
+          return true
+        }
+
+        return false
+      },
+    }
+  )
+
+export const useProjectTransferPreviewPrefetch = ({
+  projectRef,
+  targetOrganizationSlug,
+}: ProjectTransferPreviewVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef && targetOrganizationSlug) {
+      client.prefetchQuery(
+        projectKeys.projectTransferPreview(projectRef, targetOrganizationSlug),
+        ({ signal }) => previewProjectTransfer({ projectRef, targetOrganizationSlug }, signal)
+      )
+    }
+  }, [projectRef, targetOrganizationSlug])
+}
diff --git a/studio/data/projects/projects-query.ts b/studio/data/projects/projects-query.ts
index 7429a1fd7c..4767ace9ba 100644
--- a/studio/data/projects/projects-query.ts
+++ b/studio/data/projects/projects-query.ts
@@ -1,8 +1,9 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { QueryClient, useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { useCallback, useRef } from 'react'
+
 import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { useCallback } from 'react'
-import { Project } from 'types'
+import { Project, ResponseError } from 'types'
 import { projectKeys } from './keys'
 
 export type ProjectsVariables = {
@@ -16,7 +17,7 @@ export async function getProjects(signal?: AbortSignal) {
 }
 
 export type ProjectsData = Awaited<ReturnType<typeof getProjects>>
-export type ProjectsError = unknown
+export type ProjectsError = ResponseError
 
 export const useProjectsQuery = <TData = ProjectsData>({
   enabled = true,
@@ -28,10 +29,75 @@ export const useProjectsQuery = <TData = ProjectsData>({
     { enabled: enabled, ...options }
   )
 
-export const useProjectsPrefetch = () => {
+export function prefetchProjects(client: QueryClient) {
+  return client.prefetchQuery(projectKeys.list(), ({ signal }) => getProjects(signal))
+}
+
+export function useProjectsPrefetch() {
   const client = useQueryClient()
 
   return useCallback(() => {
-    client.prefetchQuery(projectKeys.list(), ({ signal }) => getProjects(signal))
-  }, [])
+    prefetchProjects(client)
+  }, [client])
+}
+
+export function useAutoProjectsPrefetch() {
+  const prefetch = useProjectsPrefetch()
+
+  const called = useRef<boolean>(false)
+  if (called.current === false) {
+    called.current = true
+    prefetch()
+  }
+}
+
+export function invalidateProjectsQuery(client: QueryClient) {
+  return client.invalidateQueries(projectKeys.list())
+}
+
+export function setProjectStatus(
+  client: QueryClient,
+  projectRef: Project['ref'],
+  status: Project['status']
+) {
+  client.setQueriesData<Project[] | undefined>(
+    projectKeys.list(),
+    (old) => {
+      if (!old) return old
+
+      return old.map((project) => {
+        if (project.ref === projectRef) {
+          return { ...project, status }
+        }
+        return project
+      })
+    },
+    { updatedAt: Date.now() }
+  )
+
+  client.setQueriesData<Project>(
+    projectKeys.detail(projectRef),
+    (old) => {
+      if (!old) return old
+
+      return { ...old, status }
+    },
+    { updatedAt: Date.now() }
+  )
+}
+
+export function setProjectPostgrestStatus(
+  client: QueryClient,
+  projectRef: Project['ref'],
+  status: Project['postgrestStatus']
+) {
+  client.setQueriesData<Project>(
+    projectKeys.detail(projectRef),
+    (old) => {
+      if (!old) return old
+
+      return { ...old, postgrestStatus: status }
+    },
+    { updatedAt: Date.now() }
+  )
 }
diff --git a/studio/data/subscriptions/keys.ts b/studio/data/subscriptions/keys.ts
index c8f1fddaea..16b4998d66 100644
--- a/studio/data/subscriptions/keys.ts
+++ b/studio/data/subscriptions/keys.ts
@@ -3,6 +3,8 @@
 export const subscriptionKeys = {
   subscriptionV2: (projectRef: string | undefined) =>
     ['projects', projectRef, 'subscriptionV2'] as const,
+  orgSubscription: (orgSlug: string | undefined) =>
+    ['organizations', orgSlug, 'subscription'] as const,
   addons: (projectRef: string | undefined) => ['projects', projectRef, 'addons'] as const,
   plans: (projectRef: string | undefined) => ['projects', projectRef, 'plans'] as const,
   preview: (projectRef: string | undefined) =>
diff --git a/studio/data/subscriptions/org-subscription-query.ts b/studio/data/subscriptions/org-subscription-query.ts
new file mode 100644
index 0000000000..3429664c4a
--- /dev/null
+++ b/studio/data/subscriptions/org-subscription-query.ts
@@ -0,0 +1,90 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { subscriptionKeys } from './keys'
+
+export type OrgSubscriptionVariables = {
+  orgSlug?: string
+}
+
+export type PlanId = 'free' | 'pro' | 'team' | 'enterprise'
+
+export type OrgSubscriptionResponse = {
+  billing_cycle_anchor: number
+  current_period_start: number
+  current_period_end: number
+  next_invoice_at: number
+  usage_billing_enabled: boolean
+  plan: {
+    id: PlanId
+    name: string
+    price: number
+  }
+  addons: {
+    name: string
+    supabase_prod_id: string
+    price: number
+  }[]
+  usage_fees: {
+    metric: string
+    pricingStrategy: 'UNIT' | 'PACKAGE'
+    pricingOptions: {
+      perUnitPrice?: number
+      packagePrice?: number
+      packageSize?: number
+      freeUnits: number
+    }
+  }[]
+  payment_method_id?: string
+  payment_method_type: 'invoice' | 'card' | 'none'
+  payment_method_card_details?: {
+    last_4_digits: string
+    brand: string
+    expiry_month: number
+    expiry_year: number
+  }
+}
+
+export async function getOrgSubscription(
+  { orgSlug }: OrgSubscriptionVariables,
+  signal?: AbortSignal
+) {
+  if (!orgSlug) throw new Error('orgSlug is required')
+
+  const response = await get(`${API_URL}/organizations/${orgSlug}/billing/subscription`, { signal })
+  if (response.error) throw response.error
+
+  return response as OrgSubscriptionResponse
+}
+
+export type OrgSubscriptionData = Awaited<ReturnType<typeof getOrgSubscription>>
+export type OrgSubscriptionError = unknown
+
+export const useOrgSubscriptionQuery = <TData = OrgSubscriptionData>(
+  { orgSlug }: OrgSubscriptionVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<OrgSubscriptionData, OrgSubscriptionError, TData> = {}
+) =>
+  useQuery<OrgSubscriptionData, OrgSubscriptionError, TData>(
+    subscriptionKeys.orgSubscription(orgSlug),
+    ({ signal }) => getOrgSubscription({ orgSlug }, signal),
+    {
+      enabled: enabled && typeof orgSlug !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useOrgSubscriptionPrefetch = ({ orgSlug }: OrgSubscriptionVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (orgSlug) {
+      client.prefetchQuery(subscriptionKeys.orgSubscription(orgSlug), ({ signal }) =>
+        getOrgSubscription({ orgSlug }, signal)
+      )
+    }
+  }, [orgSlug])
+}
diff --git a/studio/hooks/index.ts b/studio/hooks/index.ts
index 25a3607e16..c8c4d6b4db 100644
--- a/studio/hooks/index.ts
+++ b/studio/hooks/index.ts
@@ -1,7 +1,9 @@
+export * from './deprecated'
+export * from './misc/useCheckPermissions'
+export * from './misc/useImmutableValue'
+export * from './misc/useLocalStorage'
+export * from './misc/useSelectedOrganization'
+export * from './misc/useSelectedProject'
 export * from './misc/useStore'
 export * from './misc/withAuth'
-export * from './misc/useImmutableValue'
-export * from './misc/useCheckPermissions'
-export * from './misc/useLocalStorage'
-export * from './deprecated'
 export * from './ui'
diff --git a/studio/hooks/misc/useCheckPermissions.ts b/studio/hooks/misc/useCheckPermissions.ts
index 3866b4295a..c54c0a1717 100644
--- a/studio/hooks/misc/useCheckPermissions.ts
+++ b/studio/hooks/misc/useCheckPermissions.ts
@@ -1,35 +1,79 @@
-import { useStore } from 'hooks'
 import jsonLogic from 'json-logic-js'
+
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { IS_PLATFORM } from 'lib/constants'
+import { Permission } from 'types'
+import { useSelectedOrganization } from './useSelectedOrganization'
 
 const toRegexpString = (actionOrResource: string) =>
   `^${actionOrResource.replace('.', '\\.').replace('%', '.*')}$`
 
-export function checkPermissions(
+export function doPermissionsCheck(
+  permissions: Permission[] | undefined,
   action: string,
   resource: string,
   data?: object,
   organizationId?: number
 ) {
-  if (!IS_PLATFORM) return true
-
-  const { ui } = useStore()
-  const orgId = organizationId ?? ui?.selectedOrganization?.id
-
-  return (ui?.permissions ?? [])
+  return (permissions ?? [])
     .filter(
-      (permission: {
-        actions: string[]
-        condition: jsonLogic.RulesLogic
-        organization_id: number
-        resources: string[]
-      }) =>
+      (permission) =>
+        permission.organization_id === organizationId &&
         permission.actions.some((act) => (action ? action.match(toRegexpString(act)) : null)) &&
-        permission.resources.some((res) => resource.match(toRegexpString(res))) &&
-        permission.organization_id === orgId
+        permission.resources.some((res) => resource.match(toRegexpString(res)))
     )
     .some(
       ({ condition }: { condition: jsonLogic.RulesLogic }) =>
         condition === null || jsonLogic.apply(condition, { resource_name: resource, ...data })
     )
 }
+
+export function useGetPermissions(
+  permissionsOverride?: Permission[],
+  organizationIdOverride?: number,
+  enabled = true
+) {
+  const permissionsResult = usePermissionsQuery({
+    enabled: permissionsOverride === undefined && enabled,
+  })
+
+  const permissions =
+    permissionsOverride === undefined ? permissionsResult.data : permissionsOverride
+
+  const organizationResult = useSelectedOrganization({
+    enabled: organizationIdOverride === undefined && enabled,
+  })
+
+  const organization =
+    organizationIdOverride === undefined ? organizationResult : { id: organizationIdOverride }
+  const organizationId = organization?.id
+
+  return {
+    permissions,
+    organizationId,
+  }
+}
+
+export function useCheckPermissions(
+  action: string,
+  resource: string,
+  data?: object,
+  // [Joshen] Pass the variables if you want to avoid hooks in this
+  // e.g If you want to use useCheckPermissions in a loop like organization settings
+  organizationId?: number,
+  permissions?: Permission[]
+) {
+  const { permissions: allPermissions, organizationId: orgId } = useGetPermissions(
+    permissions,
+    organizationId
+  )
+
+  if (!IS_PLATFORM) return true
+
+  return doPermissionsCheck(allPermissions, action, resource, data, orgId)
+}
+
+/**
+ * @deprecated use useCheckPermissions instead
+ */
+export const checkPermissions = useCheckPermissions
diff --git a/studio/hooks/misc/useSelectedOrganization.ts b/studio/hooks/misc/useSelectedOrganization.ts
new file mode 100644
index 0000000000..c2446380fc
--- /dev/null
+++ b/studio/hooks/misc/useSelectedOrganization.ts
@@ -0,0 +1,17 @@
+import { useParams } from 'common'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useMemo } from 'react'
+
+import { useSelectedProject } from './useSelectedProject'
+
+export function useSelectedOrganization({ enabled = true } = {}) {
+  const { slug } = useParams()
+  const { data } = useOrganizationsQuery({ enabled })
+  const selectedProject = useSelectedProject()
+
+  return useMemo(() => {
+    return data?.find(
+      (org) => org.slug === slug || (selectedProject && org.id === selectedProject.organization_id)
+    )
+  }, [data, selectedProject, slug])
+}
diff --git a/studio/hooks/misc/useSelectedProject.ts b/studio/hooks/misc/useSelectedProject.ts
new file mode 100644
index 0000000000..824bb14a07
--- /dev/null
+++ b/studio/hooks/misc/useSelectedProject.ts
@@ -0,0 +1,9 @@
+import { useParams } from 'common'
+import { useProjectDetailQuery } from 'data/projects/project-detail-query'
+
+export function useSelectedProject() {
+  const { ref } = useParams()
+  const { data } = useProjectDetailQuery({ ref })
+
+  return data
+}
diff --git a/studio/hooks/misc/useStore.tsx b/studio/hooks/misc/useStore.tsx
index 2248cda5ee..025301498b 100644
--- a/studio/hooks/misc/useStore.tsx
+++ b/studio/hooks/misc/useStore.tsx
@@ -35,8 +35,6 @@ export const StoreProvider: FC<StoreProvider> = ({ children, rootStore }) => {
   }, [isDarkMode, monaco])
 
   useEffect(() => {
-    ui.load()
-
     autorun(() => {
       if (ui.notification) {
         const { id, category, error, message, description, progress, duration } = ui.notification
diff --git a/studio/hooks/misc/withAuth.tsx b/studio/hooks/misc/withAuth.tsx
index be44628398..21812c5c3f 100644
--- a/studio/hooks/misc/withAuth.tsx
+++ b/studio/hooks/misc/withAuth.tsx
@@ -2,13 +2,13 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { ComponentType, useEffect } from 'react'
 
-import { usePermissionsQuery } from 'data/permissions/permissions-query'
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useSelectedProject, useStore } from 'hooks'
 import { useAuth } from 'lib/auth'
 import { IS_PLATFORM } from 'lib/constants'
-import { getReturnToPath, STORAGE_KEY } from 'lib/gotrue'
-import { isNextPageWithLayout, NextPageWithLayout } from 'types'
+import { STORAGE_KEY, getReturnToPath } from 'lib/gotrue'
+import { NextPageWithLayout, isNextPageWithLayout } from 'types'
 import Error500 from '../../pages/500'
 
 const PLATFORM_ONLY_PAGES = [
@@ -30,26 +30,17 @@ export function withAuth<T>(
   const WithAuthHOC: ComponentType<T> = (props: any) => {
     const router = useRouter()
     const { basePath } = router
-    const { ref, slug } = useParams()
+    const { ref } = useParams()
     const rootStore = useStore()
     const { isLoading, session } = useAuth()
 
-    const { app, ui } = rootStore
+    const { ui } = rootStore
     const page = router.pathname.split('/').slice(3).join('/')
 
     const redirectTo = options?.redirectTo ?? defaultRedirectTo(ref)
     const redirectIfFound = options?.redirectIfFound
 
-    useEffect(() => {
-      if (!app.organizations.isInitialized) app.organizations.load()
-      if (!app.projects.isInitialized) app.projects.load()
-    }, [app.organizations.isInitialized, app.projects.isInitialized])
-
     usePermissionsQuery({
-      enabled: IS_PLATFORM,
-      onSuccess(permissions) {
-        ui.setPermissions(permissions)
-      },
       onError(error: any) {
         ui.setNotification({
           error,
@@ -75,14 +66,12 @@ export function withAuth<T>(
       }
     }, [isRedirecting, redirectTo])
 
+    const selectedProject = useSelectedProject()
     useEffect(() => {
-      if (router.isReady) {
-        if (ref) {
-          rootStore.setProjectRef(ref)
-        }
-        rootStore.setOrganizationSlug(slug)
+      if (selectedProject) {
+        rootStore.setProject(selectedProject)
       }
-    }, [isLoading, router.isReady, ref, slug])
+    }, [selectedProject])
 
     if (!isLoading && !isRedirecting && !isLoggedIn) {
       return <Error500 />
diff --git a/studio/lib/auth.tsx b/studio/lib/auth.tsx
index 762cc3da51..a0e3e21ed7 100644
--- a/studio/lib/auth.tsx
+++ b/studio/lib/auth.tsx
@@ -1,6 +1,6 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
-import { PropsWithChildren, useCallback, useEffect, useRef } from 'react'
+import { PropsWithChildren, useCallback, useEffect } from 'react'
 
 import {
   AuthContext as AuthContextInternal,
@@ -8,17 +8,16 @@ import {
   gotrueClient,
   useTelemetryProps,
 } from 'common'
-import { useProfileQuery } from 'data/profile/profile-query'
 import { useStore } from 'hooks'
 import Telemetry from 'lib/telemetry'
 import { GOTRUE_ERRORS, IS_PLATFORM } from './constants'
-import { clearLocalStorage } from './local-storage'
-import { useProfileCreateMutation } from 'data/profile/profile-create-mutation'
+import { clearLocalStorage, resetSignInClicks } from './local-storage'
 
 export const AuthContext = AuthContextInternal
 
 export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const router = useRouter()
   const telemetryProps = useTelemetryProps()
 
@@ -55,41 +54,6 @@ export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
     return subscription.unsubscribe
   }, [])
 
-  const { mutate: createProfile } = useProfileCreateMutation({
-    onSuccess() {
-      Telemetry.sendEvent(
-        { category: 'conversion', action: 'sign_up', label: '' },
-        telemetryProps,
-        router
-      )
-    },
-    onError(err) {
-      ui.setNotification({
-        category: 'error',
-        message: 'Failed to create your profile. Please refresh to try again.',
-      })
-    },
-  })
-
-  // Track telemetry for the current user
-  useProfileQuery({
-    onSuccess(profile) {
-      Telemetry.sendIdentify(profile, telemetryProps)
-
-      // [Joshen] Temp fix: For new users, the GET profile call also creates a default org
-      // But because the dashboard's logged in state is using gotrue as the source of truth
-      // the home page loads before the GET profile call completes (and consequently before the
-      // creation of the default org). Hence why calling org load here
-      app.organizations.load()
-    },
-    onError(err) {
-      // if the user does not yet exist, create a profile for them
-      if (typeof err === 'object' && err !== null && 'code' in err && (err as any).code === 404) {
-        createProfile()
-      }
-    },
-  })
-
   return <AuthProviderInternal alwaysLoggedIn={!IS_PLATFORM}>{children}</AuthProviderInternal>
 }
 
@@ -99,10 +63,12 @@ export function useSignOut() {
   const queryClient = useQueryClient()
 
   return useCallback(async () => {
+    resetSignInClicks()
+
     const result = await gotrueClient.signOut()
     clearLocalStorage()
     await queryClient.resetQueries()
 
     return result
-  }, [])
+  }, [queryClient])
 }
diff --git a/studio/lib/constants/infrastructure.ts b/studio/lib/constants/infrastructure.ts
index eed060ab17..f86304825c 100644
--- a/studio/lib/constants/infrastructure.ts
+++ b/studio/lib/constants/infrastructure.ts
@@ -27,7 +27,7 @@ export const FLY_REGIONS = {
 } as const
 
 export const AWS_REGIONS_DEFAULT =
-  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? AWS_REGIONS.SOUTHEAST_ASIA : AWS_REGIONS.EAST_US
+  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? AWS_REGIONS.SOUTHEAST_ASIA : AWS_REGIONS.WEST_US
 
 // TO DO, change default to US region for prod
 export const FLY_REGIONS_DEFAULT = FLY_REGIONS.SOUTHEAST_ASIA
@@ -38,6 +38,7 @@ export const PRICING_TIER_LABELS = {
 }
 
 export const PRICING_TIER_LABELS_ORG = {
+  FREE: 'Free - $0/month',
   PRO: 'Pro - $25/month',
   TEAM: 'Team - $599/month',
 }
@@ -53,7 +54,8 @@ export const PRICING_TIER_PRODUCT_IDS = {
 export const PRICING_TIER_FREE_KEY = 'FREE'
 export const PRICING_TIER_DEFAULT_KEY = 'FREE'
 
-export const DEFAULT_PROVIDER: CloudProvider = process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? 'FLY' : 'AWS'
+export const DEFAULT_PROVIDER: CloudProvider =
+  process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod' ? 'FLY' : 'AWS'
 
 export const PROVIDERS = {
   FLY: {
@@ -134,6 +136,7 @@ export const PROJECT_STATUS = {
   RESTORING: 'RESTORING',
   RESTORATION_FAILED: 'RESTORATION_FAILED',
   UPGRADING: 'UPGRADING',
+  PAUSING: 'PAUSING',
 }
 
 export const DEFAULT_MINIMUM_PASSWORD_STRENGTH = 4
diff --git a/studio/lib/constants/metrics.tsx b/studio/lib/constants/metrics.tsx
index 9ab4fb3374..360ac5352e 100644
--- a/studio/lib/constants/metrics.tsx
+++ b/studio/lib/constants/metrics.tsx
@@ -40,8 +40,14 @@ export const METRIC_CATEGORIES = {
 
 export const METRICS = [
   {
-    key: 'cpu_usage',
-    label: 'CPU % usage',
+    key: 'avg_cpu_usage',
+    label: 'Average CPU % usage',
+    provider: 'infra-monitoring',
+    category: METRIC_CATEGORIES.INSTANCE,
+  },
+  {
+    key: 'max_cpu_usage',
+    label: 'Max CPU % usage',
     provider: 'infra-monitoring',
     category: METRIC_CATEGORIES.INSTANCE,
   },
diff --git a/studio/lib/helpers.ts b/studio/lib/helpers.ts
index 65c39154ed..b5d09d62ab 100644
--- a/studio/lib/helpers.ts
+++ b/studio/lib/helpers.ts
@@ -246,3 +246,13 @@ export const detectOS = () => {
     return undefined
   }
 }
+
+export const isValidHttpUrl = (value: string) => {
+  let url: URL
+  try {
+    url = new URL(value)
+  } catch (_) {
+    return false
+  }
+  return url.protocol === 'http:' || url.protocol === 'https:'
+}
diff --git a/studio/lib/local-storage.ts b/studio/lib/local-storage.ts
index 611bcd1616..ce3d2b3f27 100644
--- a/studio/lib/local-storage.ts
+++ b/studio/lib/local-storage.ts
@@ -1,4 +1,12 @@
-export const LOCAL_STORAGE_KEYS_ALLOWLIST = ['graphiql:theme', 'theme', 'supabaseDarkMode']
+import { IS_PLATFORM } from './constants'
+
+export const LOCAL_STORAGE_KEYS_ALLOWLIST = [
+  'graphiql:theme',
+  'theme',
+  'supabaseDarkMode',
+  'supabase.dashboard.sign_in_clicks',
+  'supabase.dashboard.auth.debug',
+]
 
 export function clearLocalStorage() {
   for (const key in localStorage) {
@@ -7,3 +15,47 @@ export function clearLocalStorage() {
     }
   }
 }
+
+function inferSignInClicks() {
+  if (localStorage.getItem('supabase.dashboard.sign_in_clicks')) {
+    return
+  }
+
+  localStorage.setItem(
+    'supabase.dashboard.sign_in_clicks',
+    localStorage.getItem('supabase.dashboard.auth.token') ? '1' : '0'
+  )
+}
+
+export function getSignInClicks(): number {
+  let count: number | null = null
+
+  try {
+    count = JSON.parse(localStorage.getItem('supabase.dashboard.sign_in_clicks') || '0')
+  } catch (e: any) {
+    // do nothing
+  }
+
+  return count || 0
+}
+
+export function incrementSignInClicks(): number {
+  const clicks = getSignInClicks()
+
+  localStorage.setItem('supabase.dashboard.sign_in_clicks', JSON.stringify(clicks + 1))
+
+  return clicks + 1
+}
+
+export function resetSignInClicks(): number {
+  const clicks = getSignInClicks()
+
+  localStorage.setItem('supabase.dashboard.sign_in_clicks', '0')
+
+  return clicks
+}
+
+if (globalThis && globalThis.localStorage && IS_PLATFORM) {
+  // populate the value based on the current local storage state
+  inferSignInClicks()
+}
diff --git a/studio/lib/profile.tsx b/studio/lib/profile.tsx
new file mode 100644
index 0000000000..6e9ae6a7ce
--- /dev/null
+++ b/studio/lib/profile.tsx
@@ -0,0 +1,75 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useRouter } from 'next/router'
+import { PropsWithChildren, createContext, useContext, useMemo } from 'react'
+
+import { useTelemetryProps } from 'common'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useProfileCreateMutation } from 'data/profile/profile-create-mutation'
+import { useProfileQuery } from 'data/profile/profile-query'
+import { Profile } from 'data/profile/types'
+import { useStore } from 'hooks'
+import Telemetry from 'lib/telemetry'
+
+export type ProfileContextType = {
+  profile: Profile | undefined
+  isLoading: boolean
+}
+
+export const ProfileContext = createContext<ProfileContextType>({
+  profile: undefined,
+  isLoading: true,
+})
+
+export const ProfileProvider = ({ children }: PropsWithChildren<{}>) => {
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
+  const router = useRouter()
+  const telemetryProps = useTelemetryProps()
+
+  const { mutate: createProfile, isLoading: isCreatingProfile } = useProfileCreateMutation({
+    async onSuccess() {
+      Telemetry.sendEvent(
+        { category: 'conversion', action: 'sign_up', label: '' },
+        telemetryProps,
+        router
+      )
+
+      await invalidateOrganizationsQuery(queryClient)
+    },
+    onError(err) {
+      ui.setNotification({
+        category: 'error',
+        message: 'Failed to create your profile. Please refresh to try again.',
+      })
+    },
+  })
+
+  // Track telemetry for the current user
+  const { data: profile, isLoading: isLoadingProfile } = useProfileQuery({
+    onSuccess(profile) {
+      Telemetry.sendIdentify(profile, telemetryProps)
+    },
+    onError(err) {
+      // if the user does not yet exist, create a profile for them
+      if (typeof err === 'object' && err !== null && 'code' in err && (err as any).code === 404) {
+        createProfile()
+      }
+    },
+  })
+
+  const { isLoading: isLoadingPermissions } = usePermissionsQuery()
+
+  const value = useMemo(() => {
+    const isLoading = isLoadingProfile || isCreatingProfile || isLoadingPermissions
+
+    return {
+      profile,
+      isLoading,
+    }
+  }, [isLoadingProfile, isCreatingProfile, isLoadingPermissions, profile])
+
+  return <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
+}
+
+export const useProfile = () => useContext(ProfileContext)
diff --git a/studio/lib/telemetry.ts b/studio/lib/telemetry.ts
index bb4df3610b..5150ec8ad3 100644
--- a/studio/lib/telemetry.ts
+++ b/studio/lib/telemetry.ts
@@ -81,11 +81,11 @@ const sendActivity = (
     ...(projectRef && { projectRef }),
     ...(router.route.includes('/project/') &&
       !projectRef && {
-        projectRef: router.route.split('/project/')[1].split('/')[0],
+        projectRef: router.asPath.split('/project/')[1].split('/')[0],
       }),
     ...(orgId && { orgId }),
     ...(router.route.includes('/org/') &&
-      !orgId && { orgId: router.route.split('/org/')[1].split('/')[0] }),
+      !orgId && { orgId: router.asPath.split('/org/')[1].split('/')[0] }),
   }
   return post(`${API_URL}/telemetry/activity`, properties)
 }
diff --git a/studio/lib/upload.ts b/studio/lib/upload.ts
new file mode 100644
index 0000000000..5f14137409
--- /dev/null
+++ b/studio/lib/upload.ts
@@ -0,0 +1,45 @@
+import { createClient } from '@supabase/supabase-js'
+
+const SUPPORT_API_URL = process.env.NEXT_PUBLIC_SUPPORT_API_URL || ''
+const SUPPORT_API_KEY = process.env.NEXT_PUBLIC_SUPPORT_ANON_KEY || ''
+
+// [Joshen TODO] Feedback form and support attachments should use this
+export const uploadAttachment = async (
+  bucket: string,
+  fileName: string,
+  image: File,
+  getUrl: boolean = true
+) => {
+  const supabaseClient = createClient(SUPPORT_API_URL, SUPPORT_API_KEY, {
+    auth: {
+      persistSession: false,
+      autoRefreshToken: false,
+      // @ts-ignore
+      multiTab: false,
+      detectSessionInUrl: false,
+      localStorage: {
+        getItem: (key: string) => undefined,
+        setItem: (key: string, value: string) => {},
+        removeItem: (key: string) => {},
+      },
+    },
+  })
+
+  const options = { cacheControl: '3600' }
+
+  const { data: file, error } = await supabaseClient.storage
+    .from(bucket)
+    .upload(fileName, image, options)
+
+  if (error) {
+    console.error('Failed to upload:', error)
+    return undefined
+  }
+
+  if (file && getUrl) {
+    const { data } = await supabaseClient.storage.from(bucket).getPublicUrl(file.path)
+    return data?.publicUrl
+  }
+
+  return undefined
+}
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx
index 7f707309d2..6051ab6838 100644
--- a/studio/pages/_app.tsx
+++ b/studio/pages/_app.tsx
@@ -35,6 +35,7 @@ import { RootStore } from 'stores'
 import HCaptchaLoadedStore from 'stores/hcaptcha-loaded-store'
 import { StoreProvider } from 'hooks'
 import { AuthProvider } from 'lib/auth'
+import { ProfileProvider } from 'lib/profile'
 import { dart } from 'lib/constants/prism'
 import { useRootQueryClient } from 'data/query-client'
 
@@ -122,38 +123,39 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
     },
     [supabase]
   )
-  //
 
   return (
     <QueryClientProvider client={queryClient}>
       <Hydrate state={pageProps.dehydratedState}>
         <StoreProvider rootStore={rootStore}>
           <AuthContainer>
-            <FlagProvider>
-              <Head>
-                <title>Supabase</title>
-                <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-              </Head>
-              <Favicons />
+            <ProfileProvider>
+              <FlagProvider>
+                <Head>
+                  <title>Supabase</title>
+                  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+                </Head>
+                <Favicons />
 
-              <PageTelemetry>
-                <TooltipProvider>
-                  <RouteValidationWrapper>
-                    <ThemeProvider>
-                      <CommandMenuWrapper>
-                        <AppBannerWrapper>
-                          {getLayout(<Component {...pageProps} />)}
-                        </AppBannerWrapper>
-                      </CommandMenuWrapper>
-                    </ThemeProvider>
-                  </RouteValidationWrapper>
-                </TooltipProvider>
-              </PageTelemetry>
+                <PageTelemetry>
+                  <TooltipProvider>
+                    <RouteValidationWrapper>
+                      <ThemeProvider>
+                        <CommandMenuWrapper>
+                          <AppBannerWrapper>
+                            {getLayout(<Component {...pageProps} />)}
+                          </AppBannerWrapper>
+                        </CommandMenuWrapper>
+                      </ThemeProvider>
+                    </RouteValidationWrapper>
+                  </TooltipProvider>
+                </PageTelemetry>
 
-              <HCaptchaLoadedStore />
-              <PortalToast />
-              <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
-            </FlagProvider>
+                <HCaptchaLoadedStore />
+                <PortalToast />
+                <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
+              </FlagProvider>
+            </ProfileProvider>
           </AuthContainer>
         </StoreProvider>
       </Hydrate>
diff --git a/studio/pages/account/me.tsx b/studio/pages/account/me.tsx
index 2ecbc5de73..0484fd2573 100644
--- a/studio/pages/account/me.tsx
+++ b/studio/pages/account/me.tsx
@@ -1,17 +1,17 @@
 import { observer } from 'mobx-react-lite'
-import { Button, IconMoon, IconSun, Input, Listbox } from 'ui'
+import Link from 'next/link'
 
+import { useTheme } from 'common'
 import { AccountLayout } from 'components/layouts'
 import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
 import Panel from 'components/ui/Panel'
-import { Profile as ProfileType } from 'data/profile/types'
 import { useProfileUpdateMutation } from 'data/profile/profile-update-mutation'
-import { useProfileQuery } from 'data/profile/profile-query'
+import { Profile as ProfileType } from 'data/profile/types'
 import { useStore } from 'hooks'
 import { useSession } from 'lib/auth'
-import Link from 'next/link'
+import { useProfile } from 'lib/profile'
 import { NextPageWithLayout } from 'types'
-import { useTheme } from 'common'
+import { Button, IconMoon, IconSun, Input, Listbox } from 'ui'
 
 const User: NextPageWithLayout = () => {
   return (
@@ -41,7 +41,7 @@ const ProfileCard = observer(() => {
   const { ui } = useStore()
   const { mutateAsync } = useProfileUpdateMutation()
 
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
   // TODO: ^ handle loading state
 
   const updateUser = async (model: any) => {
diff --git a/studio/pages/account/tokens.tsx b/studio/pages/account/tokens.tsx
index 7dd7697843..b6a242912d 100644
--- a/studio/pages/account/tokens.tsx
+++ b/studio/pages/account/tokens.tsx
@@ -20,7 +20,7 @@ const UserAccessTokens: NextPageWithLayout = () => {
       <div className="flex items-center justify-between">
         <FormHeader
           title="Access Tokens"
-          description="Personal access tokens can be used with our management API or the Supabase CLI"
+          description="Personal access tokens can be used with our management API or the Supabase CLI. These tokens will have the same permissions as you have."
         />
         <div className="flex items-center space-x-4 mb-6">
           <div className="flex items-center space-x-2">
diff --git a/studio/pages/api/auth/[ref]/config.ts b/studio/pages/api/auth/[ref]/config.ts
index 66545dba0a..80f655a588 100644
--- a/studio/pages/api/auth/[ref]/config.ts
+++ b/studio/pages/api/auth/[ref]/config.ts
@@ -74,6 +74,9 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
     EXTERNAL_GOOGLE_ENABLED: false,
     EXTERNAL_GOOGLE_CLIENT_ID: null,
     EXTERNAL_GOOGLE_SECRET: null,
+    EXTERNAL_KAKAO_ENABLED: false,
+    EXTERNAL_KAKAO_CLIENT_ID: null,
+    EXTERNAL_KAKAO_SECRET: null,
     EXTERNAL_KEYCLOAK_ENABLED: false,
     EXTERNAL_KEYCLOAK_CLIENT_ID: null,
     EXTERNAL_KEYCLOAK_SECRET: null,
diff --git a/studio/pages/authorize.tsx b/studio/pages/authorize.tsx
index a7f1c81e92..4d28fb24a6 100644
--- a/studio/pages/authorize.tsx
+++ b/studio/pages/authorize.tsx
@@ -1,4 +1,9 @@
+import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
 import { useParams } from 'common'
+import AuthorizeRequesterDetails from 'components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails'
 import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
 import { FormPanel } from 'components/ui/Forms'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
@@ -6,10 +11,7 @@ import { useApiAuthorizationApproveMutation } from 'data/api-authorization/api-a
 import { useApiAuthorizationDeclineMutation } from 'data/api-authorization/api-authorization-decline-mutation'
 import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import dayjs from 'dayjs'
 import { useStore, withAuth } from 'hooks'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
 import { NextPageWithLayout } from 'types'
 import { Alert, Button, Listbox } from 'ui'
 
@@ -170,30 +172,11 @@ const APIAuthorizationPage: NextPageWithLayout = () => {
     >
       <div className="w-full md:w-[500px] px-8 py-6 space-y-8">
         {/* API Authorization requester details */}
-
-        <div className="flex space-x-4">
-          <div>
-            <div className="rounded-md border border-scale-600 p-2.5 flex items-center">
-              <div
-                className="w-8 h-8 md:w-10 md:h-10 bg-center bg-no-repeat bg-cover flex items-center justify-center"
-                style={{
-                  backgroundImage: requester.icon !== null ? `url('${requester?.icon}')` : 'none',
-                }}
-              >
-                {requester?.icon === null && (
-                  <p className="text-scale-1000 text-lg">{requester?.name[0]}</p>
-                )}
-              </div>
-            </div>
-          </div>
-          <p className="text-sm text-scale-1100">
-            {requester?.name} ({requester?.domain}) is requesting API access to an organization. The
-            application will be able to{' '}
-            <span className="text-amber-1200">
-              read and write the organization's settings and all of its projects.
-            </span>
-          </p>
-        </div>
+        <AuthorizeRequesterDetails
+          icon={requester.icon}
+          name={requester.name}
+          domain={requester.domain}
+        />
 
         {/* Expiry warning */}
         {isExpired && (
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index a87cffe2e1..0f1a5a1f36 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -1,13 +1,16 @@
+import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import { Button, IconCheckSquare, Loading } from 'ui'
 
+import { useParams } from 'common'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useStore } from 'hooks'
 import { useSignOut } from 'lib/auth'
+import { delete_, get, post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { get, post, delete_ } from 'lib/common/fetch'
-import { useProfileQuery } from 'data/profile/profile-query'
+import { useProfile } from 'lib/profile'
 
 interface ITokenInfo {
   organization_name?: string | undefined
@@ -21,10 +24,11 @@ interface ITokenInfo {
 type TokenInfo = ITokenInfo | undefined
 
 const JoinOrganizationPage = () => {
+  const queryClient = useQueryClient()
   const router = useRouter()
-  const { slug, token, name } = router.query
-  const { ui, app } = useStore()
-  const { data: profile } = useProfileQuery()
+  const { slug, token, name } = useParams()
+  const { ui } = useStore()
+  const { profile } = useProfile()
   const signOut = useSignOut()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
@@ -38,8 +42,6 @@ const JoinOrganizationPage = () => {
 
   useEffect(() => {
     const fetchTokenInfo = async () => {
-      await ui.load()
-
       const response = await get(`${API_URL}/organizations/${slug}/members/join?token=${token}`)
 
       if (response.error) {
@@ -74,7 +76,7 @@ const JoinOrganizationPage = () => {
       setIsSubmitting(false)
     } else {
       setIsSubmitting(false)
-      app.onOrgAdded(response)
+      await invalidateOrganizationsQuery(queryClient)
       router.push('/')
     }
   }
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index fe03cf0ddc..b391a452a6 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -1,47 +1,49 @@
-import Router, { useRouter } from 'next/router'
-import { useRef, useState, useEffect, PropsWithChildren } from 'react'
-import { debounce, isUndefined, values } from 'lodash'
-import { toJS } from 'mobx'
-import { observer } from 'mobx-react-lite'
-import generator from 'generate-password'
-import { Button, Listbox, IconUsers, Input, Alert, IconHelpCircle, Toggle, IconInfo } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { NextPageWithLayout } from 'types'
-import { passwordStrength, pluckObjectFields } from 'lib/helpers'
+import generator from 'generate-password'
+import { debounce, isUndefined } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import Router, { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
+
+import { useParams } from 'common/hooks'
+import SpendCapModal from 'components/interfaces/Billing/SpendCapModal'
+import {
+  EmptyPaymentMethodWarning,
+  FreeProjectLimitWarning,
+  NotOrganizationOwnerWarning,
+} from 'components/interfaces/Organization/NewProject'
+import { WizardLayoutWithoutAuth } from 'components/layouts'
+import DisabledWarningDueToIncident from 'components/ui/DisabledWarningDueToIncident'
+import InformationBox from 'components/ui/InformationBox'
+import Panel from 'components/ui/Panel'
+import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
+import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+import { useCheckPermissions, useFlag, useStore, withAuth } from 'hooks'
 import { get, post } from 'lib/common/fetch'
 import {
   API_URL,
-  PROVIDERS,
+  AWS_REGIONS,
+  CloudProvider,
   DEFAULT_MINIMUM_PASSWORD_STRENGTH,
-  PRICING_TIER_LABELS,
+  DEFAULT_PROVIDER,
+  FLY_REGIONS,
   PRICING_TIER_DEFAULT_KEY,
   PRICING_TIER_FREE_KEY,
+  PRICING_TIER_LABELS,
   PRICING_TIER_PRODUCT_IDS,
-  AWS_REGIONS,
-  FLY_REGIONS,
-  CloudProvider,
+  PROVIDERS,
   Region,
-  DEFAULT_PROVIDER,
 } from 'lib/constants'
-import { useStore, useFlag, withAuth, checkPermissions } from 'hooks'
-import { useParams } from 'common/hooks'
-import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
-import { WizardLayoutWithoutAuth } from 'components/layouts'
-import Panel from 'components/ui/Panel'
-import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
-import DisabledWarningDueToIncident from 'components/ui/DisabledWarningDueToIncident'
-import {
-  FreeProjectLimitWarning,
-  NotOrganizationOwnerWarning,
-  EmptyPaymentMethodWarning,
-} from 'components/interfaces/Organization/NewProject'
-import SpendCapModal from 'components/interfaces/Billing/SpendCapModal'
-import InformationBox from 'components/ui/InformationBox'
+import { passwordStrength, pluckObjectFields } from 'lib/helpers'
+import { NextPageWithLayout } from 'types'
+import { Alert, Button, IconHelpCircle, IconInfo, IconUsers, Input, Listbox, Toggle } from 'ui'
 
 const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
   const { slug } = useParams()
-  const { app, ui } = useStore()
+  const { ui } = useStore()
 
   const projectCreationDisabled = useFlag('disableProjectCreationAndUpdate')
   const cloudProviderEnabled = useFlag('enableFlyCloudProvider')
@@ -66,25 +68,32 @@ const Wizard: NextPageWithLayout = () => {
 
   const [isSpendCapEnabled, setIsSpendCapEnabled] = useState(true)
 
-  const organizations = values(toJS(app.organizations.list()))
-  const currentOrg = organizations.find((o: any) => o.slug === slug)
+  const { data: organizations, isSuccess: isOrganizationsSuccess } = useOrganizationsQuery()
+  const currentOrg = organizations?.find((o: any) => o.slug === slug)
   const billedViaOrg = Boolean(currentOrg?.subscription_id)
 
+  const { data: orgSubscription } = useOrgSubscriptionQuery(
+    { orgSlug: slug },
+    { enabled: billedViaOrg }
+  )
+
   const [availableRegions, setAvailableRegions] = useState(
     getAvailableRegions(PROVIDERS[cloudProvider].id)
   )
 
-  const isAdmin = checkPermissions(PermissionAction.CREATE, 'projects')
+  const isAdmin = useCheckPermissions(PermissionAction.CREATE, 'projects')
   const isInvalidSlug = isUndefined(currentOrg)
-  const isEmptyOrganizations = organizations.length <= 0 && app.organizations.isInitialized
+  const isEmptyOrganizations = (organizations?.length ?? 0) <= 0 && isOrganizationsSuccess
   const isEmptyPaymentMethod = paymentMethods ? !paymentMethods.length : false
   const isSelectFreeTier = dbPricingTierKey === PRICING_TIER_FREE_KEY
   const hasMembersExceedingFreeTierLimit = (membersExceededLimit || []).length > 0
 
   const showNonProdFields = process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
 
-  const canCreateProject =
-    isAdmin && (!isSelectFreeTier || (isSelectFreeTier && !hasMembersExceedingFreeTierLimit))
+  const freePlanWithExceedingLimits =
+    (isSelectFreeTier || orgSubscription?.plan?.id === 'free') && hasMembersExceedingFreeTierLimit
+
+  const canCreateProject = isAdmin && !freePlanWithExceedingLimits
 
   const canSubmit =
     projectName !== '' &&
@@ -108,8 +117,8 @@ const Wizard: NextPageWithLayout = () => {
    * Redirect to first org if the slug doesn't match an org slug
    * this is mainly to capture the /project/new url, which is redirected from database.new
    */
-  if (isInvalidSlug && organizations.length > 0) {
-    router.push(`/new/${organizations[0].slug}`)
+  if (isInvalidSlug && (organizations?.length ?? 0) > 0) {
+    router.push(`/new/${organizations?.[0].slug}`)
   }
 
   useEffect(() => {
@@ -210,7 +219,6 @@ const Wizard: NextPageWithLayout = () => {
         message: `Failed to create new project: ${response.error.message}`,
       })
     } else {
-      app.onProjectCreated(response)
       router.push(`/project/${response.ref}/building`)
     }
   }
@@ -245,7 +253,7 @@ const Wizard: NextPageWithLayout = () => {
   return (
     <Panel
       hideHeaderStyling
-      loading={!app.organizations.isInitialized || isLoadingFreeProjectLimitCheck}
+      loading={!isOrganizationsSuccess || isLoadingFreeProjectLimitCheck}
       title={
         <div key="panel-title">
           <h3>Create a new project</h3>
@@ -292,14 +300,14 @@ const Wizard: NextPageWithLayout = () => {
                 'border-panel-border-interior-light dark:border-panel-border-interior-dark',
               ].join(' ')}
             >
-              {organizations.length > 0 && (
+              {(organizations?.length ?? 0) > 0 && (
                 <Listbox
                   label="Organization"
                   layout="horizontal"
                   value={currentOrg?.slug}
                   onChange={(slug) => router.push(`/new/${slug}`)}
                 >
-                  {organizations.map((x: any) => (
+                  {organizations?.map((x: any) => (
                     <Listbox.Option
                       key={x.id}
                       label={x.name}
@@ -465,55 +473,57 @@ const Wizard: NextPageWithLayout = () => {
               </>
             )}
 
-            {isAdmin && !billedViaOrg && (
+            {isAdmin && (
               <Panel.Content>
-                <Listbox
-                  label="Pricing Plan"
-                  layout="horizontal"
-                  value={dbPricingTierKey}
-                  onChange={onDbPricingPlanChange}
-                  descriptionText={
-                    <>
-                      Select a plan that suits your needs.&nbsp;
-                      <a
-                        className="underline"
-                        target="_blank"
-                        rel="noreferrer"
-                        href="https://supabase.com/pricing"
-                      >
-                        More details
-                      </a>
-                      {!isSelectFreeTier && !isEmptyPaymentMethod && (
-                        <Alert
-                          title="Your payment method will be charged"
-                          variant="warning"
-                          withIcon
-                          className="mt-3"
+                {!billedViaOrg && (
+                  <Listbox
+                    label="Pricing Plan"
+                    layout="horizontal"
+                    value={dbPricingTierKey}
+                    onChange={onDbPricingPlanChange}
+                    descriptionText={
+                      <>
+                        Select a plan that suits your needs.&nbsp;
+                        <a
+                          className="underline"
+                          target="_blank"
+                          rel="noreferrer"
+                          href="https://supabase.com/pricing"
                         >
-                          <p>
-                            By creating a new Pro Project, there will be an immediate charge of $25
-                            once the project has been created.
-                          </p>
-                        </Alert>
-                      )}
-                    </>
-                  }
-                >
-                  {Object.entries(PRICING_TIER_LABELS).map(([k, v]) => {
-                    const label = `${v}${k === 'PRO' ? ' - $25/month' : ' - $0/month'}`
-                    return (
-                      <Listbox.Option key={k} label={label} value={k}>
-                        {label}
-                      </Listbox.Option>
-                    )
-                  })}
-                </Listbox>
+                          More details
+                        </a>
+                        {!isSelectFreeTier && !isEmptyPaymentMethod && (
+                          <Alert
+                            title="Your payment method will be charged"
+                            variant="warning"
+                            withIcon
+                            className="mt-3"
+                          >
+                            <p>
+                              By creating a new Pro Project, there will be an immediate charge of
+                              $25 once the project has been created.
+                            </p>
+                          </Alert>
+                        )}
+                      </>
+                    }
+                  >
+                    {Object.entries(PRICING_TIER_LABELS).map(([k, v]) => {
+                      const label = `${v}${k === 'PRO' ? ' - $25/month' : ' - $0/month'}`
+                      return (
+                        <Listbox.Option key={k} label={label} value={k}>
+                          {label}
+                        </Listbox.Option>
+                      )
+                    })}
+                  </Listbox>
+                )}
 
-                {isSelectFreeTier && hasMembersExceedingFreeTierLimit && (
+                {freePlanWithExceedingLimits && (
                   <FreeProjectLimitWarning membersExceededLimit={membersExceededLimit || []} />
                 )}
 
-                {!isSelectFreeTier && isEmptyPaymentMethod && (
+                {!billedViaOrg && !isSelectFreeTier && isEmptyPaymentMethod && (
                   <EmptyPaymentMethodWarning onPaymentMethodAdded={onPaymentMethodAdded} />
                 )}
               </Panel.Content>
@@ -565,22 +575,18 @@ const Wizard: NextPageWithLayout = () => {
   )
 }
 
-const PageLayout = withAuth(
-  observer<PropsWithChildren<{}>>(({ children }) => {
-    const router = useRouter()
-    const { slug } = router.query
+const PageLayout = withAuth(({ children }) => {
+  const { slug } = useParams()
 
-    const { app } = useStore()
-    const organizations = values(toJS(app.organizations.list()))
-    const currentOrg = organizations.find((o: any) => o.slug === slug)
+  const { data: organizations } = useOrganizationsQuery()
+  const currentOrg = organizations?.find((o: any) => o.slug === slug)
 
-    return (
-      <WizardLayoutWithoutAuth organization={currentOrg} project={null}>
-        {children}
-      </WizardLayoutWithoutAuth>
-    )
-  })
-)
+  return (
+    <WizardLayoutWithoutAuth organization={currentOrg} project={null}>
+      {children}
+    </WizardLayoutWithoutAuth>
+  )
+})
 
 Wizard.getLayout = (page) => <PageLayout>{page}</PageLayout>
 
diff --git a/studio/pages/new/index.tsx b/studio/pages/new/index.tsx
index 8ca1dcfd02..b4e54938c0 100644
--- a/studio/pages/new/index.tsx
+++ b/studio/pages/new/index.tsx
@@ -1,13 +1,15 @@
-import { useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import { observer } from 'mobx-react-lite'
-import { Button, Input, Listbox } from 'ui'
 import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { Button, Input, Listbox } from 'ui'
 
-import { API_URL } from 'lib/constants'
-import { useStore } from 'hooks'
-import { post } from 'lib/common/fetch'
 import { WizardLayout } from 'components/layouts'
 import Panel from 'components/ui/Panel'
+import { invalidateOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
 
 const ORG_KIND_TYPES = {
@@ -33,7 +35,8 @@ const ORG_SIZE_DEFAULT = '1'
  * No org selected yet, create a new one
  */
 const Wizard: NextPageWithLayout = () => {
-  const { ui, app } = useStore()
+  const queryClient = useQueryClient()
+  const { ui } = useStore()
   const router = useRouter()
 
   const [orgName, setOrgName] = useState('')
@@ -81,7 +84,7 @@ const Wizard: NextPageWithLayout = () => {
       })
     } else {
       const org = response
-      app.onOrgAdded(org)
+      await invalidateOrganizationsQuery(queryClient)
       router.push(`/new/${org.slug}`)
     }
   }
diff --git a/studio/pages/org/[slug]/apps.tsx b/studio/pages/org/[slug]/apps.tsx
new file mode 100644
index 0000000000..000ea4d1ec
--- /dev/null
+++ b/studio/pages/org/[slug]/apps.tsx
@@ -0,0 +1,57 @@
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { Tabs } from 'ui'
+
+import { useParams } from 'common/hooks'
+import { OAuthApps } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
+
+const OrgOAuthApps: NextPageWithLayout = () => {
+  const { slug } = useParams()
+  const router = useRouter()
+  const selectedOrganization = useSelectedOrganization()
+  const { isLoading: isLoadingPermissions } = usePermissionsQuery()
+
+  return (
+    <>
+      {selectedOrganization === undefined && isLoadingPermissions ? (
+        <Loading />
+      ) : (
+        <div className="p-4 pt-0">
+          <div className="space-y-3">
+            <section className="mt-4">
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
+            </section>
+            <nav>
+              <Tabs
+                size="small"
+                type="underlined"
+                activeId="apps"
+                onChange={(id: any) => {
+                  if (id !== 'apps') router.push(`/org/${slug}/${id}`)
+                }}
+              >
+                <Tabs.Panel id="general" label="General" />
+                <Tabs.Panel id="team" label="Team" />
+                <Tabs.Panel id="billing" label="Billing" />
+                <Tabs.Panel id="invoices" label="Invoices" />
+                <Tabs.Panel id="apps" label="OAuth Apps" />
+              </Tabs>
+            </nav>
+          </div>
+
+          <div className="mb-8">
+            <OAuthApps />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+OrgOAuthApps.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
+export default observer(OrgOAuthApps)
diff --git a/studio/pages/org/[slug]/billing.tsx b/studio/pages/org/[slug]/billing.tsx
index 83c44735b4..d32cfa72bc 100644
--- a/studio/pages/org/[slug]/billing.tsx
+++ b/studio/pages/org/[slug]/billing.tsx
@@ -1,30 +1,30 @@
 import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
+
+import { useParams } from 'common/hooks'
+import { BillingSettings } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useFlag, useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
 import { Tabs } from 'ui'
 
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
-import { useParams } from 'common/hooks'
-import Loading from 'components/ui/Loading'
-import { OrganizationLayout } from 'components/layouts'
-import { BillingSettings } from 'components/interfaces/Organization'
-
 const OrgBillingSettings: NextPageWithLayout = () => {
-  const { ui } = useStore()
+  const { data: permissions } = usePermissionsQuery()
+  const selectedOrganization = useSelectedOrganization()
   const { slug } = useParams()
   const router = useRouter()
+  const showOAuthApps = useFlag('oauthApps')
 
   return (
     <>
-      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+      {selectedOrganization === undefined && (permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">
           <div className="space-y-3">
             <section className="mt-4">
-              <h1 className="text-3xl">
-                {ui.selectedOrganization?.name ?? 'Organization'} settings
-              </h1>
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
             </section>
             <nav>
               <Tabs
@@ -39,6 +39,7 @@ const OrgBillingSettings: NextPageWithLayout = () => {
                 <Tabs.Panel id="team" label="Team" />
                 <Tabs.Panel id="billing" label="Billing" />
                 <Tabs.Panel id="invoices" label="Invoices" />
+                {showOAuthApps && <Tabs.Panel id="apps" label="OAuth Apps" />}
               </Tabs>
             </nav>
           </div>
@@ -53,4 +54,5 @@ const OrgBillingSettings: NextPageWithLayout = () => {
 }
 
 OrgBillingSettings.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
-export default observer(OrgBillingSettings)
+
+export default OrgBillingSettings
diff --git a/studio/pages/org/[slug]/general.tsx b/studio/pages/org/[slug]/general.tsx
index f07415ba47..6ac6f02f67 100644
--- a/studio/pages/org/[slug]/general.tsx
+++ b/studio/pages/org/[slug]/general.tsx
@@ -1,30 +1,30 @@
 import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
+
+import { useParams } from 'common/hooks'
+import { GeneralSettings } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useFlag, useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
 import { Tabs } from 'ui'
 
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
-import { useParams } from 'common/hooks'
-import Loading from 'components/ui/Loading'
-import { OrganizationLayout } from 'components/layouts'
-import { GeneralSettings } from 'components/interfaces/Organization'
-
 const OrgGeneralSettings: NextPageWithLayout = () => {
-  const { ui } = useStore()
+  const { data: permissions } = usePermissionsQuery()
+  const selectedOrganization = useSelectedOrganization()
   const { slug } = useParams()
   const router = useRouter()
+  const showOAuthApps = useFlag('oauthApps')
 
   return (
     <>
-      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+      {selectedOrganization === undefined && (permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">
           <div className="space-y-3">
             <section className="mt-4">
-              <h1 className="text-3xl">
-                {ui.selectedOrganization?.name ?? 'Organization'} settings
-              </h1>
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
             </section>
             <nav>
               <Tabs
@@ -39,6 +39,7 @@ const OrgGeneralSettings: NextPageWithLayout = () => {
                 <Tabs.Panel id="team" label="Team" />
                 <Tabs.Panel id="billing" label="Billing" />
                 <Tabs.Panel id="invoices" label="Invoices" />
+                {showOAuthApps && <Tabs.Panel id="apps" label="OAuth Apps" />}
               </Tabs>
             </nav>
           </div>
@@ -53,4 +54,5 @@ const OrgGeneralSettings: NextPageWithLayout = () => {
 }
 
 OrgGeneralSettings.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
-export default observer(OrgGeneralSettings)
+
+export default OrgGeneralSettings
diff --git a/studio/pages/org/[slug]/invoices.tsx b/studio/pages/org/[slug]/invoices.tsx
index 5ccf1ebc82..4219e34c41 100644
--- a/studio/pages/org/[slug]/invoices.tsx
+++ b/studio/pages/org/[slug]/invoices.tsx
@@ -1,30 +1,31 @@
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
 import { Tabs } from 'ui'
 
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import Loading from 'components/ui/Loading'
-import { OrganizationLayout } from 'components/layouts'
 import { InvoicesSettings } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useFlag, useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const OrgInvoices: NextPageWithLayout = () => {
-  const { ui } = useStore()
+  const { data: permissions } = usePermissionsQuery()
+  const selectedOrganization = useSelectedOrganization()
   const { slug } = useParams()
   const router = useRouter()
+  const showOAuthApps = useFlag('oauthApps')
 
   return (
     <>
-      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+      {selectedOrganization === undefined && (permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">
           <div className="space-y-3">
             <section className="mt-4">
-              <h1 className="text-3xl">
-                {ui.selectedOrganization?.name ?? 'Organization'} settings
-              </h1>
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
             </section>
             <nav>
               <Tabs
@@ -39,6 +40,7 @@ const OrgInvoices: NextPageWithLayout = () => {
                 <Tabs.Panel id="team" label="Team" />
                 <Tabs.Panel id="billing" label="Billing" />
                 <Tabs.Panel id="invoices" label="Invoices" />
+                {showOAuthApps && <Tabs.Panel id="apps" label="OAuth Apps" />}
               </Tabs>
             </nav>
           </div>
diff --git a/studio/pages/org/[slug]/team.tsx b/studio/pages/org/[slug]/team.tsx
index 7f96623cd6..8d024a5652 100644
--- a/studio/pages/org/[slug]/team.tsx
+++ b/studio/pages/org/[slug]/team.tsx
@@ -1,30 +1,30 @@
 import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
+
+import { useParams } from 'common/hooks'
+import { TeamSettings } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useFlag, useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
 import { Tabs } from 'ui'
 
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
-import { useParams } from 'common/hooks'
-import Loading from 'components/ui/Loading'
-import { OrganizationLayout } from 'components/layouts'
-import { TeamSettings } from 'components/interfaces/Organization'
-
 const OrgTeamSettings: NextPageWithLayout = () => {
-  const { ui } = useStore()
+  const { data: permissions } = usePermissionsQuery()
+  const selectedOrganization = useSelectedOrganization()
   const { slug } = useParams()
   const router = useRouter()
+  const showOAuthApps = useFlag('oauthApps')
 
   return (
     <>
-      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+      {selectedOrganization === undefined && (permissions ?? []).length === 0 ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">
           <div className="space-y-3">
             <section className="mt-4">
-              <h1 className="text-3xl">
-                {ui.selectedOrganization?.name ?? 'Organization'} settings
-              </h1>
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
             </section>
             <nav>
               <Tabs
@@ -39,6 +39,7 @@ const OrgTeamSettings: NextPageWithLayout = () => {
                 <Tabs.Panel id="team" label="Team" />
                 <Tabs.Panel id="billing" label="Billing" />
                 <Tabs.Panel id="invoices" label="Invoices" />
+                {showOAuthApps && <Tabs.Panel id="apps" label="OAuth Apps" />}
               </Tabs>
             </nav>
           </div>
@@ -53,4 +54,5 @@ const OrgTeamSettings: NextPageWithLayout = () => {
 }
 
 OrgTeamSettings.getLayout = (page) => <OrganizationLayout>{page}</OrganizationLayout>
-export default observer(OrgTeamSettings)
+
+export default OrgTeamSettings
diff --git a/studio/pages/org/_/[[...routeSlug]].tsx b/studio/pages/org/_/[[...routeSlug]].tsx
index 1e53059a44..65e036ed03 100644
--- a/studio/pages/org/_/[[...routeSlug]].tsx
+++ b/studio/pages/org/_/[[...routeSlug]].tsx
@@ -1,13 +1,13 @@
+import { NextPage } from 'next'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { NextPage } from 'next'
-import { observer } from 'mobx-react-lite'
-import { Button, IconPlus } from 'ui'
 
-import { withAuth, useStore } from 'hooks'
-import { BASE_PATH } from 'lib/constants'
-import CardButton from 'components/ui/CardButton'
 import ShimmeringCard from 'components/interfaces/Home/ProjectList/ShimmeringCard'
+import CardButton from 'components/ui/CardButton'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { withAuth } from 'hooks'
+import { BASE_PATH } from 'lib/constants'
+import { Button, IconPlus } from 'ui'
 
 const Header = () => {
   return (
@@ -29,12 +29,9 @@ const Header = () => {
 }
 
 const GenericOrganizationPage: NextPage = () => {
-  const { app } = useStore()
   const router = useRouter()
-  const { organizations } = app
-  const { isLoading } = organizations
 
-  const sortedOrganizations = organizations.list()
+  const { data: organizations, isLoading } = useOrganizationsQuery()
   const { routeSlug, ...queryParams } = router.query
   const queryString =
     Object.keys(queryParams).length > 0
@@ -71,7 +68,7 @@ const GenericOrganizationPage: NextPage = () => {
               <ShimmeringCard />
               <ShimmeringCard />
             </ul>
-          ) : sortedOrganizations.length === 0 ? (
+          ) : organizations?.length === 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>You are not part of any organizations yet</p>
@@ -94,7 +91,7 @@ const GenericOrganizationPage: NextPage = () => {
                 'sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3',
               ].join(' `')}
             >
-              {sortedOrganizations.map((organization) => (
+              {organizations?.map((organization) => (
                 <li key={organization.slug} className="col-span-1">
                   <CardButton
                     linkHref={urlRewriterFactory(routeSlug)(organization.slug)}
@@ -121,4 +118,4 @@ const GenericOrganizationPage: NextPage = () => {
   )
 }
 
-export default withAuth(observer(GenericOrganizationPage))
+export default withAuth(GenericOrganizationPage)
diff --git a/studio/pages/project/[ref]/api/graphiql.tsx b/studio/pages/project/[ref]/api/graphiql.tsx
index 95492f7a2d..5f4821e5e4 100644
--- a/studio/pages/project/[ref]/api/graphiql.tsx
+++ b/studio/pages/project/[ref]/api/graphiql.tsx
@@ -1,18 +1,18 @@
-import { useEffect, useMemo } from 'react'
+import { Fetcher, createGraphiQLFetcher } from '@graphiql/toolkit'
 import { observer } from 'mobx-react-lite'
-import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
+import { useEffect, useMemo } from 'react'
 
-import { NextPageWithLayout } from 'types'
+import { useTheme } from 'common'
 import { useParams } from 'common/hooks'
-import { useStore } from 'hooks'
-import { API_URL, IS_PLATFORM } from 'lib/constants'
 import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCard'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
 import { DocsLayout } from 'components/layouts'
 import Connecting from 'components/ui/Loading/Loading'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
 import { useProjectApiQuery } from 'data/config/project-api-query'
-import { useTheme } from 'common'
+import { useStore } from 'hooks'
+import { API_URL, IS_PLATFORM } from 'lib/constants'
+import { NextPageWithLayout } from 'types'
 
 const GraphiQLPage: NextPageWithLayout = () => {
   const { ref: projectRef } = useParams()
@@ -32,12 +32,12 @@ const GraphiQLPage: NextPageWithLayout = () => {
     : undefined
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (ui.selectedProjectRef) {
       // Schemas may be needed when enabling the GraphQL extension
       meta.schemas.load()
       meta.extensions.load()
     }
-  }, [ui.selectedProject?.ref])
+  }, [ui.selectedProjectRef])
 
   const graphqlUrl = `${API_URL}/projects/${projectRef}/api/graphql`
 
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx
index 64cb1e7479..c193e99317 100644
--- a/studio/pages/project/[ref]/api/index.tsx
+++ b/studio/pages/project/[ref]/api/index.tsx
@@ -1,16 +1,16 @@
+import { observer, useLocalObservable } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { FC, createContext, useContext, useEffect, useState } from 'react'
-import { observer, useLocalObservable } from 'mobx-react-lite'
 
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { snakeToCamel } from 'lib/helpers'
-import { useProjectApiQuery } from 'data/config/project-api-query'
-import { DocsLayout } from 'components/layouts'
 import { GeneralContent, ResourceContent, RpcContent } from 'components/interfaces/Docs'
-import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 import LangSelector from 'components/interfaces/Docs/LangSelector'
+import { DocsLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
+import { snakeToCamel } from 'lib/helpers'
+import { NextPageWithLayout } from 'types'
 
 const PageContext = createContext(null)
 
@@ -45,9 +45,7 @@ const PageConfig: NextPageWithLayout = () => {
 
   const router = useRouter()
   const { query } = router
-
-  const { ui } = useStore()
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
   PageState.projectRef = query.ref
 
   return (
diff --git a/studio/pages/project/[ref]/auth/providers.tsx b/studio/pages/project/[ref]/auth/providers.tsx
index 47112f72c8..b30a17e9dd 100644
--- a/studio/pages/project/[ref]/auth/providers.tsx
+++ b/studio/pages/project/[ref]/auth/providers.tsx
@@ -1,20 +1,22 @@
-import { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
 import { AuthProvidersForm } from 'components/interfaces'
 import { AuthLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => {
-  const { ui, authConfig } = useStore()
+  const { authConfig } = useStore()
+  const { project } = useProjectContext()
 
   useEffect(() => {
     authConfig.load()
-  }, [ui.selectedProjectRef])
+  }, [project?.ref])
 
   const canReadAuthSettings = checkPermissions(PermissionAction.READ, 'custom_config_gotrue')
 
diff --git a/studio/pages/project/[ref]/auth/templates.tsx b/studio/pages/project/[ref]/auth/templates.tsx
index 6d4db080b1..6bb6d7757e 100644
--- a/studio/pages/project/[ref]/auth/templates.tsx
+++ b/studio/pages/project/[ref]/auth/templates.tsx
@@ -1,20 +1,22 @@
-import { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { useStore, checkPermissions } from 'hooks'
-import { AuthLayout } from 'components/layouts'
 import { EmailTemplates } from 'components/interfaces'
+import { AuthLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => {
-  const { ui, authConfig } = useStore()
+  const { authConfig } = useStore()
+  const { project } = useProjectContext()
 
   useEffect(() => {
     authConfig.load()
-  }, [ui.selectedProjectRef])
+  }, [project?.ref])
 
   const canReadAuthSettings = checkPermissions(PermissionAction.READ, 'custom_config_gotrue')
 
diff --git a/studio/pages/project/[ref]/auth/url-configuration.tsx b/studio/pages/project/[ref]/auth/url-configuration.tsx
index b0415afb0c..9a573653d8 100644
--- a/studio/pages/project/[ref]/auth/url-configuration.tsx
+++ b/studio/pages/project/[ref]/auth/url-configuration.tsx
@@ -1,22 +1,23 @@
-import { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { useStore, checkPermissions } from 'hooks'
-import { AuthLayout } from 'components/layouts'
-
-import NoPermission from 'components/ui/NoPermission'
 import RedirectUrls from 'components/interfaces/Auth/RedirectUrls/RedirectUrls'
-import { FormsContainer } from 'components/ui/Forms'
 import SiteUrl from 'components/interfaces/Auth/SiteUrl/SiteUrl'
+import { AuthLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { FormsContainer } from 'components/ui/Forms'
+import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const URLConfiguration: NextPageWithLayout = () => {
-  const { ui, authConfig } = useStore()
+  const { authConfig } = useStore()
+  const { project } = useProjectContext()
 
   useEffect(() => {
     authConfig.load()
-  }, [ui.selectedProjectRef])
+  }, [project?.ref])
 
   const canReadAuthSettings = checkPermissions(PermissionAction.READ, 'custom_config_gotrue')
 
diff --git a/studio/pages/project/[ref]/auth/users.tsx b/studio/pages/project/[ref]/auth/users.tsx
index 25b4cd7193..f32fc1aa29 100644
--- a/studio/pages/project/[ref]/auth/users.tsx
+++ b/studio/pages/project/[ref]/auth/users.tsx
@@ -10,6 +10,7 @@ import { Users } from 'components/interfaces/Auth'
 import { NextPageWithLayout } from 'types'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import NoPermission from 'components/ui/NoPermission'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 
 export const PageContext = createContext(null)
 
@@ -81,9 +82,8 @@ const PageLayout = ({ children }: PropsWithChildren<{}>) => {
 }
 
 const UsersPage: NextPageWithLayout = () => {
-  const { ui } = useStore()
   const PageState: any = useContext(PageContext)
-  const project: any = ui.selectedProject
+  const { project } = useProjectContext()
 
   useEffect(() => {
     PageState!.projectKpsVersion = project?.kpsVersion
diff --git a/studio/pages/project/[ref]/database/backups/pitr.tsx b/studio/pages/project/[ref]/database/backups/pitr.tsx
index 16b78736f2..09f9941e95 100644
--- a/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -1,23 +1,24 @@
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { Tabs } from 'ui'
-import clsx from 'clsx'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import clsx from 'clsx'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { Tabs } from 'ui'
 
-import { NextPageWithLayout } from 'types'
-import { useStore, checkPermissions } from 'hooks'
+import BackupsError from 'components/interfaces/Database/Backups/BackupsError'
+import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
 import { DatabaseLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import Loading from 'components/ui/Loading'
 import NoPermission from 'components/ui/NoPermission'
 import UpgradeToPro from 'components/ui/UpgradeToPro'
-import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
-import BackupsError from 'components/interfaces/Database/Backups/BackupsError'
+import { checkPermissions, useStore } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
+import { NextPageWithLayout } from 'types'
 
 const DatabasePhysicalBackups: NextPageWithLayout = () => {
-  const { ui } = useStore()
   const router = useRouter()
-  const ref = ui.selectedProject?.ref ?? 'default'
+  const { project } = useProjectContext()
+  const ref = project?.ref ?? 'default'
 
   return (
     <div
@@ -53,12 +54,13 @@ DatabasePhysicalBackups.getLayout = (page) => (
   <DatabaseLayout title="Database">{page}</DatabaseLayout>
 )
 
-const PITR = () => {
-  const { ui, backups } = useStore()
+const PITR = observer(() => {
+  const { backups } = useStore()
+  const { project } = useProjectContext()
   const { configuration, error, isLoading } = backups
 
-  const ref = ui.selectedProject?.ref ?? 'default'
-  const tier = ui.selectedProject?.subscription_tier
+  const ref = project?.ref ?? 'default'
+  const tier = project?.subscription_tier
   const isEnabled = configuration.walg_enabled
 
   const canReadPhysicalBackups = checkPermissions(PermissionAction.READ, 'physical_backups')
@@ -86,6 +88,6 @@ const PITR = () => {
       <PITRSelection />
     </>
   )
-}
+})
 
-export default observer(DatabasePhysicalBackups)
+export default DatabasePhysicalBackups
diff --git a/studio/pages/project/[ref]/database/backups/scheduled.tsx b/studio/pages/project/[ref]/database/backups/scheduled.tsx
index 1f5b875cbc..c66b74ee84 100644
--- a/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -1,20 +1,22 @@
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { IconInfo, Tabs } from 'ui'
-import clsx from 'clsx'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import clsx from 'clsx'
+import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
-import { DatabaseLayout } from 'components/layouts'
 import { BackupsList } from 'components/interfaces/Database'
-import NoPermission from 'components/ui/NoPermission'
+import { DatabaseLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import InformationBox from 'components/ui/InformationBox'
+import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
+import { IconInfo, Tabs } from 'ui'
 
 const DatabaseScheduledBackups: NextPageWithLayout = () => {
-  const { ui, backups } = useStore()
   const router = useRouter()
-  const ref = ui.selectedProject?.ref
+  const { backups } = useStore()
+  const { project } = useProjectContext()
+  const ref = project?.ref
 
   const isPitrEnabled = backups?.configuration?.walg_enabled
 
diff --git a/studio/pages/project/[ref]/database/functions.tsx b/studio/pages/project/[ref]/database/functions.tsx
index 5717e14bbc..61a262fbee 100644
--- a/studio/pages/project/[ref]/database/functions.tsx
+++ b/studio/pages/project/[ref]/database/functions.tsx
@@ -1,16 +1,18 @@
-import { useState, useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
 
-import { useStore, checkPermissions } from 'hooks'
-import { DatabaseLayout } from 'components/layouts'
 import { CreateFunction, DeleteFunction } from 'components/interfaces/Database'
-import { NextPageWithLayout } from 'types'
-import NoPermission from 'components/ui/NoPermission'
 import FunctionsList from 'components/interfaces/Database/Functions/FunctionsList/FunctionsList'
+import { DatabaseLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const FunctionsPage: NextPageWithLayout = () => {
-  const { meta, ui } = useStore()
+  const { meta } = useStore()
+  const { project } = useProjectContext()
   const [selectedFunction, setSelectedFunction] = useState<any>()
   const [showCreateFunctionForm, setShowCreateFunctionForm] = useState<boolean>(false)
   const [showDeleteFunctionForm, setShowDeleteFunctionForm] = useState<boolean>(false)
@@ -18,10 +20,10 @@ const FunctionsPage: NextPageWithLayout = () => {
   const canReadFunctions = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'functions')
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (project?.ref) {
       fetchFunctions()
     }
-  }, [ui.selectedProject?.ref])
+  }, [project?.ref])
 
   const fetchFunctions = async () => {
     meta.functions.load()
diff --git a/studio/pages/project/[ref]/database/hooks/index.tsx b/studio/pages/project/[ref]/database/hooks/index.tsx
index 4981cae2e6..d6b062d0cd 100644
--- a/studio/pages/project/[ref]/database/hooks/index.tsx
+++ b/studio/pages/project/[ref]/database/hooks/index.tsx
@@ -1,26 +1,27 @@
-import clsx from 'clsx'
-import { IconLoader } from 'ui'
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import clsx from 'clsx'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { post } from 'lib/common/fetch'
-import { DatabaseLayout } from 'components/layouts'
-import NoPermission from 'components/ui/NoPermission'
-import HooksList from 'components/interfaces/Database/Hooks/HooksList/HooksList'
+import { useParams } from 'common'
 import DeleteHookModal from 'components/interfaces/Database/Hooks/DeleteHookModal'
 import EditHookPanel from 'components/interfaces/Database/Hooks/EditHookPanel'
+import HooksList from 'components/interfaces/Database/Hooks/HooksList/HooksList'
+import { DatabaseLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { NextPageWithLayout } from 'types'
+import { IconLoader } from 'ui'
 
 const HooksPage: NextPageWithLayout = () => {
   const { meta, ui } = useStore()
+  const { project } = useProjectContext()
 
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref } = useParams()
   const schemas = meta.schemas.list()
   const { isLoading: isLoadingSchemas } = meta.schemas
 
@@ -33,8 +34,8 @@ const HooksPage: NextPageWithLayout = () => {
   const canCreateWebhooks = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_WRITE, 'triggers')
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) meta.hooks.load()
-  }, [ui.selectedProject?.ref])
+    if (project?.ref) meta.hooks.load()
+  }, [project?.ref])
 
   const enableHooksForProject = async () => {
     const res = await post(`${API_URL}/database/${ref}/hook-enable`, {})
diff --git a/studio/pages/project/[ref]/database/tables.tsx b/studio/pages/project/[ref]/database/tables.tsx
index 74bfaa4563..16e4989595 100644
--- a/studio/pages/project/[ref]/database/tables.tsx
+++ b/studio/pages/project/[ref]/database/tables.tsx
@@ -1,23 +1,21 @@
-import { useQueryClient } from '@tanstack/react-query'
-import { useState, useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
-import { isUndefined } from 'lodash'
 import type { PostgresColumn, PostgresTable } from '@supabase/postgres-meta'
-import { Modal } from 'ui'
+import { useQueryClient } from '@tanstack/react-query'
+import { isUndefined } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
 
-import { useStore } from 'hooks'
-import { sqlKeys } from 'data/sql/keys'
-
-import { DatabaseLayout } from 'components/layouts'
-import ConfirmationModal from 'components/ui/ConfirmationModal'
-import { TableList, ColumnList } from 'components/interfaces/Database'
+import { ColumnList, TableList } from 'components/interfaces/Database'
 import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
+import { DatabaseLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import ConfirmationModal from 'components/ui/ConfirmationModal'
+import { sqlKeys } from 'data/sql/keys'
+import { useStore } from 'hooks'
 import { NextPageWithLayout } from 'types'
+import { Modal } from 'ui'
 
 const DatabaseTables: NextPageWithLayout = () => {
   const { meta, ui } = useStore()
-
   const { project } = useProjectContext()
 
   const queryClient = useQueryClient()
@@ -34,10 +32,10 @@ const DatabaseTables: NextPageWithLayout = () => {
   const [selectedTableToDelete, setSelectedTableToDelete] = useState<PostgresTable>()
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (project?.ref) {
       meta.types.load()
     }
-  }, [ui.selectedProject?.ref])
+  }, [project?.ref])
 
   const onAddTable = () => {
     setSidePanelKey('table')
diff --git a/studio/pages/project/[ref]/database/triggers.tsx b/studio/pages/project/[ref]/database/triggers.tsx
index f8d61449fa..a44389ce33 100644
--- a/studio/pages/project/[ref]/database/triggers.tsx
+++ b/studio/pages/project/[ref]/database/triggers.tsx
@@ -1,16 +1,18 @@
-import { useEffect, useState } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
-import { DatabaseLayout } from 'components/layouts'
 import { CreateTrigger, DeleteTrigger } from 'components/interfaces/Database'
 import TriggersList from 'components/interfaces/Database/Triggers/TriggersList/TriggersList'
+import { DatabaseLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import NoPermission from 'components/ui/NoPermission'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const TriggersPage: NextPageWithLayout = () => {
-  const { meta, ui } = useStore()
+  const { meta } = useStore()
+  const { project } = useProjectContext()
 
   const [filterString, setFilterString] = useState<string>('')
   const [selectedTrigger, setSelectedTrigger] = useState<any>()
@@ -20,10 +22,10 @@ const TriggersPage: NextPageWithLayout = () => {
   const canReadTriggers = checkPermissions(PermissionAction.TENANT_SQL_ADMIN_READ, 'triggers')
 
   useEffect(() => {
-    if (ui.selectedProject?.ref) {
+    if (project?.ref) {
       fetchTriggers()
     }
-  }, [ui.selectedProject?.ref])
+  }, [project?.ref])
 
   const fetchTriggers = async () => {
     meta.triggers.load()
diff --git a/studio/pages/project/[ref]/editor/index.tsx b/studio/pages/project/[ref]/editor/index.tsx
index 23384fd610..6cb80edcfd 100644
--- a/studio/pages/project/[ref]/editor/index.tsx
+++ b/studio/pages/project/[ref]/editor/index.tsx
@@ -1,20 +1,25 @@
-import { useState } from 'react'
-import router from 'next/router'
-import { observer } from 'mobx-react-lite'
-import { isUndefined } from 'lodash'
 import type { PostgresTable } from '@supabase/postgres-meta'
+import { isUndefined } from 'lodash'
+import { observer } from 'mobx-react-lite'
+import router from 'next/router'
+import { useState } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { useStore, withAuth } from 'hooks'
-import { Entity } from 'data/entity-types/entity-type-query'
-import { TableEditorLayout } from 'components/layouts'
 import { EmptyState, SidePanelEditor } from 'components/interfaces/TableGridEditor'
+import { TableEditorLayout } from 'components/layouts'
+import {
+  ProjectContextFromParamsProvider,
+  useProjectContext,
+} from 'components/layouts/ProjectLayout/ProjectContext'
 import ConfirmationModal from 'components/ui/ConfirmationModal'
-import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+import { Entity } from 'data/entity-types/entity-type-query'
+import { useStore, withAuth } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const TableEditorPage: NextPageWithLayout = () => {
   const { meta, ui } = useStore()
-  const projectRef = ui.selectedProject?.ref
+  const { project } = useProjectContext()
+  const projectRef = project?.ref
+
   const [sidePanelKey, setSidePanelKey] = useState<'row' | 'column' | 'table'>()
   const [isDeleting, setIsDeleting] = useState<boolean>(false)
   const [isDuplicating, setIsDuplicating] = useState<boolean>(false)
diff --git a/studio/pages/project/[ref]/index.tsx b/studio/pages/project/[ref]/index.tsx
index af738885e0..f380381c48 100644
--- a/studio/pages/project/[ref]/index.tsx
+++ b/studio/pages/project/[ref]/index.tsx
@@ -1,23 +1,16 @@
-import { observer } from 'mobx-react-lite'
-
-import { useStore } from 'hooks'
-import { useParams } from 'common/hooks'
-import { NextPageWithLayout } from 'types'
-import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
-import { ProjectLayoutWithAuth } from 'components/layouts'
-import { ExampleProject, ClientLibrary } from 'components/interfaces/Home'
+import { ClientLibrary, ExampleProject } from 'components/interfaces/Home'
 import { CLIENT_LIBRARIES, EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import ProjectUsageSection from 'components/interfaces/Home/ProjectUsageSection'
+import { ProjectLayoutWithAuth } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ProjectPausedState from 'components/layouts/ProjectLayout/ProjectPausedState'
-import OveragesBanner from 'components/ui/OveragesBanner/OveragesBanner'
 import ProjectUpgradeFailedBanner from 'components/ui/ProjectUpgradeFailedBanner'
+import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
+import { NextPageWithLayout } from 'types'
 
 const Home: NextPageWithLayout = () => {
-  const { ui } = useStore()
-  const { ref } = useParams()
-
-  const project = ui.selectedProject
-  const projectTier = ui.selectedProject?.subscription_tier
+  const { project } = useProjectContext()
+  const projectTier = project?.subscription_tier
 
   const projectName =
     project?.ref !== 'default' && project?.name !== undefined
@@ -78,4 +71,4 @@ Home.getLayout = (page) => (
   </ProjectLayoutWithAuth>
 )
 
-export default observer(Home)
+export default Home
diff --git a/studio/pages/project/[ref]/logs/auth-logs.tsx b/studio/pages/project/[ref]/logs/auth-logs.tsx
index 8dc6e5d976..de0f83e1d4 100644
--- a/studio/pages/project/[ref]/logs/auth-logs.tsx
+++ b/studio/pages/project/[ref]/logs/auth-logs.tsx
@@ -1,17 +1,16 @@
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
-import { LogsLayout } from 'components/layouts'
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import { LogsLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import NoPermission from 'components/ui/NoPermission'
+import { useCheckPermissions } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const LogsPage: NextPageWithLayout = () => {
-  const { ui } = useStore()
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
 
-  const canReadAuthLogs = checkPermissions(PermissionAction.ANALYTICS_READ, 'logflare')
+  const canReadAuthLogs = useCheckPermissions(PermissionAction.ANALYTICS_READ, 'logflare')
 
   return !canReadAuthLogs ? (
     <NoPermission isFullPage resourceText="access your project's authentication logs" />
@@ -22,4 +21,4 @@ const LogsPage: NextPageWithLayout = () => {
 
 LogsPage.getLayout = (page) => <LogsLayout title="Auth Logs">{page}</LogsLayout>
 
-export default observer(LogsPage)
+export default LogsPage
diff --git a/studio/pages/project/[ref]/logs/explorer/recent.tsx b/studio/pages/project/[ref]/logs/explorer/recent.tsx
index 0f8bbbe508..72917678f3 100644
--- a/studio/pages/project/[ref]/logs/explorer/recent.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/recent.tsx
@@ -1,23 +1,23 @@
-import { useEffect } from 'react'
-import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
-import { Button, IconClock } from 'ui'
-import { useStore } from 'hooks'
+import Link from 'next/link'
+import { useEffect } from 'react'
+
+import { useParams } from 'common'
 import RecentQueriesItem from 'components/interfaces/Settings/Logs/RecentQueriesItem'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import Table from 'components/to-be-cleaned/Table'
-import { useRouter } from 'next/router'
-import { LogSqlSnippets, NextPageWithLayout } from 'types'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
+import { useStore } from 'hooks'
+import { LogSqlSnippets, NextPageWithLayout } from 'types'
+import { Button, IconClock } from 'ui'
 
 export const LogsSavedPage: NextPageWithLayout = () => {
-  const { content, ui } = useStore()
-  const router = useRouter()
-  const { ref } = router.query
+  const { content } = useStore()
+  const { ref } = useParams()
 
   useEffect(() => {
     content.loadPersistentData()
-  }, [ui.selectedProjectRef])
+  }, [ref])
   const recent = content.recentLogSqlSnippets.slice().reverse()
 
   return (
diff --git a/studio/pages/project/[ref]/logs/explorer/saved.tsx b/studio/pages/project/[ref]/logs/explorer/saved.tsx
index eebeafa3e6..b327cec475 100644
--- a/studio/pages/project/[ref]/logs/explorer/saved.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/saved.tsx
@@ -1,24 +1,23 @@
-import React, { useEffect } from 'react'
-import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
-import { IconSave, Loading } from 'ui'
-import { useStore } from 'hooks'
+import Link from 'next/link'
+import { useEffect } from 'react'
+
+import { useParams } from 'common'
 import { LogsSavedQueriesItem } from 'components/interfaces/Settings/Logs'
 import { LogsLayout } from 'components/layouts'
-
 import Table from 'components/to-be-cleaned/Table'
-import { useRouter } from 'next/router'
-import { NextPageWithLayout } from 'types'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
+import { useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
+import { IconSave, Loading } from 'ui'
 
 export const LogsSavedPage: NextPageWithLayout = () => {
-  const { content, ui } = useStore()
-  const router = useRouter()
-  const { ref } = router.query
+  const { content } = useStore()
+  const { ref } = useParams()
 
   useEffect(() => {
     content.load()
-  }, [ui.selectedProject])
+  }, [ref])
 
   if (content.isLoading) {
     return <Loading active={true}>{null}</Loading>
diff --git a/studio/pages/project/[ref]/reports/database.tsx b/studio/pages/project/[ref]/reports/database.tsx
index 707cbcad33..a0aaf1f7af 100644
--- a/studio/pages/project/[ref]/reports/database.tsx
+++ b/studio/pages/project/[ref]/reports/database.tsx
@@ -1,10 +1,9 @@
 import dayjs from 'dayjs'
 import { observer } from 'mobx-react-lite'
-import { FC, useEffect, useState } from 'react'
-import { Badge, Button, IconArrowRight, IconExternalLink } from 'ui'
+import { useEffect, useState } from 'react'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
+import { useStore } from 'hooks'
 import {
   PRICING_TIER_PRODUCT_IDS,
   TIME_PERIODS_INFRA,
@@ -12,8 +11,10 @@ import {
 } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 import { NextPageWithLayout } from 'types'
+import { Badge, Button, IconArrowRight, IconExternalLink } from 'ui'
 
 import { ReportsLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import Panel from 'components/ui/Panel'
@@ -21,14 +22,11 @@ import SparkBar from 'components/ui/SparkBar'
 import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 const DatabaseReport: NextPageWithLayout = () => {
-  const { ui } = useStore()
-  const project = ui.selectedProject
-
   return (
     <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
       <div className="content h-full w-full overflow-y-auto">
         <div className="w-full">
-          <DatabaseUsage project={project} />
+          <DatabaseUsage />
         </div>
       </div>
     </div>
@@ -37,10 +35,11 @@ const DatabaseReport: NextPageWithLayout = () => {
 
 DatabaseReport.getLayout = (page) => <ReportsLayout title="Database">{page}</ReportsLayout>
 
-export default observer(DatabaseReport)
+export default DatabaseReport
 
-const DatabaseUsage: FC<any> = () => {
+const DatabaseUsage = observer(() => {
   const { meta, ui } = useStore()
+  const { project } = useProjectContext()
   const [databaseSize, setDatabaseSize] = useState<any>(0)
   const [dateRange, setDateRange] = useState<any>(undefined)
 
@@ -76,7 +75,7 @@ const DatabaseUsage: FC<any> = () => {
   const egressIsApproaching = databaseSizeUsageRatio >= USAGE_APPROACHING_THRESHOLD
   const egressIsExceeded = databaseSizeUsageRatio >= 1
 
-  const subscriptionTier = ui.selectedProject?.subscription_tier
+  const subscriptionTier = project?.subscription_tier
 
   const isPaidTier = subscriptionTier !== PRICING_TIER_PRODUCT_IDS.FREE
 
@@ -197,8 +196,19 @@ const DatabaseUsage: FC<any> = () => {
                   <ChartHandler
                     startDate={dateRange?.period_start?.date}
                     endDate={dateRange?.period_end?.date}
-                    attribute={'cpu_usage'}
-                    label={'CPU usage'}
+                    attribute={'avg_cpu_usage'}
+                    label={'Average CPU usage'}
+                    interval={dateRange.interval}
+                    provider={'infra-monitoring'}
+                  />
+                )}
+
+                {dateRange && (
+                  <ChartHandler
+                    startDate={dateRange?.period_start?.date}
+                    endDate={dateRange?.period_end?.date}
+                    attribute={'max_cpu_usage'}
+                    label={'Max CPU usage'}
                     interval={dateRange.interval}
                     provider={'infra-monitoring'}
                   />
@@ -221,4 +231,4 @@ const DatabaseUsage: FC<any> = () => {
       </div>
     </>
   )
-}
+})
diff --git a/studio/pages/project/[ref]/reports/index.tsx b/studio/pages/project/[ref]/reports/index.tsx
index 40c5600980..7449cac149 100644
--- a/studio/pages/project/[ref]/reports/index.tsx
+++ b/studio/pages/project/[ref]/reports/index.tsx
@@ -1,19 +1,19 @@
-import { useEffect, useState } from 'react'
-import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useFlag, useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { post } from 'lib/common/fetch'
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { useProjectContentStore } from 'stores/projectContentStore'
-import Loading from 'components/ui/Loading'
+import { ReportsLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import { createReport } from 'components/to-be-cleaned/Reports/Reports.utils'
-import { ReportsLayout } from 'components/layouts'
-import { useProfileQuery } from 'data/profile/profile-query'
+import Loading from 'components/ui/Loading'
+import { useCheckPermissions, useFlag, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
+import { useProfile } from 'lib/profile'
+import { useProjectContentStore } from 'stores/projectContentStore'
+import { NextPageWithLayout } from 'types'
 
 export const UserReportPage: NextPageWithLayout = () => {
   const [loading, setLoading] = useState(true)
@@ -21,12 +21,12 @@ export const UserReportPage: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = useParams()
 
-  const { data: profile } = useProfileQuery()
+  const { profile } = useProfile()
   const { ui } = useStore()
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
 
   const contentStore = useProjectContentStore(ref)
-  const canCreateReport = checkPermissions(PermissionAction.CREATE, 'user_content', {
+  const canCreateReport = useCheckPermissions(PermissionAction.CREATE, 'user_content', {
     resource: { type: 'report', owner_id: profile?.id },
     subject: { id: profile?.id },
   })
@@ -88,4 +88,4 @@ export const UserReportPage: NextPageWithLayout = () => {
 
 UserReportPage.getLayout = (page) => <ReportsLayout>{page}</ReportsLayout>
 
-export default observer(UserReportPage)
+export default UserReportPage
diff --git a/studio/pages/project/[ref]/settings/api.tsx b/studio/pages/project/[ref]/settings/api.tsx
index 6bb7f9064e..e430e0cb57 100644
--- a/studio/pages/project/[ref]/settings/api.tsx
+++ b/studio/pages/project/[ref]/settings/api.tsx
@@ -1,20 +1,23 @@
-import { createContext, useEffect } from 'react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
+import { createContext, useEffect } from 'react'
 
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { NextPageWithLayout } from 'types'
-import { SettingsLayout } from 'components/layouts'
 import ServiceList from 'components/interfaces/Settings/API/ServiceList'
+import { SettingsLayout } from 'components/layouts'
+import {
+  useIsProjectActive,
+  useProjectContext,
+} from 'components/layouts/ProjectLayout/ProjectContext'
+import { useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 import { IconAlertCircle } from 'ui'
-import { useIsProjectActive } from 'components/layouts/ProjectLayout/ProjectContext'
 
 export const PageContext: any = createContext(null)
 
 const ApiSettings: NextPageWithLayout = () => {
   const { ref } = useParams()
-  const { meta, ui } = useStore()
-  const project = ui.selectedProject
+  const { ui, meta } = useStore()
+  const { project } = useProjectContext()
   const isActive = useIsProjectActive()
 
   // [Joshen] Will need to deprecate this
@@ -29,8 +32,10 @@ const ApiSettings: NextPageWithLayout = () => {
   if (meta) PageState.meta = meta
 
   useEffect(() => {
-    if (project?.ref) meta.schemas.load()
-  }, [project?.ref])
+    if (ui.selectedProjectRef) {
+      meta.schemas.load()
+    }
+  }, [ui.selectedProjectRef])
 
   return (
     <PageContext.Provider value={PageState}>
diff --git a/studio/pages/project/[ref]/settings/auth.tsx b/studio/pages/project/[ref]/settings/auth.tsx
index cd090a2af7..acd4f3a940 100644
--- a/studio/pages/project/[ref]/settings/auth.tsx
+++ b/studio/pages/project/[ref]/settings/auth.tsx
@@ -1,19 +1,21 @@
-import { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
+import { useParams } from 'common'
+import { AutoSchemaForm, SmtpForm } from 'components/interfaces/Auth'
 import { SettingsLayout } from 'components/layouts'
 import NoPermission from 'components/ui/NoPermission'
-import { SmtpForm, AutoSchemaForm } from 'components/interfaces/Auth'
+import { checkPermissions, useStore } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => {
-  const { ui, authConfig } = useStore()
+  const { authConfig } = useStore()
+  const { ref: projectRef } = useParams()
 
   useEffect(() => {
     authConfig.load()
-  }, [ui.selectedProjectRef])
+  }, [projectRef])
 
   const canReadAuthSettings = checkPermissions(PermissionAction.READ, 'custom_config_gotrue')
 
diff --git a/studio/pages/project/[ref]/settings/billing/invoices.tsx b/studio/pages/project/[ref]/settings/billing/invoices.tsx
index eab1762fe9..491af3ac6a 100644
--- a/studio/pages/project/[ref]/settings/billing/invoices.tsx
+++ b/studio/pages/project/[ref]/settings/billing/invoices.tsx
@@ -1,21 +1,16 @@
-import { observer } from 'mobx-react-lite'
-import { FC } from 'react'
-
-import { SettingsLayout } from 'components/layouts'
-import { useStore } from 'hooks'
-import { NextPageWithLayout, Project } from 'types'
-
-import { Invoices } from 'components/interfaces/Billing'
 import Link from 'next/link'
 
-const ProjectBilling: NextPageWithLayout = () => {
-  const { ui } = useStore()
-  const project = ui.selectedProject
+import { Invoices } from 'components/interfaces/Billing'
+import { SettingsLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
+const ProjectBilling: NextPageWithLayout = () => {
   return (
     <div className="w-full h-full overflow-y-auto content">
       <div className="w-full mx-auto">
-        <Settings project={project} />
+        <Settings />
       </div>
     </div>
   )
@@ -25,15 +20,12 @@ ProjectBilling.getLayout = (page) => (
   <SettingsLayout title="Billing and Usage">{page}</SettingsLayout>
 )
 
-export default observer(ProjectBilling)
+export default ProjectBilling
 
-interface SettingsProps {
-  project?: Project
-}
-
-const Settings: FC<SettingsProps> = ({ project }) => {
-  const { ui } = useStore()
-  const orgSlug = ui.selectedOrganization?.slug ?? ''
+const Settings = () => {
+  const selectedOrganization = useSelectedOrganization()
+  const { project: selectedProject } = useProjectContext()
+  const orgSlug = selectedOrganization?.slug ?? ''
 
   return (
     <div className="container max-w-4xl p-4 space-y-8">
@@ -52,7 +44,7 @@ const Settings: FC<SettingsProps> = ({ project }) => {
           </Link>
         </div>
 
-        <Invoices projectRef={ui.selectedProject?.ref ?? ''} />
+        <Invoices projectRef={selectedProject?.ref ?? ''} />
       </div>
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/general.tsx b/studio/pages/project/[ref]/settings/general.tsx
index a1981c1e60..9049ec621a 100644
--- a/studio/pages/project/[ref]/settings/general.tsx
+++ b/studio/pages/project/[ref]/settings/general.tsx
@@ -7,15 +7,20 @@ import {
   Infrastructure,
   CustomDomainConfig,
   DeleteProjectPanel,
+  TransferProjectPanel,
 } from 'components/interfaces/Settings/General'
+import { useFlag } from 'hooks'
 
 const ProjectSettings: NextPageWithLayout = () => {
+  const transferProjectEnabled = useFlag('transferProject')
+
   // [Joshen] Opting for larger gap instead of gap-8 as compared to other pages for better grouping of content
   return (
     <div className="1xl:px-28 mx-auto flex flex-col gap-10 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32 ">
       <General />
       <Infrastructure />
       <CustomDomainConfig />
+      {transferProjectEnabled && <TransferProjectPanel />}
       <DeleteProjectPanel />
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/storage.tsx b/studio/pages/project/[ref]/settings/storage.tsx
index 0ac1df2ea4..8a5bfe475f 100644
--- a/studio/pages/project/[ref]/settings/storage.tsx
+++ b/studio/pages/project/[ref]/settings/storage.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react'
-import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { useFlag, useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import { post } from 'lib/common/fetch'
 import { SettingsLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { StorageSettings } from 'components/to-be-cleaned/Storage'
+import { useFlag } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
 
 /**
@@ -14,9 +14,7 @@ import { NextPageWithLayout } from 'types'
  */
 const PageLayout: NextPageWithLayout = () => {
   const { ref: projectRef } = useParams()
-
-  const { ui } = useStore()
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
 
   const kpsEnabled = useFlag('initWithKps')
 
@@ -37,4 +35,4 @@ const PageLayout: NextPageWithLayout = () => {
 
 PageLayout.getLayout = (page) => <SettingsLayout title="Settings">{page}</SettingsLayout>
 
-export default observer(PageLayout)
+export default PageLayout
diff --git a/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx b/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx
index 8eee76102c..fbdf24b49a 100644
--- a/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx
+++ b/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx
@@ -4,19 +4,18 @@ import { useEffect } from 'react'
 
 import { useParams } from 'common'
 import { StorageLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import StorageBucketsError from 'components/layouts/StorageLayout/StorageBucketsError'
 import { StorageExplorer } from 'components/to-be-cleaned/Storage'
 import { useBucketsQuery } from 'data/storage/buckets-query'
-import { useFlag, useStore } from 'hooks'
+import { useFlag } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => {
   const { ref, bucketId } = useParams()
-
-  const { ui } = useStore()
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
 
   const { data, isSuccess, isError, error } = useBucketsQuery({ projectRef: ref })
   const buckets = data ?? []
@@ -27,7 +26,7 @@ const PageLayout: NextPageWithLayout = () => {
     if (project && project.status === PROJECT_STATUS.INACTIVE) {
       post(`${API_URL}/projects/${ref}/restore`, { kps_enabled: kpsEnabled })
     }
-  }, [project])
+  }, [ref, project])
 
   if (!project) return <div></div>
 
diff --git a/studio/pages/project/[ref]/storage/buckets/index.tsx b/studio/pages/project/[ref]/storage/buckets/index.tsx
index 5084b25a7f..663126a944 100644
--- a/studio/pages/project/[ref]/storage/buckets/index.tsx
+++ b/studio/pages/project/[ref]/storage/buckets/index.tsx
@@ -1,20 +1,22 @@
-import { observer } from 'mobx-react-lite'
 import { useEffect } from 'react'
 
 import { useParams } from 'common/hooks'
 import { StorageLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import StorageBucketsError from 'components/layouts/StorageLayout/StorageBucketsError'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import { useBucketsQuery } from 'data/storage/buckets-query'
-import { useFlag, useStore } from 'hooks'
+import { useFlag } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
 
-const PageLayout: NextPageWithLayout = ({}) => {
+/**
+ * PageLayout is used to setup layout - as usual it will requires inject global store
+ */
+const PageLayout: NextPageWithLayout = () => {
   const { ref } = useParams()
-  const { ui } = useStore()
-  const project = ui.selectedProject
+  const { project } = useProjectContext()
   const kpsEnabled = useFlag('initWithKps')
 
   const { error, isError } = useBucketsQuery({ projectRef: ref })
@@ -23,7 +25,7 @@ const PageLayout: NextPageWithLayout = ({}) => {
     if (project && project.status === PROJECT_STATUS.INACTIVE) {
       post(`${API_URL}/projects/${ref}/restore`, { kps_enabled: kpsEnabled })
     }
-  }, [project])
+  }, [ref, project])
 
   if (!project) return <div></div>
 
@@ -49,4 +51,4 @@ const PageLayout: NextPageWithLayout = ({}) => {
 
 PageLayout.getLayout = (page) => <StorageLayout title="Buckets">{page}</StorageLayout>
 
-export default observer(PageLayout)
+export default PageLayout
diff --git a/studio/pages/project/[ref]/storage/policies.tsx b/studio/pages/project/[ref]/storage/policies.tsx
index 09d5f8d667..f1809b0473 100644
--- a/studio/pages/project/[ref]/storage/policies.tsx
+++ b/studio/pages/project/[ref]/storage/policies.tsx
@@ -1,24 +1,23 @@
-import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
 
-import { API_URL } from 'lib/constants'
-import { post } from 'lib/common/fetch'
-import { PROJECT_STATUS } from 'lib/constants'
-import { useFlag, useStore } from 'hooks'
+import { useParams } from 'common'
 import { StorageLayout } from 'components/layouts'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { StoragePolicies } from 'components/to-be-cleaned/Storage'
+import { useFlag, useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { NextPageWithLayout } from 'types'
 
 /**
  * PageLayout is used to setup layout - as usual it will requires inject global store
  */
 const PageLayout: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref } = useParams()
 
-  const { ui, meta } = useStore()
-  const project = ui.selectedProject
+  const { meta } = useStore()
+  const { project } = useProjectContext()
 
   const kpsEnabled = useFlag('initWithKps')
 
diff --git a/studio/pages/projects.tsx b/studio/pages/projects.tsx
index 7fb12d0342..883da26a02 100644
--- a/studio/pages/projects.tsx
+++ b/studio/pages/projects.tsx
@@ -1,28 +1,48 @@
 import ProjectList from 'components/interfaces/Home/ProjectList'
 import { AccountLayout } from 'components/layouts'
 import OrganizationDropdown from 'components/to-be-cleaned/Dropdown/OrganizationDropdown'
+import AlertError from 'components/ui/AlertError'
 import Connecting from 'components/ui/Loading/Loading'
-import { useStore } from 'hooks'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useAutoProjectsPrefetch } from 'data/projects/projects-query'
 import { IS_PLATFORM } from 'lib/constants'
-import { observer } from 'mobx-react-lite'
+import { useProfile } from 'lib/profile'
 import { NextPageWithLayout } from 'types'
 
 const ProjectsPage: NextPageWithLayout = () => {
-  const { app } = useStore()
+  const {
+    data: organizations,
+    isLoading: isOrganizationLoading,
+    isError,
+    isSuccess,
+  } = useOrganizationsQuery()
+  useAutoProjectsPrefetch()
+
+  const { isLoading: isProfileLoading } = useProfile()
+
+  const isLoading = isOrganizationLoading || isProfileLoading
 
   return (
     <>
-      {!app.organizations.isInitialized ? (
+      {isLoading && (
         <div className="flex h-full items-center justify-center space-x-2">
           <Connecting />
         </div>
-      ) : (
+      )}
+
+      {isError && (
+        <div className="py-4 px-5">
+          <AlertError subject="Unable to retrieve organizations" />
+        </div>
+      )}
+
+      {isSuccess && (
         <div className="py-4 px-5">
           {IS_PLATFORM && (
             <div className="my-2">
               <div className="flex">
                 <div className="">
-                  <OrganizationDropdown organizations={app.organizations} />
+                  <OrganizationDropdown organizations={organizations} />
                 </div>
               </div>
             </div>
@@ -50,4 +70,4 @@ ProjectsPage.getLayout = (page) => (
   </AccountLayout>
 )
 
-export default observer(ProjectsPage)
+export default ProjectsPage
diff --git a/studio/pages/vercel/integrate.tsx b/studio/pages/vercel/integrate.tsx
index 8f138bbfe8..4888576449 100644
--- a/studio/pages/vercel/integrate.tsx
+++ b/studio/pages/vercel/integrate.tsx
@@ -1,31 +1,31 @@
+import Divider from 'components/ui/Divider'
+import { makeAutoObservable, runInAction } from 'mobx'
+import { observer, useLocalObservable } from 'mobx-react-lite'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import { ChangeEvent, createContext, FC, useContext, useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
-import { useRouter } from 'next/router'
-import { observer, useLocalObservable } from 'mobx-react-lite'
-import { makeAutoObservable, runInAction } from 'mobx'
-import { Button, Select, IconPlusCircle, IconX, IconChevronRight, Listbox } from 'ui'
-import Divider from 'components/ui/Divider'
 
+import { Button, IconChevronRight, IconPlusCircle, IconX, Listbox, Select } from 'ui'
 import { Dictionary } from 'components/grid'
-
-import { useStore, withAuth } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { get } from 'lib/common/fetch'
-import {
-  VERCEL_INTEGRATION_CONFIGS,
-  VERCEL_DEFAULT_EXTERNAL_ID,
-  INTEGRATION_ENVS_ALIAS,
-} from 'lib/vercelConfigs'
+import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
 import {
   createVercelEnv,
   fetchVercelProjectEnvs,
   fetchVercelProjects,
   prepareVercelEvns,
 } from 'components/to-be-cleaned/Integration/Vercel.utils'
+import { databaseIcon, vercelIcon } from 'components/to-be-cleaned/ListIcons'
 import Loading from 'components/ui/Loading'
-import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
-import { vercelIcon, databaseIcon } from 'components/to-be-cleaned/ListIcons'
+import { useProjectsQuery } from 'data/projects/projects-query'
+import { useStore, withAuth } from 'hooks'
+import { get } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import {
+  INTEGRATION_ENVS_ALIAS,
+  VERCEL_DEFAULT_EXTERNAL_ID,
+  VERCEL_INTEGRATION_CONFIGS,
+} from 'lib/vercelConfigs'
 
 interface IVercelIntegrationStore {
   code: string
@@ -177,9 +177,8 @@ type VercelIntegrationProps = {} & any
 const VercelIntegration: FC<VercelIntegrationProps> = ({}) => {
   // @ts-ignore
   const _store: IVercelIntegrationStore = useLocalObservable(() => new VercelIntegrationStore())
-  const { app } = useStore()
-  const projects = app.projects.list()
-  const isSupabaseProjectListEmpty = projects.length == 0
+  const { data: projects } = useProjectsQuery()
+  const isSupabaseProjectListEmpty = !projects || projects?.length === 0
 
   useEffect(() => {
     _store.loadInitialData()
@@ -522,8 +521,7 @@ const ProjectLinkItem: FC<ProjectLinkItemProps> = observer(
     const _store = useContext(PageContext)
     const selectedVercelProject = _store.vercelProjects.find((x) => x.id == vercelProjectId)
 
-    const { app } = useStore()
-    const sortedProjects = app.projects.list()
+    const { data: projects } = useProjectsQuery()
 
     function onVercelProjectChange(e: string) {
       const value = e != UNDEFINED_SELECT_VALUE ? e : undefined
@@ -591,7 +589,7 @@ const ProjectLinkItem: FC<ProjectLinkItemProps> = observer(
               <Listbox.Option value={UNDEFINED_SELECT_VALUE} label="Choose a project" disabled>
                 Choose a project
               </Listbox.Option>
-              {sortedProjects?.map((x: Dictionary<any>) => (
+              {projects?.map((x: Dictionary<any>) => (
                 <Listbox.Option
                   key={x.id}
                   value={x.ref}
diff --git a/studio/pages/vercel/setupOrg.tsx b/studio/pages/vercel/setupOrg.tsx
index 0041358194..fa47213c7a 100644
--- a/studio/pages/vercel/setupOrg.tsx
+++ b/studio/pages/vercel/setupOrg.tsx
@@ -1,13 +1,14 @@
-import { createContext, useEffect, useContext, useState, ChangeEvent } from 'react'
-import { useRouter } from 'next/router'
-import { observer, useLocalObservable } from 'mobx-react-lite'
-import { Button, Input, Select } from 'ui'
 import { runInAction } from 'mobx'
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
+import { ChangeEvent, createContext, useContext, useEffect, useState } from 'react'
 
-import { API_URL } from 'lib/constants'
-import { post } from 'lib/common/fetch'
-import { useStore } from 'hooks'
 import VercelIntegrationLayout from 'components/layouts/VercelIntegrationLayout'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { useStore } from 'hooks'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { Button, Input, Select } from 'ui'
 
 const PageContext = createContext(null)
 function SetupOrg() {
@@ -53,14 +54,13 @@ function SetupOrg() {
     },
   }))
 
-  const { app } = useStore()
+  const { data: organizations } = useOrganizationsQuery()
 
   useEffect(() => {
     PageState.loadInitialData()
 
-    const sortedOrganizations = app.organizations.list()
-    PageState.shouldShowOrgCreationUI = sortedOrganizations?.length == 0
-  }, [])
+    PageState.shouldShowOrgCreationUI = organizations?.length == 0
+  }, [organizations])
 
   return (
     // @ts-ignore
@@ -78,7 +78,7 @@ const CreateOrganization = observer(({}) => {
   const router = useRouter()
 
   const { ui, app } = useStore()
-  const sortedOrganizations = app.organizations.list()
+  const { data: organizations } = useOrganizationsQuery()
 
   const [orgName, setOrgName] = useState('')
   const [loading, setLoading] = useState(false)
@@ -109,7 +109,7 @@ const CreateOrganization = observer(({}) => {
 
   return (
     <div className="">
-      {sortedOrganizations?.length > 0 ? (
+      {(organizations?.length ?? 0) > 0 ? (
         <p className="mb-2">Create a new organization</p>
       ) : (
         <>
@@ -141,14 +141,13 @@ const OrgSelection = observer(({}) => {
   const router = useRouter()
   const [loading, setLoading] = useState(false)
 
-  const { app } = useStore()
-  const sortedOrganizations = app.organizations.list()
+  const { data: organizations } = useOrganizationsQuery()
 
   useEffect(() => {
     if (!PageState.selectedOrg) {
-      PageState.selectedOrg = sortedOrganizations?.length > 0 ? sortedOrganizations[0] : undefined
+      PageState.selectedOrg = (organizations?.length ?? 0) > 0 ? organizations?.[0] : undefined
     }
-  }, [sortedOrganizations])
+  }, [organizations])
 
   function onContinue() {
     setLoading(true)
@@ -164,7 +163,7 @@ const OrgSelection = observer(({}) => {
   }
 
   function onOrgSelect(e: ChangeEvent<HTMLSelectElement>) {
-    const selectedOrg = sortedOrganizations.find((x: any) => x.slug === e.target.value)
+    const selectedOrg = organizations?.find((x: any) => x.slug === e.target.value)
     PageState.selectedOrg = selectedOrg
   }
 
@@ -176,7 +175,7 @@ const OrgSelection = observer(({}) => {
           value={PageState.selectedOrg?.slug}
           onChange={onOrgSelect}
         >
-          {sortedOrganizations?.map((x) => {
+          {organizations?.map((x) => {
             return (
               <Select.Option key={x.id} value={x.slug}>
                 {x.name}
diff --git a/studio/public/img/icons/kakao-icon.svg b/studio/public/img/icons/kakao-icon.svg
new file mode 100644
index 0000000000..e721ec2b43
--- /dev/null
+++ b/studio/public/img/icons/kakao-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 256 256"><path fill="#FFE812" d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z"/><path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z"/><path fill="#FFE812" d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z"/></svg>
\ No newline at end of file
diff --git a/studio/stores/RootStore.ts b/studio/stores/RootStore.ts
index 3b42662f36..0846dd49ee 100644
--- a/studio/stores/RootStore.ts
+++ b/studio/stores/RootStore.ts
@@ -29,8 +29,7 @@ export interface IRootStore {
 
   selectedProjectRef?: string
 
-  setProjectRef: (value: string) => void
-  setOrganizationSlug: (value?: string) => void
+  setProject: (project: Project) => void
 }
 export class RootStore implements IRootStore {
   app: IAppStore
@@ -61,40 +60,21 @@ export class RootStore implements IRootStore {
    *
    * This method will also trigger project detail loading when it's not available
    */
-  setProjectRef(value: string) {
-    if (this.selectedProjectRef === value) return
-    this.selectedProjectRef = value
+  setProject(project: Project) {
+    if (this.selectedProjectRef === project.ref) return
 
     // reset ui projectRef in case of switching projects
     // this will show the loading screen instead of showing the previous project
     this.ui.setProjectRef(undefined)
 
-    const setProjectRefs = (project: Project) => {
-      this.meta.setProjectDetails(project)
-      this.functions.setProjectRef(project.ref)
-      this.authConfig.setProjectRef(project.ref)
-      this.content.setProjectRef(project.ref)
-      this.backups.setProjectRef(project.ref)
-      // ui set must come last
-      this.ui.setProjectRef(project.ref)
-    }
+    this.meta.setProjectDetails(project)
+    this.functions.setProjectRef(project.ref)
+    this.authConfig.setProjectRef(project.ref)
+    this.content.setProjectRef(project.ref)
+    this.backups.setProjectRef(project.ref)
+    // ui set must come last
+    this.ui.setProjectRef(project.ref)
 
-    // fetch project detail when
-    // - project not found yet. projectStore is loading
-    // - connectionString is not available. projectStore loaded
-    const found = this.app.projects.find((x: Project) => x.ref === value)
-    if (found?.connectionString === undefined) {
-      this.app.projects.fetchDetail(value, (project) => {
-        setProjectRefs(project)
-      })
-    } else {
-      setProjectRefs(found)
-    }
-  }
-
-  setOrganizationSlug(value?: string) {
-    if (this.ui.selectedOrganization?.slug != value) {
-      this.ui.setOrganizationSlug(value)
-    }
+    this.selectedProjectRef = project.ref
   }
 }
diff --git a/studio/stores/UiStore.ts b/studio/stores/UiStore.ts
index 0e7b35339f..91734dd99d 100644
--- a/studio/stores/UiStore.ts
+++ b/studio/stores/UiStore.ts
@@ -1,21 +1,16 @@
-import { uuidv4 } from 'lib/helpers'
 import { action, makeAutoObservable } from 'mobx'
-import { Project, Notification, Organization, ProjectBase, Permission } from 'types'
+
+import { uuidv4 } from 'lib/helpers'
+import { Notification } from 'types'
 import { IRootStore } from './RootStore'
 
 export interface IUiStore {
   language: 'en-US'
   selectedProjectRef?: string
-  selectedProject?: Project
-  selectedProjectBaseInfo?: ProjectBase
-  selectedOrganization?: Organization
   notification?: Notification
-  permissions?: Permission[]
-  load: () => void
   setProjectRef: (ref?: string) => void
   setOrganizationSlug: (slug?: string) => void
   setNotification: (notification: Notification) => string
-  setPermissions: (permissions?: Permission[]) => void
 }
 export default class UiStore implements IUiStore {
   rootStore: IRootStore
@@ -23,7 +18,6 @@ export default class UiStore implements IUiStore {
   selectedProjectRef?: string
   selectedOrganizationSlug?: string
   notification?: Notification
-  permissions?: Permission[] = []
 
   constructor(rootStore: IRootStore) {
     this.rootStore = rootStore
@@ -33,57 +27,6 @@ export default class UiStore implements IUiStore {
     })
   }
 
-  /**
-   * we use this getter to check for project ready.
-   * Only return selectedProject when it has full detail
-   * like connectionString prop
-   *
-   * @returns Project or undefined
-   */
-  get selectedProject() {
-    if (this.selectedProjectRef) {
-      const found = this.rootStore.app.projects.find(
-        (x: Project) => x.ref === this.selectedProjectRef
-      )
-      // Self-hosted project details has connectionString set to empty string
-      return found?.connectionString !== undefined ? found : undefined
-    }
-    return undefined
-  }
-
-  /**
-   * Get selected project base info.
-   *
-   * @return ProjectBase or undefined
-   */
-  get selectedProjectBaseInfo(): ProjectBase | undefined {
-    if (this.selectedProjectRef) {
-      return this.rootStore.app.projects.find((x: Project) => x.ref == this.selectedProjectRef)
-    }
-    return undefined
-  }
-
-  get selectedOrganization() {
-    if (this.selectedOrganizationSlug) {
-      const found = this.rootStore.app.organizations.find(
-        (x: Organization) => x.slug == this.selectedOrganizationSlug
-      )
-      return found
-    }
-    if (this.selectedProjectRef) {
-      const organizationId = this.selectedProject?.organization_id
-      const found = this.rootStore.app.organizations.find(
-        (x: Organization) => x.id == organizationId
-      )
-      return found
-    }
-    return undefined
-  }
-
-  load() {
-    if (typeof window === 'undefined') return
-  }
-
   setProjectRef(ref?: string) {
     this.selectedProjectRef = ref
   }
@@ -97,8 +40,4 @@ export default class UiStore implements IUiStore {
     this.notification = { ...notification, id }
     return id
   }
-
-  setPermissions(permissions?: any) {
-    this.permissions = permissions
-  }
 }
diff --git a/studio/stores/app/AppStore.ts b/studio/stores/app/AppStore.ts
index 6b436e9ddb..4c0a84b878 100644
--- a/studio/stores/app/AppStore.ts
+++ b/studio/stores/app/AppStore.ts
@@ -1,32 +1,12 @@
-import { cloneDeep } from 'lodash'
-import { values } from 'mobx'
-import { Organization, Project } from 'types'
-
-import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { getWithTimeout } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
 import { IRootStore } from '../RootStore'
 import DatabaseStore, { IDatabaseStore } from './DatabaseStore'
-import OrganizationStore from './OrganizationStore'
-import ProjectStore, { IProjectStore } from './ProjectStore'
 
 export interface IAppStore {
-  projects: IProjectStore
-  organizations: OrganizationStore
   database: IDatabaseStore
-  onProjectCreated: (project: Project) => void
-  onProjectUpdated: (project: Project) => void
-  onProjectDeleted: (project: Project) => void
-  onProjectPaused: (projectId: number) => void
-  onProjectStatusUpdated: (projectId: number, value: string) => void
-  onProjectPostgrestStatusUpdated: (projectId: number, value: 'OFFLINE' | 'ONLINE') => void
-  onOrgAdded: (org: any) => void
-  onOrgUpdated: (org: any) => void
-  onOrgDeleted: (org: any) => void
 }
 export default class AppStore implements IAppStore {
   rootStore: IRootStore
-  projects: ProjectStore
-  organizations: OrganizationStore
   database: DatabaseStore
 
   baseUrl: string
@@ -36,114 +16,6 @@ export default class AppStore implements IAppStore {
     this.baseUrl = API_URL || '/api'
 
     const headers: any = {}
-
-    this.projects = new ProjectStore(rootStore, `${this.baseUrl}/projects`, headers)
-    this.organizations = new OrganizationStore(rootStore, `${this.baseUrl}/organizations`, headers)
     this.database = new DatabaseStore(rootStore, `${this.baseUrl}/database`, headers)
   }
-
-  onProjectCreated(project: any) {
-    if (project && project.id) {
-      const temp: Project = {
-        id: project.id,
-        ref: project.ref,
-        name: project.name,
-        status: project.status,
-        organization_id: project.organization_id,
-        cloud_provider: project.cloud_provider,
-        region: project.region,
-        inserted_at: project.inserted_at,
-        subscription_id: project.subscription_id,
-      }
-      this.projects.data[project.id] = temp
-    }
-  }
-
-  onProjectUpdated(project: any) {
-    if (project && project.id) {
-      const clone = cloneDeep(this.projects.data[project.id])
-      // only update available param
-      if (project.name) clone.name = project.name
-      if (project.status) clone.status = project.status
-      this.projects.data[project.id] = clone
-    }
-  }
-
-  onProjectDeleted(project: any) {
-    if (project && project.id) {
-      // cleanup project saved queries
-      localStorage.removeItem(`supabase-queries-state-${project.ref}`)
-      localStorage.removeItem(`supabase_${project.ref}`)
-      delete this.projects.data[project.id]
-    }
-  }
-
-  // At global store level so that it can continue checking while the user
-  // is doing something else outside of the project page
-  async onProjectPaused(projectId: number) {
-    const checkProjectInactive = async () => {
-      const projectRef = this.projects.data[projectId]?.ref
-      const projectStatus = await getWithTimeout(`${API_URL}/projects/${projectRef}/status`, {
-        timeout: 2000,
-      })
-      if (projectStatus.status === PROJECT_STATUS.INACTIVE) {
-        this.onProjectStatusUpdated(projectId, PROJECT_STATUS.INACTIVE)
-      } else {
-        setTimeout(() => checkProjectInactive(), 5000)
-      }
-    }
-
-    setTimeout(() => checkProjectInactive(), 5000)
-  }
-
-  onProjectStatusUpdated(projectId: number, value: string) {
-    const clone = cloneDeep(this.projects.data[projectId])
-    clone.status = value
-    this.projects.data[projectId] = clone
-  }
-
-  onProjectPostgrestStatusUpdated(projectId: number, value: 'OFFLINE' | 'ONLINE') {
-    const clone = cloneDeep(this.projects.data[projectId])
-    clone.postgrestStatus = value
-    this.projects.data[projectId] = clone
-  }
-
-  onOrgUpdated(updatedOrg: Organization) {
-    if (updatedOrg && updatedOrg.id) {
-      const originalOrg = this.organizations.data[updatedOrg.id]
-      this.organizations.data[updatedOrg.id] = {
-        ...originalOrg,
-        ...updatedOrg,
-      }
-    }
-  }
-
-  onOrgAdded(org: Organization) {
-    if (org && org.id) {
-      this.organizations.data[org.id] = org
-    }
-  }
-
-  onOrgDeleted(org: Organization) {
-    if (org && org.id) {
-      const projects = values(this.projects.data)
-      // cleanup projects saved queries
-      const removedprojects = projects.filter(
-        (project: Project) => project.organization_id === org.id
-      )
-      removedprojects.forEach((project: Project) => {
-        localStorage.removeItem(`supabase-queries-state-${project.ref}`)
-        localStorage.removeItem(`supabase_${project.ref}`)
-      })
-      // remove projects belong to removed org
-      const updatedProjects = projects.filter(
-        (project: Project) => project.organization_id != org.id
-      )
-      this.projects.data = updatedProjects.reduce((map: any, x: any) => {
-        map[x.id] = { ...x }
-        return map
-      }, {})
-      delete (this.organizations.data as any)[org.id]
-    }
-  }
 }
diff --git a/studio/stores/app/OrganizationStore.ts b/studio/stores/app/OrganizationStore.ts
deleted file mode 100644
index daa048cc96..0000000000
--- a/studio/stores/app/OrganizationStore.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Organization } from 'types'
-import { IRootStore } from '../RootStore'
-import PostgresMetaInterface from '../common/PostgresMetaInterface'
-
-export default class OrganizationStore extends PostgresMetaInterface<Organization> {
-  constructor(
-    rootStore: IRootStore,
-    dataUrl: string,
-    headers?: {
-      [prop: string]: any
-    },
-    options?: { identifier: string }
-  ) {
-    super(rootStore, dataUrl, headers, options)
-  }
-}
diff --git a/studio/stores/app/PermissionsStore.ts b/studio/stores/app/PermissionsStore.ts
deleted file mode 100644
index a14f98cc1d..0000000000
--- a/studio/stores/app/PermissionsStore.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { keyBy } from 'lodash'
-import { Permission } from 'types'
-import { IRootStore } from '../RootStore'
-import PostgresMetaInterface from '../common/PostgresMetaInterface'
-
-export default class PermissionsStore extends PostgresMetaInterface<Permission> {
-  constructor(
-    rootStore: IRootStore,
-    dataUrl: string,
-    headers?: {
-      [prop: string]: any
-    },
-    options?: { identifier: string }
-  ) {
-    super(rootStore, dataUrl, headers, options)
-  }
-
-  // [Joshen] Method override here as permissions are not identified by an id from the API
-  setDataArray(value: any[]) {
-    const formattedValues = value.map((permission, idx: number) => {
-      return { ...permission, id: idx + 1 }
-    })
-    const formattedValue = keyBy(formattedValues, this.identifier)
-    Object.keys(this.data).forEach((projectId) => {
-      if (formattedValue[projectId] !== undefined) {
-        formattedValue[projectId] = this.data[projectId]
-      }
-    })
-    this.data = formattedValue
-  }
-
-  // [Joshen] Method override here as permissions do not have `name` property
-  list() {
-    return Object.values(this.data)
-  }
-}
diff --git a/studio/stores/app/ProjectStore.ts b/studio/stores/app/ProjectStore.ts
deleted file mode 100644
index d43814c29a..0000000000
--- a/studio/stores/app/ProjectStore.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { cloneDeep, keyBy } from 'lodash'
-import { Project } from 'types'
-import { IRootStore } from '../RootStore'
-import { constructHeaders } from 'lib/api/apiHelpers'
-import { get } from 'lib/common/fetch'
-import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
-import PostgresMetaInterface, { IPostgresMetaInterface } from '../common/PostgresMetaInterface'
-
-import pingPostgrest from 'lib/pingPostgrest'
-
-export interface IProjectStore extends IPostgresMetaInterface<Project> {
-  fetchDetail: (projectRef: string, callback?: (project: Project) => void) => Promise<void>
-  fetchSubscriptionTier: (project: Project) => Promise<void>
-}
-
-export default class ProjectStore extends PostgresMetaInterface<Project> {
-  constructor(
-    rootStore: IRootStore,
-    dataUrl: string,
-    headers?: {
-      [prop: string]: any
-    },
-    options?: { identifier: string }
-  ) {
-    super(rootStore, dataUrl, headers, options)
-  }
-
-  // [Joshen] Method override here due to race condition between projects.load() and fetchDetail()
-  // There's a race condition that can happen here when these 2 methods are called, such that if
-  // fetchDetail() completes before projects.load() completes, the response from project.loads()
-  // then overrides what fetchDetail() has already populated into the store - causing parameters like
-  // connectionString to become undefined and hence causing the dashboard to stay in a Connecting state.
-  // You can reproduce this by giving a setTimeout to project.loads under withAuth.tsx
-
-  // This thus ensures that the response from project.loads() do not override projects which are already
-  // loaded in the store from a successful fetchDetail() - This should be fine as project.loads() is only
-  // called once in this whole app under withAuth.tsx
-  setDataArray(value: any[]) {
-    const formattedValue = keyBy(value, this.identifier)
-    Object.keys(this.data).forEach((projectId) => {
-      if (formattedValue[projectId] !== undefined) {
-        formattedValue[projectId] = this.data[projectId]
-      }
-    })
-    this.data = formattedValue
-  }
-
-  async fetchDetail(projectRef: string, callback?: (project: Project) => void) {
-    const url = `${this.url}/${projectRef}`
-    const headers = constructHeaders(this.headers)
-    const response = await get(url, { headers })
-
-    if (!response.error) {
-      const project = response as Project
-      // to improve UX, we wait for PingPostgrest result before continue
-      project.postgrestStatus = await this.pingPostgrest(project)
-      // update project detail by key id
-      this.data[project.id] = project
-
-      callback?.(project)
-
-      // lazy fetches
-      if (IS_PLATFORM) {
-        this.fetchSubscriptionTier(project)
-      }
-    }
-  }
-
-  async pingPostgrest(project: Project): Promise<'ONLINE' | 'OFFLINE' | undefined> {
-    if (project.status === PROJECT_STATUS.ACTIVE_HEALTHY && project.restUrl) {
-      const success = await pingPostgrest(project.ref, { kpsVersion: project.kpsVersion })
-      return success ? 'ONLINE' : 'OFFLINE'
-    }
-    return undefined
-  }
-
-  async fetchSubscriptionTier(project: Project) {
-    const { id: projectId, ref: projectRef, status } = project
-    if (status !== PROJECT_STATUS.REMOVED) {
-      const url = `${this.url}/${projectRef}/subscription`
-      const headers = constructHeaders(this.headers)
-      const response = await get(url, { headers })
-      if (!response.error) {
-        const subscriptionInfo = response as {
-          tier: {
-            supabase_prod_id: string
-          }
-        }
-        // update subscription_tier key
-        const clone = cloneDeep(this.data[projectId])
-        clone.subscription_tier = subscriptionInfo.tier.supabase_prod_id
-        this.data[projectId] = clone
-      }
-    }
-  }
-}
diff --git a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
index 750ff44fa6..48eefc8e24 100644
--- a/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
+++ b/studio/stores/authConfig/schema/AuthProviders/AuthProvidersFormValidation.tsx
@@ -1,6 +1,10 @@
-import { boolean, number, object, string } from 'yup'
+import { boolean, number, object, string, ValidationError } from 'yup'
 import { urlRegex } from 'components/interfaces/Auth/Auth.constants'
 
+const parseBase64URL = (b64url: string) => {
+  return atob(b64url.replace(/[-]/g, '+').replace(/[_]/g, '/'))
+}
+
 const JSON_SCHEMA_VERSION = 'http://json-schema.org/draft-07/schema#'
 
 const PROVIDER_EMAIL = {
@@ -300,80 +304,139 @@ const EXTERNAL_PROVIDER_APPLE = {
   title: 'Apple',
   properties: {
     EXTERNAL_APPLE_ENABLED: {
-      title: 'Enable Apple provider',
-      description: 'This will enable Apple login for your application',
+      title: 'Enable Sign in with Apple',
+      description:
+        'Enables Sign in with Apple on the web using OAuth or natively within iOS, macOS, watchOS or tvOS apps.',
       type: 'boolean',
     },
     EXTERNAL_APPLE_CLIENT_ID: {
-      /**
-       * to do: change docs
-       */
-      title: 'Services ID',
-      description: `
-Client identifier when authenticating or validating users.
+      title: 'Service ID (for OAuth)',
+      description: `Client identifier used in the OAuth flow on the web.
 [Learn more](https://developer.apple.com/documentation/sign_in_with_apple/configuring_your_environment_for_sign_in_with_apple)`,
       type: 'string',
     },
-    EXTERNAL_IOS_BUNDLE_ID: {
-      /**
-       * to do: change docs
-       */
-      title: 'IOS Bundle ID',
-      description: `The iOS app's unique identifier. [Learn more](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids)`,
-      type: 'string',
-    },
     EXTERNAL_APPLE_SECRET: {
-      /**
-       * to do: change docs
-       */
-      title: 'Secret key',
-      description: `
-The secret key is a JWT token that must be generated.
+      title: 'Secret Key (for OAuth)',
+      description: `Secret key used in the OAuth flow.
 [Learn more](https://supabase.com/docs/guides/auth/social-login/auth-apple#generate-a-client_secret)`,
       type: 'string',
       isSecret: true,
     },
-  },
-  validationSchema: object().shape(
-    {
-      EXTERNAL_APPLE_ENABLED: boolean().required(),
-      EXTERNAL_APPLE_SECRET: string().when(['EXTERNAL_APPLE_ENABLED'], {
-        is: true,
-        then: (schema) => schema.required('Secret key is required'),
-        otherwise: (schema) => schema,
-      }),
-      EXTERNAL_APPLE_CLIENT_ID: string().when(
-        ['EXTERNAL_APPLE_ENABLED', 'EXTERNAL_IOS_BUNDLE_ID'],
-        {
-          is: (EXTERNAL_APPLE_ENABLED: boolean, EXTERNAL_IOS_BUNDLE_ID: string) => {
-            return EXTERNAL_APPLE_ENABLED && !EXTERNAL_IOS_BUNDLE_ID
-          },
-          then: (schema) => schema.required('Either the Services ID or iOS Bundle ID is required'),
-          otherwise: (schema) => schema,
-        }
-      ),
-      EXTERNAL_IOS_BUNDLE_ID: string().when(
-        ['EXTERNAL_APPLE_ENABLED', 'EXTERNAL_APPLE_CLIENT_ID'],
-        {
-          is: (EXTERNAL_APPLE_ENABLED: boolean, EXTERNAL_APPLE_CLIENT_ID: string) => {
-            return EXTERNAL_APPLE_ENABLED && !EXTERNAL_APPLE_CLIENT_ID
-          },
-          then: (schema) => schema.required('Either the Services ID or iOS Bundle ID is required'),
-          otherwise: (schema) => schema,
-        }
-      ),
+    EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS: {
+      title: 'Authorized Client IDs (iOS, macOS, watchOS, tvOS bundle IDs or service IDs)',
+      description: `Comma separated list of allowed Apple app bundle IDs for native sign in, or service IDs for Sign in with Apple JS. [Learn more](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js)`,
+      type: 'string',
     },
-    // this is necessary for the "either or" validation on EXTERNAL_APPLE_CLIENT_ID and EXTERNAL_IOS_BUNDLE_ID
-    [['EXTERNAL_APPLE_CLIENT_ID', 'EXTERNAL_IOS_BUNDLE_ID']]
-  ),
+  },
+  validationSchema: object().shape({
+    EXTERNAL_APPLE_ENABLED: boolean().required(),
+    EXTERNAL_APPLE_SECRET: string()
+      .when(['EXTERNAL_APPLE_ENABLED', 'EXTERNAL_APPLE_CLIENT_ID'], {
+        is: (EXTERNAL_APPLE_ENABLED: boolean, EXTERNAL_APPLE_CLIENT_ID: string) => {
+          return EXTERNAL_APPLE_ENABLED && !!EXTERNAL_APPLE_CLIENT_ID
+        },
+        then: (schema) =>
+          schema
+            .required('Secret key is required when using the OAuth flow.')
+            .matches(/^[a-z0-9_-]+([.][a-z0-9_-]+){2}$/i, 'Secret key should be a JWT.')
+            .test({
+              message: 'Secret key is not a correctly generated JWT.',
+              test: (value?: string): boolean => {
+                if (!value) {
+                  return true
+                }
+                try {
+                  const parts = value.split('.').map((value) => parseBase64URL(value))
+                  const header = JSON.parse(parts[0])
+                  const body = JSON.parse(parts[1])
+                  return (
+                    typeof header === 'object' &&
+                    typeof body === 'object' &&
+                    header &&
+                    body &&
+                    header.typ === 'JWT' &&
+                    header.alg === 'ES256' &&
+                    body.aud === 'https://appleid.apple.com'
+                  )
+                } catch (e: any) {
+                  console.log(e)
+                  return false
+                }
+
+                return true
+              },
+            })
+            .test({
+              message: 'Secret key expires in less than 7 days!',
+              test: (value?: string) => {
+                if (!value) {
+                  return true
+                }
+                try {
+                  const parts = value.split('.').map((value) => parseBase64URL(value))
+                  const body = JSON.parse(parts[1])
+                  return Date.now() > body.exp - 7 * 24 * 60 * 60 * 1000
+                } catch (e: any) {
+                  console.log(e)
+                  return false
+                }
+
+                return true
+              },
+            }),
+      })
+      .when(
+        [
+          'EXTERNAL_APPLE_ENABLED',
+          'EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS',
+          'EXTERNAL_APPLE_CLIENT_ID',
+        ],
+        {
+          is: (
+            EXTERNAL_APPLE_ENABLED: boolean,
+            EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS: string,
+            EXTERNAL_APPLE_CLIENT_ID: string
+          ) => {
+            return (
+              EXTERNAL_APPLE_ENABLED &&
+              !!EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS &&
+              !EXTERNAL_APPLE_CLIENT_ID
+            )
+          },
+          then: (schema) =>
+            schema.matches(
+              /^$/,
+              'Secret Key should only be set if Service ID for OAuth is provided.'
+            ),
+        }
+      ),
+    EXTERNAL_APPLE_CLIENT_ID: string().matches(
+      /^[a-z0-9.-]+$/i,
+      'Invalid characters. Apple recommends a reverse-domain name style string (e.g. com.example.app).'
+    ),
+    EXTERNAL_APPLE_ADDITIONAL_CLIENT_IDS: string()
+      .matches(
+        /^([.a-z0-9-]+(,\s*[.a-z0-9-]+)*,*\s*)?$/i,
+        'Invalid characters. Apple recommends a reverse-domain name style string (e.g. com.example.app). You must only use explicit bundle IDs, asterisks (*) are not allowed.'
+      )
+      .when(['EXTERNAL_APPLE_ENABLED', 'EXTERNAL_APPLE_CLIENT_ID'], {
+        is: (EXTERNAL_APPLE_ENABLED: boolean, EXTERNAL_APPLE_CLIENT_ID: string) => {
+          return EXTERNAL_APPLE_ENABLED && !EXTERNAL_APPLE_CLIENT_ID
+        },
+        then: (schema) =>
+          schema.required(
+            'At least one Authorized Client ID is required when not using the OAuth flow.'
+          ),
+      }),
+  }),
   misc: {
     iconKey: 'apple-icon',
     requiresRedirect: true,
-    helper: `To complete setup, add this authorisation callback URL to your app's configuration in the Apple Developer Console.
+    helper: `Register this callback URL when using Sign in with Apple on the web in the Apple Developer Center.
             [Learn more](https://supabase.com/docs/guides/auth/social-login/auth-apple#configure-your-services-id)`,
     alert: {
-      title: `Apple secrets will self expire every 6 months`,
-      description: `You will need to regenerate before the 6 months elapses otherwise your users using Apple Login will no longer be able to log back in.`,
+      title: `Apple OAuth secret keys expire every 6 months`,
+      description: `A new secret should be generated every 6 months, otherwise users on the web will not be able to sign in.`,
     },
   },
 }
@@ -630,36 +693,133 @@ const EXTERNAL_PROVIDER_GOOGLE = {
   title: 'Google',
   properties: {
     EXTERNAL_GOOGLE_ENABLED: {
-      title: 'Google enabled',
+      title: 'Enable Sign in with Google',
+      description:
+        'Enables Sign in with Google on the web using OAuth or One Tap, or in Android apps or Chrome extensions.',
+      type: 'boolean',
+    },
+    EXTERNAL_GOOGLE_CLIENT_ID: {
+      title: 'Client ID (for OAuth)',
+      description: 'Client ID to use with the OAuth flow on the web.',
+      type: 'string',
+    },
+    EXTERNAL_GOOGLE_SECRET: {
+      title: 'Client Secret (for OAuth)',
+      description: 'Client Secret to use with the OAuth flow on the web.',
+      type: 'string',
+      isSecret: true,
+    },
+    EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS: {
+      title: 'Authorized Client IDs (for Android, One Tap, and Chrome extensions)',
+      description:
+        'Comma separated list of client IDs of Android apps, One Tap or Chrome extensions that are allowed to log in to your project.',
+      type: 'string',
+    },
+  },
+  validationSchema: object().shape({
+    EXTERNAL_GOOGLE_ENABLED: boolean().required(),
+    EXTERNAL_GOOGLE_SECRET: string()
+      .when(['EXTERNAL_GOOGLE_ENABLED', 'EXTERNAL_GOOGLE_CLIENT_ID'], {
+        is: (EXTERNAL_GOOGLE_ENABLED: boolean, EXTERNAL_GOOGLE_CLIENT_ID: string) => {
+          return EXTERNAL_GOOGLE_ENABLED && !!EXTERNAL_GOOGLE_CLIENT_ID
+        },
+        then: (schema) =>
+          schema
+            .matches(
+              /^[a-z0-9.\/_-]*$/i,
+              'Invalid characters. Google OAuth Client Secrets usually contain letters, numbers, dots, dashes and underscores.'
+            )
+            .required('Client Secret is required when using the OAuth flow.'),
+      })
+      .when(
+        [
+          'EXTERNAL_GOOGLE_ENABLED',
+          'EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS',
+          'EXTERNAL_GOOGLE_CLIENT_ID',
+        ],
+        {
+          is: (
+            EXTERNAL_GOOGLE_ENABLED: boolean,
+            EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS: string,
+            EXTERNAL_GOOGLE_CLIENT_ID: string
+          ) => {
+            return (
+              EXTERNAL_GOOGLE_ENABLED &&
+              !!EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS &&
+              !EXTERNAL_GOOGLE_CLIENT_ID
+            )
+          },
+          then: (schema) =>
+            schema.matches(
+              /^$/,
+              'Client Secret should only be set when Client ID for OAuth is set.'
+            ),
+        }
+      ),
+    EXTERNAL_GOOGLE_CLIENT_ID: string().matches(
+      /^([a-z0-9-]+([.][a-z0-9-]+)+)?$/i,
+      'Invalid characters. Google OAuth Client IDs are usually a domain-name (e.g. 01234567890-abcdefghijklmnopqrstuvwxyz012345.apps.googleusercontent.com).'
+    ),
+    EXTERNAL_GOOGLE_ADDITIONAL_CLIENT_IDS: string()
+      .matches(
+        /^([a-z0-9-]+([.][a-z0-9-]+)*(,\s*[a-z0-9-]+([.][a-z0-9-]+)*)*,*\s*)?$/i,
+        'Invalid characters. Google Client IDs are usually a domain-name style string (e.g. com.example.com.app or *.apps.googleusercontent.com).'
+      )
+
+      .when(['EXTERNAL_GOOGLE_ENABLED', 'EXTERNAL_GOOGLE_CLIENT_ID'], {
+        is: (EXTERNAL_GOOGLE_ENABLED: boolean, EXTERNAL_GOOGLE_CLIENT_ID: string) => {
+          return EXTERNAL_GOOGLE_ENABLED && !EXTERNAL_GOOGLE_CLIENT_ID
+        },
+        then: (schema) =>
+          schema.required(
+            'At least one Authorized Client ID is required when not using the OAuth flow.'
+          ),
+      }),
+  }),
+  misc: {
+    iconKey: 'google-icon',
+    requiresRedirect: true,
+    helper: `Register this callback URL when using Sign-in with Google on the web using OAuth.
+            [Learn more](https://supabase.com/docs/guides/auth/social-login/auth-apple#configure-your-services-id)`,
+  },
+}
+
+const EXTERNAL_PROVIDER_KAKAO = {
+  $schema: JSON_SCHEMA_VERSION,
+  type: 'object',
+  title: 'Kakao',
+  properties: {
+    EXTERNAL_KAKAO_ENABLED: {
+      title: 'Kakao enabled',
       type: 'boolean',
     },
     // [TODO] Update docs
-    EXTERNAL_GOOGLE_CLIENT_ID: {
-      title: 'Client ID',
+    EXTERNAL_KAKAO_CLIENT_ID: {
+      title: 'REST API Key',
       type: 'string',
     },
     // [TODO] Update docs
-    EXTERNAL_GOOGLE_SECRET: {
-      title: 'Client Secret',
+    EXTERNAL_KAKAO_SECRET: {
+      title: 'Client Secret Code',
       type: 'string',
       isSecret: true,
     },
   },
   validationSchema: object().shape({
-    EXTERNAL_GOOGLE_ENABLED: boolean().required(),
-    EXTERNAL_GOOGLE_CLIENT_ID: string().when('EXTERNAL_GOOGLE_ENABLED', {
+    EXTERNAL_KAKAO_ENABLED: boolean().required(),
+    EXTERNAL_KAKAO_CLIENT_ID: string().when('EXTERNAL_KAKAO_ENABLED', {
       is: true,
-      then: (schema) => schema.required('Client ID is required'),
+      then: (schema) => schema.required('REST API Key is required'),
       otherwise: (schema) => schema,
     }),
-    EXTERNAL_GOOGLE_SECRET: string().when('EXTERNAL_GOOGLE_ENABLED', {
+    EXTERNAL_KAKAO_SECRET: string().when('EXTERNAL_KAKAO_ENABLED', {
       is: true,
-      then: (schema) => schema.required('Client Secret is required'),
+      then: (schema) => schema.required('Client Secret Code is required'),
       otherwise: (schema) => schema,
     }),
   }),
   misc: {
-    iconKey: 'google-icon',
+    iconKey: 'kakao-icon',
     requiresRedirect: true,
   },
 }
@@ -1063,6 +1223,7 @@ export const PROVIDERS_SCHEMAS = [
   EXTERNAL_PROVIDER_GITHUB,
   EXTERNAL_PROVIDER_GITLAB,
   EXTERNAL_PROVIDER_GOOGLE,
+  EXTERNAL_PROVIDER_KAKAO,
   EXTERNAL_PROVIDER_KEYCLOAK,
   EXTERNAL_PROVIDER_LINKEDIN,
   EXTERNAL_PROVIDER_NOTION,
diff --git a/studio/stores/jsonSchema/auth_gotrue_config.json b/studio/stores/jsonSchema/auth_gotrue_config.json
index a0d00a3deb..e190bc15ba 100644
--- a/studio/stores/jsonSchema/auth_gotrue_config.json
+++ b/studio/stores/jsonSchema/auth_gotrue_config.json
@@ -17,6 +17,7 @@
     "EXTERNAL_GITHUB_ENABLED",
     "EXTERNAL_GITLAB_ENABLED",
     "EXTERNAL_GOOGLE_ENABLED",
+    "EXTERNAL_KAKAO_ENABLED",
     "EXTERNAL_KEYCLOAK_ENABLED",
     "EXTERNAL_LINKEDIN_ENABLED",
     "EXTERNAL_NOTION_ENABLED",
@@ -196,6 +197,18 @@
       "title": "Google secret",
       "type": "string"
     },
+    "EXTERNAL_KAKAO_ENABLED": {
+      "title": "Kakao enabled",
+      "type": "boolean"
+    },
+    "EXTERNAL_KAKAO_CLIENT_ID": {
+      "title": "Kakao client ID",
+      "type": "string"
+    },
+    "EXTERNAL_KAKAO_SECRET": {
+      "title": "Kakao secret",
+      "type": "string"
+    },
     "EXTERNAL_KEYCLOAK_ENABLED": {
       "title": "Keycloak enabled",
       "type": "boolean"
@@ -443,6 +456,10 @@
       "title": "Body",
       "type": "string"
     },
+    "MFA_MAX_ENROLLED_FACTORS": {
+      "title": "Maximum enrolled factors",
+      "type": "integer"
+    }
     "PASSWORD_MIN_LENGTH": {
       "title": "Minimum password length",
       "type": "integer"
diff --git a/studio/stores/project/VaultStore.ts b/studio/stores/project/VaultStore.ts
index a803ff64db..03aa9f72ab 100644
--- a/studio/stores/project/VaultStore.ts
+++ b/studio/stores/project/VaultStore.ts
@@ -133,7 +133,7 @@ export default class VaultStore implements IVaultStore {
   }
 
   async encryptColumn(column: PostgresColumn, keyId: string) {
-    const query = `security label for pgsodium on column "${column.table}"."${column.name}" is 'ENCRYPT WITH KEY ID ${keyId}';`
+    const query = `security label for pgsodium on column "${column.table}"."${column.name}" is 'ENCRYPT WITH KEY ID ${keyId} SECURITY INVOKER';`
     return await this.rootStore.meta.query(query)
   }
 
diff --git a/studio/tests/pages/projects/billing/Infrastructure.test.tsx b/studio/tests/pages/projects/billing/Infrastructure.test.tsx
new file mode 100644
index 0000000000..f28fdb3522
--- /dev/null
+++ b/studio/tests/pages/projects/billing/Infrastructure.test.tsx
@@ -0,0 +1,24 @@
+import { get } from 'lib/common/fetch'
+import { render } from '../../../helpers'
+import { screen } from '@testing-library/react'
+import Infrastructure from 'components/interfaces/BillingV2/Usage/Infrastructure'
+beforeEach(() => {
+  // reset mocks between tests
+  ;(get as jest.Mock).mockReset()
+  ;(get as jest.Mock).mockImplementation(async (_url: string) => {
+    return [{ result: [] }]
+  })
+})
+
+test(`renders category attributes static elements`, async () => {
+  render(
+    <Infrastructure
+      projectRef={'someref'}
+      startDate={new Date().toISOString()}
+      endDate={new Date().toISOString()}
+      currentBillingCycleSelected={false}
+    />
+  )
+  // renders usage categories info
+  await screen.findByText('Max CPU usage of your server')
+})
diff --git a/studio/types/base.ts b/studio/types/base.ts
index 3bdb8d54dc..0a79e4f9dc 100644
--- a/studio/types/base.ts
+++ b/studio/types/base.ts
@@ -79,10 +79,6 @@ export interface Permission {
   resources: string[]
 }
 
-export interface ResponseError {
-  message: string
-}
-
 export interface ResponseFailure {
   error: ResponseError
 }