diff --git a/apps/docs/components/Clippy/ClippyModal.tsx b/apps/docs/components/Clippy/ClippyModal.tsx
index cb38781fda1..3bbbd7c69de 100644
--- a/apps/docs/components/Clippy/ClippyModal.tsx
+++ b/apps/docs/components/Clippy/ClippyModal.tsx
@@ -123,7 +123,7 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
   return (
     <Modal size="xlarge" visible={true} onCancel={onClose} closable={false} hideFooter>
       <div
-        className={`mx-auto max-h-[75vh] flex flex-col gap-4 rounded-lg p-4 md:pt-6 md:px-6 pb-2 w-full shadow-2xl overflow-hidden border text-left border-scale-500 bg-scale-100 dark:bg-scale-300 cursor-auto relative min-w-[340px]`}
+        className={`mx-auto max-h-[50vh] lg:max-h-[75vh] flex flex-col gap-4 rounded-lg p-4 md:pt-6 md:px-6 pb-2 w-full shadow-2xl overflow-hidden border text-left border-scale-500 bg-scale-100 dark:bg-scale-300 cursor-auto relative min-w-[340px]`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="relative">
@@ -237,7 +237,7 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
           <div className="flex justify-between items-center py-2 text-xs">
             <div className="flex items-centerp gap-1 pt-3 pb-1">
               <span>Powered by OpenAI.</span>
-              <a href="/blog/clippy" className="underline">
+              <a href="/blog/chatgpt-supabase-docs" className="underline">
                 Read the blog post
               </a>
             </div>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index dbbf60a6a36..f2139f3a407 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -850,14 +850,14 @@ export const reference = {
 
 export const reference_javascript_v1 = {
   icon: 'reference-javascript',
-  title: 'javascript',
+  title: 'JavaScript',
   url: '/guides/reference/javascript',
   parent: '/reference',
 }
 
 export const reference_javascript_v2 = {
   icon: 'reference-javascript',
-  title: 'javascript',
+  title: 'JavaScript',
   url: '/guides/reference/javascript',
   parent: '/reference',
 }
@@ -878,7 +878,7 @@ export const reference_dart_v1 = {
 
 export const reference_csharp_v0 = {
   icon: 'reference-csharp',
-  title: 'c#',
+  title: 'C#',
   url: 'guides/reference/csharp',
   parent: '/reference',
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index 4588fc5864e..2fd9b545aa8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -89,16 +89,7 @@ const TopNavBarRef: FC = () => {
         </div>
 
         <div className="flex items-center gap-6">
-          <div className="flex md:hidden cursor-pointer">
-            <Image
-              onClick={openClippy}
-              width={26}
-              height={29}
-              src={isDarkMode ? clippyImageDark : clippyImage}
-              alt="Clippy"
-            />
-          </div>
-          <SearchButton className="md:w-full lg:w-96">
+          <SearchButton className="md:w-full lg:w-96 order-2 lg:order-1">
             <div
               className="
               flex
@@ -126,6 +117,16 @@ const TopNavBarRef: FC = () => {
               </div>
             </div>
           </SearchButton>
+
+          <div className="flex cursor-pointer order-1 lg:order-2">
+            <Image
+              onClick={openClippy}
+              width={26}
+              height={29}
+              src={isDarkMode ? clippyImageDark : clippyImage}
+              alt="Clippy"
+            />
+          </div>
         </div>
         <div className="hidden lg:flex grow items-center justify-end gap-3">
           <Button
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
index 2f0c721da89..a31afc3d055 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
@@ -109,6 +109,8 @@ This will be used any time we need to create a Supabase client _server-side_ - i
 
 Next, we need a middleware file to refresh the user's session on navigation.
 
+> If you were using Middleware prior to 12.2, see the [upgrade guide](https://nextjs.org/docs/messages/middleware-upgrade-guide).
+
 <Tabs
   scrollable
   size="small"
@@ -117,7 +119,7 @@ Next, we need a middleware file to refresh the user's session on navigation.
 >
 <TabPanel id="js" label="JavaScript">
 
-Create a new `/app/middleware.js` file and populate with the following:
+Create a new `middleware.js` file at the same level as your `app` (in the root or `src` directory) and populate with the following:
 
 ```jsx title="middleware.js"
 import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
@@ -140,7 +142,7 @@ export async function middleware(req) {
 
 <TabPanel id="ts" label="TypeScript">
 
-Create a new `/app/middleware.ts` file and populate with the following:
+Create a new `middleware.ts` file at the same level as your `app` (in the root or `src` directory) and populate with the following:
 
 ```tsx title="middleware.ts"
 import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx
index 2bea7515a9a..f4989365455 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx
@@ -67,7 +67,7 @@ export const meta = {
     <StepHikeCompact.Code>
 
       ```bash Terminal
-      cd my-app && npm install @supabase/supabase-js
+      cd myapp && npm install @supabase/supabase-js
       ```
 
     </StepHikeCompact.Code>
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index 844c10dc2a4..3975ab33dcf 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -66,7 +66,27 @@ export default defineNuxtConfig({
 
 Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
 
-```html title=/components/Auth.vue
+```vue title=/components/Auth.vue
+<script setup>
+const supabase = useSupabaseClient()
+
+const loading = ref(false)
+const email = ref('')
+
+const handleLogin = async () => {
+  try {
+    loading.value = true
+    const { error } = await supabase.auth.signInWithOtp({ email: email.value })
+    if (error) throw error
+    alert('Check your email for the login link!')
+  } catch (error) {
+    alert(error.error_description || error.message)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
   <form class="row flex-center flex" @submit.prevent="handleLogin">
     <div class="col-6 form-widget">
@@ -86,25 +106,6 @@ Let's set up a Vue component to manage logins and sign ups. We'll use Magic Link
     </div>
   </form>
 </template>
-
-<script setup>
-  const supabase = useSupabaseClient()
-
-  const loading = ref(false)
-  const email = ref('')
-  const handleLogin = async () => {
-    try {
-      loading.value = true
-      const { error } = await supabase.auth.signInWithOtp({ email: email.value })
-      if (error) throw error
-      alert('Check your email for the login link!')
-    } catch (error) {
-      alert(error.error_description || error.message)
-    } finally {
-      loading.value = false
-    }
-  }
-</script>
 ```
 
 ### User state
@@ -116,7 +117,70 @@ To access the user information, use the composable [useSupabaseUser](https://sup
 After a user is signed in we can allow them to edit their profile details and manage their account.
 Let's create a new component for that called `Account.vue`.
 
-```html title=components/Account.vue
+```vue title=components/Account.vue
+<script setup>
+const supabase = useSupabaseClient()
+
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_path = ref('')
+
+loading.value = true
+const user = useSupabaseUser()
+
+let { data } = await supabase
+  .from('profiles')
+  .select(`username, website, avatar_url`)
+  .eq('id', user.value.id)
+  .single()
+
+if (data) {
+  username.value = data.username
+  website.value = data.website
+  avatar_path.value = data.avatar_url
+}
+
+loading.value = false
+
+async function updateProfile() {
+  try {
+    loading.value = true
+    const user = useSupabaseUser()
+
+    const updates = {
+      id: user.value.id,
+      username: username.value,
+      website: website.value,
+      avatar_url: avatar_path.value,
+      updated_at: new Date(),
+    }
+
+    let { error } = await supabase.from('profiles').upsert(updates, {
+      returning: 'minimal', // Don't return the value after inserting
+    })
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function signOut() {
+  try {
+    loading.value = true
+    let { error } = await supabase.auth.signOut()
+    if (error) throw error
+    user.value = null
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <div>
@@ -146,82 +210,23 @@ Let's create a new component for that called `Account.vue`.
     </div>
   </form>
 </template>
-
-<script setup>
-  const supabase = useSupabaseClient()
-
-  const loading = ref(true)
-  const username = ref('')
-  const website = ref('')
-  const avatar_path = ref('')
-
-
-  loading.value = true
-  const user = useSupabaseUser();
-  let { data } = await supabase
-      .from('profiles')
-      .select(`username, website, avatar_url`)
-      .eq('id', user.value.id)
-      .single()
-  if (data) {
-      username.value = data.username
-      website.value = data.website
-      avatar_path.value = data.avatar_url
-  }
-  loading.value = false
-
-  async function updateProfile() {
-      try {
-          loading.value = true
-          const user = useSupabaseUser();
-          const updates = {
-              id: user.value.id,
-              username: username.value,
-              website: website.value,
-              avatar_url: avatar_path.value,
-              updated_at: new Date(),
-          }
-          let { error } = await supabase.from('profiles').upsert(updates, {
-              returning: 'minimal', // Don't return the value after inserting
-          })
-          if (error) throw error
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-
-  async function signOut() {
-      try {
-          loading.value = true
-          let { error } = await supabase.auth.signOut()
-          if (error) throw error
-          user.value = null
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-</script>
 ```
 
 ### Launch!
 
 Now that we have all the components in place, let's update `app.vue`:
 
-```html title=app.vue
+```vue title=app.vue
+<script setup>
+const user = useSupabaseUser()
+</script>
+
 <template>
   <div class="container" style="padding: 50px 0 100px 0">
     <Account v-if="user" />
     <Auth v-else />
   </div>
 </template>
-
-<script setup>
-  const user = useSupabaseUser()
-</script>
 ```
 
 Once that's done, run this in a terminal window:
@@ -242,7 +247,65 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 
 Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
 
-```html title=components/Avatar.vue
+```vue title=components/Avatar.vue
+<script setup>
+const props = defineProps(['path'])
+const { path } = toRefs(props)
+
+const emit = defineEmits(['update:path', 'upload'])
+
+const supabase = useSupabaseClient()
+
+const uploading = ref(false)
+const src = ref('')
+const files = ref()
+
+const downloadImage = async () => {
+  try {
+    const { data, error } = await supabase.storage.from('avatars').download(path.value)
+    if (error) throw error
+    src.value = URL.createObjectURL(data)
+  } catch (error) {
+    console.error('Error downloading image: ', error.message)
+  }
+}
+
+const uploadAvatar = async (evt) => {
+  files.value = evt.target.files
+  try {
+    uploading.value = true
+
+    if (!files.value || files.value.length === 0) {
+      throw new Error('You must select an image to upload.')
+    }
+
+    const file = files.value[0]
+    const fileExt = file.name.split('.').pop()
+    const fileName = `${Math.random()}.${fileExt}`
+    const filePath = `${fileName}`
+
+    let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
+
+    if (uploadError) throw uploadError
+
+    emit('update:path', filePath)
+    emit('upload')
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    uploading.value = false
+  }
+}
+
+downloadImage()
+
+watch(path, () => {
+  if (path.value) {
+    downloadImage()
+  }
+})
+</script>
+
 <template>
   <div>
     <img
@@ -256,7 +319,7 @@ Let's create an avatar for the user so that they can upload a profile photo. We
 
     <div style="width: 10em; position: relative;">
       <label class="button primary block" for="single">
-        {{ uploading ? "Uploading ..." : "Upload" }}
+        {{ uploading ? 'Uploading ...' : 'Upload' }}
       </label>
       <input
         style="position: absolute; visibility: hidden;"
@@ -269,65 +332,76 @@ Let's create an avatar for the user so that they can upload a profile photo. We
     </div>
   </div>
 </template>
-
-<script setup>
-  const props = defineProps(['path'])
-  const { path } = toRefs(props)
-
-  const emit = defineEmits(['update:path', 'upload'])
-
-  const supabase = useSupabaseClient()
-
-  const uploading = ref(false)
-  const src = ref('')
-  const files = ref()
-  const downloadImage = async () => {
-    try {
-      const { data, error } = await supabase.storage.from('avatars').download(path.value)
-      if (error) throw error
-      src.value = URL.createObjectURL(data)
-    } catch (error) {
-      console.error('Error downloading image: ', error.message)
-    }
-  }
-
-  const uploadAvatar = async (evt) => {
-    files.value = evt.target.files
-    try {
-      uploading.value = true
-      if (!files.value || files.value.length === 0) {
-        throw new Error('You must select an image to upload.')
-      }
-      const file = files.value[0]
-      const fileExt = file.name.split('.').pop()
-      const fileName = `${Math.random()}.${fileExt}`
-      const filePath = `${fileName}`
-      let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-      if (uploadError) throw uploadError
-      emit('update:path', filePath)
-      emit('upload')
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      uploading.value = false
-    }
-  }
-
-  downloadImage()
-
-  watch(path, () => {
-    if (path.value) {
-      downloadImage()
-    }
-  })
-</script>
 ```
 
 ### Add the new widget
 
 And then we can add the widget to the Account page:
 
-```html title=components/Account.vue
+```vue title=components/Account.vue
+<script setup>
+const supabase = useSupabaseClient()
+
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_path = ref('')
+
+loading.value = true
+const user = useSupabaseUser()
+
+let { data } = await supabase
+  .from('profiles')
+  .select(`username, website, avatar_url`)
+  .eq('id', user.value.id)
+  .single()
+
+if (data) {
+  username.value = data.username
+  website.value = data.website
+  avatar_path.value = data.avatar_url
+}
+
+loading.value = false
+
+async function updateProfile() {
+  try {
+    loading.value = true
+    const user = useSupabaseUser()
+
+    const updates = {
+      id: user.value.id,
+      username: username.value,
+      website: website.value,
+      avatar_url: avatar_path.value,
+      updated_at: new Date(),
+    }
+
+    let { error } = await supabase.from('profiles').upsert(updates, {
+      returning: 'minimal', // Don't return the value after inserting
+    })
+
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function signOut() {
+  try {
+    loading.value = true
+    let { error } = await supabase.auth.signOut()
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
 <template>
   <form class="form-widget" @submit.prevent="updateProfile">
     <Avatar v-model:path="avatar_path" @upload="updateProfile" />
@@ -358,64 +432,6 @@ And then we can add the widget to the Account page:
     </div>
   </form>
 </template>
-
-<script setup>
-  const supabase = useSupabaseClient()
-
-  const loading = ref(true)
-  const username = ref('')
-  const website = ref('')
-  const avatar_path = ref('')
-
-
-  loading.value = true
-  const user = useSupabaseUser();
-  let { data } = await supabase
-      .from('profiles')
-      .select(`username, website, avatar_url`)
-      .eq('id', user.value.id)
-      .single()
-  if (data) {
-      username.value = data.username
-      website.value = data.website
-      avatar_path.value = data.avatar_url
-  }
-  loading.value = false
-
-  async function updateProfile() {
-      try {
-          loading.value = true
-          const user = useSupabaseUser();
-          const updates = {
-              id: user.value.id,
-              username: username.value,
-              website: website.value,
-              avatar_url: avatar_path.value,
-              updated_at: new Date(),
-          }
-          let { error } = await supabase.from('profiles').upsert(updates, {
-              returning: 'minimal', // Don't return the value after inserting
-          })
-          if (error) throw error
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-
-  async function signOut() {
-      try {
-          loading.value = true
-          let { error } = await supabase.auth.signOut()
-          if (error) throw error
-      } catch (error) {
-          alert(error.message)
-      } finally {
-          loading.value = false
-      }
-  }
-</script>
 ```
 
 That is it! You should now be able to upload a profile photo to Supabase Storage.
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
index b40659546fe..0420638cb95 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
@@ -68,30 +68,30 @@ Optionally, update [src/style.css](https://raw.githubusercontent.com/supabase/su
 
 Set up an `src/components/Auth.vue` component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords. 
 
-```html title=/src/components/Auth.vue
+```vue title=/src/components/Auth.vue
 <script setup>
-  import { ref } from 'vue'
-  import { supabase } from '../supabase'
+import { ref } from 'vue'
+import { supabase } from '../supabase'
 
-  const loading = ref(false)
-  const email = ref('')
+const loading = ref(false)
+const email = ref('')
 
-  const handleLogin = async () => {
-    try {
-      loading.value = true
-      const { error } = await supabase.auth.signInWithOtp({
-        email: email.value,
-      })
-      if (error) throw error
-      alert('Check your email for the login link!')
-    } catch (error) {
-      if (error instanceof Error) {
-        alert(error.message)
-      }
-    } finally {
-      loading.value = false
+const handleLogin = async () => {
+  try {
+    loading.value = true
+    const { error } = await supabase.auth.signInWithOtp({
+      email: email.value,
+    })
+    if (error) throw error
+    alert('Check your email for the login link!')
+  } catch (error) {
+    if (error instanceof Error) {
+      alert(error.message)
     }
+  } finally {
+    loading.value = false
   }
+}
 </script>
 
 <template>
@@ -120,82 +120,82 @@ Set up an `src/components/Auth.vue` component to manage logins and sign ups. We'
 After a user is signed in we can allow them to edit their profile details and manage their account.
 Create a new `src/components/Account.vue` component to handle this.
 
-```html title=src/components/Account.vue
+```vue title=src/components/Account.vue
 <script setup>
-  import { supabase } from '../supabase'
-  import { onMounted, ref, toRefs } from 'vue'
+import { supabase } from '../supabase'
+import { onMounted, ref, toRefs } from 'vue'
 
-  const props = defineProps(['session'])
-  const { session } = toRefs(props)
+const props = defineProps(['session'])
+const { session } = toRefs(props)
 
-  const loading = ref(true)
-  const username = ref('')
-  const website = ref('')
-  const avatar_url = ref('')
+const loading = ref(true)
+const username = ref('')
+const website = ref('')
+const avatar_url = ref('')
 
-  onMounted(() => {
-    getProfile()
-  })
+onMounted(() => {
+  getProfile()
+})
 
-  async function getProfile() {
-    try {
-      loading.value = true
-      const { user } = session.value
+async function getProfile() {
+  try {
+    loading.value = true
+    const { user } = session.value
 
-      let { data, error, status } = await supabase
-        .from('profiles')
-        .select(`username, website, avatar_url`)
-        .eq('id', user.id)
-        .single()
+    let { data, error, status } = await supabase
+      .from('profiles')
+      .select(`username, website, avatar_url`)
+      .eq('id', user.id)
+      .single()
 
-      if (error && status !== 406) throw error
+    if (error && status !== 406) throw error
 
-      if (data) {
-        username.value = data.username
-        website.value = data.website
-        avatar_url.value = data.avatar_url
-      }
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      loading.value = false
+    if (data) {
+      username.value = data.username
+      website.value = data.website
+      avatar_url.value = data.avatar_url
     }
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
   }
+}
 
-  async function updateProfile() {
-    try {
-      loading.value = true
-      const { user } = session.value
+async function updateProfile() {
+  try {
+    loading.value = true
+    const { user } = session.value
 
-      const updates = {
-        id: user.id,
-        username: username.value,
-        website: website.value,
-        avatar_url: avatar_url.value,
-        updated_at: new Date(),
-      }
-
-      let { error } = await supabase.from('profiles').upsert(updates)
-
-      if (error) throw error
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      loading.value = false
+    const updates = {
+      id: user.id,
+      username: username.value,
+      website: website.value,
+      avatar_url: avatar_url.value,
+      updated_at: new Date(),
     }
-  }
 
-  async function signOut() {
-    try {
-      loading.value = true
-      let { error } = await supabase.auth.signOut()
-      if (error) throw error
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      loading.value = false
-    }
+    let { error } = await supabase.from('profiles').upsert(updates)
+
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
   }
+}
+
+async function signOut() {
+  try {
+    loading.value = true
+    let { error } = await supabase.auth.signOut()
+    if (error) throw error
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    loading.value = false
+  }
+}
 </script>
 
 <template>
@@ -233,24 +233,24 @@ Create a new `src/components/Account.vue` component to handle this.
 
 Now that we have all the components in place, let's update `App.vue`:
 
-```html title=src/App.vue
+```vue title=src/App.vue
 <script setup>
-  import { onMounted, ref } from 'vue'
-  import Account from './components/Account.vue'
-  import Auth from './components/Auth.vue'
-  import { supabase } from './supabase'
+import { onMounted, ref } from 'vue'
+import Account from './components/Account.vue'
+import Auth from './components/Auth.vue'
+import { supabase } from './supabase'
 
-  const session = ref()
+const session = ref()
 
-  onMounted(() => {
-    supabase.auth.getSession().then(({ data }) => {
-      session.value = data.session
-    })
-
-    supabase.auth.onAuthStateChange((_, _session) => {
-      session.value = _session
-    })
+onMounted(() => {
+  supabase.auth.getSession().then(({ data }) => {
+    session.value = data.session
   })
+
+  supabase.auth.onAuthStateChange((_, _session) => {
+    session.value = _session
+  })
+})
 </script>
 
 <template>
@@ -279,56 +279,56 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
 
 Create a new `src/components/Avatar.vue` component that allows users to upload profile photos:
 
-```html title=src/components/Avatar.vue
+```vue title=src/components/Avatar.vue
 <script setup>
-  import { ref, toRefs, watch } from 'vue'
-  import { supabase } from '../supabase'
+import { ref, toRefs, watch } from 'vue'
+import { supabase } from '../supabase'
 
-  const prop = defineProps(['path', 'size'])
-  const { path, size } = toRefs(prop)
+const prop = defineProps(['path', 'size'])
+const { path, size } = toRefs(prop)
 
-  const emit = defineEmits(['upload', 'update:path'])
-  const uploading = ref(false)
-  const src = ref('')
-  const files = ref()
+const emit = defineEmits(['upload', 'update:path'])
+const uploading = ref(false)
+const src = ref('')
+const files = ref()
 
-  const downloadImage = async () => {
-    try {
-      const { data, error } = await supabase.storage.from('avatars').download(path.value)
-      if (error) throw error
-      src.value = URL.createObjectURL(data)
-    } catch (error) {
-      console.error('Error downloading image: ', error.message)
-    }
+const downloadImage = async () => {
+  try {
+    const { data, error } = await supabase.storage.from('avatars').download(path.value)
+    if (error) throw error
+    src.value = URL.createObjectURL(data)
+  } catch (error) {
+    console.error('Error downloading image: ', error.message)
   }
+}
 
-  const uploadAvatar = async (evt) => {
-    files.value = evt.target.files
-    try {
-      uploading.value = true
-      if (!files.value || files.value.length === 0) {
-        throw new Error('You must select an image to upload.')
-      }
-
-      const file = files.value[0]
-      const fileExt = file.name.split('.').pop()
-      const filePath = `${Math.random()}.${fileExt}`
-
-      let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
-      if (uploadError) throw uploadError
-      emit('update:path', filePath)
-      emit('upload')
-    } catch (error) {
-      alert(error.message)
-    } finally {
-      uploading.value = false
+const uploadAvatar = async (evt) => {
+  files.value = evt.target.files
+  try {
+    uploading.value = true
+    if (!files.value || files.value.length === 0) {
+      throw new Error('You must select an image to upload.')
     }
-  }
 
-  watch(path, () => {
-    if (path.value) downloadImage()
-  })
+    const file = files.value[0]
+    const fileExt = file.name.split('.').pop()
+    const filePath = `${Math.random()}.${fileExt}`
+
+    let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
+
+    if (uploadError) throw uploadError
+    emit('update:path', filePath)
+    emit('upload')
+  } catch (error) {
+    alert(error.message)
+  } finally {
+    uploading.value = false
+  }
+}
+
+watch(path, () => {
+  if (path.value) downloadImage()
+})
 </script>
 
 <template>
@@ -344,7 +344,7 @@ Create a new `src/components/Avatar.vue` component that allows users to upload p
 
     <div :style="{ width: size + 'em' }">
       <label class="button primary block" for="single">
-        {{ uploading ? "Uploading ..." : "Upload" }}
+        {{ uploading ? 'Uploading ...' : 'Upload' }}
       </label>
       <input
         style="visibility: hidden; position: absolute"
@@ -363,10 +363,10 @@ Create a new `src/components/Avatar.vue` component that allows users to upload p
 
 And then we can add the widget to the Account page in `src/components/Account.vue`:
 
-```html title=src/components/Account.vue
+```vue title=src/components/Account.vue
 <script>
-  // Import the new component
-  import Avatar from './Avatar.vue'
+// Import the new component
+import Avatar from './Avatar.vue'
 </script>
 
 <template>
diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt
index e3e3d2da62d..60e064da4b0 100644
--- a/apps/docs/public/humans.txt
+++ b/apps/docs/public/humans.txt
@@ -18,7 +18,6 @@ Dave Wilson
 Div Arora
 Egor Romanov
 Fabrizio Fenoglio
-Francisco Mazzoni
 Haydn Maley
 Hieu Pham
 Inian P
diff --git a/apps/www/_blog/2023-02-03-openai-embeddings-postgres-vector.mdx b/apps/www/_blog/2023-02-03-openai-embeddings-postgres-vector.mdx
index caf2c2bd758..264b04033f6 100644
--- a/apps/www/_blog/2023-02-03-openai-embeddings-postgres-vector.mdx
+++ b/apps/www/_blog/2023-02-03-openai-embeddings-postgres-vector.mdx
@@ -7,7 +7,7 @@ thumb: embeddings/og_pgvector.png
 tags:
   - postgres
   - ai
-date: '2023-01-06'
+date: '2023-02-06'
 toc_depth: 3
 ---
 
diff --git a/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx b/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx
new file mode 100644
index 00000000000..6c1b29a9e70
--- /dev/null
+++ b/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx
@@ -0,0 +1,116 @@
+---
+title: 'Supabase Clippy: ChatGPT for Supabase Docs'
+description: Creating a ChatGPT interface for the Supabase documentation.
+author: paul_copplestone
+image: docsgpt/og_supabase_clippy.png
+thumb: docsgpt/og_supabase_clippy.png
+tags:
+  - ai
+  - docs
+date: '2023-02-07'
+toc_depth: 3
+---
+
+We all know that Microsoft's real agenda for pouring billions into OpenAI to revive their favorite friend Clippy.
+Today, we're doing our part to support the momentum by releasing “Supabase Clippy” for our docs (and we don't expect this name to last long before the lawyers catch on).
+
+![Clippy](/images/blog/docsgpt/clippy.png)
+
+Want to try it out? It's a hidden feature while in MVP - visit [supabase.com/docs](/docs) and hit `cmd` + `/` to pull up the search box (sorry mobile users).
+
+# ChatGPT for Supabase Docs
+
+Last launch week we [released](/blog/new-supabase-docs-built-with-nextjs) our new documentation site to improve the developer experience, especially for new users.
+
+When we first started Supabase our docs were very concise. We deliberately withheld "non-critical information" so that developers could consume everything in one sitting.
+
+Our product suite has grown in the past 2 years and our docs have grown as a result. There's a lot to read. We're also attracting developers who've never used Postgres before, and it's becoming incumbent on us to train these developers on best-practices.
+
+![Missing indexes](/images/blog/docsgpt/indexes.png)
+
+### The “ask” interface
+
+Developers have recently gained an the ability to trust a bot. Where Clippy failed, ChatGPT succeeded.
+
+This is convenient timing for us, since our documentation content is more than the average developer wants to consume in one go. Today we're providing a similar interface to ChatGPT which is trained on our own docs.
+
+<video width="100%" autoPlay="" loop="" muted="" playsInline="" controls="true">
+  <source src="/images/blog/embeddings/embeddings.mp4" type="video/mp4" />
+</video>
+
+To keep your expectations low, this implementation is a 1-week MVP. We're sharing this iteration to gather feedback and to teach you how to build something similar.
+
+## How it's built
+
+It's built with Supabase/Postgres, and consists of several key parts:
+
+1. Parsing the Supabase docs into sections.
+2. Creating embeddings for each section using OpenAI's embeddings API.
+3. Storing the embeddings in Postgres using the pgvector extension.
+4. Getting a user's question.
+5. Query the Postgres database for the most relevant documents related to the question.
+6. Inject these documents as context for GPT-3 to reference in its answer.
+7. Streaming the results back to the user in realtime.
+
+All the changes we made are in [this](https://github.com/supabase/supabase/pull/12056) Pull Request. Greg is here to explain every step in full detail:
+
+<div class="video-container">
+<iframe
+  title="ClippyGPT"
+  src="https://www.youtube-nocookie.com/embed/Yhtjd7yGGGA"
+  frameborder="1"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+</div>
+
+You can find a full write up in our previous blog post: [Storing OpenAI embeddings in Postgres with pgvector](https://supabase.com/blog/openai-embeddings-postgres-vector).
+
+## What's next
+
+This current version is very basic, which makes it a good starting point if you want to build something similar.
+
+- **Expand the knowledge base:** Create embeddings for our reference docs, GitHub Discussions, Discord discussions, etc. The current iteration is only using the Guides.
+- **Caching:** Cache queries so that we can provide answers instantly to similar/matching questions.
+- **User-assisted improvements:** Ability to thumbs-up responses for relevance.
+- **Beyond search:** perhaps we can make this interface interactive, guiding users through instructions.
+
+## Bonus: The power of open source
+
+One of the most interesting things about this feature was _how_ it happened - almost completely from open source contributions. A short series of events:
+
+### A friendly email
+
+A few weeks ago I received an email, drawing our attention to a [Pull Request](https://github.com/supabase/postgres/pull/472) in our [`postgres`](https://github.com/supabase/postgres) GitHub repo:
+
+![Greg](/images/blog/docsgpt/greg.png)
+
+### A friendly chat
+
+After we merged the PR, I reached out to see if Greg was interested in helping with some documentation or a blog post to help the community to use pgvector. On the call, Greg surprised me with an initial prototype where he had ingested the Supabase docs for a ChatGPT-like experience. I was suitably impressed and suggested that we could explore ways to work together to build it into the Supabase docs. He wasted no time:
+
+<div class="video-container">
+<iframe
+  title="ClippyGPT"
+  src="https://www.youtube-nocookie.com/embed/yAsR7oe5vng"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen
+></iframe>
+</div>
+
+### A friendly collaboration
+
+We sponsored Greg to work on an MVP with us, along with some guides to help developers do the same. He [pushed all his changes](https://github.com/supabase/supabase/pull/12056) to the Supabase Docs, and we wrote a [blog post](/blog/openai-embeddings-postgres-vector) together to help developers build something similar.
+
+If you re-read the events above and swap “Supabase” for any other big-tech company, you'll grasp how impossible this series of events is for any company that's not open source. All the code that was contributed is licensed liberally, so we didn't need to jump through IP checklists. Our docs are publicly available on GitHub, so Greg could build his prototype without being granted access.
+
+We're incredibly grateful for Greg's work here, so if you like what he's done then consider supporting him by checking out [prmpts.ai](https://prmpts.ai/) and following him on twitter: [@ggrdson](https://twitter.com/ggrdson).
+
+While you're at it, consider supporting [@ankane](https://github.com/ankane)'s great work on [pgvector](https://github.com/pgvector/pgvector) by starring them on GitHub, and sending your thanks.
+
+## Try it out
+
+Want to try Supabase Clippy? It's a hidden feature while in MVP - visit [supabase.com/docs](/docs) and hit `cmd` + `/` to pull up the search box (sorry mobile users).
+
+If you have any comments we'd love to hear them in our [ShowHN](https://news.ycombinator.com/item?id=34695306).
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 6d2ad98989c..846f9e1c2ba 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -1842,4 +1842,9 @@ module.exports = [
     source: '/docs/guides/examples',
     destination: '/docs/guides/resources/examples',
   },
+  {
+    permanent: true,
+    source: '/docs/reference/javascript/v0/rpc',
+    destination: '/docs/reference/javascript/rpc',
+  },
 ]
diff --git a/apps/www/public/images/blog/docsgpt/clippy.png b/apps/www/public/images/blog/docsgpt/clippy.png
new file mode 100644
index 00000000000..6995b48bfb5
Binary files /dev/null and b/apps/www/public/images/blog/docsgpt/clippy.png differ
diff --git a/apps/www/public/images/blog/docsgpt/greg.png b/apps/www/public/images/blog/docsgpt/greg.png
new file mode 100644
index 00000000000..3e6eb4298a9
Binary files /dev/null and b/apps/www/public/images/blog/docsgpt/greg.png differ
diff --git a/apps/www/public/images/blog/docsgpt/indexes.png b/apps/www/public/images/blog/docsgpt/indexes.png
new file mode 100644
index 00000000000..08484086e18
Binary files /dev/null and b/apps/www/public/images/blog/docsgpt/indexes.png differ
diff --git a/apps/www/public/images/blog/docsgpt/og_supabase_clippy.png b/apps/www/public/images/blog/docsgpt/og_supabase_clippy.png
new file mode 100644
index 00000000000..e11fc54e755
Binary files /dev/null and b/apps/www/public/images/blog/docsgpt/og_supabase_clippy.png differ
diff --git a/apps/www/public/rss.xml b/apps/www/public/rss.xml
index 3debdf27d81..c771098b501 100644
--- a/apps/www/public/rss.xml
+++ b/apps/www/public/rss.xml
@@ -5,1085 +5,1092 @@
       <link>https://supabase.com</link>
       <description>Latest news from Supabase</description>
       <language>en</language>
-      <lastBuildDate>Thu, 05 Jan 2023 23:11:00 +0000</lastBuildDate>
+      <lastBuildDate>Mon, 06 Feb 2023 03:03:30 +0000</lastBuildDate>
       <atom:link href="https://supabase.com/rss.xml" rel="self" type="application/rss+xml"/>
       <item>
+  <guid>https://supabase.com/blog/chatgpt-supabase-docs</guid>
+  <title>Supabase Clippy: ChatGPT for Supabase Docs</title>
+  <link>https://supabase.com/blog/chatgpt-supabase-docs</link>
+  <description>Creating a ChatGPT interface for the Supabase documentation.</description>
+  <pubDate>Mon, 06 Feb 2023 03:03:30 +0000</pubDate>
+</item>
+<item>
   <guid>https://supabase.com/blog/openai-embeddings-postgres-vector</guid>
   <title>Storing OpenAI embeddings in Postgres with pgvector</title>
   <link>https://supabase.com/blog/openai-embeddings-postgres-vector</link>
   <description>An example of how to build an AI-powered search engine using OpenAI's embeddings and PostgreSQL.</description>
-  <pubDate>Thu, 05 Jan 2023 23:11:00 +0000</pubDate>
+  <pubDate>Sun, 05 Feb 2023 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-december-2022</guid>
   <title>Supabase Beta December 2022</title>
   <link>https://supabase.com/blog/supabase-beta-december-2022</link>
   <description>This month the Beta Update is a Launch Week 6 Special, where we review the cascade of announcements.</description>
-  <pubDate>Wed, 04 Jan 2023 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 04 Jan 2023 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-6-hackathon-winners</guid>
   <title>Launch Week 6 Hackathon Winners</title>
   <link>https://supabase.com/blog/launch-week-6-hackathon-winners</link>
   <description>Announcing the winners of the Launch Week 6 Hackathon!</description>
-  <pubDate>Mon, 02 Jan 2023 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 02 Jan 2023 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/vault-now-in-beta</guid>
   <title>Supabase Vault is now in Beta</title>
   <link>https://supabase.com/blog/vault-now-in-beta</link>
   <description>A Postgres extension to store encrypted secrets and encrypt data.</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgrest-11-prerelease</guid>
   <title>PostgREST 11 pre-release</title>
   <link>https://supabase.com/blog/postgrest-11-prerelease</link>
   <description>Describes new features of PostgREST 11 pre-release</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgres-point-in-time-recovery</guid>
   <title>Point in Time Recovery is now available for Pro projects</title>
   <link>https://supabase.com/blog/postgres-point-in-time-recovery</link>
   <description>We're making PITR available for more projects, with a new Dashboard UI that makes it simple to use.</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/pg-graphql-v1</guid>
   <title>pg_graphql v1.0</title>
   <link>https://supabase.com/blog/pg-graphql-v1</link>
   <description>Announcing the v1.0 release of pg_graphql</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/new-in-postgres-15</guid>
   <title>What's new in Postgres 15?</title>
   <link>https://supabase.com/blog/new-in-postgres-15</link>
   <description>Describes the release of Postgres 15, new features and reasons to use it</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-6-wrap-up</guid>
   <title>Launch Week 6: Wrap Up</title>
   <link>https://supabase.com/blog/launch-week-6-wrap-up</link>
   <description>That's a wrap on Supabase Launch Week Day 6. Here's everything we shipped in one long blog post.</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-6-community-day</guid>
   <title>Community Day</title>
   <link>https://supabase.com/blog/launch-week-6-community-day</link>
   <description>Wrapping up Launch Week 6 with contributors, partners, and friends.</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/custom-domain-names</guid>
   <title>Custom Domain Names</title>
   <link>https://supabase.com/blog/custom-domain-names</link>
   <description>Change your Supabase project's domain name to your own domain.</description>
-  <pubDate>Thu, 15 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 15 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</guid>
   <title>Supabase Wrappers, a Postgres FDW framework written in Rust</title>
   <link>https://supabase.com/blog/postgres-foreign-data-wrappers-rust</link>
   <description>A framework for building Postgres Foreign Data Wrappers which connects to Stripe, Firebase, Clickhouse, and more.</description>
-  <pubDate>Wed, 14 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 14 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/mfa-auth-via-rls</guid>
   <title>Multi-factor Authentication via Row Level Security Enforcement</title>
   <link>https://supabase.com/blog/mfa-auth-via-rls</link>
   <description>MFA Auth with enforcement via RLS</description>
-  <pubDate>Tue, 13 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 13 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/storage-image-resizing-smart-cdn</guid>
   <title>Supabase Storage v2: Image resizing and Smart CDN</title>
   <link>https://supabase.com/blog/storage-image-resizing-smart-cdn</link>
   <description>We're introducing new features for Supabase Storage: Image resizing and a Smart CDN.</description>
-  <pubDate>Mon, 12 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 12 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/new-supabase-docs-built-with-nextjs</guid>
   <title>New Supabase Docs, built with Next.js</title>
   <link>https://supabase.com/blog/new-supabase-docs-built-with-nextjs</link>
   <description>We've redesigned our Docs and migrated to Next.js</description>
-  <pubDate>Sun, 11 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Sun, 11 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgres-crdt</guid>
   <title>pg_crdt - an experimental CRDT extension for Postgres</title>
   <link>https://supabase.com/blog/postgres-crdt</link>
   <description>Embedding Yjs and Automerge into Postgres for collaborative applications.</description>
-  <pubDate>Fri, 09 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Fri, 09 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/who-we-hire</guid>
   <title>Who We Hire at Supabase</title>
   <link>https://supabase.com/blog/who-we-hire</link>
   <description>Traits we look for to maintain a culture of shipping fast and often</description>
-  <pubDate>Thu, 08 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 08 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-6-hackathon</guid>
   <title>Launch Week 6 Hackathon</title>
   <link>https://supabase.com/blog/launch-week-6-hackathon</link>
   <description>Build an Open Source Project, Win $1500 and the Supabase Darkmode Keyboard</description>
-  <pubDate>Thu, 08 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 08 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-november-2022</guid>
   <title>Supabase Beta November 2022</title>
   <link>https://supabase.com/blog/supabase-beta-november-2022</link>
   <description>We are preparing everything for Launch Week 6, but we still had time to ship some goodies this month!</description>
-  <pubDate>Tue, 06 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 06 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/the-supabase-content-storm</guid>
   <title>The Supabase Content Storm</title>
   <link>https://supabase.com/blog/the-supabase-content-storm</link>
   <description>We worked with +30 content creators to drop a mountain of content simultaneously.</description>
-  <pubDate>Mon, 05 Dec 2022 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 05 Dec 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/transparent-column-encryption-with-postgres</guid>
   <title>Transparent Column Encryption with Postgres</title>
   <link>https://supabase.com/blog/transparent-column-encryption-with-postgres</link>
   <description>Using pgsodium's Transparent Column Encryption to encrypt data and provide your users with row-level encryption.</description>
-  <pubDate>Wed, 30 Nov 2022 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 30 Nov 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/sql-or-nosql-both-with-postgresql</guid>
   <title>SQL or NoSQL? Why not use both (with PostgreSQL)?</title>
   <link>https://supabase.com/blog/sql-or-nosql-both-with-postgresql</link>
   <description>How to turn Postgres into an easy-to-use NoSQL database that retains all the power of SQL</description>
-  <pubDate>Wed, 23 Nov 2022 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 23 Nov 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/flutter-authentication-and-authorization-with-rls</guid>
   <title>Flutter Authentication and Authorization with RLS</title>
   <link>https://supabase.com/blog/flutter-authentication-and-authorization-with-rls</link>
   <description>Learn how you can secure your Flutter app using Supabase Row Level Security.</description>
-  <pubDate>Mon, 21 Nov 2022 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 21 Nov 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components</guid>
   <title>Fetching and caching Supabase data in Next.js 13 Server Components</title>
   <link>https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components</link>
   <description>Next.js 13 introduces new data fetching and caching methods to enable React Server Components and Suspense.</description>
-  <pubDate>Wed, 16 Nov 2022 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 16 Nov 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/authentication-in-ionic-angular</guid>
   <title>Authentication in Ionic Angular with Supabase</title>
   <link>https://supabase.com/blog/authentication-in-ionic-angular</link>
   <description>Learn how to build an Ionic Angular app with authentication, Row Level Security, and Magic Link auth.</description>
-  <pubDate>Mon, 07 Nov 2022 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 07 Nov 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-update-october-2022</guid>
   <title>Supabase Beta October 2022</title>
   <link>https://supabase.com/blog/supabase-beta-update-october-2022</link>
   <description>New SDKs, quickstarts, Functions tricks, and more. But, more importantly, Launch Week 6️ has a date!</description>
-  <pubDate>Tue, 01 Nov 2022 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 01 Nov 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgresql-commitfest</guid>
   <title>What is PostgreSQL commitfest and how to contribute</title>
   <link>https://supabase.com/blog/postgresql-commitfest</link>
   <description>A time-tested method for contributing to the core Postgres code</description>
-  <pubDate>Wed, 26 Oct 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 26 Oct 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-flutter-sdk-v1-released</guid>
   <title>supabase-flutter v1 Released</title>
   <link>https://supabase.com/blog/supabase-flutter-sdk-v1-released</link>
   <description>We've released supabase-flutter v1. More intuitive way of accessing Supabase from your Flutter application.</description>
-  <pubDate>Thu, 20 Oct 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 20 Oct 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-js-v2-released</guid>
   <title>supabase-js v2 Released</title>
   <link>https://supabase.com/blog/supabase-js-v2-released</link>
   <description>We've released supabase-js v2. Updated examples, quickstarts, and an improved experience.</description>
-  <pubDate>Wed, 19 Oct 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 19 Oct 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgres-full-text-search-vs-the-rest</guid>
   <title>Postgres Full Text Search vs the rest</title>
   <link>https://supabase.com/blog/postgres-full-text-search-vs-the-rest</link>
   <description>Comparing one of the most popular Postgres features against alternatives</description>
-  <pubDate>Thu, 13 Oct 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 13 Oct 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-update-september-2022</guid>
   <title>Supabase Beta September 2022</title>
   <link>https://supabase.com/blog/supabase-beta-update-september-2022</link>
   <description>We were too focused on clearing out the backlog so we didn't ship anything new last month... or did we?!</description>
-  <pubDate>Tue, 04 Oct 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 04 Oct 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgres-wasm</guid>
   <title>Postgres WASM by Snaplet and Supabase</title>
   <link>https://supabase.com/blog/postgres-wasm</link>
   <description>We're open sourcing postgres-wasm, a PostgresQL server that runs inside a browser, with our friends at Snaplet.</description>
-  <pubDate>Sun, 02 Oct 2022 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 02 Oct 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/choosing-a-postgres-primary-key</guid>
   <title>Choosing a Postgres Primary Key</title>
   <link>https://supabase.com/blog/choosing-a-postgres-primary-key</link>
   <description>Turns out the question of which identifier to use as a Primary Key is complicated -- we're going to dive into some of the complexity and inherent trade-offs, and figure things out</description>
-  <pubDate>Wed, 07 Sep 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 07 Sep 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-update-august-2022</guid>
   <title>Supabase Beta August 2022</title>
   <link>https://supabase.com/blog/supabase-beta-update-august-2022</link>
   <description>Launch Week Special. See everything we shipped, plus winners of the Hackathon and the extended Community Highlights</description>
-  <pubDate>Tue, 06 Sep 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 06 Sep 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-5-hackathon-winners</guid>
   <title>Launch Week 5 Hackathon Winners</title>
   <link>https://supabase.com/blog/launch-week-5-hackathon-winners</link>
   <description>Announcing the winners of the Launch Week 5 Hackathon!</description>
-  <pubDate>Wed, 24 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 24 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/building-a-realtime-trello-board-with-supabase-and-angular</guid>
   <title>Building a Realtime Trello Board with Supabase and Angular</title>
   <link>https://supabase.com/blog/building-a-realtime-trello-board-with-supabase-and-angular</link>
   <description>Go beyond the hello world example with this real world project.</description>
-  <pubDate>Tue, 23 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 23 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-vault</guid>
   <title>Supabase Vault</title>
   <link>https://supabase.com/blog/supabase-vault</link>
   <description>Today we're announcing Vault, a Postgres extension for managing secrets and encryption inside your database.</description>
-  <pubDate>Thu, 18 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 18 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgrest-v10</guid>
   <title>PostgREST v10: EXPLAIN and Improved Relationship Detection</title>
   <link>https://supabase.com/blog/postgrest-v10</link>
   <description>Today, PostgREST 10 was released. Let's take a look at some of the new features that go hand in hand with supabase-js v2.</description>
-  <pubDate>Thu, 18 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 18 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/pg-jsonschema-a-postgres-extension-for-json-validation</guid>
   <title>pg_jsonschema: JSON Schema support for Postgres</title>
   <link>https://supabase.com/blog/pg-jsonschema-a-postgres-extension-for-json-validation</link>
   <description>Today we're releasing pg_jsonschema, a Postgres extension for JSON validation.</description>
-  <pubDate>Thu, 18 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 18 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-5-one-more-thing</guid>
   <title>One more thing</title>
   <link>https://supabase.com/blog/launch-week-5-one-more-thing</link>
   <description>Let's be honest, it's never just one more thing.</description>
-  <pubDate>Thu, 18 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 18 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-5-community-day</guid>
   <title>Community Day</title>
   <link>https://supabase.com/blog/launch-week-5-community-day</link>
   <description>Wrapping up Launch Week 5 with contributors, partners, and friends.</description>
-  <pubDate>Thu, 18 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 18 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-realtime-multiplayer-general-availability</guid>
   <title>Realtime: Multiplayer Edition</title>
   <link>https://supabase.com/blog/supabase-realtime-multiplayer-general-availability</link>
   <description>Announcing the general availability of Realtime's Broadcast and Presence.</description>
-  <pubDate>Wed, 17 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 17 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-soc2</guid>
   <title>Supabase is SOC2 compliant</title>
   <link>https://supabase.com/blog/supabase-soc2</link>
   <description>Supabase is now SOC2 compliant. Learn how we got here and what it means for our customers.</description>
-  <pubDate>Tue, 16 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 16 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-js-v2</guid>
   <title>supabase-js v2</title>
   <link>https://supabase.com/blog/supabase-js-v2</link>
   <description>A look at supabase-js v2, which brings type support and focuses on quality-of-life improvements for developers.</description>
-  <pubDate>Mon, 15 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 15 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-cli-v1-and-admin-api-beta</guid>
   <title>Supabase CLI v1 and Management API Beta</title>
   <link>https://supabase.com/blog/supabase-cli-v1-and-admin-api-beta</link>
   <description>We are moving Supabase CLI v1 out of beta, and releasing Management API beta.</description>
-  <pubDate>Sun, 14 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 14 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-series-b</guid>
   <title>Supabase Series B</title>
   <link>https://supabase.com/blog/supabase-series-b</link>
   <description>Supabase raised $80M in May, bringing our total funding to $116M.</description>
-  <pubDate>Thu, 11 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 11 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-5-hackathon</guid>
   <title>Launch Week 5 Hackathon</title>
   <link>https://supabase.com/blog/launch-week-5-hackathon</link>
   <description>Build to win $1500 - Friday 12th to Monday 21st August 2022</description>
-  <pubDate>Tue, 09 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 09 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/slack-consolidate-slackbot-to-consolidate-messages</guid>
   <title>Slack Consolidate: a slackbot built with Python and Supabase</title>
   <link>https://supabase.com/blog/slack-consolidate-slackbot-to-consolidate-messages</link>
   <description>A slackbot to consolidate messages from different channels using Supabase, Slack SDK and Python</description>
-  <pubDate>Mon, 08 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 08 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-update-july-2022</guid>
   <title>Supabase Beta July 2022</title>
   <link>https://supabase.com/blog/supabase-beta-update-july-2022</link>
   <description>Launch Week Golden Tickets, Flutter SDK 1.0 Developer Preview and more...</description>
-  <pubDate>Tue, 02 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 02 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-flutter-sdk-1-developer-preview</guid>
   <title>Supabase Flutter SDK 1.0 Developer Preview</title>
   <link>https://supabase.com/blog/supabase-flutter-sdk-1-developer-preview</link>
   <description>Supabase Flutter SDK is getting a major update and we need your help making it better.</description>
-  <pubDate>Mon, 01 Aug 2022 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 01 Aug 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/seen-by-in-postgresql</guid>
   <title>Implementing "seen by" functionality with Postgres</title>
   <link>https://supabase.com/blog/seen-by-in-postgresql</link>
   <description>Different approaches for tracking visitor counts with PostgreSQL.</description>
-  <pubDate>Sun, 17 Jul 2022 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 17 Jul 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-auth-helpers-with-sveltekit-support</guid>
   <title>Revamped Auth Helpers for Supabase (with SvelteKit support)</title>
   <link>https://supabase.com/blog/supabase-auth-helpers-with-sveltekit-support</link>
   <description>Supabase Auth Helpers now have improved developer experience, Sveltekit support, and more.</description>
-  <pubDate>Tue, 12 Jul 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 12 Jul 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/beta-update-june-2022</guid>
   <title>Supabase Beta June 2022</title>
   <link>https://supabase.com/blog/beta-update-june-2022</link>
   <description>Auth Helpers, Unlimited Free Projects, CLI and more...</description>
-  <pubDate>Tue, 05 Jul 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 05 Jul 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/flutter-tutorial-building-a-chat-app</guid>
   <title>Flutter Tutorial: building a Flutter chat app</title>
   <link>https://supabase.com/blog/flutter-tutorial-building-a-chat-app</link>
   <description>Learn how to build a Flutter chat app with open source and scalable backend (inc. auth, realtime, database, and more).</description>
-  <pubDate>Wed, 29 Jun 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 29 Jun 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/visualizing-supabase-data-using-metabase</guid>
   <title>Visualizing Supabase Data using Metabase</title>
   <link>https://supabase.com/blog/visualizing-supabase-data-using-metabase</link>
   <description>How to create different kinds of charts out of data stored in Supabase using Metabase.</description>
-  <pubDate>Tue, 28 Jun 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 28 Jun 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/partial-postgresql-data-dumps-with-rls</guid>
   <title>Partial data dumps using Postgres Row Level Security</title>
   <link>https://supabase.com/blog/partial-postgresql-data-dumps-with-rls</link>
   <description>Using RLS to create seed files for local PostgreSQL testing.</description>
-  <pubDate>Mon, 27 Jun 2022 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 27 Jun 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/loading-data-supabase-python</guid>
   <title>Python data loading with Supabase</title>
   <link>https://supabase.com/blog/loading-data-supabase-python</link>
   <description>An example of how to load data into Supabase using supabase-py</description>
-  <pubDate>Thu, 16 Jun 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 16 Jun 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/beta-update-may-2022</guid>
   <title>Supabase Beta May 2022</title>
   <link>https://supabase.com/blog/beta-update-may-2022</link>
   <description>Product and community updates including wildcard auth redirects, edge functions with webhooks, and Prometheus endpoints for everybody.</description>
-  <pubDate>Tue, 31 May 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 31 May 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/how-supabase-accelerates-development-of-all-pull-together</guid>
   <title>How Mike Lyndon is using Supabase to accelerate development of AllPullTogether</title>
   <link>https://supabase.com/blog/how-supabase-accelerates-development-of-all-pull-together</link>
   <description>Mike Lyndon is learning web development as he builds AllPullTogether, and Supabase is helping him accelerate what he can accomplish.</description>
-  <pubDate>Wed, 25 May 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 25 May 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/partner-gallery-works-with-supabase</guid>
   <title>Works With Supabase - announcing our Partner Gallery</title>
   <link>https://supabase.com/blog/partner-gallery-works-with-supabase</link>
   <description>Introducing our Partner Gallery - open source and made with Supabase.</description>
-  <pubDate>Tue, 19 Apr 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 19 Apr 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/bring-the-func-hackathon-winners</guid>
   <title>Bring the Func Hackathon Winners 2022</title>
   <link>https://supabase.com/blog/bring-the-func-hackathon-winners</link>
   <description>Celebrating many amazing OSS Hackathon projects using GraphQL and Edge Functions.</description>
-  <pubDate>Sun, 17 Apr 2022 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 17 Apr 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/beta-update-march-2022</guid>
   <title>Supabase Beta March 2022</title>
   <link>https://supabase.com/blog/beta-update-march-2022</link>
   <description>Functions, GraphQL, and much more.</description>
-  <pubDate>Thu, 14 Apr 2022 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 14 Apr 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabrew</guid>
   <title>Supabrew - Never Code Thirsty</title>
   <link>https://supabase.com/blog/supabrew</link>
   <description>A light and refreshing non-alcoholic beer for devs.</description>
-  <pubDate>Thu, 31 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Fri, 01 Apr 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-realtime-with-multiplayer-features</guid>
   <title>Supabase Realtime, with Multiplayer Features</title>
   <link>https://supabase.com/blog/supabase-realtime-with-multiplayer-features</link>
   <description>Today we're announced Realtime, with multiplayer features. Realtime enables broadcast, presence, and listening to database changes delivered over WebSockets.</description>
-  <pubDate>Thu, 31 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Fri, 01 Apr 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/hackathon-bring-the-func</guid>
   <title>Hackathon: Bring the Func(🕺)</title>
   <link>https://supabase.com/blog/hackathon-bring-the-func</link>
   <description>Build open-source projects with our latest features, win limited edition swag and plant a tree!</description>
-  <pubDate>Thu, 31 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Fri, 01 Apr 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-edge-functions</guid>
   <title>Edge Functions are now available in Supabase</title>
   <link>https://supabase.com/blog/supabase-edge-functions</link>
   <description>Today we're launching Edge Functions. Edge Functions let you execute Typescript code close to your users, no matter where they're located.</description>
-  <pubDate>Wed, 30 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 30 Mar 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-enterprise</guid>
   <title>Introducing Supabase Enterprise</title>
   <link>https://supabase.com/blog/supabase-enterprise</link>
   <description>Today we are releasing Supabase Enterprise, a suite of features to scale your project.</description>
-  <pubDate>Tue, 29 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 29 Mar 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/graphql-now-available</guid>
   <title>GraphQL is now available in Supabase</title>
   <link>https://supabase.com/blog/graphql-now-available</link>
   <description>GraphQL support is now in general availability on the Supabase platform via our open source PostgreSQL extension, pg_graphql (beta).</description>
-  <pubDate>Mon, 28 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 28 Mar 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/community-day-lw4</guid>
   <title>Community Day</title>
   <link>https://supabase.com/blog/community-day-lw4</link>
   <description>Kicking off Launch Week 4 with contributors, partners, and friends.</description>
-  <pubDate>Sun, 27 Mar 2022 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 27 Mar 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-launch-week-four</guid>
   <title>Supabase Launch Week 4</title>
   <link>https://supabase.com/blog/supabase-launch-week-four</link>
   <description>Launch Week 4: One new feature every day for an entire week. Starting Monday 28th March.</description>
-  <pubDate>Thu, 24 Mar 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 24 Mar 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/should-i-open-source-my-company</guid>
   <title>Should I Open Source my Company?</title>
   <link>https://supabase.com/blog/should-i-open-source-my-company</link>
   <description>The unexpected upsides of building in public</description>
-  <pubDate>Thu, 24 Mar 2022 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 24 Mar 2022 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/audit</guid>
   <title>Postgres Auditing in 150 lines of SQL</title>
   <link>https://supabase.com/blog/audit</link>
   <description>PostgreSQL has a robust set of features which we can leverage to create a generic auditing solution in 150 lines of SQL.</description>
-  <pubDate>Mon, 07 Mar 2022 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 07 Mar 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-january-2022</guid>
   <title>Supabase Beta January 2022</title>
   <link>https://supabase.com/blog/supabase-beta-january-2022</link>
   <description>New auth providers, SMS providers, and new videos.</description>
-  <pubDate>Mon, 21 Feb 2022 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 21 Feb 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-december-2021</guid>
   <title>Supabase Beta December 2021</title>
   <link>https://supabase.com/blog/supabase-beta-december-2021</link>
   <description>New crypto extension, Postgres videos, and a bunch of cool integrations.</description>
-  <pubDate>Wed, 19 Jan 2022 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 19 Jan 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/product-hunt-golden-kitty-awards-2021</guid>
   <title>Golden Kitty Awards Ceremony Watch Party with Supabase</title>
   <link>https://supabase.com/blog/product-hunt-golden-kitty-awards-2021</link>
   <description>Hang out with us while watching the Product Hunt Golden Kitty Awards Ceremony</description>
-  <pubDate>Wed, 19 Jan 2022 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 19 Jan 2022 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/holiday-hackdays-winners-2021</guid>
   <title>Holiday Hackdays Winners 2021</title>
   <link>https://supabase.com/blog/holiday-hackdays-winners-2021</link>
   <description>Celebrating many amazing projects submitted to our Holiday Hackdays Hackathon.</description>
-  <pubDate>Thu, 16 Dec 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 16 Dec 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/beta-november-2021-launch-week-recap</guid>
   <title>Supabase Beta November 2021: Launch Week Recap</title>
   <link>https://supabase.com/blog/beta-november-2021-launch-week-recap</link>
   <description>We wrapped up November with Supabase's third Launch Week. Here's all the awesome stuff that got shipped ...</description>
-  <pubDate>Tue, 14 Dec 2021 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 14 Dec 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-holiday-hackdays-hackathon</guid>
   <title>Kicking off the Holiday Hackdays</title>
   <link>https://supabase.com/blog/supabase-holiday-hackdays-hackathon</link>
   <description>Build cool stuff and celebrate open-source software with us during the Holiday Hackdays!</description>
-  <pubDate>Thu, 02 Dec 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 02 Dec 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/pg-graphql</guid>
   <title>pg_graphql: A GraphQL extension for PostgreSQL</title>
   <link>https://supabase.com/blog/pg-graphql</link>
   <description>GraphQL support is in development for PostgreSQL + Supabase.</description>
-  <pubDate>Thu, 02 Dec 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 02 Dec 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week-three-friday-five-more-things</guid>
   <title>Five more things</title>
   <link>https://supabase.com/blog/launch-week-three-friday-five-more-things</link>
   <description>It's never just one more thing!</description>
-  <pubDate>Thu, 02 Dec 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 02 Dec 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-acquires-logflare</guid>
   <title>Supabase acquires Logflare</title>
   <link>https://supabase.com/blog/supabase-acquires-logflare</link>
   <description>Today, we're ecstatic to announce that Logflare is joining Supabase.</description>
-  <pubDate>Wed, 01 Dec 2021 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 01 Dec 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/realtime-row-level-security-in-postgresql</guid>
   <title>Realtime Postgres RLS now available on Supabase</title>
   <link>https://supabase.com/blog/realtime-row-level-security-in-postgresql</link>
   <description>Realtime database changes are now broadcast to authenticated users, respecting the same PostgreSQL policies that you use for Row Level Security.</description>
-  <pubDate>Tue, 30 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 30 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-studio</guid>
   <title>Supabase Studio</title>
   <link>https://supabase.com/blog/supabase-studio</link>
   <description>The same Dashboard that you're using on our Platform is now available for local development and Self-Hosting.</description>
-  <pubDate>Mon, 29 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 29 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/community-day-lw3</guid>
   <title>Community Day</title>
   <link>https://supabase.com/blog/community-day-lw3</link>
   <description>Kicking off launch week by highlighting the communities around Supabase.</description>
-  <pubDate>Sun, 28 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Sun, 28 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/whats-new-in-postgres-14</guid>
   <title>New in PostgreSQL 14: What every developer should know</title>
   <link>https://supabase.com/blog/whats-new-in-postgres-14</link>
   <description>A quick look at some new features and functionality in PostgreSQL 14.</description>
-  <pubDate>Sat, 27 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Sat, 27 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgrest-9</guid>
   <title>PostgREST 9</title>
   <link>https://supabase.com/blog/postgrest-9</link>
   <description>New features and updates in PostgREST version 9.</description>
-  <pubDate>Fri, 26 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Fri, 26 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-launch-week-the-trilogy</guid>
   <title>Supabase Launch Week III: Holiday Special</title>
   <link>https://supabase.com/blog/supabase-launch-week-the-trilogy</link>
   <description>Tis the season to be shipping.</description>
-  <pubDate>Thu, 25 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 25 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-how-we-launch</guid>
   <title>How we launch at Supabase</title>
   <link>https://supabase.com/blog/supabase-how-we-launch</link>
   <description>The history and methodology of Supabase Launch Week.</description>
-  <pubDate>Thu, 25 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 25 Nov 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-october-2021</guid>
   <title>Supabase Beta October 2021</title>
   <link>https://supabase.com/blog/supabase-beta-october-2021</link>
   <description>Three new Auth providers, multi-schema support, and we're gearing up for another Launch Week.</description>
-  <pubDate>Sat, 06 Nov 2021 23:11:00 +0000</pubDate>
+  <pubDate>Sat, 06 Nov 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-series-a</guid>
   <title>Supabase $30m Series A</title>
   <link>https://supabase.com/blog/supabase-series-a</link>
   <description>Supabase just raised $30M, bringing our total funding to $36M.</description>
-  <pubDate>Wed, 27 Oct 2021 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 27 Oct 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/replenysh-time-to-value-in-less-than-24-hours</guid>
   <title>Replenysh uses Supabase to implement OTP in less than 24-hours</title>
   <link>https://supabase.com/blog/replenysh-time-to-value-in-less-than-24-hours</link>
   <description>Learn how Replenysh uses Supabase to power the circular economy, redefining how brands interact with their customers and products.</description>
-  <pubDate>Mon, 18 Oct 2021 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 18 Oct 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/hacktoberfest-hackathon-winners-2021</guid>
   <title>Hacktoberfest Hackathon Winners 2021</title>
   <link>https://supabase.com/blog/hacktoberfest-hackathon-winners-2021</link>
   <description>Celebrating many amazing projects submitted to our Hacktoberfest Hackathon.</description>
-  <pubDate>Wed, 13 Oct 2021 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 13 Oct 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-sept-2021</guid>
   <title>Supabase Beta Sept 2021</title>
   <link>https://supabase.com/blog/supabase-beta-sept-2021</link>
   <description>Hackathon, Aborting request, UI updates, and now Hiring.</description>
-  <pubDate>Sun, 03 Oct 2021 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 03 Oct 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-hacktoberfest-hackathon-2021</guid>
   <title>Supabase Hacktoberfest Hackathon 2021</title>
   <link>https://supabase.com/blog/supabase-hacktoberfest-hackathon-2021</link>
   <description>We're running another Supabase Hackathon during Hacktoberfest!</description>
-  <pubDate>Mon, 27 Sep 2021 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 27 Sep 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-august-2021</guid>
   <title>Supabase Beta August 2021</title>
   <link>https://supabase.com/blog/supabase-beta-august-2021</link>
   <description>Fundraising, Realtime Security, custom SMS templates, and deployments in South Korea.</description>
-  <pubDate>Thu, 09 Sep 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 09 Sep 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-july-2021</guid>
   <title>Supabase Beta July 2021</title>
   <link>https://supabase.com/blog/supabase-beta-july-2021</link>
   <description>Discord Logins, Vercel Integration, Full text search, and OAuth guides.</description>
-  <pubDate>Wed, 11 Aug 2021 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 11 Aug 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/hackathon-winners</guid>
   <title>Open Source Hackathon Winners</title>
   <link>https://supabase.com/blog/hackathon-winners</link>
   <description>Let the medal ceremony begin for the best projects submitted during the Supabase Hackathon.</description>
-  <pubDate>Sun, 08 Aug 2021 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 08 Aug 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-swag-store</guid>
   <title>Supabase Swag Store</title>
   <link>https://supabase.com/blog/supabase-swag-store</link>
   <description>Today we are officially launching the Supabase Swag Store.</description>
-  <pubDate>Thu, 29 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 29 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-functions-updates</guid>
   <title>Updates for Supabase Functions</title>
   <link>https://supabase.com/blog/supabase-functions-updates</link>
   <description>The question on everyone's mind - are we launching Supabase Functions? Well, it's complicated.</description>
-  <pubDate>Thu, 29 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 29 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/1-the-supabase-hackathon</guid>
   <title>The Supabase Hackathon</title>
   <link>https://supabase.com/blog/1-the-supabase-hackathon</link>
   <description>A whole week of Hacking for Fun and Prizes.</description>
-  <pubDate>Thu, 29 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 29 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-reports-and-metrics</guid>
   <title>Supabase Reports and Metrics</title>
   <link>https://supabase.com/blog/supabase-reports-and-metrics</link>
   <description>We're exposing a full set of metrics in your projects, so that you can build better (and faster) products for your users.</description>
-  <pubDate>Wed, 28 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 28 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-auth-passwordless-sms-login</guid>
   <title>Supabase Auth v2: Phone Auth now available</title>
   <link>https://supabase.com/blog/supabase-auth-passwordless-sms-login</link>
   <description>Phone Auth is available today on all new and existing Supabase projects.</description>
-  <pubDate>Tue, 27 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 27 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/mobbin-supabase-200000-users</guid>
   <title>Mobbin uses Supabase to authenticate 200,000 users</title>
   <link>https://supabase.com/blog/mobbin-supabase-200000-users</link>
   <description>Learn how Mobbin migrated 200,000 users from Firebase for a better authentication experience.</description>
-  <pubDate>Tue, 27 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 27 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/storage-beta</guid>
   <title>Supabase Storage now in Beta</title>
   <link>https://supabase.com/blog/storage-beta</link>
   <description>Supabase Storage moves into Beta.</description>
-  <pubDate>Mon, 26 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 26 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/spot-flutter-with-postgres</guid>
   <title>Spot: a video sharing app built with Flutter</title>
   <link>https://supabase.com/blog/spot-flutter-with-postgres</link>
   <description>Spot is a geolocation-based video-sharing app with some social networking features.</description>
-  <pubDate>Mon, 26 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 26 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-postgres-13</guid>
   <title>Supabase is now on Postgres 13.3</title>
   <link>https://supabase.com/blog/supabase-postgres-13</link>
   <description>From today, new Supabase projects will be on a version of Supabase Postgres that runs on Postgres 13.3.</description>
-  <pubDate>Sun, 25 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 25 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-community-day</guid>
   <title>Supabase Community Day</title>
   <link>https://supabase.com/blog/supabase-community-day</link>
   <description>Community Day</description>
-  <pubDate>Sun, 25 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 25 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/epsilon3-self-hosting</guid>
   <title>Epsilon3 Self-Host Supabase To Revolutionize Space Operations </title>
   <link>https://supabase.com/blog/epsilon3-self-hosting</link>
   <description>Learn how the team at Epsilon3 use Supabase to help teams execute secure and reliable operations in an industry that project spend runs into the billions.</description>
-  <pubDate>Sun, 25 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 25 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-launch-week-sql</guid>
   <title>Supabase Launch Week II: The SQL</title>
   <link>https://supabase.com/blog/supabase-launch-week-sql</link>
   <description>Five days of Supabase. Again.</description>
-  <pubDate>Wed, 21 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 21 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/roles-postgres-hooks</guid>
   <title>Protecting reserved roles with PostgreSQL Hooks</title>
   <link>https://supabase.com/blog/roles-postgres-hooks</link>
   <description>Using Postgres Hooks to protect functionality in your Postgres database.</description>
-  <pubDate>Thu, 01 Jul 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 01 Jul 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-june-2021</guid>
   <title>Supabase Beta June 2021</title>
   <link>https://supabase.com/blog/supabase-beta-june-2021</link>
   <description>Discord Logins, Vercel Integration, Full text search, and OAuth guides.</description>
-  <pubDate>Tue, 01 Jun 2021 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 01 Jun 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-may-2021</guid>
   <title>Supabase Beta May 2021</title>
   <link>https://supabase.com/blog/supabase-beta-may-2021</link>
   <description>Apple &amp; Twitter Logins, Supabase Grid, Go &amp; Swift Libraries.</description>
-  <pubDate>Tue, 01 Jun 2021 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 01 Jun 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-april-2021</guid>
   <title>Supabase Beta April 2021</title>
   <link>https://supabase.com/blog/supabase-beta-april-2021</link>
   <description>Supabase "gardening" - stability, security, and community support.</description>
-  <pubDate>Tue, 04 May 2021 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 04 May 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-march-2021</guid>
   <title>Supabase Beta March 2021</title>
   <link>https://supabase.com/blog/supabase-beta-march-2021</link>
   <description>Launch week, Storage, Supabase CLI, Connection Pooling, Supabase UI, and Pricing.</description>
-  <pubDate>Mon, 05 Apr 2021 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 05 Apr 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-workflows</guid>
   <title>Workflows are coming to Supabase</title>
   <link>https://supabase.com/blog/supabase-workflows</link>
   <description>Functions are great, but you know what's better?</description>
-  <pubDate>Thu, 01 Apr 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 01 Apr 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-pgbouncer</guid>
   <title>PgBouncer is now available in Supabase</title>
   <link>https://supabase.com/blog/supabase-pgbouncer</link>
   <description>Better support for Serverless and Postgres.</description>
-  <pubDate>Thu, 01 Apr 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 01 Apr 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-dot-com</guid>
   <title>Supabase Dot Com</title>
   <link>https://supabase.com/blog/supabase-dot-com</link>
   <description>The Supabase Domain name is changing.</description>
-  <pubDate>Thu, 01 Apr 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 01 Apr 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-nft-marketplace</guid>
   <title>Supabase Launches NFT Marketplace</title>
   <link>https://supabase.com/blog/supabase-nft-marketplace</link>
   <description>A fully encrypted NFT platform to protect and transact your digital assets</description>
-  <pubDate>Wed, 31 Mar 2021 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 01 Apr 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-cli</guid>
   <title>Supabase CLI</title>
   <link>https://supabase.com/blog/supabase-cli</link>
   <description>Local development, database migrations, and self-hosting.</description>
-  <pubDate>Tue, 30 Mar 2021 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 31 Mar 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-storage</guid>
   <title>Storage is now available in Supabase</title>
   <link>https://supabase.com/blog/supabase-storage</link>
   <description>Launching Supabase Storage and how you can use it in your apps</description>
-  <pubDate>Mon, 29 Mar 2021 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 30 Mar 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/pricing</guid>
   <title>Supabase Beta Pricing</title>
   <link>https://supabase.com/blog/pricing</link>
   <description>Supabase launches Beta pricing structure</description>
-  <pubDate>Sun, 28 Mar 2021 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 29 Mar 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/launch-week</guid>
   <title>Launch week</title>
   <link>https://supabase.com/blog/launch-week</link>
   <description>Five days of Supabase.</description>
-  <pubDate>Wed, 24 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 24 Mar 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/angels-of-supabase</guid>
   <title>Angels of Supabase</title>
   <link>https://supabase.com/blog/angels-of-supabase</link>
   <description>Meet the investors of Supabase.</description>
-  <pubDate>Wed, 24 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 24 Mar 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/In-The-Loop</guid>
   <title>Developers stay up to date with intheloop.dev</title>
   <link>https://supabase.com/blog/In-The-Loop</link>
   <description>Learn why Kevin is building intheloop.dev with Supabase</description>
-  <pubDate>Sun, 21 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 22 Mar 2021 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/using-supabase-replit</guid>
   <title>Using Supabase in Replit</title>
   <link>https://supabase.com/blog/using-supabase-replit</link>
   <description>Free hosted relational database from within your node.js repl</description>
-  <pubDate>Wed, 10 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Thu, 11 Mar 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/toad-a-link-shortener-with-simple-apis-for-low-coders</guid>
   <title>Toad, a link shortener with simple APIs for low-coders</title>
   <link>https://supabase.com/blog/toad-a-link-shortener-with-simple-apis-for-low-coders</link>
   <description>An easy-to-use link shortening tool with simple APIs</description>
-  <pubDate>Sun, 07 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 08 Mar 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgres-as-a-cron-server</guid>
   <title>Postgres as a CRON Server</title>
   <link>https://supabase.com/blog/postgres-as-a-cron-server</link>
   <description>Running repetitive tasks with your Postgres database.</description>
-  <pubDate>Thu, 04 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Fri, 05 Mar 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-february-2021</guid>
   <title>Supabase Beta February 2021</title>
   <link>https://supabase.com/blog/supabase-beta-february-2021</link>
   <description>One year of building.</description>
-  <pubDate>Mon, 01 Mar 2021 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 02 Mar 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/cracking-postgres-interview</guid>
   <title>Cracking PostgreSQL Interview Questions</title>
   <link>https://supabase.com/blog/cracking-postgres-interview</link>
   <description>Understand the top PostgreSQL Interview Questions</description>
-  <pubDate>Fri, 26 Feb 2021 23:11:00 +0000</pubDate>
+  <pubDate>Sat, 27 Feb 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/case-study-roboflow</guid>
   <title>Roboflow.com choose Supabase to power Paint.wtf leaderboard</title>
   <link>https://supabase.com/blog/case-study-roboflow</link>
   <description>Learn how Roboflow.com used Supabase to build their Paint.wtf leaderboard</description>
-  <pubDate>Mon, 08 Feb 2021 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 09 Feb 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-january-2021</guid>
   <title>Supabase Beta January 2021</title>
   <link>https://supabase.com/blog/supabase-beta-january-2021</link>
   <description>Eleven months of building.</description>
-  <pubDate>Mon, 01 Feb 2021 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 02 Feb 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-beta-december-2020</guid>
   <title>Supabase Beta December 2020</title>
   <link>https://supabase.com/blog/supabase-beta-december-2020</link>
   <description>Ten months of building.</description>
-  <pubDate>Fri, 01 Jan 2021 23:11:00 +0000</pubDate>
+  <pubDate>Sat, 02 Jan 2021 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-dashboard-performance</guid>
   <title>Making the Supabase Dashboard Supa-fast</title>
   <link>https://supabase.com/blog/supabase-dashboard-performance</link>
   <description>Improving the performance of the Supabase dashboard</description>
-  <pubDate>Sat, 12 Dec 2020 23:11:00 +0000</pubDate>
+  <pubDate>Sun, 13 Dec 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-striveschool</guid>
   <title>Supabase Partners With Strive School To Help Teach Open Source</title>
   <link>https://supabase.com/blog/supabase-striveschool</link>
   <description>Supabase Partners With Strive School To Help Teach Open Source To The Next Generation Of Developers</description>
-  <pubDate>Tue, 01 Dec 2020 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 02 Dec 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/case-study-xendit</guid>
   <title>Xendit Built a Counter-Fraud Watchlist for the Fintech Industry</title>
   <link>https://supabase.com/blog/case-study-xendit</link>
   <description>See how Xendit use Supabase to build a full-text search engine.</description>
-  <pubDate>Tue, 01 Dec 2020 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 02 Dec 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/case-study-tayfa</guid>
   <title>TAYFA Built a No-Code Website Builder in Seven Days</title>
   <link>https://supabase.com/blog/case-study-tayfa</link>
   <description>See how Tayfa went from idea to paying customer in less than 30 days.</description>
-  <pubDate>Tue, 01 Dec 2020 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 02 Dec 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/case-study-monitoro</guid>
   <title>Monitoro Built a Web Crawler Handling Millions of API Requests</title>
   <link>https://supabase.com/blog/case-study-monitoro</link>
   <description>See how Monitoro built an automated scraping platform using Supabase.</description>
-  <pubDate>Tue, 01 Dec 2020 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 02 Dec 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-november-2020</guid>
   <title>Supabase Alpha November 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-november-2020</link>
   <description>Nine months of building.</description>
-  <pubDate>Mon, 30 Nov 2020 23:11:00 +0000</pubDate>
+  <pubDate>Tue, 01 Dec 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgresql-views</guid>
   <title>Postgres Views</title>
   <link>https://supabase.com/blog/postgresql-views</link>
   <description>Creating and using a view in PostgreSQL.</description>
-  <pubDate>Tue, 17 Nov 2020 23:11:00 +0000</pubDate>
+  <pubDate>Wed, 18 Nov 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-october-2020</guid>
   <title>Supabase Alpha October 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-october-2020</link>
   <description>Eight months of building.</description>
-  <pubDate>Sun, 01 Nov 2020 23:11:00 +0000</pubDate>
+  <pubDate>Mon, 02 Nov 2020 03:03:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/improved-dx</guid>
   <title>Supabase.js 1.0</title>
   <link>https://supabase.com/blog/improved-dx</link>
   <description>We're releasing a new version of our Supabase client with some awesome new improvements.</description>
-  <pubDate>Thu, 29 Oct 2020 23:11:00 +0000</pubDate>
+  <pubDate>Fri, 30 Oct 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-september-2020</guid>
   <title>Supabase Alpha September 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-september-2020</link>
   <description>Seven months of building.</description>
-  <pubDate>Fri, 02 Oct 2020 22:10:00 +0000</pubDate>
+  <pubDate>Sat, 03 Oct 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-hacktoberfest-2020</guid>
   <title>Supabase Hacktoberfest 2020</title>
   <link>https://supabase.com/blog/supabase-hacktoberfest-2020</link>
   <description>Join us for a celebration of open source software and learn how to contribute to Supabase.</description>
-  <pubDate>Thu, 10 Sep 2020 22:10:00 +0000</pubDate>
+  <pubDate>Fri, 11 Sep 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-august-2020</guid>
   <title>Supabase Alpha August 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-august-2020</link>
   <description>Six months of building</description>
-  <pubDate>Wed, 02 Sep 2020 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 03 Sep 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-auth</guid>
   <title>Supabase Auth</title>
   <link>https://supabase.com/blog/supabase-auth</link>
   <description>Authenticate and authorize your users with Supabase Auth</description>
-  <pubDate>Tue, 04 Aug 2020 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 05 Aug 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-july-2020</guid>
   <title>Supabase Alpha July 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-july-2020</link>
   <description>Five months of building</description>
-  <pubDate>Sat, 01 Aug 2020 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 02 Aug 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/continuous-postgresql-backup-walg</guid>
   <title>Continuous PostgreSQL Backups using WAL-G</title>
   <link>https://supabase.com/blog/continuous-postgresql-backup-walg</link>
   <description>Have you ever wanted to restore your database's state to a particular moment in time? This post explains how, using WAL-G.</description>
-  <pubDate>Sat, 01 Aug 2020 22:10:00 +0000</pubDate>
+  <pubDate>Sun, 02 Aug 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/alpha-launch-postmortem</guid>
   <title>Alpha Launch Postmortem</title>
   <link>https://supabase.com/blog/alpha-launch-postmortem</link>
   <description>Everything that went wrong with Supabase's launch</description>
-  <pubDate>Thu, 09 Jul 2020 22:10:00 +0000</pubDate>
+  <pubDate>Fri, 10 Jul 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgresql-templates</guid>
   <title>What are PostgreSQL Templates?</title>
   <link>https://supabase.com/blog/postgresql-templates</link>
   <description>What are PostgreSQL templates and what are they used for?</description>
-  <pubDate>Wed, 08 Jul 2020 22:10:00 +0000</pubDate>
+  <pubDate>Thu, 09 Jul 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/postgresql-physical-logical-backups</guid>
   <title>Physical vs Logical Backups in PostgreSQL</title>
   <link>https://supabase.com/blog/postgresql-physical-logical-backups</link>
   <description>What are physical and logical backups in Postgres?</description>
-  <pubDate>Mon, 06 Jul 2020 22:10:00 +0000</pubDate>
+  <pubDate>Tue, 07 Jul 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-june-2020</guid>
   <title>Supabase Alpha June 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-june-2020</link>
   <description>Four months of building</description>
-  <pubDate>Tue, 30 Jun 2020 22:10:00 +0000</pubDate>
+  <pubDate>Wed, 01 Jul 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-steve-chavez</guid>
   <title>Steve Chavez has joined Supabase</title>
   <link>https://supabase.com/blog/supabase-steve-chavez</link>
   <description>Steve joins Supabase to help build Auth.</description>
-  <pubDate>Sun, 14 Jun 2020 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 15 Jun 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-may-2020</guid>
   <title>Supabase Alpha May 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-may-2020</link>
   <description>Three months of building</description>
-  <pubDate>Sun, 31 May 2020 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 01 Jun 2020 02:02:30 +0000</pubDate>
 </item>
 <item>
   <guid>https://supabase.com/blog/supabase-alpha-april-2020</guid>
   <title>Supabase Alpha April 2020</title>
   <link>https://supabase.com/blog/supabase-alpha-april-2020</link>
   <description>Two months of building</description>
-  <pubDate>Sun, 31 May 2020 22:10:00 +0000</pubDate>
+  <pubDate>Mon, 01 Jun 2020 02:02:30 +0000</pubDate>
 </item>
 
     </channel>
diff --git a/package-lock.json b/package-lock.json
index 5bb23e0dd7c..78869d57003 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38976,7 +38976,6 @@
         "semver": "^6.3.0",
         "shared-data": "*",
         "sqlstring": "^2.3.2",
-        "swr": "^1.2.1",
         "ui": "*",
         "uniforms-bootstrap4": "^3.6.2",
         "uniforms-bridge-json-schema": "^3.6.2",
@@ -39318,14 +39317,6 @@
         "react-dom": "^16.0.0 || ^17.0.0"
       }
     },
-    "studio/node_modules/swr": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
-      "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
-      "peerDependencies": {
-        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "studio/node_modules/typescript": {
       "version": "4.8.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
@@ -65856,7 +65847,6 @@
         "shared-data": "*",
         "sqlstring": "^2.3.2",
         "storybook-dark-mode": "^1.0.4",
-        "swr": "^1.2.1",
         "tailwindcss": "^3.0.22",
         "ts-jest": "^27.0.7",
         "typescript": "4.8.4",
@@ -66083,12 +66073,6 @@
             "reduce-css-calc": "^2.1.8"
           }
         },
-        "swr": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz",
-          "integrity": "sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==",
-          "requires": {}
-        },
         "typescript": {
           "version": "4.8.4",
           "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
diff --git a/spec/supabase_dart_v1.yml b/spec/supabase_dart_v1.yml
index 72e079bb08b..a2f4a2eeae4 100644
--- a/spec/supabase_dart_v1.yml
+++ b/spec/supabase_dart_v1.yml
@@ -907,7 +907,7 @@ functions:
           ```dart
           supabase.from('countries')
             .stream(primaryKey: ['id'])
-            .order('name', ascending: true)
+            .order('name', { ascending: true })
             .listen((List<Map<String, dynamic>> data) {
             // Do something awesome with the data
           });
@@ -918,7 +918,7 @@ functions:
           ```dart
           supabase.from('countries')
             .stream(primaryKey: ['id'])
-            .order('name', ascending: true)
+            .order('name', { ascending: true })
             .limit(10)
             .listen((List<Map<String, dynamic>> data) {
             // Do something awesome with the data
@@ -1334,7 +1334,7 @@ functions:
           final data = await supabase
             .from('cities')
             .select('name, country_id')
-            .order('id',  ascending: false );
+            .order('id',  { ascending: false });
           ```
       - id: with-embedded-resources
         name: With embedded resources
diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml
index f2e625f0edc..63fe254c553 100644
--- a/spec/supabase_js_v2.yml
+++ b/spec/supabase_js_v2.yml
@@ -972,6 +972,40 @@ functions:
             .from('countries')
             .select()
           ```
+        data:
+          sql: |
+            ```sql
+            create table
+              countries (id int8 primary key, name text);
+
+            insert into
+              countries (id, name)
+            values
+              (1, 'Afghanistan'),
+              (2, 'Albania'),
+              (3, 'Algeria');
+            ```
+        response: |
+          ```json
+          {
+            "data": [
+              {
+                "id": 1,
+                "name": "Afghanistan"
+              },
+              {
+                "id": 2,
+                "name": "Albania"
+              },
+              {
+                "id": 3,
+                "name": "Algeria"
+              }
+            ],
+            "status": 200,
+            "statusText": "OK"
+          }
+          ```
       - id: selecting-specific-columns
         name: Selecting specific columns
         code: |
@@ -980,6 +1014,37 @@ functions:
             .from('countries')
             .select('name')
           ```
+        data:
+          sql: |
+            ```sql
+            create table
+              countries (id int8 primary key, name text);
+
+            insert into
+              countries (id, name)
+            values
+              (1, 'Afghanistan'),
+              (2, 'Albania'),
+              (3, 'Algeria');
+            ```
+        response: |
+          ```json
+          {
+            "data": [
+              {
+                "name": "Afghanistan"
+              },
+              {
+                "name": "Albania"
+              },
+              {
+                "name": "Algeria"
+              }
+            ],
+            "status": 200,
+            "statusText": "OK"
+          }
+          ```
       - id: query-foreign-tables
         name: Query foreign tables
         description: |
@@ -995,6 +1060,54 @@ functions:
               )
             `)
           ```
+        data:
+          sql: |
+            ```sql
+            create table
+              countries (id int8 primary key, name text);
+            create table
+              cities (
+                id int8 primary key,
+                country_id int8 not null references countries,
+                name text
+              );
+
+            insert into
+              countries (id, name)
+            values
+              (1, 'Germany'),
+              (2, 'Indonesia');
+            insert into
+              cities (id, country_id, name)
+            values
+              (1, 2, 'Bali'),
+              (2, 1, 'Munich');
+            ```
+        response: |
+          ```json
+          {
+            "data": [
+              {
+                "name": "Germany",
+                "cities": [
+                  {
+                    "name": "Munich"
+                  }
+                ]
+              },
+              {
+                "name": "Indonesia",
+                "cities": [
+                  {
+                    "name": "Bali"
+                  }
+                ]
+              }
+            ],
+            "status": 200,
+            "statusText": "OK"
+          }
+          ```
       - id: query-foreign-tables-through-a-join-table
         name: Query foreign tables through a join table
         code: |
@@ -1327,12 +1440,6 @@ functions:
   - id: insert
     title: 'Create data: insert()'
     $ref: '@supabase/postgrest-js.PostgrestQueryBuilder.insert'
-    params:
-      - name: values
-        type: object | object []
-        isOptional: false
-        description: |
-          Bobby Bobby Bobby Bobby Bobby Bobby
     examples:
       - id: create-a-record
         name: Create a record
diff --git a/studio/__mocks__/data/subscriptions/project-subscription-query.js b/studio/__mocks__/data/subscriptions/project-subscription-query.js
new file mode 100644
index 00000000000..8f95fdbac4e
--- /dev/null
+++ b/studio/__mocks__/data/subscriptions/project-subscription-query.js
@@ -0,0 +1,7 @@
+export const useProjectSubscriptionQuery = jest.fn().mockReturnValue({
+  data: {
+    tier: {
+      supabase_prod_id: 'tier_free',
+    },
+  },
+})
diff --git a/studio/__mocks__/hooks.js b/studio/__mocks__/hooks.js
index e6d89720b13..77e269ed6c9 100644
--- a/studio/__mocks__/hooks.js
+++ b/studio/__mocks__/hooks.js
@@ -1,20 +1,15 @@
 export const useFlag = jest.fn().mockReturnValue(true)
 export const checkPermissions = jest.fn().mockReturnValue(true)
-export const useProjectSubscription = jest.fn().mockReturnValue({
-  subscription: {
-    tier: {
-      supabase_prod_id: 'tier_free',
-    },
-  },
-})
 
 const { useStore, StoreProvider } = jest.requireActual('hooks')
 export const useStore = useStore
 
+export const useParams = jest.fn().mockImplementation(() => ({ ref: '123' }))
+
 // mocks browser event listener adding/removing
 window.matchMedia = jest.fn().mockReturnValue({
   removeEventListener: jest.fn(),
 })
 export const StoreProvider = StoreProvider
 
-export const withAuth = jest.fn()
\ No newline at end of file
+export const withAuth = jest.fn()
diff --git a/studio/components/interfaces/Account/AccessTokenList.tsx b/studio/components/interfaces/Account/AccessTokenList.tsx
index 0e3aba63e4b..8abe747f6e2 100644
--- a/studio/components/interfaces/Account/AccessTokenList.tsx
+++ b/studio/components/interfaces/Account/AccessTokenList.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react'
 import { Button, Modal, IconTrash } from 'ui'
 import { useStore } from 'hooks'
-import { delete_ } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { AccessToken, useAccessTokens } from 'hooks/queries/useAccessTokens'
+import { AccessToken, useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
+import { useAccessTokenDeleteMutation } from 'data/access-tokens/access-tokens-delete-mutation'
 import { observer } from 'mobx-react-lite'
 
 import Table from 'components/to-be-cleaned/Table'
@@ -11,21 +10,21 @@ import ConfirmationModal from 'components/ui/ConfirmationModal'
 
 const AccessTokenList = observer(() => {
   const { ui } = useStore()
-  const { mutateDeleteToken } = useAccessTokens()
-  const { tokens, isLoading } = useAccessTokens()
+  const { data: tokens, isLoading } = useAccessTokensQuery()
+  const { mutateAsync: deleteToken } = useAccessTokenDeleteMutation()
+
   const [isOpen, setIsOpen] = useState(false)
   const [token, setToken] = useState<AccessToken | undefined>(undefined)
 
   async function onDeleteToken(tokenId: number) {
-    const response = await delete_(`${API_URL}/profile/access-tokens/${tokenId}`)
-    if (response.error) {
+    try {
+      await deleteToken({ id: tokenId })
+      setIsOpen(false)
+    } catch (error: any) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to delete token: ${response.error.message}`,
+        message: `Failed to delete token: ${error.message}`,
       })
-    } else {
-      mutateDeleteToken(tokenId)
-      setIsOpen(false)
     }
   }
 
@@ -50,7 +49,7 @@ const AccessTokenList = observer(() => {
               </Table.tr>
             ) : (
               <>
-                {tokens?.map((x: AccessToken) => {
+                {tokens?.map((x) => {
                   return (
                     <Table.tr key={x.token_alias}>
                       <Table.td>
diff --git a/studio/components/interfaces/Account/NewAccessTokenButton.tsx b/studio/components/interfaces/Account/NewAccessTokenButton.tsx
index edf5e24de1d..4bdf9e36fa6 100644
--- a/studio/components/interfaces/Account/NewAccessTokenButton.tsx
+++ b/studio/components/interfaces/Account/NewAccessTokenButton.tsx
@@ -1,14 +1,14 @@
 import { FC, useState } from 'react'
 import { Input, Button, Modal, Form, Alert } from 'ui'
 import { useStore } from 'hooks'
-import { post } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { NewAccessToken, useAccessTokens } from 'hooks/queries/useAccessTokens'
+import {
+  NewAccessToken,
+  useAccessTokenCreateMutation,
+} from 'data/access-tokens/access-tokens-create-mutation'
 import { observer } from 'mobx-react-lite'
 
 const NewAccessTokenButton = observer(() => {
   const { ui } = useStore()
-  const { mutateNewToken } = useAccessTokens()
   const [isOpen, setIsOpen] = useState(false)
   const [newToken, setNewToken] = useState<NewAccessToken | undefined>(undefined)
 
@@ -20,21 +20,24 @@ const NewAccessTokenButton = observer(() => {
     return errors
   }
 
+  const { mutateAsync: createAccessToken } = useAccessTokenCreateMutation()
+
   async function onFormSubmit(values: any, { setSubmitting }: any) {
     setSubmitting(true)
-    const response = await post(`${API_URL}/profile/access-tokens`, { name: values.tokenName })
-    if (response.error) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to create token: ${response.error.message}`,
-      })
-      setSubmitting(false)
-    } else {
-      mutateNewToken(response)
+
+    try {
+      const response = await createAccessToken({ name: values.tokenName })
       setNewToken(response)
 
       setSubmitting(false)
       setIsOpen(false)
+    } catch (error: any) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to create token: ${error.message}`,
+      })
+
+      setSubmitting(false)
     }
   }
 
@@ -68,7 +71,7 @@ const NewAccessTokenButton = observer(() => {
           validate={validate}
         >
           {({ isSubmitting }: { isSubmitting: boolean }) => (
-            <div className="space-y-4 py-3">
+            <div className="py-3 space-y-4">
               <Modal.Content>
                 <Input
                   id="tokenName"
@@ -109,7 +112,7 @@ const NewTokenItem: FC<NewTokenItemProps> = observer(({ data }) => {
           copy
           readOnly
           size="small"
-          className="input-mono max-w-xl"
+          className="max-w-xl input-mono"
           value={data.token}
           onChange={() => {}}
         />
diff --git a/studio/components/interfaces/Billing/Subscription/Subscription.tsx b/studio/components/interfaces/Billing/Subscription/Subscription.tsx
index f055eaa1bbc..27e92bba8aa 100644
--- a/studio/components/interfaces/Billing/Subscription/Subscription.tsx
+++ b/studio/components/interfaces/Billing/Subscription/Subscription.tsx
@@ -5,7 +5,7 @@ import { Button, Loading } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions, useStore, useFlag, useProjectUsage } from 'hooks'
+import { checkPermissions, useFlag, useParams } from 'hooks'
 import { STRIPE_PRODUCT_IDS } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 
@@ -14,6 +14,7 @@ import CostBreakdownRow from './CostBreakdownRow'
 import { StripeSubscription } from './Subscription.types'
 import NoPermission from 'components/ui/NoPermission'
 import { USAGE_BASED_PRODUCTS } from 'components/interfaces/Billing/Billing.constants'
+import { ProjectUsageResponse, useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 interface Props {
   project: any
@@ -32,10 +33,9 @@ const Subscription: FC<Props> = ({
   currentPeriodStart,
   currentPeriodEnd,
 }) => {
-  const { ui } = useStore()
   const router = useRouter()
 
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
   const projectUpdateDisabled = useFlag('disableProjectCreationAndUpdate')
 
   const canReadSubscription = checkPermissions(PermissionAction.READ, 'subscriptions')
@@ -44,7 +44,7 @@ const Subscription: FC<Props> = ({
     'stripe.subscriptions'
   )
 
-  const { usage, isLoading: loadingUsage } = useProjectUsage(ref as string)
+  const { data: usage, isLoading: loadingUsage } = useProjectUsageQuery({ projectRef })
 
   const isPayg = subscription?.tier.prod_id === STRIPE_PRODUCT_IDS.PAYG
   const isEnterprise = subscription.tier.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.ENTERPRISE
@@ -62,7 +62,7 @@ const Subscription: FC<Props> = ({
         ? 0
         : Object.keys(usage)
             .map((productKey) => {
-              return usage[productKey].cost ?? 0
+              return usage[productKey as keyof ProjectUsageResponse].cost ?? 0
             })
             .reduce((prev, current) => prev + current, 0)
 
@@ -71,7 +71,7 @@ const Subscription: FC<Props> = ({
 
   return (
     <Loading active={loading || loadingUsage}>
-      <div className="mb-8 w-full overflow-hidden rounded border border-panel-border-light dark:border-panel-border-dark">
+      <div className="w-full mb-8 overflow-hidden border rounded border-panel-border-light dark:border-panel-border-dark">
         <div className="bg-panel-body-light dark:bg-panel-body-dark">
           <div className="flex items-center justify-between px-6 pt-4">
             <div className="flex flex-col">
@@ -134,7 +134,7 @@ const Subscription: FC<Props> = ({
               </p>
             </div>
           )}
-          <div className="mt-2 px-6 pb-4">
+          <div className="px-6 pb-4 mt-2">
             <p className="text-sm text-scale-1100">
               See our{' '}
               <a href="https://supabase.com/pricing" target="_blank" className="underline">
@@ -151,7 +151,7 @@ const Subscription: FC<Props> = ({
           ) : !loading && subscription ? (
             // Cost breakdown
             <>
-              <div className="relative flex items-center border-t border-panel-border-light px-6 py-3 dark:border-panel-border-dark">
+              <div className="relative flex items-center px-6 py-3 border-t border-panel-border-light dark:border-panel-border-dark">
                 <div className="w-[40%]">
                   <p className="text-xs uppercase text-scale-900">Item</p>
                 </div>
@@ -183,9 +183,11 @@ const Subscription: FC<Props> = ({
               {isPayg &&
                 USAGE_BASED_PRODUCTS.map((product) => {
                   return product.features.map((feature) => {
-                    const amount = usage?.[feature.key]?.usage ?? 0
-                    const limit = usage?.[feature.key]?.limit ?? 0
-                    const cost = (usage?.[feature.key]?.cost ?? 0).toFixed(2)
+                    const amount = usage?.[feature.key as keyof ProjectUsageResponse]?.usage ?? 0
+                    const limit = usage?.[feature.key as keyof ProjectUsageResponse]?.limit ?? 0
+                    const cost = (
+                      usage?.[feature.key as keyof ProjectUsageResponse]?.cost ?? 0
+                    ).toFixed(2)
 
                     return (
                       <CostBreakdownRow
diff --git a/studio/components/interfaces/Billing/Subscription/Subscription.types.ts b/studio/components/interfaces/Billing/Subscription/Subscription.types.ts
index edc54c9b96a..5142008b039 100644
--- a/studio/components/interfaces/Billing/Subscription/Subscription.types.ts
+++ b/studio/components/interfaces/Billing/Subscription/Subscription.types.ts
@@ -14,5 +14,5 @@ export interface StripeProduct {
   price_id?: string
   unit_amount: number
   supabase_prod_id: string
-  key: string
+  key: 'FREE' | 'PRO' | 'TEAM' | 'ENTERPRISE'
 }
diff --git a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
index 3f990ba5d75..cd43b19d452 100644
--- a/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
+++ b/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -1,12 +1,13 @@
 import Link from 'next/link'
 import { Button, IconCalendar } from 'ui'
 import { FormPanel } from 'components/ui/Forms'
-import { useParams, useProjectSubscription } from 'hooks'
+import { useParams } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { getPITRRetentionDuration } from './PITR.utils'
 
 const PITRNotice = ({}) => {
-  const { ref } = useParams()
-  const { subscription } = useProjectSubscription(ref)
+  const { ref: projectRef } = useParams()
+  const { data: subscription } = useProjectSubscriptionQuery({ projectRef })
   const retentionPeriod = getPITRRetentionDuration(subscription?.addons ?? [])
 
   return (
@@ -14,10 +15,10 @@ const PITRNotice = ({}) => {
       disabled={true}
       footer={
         <div className="flex items-center justify-between p-6">
-          <span className="text-scale-1000 text-sm">
+          <span className="text-sm text-scale-1000">
             You can also increase your recovery retention period updating your PITR add-on
           </span>
-          <Link href={`/project/${ref}/settings/billing/update/pro`}>
+          <Link href={`/project/${projectRef}/settings/billing/update/pro`}>
             <a>
               <Button as="span" type="default">
                 Increase retention period
@@ -27,8 +28,8 @@ const PITRNotice = ({}) => {
         </div>
       }
     >
-      <div className="p-6 flex space-x-6">
-        <div className="h-10 w-10 rounded flex items-center justify-center bg-scale-700">
+      <div className="flex p-6 space-x-6">
+        <div className="flex items-center justify-center w-10 h-10 rounded bg-scale-700">
           <IconCalendar strokeWidth={2} />
         </div>
         <div className="space-y-2">
diff --git a/studio/components/interfaces/Functions/TerminalInstructions.tsx b/studio/components/interfaces/Functions/TerminalInstructions.tsx
index dbb81db4061..f8f30b523ab 100644
--- a/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -1,12 +1,12 @@
-import { useRouter } from 'next/router'
-import { Button, IconTerminal, IconMaximize2, IconMinimize2, IconBookOpen, IconCode } from 'ui'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
-import { useAccessTokens } from 'hooks/queries/useAccessTokens'
-import { Commands } from './Functions.types'
 import CommandRender from 'components/interfaces/Functions/CommandRender'
-import { FC, useState } from 'react'
-import { useStore } from 'hooks'
+import { useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useParams } from 'hooks'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { FC, useState } from 'react'
+import { Button, IconBookOpen, IconCode, IconMaximize2, IconMinimize2, IconTerminal } from 'ui'
+import { Commands } from './Functions.types'
 
 interface Props {
   closable?: boolean
@@ -14,21 +14,21 @@ interface Props {
 
 const TerminalInstructions: FC<Props> = ({ closable = false }) => {
   const router = useRouter()
-  const { ref } = router.query
-  const { ui } = useStore()
-
-  const { tokens } = useAccessTokens()
-  const { data: settings } = useProjectSettingsQuery({ projectRef: ref as string })
+  const { ref: projectRef } = useParams()
 
   const [showInstructions, setShowInstructions] = useState(!closable)
 
-  // Get the API service
+  const { data: tokens } = useAccessTokensQuery()
+
+  const { data: settings } = useProjectApiQuery({
+    projectRef,
+  })
   const apiService = settings?.autoApiService
-  const anonKey = apiService?.service_api_keys.find((x: any) => x.name === 'anon key')
+  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
     ? apiService.defaultApiKey
     : undefined
+  const endpoint = settings?.autoApiService.app_config.endpoint ?? ''
 
-  const endpoint = apiService?.endpoint ?? ''
   const endpointSections = endpoint.split('.')
   const functionsEndpoint = [
     ...endpointSections.slice(0, 1),
@@ -37,8 +37,8 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
   ].join('.')
 
   // get the .co or .net TLD from the restUrl
-  const restUrl = ui.selectedProject?.restUrl
-  const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
+  const restUrl = settings?.autoApiService.restUrl
+  const restUrlTld = restUrl ? new URL(restUrl).hostname.split('.').pop() : ''
 
   const commands: Commands[] = [
     {
@@ -54,20 +54,20 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
       comment: 'Create a function',
     },
     {
-      command: `supabase functions deploy hello-world --project-ref ${ref}`,
+      command: `supabase functions deploy hello-world --project-ref ${projectRef}`,
       description: 'Deploys function at ./functions/hello-world/index.ts',
       jsx: () => {
         return (
           <>
             <span className="text-brand-1100">supabase</span> functions deploy hello-world
-            --project-ref {ref}
+            --project-ref {projectRef}
           </>
         )
       },
       comment: 'Deploy your function',
     },
     {
-      command: `curl -L -X POST 'https://${ref}.functions.supabase.${restUrlTld}/hello-world' -H 'Authorization: Bearer ${
+      command: `curl -L -X POST 'https://${projectRef}.functions.supabase.${restUrlTld}/hello-world' -H 'Authorization: Bearer ${
         anonKey ?? '[YOUR ANON KEY]'
       }' --data '{"name":"Functions"}'`,
       description: 'Invokes the hello-world function',
@@ -86,13 +86,13 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
 
   return (
     <div
-      className="col-span-7 overflow-hidden rounded border bg-scale-100 shadow transition-all dark:bg-scale-300"
+      className="col-span-7 overflow-hidden transition-all border rounded shadow bg-scale-100 dark:bg-scale-300"
       style={{ maxHeight: showInstructions ? 500 : 80 }}
     >
-      <div className="space-y-6 px-8 py-6">
+      <div className="px-8 py-6 space-y-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="flex h-8 w-8 items-center justify-center rounded border bg-scale-100 p-2">
+            <div className="flex items-center justify-center w-8 h-8 p-2 border rounded bg-scale-100">
               <IconTerminal strokeWidth={2} />
             </div>
             <h4>Terminal instructions</h4>
@@ -112,7 +112,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
         </div>
       </div>
       {tokens && tokens.length === 0 ? (
-        <div className="space-y-3 border-t px-8 py-6">
+        <div className="px-8 py-6 space-y-3 border-t">
           <div>
             <h3 className="text-base text-scale-1200">You may need to create an access token</h3>
             <p className="text-sm text-scale-1100">
@@ -124,7 +124,7 @@ const TerminalInstructions: FC<Props> = ({ closable = false }) => {
           </Button>
         </div>
       ) : (
-        <div className="space-y-3 border-t px-8 py-6">
+        <div className="px-8 py-6 space-y-3 border-t">
           <div>
             <h3 className="text-base text-scale-1200">Need help?</h3>
             <p className="text-sm text-scale-1100">
diff --git a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
index 20b89d4cce5..a2fc1baf0dd 100644
--- a/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
+++ b/studio/components/interfaces/Home/NewProjectPanel/APIKeys.tsx
@@ -1,19 +1,18 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
 import Link from 'next/link'
 import { useState } from 'react'
-import { useRouter } from 'next/router'
-import { Input, IconLoader, IconAlertCircle } from 'ui'
-import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
-import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { IconAlertCircle, IconLoader, Input } from 'ui'
 
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
-import { checkPermissions, useJwtSecretUpdateStatus } from 'hooks'
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
+import { checkPermissions, useParams } from 'hooks'
 import Snippets from 'components/to-be-cleaned/Docs/Snippets'
 import Panel from 'components/ui/Panel'
 import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
 
 const APIKeys = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const availableLanguages = [
     { name: 'Javascript', key: 'js' },
@@ -25,13 +24,16 @@ const APIKeys = () => {
     data: settings,
     isError: isProjectSettingsError,
     isLoading: isProjectSettingsLoading,
-  } = useProjectSettingsQuery({ projectRef: ref as string })
+  } = useProjectApiQuery({
+    projectRef,
+  })
 
   const {
-    jwtSecretUpdateStatus,
+    data,
     isError: isJwtSecretUpdateStatusError,
     isLoading: isJwtSecretUpdateStatusLoading,
-  }: any = useJwtSecretUpdateStatus(ref)
+  } = useJwtSecretUpdatingStatusQuery({ projectRef })
+  const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus
 
   const canReadAPIKeys = checkPermissions(PermissionAction.READ, 'service_api_keys')
 
@@ -45,7 +47,7 @@ const APIKeys = () => {
     jwtSecretUpdateStatus === undefined || jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updated
 
   const apiUrl = `${apiService?.protocol ?? 'https'}://${apiService?.endpoint ?? '-'}`
-  const anonKey = apiKeys.find((key: any) => key.tags === 'anon')
+  const anonKey = apiKeys.find((key) => key.tags === 'anon')
 
   const clientInitSnippet: any = Snippets.init(apiUrl)
   const selectedLanguageSnippet =
@@ -65,14 +67,14 @@ const APIKeys = () => {
       }
     >
       {isProjectSettingsError || isJwtSecretUpdateStatusError ? (
-        <div className="py-8 flex items-center justify-center space-x-2">
+        <div className="flex items-center justify-center py-8 space-x-2">
           <IconAlertCircle size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsError ? 'Failed to retrieve API keys' : 'Failed to update JWT secret'}
           </p>
         </div>
       ) : isApiKeysEmpty || isProjectSettingsLoading || isJwtSecretUpdateStatusLoading ? (
-        <div className="py-8 flex items-center justify-center space-x-2">
+        <div className="flex items-center justify-center py-8 space-x-2">
           <IconLoader className="animate-spin" size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsLoading || isApiKeysEmpty
@@ -135,8 +137,8 @@ const APIKeys = () => {
                   This key is safe to use in a browser if you have enabled Row Level Security (RLS)
                   for your tables and configured policies. You may also use the service key which
                   can be found{' '}
-                  <Link href={`/project/${ref}/settings/api`}>
-                    <a className="text-brand-800 hover:text-brand-900 transition">here</a>
+                  <Link href={`/project/${projectRef}/settings/api`}>
+                    <a className="transition text-brand-800 hover:text-brand-900">here</a>
                   </Link>{' '}
                   to bypass RLS.
                 </p>
diff --git a/studio/components/interfaces/Home/ProjectUsage.tsx b/studio/components/interfaces/Home/ProjectUsage.tsx
index 3bdd1ed3a8a..d113c2bd5c9 100644
--- a/studio/components/interfaces/Home/ProjectUsage.tsx
+++ b/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -1,4 +1,3 @@
-import useSWR from 'swr'
 import dayjs from 'dayjs'
 import Link from 'next/link'
 import { FC, useState } from 'react'
@@ -6,9 +5,10 @@ import { useRouter } from 'next/router'
 import { Button, Dropdown, IconArchive, IconChevronDown, IconDatabase, IconKey, IconZap } from 'ui'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import Panel from 'components/ui/Panel'
-import { get } from 'lib/common/fetch'
-import { API_URL, DATE_FORMAT, METRICS } from 'lib/constants'
+import { DATE_FORMAT, METRICS } from 'lib/constants'
 import { ChartIntervals } from 'types'
+import { useParams } from 'hooks'
+import { useProjectLogStatsQuery } from 'data/logs/project-log-stats-query'
 
 const CHART_INTERVALS: ChartIntervals[] = [
   {
@@ -25,14 +25,11 @@ interface Props {}
 
 const ProjectUsage: FC<Props> = ({}) => {
   const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const [interval, setInterval] = useState<string>('hourly')
 
-  const { data, error }: any = useSWR(
-    `${API_URL}/projects/${ref}/log-stats?interval=${interval}`,
-    get
-  )
+  const { data, error } = useProjectLogStatsQuery({ projectRef, interval })
 
   const selectedInterval = CHART_INTERVALS.find((i) => i.key === interval) || CHART_INTERVALS[1]
   const startDate = dayjs()
@@ -51,9 +48,9 @@ const ProjectUsage: FC<Props> = ({}) => {
     if (timestampDigits < 16) {
       // pad unix timestamp with additional 0 and then forward
       const paddedTimestamp = String(timestamp) + '0'.repeat(16 - timestampDigits)
-      router.push(`/project/${ref}/logs/edge-logs?te=${paddedTimestamp}`)
+      router.push(`/project/${projectRef}/logs/edge-logs?te=${paddedTimestamp}`)
     } else {
-      router.push(`/project/${ref}/logs/edge-logs?te=${timestamp}`)
+      router.push(`/project/${projectRef}/logs/edge-logs?te=${timestamp}`)
     }
   }
 
@@ -94,7 +91,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                       </div>
                     }
                     title="Database"
-                    href={`/project/${ref}/editor`}
+                    href={`/project/${projectRef}/editor`}
                   />
                   <ChartHandler
                     startDate={startDate}
@@ -120,7 +117,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                       </div>
                     }
                     title="Auth"
-                    href={`/project/${ref}/auth/users`}
+                    href={`/project/${projectRef}/auth/users`}
                   />
                   <ChartHandler
                     startDate={startDate}
@@ -146,7 +143,7 @@ const ProjectUsage: FC<Props> = ({}) => {
                       </div>
                     }
                     title="Storage"
-                    href={`/project/${ref}/storage/buckets`}
+                    href={`/project/${projectRef}/storage/buckets`}
                   />
                   <ChartHandler
                     startDate={startDate}
diff --git a/studio/components/interfaces/Home/ProjectUsageSection.tsx b/studio/components/interfaces/Home/ProjectUsageSection.tsx
index 2ac8f326c6c..3b83e7d1c96 100644
--- a/studio/components/interfaces/Home/ProjectUsageSection.tsx
+++ b/studio/components/interfaces/Home/ProjectUsageSection.tsx
@@ -1,16 +1,15 @@
 import { FC } from 'react'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { IconLoader, IconAlertCircle } from 'ui'
 
-import { useProjectUsage } from 'hooks'
+import { useParams } from 'hooks'
 import { ProjectUsage, NewProjectPanel } from 'components/interfaces/Home'
 import InformationBox from 'components/ui/InformationBox'
+import { ProjectUsageResponse, useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 const ProjectUsageSection: FC = observer(({}) => {
-  const router = useRouter()
-  const { ref } = router.query
-  const { usage, error: usageError, isLoading } = useProjectUsage(ref as string)
+  const { ref: projectRef } = useParams()
+  const { data: usage, error: usageError, isLoading } = useProjectUsageQuery({ projectRef })
 
   if (usageError) {
     return (
@@ -25,8 +24,8 @@ const ProjectUsageSection: FC = observer(({}) => {
 
   const hasProjectData = usage
     ? Object.keys(usage)
-        .map((key) => usage[key].usage)
-        .some((usage) => usage > 0)
+        .map((key) => usage[key as keyof ProjectUsageResponse].usage)
+        .some((usage) => (usage ?? 0) > 0)
     : false
 
   return (
diff --git a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
index 0b2216bcb55..6590417c026 100644
--- a/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
+++ b/studio/components/interfaces/Organization/BillingSettings/ProjectsSummary.tsx
@@ -3,7 +3,8 @@ import dayjs from 'dayjs'
 import { FC, useEffect } from 'react'
 import { IconChevronRight, IconLoader } from 'ui'
 
-import { useProjectSubscription, useStore } from 'hooks'
+import { useStore } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import Panel from 'components/ui/Panel'
 
 interface ProjectSummaryProps {
@@ -12,7 +13,11 @@ interface ProjectSummaryProps {
 
 const ProjectSummary: FC<ProjectSummaryProps> = ({ project }) => {
   const { ui } = useStore()
-  const { subscription, isLoading: loading, error } = useProjectSubscription(project.ref)
+  const {
+    data: subscription,
+    isLoading: loading,
+    error,
+  } = useProjectSubscriptionQuery({ projectRef: project.ref })
 
   const currentPeriodStart = subscription?.billing?.current_period_start ?? 0
   const currentPeriodEnd = subscription?.billing?.current_period_end ?? 0
@@ -21,13 +26,13 @@ const ProjectSummary: FC<ProjectSummaryProps> = ({ project }) => {
     if (error) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to get project subscription: ${error?.message ?? 'unknown'}`,
+        message: `Failed to get project subscription: ${(error as any)?.message ?? 'unknown'}`,
       })
     }
   }, [error])
 
   return (
-    <div className="flex w-full items-center px-6 py-3">
+    <div className="flex items-center w-full px-6 py-3">
       <div className="w-[25%]">
         <p className="text-sm">{project.name}</p>
       </div>
@@ -47,8 +52,8 @@ const ProjectSummary: FC<ProjectSummaryProps> = ({ project }) => {
           </div>
           <div className="flex w-[15%] items-center justify-end">
             <Link href={`/project/${project.ref}/settings/billing/subscription`}>
-              <a className="group flex items-center space-x-2">
-                <p className="text-xs opacity-0 transition group-hover:opacity-100">View details</p>
+              <a className="flex items-center space-x-2 group">
+                <p className="text-xs transition opacity-0 group-hover:opacity-100">View details</p>
                 <IconChevronRight strokeWidth={1.5} />
               </a>
             </Link>
@@ -69,7 +74,7 @@ const ProjectsSummary: FC<ProjectsSummaryProps> = ({ projects }) => {
       <h4>Projects at a glance</h4>
       <Panel
         title={
-          <div className="flex w-full items-center">
+          <div className="flex items-center w-full">
             <div className="w-[25%]">
               <p className="text-sm opacity-50">Name</p>
             </div>
diff --git a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
index f7893223a7e..99ab20e79f7 100644
--- a/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
+++ b/studio/components/interfaces/Organization/NewProject/FreeProjectLimitWarning.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { IconAlertCircle } from 'ui'
 import InformationBox from 'components/ui/InformationBox'
-import { MemberWithFreeProjectLimit } from 'hooks'
+import { MemberWithFreeProjectLimit } from 'data/organizations/free-project-limit-check-query'
 
 interface Props {
   membersExceededLimit: MemberWithFreeProjectLimit[]
@@ -21,7 +21,7 @@ const FreeProjectLimitWarning: FC<Props> = ({ membersExceededLimit }) => {
               The following members have reached their maximum limits for the number of active free
               tier projects within organizations where they are an administrator or owner:
             </p>
-            <ul className="list-disc pl-5">
+            <ul className="pl-5 list-disc">
               {membersExceededLimit.map((member, idx: number) => (
                 <li key={`member-${idx}`}>
                   {member.username || member.primary_email} (Limit: {member.free_project_limit} free
diff --git a/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx b/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
index f18b914c361..3f73035e896 100644
--- a/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/InviteMemberButton.tsx
@@ -1,15 +1,15 @@
 import { isNil } from 'lodash'
-import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
 import { object, string } from 'yup'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { Button, Form, IconMail, Input, Modal, Select } from 'ui'
 
 import { Member, User, Role } from 'types'
-import { checkPermissions, useOrganizationDetail, useStore } from 'hooks'
+import { checkPermissions, useParams, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useOrganizationMemberInviteCreateMutation } from 'data/organizations/organization-member-invite-create-mutation'
 
 interface Props {
   user: User
@@ -20,11 +20,9 @@ interface Props {
 
 const InviteMemberButton: FC<Props> = ({ user, members = [], roles = [], rolesAddable = [] }) => {
   const { ui } = useStore()
-  const router = useRouter()
-  const { slug } = router.query
+  const { slug } = useParams()
 
   const [isOpen, setIsOpen] = useState(false)
-  const { mutateOrgMembers } = useOrganizationDetail((slug as string) || '')
 
   const canInviteMembers = roles.some(({ id: role_id }) =>
     checkPermissions(PermissionAction.CREATE, 'user_invites', { resource: { role_id } })
@@ -37,7 +35,13 @@ const InviteMemberButton: FC<Props> = ({ user, members = [], roles = [], rolesAd
     role: string().required('Role is required'),
   })
 
+  const { mutateAsync } = useOrganizationMemberInviteCreateMutation()
+
   const onInviteMember = async (values: any, { setSubmitting, resetForm }: any) => {
+    if (!slug) {
+      throw new Error('slug is required')
+    }
+
     const existingMember = members.find(
       (member) => member.primary_email === values.email.toLowerCase()
     )
@@ -59,33 +63,27 @@ const InviteMemberButton: FC<Props> = ({ user, members = [], roles = [], rolesAd
 
     setSubmitting(true)
 
-    const response = await post(`${API_URL}/organizations/${slug}/members/invite`, {
-      invited_email: values.email.toLowerCase(),
-      owner_id: user.id,
-      role_id: roleId,
-    })
+    try {
+      const response = await mutateAsync({
+        slug,
+        invitedEmail: values.email.toLowerCase(),
+        ownerId: user.id,
+        roleId,
+      })
 
-    if (response.error) {
+      if (isNil(response)) {
+        ui.setNotification({ category: 'error', message: 'Failed to add member' })
+      } else {
+        ui.setNotification({ category: 'success', message: 'Successfully added new member.' })
+
+        setIsOpen(!isOpen)
+        resetForm({ initialValues: { ...initialValues, role: roleId } })
+      }
+    } catch (error: any) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to add member: ${response.error.message}`,
+        message: `Failed to add member: ${error.message}`,
       })
-    } else if (isNil(response)) {
-      ui.setNotification({ category: 'error', message: 'Failed to add member' })
-    } else {
-      const newMember: Member = {
-        id: 0,
-        invited_id: response.invited_id,
-        invited_at: response.invited_at,
-        primary_email: response.invited_email,
-        username: response.invited_email[0],
-        role_ids: [response.role_id],
-      }
-      mutateOrgMembers([...members, newMember])
-      ui.setNotification({ category: 'success', message: 'Successfully added new member.' })
-
-      setIsOpen(!isOpen)
-      resetForm({ initialValues: { ...initialValues, role: roleId } })
     }
 
     setSubmitting(false)
diff --git a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
index 9a01bc28c8f..a920d38809e 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MemberActions.tsx
@@ -1,15 +1,16 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { observer } from 'mobx-react-lite'
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { Button, Dropdown, IconMoreHorizontal, IconTrash } from 'ui'
 
 import { confirmAlert } from 'components/to-be-cleaned/ModalsDeprecated/ConfirmModal'
-import { checkPermissions, useOrganizationDetail, useParams, useStore } from 'hooks'
-import { delete_, post } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { checkPermissions, useParams, useStore } from 'hooks'
 import { Member, Role } from 'types'
 
+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 { isInviteExpired } from '../Organization.utils'
 import { getRolesManagementPermissions } from './TeamSettings.utils'
 
@@ -23,9 +24,6 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
   const { ui } = useStore()
   const { slug } = useParams()
   const { rolesRemovable } = getRolesManagementPermissions(roles)
-  const { mutateOrgMembers } = useOrganizationDetail(slug || '')
-
-  const [loading, setLoading] = useState(false)
 
   const isExpired = isInviteExpired(member?.invited_at ?? '')
   const isPendingInviteAcceptance = member.invited_id
@@ -39,81 +37,94 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
     resource: { role_id: roleId },
   })
 
+  const {
+    mutateAsync: deleteOrganizationMemberAsync,
+    isLoading: isOrganizationMemberDeleteLoading,
+  } = useOrganizationMemberDeleteMutation({
+    onSuccess() {
+      ui.setNotification({
+        category: 'success',
+        message: `Successfully removed ${member.primary_email}`,
+      })
+    },
+    onError(error: any) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to delete user: ${error.message}`,
+      })
+    },
+  })
+
   const handleMemberDelete = async () => {
     confirmAlert({
       title: 'Confirm to remove',
       message: `This is permanent! Are you sure you want to remove ${member.primary_email}`,
       onAsyncConfirm: async () => {
-        setLoading(true)
-
-        const response = await delete_(
-          `${API_URL}/organizations/${slug}/members/${member.gotrue_id}`
-        )
-
-        if (response.error) {
-          ui.setNotification({
-            category: 'error',
-            message: `Failed to delete user: ${response.error.message}`,
-          })
-          setLoading(false)
-        } else {
-          const updatedMembers = members.filter((m) => m.gotrue_id !== member.gotrue_id)
-
-          mutateOrgMembers(updatedMembers)
-          ui.setNotification({
-            category: 'success',
-            message: `Successfully removed ${member.primary_email}`,
-          })
+        if (!slug) {
+          throw new Error('slug is required')
         }
+        if (!member.gotrue_id) {
+          throw new Error('gotrue_id is required')
+        }
+
+        await deleteOrganizationMemberAsync({
+          slug,
+          gotrueId: member.gotrue_id,
+        })
       },
     })
   }
 
+  const {
+    mutate: createOrganizationMemberInvite,
+    isLoading: isOrganizationMemberInviteCreateLoading,
+  } = useOrganizationMemberInviteCreateMutation({
+    onSuccess() {
+      ui.setNotification({ category: 'success', message: 'Resent the invitation.' })
+    },
+    onError(error: any) {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to resend invitation: ${error.message}`,
+      })
+    },
+  })
+
   async function handleResendInvite(member: Member) {
-    setLoading(true)
+    if (!member.invited_id || !slug) return
 
     const roleId = (member?.role_ids ?? [])[0]
-    const response = await post(`${API_URL}/organizations/${slug}/members/invite`, {
-      invited_email: member.primary_email,
-      owner_id: member.invited_id,
-      role_id: roleId,
+    createOrganizationMemberInvite({
+      slug,
+      invitedEmail: member.primary_email,
+      ownerId: member.invited_id,
+      roleId: roleId,
     })
-
-    if (response.error) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to resend invitation: ${response.error.message}`,
-      })
-    } else {
-      const updatedMembers = [...members]
-      mutateOrgMembers(updatedMembers)
-      ui.setNotification({ category: 'success', message: 'Resent the invitation.' })
-    }
-    setLoading(false)
   }
 
-  async function handleRevokeInvitation(member: Member) {
-    setLoading(true)
-
-    const invitedId = member.invited_id
-    if (!invitedId) return
-
-    const response = await delete_(
-      `${API_URL}/organizations/${slug}/members/invite?invited_id=${invitedId}`,
-      {}
-    )
-
-    if (response.error) {
+  const {
+    mutate: deleteOrganizationMemberInvite,
+    isLoading: isOrganizationMemberInviteDeleteLoading,
+  } = useOrganizationMemberInviteDeleteMutation({
+    onSuccess() {
+      ui.setNotification({ category: 'success', message: 'Successfully revoked the invitation.' })
+    },
+    onError(error: any) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to revoke invitation: ${response.error.message}`,
+        message: `Failed to revoke invitation: ${error.message}`,
       })
-    } else {
-      const updatedMembers = [...members]
-      mutateOrgMembers(updatedMembers)
-      ui.setNotification({ category: 'success', message: 'Successfully revoked the invitation.' })
-    }
-    setLoading(false)
+    },
+  })
+
+  function handleRevokeInvitation(member: Member) {
+    const invitedId = member.invited_id
+    if (!invitedId || !slug) return
+
+    deleteOrganizationMemberInvite({
+      slug,
+      invitedId,
+    })
   }
 
   if (!canRemoveMember || (isPendingInviteAcceptance && !canResendInvite && !canRevokeInvite)) {
@@ -141,6 +152,11 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
     )
   }
 
+  const isLoading =
+    isOrganizationMemberDeleteLoading ||
+    isOrganizationMemberInviteDeleteLoading ||
+    isOrganizationMemberInviteCreateLoading
+
   return (
     <div className="flex items-center justify-end">
       <Dropdown
@@ -182,8 +198,8 @@ const MemberActions: FC<Props> = ({ members, member, roles }) => {
         <Button
           as="span"
           type="text"
-          disabled={loading}
-          loading={loading}
+          disabled={isLoading}
+          loading={isLoading}
           icon={<IconMoreHorizontal />}
         />
       </Dropdown>
diff --git a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
index 69422a941d9..c54088028ed 100644
--- a/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -5,15 +5,14 @@ import { observer } from 'mobx-react-lite'
 import { Badge, Button, Loading, Listbox, IconUser, Modal, IconAlertCircle } from 'ui'
 
 import { Member, Role } from 'types'
-import { useStore, useOrganizationDetail, useParams } from 'hooks'
-import { patch } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { useStore, useParams } from 'hooks'
 import { isInviteExpired, getUserDisplayName } from '../Organization.utils'
 
 import Table from 'components/to-be-cleaned/Table'
 import MemberActions from './MemberActions'
 import RolesHelperModal from './RolesHelperModal/RolesHelperModal'
 import { getRolesManagementPermissions } from './TeamSettings.utils'
+import { useOrganizationMemberUpdateMutation } from 'data/organizations/organization-member-update-mutation'
 
 interface SelectedMember extends Member {
   oldRoleId: number
@@ -32,10 +31,8 @@ const MembersView: FC<Props> = ({ searchString, roles, members }) => {
 
   const user = ui.profile
 
-  const { mutateOrgMembers } = useOrganizationDetail(slug ?? '')
   const { rolesAddable, rolesRemovable } = getRolesManagementPermissions(roles)
 
-  const [loading, setLoading] = useState(false)
   const [selectedMember, setSelectedMember] = useState<SelectedMember>()
   const [userRoleChangeModalVisible, setUserRoleChangeModalVisible] = useState(false)
 
@@ -61,36 +58,35 @@ const MembersView: FC<Props> = ({ searchString, roles, members }) => {
     return roles.find((x: any) => x.id === id)?.name
   }
 
-  const handleRoleChange = async () => {
-    if (!selectedMember) return
-
-    setLoading(true)
-    const { gotrue_id, newRoleId } = selectedMember
-    const response = await patch(`${API_URL}/organizations/${slug}/members/${gotrue_id}`, {
-      role_id: newRoleId,
-    })
-
-    if (response.error) {
-      ui.setNotification({
-        category: 'error',
-        message: `Failed to update role for ${getUserDisplayName(selectedMember)}`,
-      })
-    } else {
-      const updatedMembers = members.map((member: Member) => {
-        if (member.gotrue_id === selectedMember.gotrue_id) {
-          return { ...member, role_ids: [newRoleId] }
-        } else {
-          return member
-        }
-      })
-      mutateOrgMembers(updatedMembers)
+  const { isLoading, mutate } = useOrganizationMemberUpdateMutation({
+    onSuccess() {
       ui.setNotification({
         category: 'success',
         message: `Successfully updated role for ${getUserDisplayName(selectedMember)}`,
       })
+    },
+    onError() {
+      ui.setNotification({
+        category: 'error',
+        message: `Failed to update role for ${getUserDisplayName(selectedMember)}`,
+      })
+    },
+  })
+
+  const handleRoleChange = async () => {
+    if (!selectedMember) return
+
+    const { gotrue_id, newRoleId } = selectedMember
+
+    if (!slug) {
+      throw new Error('slug is required')
+    }
+    if (!gotrue_id) {
+      throw new Error('gotrue_id is required')
     }
 
-    setLoading(false)
+    mutate({ slug, gotrueId: gotrue_id, roleId: newRoleId })
+
     setUserRoleChangeModalVisible(false)
   }
 
@@ -145,7 +141,7 @@ const MembersView: FC<Props> = ({ searchString, roles, members }) => {
                         <div className="flex items-center space-x-4">
                           <div>
                             {x.invited_id ? (
-                              <span className="flex rounded-full border-2 border-border-secondary-light p-2 dark:border-border-secondary-dark">
+                              <span className="flex p-2 border-2 rounded-full border-border-secondary-light dark:border-border-secondary-dark">
                                 <IconUser size={20} strokeWidth={2} />
                               </span>
                             ) : isEmailUser ? (
@@ -157,7 +153,7 @@ const MembersView: FC<Props> = ({ searchString, roles, members }) => {
                                 src={`https://github.com/${x.username}.png?size=80`}
                                 width="40"
                                 height="40"
-                                className="rounded-full border"
+                                className="border rounded-full"
                               />
                             )}
                           </div>
@@ -312,8 +308,8 @@ const MembersView: FC<Props> = ({ searchString, roles, members }) => {
                 block
                 type="warning"
                 size="medium"
-                disabled={loading}
-                loading={loading}
+                disabled={isLoading}
+                loading={isLoading}
                 onClick={() => handleRoleChange()}
               >
                 Confirm
diff --git a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
index e3df3e859c9..98212c2153a 100644
--- a/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
+++ b/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -3,13 +3,15 @@ import { observer } from 'mobx-react-lite'
 import { Button, Input, IconSearch } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
-import { useStore, useFlag, useOrganizationRoles, useOrganizationDetail, useParams } from 'hooks'
+import { useStore, useParams } from 'hooks'
 import { post } 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'
 
 const TeamSettings = () => {
   const { ui } = useStore()
@@ -18,8 +20,11 @@ const TeamSettings = () => {
   const user = ui.profile
   const isOwner = ui.selectedOrganization?.is_owner
 
-  const { members } = useOrganizationDetail(slug || '')
-  const { roles } = useOrganizationRoles(slug)
+  const { data: detailData } = useOrganizationDetailQuery({ slug })
+  const { data: rolesData } = useOrganizationRolesQuery({ slug })
+
+  const members = detailData?.members ?? []
+  const roles = rolesData?.roles ?? []
 
   const { rolesAddable } = getRolesManagementPermissions(roles)
 
diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx
index f0cf2d3e2c4..006ee0e17d5 100644
--- a/studio/components/interfaces/Reports/Reports.utils.tsx
+++ b/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -65,7 +65,7 @@ export const usePresetReport = (hooks: PresetHookResult[]) => {
   const isLoading = data.map((datum) => datum.isLoading).some((v) => v)
 
   const Layout: React.FC<{ title: string }> = ({ title, children }) => (
-    <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="flex flex-col gap-4 px-5 py-6 mx-auto 1xl:px-28 lg:px-16 xl:px-24 2xl:px-32">
       <h1 className="text-2xl text-scale-1200">{title}</h1>
       <div className="flex flex-row justify-between">
         <DatePickers
diff --git a/studio/components/interfaces/Settings/API/JWTSettings.tsx b/studio/components/interfaces/Settings/API/JWTSettings.tsx
index d01d9f1fedc..f05341b37cf 100644
--- a/studio/components/interfaces/Settings/API/JWTSettings.tsx
+++ b/studio/components/interfaces/Settings/API/JWTSettings.tsx
@@ -1,5 +1,4 @@
 import { FC, useState, Dispatch, SetStateAction } from 'react'
-import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import {
   Alert,
@@ -24,27 +23,22 @@ import {
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { uuidv4 } from 'lib/helpers'
-import {
-  useStore,
-  useJwtSecretUpdateStatus,
-  useProjectPostgrestConfig,
-  checkPermissions,
-} from 'hooks'
-import { API_URL } from 'lib/constants'
+import { useStore, checkPermissions, useParams } from 'hooks'
+import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
+import { useJwtSecretUpdateMutation } from 'data/config/jwt-secret-update-mutation'
+import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import {
   JWT_SECRET_UPDATE_ERROR_MESSAGES,
   JWT_SECRET_UPDATE_PROGRESS_MESSAGES,
 } from './API.constants'
 import Panel from 'components/ui/Panel'
 import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
-import { patch } from 'lib/common/fetch'
 
 interface Props {}
 
 const JWTSettings: FC<Props> = ({}) => {
   const { ui } = useStore()
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const [customToken, setCustomToken] = useState<string>('')
   const [showCustomTokenInput, setShowCustomTokenInput] = useState(false)
@@ -59,41 +53,39 @@ const JWTSettings: FC<Props> = ({}) => {
     'queue_job.projects.update_jwt'
   )
 
-  const {
-    changeTrackingId,
-    jwtSecretUpdateError,
-    jwtSecretUpdateProgress,
-    jwtSecretUpdateStatus,
-    mutateJwtSecretUpdateStatus,
-  }: any = useJwtSecretUpdateStatus(ref)
-
-  const { config, isError } = useProjectPostgrestConfig(ref as string | undefined)
+  const { data } = useJwtSecretUpdatingStatusQuery({ projectRef })
+  const { data: config, isError } = useProjectPostgrestConfigQuery({ projectRef })
 
   const { Failed, Updated, Updating } = JwtSecretUpdateStatus
 
-  const isJwtSecretUpdateFailed = jwtSecretUpdateStatus === Failed
+  const isJwtSecretUpdateFailed = data?.jwtSecretUpdateStatus === Failed
   const isNotUpdatingJwtSecret =
-    jwtSecretUpdateStatus === undefined || jwtSecretUpdateStatus === Updated
-  const isUpdatingJwtSecret = jwtSecretUpdateStatus === Updating
+    data?.jwtSecretUpdateStatus === undefined || data?.jwtSecretUpdateStatus === Updated
+  const isUpdatingJwtSecret = data?.jwtSecretUpdateStatus === Updating
   const jwtSecretUpdateErrorMessage =
-    JWT_SECRET_UPDATE_ERROR_MESSAGES[jwtSecretUpdateError as JwtSecretUpdateError]
+    JWT_SECRET_UPDATE_ERROR_MESSAGES[data?.jwtSecretUpdateError as JwtSecretUpdateError]
   const jwtSecretUpdateProgressMessage =
-    JWT_SECRET_UPDATE_PROGRESS_MESSAGES[jwtSecretUpdateProgress as JwtSecretUpdateProgress]
+    JWT_SECRET_UPDATE_PROGRESS_MESSAGES[data?.jwtSecretUpdateProgress as JwtSecretUpdateProgress]
+
+  const { mutateAsync: updateJwt } = useJwtSecretUpdateMutation()
 
   async function handleJwtSecretUpdate(
     jwt_secret: string,
     setModalVisibility: Dispatch<SetStateAction<boolean>>
   ) {
+    if (!projectRef) return
+
     setIsSubmittingJwtSecretUpdateRequest(true)
     try {
       const trackingId = uuidv4()
-      const res = await patch(`${API_URL}/projects/${ref}/config/secrets`, {
-        jwt_secret,
-        change_tracking_id: trackingId,
+      await updateJwt({
+        projectRef,
+        jwtSecret: jwt_secret,
+        changeTrackingId: trackingId,
       })
-      if (res.error) throw res.error
+
       setModalVisibility(false)
-      mutateJwtSecretUpdateStatus()
+
       ui.setNotification({
         category: 'info',
         message:
@@ -111,7 +103,7 @@ const JWTSettings: FC<Props> = ({}) => {
       <Panel title={<h5 className="mb-0">JWT Settings</h5>}>
         <Panel.Content className="space-y-6 border-t border-panel-border-interior-light dark:border-panel-border-interior-dark">
           {isError ? (
-            <div className="flex items-center justify-center space-x-2 py-8">
+            <div className="flex items-center justify-center py-8 space-x-2">
               <IconAlertCircle size={16} strokeWidth={1.5} />
               <p className="text-sm text-scale-1100">Failed to retrieve JWT settings</p>
             </div>
@@ -139,7 +131,7 @@ const JWTSettings: FC<Props> = ({}) => {
                 layout="horizontal"
               />
               <div className="space-y-3">
-                <div className="rounded-md border bg-bg-alt-light p-3 px-6 shadow-sm dark:border-dark dark:bg-bg-alt-dark">
+                <div className="p-3 px-6 border rounded-md shadow-sm bg-bg-alt-light dark:border-dark dark:bg-bg-alt-dark">
                   {isUpdatingJwtSecret ? (
                     <div className="flex items-center space-x-2">
                       <IconLoader className="animate-spin" size={14} />
@@ -149,7 +141,7 @@ const JWTSettings: FC<Props> = ({}) => {
                     </div>
                   ) : (
                     <div className="w-full space-y-2">
-                      <div className="flex w-full items-center justify-between">
+                      <div className="flex items-center justify-between w-full">
                         <div className="flex flex-col space-y-1">
                           <p className="text-sm">Generate a new JWT secret</p>
                           <p className="text-sm opacity-50">
@@ -223,7 +215,7 @@ const JWTSettings: FC<Props> = ({}) => {
                   <Alert withIcon variant="warning" title="Failed to update JWT secret">
                     Please try again. If the failures persist, please contact Supabase support with
                     the following details: <br />
-                    Change tracking ID: {changeTrackingId} <br />
+                    Change tracking ID: {data?.changeTrackingId} <br />
                     Error message: {jwtSecretUpdateErrorMessage}
                   </Alert>
                 ) : canGenerateNewJWTSecret ? (
@@ -283,7 +275,7 @@ const JWTSettings: FC<Props> = ({}) => {
         }
       >
         <Modal.Content>
-          <div className="space-y-2 py-4">
+          <div className="py-4 space-y-2">
             <p className="text-sm text-scale-1100">
               Create a custom JWT secret. Make sure it is a strong combination of characters that
               cannot be guessed easily.
@@ -302,7 +294,7 @@ const JWTSettings: FC<Props> = ({}) => {
               label="Custom JWT secret"
               descriptionText="Minimally 32 characters long, '@' and '$' are not allowed."
               actions={
-                <div className="mr-1 flex items-center justify-center">
+                <div className="flex items-center justify-center mr-1">
                   <Button
                     type="default"
                     icon={showCustomTokenInput ? <IconEye /> : <IconEyeOff />}
diff --git a/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 4b9f945dff6..1d3f6d74d74 100644
--- a/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -1,13 +1,12 @@
 import { useContext, FC, useEffect } from 'react'
 import { indexOf } from 'lodash'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { Input, Form, IconAlertCircle, InputNumber } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions, useStore, useProjectPostgrestConfig } from 'hooks'
-import { API_URL } from 'lib/constants'
-import { patch } from 'lib/common/fetch'
+import { checkPermissions, useStore, useParams } from 'hooks'
+import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { useProjectPostgrestConfigUpdateMutation } from 'data/config/project-postgrest-config-update-mutation'
 import MultiSelect from 'components/ui/MultiSelect'
 import { PageContext } from 'pages/project/[ref]/settings/api'
 
@@ -26,11 +25,10 @@ const PostgrestConfig: FC<Props> = ({}) => {
   const { ui } = useStore()
   const { meta } = PageState
 
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const formId = 'project-postgres-config'
-  const { config, isError, isLoading } = useProjectPostgrestConfig(ref as string | undefined)
+  const { data: config, isError } = useProjectPostgrestConfigQuery({ projectRef })
 
   const initialValues = {
     db_schema: '',
@@ -43,14 +41,20 @@ const PostgrestConfig: FC<Props> = ({}) => {
     'custom_config_postgrest'
   )
 
-  const updateConfig = async (updatedConfig: any) => {
+  const { mutateAsync: updatePostgrestConfig } = useProjectPostgrestConfigUpdateMutation()
+
+  const updateConfig = async (updatedConfig: typeof initialValues) => {
+    if (!projectRef) return
+
     try {
-      const response = await patch(`${API_URL}/projects/${ref}/config/postgrest`, updatedConfig)
-      if (response.error) {
-        throw response.error
-      } else {
-        ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
-      }
+      await updatePostgrestConfig({
+        projectRef,
+        dbSchema: updatedConfig.db_schema,
+        maxRows: updatedConfig.max_rows,
+        dbExtraSearchPath: updatedConfig.db_extra_search_path,
+      })
+
+      ui.setNotification({ category: 'success', message: 'Successfully saved settings' })
     } catch (error: any) {
       ui.setNotification({
         error,
@@ -86,7 +90,7 @@ const PostgrestConfig: FC<Props> = ({}) => {
         const hasChanges = JSON.stringify(values) !== JSON.stringify(initialValues)
 
         useEffect(() => {
-          if (!isLoading && config) {
+          if (config) {
             const values = {
               db_schema: config.db_schema,
               max_rows: config.max_rows,
@@ -94,7 +98,7 @@ const PostgrestConfig: FC<Props> = ({}) => {
             }
             resetForm({ values, initialValues: values })
           }
-        }, [isLoading])
+        }, [config])
 
         return (
           <>
@@ -102,7 +106,7 @@ const PostgrestConfig: FC<Props> = ({}) => {
               disabled={true}
               header={<p>API settings</p>}
               footer={
-                <div className="flex py-4 px-8">
+                <div className="flex px-8 py-4">
                   <FormActions
                     form={formId}
                     isSubmitting={isSubmitting}
@@ -119,7 +123,7 @@ const PostgrestConfig: FC<Props> = ({}) => {
               }
             >
               {isError ? (
-                <div className="flex items-center justify-center space-x-2 py-8">
+                <div className="flex items-center justify-center py-8 space-x-2">
                   <IconAlertCircle size={16} strokeWidth={1.5} />
                   <p className="text-sm text-scale-1100">Failed to retrieve API settings</p>
                 </div>
@@ -142,8 +146,8 @@ const PostgrestConfig: FC<Props> = ({}) => {
                           emptyMessage={
                             <>
                               <IconAlertCircle strokeWidth={2} />
-                              <div className="mt-2 flex flex-col text-center">
-                                <p className="align-center text-sm">
+                              <div className="flex flex-col mt-2 text-center">
+                                <p className="text-sm align-center">
                                   No schema available to choose
                                 </p>
                                 <p className="text-xs opacity-50">
diff --git a/studio/components/interfaces/Settings/API/ServiceList.tsx b/studio/components/interfaces/Settings/API/ServiceList.tsx
index 3edef681a27..3209ae9ae15 100644
--- a/studio/components/interfaces/Settings/API/ServiceList.tsx
+++ b/studio/components/interfaces/Settings/API/ServiceList.tsx
@@ -1,35 +1,33 @@
-import { FC, useEffect, useRef } from 'react'
-import { useRouter } from 'next/router'
+import { useQueryClient } from '@tanstack/react-query'
 import { JwtSecretUpdateError, JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
+import { useEffect, useRef } from 'react'
 import { IconAlertCircle, Input } from 'ui'
 
-import { configKeys } from 'data/config/keys'
-import { useQueryClient } from '@tanstack/react-query'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
-import { useStore, useProjectPostgrestConfig, useJwtSecretUpdateStatus } from 'hooks'
+import { useParams, useStore } from 'hooks'
+import { useJwtSecretUpdatingStatusQuery } from 'data/config/jwt-secret-updating-status-query'
 
+import { useProjectApiQuery } from 'data/config/project-api-query'
+import { configKeys } from 'data/config/keys'
 import Panel from 'components/ui/Panel'
-import PostgrestConfig from './PostgrestConfig'
 import { DisplayApiSettings } from 'components/ui/ProjectSettings'
 import { JWT_SECRET_UPDATE_ERROR_MESSAGES } from './API.constants'
-import { IS_PLATFORM } from 'lib/constants'
 import JWTSettings from './JWTSettings'
+import PostgrestConfig from './PostgrestConfig'
 
-interface Props {
-  projectRef: string
-}
-
-const ServiceList: FC<Props> = ({ projectRef }) => {
+const ServiceList = () => {
   const { ui } = useStore()
-  const router = useRouter()
-  const { ref } = router.query
-  const queryClient = useQueryClient()
+  const client = useQueryClient()
 
-  const { data: settings, isError } = useProjectSettingsQuery({ projectRef: ref as string })
-  const { mutateConfig } = useProjectPostgrestConfig(ref as string | undefined)
-  const { jwtSecretUpdateError, jwtSecretUpdateStatus }: any = useJwtSecretUpdateStatus(ref)
+  const { ref: projectRef } = useParams()
+  const { data: settings, isError } = useProjectApiQuery({
+    projectRef,
+  })
 
-  const previousJwtSecretUpdateStatus = useRef()
+  const { data } = useJwtSecretUpdatingStatusQuery({ projectRef })
+  const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus
+  const jwtSecretUpdateError = data?.jwtSecretUpdateError
+
+  const previousJwtSecretUpdateStatus = useRef<JwtSecretUpdateStatus>()
   const { Failed, Updated, Updating } = JwtSecretUpdateStatus
   const jwtSecretUpdateErrorMessage =
     JWT_SECRET_UPDATE_ERROR_MESSAGES[jwtSecretUpdateError as JwtSecretUpdateError]
@@ -38,8 +36,10 @@ const ServiceList: FC<Props> = ({ projectRef }) => {
     if (previousJwtSecretUpdateStatus.current === Updating) {
       switch (jwtSecretUpdateStatus) {
         case Updated:
-          mutateConfig()
-          queryClient.invalidateQueries({ queryKey: configKeys.settings(projectRef) })
+          client.invalidateQueries(configKeys.api(projectRef))
+          client.invalidateQueries(configKeys.settings(projectRef))
+          client.invalidateQueries(configKeys.postgrest(projectRef))
+
           ui.setNotification({ category: 'success', message: 'Successfully updated JWT secret' })
           break
         case Failed:
@@ -60,12 +60,12 @@ const ServiceList: FC<Props> = ({ projectRef }) => {
 
   return (
     <div>
-      <h3 className="text-scale-1200 mb-6 text-xl">API Settings</h3>
+      <h3 className="mb-6 text-xl text-scale-1200">API Settings</h3>
       <section>
         <Panel title={<h5 className="mb-0">Project URL</h5>}>
           <Panel.Content>
             {isError ? (
-              <div className="flex items-center justify-center space-x-2 py-4">
+              <div className="flex items-center justify-center py-4 space-x-2">
                 <IconAlertCircle size={16} strokeWidth={1.5} />
                 <p className="text-sm text-scale-1100">Failed to retrieve project URL</p>
               </div>
diff --git a/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
index 5ce932a2488..111a003258a 100644
--- a/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
+++ b/studio/components/interfaces/Settings/Database/ConnectionPooling.tsx
@@ -1,4 +1,4 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState, useEffect, Fragment } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useStore } from 'hooks'
 import { pluckObjectFields } from 'lib/helpers'
@@ -11,6 +11,7 @@ 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'
 
 interface Props {}
 
@@ -32,7 +33,32 @@ const ConnectionPooling: FC<Props> = () => {
     setIsLoading(false)
   }
 
-  if (isLoading) return <Loading />
+  if (isLoading) {
+    return (
+      <Panel
+        title={
+          <h5 key="panel-title" className="mb-0">
+            Connection Pooling
+          </h5>
+        }
+      >
+        <Panel.Content className="space-y-8">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Fragment key={i}>
+              <div className="grid gap-2 items-center md:grid md:grid-cols-12 md:gap-x-4 w-full">
+                <ShimmeringLoader className="h-4 w-1/3 col-span-4" delayIndex={i} />
+                <ShimmeringLoader className="h-8 w-full col-span-8" delayIndex={i} />
+              </div>
+              <Divider light />
+            </Fragment>
+          ))}
+
+          <ShimmeringLoader className="h-8 w-full" />
+        </Panel.Content>
+      </Panel>
+    )
+  }
+
   if (poolingConfiguration.error) {
     return (
       <div className="p-4">
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
index c011709dceb..261746b733d 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
 import { IconAlertCircle } from 'ui'
 
 import { useParams, useStore } from 'hooks'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
+import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 import Panel from 'components/ui/Panel'
 import { FormHeader } from 'components/ui/Forms'
@@ -20,7 +20,7 @@ const CustomDomainConfig = () => {
   const { ref } = useParams()
 
   const tier = ui.selectedProject?.subscription_tier
-  const { isLoading: isSettingsLoading, data: settings } = useProjectSettingsQuery({
+  const { isLoading: isSettingsLoading, data: settings } = useProjectApiQuery({
     projectRef: ref,
   })
 
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
index 3e6c8b0c35c..bcaac757931 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainVerify.tsx
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'
 import { Alert, Button, IconAlertCircle, IconExternalLink, IconHelpCircle, IconRefreshCw } from 'ui'
 
 import { useStore } from 'hooks'
-import { ProjectSettingsResponse } from 'data/config/project-settings-query'
+import { ProjectApiResponse } from 'data/config/project-api-query'
 import { CustomDomainResponse } from 'data/custom-domains/custom-domains-query'
 import { useCustomDomainDeleteMutation } from 'data/custom-domains/custom-domains-delete-mutation'
 import { useCustomDomainReverifyMutation } from 'data/custom-domains/custom-domains-reverify-mutation'
@@ -15,7 +15,7 @@ import InformationBox from 'components/ui/InformationBox'
 export type CustomDomainVerifyProps = {
   projectRef?: string
   customDomain: CustomDomainResponse
-  settings?: ProjectSettingsResponse
+  settings?: ProjectApiResponse
 }
 
 const CustomDomainVerify = ({ projectRef, customDomain, settings }: CustomDomainVerifyProps) => {
diff --git a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
index 1bf16aaff92..398f62b9ec3 100644
--- a/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
+++ b/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainsConfigureHostname.tsx
@@ -12,7 +12,7 @@ import {
   FormSectionContent,
   FormSectionLabel,
 } from 'components/ui/Forms'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
+import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useCustomDomainCreateMutation } from 'data/custom-domains/custom-domains-create-mutation'
 
 const schema = yup.object({
@@ -23,7 +23,7 @@ const CustomDomainsConfigureHostname = () => {
   const { ui } = useStore()
   const { ref } = useParams()
   const { mutateAsync: createCustomDomain } = useCustomDomainCreateMutation()
-  const { data: settings } = useProjectSettingsQuery({ projectRef: ref })
+  const { data: settings } = useProjectApiQuery({ projectRef: ref })
 
   const FORM_ID = 'custom-domains-form'
   const endpoint = settings?.autoApiService.endpoint
diff --git a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
index 0eac58199bf..543c32821d8 100644
--- a/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
@@ -20,10 +20,10 @@ import PreviewFilterPanel from 'components/interfaces/Settings/Logs/PreviewFilte
 import { LOGS_TABLES } from './Logs.constants'
 import ShimmerLine from 'components/ui/ShimmerLine'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
-import { useProjectSubscription } from 'hooks'
 import { useUpgradePrompt } from 'hooks/misc/useUpgradePrompt'
-import { StripeProduct } from 'components/interfaces/Billing'
 import UpgradePrompt from './UpgradePrompt'
+import { useParams } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 
 /**
  * Acts as a container component for the entire log display
@@ -50,15 +50,15 @@ export const LogsPreviewer: React.FC<Props> = ({
   tableName,
 }) => {
   const router = useRouter()
-  const { s, ite, its, ref } = router.query
+  const { s, ite, its } = useParams()
   const [showChart, setShowChart] = useState(true)
-  const { subscription } = useProjectSubscription(ref as string)
+  const { data: subscription } = useProjectSubscriptionQuery({ projectRef })
   const tier = subscription?.tier
 
   const table = !tableName ? LOGS_TABLES[queryType] : tableName
 
   const [
-    { error, logData, params, newCount, filters, isLoading, eventChartData },
+    { error, logData, params, newCount, filters, isLoading, eventChartData, isLoadingOlder },
     { loadOlder, setFilters, refresh, setParams },
   ] = useLogsPreview(projectRef as string, table, filterOverride)
 
@@ -152,7 +152,7 @@ export const LogsPreviewer: React.FC<Props> = ({
   }
 
   return (
-    <div className="flex h-full flex-grow flex-col">
+    <div className="flex flex-col flex-grow h-full">
       <PreviewFilterPanel
         csvData={logData}
         isLoading={isLoading}
@@ -205,7 +205,7 @@ export const LogsPreviewer: React.FC<Props> = ({
           )}
         </div>
       </div>
-      <div className="relative flex flex-grow flex-col pt-4">
+      <div className="relative flex flex-col flex-grow pt-4">
         <ShimmerLine active={isLoading} />
         <LoadingOpacity active={isLoading}>
           <LogTable
@@ -221,10 +221,16 @@ export const LogsPreviewer: React.FC<Props> = ({
         </LoadingOpacity>
         {!error && (
           <div className="flex flex-row justify-between p-2">
-            <Button onClick={loadOlder} icon={<IconRewind />} type="default">
+            <Button
+              onClick={loadOlder}
+              icon={<IconRewind />}
+              type="default"
+              loading={isLoadingOlder}
+              disabled={isLoadingOlder}
+            >
               Load older
             </Button>
-            <div className="mt-2 flex flex-row justify-end">
+            <div className="flex flex-row justify-end mt-2">
               <UpgradePrompt show={showUpgradePrompt} setShowUpgradePrompt={setShowUpgradePrompt} />
             </div>
           </div>
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
index bd1a306c5f9..ede0524c0a3 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.tsx
@@ -1,13 +1,14 @@
 import { FC, useEffect } from 'react'
 import { Badge, Button, IconAlertCircle, IconInfo, Loading } from 'ui'
 
-import { useStore, useProjectUsage } from 'hooks'
+import { useStore } from 'hooks'
 import { formatBytes } from 'lib/helpers'
 import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import SparkBar from 'components/ui/SparkBar'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import InformationBox from 'components/ui/InformationBox'
 import { USAGE_BASED_PRODUCTS } from 'components/interfaces/Billing/Billing.constants'
+import { ProjectUsageResponse, useProjectUsageQuery } from 'data/usage/project-usage-query'
 import { useRouter } from 'next/router'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
@@ -17,7 +18,7 @@ interface Props {
 
 const ProjectUsage: FC<Props> = ({ projectRef }) => {
   const { ui } = useStore()
-  const { usage, error, isLoading } = useProjectUsage(projectRef)
+  const { data: usage, error, isLoading } = useProjectUsageQuery({ projectRef })
   const router = useRouter()
 
   const subscriptionTier = ui.selectedProject?.subscription_tier
@@ -43,7 +44,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
     if (error) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to get project's usage data: ${error?.message ?? 'unknown'}`,
+        message: `Failed to get project's usage data: ${(error as any)?.message ?? 'unknown'}`,
       })
     }
   }, [error])
@@ -68,8 +69,8 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
               showUsageExceedMessage &&
               product.features
                 .map((feature) => {
-                  const featureUsage = usage[feature.key]
-                  return featureUsage.usage / featureUsage.limit > 1
+                  const featureUsage = usage[feature.key as keyof ProjectUsageResponse]
+                  return (featureUsage.usage ?? 0) / featureUsage.limit > 1
                 })
                 .some((x) => x === true)
 
@@ -99,23 +100,23 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                         </div>
                       </th>
                       {/* Plan Limits */}
-                      <th className="hidden p-3 text-left text-xs font-medium leading-4 text-gray-400 lg:table-cell">
+                      <th className="hidden p-3 text-xs font-medium leading-4 text-left text-gray-400 lg:table-cell">
                         {isExceededUsage && <Badge color="red">Exceeded usage</Badge>}
                       </th>
                       {/* Usage */}
-                      <th className="p-3 text-left text-xs font-medium leading-4 text-gray-400" />
+                      <th className="p-3 text-xs font-medium leading-4 text-left text-gray-400" />
                     </tr>
                   </thead>
 
                   {/* Line items */}
                   {usage === undefined ? (
-                    <div className="w-96 px-4 pt-1 pb-4">
+                    <div className="px-4 pt-1 pb-4 w-96">
                       <ShimmeringLoader />
                     </div>
                   ) : (
                     <tbody>
                       {product.features.map((feature) => {
-                        const featureUsage = usage[feature.key]
+                        const featureUsage = usage[feature.key as keyof ProjectUsageResponse]
                         const usageValue = featureUsage.usage || 0
                         const usageRatio = usageValue / featureUsage.limit
                         const isApproaching = usageRatio >= USAGE_APPROACHING_THRESHOLD
@@ -125,7 +126,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                         let usageElement
                         if (!isAvailableInPlan) {
                           usageElement = (
-                            <div className="flex justify-between items-center">
+                            <div className="flex items-center justify-between">
                               <span>Not included in {planName} tier</span>
                               <Button
                                 size="tiny"
@@ -175,7 +176,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                             key={feature.title}
                             className="border-t border-panel-border-light dark:border-panel-border-dark"
                           >
-                            <td className="whitespace-nowrap px-6 py-3 text-sm text-scale-1200">
+                            <td className="px-6 py-3 text-sm whitespace-nowrap text-scale-1200">
                               {feature.title}
                               {feature.tooltip && (
                                 <Tooltip.Root delayDuration={0}>
@@ -203,7 +204,7 @@ const ProjectUsage: FC<Props> = ({ projectRef }) => {
                             {ui.selectedProject?.subscription_tier !== undefined && (
                               <>
                                 {showUsageExceedMessage && (
-                                  <td className="hidden w-1/5 whitespace-nowrap p-3 text-sm text-scale-1200 lg:table-cell">
+                                  <td className="hidden w-1/5 p-3 text-sm whitespace-nowrap text-scale-1200 lg:table-cell">
                                     {isAvailableInPlan ? (
                                       <>{(usageRatio * 100).toFixed(2)} %</>
                                     ) : (
diff --git a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
index aba20873737..4c74125b378 100644
--- a/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
+++ b/studio/components/interfaces/Settings/ProjectUsageBars/ProjectUsageMinimal.tsx
@@ -1,7 +1,8 @@
 import { FC } from 'react'
 import { Loading } from 'ui'
 
-import { useProjectSubscription, useProjectUsage } from 'hooks'
+import { ProjectUsageResponse, useProjectUsageQuery } from 'data/usage/project-usage-query'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { formatBytes } from 'lib/helpers'
 import { PRICING_TIER_PRODUCT_IDS, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
 import SparkBar from 'components/ui/SparkBar'
@@ -15,8 +16,10 @@ interface ProjectUsageMinimalProps {
 // [Joshen] This is currently not being used anywhere as of 011122
 
 const ProjectUsageMinimal: FC<ProjectUsageMinimalProps> = ({ projectRef, filter }) => {
-  const { usage, error: usageError, isLoading } = useProjectUsage(projectRef)
-  const { subscription, error: subscriptionError } = useProjectSubscription(projectRef)
+  const { data: usage, error: usageError, isLoading } = useProjectUsageQuery({ projectRef })
+  const { data: subscription, error: subscriptionError } = useProjectSubscriptionQuery({
+    projectRef,
+  })
 
   if (
     subscription?.tier?.supabase_prod_id === PRICING_TIER_PRODUCT_IDS.PAYG ||
@@ -38,8 +41,8 @@ const ProjectUsageMinimal: FC<ProjectUsageMinimalProps> = ({ projectRef, filter
       {usage && (
         <div className="space-y-8">
           {product.features.map((feature) => {
-            const featureUsage = usage[feature.key]
-            const usageRatio = featureUsage.usage / featureUsage.limit
+            const featureUsage = usage[feature.key as keyof ProjectUsageResponse]
+            const usageRatio = (featureUsage.usage ?? 0) / featureUsage.limit
             const isApproaching = usageRatio >= USAGE_APPROACHING_THRESHOLD
             const isExceeded = usageRatio >= 1
 
@@ -51,7 +54,7 @@ const ProjectUsageMinimal: FC<ProjectUsageMinimalProps> = ({ projectRef, filter
                   barClass={`${
                     isExceeded ? 'bg-red-900' : isApproaching ? 'bg-yellow-900' : 'bg-brand-900'
                   }`}
-                  value={featureUsage.usage}
+                  value={featureUsage.usage ?? 0}
                   max={featureUsage.limit}
                   labelBottom={formatBytes(featureUsage.usage)}
                   labelTop={formatBytes(featureUsage.limit)}
diff --git a/studio/components/interfaces/SignIn/SignInForm.tsx b/studio/components/interfaces/SignIn/SignInForm.tsx
index ea8a82a4e55..d9adb6e4b6a 100644
--- a/studio/components/interfaces/SignIn/SignInForm.tsx
+++ b/studio/components/interfaces/SignIn/SignInForm.tsx
@@ -1,10 +1,10 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
+import { useQueryClient } from '@tanstack/react-query'
 import { useStore } from 'hooks'
 import { usePushNext } from 'hooks/misc/useAutoAuthRedirect'
 import { auth } from 'lib/gotrue'
 import Link from 'next/link'
 import { useRef, useState } from 'react'
-import { useSWRConfig } from 'swr'
 import { Button, Form, Input } from 'ui'
 import { object, string } from 'yup'
 
@@ -16,7 +16,7 @@ const signInSchema = object({
 const SignInForm = () => {
   const { ui } = useStore()
   const pushNext = usePushNext()
-  const { cache } = useSWRConfig()
+  const queryClient = useQueryClient()
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const captchaRef = useRef<HCaptcha>(null)
@@ -46,9 +46,7 @@ const SignInForm = () => {
         message: `Signed in successfully!`,
       })
 
-      // .clear() does actually exist on the cache object, but it's not in the types 🤦🏻
-      // @ts-ignore
-      cache.clear()
+      await queryClient.resetQueries()
 
       await pushNext()
     } else {
@@ -105,7 +103,7 @@ const SignInForm = () => {
 
               {/* positioned using absolute instead of labelOptional prop so tabbing between inputs works smoothly */}
               <Link href="/forgot-password">
-                <a className="text-scale-900 text-sm absolute top-0 right-0">Forgot Password?</a>
+                <a className="absolute top-0 right-0 text-sm text-scale-900">Forgot Password?</a>
               </Link>
             </div>
 
diff --git a/studio/components/interfaces/SignIn/SignInSSOForm.tsx b/studio/components/interfaces/SignIn/SignInSSOForm.tsx
index cd70112b6b6..3c26d2dc1d6 100644
--- a/studio/components/interfaces/SignIn/SignInSSOForm.tsx
+++ b/studio/components/interfaces/SignIn/SignInSSOForm.tsx
@@ -1,8 +1,8 @@
 import HCaptcha from '@hcaptcha/react-hcaptcha'
+import { useQueryClient } from '@tanstack/react-query'
 import { useStore } from 'hooks'
 import { auth, getReturnToPath } from 'lib/gotrue'
 import { useRef, useState } from 'react'
-import { useSWRConfig } from 'swr'
 import { Button, Form, Input } from 'ui'
 import { object, string } from 'yup'
 
@@ -12,12 +12,12 @@ const signInSchema = object({
 
 const SignInSSOForm = () => {
   const { ui } = useStore()
-  const { cache } = useSWRConfig()
+  const queryClient = useQueryClient()
 
   const [captchaToken, setCaptchaToken] = useState<string | null>(null)
   const captchaRef = useRef<HCaptcha>(null)
 
-  const onSignIn = async ({ email, password }: { email: string; password: string }) => {
+  const onSignIn = async ({ email }: { email: string }) => {
     const toastId = ui.setNotification({
       category: 'loading',
       message: `Signing in...`,
@@ -42,9 +42,7 @@ const SignInSSOForm = () => {
     })
 
     if (!error) {
-      // .clear() does actually exist on the cache object, but it's not in the types 🤦🏻
-      // @ts-ignore
-      cache.clear()
+      await queryClient.resetQueries()
 
       if (data) {
         // redirect to SSO identity provider page
diff --git a/studio/components/layouts/AccountLayout/AccountLayout.tsx b/studio/components/layouts/AccountLayout/AccountLayout.tsx
index 10ddf248e05..3baa26f9994 100644
--- a/studio/components/layouts/AccountLayout/AccountLayout.tsx
+++ b/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -5,9 +5,10 @@ import { observer } from 'mobx-react-lite'
 
 import { auth, STORAGE_KEY } from 'lib/gotrue'
 import { useStore, withAuth, useFlag } from 'hooks'
-import { API_URL, IS_PLATFORM } from 'lib/constants'
+import { IS_PLATFORM } from 'lib/constants'
 import WithSidebar from './WithSidebar'
 import { SidebarSection } from './AccountLayout.types'
+import { useQueryClient } from '@tanstack/react-query'
 
 interface Props {
   title: string
@@ -21,6 +22,7 @@ interface Props {
 const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
   const router = useRouter()
   const { app, ui } = useStore()
+  const queryClient = useQueryClient()
 
   const ongoingIncident = useFlag('ongoingIncident')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
@@ -28,7 +30,8 @@ const AccountLayout: FC<Props> = ({ children, title, breadcrumbs }) => {
   const onClickLogout = async () => {
     await auth.signOut()
     localStorage.removeItem(STORAGE_KEY)
-    window.location.href = '/sign-in'
+    await router.push('/sign-in')
+    await queryClient.resetQueries()
   }
 
   const organizationsLinks = app.organizations
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
index 7a747d206d3..cf8789a80e2 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/LayoutHeader.tsx
@@ -1,9 +1,8 @@
 import Link from 'next/link'
 import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
 
 import { IS_PLATFORM, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
-import { useStore, useProjectUsage } from 'hooks'
+import { useParams, useStore } from 'hooks'
 import BreadcrumbsView from './BreadcrumbsView'
 import OrgDropdown from './OrgDropdown'
 import ProjectDropdown from './ProjectDropdown'
@@ -11,15 +10,15 @@ 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'
 
 const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder = true }: any) => {
   const { ui } = useStore()
   const { selectedOrganization, selectedProject } = ui
 
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
-  const { usage } = useProjectUsage(ref as string)
+  const { data: usage } = useProjectUsageQuery({ projectRef })
   const resourcesExceededLimits = getResourcesExceededLimits(usage)
   const projectHasNoLimits =
     ui.selectedProject?.subscription_tier === PRICING_TIER_PRODUCT_IDS.PAYG ||
@@ -67,7 +66,7 @@ const LayoutHeader = ({ customHeaderComponents, breadcrumbs = [], headerBorder =
                 {/* [Joshen TODO] Temporarily hidden until usage endpoint is sorted out */}
                 {/* {showOverUsageBadge && (
                   <div className="ml-2">
-                    <Link href={`/project/${ref}/settings/billing/subscription`}>
+                    <Link href={`/project/${projectRef}/settings/billing/subscription`}>
                       <a>
                         <Badge color="red">Project has exceeded usage limits </Badge>
                       </a>
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx
index 897df2353c1..450722f5a8c 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/NotificationRow.tsx
@@ -1,10 +1,11 @@
 import dayjs from 'dayjs'
-import useSWR from 'swr'
 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 { useStore, useNotifications } from 'hooks'
+import { useStore } from 'hooks'
+import { notificationKeys } from 'data/notifications/keys'
 import { Project } from 'types'
 import { formatNotificationCTAText, formatNotificationText } from './NotificationRows.utils'
 import NotificationActions from './NotificationActions'
@@ -28,7 +29,7 @@ const NotificationRow: FC<Props> = ({
   onSelectFinalizeMigration,
 }) => {
   const { app, ui } = useStore()
-  const { refresh } = useNotifications()
+  const queryClient = useQueryClient()
   const [dismissing, setDismissing] = useState(false)
   const [project] = app.projects.list((project: Project) => project.id === notification.project_id)
 
@@ -36,14 +37,15 @@ const NotificationRow: FC<Props> = ({
   const changelogLink = (notification.data as any).changelog_link
   const availableActions = notification.meta?.actions_available ?? []
 
-  // [Joshen TODO] This should be removed after 5th November when the migration notifications
+  // [Joshen TODO] This should be removed after the env of Feb when the migration notifications
   // have been removed, double check with Qiao before removing.
   // Relevant PR: https://github.com/supabase/supabase/pull/9229
-  const { data: ownerReassignStatus } = useSWR(
-    (notification.data as any).upgrade_type === 'schema-migration'
-      ? `${API_URL}/database/${project.ref}/owner-reassign`
-      : null,
-    get
+  const { data: ownerReassignStatus } = useQuery(
+    ['projects', project.ref, 'owner-reassign'],
+    ({ signal }) => get(`${API_URL}/database/${project.ref}/owner-reassign`, { signal }),
+    {
+      enabled: (notification.data as any).upgrade_type === 'schema-migration',
+    }
   )
 
   const dismissNotification = async (notificationId: string) => {
@@ -58,7 +60,7 @@ const NotificationRow: FC<Props> = ({
         duration: 4000,
       })
     } else {
-      refresh()
+      await queryClient.invalidateQueries(notificationKeys.list())
     }
     setDismissing(false)
   }
diff --git a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
index 00b33c7de2e..0aa4afd87a2 100644
--- a/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
+++ b/studio/components/layouts/ProjectLayout/LayoutHeader/NotificationsPopover/index.tsx
@@ -9,18 +9,19 @@ import {
 } from '@supabase/shared-types/out/notifications'
 
 import { Project } from 'types'
-import { useNotifications, useStore } from 'hooks'
+import { useStore } from 'hooks'
 import { delete_, patch, post } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
 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 router = useRouter()
   const { app, meta, ui } = useStore()
-  const { notifications, refresh } = useNotifications()
+  const { data: notifications, refetch } = useNotificationsQuery()
 
   const [projectToRestart, setProjectToRestart] = useState<Project>()
   const [projectToApplyMigration, setProjectToApplyMigration] = useState<Project>()
@@ -36,6 +37,7 @@ const NotificationsPopover: FC<Props> = () => {
   )
 
   const onOpenChange = async (open: boolean) => {
+    // TODO(alaister): move this to a mutation
     if (!open) {
       // Mark notifications as seen
       const notificationIds = notifications
@@ -44,7 +46,7 @@ const NotificationsPopover: FC<Props> = () => {
       if (notificationIds.length > 0) {
         const { error } = await patch(`${API_URL}/notifications`, { ids: notificationIds })
         if (error) console.error('Failed to update notifications', error)
-        refresh()
+        refetch()
       }
     }
   }
diff --git a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index bc86ead7c13..3def6eaba71 100644
--- a/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -70,7 +70,7 @@ const ProjectLayout = ({
 
 export const ProjectLayoutWithAuth = withAuth(observer(ProjectLayout))
 
-export default ProjectLayout
+export default observer(ProjectLayout)
 
 interface MenuBarWrapperProps {
   isLoading: boolean
diff --git a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
index 1392bbd62e9..8181045826d 100644
--- a/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
+++ b/studio/components/layouts/ProjectLayout/ProjectPausedState.tsx
@@ -4,11 +4,12 @@ import { Modal, Button, IconPauseCircle } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { Project } from 'types'
-import { checkPermissions, useStore, useFlag, useFreeProjectLimitCheck } from 'hooks'
+import { checkPermissions, useStore, useFlag } from 'hooks'
 import { post } from 'lib/common/fetch'
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
 import { DeleteProjectButton } from 'components/interfaces/Settings/General'
 import ConfirmModal from 'components/ui/Dialogs/ConfirmDialog'
+import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
 
 interface Props {
   project: Project
@@ -19,7 +20,7 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
   const orgSlug = ui.selectedOrganization?.slug
 
   const kpsEnabled = useFlag('initWithKps')
-  const { membersExceededLimit } = useFreeProjectLimitCheck(orgSlug)
+  const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug: orgSlug })
   const hasMembersExceedingFreeTierLimit = (membersExceededLimit || []).length > 0
 
   const [showConfirmRestore, setShowConfirmRestore] = useState(false)
@@ -49,7 +50,7 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
   return (
     <>
       <div className="space-y-4">
-        <div className="mx-auto mb-16 w-full max-w-7xl">
+        <div className="w-full mx-auto mb-16 max-w-7xl">
           <div className="mx-6 flex h-[500px] items-center justify-center rounded border border-scale-400 bg-scale-300 p-8">
             <div className="grid w-[420px] gap-4">
               <div className="mx-auto flex max-w-[300px] items-center justify-center space-x-4 lg:space-x-8">
@@ -112,14 +113,14 @@ const ProjectPausedState: FC<Props> = ({ project }) => {
         header="Your organization has members who have exceeded their free project limits"
         onCancel={() => setShowFreeProjectLimitWarning(false)}
       >
-        <div className="space-y-4 py-4">
+        <div className="py-4 space-y-4">
           <Modal.Content>
             <div className="space-y-2">
               <p className="text-sm text-scale-1100">
                 The following members have reached their maximum limits for the number of active
                 free tier projects within organizations where they are an administrator or owner:
               </p>
-              <ul className="list-disc pl-5 text-sm text-scale-1100">
+              <ul className="pl-5 text-sm list-disc text-scale-1100">
                 {(membersExceededLimit || []).map((member, idx: number) => (
                   <li key={`member-${idx}`}>
                     {member.username || member.primary_email} (Limit: {member.free_project_limit}{' '}
diff --git a/studio/components/layouts/ReportsLayout/ReportsLayout.tsx b/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
index 6baddb56a35..59facd25d12 100644
--- a/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
+++ b/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/router'
 import { useStore, withAuth } from 'hooks'
-import BaseLayout from '..'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import ProductMenu from 'components/ui/ProductMenu'
 import { generateReportsMenu } from './ReportsMenu.utils'
 
@@ -18,7 +18,7 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
   const page = router.pathname.split('/')[4] || ''
 
   return (
-    <BaseLayout
+    <ProjectLayout
       title={title}
       product="Reports"
       productMenu={<ProductMenu page={page} menu={generateReportsMenu(project)} />}
@@ -26,7 +26,7 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
       <main style={{ maxHeight: '100vh' }} className="flex-1 overflow-y-auto">
         {children}
       </main>
-    </BaseLayout>
+    </ProjectLayout>
   )
 }
 
diff --git a/studio/components/layouts/SignInLayout/SignInLayout.tsx b/studio/components/layouts/SignInLayout/SignInLayout.tsx
index 3bc77388456..a9a88f48348 100644
--- a/studio/components/layouts/SignInLayout/SignInLayout.tsx
+++ b/studio/components/layouts/SignInLayout/SignInLayout.tsx
@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query'
 import { useStore } from 'hooks'
 import { usePushNext } from 'hooks/misc/useAutoAuthRedirect'
 import { IS_PLATFORM } from 'lib/constants'
@@ -8,7 +9,6 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { PropsWithChildren, useEffect, useState } from 'react'
 import { tweets } from 'shared-data'
-import { useSWRConfig } from 'swr'
 import { Button, IconFileText } from 'ui'
 
 type SignInLayoutProps = {
@@ -27,7 +27,7 @@ const SignInLayout = ({
 }: PropsWithChildren<SignInLayoutProps>) => {
   const pushNext = usePushNext()
   const { ui } = useStore()
-  const { cache } = useSWRConfig()
+  const queryClient = useQueryClient()
   const { theme } = ui
 
   useEffect(() => {
@@ -54,9 +54,7 @@ const SignInLayout = ({
       } = await auth.getSession()
 
       if (session) {
-        // .clear() does actually exist on the cache object, but it's not in the types 🤦🏻
-        // @ts-ignore
-        cache.clear()
+        await queryClient.resetQueries()
 
         await pushNext()
       }
diff --git a/studio/components/layouts/StorageLayout/StorageLayout.tsx b/studio/components/layouts/StorageLayout/StorageLayout.tsx
index e6b7c0ad180..93b1d1346ea 100644
--- a/studio/components/layouts/StorageLayout/StorageLayout.tsx
+++ b/studio/components/layouts/StorageLayout/StorageLayout.tsx
@@ -3,8 +3,8 @@ import { useRouter } from 'next/router'
 import { find, filter, get as _get } from 'lodash'
 import { observer } from 'mobx-react-lite'
 
-import { AutoApiService, useProjectSettingsQuery } from 'data/config/project-settings-query'
-import { useStore, withAuth } from 'hooks'
+import { useParams, useStore, withAuth } from 'hooks'
+import { AutoApiService, useProjectApiQuery } from 'data/config/project-api-query'
 import BaseLayout from 'components/layouts'
 import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import StorageMenu from './StorageMenu'
@@ -23,7 +23,7 @@ interface Props {
 const StorageLayout: FC<Props> = ({ title, children }) => {
   const { ui, meta } = useStore()
   const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const storageExplorerStore = useStorageStore()
   const {
@@ -40,7 +40,7 @@ const StorageLayout: FC<Props> = ({ title, children }) => {
     buckets,
   } = storageExplorerStore || {}
 
-  const { data: settings, isLoading } = useProjectSettingsQuery({ projectRef: ref as string })
+  const { data: settings, isLoading } = useProjectApiQuery({ projectRef })
   const apiService = settings?.autoApiService
   const serviceKey = find(apiService?.service_api_keys ?? [], (key) => key.tags === 'service_role')
   const canAccessStorage = !isLoading && apiService && serviceKey
@@ -53,7 +53,7 @@ const StorageLayout: FC<Props> = ({ title, children }) => {
     if (apiService.endpoint) {
       if (serviceKey) {
         storageExplorerStore.initStore(
-          ref,
+          projectRef,
           apiService.endpoint,
           apiService.serviceApiKey,
           apiService.protocol
@@ -72,7 +72,7 @@ const StorageLayout: FC<Props> = ({ title, children }) => {
 
   const onSelectCreateBucket = async (bucketName: string, isPublic: boolean) => {
     const bucket = await createBucket(bucketName, isPublic)
-    if (bucket !== undefined) router.push(`/project/${ref}/storage/buckets/${bucket.name}`)
+    if (bucket !== undefined) router.push(`/project/${projectRef}/storage/buckets/${bucket.name}`)
   }
 
   const onSelectDeleteBucket = async (bucket: any) => {
diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index d4cde836715..f5cd6f030ea 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -383,7 +383,7 @@ const Results = ({ results }) => {
       <div className="group sb-grid-select-cell__formatter overflow-hidden">
         <span className="font-mono text-xs truncate">{JSON.stringify(row[column])}</span>
 
-        {row[column] && (
+        {row[column] != undefined && (
           <Button
             type="outline"
             icon={isCopied ? <IconCheck size="tiny" /> : <IconClipboard size="tiny" />}
diff --git a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
index be80781933a..4e05953129a 100644
--- a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -1,20 +1,23 @@
-import useSWR from 'swr'
-import { FC, useState } from 'react'
+import { useState } from 'react'
 import { Button, Form, IconClock, Input, Listbox } from 'ui'
 
 import { useStore } from 'hooks'
-import { patch, get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
+import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation'
 import UpgradeToPro from 'components/ui/UpgradeToPro'
 import { convertFromBytes, convertToBytes } from './StorageSettings.utils'
 import { StorageSizeUnits, STORAGE_FILE_SIZE_LIMIT_MAX_BYTES } from './StorageSettings.constants'
 
-const StorageSettings: FC<any> = ({ projectRef }) => {
-  const { data, error } = useSWR(`${API_URL}/projects/${projectRef}/config/storage`, get)
+export type StorageSettingsProps = {
+  projectRef: string | undefined
+}
+
+const StorageSettings = ({ projectRef }: StorageSettingsProps) => {
+  const { data, error } = useProjectStorageConfigQuery({ projectRef })
 
   if (error || data?.error) {
     return (
-      <div className="mx-auto p-6 text-center sm:w-full md:w-3/4">
+      <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
         <p className="text-sm">Error loading storage settings</p>
       </div>
     )
@@ -22,7 +25,7 @@ const StorageSettings: FC<any> = ({ projectRef }) => {
 
   if (!data) {
     return (
-      <div className="mx-auto p-6 text-center sm:w-full md:w-3/4">
+      <div className="p-6 mx-auto text-center sm:w-full md:w-3/4">
         <p className="text-sm">Loading...</p>
       </div>
     )
@@ -58,6 +61,8 @@ const StorageConfig = ({ config, projectRef }: any) => {
     return errors
   }
 
+  const { mutateAsync: updateStorageConfig } = useProjectStorageConfigUpdateUpdateMutation()
+
   const onSubmit = async (values: any) => {
     const errors = onValidate(values)
 
@@ -67,20 +72,23 @@ const StorageConfig = ({ config, projectRef }: any) => {
         message: `Upload file size limit must be up to 5GB (${formattedMaxSizeBytes})`,
       })
     } else {
-      const payload = { fileSizeLimit: convertToBytes(values.fileSizeLimit, selectedUnit) }
-      const res = await patch(`${API_URL}/projects/${projectRef}/config/storage`, payload)
-      if (res?.error) {
-        ui.setNotification({
-          category: 'error',
-          message: `Failed to update storage settings: ${res.error.message}`,
+      try {
+        const res = await updateStorageConfig({
+          projectRef,
+          fileSizeLimit: convertToBytes(values.fileSizeLimit, selectedUnit),
         })
-      } else {
+
         const updatedValue = convertFromBytes(res.fileSizeLimit)
         initialValues = {
           fileSizeLimit: updatedValue.value,
           unformattedFileSizeLimit: res.fileSizeLimit,
         }
         ui.setNotification({ category: 'success', message: 'Successfully updated settings' })
+      } catch (error: any) {
+        ui.setNotification({
+          category: 'error',
+          message: `Failed to update storage settings: ${error?.message}`,
+        })
       }
     }
   }
@@ -119,12 +127,12 @@ const StorageConfig = ({ config, projectRef }: any) => {
                   ].join(' ')}
                 >
                   <div className="flex flex-col gap-0 divide-y divide-scale-400">
-                    <div className="block grid grid-cols-12 gap-6 px-8 py-8 lg:gap-12">
-                      <div className="relative col-span-12 flex flex-col gap-6 lg:col-span-4">
+                    <div className="grid grid-cols-12 gap-6 px-8 py-8 lg:gap-12">
+                      <div className="relative flex flex-col col-span-12 gap-6 lg:col-span-4">
                         <p className="text-sm">Upload file size limit</p>
                       </div>
-                      <div className="relative col-span-12 flex flex-col gap-x-6 gap-y-2 lg:col-span-8">
-                        <div className="col-span-12 grid grid-cols-12 gap-2">
+                      <div className="relative flex flex-col col-span-12 gap-x-6 gap-y-2 lg:col-span-8">
+                        <div className="grid grid-cols-12 col-span-12 gap-2">
                           <div className="col-span-8">
                             <Input
                               id="fileSizeLimit"
@@ -181,8 +189,8 @@ const StorageConfig = ({ config, projectRef }: any) => {
                     </div>
                   )}
                   <div className="border-t border-scale-400" />
-                  <div className="flex justify-between py-4 px-8">
-                    <div className="flex w-full items-center justify-end gap-2">
+                  <div className="flex justify-between px-8 py-4">
+                    <div className="flex items-center justify-end w-full gap-2">
                       <div className="flex gap-2">
                         <Button
                           type="default"
diff --git a/studio/components/ui/OveragesBanner/OveragesBanner.tsx b/studio/components/ui/OveragesBanner/OveragesBanner.tsx
index 56430ff1155..991c9a05b86 100644
--- a/studio/components/ui/OveragesBanner/OveragesBanner.tsx
+++ b/studio/components/ui/OveragesBanner/OveragesBanner.tsx
@@ -2,9 +2,10 @@ import Link from 'next/link'
 import { FC } from 'react'
 import { Alert, Button } from 'ui'
 
-import { useStore, useProjectUsage } from 'hooks'
+import { useParams } from 'hooks'
 import { PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import { getResourcesApproachingLimits, getResourcesExceededLimits } from './OveragesBanner.utils'
+import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 interface Props {
   tier: string
@@ -14,10 +15,8 @@ interface Props {
 // Banner will not be shown for PAYG or Enterprise projects
 
 const OveragesBanner: FC<Props> = ({ tier, minimal }) => {
-  const { ui } = useStore()
-  const ref = ui.selectedProject?.ref
-
-  const { usage, error, isLoading } = useProjectUsage(ref as string)
+  const { ref: projectRef } = useParams()
+  const { data: usage, error, isLoading } = useProjectUsageQuery({ projectRef })
 
   const resourcesApproachingLimits = getResourcesApproachingLimits(usage)
   const isApproachingUsageLimits = resourcesApproachingLimits.length > 0
@@ -86,7 +85,7 @@ const OveragesBanner: FC<Props> = ({ tier, minimal }) => {
         actions={
           minimal ? (
             <div className="flex h-full items-center">
-              <Link href={`/project/${ref}/settings/billing/subscription`}>
+              <Link href={`/project/${projectRef}/settings/billing/subscription`}>
                 <a>
                   <Button type="default">Explore usage details</Button>
                 </a>
diff --git a/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx b/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
index 62066551307..587e742a41a 100644
--- a/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
+++ b/studio/components/ui/ProjectSettings/DisplayApiSettings.tsx
@@ -1,33 +1,36 @@
-import { useRouter } from 'next/router'
-import { IconAlertCircle, IconLoader, Input } from 'ui'
-import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
+import { IconAlertCircle, IconLoader, Input } from 'ui'
 
-import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
-import { checkPermissions, useJwtSecretUpdateStatus, useProjectSettings } from 'hooks'
 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, useParams } from 'hooks'
+import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
 
 const DisplayApiSettings = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const {
-    services,
+    data: settings,
     isError: isProjectSettingsError,
     isLoading: isProjectSettingsLoading,
-  } = useProjectSettings(ref as string | undefined)
+  } = useProjectSettingsQuery({ projectRef })
   const {
-    jwtSecretUpdateStatus,
+    data,
     isError: isJwtSecretUpdateStatusError,
     isLoading: isJwtSecretUpdateStatusLoading,
-  }: any = useJwtSecretUpdateStatus(ref)
+  } = useJwtSecretUpdatingStatusQuery({ projectRef })
+  const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus
 
   const canReadAPIKeys = checkPermissions(PermissionAction.READ, 'service_api_keys')
 
   const isNotUpdatingJwtSecret =
     jwtSecretUpdateStatus === undefined || jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updated
   // Get the API service
-  const apiService = (services ?? []).find((x: any) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID)
+  const apiService = (settings?.services ?? []).find(
+    (x: any) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID
+  )
   const apiKeys = apiService?.service_api_keys ?? []
   // api keys should not be empty. However it can be populated with a delay on project creation
   const isApiKeysEmpty = apiKeys.length === 0
@@ -46,14 +49,14 @@ const DisplayApiSettings = () => {
       }
     >
       {isProjectSettingsError || isJwtSecretUpdateStatusError ? (
-        <div className="flex items-center justify-center space-x-2 py-8">
+        <div className="flex items-center justify-center py-8 space-x-2">
           <IconAlertCircle size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsError ? 'Failed to retrieve API keys' : 'Failed to update JWT secret'}
           </p>
         </div>
       ) : isApiKeysEmpty || isProjectSettingsLoading || isJwtSecretUpdateStatusLoading ? (
-        <div className="flex items-center justify-center space-x-2 py-8">
+        <div className="flex items-center justify-center py-8 space-x-2">
           <IconLoader className="animate-spin" size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsLoading || isApiKeysEmpty
diff --git a/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx b/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx
index 320a0a8b82e..70f1c5eba57 100644
--- a/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx
+++ b/studio/components/ui/ProjectSettings/DisplayConfigSettings.tsx
@@ -1,38 +1,43 @@
-import { FC } from 'react'
-import { useRouter } from 'next/router'
-import { Input, IconAlertCircle, IconLoader } from 'ui'
 import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
-import { useJwtSecretUpdateStatus, useProjectSettings } from 'hooks'
-import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
 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 { useParams } from 'hooks'
+import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
+import { FC } from 'react'
+import { IconAlertCircle, IconLoader, Input } from 'ui'
 
 const DisplayConfigSettings = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
   const {
-    project,
-    services,
+    data: settings,
     isLoading: isProjectSettingsLoading,
     isError: isProjectSettingsError,
-  } = useProjectSettings(ref as string | undefined)
+  } = useProjectSettingsQuery({
+    projectRef,
+  })
+
   const {
+    data,
     isError: isJwtSecretUpdateStatusError,
     isLoading: isJwtSecretUpdateStatusLoading,
-    jwtSecretUpdateStatus,
-  }: any = useJwtSecretUpdateStatus(ref)
+  } = useJwtSecretUpdatingStatusQuery({ projectRef })
+  const jwtSecretUpdateStatus = data?.jwtSecretUpdateStatus
 
   const isNotUpdatingJwtSecret =
     jwtSecretUpdateStatus === undefined || jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updated
   // Get the API service
-  const jwtSecret = project?.jwt_secret ?? ''
-  const apiService = (services ?? []).find((x: any) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID)
-  const apiConfig = apiService?.app_config ?? {}
-  const apiUrl = `${apiConfig.protocol ?? 'https'}://${apiConfig.endpoint ?? '-'}`
+  const jwtSecret = settings?.project?.jwt_secret ?? ''
+  const apiService = (settings?.services ?? []).find(
+    (x: any) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID
+  )
+  const apiConfig = apiService?.app_config
+  const apiUrl = `${apiConfig?.protocol ?? 'https'}://${apiConfig?.endpoint ?? '-'}`
 
   return (
     <ConfigContentWrapper>
       {isProjectSettingsError || isJwtSecretUpdateStatusError ? (
-        <div className="flex items-center justify-center space-x-2 py-8">
+        <div className="flex items-center justify-center py-8 space-x-2">
           <IconAlertCircle size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsError
@@ -41,7 +46,7 @@ const DisplayConfigSettings = () => {
           </p>
         </div>
       ) : isProjectSettingsLoading || isJwtSecretUpdateStatusLoading ? (
-        <div className="flex items-center justify-center space-x-2 py-8">
+        <div className="flex items-center justify-center py-8 space-x-2">
           <IconLoader className="animate-spin" size={16} strokeWidth={1.5} />
           <p className="text-sm text-scale-1100">
             {isProjectSettingsLoading ? 'Retrieving API keys' : 'JWT secret is being updated'}
diff --git a/studio/components/ui/ShimmeringLoader.tsx b/studio/components/ui/ShimmeringLoader.tsx
index 5a97e10827e..23f6a002108 100644
--- a/studio/components/ui/ShimmeringLoader.tsx
+++ b/studio/components/ui/ShimmeringLoader.tsx
@@ -1,5 +1,15 @@
-const ShimmeringLoader = ({ className = '' }) => {
-  return <div className={`shimmering-loader rounded py-3 mx-1 ${className}`} />
+const ANIMATION_DELAY = 150
+
+const ShimmeringLoader = ({ className = '', delayIndex = 0, animationDelay = 150 }) => {
+  return (
+    <div
+      className={`shimmering-loader rounded py-3 mx-1 ${className}`}
+      style={{
+        animationFillMode: 'backwards',
+        animationDelay: `${delayIndex * animationDelay}ms`,
+      }}
+    />
+  )
 }
 
 export default ShimmeringLoader
diff --git a/studio/data/__templates/resource-query.ts b/studio/data/__templates/resource-query.ts
index 4c91e063b3a..c348077547f 100644
--- a/studio/data/__templates/resource-query.ts
+++ b/studio/data/__templates/resource-query.ts
@@ -56,5 +56,5 @@ export const useResourcePrefetch = ({ projectRef, id }: ResourceVariables) => {
         getResource({ projectRef, id }, signal)
       )
     }
-  }, [projectRef])
+  }, [projectRef, id])
 }
diff --git a/studio/data/access-tokens/access-tokens-create-mutation.ts b/studio/data/access-tokens/access-tokens-create-mutation.ts
new file mode 100644
index 00000000000..8e13d2fe1fe
--- /dev/null
+++ b/studio/data/access-tokens/access-tokens-create-mutation.ts
@@ -0,0 +1,44 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { AccessToken } from './access-tokens-query'
+import { accessTokenKeys } from './keys'
+
+export type AccessTokenCreateVariables = {
+  name: string
+}
+
+export type NewAccessToken = AccessToken & { token: string }
+
+export async function createAccessToken({ name }: AccessTokenCreateVariables) {
+  const response = await post(`${API_URL}/profile/access-tokens`, { name })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as NewAccessToken
+}
+
+type AccessTokenCreateData = Awaited<ReturnType<typeof createAccessToken>>
+
+export const useAccessTokenCreateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<AccessTokenCreateData, unknown, AccessTokenCreateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<AccessTokenCreateData, unknown, AccessTokenCreateVariables>(
+    (vars) => createAccessToken(vars),
+    {
+      async onSuccess(data, variables, context) {
+        await queryClient.invalidateQueries(accessTokenKeys.list())
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/access-tokens/access-tokens-delete-mutation.ts b/studio/data/access-tokens/access-tokens-delete-mutation.ts
new file mode 100644
index 00000000000..0f9bc82f575
--- /dev/null
+++ b/studio/data/access-tokens/access-tokens-delete-mutation.ts
@@ -0,0 +1,41 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { accessTokenKeys } from './keys'
+
+export type AccessTokenDeleteVariables = {
+  id: number
+}
+
+export async function deleteAccessToken({ id }: AccessTokenDeleteVariables) {
+  const response = await delete_(`${API_URL}/profile/access-tokens/${id}`)
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type AccessTokenDeleteData = Awaited<ReturnType<typeof deleteAccessToken>>
+
+export const useAccessTokenDeleteMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<AccessTokenDeleteData, unknown, AccessTokenDeleteVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<AccessTokenDeleteData, unknown, AccessTokenDeleteVariables>(
+    (vars) => deleteAccessToken(vars),
+    {
+      async onSuccess(data, variables, context) {
+        await queryClient.invalidateQueries(accessTokenKeys.list())
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/access-tokens/access-tokens-query.ts b/studio/data/access-tokens/access-tokens-query.ts
new file mode 100644
index 00000000000..6cfb187510e
--- /dev/null
+++ b/studio/data/access-tokens/access-tokens-query.ts
@@ -0,0 +1,46 @@
+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 { accessTokenKeys } from './keys'
+
+export type AccessToken = {
+  id: number
+  token_alias: string
+  name: string
+  created_at: number
+}
+
+export type AccessTokensResponse = AccessToken[]
+
+export async function getAccessTokens(signal?: AbortSignal) {
+  const response = await get(`${API_URL}/profile/access-tokens`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as AccessTokensResponse
+}
+
+export type AccessTokensData = Awaited<ReturnType<typeof getAccessTokens>>
+export type AccessTokensError = unknown
+
+export const useAccessTokensQuery = <TData = AccessTokensData>({
+  enabled = true,
+  ...options
+}: UseQueryOptions<AccessTokensData, AccessTokensError, TData> = {}) =>
+  useQuery<AccessTokensData, AccessTokensError, TData>(
+    accessTokenKeys.list(),
+    ({ signal }) => getAccessTokens(signal),
+    options
+  )
+
+export const useAccessTokensPrefetch = () => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    client.prefetchQuery(accessTokenKeys.list(), ({ signal }) => getAccessTokens(signal))
+  }, [])
+}
diff --git a/studio/data/access-tokens/keys.ts b/studio/data/access-tokens/keys.ts
new file mode 100644
index 00000000000..8d5e3a8f3da
--- /dev/null
+++ b/studio/data/access-tokens/keys.ts
@@ -0,0 +1,3 @@
+export const accessTokenKeys = {
+  list: () => ['access-tokens'] as const,
+}
diff --git a/studio/data/analytics/functions-inv-stats-query.ts b/studio/data/analytics/functions-inv-stats-query.ts
new file mode 100644
index 00000000000..8bf0b5ad76e
--- /dev/null
+++ b/studio/data/analytics/functions-inv-stats-query.ts
@@ -0,0 +1,80 @@
+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 { analyticsKeys } from './keys'
+
+export type FunctionsInvStatsVariables = {
+  projectRef?: string
+  functionId?: string
+  interval?: string
+}
+
+export type FunctionsInvStatsResponse = any
+
+export async function getFunctionsInvStats(
+  { projectRef, functionId, interval }: FunctionsInvStatsVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+  if (!functionId) {
+    throw new Error('functionId is required')
+  }
+  if (!interval) {
+    throw new Error('interval is required')
+  }
+
+  const response = await get(
+    `${API_URL}/projects/${projectRef}/analytics/endpoints/functions.inv-stats?interval=${interval}&function_id=${functionId}`,
+    {
+      signal,
+    }
+  )
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as FunctionsInvStatsResponse
+}
+
+export type FunctionsInvStatsData = Awaited<ReturnType<typeof getFunctionsInvStats>>
+export type FunctionsInvStatsError = unknown
+
+export const useFunctionsInvStatsQuery = <TData = FunctionsInvStatsData>(
+  { projectRef, functionId, interval }: FunctionsInvStatsVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<FunctionsInvStatsData, FunctionsInvStatsError, TData> = {}
+) =>
+  useQuery<FunctionsInvStatsData, FunctionsInvStatsError, TData>(
+    analyticsKeys.functionsInvStats(projectRef, { functionId, interval }),
+    ({ signal }) => getFunctionsInvStats({ projectRef, functionId, interval }, signal),
+    {
+      enabled:
+        enabled &&
+        typeof projectRef !== 'undefined' &&
+        typeof functionId !== 'undefined' &&
+        typeof interval !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useFunctionsInvStatsPrefetch = ({
+  projectRef,
+  functionId,
+  interval,
+}: FunctionsInvStatsVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef && functionId && interval) {
+      client.prefetchQuery(
+        analyticsKeys.functionsInvStats(projectRef, { functionId, interval }),
+        ({ signal }) => getFunctionsInvStats({ projectRef, functionId, interval }, signal)
+      )
+    }
+  }, [projectRef, functionId, interval])
+}
diff --git a/studio/data/analytics/keys.ts b/studio/data/analytics/keys.ts
new file mode 100644
index 00000000000..b360a8f7132
--- /dev/null
+++ b/studio/data/analytics/keys.ts
@@ -0,0 +1,8 @@
+import { LogsEndpointParams } from 'components/interfaces/Settings/Logs'
+
+export const analyticsKeys = {
+  functionsInvStats: (
+    projectRef: string | undefined,
+    { interval, functionId }: { functionId: string | undefined; interval: string | undefined }
+  ) => ['projects', projectRef, 'functions-inv-stats', { interval, functionId }] as const,
+}
diff --git a/studio/data/config/jwt-secret-update-mutation.ts b/studio/data/config/jwt-secret-update-mutation.ts
new file mode 100644
index 00000000000..60706721f01
--- /dev/null
+++ b/studio/data/config/jwt-secret-update-mutation.ts
@@ -0,0 +1,52 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { configKeys } from './keys'
+
+export type JwtSecretUpdateVariables = {
+  projectRef: string
+  jwtSecret: string
+  changeTrackingId: string
+}
+
+export async function updateJwtSecret({
+  projectRef,
+  jwtSecret,
+  changeTrackingId,
+}: JwtSecretUpdateVariables) {
+  const response = await patch(`${API_URL}/projects/${projectRef}/config/secrets`, {
+    jwt_secret: jwtSecret,
+    change_tracking_id: changeTrackingId,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type JwtSecretUpdateData = Awaited<ReturnType<typeof updateJwtSecret>>
+
+export const useJwtSecretUpdateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<JwtSecretUpdateData, unknown, JwtSecretUpdateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<JwtSecretUpdateData, unknown, JwtSecretUpdateVariables>(
+    (vars) => updateJwtSecret(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { projectRef } = variables
+
+        await queryClient.invalidateQueries(configKeys.jwtSecretUpdatingStatus(projectRef))
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/config/jwt-secret-updating-status-query.ts b/studio/data/config/jwt-secret-updating-status-query.ts
new file mode 100644
index 00000000000..80f7024f0cc
--- /dev/null
+++ b/studio/data/config/jwt-secret-updating-status-query.ts
@@ -0,0 +1,92 @@
+import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
+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 { configKeys } from './keys'
+
+export type JwtSecretUpdatingStatusVariables = {
+  projectRef?: string
+}
+
+export type JwtSecretUpdatingStatusResponse = {
+  changeTrackingId: string | undefined
+  jwtSecretUpdateError: number | null | undefined
+  jwtSecretUpdateProgress: number | null | undefined
+  jwtSecretUpdateStatus: JwtSecretUpdateStatus | undefined
+}
+
+export async function getJwtSecretUpdatingStatus(
+  { projectRef }: JwtSecretUpdatingStatusVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/props/project/${projectRef}/jwt-secret-update-status`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  const meta = response?.jwtSecretUpdateStatus?.meta
+
+  return {
+    changeTrackingId: meta?.change_tracking_id,
+    jwtSecretUpdateError: meta?.error,
+    jwtSecretUpdateProgress: meta?.progress,
+    jwtSecretUpdateStatus: meta?.status,
+  } as JwtSecretUpdatingStatusResponse
+}
+
+export type JwtSecretUpdatingStatusData = Awaited<ReturnType<typeof getJwtSecretUpdatingStatus>>
+export type JwtSecretUpdatingStatusError = unknown
+
+export const useJwtSecretUpdatingStatusQuery = <TData = JwtSecretUpdatingStatusData>(
+  { projectRef }: JwtSecretUpdatingStatusVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<JwtSecretUpdatingStatusData, JwtSecretUpdatingStatusError, TData> = {}
+) => {
+  const client = useQueryClient()
+
+  return useQuery<JwtSecretUpdatingStatusData, JwtSecretUpdatingStatusError, TData>(
+    configKeys.jwtSecretUpdatingStatus(projectRef),
+    ({ signal }) => getJwtSecretUpdatingStatus({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      refetchInterval(data) {
+        if (!data) {
+          return false
+        }
+
+        const { jwtSecretUpdateStatus } = data as unknown as JwtSecretUpdatingStatusResponse
+
+        const interval = jwtSecretUpdateStatus === JwtSecretUpdateStatus.Updating ? 1000 : false
+
+        return interval
+      },
+      onSuccess() {
+        client.invalidateQueries(configKeys.postgrest(projectRef))
+      },
+      ...options,
+    }
+  )
+}
+
+export const useJwtSecretUpdatingStatusPrefetch = ({
+  projectRef,
+}: JwtSecretUpdatingStatusVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(configKeys.jwtSecretUpdatingStatus(projectRef), ({ signal }) =>
+        getJwtSecretUpdatingStatus({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}
diff --git a/studio/data/config/keys.ts b/studio/data/config/keys.ts
index 875848a4247..1f0b8701751 100644
--- a/studio/data/config/keys.ts
+++ b/studio/data/config/keys.ts
@@ -1,3 +1,8 @@
 export const configKeys = {
   settings: (projectRef: string | undefined) => ['projects', projectRef, 'settings'] as const,
+  api: (projectRef: string | undefined) => ['projects', projectRef, 'settings', 'api'] as const,
+  postgrest: (projectRef: string | undefined) => ['projects', projectRef, 'postgrest'] as const,
+  jwtSecretUpdatingStatus: (projectRef: string | undefined) =>
+    ['projects', projectRef, 'jwt-secret-updating-status'] as const,
+  storage: (projectRef: string | undefined) => ['projects', projectRef, 'storage'] as const,
 }
diff --git a/studio/data/config/project-api-query.ts b/studio/data/config/project-api-query.ts
new file mode 100644
index 00000000000..5fc7d414364
--- /dev/null
+++ b/studio/data/config/project-api-query.ts
@@ -0,0 +1,117 @@
+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 { configKeys } from './keys'
+
+export type ProjectApiVariables = {
+  projectRef?: string
+}
+
+export type Project = {
+  id: number
+  name: string
+  ref: string
+  status: string
+  db_host: string
+  db_name: string
+  db_user: string
+  db_schema: string
+  db_port: number
+  db_ssl: boolean
+  services: Service[]
+}
+
+export type App = {
+  id: number
+  name: string
+}
+
+export type AppConfig = {
+  endpoint: string
+  db_schema: string
+  realtime_multitenant_enabled: boolean
+}
+
+export type Service = {
+  id: number
+  name: string
+  app_config: AppConfig
+  app: App
+  service_api_keys: ServiceApiKey[]
+}
+
+export type ServiceApiKey = {
+  api_key_encrypted: string
+  tags: string
+  name: string
+}
+
+export type AutoApiService = Service & {
+  protocol: 'https' | 'http'
+  endpoint: string
+  restUrl: string
+  project: Project
+  defaultApiKey: string
+  serviceApiKey: string
+}
+
+export type ProjectApiResponse = {
+  project: Project
+  autoApiService: AutoApiService
+}
+
+export async function getProjectApi({ projectRef }: ProjectApiVariables, signal?: AbortSignal) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/props/project/${projectRef}/api`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectApiResponse
+}
+
+export type ProjectApiData = Awaited<ReturnType<typeof getProjectApi>>
+export type ProjectApiError = unknown
+
+export const useProjectApiQuery = <TData = ProjectApiData>(
+  { projectRef }: ProjectApiVariables,
+  { enabled = true, ...options }: UseQueryOptions<ProjectApiData, ProjectApiError, TData> = {}
+) =>
+  useQuery<ProjectApiData, ProjectApiError, TData>(
+    configKeys.api(projectRef),
+    ({ signal }) => getProjectApi({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      refetchInterval(data, query) {
+        if (!data) {
+          return false
+        }
+
+        const { autoApiService } = data as unknown as ProjectApiData
+
+        const apiKeys = autoApiService?.service_api_keys ?? []
+        const interval = apiKeys.length === 0 ? 2000 : 0
+
+        return interval
+      },
+      ...options,
+    }
+  )
+
+export const useProjectApiPrefetch = ({ projectRef }: ProjectApiVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(configKeys.api(projectRef), ({ signal }) =>
+        getProjectApi({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}
diff --git a/studio/data/config/project-postgrest-config-query.ts b/studio/data/config/project-postgrest-config-query.ts
new file mode 100644
index 00000000000..4a8abe2ee13
--- /dev/null
+++ b/studio/data/config/project-postgrest-config-query.ts
@@ -0,0 +1,69 @@
+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 { configKeys } from './keys'
+
+export type ProjectPostgrestConfigVariables = {
+  projectRef?: string
+}
+
+export type ProjectPostgrestConfigResponse = {
+  max_rows: number
+  role_claim_key: string
+  db_schema: string
+  db_anon_role: string
+  db_extra_search_path: string
+  jwt_secret: string
+}
+
+export async function getProjectPostgrestConfig(
+  { projectRef }: ProjectPostgrestConfigVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/projects/${projectRef}/config/postgrest`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectPostgrestConfigResponse
+}
+
+export type ProjectPostgrestConfigData = Awaited<ReturnType<typeof getProjectPostgrestConfig>>
+export type ProjectPostgrestConfigError = unknown
+
+export const useProjectPostgrestConfigQuery = <TData = ProjectPostgrestConfigData>(
+  { projectRef }: ProjectPostgrestConfigVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ProjectPostgrestConfigData, ProjectPostgrestConfigError, TData> = {}
+) =>
+  useQuery<ProjectPostgrestConfigData, ProjectPostgrestConfigError, TData>(
+    configKeys.postgrest(projectRef),
+    ({ signal }) => getProjectPostgrestConfig({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useProjectPostgrestConfigPrefetch = ({
+  projectRef,
+}: ProjectPostgrestConfigVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(configKeys.postgrest(projectRef), ({ signal }) =>
+        getProjectPostgrestConfig({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}
diff --git a/studio/data/config/project-postgrest-config-update-mutation.ts b/studio/data/config/project-postgrest-config-update-mutation.ts
new file mode 100644
index 00000000000..ede88881f11
--- /dev/null
+++ b/studio/data/config/project-postgrest-config-update-mutation.ts
@@ -0,0 +1,60 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { configKeys } from './keys'
+
+export type ProjectPostgrestConfigUpdateVariables = {
+  projectRef: string
+  dbSchema: string
+  maxRows: string
+  dbExtraSearchPath: string
+}
+
+export async function updateProjectPostgrestConfig({
+  projectRef,
+  dbSchema,
+  maxRows,
+  dbExtraSearchPath,
+}: ProjectPostgrestConfigUpdateVariables) {
+  const response = await patch(`${API_URL}/projects/${projectRef}/config/postgrest`, {
+    db_schema: dbSchema,
+    max_rows: maxRows,
+    db_extra_search_path: dbExtraSearchPath,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type ProjectPostgrestConfigUpdateData = Awaited<ReturnType<typeof updateProjectPostgrestConfig>>
+
+export const useProjectPostgrestConfigUpdateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<
+    ProjectPostgrestConfigUpdateData,
+    unknown,
+    ProjectPostgrestConfigUpdateVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    ProjectPostgrestConfigUpdateData,
+    unknown,
+    ProjectPostgrestConfigUpdateVariables
+  >((vars) => updateProjectPostgrestConfig(vars), {
+    async onSuccess(data, variables, context) {
+      const { projectRef } = variables
+
+      queryClient.invalidateQueries(configKeys.postgrest(projectRef))
+
+      await onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
diff --git a/studio/data/config/project-settings-query.ts b/studio/data/config/project-settings-query.ts
index 2c61a9909a8..cbed1b251a5 100644
--- a/studio/data/config/project-settings-query.ts
+++ b/studio/data/config/project-settings-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
 import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { API_URL, DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
 import { useCallback } from 'react'
 import { configKeys } from './keys'
 
@@ -13,24 +13,17 @@ export type Project = {
   name: string
   ref: string
   status: string
-  db_host: string
-  db_name: string
-  db_user: string
-  db_schema: string
+  inserted_at: string
+  db_dns_name: string
   db_port: number
+  db_name: string
   db_ssl: boolean
+  db_host: string
+  db_user: string
+  cloud_provider: string
+  region: string
   services: Service[]
-}
-
-export type App = {
-  id: number
-  name: string
-}
-
-export type AppConfig = {
-  endpoint: string
-  db_schema: string
-  realtime_multitenant_enabled: boolean
+  jwt_secret: string
 }
 
 export type Service = {
@@ -41,24 +34,28 @@ export type Service = {
   service_api_keys: ServiceApiKey[]
 }
 
+export type AppConfig = {
+  protocol: 'https' | 'http'
+  endpoint: string
+  db_schema: string
+  realtime_multitenant_enabled: boolean
+}
+
+export type App = {
+  id: number
+  name: string
+}
+
 export type ServiceApiKey = {
   api_key_encrypted: string
   tags: string
   name: string
-}
-
-export type AutoApiService = Service & {
-  protocol: 'https' | 'http'
-  endpoint: string
-  restUrl: string
-  project: Project
-  defaultApiKey: string
-  serviceApiKey: string
+  api_key: string
 }
 
 export type ProjectSettingsResponse = {
   project: Project
-  autoApiService: AutoApiService
+  services: Service[]
 }
 
 export async function getProjectSettings(
@@ -69,7 +66,7 @@ export async function getProjectSettings(
     throw new Error('projectRef is required')
   }
 
-  const response = await get(`${API_URL}/props/project/${projectRef}/api`, {
+  const response = await get(`${API_URL}/props/project/${projectRef}/settings`, {
     signal,
   })
   if (response.error) {
@@ -95,13 +92,10 @@ export const useProjectSettingsQuery = <TData = ProjectSettingsData>(
     {
       enabled: enabled && typeof projectRef !== 'undefined',
       refetchInterval(data, query) {
-        if (!data) {
-          return false
-        }
-
-        const { autoApiService } = data as unknown as ProjectSettingsData
-
-        const apiKeys = autoApiService?.service_api_keys ?? []
+        const apiService = (
+          (data as unknown as ProjectSettingsData | undefined)?.services ?? []
+        ).find((x) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID)
+        const apiKeys = apiService?.service_api_keys ?? []
         const interval = apiKeys.length === 0 ? 2000 : 0
 
         return interval
diff --git a/studio/data/config/project-storage-config-query.ts b/studio/data/config/project-storage-config-query.ts
new file mode 100644
index 00000000000..fb6d717880e
--- /dev/null
+++ b/studio/data/config/project-storage-config-query.ts
@@ -0,0 +1,58 @@
+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 { configKeys } from './keys'
+
+export type ProjectStorageConfigVariables = {
+  projectRef?: string
+}
+
+// TODO: Add proper type
+export type ProjectStorageConfigResponse = any
+
+export async function getProjectStorageConfig(
+  { projectRef }: ProjectStorageConfigVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/projects/${projectRef}/config/storage`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectStorageConfigResponse
+}
+
+export type ProjectStorageConfigData = Awaited<ReturnType<typeof getProjectStorageConfig>>
+export type ProjectStorageConfigError = unknown
+
+export const useProjectStorageConfigQuery = <TData = ProjectStorageConfigData>(
+  { projectRef }: ProjectStorageConfigVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ProjectStorageConfigData, ProjectStorageConfigError, TData> = {}
+) =>
+  useQuery<ProjectStorageConfigData, ProjectStorageConfigError, TData>(
+    configKeys.storage(projectRef),
+    ({ signal }) => getProjectStorageConfig({ projectRef }, signal),
+    { enabled: enabled && typeof projectRef !== 'undefined', ...options }
+  )
+
+export const useProjectStorageConfigPrefetch = ({ projectRef }: ProjectStorageConfigVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(configKeys.storage(projectRef), ({ signal }) =>
+        getProjectStorageConfig({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}
diff --git a/studio/data/config/project-storage-config-update-mutation.ts b/studio/data/config/project-storage-config-update-mutation.ts
new file mode 100644
index 00000000000..8a9bf5e83b0
--- /dev/null
+++ b/studio/data/config/project-storage-config-update-mutation.ts
@@ -0,0 +1,56 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { configKeys } from './keys'
+
+export type ProjectStorageConfigUpdateUpdateVariables = {
+  projectRef: string
+  fileSizeLimit: number
+}
+
+export async function updateProjectStorageConfigUpdate({
+  projectRef,
+  fileSizeLimit,
+}: ProjectStorageConfigUpdateUpdateVariables) {
+  const response = await patch(`${API_URL}/projects/${projectRef}/config/storage`, {
+    fileSizeLimit,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type ProjectStorageConfigUpdateUpdateData = Awaited<
+  ReturnType<typeof updateProjectStorageConfigUpdate>
+>
+
+export const useProjectStorageConfigUpdateUpdateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<
+    ProjectStorageConfigUpdateUpdateData,
+    unknown,
+    ProjectStorageConfigUpdateUpdateVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    ProjectStorageConfigUpdateUpdateData,
+    unknown,
+    ProjectStorageConfigUpdateUpdateVariables
+  >((vars) => updateProjectStorageConfigUpdate(vars), {
+    async onSuccess(data, variables, context) {
+      const { projectRef } = variables
+
+      await queryClient.invalidateQueries(configKeys.storage(projectRef))
+
+      await onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
diff --git a/studio/data/docs/keys.ts b/studio/data/docs/keys.ts
new file mode 100644
index 00000000000..b0f66362945
--- /dev/null
+++ b/studio/data/docs/keys.ts
@@ -0,0 +1,7 @@
+export const docsKeys = {
+  jsonSchema: (
+    projectRef: string | undefined,
+    swaggerUrl: string | undefined,
+    apiKey: string | undefined
+  ) => ['projects', projectRef, 'docs', { swaggerUrl, apiKey }] as const,
+}
diff --git a/studio/data/docs/project-json-schema-query.ts b/studio/data/docs/project-json-schema-query.ts
new file mode 100644
index 00000000000..f37f6dd55cb
--- /dev/null
+++ b/studio/data/docs/project-json-schema-query.ts
@@ -0,0 +1,75 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { useCallback } from 'react'
+import { docsKeys } from './keys'
+
+export type ProjectJsonSchemaVariables = {
+  projectRef?: string
+  swaggerUrl?: string
+  apiKey?: string
+}
+
+export type ProjectJsonSchemaResponse = any
+
+export async function getProjectJsonSchema(
+  { projectRef, swaggerUrl, apiKey }: ProjectJsonSchemaVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+  if (!swaggerUrl) {
+    throw new Error('id is required')
+  }
+
+  let headers: {
+    [key: string]: string | undefined
+  } = { apikey: apiKey }
+  if ((apiKey?.length ?? 0) > 40) headers['Authorization'] = `Bearer ${apiKey}`
+
+  const response = await get(swaggerUrl, {
+    signal,
+    headers,
+    credentials: 'omit',
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectJsonSchemaResponse
+}
+
+export type ProjectJsonSchemaData = Awaited<ReturnType<typeof getProjectJsonSchema>>
+export type ProjectJsonSchemaError = unknown
+
+export const useProjectJsonSchemaQuery = <TData = ProjectJsonSchemaData>(
+  { projectRef, swaggerUrl, apiKey }: ProjectJsonSchemaVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ProjectJsonSchemaData, ProjectJsonSchemaError, TData> = {}
+) =>
+  useQuery<ProjectJsonSchemaData, ProjectJsonSchemaError, TData>(
+    docsKeys.jsonSchema(projectRef, swaggerUrl, apiKey),
+    ({ signal }) => getProjectJsonSchema({ projectRef, swaggerUrl, apiKey }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined' && typeof swaggerUrl !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useProjectJsonSchemaPrefetch = ({
+  projectRef,
+  swaggerUrl,
+  apiKey,
+}: ProjectJsonSchemaVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef && swaggerUrl) {
+      client.prefetchQuery(docsKeys.jsonSchema(projectRef, swaggerUrl, apiKey), ({ signal }) =>
+        getProjectJsonSchema({ projectRef, swaggerUrl, apiKey }, signal)
+      )
+    }
+  }, [projectRef, swaggerUrl])
+}
diff --git a/studio/data/logs/keys.ts b/studio/data/logs/keys.ts
new file mode 100644
index 00000000000..c9ba47f22aa
--- /dev/null
+++ b/studio/data/logs/keys.ts
@@ -0,0 +1,4 @@
+export const logKeys = {
+  logStats: (projectRef: string | undefined, interval: string | undefined) =>
+    ['projects', projectRef, 'log-stats', interval] as const,
+}
diff --git a/studio/data/logs/project-log-stats-query.ts b/studio/data/logs/project-log-stats-query.ts
new file mode 100644
index 00000000000..b14039751e9
--- /dev/null
+++ b/studio/data/logs/project-log-stats-query.ts
@@ -0,0 +1,64 @@
+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 { logKeys } from './keys'
+
+export type ProjectLogStatsVariables = {
+  projectRef?: string
+  interval?: string
+}
+
+export type ProjectLogStatsResponse = any
+
+export async function getProjectLogStats(
+  { projectRef, interval }: ProjectLogStatsVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+  if (!interval) {
+    throw new Error('interval is required')
+  }
+
+  const response = await get(`${API_URL}/projects/${projectRef}/log-stats?interval=${interval}`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectLogStatsResponse
+}
+
+export type ProjectLogStatsData = Awaited<ReturnType<typeof getProjectLogStats>>
+export type ProjectLogStatsError = unknown
+
+export const useProjectLogStatsQuery = <TData = ProjectLogStatsData>(
+  { projectRef, interval }: ProjectLogStatsVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ProjectLogStatsData, ProjectLogStatsError, TData> = {}
+) =>
+  useQuery<ProjectLogStatsData, ProjectLogStatsError, TData>(
+    logKeys.logStats(projectRef, interval),
+    ({ signal }) => getProjectLogStats({ projectRef, interval }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined' && typeof interval !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useProjectLogStatsPrefetch = ({ projectRef, interval }: ProjectLogStatsVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef && interval) {
+      client.prefetchQuery(logKeys.logStats(projectRef, interval), ({ signal }) =>
+        getProjectLogStats({ projectRef, interval }, signal)
+      )
+    }
+  }, [projectRef, interval])
+}
diff --git a/studio/data/notifications/keys.ts b/studio/data/notifications/keys.ts
new file mode 100644
index 00000000000..9142775070a
--- /dev/null
+++ b/studio/data/notifications/keys.ts
@@ -0,0 +1,3 @@
+export const notificationKeys = {
+  list: () => ['notifications'] as const,
+}
diff --git a/studio/data/notifications/notifications-query.ts b/studio/data/notifications/notifications-query.ts
new file mode 100644
index 00000000000..7cbc6fb0c98
--- /dev/null
+++ b/studio/data/notifications/notifications-query.ts
@@ -0,0 +1,39 @@
+import { Notification } from '@supabase/shared-types/out/notifications'
+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 { notificationKeys } from './keys'
+
+export type NotificationsResponse = Notification[]
+
+export async function getNotifications(signal?: AbortSignal) {
+  const response = await get(`${API_URL}/notifications`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as NotificationsResponse
+}
+
+export type NotificationsData = Awaited<ReturnType<typeof getNotifications>>
+export type NotificationsError = unknown
+
+export const useNotificationsQuery = <TData = NotificationsData>(
+  options: UseQueryOptions<NotificationsData, NotificationsError, TData> = {}
+) =>
+  useQuery<NotificationsData, NotificationsError, TData>(
+    notificationKeys.list(),
+    ({ signal }) => getNotifications(signal),
+    options
+  )
+
+export const useNotificationsPrefetch = () => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    client.prefetchQuery(notificationKeys.list(), ({ signal }) => getNotifications(signal))
+  }, [])
+}
diff --git a/studio/data/organizations/free-project-limit-check-query.ts b/studio/data/organizations/free-project-limit-check-query.ts
new file mode 100644
index 00000000000..182e38ab065
--- /dev/null
+++ b/studio/data/organizations/free-project-limit-check-query.ts
@@ -0,0 +1,69 @@
+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 { organizationKeys } from './keys'
+
+export type MemberWithFreeProjectLimit = {
+  free_project_limit: number
+  primary_email: string
+  username: string
+}
+
+export type FreeProjectLimitCheckVariables = {
+  slug?: string
+}
+
+export type FreeProjectLimitCheckResponse = MemberWithFreeProjectLimit[]
+
+export async function getFreeProjectLimitCheck(
+  { slug }: FreeProjectLimitCheckVariables,
+  signal?: AbortSignal
+) {
+  if (!slug) {
+    throw new Error('slug is required')
+  }
+
+  const response = await get(
+    `${API_URL}/organizations/${slug}/members/reached-free-project-limit`,
+    {
+      signal,
+    }
+  )
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as FreeProjectLimitCheckResponse
+}
+
+export type FreeProjectLimitCheckData = Awaited<ReturnType<typeof getFreeProjectLimitCheck>>
+export type FreeProjectLimitCheckError = unknown
+
+export const useFreeProjectLimitCheckQuery = <TData = FreeProjectLimitCheckData>(
+  { slug }: FreeProjectLimitCheckVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<FreeProjectLimitCheckData, FreeProjectLimitCheckError, TData> = {}
+) =>
+  useQuery<FreeProjectLimitCheckData, FreeProjectLimitCheckError, TData>(
+    organizationKeys.freeProjectLimitCheck(slug),
+    ({ signal }) => getFreeProjectLimitCheck({ slug }, signal),
+    {
+      enabled: enabled && typeof slug !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useFreeProjectLimitCheckPrefetch = ({ slug }: FreeProjectLimitCheckVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (slug) {
+      client.prefetchQuery(organizationKeys.freeProjectLimitCheck(slug), ({ signal }) =>
+        getFreeProjectLimitCheck({ slug }, signal)
+      )
+    }
+  }, [slug])
+}
diff --git a/studio/data/organizations/keys.ts b/studio/data/organizations/keys.ts
new file mode 100644
index 00000000000..5b7250c028d
--- /dev/null
+++ b/studio/data/organizations/keys.ts
@@ -0,0 +1,6 @@
+export const organizationKeys = {
+  detail: (slug: string | undefined) => ['organizations', slug, 'detail'] as const,
+  roles: (slug: string | undefined) => ['organizations', slug, 'roles'] as const,
+  freeProjectLimitCheck: (slug: string | undefined) =>
+    ['organizations', slug, 'free-project-limit-check'] as const,
+}
diff --git a/studio/data/organizations/organization-detail-query.ts b/studio/data/organizations/organization-detail-query.ts
new file mode 100644
index 00000000000..34c46d9e306
--- /dev/null
+++ b/studio/data/organizations/organization-detail-query.ts
@@ -0,0 +1,87 @@
+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 { Member } from 'types'
+import { organizationKeys } from './keys'
+
+export type OrganizationDetailVariables = {
+  slug?: string
+}
+
+export type OrganizationDetailResponse = {
+  members: Member[]
+}
+
+export async function getOrganizationDetail(
+  { slug }: OrganizationDetailVariables,
+  signal?: AbortSignal
+) {
+  if (!slug) {
+    throw new Error('slug is required')
+  }
+
+  let [data, inviteData] = await Promise.all([
+    get(`${API_URL}/organizations/${slug}/members?member_roles`, {
+      signal,
+    }),
+    get(`${API_URL}/organizations/${slug}/members/invite`, {
+      signal,
+    }),
+  ])
+  if (data.error) {
+    throw data.error
+  }
+  if (inviteData.error) {
+    throw inviteData.error
+  }
+
+  if (data && inviteData && inviteData.length > 0) {
+    // Remap invite data to look like existing members data
+    const invitedMembers = inviteData.map((x: any) => {
+      const member = {
+        is_owner: false,
+        invited_at: x.invited_at,
+        invited_id: x.invited_id,
+        username: x.invited_email.slice(0, 1),
+        primary_email: x.invited_email,
+      }
+      return { ...member, role_ids: [x.role_id] }
+    })
+
+    data = [...data, ...invitedMembers]
+  }
+
+  return { members: data } as OrganizationDetailResponse
+}
+
+export type OrganizationDetailData = Awaited<ReturnType<typeof getOrganizationDetail>>
+export type OrganizationDetailError = unknown
+
+export const useOrganizationDetailQuery = <TData = OrganizationDetailData>(
+  { slug }: OrganizationDetailVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<OrganizationDetailData, OrganizationDetailError, TData> = {}
+) =>
+  useQuery<OrganizationDetailData, OrganizationDetailError, TData>(
+    organizationKeys.detail(slug),
+    ({ signal }) => getOrganizationDetail({ slug }, signal),
+    {
+      enabled: enabled && typeof slug !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useOrganizationDetailPrefetch = ({ slug }: OrganizationDetailVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (slug) {
+      client.prefetchQuery(organizationKeys.detail(slug), ({ signal }) =>
+        getOrganizationDetail({ slug }, signal)
+      )
+    }
+  }, [slug])
+}
diff --git a/studio/data/organizations/organization-member-delete-mutation.ts b/studio/data/organizations/organization-member-delete-mutation.ts
new file mode 100644
index 00000000000..73a8e43f98c
--- /dev/null
+++ b/studio/data/organizations/organization-member-delete-mutation.ts
@@ -0,0 +1,50 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { organizationKeys } from './keys'
+
+export type OrganizationMemberDeleteVariables = {
+  slug: string
+  gotrueId: string
+}
+
+export async function deleteOrganizationMember({
+  slug,
+  gotrueId,
+}: OrganizationMemberDeleteVariables) {
+  const response = await delete_(`${API_URL}/organizations/${slug}/members/${gotrueId}`)
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type OrganizationMemberDeleteData = Awaited<ReturnType<typeof deleteOrganizationMember>>
+
+export const useOrganizationMemberDeleteMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<OrganizationMemberDeleteData, unknown, OrganizationMemberDeleteVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<OrganizationMemberDeleteData, unknown, OrganizationMemberDeleteVariables>(
+    (vars) => deleteOrganizationMember(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { slug } = variables
+
+        await Promise.all([
+          queryClient.invalidateQueries(organizationKeys.detail(slug)),
+          queryClient.invalidateQueries(organizationKeys.roles(slug)),
+        ])
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/organizations/organization-member-invite-create-mutation.ts b/studio/data/organizations/organization-member-invite-create-mutation.ts
new file mode 100644
index 00000000000..b07df4f6756
--- /dev/null
+++ b/studio/data/organizations/organization-member-invite-create-mutation.ts
@@ -0,0 +1,63 @@
+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 OrganizationMemberInviteCreateVariables = {
+  slug: string
+  invitedEmail: string
+  ownerId: number
+  roleId: number
+}
+
+export async function createOrganizationMemberInvite({
+  slug,
+  invitedEmail,
+  ownerId,
+  roleId,
+}: OrganizationMemberInviteCreateVariables) {
+  const response = await post(`${API_URL}/organizations/${slug}/members/invite`, {
+    invited_email: invitedEmail,
+    owner_id: ownerId,
+    role_id: roleId,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type OrganizationMemberInviteCreateData = Awaited<ReturnType<typeof createOrganizationMemberInvite>>
+
+export const useOrganizationMemberInviteCreateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<
+    OrganizationMemberInviteCreateData,
+    unknown,
+    OrganizationMemberInviteCreateVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    OrganizationMemberInviteCreateData,
+    unknown,
+    OrganizationMemberInviteCreateVariables
+  >((vars) => createOrganizationMemberInvite(vars), {
+    async onSuccess(data, variables, context) {
+      const { slug } = variables
+
+      await Promise.all([
+        queryClient.invalidateQueries(organizationKeys.detail(slug)),
+        queryClient.invalidateQueries(organizationKeys.roles(slug)),
+      ])
+
+      await onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
diff --git a/studio/data/organizations/organization-member-invite-delete-mutation.ts b/studio/data/organizations/organization-member-invite-delete-mutation.ts
new file mode 100644
index 00000000000..a801f9795f0
--- /dev/null
+++ b/studio/data/organizations/organization-member-invite-delete-mutation.ts
@@ -0,0 +1,58 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { organizationKeys } from './keys'
+
+export type OrganizationMemberInviteDeleteVariables = {
+  slug: string
+  invitedId: number
+}
+
+export async function deleteOrganizationMemberInvite({
+  slug,
+  invitedId,
+}: OrganizationMemberInviteDeleteVariables) {
+  const response = await delete_(
+    `${API_URL}/organizations/${slug}/members/invite?invited_id=${invitedId}`,
+    {}
+  )
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type OrganizationMemberInviteDeleteData = Awaited<ReturnType<typeof deleteOrganizationMemberInvite>>
+
+export const useOrganizationMemberInviteDeleteMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<
+    OrganizationMemberInviteDeleteData,
+    unknown,
+    OrganizationMemberInviteDeleteVariables
+  >,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<
+    OrganizationMemberInviteDeleteData,
+    unknown,
+    OrganizationMemberInviteDeleteVariables
+  >((vars) => deleteOrganizationMemberInvite(vars), {
+    async onSuccess(data, variables, context) {
+      const { slug } = variables
+
+      await Promise.all([
+        queryClient.invalidateQueries(organizationKeys.detail(slug)),
+        queryClient.invalidateQueries(organizationKeys.roles(slug)),
+      ])
+
+      await onSuccess?.(data, variables, context)
+    },
+    ...options,
+  })
+}
diff --git a/studio/data/organizations/organization-member-update-mutation.ts b/studio/data/organizations/organization-member-update-mutation.ts
new file mode 100644
index 00000000000..bdfb211ebc7
--- /dev/null
+++ b/studio/data/organizations/organization-member-update-mutation.ts
@@ -0,0 +1,54 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { patch } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { organizationKeys } from './keys'
+
+export type OrganizationMemberUpdateVariables = {
+  slug: string
+  gotrueId: string
+  roleId: number
+}
+
+export async function updateOrganizationMember({
+  slug,
+  gotrueId,
+  roleId,
+}: OrganizationMemberUpdateVariables) {
+  const response = await patch(`${API_URL}/organizations/${slug}/members/${gotrueId}`, {
+    role_id: roleId,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type OrganizationMemberUpdateData = Awaited<ReturnType<typeof updateOrganizationMember>>
+
+export const useOrganizationMemberUpdateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<OrganizationMemberUpdateData, unknown, OrganizationMemberUpdateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<OrganizationMemberUpdateData, unknown, OrganizationMemberUpdateVariables>(
+    (vars) => updateOrganizationMember(vars),
+    {
+      async onSuccess(data, variables, context) {
+        const { slug } = variables
+
+        await Promise.all([
+          queryClient.invalidateQueries(organizationKeys.detail(slug)),
+          queryClient.invalidateQueries(organizationKeys.roles(slug)),
+        ])
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/organizations/organization-roles-query.ts b/studio/data/organizations/organization-roles-query.ts
new file mode 100644
index 00000000000..67618853e85
--- /dev/null
+++ b/studio/data/organizations/organization-roles-query.ts
@@ -0,0 +1,63 @@
+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 { Role } from 'types'
+import { organizationKeys } from './keys'
+
+export type OrganizationRolesVariables = {
+  slug?: string
+}
+
+export type OrganizationRolesResponse = {
+  roles: Role[]
+}
+
+export async function getOrganizationRoles(
+  { slug }: OrganizationRolesVariables,
+  signal?: AbortSignal
+) {
+  if (!slug) {
+    throw new Error('slug is required')
+  }
+
+  const data = await get(`${API_URL}/organizations/${slug}/roles`, {
+    signal,
+  })
+  if (data.error) {
+    throw data.error
+  }
+
+  return { roles: data } as OrganizationRolesResponse
+}
+
+export type OrganizationRolesData = Awaited<ReturnType<typeof getOrganizationRoles>>
+export type OrganizationRolesError = unknown
+
+export const useOrganizationRolesQuery = <TData = OrganizationRolesData>(
+  { slug }: OrganizationRolesVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<OrganizationRolesData, OrganizationRolesError, TData> = {}
+) =>
+  useQuery<OrganizationRolesData, OrganizationRolesError, TData>(
+    organizationKeys.roles(slug),
+    ({ signal }) => getOrganizationRoles({ slug }, signal),
+    {
+      enabled: enabled && typeof slug !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useOrganizationRolesPrefetch = ({ slug }: OrganizationRolesVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (slug) {
+      client.prefetchQuery(organizationKeys.roles(slug), ({ signal }) =>
+        getOrganizationRoles({ slug }, signal)
+      )
+    }
+  }, [slug])
+}
diff --git a/studio/data/permissions/keys.ts b/studio/data/permissions/keys.ts
new file mode 100644
index 00000000000..f90354c2b84
--- /dev/null
+++ b/studio/data/permissions/keys.ts
@@ -0,0 +1,3 @@
+export const permissionKeys = {
+  list: () => ['permissions'] as const,
+}
diff --git a/studio/data/permissions/permissions-query.ts b/studio/data/permissions/permissions-query.ts
new file mode 100644
index 00000000000..45d73e0d0a5
--- /dev/null
+++ b/studio/data/permissions/permissions-query.ts
@@ -0,0 +1,40 @@
+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 { Permission } from 'types'
+import { permissionKeys } from './keys'
+
+export type PermissionsResponse = Permission[]
+
+export async function getPermissions(signal?: AbortSignal) {
+  const response = await get(`${API_URL}/profile/permissions`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as PermissionsResponse
+}
+
+export type PermissionsData = Awaited<ReturnType<typeof getPermissions>>
+export type PermissionsError = unknown
+
+export const usePermissionsQuery = <TData = PermissionsData>({
+  enabled = true,
+  ...options
+}: UseQueryOptions<PermissionsData, PermissionsError, TData> = {}) =>
+  useQuery<PermissionsData, PermissionsError, TData>(
+    permissionKeys.list(),
+    ({ signal }) => getPermissions(signal),
+    options
+  )
+
+export const usePermissionsPrefetch = () => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    client.prefetchQuery(permissionKeys.list(), ({ signal }) => getPermissions(signal))
+  }, [])
+}
diff --git a/studio/data/platform/keys.ts b/studio/data/platform/keys.ts
new file mode 100644
index 00000000000..5b17e948137
--- /dev/null
+++ b/studio/data/platform/keys.ts
@@ -0,0 +1,3 @@
+export const platformKeys = {
+  status: () => ['platform', 'status'] as const,
+}
diff --git a/studio/data/platform/platform-status-query.ts b/studio/data/platform/platform-status-query.ts
new file mode 100644
index 00000000000..0cff8bfd4f5
--- /dev/null
+++ b/studio/data/platform/platform-status-query.ts
@@ -0,0 +1,40 @@
+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 { platformKeys } from './keys'
+
+export type PlatformStatusResponse = {
+  isHealthy: boolean
+}
+
+export async function getPlatformStatus(signal?: AbortSignal) {
+  const response = await get(`${API_URL}/status`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return { isHealthy: response.is_healthy } as PlatformStatusResponse
+}
+
+export type PlatformStatusData = Awaited<ReturnType<typeof getPlatformStatus>>
+export type PlatformStatusError = unknown
+
+export const usePlatformStatusQuery = <TData = PlatformStatusData>(
+  options: UseQueryOptions<PlatformStatusData, PlatformStatusError, TData> = {}
+) =>
+  useQuery<PlatformStatusData, PlatformStatusError, TData>(
+    platformKeys.status(),
+    ({ signal }) => getPlatformStatus(signal),
+    options
+  )
+
+export const usePlatformStatusPrefetch = () => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    client.prefetchQuery(platformKeys.status(), ({ signal }) => getPlatformStatus(signal))
+  }, [])
+}
diff --git a/studio/data/profile/keys.ts b/studio/data/profile/keys.ts
new file mode 100644
index 00000000000..49ba29ad7b7
--- /dev/null
+++ b/studio/data/profile/keys.ts
@@ -0,0 +1,3 @@
+export const profileKeys = {
+  profile: () => ['profile'] as const,
+}
diff --git a/studio/data/profile/profile-query.ts b/studio/data/profile/profile-query.ts
new file mode 100644
index 00000000000..d48256ef0d3
--- /dev/null
+++ b/studio/data/profile/profile-query.ts
@@ -0,0 +1,52 @@
+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 { profileKeys } from './keys'
+
+export type Profile = {
+  id: number
+  auth0_id: string
+  primary_email: string
+  username: string
+  first_name: string
+  last_name: string
+  mobile: string | null
+  is_alpha_user: boolean
+  gotrue_id: string
+  free_project_limit: number
+}
+
+export type ProfileResponse = Profile
+
+export async function getProfile(signal?: AbortSignal) {
+  const response = await get(`${API_URL}/profile`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProfileResponse
+}
+
+export type ProfileData = Awaited<ReturnType<typeof getProfile>>
+export type ProfileError = unknown
+
+export const useProfileQuery = <TData = ProfileData>({
+  enabled = true,
+  ...options
+}: UseQueryOptions<ProfileData, ProfileError, TData> = {}) =>
+  useQuery<ProfileData, ProfileError, TData>(
+    profileKeys.profile(),
+    ({ signal }) => getProfile(signal),
+    options
+  )
+
+export const useProfilePrefetch = () => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    client.prefetchQuery(profileKeys.profile(), ({ signal }) => getProfile(signal))
+  }, [])
+}
diff --git a/studio/data/profile/profile-update-mutation.ts b/studio/data/profile/profile-update-mutation.ts
new file mode 100644
index 00000000000..b1b9ba67252
--- /dev/null
+++ b/studio/data/profile/profile-update-mutation.ts
@@ -0,0 +1,45 @@
+import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { profileKeys } from './keys'
+
+export type ProfileUpdateVariables = {
+  firstName: string
+  lastName: string
+}
+
+export async function updateProfile({ firstName, lastName }: ProfileUpdateVariables) {
+  const response = await post(`${API_URL}/profile/update`, {
+    first_name: firstName,
+    last_name: lastName,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response
+}
+
+type ProfileUpdateData = Awaited<ReturnType<typeof updateProfile>>
+
+export const useProfileUpdateMutation = ({
+  onSuccess,
+  ...options
+}: Omit<
+  UseMutationOptions<ProfileUpdateData, unknown, ProfileUpdateVariables>,
+  'mutationFn'
+> = {}) => {
+  const queryClient = useQueryClient()
+
+  return useMutation<ProfileUpdateData, unknown, ProfileUpdateVariables>(
+    (vars) => updateProfile(vars),
+    {
+      async onSuccess(data, variables, context) {
+        await queryClient.invalidateQueries(profileKeys.profile())
+
+        await onSuccess?.(data, variables, context)
+      },
+      ...options,
+    }
+  )
+}
diff --git a/studio/data/subscriptions/keys.ts b/studio/data/subscriptions/keys.ts
new file mode 100644
index 00000000000..2b695295cc7
--- /dev/null
+++ b/studio/data/subscriptions/keys.ts
@@ -0,0 +1,4 @@
+export const subscriptionKeys = {
+  subscription: (projectRef: string | undefined) =>
+    ['projects', projectRef, 'subscription'] as const,
+}
diff --git a/studio/data/subscriptions/project-subscription-query.ts b/studio/data/subscriptions/project-subscription-query.ts
new file mode 100644
index 00000000000..8a3365dc9f9
--- /dev/null
+++ b/studio/data/subscriptions/project-subscription-query.ts
@@ -0,0 +1,61 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { StripeSubscription } from 'components/interfaces/Billing'
+import { get } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { subscriptionKeys } from './keys'
+
+export type ProjectSubscriptionVariables = {
+  projectRef?: string
+}
+
+export type ProjectSubscriptionResponse = StripeSubscription
+
+export async function getProjectSubscription(
+  { projectRef }: ProjectSubscriptionVariables,
+  signal?: AbortSignal
+) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/projects/${projectRef}/subscription`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectSubscriptionResponse
+}
+
+export type ProjectSubscriptionData = Awaited<ReturnType<typeof getProjectSubscription>>
+export type ProjectSubscriptionError = unknown
+
+export const useProjectSubscriptionQuery = <TData = ProjectSubscriptionData>(
+  { projectRef }: ProjectSubscriptionVariables,
+  {
+    enabled = true,
+    ...options
+  }: UseQueryOptions<ProjectSubscriptionData, ProjectSubscriptionError, TData> = {}
+) =>
+  useQuery<ProjectSubscriptionData, ProjectSubscriptionError, TData>(
+    subscriptionKeys.subscription(projectRef),
+    ({ signal }) => getProjectSubscription({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useProjectSubscriptionPrefetch = ({ projectRef }: ProjectSubscriptionVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(subscriptionKeys.subscription(projectRef), ({ signal }) =>
+        getProjectSubscription({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}
diff --git a/studio/data/usage/keys.ts b/studio/data/usage/keys.ts
new file mode 100644
index 00000000000..b37e6e2454f
--- /dev/null
+++ b/studio/data/usage/keys.ts
@@ -0,0 +1,3 @@
+export const usageKeys = {
+  usage: (projectRef: string | undefined) => ['projects', projectRef, 'usage'] as const,
+}
diff --git a/studio/data/usage/project-usage-query.ts b/studio/data/usage/project-usage-query.ts
new file mode 100644
index 00000000000..577fd0bfd69
--- /dev/null
+++ b/studio/data/usage/project-usage-query.ts
@@ -0,0 +1,97 @@
+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 { usageKeys } from './keys'
+
+export type ProjectUsageVariables = {
+  projectRef?: string
+}
+
+export interface DbSize {
+  usage: number | null
+  limit: number
+  cost: number
+  current: number
+  available_in_plan: boolean
+}
+
+export interface DbEgress {
+  usage: number
+  limit: number
+  cost: number
+  available_in_plan: boolean
+}
+
+export interface StorageSize {
+  usage: number | null
+  limit: number
+  cost: number
+  current: number
+  available_in_plan: boolean
+}
+
+export interface StorageEgress {
+  usage: number
+  limit: number
+  cost: number
+  available_in_plan: boolean
+}
+
+export interface MonthlyActiveUsers {
+  usage: number
+  limit: number
+  cost: number
+  available_in_plan: boolean
+}
+
+export type ProjectUsageResponse = {
+  db_size: DbSize
+  db_egress: DbEgress
+  storage_size: StorageSize
+  storage_egress: StorageEgress
+  monthly_active_users: MonthlyActiveUsers
+}
+
+export async function getProjectUsage({ projectRef }: ProjectUsageVariables, signal?: AbortSignal) {
+  if (!projectRef) {
+    throw new Error('projectRef is required')
+  }
+
+  const response = await get(`${API_URL}/projects/${projectRef}/usage`, {
+    signal,
+  })
+  if (response.error) {
+    throw response.error
+  }
+
+  return response as ProjectUsageResponse
+}
+
+export type ProjectUsageData = Awaited<ReturnType<typeof getProjectUsage>>
+export type ProjectUsageError = unknown
+
+export const useProjectUsageQuery = <TData = ProjectUsageData>(
+  { projectRef }: ProjectUsageVariables,
+  { enabled = true, ...options }: UseQueryOptions<ProjectUsageData, ProjectUsageError, TData> = {}
+) =>
+  useQuery<ProjectUsageData, ProjectUsageError, TData>(
+    usageKeys.usage(projectRef),
+    ({ signal }) => getProjectUsage({ projectRef }, signal),
+    {
+      enabled: enabled && typeof projectRef !== 'undefined',
+      ...options,
+    }
+  )
+
+export const useProjectUsagePrefetch = ({ projectRef }: ProjectUsageVariables) => {
+  const client = useQueryClient()
+
+  return useCallback(() => {
+    if (projectRef) {
+      client.prefetchQuery(usageKeys.usage(projectRef), ({ signal }) =>
+        getProjectUsage({ projectRef }, signal)
+      )
+    }
+  }, [projectRef])
+}
diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx
index 9c229fb7f83..0130ca85ed9 100644
--- a/studio/hooks/analytics/useDbQuery.tsx
+++ b/studio/hooks/analytics/useDbQuery.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import { DEFAULT_QUERY_PARAMS } from 'components/interfaces/Reports/Reports.constants'
 import {
   BaseReportParams,
@@ -6,28 +7,45 @@ import {
   MetaQueryResponse,
   DbQuery,
 } from 'components/interfaces/Reports/Reports.types'
-import { useStore } from 'hooks'
-import useSWR from 'swr'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { executeSql } from 'data/sql/execute-sql-query'
 
 type UseDbQuery = (sql: DbQuery['sql'], params?: BaseReportParams) => [DbQueryData, DbQueryHandler]
 const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
-  const { meta } = useStore()
+  const { project } = useProjectContext()
 
   const resolvedSql = typeof sql === 'function' ? sql(params) : sql
+
   const {
     data,
-    error: swrError,
-    isValidating: isLoading,
-    mutate,
-  } = useSWR<MetaQueryResponse>(resolvedSql, async () => await meta.query(resolvedSql), {
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    revalidateOnReconnect: false,
-    dedupingInterval: 2000,
-  })
+    error: rqError,
+    isLoading,
+    isRefetching,
+    refetch,
+  } = useQuery(
+    ['projects', project?.ref, 'db', { ...params, sql: resolvedSql }],
+    ({ signal }) => {
+      return executeSql(
+        {
+          projectRef: project?.ref,
+          connectionString: project?.connectionString,
+          sql: resolvedSql,
+        },
+        signal
+      ).then((res) => res.result) as Promise<MetaQueryResponse>
+    },
+    {
+      enabled: Boolean(resolvedSql),
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    }
+  )
 
-  const error = swrError || (typeof data === 'object' ? data?.error : '')
-  return [{ error, data, isLoading, params }, { runQuery: () => mutate() }]
+  const error = rqError || (typeof data === 'object' ? data?.error : '')
+  return [
+    { error, data, isLoading: isLoading || isRefetching, params },
+    { runQuery: () => refetch() },
+  ]
 }
 
 export default useDbQuery
diff --git a/studio/hooks/analytics/useLogsPreview.tsx b/studio/hooks/analytics/useLogsPreview.tsx
index fc65f7288de..15e5be9a7ab 100644
--- a/studio/hooks/analytics/useLogsPreview.tsx
+++ b/studio/hooks/analytics/useLogsPreview.tsx
@@ -1,3 +1,4 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import {
   Count,
   EventChart,
@@ -15,8 +16,6 @@ import {
   PREVIEWER_DATEPICKER_HELPERS,
 } from 'components/interfaces/Settings/Logs'
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
-import useSWR from 'swr'
-import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite'
 import { API_URL } from 'lib/constants'
 import { get } from 'lib/common/fetch'
 import dayjs from 'dayjs'
@@ -26,7 +25,7 @@ interface Data {
   error: string | Object | null
   newCount: number
   isLoading: boolean
-  pageSize: number
+  isLoadingOlder: boolean
   filters: Filters
   params: LogsEndpointParams
   oldestTimestamp?: string
@@ -64,51 +63,44 @@ function useLogsPreview(
     refresh()
   }, [JSON.stringify(filters)])
 
-  // handle url generation for log pagination
-  const getKeyLogs: SWRInfiniteKeyLoader = (_pageIndex: number, prevPageData: Logs) => {
-    let queryParams
-
-    // cancel request if no sql provided
-    if (!params.sql) {
-      // return null to restrict unnecessary requests to api
-      // https://swr.vercel.app/docs/conditional-fetching#conditional
-      return null
-    }
-
-    // if prev page data is 100 items, could possibly have more records that are not yet fetched within this interval
-    if (prevPageData === null) {
-      // reduce interval window limit by using the timestamp of the last log
-      queryParams = genQueryParams(params as any)
-    } else if ((prevPageData.result ?? []).length === 0) {
-      // no rows returned, indicates that no more data to retrieve and append.
-      return null
-    } else {
-      const len = prevPageData.result.length
-      const { timestamp: tsLimit }: LogData = prevPageData.result[len - 1]
-      const isoTsLimit = dayjs.utc(Number(tsLimit / 1000)).toISOString()
-      // create new key from params
-      queryParams = genQueryParams({ ...params, iso_timestamp_end: isoTsLimit } as any)
-    }
-    return `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${queryParams}`
-  }
+  const queryParamsKey = genQueryParams(params as any)
 
   const {
-    data = [],
-    error: swrError,
-    isValidating,
-    size,
-    setSize,
-  } = useSWRInfinite<Logs>(getKeyLogs, get, { revalidateOnFocus: false, dedupingInterval: 3000 })
+    data,
+    isLoading,
+    isRefetching,
+    error: rqError,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery(
+    ['projects', projectRef, 'logs', queryParamsKey],
+    ({ signal, pageParam }) => {
+      return get<Logs>(
+        `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${genQueryParams({
+          ...params,
+          iso_timestamp_end: pageParam,
+        } as any)}`,
+        { signal }
+      )
+    },
+    {
+      refetchOnWindowFocus: false,
+      getNextPageParam(lastPage) {
+        if ((lastPage?.result?.length ?? 0) === 0) {
+          return undefined
+        }
+        const len = lastPage.result.length
+        const { timestamp: tsLimit }: LogData = lastPage.result[len - 1]
+        const isoTsLimit = dayjs.utc(Number(tsLimit / 1000)).toISOString()
+        return isoTsLimit
+      },
+    }
+  )
+
   let logData: LogData[] = []
 
   const countUrl = () => {
-    // cancel request if no sql provided
-    if (!params.sql) {
-      // return null to restrict unnecessary requests to api
-      // https://swr.vercel.app/docs/conditional-fetching#conditional
-      return null
-    }
-
     return `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${genQueryParams({
       ...params,
       sql: genCountQuery(table, filters),
@@ -116,24 +108,26 @@ function useLogsPreview(
     } as any)}`
   }
 
-  const { data: countData } = useSWR<Count>(countUrl, get, {
-    revalidateOnFocus: false,
-    dedupingInterval: 5000,
-    refreshInterval: 5000,
-  })
+  const { data: countData } = useQuery(
+    [
+      'projects',
+      projectRef,
+      'logs-count',
+      { ...params, sql: genCountQuery(table, filters), iso_timestamp_start: latestRefresh },
+    ],
+    ({ signal }) => get<Count>(countUrl(), { signal }),
+    {
+      refetchOnWindowFocus: false,
+      refetchInterval: 5000,
+    }
+  )
+
   const newCount = countData?.result?.[0]?.count ?? 0
 
   // chart data
 
   const chartQuery = genChartQuery(table, params, filters)
   const chartUrl = () => {
-    // cancel request if no sql provided
-    if (!params.sql) {
-      // return null to restrict unnecessary requests to api
-      // https://swr.vercel.app/docs/conditional-fetching#conditional
-      return null
-    }
-
     return `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${genQueryParams({
       iso_timestamp_end: params.iso_timestamp_end,
       project: params.project,
@@ -141,26 +135,27 @@ function useLogsPreview(
     } as any)}`
   }
 
-  const { data: eventChartResponse, mutate: refreshEventChart } = useSWR<EventChart>(
-    chartUrl,
-    get,
-    {
-      revalidateOnFocus: false,
-      dedupingInterval: 10000,
-      refreshInterval: 0,
-    }
+  const { data: eventChartResponse, refetch: refreshEventChart } = useQuery(
+    [
+      'projects',
+      projectRef,
+      'logs-chart',
+      { iso_timestamp_end: params.iso_timestamp_end, project: params.project, sql: chartQuery },
+    ],
+    ({ signal }) => get<EventChart>(chartUrl(), { signal }),
+    { refetchOnWindowFocus: false }
   )
 
   const refresh = async () => {
     const generatedSql = genDefaultQuery(table, filters)
     setParams((prev) => ({ ...prev, sql: generatedSql }))
     setLatestRefresh(new Date().toISOString())
-    setSize(1)
     refreshEventChart()
+    refetch()
   }
 
-  let error: null | string | object = swrError ? swrError.message : null
-  data.forEach((response) => {
+  let error: null | string | object = rqError ? (rqError as any).message : null
+  data?.pages.forEach((response) => {
     if (!error && response?.result) {
       logData = [...logData, ...response.result]
     }
@@ -185,8 +180,8 @@ function useLogsPreview(
     {
       newCount,
       logData,
-      isLoading: isValidating,
-      pageSize: size,
+      isLoading: isLoading || isRefetching,
+      isLoadingOlder: isFetchingNextPage,
       error,
       filters,
       params,
@@ -196,7 +191,7 @@ function useLogsPreview(
     {
       setFilters: handleSetFilters,
       refresh,
-      loadOlder: () => setSize((prev) => prev + 1),
+      loadOlder: () => fetchNextPage(),
       setParams,
     },
   ]
diff --git a/studio/hooks/analytics/useLogsQuery.tsx b/studio/hooks/analytics/useLogsQuery.tsx
index be58c480c58..99fc2c41713 100644
--- a/studio/hooks/analytics/useLogsQuery.tsx
+++ b/studio/hooks/analytics/useLogsQuery.tsx
@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query'
 import {
   EXPLORER_DATEPICKER_HELPERS,
   genQueryParams,
@@ -6,7 +7,6 @@ import {
 import { Dispatch, SetStateAction, useState } from 'react'
 import { LogsEndpointParams, Logs, LogData } from 'components/interfaces/Settings/Logs/Logs.types'
 import { API_URL } from 'lib/constants'
-import useSWR from 'swr'
 import { get } from 'lib/common/fetch'
 export interface LogsQueryData {
   params: LogsEndpointParams
@@ -37,20 +37,28 @@ const useLogsQuery = (
       : defaultHelper.calcTo(),
   })
 
+  const enabled = typeof projectRef !== 'undefined' && Boolean(params.sql)
+
   const queryParams = genQueryParams(params as any)
   const {
     data,
-    error: swrError,
-    isValidating: isLoading,
-    mutate,
-  } = useSWR<Logs>(
-    params.sql
-      ? `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${queryParams}`
-      : null,
-    get,
-    { revalidateOnFocus: false }
+    error: rqError,
+    isLoading,
+    isRefetching,
+    refetch,
+  } = useQuery(
+    ['projects', projectRef, 'logs', queryParams],
+    ({ signal }) =>
+      get<Logs>(`${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${queryParams}`, {
+        signal,
+      }),
+    {
+      enabled,
+      refetchOnWindowFocus: false,
+    }
   )
-  let error: null | string | object = swrError ? swrError.message : null
+
+  let error: null | string | object = rqError ? (rqError as any).message : null
 
   if (!error && data?.error) {
     error = data?.error
@@ -60,8 +68,13 @@ const useLogsQuery = (
   }
 
   return [
-    { params, isLoading, logData: data?.result ? data?.result : [], error },
-    { changeQuery, runQuery: () => mutate(), setParams },
+    {
+      params,
+      isLoading: (enabled && isLoading) || isRefetching,
+      logData: data?.result ? data?.result : [],
+      error,
+    },
+    { changeQuery, runQuery: () => refetch(), setParams },
   ]
 }
 export default useLogsQuery
diff --git a/studio/hooks/analytics/useSingleLog.tsx b/studio/hooks/analytics/useSingleLog.tsx
index 1d468d18c6c..690c5df5eb3 100644
--- a/studio/hooks/analytics/useSingleLog.tsx
+++ b/studio/hooks/analytics/useSingleLog.tsx
@@ -7,9 +7,9 @@ import {
   LOGS_TABLES,
   QueryType,
 } from 'components/interfaces/Settings/Logs'
-import useSWR from 'swr'
 import { API_URL } from 'lib/constants'
 import { get } from 'lib/common/fetch'
+import { useQuery } from '@tanstack/react-query'
 
 interface Data {
   logData: LogData | undefined
@@ -20,38 +20,46 @@ interface Handlers {
   refresh: () => void
 }
 function useSingleLog(
-  project: string,
+  projectRef: string,
   queryType?: QueryType,
   paramsToMerge?: Partial<LogsEndpointParams>,
   id?: string | null
 ): [Data, Handlers] {
   const table = queryType ? LOGS_TABLES[queryType] : undefined
   const sql = id && table ? genSingleLogQuery(table, id) : ''
-  const params: LogsEndpointParams = { ...paramsToMerge, project, sql }
-  const endpointUrl = `${API_URL}/projects/${project}/analytics/endpoints/logs.all?${genQueryParams(
+  const params: LogsEndpointParams = { ...paramsToMerge, project: projectRef, sql }
+  const endpointUrl = `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${genQueryParams(
     params as any
   )}`
+
+  const enabled = Boolean(id && table)
+
   const {
     data,
-    error: swrError,
-    isValidating,
-    mutate,
-  } = useSWR<Logs>(id && table ? endpointUrl : null, get, {
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    revalidateOnReconnect: false,
-    dedupingInterval: 5000,
-  })
+    error: rcError,
+    isLoading,
+    isRefetching,
+    refetch,
+  } = useQuery(
+    ['projects', projectRef, 'log', id],
+    ({ signal }) => get(endpointUrl, { signal }) as Promise<Logs>,
+    {
+      enabled,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    }
+  )
 
-  let error: null | string | object = swrError ? swrError.message : null
+  let error: null | string | object = rcError ? (rcError as any).message : null
   return [
     {
       logData: data?.result ? data.result[0] : undefined,
-      isLoading: isValidating,
+      isLoading: (enabled && isLoading) || isRefetching,
       error,
     },
     {
-      refresh: () => mutate(),
+      refresh: () => refetch(),
     },
   ]
 }
diff --git a/studio/hooks/index.ts b/studio/hooks/index.ts
index 587af606a57..5995d22e059 100644
--- a/studio/hooks/index.ts
+++ b/studio/hooks/index.ts
@@ -2,9 +2,7 @@ export * from './misc/useStore'
 export * from './misc/withAuth'
 export * from './misc/useOptimisticSqlSnippetCreate'
 export * from './misc/useImmutableValue'
-export * from './misc/useNotifications'
-export * from './misc/usePlatformStatus'
 export * from './misc/useParams'
+export * from './misc/useCheckPermissions'
 export * from './deprecated'
-export * from './queries'
 export * from './ui'
diff --git a/studio/hooks/misc/useAutoAuthRedirect.tsx b/studio/hooks/misc/useAutoAuthRedirect.tsx
index eed587eaca7..3a63cae6976 100644
--- a/studio/hooks/misc/useAutoAuthRedirect.tsx
+++ b/studio/hooks/misc/useAutoAuthRedirect.tsx
@@ -1,7 +1,7 @@
+import { QueryClient } from '@tanstack/react-query'
 import { auth, getReturnToPath } from 'lib/gotrue'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect } from 'react'
-import { useSWRConfig } from 'swr'
 
 export function usePushNext() {
   const router = useRouter()
@@ -47,9 +47,8 @@ export function usePushNext() {
   )
 }
 
-function useAutoAuthRedirect() {
+function useAutoAuthRedirect(queryClient: QueryClient) {
   const pushNext = usePushNext()
-  const { cache } = useSWRConfig()
 
   useEffect(() => {
     const searchParams = new URLSearchParams(location.search)
@@ -75,9 +74,7 @@ function useAutoAuthRedirect() {
       } = await auth.getSession()
 
       if (session) {
-        // .clear() does actually exist on the cache object, but it's not in the types 🤦🏻
-        // @ts-ignore
-        cache.clear()
+        await queryClient.resetQueries()
 
         await pushNext()
       }
diff --git a/studio/hooks/queries/usePermissions.ts b/studio/hooks/misc/useCheckPermissions.ts
similarity index 51%
rename from studio/hooks/queries/usePermissions.ts
rename to studio/hooks/misc/useCheckPermissions.ts
index 537535324bd..9f9aa4f5883 100644
--- a/studio/hooks/queries/usePermissions.ts
+++ b/studio/hooks/misc/useCheckPermissions.ts
@@ -1,33 +1,6 @@
+import { useFlag, useStore } from 'hooks'
 import jsonLogic from 'json-logic-js'
-import { useStore } from 'hooks'
-import { get } from 'lib/common/fetch'
-import { API_URL, IS_PLATFORM } from 'lib/constants'
-import useSWR from 'swr'
-
-export function usePermissions(profile?: any, returning?: 'minimal') {
-  let url = `${API_URL}/profile/permissions`
-
-  if (returning) {
-    const query = new URLSearchParams({ returning }).toString()
-    url = `${url}?${query}`
-  }
-
-  const {
-    data: data,
-    error,
-    mutate,
-  } = useSWR<any>(profile !== undefined && IS_PLATFORM ? url : null, get, {
-    loadingTimeout: 10000,
-  })
-  const anyError = data?.error || error
-
-  return {
-    permissions: IS_PLATFORM ? (anyError ? undefined : data) : [],
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    mutate,
-  }
-}
+import { IS_PLATFORM } from 'lib/constants'
 
 const toRegexpString = (actionOrResource: string) =>
   `^${actionOrResource.replace('.', '\\.').replace('%', '.*')}$`
@@ -41,7 +14,7 @@ export function checkPermissions(
   if (!IS_PLATFORM) return true
 
   const { ui } = useStore()
-  const orgid = organizationId ?? ui?.selectedOrganization?.id
+  const orgId = organizationId ?? ui?.selectedOrganization?.id
 
   return (ui?.permissions ?? [])
     .filter(
@@ -53,7 +26,7 @@ export function checkPermissions(
       }) =>
         permission.actions.some((act) => (action ? action.match(toRegexpString(act)) : null)) &&
         permission.resources.some((res) => resource.match(toRegexpString(res))) &&
-        permission.organization_id === orgid
+        permission.organization_id === orgId
     )
     .some(
       ({ condition }: { condition: jsonLogic.RulesLogic }) =>
diff --git a/studio/hooks/misc/useNotifications.tsx b/studio/hooks/misc/useNotifications.tsx
deleted file mode 100644
index 23b8f35d3dd..00000000000
--- a/studio/hooks/misc/useNotifications.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import useSWR from 'swr'
-import { Notification } from '@supabase/shared-types/out/notifications'
-
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-
-export const useNotifications = () => {
-  const { data, error, mutate } = useSWR<Notification[]>(`${API_URL}/notifications`, get)
-
-  const anyError = (data as any)?.error || error !== undefined
-  const refresh = () => mutate()
-
-  return {
-    notifications: anyError ? undefined : data,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    refresh,
-  }
-}
diff --git a/studio/hooks/misc/usePlatformStatus.tsx b/studio/hooks/misc/usePlatformStatus.tsx
deleted file mode 100644
index 1fac085769d..00000000000
--- a/studio/hooks/misc/usePlatformStatus.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-
-export const usePlatformStatus = () => {
-  const { data, error, mutate } = useSWR<{ is_healthy: boolean }>(`${API_URL}/status`, get)
-
-  const anyError = (data as any)?.error || error !== undefined
-  const refresh = () => mutate()
-
-  return {
-    isHealthy: anyError ? undefined : data?.is_healthy,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    refresh,
-  }
-}
diff --git a/studio/hooks/misc/useProjectSubscription.tsx b/studio/hooks/misc/useProjectSubscription.tsx
deleted file mode 100644
index beb32f9ab71..00000000000
--- a/studio/hooks/misc/useProjectSubscription.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import useSWR from 'swr'
-
-export interface Tier {
-  name: string
-  prod_id: string
-  key: 'FREE' | 'PRO' | 'PAYG'
-  unit_amount: number
-}
-interface Data {
-  tier: Tier
-  addons: any[]
-  billing: {
-    billing_cycle_anchor: number
-    current_period_end: number
-    current_period_start: number
-  }
-}
-
-interface Handlers {
-  refresh: () => void
-}
-
-const useProjectSubscription = (projectRef: string): [Data | null, Handlers] => {
-  const { data, error, mutate } = useSWR<Data>(
-    projectRef ? `${API_URL}/projects/${projectRef}/subscription` : null,
-    get
-  )
-  const refresh = () => mutate()
-  if (!data) return [null, { refresh }]
-  if (error) return [null, { refresh }]
-  return [data, { refresh }]
-}
-
-export default useProjectSubscription
diff --git a/studio/hooks/misc/useUpgradePrompt.tsx b/studio/hooks/misc/useUpgradePrompt.tsx
index 71aa956ca23..f19f090c302 100644
--- a/studio/hooks/misc/useUpgradePrompt.tsx
+++ b/studio/hooks/misc/useUpgradePrompt.tsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react'
-import { useProjectSubscription } from 'hooks'
-import { useRouter } from 'next/router'
+import { useParams } from 'hooks'
 import { maybeShowUpgradePrompt } from 'components/interfaces/Settings/Logs'
-import { StripeProduct } from 'components/interfaces/Billing'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 
 export const useUpgradePrompt = (from: string) => {
-  const router = useRouter()
-  const { ref } = router.query
-  const { subscription } = useProjectSubscription(ref as string)
+  const { ref: projectRef } = useParams()
+  const { data: subscription } = useProjectSubscriptionQuery({ projectRef })
   const tier = subscription?.tier
   const [showUpgradePrompt, setShowUpgradePrompt] = useState(false)
 
diff --git a/studio/hooks/misc/withAuth.tsx b/studio/hooks/misc/withAuth.tsx
index d701d513282..b41734cb1c8 100644
--- a/studio/hooks/misc/withAuth.tsx
+++ b/studio/hooks/misc/withAuth.tsx
@@ -1,12 +1,14 @@
-import { ComponentType, useEffect } from 'react'
 import Head from 'next/head'
 import { NextRouter, useRouter } from 'next/router'
+import { ComponentType, useEffect } from 'react'
 
-import { getReturnToPath, STORAGE_KEY } from 'lib/gotrue'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useProfileQuery } from 'data/profile/profile-query'
+import { useStore } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
-import { useProfile, useStore, usePermissions } from 'hooks'
-import Error500 from '../../pages/500'
+import { getReturnToPath, STORAGE_KEY } from 'lib/gotrue'
 import { NextPageWithLayout } from 'types'
+import Error500 from '../../pages/500'
 
 const PLATFORM_ONLY_PAGES = [
   'reports',
@@ -34,14 +36,24 @@ export function withAuth<T>(
     const redirectTo = options?.redirectTo ?? defaultRedirectTo(ref)
     const redirectIfFound = options?.redirectIfFound
 
-    const returning =
-      app.projects.isInitialized && app.organizations.isInitialized ? 'minimal' : undefined
-    const { profile, isLoading, error } = useProfile(returning)
     const {
-      permissions,
-      isLoading: isPermissionLoading,
-      mutate: mutatePermissions,
-    } = usePermissions(profile, returning)
+      data: profile,
+      isLoading,
+      error,
+    } = useProfileQuery({
+      onSuccess(profile) {
+        ui.setProfile(profile)
+
+        if (!app.organizations.isInitialized) app.organizations.load()
+        if (!app.projects.isInitialized) app.projects.load()
+      },
+    })
+
+    usePermissionsQuery({
+      onSuccess(permissions) {
+        ui.setPermissions(permissions)
+      },
+    })
 
     const isAccessingBlockedPage =
       !IS_PLATFORM &&
@@ -51,31 +63,14 @@ export function withAuth<T>(
       checkRedirectTo(isLoading, router, profile, error, redirectTo, redirectIfFound)
 
     useEffect(() => {
-      // This should run before redirecting
-      if (!isLoading) {
-        if (!profile) {
-          ui.setProfile(undefined)
-        } else if (returning !== 'minimal') {
-          ui.setProfile(profile)
-
-          if (!app.organizations.isInitialized) app.organizations.load()
-          if (!app.projects.isInitialized) app.projects.load()
-          mutatePermissions()
-        }
-      }
-
-      if (!isPermissionLoading) {
-        ui.setPermissions(permissions)
-      }
-
       // This should run after setting store data
       if (isRedirecting) {
         router.push(redirectTo)
       }
-    }, [isLoading, isPermissionLoading, isRedirecting, profile, permissions])
+    }, [isRedirecting, redirectTo])
 
     useEffect(() => {
-      if (!isLoading && router.isReady) {
+      if (router.isReady) {
         if (ref) {
           rootStore.setProjectRef(Array.isArray(ref) ? ref[0] : ref)
         }
diff --git a/studio/hooks/queries/index.ts b/studio/hooks/queries/index.ts
deleted file mode 100644
index 4582c19b2fb..00000000000
--- a/studio/hooks/queries/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export * from './useJwtSecretUpdateStatus'
-export * from './useOrganizationDetail'
-export * from './useOrganizationRoles'
-export * from './useFreeProjectLimitCheck'
-export * from './usePermissions'
-export * from './useProfile'
-export * from './useProjectAuthConfig'
-export * from './useProjectSettings'
-export * from './useProjectSubscription'
-export * from './useProjectUsage'
-export * from './useProjectPostgrestConfig'
diff --git a/studio/hooks/queries/useAccessTokens.ts b/studio/hooks/queries/useAccessTokens.ts
deleted file mode 100644
index 918c827fbad..00000000000
--- a/studio/hooks/queries/useAccessTokens.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import useSWR, { mutate } from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-
-export interface AccessToken {
-  id: number
-  token_alias: string
-  name: string
-  created_at: number
-}
-
-export interface NewAccessToken extends AccessToken {
-  token: string
-}
-
-export function useAccessTokens() {
-  const url = `${API_URL}/profile/access-tokens`
-  let { data, error } = useSWR<any>(url, get)
-  const anyError = data?.error || error
-
-  function mutateNewToken(newToken: AccessToken, revalidate?: boolean) {
-    mutate(url, (data: AccessToken[]) => [...(data || []), newToken], revalidate ?? true)
-  }
-
-  function mutateDeleteToken(tokenId: number, revalidate?: boolean) {
-    mutate(
-      url,
-      (data: AccessToken[]) => data.filter((x: AccessToken) => x.id === tokenId),
-      revalidate ?? true
-    )
-  }
-
-  return {
-    tokens: anyError ? undefined : (data as AccessToken[]),
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    mutateNewToken,
-    mutateDeleteToken,
-  }
-}
diff --git a/studio/hooks/queries/useFreeProjectLimitCheck.ts b/studio/hooks/queries/useFreeProjectLimitCheck.ts
deleted file mode 100644
index 3884388ebdd..00000000000
--- a/studio/hooks/queries/useFreeProjectLimitCheck.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-
-export interface MemberWithFreeProjectLimit {
-  free_project_limit: number
-  primary_email: string
-  username: string
-}
-
-export function useFreeProjectLimitCheck(slug?: string) {
-  const url = `${API_URL}/organizations/${slug}/members/reached-free-project-limit`
-  const { data, error } = useSWR<any>(slug ? url : null, get)
-  const anyError = data?.error || error
-
-  return {
-    membersExceededLimit: anyError ? undefined : (data as MemberWithFreeProjectLimit[]),
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-  }
-}
diff --git a/studio/hooks/queries/useJwtSecretUpdateStatus.ts b/studio/hooks/queries/useJwtSecretUpdateStatus.ts
deleted file mode 100644
index 11cb7dc31ca..00000000000
--- a/studio/hooks/queries/useJwtSecretUpdateStatus.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
-import { API_URL } from 'lib/constants'
-
-export function useJwtSecretUpdateStatus(projectRef: string | string[] | undefined) {
-  const url = `${API_URL}/props/project/${projectRef}/jwt-secret-update-status`
-  const { data, error, mutate } = useSWR<any>(url, get, {
-    refreshInterval: (data) =>
-      data?.jwtSecretUpdateStatus?.meta?.status === JwtSecretUpdateStatus.Updating ? 1_000 : 0,
-  })
-  const anyError = data?.error || error
-  const meta = data?.jwtSecretUpdateStatus?.meta
-  return {
-    changeTrackingId: meta?.change_tracking_id,
-    error,
-    isError: !!anyError,
-    isLoading: !anyError && !data,
-    jwtSecretUpdateError: meta?.error,
-    jwtSecretUpdateProgress: meta?.progress,
-    jwtSecretUpdateStatus: meta?.status,
-    mutateJwtSecretUpdateStatus: mutate,
-  }
-}
diff --git a/studio/hooks/queries/useOrganizationDetail.ts b/studio/hooks/queries/useOrganizationDetail.ts
deleted file mode 100644
index e2f4253fef6..00000000000
--- a/studio/hooks/queries/useOrganizationDetail.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import useSWR, { mutate } from 'swr'
-
-import { Member } from 'types'
-import { API_URL } from 'lib/constants'
-import { get } from 'lib/common/fetch'
-
-export function useOrganizationDetail(slug: string) {
-  // Get org members
-  const url = `${API_URL}/organizations/${slug}/members?member_roles`
-
-  const { data, error } = useSWR<any>(slug ? url : null, get)
-  let members = data
-
-  // Get pending invite users
-  const pendingInviteUrl = `${API_URL}/organizations/${slug}/members/invite`
-  const { data: inviteData, error: inviteError } = useSWR<any>(slug ? pendingInviteUrl : null, get)
-
-  if (data && inviteData && inviteData.length > 0) {
-    // Remap invite data to look like existing members data
-    const invitedMembers = inviteData.map((x: any) => {
-      const member = {
-        is_owner: false,
-        invited_at: x.invited_at,
-        invited_id: x.invited_id,
-        username: x.invited_email.slice(0, 1),
-        primary_email: x.invited_email,
-      }
-      return { ...member, role_ids: [x.role_id] }
-    })
-
-    members = [...members, ...invitedMembers]
-  }
-
-  const anyError = data?.error || error || inviteError
-
-  function mutateOrgMembers(updatedMembers: Member[], revalidate?: boolean) {
-    mutate(url, [...updatedMembers], revalidate ?? true)
-    mutate(pendingInviteUrl, {}, revalidate ?? true)
-  }
-
-  return {
-    members: members as Member[],
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    mutateOrgMembers,
-  }
-}
diff --git a/studio/hooks/queries/useOrganizationRoles.ts b/studio/hooks/queries/useOrganizationRoles.ts
deleted file mode 100644
index 8267ec0ad9f..00000000000
--- a/studio/hooks/queries/useOrganizationRoles.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { Role } from 'types'
-
-// [Joshen] Putting roles in a hook for now for simplicity
-// Unless we plan to support CRUD on roles i think it can stay as a hook
-// otherwise, best to shift it to a store. If we do shift it, have it in the
-// App store to prevent confusion with PG roles
-
-export function useOrganizationRoles(slug?: string) {
-  const url = `${API_URL}/organizations/${slug}/roles`
-  const { data, error } = useSWR<any>(slug ? url : null, get)
-  const anyError = data?.error || error
-
-  return {
-    roles: anyError ? [] : (data as Role[]),
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-  }
-}
diff --git a/studio/hooks/queries/useProfile.ts b/studio/hooks/queries/useProfile.ts
deleted file mode 100644
index b4f8f78d79f..00000000000
--- a/studio/hooks/queries/useProfile.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import useSWR, { mutate } from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { User } from 'types'
-
-export function useProfile(returning?: 'minimal') {
-  let url = `${API_URL}/profile`
-
-  if (returning) {
-    const query = new URLSearchParams({ returning }).toString()
-    url = `${url}?${query}`
-  }
-
-  const { data, error } = useSWR<any>(url, get, { loadingTimeout: 10000 })
-  const anyError = data?.error || error
-
-  function mutateProfile(updatedUser: User, revalidate?: boolean) {
-    mutate(
-      url,
-      {
-        first_name: updatedUser.first_name,
-        last_name: updatedUser.last_name,
-      },
-      revalidate ?? true
-    )
-  }
-
-  return {
-    profile: anyError ? undefined : data,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    error: anyError,
-    mutateProfile,
-  }
-}
diff --git a/studio/hooks/queries/useProjectAuthConfig.ts b/studio/hooks/queries/useProjectAuthConfig.ts
deleted file mode 100644
index e658dc14543..00000000000
--- a/studio/hooks/queries/useProjectAuthConfig.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import useSWR, { mutate } from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-
-export function useProjectAuthConfig(ref: string) {
-  const url = `${API_URL}/auth/${ref}/config`
-  const { data, error } = useSWR<any>(url, get)
-  const anyError = data?.error || error
-
-  function mutateAuthConfig(updatedConfig: any, revalidate?: boolean) {
-    mutate(url, { ...updatedConfig }, revalidate ?? true)
-  }
-
-  return {
-    config: anyError ? undefined : data,
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    mutateAuthConfig,
-  }
-}
diff --git a/studio/hooks/queries/useProjectPostgrestConfig.ts b/studio/hooks/queries/useProjectPostgrestConfig.ts
deleted file mode 100644
index a18768bbb75..00000000000
--- a/studio/hooks/queries/useProjectPostgrestConfig.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-
-export function useProjectPostgrestConfig(ref?: string) {
-  const url = `${API_URL}/projects/${ref}/config/postgrest`
-  const { data, error, mutate } = useSWR<any>(ref ? url : null, get)
-  const anyError = data?.error || error
-
-  return {
-    config: anyError ? undefined : data,
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-    mutateConfig: mutate,
-  }
-}
diff --git a/studio/hooks/queries/useProjectSettings.ts b/studio/hooks/queries/useProjectSettings.ts
deleted file mode 100644
index cccebec4bb1..00000000000
--- a/studio/hooks/queries/useProjectSettings.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { get } from 'lib/common/fetch'
-import { API_URL, DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
-import useSWR from 'swr'
-
-export function useProjectSettings(ref?: string) {
-  const url = `${API_URL}/props/project/${ref}/settings`
-  const { data, error, mutate } = useSWR<any>(ref ? url : null, get, {
-    /**
-     * on project creation, the service_api_keys will be populated with a delay
-     * check for data.services.service_api_keys, return a valid refresh interval if it's empty
-     */
-    refreshInterval: function (data: any) {
-      const apiService = (data?.services ?? []).find(
-        (x: any) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID
-      )
-      const apiKeys = apiService?.service_api_keys ?? []
-      const interval = apiKeys.length === 0 ? 2000 : 0
-      return interval
-    },
-  })
-  const anyError = data?.error || error
-
-  return {
-    mutateSettings: mutate,
-    project: anyError ? undefined : data?.project,
-    services: anyError ? undefined : data?.services,
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-  }
-}
diff --git a/studio/hooks/queries/useProjectSubscription.ts b/studio/hooks/queries/useProjectSubscription.ts
deleted file mode 100644
index 48fcb2368a4..00000000000
--- a/studio/hooks/queries/useProjectSubscription.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { StripeSubscription } from 'components/interfaces/Billing'
-
-/**
- * Get project payg statistics
- *
- * todo: this looks like a duplicate
- * of /studio/hooks/misc/useProjectSubscription.tsx
- *
- * @param ref project reference
- */
-export function useProjectSubscription(ref: string | undefined) {
-  const url = `${API_URL}/projects/${ref}/subscription`
-  const { data, error } = useSWR<StripeSubscription & { error?: string }>(url, get)
-  const anyError = data?.error || error
-
-  return {
-    subscription: anyError ? null : (data as StripeSubscription),
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-  }
-}
diff --git a/studio/hooks/queries/useProjectUsage.ts b/studio/hooks/queries/useProjectUsage.ts
deleted file mode 100644
index aa1eb266c55..00000000000
--- a/studio/hooks/queries/useProjectUsage.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import useSWR from 'swr'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { UsageStats } from 'components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars.types'
-
-export function useProjectUsage(ref?: string) {
-  const url = `${API_URL}/projects/${ref}/usage`
-  const { data, error } = useSWR<any>(ref ? url : null, get)
-  const anyError = data?.error || error
-
-  return {
-    usage: anyError ? undefined : (data as UsageStats),
-    error: anyError,
-    isLoading: !anyError && !data,
-    isError: !!anyError,
-  }
-}
diff --git a/studio/package.json b/studio/package.json
index 1e7e8d7ea37..e6eea6a9c4b 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -84,7 +84,6 @@
     "semver": "^6.3.0",
     "shared-data": "*",
     "sqlstring": "^2.3.2",
-    "swr": "^1.2.1",
     "ui": "*",
     "uniforms-bootstrap4": "^3.6.2",
     "uniforms-bridge-json-schema": "^3.6.2",
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx
index 3ce83bd6fcc..d97675d69ef 100644
--- a/studio/pages/_app.tsx
+++ b/studio/pages/_app.tsx
@@ -98,7 +98,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  useAutoAuthRedirect()
+  useAutoAuthRedirect(queryClient)
 
   const getLayout = Component.getLayout ?? ((page) => page)
 
diff --git a/studio/pages/account/me.tsx b/studio/pages/account/me.tsx
index 9b3cbad9551..e5cdeeeb8bd 100644
--- a/studio/pages/account/me.tsx
+++ b/studio/pages/account/me.tsx
@@ -1,17 +1,16 @@
 import { observer } from 'mobx-react-lite'
 import { useEffect, useState } from 'react'
-import { Button, IconArrowRight, IconMoon, IconSun, Input, Listbox } from 'ui'
+import { Button, IconMoon, IconSun, Input, Listbox } from 'ui'
 
 import { Session } from '@supabase/supabase-js'
 import { AccountLayout } from 'components/layouts'
 import SchemaFormPanel from 'components/to-be-cleaned/forms/SchemaFormPanel'
 import Panel from 'components/ui/Panel'
-import { useProfile, useStore } from 'hooks'
-import { post } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
+import { useProfileUpdateMutation } from 'data/profile/profile-update-mutation'
+import { useStore } from 'hooks'
 import { auth } from 'lib/gotrue'
-import { NextPageWithLayout } from 'types'
 import Link from 'next/link'
+import { NextPageWithLayout } from 'types'
 
 const User: NextPageWithLayout = () => {
   return (
@@ -39,14 +38,16 @@ export default User
 
 const ProfileCard = observer(() => {
   const { ui } = useStore()
-  const { mutateProfile } = useProfile()
+  const { mutate } = useProfileUpdateMutation()
   const user = ui.profile
 
   const updateUser = async (model: any) => {
     try {
-      const updatedUser = await post(`${API_URL}/profile/update`, model)
-      mutateProfile(updatedUser, false)
-      ui.setProfile(updatedUser)
+      mutate({
+        firstName: model.first_name,
+        lastName: model.last_name,
+      })
+
       ui.setNotification({ category: 'success', message: 'Successfully saved profile' })
     } catch (error) {
       ui.setNotification({
diff --git a/studio/pages/join/index.tsx b/studio/pages/join/index.tsx
index be1c151a700..120db3cb51b 100644
--- a/studio/pages/join/index.tsx
+++ b/studio/pages/join/index.tsx
@@ -3,10 +3,11 @@ import { useState, useEffect } from 'react'
 import { useRouter } from 'next/router'
 import { Button, IconCheckSquare, Loading } from 'ui'
 
-import { useProfile, useStore } from 'hooks'
+import { useStore } from 'hooks'
 import { auth } from 'lib/gotrue'
 import { API_URL } from 'lib/constants'
 import { get, post, delete_ } from 'lib/common/fetch'
+import { useProfileQuery } from 'data/profile/profile-query'
 
 interface ITokenInfo {
   organization_name?: string | undefined
@@ -23,7 +24,7 @@ const JoinOrganizationPage = () => {
   const router = useRouter()
   const { slug, token, name } = router.query
   const { ui, app } = useStore()
-  const { profile } = useProfile()
+  const { data: profile } = useProfileQuery()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [error, setError] = useState(false)
diff --git a/studio/pages/new/[slug].tsx b/studio/pages/new/[slug].tsx
index fb677f75a92..9702dca4aac 100644
--- a/studio/pages/new/[slug].tsx
+++ b/studio/pages/new/[slug].tsx
@@ -21,13 +21,8 @@ import {
   PRICING_TIER_FREE_KEY,
   PRICING_TIER_PRODUCT_IDS,
 } from 'lib/constants'
-import {
-  useStore,
-  useFlag,
-  withAuth,
-  checkPermissions,
-  useFreeProjectLimitCheck,
-} from 'hooks'
+import { useStore, useFlag, withAuth, checkPermissions, useParams } from 'hooks'
+import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
 
 import { WizardLayoutWithoutAuth } from 'components/layouts'
 import Panel from 'components/ui/Panel'
@@ -41,13 +36,13 @@ import {
 
 const Wizard: NextPageWithLayout = () => {
   const router = useRouter()
-  const { slug } = router.query
+  const { slug } = useParams()
   const { app, ui } = useStore()
 
   const projectCreationDisabled = useFlag('disableProjectCreationAndUpdate')
   const kpsEnabled = useFlag('initWithKps')
-  const { membersExceededLimit, isLoading: isLoadingFreeProjectLimitCheck } =
-    useFreeProjectLimitCheck(slug as string)
+  const { data: membersExceededLimit, isLoading: isLoadingFreeProjectLimitCheck } =
+    useFreeProjectLimitCheckQuery({ slug })
 
   const [projectName, setProjectName] = useState('')
   const [dbPass, setDbPass] = useState('')
@@ -197,17 +192,14 @@ const Wizard: NextPageWithLayout = () => {
   return (
     <Panel
       hideHeaderStyling
-      loading={
-        !app.organizations.isInitialized ||
-        isLoadingFreeProjectLimitCheck
-      }
+      loading={!app.organizations.isInitialized || isLoadingFreeProjectLimitCheck}
       title={
         <div key="panel-title">
           <h3>Create a new project</h3>
         </div>
       }
       footer={
-        <div key="panel-footer" className="flex w-full items-center justify-between">
+        <div key="panel-footer" className="flex items-center justify-between w-full">
           <Button type="default" onClick={() => Router.push('/projects')}>
             Cancel
           </Button>
@@ -236,7 +228,7 @@ const Wizard: NextPageWithLayout = () => {
           </p>
         </Panel.Content>
         {projectCreationDisabled ? (
-          <Panel.Content className="border-t border-panel-border-interior-light pb-8 dark:border-panel-border-interior-dark">
+          <Panel.Content className="pb-8 border-t border-panel-border-interior-light dark:border-panel-border-interior-dark">
             <DisabledWarningDueToIncident title="Project creation is currently disabled" />
           </Panel.Content>
         ) : (
@@ -290,7 +282,7 @@ const Wizard: NextPageWithLayout = () => {
                   />
                 </Panel.Content>
 
-                <Panel.Content className="Form section-block--body has-inputs-centered border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
+                <Panel.Content className="border-b Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Input
                     id="password"
                     copy={dbPass.length > 0}
@@ -312,7 +304,7 @@ const Wizard: NextPageWithLayout = () => {
                   />
                 </Panel.Content>
 
-                <Panel.Content className="Form section-block--body has-inputs-centered border-b border-panel-border-interior-light dark:border-panel-border-interior-dark">
+                <Panel.Content className="border-b Form section-block--body has-inputs-centered border-panel-border-interior-light dark:border-panel-border-interior-dark">
                   <Listbox
                     layout="horizontal"
                     label="Region"
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx
index 4a793b45190..82bed5db772 100644
--- a/studio/pages/project/[ref]/api/index.tsx
+++ b/studio/pages/project/[ref]/api/index.tsx
@@ -1,17 +1,16 @@
-import useSWR, { mutate } from 'swr'
 import { useRouter } from 'next/router'
 import { Button, Dropdown, IconKey } from 'ui'
 import { FC, createContext, useContext, useEffect, useState } from 'react'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 
 import { NextPageWithLayout } from 'types'
-import { checkPermissions, useStore } from 'hooks'
-import { get } from 'lib/common/fetch'
+import { checkPermissions, useParams, useStore } from '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 { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
+import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 
 const PageContext = createContext(null)
 
@@ -66,37 +65,41 @@ const DEFAULT_KEY = { name: 'hide', key: 'SUPABASE_KEY' }
 
 const DocView: FC<any> = observer(({}) => {
   const PageState: any = useContext(PageContext)
-  const router = useRouter()
+  const { ref: projectRef, page, resource, rpc } = useParams()
   const [selectedLang, setSelectedLang] = useState<any>('js')
   const [showApiKey, setShowApiKey] = useState<any>(DEFAULT_KEY)
 
-  const { data, error } = useProjectSettingsQuery({ projectRef: PageState.projectRef as string })
-  const API_KEY = data?.autoApiService.service_api_keys.find((key: any) => key.tags === 'anon')
-    ? data.autoApiService.defaultApiKey
+  const { data, error } = useProjectApiQuery({
+    projectRef,
+  })
+
+  const apiService = data?.autoApiService
+  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
+    ? apiService.defaultApiKey
     : undefined
-  const swaggerUrl = data?.autoApiService.restUrl
-  const headers: any = { apikey: API_KEY }
+  const swaggerUrl = data?.autoApiService?.restUrl
 
   const canReadServiceKey = checkPermissions(
     PermissionAction.READ,
     'service_api_keys.service_role_key'
   )
 
-  if (API_KEY) headers['Authorization'] = `Bearer ${API_KEY}`
-
-  const { data: jsonSchema, error: jsonSchemaError } = useSWR(
-    () => swaggerUrl,
-    (url: string) => get(url, { headers, credentials: 'omit' }).then((res) => res)
-  )
+  const {
+    data: jsonSchema,
+    error: jsonSchemaError,
+    refetch,
+  } = useProjectJsonSchemaQuery({
+    projectRef,
+    swaggerUrl,
+    apiKey: anonKey,
+  })
 
   useEffect(() => {
     PageState.setJsonSchema(jsonSchema)
   }, [jsonSchema])
 
   const refreshDocs = async () => {
-    // A bit hacky calling coding this up twice - at some point we should move this function
-    // and the SWR into the store.
-    mutate(swaggerUrl)
+    await refetch()
   }
 
   if (error || jsonSchemaError)
@@ -121,8 +124,6 @@ const DocView: FC<any> = observer(({}) => {
     endpoint: `${data.autoApiService.protocol ?? 'https'}://${data.autoApiService.endpoint ?? '-'}`,
   }
 
-  const { query } = router
-  const { page, resource, rpc } = query
   const { paths, definitions } = PageState.jsonSchema
 
   const PAGE_KEY: any = resource || rpc || page || 'index'
@@ -174,7 +175,7 @@ const DocView: FC<any> = observer(({}) => {
                           key="anon"
                           onClick={() =>
                             setShowApiKey({
-                              key: API_KEY,
+                              key: anonKey,
                               name: 'anon (public)',
                             })
                           }
diff --git a/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx b/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx
deleted file mode 100644
index 11965f726f1..00000000000
--- a/studio/pages/project/[ref]/database/hooks/[id]/logs.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import useSWR from 'swr'
-import dayjs from 'dayjs'
-import { useRouter } from 'next/router'
-import { uniqBy, map as lodashMap } from 'lodash'
-import { FC, useState, useEffect } from 'react'
-import { Button } from 'ui'
-import { observer } from 'mobx-react-lite'
-
-import { useStore } from 'hooks'
-import { get } from 'lib/common/fetch'
-import { API_URL } from 'lib/constants'
-import { DatabaseLayout } from 'components/layouts'
-import { NextPageWithLayout } from 'types'
-
-const FunctionsPage: NextPageWithLayout = () => {
-  return (
-    <div className="flex">
-      <div className="my-4 w-full">
-        <HookLogs />
-      </div>
-    </div>
-  )
-}
-
-FunctionsPage.getLayout = (page) => <DatabaseLayout title="Hooks">{page}</DatabaseLayout>
-
-export default observer(FunctionsPage)
-
-const HookLogs: FC<any> = observer(() => {
-  const router = useRouter()
-  const { id: hookId } = router.query
-
-  const { meta } = useStore()
-
-  const [hooksData, setHooksData] = useState<any>([])
-  const schemas = lodashMap(uniqBy(hooksData, 'schema'), 'schema')
-
-  useEffect(() => {
-    const fetchHooks = async () => {
-      await meta.hooks.load()
-      const hooksData = meta.hooks.list()
-      setHooksData(hooksData)
-    }
-    fetchHooks()
-  }, [])
-
-  const logsUrl = `${API_URL}/database/${router.query.ref}/hook-logs?id=${hookId}`
-  const { data: logsData, error: logsError }: any = useSWR(logsUrl, get)
-
-  if (meta.hooks.hasError) {
-    return (
-      <p className="text-scale-1000">
-        <p>Error connecting to API</p>
-        <p>{`${meta.hooks.error}`}</p>
-      </p>
-    )
-  }
-
-  if (logsError) {
-    return (
-      <p className="text-scale-1000">
-        <p>Error connecting to API</p>
-        <p>{`${logsError.error}`}</p>
-      </p>
-    )
-  }
-
-  if (meta.hooks.isLoading || !logsData) {
-    return <p className="px-6 py-4">Loading hook logs...</p>
-  }
-
-  return (
-    <div className="space-y-8">
-      {/* <CreateHook /> */}
-      <div className="px-6">
-        <h4 className="text-lg">{hooksData.name} logs</h4>
-        <div className="space-x-3">
-          <Button>All</Button>
-          <Button>Errors</Button>
-        </div>
-      </div>
-
-      <div className="border-t border-b bg-bg-alt-light">
-        <div className="divide-y-2 ">
-          {logsData?.map((log: any, i: number) => {
-            return (
-              <div key={i} className="flex flex-col space-y-1 py-4 px-6">
-                <div className="flex items-center justify-between">
-                  <div className="space-x-3">
-                    <p className="font-mono text-scale-1000">[{log.method}]</p>
-                    <p className="font-mono">{log.url}</p>
-                  </div>
-                  <p className="font-mono text-scale-1000">
-                    {dayjs(log.created_at).format('DDMMYYY')}
-                  </p>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-})
diff --git a/studio/pages/project/[ref]/functions/[id]/details.tsx b/studio/pages/project/[ref]/functions/[id]/details.tsx
index 248434f9d84..613833e4f31 100644
--- a/studio/pages/project/[ref]/functions/[id]/details.tsx
+++ b/studio/pages/project/[ref]/functions/[id]/details.tsx
@@ -1,20 +1,18 @@
 import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { IconGlobe, IconTerminal } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
-import { useProjectSettingsQuery } from 'data/config/project-settings-query'
-import { checkPermissions, useStore } from 'hooks'
+import { checkPermissions, useParams, useStore } from 'hooks'
+import { useProjectApiQuery } from 'data/config/project-api-query'
 import FunctionsLayout from 'components/layouts/FunctionsLayout'
 import CommandRender from 'components/interfaces/Functions/CommandRender'
 import NoPermission from 'components/ui/NoPermission'
 
 const PageLayout: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref, id } = router.query
+  const { ref: projectRef, id } = useParams()
 
   const { functions, ui } = useStore()
 
@@ -24,6 +22,10 @@ const PageLayout: NextPageWithLayout = () => {
     setSelectedFunction(functions.byId(id))
   }, [functions.isLoaded, ui.selectedProject])
 
+  const { data: settings } = useProjectApiQuery({
+    projectRef,
+  })
+
   // get the .co or .net TLD from the restUrl
   const restUrl = ui.selectedProject?.restUrl
   const restUrlTld = new URL(restUrl as string).hostname.split('.').pop()
@@ -97,13 +99,12 @@ const PageLayout: NextPageWithLayout = () => {
   ]
 
   // Get the API service
-  const { data: settings } = useProjectSettingsQuery({ projectRef: ref as string })
   const apiService = settings?.autoApiService
-  const anonKey = apiService?.service_api_keys.find((x: any) => x.name === 'anon key')
+  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
     ? apiService.defaultApiKey
     : undefined
 
-  const endpoint = apiService?.endpoint ?? ''
+  const endpoint = apiService?.app_config.endpoint ?? ''
   const endpointSections = endpoint.split('.')
   const functionsEndpoint = [
     ...endpointSections.slice(0, 1),
@@ -113,7 +114,7 @@ const PageLayout: NextPageWithLayout = () => {
 
   const invokeCommands: any = [
     {
-      command: `curl -L -X POST 'https://${ref}.functions.supabase.${restUrlTld}/${
+      command: `curl -L -X POST 'https://${projectRef}.functions.supabase.${restUrlTld}/${
         selectedFunction?.slug
       }' -H 'Authorization: Bearer ${anonKey ?? '[YOUR ANON KEY]'}' --data '{"name":"Functions"}'`,
       description: 'Invokes the hello function',
@@ -176,7 +177,7 @@ const PageLayout: NextPageWithLayout = () => {
           <div className="grid grid-cols-3">
             <span className="cols-span-1 mb-1 block text-sm text-scale-1000">Endpoint URL</span>
             <div className="col-span-2">
-              <span className="w-full break-words text-sm text-scale-1200">{`https://${ref}.functions.supabase.co/${selectedFunction?.slug}`}</span>
+              <span className="w-full break-words text-sm text-scale-1200">{`https://${projectRef}.functions.supabase.co/${selectedFunction?.slug}`}</span>
             </div>
           </div>
 
diff --git a/studio/pages/project/[ref]/functions/[id]/index.tsx b/studio/pages/project/[ref]/functions/[id]/index.tsx
index ad4faaa7b92..ed3b891d2a2 100644
--- a/studio/pages/project/[ref]/functions/[id]/index.tsx
+++ b/studio/pages/project/[ref]/functions/[id]/index.tsx
@@ -1,4 +1,3 @@
-import useSWR from 'swr'
 import dayjs from 'dayjs'
 import { useState } from 'react'
 import { useRouter } from 'next/router'
@@ -6,10 +5,10 @@ import { Button } from 'ui'
 import { observer } from 'mobx-react-lite'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
-import { checkPermissions } from 'hooks'
+import { checkPermissions, useParams } from 'hooks'
+import { useFunctionsInvStatsQuery } from 'data/analytics/functions-inv-stats-query'
 import { ChartIntervals, NextPageWithLayout } from 'types'
-import { get } from 'lib/common/fetch'
-import { API_URL, DATE_FORMAT } from 'lib/constants'
+import { DATE_FORMAT } from 'lib/constants'
 import Panel from 'components/ui/Panel'
 import NoPermission from 'components/ui/NoPermission'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
@@ -50,17 +49,17 @@ function calculateHighlightedValue(array: any, attribute: string, options?: { su
 
 const PageLayout: NextPageWithLayout = () => {
   const router = useRouter()
-  const { ref, id } = router.query
+  const { ref: projectRef, id } = useParams()
 
   const [interval, setInterval] = useState<string>('15min')
 
-  const url = `${API_URL}/projects/${ref}/analytics/endpoints/functions.inv-stats`
   const selectedInterval = CHART_INTERVALS.find((i) => i.key === interval) || CHART_INTERVALS[1]
 
-  const { data, error }: any = useSWR(
-    `${url}?interval=${selectedInterval.key}&function_id=${id}`,
-    get
-  )
+  const { data, error } = useFunctionsInvStatsQuery({
+    projectRef,
+    functionId: id,
+    interval: selectedInterval.key,
+  })
 
   const startDate = dayjs()
     .subtract(selectedInterval.startValue, selectedInterval.startUnit)
@@ -81,9 +80,9 @@ const PageLayout: NextPageWithLayout = () => {
     if (timestampDigits < 16) {
       // pad unix timestamp with additional 0 and then forward
       const paddedTimestamp = String(timestamp) + '0'.repeat(16 - timestampDigits)
-      router.push(`/project/${ref}/functions/${id}/logs?te=${paddedTimestamp}`)
+      router.push(`/project/${projectRef}/functions/${id}/logs?te=${paddedTimestamp}`)
     } else {
-      router.push(`/project/${ref}/functions/${id}/logs?te=${timestamp}`)
+      router.push(`/project/${projectRef}/functions/${id}/logs?te=${timestamp}`)
     }
   }
 
diff --git a/studio/pages/project/[ref]/logs/explorer/index.tsx b/studio/pages/project/[ref]/logs/explorer/index.tsx
index 52d7906b166..2a93f527629 100644
--- a/studio/pages/project/[ref]/logs/explorer/index.tsx
+++ b/studio/pages/project/[ref]/logs/explorer/index.tsx
@@ -4,8 +4,9 @@ import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { Input, Modal, Form, Button } from 'ui'
 
-import { useProjectSubscription, useStore } from 'hooks'
+import { useParams, useStore } from 'hooks'
 import useLogsQuery from 'hooks/analytics/useLogsQuery'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { NextPageWithLayout, UserContent } from 'types'
 import { uuidv4 } from 'lib/helpers'
 import { LogsLayout } from 'components/layouts'
@@ -28,20 +29,18 @@ import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
 
 export const LogsExplorerPage: NextPageWithLayout = () => {
+  const { ui, content } = useStore()
   const router = useRouter()
-  const { ui } = useStore()
-
-  const { ref, q, ite, its } = router.query
+  const { ref: projectRef, q, ite, its } = useParams()
   const [editorId, setEditorId] = useState<string>(uuidv4())
   const [editorValue, setEditorValue] = useState<string>('')
   const [saveModalOpen, setSaveModalOpen] = useState<boolean>(false)
   const [warnings, setWarnings] = useState<LogsWarning[]>([])
-  const { content } = useStore()
-  const { subscription } = useProjectSubscription(ref as string)
+  const { data: subscription } = useProjectSubscriptionQuery({ projectRef })
   const tier = subscription?.tier
 
   const [{ params, logData, error, isLoading }, { changeQuery, runQuery, setParams }] =
-    useLogsQuery(ref as string, {
+    useLogsQuery(projectRef as string, {
       iso_timestamp_start: its ? (its as string) : undefined,
       iso_timestamp_end: ite ? (ite as string) : undefined,
     })
@@ -148,11 +147,11 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
   }
 
   return (
-    <div className="mx-auto w-full px-5 py-6 h-full">
+    <div className="w-full h-full px-5 py-6 mx-auto">
       <LogsExplorerHeader />
 
-      <div className="flex h-full flex-grow flex-col gap-4">
-        <div className="rounded border">
+      <div className="flex flex-col flex-grow h-full gap-4">
+        <div className="border rounded">
           <LogsQueryPanel
             defaultFrom={params.iso_timestamp_start || ''}
             defaultTo={params.iso_timestamp_end || ''}
@@ -178,13 +177,18 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
             />
           </div>
         </div>
-        <div className="relative flex flex-grow flex-col">
+        <div className="relative flex flex-col flex-grow">
           <LoadingOpacity active={isLoading}>
-            <div className="flex h-full flex-grow">
-              <LogTable params={params} data={logData} error={error} projectRef={ref as string} />
+            <div className="flex flex-grow h-full">
+              <LogTable
+                params={params}
+                data={logData}
+                error={error}
+                projectRef={projectRef as string}
+              />
             </div>
           </LoadingOpacity>
-          <div className="mt-2 flex flex-row justify-end">
+          <div className="flex flex-row justify-end mt-2">
             <UpgradePrompt show={showUpgradePrompt} setShowUpgradePrompt={setShowUpgradePrompt} />
           </div>
         </div>
@@ -256,7 +260,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
                   </div>
                 </Modal.Content>
               </div>
-              <div className="border-t bg-scale-300 py-3">
+              <div className="py-3 border-t bg-scale-300">
                 <Modal.Content>
                   <div className="flex items-center justify-end gap-2">
                     <Button
diff --git a/studio/pages/project/[ref]/reports/[id].tsx b/studio/pages/project/[ref]/reports/[id].tsx
index 8687314216c..01101070ba6 100644
--- a/studio/pages/project/[ref]/reports/[id].tsx
+++ b/studio/pages/project/[ref]/reports/[id].tsx
@@ -1,9 +1,8 @@
+import Reports from 'components/interfaces/Reports/Reports'
+import { ReportsLayout } from 'components/layouts'
+import EditReportModal from 'components/to-be-cleaned/Reports/EditReportModal'
 import { observer } from 'mobx-react-lite'
 import { NextPageWithLayout } from 'types'
-import { ProjectLayoutWithAuth } from 'components/layouts'
-import EditReportModal from 'components/to-be-cleaned/Reports/EditReportModal'
-import Reports from 'components/interfaces/Reports/Reports'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 
 const PageLayout: NextPageWithLayout = () => (
   <>
diff --git a/studio/pages/project/[ref]/reports/api.tsx b/studio/pages/project/[ref]/reports/api.tsx
index 48707940d5c..31f799665c7 100644
--- a/studio/pages/project/[ref]/reports/api.tsx
+++ b/studio/pages/project/[ref]/reports/api.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 
 import { NextPageWithLayout } from 'types'
 import { Presets } from 'components/interfaces/Reports/Reports.types'
-import ReportsLayout from 'components/layouts'
+import { ReportsLayout } from 'components/layouts'
 import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
 import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
diff --git a/studio/pages/project/[ref]/reports/auth.tsx b/studio/pages/project/[ref]/reports/auth.tsx
index 6a164a3e9f5..6e0419aedb6 100644
--- a/studio/pages/project/[ref]/reports/auth.tsx
+++ b/studio/pages/project/[ref]/reports/auth.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 
 import { NextPageWithLayout } from 'types'
 import { Presets } from 'components/interfaces/Reports/Reports.types'
-import ReportsLayout from 'components/layouts'
+import { ReportsLayout } from 'components/layouts'
 import { hooksFactory, usePresetReport } from 'components/interfaces/Reports/Reports.utils'
 import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
diff --git a/studio/pages/project/[ref]/reports/database.tsx b/studio/pages/project/[ref]/reports/database.tsx
index 75c8f6ee23f..253fcc54f6d 100644
--- a/studio/pages/project/[ref]/reports/database.tsx
+++ b/studio/pages/project/[ref]/reports/database.tsx
@@ -1,19 +1,19 @@
 import dayjs from 'dayjs'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { FC, useEffect, useState } from 'react'
 import { IconArrowRight } from 'ui'
 
-import { useStore, useProjectUsage } from 'hooks'
-import { formatBytes } from 'lib/helpers'
+import { useParams, useStore } from 'hooks'
 import { TIME_PERIODS_INFRA, USAGE_APPROACHING_THRESHOLD } from 'lib/constants'
+import { formatBytes } from 'lib/helpers'
 import { NextPageWithLayout } from 'types'
 
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { ReportsLayout } from 'components/layouts'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import Panel from 'components/ui/Panel'
 import SparkBar from 'components/ui/SparkBar'
+import { useProjectUsageQuery } from 'data/usage/project-usage-query'
 
 const DatabaseReport: NextPageWithLayout = () => {
   const { ui } = useStore()
@@ -35,13 +35,12 @@ DatabaseReport.getLayout = (page) => <ReportsLayout title="Database">{page}</Rep
 export default observer(DatabaseReport)
 
 const DatabaseUsage: FC<any> = () => {
-  const router = useRouter()
   const { meta, ui } = useStore()
   const [databaseSize, setDatabaseSize] = useState<any>(0)
   const [dateRange, setDateRange] = useState<any>(undefined)
 
-  const { ref } = router.query
-  const { usage } = useProjectUsage(ref as string)
+  const { ref: projectRef } = useParams()
+  const { data: usage } = useProjectUsageQuery({ projectRef })
 
   const databaseSizeLimit = usage?.db_size?.limit ?? 0
   const databaseEgressLimit = usage?.db_egress?.limit ?? 0
diff --git a/studio/pages/project/[ref]/reports/index.tsx b/studio/pages/project/[ref]/reports/index.tsx
index ac2f6334460..f4ae714fbba 100644
--- a/studio/pages/project/[ref]/reports/index.tsx
+++ b/studio/pages/project/[ref]/reports/index.tsx
@@ -11,7 +11,7 @@ import { useProjectContentStore } from 'stores/projectContentStore'
 import Loading from 'components/ui/Loading'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import { createReport } from 'components/to-be-cleaned/Reports/Reports.utils'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { ReportsLayout } from 'components/layouts'
 
 export const UserReportPage: NextPageWithLayout = () => {
   const [loading, setLoading] = useState(true)
diff --git a/studio/pages/project/[ref]/settings/api.tsx b/studio/pages/project/[ref]/settings/api.tsx
index e3e6b2e887e..288127c97a6 100644
--- a/studio/pages/project/[ref]/settings/api.tsx
+++ b/studio/pages/project/[ref]/settings/api.tsx
@@ -2,7 +2,7 @@ import { createContext } from 'react'
 import { useRouter } from 'next/router'
 import { observer, useLocalObservable } from 'mobx-react-lite'
 
-import { useStore } from 'hooks'
+import { useParams, useStore } from 'hooks'
 import { NextPageWithLayout } from 'types'
 import { SettingsLayout } from 'components/layouts'
 import ServiceList from 'components/interfaces/Settings/API/ServiceList'
@@ -10,8 +10,7 @@ import ServiceList from 'components/interfaces/Settings/API/ServiceList'
 export const PageContext: any = createContext(null)
 
 const ApiSettings: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref } = useParams()
 
   const { meta, ui } = useStore()
   const project = ui.selectedProject
@@ -37,8 +36,8 @@ const ApiSettings: NextPageWithLayout = () => {
 
   return (
     <PageContext.Provider value={PageState}>
-      <div className="1xl:px-28 mx-auto flex flex-col gap-8 px-5 py-6 lg:px-16 xl:px-24 2xl:px-32">
-        <ServiceList projectRef={ref as string} />
+      <div className="flex flex-col gap-8 px-5 py-6 mx-auto 1xl:px-28 lg:px-16 xl:px-24 2xl:px-32">
+        <ServiceList />
       </div>
     </PageContext.Provider>
   )
diff --git a/studio/pages/project/[ref]/settings/billing/invoices.tsx b/studio/pages/project/[ref]/settings/billing/invoices.tsx
index 45481e4ff1b..dde1131615c 100644
--- a/studio/pages/project/[ref]/settings/billing/invoices.tsx
+++ b/studio/pages/project/[ref]/settings/billing/invoices.tsx
@@ -4,7 +4,8 @@ import { FC, useEffect } from 'react'
 import { SettingsLayout } from 'components/layouts'
 import LoadingUI from 'components/ui/Loading'
 import OveragesBanner from 'components/ui/OveragesBanner/OveragesBanner'
-import { useProjectSubscription, useStore } from 'hooks'
+import { useStore } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { NextPageWithLayout, Project } from 'types'
 
 import { Invoices } from 'components/interfaces/Billing'
@@ -14,8 +15,8 @@ const ProjectBilling: NextPageWithLayout = () => {
   const project = ui.selectedProject
 
   return (
-    <div className="content h-full w-full overflow-y-auto">
-      <div className="mx-auto w-full">
+    <div className="w-full h-full overflow-y-auto content">
+      <div className="w-full mx-auto">
         <Settings project={project} />
       </div>
     </div>
@@ -36,17 +37,15 @@ const Settings: FC<SettingsProps> = ({ project }) => {
   const { ui } = useStore()
   const projectTier = ui.selectedProject?.subscription_tier
 
-  const {
-    subscription,
-    isLoading: loading,
-    error,
-  } = useProjectSubscription(ui.selectedProject?.ref)
+  const { data: subscription, error } = useProjectSubscriptionQuery({
+    projectRef: ui.selectedProject?.ref,
+  })
 
   useEffect(() => {
     if (error) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to get project subscription: ${error?.message ?? 'unknown'}`,
+        message: `Failed to get project subscription: ${(error as any)?.message ?? 'unknown'}`,
       })
     }
   }, [error])
@@ -56,7 +55,7 @@ const Settings: FC<SettingsProps> = ({ project }) => {
   }
 
   return (
-    <div className="container max-w-4xl space-y-8 p-4">
+    <div className="container max-w-4xl p-4 space-y-8">
       {/* [Joshen TODO] Temporarily hidden until usage endpoint is sorted out */}
       {/* {projectTier !== undefined && <OveragesBanner tier={projectTier} />} */}
 
diff --git a/studio/pages/project/[ref]/settings/billing/subscription.tsx b/studio/pages/project/[ref]/settings/billing/subscription.tsx
index 9744f34e911..750af452736 100644
--- a/studio/pages/project/[ref]/settings/billing/subscription.tsx
+++ b/studio/pages/project/[ref]/settings/billing/subscription.tsx
@@ -5,7 +5,8 @@ import { Loading } from 'ui'
 import { SettingsLayout } from 'components/layouts'
 import LoadingUI from 'components/ui/Loading'
 import OveragesBanner from 'components/ui/OveragesBanner/OveragesBanner'
-import { useProjectSubscription, useStore } from 'hooks'
+import { useStore } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { NextPageWithLayout, Project } from 'types'
 
 import { Subscription } from 'components/interfaces/Billing'
@@ -15,8 +16,8 @@ const ProjectBilling: NextPageWithLayout = () => {
   const project = ui.selectedProject
 
   return (
-    <div className="content h-full w-full overflow-y-auto">
-      <div className="mx-auto w-full">
+    <div className="w-full h-full overflow-y-auto content">
+      <div className="w-full mx-auto">
         <Settings project={project} />
       </div>
     </div>
@@ -38,16 +39,16 @@ const Settings: FC<SettingsProps> = ({ project }) => {
   const projectTier = ui.selectedProject?.subscription_tier
 
   const {
-    subscription,
+    data: subscription,
     isLoading: loading,
     error,
-  } = useProjectSubscription(ui.selectedProject?.ref)
+  } = useProjectSubscriptionQuery({ projectRef: ui.selectedProject?.ref })
 
   useEffect(() => {
     if (error) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to get project subscription: ${error?.message ?? 'unknown'}`,
+        message: `Failed to get project subscription: ${(error as any)?.message ?? 'unknown'}`,
       })
     }
   }, [error])
@@ -57,7 +58,7 @@ const Settings: FC<SettingsProps> = ({ project }) => {
   }
 
   return (
-    <div className="container max-w-4xl space-y-8 p-4">
+    <div className="container max-w-4xl p-4 space-y-8">
       {/* [Joshen TODO] Temporarily hidden until usage endpoint is sorted out */}
       {/* {projectTier !== undefined && <OveragesBanner tier={projectTier} />} */}
       <Subscription
@@ -69,8 +70,8 @@ const Settings: FC<SettingsProps> = ({ project }) => {
       />
       {loading ? (
         <Loading active={loading}>
-          <div className="mb-8 w-full overflow-hidden rounded border border-panel-border-light dark:border-panel-border-dark">
-            <div className="flex items-center justify-center bg-panel-body-light px-6 py-6 dark:bg-panel-body-dark">
+          <div className="w-full mb-8 overflow-hidden border rounded border-panel-border-light dark:border-panel-border-dark">
+            <div className="flex items-center justify-center px-6 py-6 bg-panel-body-light dark:bg-panel-body-dark">
               <p>Loading usage breakdown</p>
             </div>
           </div>
diff --git a/studio/pages/project/[ref]/settings/billing/update/index.tsx b/studio/pages/project/[ref]/settings/billing/update/index.tsx
index 9485523c31e..7ad5f7410b1 100644
--- a/studio/pages/project/[ref]/settings/billing/update/index.tsx
+++ b/studio/pages/project/[ref]/settings/billing/update/index.tsx
@@ -3,7 +3,8 @@ import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 import { Button, Modal } from 'ui'
 
-import { useFlag, useFreeProjectLimitCheck, useStore } from 'hooks'
+import { useFlag, useStore } from 'hooks'
+import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
 import { get } from 'lib/common/fetch'
 import { API_URL, PRICING_TIER_PRODUCT_IDS, STRIPE_PRODUCT_IDS } from 'lib/constants'
 
@@ -19,7 +20,7 @@ const BillingUpdate: NextPageWithLayout = () => {
   const orgSlug = ui.selectedOrganization?.slug
   const projectRef = ui.selectedProject?.ref
 
-  const { membersExceededLimit } = useFreeProjectLimitCheck(orgSlug as string)
+  const { data: membersExceededLimit } = useFreeProjectLimitCheckQuery({ slug: orgSlug })
   const hasMembersExceedingFreeTierLimit = (membersExceededLimit || []).length > 0
 
   const [isLoadingProducts, setIsLoadingProducts] = useState(false)
@@ -105,7 +106,7 @@ const BillingUpdate: NextPageWithLayout = () => {
 
   if (isLoadingProducts || isEnterprise) {
     return (
-      <div className="flex h-full w-full items-center justify-center">
+      <div className="flex items-center justify-center w-full h-full">
         <Connecting />
       </div>
     )
@@ -152,14 +153,14 @@ const BillingUpdate: NextPageWithLayout = () => {
         header="Your organization has members who have exceeded their free project limits"
         onCancel={() => setShowDowngradeError(false)}
       >
-        <div className="space-y-4 py-4">
+        <div className="py-4 space-y-4">
           <Modal.Content>
             <div className="space-y-2">
               <p className="text-sm text-scale-1100">
                 The following members have reached their maximum limits for the number of active
                 free tier projects within organizations where they are an administrator or owner:
               </p>
-              <ul className="list-disc pl-5 text-sm text-scale-1100">
+              <ul className="pl-5 text-sm list-disc text-scale-1100">
                 {(membersExceededLimit || []).map((member, idx: number) => (
                   <li key={`member-${idx}`}>
                     {member.username || member.primary_email} (Limit: {member.free_project_limit}{' '}
diff --git a/studio/pages/project/[ref]/settings/billing/usage.tsx b/studio/pages/project/[ref]/settings/billing/usage.tsx
index a787a95f315..676a784d041 100644
--- a/studio/pages/project/[ref]/settings/billing/usage.tsx
+++ b/studio/pages/project/[ref]/settings/billing/usage.tsx
@@ -4,21 +4,22 @@ import { FC, useEffect, useState } from 'react'
 import { IconArrowRight, Loading } from 'ui'
 
 import { Project, NextPageWithLayout } from 'types'
-import { useProjectSubscription, useStore } from 'hooks'
+import { useStore } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { STRIPE_PRODUCT_IDS, TIME_PERIODS_REPORTS, TIME_PERIODS_BILLING } from 'lib/constants'
 import { SettingsLayout } from 'components/layouts'
 import LoadingUI from 'components/ui/Loading'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import { PAYGUsage } from 'components/interfaces/Billing'
-import ProjectUsage from 'components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars'
+import ProjectUsageBars from 'components/interfaces/Settings/ProjectUsageBars/ProjectUsageBars'
 
 const ProjectBillingUsage: NextPageWithLayout = () => {
   const { ui } = useStore()
   const project = ui.selectedProject
 
   return (
-    <div className="content h-full w-full overflow-y-auto">
-      <div className="mx-auto w-full">
+    <div className="w-full h-full overflow-y-auto content">
+      <div className="w-full mx-auto">
         <Settings project={project} />
       </div>
     </div>
@@ -39,10 +40,10 @@ const Settings: FC<SettingsProps> = ({ project }) => {
   const { ui } = useStore()
 
   const {
-    subscription,
+    data: subscription,
     isLoading: loading,
     error,
-  } = useProjectSubscription(ui.selectedProject?.ref)
+  } = useProjectSubscriptionQuery({ projectRef: ui.selectedProject?.ref })
 
   const [dateRange, setDateRange] = useState<any>()
   const isPayg = subscription?.tier?.prod_id === STRIPE_PRODUCT_IDS.PAYG
@@ -51,7 +52,7 @@ const Settings: FC<SettingsProps> = ({ project }) => {
     if (error) {
       ui.setNotification({
         category: 'error',
-        message: `Failed to get project subscription: ${error?.message ?? 'unknown'}`,
+        message: `Failed to get project subscription: ${(error as any)?.message ?? 'unknown'}`,
       })
     }
   }, [error])
@@ -61,18 +62,18 @@ const Settings: FC<SettingsProps> = ({ project }) => {
   }
 
   return (
-    <div className="container max-w-4xl space-y-8 p-4">
+    <div className="container max-w-4xl p-4 space-y-8">
       {loading ? (
         <Loading active={loading}>
-          <div className="mb-8 w-full overflow-hidden rounded border border-panel-border-light dark:border-panel-border-dark">
-            <div className="flex items-center justify-center bg-panel-body-light px-6 py-6 dark:bg-panel-body-dark">
+          <div className="w-full mb-8 overflow-hidden border rounded border-panel-border-light dark:border-panel-border-dark">
+            <div className="flex items-center justify-center px-6 py-6 bg-panel-body-light dark:bg-panel-body-dark">
               <p>Loading usage breakdown</p>
             </div>
           </div>
         </Loading>
       ) : isPayg ? (
         <div>
-          <div className="mb-4 flex items-center space-x-3">
+          <div className="flex items-center mb-4 space-x-3">
             <DateRangePicker
               onChange={setDateRange}
               value={TIME_PERIODS_BILLING[0].key}
@@ -97,7 +98,7 @@ const Settings: FC<SettingsProps> = ({ project }) => {
           {dateRange && <PAYGUsage dateRange={dateRange} />}
         </div>
       ) : (
-        <ProjectUsage projectRef={project?.ref} />
+        <ProjectUsageBars projectRef={project?.ref} />
       )}
     </div>
   )
diff --git a/studio/pages/project/[ref]/settings/database.tsx b/studio/pages/project/[ref]/settings/database.tsx
index 37f0b2aabab..6b495d3c761 100644
--- a/studio/pages/project/[ref]/settings/database.tsx
+++ b/studio/pages/project/[ref]/settings/database.tsx
@@ -1,9 +1,6 @@
-import useSWR from 'swr'
-import { toJS } from 'mobx'
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { FC, useState, useRef, useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
-import { useRouter } from 'next/router'
 import { debounce } from 'lodash'
 import generator from 'generate-password'
 import { Input, Button, IconDownload, Tabs, Modal } from 'ui'
@@ -11,25 +8,26 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { NextPageWithLayout } from 'types'
 import { checkPermissions, useFlag, useParams, useStore } from 'hooks'
-import { get, patch } from 'lib/common/fetch'
+import { patch } from 'lib/common/fetch'
 import { pluckObjectFields, passwordStrength } from 'lib/helpers'
 import { API_URL, DEFAULT_MINIMUM_PASSWORD_STRENGTH } from 'lib/constants'
+import { useProjectSettingsQuery } from 'data/config/project-settings-query'
 
 import { SettingsLayout } from 'components/layouts'
 import PasswordStrengthBar from 'components/ui/PasswordStrengthBar'
 import Panel from 'components/ui/Panel'
 import { ConnectionPooling, NetworkRestrictions } from 'components/interfaces/Settings/Database'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 
 const ProjectSettings: NextPageWithLayout = () => {
-  const router = useRouter()
-  const { ref } = router.query
+  const { ref: projectRef } = useParams()
 
   const networkRestrictions = useFlag('networkRestrictions')
 
   return (
     <div className="1xl:px-28 mx-auto flex flex-col gap-4 px-5 pt-6 pb-14 lg:px-16 xl:px-24 2xl:px-32">
       <div className="content h-full w-full overflow-y-auto">
-        <GeneralSettings projectRef={ref} />
+        <GeneralSettings projectRef={projectRef} />
         <ConnectionPooling />
         {networkRestrictions && <NetworkRestrictions />}
       </div>
@@ -41,7 +39,7 @@ ProjectSettings.getLayout = (page) => <SettingsLayout title="Database">{page}</S
 
 export default observer(ProjectSettings)
 
-const ResetDbPassword: FC<any> = () => {
+const ResetDbPassword: FC<any> = ({ disabled = false }) => {
   const { ui, app, meta } = useStore()
   const { ref } = useParams()
 
@@ -130,7 +128,7 @@ const ResetDbPassword: FC<any> = () => {
                 <Tooltip.Trigger>
                   <Button
                     type="default"
-                    disabled={!canResetDbPassword}
+                    disabled={!canResetDbPassword || disabled}
                     onClick={() => setShowResetDbPass(true)}
                   >
                     Reset Database Password
@@ -207,7 +205,7 @@ const ResetDbPassword: FC<any> = () => {
   )
 }
 
-const DownloadCertificate: FC<any> = ({ createdAt }) => {
+const DownloadCertificate: FC<any> = ({ createdAt, disabled = false }) => {
   // instances before 3 : 08 pm sgt 29th April don't have certs installed
   if (new Date(createdAt) < new Date('2021-04-30')) return null
   const env = process.env.NEXT_PUBLIC_ENVIRONMENT === 'prod' ? 'prod' : 'staging'
@@ -225,7 +223,7 @@ const DownloadCertificate: FC<any> = ({ createdAt }) => {
             </div>
           </div>
           <div className="flex items-end justify-end">
-            <Button type="default" icon={<IconDownload />}>
+            <Button type="default" icon={<IconDownload />} disabled={disabled}>
               <a
                 href={`https://supabase-downloads.s3-ap-southeast-1.amazonaws.com/${env}/ssl/${env}-ca-2021.crt`}
               >
@@ -240,9 +238,9 @@ const DownloadCertificate: FC<any> = ({ createdAt }) => {
 }
 
 const GeneralSettings: FC<any> = ({ projectRef }) => {
-  const { data, error }: any = useSWR(`${API_URL}/props/project/${projectRef}/settings`, get)
+  const { data, isLoading, isError } = useProjectSettingsQuery({ projectRef })
 
-  if (data?.error || error) {
+  if (isError) {
     return (
       <div className="mx-auto p-6 text-center sm:w-full md:w-3/4">
         <p className="text-scale-1000">Error loading database settings</p>
@@ -250,19 +248,90 @@ const GeneralSettings: FC<any> = ({ projectRef }) => {
     )
   }
 
-  if (!data) {
+  if (isLoading) {
     return (
-      <div className="mx-auto p-6 text-center sm:w-full md:w-3/4">
-        <p className="text-scale-1000">Loading...</p>
-      </div>
+      <>
+        <div className="mb-8">
+          <section className="space-y-6">
+            <h3 className="text-scale-1200 mb-2 text-xl">Database Settings</h3>
+            <Panel
+              title={
+                <h5 key="panel-title" className="mb-0">
+                  Connection info
+                </h5>
+              }
+            >
+              <Panel.Content className="space-y-8">
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="grid gap-2 items-center md:grid md:grid-cols-12 md:gap-x-4 w-full"
+                  >
+                    <ShimmeringLoader className="h-4 w-1/3 col-span-4" delayIndex={i} />
+                    <ShimmeringLoader className="h-8 w-full col-span-8" delayIndex={i} />
+                  </div>
+                ))}
+              </Panel.Content>
+            </Panel>
+          </section>
+          <ResetDbPassword disabled={true} />
+          <DownloadCertificate disabled={true} />
+        </div>
+        <div className="mt-8">
+          <section className="space-y-6">
+            <Panel
+              title={
+                <h5 key="panel-title" className="mb-0">
+                  Connection string
+                </h5>
+              }
+            >
+              <Panel.Content>
+                <Tabs type="underlined" size="small">
+                  <Tabs.Panel id="psql" label="PSQL">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="uri" label="URI">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="golang" label="Golang">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="jdbc" label="JDBC">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="dotnet" label=".NET">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="nodejs" label="Nodejs">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="php" label="PHP">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+
+                  <Tabs.Panel id="python" label="Python">
+                    <ShimmeringLoader className="h-8 w-full" />
+                  </Tabs.Panel>
+                </Tabs>
+              </Panel.Content>
+            </Panel>
+          </section>
+        </div>
+      </>
     )
   }
 
   const { project } = data
-  const formModel = toJS(project)
 
   const DB_FIELDS = ['db_host', 'db_name', 'db_port', 'db_user', 'inserted_at']
-  const connectionInfo = pluckObjectFields(formModel, DB_FIELDS)
+  const connectionInfo = pluckObjectFields(project, DB_FIELDS)
 
   const uriConnString =
     `postgresql://${connectionInfo.db_user}:[YOUR-PASSWORD]@` +
@@ -355,22 +424,18 @@ const GeneralSettings: FC<any> = ({ projectRef }) => {
           >
             <Panel.Content>
               <Tabs type="underlined" size="small">
-                {/* @ts-ignore */}
                 <Tabs.Panel id="psql" label="PSQL">
                   <Input copy readOnly disabled value={psqlConnString} />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="uri" label="URI">
                   <Input copy readOnly disabled value={uriConnString} />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="golang" label="Golang">
                   <Input copy readOnly disabled value={golangConnString} />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="jdbc" label="JDBC">
                   <Input
                     copy
@@ -385,7 +450,6 @@ const GeneralSettings: FC<any> = ({ projectRef }) => {
                   />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="dotnet" label=".NET">
                   <Input
                     copy
@@ -401,17 +465,14 @@ const GeneralSettings: FC<any> = ({ projectRef }) => {
                   />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="nodejs" label="Nodejs">
                   <Input copy readOnly disabled value={uriConnString} />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="php" label="PHP">
                   <Input copy readOnly disabled value={golangConnString} />
                 </Tabs.Panel>
 
-                {/* @ts-ignore */}
                 <Tabs.Panel id="python" label="Python">
                   <Input
                     copy
diff --git a/studio/pages/project/[ref]/settings/storage.tsx b/studio/pages/project/[ref]/settings/storage.tsx
index a12166c3833..7f2f2c15180 100644
--- a/studio/pages/project/[ref]/settings/storage.tsx
+++ b/studio/pages/project/[ref]/settings/storage.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect } from 'react'
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
 
 import { API_URL, PROJECT_STATUS } from 'lib/constants'
-import { useFlag, useStore } from 'hooks'
+import { useFlag, useParams, useStore } from 'hooks'
 import { post } from 'lib/common/fetch'
-import { SettingsLayout, StorageLayout } from 'components/layouts'
+import { SettingsLayout } from 'components/layouts'
 import { StorageSettings } from 'components/to-be-cleaned/Storage'
 import { NextPageWithLayout } from 'types'
 
@@ -13,8 +12,7 @@ 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: projectRef } = useParams()
 
   const { ui } = useStore()
   const project = ui.selectedProject
@@ -23,15 +21,15 @@ const PageLayout: NextPageWithLayout = () => {
 
   useEffect(() => {
     if (project && project.status === PROJECT_STATUS.INACTIVE) {
-      post(`${API_URL}/projects/${ref}/restore`, { kps_enabled: kpsEnabled })
+      post(`${API_URL}/projects/${projectRef}/restore`, { kps_enabled: kpsEnabled })
     }
   }, [project])
 
   if (!project) return <div></div>
 
   return (
-    <div className="storage-container flex flex-grow p-4">
-      <StorageSettings projectRef={ref} />
+    <div className="flex flex-grow p-4 storage-container">
+      <StorageSettings projectRef={projectRef} />
     </div>
   )
 }
diff --git a/studio/pages/support/new.tsx b/studio/pages/support/new.tsx
index 504619fdbe4..0197ba4c9ce 100644
--- a/studio/pages/support/new.tsx
+++ b/studio/pages/support/new.tsx
@@ -5,7 +5,8 @@ import { observer } from 'mobx-react-lite'
 import { Button, IconLoader } from 'ui'
 import * as Tooltip from '@radix-ui/react-tooltip'
 
-import { withAuth, useFlag, usePlatformStatus } from 'hooks'
+import { withAuth, useFlag } from 'hooks'
+import { usePlatformStatusQuery } from 'data/platform/platform-status-query'
 import Success from 'components/interfaces/Support/Success'
 import SupportForm from 'components/interfaces/Support/SupportForm'
 
@@ -15,7 +16,8 @@ const SupportPage = () => {
   const ongoingIncident = useFlag('ongoingIncident')
   const maxHeight = ongoingIncident ? 'calc(100vh - 44px)' : '100vh'
 
-  const { isHealthy, isLoading } = usePlatformStatus()
+  const { data, isLoading } = usePlatformStatusQuery()
+  const isHealthy = data?.isHealthy
 
   return (
     <div
diff --git a/studio/tests/components/Home/ProjectUsage.test.js b/studio/tests/components/Home/ProjectUsage.test.js
index fd522e145df..dabfd3133f3 100644
--- a/studio/tests/components/Home/ProjectUsage.test.js
+++ b/studio/tests/components/Home/ProjectUsage.test.js
@@ -1,4 +1,5 @@
-import { render, waitFor, screen } from '@testing-library/react'
+import { waitFor, screen } from '@testing-library/react'
+import { render } from '../../helpers'
 import userEvent from '@testing-library/user-event'
 jest.mock('lib/common/fetch')
 import { get } from 'lib/common/fetch'
@@ -10,17 +11,32 @@ import { clickDropdown } from 'tests/helpers'
 const mockPush = jest.fn()
 useRouter.mockReturnValue({ query: { ref: '123' }, push: mockPush })
 
-// need to wrap component with SWRConfig in order to clear cache between tests
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
 // TODO: abstract out to global setup
-import { SWRConfig } from 'swr'
 const ProjectUsage = jest.fn()
 ProjectUsage.mockImplementation((props) => {
   const Original = jest.requireActual('components/interfaces/Home/ProjectUsage').default
-  // wrap with SWR to reset the cache each time
+
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+    logger: {
+      log: console.log,
+      warn: console.warn,
+      // ✅ no more errors on the console for tests
+      error: process.env.NODE_ENV === 'test' ? () => {} : console.error,
+    },
+  })
+
+  // wrap with QueryClient to reset the cache each time
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
+    <QueryClientProvider client={queryClient}>
       <Original {...props} />
-    </SWRConfig>
+    </QueryClientProvider>
   )
 })
 
@@ -28,10 +44,13 @@ jest.mock('components/ui/Flag/Flag')
 import Flag from 'components/ui/Flag/Flag'
 Flag.mockImplementation(({ children }) => <>{children}</>)
 jest.mock('hooks')
-import { useFlag, useProjectSubscription } from 'hooks'
+import { useFlag } from 'hooks'
+jest.mock('data/subscriptions/project-subscription-query')
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
+
 useFlag.mockReturnValue(true)
-useProjectSubscription.mockReturnValue({
-  subscription: undefined,
+useProjectSubscriptionQuery.mockReturnValue({
+  data: undefined,
 })
 
 beforeEach(() => {
@@ -82,7 +101,7 @@ test('dropdown options changes chart query', async () => {
   await waitFor(() => screen.getByText(/Statistics for past 24 hours/))
   await waitFor(() => screen.getAllByRole('button', { name: '24 hours' }))
   await waitFor(() => {
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('interval=hourly'))
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('interval=hourly'), expect.anything())
   })
   // find button that has radix id
   const [btn] = screen.getAllByRole('button', { name: '24 hours' }).filter((e) => e.id)
@@ -93,5 +112,5 @@ test('dropdown options changes chart query', async () => {
   // simulate changing of dropdown
   userEvent.click(screen.getByText(/60 minutes/))
   await waitFor(() => screen.getByText(/Statistics for past 60 minutes/))
-  expect(get).toHaveBeenCalledWith(expect.stringContaining('interval=minutely'))
+  expect(get).toHaveBeenCalledWith(expect.stringContaining('interval=minutely'), expect.anything())
 })
diff --git a/studio/tests/components/Reports/ReportWidget.test.js b/studio/tests/components/Reports/ReportWidget.test.js
index 7c7ae5a8eee..96cb6d6f26e 100644
--- a/studio/tests/components/Reports/ReportWidget.test.js
+++ b/studio/tests/components/Reports/ReportWidget.test.js
@@ -27,7 +27,8 @@ jest.mock('hooks')
 import { useFlag } from 'hooks'
 useFlag.mockReturnValue(true)
 
-import { render, fireEvent, waitFor, screen, act } from '@testing-library/react'
+import { fireEvent, waitFor, screen, act } from '@testing-library/react'
+import { render } from '../../helpers'
 import userEvent from '@testing-library/user-event'
 import { wait } from '@testing-library/user-event/dist/utils'
 import { logDataFixture } from '../../fixtures'
diff --git a/studio/tests/helpers.tsx b/studio/tests/helpers.tsx
index b3032a492b8..6aacb05b4de 100644
--- a/studio/tests/helpers.tsx
+++ b/studio/tests/helpers.tsx
@@ -1,7 +1,7 @@
 import { screen, getByText, fireEvent } from '@testing-library/react'
 import React, { useState } from 'react'
-import { SWRConfig } from 'swr'
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render as originalRender } from '@testing-library/react'
 import { RootStore } from 'stores'
 import { StoreProvider } from 'hooks'
@@ -46,22 +46,32 @@ export const clickDropdown = (elem: HTMLElement) => {
  * A custom render function for react testing library
  * https://testing-library.com/docs/react-testing-library/setup/#custom-render
  */
-const SwrTestConfig: React.FC = ({ children }) => {
+const ReactQueryTestConfig: React.FC = ({ children }) => {
   const [rootStore] = useState(() => new RootStore())
 
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+          },
+        },
+        logger: {
+          log: console.log,
+          warn: console.warn,
+          // ✅ no more errors on the console for tests
+          error: process.env.NODE_ENV === 'test' ? () => {} : console.error,
+        },
+      })
+  )
+
   return (
     <StoreProvider rootStore={rootStore}>
-      <SWRConfig
-        value={{
-          provider: () => new Map(),
-          shouldRetryOnError: false,
-        }}
-      >
-        {children}
-      </SWRConfig>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </StoreProvider>
   )
 }
 type renderParams = Parameters<typeof originalRender>
 export const render = ((ui: renderParams[0], options: renderParams[1]) =>
-  originalRender(ui, { wrapper: SwrTestConfig, ...options })) as typeof originalRender
+  originalRender(ui, { wrapper: ReactQueryTestConfig, ...options })) as typeof originalRender
diff --git a/studio/tests/pages/projects/LogEventChart.test.js b/studio/tests/pages/projects/LogEventChart.test.js
index b9ea349a3ee..9fe9440ecaa 100644
--- a/studio/tests/pages/projects/LogEventChart.test.js
+++ b/studio/tests/pages/projects/LogEventChart.test.js
@@ -1,5 +1,6 @@
 import LogEventChart from 'components/interfaces/Settings/Logs/LogEventChart'
-import { render, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+import { render } from '../../helpers'
 
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
diff --git a/studio/tests/pages/projects/LogTable.test.js b/studio/tests/pages/projects/LogTable.test.js
index 35ec5aba0cb..1a7430f9630 100644
--- a/studio/tests/pages/projects/LogTable.test.js
+++ b/studio/tests/pages/projects/LogTable.test.js
@@ -1,7 +1,8 @@
 import LogTable from 'components/interfaces/Settings/Logs/LogTable'
-import { render, waitFor, screen } from '@testing-library/react'
+import { waitFor, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import dayjs from 'dayjs'
+import { render } from '../../helpers'
 
 test('can display log data', async () => {
   render(
@@ -117,7 +118,7 @@ test.each([
     queryType: 'auth',
     data: [
       {
-        event_message: JSON.stringify({msg: "some message", path: "/auth-path", level: "info"}),
+        event_message: JSON.stringify({ msg: 'some message', path: '/auth-path', level: 'info' }),
         timestamp: 1659545029083869,
         id: '4475cf6f-2929-4296-ab44-ce2c17069937',
       },
diff --git a/studio/tests/pages/projects/Logs.Datepickers.test.js b/studio/tests/pages/projects/Logs.Datepickers.test.js
index 2a578d480fb..70807290ca3 100644
--- a/studio/tests/pages/projects/Logs.Datepickers.test.js
+++ b/studio/tests/pages/projects/Logs.Datepickers.test.js
@@ -1,8 +1,9 @@
-import { render, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { PREVIEWER_DATEPICKER_HELPERS } from 'components/interfaces/Settings/Logs'
 import DatePickers from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import dayjs from 'dayjs'
+import { render } from '../../helpers'
 
 test('renders warning', async () => {
   const from = dayjs().subtract(60, 'days')
@@ -16,4 +17,5 @@ test('renders warning', async () => {
   )
   userEvent.click(await screen.findByText(RegExp(from.format('DD MMM'))))
   await screen.findByText(/memory errors/)
+  await screen.findByText(RegExp(from.format('MMMM YYYY')))
 })
diff --git a/studio/tests/pages/projects/LogsPreviewer.test.js b/studio/tests/pages/projects/LogsPreviewer.test.js
index 7d2f9e7ce45..15774d0b66c 100644
--- a/studio/tests/pages/projects/LogsPreviewer.test.js
+++ b/studio/tests/pages/projects/LogsPreviewer.test.js
@@ -16,19 +16,24 @@ const defaultRouterMock = () => {
 useRouter.mockReturnValue(defaultRouterMock())
 
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { useProjectSubscription } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
 import { fireEvent, waitFor, screen, act } from '@testing-library/react'
 import { render } from '../../helpers'
 import userEvent from '@testing-library/user-event'
 import { wait } from '@testing-library/user-event/dist/utils'
 import { logDataFixture } from '../../fixtures'
 import { LogsTableName } from 'components/interfaces/Settings/Logs'
+import { useParams } from 'hooks'
 
 beforeEach(() => {
   // reset mocks between tests
   get.mockReset()
   useRouter.mockReset()
-  useRouter.mockReturnValue(defaultRouterMock())
+  const routerReturnValue = defaultRouterMock()
+  useRouter.mockReturnValue(routerReturnValue)
+
+  useParams.mockReset()
+  useParams.mockReturnValue(routerReturnValue.query)
 })
 
 test.each([
@@ -138,8 +143,14 @@ test.each([
     render(<LogsPreviewer projectRef="123" queryType={queryType} tableName={tableName} />)
 
     await waitFor(() => {
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('iso_timestamp_start'))
-      expect(get).not.toHaveBeenCalledWith(expect.stringContaining('iso_timestamp_end'))
+      expect(get).toHaveBeenCalledWith(
+        expect.stringContaining('iso_timestamp_start'),
+        expect.anything()
+      )
+      expect(get).not.toHaveBeenCalledWith(
+        expect.stringContaining('iso_timestamp_end'),
+        expect.anything()
+      )
     })
     // reset mock so that we can check for selection call
     get.mockClear()
@@ -151,8 +162,14 @@ test.each([
     fireEvent.click(row)
 
     await waitFor(() => {
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('iso_timestamp_start'))
-      expect(get).not.toHaveBeenCalledWith(expect.stringContaining('iso_timestamp_end'))
+      expect(get).toHaveBeenCalledWith(
+        expect.stringContaining('iso_timestamp_start'),
+        expect.anything()
+      )
+      expect(get).not.toHaveBeenCalledWith(
+        expect.stringContaining('iso_timestamp_end'),
+        expect.anything()
+      )
     })
 
     for (const text of selectionTexts) {
@@ -176,7 +193,7 @@ test('Search will trigger a log refresh', async () => {
 
   await waitFor(
     () => {
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('something'))
+      expect(get).toHaveBeenCalledWith(expect.stringContaining('something'), expect.anything())
 
       // updates router query params
       const router = useRouter()
@@ -225,17 +242,18 @@ test('log event chart', async () => {
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => screen.queryByText(/some-uuid123/) === null)
-  expect(get).toBeCalledWith(expect.stringContaining('trunc'))
+  expect(get).toBeCalledWith(expect.stringContaining('trunc'), expect.anything())
 })
 
 test('s= query param will populate the search bar', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, s: 'someSearch' }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   // should populate search input with the search param
   await screen.findByDisplayValue('someSearch')
-  expect(get).toHaveBeenCalledWith(expect.stringContaining('someSearch'))
+  expect(get).toHaveBeenCalledWith(expect.stringContaining('someSearch'), expect.anything())
 })
 
 test('te= query param will populate the timestamp to input', async () => {
@@ -246,14 +264,15 @@ test('te= query param will populate the timestamp to input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, ite: iso }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => {
     expect(get).toHaveBeenCalledWith(
-      expect.stringContaining(`iso_timestamp_end=${encodeURIComponent(iso)}`)
+      expect.stringContaining(`iso_timestamp_end=${encodeURIComponent(iso)}`),
+      expect.anything()
     )
   })
-  userEvent.click(await screen.findByTitle('Custom'))
 })
 test('ts= query param will populate the timestamp from input', async () => {
   // get time 20 mins before
@@ -263,15 +282,15 @@ test('ts= query param will populate the timestamp from input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, its: iso }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => {
     expect(get).toHaveBeenCalledWith(
-      expect.stringContaining(`iso_timestamp_start=${encodeURIComponent(iso)}`)
+      expect.stringContaining(`iso_timestamp_start=${encodeURIComponent(iso)}`),
+      expect.anything()
     )
   })
-  userEvent.click(await screen.findByTitle('Custom'))
-  await screen.findByText(new RegExp(newDate.getFullYear()))
 })
 
 test('load older btn will fetch older logs', async () => {
@@ -295,7 +314,7 @@ test('load older btn will fetch older logs', async () => {
   userEvent.click(await screen.findByText('Load older'))
   await screen.findByText('first event')
   await screen.findByText('second event')
-  expect(get).toHaveBeenCalledWith(expect.stringContaining('timestamp_end='))
+  expect(get).toHaveBeenCalledWith(expect.stringContaining('timestamp_end='), expect.anything())
 })
 
 test('bug: load older btn does not error out when previous page is empty', async () => {
@@ -350,6 +369,7 @@ test('bug: nav backwards with params change results in ui changing', async () =>
   const router = defaultRouterMock()
   router.query = { ...router.query, s: 'simple-query' }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   rerender(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await screen.findByDisplayValue('simple-query')
@@ -370,14 +390,17 @@ test('filters alter generated query', async () => {
 
   await waitFor(() => {
     // counts are adjusted
-    expect(get).toHaveBeenCalledWith(expect.stringMatching(/count.+\*.+as.count.+where.+500.+599/))
+    expect(get).toHaveBeenCalledWith(
+      expect.stringMatching(/count.+\*.+as.count.+where.+500.+599/),
+      expect.anything()
+    )
 
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('500'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('599'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('200'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('299'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('where'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('and'))
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('500'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('599'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('200'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('299'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('where'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('and'), expect.anything())
   })
 
   // should be able to clear the filters
@@ -392,18 +415,22 @@ test('filters alter generated query', async () => {
   await waitFor(() => {
     // counts are adjusted
     expect(get).not.toHaveBeenCalledWith(
-      expect.stringMatching(/count.+\*.+as.count.+where.+500.+599/)
+      expect.stringMatching(/count.+\*.+as.count.+where.+500.+599/),
+      expect.anything()
+    )
+    expect(get).toHaveBeenCalledWith(
+      expect.stringMatching(/count.+\*.+as.count.+where.+400.+499/),
+      expect.anything()
     )
-    expect(get).toHaveBeenCalledWith(expect.stringMatching(/count.+\*.+as.count.+where.+400.+499/))
 
-    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('500'))
-    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('599'))
-    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('200'))
-    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('299'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('400'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('499'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('where'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('and'))
+    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('500'), expect.anything())
+    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('599'), expect.anything())
+    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('200'), expect.anything())
+    expect(get).not.toHaveBeenCalledWith(expect.stringContaining('299'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('400'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('499'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('where'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('and'), expect.anything())
   })
 })
 test('filters accept filterOverride', async () => {
@@ -416,15 +443,15 @@ test('filters accept filterOverride', async () => {
   )
 
   await waitFor(() => {
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('my.nestedkey'))
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('myvalue'))
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('my.nestedkey'), expect.anything())
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('myvalue'), expect.anything())
   })
 })
 
 describe.each(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'])('upgrade modal for %s', (key) => {
   beforeEach(() => {
-    useProjectSubscription.mockReturnValue({
-      subscription: {
+    useProjectSubscriptionQuery.mockReturnValue({
+      data: {
         tier: {
           supabase_prod_id: `tier_${key.toLocaleLowerCase()}`,
           key,
@@ -441,6 +468,7 @@ describe.each(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'])('upgrade modal for %s', (ke
       ite: dayjs().toISOString(),
     }
     useRouter.mockReturnValue(router)
+    useParams.mockReturnValue(router.query)
     render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
     await screen.findByText('Log retention') // assert modal title is present
   })
diff --git a/studio/tests/pages/projects/PreviewFilterPanel.test.js b/studio/tests/pages/projects/PreviewFilterPanel.test.js
index e8a55735627..4b3f4a5838d 100644
--- a/studio/tests/pages/projects/PreviewFilterPanel.test.js
+++ b/studio/tests/pages/projects/PreviewFilterPanel.test.js
@@ -1,6 +1,7 @@
 import PreviewFilterPanel from 'components/interfaces/Settings/Logs/PreviewFilterPanel'
-import { render, waitFor, screen } from '@testing-library/react'
+import { waitFor, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { render } from '../../helpers'
 
 jest.mock('components/ui/Flag/Flag')
 import Flag from 'components/ui/Flag/Flag'
diff --git a/studio/tests/pages/projects/logs-query.test.js b/studio/tests/pages/projects/logs-query.test.js
index 8daa2301ca3..979e257cff7 100644
--- a/studio/tests/pages/projects/logs-query.test.js
+++ b/studio/tests/pages/projects/logs-query.test.js
@@ -7,7 +7,8 @@ import userEvent from '@testing-library/user-event'
 import { logDataFixture } from '../../fixtures'
 import { clickDropdown } from 'tests/helpers'
 import dayjs from 'dayjs'
-import { useProjectSubscription } from 'hooks'
+import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
+import { useParams } from 'hooks'
 
 const defaultRouterMock = () => {
   const router = jest.fn()
@@ -21,7 +22,11 @@ beforeEach(() => {
   // reset mocks between tests
   get.mockReset()
   useRouter.mockReset()
-  useRouter.mockReturnValue(defaultRouterMock())
+  const routerReturnValue = defaultRouterMock()
+  useRouter.mockReturnValue(routerReturnValue)
+
+  useParams.mockReset()
+  useParams.mockReturnValue(routerReturnValue.query)
 })
 test('can display log data', async () => {
   get.mockResolvedValue({
@@ -53,10 +58,11 @@ test('q= query param will populate the query input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, type: 'api', q: 'some_query' }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   render(<LogsExplorerPage />)
   // should populate editor with the query param
   await waitFor(() => {
-    expect(get).toHaveBeenCalledWith(expect.stringContaining('sql=some_query'))
+    expect(get).toHaveBeenCalledWith(expect.stringContaining('sql=some_query'), expect.anything())
   })
 })
 
@@ -72,13 +78,18 @@ test('ite= and its= query param will populate the datepicker', async () => {
     ite: end.toISOString(),
   }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   render(<LogsExplorerPage />)
   // should populate editor with the query param
   await waitFor(() => {
     expect(get).toHaveBeenCalledWith(
-      expect.stringContaining(encodeURIComponent(start.toISOString()))
+      expect.stringContaining(encodeURIComponent(start.toISOString())),
+      expect.anything()
+    )
+    expect(get).toHaveBeenCalledWith(
+      expect.stringContaining(encodeURIComponent(end.toISOString())),
+      expect.anything()
     )
-    expect(get).toHaveBeenCalledWith(expect.stringContaining(encodeURIComponent(end.toISOString())))
   })
 })
 
@@ -115,14 +126,23 @@ test('custom sql querying', async () => {
   userEvent.type(editor, '\nlimit 123{ctrl}{enter}')
   await waitFor(
     () => {
-      expect(get).toHaveBeenCalledWith(expect.stringContaining(encodeURI('\n')))
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('sql='))
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('select'))
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('edge_logs'))
-      expect(get).toHaveBeenCalledWith(expect.stringContaining('iso_timestamp_start'))
-      expect(get).not.toHaveBeenCalledWith(expect.stringContaining('iso_timestamp_end')) // should not have an end date
-      expect(get).not.toHaveBeenCalledWith(expect.stringContaining('where'))
-      expect(get).not.toHaveBeenCalledWith(expect.stringContaining(encodeURIComponent('limit 123')))
+      expect(get).toHaveBeenCalledWith(expect.stringContaining(encodeURI('\n')), expect.anything())
+      expect(get).toHaveBeenCalledWith(expect.stringContaining('sql='), expect.anything())
+      expect(get).toHaveBeenCalledWith(expect.stringContaining('select'), expect.anything())
+      expect(get).toHaveBeenCalledWith(expect.stringContaining('edge_logs'), expect.anything())
+      expect(get).toHaveBeenCalledWith(
+        expect.stringContaining('iso_timestamp_start'),
+        expect.anything()
+      )
+      expect(get).not.toHaveBeenCalledWith(
+        expect.stringContaining('iso_timestamp_end'),
+        expect.anything()
+      ) // should not have an end date
+      expect(get).not.toHaveBeenCalledWith(expect.stringContaining('where'), expect.anything())
+      expect(get).not.toHaveBeenCalledWith(
+        expect.stringContaining(encodeURIComponent('limit 123')),
+        expect.anything()
+      )
     },
     { timeout: 1000 }
   )
@@ -147,14 +167,15 @@ test('query warnings', async () => {
     ite: dayjs().toISOString(),
   }
   useRouter.mockReturnValue(router)
+  useParams.mockReturnValue(router.query)
   render(<LogsExplorerPage />)
   await screen.findByText('1 warning')
 })
 
 describe.each(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'])('upgrade modal for %s', (key) => {
   beforeEach(() => {
-    useProjectSubscription.mockReturnValue({
-      subscription: {
+    useProjectSubscriptionQuery.mockReturnValue({
+      data: {
         tier: {
           supabase_prod_id: `tier_${key.toLocaleLowerCase()}`,
           key,
@@ -171,6 +192,7 @@ describe.each(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'])('upgrade modal for %s', (ke
       ite: dayjs().toISOString(),
     }
     useRouter.mockReturnValue(router)
+    useParams.mockReturnValue(router.query)
     render(<LogsExplorerPage />)
     await screen.findByText(/Log retention/) // assert modal title is present
   })
diff --git a/studio/tests/pages/projects/reports/product-reports.test.js b/studio/tests/pages/projects/reports/product-reports.test.js
index a82267a2717..eefe4718b71 100644
--- a/studio/tests/pages/projects/reports/product-reports.test.js
+++ b/studio/tests/pages/projects/reports/product-reports.test.js
@@ -5,21 +5,26 @@ dayjs.extend(utc)
 import { get, post } from 'lib/common/fetch'
 
 import { useRouter } from 'next/router'
+import { useParams } from 'hooks'
 import { render } from '../../../helpers'
 import { fireEvent, waitFor, screen } from '@testing-library/react'
 import { ApiReport } from 'pages/project/[ref]/reports/api'
 import { AuthReport } from 'pages/project/[ref]/reports/auth'
+import userEvent from '@testing-library/user-event'
 
 beforeEach(() => {
   // reset mocks between tests
   get.mockReset()
+  post.mockReset()
   useRouter.mockReset()
   useRouter.mockReturnValue({
     query: { ref: '123' },
   })
+  useParams.mockReturnValue({ ref: '123' })
   get.mockImplementation(async (url) => {
     return [{ data: [] }]
   })
+  get.mockResolvedValue([])
   post.mockResolvedValue([])
 })
 
@@ -39,15 +44,4 @@ describe.each([
     await screen.findByText(/Last 7 days/)
     await screen.findAllByText(/Refresh/)
   })
-
-  test('changing date range triggers query refresh', async () => {
-    render(<Page />)
-    await waitFor(() => expect(get).toBeCalled())
-    get.mockReset()
-    const refresh = await screen.findByText(/Refresh/)
-    fireEvent.click(refresh)
-
-    const calls = get.mock.calls.concat(post.mock.calls)
-    expect(calls.length).toBeGreaterThan(0)
-  })
 })
diff --git a/studio/types/base.ts b/studio/types/base.ts
index c86d136afe7..83a36b88918 100644
--- a/studio/types/base.ts
+++ b/studio/types/base.ts
@@ -41,7 +41,7 @@ export interface Project extends ProjectBase {
 
 export interface User {
   id: number
-  mobile: string
+  mobile: string | null
   primary_email: string
   username: string
   first_name: string
diff --git a/supabase/functions/clippy-search/index.ts b/supabase/functions/clippy-search/index.ts
index 5b4a33d464e..8a80354e429 100644
--- a/supabase/functions/clippy-search/index.ts
+++ b/supabase/functions/clippy-search/index.ts
@@ -168,11 +168,14 @@ serve(async (req) => {
           headers: { ...corsHeaders, 'Content-Type': 'application/json' },
         }
       )
+    } else if (err instanceof ApplicationError) {
+      // Print out application errors with their additional data
+      console.error(`${err.message}: ${JSON.stringify(err.data)}`)
+    } else {
+      // Print out unexpected errors as is to help with debugging
+      console.error(err)
     }
 
-    // Print out unexpected errors to help with debugging
-    console.error(err)
-
     // TODO: include more response info in debug environments
     return new Response(
       JSON.stringify({