diff --git a/apps/docs/content/guides/getting-started/mcp.mdx b/apps/docs/content/guides/getting-started/mcp.mdx
index 181d012da19c1..c1a4e0ba38c45 100644
--- a/apps/docs/content/guides/getting-started/mcp.mdx
+++ b/apps/docs/content/guides/getting-started/mcp.mdx
@@ -241,7 +241,7 @@ We recommend the following best practices to mitigate security risks when using
 
 ## MCP for local Supabase instances
 
-The Supabase MCP server connects directly to the cloud platform to access your database. If you are running a local instance of Supabase, you can instead use the [Postgres MCP server](https://github.com/modelcontextprotocol/servers/tree/main/src/postgres) to connect to your local database. This MCP server runs all queries as read-only transactions.
+The Supabase MCP server connects directly to the cloud platform to access your database. If you are running a local instance of Supabase, you can instead use the [Postgres MCP server](https://github.com/modelcontextprotocol/servers-archived/tree/main/src/postgres) to connect to your local database. This MCP server runs all queries as read-only transactions.
 
 ### Step 1: Find your database connection string
 
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
index 8891ff8dcef66..a36027b46108d 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverPrimitive.tsx
@@ -109,7 +109,7 @@ export const FilterPopoverPrimitive = ({
             ))}
             {localFilters.length == 0 && (
               <div className="space-y-1 px-3">
-                <h5 className="text-sm text-foreground-light">No filters applied to this view</h5>
+                <h5 className="text-foreground-light">No filters applied to this view</h5>
                 <p className="text-xs text-foreground-lighter">
                   Add a column below to filter the view
                 </p>
diff --git a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
index 7cba3696a9675..943f60aaf2584 100644
--- a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
@@ -185,7 +185,7 @@ export const SortPopoverPrimitive = ({
       ))}
       {localSorts.length === 0 && (
         <div className="space-y-1 px-3">
-          <h5 className="text-sm text-foreground-light">No sorts applied to this view</h5>
+          <h5 className="text-foreground-light">No sorts applied to this view</h5>
           <p className="text-xs text-foreground-lighter">Add a column below to sort the view</p>
         </div>
       )}
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
index 3cd49de2d3ca6..06d3619bc9f70 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
@@ -25,7 +25,7 @@ export const SpamValidation = ({ validationResult }: SpamValidationProps) => {
         )}
       </div>
       <div className="flex flex-col gap-2">
-        <h5 className="text-sm">
+        <h5>
           {hasSpamWarning
             ? 'Email has a high probability of being marked as spam - review issues below to improve deliverability.'
             : 'Email content is unlikely to be marked as spam'}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
index 4e41b304bb7d5..795fc57111473 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
+++ b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
@@ -15,7 +15,7 @@ const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
           <div className="my-5 h-full space-y-6 px-6">
             <div className="space-y-2">
               <div className="flex flex-col space-y-2">
-                <h3 className="text-foreground text-base">{templateName}</h3>
+                <h3>{templateName}</h3>
                 <p className="text-foreground-light text-sm">{description}</p>
               </div>
             </div>
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index f8b19680cc0e7..180631cb85bb2 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -122,7 +122,7 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
       size="small"
       header={
         <div className="flex items-baseline gap-2">
-          <h5 className="text-sm text-foreground">Confirm to enable</h5>
+          <h5 className="text-foreground">Confirm to enable</h5>
           <code className="text-xs">{extension.name}</code>
         </div>
       }
diff --git a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
index 50d259eb4e50c..23a45c29043ae 100644
--- a/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
+++ b/apps/studio/components/interfaces/Home/AdvisorWidget.tsx
@@ -81,7 +81,7 @@ export const AdvisorWidget = () => {
   let titleContent: React.ReactNode
 
   if (totalIssues === 0) {
-    titleContent = <h2 className="text-xl">No issues available</h2>
+    titleContent = <h2>No issues available</h2>
   } else {
     const issuesText = totalIssues === 1 ? 'issue' : 'issues'
     const numberDisplay = totalIssues.toString()
@@ -94,7 +94,7 @@ export const AdvisorWidget = () => {
     }
 
     titleContent = (
-      <h2 className="text-xl">
+      <h2>
         {numberDisplay} {issuesText} need
         {totalIssues === 1 ? 's' : ''} <span className={attentionClassName}>attention</span>
       </h2>
diff --git a/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx b/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
index 96bf3c8dc3b26..f500af6880994 100644
--- a/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
+++ b/apps/studio/components/interfaces/Home/NewProjectPanel/NewProjectPanel.tsx
@@ -25,7 +25,7 @@ const NewProjectPanel = () => {
         <div className="flex flex-col space-y-12 md:space-y-20">
           <div className="flex h-full flex-col justify-between">
             <div className="space-y-2">
-              <h3 className="text-xl text-foreground">Welcome to your new project</h3>
+              <h2>Welcome to your new project</h2>
               <p className="text-base text-foreground-light">
                 Your project has been deployed on its own instance, with its own API all set up and
                 ready to use.
@@ -36,9 +36,7 @@ const NewProjectPanel = () => {
           <div className="grid grid-cols-12 gap-4">
             <div className="col-span-12 flex flex-col justify-center space-y-8 lg:col-span-7">
               <div className="space-y-2">
-                <h3 className="text-xl text-foreground">
-                  Get started by building out your database
-                </h3>
+                <h2>Get started by building out your database</h2>
                 <p className="text-base text-foreground-light">
                   Start building your app by creating tables and inserting data. Our Table Editor
                   makes Postgres as easy to use as a spreadsheet, but there's also our SQL Editor if
@@ -71,7 +69,7 @@ const NewProjectPanel = () => {
           {authEnabled && edgeFunctionsEnabled && storageEnabled && (
             <div className="flex h-full flex-col justify-between space-y-6">
               <div className="max-w-2xl space-y-2">
-                <h3 className="text-xl text-foreground">Explore our other products</h3>
+                <h2>Explore our other products</h2>
                 <p className="text-base text-foreground-light">
                   Supabase provides all the backend features you need to build a product. You can
                   use it completely, or just the features you need.
@@ -228,7 +226,7 @@ const NewProjectPanel = () => {
       <div className="col-span-12 lg:col-span-4">
         <div className="space-y-6">
           <div className="space-y-2">
-            <h3 className="text-xl text-foreground">Connecting to your new project</h3>
+            <h2>Connecting to your new project</h2>
             <p className="text-base text-foreground-light lg:max-w-sm">
               Interact with your database through the{' '}
               <Link href="https://supabase.com/docs/reference" className="text-brand">
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
index 790babb0bc911..a7d1b024d3f79 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
@@ -91,11 +91,11 @@ export const GraphiQLTab = () => {
       <div className="flex flex-col items-center justify-center flex-1 px-4">
         <div className="w-full max-w-md">
           <div className="mb-6">
-            <h1 className="mt-8 mb-2 text-2xl">Enable the GraphQL Extension</h1>
-            <h2 className="text-sm text-foreground-light">
+            <h1 className="mt-8 mb-2">Enable the GraphQL Extension</h1>
+            <p className="text-sm text-foreground-light">
               Toggle the switch below to enable the GraphQL extension. You can then use the GraphQL
               API with your Supabase Database.
-            </h2>
+            </p>
           </div>
 
           <ExtensionCard extension={pgGraphqlExtension} />
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
index 52227d9be6a5d..368b1d68388f7 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/index.tsx
@@ -258,7 +258,7 @@ export default function JWTSecretKeysTable() {
 
           <div className="flex flex-col gap-4">
             <div className="flex flex-col gap-2">
-              <h2 className="text-xl">Previously used keys</h2>
+              <h2>Previously used keys</h2>
               <p className="text-sm text-foreground-lighter">
                 These JWT signing keys are still used to{' '}
                 <em className="text-brand not-italic">verify tokens</em> that are yet to expire.
@@ -326,7 +326,7 @@ export default function JWTSecretKeysTable() {
       {revokedKeys.length > 0 && (
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-2">
-            <h2 className="text-xl">Revoked keys</h2>
+            <h2>Revoked keys</h2>
             <p className="text-sm text-foreground-lighter">
               These keys are no longer used to verify or sign JWTs.
             </p>
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index 1b5b6d36e9c18..5bffac5f3cd38 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -8,6 +8,7 @@ import { z } from 'zod'
 import { useParams } from 'common'
 import { LogDrainData, useLogDrainsQuery } from 'data/log-drains/log-drains-query'
 
+import { DocsButton } from 'components/ui/DocsButton'
 import {
   Button,
   Form_Shadcn_,
@@ -38,7 +39,6 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { urlRegex } from '../Auth/Auth.constants'
 import { DATADOG_REGIONS, LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
-import { DocsButton } from 'components/ui/DocsButton'
 
 const FORM_ID = 'log-drain-destination-form'
 
@@ -456,7 +456,7 @@ export function LogDrainDestinationSheetForm({
             <>
               <div className="border-t mt-4">
                 <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
-                  <h2 className="text-sm text-foreground">Custom Headers</h2>
+                  <h2 className="text-sm">Custom Headers</h2>
                   <p className="text-xs text-foreground-lighter">
                     {getHeadersSectionDescription()}
                   </p>
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
index bb5344693d4e7..cfb8a013dfff7 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
@@ -69,7 +69,7 @@ const CreditBalance = () => {
                     <div className="flex items-center space-x-1">
                       {isDebt && <h4 className="opacity-50">-</h4>}
                       <h4 className="opacity-50">$</h4>
-                      <h2 className="text-2xl relative">{balance}</h2>
+                      <h1 className="relative">{balance}</h1>
                       {isCredit && <h4 className="opacity-50">/credits</h4>}
                     </div>
                   </div>
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
index 88892c72e4ba7..cc82d7fc1bfd0 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
@@ -3,6 +3,10 @@ import Link from 'next/link'
 import { useMemo, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
+import { Elements } from '@stripe/react-stripe-js'
+import { loadStripe, PaymentIntentResult, StripeElementsOptions } from '@stripe/stripe-js'
+import { getStripeElementsAppearanceOptions } from 'components/interfaces/Billing/Payment/Payment.utils'
+import { PaymentConfirmation } from 'components/interfaces/Billing/Payment/PaymentConfirmation'
 import {
   billingPartnerLabel,
   getPlanChangeType,
@@ -11,25 +15,19 @@ import AlertError from 'components/ui/AlertError'
 import ShimmeringLoader from 'components/ui/ShimmeringLoader'
 import { OrganizationBillingSubscriptionPreviewResponse } from 'data/organizations/organization-billing-subscription-preview'
 import { ProjectInfo } from 'data/projects/projects-query'
+import { useConfirmPendingSubscriptionChangeMutation } from 'data/subscriptions/org-subscription-confirm-pending-change'
 import { useOrgSubscriptionUpdateMutation } from 'data/subscriptions/org-subscription-update-mutation'
 import { SubscriptionTier } from 'data/subscriptions/types'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { PRICING_TIER_PRODUCT_IDS, PROJECT_STATUS, STRIPE_PUBLIC_KEY } from 'lib/constants'
 import { formatCurrency } from 'lib/helpers'
+import { useTheme } from 'next-themes'
+import { plans as subscriptionsPlans } from 'shared-data/plans'
 import { Button, Dialog, DialogContent, Table, TableBody, TableCell, TableRow } from 'ui'
 import { Admonition } from 'ui-patterns'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
-import PaymentMethodSelection from './PaymentMethodSelection'
-import { useConfirmPendingSubscriptionChangeMutation } from 'data/subscriptions/org-subscription-confirm-pending-change'
-import { PaymentConfirmation } from 'components/interfaces/Billing/Payment/PaymentConfirmation'
-import { Elements } from '@stripe/react-stripe-js'
-import { loadStripe, StripeElementsOptions } from '@stripe/stripe-js'
-import { useTheme } from 'next-themes'
-import { PaymentIntentResult } from '@stripe/stripe-js'
-import { getStripeElementsAppearanceOptions } from 'components/interfaces/Billing/Payment/Payment.utils'
-import { plans as subscriptionsPlans } from 'shared-data/plans'
 import type { PaymentMethodElementRef } from '../PaymentMethods/NewPaymentMethodElement'
-import { useParams } from 'common'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import PaymentMethodSelection from './PaymentMethodSelection'
 
 const stripePromise = loadStripe(STRIPE_PUBLIC_KEY)
 
@@ -347,7 +345,7 @@ export const SubscriptionPlanUpdateDialog = ({
                         <span>Monthly invoice estimate</span>
                         <InfoTooltip side="right">
                           <div className="w-[520px] p-6">
-                            <h3 className="text-base font-medium mb-2">Your new monthly invoice</h3>
+                            <h3 className="font-medium mb-2">Your new monthly invoice</h3>
                             <p className="prose text-xs mb-2">
                               Paid projects run 24/7 without pausing. First project uses Compute
                               Credits; additional projects start at <span translate="no">$10</span>
@@ -616,7 +614,7 @@ export const SubscriptionPlanUpdateDialog = ({
 
           {/* Right Column */}
           <div className="bg-surface-100 p-8 flex flex-col border-l xl:col-span-2">
-            <h3 className="text-base mb-8">
+            <h3 className="mb-8">
               {changeType === 'downgrade' ? 'Downgrade' : 'Upgrade'}{' '}
               <span className="font-bold">{selectedOrganization?.name}</span> to{' '}
               {changeType === 'downgrade'
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Bucket.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Bucket.tsx
index 6b7e6e8e804e7..d2d17faa3b828 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Bucket.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Bucket.tsx
@@ -25,7 +25,7 @@ const Bucket = ({ language, apikey, endpoint }: ContentProps) => {
     <div className="divide-y">
       <div className="space-y-1 px-4 py-4">
         <div className="flex items-center space-x-2">
-          <h2 className="text-xl">{bucket.name}</h2>
+          <h2>{bucket.name}</h2>
           <Badge variant={bucket.public ? 'warning' : 'default'}>
             {bucket.public ? 'Public' : 'Private'}
           </Badge>
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunction.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunction.tsx
index dca7cce0c5218..9ff1d705b4517 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunction.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/EdgeFunction.tsx
@@ -21,7 +21,7 @@ const Bucket = ({ language, apikey = 'API_KEY', endpoint }: ContentProps) => {
     <div className="divide-y">
       <div className="space-y-1 px-4 py-4">
         <div className="flex items-center space-x-2">
-          <h2 className="text-xl">{edgeFunction.name}</h2>
+          <h2>{edgeFunction.name}</h2>
         </div>
       </div>
 
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entity.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entity.tsx
index fda909b7295c0..1cd6064f7fb7b 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entity.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/Entity.tsx
@@ -4,11 +4,11 @@ import { useEffect } from 'react'
 import Table from 'components/to-be-cleaned/Table'
 import { useProjectJsonSchemaQuery } from 'data/docs/project-json-schema-query'
 import { useAppStateSnapshot } from 'state/app-state'
+import LanguageSelector from '../LanguageSelector'
 import { DOCS_RESOURCE_CONTENT } from '../ProjectAPIDocs.constants'
 import ResourceContent from '../ResourceContent'
 import type { ContentProps } from './Content.types'
 import { tempRemovePostgrestText } from './Content.utils'
-import LanguageSelector from '../LanguageSelector'
 
 function getColumnType(type: string, format: string) {
   // json and jsonb both have type=undefined, so check format instead
@@ -57,7 +57,7 @@ const Entity = ({ language, apikey = '', endpoint = '' }: ContentProps) => {
     <div className="divide-y relative">
       <div className="flex items-center justify-between px-4 py-4 sticky top-0 bg-surface-100 z-10 border-b shadow-md">
         <div className="flex flex-col gap-y-1">
-          <h2 className="text-xl">{resource}</h2>
+          <h2>{resource}</h2>
           <p className="text-sm text-foreground-light">
             {definition?.description ?? 'No description available'}
           </p>
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/Content/RPC.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/Content/RPC.tsx
index 24553a7c1ae2e..8f13ca96ea44e 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/Content/RPC.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/Content/RPC.tsx
@@ -57,7 +57,7 @@ export const RPC = ({ language }: ContentProps) => {
   return (
     <div className="divide-y">
       <div className="space-y-1 px-4 py-4">
-        <h2 className="text-xl">{rpc.name}</h2>
+        <h2>{rpc.name}</h2>
         <p className="text-sm text-foreground-light">{summary ?? 'No description available'}</p>
       </div>
       <div className="space-y-2 px-4 py-4">
diff --git a/apps/studio/components/interfaces/Reports/ReportChart.tsx b/apps/studio/components/interfaces/Reports/ReportChart.tsx
index c24edbc1ef6b9..9d5726fb88983 100644
--- a/apps/studio/components/interfaces/Reports/ReportChart.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportChart.tsx
@@ -110,11 +110,11 @@ const ReportChart = ({
   if (!isAvailable && !isLoading) {
     return (
       <Panel
-        title={<h2 className="text-sm">{chart.label}</h2>}
+        title={<p className="text-sm">{chart.label}</p>}
         className={cn('h-[260px] relative', className)}
       >
         <div className="z-10 flex flex-col items-center justify-center space-y-2 h-full absolute top-0 left-0 w-full bg-surface-100/70 backdrop-blur-md">
-          <h2 className="">{chart.label}</h2>
+          <h2>{chart.label}</h2>
           <p className="text-sm text-foreground-light">
             This chart is available from{' '}
             <span className="capitalize">
diff --git a/apps/studio/components/interfaces/Reports/ReportHeader.tsx b/apps/studio/components/interfaces/Reports/ReportHeader.tsx
index 0f4ff52c5c577..394f37762ed61 100644
--- a/apps/studio/components/interfaces/Reports/ReportHeader.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportHeader.tsx
@@ -15,7 +15,7 @@ const ReportHeader = ({ title, showDatabaseSelector }: ReportHeaderProps) => {
 
   return (
     <div className="flex flex-row justify-between gap-4 items-center">
-      <h1 className="text-2xl text-foreground">{title}</h1>
+      <h1>{title}</h1>
       {showDatabaseSelector && (
         <DatabaseSelector
           onSelectId={(db) => {
diff --git a/apps/studio/components/interfaces/Reports/Reports.tsx b/apps/studio/components/interfaces/Reports/Reports.tsx
index 53685bfdb1df5..ddc85aca62149 100644
--- a/apps/studio/components/interfaces/Reports/Reports.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.tsx
@@ -364,7 +364,7 @@ const Reports = () => {
     <div className="flex flex-col space-y-4" style={{ maxHeight: '100%' }}>
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-xl text-foreground">{currentReport?.name || 'Reports'}</h1>
+          <h1>{currentReport?.name || 'Reports'}</h1>
           <p className="text-foreground-light">{currentReport?.description}</p>
         </div>
         {hasEdits && (
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationSelector.tsx
index 80a35929e3654..98aff096501e1 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationSelector.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/RoleImpersonationSelector.tsx
@@ -59,7 +59,7 @@ const RoleImpersonationSelector = ({
   return (
     <>
       <div className={cn('flex flex-col gap-3', padded ? 'p-5' : 'pb-5')}>
-        <h2 className="text-foreground text-base">Database role settings</h2>
+        <p className="text-foreground text-base">Database role settings</p>
 
         <form
           onSubmit={(e) => {
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
index edc0e0c753c89..d22edb156ce69 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
@@ -175,9 +175,9 @@ const UserImpersonationSelector = () => {
   return (
     <>
       <div className="px-5 py-3">
-        <h2 className="text-foreground text-sm">
+        <p className="text-foreground text-sm">
           {displayName ? `Impersonating ${displayName}` : 'Impersonate a User'}
-        </h2>
+        </p>
         <p className="text-sm text-foreground-light">
           {!impersonatingUser && !isExternalAuthImpersonating
             ? "Select a user to respect your database's Row-Level Security policies for that particular user."
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx
index 4aec1576724a7..49d4428342f4f 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLQuickstarts.tsx
@@ -63,7 +63,7 @@ const SQLQuickstarts = () => {
     <div className="block h-full space-y-8 overflow-y-auto p-6 px-10 bg-dash-sidebar dark:bg-surface-100">
       <div className="mb-8">
         <div className="mb-6">
-          <h1 className="text-foreground mb-1 text-xl">Quickstarts</h1>
+          <h2 className="mb-1">Quickstarts</h2>
           <p className="text-foreground-light text-sm">
             Click on any script to fill the query box, modify the script, then click
             <span className="text-code">Run</span>.
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
index f5f8d1fd6f2b9..6ac7e907f4985 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
@@ -63,7 +63,7 @@ const SQLTemplates = () => {
     <div className="block h-full space-y-8 overflow-y-auto p-6 px-10 bg-dash-sidebar dark:bg-surface-100">
       <div>
         <div className="mb-6">
-          <h1 className="text-foreground mb-1 text-xl">Scripts</h1>
+          <h2 className="mb-1">Scripts</h2>
           <p className="text-foreground-light text-sm">Quick scripts to run on your database.</p>
           <p className="text-foreground-light text-sm">
             Click on any script to fill the query box, modify the script, then click
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
index 29493fe9edccb..939ab6486cb60 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
@@ -124,7 +124,7 @@ const ResetDbPassword = ({ disabled = false }) => {
       </Panel>
       <Modal
         hideFooter
-        header={<h5 className="text-sm text-foreground">Reset database password</h5>}
+        header={<h5 className="text-foreground">Reset database password</h5>}
         confirmText="Reset password"
         size="medium"
         visible={showResetDbPass}
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
index 28d6fa67cd453..09da373613b7c 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
@@ -98,13 +98,13 @@ const DiskSizeConfiguration = ({ disabled = false }: DiskSizeConfigurationProps)
                   <div className="grid grid-cols-12 gap-2 mt-12 items-start">
                     <div className="col-span-4 grid grid-cols-2 gap-x-12 gap-y-4 items-start">
                       <div className="grid gap-2 col-span-1">
-                        <h5 className="text-sm">Space used</h5>
+                        <h5>Space used</h5>
                         <span className="text-lg">
                           {formatBytes(databaseSizeBytesUsed, 2, 'GB')}
                         </span>
                       </div>
                       <div className="grid gap-2 col-span-1">
-                        <h5 className="text-sm">Total size</h5>
+                        <h5>Total size</h5>
                         <span className="text-lg">{currentDiskSize} GB</span>
                       </div>
 
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
index 68c21d2ed21ff..63fb03aa3f31f 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
@@ -10,6 +10,8 @@ import type {
   IntegrationProjectConnection,
 } from 'data/integrations/integrations.types'
 import { useVercelConnectionUpdateMutation } from 'data/integrations/vercel-connection-update-mutate'
+import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
+import Link from 'next/link'
 import {
   AlertDescription_Shadcn_,
   AlertTitle_Shadcn_,
@@ -24,8 +26,6 @@ import {
   Input_Shadcn_,
   Switch,
 } from 'ui'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import Link from 'next/link'
 
 const VercelIntegrationConnectionForm = ({
   disabled,
@@ -120,7 +120,7 @@ const VercelIntegrationConnectionForm = ({
               </Alert_Shadcn_>
             ) : (
               <div>
-                <h5 className="text-foreground text-sm">
+                <h5 className="text-foreground ">
                   Sync environment variables for selected target environments
                 </h5>
 
@@ -193,9 +193,7 @@ const VercelIntegrationConnectionForm = ({
               </div>
             )}
           </div>
-          <h5 className="mt-2 text-foreground text-sm">
-            Customize public environment variable prefix
-          </h5>
+          <h5 className="mt-2 text-foreground">Customize public environment variable prefix</h5>
           <div className="flex flex-col gap-4">
             <FormField_Shadcn_
               control={form.control}
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
index f47f9c5086185..83a8694afa155 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx
@@ -271,7 +271,7 @@ export const LogsPreviewer = ({
               }}
               EmptyState={
                 <div className="flex flex-col items-center justify-center h-[67px]">
-                  <h2 className="text-foreground-light text-xs">No data</h2>
+                  <p className="text-foreground-light text-xs">No data</p>
                   <p className="text-foreground-lighter text-xs">
                     It may take up to 24 hours for data to refresh
                   </p>
diff --git a/apps/studio/components/interfaces/Support/SupportFormV2.tsx b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
index 7571151668ce2..9ee139f7cd92d 100644
--- a/apps/studio/components/interfaces/Support/SupportFormV2.tsx
+++ b/apps/studio/components/interfaces/Support/SupportFormV2.tsx
@@ -532,7 +532,7 @@ export const SupportFormV2 = ({
           {docsResults.length > 0 && hasResults && (
             <>
               <div className="flex items-center gap-2">
-                <h5 className="text-sm text-foreground-lighter">AI Suggested resources</h5>
+                <h5 className="text-foreground-lighter">AI Suggested resources</h5>
                 {searchState.status === 'loading' && (
                   <div className="flex items-center gap-2 text-xs text-foreground-light">
                     <Loader2 className="animate-spin" size={12} />
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index 2730d3e11acf6..4ab7e464521ba 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -295,7 +295,7 @@ const Column = ({
             </PopoverTrigger_Shadcn_>
             <PopoverContent_Shadcn_ align="end" className="w-96 p-0">
               <div className="flex items-center justify-center bg-surface-200 space-y-1 py-1.5 px-3 border-b border-overlay">
-                <h5 className="text-sm text-foreground">Extra options</h5>
+                <h5 className="text-foreground">Extra options</h5>
               </div>
 
               <div className="flex flex-col space-y-1" key={`${column.id}_configuration`}>
diff --git a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
index c8f9726cc15e6..76b8f85771c42 100644
--- a/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/BuildingState.tsx
@@ -42,7 +42,7 @@ const BuildingState = () => {
       <div className="px-4 md:px-6 flex flex-col space-y-16">
         <div className="w-full flex flex-col gap-4">
           <div className="w-full flex flex-col md:flex-row items-start md:items-center gap-3">
-            <h1 className="text-3xl text-foreground">{project?.name}</h1>
+            <h1 className="text-3xl">{project?.name}</h1>
             <Badge variant="default" className="bg-surface-100 bg-opacity-100">
               <div className="flex items-center gap-2">
                 <Loader2 className="animate-spin" size={12} />
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
index 0860e5ee1d275..8a658f4baf810 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
@@ -124,7 +124,7 @@ export const HelpPopover = () => {
         <Popover.Separator />
         <div className="mb-4 space-y-2">
           <div className="mb-4 px-5">
-            <h5 className={'mb-2'}>Reach out to the community</h5>
+            <h5 className="mb-2">Reach out to the community</h5>
 
             <p className="text-sm text-foreground-lighter">
               For other support, including questions on our client libraries, advice, or best
diff --git a/apps/studio/components/layouts/ProjectLayout/PausingState.tsx b/apps/studio/components/layouts/ProjectLayout/PausingState.tsx
index 1c4c55c0720c9..aff41b06ba188 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausingState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausingState.tsx
@@ -6,8 +6,8 @@ import { Project, invalidateProjectDetailsQuery } from 'data/projects/project-de
 import { useProjectStatusQuery } from 'data/projects/project-status-query'
 import { invalidateProjectsQuery } from 'data/projects/projects-query'
 import { PROJECT_STATUS } from 'lib/constants'
+import { Circle, Loader } from 'lucide-react'
 import { useEffect, useState } from 'react'
-import { Loader, Circle } from 'lucide-react'
 
 export interface PausingStateProps {
   project: Project
diff --git a/apps/studio/components/layouts/Scaffold.tsx b/apps/studio/components/layouts/Scaffold.tsx
index 457073a9cb5ce..f98d986389a1b 100644
--- a/apps/studio/components/layouts/Scaffold.tsx
+++ b/apps/studio/components/layouts/Scaffold.tsx
@@ -66,7 +66,7 @@ export const ScaffoldHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivE
  */
 export const ScaffoldTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => {
-    return <h1 ref={ref} {...props} className={cn('text-2xl', className)} />
+    return <h1 ref={ref} {...props} className={cn(className)} />
   }
 )
 
diff --git a/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx b/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
index 8723843fd13a8..59a008b68b4aa 100644
--- a/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
+++ b/apps/studio/components/layouts/SignInLayout/ForgotPasswordLayout.tsx
@@ -47,7 +47,7 @@ const ForgotPasswordLayout = ({
         <main className="max-w-[448px] w-full flex flex-col px-5">
           {showHeadings && (
             <div className="mb-6">
-              <h1 className="text-2xl lg:text-3xl mt-8 mb-2">{heading}</h1>
+              <h1 className="lg:text-3xl mt-8 mb-2">{heading}</h1>
               <h2 className="text-foreground-light text-sm">{subheading}</h2>
             </div>
           )}
diff --git a/apps/studio/components/layouts/SignInLayout/SignInLayout.tsx b/apps/studio/components/layouts/SignInLayout/SignInLayout.tsx
index f58f952f15d2e..6243f55675b4d 100644
--- a/apps/studio/components/layouts/SignInLayout/SignInLayout.tsx
+++ b/apps/studio/components/layouts/SignInLayout/SignInLayout.tsx
@@ -116,7 +116,7 @@ const SignInLayout = ({
           <main className="flex flex-col items-center flex-1 flex-shrink-0 px-5 pt-16 pb-8 border-r shadow-lg bg-studio border-default">
             <div className="flex-1 flex flex-col justify-center w-[330px] sm:w-[384px]">
               <div className="mb-10">
-                <h1 className="mt-8 mb-2 text-2xl lg:text-3xl">{heading}</h1>
+                <h1 className="mt-8 mb-2 lg:text-3xl">{heading}</h1>
                 <h2 className="text-sm text-foreground-light">{subheading}</h2>
               </div>
 
diff --git a/apps/studio/components/ui/Forms/FormsContainer.tsx b/apps/studio/components/ui/Forms/FormsContainer.tsx
deleted file mode 100644
index 8ba379ca248a3..0000000000000
--- a/apps/studio/components/ui/Forms/FormsContainer.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cn } from 'ui'
-
-function FormsContainer(props: { children: React.ReactNode; header?: string; className?: string }) {
-  return (
-    <div
-      className={cn('mx-auto max-w-full xl:max-w-4xl px-4 md:px-5 pt-12 pb-20', props.className)}
-    >
-      {props.header && <h1 className="text-foreground mb-8 text-3xl">{props.header}</h1>}
-      <div className="space-y-12 md:space-y-20">{props.children}</div>
-    </div>
-  )
-}
-
-export { FormsContainer }
diff --git a/apps/studio/components/ui/InfoPill.tsx b/apps/studio/components/ui/InfoPill.tsx
index d88beae7ebfd3..d1ff71ae968c8 100644
--- a/apps/studio/components/ui/InfoPill.tsx
+++ b/apps/studio/components/ui/InfoPill.tsx
@@ -39,7 +39,7 @@ export const InfoPill = ({ label, icon, title, description, links }: InfoPillPro
           })}
         </div>
         <div className="flex-1">
-          <h4 className="text-sm font-semibold truncate">{title}</h4>
+          <h4 className="font-semibold truncate">{title}</h4>
           <p className="text-xs text-foreground-light">{description}</p>
           {links && links.length > 0 && (
             <div className="space-y-1 mt-2">
diff --git a/apps/studio/components/ui/InformationBox.tsx b/apps/studio/components/ui/InformationBox.tsx
index 702d832fecb16..c79f3d5231929 100644
--- a/apps/studio/components/ui/InformationBox.tsx
+++ b/apps/studio/components/ui/InformationBox.tsx
@@ -1,6 +1,6 @@
 import { ExternalLink, Maximize2, Minimize2 } from 'lucide-react'
 import Link from 'next/link'
-import { ReactNode, useState, forwardRef } from 'react'
+import { forwardRef, ReactNode, useState } from 'react'
 
 import { Button } from 'ui'
 
@@ -47,7 +47,7 @@ const InformationBox = forwardRef<HTMLDivElement, InformationBoxProps>(
             <div className="flex w-full space-x-3 items-center">
               {icon && <span className="text-foreground-lighter">{icon}</span>}
               <div className="flex-grow">
-                <h5 className="text-sm text-foreground">{title}</h5>
+                <h5 className="text-foreground">{title}</h5>
               </div>
             </div>
             {description && !hideCollapse ? (
diff --git a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
index ae32da4ba6257..6dc87be2204fa 100644
--- a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -27,15 +27,11 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
     <div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 transition-all pb-6 justify-between">
       <div className="flex flex-col md:flex-row md:items-center gap-3">
         <div className="flex flex-row items-center gap-3">
-          <div
-            className="flex h-6 w-6 items-center justify-center rounded border
-              border-brand-600 bg-brand-300 text-brand
-            "
-          >
+          <div className="flex h-6 w-6 items-center justify-center rounded border border-brand-600 bg-brand-300 text-brand">
             <List size={14} strokeWidth={3} />
           </div>
 
-          <h1 className="text-2xl text-foreground">Logs Explorer</h1>
+          <h1>Logs Explorer</h1>
         </div>
         {subtitle && <span className="text-2xl text-foreground-light">{subtitle}</span>}
       </div>
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index 671af91dc794e..b062e6840535c 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -13,6 +13,7 @@ import 'styles/reactflow.scss'
 import 'styles/storage.scss'
 import 'styles/stripe.scss'
 import 'styles/toast.scss'
+import 'styles/typography.scss'
 import 'styles/ui.scss'
 import 'ui/build/css/themes/dark.css'
 import 'ui/build/css/themes/light.css'
diff --git a/apps/studio/pages/cli/login.tsx b/apps/studio/pages/cli/login.tsx
index a41d77b70bdbf..b31eb20c54f13 100644
--- a/apps/studio/pages/cli/login.tsx
+++ b/apps/studio/pages/cli/login.tsx
@@ -50,9 +50,7 @@ const CliLoginPage: NextPageWithLayout = () => {
       <div className={`flex flex-col items-center justify-center h-full`}>
         {device_code ? (
           <>
-            <h1 className="text-xl py-2">
-              Your Supabase Account is being used to login on Supabase CLI.
-            </h1>
+            <h2 className="py-2">Your Supabase Account is being used to login on Supabase CLI.</h2>
             <p>Enter this verification code on Supabase CLI to authorize login.</p>
             <div className="flex flex-row gap-2 py-10">
               <InputOTP maxLength={8} value={device_code} disabled>
diff --git a/apps/studio/pages/integrations/github/authorize.tsx b/apps/studio/pages/integrations/github/authorize.tsx
index ff50e56a5c375..6e5ebe28246e1 100644
--- a/apps/studio/pages/integrations/github/authorize.tsx
+++ b/apps/studio/pages/integrations/github/authorize.tsx
@@ -22,7 +22,7 @@ const GitHubIntegrationAuthorize = () => {
 
   return (
     <div className="h-screen flex flex-col justify-center items-center gap-4">
-      <h2 className="text-xl">Completing GitHub Authorization...</h2>
+      <h2>Completing GitHub Authorization...</h2>
 
       {isSuccess && <p>You can now close this window.</p>}
       {isLoading && <p>Authorizing...</p>}
diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
index f656892e94e70..01b7f9e074ead 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
@@ -31,7 +31,7 @@ const VercelIntegration: NextPageWithLayout = () => {
       <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
         <ScaffoldColumn className="mx-auto w-full max-w-md">
           <header>
-            <h1 className="text-xl text-foreground">New project</h1>
+            <h2>New project</h2>
             <Markdown
               className="text-foreground-light"
               content={`Choose the Supabase organization you wish to install in`}
diff --git a/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
index 5bd457b5e202b..51a722e19345e 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/marketplace/choose-project.tsx
@@ -146,7 +146,7 @@ const VercelIntegration: NextPageWithLayout = () => {
       <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
         <ScaffoldColumn className="!max-w-[900px] mx-auto w-full">
           <header>
-            <h1 className="text-xl text-foreground">Create your first Project Connection</h1>
+            <h2>Create your first Project Connection</h2>
             <Markdown
               className="text-foreground-lighter"
               content={`
diff --git a/apps/studio/pages/integrations/vercel/install.tsx b/apps/studio/pages/integrations/vercel/install.tsx
index d2805eddea01b..bf9a99e011d1f 100644
--- a/apps/studio/pages/integrations/vercel/install.tsx
+++ b/apps/studio/pages/integrations/vercel/install.tsx
@@ -13,9 +13,9 @@ import { ScaffoldColumn, ScaffoldContainer } from 'components/layouts/Scaffold'
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { useVercelIntegrationCreateMutation } from 'data/integrations/vercel-integration-create-mutation'
 import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import { AlertTriangle, Info } from 'lucide-react'
 import { useIntegrationInstallationSnapshot } from 'state/integration-installation'
 import type { NextPageWithLayout, Organization } from 'types'
-import { AlertTriangle, Info } from 'lucide-react'
 
 /**
  * Variations of the Vercel integration flow.
@@ -189,7 +189,7 @@ const VercelIntegration: NextPageWithLayout = () => {
     <>
       <ScaffoldContainer className="flex flex-col gap-6 grow py-8">
         <ScaffoldColumn className="mx-auto w-full max-w-md">
-          <h1 className="text-xl text-foreground">Choose organization</h1>
+          <h2>Choose organization</h2>
           <>
             <Markdown content={`Choose the Supabase organization you wish to install in`} />
             <OrganizationPicker
diff --git a/apps/studio/pages/project/[ref]/index.tsx b/apps/studio/pages/project/[ref]/index.tsx
index 9f555e26cc9c6..4a35f4f01db45 100644
--- a/apps/studio/pages/project/[ref]/index.tsx
+++ b/apps/studio/pages/project/[ref]/index.tsx
@@ -14,6 +14,7 @@ import { ProjectLayoutWithAuth } from 'components/layouts/ProjectLayout/ProjectL
 import { ComputeBadgeWrapper } from 'components/ui/ComputeBadgeWrapper'
 import { InlineLink } from 'components/ui/InlineLink'
 import { ProjectUpgradeFailedBanner } from 'components/ui/ProjectUpgradeFailedBanner'
+import { useBranchesQuery } from 'data/branches/branches-query'
 import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
 import { useTablesQuery } from 'data/tables/tables-query'
@@ -34,7 +35,6 @@ import {
   TooltipTrigger,
 } from 'ui'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
-import { useBranchesQuery } from 'data/branches/branches-query'
 
 const Home: NextPageWithLayout = () => {
   const organization = useSelectedOrganization()
diff --git a/apps/studio/pages/project/[ref]/reports/database.tsx b/apps/studio/pages/project/[ref]/reports/database.tsx
index 7193534022eef..2352e82a66df0 100644
--- a/apps/studio/pages/project/[ref]/reports/database.tsx
+++ b/apps/studio/pages/project/[ref]/reports/database.tsx
@@ -321,11 +321,11 @@ const DatabaseUsage = () => {
               <div>
                 <div className="col-span-4 inline-grid grid-cols-12 gap-12 w-full mt-5">
                   <div className="grid gap-2 col-span-4 xl:col-span-2">
-                    <h5 className="text-sm">Space used</h5>
+                    <h5>Space used</h5>
                     <span className="text-lg">{formatBytes(databaseSizeBytes, 2, 'GB')}</span>
                   </div>
                   <div className="grid gap-2 col-span-4 xl:col-span-3">
-                    <h5 className="text-sm">Provisioned disk size</h5>
+                    <h5>Provisioned disk size</h5>
                     <span className="text-lg">{currentDiskSize} GB</span>
                   </div>
 
diff --git a/apps/studio/pages/project/_/[[...routeSlug]].tsx b/apps/studio/pages/project/_/[[...routeSlug]].tsx
index e65fbb6469bb4..d48253f497142 100644
--- a/apps/studio/pages/project/_/[[...routeSlug]].tsx
+++ b/apps/studio/pages/project/_/[[...routeSlug]].tsx
@@ -85,7 +85,7 @@ const GenericProjectPage: NextPage = () => {
     <>
       <Header />
       <div className="flex flex-col mx-auto w-full">
-        <h1 className="mt-8 text-2xl max-w-5xl mx-auto w-full">Select a project to continue</h1>
+        <h1 className="mt-8 max-w-5xl mx-auto w-full">Select a project to continue</h1>
         <div
           className="flex-grow py-6 overflow-y-auto"
           style={{ maxHeight: 'calc(100vh - 49px - 64px)' }}
diff --git a/apps/studio/pages/support/new.tsx b/apps/studio/pages/support/new.tsx
index 9f94fccad754f..0c1f57637cd60 100644
--- a/apps/studio/pages/support/new.tsx
+++ b/apps/studio/pages/support/new.tsx
@@ -36,7 +36,7 @@ const SupportPage: NextPageWithLayout = () => {
           <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-y-2">
             <div className="flex items-center space-x-3">
               <SVG src={`${BASE_PATH}/img/supabase-logo.svg`} className="h-4 w-4" />
-              <h1 className="m-0 text-lg">Supabase support</h1>
+              <h3 className="m-0 text-lg">Supabase support</h3>
             </div>
 
             <div className="flex items-center gap-x-3">
diff --git a/apps/studio/styles/typography.scss b/apps/studio/styles/typography.scss
new file mode 100644
index 0000000000000..8a050348bec5b
--- /dev/null
+++ b/apps/studio/styles/typography.scss
@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply text-default;
+  }
+  h1 {
+    @apply heading-title;
+  }
+  h2 {
+    @apply heading-section;
+  }
+  h3 {
+    @apply heading-subSection;
+  }
+  h4 {
+    @apply heading-default;
+  }
+  h5 {
+    @apply heading-default;
+  }
+  h6 {
+    @apply heading-compact;
+  }
+  small {
+    @apply text-compact;
+  }
+  strong {
+    @apply font-medium;
+  }
+}
+
+@layer utilities {
+  /* Heading */
+  .heading-title {
+    @apply scroll-m-20 text-2xl tracking-tight text-foreground;
+  }
+
+  .heading-section {
+    @apply scroll-m-20 text-xl text-foreground;
+  }
+
+  .heading-subSection {
+    @apply scroll-m-20 text-base text-foreground;
+  }
+
+  .heading-default {
+    @apply scroll-m-20 text-sm font-medium text-foreground;
+  }
+
+  .heading-compact {
+    @apply scroll-m-20 text-xs font-medium text-foreground;
+  }
+
+  .heading-meta {
+    @apply text-xs font-mono uppercase tracking-wider font-medium text-foreground;
+  }
+
+  /* Text */
+  .text-default {
+    @apply text-base text-foreground-light;
+  }
+
+  .text-subTitle {
+    @apply text-lg;
+  }
+
+  .text-compact {
+    @apply text-xs;
+  }
+
+  /* Link */
+  .text-link {
+    @apply text-foreground-light underline underline-offset-4 decoration-border hover:decoration-foreground transition-colors hover:text-foreground;
+  }
+}