diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsLayout.tsx b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsLayout.tsx
index 3d13062e1bb..f7872e3d68f 100644
--- a/apps/studio/components/layouts/AdvisorsLayout/AdvisorsLayout.tsx
+++ b/apps/studio/components/layouts/AdvisorsLayout/AdvisorsLayout.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'
 
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useSelectedProject, withAuth } from 'hooks'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateAdvisorsMenu } from './AdvisorsMenu.utils'
 
 export interface AdvisorsLayoutProps {
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx b/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
index 888cd787cfd..b590f5d1ab7 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
+++ b/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
@@ -8,7 +8,7 @@ import { useAuthConfigPrefetch } from 'data/auth/auth-config-query'
 import { withAuth } from 'hooks'
 import Link from 'next/link'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateAuthMenu } from './AuthLayout.utils'
 
 export interface AuthLayoutProps {
diff --git a/apps/studio/components/layouts/BillingLayout.tsx b/apps/studio/components/layouts/BillingLayout.tsx
index b62bd596fac..65948c36fe8 100644
--- a/apps/studio/components/layouts/BillingLayout.tsx
+++ b/apps/studio/components/layouts/BillingLayout.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import type { PropsWithChildren } from 'react'
 
-import { ProjectLayout } from 'components/layouts'
+import ProjectLayout from 'components/layouts/ProjectLayout/ProjectLayout'
 import { useSelectedOrganization, useSelectedProject, withAuth } from 'hooks'
 import { IconX } from 'ui'
 
diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
index 019e7932833..11ee7ff22d2 100644
--- a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
+++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx
@@ -8,7 +8,7 @@ import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useSelectedProject, withAuth } from 'hooks'
 import Link from 'next/link'
 import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_ } from 'ui'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateDatabaseMenu } from './DatabaseMenu.utils'
 
 export interface DatabaseLayoutProps {
diff --git a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx
index 30d63d082e4..be759ecaf79 100644
--- a/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx
+++ b/apps/studio/components/layouts/DocsLayout/DocsLayout.tsx
@@ -8,7 +8,7 @@ import { ProductMenu } from 'components/ui/ProductMenu'
 import { useOpenAPISpecQuery } from 'data/open-api/api-spec-query'
 import { useIsFeatureEnabled, useSelectedProject, withAuth } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateDocsMenu } from './DocsLayout.utils'
 
 function DocsLayout({ title, children }: { title: string; children: ReactElement }) {
diff --git a/apps/studio/components/layouts/FunctionsLayout.tsx b/apps/studio/components/layouts/FunctionsLayout.tsx
index 689578617f6..4a7d13b8cc3 100644
--- a/apps/studio/components/layouts/FunctionsLayout.tsx
+++ b/apps/studio/components/layouts/FunctionsLayout.tsx
@@ -11,7 +11,7 @@ import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
 import { useCheckPermissions, withAuth } from 'hooks'
 import { Button, IconCode, IconExternalLink } from 'ui'
 import FunctionsNav from '../interfaces/Functions/FunctionsNav'
-import { ProjectLayout } from './'
+import ProjectLayout from './ProjectLayout/ProjectLayout'
 
 interface FunctionsLayoutProps {
   title?: string
diff --git a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
index e95f8d1f50b..52a94e53b15 100644
--- a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
+++ b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
@@ -11,7 +11,7 @@ import {
   useSelectedProject,
   withAuth,
 } from 'hooks'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateLogsMenu } from './LogsMenu.utils'
 import { Badge, Menu } from 'ui'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
diff --git a/apps/studio/components/layouts/OrganizationLayout.tsx b/apps/studio/components/layouts/OrganizationLayout.tsx
index 395ad4a3056..450e911e8d8 100644
--- a/apps/studio/components/layouts/OrganizationLayout.tsx
+++ b/apps/studio/components/layouts/OrganizationLayout.tsx
@@ -3,13 +3,13 @@ import type { PropsWithChildren } from 'react'
 
 import { useParams } from 'common'
 import { useFlag, useIsFeatureEnabled, useSelectedOrganization } from 'hooks'
+import { useCurrentPath } from 'hooks/misc/useCurrentPath'
+import Link from 'next/link'
 import { NavMenu, NavMenuItem } from 'ui'
-import { AccountLayout } from './'
+import { useOrgSubscriptionQuery } from '../../data/subscriptions/org-subscription-query'
+import AccountLayout from './AccountLayout/AccountLayout'
 import { ScaffoldContainer, ScaffoldDivider, ScaffoldHeader, ScaffoldTitle } from './Scaffold'
 import SettingsLayout from './SettingsLayout/SettingsLayout'
-import Link from 'next/link'
-import { useOrgSubscriptionQuery } from '../../data/subscriptions/org-subscription-query'
-import { useCurrentPath } from 'hooks/misc/useCurrentPath'
 
 const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
   const selectedOrganization = useSelectedOrganization()
diff --git a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx
index 72937b8a775..4088a4e1f3f 100644
--- a/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx
+++ b/apps/studio/components/layouts/ProjectSettingsLayout/SettingsLayout.tsx
@@ -5,8 +5,8 @@ import { generateSettingsMenu } from './SettingsMenu.utils'
 
 import { useParams } from 'common'
 import { ProductMenu } from 'components/ui/ProductMenu'
-import { ProjectLayout } from '..'
 import { IS_PLATFORM } from 'lib/constants'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 
 interface SettingsLayoutProps {
   title?: string
diff --git a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
index 4f63c634bdd..41cb7b2df37 100644
--- a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
+++ b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react'
 
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useFlag, useSelectedProject, withAuth } from 'hooks'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateRealtimeMenu } from './RealtimeMenu.utils'
 
 export interface RealtimeLayoutProps {
diff --git a/apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx b/apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
index eaed084635e..bc203ada9f3 100644
--- a/apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
+++ b/apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { withAuth } from 'hooks'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import ReportsMenu from './ReportsMenu'
 
 interface ReportsLayoutProps {
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx
index cb4c3677f2d..6419ad74cf5 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorLayout.tsx
@@ -1,6 +1,6 @@
 import { withAuth } from 'hooks'
 import { ReactNode, useMemo, useState } from 'react'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { SQLEditorMenu } from './SQLEditorMenu'
 import { OngoingQueriesPanel } from 'components/interfaces/SQLEditor/OngoingQueriesPanel'
 
diff --git a/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx b/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
index 4e66b228a7c..88ead02c422 100644
--- a/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
+++ b/apps/studio/components/layouts/StorageLayout/StorageLayout.tsx
@@ -6,7 +6,7 @@ import { AutoApiService, useProjectApiQuery } from 'data/config/project-api-quer
 import { useSelectedProject, withAuth } from 'hooks'
 import { PROJECT_STATUS } from 'lib/constants'
 import { useStorageStore } from 'localStores/storageExplorer/StorageExplorerStore'
-import { ProjectLayout } from '../'
+import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import StorageMenu from './StorageMenu'
 
 export interface StorageLayoutProps {
diff --git a/apps/studio/components/layouts/index.ts b/apps/studio/components/layouts/index.ts
deleted file mode 100644
index a510c8ddb94..00000000000
--- a/apps/studio/components/layouts/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export { default as AccountLayout } from './AccountLayout/AccountLayout'
-export { default as AuthLayout } from './AuthLayout/AuthLayout'
-export { default as BillingLayout } from './BillingLayout'
-export { default as DatabaseLayout } from './DatabaseLayout/DatabaseLayout'
-export { default as DocsLayout } from './DocsLayout/DocsLayout'
-export { default as LogsLayout } from './LogsLayout/LogsLayout'
-export { default as OrganizationLayout } from './OrganizationLayout'
-export { default as ProjectLayout } from './ProjectLayout/ProjectLayout'
-export { default as SettingsLayout } from './ProjectSettingsLayout/SettingsLayout'
-export { default as ReportsLayout } from './ReportsLayout/ReportsLayout'
-export { default as SQLEditorLayout } from './SQLEditorLayout/SQLEditorLayout'
-export { default as ForgotPasswordLayout } from './SignInLayout/ForgotPasswordLayout'
-export { default as SignInLayout } from './SignInLayout/SignInLayout'
-export { default as StorageLayout } from './StorageLayout/StorageLayout'
-export { default as TableEditorLayout } from './TableEditorLayout/TableEditorLayout'
-export { default as VercelIntegrationLayout } from './VercelIntegrationLayout'
-export { default as WizardLayout } from './WizardLayout'
diff --git a/apps/studio/lib/next-compat/sentry.ts b/apps/studio/lib/next-compat/sentry.ts
index cea39e0a3f3..5ba17fcd45e 100644
--- a/apps/studio/lib/next-compat/sentry.ts
+++ b/apps/studio/lib/next-compat/sentry.ts
@@ -1 +1,5 @@
 export function setUser() {}
+
+export function captureMessage() {}
+
+export function captureException() {}
diff --git a/apps/studio/pages/account/audit.tsx b/apps/studio/pages/account/audit.tsx
index 11125b8b49a..636878c2ea3 100644
--- a/apps/studio/pages/account/audit.tsx
+++ b/apps/studio/pages/account/audit.tsx
@@ -1,5 +1,5 @@
 import { AuditLogs } from 'components/interfaces/Account'
-import { AccountLayout } from 'components/layouts'
+import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/account/me.tsx b/apps/studio/pages/account/me.tsx
index 8d1ddc8feb7..c07548229f4 100644
--- a/apps/studio/pages/account/me.tsx
+++ b/apps/studio/pages/account/me.tsx
@@ -6,7 +6,7 @@ import {
 } from 'components/interfaces/Account/Preferences'
 import { AccountDeletion } from 'components/interfaces/Account/Preferences/AccountDeletion'
 import { ProfileInformation } from 'components/interfaces/Account/Preferences/ProfileInformation'
-import { AccountLayout } from 'components/layouts'
+import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AlertError from 'components/ui/AlertError'
 import Panel from 'components/ui/Panel'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
diff --git a/apps/studio/pages/account/security.tsx b/apps/studio/pages/account/security.tsx
index a6772a7cce0..c4affa51a62 100644
--- a/apps/studio/pages/account/security.tsx
+++ b/apps/studio/pages/account/security.tsx
@@ -2,7 +2,7 @@ import type { NextPageWithLayout } from 'types'
 import { Badge, cn, Collapsible, IconSmartphone } from 'ui'
 
 import { TOTPFactors } from 'components/interfaces/Account'
-import { AccountLayout } from 'components/layouts'
+import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import { FormHeader } from 'components/ui/Forms'
 import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query'
 
diff --git a/apps/studio/pages/account/tokens.tsx b/apps/studio/pages/account/tokens.tsx
index da86f7daf8b..8ad34983dfb 100644
--- a/apps/studio/pages/account/tokens.tsx
+++ b/apps/studio/pages/account/tokens.tsx
@@ -1,13 +1,13 @@
-import { useState } from 'react'
-import type { NextPageWithLayout } from 'types'
-import { FormHeader } from 'components/ui/Forms'
-import { AccountLayout } from 'components/layouts'
 import {
   AccessTokenList,
-  NewTokenBanner,
   NewAccessTokenButton,
+  NewTokenBanner,
 } from 'components/interfaces/Account'
+import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
+import { FormHeader } from 'components/ui/Forms'
 import { NewAccessToken } from 'data/access-tokens/access-tokens-create-mutation'
+import { useState } from 'react'
+import type { NextPageWithLayout } from 'types'
 
 import Link from 'next/link'
 import { Alert, Button, IconExternalLink } from 'ui'
diff --git a/apps/studio/pages/forgot-password.tsx b/apps/studio/pages/forgot-password.tsx
index 44b43b46cc6..9768b22a13c 100644
--- a/apps/studio/pages/forgot-password.tsx
+++ b/apps/studio/pages/forgot-password.tsx
@@ -1,5 +1,5 @@
 import ForgotPasswordForm from 'components/interfaces/SignIn/ForgotPasswordForm'
-import { ForgotPasswordLayout } from 'components/layouts'
+import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
 import Link from 'next/link'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/new/index.tsx b/apps/studio/pages/new/index.tsx
index 4732061f921..4098eccd8a5 100644
--- a/apps/studio/pages/new/index.tsx
+++ b/apps/studio/pages/new/index.tsx
@@ -5,7 +5,7 @@ import { useTheme } from 'next-themes'
 import { useCallback, useEffect, useState } from 'react'
 
 import { NewOrgForm } from 'components/interfaces/Organization'
-import { WizardLayout } from 'components/layouts'
+import WizardLayout from 'components/layouts/WizardLayout'
 import { useSetupIntent } from 'data/stripe/setup-intent-mutation'
 import { STRIPE_PUBLIC_KEY } from 'lib/constants'
 import { useIsHCaptchaLoaded } from 'stores/hcaptcha-loaded-store'
diff --git a/apps/studio/pages/org/[slug]/apps.tsx b/apps/studio/pages/org/[slug]/apps.tsx
index 8d1d248ce4b..30ea20f7305 100644
--- a/apps/studio/pages/org/[slug]/apps.tsx
+++ b/apps/studio/pages/org/[slug]/apps.tsx
@@ -1,5 +1,5 @@
 import { OAuthApps } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/org/[slug]/audit.tsx b/apps/studio/pages/org/[slug]/audit.tsx
index 94dd76ac24a..28bfc381f24 100644
--- a/apps/studio/pages/org/[slug]/audit.tsx
+++ b/apps/studio/pages/org/[slug]/audit.tsx
@@ -1,5 +1,5 @@
 import { AuditLogs } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/org/[slug]/billing.tsx b/apps/studio/pages/org/[slug]/billing.tsx
index f973ac75108..438bec8abf7 100644
--- a/apps/studio/pages/org/[slug]/billing.tsx
+++ b/apps/studio/pages/org/[slug]/billing.tsx
@@ -1,6 +1,6 @@
 import { useParams } from 'common'
 import { BillingSettings } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/org/[slug]/documents.tsx b/apps/studio/pages/org/[slug]/documents.tsx
index b92bdbe9f2c..320da35528d 100644
--- a/apps/studio/pages/org/[slug]/documents.tsx
+++ b/apps/studio/pages/org/[slug]/documents.tsx
@@ -1,6 +1,6 @@
-import type { NextPageWithLayout } from 'types'
-import { OrganizationLayout } from 'components/layouts'
 import { Documents } from 'components/interfaces/Organization'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import type { NextPageWithLayout } from 'types'
 
 const OrgDocuments: NextPageWithLayout = () => {
   return <Documents />
diff --git a/apps/studio/pages/org/[slug]/general.tsx b/apps/studio/pages/org/[slug]/general.tsx
index 4eb742b05ac..e7ceeed9503 100644
--- a/apps/studio/pages/org/[slug]/general.tsx
+++ b/apps/studio/pages/org/[slug]/general.tsx
@@ -1,5 +1,5 @@
 import { GeneralSettings as GeneralSettingsLegacy } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/org/[slug]/integrations.tsx b/apps/studio/pages/org/[slug]/integrations.tsx
index 87fdf96add2..c7aeac71f07 100644
--- a/apps/studio/pages/org/[slug]/integrations.tsx
+++ b/apps/studio/pages/org/[slug]/integrations.tsx
@@ -1,6 +1,6 @@
-import type { NextPageWithLayout } from 'types'
-import { OrganizationLayout } from 'components/layouts'
 import { IntegrationSettings } from 'components/interfaces/Organization'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import type { NextPageWithLayout } from 'types'
 
 const OrgIntegrationSettings: NextPageWithLayout = () => {
   return <IntegrationSettings />
diff --git a/apps/studio/pages/org/[slug]/invoices.tsx b/apps/studio/pages/org/[slug]/invoices.tsx
index a532196b72e..ccafa2a571e 100644
--- a/apps/studio/pages/org/[slug]/invoices.tsx
+++ b/apps/studio/pages/org/[slug]/invoices.tsx
@@ -1,5 +1,5 @@
 import { InvoicesSettings } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/org/[slug]/team.tsx b/apps/studio/pages/org/[slug]/team.tsx
index 4c46eec6c11..7ff693774a4 100644
--- a/apps/studio/pages/org/[slug]/team.tsx
+++ b/apps/studio/pages/org/[slug]/team.tsx
@@ -1,5 +1,5 @@
 import { TeamSettings } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/org/[slug]/usage.tsx b/apps/studio/pages/org/[slug]/usage.tsx
index 484ed40d286..4d932546c69 100644
--- a/apps/studio/pages/org/[slug]/usage.tsx
+++ b/apps/studio/pages/org/[slug]/usage.tsx
@@ -1,5 +1,5 @@
 import { Usage } from 'components/interfaces/Organization'
-import { OrganizationLayout } from 'components/layouts'
+import OrganizationLayout from 'components/layouts/OrganizationLayout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/api/graphiql.tsx b/apps/studio/pages/project/[ref]/api/graphiql.tsx
index a39f8ae5781..22891efeb20 100644
--- a/apps/studio/pages/project/[ref]/api/graphiql.tsx
+++ b/apps/studio/pages/project/[ref]/api/graphiql.tsx
@@ -7,7 +7,7 @@ import toast from 'react-hot-toast'
 import { useParams } from 'common'
 import ExtensionCard from 'components/interfaces/Database/Extensions/ExtensionCard'
 import GraphiQL from 'components/interfaces/GraphQL/GraphiQL'
-import { DocsLayout } from 'components/layouts'
+import DocsLayout from 'components/layouts/DocsLayout/DocsLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { Loading } from 'components/ui/Loading'
 import { useSessionAccessTokenQuery } from 'data/auth/session-access-token-query'
diff --git a/apps/studio/pages/project/[ref]/api/index.tsx b/apps/studio/pages/project/[ref]/api/index.tsx
index 4d26875503a..d195fd6da37 100644
--- a/apps/studio/pages/project/[ref]/api/index.tsx
+++ b/apps/studio/pages/project/[ref]/api/index.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 
 import { GeneralContent, ResourceContent, RpcContent } from 'components/interfaces/Docs'
 import LangSelector from 'components/interfaces/Docs/LangSelector'
-import { DocsLayout } from 'components/layouts'
+import DocsLayout from 'components/layouts/DocsLayout/DocsLayout'
 import { useProjectApiQuery } from 'data/config/project-api-query'
 import { useCustomDomainsQuery } from 'data/custom-domains/custom-domains-query'
 import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
diff --git a/apps/studio/pages/project/[ref]/auth/hooks.tsx b/apps/studio/pages/project/[ref]/auth/hooks.tsx
index 0c03fa82b30..1197e46e769 100644
--- a/apps/studio/pages/project/[ref]/auth/hooks.tsx
+++ b/apps/studio/pages/project/[ref]/auth/hooks.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { HooksListing } from 'components/interfaces/Auth/Hooks/HooksListing'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/auth/index.tsx b/apps/studio/pages/project/[ref]/auth/index.tsx
index 280af12948f..4e05c781762 100644
--- a/apps/studio/pages/project/[ref]/auth/index.tsx
+++ b/apps/studio/pages/project/[ref]/auth/index.tsx
@@ -1,4 +1,4 @@
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import type { NextPageWithLayout } from 'types'
 
 const Authentication: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/auth/policies.tsx
index 703b9e73b91..acf8de1e79a 100644
--- a/apps/studio/pages/project/[ref]/auth/policies.tsx
+++ b/apps/studio/pages/project/[ref]/auth/policies.tsx
@@ -7,7 +7,7 @@ import { useState } from 'react'
 import { useIsRLSAIAssistantEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { Policies } from 'components/interfaces/Auth/Policies'
 import { AIPolicyEditorPanel } from 'components/interfaces/Auth/Policies/AIPolicyEditorPanel'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AlertError from 'components/ui/AlertError'
 import NoPermission from 'components/ui/NoPermission'
diff --git a/apps/studio/pages/project/[ref]/auth/providers.tsx b/apps/studio/pages/project/[ref]/auth/providers.tsx
index 93c03890799..bd28a81ba02 100644
--- a/apps/studio/pages/project/[ref]/auth/providers.tsx
+++ b/apps/studio/pages/project/[ref]/auth/providers.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { AuthProvidersForm } from 'components/interfaces/Auth'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx
index 705a81047ef..f92b572e06d 100644
--- a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx
+++ b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import RateLimits from 'components/interfaces/Auth/RateLimits/RateLimits'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/auth/templates.tsx b/apps/studio/pages/project/[ref]/auth/templates.tsx
index 0710001fff7..c89b52eb12c 100644
--- a/apps/studio/pages/project/[ref]/auth/templates.tsx
+++ b/apps/studio/pages/project/[ref]/auth/templates.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { EmailTemplates } from 'components/interfaces/Auth'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx
index 560632d38ae..dad97052d39 100644
--- a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx
+++ b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import RedirectUrls from 'components/interfaces/Auth/RedirectUrls/RedirectUrls'
 import SiteUrl from 'components/interfaces/Auth/SiteUrl/SiteUrl'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import { FormsContainer } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/auth/users.tsx b/apps/studio/pages/project/[ref]/auth/users.tsx
index 45a315c1131..e9a40ca8188 100644
--- a/apps/studio/pages/project/[ref]/auth/users.tsx
+++ b/apps/studio/pages/project/[ref]/auth/users.tsx
@@ -1,5 +1,5 @@
 import { Users } from 'components/interfaces/Auth/Users'
-import { AuthLayout } from 'components/layouts'
+import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import type { NextPageWithLayout } from 'types'
 
 const UsersPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
index 8ca1607c74a..83979495cb4 100644
--- a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
 import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
index ed71ee3b923..ecec7718642 100644
--- a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { BackupsList } from 'components/interfaces/Database'
 import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/pages/project/[ref]/database/column-privileges.tsx b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
index 98372f0fed5..b5a3f083644 100644
--- a/apps/studio/pages/project/[ref]/database/column-privileges.tsx
+++ b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
@@ -22,7 +22,7 @@ import {
 import PrivilegesHead from 'components/interfaces/Database/Privileges/PrivilegesHead'
 import PrivilegesTable from 'components/interfaces/Database/Privileges/PrivilegesTable'
 import ProtectedSchemaWarning from 'components/interfaces/Database/ProtectedSchemaWarning'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
diff --git a/apps/studio/pages/project/[ref]/database/extensions.tsx b/apps/studio/pages/project/[ref]/database/extensions.tsx
index 4341a4dd845..d904ef9f3a8 100644
--- a/apps/studio/pages/project/[ref]/database/extensions.tsx
+++ b/apps/studio/pages/project/[ref]/database/extensions.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { Extensions } from 'components/interfaces/Database'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
diff --git a/apps/studio/pages/project/[ref]/database/functions.tsx b/apps/studio/pages/project/[ref]/database/functions.tsx
index 2883de5f38f..169830e4916 100644
--- a/apps/studio/pages/project/[ref]/database/functions.tsx
+++ b/apps/studio/pages/project/[ref]/database/functions.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 
 import { CreateFunction, DeleteFunction } from 'components/interfaces/Database'
 import FunctionsList from 'components/interfaces/Database/Functions/FunctionsList/FunctionsList'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
diff --git a/apps/studio/pages/project/[ref]/database/hooks.tsx b/apps/studio/pages/project/[ref]/database/hooks.tsx
index 746c898d35a..5f18b9ec744 100644
--- a/apps/studio/pages/project/[ref]/database/hooks.tsx
+++ b/apps/studio/pages/project/[ref]/database/hooks.tsx
@@ -6,16 +6,16 @@ import { useParams } from 'common'
 import DeleteHookModal from 'components/interfaces/Database/Hooks/DeleteHookModal'
 import EditHookPanel from 'components/interfaces/Database/Hooks/EditHookPanel'
 import HooksList from 'components/interfaces/Database/Hooks/HooksList/HooksList'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
+import { FormHeader } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { useHooksEnableMutation } from 'data/database/hooks-enable-mutation'
 import { useSchemasQuery } from 'data/database/schemas-query'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
 import type { NextPageWithLayout } from 'types'
-import { FormHeader } from 'components/ui/Forms'
 
 const HooksPage: NextPageWithLayout = () => {
   const { project } = useProjectContext()
diff --git a/apps/studio/pages/project/[ref]/database/index.tsx b/apps/studio/pages/project/[ref]/database/index.tsx
index 8580eef05bd..1c9ade0c442 100644
--- a/apps/studio/pages/project/[ref]/database/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/index.tsx
@@ -1,4 +1,4 @@
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import type { NextPageWithLayout } from 'types'
 
 const Database: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/database/indexes.tsx b/apps/studio/pages/project/[ref]/database/indexes.tsx
index ffa2e05883c..92523a057d0 100644
--- a/apps/studio/pages/project/[ref]/database/indexes.tsx
+++ b/apps/studio/pages/project/[ref]/database/indexes.tsx
@@ -1,7 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 
 import Indexes from 'components/interfaces/Database/Indexes/Indexes'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import {
   ScaffoldContainer,
   ScaffoldSection,
diff --git a/apps/studio/pages/project/[ref]/database/migrations.tsx b/apps/studio/pages/project/[ref]/database/migrations.tsx
index 24a71088400..82fed9775a2 100644
--- a/apps/studio/pages/project/[ref]/database/migrations.tsx
+++ b/apps/studio/pages/project/[ref]/database/migrations.tsx
@@ -1,16 +1,16 @@
 import { ExternalLink } from 'lucide-react'
 
 import Migrations from 'components/interfaces/Database/Migrations/Migrations'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import {
   ScaffoldContainer,
   ScaffoldSection,
   ScaffoldSectionContent,
   ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
+import { FormHeader } from 'components/ui/Forms'
 import type { NextPageWithLayout } from 'types'
 import { Button } from 'ui'
-import { FormHeader } from 'components/ui/Forms'
 
 const MigrationsPage: NextPageWithLayout = () => {
   return (
diff --git a/apps/studio/pages/project/[ref]/database/publications.tsx b/apps/studio/pages/project/[ref]/database/publications.tsx
index 0d886f93a16..7527c328e99 100644
--- a/apps/studio/pages/project/[ref]/database/publications.tsx
+++ b/apps/studio/pages/project/[ref]/database/publications.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useState } from 'react'
 
 import { PublicationsList, PublicationsTables } from 'components/interfaces/Database'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
diff --git a/apps/studio/pages/project/[ref]/database/query-performance.tsx b/apps/studio/pages/project/[ref]/database/query-performance.tsx
index 1d81fbfaba4..bb2d3e74f17 100644
--- a/apps/studio/pages/project/[ref]/database/query-performance.tsx
+++ b/apps/studio/pages/project/[ref]/database/query-performance.tsx
@@ -10,11 +10,11 @@ import {
 } from 'components/interfaces/Reports/Reports.queries'
 import { Presets } from 'components/interfaces/Reports/Reports.types'
 import { queriesFactory } from 'components/interfaces/Reports/Reports.utils'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import DatabaseSelector from 'components/ui/DatabaseSelector'
 import { FormHeader } from 'components/ui/Forms'
 import type { NextPageWithLayout } from 'types'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 
 const PRESET_MAP = {
   [QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING]: 'mostTimeConsuming',
diff --git a/apps/studio/pages/project/[ref]/database/roles.tsx b/apps/studio/pages/project/[ref]/database/roles.tsx
index 0ba69c26798..ef5b8fabfb7 100644
--- a/apps/studio/pages/project/[ref]/database/roles.tsx
+++ b/apps/studio/pages/project/[ref]/database/roles.tsx
@@ -1,5 +1,5 @@
 import { RolesList } from 'components/interfaces/Database'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/database/schemas.tsx b/apps/studio/pages/project/[ref]/database/schemas.tsx
index 4723b20dcef..87be8432f3a 100644
--- a/apps/studio/pages/project/[ref]/database/schemas.tsx
+++ b/apps/studio/pages/project/[ref]/database/schemas.tsx
@@ -2,7 +2,7 @@ import { partition } from 'lodash'
 import { useState } from 'react'
 
 import SchemaGraph from 'components/interfaces/Database/Schemas/SchemaGraph'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import AlertError from 'components/ui/AlertError'
 import SchemaSelector from 'components/ui/SchemaSelector'
diff --git a/apps/studio/pages/project/[ref]/database/tables/[id].tsx b/apps/studio/pages/project/[ref]/database/tables/[id].tsx
index 0c30aca5cff..e7f872e9835 100644
--- a/apps/studio/pages/project/[ref]/database/tables/[id].tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/[id].tsx
@@ -4,7 +4,7 @@ import { useParams } from 'common'
 import { ColumnList } from 'components/interfaces/Database'
 import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
 import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import useTable from 'hooks/misc/useTable'
diff --git a/apps/studio/pages/project/[ref]/database/tables/index.tsx b/apps/studio/pages/project/[ref]/database/tables/index.tsx
index beeb36237cf..413a77c6e99 100644
--- a/apps/studio/pages/project/[ref]/database/tables/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/index.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { TableList } from 'components/interfaces/Database'
 import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
 import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import type { Table } from 'data/tables/table-query'
diff --git a/apps/studio/pages/project/[ref]/database/triggers.tsx b/apps/studio/pages/project/[ref]/database/triggers.tsx
index f8daed7cf35..8da6c5ee8c9 100644
--- a/apps/studio/pages/project/[ref]/database/triggers.tsx
+++ b/apps/studio/pages/project/[ref]/database/triggers.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 
 import { CreateTrigger, DeleteTrigger } from 'components/interfaces/Database'
 import TriggersList from 'components/interfaces/Database/Triggers/TriggersList/TriggersList'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
diff --git a/apps/studio/pages/project/[ref]/database/types.tsx b/apps/studio/pages/project/[ref]/database/types.tsx
index 8c5e5737e91..a7d8aa7059a 100644
--- a/apps/studio/pages/project/[ref]/database/types.tsx
+++ b/apps/studio/pages/project/[ref]/database/types.tsx
@@ -1,7 +1,7 @@
 import { ExternalLink } from 'lucide-react'
 
 import { EnumeratedTypes } from 'components/interfaces/Database'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import {
   ScaffoldContainer,
   ScaffoldSection,
diff --git a/apps/studio/pages/project/[ref]/database/wrappers/[id].tsx b/apps/studio/pages/project/[ref]/database/wrappers/[id].tsx
index 1259a2c67ed..a9bb442f624 100644
--- a/apps/studio/pages/project/[ref]/database/wrappers/[id].tsx
+++ b/apps/studio/pages/project/[ref]/database/wrappers/[id].tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { EditWrapper } from 'components/interfaces/Database'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/database/wrappers/index.tsx b/apps/studio/pages/project/[ref]/database/wrappers/index.tsx
index b1ed00123fc..1abf9593ce9 100644
--- a/apps/studio/pages/project/[ref]/database/wrappers/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/wrappers/index.tsx
@@ -3,7 +3,7 @@ import { ExternalLink } from 'lucide-react'
 
 import { Wrappers } from 'components/interfaces/Database'
 import WrappersDropdown from 'components/interfaces/Database/Wrappers/WrappersDropdown'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import {
   ScaffoldContainer,
diff --git a/apps/studio/pages/project/[ref]/database/wrappers/new.tsx b/apps/studio/pages/project/[ref]/database/wrappers/new.tsx
index 0ca29ffc4c0..204cbe98eb6 100644
--- a/apps/studio/pages/project/[ref]/database/wrappers/new.tsx
+++ b/apps/studio/pages/project/[ref]/database/wrappers/new.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { CreateWrapper } from 'components/interfaces/Database'
-import { DatabaseLayout } from 'components/layouts'
+import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx
index 0e861f5c716..6330c98ea2a 100644
--- a/apps/studio/pages/project/[ref]/editor/[id].tsx
+++ b/apps/studio/pages/project/[ref]/editor/[id].tsx
@@ -1,10 +1,10 @@
-import { useTheme } from 'next-themes'
 import { useParams } from 'common/hooks'
 import { TableGridEditor } from 'components/interfaces/TableGridEditor'
 import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
-import { TableEditorLayout } from 'components/layouts'
 import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
 import useTable from 'hooks/misc/useTable'
+import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/project/[ref]/editor/index.tsx b/apps/studio/pages/project/[ref]/editor/index.tsx
index f5773b81f96..e51e35dfcf5 100644
--- a/apps/studio/pages/project/[ref]/editor/index.tsx
+++ b/apps/studio/pages/project/[ref]/editor/index.tsx
@@ -2,8 +2,8 @@ import { useRouter } from 'next/router'
 
 import { useParams } from 'common'
 import { EmptyState, SidePanelEditor } from 'components/interfaces/TableGridEditor'
-import { TableEditorLayout } from 'components/layouts'
 import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
 import type { Table } from 'data/tables/table-query'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/project/[ref]/logs/auth-logs.tsx b/apps/studio/pages/project/[ref]/logs/auth-logs.tsx
index 61ba4ceaddb..4f6c4a7c1f5 100644
--- a/apps/studio/pages/project/[ref]/logs/auth-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/auth-logs.tsx
@@ -1,7 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/logs/collections/[collectionToken].tsx b/apps/studio/pages/project/[ref]/logs/collections/[collectionToken].tsx
index 0ab7fc0d5ac..4fb57d4dd28 100644
--- a/apps/studio/pages/project/[ref]/logs/collections/[collectionToken].tsx
+++ b/apps/studio/pages/project/[ref]/logs/collections/[collectionToken].tsx
@@ -1,5 +1,5 @@
 import { WarehouseCollectionDetail } from 'components/interfaces/DataWarehouse/WarehouseCollectionDetail'
-import { LogsLayout } from 'components/layouts'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => <WarehouseCollectionDetail />
diff --git a/apps/studio/pages/project/[ref]/logs/collections/access-tokens.tsx b/apps/studio/pages/project/[ref]/logs/collections/access-tokens.tsx
index 409a9bf876e..d9d1514bb4f 100644
--- a/apps/studio/pages/project/[ref]/logs/collections/access-tokens.tsx
+++ b/apps/studio/pages/project/[ref]/logs/collections/access-tokens.tsx
@@ -1,5 +1,5 @@
 import WarehouseAccessTokens from 'components/interfaces/DataWarehouse/WarehouseAccessTokens'
-import { LogsLayout } from 'components/layouts'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => <WarehouseAccessTokens />
diff --git a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
index a8265f580f6..d97f190cdba 100644
--- a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/router'
 
-import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
-import type { NextPageWithLayout } from 'types'
 import { LogsTableName } from 'components/interfaces/Settings/Logs'
+import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
+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/explorer/index.tsx b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
index f45342c61e3..400b36e00ce 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
@@ -26,7 +26,7 @@ import {
   useEditorHints,
 } from 'components/interfaces/Settings/Logs'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import { LogsLayout } from 'components/layouts'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
 import { CodeEditor } from 'components/ui/CodeEditor'
 import LoadingOpacity from 'components/ui/LoadingOpacity'
 import ShimmerLine from 'components/ui/ShimmerLine'
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
index d3a66fcb669..fa0f3bec1b4 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { IconSave, Loading } from 'ui'
 
 import { LogsSavedQueriesItem } from 'components/interfaces/Settings/Logs'
-import { LogsLayout } from 'components/layouts'
+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'
diff --git a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
index ac8d3c81a2a..0e6bf939808 100644
--- a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
@@ -2,10 +2,10 @@ import { useParams } from 'common'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs'
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
+import LogsLayout from 'components/layouts/LogsLayout/LogsLayout'
+import { Loading } from 'components/ui/Loading'
 import { usePoolingConfigurationQuery } from 'data/database/pooling-configuration-query'
 import type { NextPageWithLayout } from 'types'
-import { Loading } from 'components/ui/Loading'
 
 export const LogPage: NextPageWithLayout = () => {
   const { ref } = useParams()
diff --git a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
index e8277e57f10..afddad783a4 100644
--- a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
+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/postgrest-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
index 66446cd3b1c..85bdc053e21 100644
--- a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 
 import { LogsTableName } from 'components/interfaces/Settings/Logs'
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
+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/realtime-logs.tsx b/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
index edc0fbff207..6dfcdb2a72b 100644
--- a/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
+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/storage-logs.tsx b/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
index 3aceb7b19a9..e0f63ee0271 100644
--- a/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 
 import LogsPreviewer from 'components/interfaces/Settings/Logs/LogsPreviewer'
-import { LogsLayout } from 'components/layouts'
+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/[id].tsx b/apps/studio/pages/project/[ref]/reports/[id].tsx
index 9ac7c0cccc5..011f0958aee 100644
--- a/apps/studio/pages/project/[ref]/reports/[id].tsx
+++ b/apps/studio/pages/project/[ref]/reports/[id].tsx
@@ -1,5 +1,5 @@
 import Reports from 'components/interfaces/Reports/Reports'
-import { ReportsLayout } from 'components/layouts'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import type { NextPageWithLayout } from 'types'
 
 const PageLayout: NextPageWithLayout = () => (
diff --git a/apps/studio/pages/project/[ref]/reports/api-overview.tsx b/apps/studio/pages/project/[ref]/reports/api-overview.tsx
index dc5f4cf88bd..438d361d207 100644
--- a/apps/studio/pages/project/[ref]/reports/api-overview.tsx
+++ b/apps/studio/pages/project/[ref]/reports/api-overview.tsx
@@ -13,7 +13,7 @@ import {
   TotalRequestsChartRenderer,
 } from 'components/interfaces/Reports/renderers/ApiRenderers'
 import { DatePickerToFrom } from 'components/interfaces/Settings/Logs'
-import { ReportsLayout } from 'components/layouts'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import ShimmerLine from 'components/ui/ShimmerLine'
 import { useApiReport } from 'data/reports/api-report-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
index d711ea95a8b..8adab27169e 100644
--- a/apps/studio/pages/project/[ref]/reports/database.tsx
+++ b/apps/studio/pages/project/[ref]/reports/database.tsx
@@ -8,8 +8,8 @@ import { useParams } from 'common'
 import ReportHeader from 'components/interfaces/Reports/ReportHeader'
 import ReportPadding from 'components/interfaces/Reports/ReportPadding'
 import ReportWidget from 'components/interfaces/Reports/ReportWidget'
-import { ReportsLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import ChartHandler from 'components/to-be-cleaned/Charts/ChartHandler'
 import DateRangePicker from 'components/to-be-cleaned/DateRangePicker'
 import Table from 'components/to-be-cleaned/Table'
diff --git a/apps/studio/pages/project/[ref]/reports/index.tsx b/apps/studio/pages/project/[ref]/reports/index.tsx
index 4fda277cae3..6133bdcc1e3 100644
--- a/apps/studio/pages/project/[ref]/reports/index.tsx
+++ b/apps/studio/pages/project/[ref]/reports/index.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react'
 
 import { useParams } from 'common'
 import { CreateReportModal } from 'components/interfaces/Reports/Reports.CreateReportModal'
-import { ReportsLayout } from 'components/layouts'
+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'
diff --git a/apps/studio/pages/project/[ref]/reports/storage.tsx b/apps/studio/pages/project/[ref]/reports/storage.tsx
index 688be3ec849..8a95e8b34a6 100644
--- a/apps/studio/pages/project/[ref]/reports/storage.tsx
+++ b/apps/studio/pages/project/[ref]/reports/storage.tsx
@@ -10,7 +10,7 @@ import {
 } from 'components/interfaces/Reports/renderers/StorageRenderers'
 import { DatePickerToFrom } from 'components/interfaces/Settings/Logs'
 import DatePickers from 'components/interfaces/Settings/Logs/Logs.DatePickers'
-import { ReportsLayout } from 'components/layouts'
+import ReportsLayout from 'components/layouts/ReportsLayout/ReportsLayout'
 import ShimmerLine from 'components/ui/ShimmerLine'
 import { useStorageReport } from 'data/reports/storage-report-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
diff --git a/apps/studio/pages/project/[ref]/settings/addons.tsx b/apps/studio/pages/project/[ref]/settings/addons.tsx
index 4816710ac99..9d906d289fc 100644
--- a/apps/studio/pages/project/[ref]/settings/addons.tsx
+++ b/apps/studio/pages/project/[ref]/settings/addons.tsx
@@ -1,5 +1,5 @@
 import Addons from 'components/interfaces/Settings/Addons/Addons'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDescription,
diff --git a/apps/studio/pages/project/[ref]/settings/api.tsx b/apps/studio/pages/project/[ref]/settings/api.tsx
index 85f89e48d2c..1b5d2c6211d 100644
--- a/apps/studio/pages/project/[ref]/settings/api.tsx
+++ b/apps/studio/pages/project/[ref]/settings/api.tsx
@@ -1,5 +1,5 @@
 import ServiceList from 'components/interfaces/Settings/API/ServiceList'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import { ScaffoldContainer, ScaffoldHeader, ScaffoldTitle } from 'components/layouts/Scaffold'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/project/[ref]/settings/auth.tsx b/apps/studio/pages/project/[ref]/settings/auth.tsx
index 6efa7fcdf06..819a0279b1b 100644
--- a/apps/studio/pages/project/[ref]/settings/auth.tsx
+++ b/apps/studio/pages/project/[ref]/settings/auth.tsx
@@ -1,18 +1,17 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import {
-  SmtpForm,
-  BasicAuthSettingsForm,
   AdvancedAuthSettingsForm,
+  BasicAuthSettingsForm,
+  SmtpForm,
 } from 'components/interfaces/Auth'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDescription,
   ScaffoldHeader,
   ScaffoldTitle,
 } from 'components/layouts/Scaffold'
-import { FormHeader } from 'components/ui/Forms'
 import NoPermission from 'components/ui/NoPermission'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/settings/billing/usage.tsx b/apps/studio/pages/project/[ref]/settings/billing/usage.tsx
index 2a84f5e0c0c..459ec15372a 100644
--- a/apps/studio/pages/project/[ref]/settings/billing/usage.tsx
+++ b/apps/studio/pages/project/[ref]/settings/billing/usage.tsx
@@ -1,9 +1,9 @@
-import { SettingsLayout } from 'components/layouts'
-import type { NextPageWithLayout } from 'types'
+import { useParams } from 'common'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
+import { useSelectedOrganization } from 'hooks'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
-import { useSelectedOrganization } from 'hooks'
-import { useParams } from 'common'
+import type { NextPageWithLayout } from 'types'
 
 const ProjectBillingUsage: NextPageWithLayout = () => {
   // This component is only used for redirects, as nextjs cant redirect based on hash
diff --git a/apps/studio/pages/project/[ref]/settings/database.tsx b/apps/studio/pages/project/[ref]/settings/database.tsx
index a83930fdf76..209e0b70ffb 100644
--- a/apps/studio/pages/project/[ref]/settings/database.tsx
+++ b/apps/studio/pages/project/[ref]/settings/database.tsx
@@ -3,7 +3,7 @@ import {
   DatabaseSettings,
   NetworkRestrictions,
 } from 'components/interfaces/Settings/Database'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import type { NextPageWithLayout } from 'types'
 
 import BannedIPs from 'components/interfaces/Settings/Database/BannedIPs'
diff --git a/apps/studio/pages/project/[ref]/settings/functions.tsx b/apps/studio/pages/project/[ref]/settings/functions.tsx
index 327db8ebfa8..46baeecc562 100644
--- a/apps/studio/pages/project/[ref]/settings/functions.tsx
+++ b/apps/studio/pages/project/[ref]/settings/functions.tsx
@@ -1,5 +1,5 @@
 import EdgeFunctionSecrets from 'components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecrets'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDescription,
diff --git a/apps/studio/pages/project/[ref]/settings/general.tsx b/apps/studio/pages/project/[ref]/settings/general.tsx
index 1fb9559d27f..3101c644d08 100644
--- a/apps/studio/pages/project/[ref]/settings/general.tsx
+++ b/apps/studio/pages/project/[ref]/settings/general.tsx
@@ -4,8 +4,8 @@ import {
   General,
   TransferProjectPanel,
 } from 'components/interfaces/Settings/General'
-import { SettingsLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import { ScaffoldContainer, ScaffoldHeader, ScaffoldTitle } from 'components/layouts/Scaffold'
 import { useIsFeatureEnabled } from 'hooks'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/settings/index.tsx b/apps/studio/pages/project/[ref]/settings/index.tsx
index 3d28e36ac1d..e66b6c2ecc9 100644
--- a/apps/studio/pages/project/[ref]/settings/index.tsx
+++ b/apps/studio/pages/project/[ref]/settings/index.tsx
@@ -1,4 +1,4 @@
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import type { NextPageWithLayout } from 'types'
 
 const Settings: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/settings/infrastructure.tsx b/apps/studio/pages/project/[ref]/settings/infrastructure.tsx
index 66f48eb7080..415339b51c0 100644
--- a/apps/studio/pages/project/[ref]/settings/infrastructure.tsx
+++ b/apps/studio/pages/project/[ref]/settings/infrastructure.tsx
@@ -1,6 +1,6 @@
 import InfrastructureActivity from 'components/interfaces/Settings/Infrastructure/InfrastructureActivity'
 import InfrastructureInfo from 'components/interfaces/Settings/Infrastructure/InfrastructureInfo'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDescription,
diff --git a/apps/studio/pages/project/[ref]/settings/integrations.tsx b/apps/studio/pages/project/[ref]/settings/integrations.tsx
index eda43082693..d2877d3fe1d 100644
--- a/apps/studio/pages/project/[ref]/settings/integrations.tsx
+++ b/apps/studio/pages/project/[ref]/settings/integrations.tsx
@@ -1,5 +1,5 @@
 import IntegrationSettings from 'components/interfaces/Settings/Integrations/IntegrationsSettings'
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDivider,
diff --git a/apps/studio/pages/project/[ref]/settings/storage.tsx b/apps/studio/pages/project/[ref]/settings/storage.tsx
index 78d8fa38abe..a2e1077d5dc 100644
--- a/apps/studio/pages/project/[ref]/settings/storage.tsx
+++ b/apps/studio/pages/project/[ref]/settings/storage.tsx
@@ -1,4 +1,4 @@
-import { SettingsLayout } from 'components/layouts'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDescription,
diff --git a/apps/studio/pages/project/[ref]/settings/vault/keys.tsx b/apps/studio/pages/project/[ref]/settings/vault/keys.tsx
index 8f32156876e..068b46426ed 100644
--- a/apps/studio/pages/project/[ref]/settings/vault/keys.tsx
+++ b/apps/studio/pages/project/[ref]/settings/vault/keys.tsx
@@ -1,23 +1,18 @@
 import { useParams } from 'common'
-import { useRouter } from 'next/router'
-import { Tabs, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_, Tabs_Shadcn_ } from 'ui'
 
 import { EncryptionKeysManagement, VaultToggle } from 'components/interfaces/Settings/Vault'
-import { SettingsLayout } from 'components/layouts'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { FormHeader } from 'components/ui/Forms'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import type { NextPageWithLayout } from 'types'
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import Link from 'next/link'
 import VaultNavTabs from 'components/interfaces/Settings/Vault/VaultNavTabs'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
-  ScaffoldColumn,
   ScaffoldContainer,
   ScaffoldDescription,
   ScaffoldHeader,
   ScaffoldTitle,
 } from 'components/layouts/Scaffold'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
+import type { NextPageWithLayout } from 'types'
 
 const VaultSettingsSecrets: NextPageWithLayout = () => {
   const { ref } = useParams()
diff --git a/apps/studio/pages/project/[ref]/settings/vault/secrets.tsx b/apps/studio/pages/project/[ref]/settings/vault/secrets.tsx
index 09e0859c1bb..5adf498d416 100644
--- a/apps/studio/pages/project/[ref]/settings/vault/secrets.tsx
+++ b/apps/studio/pages/project/[ref]/settings/vault/secrets.tsx
@@ -1,19 +1,18 @@
-import { useRouter } from 'next/router'
 import { useParams } from 'common/hooks'
 import { SecretsManagement, VaultToggle } from 'components/interfaces/Settings/Vault'
-import { SettingsLayout } from 'components/layouts'
-import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
-import { FormHeader } from 'components/ui/Forms'
-import ShimmeringLoader from 'components/ui/ShimmeringLoader'
-import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
-import type { NextPageWithLayout } from 'types'
 import VaultNavTabs from 'components/interfaces/Settings/Vault/VaultNavTabs'
+import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import SettingsLayout from 'components/layouts/ProjectSettingsLayout/SettingsLayout'
 import {
   ScaffoldContainer,
   ScaffoldDescription,
   ScaffoldHeader,
   ScaffoldTitle,
 } from 'components/layouts/Scaffold'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
+import { useRouter } from 'next/router'
+import type { NextPageWithLayout } from 'types'
 
 const VaultSettingsSecrets: NextPageWithLayout = () => {
   const router = useRouter()
diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx
index 0c56b6b5f3a..51601123c7b 100644
--- a/apps/studio/pages/project/[ref]/sql/[id].tsx
+++ b/apps/studio/pages/project/[ref]/sql/[id].tsx
@@ -11,8 +11,8 @@ import { useFormatQueryMutation } from 'data/sql/format-sql-query'
 import type { NextPageWithLayout } from 'types'
 
 import SQLEditor from 'components/interfaces/SQLEditor/SQLEditor'
-import { SQLEditorLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout'
 import getPgsqlCompletionProvider from 'components/ui/CodeEditor/Providers/PgSQLCompletionProvider'
 import getPgsqlSignatureHelpProvider from 'components/ui/CodeEditor/Providers/PgSQLSignatureHelpProvider'
 import { useLocalStorageQuery } from 'hooks'
diff --git a/apps/studio/pages/project/[ref]/sql/quickstarts.tsx b/apps/studio/pages/project/[ref]/sql/quickstarts.tsx
index 6093c3ea117..17d1071ce34 100644
--- a/apps/studio/pages/project/[ref]/sql/quickstarts.tsx
+++ b/apps/studio/pages/project/[ref]/sql/quickstarts.tsx
@@ -1,5 +1,5 @@
 import SQLQuickstarts from 'components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts'
-import { SQLEditorLayout } from 'components/layouts'
+import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout'
 import type { NextPageWithLayout } from 'types'
 
 const SqlEditorWelcome: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/sql/templates.tsx b/apps/studio/pages/project/[ref]/sql/templates.tsx
index 6e47c021f97..c988a373dcc 100644
--- a/apps/studio/pages/project/[ref]/sql/templates.tsx
+++ b/apps/studio/pages/project/[ref]/sql/templates.tsx
@@ -1,5 +1,5 @@
 import SQLTemplates from 'components/interfaces/SQLEditor/SQLTemplates/SQLTemplates'
-import { SQLEditorLayout } from 'components/layouts'
+import SQLEditorLayout from 'components/layouts/SQLEditorLayout/SQLEditorLayout'
 import type { NextPageWithLayout } from 'types'
 
 const SqlEditorWelcome: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx
index 81bf034da0f..89726e6bcea 100644
--- a/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx
+++ b/apps/studio/pages/project/[ref]/storage/buckets/[bucketId].tsx
@@ -1,9 +1,9 @@
 import { useParams } from 'common'
 import { find } from 'lodash'
 
-import { StorageLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import StorageBucketsError from 'components/layouts/StorageLayout/StorageBucketsError'
+import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import { StorageExplorer } from 'components/to-be-cleaned/Storage'
 import { useBucketsQuery } from 'data/storage/buckets-query'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/storage/buckets/index.tsx b/apps/studio/pages/project/[ref]/storage/buckets/index.tsx
index e92ef391bc8..f65bd2b61f5 100644
--- a/apps/studio/pages/project/[ref]/storage/buckets/index.tsx
+++ b/apps/studio/pages/project/[ref]/storage/buckets/index.tsx
@@ -1,8 +1,8 @@
 import { useParams } from 'common'
 
-import { StorageLayout } from 'components/layouts'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import StorageBucketsError from 'components/layouts/StorageLayout/StorageBucketsError'
+import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
 import { useBucketsQuery } from 'data/storage/buckets-query'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/storage/index.tsx b/apps/studio/pages/project/[ref]/storage/index.tsx
index d0c2fcde310..c3d9981ca6a 100644
--- a/apps/studio/pages/project/[ref]/storage/index.tsx
+++ b/apps/studio/pages/project/[ref]/storage/index.tsx
@@ -1,4 +1,4 @@
-import { StorageLayout } from 'components/layouts'
+import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import type { NextPageWithLayout } from 'types'
 
 const Storage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/storage/policies.tsx b/apps/studio/pages/project/[ref]/storage/policies.tsx
index f0cbe7b0b8d..18200a699cd 100644
--- a/apps/studio/pages/project/[ref]/storage/policies.tsx
+++ b/apps/studio/pages/project/[ref]/storage/policies.tsx
@@ -1,4 +1,4 @@
-import { StorageLayout } from 'components/layouts'
+import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import { StoragePolicies } from 'components/to-be-cleaned/Storage'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/projects.tsx b/apps/studio/pages/projects.tsx
index 9a2fc5231f0..8ad7e95740e 100644
--- a/apps/studio/pages/projects.tsx
+++ b/apps/studio/pages/projects.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 
 import { ProjectList } from 'components/interfaces/Home/ProjectList'
 import HomePageActions from 'components/interfaces/HomePageActions'
-import { AccountLayout } from 'components/layouts'
+import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AlertError from 'components/ui/AlertError'
 import { Loading } from 'components/ui/Loading'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
diff --git a/apps/studio/pages/reset-password.tsx b/apps/studio/pages/reset-password.tsx
index 0b853754bf2..c2f1e844cd8 100644
--- a/apps/studio/pages/reset-password.tsx
+++ b/apps/studio/pages/reset-password.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 
 import ResetPasswordForm from 'components/interfaces/SignIn/ResetPasswordForm'
-import { ForgotPasswordLayout } from 'components/layouts'
+import ForgotPasswordLayout from 'components/layouts/SignInLayout/ForgotPasswordLayout'
 import { withAuth } from 'hooks'
 import type { NextPageWithLayout } from 'types'
 
diff --git a/apps/studio/pages/sign-in-mfa.tsx b/apps/studio/pages/sign-in-mfa.tsx
index 1eeb20fe3be..24119139720 100644
--- a/apps/studio/pages/sign-in-mfa.tsx
+++ b/apps/studio/pages/sign-in-mfa.tsx
@@ -5,7 +5,7 @@ import toast from 'react-hot-toast'
 
 import { useTelemetryProps } from 'common'
 import SignInMfaForm from 'components/interfaces/SignIn/SignInMfaForm'
-import { SignInLayout } from 'components/layouts'
+import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
 import { Loading } from 'components/ui/Loading'
 import { auth, buildPathWithParams, getAccessToken, getReturnToPath } from 'lib/gotrue'
 import Telemetry from 'lib/telemetry'
diff --git a/apps/studio/pages/sign-in-sso.tsx b/apps/studio/pages/sign-in-sso.tsx
index 348d36f5ba7..0834e4e9816 100644
--- a/apps/studio/pages/sign-in-sso.tsx
+++ b/apps/studio/pages/sign-in-sso.tsx
@@ -1,5 +1,5 @@
 import SignInSSOForm from 'components/interfaces/SignIn/SignInSSOForm'
-import { SignInLayout } from 'components/layouts'
+import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
 import type { NextPageWithLayout } from 'types'
 
 const SignInSSOPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/sign-in.tsx b/apps/studio/pages/sign-in.tsx
index 0a916583964..817e5161bcc 100644
--- a/apps/studio/pages/sign-in.tsx
+++ b/apps/studio/pages/sign-in.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react'
 
 import SignInForm from 'components/interfaces/SignIn/SignInForm'
 import SignInWithGitHub from 'components/interfaces/SignIn/SignInWithGitHub'
-import { SignInLayout } from 'components/layouts'
+import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
 import { IS_PLATFORM } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
 import { Button } from 'ui'
diff --git a/apps/studio/pages/sign-up.tsx b/apps/studio/pages/sign-up.tsx
index 4dc6e50ad33..d504428593f 100644
--- a/apps/studio/pages/sign-up.tsx
+++ b/apps/studio/pages/sign-up.tsx
@@ -1,6 +1,6 @@
 import SignInWithGitHub from 'components/interfaces/SignIn/SignInWithGitHub'
 import SignUpForm from 'components/interfaces/SignIn/SignUpForm'
-import { SignInLayout } from 'components/layouts'
+import SignInLayout from 'components/layouts/SignInLayout/SignInLayout'
 import Link from 'next/link'
 import type { NextPageWithLayout } from 'types'