diff --git a/apps/design-system/app/fonts/CustomFont-Black.woff2 b/apps/design-system/app/fonts/CustomFont-Black.woff2
new file mode 100644
index 0000000000000..e3c834e57f291
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-Black.woff2 differ
diff --git a/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2
new file mode 100644
index 0000000000000..f84036283ec2e
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2 differ
diff --git a/apps/design-system/app/fonts/CustomFont-Bold.woff2 b/apps/design-system/app/fonts/CustomFont-Bold.woff2
new file mode 100644
index 0000000000000..5e7af459481a0
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-Bold.woff2 differ
diff --git a/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2
new file mode 100644
index 0000000000000..ac0edd55fd3f3
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2 differ
diff --git a/apps/design-system/app/fonts/CustomFont-Book.woff2 b/apps/design-system/app/fonts/CustomFont-Book.woff2
new file mode 100644
index 0000000000000..abd31f7ec272f
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-Book.woff2 differ
diff --git a/apps/design-system/app/fonts/CustomFont-BookItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BookItalic.woff2
new file mode 100644
index 0000000000000..d326c8672ccc6
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-BookItalic.woff2 differ
diff --git a/apps/design-system/app/fonts/CustomFont-Medium.woff2 b/apps/design-system/app/fonts/CustomFont-Medium.woff2
new file mode 100644
index 0000000000000..c07131ddec93a
Binary files /dev/null and b/apps/design-system/app/fonts/CustomFont-Medium.woff2 differ
diff --git a/apps/design-system/app/fonts/index.ts b/apps/design-system/app/fonts/index.ts
new file mode 100644
index 0000000000000..272cd5acd2d60
--- /dev/null
+++ b/apps/design-system/app/fonts/index.ts
@@ -0,0 +1,53 @@
+import { Source_Code_Pro } from 'next/font/google'
+import localFont from 'next/font/local'
+
+export const customFont = localFont({
+  variable: '--font-custom',
+  display: 'swap',
+  fallback: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  src: [
+    {
+      path: './CustomFont-Book.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BookItalic.woff2',
+      weight: '400',
+      style: 'italic',
+    },
+    {
+      path: './CustomFont-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BoldItalic.woff2',
+      weight: '700',
+      style: 'italic',
+    },
+    {
+      path: './CustomFont-Black.woff2',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: './CustomFont-BlackItalic.woff2',
+      weight: '800',
+      style: 'italic',
+    },
+  ],
+})
+
+export const sourceCodePro = Source_Code_Pro({
+  subsets: ['latin'],
+  fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+  variable: '--font-source-code-pro',
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+})
diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
index c3fa53e49cea7..9c005db6ae40f 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -1,10 +1,10 @@
 import '@/styles/globals.css'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import { ThemeProvider } from './Providers'
 import { SonnerToaster } from './SonnerToast'
+import { customFont, sourceCodePro } from './fonts'
 
-const inter = Inter({ subsets: ['latin'] })
+const className = `${customFont.variable} ${sourceCodePro.variable}`
 
 export const metadata: Metadata = {
   title: 'Supabase Design System',
@@ -17,9 +17,16 @@ interface RootLayoutProps {
 
 export default async function Layout({ children }: RootLayoutProps) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <head />
-      <body className={inter.className}>
+    <html lang="en" suppressHydrationWarning className={className}>
+      <head>
+        {/* [Danny]: This has to be an inline style tag here and not a separate component due to next/font */}
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `:root{--font-custom:${customFont.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
+          }}
+        />
+      </head>
+      <body>
         <ThemeProvider
           themes={['dark', 'light', 'classic-dark']}
           defaultTheme="system"
diff --git a/apps/studio/components/grid/components/grid/ColumnHeader.tsx b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
index 0422ee2919abe..8ece4b63e4684 100644
--- a/apps/studio/components/grid/components/grid/ColumnHeader.tsx
+++ b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -8,7 +8,7 @@ import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constan
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
 import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import type { ColumnHeaderProps, ColumnType, DragItem, GridForeignKey } from '../../types'
-import { ColumnMenu } from '../menu'
+import { ColumnMenu } from '../menu/ColumnMenu'
 
 export function ColumnHeader<R>({
   column,
diff --git a/apps/studio/components/grid/components/menu/ColumnMenu.tsx b/apps/studio/components/grid/components/menu/ColumnMenu.tsx
index 10e3bc140abdd..aadeae9e4b75f 100644
--- a/apps/studio/components/grid/components/menu/ColumnMenu.tsx
+++ b/apps/studio/components/grid/components/menu/ColumnMenu.tsx
@@ -23,7 +23,7 @@ interface ColumnMenuProps {
   isEncrypted?: boolean
 }
 
-const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
+export const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
   const tableEditorSnap = useTableEditorStateSnapshot()
   const snap = useTableEditorTableStateSnapshot()
   const { sorts, addOrUpdateSort, removeSort } = useTableSort()
@@ -163,5 +163,3 @@ const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => {
     </>
   )
 }
-
-export default ColumnMenu
diff --git a/apps/studio/components/grid/components/menu/index.ts b/apps/studio/components/grid/components/menu/index.ts
deleted file mode 100644
index a09f947f19c04..0000000000000
--- a/apps/studio/components/grid/components/menu/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ColumnMenu } from './ColumnMenu'
diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx
index ed3870e3a3cff..35a1ed4e3a6c4 100644
--- a/apps/studio/components/interfaces/Account/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx
@@ -3,7 +3,7 @@ import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 
 import { useDebounce } from '@uidotdev/usehooks'
-import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
+import { LogDetailsPanel } from 'components/interfaces/AuditLogs/LogDetailsPanel'
 import Table from 'components/to-be-cleaned/Table'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
@@ -17,7 +17,7 @@ import { Button } from 'ui'
 import { TimestampInfo } from 'ui-patterns'
 import { LogsDatePicker } from '../Settings/Logs/Logs.DatePickers'
 
-const AuditLogs = () => {
+export const AuditLogs = () => {
   const currentTime = dayjs().utc().set('millisecond', 0)
 
   const [search, setSearch] = useState('')
@@ -294,5 +294,3 @@ const AuditLogs = () => {
     </>
   )
 }
-
-export default AuditLogs
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
index 3e586cf972d21..a8907fa8b35fc 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountConnections.tsx
@@ -1,4 +1,3 @@
-import { Github } from 'lucide-react'
 import Image from 'next/image'
 
 import Panel from 'components/ui/Panel'
@@ -8,7 +7,7 @@ import { openInstallGitHubIntegrationWindow } from 'lib/github'
 import { Badge, Button, cn } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 
-const AccountConnections = () => {
+export const AccountConnections = () => {
   const {
     data: gitHubAuthorization,
     isLoading,
@@ -78,5 +77,3 @@ const AccountConnections = () => {
     </Panel>
   )
 }
-
-export { AccountConnections }
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
index f59a807f1de17..645005bd0ff0e 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -10,7 +10,7 @@ import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } f
 import { AddNewFactorModal } from './AddNewFactorModal'
 import DeleteFactorModal from './DeleteFactorModal'
 
-const TOTPFactors = () => {
+export const TOTPFactors = () => {
   const [isAddNewFactorOpen, setIsAddNewFactorOpen] = useState(false)
   const [factorToBeDeleted, setFactorToBeDeleted] = useState<string | null>(null)
   const { data, isLoading, isError, isSuccess, error } = useMfaListFactorsQuery()
@@ -88,5 +88,3 @@ const TOTPFactors = () => {
     </>
   )
 }
-
-export default TOTPFactors
diff --git a/apps/studio/components/interfaces/Account/index.ts b/apps/studio/components/interfaces/Account/index.ts
deleted file mode 100644
index 2c43c63c56c8d..0000000000000
--- a/apps/studio/components/interfaces/Account/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as AuditLogs } from './AuditLogs'
-export { default as TOTPFactors } from './TOTPFactors'
diff --git a/apps/studio/components/interfaces/App/AppBannerWrapper.tsx b/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
index def1fe75b8800..2e29ae301fbe5 100644
--- a/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
+++ b/apps/studio/components/interfaces/App/AppBannerWrapper.tsx
@@ -6,7 +6,7 @@ import IncidentBanner from 'components/layouts/AppLayout/IncidentBanner'
 import { NoticeBanner } from 'components/layouts/AppLayout/NoticeBanner'
 import { OrganizationResourceBanner } from '../Organization/HeaderBanner'
 
-const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
+export const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
   const ongoingIncident = useFlag('ongoingIncident')
   const showNoticeBanner = useFlag('showNoticeBanner')
   const clockSkewBanner = useFlag('clockSkewBanner')
@@ -23,5 +23,3 @@ const AppBannerWrapper = ({ children }: PropsWithChildren<{}>) => {
     </div>
   )
 }
-
-export default AppBannerWrapper
diff --git a/apps/studio/components/interfaces/App/CommandMenu/Support.tsx b/apps/studio/components/interfaces/App/CommandMenu/Support.tsx
index d391af5edc0b2..3c89bf64231c6 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/Support.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/Support.tsx
@@ -1,4 +1,4 @@
-import { LifeBuoy, Activity } from 'lucide-react'
+import { Activity, LifeBuoy } from 'lucide-react'
 import { useMemo } from 'react'
 
 import { IS_PLATFORM } from 'common'
@@ -6,7 +6,7 @@ import type { ICommand } from 'ui-patterns/CommandMenu'
 import { useRegisterCommands } from 'ui-patterns/CommandMenu'
 import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
 
-const useSupportCommands = () => {
+export const useSupportCommands = () => {
   const commands = useMemo(
     () =>
       [
@@ -37,5 +37,3 @@ const useSupportCommands = () => {
 
   useRegisterCommands(COMMAND_MENU_SECTIONS.SUPPORT, commands, { enabled: IS_PLATFORM })
 }
-
-export { useSupportCommands }
diff --git a/apps/studio/components/interfaces/App/CommandMenu/index.tsx b/apps/studio/components/interfaces/App/CommandMenu/index.tsx
index 1bcc911aac27e..076af0e9d89f1 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/index.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/index.tsx
@@ -4,9 +4,7 @@ import { useCommandMenuInitiated } from 'ui-patterns/CommandMenu'
 
 const LazyCommandMenu = dynamic(() => import('./CommandMenu'), { ssr: false })
 
-const StudioCommandMenu = () => {
+export const StudioCommandMenu = () => {
   const isInitiated = useCommandMenuInitiated()
   return isInitiated && <LazyCommandMenu />
 }
-
-export { StudioCommandMenu }
diff --git a/apps/studio/components/interfaces/App/index.ts b/apps/studio/components/interfaces/App/index.ts
deleted file mode 100644
index f5431fbc63b12..0000000000000
--- a/apps/studio/components/interfaces/App/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as AppBannerWrapper } from './AppBannerWrapper'
-export { RouteValidationWrapper } from './RouteValidationWrapper'
diff --git a/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx b/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx
index 7d6ab105e1616..edca0dd6c4530 100644
--- a/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx
+++ b/apps/studio/components/interfaces/AuditLogs/LogDetailsPanel.tsx
@@ -9,7 +9,7 @@ export interface LogDetailsPanelProps {
   onClose: () => void
 }
 
-const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
+export const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
   return (
     <SidePanel
       size="large"
@@ -82,5 +82,3 @@ const LogDetailsPanel = ({ selectedLog, onClose }: LogDetailsPanelProps) => {
     </SidePanel>
   )
 }
-
-export default LogDetailsPanel
diff --git a/apps/studio/components/interfaces/AuditLogs/index.ts b/apps/studio/components/interfaces/AuditLogs/index.ts
deleted file mode 100644
index 25dafb4f07429..0000000000000
--- a/apps/studio/components/interfaces/AuditLogs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as LogDetailsPanel } from './LogDetailsPanel'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
index 5a2094f827948..1bcf6025f7871 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
@@ -6,7 +6,7 @@ interface PolicyNameProps {
   onUpdatePolicyName: (name: string) => void
 }
 
-const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
+export const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNameProps) => {
   return (
     <div className="flex flex-col md:flex-row gap-4 md:gap-12">
       <div className="flex md:w-1/3 flex-col space-y-2">
@@ -30,5 +30,3 @@ const PolicyName = ({ name = '', limit = 100, onUpdatePolicyName }: PolicyNamePr
     </div>
   )
 }
-
-export default PolicyName
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
index f7542d6aa2664..a0ea64c50ce4b 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
@@ -13,7 +13,7 @@ interface PolicyRolesProps {
 }
 type SystemRole = (typeof SYSTEM_ROLES)[number]
 
-const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => {
+export const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps) => {
   const { data: project } = useSelectedProjectQuery()
   const { data, error, isLoading, isError, isSuccess } = useDatabaseRolesQuery({
     projectRef: project?.ref,
@@ -57,5 +57,3 @@ const PolicyRoles = ({ selectedRoles, onUpdateSelectedRoles }: PolicyRolesProps)
     </div>
   )
 }
-
-export default PolicyRoles
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
index bb26536bd245a..a1ec84172dcb0 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
@@ -3,11 +3,8 @@ import { Modal } from 'ui'
 import PolicyAllowedOperation from './PolicyAllowedOperation'
 import PolicyDefinition from './PolicyDefinition'
 import PolicyEditorFooter from './PolicyEditorFooter'
-import PolicyName from './PolicyName'
-import PolicyRoles from './PolicyRoles'
-
-// Exposed for StoragePoliciesEditor.js
-export { PolicyName, PolicyRoles }
+import { PolicyName } from './PolicyName'
+import { PolicyRoles } from './PolicyRoles'
 
 interface PolicyEditorProps {
   isNewPolicy: boolean
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index 773b62437f09b..cfc08d0d9f052 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -3,15 +3,24 @@
  *
  * If Elements is on a higher level, we risk losing all form state in case a payment fails.
  */
-
+import { zodResolver } from '@hookform/resolvers/zod'
 import { AddressElement, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
+import type { PaymentMethod } from '@stripe/stripe-js'
 import {
   StripeAddressElementChangeEvent,
   StripeAddressElementOptions,
   type SetupIntent,
 } from '@stripe/stripe-js'
+import { Check, ChevronsUpDown } from 'lucide-react'
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Form } from '@ui/components/shadcn/ui/form'
+import { TAX_IDS } from 'components/interfaces/Organization/BillingSettings/BillingCustomerData/TaxID.constants'
+import type { CustomerAddress, CustomerTaxId } from 'data/organizations/types'
+import { getURL } from 'lib/helpers'
 import {
   Button,
   Checkbox_Shadcn_,
@@ -31,19 +40,7 @@ import {
   PopoverContent_Shadcn_ as PopoverContent,
   PopoverTrigger_Shadcn_ as PopoverTrigger,
 } from 'ui'
-import {
-  TAX_IDS,
-  type TaxId,
-} from '../../../Organization/BillingSettings/BillingCustomerData/TaxID.constants'
-import { z } from 'zod'
-import { useForm } from 'react-hook-form'
-import { Form } from '@ui/components/shadcn/ui/form'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { getURL } from 'lib/helpers'
-import type { CustomerAddress, CustomerTaxId } from 'data/organizations/types'
-import type { PaymentMethod } from '@stripe/stripe-js'
 
 export const BillingCustomerDataSchema = z.object({
   tax_id_type: z.string(),
@@ -76,7 +73,7 @@ export type PaymentMethodElementRef = {
   >
 }
 
-const NewPaymentMethodElement = forwardRef(
+export const NewPaymentMethodElement = forwardRef(
   (
     {
       email,
@@ -367,5 +364,3 @@ const NewPaymentMethodElement = forwardRef(
 )
 
 NewPaymentMethodElement.displayName = 'NewPaymentMethodElement'
-
-export { NewPaymentMethodElement }
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
index daf855d7baa93..70449d706c430 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings.tsx
@@ -11,7 +11,7 @@ interface CPUWarningsProps {
   severity?: 'warning' | 'critical' | null
 }
 
-const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) => {
+export const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) => {
   if (severity === 'warning') {
     return (
       <Alert_Shadcn_ variant="warning">
@@ -62,5 +62,3 @@ const CPUWarnings = ({ isFreePlan, upgradeUrl, severity }: CPUWarningsProps) =>
 
   return null
 }
-
-export default CPUWarnings
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
index 7fda2bb1e390c..000e1b9257302 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
@@ -12,7 +12,7 @@ interface DiskIOBandwidthWarningsProps {
   highestIoBudgetConsumption: number
 }
 
-const DiskIOBandwidthWarnings = ({
+export const DiskIOBandwidthWarnings = ({
   isFreePlan,
   hasLatest,
   currentBillingCycleSelected,
@@ -116,5 +116,3 @@ const DiskIOBandwidthWarnings = ({
 
   return null
 }
-
-export default DiskIOBandwidthWarnings
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
index 56bab91fae16e..d2099e53b2036 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings.tsx
@@ -11,7 +11,7 @@ interface RAMWarningsProps {
   severity?: 'warning' | 'critical' | null
 }
 
-const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) => {
+export const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) => {
   if (severity === 'warning') {
     return (
       <Alert_Shadcn_ variant="warning">
@@ -62,5 +62,3 @@ const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsProps) =>
 
   return null
 }
-
-export default RAMWarnings
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/index.ts b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/index.ts
deleted file mode 100644
index 37d339b8dc31b..0000000000000
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as CPUWarnings } from './CPUWarnings'
-export { default as DiskIOBandwidthWarnings } from './DiskIOBandwidthWarnings'
-export { default as RAMWarnings } from './RAMWarnings'
diff --git a/apps/studio/components/interfaces/Connect/ConnectTabs.tsx b/apps/studio/components/interfaces/Connect/ConnectTabs.tsx
index 1443c7abfbe7b..849894ddae497 100644
--- a/apps/studio/components/interfaces/Connect/ConnectTabs.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectTabs.tsx
@@ -20,7 +20,7 @@ interface ConnectTabContentProps {
   children: ReactNode
   value: string
 }
-const ConnectTabs = ({ children, value, onValueChange }: ConnectFileTabProps) => {
+export const ConnectTabs = ({ children, value, onValueChange }: ConnectFileTabProps) => {
   const firstChild = children[0]
 
   const defaultValue = isValidElement(firstChild)
@@ -34,7 +34,7 @@ const ConnectTabs = ({ children, value, onValueChange }: ConnectFileTabProps) =>
   )
 }
 
-const ConnectTabTrigger = ({ value }: ConnectTabTriggerProps) => {
+export const ConnectTabTrigger = ({ value }: ConnectTabTriggerProps) => {
   return (
     <TabsTrigger_Shadcn_
       value={value}
@@ -46,7 +46,7 @@ const ConnectTabTrigger = ({ value }: ConnectTabTriggerProps) => {
   )
 }
 
-const ConnectTabTriggers = ({ children }: ConnectTabTriggersProps) => {
+export const ConnectTabTriggers = ({ children }: ConnectTabTriggersProps) => {
   return (
     <TabsList_Shadcn_ className="bg-surface-100 px-5 rounded-lg rounded-b-none gap-5">
       {children}
@@ -61,5 +61,3 @@ export const ConnectTabContent = ({ value, children }: ConnectTabContentProps) =
     </TabsContent_Shadcn_>
   )
 }
-
-export { ConnectTabs, ConnectTabTrigger, ConnectTabTriggers }
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
index 230d433b40879..e913babcfe024 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -17,7 +17,7 @@ import { BackupItem } from './BackupItem'
 import { BackupsEmpty } from './BackupsEmpty'
 import { BackupsStorageAlert } from './BackupsStorageAlert'
 
-const BackupsList = () => {
+export const BackupsList = () => {
   const router = useRouter()
   const { ref: projectRef } = useParams()
   const [selectedBackup, setSelectedBackup] = useState<DatabaseBackup>()
@@ -120,5 +120,3 @@ const BackupsList = () => {
     </>
   )
 }
-
-export default BackupsList
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
index 05b8faf99466d..3231a0e098314 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRNotice.tsx
@@ -9,7 +9,7 @@ import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { getPITRRetentionDuration } from './PITR.utils'
 
-const PITRNotice = ({}) => {
+export const PITRNotice = () => {
   const { ref: projectRef } = useParams()
   const { data: addonsResponse } = useProjectAddonsQuery({ projectRef })
   const retentionPeriod = getPITRRetentionDuration(addonsResponse?.selected_addons ?? [])
@@ -63,5 +63,3 @@ const PITRNotice = ({}) => {
     </FormPanel>
   )
 }
-
-export default PITRNotice
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
index e0dd4198352ee..2d2ad64b03163 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRSelection.tsx
@@ -24,7 +24,7 @@ import { getClientTimezone } from './PITR.utils'
 import PITRStatus from './PITRStatus'
 import { PITRForm } from './pitr-form'
 
-const PITRSelection = () => {
+export const PITRSelection = () => {
   const router = useRouter()
   const { ref } = useParams()
 
@@ -187,5 +187,3 @@ const PITRSelection = () => {
     </>
   )
 }
-
-export default PITRSelection
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/index.ts b/apps/studio/components/interfaces/Database/Backups/PITR/index.ts
deleted file mode 100644
index 44f7453d8fa20..0000000000000
--- a/apps/studio/components/interfaces/Database/Backups/PITR/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as PITRNotice } from './PITRNotice'
-export { default as PITRSelection } from './PITRSelection'
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
index 9cbb12638b136..244abee78fb30 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
@@ -32,7 +32,7 @@ import CreateEnumeratedTypeSidePanel from './CreateEnumeratedTypeSidePanel'
 import DeleteEnumeratedTypeModal from './DeleteEnumeratedTypeModal'
 import EditEnumeratedTypeSidePanel from './EditEnumeratedTypeSidePanel'
 
-const EnumeratedTypes = () => {
+export const EnumeratedTypes = () => {
   const { data: project } = useSelectedProjectQuery()
   const [search, setSearch] = useState('')
   const { selectedSchema, setSelectedSchema } = useQuerySchemaState()
@@ -195,5 +195,3 @@ const EnumeratedTypes = () => {
     </div>
   )
 }
-
-export default EnumeratedTypes
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index f494e11ca3870..a52e5f3089899 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -69,7 +69,12 @@ const FormSchema = z.object({
     .optional(),
 })
 
-const CreateFunction = ({ func, visible, isDuplicating = false, onClose }: CreateFunctionProps) => {
+export const CreateFunction = ({
+  func,
+  visible,
+  isDuplicating = false,
+  onClose,
+}: CreateFunctionProps) => {
   const { data: project } = useSelectedProjectQuery()
   const [isClosingPanel, setIsClosingPanel] = useState(false)
   const [advancedSettingsShown, setAdvancedSettingsShown] = useState(false)
@@ -416,8 +421,6 @@ const CreateFunction = ({ func, visible, isDuplicating = false, onClose }: Creat
   )
 }
 
-export default CreateFunction
-
 interface FormFieldConfigParamsProps {
   readonly?: boolean
 }
diff --git a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
index 7d674b0a3fbd9..5bae47e0cb6a7 100644
--- a/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/DeleteFunction.tsx
@@ -11,7 +11,7 @@ interface DeleteFunctionProps {
   setVisible: (value: boolean) => void
 }
 
-const DeleteFunction = ({ func, visible, setVisible }: DeleteFunctionProps) => {
+export const DeleteFunction = ({ func, visible, setVisible }: DeleteFunctionProps) => {
   const { data: project } = useSelectedProjectQuery()
   const { name, schema } = func ?? {}
 
@@ -57,5 +57,3 @@ const DeleteFunction = ({ func, visible, setVisible }: DeleteFunctionProps) => {
     </>
   )
 }
-
-export default DeleteFunction
diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
index f18ec8b90647e..dfededaea12b1 100644
--- a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
+++ b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
@@ -19,7 +19,7 @@ import { SUPABASE_ROLES } from './Roles.constants'
 
 type SUPABASE_ROLE = (typeof SUPABASE_ROLES)[number]
 
-const RolesList = () => {
+export const RolesList = () => {
   const { data: project } = useSelectedProjectQuery()
 
   const [filterString, setFilterString] = useState('')
@@ -219,5 +219,3 @@ const RolesList = () => {
     </>
   )
 }
-
-export default RolesList
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
index 5c354a6d784f2..cb80338d86edd 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
@@ -6,8 +6,8 @@ import { Handle, NodeProps } from 'reactflow'
 import { Button, cn } from 'ui'
 
 // ReactFlow is scaling everything by the factor of 2
-const TABLE_NODE_WIDTH = 320
-const TABLE_NODE_ROW_HEIGHT = 40
+export const TABLE_NODE_WIDTH = 320
+export const TABLE_NODE_ROW_HEIGHT = 40
 
 export type TableNodeData = {
   id?: number
@@ -25,7 +25,7 @@ export type TableNodeData = {
   }[]
 }
 
-const TableNode = ({
+export const TableNode = ({
   data,
   targetPosition,
   sourcePosition,
@@ -155,5 +155,3 @@ const TableNode = ({
     </>
   )
 }
-
-export { TABLE_NODE_ROW_HEIGHT, TABLE_NODE_WIDTH, TableNode }
diff --git a/apps/studio/components/interfaces/Database/index.ts b/apps/studio/components/interfaces/Database/index.ts
deleted file mode 100644
index 372316bfb5bc9..0000000000000
--- a/apps/studio/components/interfaces/Database/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { default as RolesList } from './Roles/RolesList'
-
-export { default as BackupsList } from './Backups/BackupsList'
-
-export { default as CreateFunction } from './Functions/CreateFunction'
-export { default as DeleteFunction } from './Functions/DeleteFunction'
-
-export { default as EnumeratedTypes } from './EnumeratedTypes/EnumeratedTypes'
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx
index 755b165feb0ba..f64d8a2d42511 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/BillingChangeBadge.tsx
@@ -13,7 +13,7 @@ interface BillingChangeBadgeProps {
   free?: boolean
 }
 
-const BillingChangeBadge = ({
+export const BillingChangeBadge = ({
   beforePrice,
   afterPrice,
   show,
@@ -67,5 +67,3 @@ const BillingChangeBadge = ({
     </AnimatePresence>
   )
 }
-
-export { BillingChangeBadge }
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx b/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx
index 3833b286a7330..e73c3c83bc0ff 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/InputResetButton.tsx
@@ -3,7 +3,7 @@ import { RotateCcw } from 'lucide-react'
 
 import { Button } from 'ui'
 
-function InputResetButton({ isDirty, onClick }: { isDirty: boolean; onClick: () => void }) {
+export function InputResetButton({ isDirty, onClick }: { isDirty: boolean; onClick: () => void }) {
   return (
     <AnimatePresence initial={false}>
       {isDirty && (
@@ -28,5 +28,3 @@ function InputResetButton({ isDirty, onClick }: { isDirty: boolean; onClick: ()
     </AnimatePresence>
   )
 }
-
-export { InputResetButton }
diff --git a/apps/studio/components/interfaces/Home/ClientLibrary.tsx b/apps/studio/components/interfaces/Home/ClientLibrary.tsx
index cb2d14d4515de..9dd0387b50fea 100644
--- a/apps/studio/components/interfaces/Home/ClientLibrary.tsx
+++ b/apps/studio/components/interfaces/Home/ClientLibrary.tsx
@@ -1,7 +1,7 @@
-import { Badge, Button } from 'ui'
+import { BookOpen, Github } from 'lucide-react'
 
 import { BASE_PATH } from 'lib/constants'
-import { BookOpen, Github } from 'lucide-react'
+import { Badge, Button } from 'ui'
 
 interface ClientLibraryProps {
   language: string
@@ -11,7 +11,7 @@ interface ClientLibraryProps {
   altIconName?: string
 }
 
-const ClientLibrary = ({
+export const ClientLibrary = ({
   language,
   officialSupport,
   docsUrl,
@@ -62,5 +62,3 @@ const ClientLibrary = ({
     </div>
   )
 }
-
-export default ClientLibrary
diff --git a/apps/studio/components/interfaces/Home/Home.tsx b/apps/studio/components/interfaces/Home/Home.tsx
index 3825f4bf1ffb4..fc24055f47dd7 100644
--- a/apps/studio/components/interfaces/Home/Home.tsx
+++ b/apps/studio/components/interfaces/Home/Home.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link'
 import { useEffect, useRef } from 'react'
 
 import { useParams } from 'common'
-import { ClientLibrary } from 'components/interfaces/Home'
 import { AdvisorWidget } from 'components/interfaces/Home/AdvisorWidget'
+import { ClientLibrary } from 'components/interfaces/Home/ClientLibrary'
 import { ExampleProject } from 'components/interfaces/Home/ExampleProject'
 import { EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import { NewProjectPanel } from 'components/interfaces/Home/NewProjectPanel/NewProjectPanel'
diff --git a/apps/studio/components/interfaces/Home/index.ts b/apps/studio/components/interfaces/Home/index.ts
deleted file mode 100644
index 708725f92ed4e..0000000000000
--- a/apps/studio/components/interfaces/Home/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ClientLibrary } from './ClientLibrary'
diff --git a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
index f7016dc936b15..06c75bcbf8d1a 100644
--- a/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
+++ b/apps/studio/components/interfaces/Integrations/VercelGithub/IntegrationConnection.tsx
@@ -28,7 +28,7 @@ interface IntegrationConnectionItemProps extends IntegrationConnectionProps {
   onDeleteConnection: (connection: IntegrationProjectConnection) => void | Promise<void>
 }
 
-const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectionItemProps>(
+export const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectionItemProps>(
   ({ disabled, onDeleteConnection, ...props }, ref) => {
     const router = useRouter()
     const { data: org } = useSelectedOrganizationQuery()
@@ -165,5 +165,3 @@ const IntegrationConnectionItem = forwardRef<HTMLLIElement, IntegrationConnectio
 )
 
 IntegrationConnectionItem.displayName = 'IntegrationConnectionItem'
-
-export { IntegrationConnectionItem }
diff --git a/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx b/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
index 8601f60fafc03..6a053c7218200 100644
--- a/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
+++ b/apps/studio/components/interfaces/Linter/LinterPageFooter.tsx
@@ -12,7 +12,7 @@ interface LinterPageFooterProps {
   hideDbInspectCTA?: boolean
 }
 
-const LinterPageFooter = ({
+export const LinterPageFooter = ({
   isLoading,
   isRefetching,
   refetch,
@@ -84,5 +84,3 @@ const LinterPageFooter = ({
     </div>
   )
 }
-
-export { LinterPageFooter }
diff --git a/apps/studio/components/interfaces/Markdown.tsx b/apps/studio/components/interfaces/Markdown.tsx
index e7fa914e363bc..2563c35d79a8c 100644
--- a/apps/studio/components/interfaces/Markdown.tsx
+++ b/apps/studio/components/interfaces/Markdown.tsx
@@ -10,7 +10,7 @@ interface Props extends Omit<ReactMarkdownOptions, 'children' | 'node'> {
   extLinks?: boolean
 }
 
-const Markdown = ({ className, content = '', extLinks = false, ...props }: Props) => {
+export const Markdown = ({ className, content = '', extLinks = false, ...props }: Props) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
@@ -25,5 +25,3 @@ const Markdown = ({ className, content = '', extLinks = false, ...props }: Props
     </ReactMarkdown>
   )
 }
-
-export { Markdown }
diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index a6e644ce8b821..cd8e2dd3df8ac 100644
--- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -1,12 +1,12 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useDebounce } from '@uidotdev/usehooks'
 import { useParams } from 'common'
 import dayjs from 'dayjs'
 import { ArrowDown, ArrowUp, RefreshCw, User } from 'lucide-react'
 import Image from 'next/legacy/image'
 import { useEffect, useMemo, useState } from 'react'
 
-import { useDebounce } from '@uidotdev/usehooks'
-import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
+import { LogDetailsPanel } from 'components/interfaces/AuditLogs/LogDetailsPanel'
 import { LogsDatePicker } from 'components/interfaces/Settings/Logs/Logs.DatePickers'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
 import Table from 'components/to-be-cleaned/Table'
diff --git a/apps/studio/components/interfaces/Settings/Database/index.ts b/apps/studio/components/interfaces/Settings/Database/index.ts
deleted file mode 100644
index 94970d9e98532..0000000000000
--- a/apps/studio/components/interfaces/Settings/Database/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ConnectionPooling } from './ConnectionPooling/ConnectionPooling'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
index 04840ec30dfb3..470a376fe7927 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
@@ -6,11 +6,9 @@ import { Fragment, useMemo, useState } from 'react'
 
 import { useParams } from 'common'
 import { getAddons } from 'components/interfaces/Billing/Subscription/Subscription.utils'
-import {
-  CPUWarnings,
-  DiskIOBandwidthWarnings,
-  RAMWarnings,
-} from 'components/interfaces/Billing/Usage/UsageWarningAlerts'
+import { CPUWarnings } from 'components/interfaces/Billing/Usage/UsageWarningAlerts/CPUWarnings'
+import { DiskIOBandwidthWarnings } from 'components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings'
+import { RAMWarnings } from 'components/interfaces/Billing/Usage/UsageWarningAlerts/RAMWarnings'
 import UsageBarChart from 'components/interfaces/Organization/Usage/UsageBarChart'
 import {
   ScaffoldContainer,
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
index 6b200e675f9e6..1e218ae4696de 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
@@ -1,7 +1,8 @@
 import { noop } from 'lodash'
 import { Badge, Button, Checkbox, Modal } from 'ui'
 
-import { PolicyName, PolicyRoles } from 'components/interfaces/Auth/Policies/PolicyEditor'
+import { PolicyName } from 'components/interfaces/Auth/Policies/PolicyEditor/PolicyName'
+import { PolicyRoles } from 'components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles'
 import SqlEditor from 'components/ui/SqlEditor'
 import { DOCS_URL } from 'lib/constants'
 import { STORAGE_CLIENT_LIBRARY_MAPPINGS } from '../Storage.constants'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
index 61f5e76fdc1f3..578680c777c27 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
@@ -62,7 +62,7 @@ export interface SidePanelEditorProps {
   onTableCreated?: (table: RetrieveTableResult) => void
 }
 
-const SidePanelEditor = ({
+export const SidePanelEditor = ({
   editable = true,
   selectedTable,
   includeColumns = false,
@@ -707,5 +707,3 @@ const SidePanelEditor = ({
     </>
   )
 }
-
-export default SidePanelEditor
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index 1b01e98e2af49..8e00a44a60d16 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -24,7 +24,7 @@ import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import { Button } from 'ui'
 import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
 import DeleteConfirmationDialogs from './DeleteConfirmationDialogs'
-import SidePanelEditor from './SidePanelEditor/SidePanelEditor'
+import { SidePanelEditor } from './SidePanelEditor/SidePanelEditor'
 import { TableDefinition } from './TableDefinition'
 
 export interface TableGridEditorProps {
diff --git a/apps/studio/components/interfaces/TableGridEditor/index.ts b/apps/studio/components/interfaces/TableGridEditor/index.ts
deleted file mode 100644
index 52936211e7e82..0000000000000
--- a/apps/studio/components/interfaces/TableGridEditor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SidePanelEditor } from './SidePanelEditor/SidePanelEditor'
diff --git a/apps/studio/components/layouts/AuthenticationLayout.tsx b/apps/studio/components/layouts/AuthenticationLayout.tsx
index 8f1f32dd306dc..6ba3373faca6d 100644
--- a/apps/studio/components/layouts/AuthenticationLayout.tsx
+++ b/apps/studio/components/layouts/AuthenticationLayout.tsx
@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react'
 
-import { AppBannerWrapper } from 'components/interfaces/App'
+import { AppBannerWrapper } from 'components/interfaces/App/AppBannerWrapper'
 import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
 
 export const AuthenticationLayout = ({ children }: PropsWithChildren<{}>) => {
diff --git a/apps/studio/components/layouts/DefaultLayout.tsx b/apps/studio/components/layouts/DefaultLayout.tsx
index 56fa5a9ba8b7e..b72a61f215255 100644
--- a/apps/studio/components/layouts/DefaultLayout.tsx
+++ b/apps/studio/components/layouts/DefaultLayout.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
 import { LOCAL_STORAGE_KEYS, useParams } from 'common'
-import { AppBannerWrapper } from 'components/interfaces/App'
+import { AppBannerWrapper } from 'components/interfaces/App/AppBannerWrapper'
 import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
 import { Sidebar } from 'components/interfaces/Sidebar'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
index 0b6a7975d456d..8ee67ce66ebf8 100644
--- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -2,7 +2,7 @@ import { ArrowRight, Loader2 } from 'lucide-react'
 import Link from 'next/link'
 
 import { useParams } from 'common'
-import ClientLibrary from 'components/interfaces/Home/ClientLibrary'
+import { ClientLibrary } from 'components/interfaces/Home/ClientLibrary'
 import { ExampleProject } from 'components/interfaces/Home/ExampleProject'
 import { EXAMPLE_PROJECTS } from 'components/interfaces/Home/Home.constants'
 import { SupportLink } from 'components/interfaces/Support/SupportLink'
diff --git a/apps/studio/components/ui/States/EmptyListState.tsx b/apps/studio/components/ui/States/EmptyListState.tsx
index 3a422f74ad646..5374a3da1eb68 100644
--- a/apps/studio/components/ui/States/EmptyListState.tsx
+++ b/apps/studio/components/ui/States/EmptyListState.tsx
@@ -1,4 +1,4 @@
-const EmptyListState = ({ title, description }: { title: string; description: string }) => {
+export const EmptyListState = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="flex flex-col items-center justify-center gap-6 text-center">
       <div className="flex flex-col gap-1">
@@ -12,5 +12,3 @@ const EmptyListState = ({ title, description }: { title: string; description: st
     </div>
   )
 }
-
-export { EmptyListState }
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index be50993ffd82e..66ed565b58ece 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -41,13 +41,13 @@ import {
   useThemeSandbox,
 } from 'common'
 import MetaFaviconsPagesRouter from 'common/MetaFavicons/pages-router'
-import { RouteValidationWrapper } from 'components/interfaces/App'
 import { AppBannerContextProvider } from 'components/interfaces/App/AppBannerWrapperContext'
 import { StudioCommandMenu } from 'components/interfaces/App/CommandMenu'
 import { StudioCommandProvider as CommandProvider } from 'components/interfaces/App/CommandMenu/StudioCommandProvider'
 import { FeaturePreviewContextProvider } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import FeaturePreviewModal from 'components/interfaces/App/FeaturePreview/FeaturePreviewModal'
 import { MonacoThemeProvider } from 'components/interfaces/App/MonacoThemeProvider'
+import { RouteValidationWrapper } from 'components/interfaces/App/RouteValidationWrapper'
 import { GlobalErrorBoundaryState } from 'components/ui/ErrorBoundary/GlobalErrorBoundaryState'
 import { useRootQueryClient } from 'data/query-client'
 import { customFont, sourceCodePro } from 'fonts'
diff --git a/apps/studio/pages/account/audit.tsx b/apps/studio/pages/account/audit.tsx
index f3387dcf9aa37..88b8f6b65ff66 100644
--- a/apps/studio/pages/account/audit.tsx
+++ b/apps/studio/pages/account/audit.tsx
@@ -1,4 +1,4 @@
-import { AuditLogs } from 'components/interfaces/Account'
+import { AuditLogs } from 'components/interfaces/Account/AuditLogs'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
diff --git a/apps/studio/pages/account/security.tsx b/apps/studio/pages/account/security.tsx
index 462e603ded9d7..3c7d71d6e1d46 100644
--- a/apps/studio/pages/account/security.tsx
+++ b/apps/studio/pages/account/security.tsx
@@ -1,6 +1,6 @@
 import { Smartphone } from 'lucide-react'
 
-import { TOTPFactors } from 'components/interfaces/Account'
+import { TOTPFactors } from 'components/interfaces/Account/TOTPFactors'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
diff --git a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
index b211f18d66551..b1b03689d2fe6 100644
--- a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -3,7 +3,8 @@ import { AlertCircle } from 'lucide-react'
 
 import { useParams } from 'common'
 import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
-import { PITRNotice, PITRSelection } from 'components/interfaces/Database/Backups/PITR'
+import { PITRNotice } from 'components/interfaces/Database/Backups/PITR/PITRNotice'
+import { PITRSelection } from 'components/interfaces/Database/Backups/PITR/PITRSelection'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
diff --git a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
index 26662ba7b00a4..7df4585c13f12 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 { Info } from 'lucide-react'
 
 import { useParams } from 'common'
-import { BackupsList } from 'components/interfaces/Database'
+import { BackupsList } from 'components/interfaces/Database/Backups/BackupsList'
 import DatabaseBackupsNav from 'components/interfaces/Database/Backups/DatabaseBackupsNav'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
diff --git a/apps/studio/pages/project/[ref]/database/functions.tsx b/apps/studio/pages/project/[ref]/database/functions.tsx
index de1808bf48d45..eb33fa1d6fc53 100644
--- a/apps/studio/pages/project/[ref]/database/functions.tsx
+++ b/apps/studio/pages/project/[ref]/database/functions.tsx
@@ -2,7 +2,8 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useState } from 'react'
 
 import { useIsInlineEditorEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import { CreateFunction, DeleteFunction } from 'components/interfaces/Database'
+import { CreateFunction } from 'components/interfaces/Database/Functions/CreateFunction'
+import { DeleteFunction } from 'components/interfaces/Database/Functions/DeleteFunction'
 import FunctionsList from 'components/interfaces/Database/Functions/FunctionsList/FunctionsList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
diff --git a/apps/studio/pages/project/[ref]/database/roles.tsx b/apps/studio/pages/project/[ref]/database/roles.tsx
index 7c5800dfcbd55..b6c2509a80bc2 100644
--- a/apps/studio/pages/project/[ref]/database/roles.tsx
+++ b/apps/studio/pages/project/[ref]/database/roles.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { RolesList } from 'components/interfaces/Database'
+import { RolesList } from 'components/interfaces/Database/Roles/RolesList'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
diff --git a/apps/studio/pages/project/[ref]/database/settings.tsx b/apps/studio/pages/project/[ref]/database/settings.tsx
index aff7f37700b59..17f046e0a9ffc 100644
--- a/apps/studio/pages/project/[ref]/database/settings.tsx
+++ b/apps/studio/pages/project/[ref]/database/settings.tsx
@@ -1,6 +1,6 @@
 import { DiskManagementPanelForm } from 'components/interfaces/DiskManagement/DiskManagementPanelForm'
-import { ConnectionPooling } from 'components/interfaces/Settings/Database'
 import BannedIPs from 'components/interfaces/Settings/Database/BannedIPs'
+import { ConnectionPooling } from 'components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling'
 import { DatabaseReadOnlyAlert } from 'components/interfaces/Settings/Database/DatabaseReadOnlyAlert'
 import ResetDbPassword from 'components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword'
 import DiskSizeConfiguration from 'components/interfaces/Settings/Database/DiskSizeConfiguration'
diff --git a/apps/studio/pages/project/[ref]/database/tables/[id].tsx b/apps/studio/pages/project/[ref]/database/tables/[id].tsx
index 4aece9c79a706..f3ecee9da00d1 100644
--- a/apps/studio/pages/project/[ref]/database/tables/[id].tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/[id].tsx
@@ -2,8 +2,8 @@ import { ChevronRight } from 'lucide-react'
 
 import { useParams } from 'common'
 import { ColumnList } from 'components/interfaces/Database/Tables/ColumnList'
-import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
 import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
+import { SidePanelEditor } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
diff --git a/apps/studio/pages/project/[ref]/database/tables/index.tsx b/apps/studio/pages/project/[ref]/database/tables/index.tsx
index 9cd2e2d261d6b..c30827cdb0a5a 100644
--- a/apps/studio/pages/project/[ref]/database/tables/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/index.tsx
@@ -3,8 +3,8 @@ import { useState } from 'react'
 
 import { useParams } from 'common'
 import { TableList } from 'components/interfaces/Database/Tables/TableList'
-import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
 import DeleteConfirmationDialogs from 'components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
+import { SidePanelEditor } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
diff --git a/apps/studio/pages/project/[ref]/database/types.tsx b/apps/studio/pages/project/[ref]/database/types.tsx
index 828b43f373d6d..43ce203922efc 100644
--- a/apps/studio/pages/project/[ref]/database/types.tsx
+++ b/apps/studio/pages/project/[ref]/database/types.tsx
@@ -1,18 +1,13 @@
-import { ExternalLink } from 'lucide-react'
-
-import { EnumeratedTypes } from 'components/interfaces/Database'
+import { EnumeratedTypes } from 'components/interfaces/Database/EnumeratedTypes/EnumeratedTypes'
 import DatabaseLayout from 'components/layouts/DatabaseLayout/DatabaseLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import {
   ScaffoldContainer,
   ScaffoldSection,
   ScaffoldSectionContent,
-  ScaffoldSectionDetail,
 } from 'components/layouts/Scaffold'
 import { FormHeader } from 'components/ui/Forms/FormHeader'
 import type { NextPageWithLayout } from 'types'
-import { Button } from 'ui'
-import { DocsButton } from 'components/ui/DocsButton'
 
 const DatabaseEnumeratedTypes: NextPageWithLayout = () => {
   return (
diff --git a/apps/studio/pages/project/[ref]/editor/index.tsx b/apps/studio/pages/project/[ref]/editor/index.tsx
index b6ffc7c364481..04457b5eb74bb 100644
--- a/apps/studio/pages/project/[ref]/editor/index.tsx
+++ b/apps/studio/pages/project/[ref]/editor/index.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 
 import { useParams } from 'common'
 import { LOAD_TAB_FROM_CACHE_PARAM } from 'components/grid/SupabaseGrid.utils'
-import SidePanelEditor from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
+import { SidePanelEditor } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
 import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
diff --git a/apps/studio/pages/project/[ref]/editor/new.tsx b/apps/studio/pages/project/[ref]/editor/new.tsx
index ec76bdc6a4982..16599bf6bf6f5 100644
--- a/apps/studio/pages/project/[ref]/editor/new.tsx
+++ b/apps/studio/pages/project/[ref]/editor/new.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router'
 
 import { useParams } from 'common'
-import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
+import { SidePanelEditor } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
 import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'