diff --git a/apps/studio/components/grid/components/grid/Grid.utils.tsx b/apps/studio/components/grid/components/grid/Grid.utils.tsx
index b822b4be1d95b..1c4bb625968a0 100644
--- a/apps/studio/components/grid/components/grid/Grid.utils.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.utils.tsx
@@ -14,7 +14,7 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
-import { Dictionary } from 'types'
+import type { Dictionary } from 'types'
 
 export function useOnRowsChange(rows: SupaRow[]) {
   const queryClient = useQueryClient()
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
index f695fb6717a47..25a127596999a 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
@@ -1,9 +1,9 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import { noop } from 'lodash'
+import { HelpCircle } from 'lucide-react'
 import { useEffect } from 'react'
 
 import SqlEditor from 'components/ui/SqlEditor'
-import { usePrevious } from 'hooks/deprecated'
-import { HelpCircle } from 'lucide-react'
 import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 interface PolicyDefinitionProps {
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
index 3fd18c5cf4604..7c83c698b1ec5 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -44,15 +44,19 @@ export const PolicyTableRowHeader = ({
 
   return (
     <div id={table.id.toString()} className="flex w-full items-center justify-between">
-      <div className="flex gap-x-4 text-left">
+      <div className="flex gap-x-4 text-left flex-wrap">
         <EditorTablePageLink
           projectRef={ref}
           id={String(table.id)}
-          className="flex items-center gap-x-3"
+          className="flex items-center gap-3 flex-wrap"
         >
           <Table strokeWidth={1.5} size={16} className="text-foreground-muted" />
           <CardTitle className="m-0 normal-case">{table.name}</CardTitle>
-          {!table.rls_enabled && <Badge variant="warning">RLS Disabled</Badge>}
+          {!table.rls_enabled && (
+            <Badge variant="warning" className="shrink-0">
+              RLS Disabled
+            </Badge>
+          )}
         </EditorTablePageLink>
         {isTableLocked && (
           <Badge>
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
index 244abee78fb30..dae8ca6d2baee 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
@@ -56,8 +56,8 @@ export const EnumeratedTypes = () => {
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-2">
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-2 flex-wrap">
           <SchemaSelector
             className="w-full lg:w-[180px]"
             size="tiny"
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
index 48931a50560d1..d3e77df1c6329 100644
--- a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
@@ -7,12 +7,11 @@ import { useParams } from 'common'
 import NoSearchResults from 'components/to-be-cleaned/NoSearchResults'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { Loading } from 'components/ui/Loading'
 import { useDatabasePublicationsQuery } from 'data/database-publications/database-publications-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { Card, LogoLoader, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { PublicationsTableItem } from './PublicationsTableItem'
@@ -87,7 +86,7 @@ export const PublicationsTables = () => {
 
       {(isLoading || isLoadingPermissions) && (
         <div className="mt-8">
-          <Loading />
+          <LogoLoader />
         </div>
       )}
 
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
index 557c26f7f378f..0fbb5df2f9178 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
@@ -16,7 +16,7 @@ import {
   PipelineStatusRequestStatus,
   usePipelineRequestStatus,
 } from 'state/replication-pipeline-request-status'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import { DeleteDestination } from './DeleteDestination'
diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
index 5e7bec9d0e20d..c84b130bdd756 100644
--- a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { InlineLink } from 'components/ui/InlineLink'
 import { ReplicationPipelineStatusData } from 'data/replication/pipeline-status-query'
 import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { cn, Tooltip, TooltipContent, TooltipTrigger, WarningIcon } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import { getPipelineStateMessages } from './Pipeline.utils'
diff --git a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
index 5974fe6f98ae8..fa1cfd8283408 100644
--- a/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/RowMenu.tsx
@@ -11,7 +11,7 @@ import {
   PipelineStatusRequestStatus,
   usePipelineRequestStatus,
 } from 'state/replication-pipeline-request-status'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   DropdownMenu,
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
index 5f662b3e54c15..072948b452d56 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
@@ -97,7 +97,7 @@ const TriggersList = ({
   return (
     <div className="space-y-4">
       <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-2">
+        <div className="flex flex-col lg:flex-row lg:items-center gap-2 flex-wrap">
           <SchemaSelector
             className="w-full lg:w-[180px]"
             size="tiny"
diff --git a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
index 3e946b5802fcf..b6212222f1aeb 100644
--- a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
+++ b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
@@ -187,13 +187,13 @@ export const AdvisorWidget = () => {
   }
 
   return (
-    <div>
+    <div className="@container">
       {isLoadingLints ? (
         <ShimmeringLoader className="w-96 mb-6" />
       ) : (
         <div className="flex justify-between items-center mb-6">{titleContent}</div>
       )}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
         <Card className="h-80">
           <Tabs value={selectedTab} className="h-full flex flex-col">
             <CardHeader className="h-10 py-0 pl-4 pr-2 flex flex-row items-center justify-between flex-0">
diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx
index e040864b476ed..d7982de353afe 100644
--- a/apps/studio/components/interfaces/Home/Home.tsx
+++ b/apps/studio/components/interfaces/Home/Home.tsx
@@ -213,7 +213,7 @@ export const Home = () => {
 
       <>
         <div className="py-16 border-b border-muted">
-          <div className="mx-auto max-w-7xl space-y-16">
+          <div className="mx-auto max-w-7xl space-y-16 @container">
             {IS_PLATFORM && project?.status !== PROJECT_STATUS.INACTIVE && (
               <>{isNewProject ? <NewProjectPanel /> : <ProjectUsageSection />}</>
             )}
@@ -222,7 +222,7 @@ export const Home = () => {
         </div>
 
         <div className="bg-surface-100/5 py-16">
-          <div className="mx-auto max-w-7xl space-y-16">
+          <div className="mx-auto max-w-7xl space-y-16 @container">
             {project?.status !== PROJECT_STATUS.INACTIVE && (
               <>
                 <div className="space-y-8">
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
index 46210ee67ceb7..3ed1f237cefb6 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
@@ -7,7 +7,7 @@ import type { IntegrationProjectConnection } from 'data/integrations/integration
 import { getComputeSize, OrgProject } from 'data/projects/org-projects-infinite-query'
 import type { ResourceWarning } from 'data/usage/resource-warnings-query'
 import { BASE_PATH } from 'lib/constants'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import { TableCell, TableRow } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
 import { inferProjectStatus } from './ProjectCard.utils'
diff --git a/apps/studio/components/interfaces/Home/ProjectUsage.tsx b/apps/studio/components/interfaces/Home/ProjectUsage.tsx
index 346332575d81a..1afdaada2f151 100644
--- a/apps/studio/components/interfaces/Home/ProjectUsage.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -195,8 +195,8 @@ const ProjectUsage = () => {
           Statistics for {selectedInterval.label.toLowerCase()}
         </span>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4">
-        <Panel className="mb-0 md:mb-0">
+      <div className="grid grid-cols-1 @md:grid-cols-2 gap-4 @2xl:grid-cols-4">
+        <Panel className="mb-0">
           <Panel.Content className="space-y-4">
             <PanelHeader
               icon={
diff --git a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
index d740bc3d8e5ca..8742334d83651 100644
--- a/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ActivityStats.tsx
@@ -55,7 +55,7 @@ export const ActivityStats = () => {
 
   return (
     <div className="@container">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:gap-6 flex-wrap">
+      <div className="grid grid-cols-1 @md:grid-cols-2 gap-2 @md:gap-6 flex-wrap">
         <ServiceStatus />
 
         <SingleStat
diff --git a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx b/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
index 62e4c9fb4f5a4..601c04fadf324 100644
--- a/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/CustomReportSection.tsx
@@ -9,8 +9,8 @@ import {
 import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from '@dnd-kit/sortable'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import dayjs from 'dayjs'
-import type { CSSProperties, DragEvent, ReactNode } from 'react'
 import { Plus, RefreshCw } from 'lucide-react'
+import type { CSSProperties, DragEvent, ReactNode } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
diff --git a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
index fbdfe7aa41f0f..62c1d19864e4b 100644
--- a/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
+++ b/apps/studio/components/interfaces/HomeNew/GettingStarted/GettingStarted.tsx
@@ -77,9 +77,9 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
   }
 
   return (
-    <Card className="overflow-hidden">
-      <div className="flex flex-col lg:flex-row">
-        <aside className="hidden border-r lg:block lg:w-[calc(1/3*100%-16px)]">
+    <Card className="overflow-hidden @container">
+      <div className="flex flex-col @2xl:flex-row">
+        <aside className="hidden border-r @2xl:block @2xl:w-[calc(1/3*100%-16px)]">
           <ol>
             {steps.map((step, index) => {
               const isActive = step.key === activeStep.key
@@ -130,7 +130,7 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
         </aside>
 
         <CardContent className="flex flex-1 flex-col gap-0 p-0 overflow-y-auto border-b-0">
-          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 lg:hidden">
+          <div className="flex items-center justify-between gap-2 border-b px-2 py-2 @2xl:hidden">
             <span className="text-xs shrink-0 font-mono text-foreground-light w-7 h-7 bg border flex items-center justify-center rounded-md">
               {activeStepIndex + 1}
             </span>
@@ -186,7 +186,7 @@ export function GettingStarted({ steps, onStepClick }: GettingStartedProps) {
               <h3>{activeStep.title}</h3>
               <Badge
                 variant={activeStep.status === 'complete' ? 'success' : 'default'}
-                className="capitalize hidden lg:inline-flex"
+                className="capitalize hidden @2xl:inline-flex"
               >
                 {activeStep.status}
               </Badge>
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
index 2478f55f7cda8..2f5cd906fc9d9 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
@@ -6,13 +6,13 @@ import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
-import { Loading } from 'components/ui/Loading'
 import { getKeys, useAPIKeysQuery } from 'data/api-keys/api-keys-query'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { getRoleImpersonationJWT } from 'lib/role-impersonation'
 import { useGetImpersonatedRoleState } from 'state/role-impersonation-state'
+import { LogoLoader } from 'ui'
 
 export const GraphiQLTab = () => {
   const { resolvedTheme } = useTheme()
@@ -73,7 +73,7 @@ export const GraphiQLTab = () => {
   }, [projectRef, getImpersonatedRoleState, jwtSecret, accessToken, serviceKey, secretKey?.api_key])
 
   if ((IS_PLATFORM && !accessToken) || !isFetched) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   return <GraphiQL fetcher={fetcher} theme={currentTheme} />
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
index c57020fd0c732..a3743525dd00e 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
@@ -7,7 +7,7 @@ import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
 
 import AlertError from 'components/ui/AlertError'
 import { PostgresQueueMessage } from 'data/database-queues/database-queue-messages-infinite-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { Badge, Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from 'ui'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { DATE_FORMAT, MessageDetailsPanel } from './MessageDetailsPanel'
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/__tests__/EditSecretModal.test.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/__tests__/EditSecretModal.test.tsx
index b9423af032ae8..497feb435ef8b 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/__tests__/EditSecretModal.test.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/__tests__/EditSecretModal.test.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { render } from 'tests/helpers'
 import { addAPIMock } from 'tests/lib/msw'
 import { routerMock } from 'tests/lib/route-mock'
-import { VaultSecret } from 'types'
+import type { VaultSecret } from 'types'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import EditSecretModal from '../EditSecretModal'
 
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx
index d653482a4e438..76ae4e61663c1 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg.tsx
@@ -17,7 +17,7 @@ import {
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useOrganizationLinkAwsMarketplaceMutation } from 'data/organizations/organization-link-aws-marketplace-mutation'
 import { DOCS_URL } from 'lib/constants'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import {
   Button,
   Collapsible_Shadcn_,
diff --git a/apps/studio/components/interfaces/Organization/OrganizationCard.tsx b/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
index 0a4b81c256fc7..7ec30cf806c9e 100644
--- a/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
+++ b/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
@@ -5,7 +5,7 @@ import { useIsMFAEnabled } from 'common'
 import { ActionCard } from 'components/ui/ActionCard'
 import { useOrgProjectsInfiniteQuery } from 'data/projects/org-projects-infinite-query'
 import { Fragment } from 'react'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 export const OrganizationCard = ({
diff --git a/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx b/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx
index 29954b0a30375..d9547dc2793bd 100644
--- a/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx
+++ b/apps/studio/components/interfaces/Organization/ProjectClaim/confirm.tsx
@@ -12,7 +12,7 @@ import { useOrganizationProjectClaimMutation } from 'data/organizations/organiza
 import { OrganizationProjectClaimResponse } from 'data/organizations/organization-project-claim-query'
 import { projectKeys } from 'data/projects/keys'
 import { BASE_PATH } from 'lib/constants'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import {
   Button,
   cn,
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
index 0e4907cd7fd48..2a3578d8a5511 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
@@ -4,7 +4,7 @@ import AlertError from 'components/ui/AlertError'
 import { OrganizationInviteByToken } from 'data/organization-members/organization-invitation-token-query'
 import { useSignOut } from 'lib/auth'
 import { useProfile } from 'lib/profile'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { cn } from 'ui'
 
 interface OrganizationInviteError {
diff --git a/apps/studio/components/interfaces/Reports/GridResize.tsx b/apps/studio/components/interfaces/Reports/GridResize.tsx
index f4634f748346e..6355da82b9178 100644
--- a/apps/studio/components/interfaces/Reports/GridResize.tsx
+++ b/apps/studio/components/interfaces/Reports/GridResize.tsx
@@ -15,7 +15,7 @@ import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import { createSqlSnippetSkeletonV2 } from '../SQLEditor/SQLEditor.utils'
 import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
 import { ReportBlock } from './ReportBlock/ReportBlock'
diff --git a/apps/studio/components/interfaces/Reports/MetricOptions.tsx b/apps/studio/components/interfaces/Reports/MetricOptions.tsx
index 53d39b157bce4..19cc6bab79985 100644
--- a/apps/studio/components/interfaces/Reports/MetricOptions.tsx
+++ b/apps/studio/components/interfaces/Reports/MetricOptions.tsx
@@ -8,7 +8,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { Metric, METRIC_CATEGORIES, METRICS } from 'lib/constants/metrics'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import {
   Command_Shadcn_,
   CommandEmpty_Shadcn_,
diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
index 1e6ea53330551..155fc26e1f908 100644
--- a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
@@ -19,7 +19,7 @@ import { METRICS } from 'lib/constants/metrics'
 import { Activity, BarChartIcon, Loader2 } from 'lucide-react'
 import { Bar, BarChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import { WarningIcon } from 'ui'
 import { METRIC_THRESHOLDS } from './ReportBlock.constants'
 import { ReportBlockContainer } from './ReportBlockContainer'
diff --git a/apps/studio/components/interfaces/Reports/Reports.tsx b/apps/studio/components/interfaces/Reports/Reports.tsx
index b51b6661b1348..b2669fe8949d0 100644
--- a/apps/studio/components/interfaces/Reports/Reports.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.tsx
@@ -11,7 +11,6 @@ import { useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { DateRangePicker } from 'components/ui/DateRangePicker'
-import { Loading } from 'components/ui/Loading'
 import NoPermission from 'components/ui/NoPermission'
 import { DEFAULT_CHART_CONFIG } from 'components/ui/QueryBlock/QueryBlock'
 import { AnalyticsInterval } from 'data/analytics/constants'
@@ -29,8 +28,8 @@ import { Metric, TIME_PERIODS_REPORTS } from 'lib/constants/metrics'
 import { uuidv4 } from 'lib/helpers'
 import { useProfile } from 'lib/profile'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { Dashboards } from 'types'
-import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from 'ui'
+import type { Dashboards } from 'types'
+import { Button, cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, LogoLoader } from 'ui'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { createSqlSnippetSkeletonV2 } from '../SQLEditor/SQLEditor.utils'
 import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
@@ -392,7 +391,7 @@ const Reports = () => {
   }, [hasEdits, confirmNavigate, router])
 
   if (isLoading || isLoadingPermissions) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   if (!canReadReport) {
diff --git a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
index f6a0884353aa9..db220dbf91e40 100644
--- a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
+++ b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
@@ -11,17 +11,17 @@ import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import BarChart from 'components/ui/Charts/BarChart'
 import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Alert_Shadcn_,
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
   Button,
   Collapsible,
-  WarningIcon,
   Collapsible_Shadcn_,
-  CollapsibleTrigger_Shadcn_,
   CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+  WarningIcon,
 } from 'ui'
 import { queryParamsToObject } from '../Reports.utils'
 import { ReportWidgetProps, ReportWidgetRendererProps } from '../ReportWidget'
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
index 139998920ee46..8e363debfeb2e 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
@@ -12,7 +12,7 @@ import { useLocalStorage } from 'hooks/misc/useLocalStorage'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
 import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   cn,
diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index cd92098dd7a68..0dddabc29e9b2 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -13,7 +13,7 @@ import { useUrlState } from 'hooks/ui/useUrlState'
 import { IS_PLATFORM } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   CodeBlock,
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index 9a0591906e5f4..a8fbec38aacab 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -1,7 +1,7 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import { AlertCircle, Check, Loader2, RefreshCcw } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
-import { usePrevious } from 'hooks/deprecated'
 import { useProfile } from 'lib/profile'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
index a7c259a7d2a03..a750dc13090ee 100644
--- a/apps/studio/components/interfaces/Settings/General/General.tsx
+++ b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -140,7 +140,7 @@ export const General = () => {
           <div className="mt-6" id="restart-project">
             <FormPanel>
               <div className="flex flex-col px-8 py-4">
-                <div className="flex justify-between items-center">
+                <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
                   <div>
                     <p className="text-sm">
                       {projectSettingsRestartProject ? 'Restart project' : 'Restart database'}
@@ -155,7 +155,7 @@ export const General = () => {
                 </div>
               </div>
               <div
-                className="flex w-full items-center justify-between px-8 py-4"
+                className="flex w-full flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4 px-8 py-4"
                 id="pause-project"
               >
                 <div>
@@ -173,7 +173,7 @@ export const General = () => {
           <div className="mt-6">
             <Panel>
               <Panel.Content>
-                <div className="flex justify-between">
+                <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
                   <div className="flex space-x-4">
                     <BarChart2 strokeWidth={2} />
                     <div>
diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
index 77935542725df..093c1d9e3dc3d 100644
--- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel.tsx
@@ -18,7 +18,7 @@ export const TransferProjectPanel = () => {
       />
       <Panel>
         <Panel.Content>
-          <div className="flex justify-between items-center gap-8">
+          <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
             <div className="flex space-x-4">
               <Truck className="mt-1" />
               <div className="space-y-1 xl:max-w-lg">
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index d16a715497ead..68fccc043e14a 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -5,6 +5,7 @@ import { Key, ReactNode, useCallback, useEffect, useMemo, useState } from 'react
 import { Item, Menu, useContextMenu } from 'react-contexify'
 import DataGrid, { Column, RenderRowProps, Row } from 'react-data-grid'
 import { createPortal } from 'react-dom'
+import { toast } from 'sonner'
 
 import { IS_PLATFORM, useParams } from 'common'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
@@ -12,8 +13,7 @@ import { DownloadResultsButton } from 'components/ui/DownloadResultsButton'
 import { useSelectedLog } from 'hooks/analytics/useSelectedLog'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useProfile } from 'lib/profile'
-import { toast } from 'sonner'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import {
   Button,
   ResizableHandle,
diff --git a/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx b/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
index 4d95be7cea025..0afcc534c07ca 100644
--- a/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
@@ -1,9 +1,10 @@
-import Table from 'components/to-be-cleaned/Table'
+import { Play } from 'lucide-react'
 import { useRouter } from 'next/router'
+
+import Table from 'components/to-be-cleaned/Table'
 import type { LogSqlSnippets } from 'types'
 import { Button } from 'ui'
 import SqlSnippetCode from './Logs.SqlSnippetCode'
-import { Play } from 'lucide-react'
 
 interface Props {
   item: LogSqlSnippets.Content
diff --git a/apps/studio/components/interfaces/Storage/StorageExplorer/useFetchFileUrlQuery.tsx b/apps/studio/components/interfaces/Storage/StorageExplorer/useFetchFileUrlQuery.tsx
index 3647f90009d21..a3d1905d1f23b 100644
--- a/apps/studio/components/interfaces/Storage/StorageExplorer/useFetchFileUrlQuery.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageExplorer/useFetchFileUrlQuery.tsx
@@ -3,7 +3,7 @@ import { getPublicUrlForBucketObject } from 'data/storage/bucket-object-get-publ
 import { signBucketObject } from 'data/storage/bucket-object-sign-mutation'
 import { Bucket } from 'data/storage/buckets-query'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { StorageItem } from '../Storage.types'
 
 const DEFAULT_EXPIRY = 7 * 24 * 60 * 60 // in seconds, default to 1 week
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
index 17bc50b429f03..d1ece93f8cd4d 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlowPanel.tsx
@@ -2,7 +2,10 @@ import { useState } from 'react'
 
 import { useParams } from 'common'
 import { useDataTable } from 'components/ui/DataTable/providers/DataTableProvider'
-import { ServiceFlowType, useUnifiedLogInspectionQuery } from 'data/logs'
+import {
+  ServiceFlowType,
+  useUnifiedLogInspectionQuery,
+} from 'data/logs/unified-log-inspection-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import {
   CodeBlock,
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index cb259ffca56f6..43bc5ec4668a8 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -5,7 +5,6 @@ import { forwardRef, Fragment, PropsWithChildren, ReactNode, useEffect, useState
 import { useFlag, useParams } from 'common'
 import { CreateBranchModal } from 'components/interfaces/BranchManagement/CreateBranchModal'
 import { ProjectAPIDocs } from 'components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
-import { Loading } from 'components/ui/Loading'
 import { ResourceExhaustionWarningBanner } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useCustomContent } from 'hooks/custom-content/useCustomContent'
@@ -15,7 +14,7 @@ import { withAuth } from 'hooks/misc/withAuth'
 import { PROJECT_STATUS } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
-import { cn, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+import { cn, LogoLoader, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 import MobileSheetNav from 'ui-patterns/MobileSheetNav/MobileSheetNav'
 import { useEditorType } from '../editors/EditorsLayout.hooks'
 import BuildingState from './BuildingState'
@@ -334,7 +333,7 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
   }, [ref])
 
   if (isBlocking && (isLoading || (requiresProjectDetails && selectedProject === undefined))) {
-    return router.pathname.endsWith('[ref]') ? <LoadingState /> : <Loading />
+    return router.pathname.endsWith('[ref]') ? <LoadingState /> : <LogoLoader />
   }
 
   if (isRestarting && !isBackupsPage) {
@@ -370,7 +369,7 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
   }
 
   if (shouldRedirectToHomeForBuilding) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   if (shouldShowBuildingState) {
diff --git a/apps/studio/components/layouts/ReportsLayout/ReportMenuItem.tsx b/apps/studio/components/layouts/ReportsLayout/ReportMenuItem.tsx
index 781a4080ba2f3..0b8b048919a7f 100644
--- a/apps/studio/components/layouts/ReportsLayout/ReportMenuItem.tsx
+++ b/apps/studio/components/layouts/ReportsLayout/ReportMenuItem.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { ContentBase } from 'data/content/content-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useProfile } from 'lib/profile'
-import { Dashboards } from 'types'
+import type { Dashboards } from 'types'
 import {
   Button,
   cn,
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx
index c6e33f9922fa0..28c2be4715213 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx
@@ -6,7 +6,7 @@ import { getContentById } from 'data/content/content-id-query'
 import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
 import { Snippet } from 'data/content/sql-folders-query'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { SqlSnippets } from 'types'
+import type { SqlSnippets } from 'types'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 export const ShareSnippetModal = ({
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx
index 3da90a17921d3..fb1fc02d292c0 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx
@@ -1,11 +1,12 @@
+import { EyeOffIcon } from 'lucide-react'
+import { toast } from 'sonner'
+
 import { useParams } from 'common'
 import { getContentById } from 'data/content/content-id-query'
 import { useContentUpsertMutation } from 'data/content/content-upsert-mutation'
 import { Snippet } from 'data/content/sql-folders-query'
-import { EyeOffIcon } from 'lucide-react'
-import { toast } from 'sonner'
 import { useSqlEditorV2StateSnapshot } from 'state/sql-editor-v2'
-import { SqlSnippets } from 'types'
+import type { SqlSnippets } from 'types'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 
 export const UnshareSnippetModal = ({
diff --git a/apps/studio/components/layouts/Scaffold.tsx b/apps/studio/components/layouts/Scaffold.tsx
index 0d9851b26182c..e30e37e951ee4 100644
--- a/apps/studio/components/layouts/Scaffold.tsx
+++ b/apps/studio/components/layouts/Scaffold.tsx
@@ -93,7 +93,7 @@ export const ScaffoldSection = forwardRef<
       {...props}
       className={cn(
         'flex flex-col first:pt-12 py-6',
-        isFullWidth ? 'w-full' : 'gap-3 lg:grid md:grid-cols-12',
+        isFullWidth ? 'w-full' : 'gap-3 @lg:grid @md:grid-cols-12',
         className
       )}
     />
diff --git a/apps/studio/components/to-be-cleaned/TooltipListener.tsx b/apps/studio/components/to-be-cleaned/TooltipListener.tsx
deleted file mode 100644
index 7f52066061847..0000000000000
--- a/apps/studio/components/to-be-cleaned/TooltipListener.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useRef, useEffect } from 'react'
-import { renderToString } from 'react-dom/server'
-
-import { makeRandomString } from 'lib/helpers'
-import KeyMap from './KeyMap'
-
-/**
- * Hook for listening to hover action on the target element and show tooltip.
- * A tooltip contains a title and an optional keyMap shortcut.
- *
- * @param   {String}        title
- * @param   {String}        position          top/top-left/bottom/bottom-left/left/right. default value: bottom
- * @param   {String}        keyMap            element key shortcuts
- * @param   {String}        className         custom class name
- * @param   {Boolean}       nowrap            disable title wrap text
- *
- * @returns {Object}        Ref for the target element
- */
-
-export default function TooltipListener({
-  title = '',
-  position = 'bottom',
-  keyMap = null,
-  className = '',
-  nowrap = false,
-}) {
-  const ref = useRef<any>(null)
-  const tooltipId = `tooltip-${makeRandomString(5)}`
-  const tooltip = document.createElement('div')
-  tooltip.id = tooltipId
-  tooltip.className = `tooltips ${position} absolute p-2 m-1 bg-black border border-solid border-default rounded-lg rounded text-center ${className} z-50`
-  tooltip.innerHTML = `<span class="title ${
-    nowrap ? 'nowrap' : ''
-  }">${title}</span> ${renderToString(
-    <div className="dark">
-      {/* force dark mode on KeyMap */}
-      <KeyMap keyMap={keyMap} />
-    </div>
-  )}`
-
-  function handleMouseOver() {
-    const elem = document.getElementById(tooltipId)
-    if (!elem) {
-      ref.current.style.position = 'relative'
-      ref.current.appendChild(tooltip)
-    }
-  }
-
-  function handleMouseLeave() {
-    removeTooltip()
-  }
-
-  function handleMouseClick() {
-    removeTooltip()
-  }
-
-  function removeTooltip() {
-    const elem = document.getElementById(tooltipId)
-    if (elem) {
-      ref.current.style.position = 'static'
-      ref.current.removeChild(elem)
-    }
-  }
-
-  useEffect(() => {
-    if (!ref.current) return
-
-    ref.current.addEventListener('mouseover', handleMouseOver)
-    ref.current.addEventListener('mouseleave', handleMouseLeave)
-    ref.current.addEventListener('click', handleMouseClick)
-
-    return () => {
-      ref.current.removeEventListener('mouseover', handleMouseOver)
-      ref.current.removeEventListener('mouseleave', handleMouseLeave)
-      ref.current.removeEventListener('click', handleMouseClick)
-    }
-  }, [ref.current])
-
-  return ref
-}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts
index c593efce4a72b..4f3c15f285374 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts
@@ -1,6 +1,5 @@
-import { toast } from 'sonner'
 import { handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import { toast } from 'sonner'
 
 import { authKeys } from 'data/auth/keys'
 import { databaseExtensionsKeys } from 'data/database-extensions/keys'
@@ -11,6 +10,7 @@ import { databaseKeys } from 'data/database/keys'
 import { enumeratedTypesKeys } from 'data/enumerated-types/keys'
 import { tableKeys } from 'data/tables/keys'
 import { tryParseJson } from 'lib/helpers'
+import { ResponseError } from 'types'
 import { SAFE_FUNCTIONS } from './AiAssistant.constants'
 
 // [Joshen] This is just very basic identification, but possible can extend perhaps
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
index 90532d120410b..971ddc070832d 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
@@ -7,8 +7,7 @@ import { Markdown } from 'components/interfaces/Markdown'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { formatSql } from 'lib/formatSql'
 import { timeout } from 'lib/helpers'
-import { cn } from 'ui'
-import { Loading } from '../Loading'
+import { cn, LogoLoader } from 'ui'
 import { alignEditor } from './CodeEditor.utils'
 
 type CodeEditorActions = { enabled: boolean; callback: (value: any) => void }
@@ -238,7 +237,7 @@ const CodeEditor = ({
         value={value ?? undefined}
         language={language}
         defaultValue={defaultValue ?? undefined}
-        loading={loading || <Loading />}
+        loading={loading || <LogoLoader />}
         options={optionsMerged}
         onMount={onMount}
         onChange={onChangeContent}
diff --git a/apps/studio/components/ui/Forms/FormSection.tsx b/apps/studio/components/ui/Forms/FormSection.tsx
index 1339b94fa9578..918bc306aaa0d 100644
--- a/apps/studio/components/ui/Forms/FormSection.tsx
+++ b/apps/studio/components/ui/Forms/FormSection.tsx
@@ -78,7 +78,7 @@ export const FormSectionContent = ({
   return (
     <div
       className={`
-        relative col-span-12 flex flex-col gap-6 lg:col-span-7
+        relative col-span-12 flex flex-col gap-6 @lg:col-span-7
         ${fullWidth && '!col-span-12'}
         ${className}
       `}
diff --git a/apps/studio/components/ui/Loading/index.ts b/apps/studio/components/ui/Loading/index.ts
deleted file mode 100644
index c7260e08d4879..0000000000000
--- a/apps/studio/components/ui/Loading/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { LogoLoader as Loading } from 'ui'
diff --git a/apps/studio/components/ui/PartnerIcon.tsx b/apps/studio/components/ui/PartnerIcon.tsx
index acd3aa7b9529b..ec66d2f1e069c 100644
--- a/apps/studio/components/ui/PartnerIcon.tsx
+++ b/apps/studio/components/ui/PartnerIcon.tsx
@@ -1,6 +1,6 @@
-import { Organization } from 'types'
-import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { MANAGED_BY } from 'lib/constants/infrastructure'
+import type { Organization } from 'types'
+import { cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { PARTNER_TO_NAME } from './PartnerManagedResource'
 
 interface PartnerIconProps {
diff --git a/apps/studio/components/ui/SqlEditor.tsx b/apps/studio/components/ui/SqlEditor.tsx
index cd73a9438f6a5..8dc3157e6de6c 100644
--- a/apps/studio/components/ui/SqlEditor.tsx
+++ b/apps/studio/components/ui/SqlEditor.tsx
@@ -3,6 +3,7 @@ import { noop } from 'lodash'
 import { useEffect, useRef } from 'react'
 
 import { formatSql } from 'lib/formatSql'
+import { LogoLoader } from 'ui'
 
 // [Joshen] We should deprecate this and use CodeEditor instead
 
@@ -86,7 +87,7 @@ const SqlEditor = ({
       defaultLanguage={language}
       defaultValue={defaultValue}
       path={queryId}
-      loading={<Loading />}
+      loading={<LogoLoader />}
       options={{
         readOnly,
         tabSize: 2,
diff --git a/apps/studio/components/ui/UpgradeToPro.tsx b/apps/studio/components/ui/UpgradeToPro.tsx
index dd4e1f07dbcbe..48030d6716669 100644
--- a/apps/studio/components/ui/UpgradeToPro.tsx
+++ b/apps/studio/components/ui/UpgradeToPro.tsx
@@ -49,7 +49,7 @@ const UpgradeToPro = ({
     >
       <div className="flex gap-x-3">
         {icon && <div className="mt-1">{icon}</div>}
-        <div className="flex flex-col md:flex-row w-full md:items-center justify-between gap-4 md:gap-x-8">
+        <div className="flex flex-col @md:flex-row w-full @md:items-center justify-between gap-4 @md:gap-x-8">
           <div className="space-y-1 flex-1 max-w-2xl">
             <p className="text-sm">{primaryText}</p>
             <div>
diff --git a/apps/studio/components/ui/org-selector.tsx b/apps/studio/components/ui/org-selector.tsx
index 17c0e31513d9f..5c09baf40f958 100644
--- a/apps/studio/components/ui/org-selector.tsx
+++ b/apps/studio/components/ui/org-selector.tsx
@@ -6,7 +6,7 @@ import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { useFreeProjectLimitCheckQuery } from 'data/organizations/free-project-limit-check-query'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { parseAsString, useQueryState } from 'nuqs'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import { Badge, Button, Card, CardHeader, CardTitle, Input_Shadcn_ } from 'ui'
 import { ButtonTooltip } from './ButtonTooltip'
 
diff --git a/apps/studio/data/access-tokens/access-tokens-query.ts b/apps/studio/data/access-tokens/access-tokens-query.ts
index 7e882a7a170cd..53d5f97c3b673 100644
--- a/apps/studio/data/access-tokens/access-tokens-query.ts
+++ b/apps/studio/data/access-tokens/access-tokens-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { accessTokenKeys } from './keys'
 
 export async function getAccessTokens(signal?: AbortSignal) {
diff --git a/apps/studio/data/ai/rate-message-mutation.ts b/apps/studio/data/ai/rate-message-mutation.ts
index 8f9907723cff9..e0b0abbf17405 100644
--- a/apps/studio/data/ai/rate-message-mutation.ts
+++ b/apps/studio/data/ai/rate-message-mutation.ts
@@ -1,10 +1,10 @@
-import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 import { UIMessage } from '@ai-sdk/react'
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
 
+import type { RateMessageResponse } from 'components/ui/AIAssistantPanel/Message.utils'
 import { constructHeaders, fetchHandler } from 'data/fetchers'
 import { BASE_PATH } from 'lib/constants'
 import { ResponseError } from 'types'
-import type { RateMessageResponse } from 'components/ui/AIAssistantPanel/Message.utils'
 
 export type RateMessageVariables = {
   rating: 'positive' | 'negative'
diff --git a/apps/studio/data/analytics/org-daily-stats-query.ts b/apps/studio/data/analytics/org-daily-stats-query.ts
index ae80bcf4c0682..c6d0e247b776a 100644
--- a/apps/studio/data/analytics/org-daily-stats-query.ts
+++ b/apps/studio/data/analytics/org-daily-stats-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import type { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { analyticsKeys } from './keys'
 
 export enum EgressType {
diff --git a/apps/studio/data/api-keys/[id]/api-key-id-query.ts b/apps/studio/data/api-keys/[id]/api-key-id-query.ts
index 87ab4073ae8a8..b143f24e40e3d 100644
--- a/apps/studio/data/api-keys/[id]/api-key-id-query.ts
+++ b/apps/studio/data/api-keys/[id]/api-key-id-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { apiKeysKeys } from './../keys'
 
 export interface APIKeyVariables {
diff --git a/apps/studio/data/api-keys/[id]/api-key-id-update-mutation.ts b/apps/studio/data/api-keys/[id]/api-key-id-update-mutation.ts
index 0548af5bdbaff..2af09655ba066 100644
--- a/apps/studio/data/api-keys/[id]/api-key-id-update-mutation.ts
+++ b/apps/studio/data/api-keys/[id]/api-key-id-update-mutation.ts
@@ -1,7 +1,8 @@
+import { toast } from 'sonner'
+
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { handleError, patch } from 'data/fetchers'
-import { toast } from 'sonner'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { apiKeysKeys } from '../keys'
 
 export interface UpdateAPIKeybyIdVariables {
diff --git a/apps/studio/data/api-keys/api-keys-query.ts b/apps/studio/data/api-keys/api-keys-query.ts
index 596ae00710bfa..36a93b83f53d3 100644
--- a/apps/studio/data/api-keys/api-keys-query.ts
+++ b/apps/studio/data/api-keys/api-keys-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { apiKeysKeys } from './keys'
 
 type LegacyKeys = {
diff --git a/apps/studio/data/api-keys/legacy-api-keys-status-query.ts b/apps/studio/data/api-keys/legacy-api-keys-status-query.ts
index 9d314ea54074f..33c812b72eb9a 100644
--- a/apps/studio/data/api-keys/legacy-api-keys-status-query.ts
+++ b/apps/studio/data/api-keys/legacy-api-keys-status-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
 import { IS_PLATFORM } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { apiKeysKeys } from './keys'
 
 interface LegacyAPIKeysStatusVariables {
diff --git a/apps/studio/data/config/project-postgrest-config-query.ts b/apps/studio/data/config/project-postgrest-config-query.ts
index 67c14ee48f1a8..5ecea8a8bb713 100644
--- a/apps/studio/data/config/project-postgrest-config-query.ts
+++ b/apps/studio/data/config/project-postgrest-config-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { configKeys } from './keys'
 
 export type ProjectPostgrestConfigVariables = {
diff --git a/apps/studio/data/config/project-unpause-postgres-versions-query.ts b/apps/studio/data/config/project-unpause-postgres-versions-query.ts
index 9ddcc6b1d18e3..2b62e151fb3b4 100644
--- a/apps/studio/data/config/project-unpause-postgres-versions-query.ts
+++ b/apps/studio/data/config/project-unpause-postgres-versions-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { configKeys } from './keys'
 
 export type ProjectUnpausePostgresVersionsVariables = {
diff --git a/apps/studio/data/content-api/docs-error-codes-query.ts b/apps/studio/data/content-api/docs-error-codes-query.ts
index 28b96a378d8f3..58e10dc04bfd4 100644
--- a/apps/studio/data/content-api/docs-error-codes-query.ts
+++ b/apps/studio/data/content-api/docs-error-codes-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, type UseQueryOptions } from '@tanstack/react-query'
-import { graphql } from 'data/graphql'
 import { executeGraphQL } from 'data/graphql/execute'
+import { graphql } from 'data/graphql/gql'
 import { Service } from 'data/graphql/graphql'
 import { contentApiKeys } from './keys'
 
diff --git a/apps/studio/data/content/content-count-query.ts b/apps/studio/data/content/content-count-query.ts
index d7ae0eca0dde4..8b4d6cea69660 100644
--- a/apps/studio/data/content/content-count-query.ts
+++ b/apps/studio/data/content/content-count-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { operations } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { contentKeys } from './keys'
 
 type GetContentCountVariables =
diff --git a/apps/studio/data/content/sql-folder-contents-query.ts b/apps/studio/data/content/sql-folder-contents-query.ts
index 6027e3923c74b..393844df459fd 100644
--- a/apps/studio/data/content/sql-folder-contents-query.ts
+++ b/apps/studio/data/content/sql-folder-contents-query.ts
@@ -1,7 +1,7 @@
 import { useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { contentKeys } from './keys'
 import { SNIPPET_PAGE_LIMIT } from './sql-folders-query'
 
diff --git a/apps/studio/data/content/sql-folders-query.ts b/apps/studio/data/content/sql-folders-query.ts
index c329e5ce01453..54749e47d877c 100644
--- a/apps/studio/data/content/sql-folders-query.ts
+++ b/apps/studio/data/content/sql-folders-query.ts
@@ -2,7 +2,7 @@ import { useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query
 
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { contentKeys } from './keys'
 
 export type SnippetFolderResponse = components['schemas']['GetUserContentFolderResponse']['data']
diff --git a/apps/studio/data/database-cron-jobs/database-cron-job-query.ts b/apps/studio/data/database-cron-jobs/database-cron-job-query.ts
index 3fe4524b17ac4..3f35b35067113 100644
--- a/apps/studio/data/database-cron-jobs/database-cron-job-query.ts
+++ b/apps/studio/data/database-cron-jobs/database-cron-job-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { CronJob } from './database-cron-jobs-infinite-query'
 import { databaseCronJobsKeys } from './keys'
 
diff --git a/apps/studio/data/database-cron-jobs/database-cron-jobs-count-query.ts b/apps/studio/data/database-cron-jobs/database-cron-jobs-count-query.ts
index 85813f9b2407f..db44923c27b49 100644
--- a/apps/studio/data/database-cron-jobs/database-cron-jobs-count-query.ts
+++ b/apps/studio/data/database-cron-jobs/database-cron-jobs-count-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseCronJobsKeys } from './keys'
 
 type DatabaseCronJobsCountVariables = {
diff --git a/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts b/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts
index c116e1d6e6410..81cf7242b3e3d 100644
--- a/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts
+++ b/apps/studio/data/database-cron-jobs/database-cron-jobs-infinite-query.ts
@@ -1,7 +1,7 @@
 import { UseInfiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'
 
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseCronJobsKeys } from './keys'
 
 const CRON_JOBS_PAGE_LIMIT = 20
diff --git a/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts b/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts
index 115ed9fabc34e..57e859e2129fc 100644
--- a/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts
+++ b/apps/studio/data/database-cron-jobs/database-cron-jobs-runs-infinite-query.ts
@@ -2,7 +2,7 @@ import { UseInfiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query
 import { last } from 'lodash'
 
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseCronJobsKeys } from './keys'
 
 export type DatabaseCronJobRunsVariables = {
diff --git a/apps/studio/data/database-cron-jobs/database-cron-timezone-query.ts b/apps/studio/data/database-cron-jobs/database-cron-timezone-query.ts
index 0047e57c3c4fa..1ef2e3a99e898 100644
--- a/apps/studio/data/database-cron-jobs/database-cron-timezone-query.ts
+++ b/apps/studio/data/database-cron-jobs/database-cron-timezone-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseCronJobsKeys } from './keys'
 
 export type DatabaseCronJobsVariables = {
diff --git a/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts b/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts
index 2e3a436f56ea3..e43456a897623 100644
--- a/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts
+++ b/apps/studio/data/database-queues/database-queue-messages-infinite-query.ts
@@ -1,10 +1,11 @@
 import { UseInfiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { last } from 'lodash'
+
 import { QUEUE_MESSAGE_TYPE } from 'components/interfaces/Integrations/Queues/SingleQueue/Queue.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
-import dayjs from 'dayjs'
 import { DATE_FORMAT } from 'lib/constants'
-import { last } from 'lodash'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseQueuesKeys } from './keys'
 
 export type DatabaseQueueVariables = {
diff --git a/apps/studio/data/database-queues/database-queues-expose-postgrest-status-query.ts b/apps/studio/data/database-queues/database-queues-expose-postgrest-status-query.ts
index b298b7290ea78..d1672bd60beb8 100644
--- a/apps/studio/data/database-queues/database-queues-expose-postgrest-status-query.ts
+++ b/apps/studio/data/database-queues/database-queues-expose-postgrest-status-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import minify from 'pg-minify'
 
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { QUEUES_SCHEMA } from './database-queues-toggle-postgrest-mutation'
 import { databaseQueuesKeys } from './keys'
 
diff --git a/apps/studio/data/database-queues/database-queues-metrics-query.ts b/apps/studio/data/database-queues/database-queues-metrics-query.ts
index 21bee875c3658..681e86108cc79 100644
--- a/apps/studio/data/database-queues/database-queues-metrics-query.ts
+++ b/apps/studio/data/database-queues/database-queues-metrics-query.ts
@@ -1,6 +1,6 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseQueuesKeys } from './keys'
 
 export type DatabaseQueuesMetricsVariables = {
diff --git a/apps/studio/data/database-queues/database-queues-query.ts b/apps/studio/data/database-queues/database-queues-query.ts
index 9726507f7da7a..c86f33e5c5473 100644
--- a/apps/studio/data/database-queues/database-queues-query.ts
+++ b/apps/studio/data/database-queues/database-queues-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseQueuesKeys } from './keys'
 
 export type DatabaseQueuesVariables = {
diff --git a/apps/studio/data/database/database-query-constants.ts b/apps/studio/data/database/database-query-constants.ts
index 328a469fecb5f..f05a837a2057e 100644
--- a/apps/studio/data/database/database-query-constants.ts
+++ b/apps/studio/data/database/database-query-constants.ts
@@ -1,7 +1,4 @@
-export { CREATE_PG_GET_TABLEDEF_SQL } from './database-table-definition'
-
 // https://www.postgresql.org/docs/current/catalog-pg-constraint.html
-
 export enum FOREIGN_KEY_CASCADE_ACTION {
   NO_ACTION = 'a',
   RESTRICT = 'r',
diff --git a/apps/studio/data/database/entity-definitions-query.ts b/apps/studio/data/database/entity-definitions-query.ts
index 3630ba2e578da..49bc48c4ba1d1 100644
--- a/apps/studio/data/database/entity-definitions-query.ts
+++ b/apps/studio/data/database/entity-definitions-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query'
-import { CREATE_PG_GET_TABLEDEF_SQL } from './database-query-constants'
+import { CREATE_PG_GET_TABLEDEF_SQL } from './database-table-definition'
 import { databaseKeys } from './keys'
 
 export const getEntityDefinitionsSql = ({
diff --git a/apps/studio/data/database/pgbouncer-config-query.ts b/apps/studio/data/database/pgbouncer-config-query.ts
index 4bbd2f5a35616..5269d82dda2a3 100644
--- a/apps/studio/data/database/pgbouncer-config-query.ts
+++ b/apps/studio/data/database/pgbouncer-config-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
 import { IS_PLATFORM } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseKeys } from './keys'
 
 export type PgbouncerConfigVariables = {
diff --git a/apps/studio/data/database/pgbouncer-status-query.ts b/apps/studio/data/database/pgbouncer-status-query.ts
index 8a89625005781..513ea8816ae3b 100644
--- a/apps/studio/data/database/pgbouncer-status-query.ts
+++ b/apps/studio/data/database/pgbouncer-status-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { databaseKeys } from './keys'
 
 export type PgbouncerStatusVariables = {
diff --git a/apps/studio/data/database/table-definition-query.ts b/apps/studio/data/database/table-definition-query.ts
index b5b5bb1593b1b..b20a20f163b15 100644
--- a/apps/studio/data/database/table-definition-query.ts
+++ b/apps/studio/data/database/table-definition-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { executeSql, ExecuteSqlError } from '../sql/execute-sql-query'
-import { CREATE_PG_GET_TABLEDEF_SQL } from './database-query-constants'
+import { CREATE_PG_GET_TABLEDEF_SQL } from './database-table-definition'
 import { databaseKeys } from './keys'
 
 type GetTableDefinitionArgs = {
diff --git a/apps/studio/data/docs/project-json-schema-query.ts b/apps/studio/data/docs/project-json-schema-query.ts
index 1d55dc64b32be..cf828c8877399 100644
--- a/apps/studio/data/docs/project-json-schema-query.ts
+++ b/apps/studio/data/docs/project-json-schema-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { docsKeys } from './keys'
 
 export type ProjectJsonSchemaVariables = {
diff --git a/apps/studio/data/edge-functions/edge-function-body-query.ts b/apps/studio/data/edge-functions/edge-function-body-query.ts
index 7fe5947f63393..5f7f7923a10a1 100644
--- a/apps/studio/data/edge-functions/edge-function-body-query.ts
+++ b/apps/studio/data/edge-functions/edge-function-body-query.ts
@@ -2,7 +2,7 @@ import { getMultipartBoundary, parseMultipartStream } from '@mjackson/multipart-
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { get, handleError } from 'data/fetchers'
 import { IS_PLATFORM } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { edgeFunctionsKeys } from './keys'
 
 export type EdgeFunctionBodyVariables = {
diff --git a/apps/studio/data/edge-functions/edge-function-query.ts b/apps/studio/data/edge-functions/edge-function-query.ts
index 4625fcf86f50f..c0aa1ff013d2e 100644
--- a/apps/studio/data/edge-functions/edge-function-query.ts
+++ b/apps/studio/data/edge-functions/edge-function-query.ts
@@ -2,7 +2,7 @@ import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { IS_PLATFORM } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { edgeFunctionsKeys } from './keys'
 
 export type EdgeFunctionVariables = {
diff --git a/apps/studio/data/edge-functions/edge-function-test-mutation.ts b/apps/studio/data/edge-functions/edge-function-test-mutation.ts
index ab2df63c87316..5c9ec39c5d8dd 100644
--- a/apps/studio/data/edge-functions/edge-function-test-mutation.ts
+++ b/apps/studio/data/edge-functions/edge-function-test-mutation.ts
@@ -4,7 +4,7 @@ import { toast } from 'sonner'
 import { ResponseData } from 'components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.types'
 import { constructHeaders, fetchHandler } from 'data/fetchers'
 import { BASE_PATH } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 export type EdgeFunctionTestResponse = {
   title: string
diff --git a/apps/studio/data/entity-types/entity-types-infinite-query.ts b/apps/studio/data/entity-types/entity-types-infinite-query.ts
index 4b9358aea4db6..72fc8ac4fe065 100644
--- a/apps/studio/data/entity-types/entity-types-infinite-query.ts
+++ b/apps/studio/data/entity-types/entity-types-infinite-query.ts
@@ -1,6 +1,6 @@
 import { QueryClient, useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query'
 import { executeSql, ExecuteSqlVariables } from 'data/sql/execute-sql-query'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { ENTITY_TYPE } from './entity-type-constants'
 import { entityTypeKeys } from './keys'
 
diff --git a/apps/studio/data/graphql/index.ts b/apps/studio/data/graphql/index.ts
deleted file mode 100644
index 83851531f643a..0000000000000
--- a/apps/studio/data/graphql/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export {} from './fragment-masking'
-export { graphql } from './gql'
diff --git a/apps/studio/data/jwt-signing-keys/jwt-signing-keys-query.ts b/apps/studio/data/jwt-signing-keys/jwt-signing-keys-query.ts
index ceaebae9dda92..959dbf5abf6eb 100644
--- a/apps/studio/data/jwt-signing-keys/jwt-signing-keys-query.ts
+++ b/apps/studio/data/jwt-signing-keys/jwt-signing-keys-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { jwtSigningKeysKeys } from './keys'
 
 export type JWTSigningKey = components['schemas']['SigningKeyResponse']
diff --git a/apps/studio/data/jwt-signing-keys/legacy-jwt-signing-key-query.ts b/apps/studio/data/jwt-signing-keys/legacy-jwt-signing-key-query.ts
index 9bb2d49310722..23be0df5bc557 100644
--- a/apps/studio/data/jwt-signing-keys/legacy-jwt-signing-key-query.ts
+++ b/apps/studio/data/jwt-signing-keys/legacy-jwt-signing-key-query.ts
@@ -1,6 +1,6 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 import { jwtSigningKeysKeys } from './keys'
 
diff --git a/apps/studio/data/lint/lint-query.ts b/apps/studio/data/lint/lint-query.ts
index 3e84f485da370..bcb7fdf5be2a9 100644
--- a/apps/studio/data/lint/lint-query.ts
+++ b/apps/studio/data/lint/lint-query.ts
@@ -4,7 +4,7 @@ import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { lintKeys } from './keys'
 
 type ProjectLintsVariables = {
diff --git a/apps/studio/data/lint/lint-rules-query.ts b/apps/studio/data/lint/lint-rules-query.ts
index 37778d3b81e16..7cdd94bfed9a5 100644
--- a/apps/studio/data/lint/lint-rules-query.ts
+++ b/apps/studio/data/lint/lint-rules-query.ts
@@ -4,7 +4,7 @@ import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { PROJECT_STATUS } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { lintKeys } from './keys'
 
 type ProjectLintRulesVariables = {
diff --git a/apps/studio/data/log-drains/log-drains-query.ts b/apps/studio/data/log-drains/log-drains-query.ts
index e47669673613e..bcc5a349e099b 100644
--- a/apps/studio/data/log-drains/log-drains-query.ts
+++ b/apps/studio/data/log-drains/log-drains-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { get, handleError } from 'data/fetchers'
+import type { ResponseError } from 'types'
 import { logDrainsKeys } from './keys'
-import { ResponseError } from 'types'
 
 export type LogDrainsVariables = {
   ref?: string
diff --git a/apps/studio/data/logs/index.ts b/apps/studio/data/logs/index.ts
deleted file mode 100644
index 4410f1e3b8486..0000000000000
--- a/apps/studio/data/logs/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { logsKeys } from './keys'
-export {
-  useUnifiedLogInspectionQuery,
-  getUnifiedLogInspection,
-  SERVICE_FLOW_TYPES,
-  type ServiceFlowType,
-  type UnifiedLogInspectionVariables,
-  type UnifiedLogInspectionResponse,
-  type UnifiedLogInspectionEntry,
-  type UnifiedLogInspectionData,
-  type UnifiedLogInspectionError,
-} from './unified-log-inspection-query'
diff --git a/apps/studio/data/logs/unified-log-inspection-query.ts b/apps/studio/data/logs/unified-log-inspection-query.ts
index 68c9bec82569f..a9be4009fec40 100644
--- a/apps/studio/data/logs/unified-log-inspection-query.ts
+++ b/apps/studio/data/logs/unified-log-inspection-query.ts
@@ -9,7 +9,7 @@ import {
 } from 'components/interfaces/UnifiedLogs/Queries/ServiceFlowQueries/ServiceFlow.sql'
 import { QuerySearchParamsType } from 'components/interfaces/UnifiedLogs/UnifiedLogs.types'
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { logsKeys } from './keys'
 import {
   getUnifiedLogsISOStartEnd,
diff --git a/apps/studio/data/logs/unified-logs-infinite-query.ts b/apps/studio/data/logs/unified-logs-infinite-query.ts
index e31534d98a3b8..3dc22ee8f6251 100644
--- a/apps/studio/data/logs/unified-logs-infinite-query.ts
+++ b/apps/studio/data/logs/unified-logs-infinite-query.ts
@@ -6,7 +6,7 @@ import {
   QuerySearchParamsType,
 } from 'components/interfaces/UnifiedLogs/UnifiedLogs.types'
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { logsKeys } from './keys'
 
 const LOGS_PAGE_LIMIT = 50
diff --git a/apps/studio/data/oauth-secrets/client-secret-create-mutation.ts b/apps/studio/data/oauth-secrets/client-secret-create-mutation.ts
index 1ae00e41a42d0..1cce6c6fcacf8 100644
--- a/apps/studio/data/oauth-secrets/client-secret-create-mutation.ts
+++ b/apps/studio/data/oauth-secrets/client-secret-create-mutation.ts
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { handleError, post } from 'data/fetchers'
 import { toast } from 'sonner'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { clientSecretKeys } from './keys'
 
 export type ClientSecretCreateVariables = {
diff --git a/apps/studio/data/oauth-secrets/client-secret-delete-mutation.ts b/apps/studio/data/oauth-secrets/client-secret-delete-mutation.ts
index 6ead4a0167aa7..0b96c249c5d2f 100644
--- a/apps/studio/data/oauth-secrets/client-secret-delete-mutation.ts
+++ b/apps/studio/data/oauth-secrets/client-secret-delete-mutation.ts
@@ -1,7 +1,7 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { del, handleError } from 'data/fetchers'
 import { toast } from 'sonner'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { clientSecretKeys } from './keys'
 
 export type ClientSecretDeleteVariables = {
diff --git a/apps/studio/data/oauth-secrets/client-secrets-query.ts b/apps/studio/data/oauth-secrets/client-secrets-query.ts
index 4e5c84389f015..1e29456b08e50 100644
--- a/apps/studio/data/oauth-secrets/client-secrets-query.ts
+++ b/apps/studio/data/oauth-secrets/client-secrets-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { clientSecretKeys } from './keys'
 
 import { components } from 'api-types'
diff --git a/apps/studio/data/projects/clone-query.ts b/apps/studio/data/projects/clone-query.ts
index 11a18edf970b6..7de7d173b1d0d 100644
--- a/apps/studio/data/projects/clone-query.ts
+++ b/apps/studio/data/projects/clone-query.ts
@@ -1,8 +1,8 @@
-import { get, handleError } from 'data/fetchers'
-import { projectKeys } from './keys'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
-import { ResponseError } from 'types'
 import { InfraInstanceSize } from 'components/interfaces/DiskManagement/DiskManagement.types'
+import { get, handleError } from 'data/fetchers'
+import type { ResponseError } from 'types'
+import { projectKeys } from './keys'
 
 export async function getCloneBackups(projectRef?: string) {
   if (!projectRef) throw new Error('Project ref is required')
diff --git a/apps/studio/data/projects/clone-status-query.ts b/apps/studio/data/projects/clone-status-query.ts
index 71b816badcf23..2ed7639296451 100644
--- a/apps/studio/data/projects/clone-status-query.ts
+++ b/apps/studio/data/projects/clone-status-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { projectKeys } from './keys'
 
 export type CloneStatus = components['schemas']['ProjectClonedStatusResponse']
diff --git a/apps/studio/data/projects/org-projects-infinite-query.ts b/apps/studio/data/projects/org-projects-infinite-query.ts
index 607dd870f5cac..47524700e9c61 100644
--- a/apps/studio/data/projects/org-projects-infinite-query.ts
+++ b/apps/studio/data/projects/org-projects-infinite-query.ts
@@ -3,7 +3,7 @@ import { useInfiniteQuery, UseInfiniteQueryOptions, useQueryClient } from '@tans
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { useProfile } from 'lib/profile'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { INFINITE_PROJECTS_KEY_PREFIX, projectKeys } from './keys'
 
 // [Joshen] Try to keep this value a multiple of 6 (common denominator of 2 and 3) to fit the cards view
diff --git a/apps/studio/data/projects/project-transfer-mutation.ts b/apps/studio/data/projects/project-transfer-mutation.ts
index 6f01d7ced6af2..7aee266c13ca0 100644
--- a/apps/studio/data/projects/project-transfer-mutation.ts
+++ b/apps/studio/data/projects/project-transfer-mutation.ts
@@ -2,7 +2,7 @@ import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react
 import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { projectKeys } from './keys'
 
 export type ProjectTransferVariables = {
diff --git a/apps/studio/data/projects/projects-infinite-query.ts b/apps/studio/data/projects/projects-infinite-query.ts
index ebcee877657c2..d25dba27ce7c8 100644
--- a/apps/studio/data/projects/projects-infinite-query.ts
+++ b/apps/studio/data/projects/projects-infinite-query.ts
@@ -3,7 +3,7 @@ import { useInfiniteQuery, UseInfiniteQueryOptions } from '@tanstack/react-query
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { useProfile } from 'lib/profile'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { projectKeys } from './keys'
 
 const DEFAULT_LIMIT = 100
diff --git a/apps/studio/data/replication/destination-by-id-query.ts b/apps/studio/data/replication/destination-by-id-query.ts
index 256f7d2497ed3..c157f0108e208 100644
--- a/apps/studio/data/replication/destination-by-id-query.ts
+++ b/apps/studio/data/replication/destination-by-id-query.ts
@@ -1,8 +1,8 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
-import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
 import type { components } from 'api-types'
+import { get, handleError } from 'data/fetchers'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationDestinationByIdParams = { projectRef?: string; destinationId?: number }
diff --git a/apps/studio/data/replication/destinations-query.ts b/apps/studio/data/replication/destinations-query.ts
index 38eb3ac2d2748..63fd8098faec6 100644
--- a/apps/studio/data/replication/destinations-query.ts
+++ b/apps/studio/data/replication/destinations-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationDestinationsParams = { projectRef?: string }
diff --git a/apps/studio/data/replication/pipeline-by-id-query.ts b/apps/studio/data/replication/pipeline-by-id-query.ts
index 88d537a9b6b0d..65e3584b3a685 100644
--- a/apps/studio/data/replication/pipeline-by-id-query.ts
+++ b/apps/studio/data/replication/pipeline-by-id-query.ts
@@ -1,8 +1,8 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
-import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
 import type { components } from 'api-types'
+import { get, handleError } from 'data/fetchers'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPipelineByIdParams = { projectRef?: string; pipelineId?: number }
diff --git a/apps/studio/data/replication/pipeline-replication-status-query.ts b/apps/studio/data/replication/pipeline-replication-status-query.ts
index faf0769a534fe..9289ff21ea6ed 100644
--- a/apps/studio/data/replication/pipeline-replication-status-query.ts
+++ b/apps/studio/data/replication/pipeline-replication-status-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPipelineReplicationStatusParams = { projectRef?: string; pipelineId?: number }
diff --git a/apps/studio/data/replication/pipeline-status-query.ts b/apps/studio/data/replication/pipeline-status-query.ts
index 0731af7e1af3e..400884d4628da 100644
--- a/apps/studio/data/replication/pipeline-status-query.ts
+++ b/apps/studio/data/replication/pipeline-status-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPipelinesStatusParams = { projectRef?: string; pipelineId?: number }
diff --git a/apps/studio/data/replication/pipeline-version-query.ts b/apps/studio/data/replication/pipeline-version-query.ts
index 9ed514ff57046..911ced6ff5307 100644
--- a/apps/studio/data/replication/pipeline-version-query.ts
+++ b/apps/studio/data/replication/pipeline-version-query.ts
@@ -2,7 +2,7 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPipelineVersionParams = { projectRef?: string; pipelineId?: number }
diff --git a/apps/studio/data/replication/pipelines-query.ts b/apps/studio/data/replication/pipelines-query.ts
index c21af4e7b2f43..cb00595c6f241 100644
--- a/apps/studio/data/replication/pipelines-query.ts
+++ b/apps/studio/data/replication/pipelines-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPipelinesParams = { projectRef?: string }
diff --git a/apps/studio/data/replication/publications-query.ts b/apps/studio/data/replication/publications-query.ts
index 8a10561946baf..6fb56ad7982f7 100644
--- a/apps/studio/data/replication/publications-query.ts
+++ b/apps/studio/data/replication/publications-query.ts
@@ -2,7 +2,7 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationPublicationsParams = { projectRef?: string; sourceId?: number }
diff --git a/apps/studio/data/replication/sources-query.ts b/apps/studio/data/replication/sources-query.ts
index 3fd68761f8713..14201ee64ce63 100644
--- a/apps/studio/data/replication/sources-query.ts
+++ b/apps/studio/data/replication/sources-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationSourcesParams = { projectRef?: string }
diff --git a/apps/studio/data/replication/tables-query.ts b/apps/studio/data/replication/tables-query.ts
index 7da559b113935..a557f33d6f3be 100644
--- a/apps/studio/data/replication/tables-query.ts
+++ b/apps/studio/data/replication/tables-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { replicationKeys } from './keys'
 
 type ReplicationTablesParams = { projectRef?: string; sourceId?: number }
diff --git a/apps/studio/data/reports/database-charts.ts b/apps/studio/data/reports/database-charts.ts
index 6ee8c26fbac58..6937de4ed9286 100644
--- a/apps/studio/data/reports/database-charts.ts
+++ b/apps/studio/data/reports/database-charts.ts
@@ -2,7 +2,7 @@ import { numberFormatter } from 'components/ui/Charts/Charts.utils'
 import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils'
 import { DOCS_URL } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
-import { Organization } from 'types'
+import type { Organization } from 'types'
 import { DiskAttributesData } from '../config/disk-attributes-query'
 import { MaxConnectionsData } from '../database/max-connections-query'
 import { Project } from '../projects/project-detail-query'
diff --git a/apps/studio/data/storage/bucket-object-delete-mutation.ts b/apps/studio/data/storage/bucket-object-delete-mutation.ts
index 4e2a474de3b40..2554d7feedb69 100644
--- a/apps/studio/data/storage/bucket-object-delete-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-delete-mutation.ts
@@ -2,7 +2,7 @@ import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react
 
 import { del, handleError } from 'data/fetchers'
 import { toast } from 'sonner'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 type DeleteBucketObjectParams = {
   projectRef: string
diff --git a/apps/studio/data/storage/bucket-object-download-mutation.ts b/apps/studio/data/storage/bucket-object-download-mutation.ts
index ce36130170b57..5fb6df6752d2b 100644
--- a/apps/studio/data/storage/bucket-object-download-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-download-mutation.ts
@@ -4,7 +4,7 @@ import { toast } from 'sonner'
 import { components } from 'data/api'
 import { fetchPost } from 'data/fetchers'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 type DownloadBucketObjectParams = {
   projectRef: string
diff --git a/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts b/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts
index 51987b6630409..d9b3274d83fbd 100644
--- a/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-get-public-url-mutation.ts
@@ -3,7 +3,7 @@ import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 type BucketObjectPublicUrlParams = {
   projectRef: string
diff --git a/apps/studio/data/storage/bucket-object-sign-mutation.ts b/apps/studio/data/storage/bucket-object-sign-mutation.ts
index e6857bfe833b2..82e0435f90b0c 100644
--- a/apps/studio/data/storage/bucket-object-sign-mutation.ts
+++ b/apps/studio/data/storage/bucket-object-sign-mutation.ts
@@ -3,7 +3,7 @@ import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 type SignBucketObjectParams = {
   projectRef: string
diff --git a/apps/studio/data/storage/bucket-objects-list-mutation.ts b/apps/studio/data/storage/bucket-objects-list-mutation.ts
index a951d23918c63..1fe470e4ac148 100644
--- a/apps/studio/data/storage/bucket-objects-list-mutation.ts
+++ b/apps/studio/data/storage/bucket-objects-list-mutation.ts
@@ -3,7 +3,7 @@ import { toast } from 'sonner'
 
 import { components } from 'data/api'
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 type ListBucketObjectsParams = {
   projectRef: string
diff --git a/apps/studio/data/storage/object-move-mutation.ts b/apps/studio/data/storage/object-move-mutation.ts
index 577589c79adb3..7994f95ceeb05 100644
--- a/apps/studio/data/storage/object-move-mutation.ts
+++ b/apps/studio/data/storage/object-move-mutation.ts
@@ -2,7 +2,7 @@ import { UseMutationOptions, useMutation } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 type MoveStorageObjectParams = {
   projectRef: string
diff --git a/apps/studio/data/storage/s3-access-key-create-mutation.ts b/apps/studio/data/storage/s3-access-key-create-mutation.ts
index b8ce4f8f18454..68699bbcfe981 100644
--- a/apps/studio/data/storage/s3-access-key-create-mutation.ts
+++ b/apps/studio/data/storage/s3-access-key-create-mutation.ts
@@ -2,7 +2,7 @@ import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react
 import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { storageCredentialsKeys } from './s3-access-key-keys'
 
 type CreateS3AccessKeyCredentialVariables = {
diff --git a/apps/studio/data/storage/s3-access-key-delete-mutation.ts b/apps/studio/data/storage/s3-access-key-delete-mutation.ts
index b02b899c889b2..1e92a9954ef90 100644
--- a/apps/studio/data/storage/s3-access-key-delete-mutation.ts
+++ b/apps/studio/data/storage/s3-access-key-delete-mutation.ts
@@ -2,7 +2,7 @@ import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react
 import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { storageCredentialsKeys } from './s3-access-key-keys'
 
 type S3AccessKeyDeleteVariables = {
diff --git a/apps/studio/data/storage/s3-access-key-query.ts b/apps/studio/data/storage/s3-access-key-query.ts
index 61adee253acf4..bf5990c4aaf0e 100644
--- a/apps/studio/data/storage/s3-access-key-query.ts
+++ b/apps/studio/data/storage/s3-access-key-query.ts
@@ -3,7 +3,7 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 import { components } from 'api-types'
 import { get, handleError } from 'data/fetchers'
 import { IS_PLATFORM } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { storageCredentialsKeys } from './s3-access-key-keys'
 
 type StorageCredentialsVariables = { projectRef?: string }
diff --git a/apps/studio/data/storage/storage-archive-create-mutation.ts b/apps/studio/data/storage/storage-archive-create-mutation.ts
index 2d5978f51cfb8..473502dc99ed9 100644
--- a/apps/studio/data/storage/storage-archive-create-mutation.ts
+++ b/apps/studio/data/storage/storage-archive-create-mutation.ts
@@ -2,7 +2,7 @@ import { UseMutationOptions, useMutation, useQueryClient } from '@tanstack/react
 import { toast } from 'sonner'
 
 import { handleError, post } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { storageKeys } from './keys'
 
 type StorageArchiveCreateVariables = {
diff --git a/apps/studio/data/storage/storage-archive-query.ts b/apps/studio/data/storage/storage-archive-query.ts
index cd570a3bc5950..c5d715c383c04 100644
--- a/apps/studio/data/storage/storage-archive-query.ts
+++ b/apps/studio/data/storage/storage-archive-query.ts
@@ -1,7 +1,7 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 import { storageKeys } from './keys'
 
 type StorageArchiveVariables = { projectRef?: string }
diff --git a/apps/studio/data/support/generate-attachment-urls-mutation.ts b/apps/studio/data/support/generate-attachment-urls-mutation.ts
index 5ab50a50b6a82..74e47f003e137 100644
--- a/apps/studio/data/support/generate-attachment-urls-mutation.ts
+++ b/apps/studio/data/support/generate-attachment-urls-mutation.ts
@@ -3,7 +3,7 @@ import { toast } from 'sonner'
 
 import { constructHeaders } from 'data/fetchers'
 import { BASE_PATH } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 export type GenerateAttachmentURLsResponse = {
   title: string
diff --git a/apps/studio/data/utils/deployment-commit-query.ts b/apps/studio/data/utils/deployment-commit-query.ts
index 0e243be079425..775e2c417e4a3 100644
--- a/apps/studio/data/utils/deployment-commit-query.ts
+++ b/apps/studio/data/utils/deployment-commit-query.ts
@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { fetchHandler } from 'data/fetchers'
 import { BASE_PATH } from 'lib/constants'
-import { ResponseError } from 'types'
+import type { ResponseError } from 'types'
 
 export async function getDeploymentCommit(signal?: AbortSignal) {
   const response = await fetchHandler(`${BASE_PATH}/api/get-deployment-commit`)
diff --git a/apps/studio/hooks/deprecated.ts b/apps/studio/hooks/deprecated.ts
deleted file mode 100644
index f5e534d08a23e..0000000000000
--- a/apps/studio/hooks/deprecated.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import TooltipListener from 'components/to-be-cleaned/TooltipListener'
-import { useEffect, useRef } from 'react'
-
-function usePrevious(value: any) {
-  const ref = useRef()
-  useEffect(() => {
-    ref.current = value
-  })
-  return ref.current
-}
-
-export { TooltipListener, usePrevious }
diff --git a/apps/studio/hooks/misc/useCheckPermissions.ts b/apps/studio/hooks/misc/useCheckPermissions.ts
index 96f3667c0523b..b7ce793b75bcc 100644
--- a/apps/studio/hooks/misc/useCheckPermissions.ts
+++ b/apps/studio/hooks/misc/useCheckPermissions.ts
@@ -1,12 +1,12 @@
-import { useIsLoggedIn, useParams } from 'common'
 import jsonLogic from 'json-logic-js'
+import { useMemo } from 'react'
 
+import { useIsLoggedIn, useParams } from 'common'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { IS_PLATFORM } from 'lib/constants'
 import type { Permission } from 'types'
 import { useSelectedOrganizationQuery } from './useSelectedOrganization'
 import { useSelectedProjectQuery } from './useSelectedProject'
-import { useMemo } from 'react'
 
 const toRegexpString = (actionOrResource: string) =>
   `^${actionOrResource.replace('.', '\\.').replace('%', '.*')}$`
diff --git a/apps/studio/hooks/misc/withAuth.tsx b/apps/studio/hooks/misc/withAuth.tsx
index a7795ed2a8d35..64a6efc032637 100644
--- a/apps/studio/hooks/misc/withAuth.tsx
+++ b/apps/studio/hooks/misc/withAuth.tsx
@@ -2,12 +2,13 @@ import { useRouter } from 'next/router'
 import { ComponentType, useCallback, useEffect, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
+import { useAuth } from 'common'
 import { SessionTimeoutModal } from 'components/interfaces/SignIn/SessionTimeoutModal'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useAuthenticatorAssuranceLevelQuery } from 'data/profile/mfa-authenticator-assurance-level-query'
-import { useAuth, useSignOut } from 'lib/auth'
+import { useSignOut } from 'lib/auth'
 import { BASE_PATH, IS_PLATFORM } from 'lib/constants'
-import { NextPageWithLayout, isNextPageWithLayout } from 'types'
+import { type NextPageWithLayout, isNextPageWithLayout } from 'types'
 
 const MAX_TIMEOUT = 10000 // 10 seconds
 
diff --git a/apps/studio/lib/api/self-hosted/generate-types.ts b/apps/studio/lib/api/self-hosted/generate-types.ts
index e46fbdd9e030a..2ea9af14ea16d 100644
--- a/apps/studio/lib/api/self-hosted/generate-types.ts
+++ b/apps/studio/lib/api/self-hosted/generate-types.ts
@@ -1,7 +1,7 @@
 import { fetchGet } from 'data/fetchers'
 import { PG_META_URL } from 'lib/constants'
+import type { ResponseError } from 'types'
 import { assertSelfHosted } from './util'
-import { ResponseError } from 'types'
 
 export type GenerateTypescriptTypesOptions = {
   headers?: HeadersInit
diff --git a/apps/studio/lib/auth.tsx b/apps/studio/lib/auth.tsx
index 92663680c914b..b405d8dd0e507 100644
--- a/apps/studio/lib/auth.tsx
+++ b/apps/studio/lib/auth.tsx
@@ -1,13 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query'
+import { PropsWithChildren, useCallback, useEffect } from 'react'
+import { toast } from 'sonner'
+
 import {
   AuthProvider as AuthProviderInternal,
   clearLocalStorage,
   gotrueClient,
   useAuthError,
 } from 'common'
-import { PropsWithChildren, useCallback, useEffect } from 'react'
-import { toast } from 'sonner'
-
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
 import { GOTRUE_ERRORS, IS_PLATFORM } from './constants'
 
@@ -39,8 +39,6 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
   )
 }
 
-export { useAuth, useIsLoggedIn, useSession, useUser } from 'common'
-
 export function useSignOut() {
   const queryClient = useQueryClient()
   const { clearStorage: clearAssistantStorage } = useAiAssistantStateSnapshot()
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index 66ed565b58ece..5b96b0af328c4 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -57,7 +57,7 @@ import { AuthProvider } from 'lib/auth'
 import { API_URL, BASE_PATH, IS_PLATFORM, useDefaultProvider } from 'lib/constants'
 import { ProfileProvider } from 'lib/profile'
 import { Telemetry } from 'lib/telemetry'
-import { AppPropsWithLayout } from 'types'
+import type { AppPropsWithLayout } from 'types'
 import { SonnerToaster, TooltipProvider } from 'ui'
 
 dayjs.extend(customParseFormat)
diff --git a/apps/studio/pages/aws-marketplace-onboarding.tsx b/apps/studio/pages/aws-marketplace-onboarding.tsx
index ee06af6d5a980..573e9e32a69eb 100644
--- a/apps/studio/pages/aws-marketplace-onboarding.tsx
+++ b/apps/studio/pages/aws-marketplace-onboarding.tsx
@@ -1,4 +1,6 @@
 import { useRouter } from 'next/router'
+
+import type { NextPageWithLayout } from 'types'
 import AwsMarketplaceCreateNewOrg from '../components/interfaces/Organization/CloudMarketplace/AwsMarketplaceCreateNewOrg'
 import { AwsMarketplaceLinkExistingOrg } from '../components/interfaces/Organization/CloudMarketplace/AwsMarketplaceLinkExistingOrg'
 import AwsMarketplaceOnboardingPlaceholder from '../components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboardingPlaceholder'
@@ -11,7 +13,6 @@ import {
   ScaffoldTitle,
 } from '../components/layouts/Scaffold'
 import { useOrganizationsQuery } from '../data/organizations/organizations-query'
-import { NextPageWithLayout } from '../types'
 
 const AwsMarketplaceOnboarding: NextPageWithLayout = () => {
   const {
diff --git a/apps/studio/pages/cli/login.tsx b/apps/studio/pages/cli/login.tsx
index b31eb20c54f13..fa11a76594e17 100644
--- a/apps/studio/pages/cli/login.tsx
+++ b/apps/studio/pages/cli/login.tsx
@@ -1,15 +1,15 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { toast } from 'sonner'
+
 import { useIsLoggedIn, useParams } from 'common'
 import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
 import CopyButton from 'components/ui/CopyButton'
-import { Loading } from 'components/ui/Loading'
 import { createCliLoginSession } from 'data/cli/login'
 import { withAuth } from 'hooks/misc/withAuth'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useEffect } from 'react'
-import { toast } from 'sonner'
-import { NextPageWithLayout } from 'types'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+import type { NextPageWithLayout } from 'types'
+import { InputOTP, InputOTPGroup, InputOTPSlot, LogoLoader } from 'ui'
 import { Admonition } from 'ui-patterns'
 
 const CliLoginPage: NextPageWithLayout = () => {
@@ -77,7 +77,7 @@ const CliLoginPage: NextPageWithLayout = () => {
             />
           </>
         ) : (
-          <Loading />
+          <LogoLoader />
         )}
       </div>
     </APIAuthorizationLayout>
diff --git a/apps/studio/pages/forgot-password-mfa.tsx b/apps/studio/pages/forgot-password-mfa.tsx
index 341485c511cfc..801d9507323f0 100644
--- a/apps/studio/pages/forgot-password-mfa.tsx
+++ b/apps/studio/pages/forgot-password-mfa.tsx
@@ -7,9 +7,9 @@ import { toast } from 'sonner'
 import { getAccessToken } from 'common'
 import { SignInMfaForm } from 'components/interfaces/SignIn/SignInMfaForm'
 import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
-import { Loading } from 'components/ui/Loading'
 import { auth, buildPathWithParams, getReturnToPath } from 'lib/gotrue'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const ForgotPasswordMfa: NextPageWithLayout = () => {
   const router = useRouter()
@@ -69,7 +69,7 @@ const ForgotPasswordMfa: NextPageWithLayout = () => {
   if (loading) {
     return (
       <div className="flex flex-col flex-1 bg-alternative h-screen items-center justify-center">
-        <Loading />
+        <LogoLoader />
       </div>
     )
   }
diff --git a/apps/studio/pages/integrations/vercel/install.tsx b/apps/studio/pages/integrations/vercel/install.tsx
index bf9a99e011d1f..8494b4748924f 100644
--- a/apps/studio/pages/integrations/vercel/install.tsx
+++ b/apps/studio/pages/integrations/vercel/install.tsx
@@ -1,4 +1,5 @@
 import { useParams } from 'common'
+import { AlertTriangle, Info } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
@@ -13,7 +14,6 @@ import { ScaffoldColumn, ScaffoldContainer } from 'components/layouts/Scaffold'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
-import { AlertTriangle, Info } from 'lucide-react'
 import { useIntegrationInstallationSnapshot } from 'state/integration-installation'
 import type { NextPageWithLayout, Organization } from 'types'
 
diff --git a/apps/studio/pages/join.tsx b/apps/studio/pages/join.tsx
index 75823e77d9d4f..b7ea40b6ca6bf 100644
--- a/apps/studio/pages/join.tsx
+++ b/apps/studio/pages/join.tsx
@@ -4,7 +4,7 @@ import { OrganizationInvite } from 'components/interfaces/OrganizationInvite/Org
 import { BASE_PATH } from 'lib/constants'
 import { useTheme } from 'next-themes'
 import { useEffect, useMemo, useState } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import { cn } from 'ui'
 
 const JoinOrganizationPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/logout.tsx b/apps/studio/pages/logout.tsx
index 40307dd9275c3..8be367a62dd7d 100644
--- a/apps/studio/pages/logout.tsx
+++ b/apps/studio/pages/logout.tsx
@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { toast } from 'sonner'
 
-import { Loading } from 'components/ui/Loading'
 import { useSignOut } from 'lib/auth'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const LogoutPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -21,7 +21,7 @@ const LogoutPage: NextPageWithLayout = () => {
 
   return (
     <div className="w-full h-screen flex items-center justify-center">
-      <Loading />
+      <LogoLoader />
     </div>
   )
 }
diff --git a/apps/studio/pages/org/[slug]/audit.tsx b/apps/studio/pages/org/[slug]/audit.tsx
index 42a813754af8d..5b806f0cc3e50 100644
--- a/apps/studio/pages/org/[slug]/audit.tsx
+++ b/apps/studio/pages/org/[slug]/audit.tsx
@@ -2,17 +2,19 @@ import { AuditLogs } from 'components/interfaces/Organization/AuditLogs/AuditLog
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/OrganizationSettingsLayout'
-import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const OrgAuditLogs: NextPageWithLayout = () => {
   const { isLoading: isLoadingPermissions } = usePermissionsQuery()
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
 
   return (
-    <>{selectedOrganization === undefined && isLoadingPermissions ? <Loading /> : <AuditLogs />}</>
+    <>
+      {selectedOrganization === undefined && isLoadingPermissions ? <LogoLoader /> : <AuditLogs />}
+    </>
   )
 }
 
diff --git a/apps/studio/pages/org/[slug]/general.tsx b/apps/studio/pages/org/[slug]/general.tsx
index 1bdcce2af5be1..487a1cd9b1f34 100644
--- a/apps/studio/pages/org/[slug]/general.tsx
+++ b/apps/studio/pages/org/[slug]/general.tsx
@@ -2,10 +2,10 @@ import { GeneralSettings } from 'components/interfaces/Organization/GeneralSetti
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/OrganizationSettingsLayout'
-import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const OrgGeneralSettings: NextPageWithLayout = () => {
   const { isLoading: isLoadingPermissions } = usePermissionsQuery()
@@ -14,7 +14,7 @@ const OrgGeneralSettings: NextPageWithLayout = () => {
   return (
     <>
       {selectedOrganization === undefined && isLoadingPermissions ? (
-        <Loading />
+        <LogoLoader />
       ) : (
         <GeneralSettings />
       )}
diff --git a/apps/studio/pages/org/[slug]/team.tsx b/apps/studio/pages/org/[slug]/team.tsx
index 36039aebd48e0..b2ac479ddfae3 100644
--- a/apps/studio/pages/org/[slug]/team.tsx
+++ b/apps/studio/pages/org/[slug]/team.tsx
@@ -1,16 +1,20 @@
 import { TeamSettings } from 'components/interfaces/Organization/TeamSettings/TeamSettings'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
-import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const OrgTeamSettings: NextPageWithLayout = () => {
   const { isLoading: isLoadingPermissions } = usePermissionsQuery()
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
 
-  return selectedOrganization === undefined && isLoadingPermissions ? <Loading /> : <TeamSettings />
+  return selectedOrganization === undefined && isLoadingPermissions ? (
+    <LogoLoader />
+  ) : (
+    <TeamSettings />
+  )
 }
 
 OrgTeamSettings.getLayout = (page) => (
diff --git a/apps/studio/pages/organizations.tsx b/apps/studio/pages/organizations.tsx
index b09de93df1612..2cd7e9426992f 100644
--- a/apps/studio/pages/organizations.tsx
+++ b/apps/studio/pages/organizations.tsx
@@ -14,7 +14,7 @@ import NoSearchResults from 'components/ui/NoSearchResults'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { withAuth } from 'hooks/misc/withAuth'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
diff --git a/apps/studio/pages/project/[ref]/advisors/rules/performance.tsx b/apps/studio/pages/project/[ref]/advisors/rules/performance.tsx
index 9fe5d07746b9d..9cf9a0fc03178 100644
--- a/apps/studio/pages/project/[ref]/advisors/rules/performance.tsx
+++ b/apps/studio/pages/project/[ref]/advisors/rules/performance.tsx
@@ -1,6 +1,6 @@
 import { AdvisorRules } from 'components/interfaces/Advisors/AdvisorRules'
 import { AdvisorRulesLayout } from 'components/layouts/AdvisorsLayout/AdvisorRulesLayout'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const AdvisorPerformanceRulesPage: NextPageWithLayout = () => {
   return <AdvisorRules category="performance" />
diff --git a/apps/studio/pages/project/[ref]/advisors/rules/security.tsx b/apps/studio/pages/project/[ref]/advisors/rules/security.tsx
index c28b4ff186e8e..80778f9dc223b 100644
--- a/apps/studio/pages/project/[ref]/advisors/rules/security.tsx
+++ b/apps/studio/pages/project/[ref]/advisors/rules/security.tsx
@@ -1,6 +1,6 @@
 import { AdvisorRules } from 'components/interfaces/Advisors/AdvisorRules'
 import { AdvisorRulesLayout } from 'components/layouts/AdvisorsLayout/AdvisorRulesLayout'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const AdvisorSecurityRulesPage: NextPageWithLayout = () => {
   return <AdvisorRules category="security" />
diff --git a/apps/studio/pages/project/[ref]/auth/overview.tsx b/apps/studio/pages/project/[ref]/auth/overview.tsx
index a0c89ea5d1381..f16920f031f1d 100644
--- a/apps/studio/pages/project/[ref]/auth/overview.tsx
+++ b/apps/studio/pages/project/[ref]/auth/overview.tsx
@@ -1,16 +1,16 @@
-import { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
+import { FeatureFlagContext, useFlag, useParams } from 'common'
+import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewLearnMore'
+import { OverviewMonitoring } from 'components/interfaces/Auth/Overview/OverviewMonitoring'
+import { OverviewUsage } from 'components/interfaces/Auth/Overview/OverviewUsage'
 import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
-import { ScaffoldContainer } from 'components/layouts/Scaffold'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer } from 'components/layouts/Scaffold'
 import { DocsButton } from 'components/ui/DocsButton'
 import { DOCS_URL } from 'lib/constants'
-import { OverviewUsage } from 'components/interfaces/Auth/Overview/OverviewUsage'
-import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewLearnMore'
-import { OverviewMonitoring } from 'components/interfaces/Auth/Overview/OverviewMonitoring'
 import { useRouter } from 'next/router'
-import { FeatureFlagContext, useFlag, useParams } from 'common'
 import { useContext, useEffect } from 'react'
+import type { NextPageWithLayout } from 'types'
 
 const AuthOverview: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx
index 64f9aa45999b9..e5c05ebbb4412 100644
--- a/apps/studio/pages/project/[ref]/auth/policies.tsx
+++ b/apps/studio/pages/project/[ref]/auth/policies.tsx
@@ -12,23 +12,23 @@ import { generatePolicyUpdateSQL } from 'components/interfaces/Auth/Policies/Pol
 import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
 import { DocsButton } from 'components/ui/DocsButton'
 import NoPermission from 'components/ui/NoPermission'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
-import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useProjectPostgrestConfigQuery } from 'data/config/project-postgrest-config-query'
+import { useDatabasePoliciesQuery } from 'data/database-policies/database-policies-query'
 import { useTablesQuery } from 'data/tables/tables-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useIsProtectedSchema } from 'hooks/useProtectedSchemas'
 import { DOCS_URL } from 'lib/constants'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { parseAsString, useQueryState } from 'nuqs'
 import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
-import { parseAsString, useQueryState } from 'nuqs'
 import type { NextPageWithLayout } from 'types'
 import { Input } from 'ui-patterns/DataInputs/Input'
 
diff --git a/apps/studio/pages/project/[ref]/database/functions.tsx b/apps/studio/pages/project/[ref]/database/functions.tsx
index eb33fa1d6fc53..02e68b6ee1489 100644
--- a/apps/studio/pages/project/[ref]/database/functions.tsx
+++ b/apps/studio/pages/project/[ref]/database/functions.tsx
@@ -7,16 +7,16 @@ import { DeleteFunction } from 'components/interfaces/Database/Functions/DeleteF
 import FunctionsList from 'components/interfaces/Database/Functions/FunctionsList/FunctionsList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import NoPermission from 'components/ui/NoPermission'
 import { DatabaseFunction } from 'data/database-functions/database-functions-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { DOCS_URL } from 'lib/constants'
-import type { NextPageWithLayout } from 'types'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+import type { NextPageWithLayout } from 'types'
 
 const DatabaseFunctionsPage: NextPageWithLayout = () => {
   const [selectedFunction, setSelectedFunction] = useState<DatabaseFunction | undefined>()
diff --git a/apps/studio/pages/project/[ref]/database/schemas.tsx b/apps/studio/pages/project/[ref]/database/schemas.tsx
index d653dd912e89b..3b65542418b29 100644
--- a/apps/studio/pages/project/[ref]/database/schemas.tsx
+++ b/apps/studio/pages/project/[ref]/database/schemas.tsx
@@ -2,8 +2,8 @@ import { ReactFlowProvider } from 'reactflow'
 
 import { SchemaGraph } from 'components/interfaces/Database/Schemas/SchemaGraph'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
-import type { NextPageWithLayout } from 'types'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import type { NextPageWithLayout } from 'types'
 
 const SchemasPage: NextPageWithLayout = () => {
   return (
diff --git a/apps/studio/pages/project/[ref]/database/triggers.tsx b/apps/studio/pages/project/[ref]/database/triggers.tsx
index 50edcb6b84490..fd9cc1df6ce21 100644
--- a/apps/studio/pages/project/[ref]/database/triggers.tsx
+++ b/apps/studio/pages/project/[ref]/database/triggers.tsx
@@ -9,15 +9,15 @@ import { generateTriggerCreateSQL } from 'components/interfaces/Database/Trigger
 import TriggersList from 'components/interfaces/Database/Triggers/TriggersList/TriggersList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import NoPermission from 'components/ui/NoPermission'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { DOCS_URL } from 'lib/constants'
-import type { NextPageWithLayout } from 'types'
-import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
 import { useEditorPanelStateSnapshot } from 'state/editor-panel-state'
 import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
+import type { NextPageWithLayout } from 'types'
 
 const TriggersPage: NextPageWithLayout = () => {
   const isInlineEditorEnabled = useIsInlineEditorEnabled()
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
index e2527a9219d4e..87704cf4e12cb 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
@@ -8,7 +8,7 @@ import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useRouter } from 'next/compat/router'
 import { useEffect, useMemo } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import { Admonition } from 'ui-patterns'
 
 const IntegrationPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
index 1b7ced2f8eee2..19c85fbd74cfa 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
@@ -10,7 +10,7 @@ import { UnknownInterface } from 'components/ui/UnknownInterface'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useRouter } from 'next/compat/router'
 import { useEffect, useMemo } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 import { Admonition } from 'ui-patterns'
 
 const IntegrationPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
index 37e5f844e0da5..8ffe7a7c1090a 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
@@ -1,12 +1,11 @@
 import { useParams } from 'common'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import IntegrationsLayout from 'components/layouts/Integrations/layout'
-import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useRouter } from 'next/compat/router'
 import { useEffect } from 'react'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const IntegrationPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/cron-logs.tsx b/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
index 58bccd410de11..fe9f47e39f1d2 100644
--- a/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
@@ -2,11 +2,11 @@
 
 import { useRouter } from 'next/router'
 
+import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx
index 62f26ace50351..8ee5a0969e4dc 100644
--- a/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx
@@ -3,11 +3,11 @@ import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constant
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-import { Loading } from 'components/ui/Loading'
 import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -24,7 +24,7 @@ export const LogPage: NextPageWithLayout = () => {
 
   // Prevent showing logs while checking plan or loading config
   if (isOrgPlanLoading || isFreePlan) {
-    return <Loading />
+    return <LogoLoader />
   }
 
   return (
diff --git a/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx b/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx
index 34ca6a8bf9057..fc9d0249c98fd 100644
--- a/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx
@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
   const { ref } = router.query
diff --git a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
index b97ef42a87540..89e7d1fa99c5d 100644
--- a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
@@ -2,9 +2,9 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx b/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx
index 25171a4d1e275..b456cc436fa1e 100644
--- a/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/etl-replication-logs.tsx
@@ -1,9 +1,9 @@
+import { useParams } from 'common'
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import { useParams } from 'common'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref } = useParams()
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
index ec9ff6a5e506b..4fdfda5bdda27 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
@@ -1,15 +1,15 @@
+import { Clock } from 'lucide-react'
 import Link from 'next/link'
 
 import { useParams } from 'common'
 import RecentQueriesItem from 'components/interfaces/Settings/Logs/RecentQueriesItem'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import Table from 'components/to-be-cleaned/Table'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
 import { useLocalStorage } from 'hooks/misc/useLocalStorage'
 import type { LogSqlSnippets, NextPageWithLayout } from 'types'
 import { Button } from 'ui'
-import { Clock } from 'lucide-react'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogsSavedPage: NextPageWithLayout = () => {
   const { ref } = useParams()
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
index 19024f030056c..aeda50087390f 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
@@ -3,13 +3,13 @@ import { Save } from 'lucide-react'
 import Link from 'next/link'
 
 import LogsSavedQueriesItem from 'components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import Table from 'components/to-be-cleaned/Table'
 import LogsExplorerHeader from 'components/ui/Logs/LogsExplorerHeader'
 import { useContentQuery } from 'data/content/content-query'
 import type { NextPageWithLayout } from 'types'
 import { Loading } from 'ui'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 // [Joshen] This page looks like its not longer in use from a UI POV - double checking and deprecate + add redirects
 export const LogsSavedPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/logs/index.tsx b/apps/studio/pages/project/[ref]/logs/index.tsx
index 3f8c7b6854167..ca61c7cf85860 100644
--- a/apps/studio/pages/project/[ref]/logs/index.tsx
+++ b/apps/studio/pages/project/[ref]/logs/index.tsx
@@ -6,7 +6,7 @@ import { useUnifiedLogsPreview } from 'components/interfaces/App/FeaturePreview/
 import { UnifiedLogs } from 'components/interfaces/UnifiedLogs/UnifiedLogs'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { ProjectLayout } from 'components/layouts/ProjectLayout'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx b/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx
index e3a32652066cc..22bb9d979cf26 100644
--- a/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx
@@ -2,8 +2,8 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
index bee89264a26f0..08f18ff8c56cd 100644
--- a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
@@ -3,16 +3,16 @@ import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constant
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-import { Loading } from 'components/ui/Loading'
 import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref } = useParams()
   const { isLoading } = useSupavisorConfigurationQuery({ projectRef: ref ?? 'default' })
 
   // this prevents initial load of pooler logs before config has been retrieved
-  if (isLoading) return <Loading />
+  if (isLoading) return <LogoLoader />
 
   return (
     <LogsPreviewer
diff --git a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
index 55cbed7ceeefe..a62e84164bab4 100644
--- a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
@@ -1,10 +1,10 @@
 import { useRouter } from 'next/router'
 
+import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
index 66a5622f6e604..af38c4c67853e 100644
--- a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
@@ -2,10 +2,10 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs/Logs.constants'
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
-import type { NextPageWithLayout } from 'types'
 import { LogsTableEmptyState } from 'components/interfaces/Settings/Logs/LogsTableEmptyState'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx b/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
index f3233584c162c..ccd69081bd104 100644
--- a/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router'
 
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
+import DefaultLayout from 'components/layouts/DefaultLayout'
 import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
-import DefaultLayout from 'components/layouts/DefaultLayout'
 
 export const LogPage: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/logs/storage-logs.tsx b/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
index 1461ad5917c86..3131dac9ad5da 100644
--- a/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router'
 
 import { LogsPreviewer } from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import type { NextPageWithLayout } from 'types'
 
 export const LogPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/reports/api-overview.tsx b/apps/studio/pages/project/[ref]/reports/api-overview.tsx
index db5c13970d793..368378ce753b2 100644
--- a/apps/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/apps/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -17,7 +17,7 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import { useApiReport } from 'data/reports/api-report-query'
 import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 export const ApiReport: NextPageWithLayout = () => {
   const report = useApiReport()
diff --git a/apps/studio/pages/project/[ref]/reports/auth.tsx b/apps/studio/pages/project/[ref]/reports/auth.tsx
index 6d153cadc0e73..7ab6bf4c4426e 100644
--- a/apps/studio/pages/project/[ref]/reports/auth.tsx
+++ b/apps/studio/pages/project/[ref]/reports/auth.tsx
@@ -2,13 +2,13 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, LogsIcon, RefreshCw } from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 
-import { ReportChartV2 } from 'components/interfaces/Reports/v2/ReportChartV2'
-import { ReportSectionHeader } from 'components/interfaces/Reports/v2/ReportSectionHeader'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
 import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
+import { ReportChartV2 } from 'components/interfaces/Reports/v2/ReportChartV2'
+import { ReportSectionHeader } from 'components/interfaces/Reports/v2/ReportSectionHeader'
 import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
@@ -18,17 +18,6 @@ import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
 import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
-import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import type { NextPageWithLayout } from 'types'
-import {
-  createUsageReportConfig,
-  createErrorsReportConfig,
-  createLatencyReportConfig,
-} from 'data/reports/v2/auth.config'
-import { ReportSettings } from 'components/ui/Charts/ReportSettings'
-import type { ChartHighlightAction } from 'components/ui/Charts/ChartHighlightActions'
-import { useRouter } from 'next/router'
 import {
   ReportsNumericFilter,
   numericFilterSchema,
@@ -37,7 +26,18 @@ import {
   ReportsSelectFilter,
   selectFilterSchema,
 } from 'components/interfaces/Reports/v2/ReportsSelectFilter'
-import { useQueryState, parseAsJson } from 'nuqs'
+import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import type { ChartHighlightAction } from 'components/ui/Charts/ChartHighlightActions'
+import { ReportSettings } from 'components/ui/Charts/ReportSettings'
+import {
+  createErrorsReportConfig,
+  createLatencyReportConfig,
+  createUsageReportConfig,
+} from 'data/reports/v2/auth.config'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useRouter } from 'next/router'
+import { parseAsJson, useQueryState } from 'nuqs'
+import type { NextPageWithLayout } from 'types'
 
 const AuthReport: NextPageWithLayout = () => {
   return (
diff --git a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx
index 3cbcc7e27b26f..d56ba6aa5f821 100644
--- a/apps/studio/pages/project/[ref]/reports/edge-functions.tsx
+++ b/apps/studio/pages/project/[ref]/reports/edge-functions.tsx
@@ -32,8 +32,8 @@ import { useReportDateRange } from 'hooks/misc/useReportDateRange'
 import { EDGE_FUNCTION_REGIONS } from 'components/interfaces/Reports/Reports.constants'
 import { ReportSettings } from 'components/ui/Charts/ReportSettings'
 import { BASE_PATH } from 'lib/constants'
+import { parseAsJson, useQueryState } from 'nuqs'
 import type { NextPageWithLayout } from 'types'
-import { useQueryState, parseAsJson } from 'nuqs'
 
 const EdgeFunctionsReportV2: NextPageWithLayout = () => {
   return (
diff --git a/apps/studio/pages/project/[ref]/reports/index.tsx b/apps/studio/pages/project/[ref]/reports/index.tsx
index 3fa77b7124ce0..f65437c225a08 100644
--- a/apps/studio/pages/project/[ref]/reports/index.tsx
+++ b/apps/studio/pages/project/[ref]/reports/index.tsx
@@ -7,11 +7,11 @@ import { CreateReportModal } from 'components/interfaces/Reports/CreateReportMod
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
-import { Loading } from 'components/ui/Loading'
 import { useContentQuery } from 'data/content/content-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useProfile } from 'lib/profile'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 export const UserReportPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -48,7 +48,7 @@ export const UserReportPage: NextPageWithLayout = () => {
   return (
     <div className="h-full w-full">
       {isLoading ? (
-        <Loading />
+        <LogoLoader />
       ) : (
         <>
           <ProductEmptyState
diff --git a/apps/studio/pages/project/[ref]/reports/postgrest.tsx b/apps/studio/pages/project/[ref]/reports/postgrest.tsx
index 343e300e0f767..d2443d9e0a29a 100644
--- a/apps/studio/pages/project/[ref]/reports/postgrest.tsx
+++ b/apps/studio/pages/project/[ref]/reports/postgrest.tsx
@@ -1,27 +1,27 @@
-import { useEffect } from 'react'
+import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowRight, RefreshCw } from 'lucide-react'
-import { useParams } from 'common'
+import { useEffect } from 'react'
 
-import DefaultLayout from 'components/layouts/DefaultLayout'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
-import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
+import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
+import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 import {
-  LogsDatePicker,
   DatePickerValue,
+  LogsDatePicker,
 } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
-import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
+import DefaultLayout from 'components/layouts/DefaultLayout'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { ButtonTooltip } from 'components/ui/ButtonTooltip'
+import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 
-import type { NextPageWithLayout } from 'types'
+import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
 import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
 import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
-import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
+import type { NextPageWithLayout } from 'types'
 
 const PostgRESTReport: NextPageWithLayout = () => {
   return (
diff --git a/apps/studio/pages/project/[ref]/reports/query-performance.tsx b/apps/studio/pages/project/[ref]/reports/query-performance.tsx
index f0a78fb3f4d76..ebd2672286049 100644
--- a/apps/studio/pages/project/[ref]/reports/query-performance.tsx
+++ b/apps/studio/pages/project/[ref]/reports/query-performance.tsx
@@ -1,25 +1,27 @@
 import { parseAsArrayOf, parseAsString, useQueryStates } from 'nuqs'
 
 import { useParams } from 'common'
-import { EnableIndexAdvisorButton } from 'components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
 import { useIndexAdvisorStatus } from 'components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
 import { useQueryPerformanceSort } from 'components/interfaces/QueryPerformance/hooks/useQueryPerformanceSort'
+import { EnableIndexAdvisorButton } from 'components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
 import { QueryPerformance } from 'components/interfaces/QueryPerformance/QueryPerformance'
-import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
+import {
+  PRESET_CONFIG,
+  REPORT_DATERANGE_HELPER_LABELS,
+} from 'components/interfaces/Reports/Reports.constants'
 import { useQueryPerformanceQuery } from 'components/interfaces/Reports/Reports.queries'
 import { Presets } from 'components/interfaces/Reports/Reports.types'
 import { queriesFactory } from 'components/interfaces/Reports/Reports.utils'
-import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
+import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import DefaultLayout from 'components/layouts/DefaultLayout'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { DocsButton } from 'components/ui/DocsButton'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
-import { DOCS_URL } from 'lib/constants'
-import type { NextPageWithLayout } from 'types'
-import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import { useReportDateRange } from 'hooks/misc/useReportDateRange'
-import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { DOCS_URL } from 'lib/constants'
+import type { NextPageWithLayout } from 'types'
 
 const QueryPerformanceReport: NextPageWithLayout = () => {
   const { ref } = useParams()
diff --git a/apps/studio/pages/project/[ref]/settings/general.tsx b/apps/studio/pages/project/[ref]/settings/general.tsx
index 392985ff6d278..2bcf27c024457 100644
--- a/apps/studio/pages/project/[ref]/settings/general.tsx
+++ b/apps/studio/pages/project/[ref]/settings/general.tsx
@@ -1,3 +1,4 @@
+import { IS_PLATFORM } from 'common'
 import { subscriptionHasHipaaAddon } from 'components/interfaces/Billing/Subscription/Subscription.utils'
 import { ComplianceConfig } from 'components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode'
 import { CustomDomainConfig } from 'components/interfaces/Settings/General/CustomDomainConfig/CustomDomainConfig'
@@ -11,10 +12,9 @@ import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-que
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import type { NextPageWithLayout } from 'types'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { IS_PLATFORM } from 'common'
+import type { NextPageWithLayout } from 'types'
 
 const ProjectSettings: NextPageWithLayout = () => {
   const { data: project } = useSelectedProjectQuery()
diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx
index 307a973517b53..c09873fd35610 100644
--- a/apps/studio/pages/project/[ref]/sql/[id].tsx
+++ b/apps/studio/pages/project/[ref]/sql/[id].tsx
@@ -1,8 +1,8 @@
+import { usePrevious } from '@uidotdev/usehooks'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
-import { usePrevious } from '@uidotdev/usehooks'
 import { useParams } from 'common/hooks/useParams'
 import { SQLEditor } from 'components/interfaces/SQLEditor/SQLEditor'
 import DefaultLayout from 'components/layouts/DefaultLayout'
diff --git a/apps/studio/pages/sign-in-mfa.tsx b/apps/studio/pages/sign-in-mfa.tsx
index 7c67408c4ae98..33a09078d4ed9 100644
--- a/apps/studio/pages/sign-in-mfa.tsx
+++ b/apps/studio/pages/sign-in-mfa.tsx
@@ -7,12 +7,12 @@ import { toast } from 'sonner'
 import { getAccessToken, useParams } from 'common'
 import { SignInMfaForm } from 'components/interfaces/SignIn/SignInMfaForm'
 import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
-import { Loading } from 'components/ui/Loading'
 import { useAddLoginEvent } from 'data/misc/audit-login-mutation'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
 import useLatest from 'hooks/misc/useLatest'
 import { auth, buildPathWithParams, getReturnToPath } from 'lib/gotrue'
 import type { NextPageWithLayout } from 'types'
+import { LogoLoader } from 'ui'
 
 const SignInMfaPage: NextPageWithLayout = () => {
   const router = useRouter()
@@ -90,7 +90,7 @@ const SignInMfaPage: NextPageWithLayout = () => {
   if (loading) {
     return (
       <div className="flex flex-col flex-1 bg-alternative h-screen items-center justify-center">
-        <Loading />
+        <LogoLoader />
       </div>
     )
   }
diff --git a/apps/studio/pages/support/new.tsx b/apps/studio/pages/support/new.tsx
index 8b3d879ba0c58..7330213b82605 100644
--- a/apps/studio/pages/support/new.tsx
+++ b/apps/studio/pages/support/new.tsx
@@ -2,7 +2,7 @@ import { SupportFormPage } from 'components/interfaces/Support/SupportFormPage'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { withAuth } from 'hooks/misc/withAuth'
-import { NextPageWithLayout } from 'types'
+import type { NextPageWithLayout } from 'types'
 
 const SupportPage: NextPageWithLayout = () => {
   return <SupportFormPage />
diff --git a/apps/studio/state/sql-editor-v2.ts b/apps/studio/state/sql-editor-v2.ts
index afdc7aed40ea8..dda6f89c39760 100644
--- a/apps/studio/state/sql-editor-v2.ts
+++ b/apps/studio/state/sql-editor-v2.ts
@@ -1,4 +1,5 @@
 import { debounce, memoize } from 'lodash'
+import { useMemo } from 'react'
 import { toast } from 'sonner'
 import { proxy, snapshot, subscribe, useSnapshot } from 'valtio'
 import { devtools, proxyMap } from 'valtio/utils'
@@ -10,8 +11,7 @@ import { createSQLSnippetFolder } from 'data/content/sql-folder-create-mutation'
 import { updateSQLSnippetFolder } from 'data/content/sql-folder-update-mutation'
 import { Snippet, SnippetFolder } from 'data/content/sql-folders-query'
 import { getQueryClient } from 'data/query-client'
-import { useMemo } from 'react'
-import { SqlSnippets } from 'types'
+import type { SqlSnippets } from 'types'
 
 export type StateSnippetFolder = {
   projectRef: string
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 54d41edfe5751..a3379cfa368f6 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -42,11 +42,11 @@ const ContainerVariants = cva('relative grid gap-10', {
       false: '',
     },
     layout: {
-      horizontal: 'flex flex-col gap-2 md:grid md:grid-cols-12',
+      horizontal: 'flex flex-col gap-2 md:grid @lg:grid-cols-12',
       vertical: 'flex flex-col gap-2',
       flex: 'flex flex-row gap-3',
       'flex-row-reverse':
-        'flex flex-col-reverse gap-2 md:gap-6 md:flex-row-reverse md:justify-between',
+        'flex flex-col-reverse gap-2 @lg:gap-6 @lg:flex-row-reverse @lg:justify-between',
     },
     flex: {
       true: '',
@@ -233,7 +233,7 @@ const FlexContainer = cva('', {
     },
     {
       layout: 'flex-row-reverse',
-      className: 'flex flex-col justify-center items-start md:items-end shrink-0',
+      className: 'flex flex-col justify-center items-start @lg:items-end shrink-0',
     },
   ],
 })
@@ -359,83 +359,85 @@ export const FormLayout = React.forwardRef<
     )
 
     return (
-      <div
-        ref={ref}
-        {...props}
-        className={cn(ContainerVariants({ size, flex, align, layout }), className)}
-      >
-        {flex && (
-          <div className={cn(FlexContainer({ flex, align, layout }))}>
-            {props.children}
-            {layout === 'flex-row-reverse' && renderError}
-          </div>
-        )}
-        {hasLabel || labelOptional || layout === 'horizontal' ? (
-          <>
-            <div
-              className={cn(LabelContainerVariants({ align, labelLayout, flex, layout }))}
-              data-formlayout-id={'labelContainer'}
-            >
-              {hasLabel && isReactForm ? (
-                <FormLabel_Shadcn_
-                  className="text-foreground flex gap-2 items-center break-all"
-                  data-formlayout-id="formLabel"
-                  htmlFor={props.name || id}
-                >
-                  <LabelContents />
-                </FormLabel_Shadcn_>
-              ) : (
-                <Label_Shadcn_
-                  className="text-foreground flex gap-2 items-center break-all leading-normal"
-                  data-formlayout-id="label"
-                  htmlFor={props.name || id}
-                >
-                  <LabelContents />
-                </Label_Shadcn_>
-              )}
-              {labelOptional && (
-                <span
-                  className={cn(LabelOptionalVariants({ size }))}
-                  id={id + '-optional'}
-                  data-formlayout-id={'labelOptional'}
-                >
-                  {labelOptional}
-                </span>
-              )}
-              {flex && (
-                <>
-                  {renderDescription}
-                  {layout !== 'flex-row-reverse' && renderError}
-                </>
-              )}
+      <div className="@container">
+        <div
+          ref={ref}
+          {...props}
+          className={cn(ContainerVariants({ size, flex, align, layout }), className)}
+        >
+          {flex && (
+            <div className={cn(FlexContainer({ flex, align, layout }))}>
+              {props.children}
+              {layout === 'flex-row-reverse' && renderError}
             </div>
-          </>
-        ) : null}
-        {!flex && (
-          <div
-            className={cn(DataContainerVariants({ align, layout }))}
-            style={style}
-            data-formlayout-id={'dataContainer'}
-          >
+          )}
+          {hasLabel || labelOptional || layout === 'horizontal' ? (
             <>
               <div
-                className={cn(
-                  NonBoxInputContainer({
-                    nonBoxInput,
-                    // @ts-expect-error
-                    label,
-                    layout,
-                  })
-                )}
-                data-formlayout-id={'nonBoxInputContainer'}
+                className={cn(LabelContainerVariants({ align, labelLayout, flex, layout }))}
+                data-formlayout-id={'labelContainer'}
               >
-                {props.children}
+                {hasLabel && isReactForm ? (
+                  <FormLabel_Shadcn_
+                    className="text-foreground flex gap-2 items-center break-all"
+                    data-formlayout-id="formLabel"
+                    htmlFor={props.name || id}
+                  >
+                    <LabelContents />
+                  </FormLabel_Shadcn_>
+                ) : (
+                  <Label_Shadcn_
+                    className="text-foreground flex gap-2 items-center break-all leading-normal"
+                    data-formlayout-id="label"
+                    htmlFor={props.name || id}
+                  >
+                    <LabelContents />
+                  </Label_Shadcn_>
+                )}
+                {labelOptional && (
+                  <span
+                    className={cn(LabelOptionalVariants({ size }))}
+                    id={id + '-optional'}
+                    data-formlayout-id={'labelOptional'}
+                  >
+                    {labelOptional}
+                  </span>
+                )}
+                {flex && (
+                  <>
+                    {renderDescription}
+                    {layout !== 'flex-row-reverse' && renderError}
+                  </>
+                )}
               </div>
-              {renderError}
-              {renderDescription}
             </>
-          </div>
-        )}
+          ) : null}
+          {!flex && (
+            <div
+              className={cn(DataContainerVariants({ align, layout }))}
+              style={style}
+              data-formlayout-id={'dataContainer'}
+            >
+              <>
+                <div
+                  className={cn(
+                    NonBoxInputContainer({
+                      nonBoxInput,
+                      // @ts-expect-error
+                      label,
+                      layout,
+                    })
+                  )}
+                  data-formlayout-id={'nonBoxInputContainer'}
+                >
+                  {props.children}
+                </div>
+                {renderError}
+                {renderDescription}
+              </>
+            </div>
+          )}
+        </div>
       </div>
     )
   }