diff --git a/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx
index abea3607806..a2f90983896 100644
--- a/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AdvancedAuthSettingsForm/AdvancedAuthSettingsForm.tsx
@@ -1,18 +1,9 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
-import {
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  Form,
-  IconAlertCircle,
-  InputNumber,
-  Toggle,
-} from 'ui'
 import { boolean, number, object } from 'yup'
 
+import { useParams } from 'common'
 import {
   FormActions,
   FormHeader,
@@ -21,12 +12,21 @@ import {
   FormSectionContent,
   FormSectionLabel,
 } from 'components/ui/Forms'
+import UpgradeToPro from 'components/ui/UpgradeToPro'
 import { useAuthConfigQuery } from 'data/auth/auth-config-query'
-import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
+import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useCheckPermissions, useSelectedOrganization } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
-import UpgradeToPro from 'components/ui/UpgradeToPro'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Form,
+  InputNumber,
+  Toggle,
+} from 'ui'
+import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 
 const schema = object({
   JWT_EXP: number()
@@ -105,7 +105,7 @@ const AdvancedAuthSettingsForm = () => {
   if (isError) {
     return (
       <Alert_Shadcn_ variant="destructive">
-        <IconAlertCircle strokeWidth={2} />
+        <WarningIcon />
         <AlertTitle_Shadcn_>Failed to retrieve auth configuration</AlertTitle_Shadcn_>
         <AlertDescription_Shadcn_>{authConfigError.message}</AlertDescription_Shadcn_>
       </Alert_Shadcn_>
@@ -207,8 +207,6 @@ const AdvancedAuthSettingsForm = () => {
                       primaryText="Upgrade to Teams or Enterprise"
                       secondaryText="Max Direct Database Connections settings are only available on the Teams plan and up."
                       buttonText="Upgrade to Teams"
-                      projectRef={projectRef!}
-                      organizationSlug={organization!.slug}
                     />
                   )}
 
@@ -230,8 +228,6 @@ const AdvancedAuthSettingsForm = () => {
                       primaryText="Upgrade to Teams or Enterprise"
                       secondaryText="Max Request Duration settings are only available on the Teams plan and up."
                       buttonText="Upgrade to Teams"
-                      projectRef={projectRef!}
-                      organizationSlug={organization!.slug}
                     />
                   )}
 
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
index f9a44561ca4..93cf712bc18 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm/BasicAuthSettingsForm.tsx
@@ -1,22 +1,11 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
+import { ExternalLink } from 'lucide-react'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
-import {
-  AlertDescription_Shadcn_,
-  AlertTitle_Shadcn_,
-  Alert_Shadcn_,
-  Button,
-  Form,
-  IconAlertCircle,
-  IconEye,
-  IconEyeOff,
-  Input,
-  InputNumber,
-  Toggle,
-} from 'ui'
 import { boolean, number, object, string } from 'yup'
 
+import { useParams } from 'common'
 import { Markdown } from 'components/interfaces/Markdown'
 import {
   FormActions,
@@ -31,10 +20,21 @@ import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutati
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useCheckPermissions, useSelectedOrganization } from 'hooks'
 import { IS_PLATFORM } from 'lib/constants'
-import Link from 'next/link'
+import {
+  AlertDescription_Shadcn_,
+  AlertTitle_Shadcn_,
+  Alert_Shadcn_,
+  Button,
+  Form,
+  IconAlertCircle,
+  IconEye,
+  IconEyeOff,
+  Input,
+  InputNumber,
+  Toggle,
+} from 'ui'
 import { WarningIcon } from 'ui-patterns/Icons/StatusIcons'
 import FormField from '../AuthProvidersForm/FormField'
-import { ExternalLink } from 'lucide-react'
 
 // Use a const string to represent no chars option. Represented as empty string on the backend side.
 const NO_REQUIRED_CHARACTERS = 'NO_REQUIRED_CHARS'
@@ -332,8 +332,6 @@ const BasicAuthSettingsForm = () => {
                     <UpgradeToPro
                       primaryText="Upgrade to Pro"
                       secondaryText="Leaked password protection available on Pro plans and up."
-                      projectRef={projectRef!}
-                      organizationSlug={organization!.slug}
                     />
                   )}
                   <Toggle
@@ -355,8 +353,6 @@ const BasicAuthSettingsForm = () => {
                     <UpgradeToPro
                       primaryText="Upgrade to Pro"
                       secondaryText="Configuring user sessions requires the Pro plan."
-                      projectRef={projectRef!}
-                      organizationSlug={organization!.slug}
                     />
                   )}
                   <Toggle
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
index e099ca8e7d3..069f050a153 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -1,11 +1,10 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useQueryClient } from '@tanstack/react-query'
 import dayjs from 'dayjs'
+import { AlertCircle, Clock } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import toast from 'react-hot-toast'
-import { IconAlertCircle, IconClock, AlertDescription_Shadcn_, Alert_Shadcn_ } from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import InformationBox from 'components/ui/InformationBox'
@@ -16,6 +15,7 @@ import { DatabaseBackup, useBackupsQuery } from 'data/database/backups-query'
 import { setProjectStatus } from 'data/projects/projects-query'
 import { useCheckPermissions, useSelectedOrganization } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import BackupItem from './BackupItem'
 import BackupsEmpty from './BackupsEmpty'
 import BackupsStorageAlert from './BackupsStorageAlert'
@@ -64,12 +64,10 @@ const BackupsList = () => {
   if (planKey === 'FREE') {
     return (
       <UpgradeToPro
-        icon={<IconClock size="large" />}
-        primaryText="Free Plan does not include project backups."
-        projectRef={projectRef}
-        organizationSlug={organization!.slug}
-        secondaryText="Upgrade to the Pro plan for up to 7 days of scheduled backups."
         addon="pitr"
+        icon={<Clock size={20} />}
+        primaryText="Free Plan does not include project backups."
+        secondaryText="Upgrade to the Pro plan for up to 7 days of scheduled backups."
       />
     )
   }
@@ -85,7 +83,7 @@ const BackupsList = () => {
           <>
             {!canTriggerScheduledBackups && (
               <InformationBox
-                icon={<IconAlertCircle className="text-foreground-light" strokeWidth={2} />}
+                icon={<AlertCircle size={16} className="text-foreground-light" strokeWidth={2} />}
                 title="You need additional permissions to trigger a scheduled backup"
               />
             )}
diff --git a/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx b/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx
index d4463792e32..c3fa2c3cfd2 100644
--- a/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/HTTPRequestFields.tsx
@@ -55,9 +55,7 @@ const HTTPRequestFields = ({
 
   const edgeFunctions = functions ?? []
   const apiService = settings?.autoApiService
-  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'service_role key')
-    ? apiService.serviceApiKey
-    : '[YOUR API KEY]'
+  const apiKey = apiService?.serviceApiKey ?? '[YOUR API KEY]'
 
   return (
     <>
@@ -180,7 +178,7 @@ const HTTPRequestFields = ({
                         onAddHeader({
                           id: uuidv4(),
                           name: 'Authorization',
-                          value: `Bearer ${anonKey}`,
+                          value: `Bearer ${apiKey}`,
                         })
                       }
                     >
diff --git a/apps/studio/components/interfaces/Docs/ResourceContent.tsx b/apps/studio/components/interfaces/Docs/ResourceContent.tsx
index 55422ab83ae..151c1d371e4 100644
--- a/apps/studio/components/interfaces/Docs/ResourceContent.tsx
+++ b/apps/studio/components/interfaces/Docs/ResourceContent.tsx
@@ -1,6 +1,6 @@
-import { useParams } from 'common'
-import { IconTable } from 'ui'
+import { Table2 } from 'lucide-react'
 
+import { useParams } from 'common'
 import CodeSnippet from 'components/interfaces/Docs/CodeSnippet'
 import Description from 'components/interfaces/Docs/Description'
 import Param from 'components/interfaces/Docs/Param'
@@ -34,7 +34,8 @@ const ResourceContent = ({
   const resourceDefinition = definitions[resourceId]
   const resourceMeta = resources[resourceId]
   const description = resourceDefinition?.description || null
-  const methods = Object.keys(resourcePaths).map((x) => x.toUpperCase())
+
+  const methods = Object.keys(resourcePaths ?? {}).map((x) => x.toUpperCase())
   const properties = Object.entries(resourceDefinition.properties || []).map(([id, val]: any) => ({
     ...val,
     id,
@@ -45,7 +46,7 @@ const ResourceContent = ({
     <>
       <h2 className="doc-section__table-name text-foreground mt-0 flex items-center px-6 gap-2">
         <span className="bg-slate-300 p-2 rounded-lg">
-          <IconTable size="small" />
+          <Table2 size={18} />
         </span>
         <span className="text-2xl font-bold">{resourceId}</span>
       </h2>
diff --git a/apps/studio/components/interfaces/Functions/CommandRender.tsx b/apps/studio/components/interfaces/Functions/CommandRender.tsx
index abe2d70ae33..010ff1f3474 100644
--- a/apps/studio/components/interfaces/Functions/CommandRender.tsx
+++ b/apps/studio/components/interfaces/Functions/CommandRender.tsx
@@ -1,5 +1,5 @@
+import { Check, Clipboard } from 'lucide-react'
 import { useState } from 'react'
-import { IconCheck, IconClipboard } from 'ui'
 
 const CommandRender = ({ commands }: any) => {
   return (
@@ -15,6 +15,7 @@ export default CommandRender
 
 const Command = ({ item }: any) => {
   const [isCopied, setIsCopied] = useState(false)
+
   return (
     <div className="space-y-1">
       <span className="font-mono text-sm text-foreground-lighter">{`> ${item.comment}`}</span>
@@ -38,15 +39,9 @@ const Command = ({ item }: any) => {
               }}
             >
               {isCopied ? (
-                <div className="text-brand">
-                  <IconCheck size={14} strokeWidth={3} />
-                </div>
+                <Check size={14} strokeWidth={3} className="text-brand" />
               ) : (
-                <div className="relative">
-                  <div className="block">
-                    <IconClipboard size={14} />
-                  </div>
-                </div>
+                <Clipboard size={14} />
               )}
             </button>
           </span>
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
index 7f1b81463e6..0fd475adaef 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx
@@ -23,18 +23,8 @@ import { useEdgeFunctionQuery } from 'data/edge-functions/edge-function-query'
 import { useEdgeFunctionDeleteMutation } from 'data/edge-functions/edge-functions-delete-mutation'
 import { useEdgeFunctionUpdateMutation } from 'data/edge-functions/edge-functions-update-mutation'
 import { useCheckPermissions } from 'hooks'
-import {
-  Alert,
-  Button,
-  Form,
-  IconExternalLink,
-  IconMaximize2,
-  IconMinimize2,
-  IconTerminal,
-  Input,
-  Modal,
-  Toggle,
-} from 'ui'
+import { ExternalLink, Maximize2, Minimize2, Terminal } from 'lucide-react'
+import { Alert, Button, Form, Input, Modal, Toggle } from 'ui'
 import CommandRender from '../CommandRender'
 import { generateCLICommands } from './EdgeFunctionDetails.utils'
 
@@ -60,9 +50,7 @@ const EdgeFunctionDetails = () => {
 
   // Get the API service
   const apiService = settings?.autoApiService
-  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
-    ? apiService.defaultApiKey
-    : '[YOUR ANON KEY]'
+  const anonKey = apiService?.defaultApiKey ?? '[YOUR ANON KEY]'
 
   const endpoint = apiService?.app_config.endpoint ?? ''
   const functionUrl =
@@ -198,11 +186,7 @@ const EdgeFunctionDetails = () => {
                           explicit import URLs
                         </p>
                         <div className="!mt-4">
-                          <Button
-                            asChild
-                            type="default"
-                            icon={<IconExternalLink strokeWidth={1.5} />}
-                          >
+                          <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
                             <Link
                               href="https://supabase.com/docs/guides/functions/import-maps"
                               target="_blank"
@@ -228,15 +212,15 @@ const EdgeFunctionDetails = () => {
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
               <div className="flex h-8 w-8 items-center justify-center rounded border bg-foreground p-2 text-background">
-                <IconTerminal strokeWidth={2} />
+                <Terminal size={18} strokeWidth={2} />
               </div>
               <h4>Command line access</h4>
             </div>
             <div className="cursor-pointer" onClick={() => setShowInstructions(!showInstructions)}>
               {showInstructions ? (
-                <IconMinimize2 size={14} strokeWidth={1.5} />
+                <Minimize2 size={14} strokeWidth={1.5} />
               ) : (
-                <IconMaximize2 size={14} strokeWidth={1.5} />
+                <Maximize2 size={14} strokeWidth={1.5} />
               )}
             </div>
           </div>
diff --git a/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx b/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
index d47dfae6246..7e578acfc3d 100644
--- a/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
+++ b/apps/studio/components/interfaces/Functions/FunctionsEmptyState.tsx
@@ -1,5 +1,7 @@
+import { Code, ExternalLink } from 'lucide-react'
 import Link from 'next/link'
-import { Button, IconBookOpen, IconCode } from 'ui'
+
+import { Button } from 'ui'
 import TerminalInstructions from './TerminalInstructions'
 
 const FunctionsEmptyState = () => {
@@ -16,7 +18,7 @@ const FunctionsEmptyState = () => {
             Supabase project with third-parties.
           </p>
           <div className="flex gap-2">
-            <Button asChild type="default" iconRight={<IconBookOpen />}>
+            <Button asChild type="default" icon={<ExternalLink />}>
               <Link
                 href="https://supabase.com/docs/guides/functions"
                 target="_blank"
@@ -25,7 +27,7 @@ const FunctionsEmptyState = () => {
                 Documentation
               </Link>
             </Button>
-            <Button asChild type="default" iconRight={<IconCode />}>
+            <Button asChild type="default" icon={<Code />}>
               <Link
                 href="https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions"
                 target="_blank"
diff --git a/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx b/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx
index ce184e3625b..53e27edf308 100644
--- a/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx
+++ b/apps/studio/components/interfaces/Functions/TerminalInstructions.tsx
@@ -1,13 +1,13 @@
 import { useParams } from 'common/hooks'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { Button, IconBookOpen, IconCode, IconMaximize2, IconMinimize2, IconTerminal } from 'ui'
+import { Button } from 'ui'
 
 import CommandRender from 'components/interfaces/Functions/CommandRender'
 import { useAccessTokensQuery } from 'data/access-tokens/access-tokens-query'
 import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
+import { Code, ExternalLink, Maximize2, Minimize2, Terminal } from 'lucide-react'
 import type { Commands } from './Functions.types'
 
 interface TerminalInstructionsProps {
@@ -28,11 +28,8 @@ const TerminalInstructions = ({
   const { data: customDomainData } = useCustomDomainsQuery({ projectRef })
 
   const apiService = settings?.autoApiService
-  const anonKey = apiService?.service_api_keys.find((x) => x.name === 'anon key')
-    ? apiService.defaultApiKey
-    : '[YOUR ANON KEY]'
+  const anonKey = apiService?.defaultApiKey ?? '[YOUR ANON KEY]'
   const endpoint = settings?.autoApiService.app_config.endpoint ?? ''
-
   const functionsEndpoint =
     customDomainData?.customDomain?.status === 'active'
       ? `https://${customDomainData.customDomain.hostname}/functions/v1`
@@ -95,25 +92,23 @@ const TerminalInstructions = ({
     >
       <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 items-center gap-x-3">
             <div className="flex items-center justify-center w-8 h-8 p-2 border rounded bg-alternative">
-              <IconTerminal strokeWidth={2} />
+              <Terminal strokeWidth={2} />
             </div>
             <h4>Create your first Edge Function via the CLI</h4>
           </div>
           {closable && (
             <div className="cursor-pointer" onClick={() => setShowInstructions(!showInstructions)}>
               {showInstructions ? (
-                <IconMinimize2 size={14} strokeWidth={1.5} />
+                <Minimize2 size={16} strokeWidth={1.5} />
               ) : (
-                <IconMaximize2 size={14} strokeWidth={1.5} />
+                <Maximize2 size={16} strokeWidth={1.5} />
               )}
             </div>
           )}
         </div>
-        <div>
-          <CommandRender commands={commands} />
-        </div>
+        <CommandRender commands={commands} />
       </div>
       {tokens && tokens.length === 0 ? (
         <div className="px-8 py-6 space-y-3 border-t">
@@ -136,23 +131,19 @@ const TerminalInstructions = ({
             </p>
           </div>
           <div className="flex gap-2">
-            <Button asChild type="default" iconRight={<IconBookOpen />}>
-              <Link
-                href="https://supabase.com/docs/guides/functions"
-                target="_blank"
-                rel="noreferrer"
-              >
+            <Button asChild type="default" icon={<ExternalLink />}>
+              <a href="https://supabase.com/docs/guides/functions" target="_blank" rel="noreferrer">
                 Documentation
-              </Link>
+              </a>
             </Button>
-            <Button asChild type="default" iconRight={<IconCode />}>
-              <Link
+            <Button asChild type="default" icon={<Code />}>
+              <a
                 href="https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions"
                 target="_blank"
                 rel="noreferrer"
               >
                 Examples
-              </Link>
+              </a>
             </Button>
           </div>
         </div>
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
index 85ed9bf35c8..87bea407407 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
@@ -91,7 +91,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
   })
 
   const selectedQuery =
-    selectedRow !== undefined ? queryPerformanceQuery.data?.[selectedRow]['query'] : undefined
+    selectedRow !== undefined ? queryPerformanceQuery.data?.[selectedRow]?.['query'] : undefined
   const showIndexSuggestions = (selectedQuery ?? '').trim().toLowerCase().startsWith('select')
 
   const onSortChange = (column: string) => {
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
index 88c6f9aa91e..f8635f8946a 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig.tsx
@@ -1,19 +1,19 @@
+import { AlertCircle } from 'lucide-react'
 import Link from 'next/link'
 
-import { useParams } from 'common/hooks'
+import { useParams } from 'common'
 import { FormHeader } from 'components/ui/Forms'
 import Panel from 'components/ui/Panel'
 import UpgradeToPro from 'components/ui/UpgradeToPro'
 import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
-import { IconAlertCircle } from 'ui'
-import CustomDomainActivate from './CustomDomainActivate'
-import CustomDomainDelete from './CustomDomainDelete'
-import CustomDomainsConfigureHostname from './CustomDomainsConfigureHostname'
-import CustomDomainsShimmerLoader from './CustomDomainsShimmerLoader'
-import CustomDomainVerify from './CustomDomainVerify'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { useFlag, useSelectedOrganization } from 'hooks'
+import CustomDomainActivate from './CustomDomainActivate'
+import CustomDomainDelete from './CustomDomainDelete'
+import CustomDomainVerify from './CustomDomainVerify'
+import CustomDomainsConfigureHostname from './CustomDomainsConfigureHostname'
+import CustomDomainsShimmerLoader from './CustomDomainsShimmerLoader'
 
 const CustomDomainConfig = () => {
   const { ref } = useParams()
@@ -50,7 +50,7 @@ const CustomDomainConfig = () => {
         <Panel>
           <Panel.Content className="space-y-6">
             <div className="flex items-center justify-center space-x-2 py-8">
-              <IconAlertCircle size={16} strokeWidth={1.5} />
+              <AlertCircle size={16} strokeWidth={1.5} />
               <p className="text-sm text-foreground-light">
                 Failed to retrieve custom domain configuration. Please try again later or{' '}
                 <Link href={`/support/new?ref=${ref}&category=sales`} className="underline">
@@ -65,14 +65,12 @@ const CustomDomainConfig = () => {
         <CustomDomainsConfigureHostname />
       ) : data?.status === '0_not_allowed' ? (
         <UpgradeToPro
-          icon={<IconAlertCircle size={18} strokeWidth={1.5} />}
+          icon={<AlertCircle size={18} strokeWidth={1.5} />}
           primaryText={
             customDomainsDisabledDueToQuota
               ? 'New custom domains are temporarily disabled'
               : 'Custom domains are a Pro plan add-on'
           }
-          projectRef={ref}
-          organizationSlug={organization?.slug}
           secondaryText={
             customDomainsDisabledDueToQuota
               ? 'We are working with our upstream DNS provider before we are able to sign up new custom domains. Please check back in a few hours.'
diff --git a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
index 7fdda3f4b93..d2b3c7cb612 100644
--- a/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -1,7 +1,19 @@
+import { zodResolver } from '@hookform/resolvers/zod'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
+import { Clock } from 'lucide-react'
 import { useEffect, useState } from 'react'
+import { SubmitHandler, useForm } from 'react-hook-form'
 import toast from 'react-hot-toast'
+import * as z from 'zod'
+
+import { useParams } from 'common'
+import AlertError from 'components/ui/AlertError'
+import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
+import UpgradeToPro from 'components/ui/UpgradeToPro'
+import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
+import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation'
+import { useCheckPermissions } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
 import {
   Button,
   FormControl_Shadcn_,
@@ -11,32 +23,17 @@ import {
   FormMessage_Shadcn_,
   Form_Shadcn_,
   Input_Shadcn_,
-  Select_Shadcn_,
+  SelectContent_Shadcn_,
   SelectItem_Shadcn_,
   SelectTrigger_Shadcn_,
   SelectValue_Shadcn_,
-  SelectContent_Shadcn_,
+  Select_Shadcn_,
 } from 'ui'
-
-import AlertError from 'components/ui/AlertError'
-import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import UpgradeToPro from 'components/ui/UpgradeToPro'
-import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
-import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation'
-import { useCheckPermissions, useSelectedOrganization } from 'hooks'
-import { IS_PLATFORM } from 'lib/constants'
 import { STORAGE_FILE_SIZE_LIMIT_MAX_BYTES, StorageSizeUnits } from './StorageSettings.constants'
 import { convertFromBytes, convertToBytes } from './StorageSettings.utils'
-import * as z from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm, SubmitHandler } from 'react-hook-form'
-import { Clock } from 'lucide-react'
 
 const StorageSettings = () => {
   const { ref: projectRef } = useParams()
-  const organization = useSelectedOrganization()
-  const organizationSlug = organization?.slug
-
   const canUpdateStorageSettings = useCheckPermissions(PermissionAction.STORAGE_ADMIN_WRITE, '*')
 
   const {
@@ -196,9 +193,7 @@ const StorageSettings = () => {
                 <div className="px-6 pb-6">
                   <UpgradeToPro
                     icon={<Clock size="large" />}
-                    organizationSlug={organizationSlug ?? ''}
                     primaryText="Free Plan has a fixed upload file size limit of 50 MB."
-                    projectRef={projectRef ?? ''}
                     secondaryText="Upgrade to the Pro plan for a configurable upload file size limit of up to 5 GB."
                   />
                 </div>
diff --git a/apps/studio/components/ui/UpgradeToPro.tsx b/apps/studio/components/ui/UpgradeToPro.tsx
index 90c4ae72a53..e8d004d315d 100644
--- a/apps/studio/components/ui/UpgradeToPro.tsx
+++ b/apps/studio/components/ui/UpgradeToPro.tsx
@@ -4,14 +4,12 @@ import Link from 'next/link'
 import { ReactNode } from 'react'
 import { Button } from 'ui'
 
-import { useCheckPermissions, useFlag } from 'hooks'
+import { useCheckPermissions, useFlag, useSelectedOrganization, useSelectedProject } from 'hooks'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 
 interface UpgradeToProProps {
   icon?: ReactNode
   primaryText: string
-  projectRef?: string
-  organizationSlug?: string
   secondaryText: string
   addon?: 'pitr' | 'customDomain' | 'computeInstance'
   buttonText?: string
@@ -21,14 +19,14 @@ interface UpgradeToProProps {
 const UpgradeToPro = ({
   icon,
   primaryText,
-  projectRef,
-  organizationSlug,
   secondaryText,
   addon,
   buttonText,
   disabled = false,
 }: UpgradeToProProps) => {
-  const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organizationSlug })
+  const project = useSelectedProject()
+  const organization = useSelectedOrganization()
+  const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
   const plan = subscription?.plan?.id
 
   const canUpdateSubscription = useCheckPermissions(
@@ -63,8 +61,8 @@ const UpgradeToPro = ({
                 <Link
                   href={
                     plan === 'free'
-                      ? `/org/${organizationSlug ?? '_'}/billing?panel=subscriptionPlan`
-                      : `/project/${projectRef ?? '_'}/settings/addons?panel=${addon}`
+                      ? `/org/${organization?.slug ?? '_'}/billing?panel=subscriptionPlan`
+                      : `/project/${project?.ref ?? '_'}/settings/addons?panel=${addon}`
                   }
                 >
                   {buttonText || (plan === 'free' ? 'Upgrade to Pro' : 'Enable Addon')}
diff --git a/apps/studio/data/notifications/notifications-v2-query.ts b/apps/studio/data/notifications/notifications-v2-query.ts
index 847c03ce95c..10214be42e6 100644
--- a/apps/studio/data/notifications/notifications-v2-query.ts
+++ b/apps/studio/data/notifications/notifications-v2-query.ts
@@ -76,7 +76,7 @@ export const useNotificationsV2Query = <TData = NotificationsData>(
       enabled: enabled,
       getNextPageParam(lastPage, pages) {
         const page = pages.length
-        if (lastPage.length < limit) return undefined
+        if ((lastPage ?? []).length < limit) return undefined
         return page
       },
       ...options,
diff --git a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
index fb46c8dff0d..8ca1607c74a 100644
--- a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -1,4 +1,5 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+
 import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
 import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
 import { DatabaseLayout } from 'components/layouts'
@@ -54,7 +55,6 @@ const PITR = () => {
 
   const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
 
-  const ref = project?.ref ?? 'default'
   const plan = subscription?.plan?.id
   const isEnabled = backups?.pitr_enabled
 
@@ -78,15 +78,13 @@ const PITR = () => {
             </>
           ) : (
             <UpgradeToPro
-              organizationSlug={organization!.slug}
-              projectRef={ref}
+              addon="pitr"
               primaryText="Point in Time Recovery is a Pro plan add-on."
               secondaryText={
                 plan === 'free'
                   ? 'With PITR, you can roll back to a specific time (to the second!). PITR starts from $100/mo and is available for Pro plan customers. Note that the Pro plan already includes daily backups for no extra charge—PITR is an optional upgrade.'
                   : 'Please enable the add-on to enable point in time recovery for your project.'
               }
-              addon="pitr"
             />
           )}
         </>