diff --git a/studio/hooks/index.ts b/studio/hooks/index.ts
index 22e133f6a13..878473fa061 100644
--- a/studio/hooks/index.ts
+++ b/studio/hooks/index.ts
@@ -2,6 +2,7 @@ export * from './misc/useStore'
 export * from './misc/withAuth'
 export * from './misc/useOptimisticSqlSnippetCreate'
 export * from './misc/useNotifications'
+export * from './misc/useParams'
 export * from './deprecated'
 export * from './queries'
 export * from './ui'
diff --git a/studio/hooks/queries/useOrganizationRoles.ts b/studio/hooks/queries/useOrganizationRoles.ts
index 33ba0bfb459..8267ec0ad9f 100644
--- a/studio/hooks/queries/useOrganizationRoles.ts
+++ b/studio/hooks/queries/useOrganizationRoles.ts
@@ -8,7 +8,7 @@ import { Role } from 'types'
 // 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) {
+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
diff --git a/studio/pages/org/[slug]/settings.tsx b/studio/pages/org/[slug]/settings.tsx
index 7f0d1c486eb..7469ff265a9 100644
--- a/studio/pages/org/[slug]/settings.tsx
+++ b/studio/pages/org/[slug]/settings.tsx
@@ -4,7 +4,14 @@ import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useState } from 'react'
 
 import { Member, NextPageWithLayout, Organization, Project, Role, User } from 'types'
-import { useFlag, useOrganizationDetail, useOrganizationRoles, useStore, withAuth } from 'hooks'
+import {
+  useFlag,
+  useOrganizationDetail,
+  useOrganizationRoles,
+  useStore,
+  withAuth,
+  useParams,
+} from 'hooks'
 import { AccountLayoutWithoutAuth } from 'components/layouts'
 import {
   GeneralSettings,
@@ -19,8 +26,7 @@ const OrgSettingsLayout = withAuth(
   observer(({ children }) => {
     const { app, ui } = useStore()
     const router = useRouter()
-
-    const slug = ui.selectedOrganization?.slug || ''
+    const { slug } = useParams()
 
     const { roles: allRoles } = useOrganizationRoles(slug)
     const enableBillingOnlyReadOnly = useFlag('enableBillingOnlyReadOnlyRoles')
@@ -104,10 +110,10 @@ const OrgSettingsLayout = withAuth(
 
 const OrganizationSettings: NextPageWithLayout = () => {
   const router = useRouter()
+  const { slug } = useParams()
   const PageState: any = useContext(PageContext)
   const { ui, app } = useStore()
   const [selectedTab, setSelectedTab] = useState('GENERAL')
-  const slug = ui.selectedOrganization?.slug || ''
   const { members, isError: isOrgDetailError } = useOrganizationDetail(slug || '')
   const hash = router.asPath.split('#')[1]?.toUpperCase()
 
@@ -118,6 +124,18 @@ const OrganizationSettings: NextPageWithLayout = () => {
   }, [hash])
 
   function handleChangeTab(id: string) {
+    if (!slug) {
+      // The user should not see this error as the page should
+      // be rerendered with the value of slug before they can click.
+      // It is just here in case they are the flash.
+      ui.setNotification({
+        category: 'error',
+        message: 'Please try again',
+      })
+
+      return
+    }
+
     setSelectedTab(id)
     router.push({
       pathname: `/org/${slug}/settings`,