diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx
index fade8897fb58c..7e9ec446ef2e0 100644
--- a/apps/design-system/__registry__/index.tsx
+++ b/apps/design-system/__registry__/index.tsx
@@ -2623,6 +2623,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "connect-interstitial-action-error": {
+      name: "connect-interstitial-action-error",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/connect-interstitial-action-error")),
+      source: "",
+      files: ["registry/default/example/connect-interstitial-action-error.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "connect-interstitial-logo-pair": {
       name: "connect-interstitial-logo-pair",
       type: "components:example",
diff --git a/apps/design-system/app/fonts/CustomFont-Black.woff2 b/apps/design-system/app/fonts/CustomFont-Black.woff2
deleted file mode 100644
index e3c834e57f291..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-Black.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2
deleted file mode 100644
index f84036283ec2e..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-BlackItalic.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/CustomFont-Bold.woff2 b/apps/design-system/app/fonts/CustomFont-Bold.woff2
deleted file mode 100644
index 5e7af459481a0..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-Bold.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2
deleted file mode 100644
index ac0edd55fd3f3..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-BoldItalic.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/CustomFont-Book.woff2 b/apps/design-system/app/fonts/CustomFont-Book.woff2
deleted file mode 100644
index abd31f7ec272f..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-Book.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/CustomFont-BookItalic.woff2 b/apps/design-system/app/fonts/CustomFont-BookItalic.woff2
deleted file mode 100644
index d326c8672ccc6..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-BookItalic.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/CustomFont-Medium.woff2 b/apps/design-system/app/fonts/CustomFont-Medium.woff2
deleted file mode 100644
index c07131ddec93a..0000000000000
Binary files a/apps/design-system/app/fonts/CustomFont-Medium.woff2 and /dev/null differ
diff --git a/apps/design-system/app/fonts/index.ts b/apps/design-system/app/fonts/index.ts
deleted file mode 100644
index 272cd5acd2d60..0000000000000
--- a/apps/design-system/app/fonts/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-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 69176828eb90c..e1e5c9ca5d6a3 100644
--- a/apps/design-system/app/layout.tsx
+++ b/apps/design-system/app/layout.tsx
@@ -3,11 +3,11 @@ import '@/styles/globals.css'
 
 import type { Metadata, Viewport } from 'next'
 
-import { customFont, sourceCodePro } from './fonts'
 import { Providers } from './Providers'
 import { Toaster } from './toaster'
+import { inter, manrope, sourceCodePro } from '@/lib/fonts'
 
-const className = `${customFont.variable} ${sourceCodePro.variable}`
+const className = `${inter.variable} ${manrope.variable} ${sourceCodePro.variable}`
 
 const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || '/design-system'
 
@@ -126,7 +126,7 @@ export default async function Layout({ children }: RootLayoutProps) {
         {/* [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};}`,
+            __html: `:root{--font-sans:${inter.style.fontFamily};--font-heading:${manrope.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
           }}
         />
       </head>
diff --git a/apps/design-system/content/docs/components/sonner.mdx b/apps/design-system/content/docs/components/sonner.mdx
index 3ae4ce8ee0a2d..bfcae2524a22c 100644
--- a/apps/design-system/content/docs/components/sonner.mdx
+++ b/apps/design-system/content/docs/components/sonner.mdx
@@ -58,6 +58,21 @@ import { toast } from 'sonner'
 toast('Event has been created.')
 ```
 
+## When to use
+
+Use a toast for short-lived, non-blocking feedback or to confirm an operation
+after its originating surface has closed or navigated away.
+
+Do not use a toast as the only feedback for:
+
+- Field validation. Use `FormMessage` or `FieldError` beside the field.
+- A failed submission that leaves the form or interstitial visible. Show a
+  `role="alert"` message in destructive text near the actions.
+- A blocking or materially changed page state. Use an inline state component
+  such as `Admonition` or `ErrorDisplay`.
+
+Keep error copy specific and include the next step when it is not obvious.
+
 ## Expand
 
 You can change the amount of toasts visible through the visibleToasts prop.
diff --git a/apps/design-system/content/docs/ui-patterns/connect-interstitials.mdx b/apps/design-system/content/docs/ui-patterns/connect-interstitials.mdx
index ceb6d36b189aa..99c0671ea699e 100644
--- a/apps/design-system/content/docs/ui-patterns/connect-interstitials.mdx
+++ b/apps/design-system/content/docs/ui-patterns/connect-interstitials.mdx
@@ -200,6 +200,48 @@ for new states instead of inventing a parallel card style.
 Prefer one full-width primary action. A full-width text button is fine for a
 secondary action that still belongs in the flow.
 
+### Action feedback
+
+Match feedback to its scope:
+
+- Use `FormMessage` or `FieldError` beside a field when that field needs to
+  change.
+- Show a submission or action failure as simple destructive text below the
+  actions. Separate it with a subtle divider when needed for composition. Keep
+  the current account, selections, and actions visible so the user can retry.
+- Use `Admonition` when the whole interstitial is blocked or has materially
+  changed state, such as an invalid link, wrong account, or partially completed
+  setup.
+- Use a toast only for non-blocking feedback or a completed action whose
+  originating surface is no longer visible. A toast must not be the only
+  feedback for a failure the user needs to resolve on the current card.
+
+```tsx
+{
+  actionError && (
+    <div className="mt-3 border-t border-muted pt-5">
+      <p role="alert" className="text-center text-xs text-destructive text-balance">
+        {actionError}
+      </p>
+    </div>
+  )
+}
+```
+
+Clear stale action feedback when the user retries or changes a relevant
+selection. Error copy should say what failed and, when it is not obvious, what
+the user can do next.
+
+<ComponentPreview
+  name="connect-interstitial-action-error"
+  description="Retryable action error shown beside the actions"
+  align="start"
+  className="p-0"
+  padded={false}
+  peekCode
+  wide
+/>
+
 ## States
 
 Keep loading, invalid, error, and success states inside the same card when the
diff --git a/apps/design-system/content/docs/ui-patterns/forms.mdx b/apps/design-system/content/docs/ui-patterns/forms.mdx
index 305231b796be7..add92626642f2 100644
--- a/apps/design-system/content/docs/ui-patterns/forms.mdx
+++ b/apps/design-system/content/docs/ui-patterns/forms.mdx
@@ -42,7 +42,7 @@ Keep repeated-row validation in the form schema or shared validation helper, not
 
 Build a custom row when the cells are mixed controls, such as an input paired with a `Select`.
 
-## Best Practices
+## Best practices
 
 1. **Always use FormItemLayout**: Use `FormItemLayout` instead of manually composing `FormItem`, `FormLabel`, `FormMessage`, and `FormDescription`.
 
@@ -57,7 +57,7 @@ Build a custom row when the cells are mixed controls, such as an input paired wi
 
 5. **Handle dirty state**: Show cancel buttons and disable save buttons based on `form.formState.isDirty`. Make sure you destructure `isDirty` from `form.formState` (see https://react-hook-form.com/docs/useform/formstate)
 
-6. **Error handling**: Always use mutations with `onSuccess` and `onError` callbacks that show toast notifications.
+6. **Error handling**: Match feedback to its scope. Use `FormMessage` or `FieldError` for field validation. Show submission failures inline near the form actions when the user needs to retry or change something. Reserve toasts for non-blocking feedback or completed operations whose originating surface is no longer visible.
 
 7. **Loading states**: Show loading states on submit buttons using the `loading` prop.
 
diff --git a/apps/design-system/lib/fonts.ts b/apps/design-system/lib/fonts.ts
new file mode 100644
index 0000000000000..91e4a08c3ee0f
--- /dev/null
+++ b/apps/design-system/lib/fonts.ts
@@ -0,0 +1,23 @@
+import { Inter, Manrope, Source_Code_Pro } from 'next/font/google'
+
+export const manrope = Manrope({
+  variable: '--font-manrope',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+export const inter = Inter({
+  variable: '--font-inter',
+  display: 'swap',
+  fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+  subsets: ['latin'],
+})
+
+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/registry/default/example/connect-interstitial-action-error.tsx b/apps/design-system/registry/default/example/connect-interstitial-action-error.tsx
new file mode 100644
index 0000000000000..085b3a486782c
--- /dev/null
+++ b/apps/design-system/registry/default/example/connect-interstitial-action-error.tsx
@@ -0,0 +1,36 @@
+import { Button } from 'ui'
+
+import {
+  AccountRow,
+  InterstitialShell,
+  LogoPair,
+  StripeLogo,
+  SupabaseLogo,
+} from './connect-interstitial-shared'
+
+export default function ConnectInterstitialActionError() {
+  return (
+    <InterstitialShell
+      logo={<LogoPair left={<StripeLogo />} right={<SupabaseLogo />} />}
+      title="Authorize Stripe Projects"
+      description="This will create an organization on your behalf in Supabase"
+    >
+      <div className="flex flex-col gap-4">
+        <AccountRow displayName="alex@example.com" />
+        <div className="flex flex-col gap-2">
+          <Button variant="primary" block>
+            Authorize Stripe Projects
+          </Button>
+          <Button variant="text" block>
+            Cancel
+          </Button>
+          <div className="mt-3 border-t border-muted pt-5">
+            <p role="alert" className="text-center text-xs text-destructive text-balance">
+              Failed to authorize Stripe Projects. Please try again.
+            </p>
+          </div>
+        </div>
+      </div>
+    </InterstitialShell>
+  )
+}
diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts
index 2697a4f176e75..04b6a3ec5b61d 100644
--- a/apps/design-system/registry/examples.ts
+++ b/apps/design-system/registry/examples.ts
@@ -1408,6 +1408,11 @@ export const examples: Registry = [
     type: 'components:example',
     files: ['example/connect-interstitial-demo.tsx'],
   },
+  {
+    name: 'connect-interstitial-action-error',
+    type: 'components:example',
+    files: ['example/connect-interstitial-action-error.tsx'],
+  },
   {
     name: 'connect-interstitial-logo-pair',
     type: 'components:example',
diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css
index 0418cb7fedf02..32c9d5d396b77 100644
--- a/apps/design-system/styles/globals.css
+++ b/apps/design-system/styles/globals.css
@@ -9,9 +9,30 @@
 @source './../../../packages/ui/src/**/*.{tsx,ts,js}';
 @source './../../../packages/ui-patterns/src/**/*.{tsx,ts,js}';
 
+@theme inline {
+  --font-sans:
+    var(--font-inter), Inter, Helvetica Neue, Helvetica, ui-sans-serif, system-ui, sans-serif;
+  --font-heading: var(--font-manrope, var(--font-sans));
+  --font-mono: var(--font-source-code-pro), 'Source Code Pro', ui-monospace, Menlo, monospace;
+}
+
 @theme {
   /* added to get max-w-site */
   --container-site: 128rem;
+  /* font sizing and weights optimized for Inter */
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1rem;
+  --text-xl: 1.125rem;
+  --text-2xl: 1.375rem;
+  --text-3xl: 1.75rem;
+  --text-4xl: 2.125rem;
+  --text-5xl: 2.875rem;
+  --text-6xl: 3.625rem;
+  --text-7xl: 4.375rem;
+  --text-8xl: 5.875rem;
+  --text-9xl: 7.875rem;
+  --font-weight-normal: 450;
 }
 
 @layer base {
@@ -30,9 +51,7 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-}
 
-@layer base {
   * {
     @apply border-border;
   }
@@ -40,13 +59,35 @@
     @apply scroll-smooth;
   }
   body {
-    @apply bg-default text-foreground;
+    @apply bg-default text-foreground font-normal;
     /* font-feature-settings: "rlig" 1, "calt" 1; */
     font-synthesis-weight: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  code,
+  .code-content,
+  pre,
+  kbd,
+  samp,
+  .font-mono {
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+    --text-6xl: 3.75rem;
+    --text-7xl: 4.5rem;
+    --text-8xl: 6rem;
+    --text-9xl: 8rem;
+    --font-weight-normal: 400;
+  }
 }
 
 @layer utilities {
@@ -76,6 +117,21 @@
   }
 }
 
+h1:not(.font-mono),
+h2:not(.font-mono),
+h3:not(.font-mono),
+h4:not(.font-mono),
+h5:not(.font-mono),
+h6:not(.font-mono),
+.h1:not(.font-mono),
+.h2:not(.font-mono),
+.h3:not(.font-mono),
+.h4:not(.font-mono),
+.h5:not(.font-mono),
+.h6:not(.font-mono) {
+  @apply font-heading font-semibold;
+}
+
 .rdg-cell {
   padding-inline: 0.5rem;
 }
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
index 76a6fb6b16aae..f3b5ea7822ad6 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -396,18 +396,16 @@ const HomePage = () => (
             </div>
           </div>
 
-          <div className="col-span-8 grid grid-cols-12 not-prose">
-            <IconLinkList
-              labelledBy="self-hosting"
-              className="col-span-full lg:col-span-8"
-              itemClassName="col-span-6"
-              items={selfHostingOptions.map((option) => ({
-                title: option.title,
-                href: option.href,
-                icon: <IconLinkMenuIcon icon={option.icon} />,
-              }))}
-            />
-          </div>
+          <IconLinkList
+            labelledBy="self-hosting"
+            className="col-span-8 not-prose"
+            itemClassName="col-span-6"
+            items={selfHostingOptions.map((option) => ({
+              title: option.title,
+              href: option.href,
+              icon: <IconLinkMenuIcon icon={option.icon} />,
+            }))}
+          />
         </div>
       )}
     </div>
diff --git a/apps/docs/components/AuthProviders.tsx b/apps/docs/components/AuthProviders.tsx
index c9b1ae8026328..15d6888b66cb8 100644
--- a/apps/docs/components/AuthProviders.tsx
+++ b/apps/docs/components/AuthProviders.tsx
@@ -1,24 +1,30 @@
-import { IconPanel } from 'ui-patterns/IconPanel'
 import providers from '../data/authProviders'
-import Link from 'next/link'
+import { IconLinkImage, IconLinkList } from '@/features/ui/IconLink'
 
-export default function AuthProviders({ type }: { type: string }) {
-  const filterProviders = providers.filter((item) => item.authType === type)
+export default function AuthProviders({
+  type,
+  labelledBy,
+  label,
+}: {
+  type: string
+  labelledBy?: string
+  label?: string
+}) {
+  const items = providers
+    .filter((item) => item.authType === type)
+    .map((provider) => ({
+      title: provider.name,
+      href: provider.href,
+      icon: <IconLinkImage path={provider.logo} hasLightIcon={provider.hasLightIcon} />,
+    }))
 
   return (
-    <>
-      <div className="grid grid-cols-12 xs:gap-x-10 gap-y-10 not-prose py-8">
-        {filterProviders.map((x) => (
-          <Link
-            href={`${x.href}`}
-            key={x.name}
-            passHref
-            className="col-span-12 xs:col-span-6 lg:col-span-4 xl:col-span-3"
-          >
-            <IconPanel title={x.name} icon={x.logo} hasLightIcon={x.hasLightIcon} />
-          </Link>
-        ))}
-      </div>
-    </>
+    <IconLinkList
+      labelledBy={labelledBy}
+      label={label}
+      className="not-prose py-8"
+      itemClassName="col-span-12 xs:col-span-6 lg:col-span-4 xl:col-span-3"
+      items={items}
+    />
   )
 }
diff --git a/apps/docs/components/AuthSmsProviderConfig/AuthSmsProviderConfig.tsx b/apps/docs/components/AuthSmsProviderConfig/AuthSmsProviderConfig.tsx
index 1bba14fa98a55..0ab67c6c37a75 100644
--- a/apps/docs/components/AuthSmsProviderConfig/AuthSmsProviderConfig.tsx
+++ b/apps/docs/components/AuthSmsProviderConfig/AuthSmsProviderConfig.tsx
@@ -1,15 +1,15 @@
 'use client'
 
 import { safeHistoryReplaceState } from '~/lib/historyUtils'
-import { useEffect, useReducer, useRef } from 'react'
+import { useEffect, useId, useReducer, useRef } from 'react'
 import { Dialog, DialogContent, DialogHeader, DialogSection, Heading } from 'ui'
-import { IconPanel } from 'ui-patterns/IconPanel'
 
 import { PhoneLoginsItems } from '../Navigation/NavigationMenu/NavigationMenu.constants'
 import MessageBird from './MessageBirdConfig.mdx'
 import TextLocal from './TextLocalConfig.mdx'
 import Twilio from './TwilioConfig.mdx'
 import Vonage from './VonageConfig.mdx'
+import { IconLinkButton, IconLinkImage } from '@/features/ui/IconLink'
 
 const reducer = (_, action: (typeof PhoneLoginsItems)[number] | undefined) => {
   const url = new URL(document.location.href)
@@ -24,6 +24,8 @@ const reducer = (_, action: (typeof PhoneLoginsItems)[number] | undefined) => {
 
 const AuthSmsProviderConfig = () => {
   const [selectedProvider, setSelectedProvider] = useReducer(reducer, undefined)
+  const dialogId = useId()
+  const dialogTitleId = useId()
 
   useEffect(() => {
     const providerName = new URLSearchParams(document.location.search ?? '').get('showSmsProvider')
@@ -41,22 +43,20 @@ const AuthSmsProviderConfig = () => {
         <h3 className="sr-only" id="sms-provider-configuration">
           Configuring SMS Providers
         </h3>
-        <div className="grid grid-cols-6 gap-10 not-prose py-8">
+        <ul className="grid grid-cols-12 gap-6 not-prose py-8">
           {PhoneLoginsItems.map((provider) => (
-            <button
-              tabIndex={0}
-              key={provider.name}
-              className="col-span-6 xl:col-span-3"
-              onClick={() => setSelectedProvider(provider)}
-            >
-              <IconPanel
+            <li key={provider.name} className="col-span-12 sm:col-span-6 xl:col-span-3">
+              <IconLinkButton
                 title={provider.name}
-                icon={provider.icon}
-                hasLightIcon={provider.hasLightIcon}
+                icon={<IconLinkImage path={provider.icon} hasLightIcon={provider.hasLightIcon} />}
+                aria-haspopup="dialog"
+                aria-expanded={selectedProvider?.name === provider.name}
+                aria-controls={selectedProvider?.name === provider.name ? dialogId : undefined}
+                onClick={() => setSelectedProvider(provider)}
               />
-            </button>
+            </li>
           ))}
-        </div>
+        </ul>
       </section>
       <Dialog
         open={!!selectedProvider}
@@ -64,14 +64,16 @@ const AuthSmsProviderConfig = () => {
       >
         {selectedProvider && (
           <DialogContent
+            id={dialogId}
             className="w-[min(90vw,80ch)]! max-w-[min(90vw,80ch)]! max-h-[90dvh]! prose overflow-auto"
+            aria-labelledby={dialogTitleId}
             onOpenAutoFocus={(evt) => {
               evt.preventDefault()
               headingRef.current?.focus()
             }}
           >
             <DialogHeader className="pb-0 [&>h3]:m-0! [&>h3>a]:hidden! [&>h3:focus-visible]:outline-hidden">
-              <Heading tag="h3" ref={headingRef} tabIndex={-1}>
+              <Heading tag="h3" id={dialogTitleId} ref={headingRef} tabIndex={-1}>
                 {selectedProvider.name}
               </Heading>
             </DialogHeader>
diff --git a/apps/docs/components/ContentListings/ContentListings.client.tsx b/apps/docs/components/ContentListings/ContentListings.client.tsx
index 7e7ff213c856d..f71fd0236b174 100644
--- a/apps/docs/components/ContentListings/ContentListings.client.tsx
+++ b/apps/docs/components/ContentListings/ContentListings.client.tsx
@@ -16,9 +16,10 @@ import { Heading } from 'ui/src/components/CustomHTMLElements'
 import { resolveContentListingIcon } from './iconChip'
 
 const GRID_ITEM_CLASS = {
+  // Stay 2-up until xl (~1280px) so cards aren't cramped beside the docs sidebar.
   2: 'col-span-12 md:col-span-6',
-  3: 'col-span-12 md:col-span-4',
-  4: 'col-span-12 md:col-span-3',
+  3: 'col-span-12 md:col-span-6 xl:col-span-4',
+  4: 'col-span-12 md:col-span-6 xl:col-span-3',
 } as const
 
 function useContentListingClickHandler(group: ContentListingGroup) {
@@ -88,9 +89,7 @@ function ContentListingsGroup({ group }: { group: ContentListingGroup }) {
                       }
                     >
                       {item.badge && item.badgePosition === 'below' && (
-                        // Pull the badge up close to the title (GlassPanel's icon-row gap is
-                        // large by default), then push extra space before the description below.
-                        <Badge variant="success" className="-mt-4 mb-6 block w-fit">
+                        <Badge variant="success" className="mb-3 block w-fit">
                           {item.badge}
                         </Badge>
                       )}
diff --git a/apps/docs/components/Extensions/Extensions.tsx b/apps/docs/components/Extensions/Extensions.tsx
index ce266aa44114c..27d8dae1f0e32 100644
--- a/apps/docs/components/Extensions/Extensions.tsx
+++ b/apps/docs/components/Extensions/Extensions.tsx
@@ -109,11 +109,12 @@ export default function Extensions() {
               )
               .map((extension) => (
                 <Link
+                  key={extension.name}
                   href={extension.link}
                   target={getLinkTarget(extension.link)}
                   className="no-underline"
                 >
-                  <GlassPanel title={extension.name} background={false} key={extension.name}>
+                  <GlassPanel title={extension.name}>
                     <p className="mt-4">
                       {extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
                     </p>
diff --git a/apps/docs/components/Image.tsx b/apps/docs/components/Image.tsx
index bd89a77272bbd..9ac6a934cb9f1 100644
--- a/apps/docs/components/Image.tsx
+++ b/apps/docs/components/Image.tsx
@@ -41,22 +41,33 @@ export interface ImageProps extends Omit<NextImageProps, 'src'> {
  * making sure it doesn't affect other projects consuming the component.
  *
  */
-const Image = ({ src, alt = '', ...props }: ImageProps) => {
+const Image = ({
+  src,
+  alt = '',
+  className,
+  style,
+  containerClassName,
+  caption,
+  // MDX can pass whitespace-only children (e.g. a blank line before `/>`);
+  // never forward those to next/image.
+  children: _children,
+  ...rest
+}: ImageProps) => {
   const { resolvedTheme } = useTheme()
   const source =
     typeof src === 'string' ? src : resolvedTheme?.includes('dark') ? src.dark : src.light
 
   return (
-    <figure className={props.containerClassName}>
+    <figure className={containerClassName}>
       <NextImage
         key={resolvedTheme}
         alt={alt}
         src={source}
-        className={props.className}
-        style={props.style}
-        {...props}
+        className={className}
+        style={style}
+        {...rest}
       />
-      {props.caption && <figcaption className="text-center">{props.caption}</figcaption>}
+      {caption && <figcaption className="text-center">{caption}</figcaption>}
     </figure>
   )
 }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 96e6899ff955e..70effd01a41c3 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -1,8 +1,6 @@
 // End of third-party imports
 
 import { isFeatureEnabled } from 'common/enabled-features'
-import type { ComponentProps } from 'react'
-import type { IconPanel } from 'ui-patterns/IconPanel'
 
 import type { GlobalMenuItems, NavMenuConstant, NavMenuSection } from '../Navigation.types'
 
@@ -2527,7 +2525,9 @@ export const contributing: NavMenuConstant = {
   items: [{ name: 'Overview', url: '/contributing' }],
 }
 
-export const MIGRATION_PAGES: Partial<NavMenuSection & ComponentProps<typeof IconPanel>>[] = [
+export const MIGRATION_PAGES: Partial<
+  NavMenuSection & { icon?: string; hasLightIcon?: boolean }
+>[] = [
   {
     name: 'Auth0',
     icon: '/docs/img/icons/auth0-icon',
diff --git a/apps/docs/content/_partials/providers.mdx b/apps/docs/content/_partials/providers.mdx
index 0c65a75ab1abf..94f42414eb436 100644
--- a/apps/docs/content/_partials/providers.mdx
+++ b/apps/docs/content/_partials/providers.mdx
@@ -4,7 +4,7 @@ Supabase Auth works with many popular Auth methods, including Social and Phone A
 
 ### Social Auth
 
-<AuthProviders type="social" />
+<AuthProviders type="social" labelledBy="social-auth" />
 
 <Admonition type="note">
 
@@ -14,4 +14,4 @@ You can also add any OAuth2 or OIDC-compatible identity provider using [Custom O
 
 ### Phone Auth
 
-<AuthProviders type="phone" />
+<AuthProviders type="phone" labelledBy="phone-auth" />
diff --git a/apps/docs/content/guides/ai.mdx b/apps/docs/content/guides/ai.mdx
index 5226d8849aa8b..263f0a17ae46f 100644
--- a/apps/docs/content/guides/ai.mdx
+++ b/apps/docs/content/guides/ai.mdx
@@ -31,7 +31,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
 {/* <!-- vale off --> */}
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/headless-vector-search" passHref>
       <GlassPanel
         icon={'/docs/img/icons/github-icon'}
@@ -42,7 +42,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/image-search-openai-clip" passHref>
       <GlassPanel
         icon={'/docs/img/icons/github-icon'}
@@ -53,7 +53,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/huggingface-image-captioning" passHref>
       <GlassPanel
         icon={'/docs/img/icons/github-icon'}
@@ -64,7 +64,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/openai" passHref>
       <GlassPanel
         icon={'/docs/img/icons/github-icon'}
@@ -75,7 +75,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/building-chatgpt-plugins" passHref>
       <GlassPanel
         icon={'/docs/img/icons/github-icon'}
@@ -86,7 +86,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/nextjs-vector-search" passHref>
       <GlassPanel
         icon={'/docs/img/icons/github-icon'}
@@ -106,7 +106,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
 {/* <!-- vale off --> */}
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/examples/building-chatgpt-plugins" passHref>
       <GlassPanel title="OpenAI">
         OpenAI is an AI research and deployment company. Supabase provides a way to use OpenAI in
@@ -114,7 +114,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/integrations/amazon-bedrock" passHref>
       <GlassPanel title="Amazon Bedrock">
         A fully managed service that offers a choice of high-performing foundation models from
@@ -122,7 +122,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/hugging-face" passHref>
       <GlassPanel title="Hugging Face">
         Hugging Face is an open-source provider of NLP technologies. Supabase provides a way to use
@@ -130,7 +130,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/langchain" passHref>
       <GlassPanel title="LangChain">
         LangChain is a language-agnostic, open-source, and self-hosted API for text translation,
@@ -138,7 +138,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/ai/integrations/llamaindex" passHref>
       <GlassPanel title="LlamaIndex">
         LlamaIndex is a data framework for your LLM applications.
@@ -154,7 +154,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
 {/* <!-- vale off --> */}
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="https://supabase.com/customers/berriai" passHref>
       <GlassPanel title="Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector">
         Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS
@@ -162,7 +162,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="https://supabase.com/customers/firecrawl" passHref>
       <GlassPanel title="Firecrawl switches from Pinecone to Supabase for Postgres vector embeddings">
         How Firecrawl boosts efficiency and accuracy of chat powered search for documentation using
@@ -170,7 +170,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="https://supabase.com/customers/markprompt" passHref>
       <GlassPanel title="Markprompt: GDPR-Compliant AI Chatbots for Docs and Websites">
         AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and
diff --git a/apps/docs/content/guides/ai/choosing-compute-addon.mdx b/apps/docs/content/guides/ai/choosing-compute-addon.mdx
index 9243663b8f22e..484f58c279fe1 100644
--- a/apps/docs/content/guides/ai/choosing-compute-addon.mdx
+++ b/apps/docs/content/guides/ai/choosing-compute-addon.mdx
@@ -130,7 +130,6 @@ The chart below compares HNSW queries-per-second across compute sizes for differ
   }}
   width={1427}
   height={862}
-
 />
 
 ## IVFFlat
@@ -268,7 +267,6 @@ The chart below plots requests-per-second against compute size.
   }}
   width={1427}
   height={862}
-
 />
 
 <Admonition type="note">
@@ -308,7 +306,6 @@ The chart below shows how the HNSW build parameters `m` and `ef_construction` af
   }}
   width={1052}
   height={796}
-
 />
 
 </TabPanel>
@@ -324,7 +321,6 @@ The chart below shows how the number of IVFFlat lists affects performance for on
   }}
   width={1032}
   height={796}
-
 />
 
 </TabPanel>
@@ -345,7 +341,6 @@ We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikber
   className="max-h-[650px]"
   width={1196}
   height={1194}
-
 />
 
 _The diagram above shows the vecs benchmark setup: a Python test runner uploads data, builds the index, and runs queries against pgvector._
diff --git a/apps/docs/content/guides/ai/engineering-for-scale.mdx b/apps/docs/content/guides/ai/engineering-for-scale.mdx
index 225e4c6c83581..bf6beeae17fef 100644
--- a/apps/docs/content/guides/ai/engineering-for-scale.mdx
+++ b/apps/docs/content/guides/ai/engineering-for-scale.mdx
@@ -24,7 +24,6 @@ The diagram below shows a single database holding the three vector collections o
   }}
   width={1600}
   height={1145}
-
 />
 
 For example, with 3 collections, called `docs`, `posts`, and `images`, we could expose the "docs" inside the public schema like this:
@@ -63,7 +62,6 @@ The diagram below shows a primary database alongside separate secondary "pod" da
   }}
   width={1600}
   height={1641}
-
 />
 
 You can use as many secondary databases as you need to manage your collections. With this architecture, you have 2 options for accessing collections within your application:
@@ -148,5 +146,4 @@ This diagram below provides an example architecture that allows you to access th
   }}
   width={1600}
   height={1754}
-
 />
diff --git a/apps/docs/content/guides/ai/going-to-prod.mdx b/apps/docs/content/guides/ai/going-to-prod.mdx
index f460254660fb9..38ce097c4aff3 100644
--- a/apps/docs/content/guides/ai/going-to-prod.mdx
+++ b/apps/docs/content/guides/ai/going-to-prod.mdx
@@ -36,7 +36,6 @@ On the other hand, if you need to scale your application, you will need to [crea
   }}
   width={1052}
   height={796}
-
 />
 
 ## HNSW, understanding `ef_construction`, `ef_search`, and `m`
@@ -59,7 +58,6 @@ Search parameters:
   }}
   width={1052}
   height={796}
-
 />
 
 ## IVFFlat, understanding `probes` and `lists`
@@ -84,7 +82,6 @@ The chart below shows how the IVFFlat lists count affects accuracy and queries-p
   }}
   width={1467}
   height={808}
-
 />
 
 ## Performance tips when using indexes
@@ -129,5 +126,4 @@ The chart below plots requests-per-second against compute size.
   }}
   width={1427}
   height={862}
-
 />
diff --git a/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx b/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx
index 8ddcb7c0ab0c6..38d06d2bb64dc 100644
--- a/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx
+++ b/apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx
@@ -101,7 +101,6 @@ The diagram below shows a navigable small world graph. Each node connects to nea
   className="max-h-[600px] mx-auto"
   width={1016}
   height={759}
-
 />
 
 The “navigable” part of NSW specifically refers to the ability to logarithmically scale the greedy search algorithm on the graph, an algorithm that attempts to make only the locally optimal choice at each hop. Without this property, the graph may still be considered a small world with short paths between far-away nodes, but the greedy algorithm tends to miss them. Greedy search is ideal for NSW because it is quick to navigate and has low computational costs.
diff --git a/apps/docs/content/guides/auth/auth-hooks.mdx b/apps/docs/content/guides/auth/auth-hooks.mdx
index b1259bc1d5a0d..327d87456d1ce 100644
--- a/apps/docs/content/guides/auth/auth-hooks.mdx
+++ b/apps/docs/content/guides/auth/auth-hooks.mdx
@@ -372,35 +372,35 @@ Outside of runtime errors, both HTTP Hooks and Postgres Hooks return timeout err
 Each Hook description contains an example JSON Schema which you can use in conjunction with [JSON Schema Faker](https://json-schema-faker.js.org/) in order to generate a mock payload. For HTTP Hooks, you can also use [the Standard Webhooks Testing Tool](https://www.standardwebhooks.com/simulate) to simulate a request.
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/auth/auth-hooks/custom-access-token-hook" passHref>
       <GlassPanel title="Custom Access Token">
         Customize the access token issued by Supabase Auth
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/auth/auth-hooks/send-sms-hook" passHref>
       <GlassPanel title="Send SMS">
         Use a custom SMS provider to send authentication messages
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/auth/auth-hooks/send-email-hook" passHref>
       <GlassPanel title="Send Email">
         Use a custom email provider to send authentication messages
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/auth/auth-hooks/mfa-verification-hook" passHref>
       <GlassPanel title="MFA Verification">
         Add additional checks to the MFA verification flow
       </GlassPanel>
     </Link>
   </div>
-  <div className="col-span-4">
+  <div className="col-span-12 md:col-span-6 xl:col-span-4">
     <Link href="/guides/auth/auth-hooks/password-verification-hook" passHref>
       <GlassPanel title="Password verification">
         Add additional checks to the password verification flow
diff --git a/apps/docs/content/guides/auth/server-side.mdx b/apps/docs/content/guides/auth/server-side.mdx
index 5a22ca7bbbf03..9e93a926bb37c 100644
--- a/apps/docs/content/guides/auth/server-side.mdx
+++ b/apps/docs/content/guides/auth/server-side.mdx
@@ -20,14 +20,20 @@ We have developed an [`@supabase/ssr`](https://www.npmjs.com/package/@supabase/s
 ## Framework quickstarts
 
 <div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-6 mb-6 not-prose">
-  <Link href="/guides/auth/server-side/nextjs" passHref>
-    <GlassPanel title="Next.js" background={false} icon="/docs/img/icons/nextjs-icon">
+  <Link
+    href="/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs"
+    passHref
+  >
+    <GlassPanel title="Next.js" icon="/docs/img/icons/nextjs-icon">
       Automatically configure Supabase in Next.js to use cookies, making your user and their session
       available on the client and server.
     </GlassPanel>
   </Link>
-  <Link href="/guides/auth/server-side/sveltekit" passHref>
-    <GlassPanel title="SvelteKit" background={false} icon="/docs/img/icons/svelte-icon">
+  <Link
+    href="/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=sveltekit"
+    passHref
+  >
+    <GlassPanel title="SvelteKit" icon="/docs/img/icons/svelte-icon">
       Automatically configure Supabase in SvelteKit to use cookies, making your user and their
       session available on the client and server.
     </GlassPanel>
diff --git a/apps/docs/content/guides/auth/social-login.mdx b/apps/docs/content/guides/auth/social-login.mdx
index 5f7cfe3ab7b87..6433597e5832e 100644
--- a/apps/docs/content/guides/auth/social-login.mdx
+++ b/apps/docs/content/guides/auth/social-login.mdx
@@ -20,30 +20,7 @@ There are several reasons why you might want to add social login to your applica
 
 Supabase supports a suite of social providers. Follow these guides to configure a social provider for your platform.
 
-<div className="grid grid-cols-12 xs:gap-x-10 gap-y-10 not-prose py-8">
-  <NavData data="socialLoginItems">
-    {(data) =>
-      data.map((item) => (
-        <Link
-          href={`${item.url}`}
-          key={item.name}
-          passHref
-          className="col-span-12 xs:col-span-6 lg:col-span-4 xl:col-span-3"
-        >
-          <IconPanel
-            title={item.name}
-            span="col-span-6"
-            icon={item.icon}
-            isDarkMode={item.isDarkMode}
-            hasLightIcon={item.hasLightIcon}
-          >
-            {item.description}
-          </IconPanel>
-        </Link>
-      ))
-    }
-  </NavData>
-</div>
+<AuthProviders type="social" label="Social providers" />
 
 <Admonition type="note">
 
diff --git a/apps/docs/content/guides/database/connecting-to-postgres.mdx b/apps/docs/content/guides/database/connecting-to-postgres.mdx
index 4045b69e5fce0..2ae0a4d3164e8 100644
--- a/apps/docs/content/guides/database/connecting-to-postgres.mdx
+++ b/apps/docs/content/guides/database/connecting-to-postgres.mdx
@@ -168,7 +168,6 @@ Server-side poolers, such as Supabase's [Supavisor](https://github.com/supabase/
   width={1851}
   height={907}
   caption="Connecting to the database directly vs using a Connection Pooler"
-
 />
 
 They maintain hot connections with the database and intelligently share them with clients only when needed, maximizing the amount of queries a single connection can service. They're best used to manage queries from auto-scaling systems, such as edge and serverless functions.
diff --git a/apps/docs/content/guides/database/connecting-to-postgres/serverless-drivers.mdx b/apps/docs/content/guides/database/connecting-to-postgres/serverless-drivers.mdx
index 88d0c4162713f..192b4ef7d8b39 100644
--- a/apps/docs/content/guides/database/connecting-to-postgres/serverless-drivers.mdx
+++ b/apps/docs/content/guides/database/connecting-to-postgres/serverless-drivers.mdx
@@ -21,20 +21,20 @@ Choose one of these Vercel Deploy Templates which use our [Vercel Deploy Integra
   <div className="grid grid-cols-12 gap-6 not-prose">
     <Link
       href="https://supabase.link/nextjs-with-supabase-starter"
-      className="col-span-12 md:col-span-4"
+      className="col-span-12 md:col-span-6 xl:col-span-4"
       passHref
     >
-      <GlassPanel title="supabase-js" hasLightIcon={true} background={false} showIconBg={true}>
+      <GlassPanel title="supabase-js" hasLightIcon={true} showIconBg={true}>
         A Next.js App Router template configured with cookie-based auth using Supabase, TypeScript
         and Tailwind CSS.
       </GlassPanel>
     </Link>
     <Link
       href="https://supabase.link/nextjs-supabase-kysely"
-      className="col-span-12 md:col-span-4"
+      className="col-span-12 md:col-span-6 xl:col-span-4"
       passHref
     >
-      <GlassPanel title="Kysely" hasLightIcon={true} background={false} showIconBg={true}>
+      <GlassPanel title="Kysely" hasLightIcon={true} showIconBg={true}>
         Basic Next.js template that uses Supabase as the database and Kysely as the query builder.
       </GlassPanel>
     </Link>
diff --git a/apps/docs/content/guides/database/orioledb.mdx b/apps/docs/content/guides/database/orioledb.mdx
index fcbdfa5fc0637..e7069232c7845 100644
--- a/apps/docs/content/guides/database/orioledb.mdx
+++ b/apps/docs/content/guides/database/orioledb.mdx
@@ -14,7 +14,6 @@ OrioleDB addresses Postgres's scalability limitations by removing bottlenecks in
   className="max-w-[550px] mx-auto! border rounded-md"
   width={1000}
   height={609}
-
 />
 
 <Admonition type="note">
diff --git a/apps/docs/content/guides/getting-started.mdx b/apps/docs/content/guides/getting-started.mdx
index 163c49283da6c..317ce47a169f6 100644
--- a/apps/docs/content/guides/getting-started.mdx
+++ b/apps/docs/content/guides/getting-started.mdx
@@ -10,23 +10,26 @@ hideToc: true
 <div>
 
 <div className="grid grid-cols-12 gap-6 not-prose">
-  <Link href="/guides/ai-tools" className="col-span-12 md:col-span-4" passHref>
-    <GlassPanel
-      title="Build with AI tools"
-      hasLightIcon={true}
-      background={false}
-      showIconBg={true}
-    >
+  <Link href="/guides/ai-tools" className="col-span-12 md:col-span-6 xl:col-span-4" passHref>
+    <GlassPanel title="Build with AI tools" hasLightIcon={true} showIconBg={true}>
       Develop with Supabase AI-first using plugins, MCP, and skills.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/api-keys" className="col-span-12 md:col-span-4" passHref>
-    <GlassPanel title="API Keys" hasLightIcon={true} background={false} showIconBg={true}>
+  <Link
+    href="/guides/getting-started/api-keys"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+    passHref
+  >
+    <GlassPanel title="API Keys" hasLightIcon={true} showIconBg={true}>
       Learn about the different API keys in Supabase and how to use them.
     </GlassPanel>
   </Link>
-  <Link href="/guides/local-development" className="col-span-12 md:col-span-4" passHref>
-    <GlassPanel title="Local Development" hasLightIcon={true} background={false} showIconBg={true}>
+  <Link
+    href="/guides/local-development"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+    passHref
+  >
+    <GlassPanel title="Local Development" hasLightIcon={true} showIconBg={true}>
       Use the Supabase CLI to develop locally and collaborate between teams.
     </GlassPanel>
   </Link>
@@ -39,11 +42,9 @@ hideToc: true
 ### Use cases
 
 <div className="grid lg:grid-cols-12 gap-6 not-prose">
-  <Link href="/guides/ai#examples" passHref className="col-span-4">
+  <Link href="/guides/ai#examples" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="AI, Vectors, and embeddings"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/openai_logo"
       hasLightIcon={true}
     >
@@ -53,28 +54,18 @@ hideToc: true
   <Link
     href="https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter"
     passHref
-    className="col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
   >
-    <GlassPanel
-      title="Subscription Payments (SaaS)"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/nextjs-icon"
-    >
+    <GlassPanel title="Subscription Payments (SaaS)" icon="/docs/img/icons/nextjs-icon">
       Clone, deploy, and fully customize a SaaS subscription application with Next.js.
     </GlassPanel>
   </Link>
   <Link
     href="https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example"
     passHref
-    className="col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
   >
-    <GlassPanel
-      title="Partner Gallery"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/nextjs-icon"
-    >
+    <GlassPanel title="Partner Gallery" icon="/docs/img/icons/nextjs-icon">
       Postgres full-text search, image storage, and more.
     </GlassPanel>
   </Link>
@@ -85,138 +76,138 @@ hideToc: true
 <$Show if="docs:framework_quickstarts">
 
 <div className="grid lg:grid-cols-12 gap-6 not-prose">
-  <Link href="/guides/getting-started/quickstarts/reactjs" passHref className="col-span-4">
-    <GlassPanel
-      title="React"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/react-icon"
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/reactjs"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="React" icon="/docs/img/icons/react-icon">
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a React app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/nextjs" passHref className="col-span-4">
-    <GlassPanel
-      title="Next.js"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/nextjs-icon"
-      hasLightIcon={true}
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/nextjs"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="Next.js" icon="/docs/img/icons/nextjs-icon" hasLightIcon={true}>
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a Next.js app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/nuxtjs" passHref className="col-span-4">
-    <GlassPanel title="Nuxt" span="col-span-6" background={false} icon="/docs/img/icons/nuxt-icon">
+  <Link
+    href="/guides/getting-started/quickstarts/nuxtjs"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="Nuxt" icon="/docs/img/icons/nuxt-icon">
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a Nuxt app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/hono" passHref className="col-span-4">
-    <GlassPanel title="Hono" span="col-span-6" background={false} icon="/docs/img/icons/hono-icon">
+  <Link
+    href="/guides/getting-started/quickstarts/hono"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="Hono" icon="/docs/img/icons/hono-icon">
       Learn how to create a Supabase project, add some sample data to your database, secure it with
       auth, and query the data from a Hono app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/redwoodjs" passHref className="col-span-4">
-    <GlassPanel
-      title="RedwoodJS"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/redwood-icon"
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/redwoodjs"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="RedwoodJS" icon="/docs/img/icons/redwood-icon">
       Learn how to create a Supabase project, add some sample data to your database using Prisma
       migration and seeds, and query the data from a RedwoodJS app.
     </GlassPanel>
   </Link>
   <$Show if="sdk:dart">
-    <Link href="/guides/getting-started/quickstarts/flutter" passHref className="col-span-4">
-      <GlassPanel
-        title="Flutter"
-        span="col-span-6"
-        background={false}
-        icon="/docs/img/icons/flutter-icon"
-      >
+    <Link
+      href="/guides/getting-started/quickstarts/flutter"
+      passHref
+      className="col-span-12 md:col-span-6 xl:col-span-4"
+    >
+      <GlassPanel title="Flutter" icon="/docs/img/icons/flutter-icon">
         Learn how to create a Supabase project, add some sample data to your database, and query the
         data from a Flutter app.
       </GlassPanel>
     </Link>
   </$Show>
   <$Show if="sdk:swift">
-    <Link href="/guides/getting-started/quickstarts/ios-swiftui" passHref className="col-span-4">
-      <GlassPanel
-        title="iOS SwiftUI"
-        span="col-span-6"
-        background={false}
-        icon="/docs/img/icons/swift-icon"
-      >
+    <Link
+      href="/guides/getting-started/quickstarts/ios-swiftui"
+      passHref
+      className="col-span-12 md:col-span-6 xl:col-span-4"
+    >
+      <GlassPanel title="iOS SwiftUI" icon="/docs/img/icons/swift-icon">
         Learn how to create a Supabase project, add some sample data to your database, and query the
         data from an iOS app.
       </GlassPanel>
     </Link>
   </$Show>
   <$Show if="sdk:kotlin">
-    <Link href="/guides/getting-started/quickstarts/kotlin" passHref className="col-span-4">
-      <GlassPanel
-        title="Android Kotlin"
-        span="col-span-6"
-        background={false}
-        icon="/docs/img/icons/kotlin-icon"
-      >
+    <Link
+      href="/guides/getting-started/quickstarts/kotlin"
+      passHref
+      className="col-span-12 md:col-span-6 xl:col-span-4"
+    >
+      <GlassPanel title="Android Kotlin" icon="/docs/img/icons/kotlin-icon">
         Learn how to create a Supabase project, add some sample data to your database, and query the
         data from an Android Kotlin app.
       </GlassPanel>
     </Link>
   </$Show>
-  <Link href="/guides/getting-started/quickstarts/sveltekit" passHref className="col-span-4">
-    <GlassPanel
-      title="SvelteKit"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/svelte-icon"
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/sveltekit"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="SvelteKit" icon="/docs/img/icons/svelte-icon">
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a SvelteKit app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/solidjs" passHref className="col-span-4">
-    <GlassPanel
-      title="SolidJS"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/solidjs-icon"
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/solidjs"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="SolidJS" icon="/docs/img/icons/solidjs-icon">
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a SolidJS app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/vue" passHref className="col-span-4">
-    <GlassPanel title="Vue" span="col-span-6" background={false} icon="/docs/img/icons/vuejs-icon">
+  <Link
+    href="/guides/getting-started/quickstarts/vue"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="Vue" icon="/docs/img/icons/vuejs-icon">
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a Vue app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/tanstack" passHref className="col-span-4">
-    <GlassPanel
-      title="TanStack Start"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/tanstack-icon"
-      hasLightIcon={true}
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/tanstack"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="TanStack Start" icon="/docs/img/icons/tanstack-icon" hasLightIcon={true}>
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a TanStack Start app.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/quickstarts/refine" passHref className="col-span-4">
-    <GlassPanel
-      title="Refine"
-      span="col-span-6"
-      background={false}
-      icon="/docs/img/icons/refine-icon"
-    >
+  <Link
+    href="/guides/getting-started/quickstarts/refine"
+    passHref
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+  >
+    <GlassPanel title="Refine" icon="/docs/img/icons/refine-icon">
       Learn how to create a Supabase project, add some sample data to your database, and query the
       data from a Refine app.
     </GlassPanel>
@@ -236,92 +227,74 @@ hideToc: true
 ### Web app demos
 
 <div className="grid lg:grid-cols-12 gap-6 not-prose">
-  <Link href="/guides/getting-started/tutorials/with-nextjs" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-nextjs" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Next.js"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/nextjs-icon"
       hasLightIcon={true}
     >
       Learn how to build a user management app with Next.js and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-react" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-react" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="React"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/react-icon"
     >
       Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-vue-3" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-vue-3" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Vue 3"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/vuejs-icon"
     >
       Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-nuxt-3" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-nuxt-3" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Nuxt 3"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/nuxt-icon"
     >
       Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-angular" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-angular" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Angular"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/angular-icon"
     >
       Learn how to build a user management app with Angular and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-redwoodjs" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-redwoodjs" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="RedwoodJS"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/redwood-icon"
     >
       Learn how to build a user management app with RedwoodJS and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-svelte" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-svelte" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Svelte"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/svelte-icon"
     >
       Learn how to build a user management app with Svelte and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-sveltekit" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-sveltekit" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="SvelteKit"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/svelte-icon"
     >
       Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-refine" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-refine" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Refine"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/refine-icon"
     >
       Learn how to build a user management app with Refine and Supabase Database, Auth, and Storage functionality.
@@ -336,11 +309,9 @@ hideToc: true
 
 <div className="grid lg:grid-cols-12 gap-6 not-prose">
   <$Show if="sdk:dart">
-    <Link href="/guides/getting-started/tutorials/with-flutter" passHref className="col-span-4">
+    <Link href="/guides/getting-started/tutorials/with-flutter" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
       <GlassPanel
         title="Flutter"
-        span="col-span-6"
-        background={false}
         icon="/docs/img/icons/flutter-icon"
       >
         Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.
@@ -350,12 +321,10 @@ hideToc: true
   <Link
     href="/guides/getting-started/tutorials/with-expo-react-native"
     passHref
-    className="col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
   >
     <GlassPanel
       title="Expo React Native"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/expo-icon"
       hasLightIcon={true}
     >
@@ -365,12 +334,10 @@ hideToc: true
   <Link
     href="/guides/auth/quickstarts/with-expo-react-native-social-auth"
     passHref
-    className="col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
   >
     <GlassPanel
       title="Expo React Native Social Auth"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/expo-icon"
       hasLightIcon={true}
     >
@@ -378,11 +345,9 @@ hideToc: true
     </GlassPanel>
   </Link>
   <$Show if="sdk:kotlin">
-    <Link href="/guides/getting-started/tutorials/with-kotlin" passHref className="col-span-4">
+    <Link href="/guides/getting-started/tutorials/with-kotlin" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
       <GlassPanel
         title="Android Kotlin"
-        span="col-span-6"
-        background={false}
         icon="/docs/img/icons/kotlin-icon"
       >
         Learn how to build a product management app with Android and Supabase Database, Auth, and Storage functionality.
@@ -390,32 +355,26 @@ hideToc: true
     </Link>
   </$Show>
   <$Show if="sdk:swift">
-    <Link href="/guides/getting-started/tutorials/with-swift" passHref className="col-span-4">
+    <Link href="/guides/getting-started/tutorials/with-swift" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
       <GlassPanel
         title="iOS Swift"
-        span="col-span-6"
-        background={false}
         icon="/docs/img/icons/swift-icon"
       >
         Learn how to build a user management app with iOS and Supabase Database, Auth, and Storage functionality.
       </GlassPanel>
     </Link>
   </$Show>
-  <Link href="/guides/getting-started/tutorials/with-ionic-react" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-ionic-react" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Ionic React"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/ionic-icon"
     >
       Learn how to build a user management app with Ionic React and Supabase Database, Auth, and Storage functionality.
     </GlassPanel>
   </Link>
-  <Link href="/guides/getting-started/tutorials/with-ionic-vue" passHref className="col-span-4">
+  <Link href="/guides/getting-started/tutorials/with-ionic-vue" passHref className="col-span-12 md:col-span-6 xl:col-span-4">
     <GlassPanel
       title="Ionic Vue"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/ionic-icon"
     >
       Learn how to build a user management app with Ionic Vue and Supabase Database, Auth, and Storage functionality.
@@ -424,12 +383,10 @@ hideToc: true
   <Link
     href="/guides/getting-started/tutorials/with-ionic-angular"
     passHref
-    className="col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
   >
     <GlassPanel
       title="Ionic Angular"
-      span="col-span-6"
-      background={false}
       icon="/docs/img/icons/ionic-icon"
     >
       Learn how to build a user management app with Ionic Angular and Supabase Database, Auth, and Storage functionality.
diff --git a/apps/docs/content/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes.mdx b/apps/docs/content/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes.mdx
index d40563b3f4a6f..278ad08fb5413 100644
--- a/apps/docs/content/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes.mdx
+++ b/apps/docs/content/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes.mdx
@@ -7,7 +7,7 @@ subtitle: 'Scopes let you specify the level of access your integration needs'
 
 <Admonition type="note">
 
-Scopes are only available for OAuth apps. Check out [**our guide**](/docs/guides/integrations/build-a-supabase-oauth-integration) to learn how to build an OAuth app integration.
+Scopes are only available for OAuth apps. Check out [our guide](/docs/guides/integrations/build-a-supabase-oauth-integration) to learn how to build an OAuth app integration.
 
 </Admonition>
 
diff --git a/apps/docs/content/guides/local-development/cli/getting-started.mdx b/apps/docs/content/guides/local-development/cli/getting-started.mdx
index 5ec58c4015bde..bb3b250f74ba7 100644
--- a/apps/docs/content/guides/local-development/cli/getting-started.mdx
+++ b/apps/docs/content/guides/local-development/cli/getting-started.mdx
@@ -167,16 +167,16 @@ When a new [version](https://github.com/supabase/cli/releases) is released, you
 >
 <TabPanel id="npm" label="npm">
 
-If you have installed the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase), you can update it with:
+Update the CLI with [npm](https://www.npmjs.com/package/supabase):
 
 ```sh
 npm update supabase --save-dev
 ```
 
-Beta channel (`supabase@beta`):
+Update to the latest beta release or switch a stable install to the beta channel with:
 
 ```sh
-npm update supabase@beta --save-dev
+npm install supabase@beta --save-dev
 ```
 
 </TabPanel>
diff --git a/apps/docs/content/guides/monitoring-and-debugging/reports.mdx b/apps/docs/content/guides/monitoring-and-debugging/reports.mdx
index da2e2e0fbaf3a..3daa92daeaf08 100644
--- a/apps/docs/content/guides/monitoring-and-debugging/reports.mdx
+++ b/apps/docs/content/guides/monitoring-and-debugging/reports.mdx
@@ -283,7 +283,6 @@ src={{
     dark: '/docs/img/database/reports/disk-size-chart-dark.png',
     light: '/docs/img/database/reports/disk-size-chart-light.png',
   }}
-
 />
 
 | Component    | Description                                               |
diff --git a/apps/docs/content/guides/platform/migrating-to-supabase.mdx b/apps/docs/content/guides/platform/migrating-to-supabase.mdx
index f4715f672cfef..aa9bab411f34d 100644
--- a/apps/docs/content/guides/platform/migrating-to-supabase.mdx
+++ b/apps/docs/content/guides/platform/migrating-to-supabase.mdx
@@ -15,7 +15,6 @@ Learn how to migrate to Supabase from another database service.
             icon={page.icon}
             title={page.name}
             hasLightIcon={page.hasLightIcon}
-            background={false}
             className="[&>div]:p-4"
           />
         </Link>
diff --git a/apps/docs/content/guides/platform/multi-factor-authentication.mdx b/apps/docs/content/guides/platform/multi-factor-authentication.mdx
index b1ef06cc409f3..d460dcb623289 100644
--- a/apps/docs/content/guides/platform/multi-factor-authentication.mdx
+++ b/apps/docs/content/guides/platform/multi-factor-authentication.mdx
@@ -6,7 +6,7 @@ subtitle: 'Enable multi-factor authentication (MFA) to keep your account secure.
 
 <Admonition type="note">
 
-This guide is for adding MFA to your Supabase user account. If you want to enable MFA for users in your Supabase project, refer to [**this guide**](/docs/guides/auth/auth-mfa) instead.
+This guide is for adding MFA to your Supabase user account. If you want to enable MFA for users in your Supabase project, refer to [this guide](/docs/guides/auth/auth-mfa) instead.
 
 </Admonition>
 
diff --git a/apps/docs/content/guides/resources.mdx b/apps/docs/content/guides/resources.mdx
index 3ebd7d7c6f835..6e29ac25665ac 100644
--- a/apps/docs/content/guides/resources.mdx
+++ b/apps/docs/content/guides/resources.mdx
@@ -11,13 +11,17 @@ hideToc: true
 <div>
 
 <div className="grid grid-cols-12 gap-6 not-prose">
-  <Link href="/guides/resources/examples" className="col-span-12 md:col-span-4" passHref>
-    <GlassPanel title="Examples" hasLightIcon={true} background={false} showIconBg={true}>
+  <Link href="/guides/getting-started" className="col-span-12 md:col-span-6 xl:col-span-4" passHref>
+    <GlassPanel title="Examples" hasLightIcon={true} showIconBg={true}>
       Official GitHub examples, curated content from the community, and more.
     </GlassPanel>
   </Link>
-  <Link href="/guides/resources/glossary" className="col-span-12 md:col-span-4" passHref>
-    <GlassPanel title="Glossary" hasLightIcon={true} background={false} showIconBg={true}>
+  <Link
+    href="/guides/resources/glossary"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+    passHref
+  >
+    <GlassPanel title="Glossary" hasLightIcon={true} showIconBg={true}>
       Definitions for terminology and acronyms used in the Supabase documentation.
     </GlassPanel>
   </Link>
@@ -34,155 +38,94 @@ hideToc: true
 
 <div className="grid grid-cols-12 gap-6 not-prose">
   <Link
-    href="/guides/resources/migrating-to-supabase/auth0"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/auth0"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Auth0"
-      icon="/docs/img/icons/auth0-icon"
-      hasLightIcon={true}
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Auth0" icon="/docs/img/icons/auth0-icon" hasLightIcon={true}>
       Move your auth users from Auth0 to a Supabase project.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/firebase-auth"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/firebase-auth"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Firebase Auth"
-      icon="/docs/img/icons/firebase-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Firebase Auth" icon="/docs/img/icons/firebase-icon">
       Move your auth users from a Firebase project to a Supabase project.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/firestore-data"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/firestore-data"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Firestore Data"
-      icon="/docs/img/icons/firebase-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Firestore Data" icon="/docs/img/icons/firebase-icon">
       Migrate the contents of a Firestore collection to a single Postgres table.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/firebase-storage"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/firebase-storage"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Firebase Storage"
-      icon="/docs/img/icons/firebase-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Firebase Storage" icon="/docs/img/icons/firebase-icon">
       Convert your Firebase Storage files to Supabase Storage.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/heroku"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/heroku"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Heroku"
-      icon="/docs/img/icons/heroku-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Heroku" icon="/docs/img/icons/heroku-icon">
       Migrate your Heroku Postgres database to Supabase.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/render"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/render"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Render"
-      icon="/docs/img/icons/render-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Render" icon="/docs/img/icons/render-icon">
       Migrate your Render Postgres database to Supabase.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/amazon-rds"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/amazon-rds"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Amazon RDS"
-      icon="/docs/img/icons/aws-rds-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Amazon RDS" icon="/docs/img/icons/aws-rds-icon">
       Migrate your Amazon RDS database to Supabase.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/postgres"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/postgres"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Postgres"
-      icon="/docs/img/icons/postgres-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Postgres" icon="/docs/img/icons/postgres-icon">
       Migrate your Postgres database to Supabase.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/mysql"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/mysql"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="MySQL"
-      icon="/docs/img/icons/mysql-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="MySQL" icon="/docs/img/icons/mysql-icon">
       Migrate your MySQL database to Supabase.
-    </IconPanel>
+    </GlassPanel>
   </Link>
   <Link
-    href="/guides/resources/migrating-to-supabase/mssql"
-    className="col-span-6 md:col-span-3"
+    href="/guides/platform/migrating-to-supabase/mssql"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <IconPanel
-      title="Microsoft SQL Server"
-      icon="/docs/img/icons/mssql-icon"
-      background={true}
-      showIconBg={true}
-      showLink={true}
-    >
+    <GlassPanel title="Microsoft SQL Server" icon="/docs/img/icons/mssql-icon">
       Migrate your Microsoft SQL Server database to Supabase.
-    </IconPanel>
+    </GlassPanel>
   </Link>
 </div>
 
@@ -196,59 +139,48 @@ hideToc: true
   </div>
 
 <div className="grid grid-cols-12 gap-6 not-prose">
-  <Link href="/guides/database/postgres/indexes" className="col-span-12 md:col-span-4" passHref>
-    <GlassPanel title="Managing Indexes" hasLightIcon={true} background={false} showIconBg={true}>
+  <Link
+    href="/guides/database/postgres/indexes"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
+    passHref
+  >
+    <GlassPanel title="Managing Indexes" hasLightIcon={true} showIconBg={true}>
       Improve query performance using various index types in Postgres.
     </GlassPanel>
   </Link>
   <Link
     href="/guides/database/postgres/cascade-deletes"
-    className="col-span-12 md:col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <GlassPanel title="Cascade Deletes" hasLightIcon={true} background={false} showIconBg={true}>
+    <GlassPanel title="Cascade Deletes" hasLightIcon={true} showIconBg={true}>
       Understand the types of foreign key constraint deletes.
     </GlassPanel>
   </Link>
   <Link
     href="/guides/database/postgres/dropping-all-tables-in-schema"
-    className="col-span-12 md:col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <GlassPanel
-      title="Drop all tables in schema"
-      hasLightIcon={true}
-      background={false}
-      showIconBg={true}
-    >
+    <GlassPanel title="Drop all tables in schema" hasLightIcon={true} showIconBg={true}>
       Delete all tables in a given schema.
     </GlassPanel>
   </Link>
   <Link
     href="/guides/database/postgres/first-row-in-group"
-    className="col-span-12 md:col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <GlassPanel
-      title="Select first row per group"
-      hasLightIcon={true}
-      background={false}
-      showIconBg={true}
-    >
+    <GlassPanel title="Select first row per group" hasLightIcon={true} showIconBg={true}>
       Retrieve the first row in each distinct group.
     </GlassPanel>
   </Link>
   <Link
     href="/guides/database/postgres/which-version-of-postgres"
-    className="col-span-12 md:col-span-4"
+    className="col-span-12 md:col-span-6 xl:col-span-4"
     passHref
   >
-    <GlassPanel
-      title="Print Postgres version"
-      hasLightIcon={true}
-      background={false}
-      showIconBg={true}
-    >
+    <GlassPanel title="Print Postgres version" hasLightIcon={true} showIconBg={true}>
       Find out which version of Postgres you are running.
     </GlassPanel>
   </Link>
diff --git a/apps/docs/features/docs/MdxAnchor.tsx b/apps/docs/features/docs/MdxAnchor.tsx
index 30b2b54db4242..c792fab63ec85 100644
--- a/apps/docs/features/docs/MdxAnchor.tsx
+++ b/apps/docs/features/docs/MdxAnchor.tsx
@@ -23,17 +23,50 @@ const flattenChildrenToText = (node: unknown): string => {
   return ''
 }
 
-export function MdxAnchor({ href, children, ...rest }: ComponentPropsWithoutRef<'a'>) {
+/** Same resting/hover contract as Studio InlineLink (no brand/green link color). */
+const mdxAnchorClassName =
+  'underline transition underline-offset-2 decoration-inherit hover:decoration-foreground text-inherit hover:text-foreground'
+
+const relForTarget = (target?: string, rel?: string) => {
+  if (target !== '_blank') return rel
+  const tokens = new Set((rel ?? '').split(/\s+/).filter(Boolean))
+  tokens.add('noopener')
+  tokens.add('noreferrer')
+  return [...tokens].join(' ')
+}
+
+/**
+ * Docs MDX `<a>` mapper. Same resting/hover contract as Studio InlineLink:
+ * inherit text + decoration, then foreground on hover.
+ */
+export function MdxAnchor({
+  href,
+  children,
+  className,
+  target,
+  rel,
+  ...rest
+}: ComponentPropsWithoutRef<'a'>) {
+  const linkClassName = cn(mdxAnchorClassName, className)
+  const resolvedRel = relForTarget(target, rel)
+
   if (!isExternalHref(href)) {
     return (
-      <a href={href} {...rest}>
+      <a href={href} target={target} rel={resolvedRel} className={linkClassName} {...rest}>
         {children}
       </a>
     )
   }
   const label = flattenChildrenToText(children).trim()
   return (
-    <a href={href} aria-label={label ? `External Source: ${label}` : undefined} {...rest}>
+    <a
+      href={href}
+      target={target}
+      rel={resolvedRel}
+      aria-label={label ? `External Source: ${label}` : undefined}
+      className={linkClassName}
+      {...rest}
+    >
       {children}
       <ExternalLinkIcon
         size={14}
diff --git a/apps/docs/features/docs/MdxBase.shared.tsx b/apps/docs/features/docs/MdxBase.shared.tsx
index 7c9dc4372c71e..78d5347b57337 100644
--- a/apps/docs/features/docs/MdxBase.shared.tsx
+++ b/apps/docs/features/docs/MdxBase.shared.tsx
@@ -36,7 +36,6 @@ import { type ComponentPropsWithoutRef } from 'react'
 import { Badge, Button } from 'ui'
 import { Admonition, type AdmonitionProps } from 'ui-patterns/Admonition'
 import { GlassPanel } from 'ui-patterns/GlassPanel'
-import { IconPanel } from 'ui-patterns/IconPanel'
 import SqlToRest from 'ui-patterns/SqlToRest'
 import { Heading } from 'ui/src/components/CustomHTMLElements'
 
@@ -91,7 +90,6 @@ const components = {
   GlassPanel,
   IconArrowDown: ArrowDown,
   IconCheck: Check,
-  IconPanel,
   IconX: X,
   Image: (props: ImageProps) => <Image className="rounded-md w-full" {...props} />,
   Link,
diff --git a/apps/docs/features/ui/IconLink.tsx b/apps/docs/features/ui/IconLink.tsx
index 4d6420d49b22b..cde78973fd602 100644
--- a/apps/docs/features/ui/IconLink.tsx
+++ b/apps/docs/features/ui/IconLink.tsx
@@ -1,6 +1,6 @@
 import MenuIconPicker from '~/components/Navigation/NavigationMenu/MenuIconPicker'
 import Link from 'next/link'
-import { type ReactNode } from 'react'
+import { type ButtonHTMLAttributes, type ReactNode } from 'react'
 import { cn } from 'ui'
 
 const sizeStyles = {
@@ -23,55 +23,103 @@ export type IconLinkItem = {
   className?: string
 }
 
-export function IconLink({
-  href,
+const iconLinkClassName =
+  'group relative -m-3 flex items-center gap-3 rounded-xl p-3 no-underline transition-colors hover:bg-accent focus-ring focus-visible:bg-accent'
+
+function IconLinkContent({
   title,
   icon,
   size = 'sm',
-  className,
 }: {
-  href: string
   title: string
   icon: ReactNode
   size?: IconLinkSize
-  className?: string
 }) {
   return (
-    <Link
-      href={href}
-      className={cn(
-        'group relative -m-3 flex items-center gap-3 rounded-xl p-3 no-underline transition-colors hover:bg-accent',
-        className
-      )}
-    >
+    <>
       <div
         className={cn(
-          'flex shrink-0 items-center justify-center overflow-hidden rounded-lg border bg-surface-100 transition-colors group-hover:border-strong',
+          'flex shrink-0 items-center justify-center overflow-hidden rounded-lg border bg-surface-100 transition-colors group-hover:border-strong group-focus-visible:border-strong',
           sizeStyles[size].tile
         )}
       >
         {icon}
       </div>
       <span className="text-base text-foreground">{title}</span>
+    </>
+  )
+}
+
+export function IconLink({
+  href,
+  title,
+  icon,
+  size = 'sm',
+  className,
+}: {
+  href: string
+  title: string
+  icon: ReactNode
+  size?: IconLinkSize
+  className?: string
+}) {
+  return (
+    <Link href={href} className={cn(iconLinkClassName, className)}>
+      <IconLinkContent title={title} icon={icon} size={size} />
     </Link>
   )
 }
 
+export function IconLinkButton({
+  title,
+  icon,
+  size = 'sm',
+  className,
+  disabled,
+  tabIndex,
+  ...props
+}: {
+  title: string
+  icon: ReactNode
+  size?: IconLinkSize
+  className?: string
+} & ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      tabIndex={tabIndex ?? (disabled ? -1 : 0)}
+      className={cn(iconLinkClassName, 'w-full text-left', className)}
+      {...props}
+    >
+      <IconLinkContent title={title} icon={icon} size={size} />
+    </button>
+  )
+}
+
 export function IconLinkList({
   items,
   labelledBy,
+  label,
   className,
   itemClassName = 'col-span-6 md:col-span-4',
   size = 'sm',
 }: {
   items: IconLinkItem[]
+  /** Prefer when a visible heading is the list’s name. */
   labelledBy?: string
+  /** Prefer when the nearby heading is section/setup copy, not a list title. */
+  label?: string
   className?: string
   itemClassName?: string
   size?: IconLinkSize
 }) {
   return (
-    <ul className={cn('grid grid-cols-12 gap-6', className)} aria-labelledby={labelledBy}>
+    <ul
+      className={cn('grid grid-cols-12 gap-6', className)}
+      aria-labelledby={labelledBy}
+      aria-label={label}
+    >
       {items.map((item) => (
         <li key={item.href} className={cn(itemClassName, item.className)}>
           <IconLink href={item.href} title={item.title} icon={item.icon} size={size} />
diff --git a/apps/docs/internals/generate-guides-markdown.ts b/apps/docs/internals/generate-guides-markdown.ts
index 662b5c4bf4aa7..c7d94bce7f0b7 100644
--- a/apps/docs/internals/generate-guides-markdown.ts
+++ b/apps/docs/internals/generate-guides-markdown.ts
@@ -199,7 +199,6 @@ const SCHEMA: ComponentSchema = {
   Price,
   ...PromptPanel,
   GlassPanel: Panel,
-  IconPanel: Panel,
   RealtimeLimitsEstimator,
   RegionsList,
   SmartRegionsList,
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index 69644ce02b035..a88710f4b5365 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Loader2 } from 'lucide-react'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useForm, useWatch } from 'react-hook-form'
 import { AWS_REGIONS } from 'shared-data'
 import { toast } from 'sonner'
@@ -82,6 +82,7 @@ interface DestinationFormProps {
   selectedType: DestinationType
   visible: boolean
   existingDestination?: ExistingDestination
+  typeSelection?: ReactNode
   onClose: () => void
 }
 
@@ -89,6 +90,7 @@ export const DestinationForm = ({
   selectedType,
   visible,
   existingDestination,
+  typeSelection,
   onClose,
 }: DestinationFormProps) => {
   const { ref: projectRef } = useParams()
@@ -422,6 +424,7 @@ export const DestinationForm = ({
   return (
     <>
       <SheetSection className="grow overflow-auto px-0 py-0">
+        {typeSelection}
         {hasNoAvailableDestinations && !editMode ? (
           <NoDestinationsAvailable />
         ) : (
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
index a6e9f94be478d..d0120d9ad5920 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
@@ -1,3 +1,4 @@
+import { useParams } from 'common'
 import { ArrowUpRight } from 'lucide-react'
 import Link from 'next/link'
 import { parseAsInteger, parseAsStringEnum, useQueryState } from 'nuqs'
@@ -14,6 +15,7 @@ import {
   SheetSection,
   SheetTitle,
 } from 'ui'
+import { Admonition } from 'ui-patterns/Admonition'
 
 import { EnablePipelinesCallout } from '../EnablePipelinesCallout'
 import { PipelineStatusName } from '../Replication.constants'
@@ -24,6 +26,8 @@ import { DestinationType } from './DestinationPanel.types'
 import { DestinationTypeSelection } from './DestinationTypeSelection'
 import { ReadReplicaForm } from './ReadReplicaForm'
 import { DocsButton } from '@/components/ui/DocsButton'
+import { useReplicationDestinationsQuery } from '@/data/replication/destinations-query'
+import { checkLocalETLNotSetUp } from '@/data/replication/utils'
 import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
 import { DOCS_URL } from '@/lib/constants'
 
@@ -32,8 +36,11 @@ interface DestinationPanelProps {
 }
 
 export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPanelProps) => {
+  const { ref: projectRef } = useParams()
   const enablePgReplicate = useIsETLPrivateAlpha()
   const { hasAccess: hasETLReplicationAccess } = useCheckEntitlements('replication.etl')
+  const { error: destinationsError } = useReplicationDestinationsQuery({ projectRef })
+  const isLocalETLNotSetUp = checkLocalETLNotSetUp(destinationsError)
 
   const [urlDestinationType, setDestinationType] = useQueryState(
     'destinationType',
@@ -89,7 +96,7 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
   }
 
   const docsUrl =
-    urlDestinationType === 'BigQuery'
+    destinationType === 'BigQuery'
       ? `${DOCS_URL}/guides/database/replication/bigquery#configure-bigquery-as-a-destination`
       : `${DOCS_URL}/guides/database/replication/pipelines#step-3-configure-a-destination`
 
@@ -100,71 +107,108 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
     }
   }, [edit, invalidExistingDestination, setEdit])
 
+  const typeSelection = (
+    <>
+      <DestinationTypeSelection />
+      <DialogSectionSeparator />
+    </>
+  )
+
+  const pipelinesTypeSelection = (
+    <>
+      {typeSelection}
+      {destinationType != null && isLocalETLNotSetUp && (
+        <SheetSection className="pb-0!">
+          <Admonition
+            type="warning"
+            title="Replication unavailable locally"
+            description="Configure the replication API to manage Pipelines destinations in local development."
+          />
+        </SheetSection>
+      )}
+    </>
+  )
+
   return (
     <>
-      <Sheet open={visible} onOpenChange={onClose}>
-        <SheetContent size="lg" showClose={false}>
-          <div className="flex flex-col h-full" tabIndex={-1}>
+      <Sheet
+        open={visible}
+        onOpenChange={(open) => {
+          if (!open) onClose()
+        }}
+      >
+        <SheetContent size="lg" showClose={false} className="max-w-3xl">
+          <div className="flex flex-col h-full min-h-0" tabIndex={-1}>
             <SheetHeader className="flex items-center justify-between">
               <div>
-                <SheetTitle>{editMode ? 'Edit destination' : 'Add new destination'}</SheetTitle>
+                <SheetTitle>{editMode ? 'Edit destination' : 'Add destination'}</SheetTitle>
                 <SheetDescription>
                   {editMode
                     ? 'Update the configuration for this destination.'
-                    : 'Set up a read replica or Supabase Pipelines destination for near real-time replication'}
+                    : 'Add a read replica or an external destination.'}
                 </SheetDescription>
               </div>
-              <DocsButton href={docsUrl} topic={`${urlDestinationType} pipeline settings`} />
+              <DocsButton
+                href={docsUrl}
+                topic={`${destinationType ?? 'destination'} pipeline settings`}
+              />
             </SheetHeader>
 
-            <DestinationTypeSelection />
-
-            <DialogSectionSeparator />
-
             {destinationType === 'Read Replica' ? (
-              <ReadReplicaForm onClose={onClose} onSuccess={() => onSuccessCreateReadReplica?.()} />
+              <ReadReplicaForm
+                typeSelection={typeSelection}
+                onClose={onClose}
+                onSuccess={() => onSuccessCreateReadReplica?.()}
+              />
             ) : !enablePgReplicate ? (
-              <SheetSection>
-                <div className={cn('border rounded-md p-6 flex flex-col gap-y-4')}>
-                  <div className="flex flex-col gap-y-1">
-                    <h4>Request Pipelines access</h4>
-                    <p className="text-sm text-foreground-light">
-                      Pipelines is in <span className="text-foreground">public alpha</span> and
-                      being rolled out gradually. Request access below to join the waitlist. Read
-                      replicas are available now.
-                    </p>
-                  </div>
-                  <div className="flex gap-x-2">
-                    <Button
-                      asChild
-                      variant="secondary"
-                      iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}
-                    >
-                      <Link
-                        target="_blank"
-                        rel="noreferrer"
-                        href="https://forms.supabase.com/pg_replicate"
+              <div className="grow overflow-auto min-h-0">
+                {pipelinesTypeSelection}
+                <SheetSection>
+                  <div className={cn('border rounded-md p-6 flex flex-col gap-y-4')}>
+                    <div className="flex flex-col gap-y-1">
+                      <h4>Request Pipelines access</h4>
+                      <p className="text-sm text-foreground-light">
+                        Pipelines is in <span className="text-foreground">public alpha</span> and
+                        being rolled out gradually. Request access below to join the waitlist. Read
+                        replicas are available now.
+                      </p>
+                    </div>
+                    <div className="flex gap-x-2">
+                      <Button
+                        asChild
+                        variant="secondary"
+                        iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}
                       >
-                        Request Pipelines access
-                      </Link>
-                    </Button>
-                    <DocsButton href={`${DOCS_URL}/guides/database/replication#pipelines`} />
+                        <Link
+                          target="_blank"
+                          rel="noreferrer"
+                          href="https://forms.supabase.com/pg_replicate"
+                        >
+                          Request Pipelines access
+                        </Link>
+                      </Button>
+                      <DocsButton href={`${DOCS_URL}/guides/database/replication#pipelines`} />
+                    </div>
                   </div>
-                </div>
-              </SheetSection>
+                </SheetSection>
+              </div>
             ) : replicationNotEnabled ? (
-              <SheetSection>
-                <EnablePipelinesCallout
-                  className="p-6!"
-                  type={destinationType}
-                  hasAccess={hasETLReplicationAccess}
-                />
-              </SheetSection>
+              <div className="grow overflow-auto min-h-0">
+                {pipelinesTypeSelection}
+                <SheetSection>
+                  <EnablePipelinesCallout
+                    className="p-6!"
+                    type={destinationType}
+                    hasAccess={hasETLReplicationAccess}
+                  />
+                </SheetSection>
+              </div>
             ) : (
               <DestinationForm
                 visible={visible}
                 selectedType={destinationType ?? 'Read Replica'}
                 existingDestination={existingDestination}
+                typeSelection={pipelinesTypeSelection}
                 onClose={onClose}
               />
             )}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
index 7d62e31f8c6f4..9ef30c6a292d6 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
@@ -132,7 +132,7 @@ describe('DestinationTypeSelection', () => {
     fireEvent.click(await screen.findByRole('combobox'))
     fireEvent.click(await screen.findByText('BigQuery'))
 
-    expect(await screen.findByText(/This destination type is in public alpha/)).toBeInTheDocument()
+    expect(await screen.findByText(/In public alpha and may change/)).toBeInTheDocument()
   })
 
   test('disables the selector in edit mode so the destination type cannot be changed', async () => {
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
index 6761906bc21ac..792e0f9f837e7 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
@@ -1,6 +1,7 @@
 import { AnalyticsBucket, BigQuery, ClickHouse, Database } from 'icons'
 import { Snowflake } from 'lucide-react'
 import { parseAsInteger, parseAsStringEnum, useQueryState } from 'nuqs'
+import type { ElementType } from 'react'
 import {
   Badge,
   Select,
@@ -29,7 +30,7 @@ interface DestinationTypeOption {
   value: DestinationType
   label: string
   description: string
-  icon: typeof Database
+  icon: ElementType<{ size?: number; className?: string; strokeWidth?: number }>
   stage: 'Public Alpha' | 'Early Access' | 'Deprecated' | null
   enabled: boolean
 }
@@ -39,6 +40,12 @@ interface DestinationTypeGroup {
   options: DestinationTypeOption[]
 }
 
+function DestinationOptionIcon({ option }: { option: DestinationTypeOption }) {
+  const Icon = option.icon
+
+  return <Icon size={20} strokeWidth={1.5} className="shrink-0 text-foreground-light" />
+}
+
 export const DestinationTypeSelection = () => {
   const etlEnableBigQuery = useIsETLBigQueryPrivateAlpha()
   const etlEnableIceberg = useIsETLIcebergPrivateAlpha()
@@ -147,29 +154,41 @@ export const DestinationTypeSelection = () => {
     .flatMap((group) => group.options)
     .find((option) => option.value === destinationType)
 
+  const stageDescription =
+    selectedOption?.stage === 'Public Alpha' ? (
+      <>
+        In public alpha and may change.{' '}
+        <InlineLink href="https://github.com/orgs/supabase/discussions/39416">
+          Leave feedback
+        </InlineLink>
+      </>
+    ) : selectedOption?.stage === 'Early Access' ? (
+      <>
+        In early access and may change.{' '}
+        <InlineLink href="https://github.com/orgs/supabase/discussions/39416">
+          Leave feedback
+        </InlineLink>
+      </>
+    ) : selectedOption?.stage === 'Deprecated' ? (
+      'This destination type is deprecated.'
+    ) : null
+
+  const typeDescription =
+    !editMode || stageDescription ? (
+      <span>
+        {!editMode && 'Cannot be changed after creation.'}
+        {!editMode && stageDescription ? ' ' : null}
+        {stageDescription}
+      </span>
+    ) : undefined
+
   return (
     <FormItemLayout
       isReactForm={false}
       layout="horizontal"
-      className="p-5 [&>div]:gap-y-1"
+      className="p-5 [&>div]:gap-y-1 [&>div>span]:text-foreground-lighter"
       label="Type"
-      labelOptional="Destination type cannot be changed after creation"
-      description={
-        selectedOption?.stage && (
-          <span className="block text-sm text-foreground-lighter mb-1">
-            {selectedOption.stage === 'Public Alpha'
-              ? 'This destination type is in public alpha and may change as we iterate based on customer feedback. '
-              : selectedOption.stage === 'Deprecated'
-                ? 'This destination type is deprecated.'
-                : 'This destination type is available through early access and may change as we iterate based on customer feedback. '}
-            {selectedOption.stage !== 'Deprecated' && (
-              <InlineLink href="https://github.com/orgs/supabase/discussions/39416">
-                Leave feedback
-              </InlineLink>
-            )}
-          </span>
-        )
-      }
+      description={typeDescription}
     >
       <Select
         disabled={editMode}
@@ -179,7 +198,7 @@ export const DestinationTypeSelection = () => {
         <SelectTrigger className="h-auto py-2">
           {selectedOption ? (
             <div className="flex items-center gap-x-3 text-left">
-              <selectedOption.icon size={20} className="shrink-0 text-foreground-light" />
+              <DestinationOptionIcon option={selectedOption} />
               <div className="flex items-center gap-x-2">
                 <span className="text-sm text-foreground">{selectedOption.label}</span>
                 {selectedOption.stage && (
@@ -209,7 +228,7 @@ export const DestinationTypeSelection = () => {
               {group.options.map((option) => (
                 <SelectItem key={option.value} value={option.value} className="py-2">
                   <div className="flex items-center gap-x-3">
-                    <option.icon size={20} className="shrink-0 text-foreground-light" />
+                    <DestinationOptionIcon option={option} />
                     <div className="flex flex-col gap-y-0.5">
                       <div className="flex items-center gap-x-2">
                         <span className="text-foreground">{option.label}</span>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
index e5e89e08a2dec..7e39afc1f00bf 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/index.tsx
@@ -1,5 +1,5 @@
 import { useParams } from 'common'
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { AWS_REGIONS, AWS_REGIONS_KEYS } from 'shared-data'
 import { toast } from 'sonner'
 import {
@@ -24,11 +24,12 @@ import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
 import { AWS_REGIONS_DEFAULT, BASE_PATH } from '@/lib/constants'
 
 interface ReadReplicaFormProps {
+  typeSelection?: ReactNode
   onSuccess: () => void
   onClose: () => void
 }
 
-export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) => {
+export const ReadReplicaForm = ({ typeSelection, onSuccess, onClose }: ReadReplicaFormProps) => {
   const { ref: projectRef } = useParams()
   const { data } = useReadReplicasQuery({ projectRef })
 
@@ -66,13 +67,13 @@ export const ReadReplicaForm = ({ onSuccess, onClose }: ReadReplicaFormProps) =>
 
   return (
     <>
-      {!canDeployReplica && (
-        <SheetSection>
-          <ReadReplicaEligibilityWarnings />
-        </SheetSection>
-      )}
-
       <SheetSection className="grow overflow-auto px-0 py-0">
+        {typeSelection}
+        {!canDeployReplica && (
+          <SheetSection>
+            <ReadReplicaEligibilityWarnings />
+          </SheetSection>
+        )}
         <FormItemLayout
           isReactForm={false}
           layout="horizontal"
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index fec2cc142af38..52767d0788d86 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useParams } from 'common'
-import { ChartArea, MoreVertical, Plus, Search, X } from 'lucide-react'
+import { Database } from 'icons'
+import { MoreVertical, Plus, Search, X } from 'lucide-react'
 import Link from 'next/link'
 import { parseAsStringEnum, useQueryState } from 'nuqs'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -8,10 +9,10 @@ import {
   Button,
   Card,
   CardContent,
-  cn,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Table,
   TableBody,
@@ -20,8 +21,8 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
-import { Admonition } from 'ui-patterns/Admonition'
 import { Input } from 'ui-patterns/DataInputs/Input'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { REPLICA_STATUS } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
@@ -39,6 +40,7 @@ import {
 } from './useIsETLPrivateAlpha'
 import { AlertError } from '@/components/ui/AlertError'
 import { DocsButton } from '@/components/ui/DocsButton'
+import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
 import { Shortcut } from '@/components/ui/Shortcut'
 import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
 import { useReplicationDestinationsQuery } from '@/data/replication/destinations-query'
@@ -50,6 +52,7 @@ import { checkLocalETLNotSetUp } from '@/data/replication/utils'
 import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { DOCS_URL } from '@/lib/constants'
+import { onSearchInputEscape } from '@/lib/keyboard'
 import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
 import { useShortcut } from '@/state/shortcuts/useShortcut'
 
@@ -225,74 +228,81 @@ export const Destinations = () => {
   }, [isDatabasesSuccess, readReplicas])
 
   return (
-    <>
-      <div className="mb-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
-            <Input
-              ref={searchInputRef}
-              placeholder="Filter destinations"
-              size="tiny"
-              icon={<Search />}
-              value={filterString}
-              className="w-full lg:w-52"
-              onChange={(e) => setFilterString(e.target.value)}
-              actions={
-                filterString.length > 0 && (
-                  <Button
-                    aria-label="Clear filter"
-                    variant="text"
-                    icon={<X />}
-                    className="p-0 h-5 w-5"
-                    onClick={() => setFilterString('')}
-                  />
-                )
-              }
-            />
-          </div>
-          <div className="flex items-center gap-x-2">
-            <Shortcut
-              id={SHORTCUT_IDS.LIST_PAGE_NEW_ITEM}
-              label="Add destination"
-              onTrigger={openDestinationPanel}
-              options={{ enabled: !!newDestinationDefaultType }}
-              side="bottom"
-            >
+    <div className="w-full space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          <Input
+            ref={searchInputRef}
+            placeholder="Filter destinations"
+            size="tiny"
+            icon={<Search />}
+            value={filterString}
+            className="w-full lg:w-52"
+            onChange={(e) => setFilterString(e.target.value)}
+            onKeyDown={onSearchInputEscape(filterString, setFilterString)}
+            actions={
+              filterString.length > 0 && (
+                <Button
+                  aria-label="Clear filter"
+                  variant="text"
+                  icon={<X />}
+                  className="p-0 h-5 w-5"
+                  onClick={() => setFilterString('')}
+                />
+              )
+            }
+          />
+        </div>
+        <div className="flex items-center gap-x-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
               <Button
+                aria-label="More actions"
                 variant="default"
-                icon={<Plus />}
-                disabled={!newDestinationDefaultType}
-                onClick={openDestinationPanel}
-              >
-                Add destination
-              </Button>
-            </Shortcut>
-            {organization?.slug && (
-              <Button asChild variant="default" icon={<ChartArea />}>
-                <Link href={`/org/${organization.slug}/usage#pipeline-initial-sync-data`}>
-                  Usage
+                icon={<MoreVertical />}
+                className="px-1"
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-52">
+              <DropdownMenuItem asChild>
+                <Link href={`/org/${organization?.slug}/usage#pipeline-initial-sync-data`}>
+                  View Pipelines usage
                 </Link>
-              </Button>
-            )}
-            <DocsButton href={`${DOCS_URL}/guides/database/replication`} />
-            {canDisablePipelines && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    aria-label="More actions"
-                    variant="default"
-                    icon={<MoreVertical />}
-                    className="w-7"
-                  />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-52">
-                  <DropdownMenuItem onClick={() => setShowDisablePipelinesDialog(true)}>
-                    Disable Pipelines
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </div>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItemTooltip
+                disabled={canDisablePipelines}
+                tooltip={{
+                  content: {
+                    side: 'left',
+                    text: 'Remove all existing destinations before disabling Pipelines',
+                  },
+                }}
+                onClick={() => setShowDisablePipelinesDialog(true)}
+              >
+                Disable Pipelines
+              </DropdownMenuItemTooltip>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <DocsButton href={`${DOCS_URL}/guides/database/replication`} />
+
+          <Shortcut
+            id={SHORTCUT_IDS.LIST_PAGE_NEW_ITEM}
+            label="Add destination"
+            onTrigger={openDestinationPanel}
+            options={{ enabled: !!newDestinationDefaultType }}
+            side="bottom"
+          >
+            <Button
+              variant="primary"
+              icon={<Plus />}
+              disabled={!newDestinationDefaultType}
+              onClick={openDestinationPanel}
+            >
+              Add destination
+            </Button>
+          </Shortcut>
         </div>
       </div>
 
@@ -304,13 +314,6 @@ export const Destinations = () => {
           />
         )}
 
-        {isLocalETLNotSetUp && (
-          <Admonition
-            type="default"
-            title="ETL API not set up locally — destinations cannot be managed"
-          />
-        )}
-
         {isLoading ? (
           <GenericSkeletonLoader />
         ) : hasReplicas || hasDestinations ? (
@@ -368,27 +371,20 @@ export const Destinations = () => {
         ) : (
           !isLoading &&
           !hasErrorsFetchingData && (
-            <div
-              className={cn(
-                'w-full',
-                'border border-dashed bg-surface-100 border-overlay',
-                'flex flex-col px-16 rounded-lg justify-center items-center py-8 mt-4'
-              )}
+            <EmptyStatePresentational
+              icon={Database}
+              title="Add a replication destination"
+              description="Deploy a read replica for lower latency and workload isolation, or connect a Pipelines destination for analytics workloads."
             >
-              <h4>Replication keeps your data in sync across systems</h4>
-              <p className="text-foreground-light text-sm text-balance text-center mt-1">
-                Deploy Read Replicas for lower latency and workload isolation, or add a Pipelines
-                destination for analytics workloads.
-              </p>
               <Button
+                variant="default"
                 icon={<Plus />}
                 disabled={!newDestinationDefaultType}
                 onClick={openDestinationPanel}
-                className="mt-4"
               >
                 Add destination
               </Button>
-            </div>
+            </EmptyStatePresentational>
           )
         )}
       </div>
@@ -399,6 +395,6 @@ export const Destinations = () => {
         open={showDisablePipelinesDialog}
         setOpen={setShowDisablePipelinesDialog}
       />
-    </>
+    </div>
   )
 }
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/EmptyReplicationDiagram.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/EmptyReplicationDiagram.tsx
index f9f861f60253b..105e544adf76a 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/EmptyReplicationDiagram.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/EmptyReplicationDiagram.tsx
@@ -30,7 +30,7 @@ const ReplicationDiagramContent = () => {
     resolvedTheme === 'dark' ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.4)'
 
   return (
-    <div className="nowheel relative min-h-[350px]">
+    <div className="nowheel relative h-[350px] w-full border border-muted rounded-md overflow-hidden">
       <ReactFlow
         // FIXME: https://github.com/xyflow/xyflow/issues/4876
         colorMode={'' as unknown as ColorMode}
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx
index 83a9555cee727..4f1412a4cced4 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/index.tsx
@@ -121,7 +121,7 @@ const ReplicationDiagramContent = () => {
   }, [nodes, isSuccessDestinations, skipRenderingDestinations, isSuccessReplicas])
 
   return (
-    <div className="nowheel relative min-h-[350px]">
+    <div className="nowheel relative h-[350px] w-full border border-muted rounded-md overflow-hidden">
       <ReactFlow
         // FIXME: https://github.com/xyflow/xyflow/issues/4876
         colorMode={'' as unknown as ColorMode}
diff --git a/apps/studio/tests/components/OrganizationInvite.test.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.test.tsx
similarity index 92%
rename from apps/studio/tests/components/OrganizationInvite.test.tsx
rename to apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.test.tsx
index baad458e0e9bf..f6f4201b7ccb7 100644
--- a/apps/studio/tests/components/OrganizationInvite.test.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.test.tsx
@@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 
-import { OrganizationInvite } from '@/components/interfaces/OrganizationInvite/OrganizationInvite'
+import { OrganizationInvite } from './OrganizationInvite'
 import type { OrganizationInviteByToken } from '@/data/organization-members/organization-invitation-token-query'
 import type { ProfileContextType } from '@/lib/profile'
 import { render } from '@/tests/helpers'
@@ -172,6 +172,20 @@ describe('OrganizationInvite', () => {
     })
   })
 
+  test('renders an inline error when joining the organization fails', () => {
+    mocks.useAcceptInvitationMutation.mockReturnValue({
+      mutate: mocks.acceptInvitation,
+      isPending: false,
+      error: responseError('You are already a member of this organization'),
+    })
+
+    render(<OrganizationInvite />)
+
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      'Failed to join organization: You are already a member of this organization'
+    )
+  })
+
   test('renders a wrong-account warning and signs out', async () => {
     const user = userEvent.setup()
     mocks.useInvitationQuery.mockReturnValue({
@@ -225,7 +239,7 @@ describe('OrganizationInvite', () => {
 
     rerender(<OrganizationInvite />)
 
-    expect(screen.getByText('Invite invalid')).toBeInTheDocument()
+    expect(screen.getByText('Invalid invitation')).toBeInTheDocument()
     expect(
       screen.getByText(
         'Open the full invite link again, or ask the organization owner for a new invite.'
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index 6b150756a5d91..7e62eb43785b2 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -1,8 +1,7 @@
 import { useIsLoggedIn, useParams } from 'common'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import type { ReactNode } from 'react'
-import { toast } from 'sonner'
+import { type ReactNode } from 'react'
 import { Button, Card, CardContent } from 'ui'
 import { Admonition } from 'ui-patterns/Admonition'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
@@ -25,9 +24,9 @@ import { useProfile, useProfileNameAndPicture } from '@/lib/profile'
 export const OrganizationInvite = () => {
   const router = useRouter()
   const isLoggedIn = useIsLoggedIn()
+  const { slug, token } = useParams()
   const { profile, isLoading: isLoadingProfile } = useProfile()
   const { username, avatarUrl, primaryEmail } = useProfileNameAndPicture()
-  const { slug, token } = useParams()
 
   const isSignUpEnabled = useIsFeatureEnabled('dashboard_auth:sign_up')
 
@@ -70,15 +69,17 @@ export const OrganizationInvite = () => {
 
   const mfaRequiredError = error?.message.includes('MFA required')
 
-  const { mutate: joinOrganization, isPending: isJoining } =
-    useOrganizationAcceptInvitationMutation({
-      onSuccess: () => {
-        router.push('/organizations')
-      },
-      onError: (error) => {
-        toast.error(`Failed to join organization: ${error.message}`)
-      },
-    })
+  const {
+    mutate: joinOrganization,
+    isPending: isJoining,
+    error: joinError,
+  } = useOrganizationAcceptInvitationMutation({
+    onSuccess: () => {
+      router.push('/organizations')
+    },
+    // [Joshen] Silence the default toast handler
+    onError: () => {},
+  })
 
   async function handleJoinOrganization() {
     if (!slug) return console.error('Slug is required')
@@ -196,6 +197,13 @@ export const OrganizationInvite = () => {
         <Button asChild variant="text" block>
           <Link href="/organizations">Decline</Link>
         </Button>
+        {joinError && (
+          <div className="mt-3 border-t border-muted pt-5">
+            <p role="alert" className="text-center text-xs text-destructive text-balance">
+              Failed to join organization: {joinError.message}
+            </p>
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/apps/studio/tests/components/OrganizationInvite.utils.test.ts b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.test.ts
similarity index 96%
rename from apps/studio/tests/components/OrganizationInvite.utils.test.ts
rename to apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.test.ts
index c119fb4653170..6d6c7cc7c8da4 100644
--- a/apps/studio/tests/components/OrganizationInvite.utils.test.ts
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.test.ts
@@ -4,7 +4,7 @@ import {
   getOrganizationInviteContent,
   getOrganizationInviteStatus,
   type OrganizationInviteStatus,
-} from '@/components/interfaces/OrganizationInvite/OrganizationInvite.utils'
+} from './OrganizationInvite.utils'
 import type { OrganizationInviteByToken } from '@/data/organization-members/organization-invitation-token-query'
 import type { ResponseError } from '@/types'
 
@@ -101,7 +101,7 @@ describe('OrganizationInvite utils', () => {
     ['ready', 'Join Acme Corp', 'You have been invited to join this Supabase organization'],
     ['wrong-account', 'Wrong account', undefined],
     ['expired', 'Invite expired', undefined],
-    ['invalid', 'Invite invalid', undefined],
+    ['invalid', 'Invalid invitation', undefined],
     ['no-longer-valid', 'Invite no longer available', undefined],
     ['error', 'Unable to load invitation', undefined],
   ])('returns content for %s', (status, title, description) => {
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts
index 8738739589bee..53526db5ccf90 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts
@@ -88,7 +88,7 @@ export function getOrganizationInviteContent({
 
   if (status === 'wrong-account') return { title: 'Wrong account' }
   if (status === 'expired') return { title: 'Invite expired' }
-  if (status === 'invalid') return { title: 'Invite invalid' }
+  if (status === 'invalid') return { title: 'Invalid invitation' }
   if (status === 'no-longer-valid') return { title: 'Invite no longer available' }
   if (status === 'error') {
     if (error?.message.includes('MFA required')) {
diff --git a/apps/studio/pages/project/[ref]/database/replication/index.tsx b/apps/studio/pages/project/[ref]/database/replication/index.tsx
index 2d48e5b272170..98097e6481a4d 100644
--- a/apps/studio/pages/project/[ref]/database/replication/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/replication/index.tsx
@@ -1,10 +1,18 @@
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderMeta,
+  PageHeaderSummary,
+  PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { Destinations } from '@/components/interfaces/Database/Replication/Destinations'
 import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
 import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
 import { DefaultLayout } from '@/components/layouts/DefaultLayout'
-import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
 import { HighAvailabilityDisabledEmptyState } from '@/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState'
 import { UnknownInterface } from '@/components/ui/UnknownInterface'
 import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
@@ -35,34 +43,27 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
 
   return (
     <PipelineRequestStatusProvider>
-      <ScaffoldContainer>
-        <ScaffoldSection isFullWidth>
-          <div className="w-full mb-6">
-            <div className="flex items-center gap-x-2 mb-1">
-              <h3 className="text-foreground text-xl prose">Replication</h3>
-            </div>
-            <p className="prose text-sm max-w-full">
-              Deploy Read Replicas across multiple regions, or use Pipelines to replicate database
-              changes to analytics destinations.
-            </p>
-          </div>
-        </ScaffoldSection>
-      </ScaffoldContainer>
+      <PageHeader size="large">
+        <PageHeaderMeta>
+          <PageHeaderSummary>
+            <PageHeaderTitle>Replication</PageHeaderTitle>
+            <PageHeaderDescription>Read replicas and analytics pipelines</PageHeaderDescription>
+          </PageHeaderSummary>
+        </PageHeaderMeta>
+      </PageHeader>
 
-      {isPending ? (
-        <ScaffoldContainer>
+      <PageContainer size="large">
+        {isPending ? (
           <GenericSkeletonLoader />
-        </ScaffoldContainer>
-      ) : (
-        <>
-          <ReplicationDiagram />
-          <ScaffoldContainer>
-            <ScaffoldSection isFullWidth className="pt-6!">
+        ) : (
+          <PageSection>
+            <PageSectionContent className="flex flex-col gap-12">
+              <ReplicationDiagram />
               <Destinations />
-            </ScaffoldSection>
-          </ScaffoldContainer>
-        </>
-      )}
+            </PageSectionContent>
+          </PageSection>
+        )}
+      </PageContainer>
     </PipelineRequestStatusProvider>
   )
 }
diff --git a/apps/www/pages/customers.tsx b/apps/www/pages/customers.tsx
index 96b4933890d2a..3cb92c9dcb171 100644
--- a/apps/www/pages/customers.tsx
+++ b/apps/www/pages/customers.tsx
@@ -159,13 +159,7 @@ function CustomerStoriesPage(props: any) {
                           },
                         }}
                       >
-                        <GlassPanel
-                          {...caseStudy}
-                          background={true}
-                          showIconBg={true}
-                          showLink={true}
-                          hasLightIcon
-                        >
+                        <GlassPanel {...caseStudy} showIconBg={true} showLink={true} hasLightIcon>
                           {caseStudy.description}
                         </GlassPanel>
                       </motion.a>
diff --git a/docker/docker-compose.rustfs.yml b/docker/docker-compose.rustfs.yml
index 147da6748dc36..65026567b10a1 100644
--- a/docker/docker-compose.rustfs.yml
+++ b/docker/docker-compose.rustfs.yml
@@ -1,7 +1,7 @@
 services:
 
   rustfs:
-    image: rustfs/rustfs
+    image: rustfs/rustfs:1.0.0-beta.11
     environment:
       RUSTFS_ACCESS_KEY: ${MINIO_ROOT_USER}
       RUSTFS_SECRET_KEY: ${MINIO_ROOT_PASSWORD}
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index 80ab7c507618c..12b7efe9d0549 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -96,6 +96,7 @@ services:
       # https://github.com/supabase/cli/issues/14
       KONG_DNS_ORDER: LAST,A,CNAME
       KONG_DNS_NOT_FOUND_TTL: 1
+      KONG_DNS_VALID_TTL: 5
       KONG_PLUGINS: request-transformer,cors,key-auth,acl,basic-auth,request-termination,ip-restriction,post-function
       KONG_NGINX_PROXY_PROXY_BUFFER_SIZE: 160k
       KONG_NGINX_PROXY_PROXY_BUFFERS: 64 160k
diff --git a/docker/tests/test-s3-backend.sh b/docker/tests/test-s3-backend.sh
index 799994acd7d73..9c0d619a6fa72 100644
--- a/docker/tests/test-s3-backend.sh
+++ b/docker/tests/test-s3-backend.sh
@@ -4,7 +4,7 @@
 #
 # Validates that the S3-compatible backend (MinIO, RustFS, etc.) handles
 # all S3 operations that Storage relies on. Uses the aws cli so the test
-# is backend-agnostic — no vendor-specific tools required.
+# is backend-agnostic - no vendor-specific tools required.
 #
 # Usage:
 #   sh test-s3-backend.sh                   # Uses localhost:9100
@@ -67,11 +67,24 @@ check() {
     fi
 }
 
-# Wrapper for aws commands against the backend directly
+# Wrapper for aws commands against the backend directly.
+#
+# Always exits 0: under `set -e` a failing aws call would kill the suite on the
+# spot, so the check never records a FAIL and no summary is printed. The aws
+# error is echoed to stderr so a FAIL stays explainable even where the caller
+# discards stdout.
 s3() {
-    AWS_ACCESS_KEY_ID="$BACKEND_ACCESS_KEY" \
-    AWS_SECRET_ACCESS_KEY="$BACKEND_SECRET_KEY" \
-    aws "$@" --endpoint-url "$BACKEND_URL" --region "$REGION" 2>&1
+    s3_out=$(AWS_ACCESS_KEY_ID="$BACKEND_ACCESS_KEY" \
+        AWS_SECRET_ACCESS_KEY="$BACKEND_SECRET_KEY" \
+        aws "$@" --endpoint-url "$BACKEND_URL" --region "$REGION" 2>&1) ||
+        echo "  aws $1 $2 failed: $(printf '%s' "$s3_out" | tail -n 1)" >&2
+    printf '%s\n' "$s3_out"
+}
+
+# Wrapper for jq that yields empty output instead of aborting the suite when
+# the payload is not JSON (e.g. an S3 error document) and jq exits non-zero.
+jq_r() {
+    jq -r "$@" 2>/dev/null || true
 }
 
 bucket_name="backend-test-$$"
@@ -86,7 +99,7 @@ echo ""
 
 echo "--- Connectivity ---"
 list_output=$(s3 s3api list-buckets --output json)
-list_ok=$(echo "$list_output" | jq -r 'if .Buckets then "true" else "false" end' 2>/dev/null)
+list_ok=$(echo "$list_output" | jq_r 'if .Buckets then "true" else "false" end')
 check "Backend reachable (ListBuckets)" "true" "$list_ok"
 
 if [ "$list_ok" != "true" ]; then
@@ -105,7 +118,7 @@ echo ""
 echo "--- Storage bucket ---"
 if [ -n "$GLOBAL_S3_BUCKET" ]; then
     storage_bucket_exists=$(s3 s3api list-buckets --output json | \
-        jq -r --arg name "$GLOBAL_S3_BUCKET" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end' 2>/dev/null)
+        jq_r --arg name "$GLOBAL_S3_BUCKET" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end')
     check "GLOBAL_S3_BUCKET ($GLOBAL_S3_BUCKET) exists" "true" "$storage_bucket_exists"
 else
     echo "  SKIP: GLOBAL_S3_BUCKET not set"
@@ -117,11 +130,11 @@ fi
 
 echo ""
 echo "--- CreateBucket ---"
-s3 s3api create-bucket --bucket "$bucket_name" --output json >/dev/null 2>&1
+s3 s3api create-bucket --bucket "$bucket_name" --output json >/dev/null
 
 # Verify create succeeded
 create_found=$(s3 s3api list-buckets --output json | \
-    jq -r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end' 2>/dev/null)
+    jq_r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end')
 check "CreateBucket" "true" "$create_found"
 
 if [ "$create_found" != "true" ]; then
@@ -133,7 +146,7 @@ fi
 
 # Verify in ListBuckets (separate call)
 bucket_found=$(s3 s3api list-buckets --output json | \
-    jq -r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end' 2>/dev/null)
+    jq_r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end')
 check "Bucket visible in ListBuckets" "true" "$bucket_found"
 
 # ---------------------------------------------
@@ -156,7 +169,7 @@ echo ""
 echo "--- ListObjectsV2 ---"
 list_objects=$(s3 s3api list-objects-v2 --bucket "$bucket_name" --output json)
 object_found=$(echo "$list_objects" | \
-    jq -r '[.Contents[]? | .Key] | if any(. == "test-file.txt") then "true" else "false" end' 2>/dev/null)
+    jq_r '[.Contents[]? | .Key] | if any(. == "test-file.txt") then "true" else "false" end')
 check "Object found in ListObjectsV2" "true" "$object_found"
 
 # ---------------------------------------------
@@ -166,7 +179,7 @@ check "Object found in ListObjectsV2" "true" "$object_found"
 echo ""
 echo "--- HeadObject ---"
 head_output=$(s3 s3api head-object --bucket "$bucket_name" --key "test-file.txt" --output json)
-head_size=$(echo "$head_output" | jq -r '.ContentLength // 0' 2>/dev/null)
+head_size=$(echo "$head_output" | jq_r '.ContentLength // 0')
 original_size=$(wc -c < "$tmpfile" | tr -d ' ')
 check "HeadObject returns correct size" "$original_size" "$head_size"
 rm -f "$tmpfile"
@@ -207,7 +220,7 @@ echo "--- DeleteObject ---"
 s3 s3 rm "s3://$bucket_name/test-copy.txt" >/dev/null
 list_after_delete=$(s3 s3api list-objects-v2 --bucket "$bucket_name" --output json)
 copy_gone=$(echo "$list_after_delete" | \
-    jq -r '[.Contents[]? | .Key] | if any(. == "test-copy.txt") then "false" else "true" end' 2>/dev/null)
+    jq_r '[.Contents[]? | .Key] | if any(. == "test-copy.txt") then "false" else "true" end')
 check "Deleted object no longer listed" "true" "$copy_gone"
 
 # ---------------------------------------------
@@ -224,7 +237,7 @@ large_ok=$(echo "$large_put" | grep -q "upload:" && echo "true" || echo "false")
 check "Multipart upload (7MB)" "true" "$large_ok"
 
 large_head=$(s3 s3api head-object --bucket "$bucket_name" --key "large-file.bin" --output json)
-remote_size=$(echo "$large_head" | jq -r '.ContentLength // 0' 2>/dev/null)
+remote_size=$(echo "$large_head" | jq_r '.ContentLength // 0')
 check "Multipart size matches ($large_size bytes)" "$large_size" "$remote_size"
 
 large_download=$(mktemp); cleanup_files="$cleanup_files $large_download"
@@ -250,12 +263,12 @@ rm -f "$batch_file"
 delete_objects_output=$(s3 s3api delete-objects --bucket "$bucket_name" \
     --delete '{"Objects":[{"Key":"batch-a.txt"},{"Key":"batch-b.txt"},{"Key":"batch-c.txt"}]}' \
     --output json)
-deleted_count=$(echo "$delete_objects_output" | jq -r '.Deleted | length' 2>/dev/null)
+deleted_count=$(echo "$delete_objects_output" | jq_r '.Deleted | length')
 check "DeleteObjects removed 3 objects" "3" "$deleted_count"
 
 # Verify all gone
 batch_list=$(s3 s3api list-objects-v2 --bucket "$bucket_name" --prefix "batch-" --output json)
-batch_remaining=$(echo "$batch_list" | jq -r '[.Contents[]?] | length' 2>/dev/null)
+batch_remaining=$(echo "$batch_list" | jq_r '[.Contents[]?] | length')
 check "Batch-deleted objects gone" "0" "$batch_remaining"
 
 # ---------------------------------------------
@@ -270,7 +283,7 @@ s3 s3 cp "$presign_file" "s3://$bucket_name/presign-test.txt" >/dev/null
 rm -f "$presign_file"
 
 presigned_url=$(s3 s3 presign "s3://$bucket_name/presign-test.txt")
-presign_body=$(curl -s "$presigned_url")
+presign_body=$(curl -s "$presigned_url" || true)
 check "Presigned URL returns correct content" "presigned content test" "$presign_body"
 
 # ---------------------------------------------
@@ -342,7 +355,7 @@ echo "--- Cleanup ---"
 s3 s3 rm "s3://$bucket_name/" --recursive >/dev/null
 s3 s3api delete-bucket --bucket "$bucket_name" >/dev/null
 bucket_gone=$(s3 s3api list-buckets --output json | \
-    jq -r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "false" else "true" end' 2>/dev/null)
+    jq_r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "false" else "true" end')
 check "Test bucket deleted" "true" "$bucket_gone"
 
 # ---------------------------------------------
diff --git a/docker/tests/test-s3.sh b/docker/tests/test-s3.sh
index 939547dd1c701..38db52c298a50 100644
--- a/docker/tests/test-s3.sh
+++ b/docker/tests/test-s3.sh
@@ -3,7 +3,7 @@
 # Test S3 protocol endpoint for self-hosted Supabase Storage.
 #
 # Verifies that the S3-compatible endpoint at /storage/v1/s3 works with
-# standard S3 clients — the same way end users interact with it via
+# standard S3 clients - the same way end users interact with it via
 # aws cli, rclone, or other S3-compatible tools.
 #
 # Usage:
@@ -65,11 +65,24 @@ check() {
     fi
 }
 
-# Wrapper for aws s3/s3api commands with correct endpoint and credentials
+# Wrapper for aws s3/s3api commands with correct endpoint and credentials.
+#
+# Always exits 0: under `set -e` a failing aws call would kill the suite on the
+# spot, so the check never records a FAIL and no summary is printed. The aws
+# error is echoed to stderr so a FAIL stays explainable even where the caller
+# discards stdout.
 s3() {
-    AWS_ACCESS_KEY_ID="$S3_ACCESS_KEY" \
-    AWS_SECRET_ACCESS_KEY="$S3_SECRET_KEY" \
-    aws "$@" --endpoint-url "$S3_ENDPOINT" --region "$REGION" 2>&1
+    s3_out=$(AWS_ACCESS_KEY_ID="$S3_ACCESS_KEY" \
+        AWS_SECRET_ACCESS_KEY="$S3_SECRET_KEY" \
+        aws "$@" --endpoint-url "$S3_ENDPOINT" --region "$REGION" 2>&1) ||
+        echo "  aws $1 $2 failed: $(printf '%s' "$s3_out" | tail -n 1)" >&2
+    printf '%s\n' "$s3_out"
+}
+
+# Wrapper for jq that yields empty output instead of aborting the suite when
+# the payload is not JSON (e.g. an S3 error document) and jq exits non-zero.
+jq_r() {
+    jq -r "$@" 2>/dev/null || true
 }
 
 bucket_name="s3-test-$$"
@@ -84,7 +97,7 @@ echo ""
 
 echo "--- S3 ListBuckets ---"
 list_output=$(s3 s3api list-buckets --output json)
-list_ok=$(echo "$list_output" | jq -r 'if .Buckets then "true" else "false" end' 2>/dev/null)
+list_ok=$(echo "$list_output" | jq_r 'if .Buckets then "true" else "false" end')
 check "ListBuckets returns valid response" "true" "$list_ok"
 
 # ---------------------------------------------
@@ -93,11 +106,11 @@ check "ListBuckets returns valid response" "true" "$list_ok"
 
 echo ""
 echo "--- S3 CreateBucket ---"
-s3 s3api create-bucket --bucket "$bucket_name" --output json >/dev/null 2>&1
+s3 s3api create-bucket --bucket "$bucket_name" --output json >/dev/null
 
 # Verify create succeeded
 create_found=$(s3 s3api list-buckets --output json | \
-    jq -r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end' 2>/dev/null)
+    jq_r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end')
 check "CreateBucket" "true" "$create_found"
 
 if [ "$create_found" != "true" ]; then
@@ -109,7 +122,7 @@ fi
 
 # Verify bucket appears in ListBuckets (separate call)
 s3_bucket_found=$(s3 s3api list-buckets --output json | \
-    jq -r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end' 2>/dev/null)
+    jq_r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "true" else "false" end')
 check "Bucket visible in ListBuckets" "true" "$s3_bucket_found"
 
 # ---------------------------------------------
@@ -132,7 +145,7 @@ echo ""
 echo "--- S3 ListObjectsV2 ---"
 list_objects=$(s3 s3api list-objects-v2 --bucket "$bucket_name" --output json)
 object_found=$(echo "$list_objects" | \
-    jq -r '[.Contents[]? | .Key] | if any(. == "s3-uploaded.txt") then "true" else "false" end' 2>/dev/null)
+    jq_r '[.Contents[]? | .Key] | if any(. == "s3-uploaded.txt") then "true" else "false" end')
 check "Object found in ListObjectsV2" "true" "$object_found"
 
 # ---------------------------------------------
@@ -142,7 +155,7 @@ check "Object found in ListObjectsV2" "true" "$object_found"
 echo ""
 echo "--- S3 HeadObject ---"
 head_output=$(s3 s3api head-object --bucket "$bucket_name" --key "s3-uploaded.txt" --output json)
-head_size=$(echo "$head_output" | jq -r '.ContentLength // 0' 2>/dev/null)
+head_size=$(echo "$head_output" | jq_r '.ContentLength // 0')
 original_size=$(wc -c < "$tmpfile" | tr -d ' ')
 check "HeadObject returns correct size" "$original_size" "$head_size"
 rm -f "$tmpfile"
@@ -185,7 +198,7 @@ s3 s3 rm "s3://$bucket_name/s3-copied.txt" >/dev/null
 # Verify object is gone
 list_after_delete=$(s3 s3api list-objects-v2 --bucket "$bucket_name" --output json)
 copied_gone=$(echo "$list_after_delete" | \
-    jq -r '[.Contents[]? | .Key] | if any(. == "s3-copied.txt") then "false" else "true" end' 2>/dev/null)
+    jq_r '[.Contents[]? | .Key] | if any(. == "s3-copied.txt") then "false" else "true" end')
 check "Deleted object no longer listed" "true" "$copied_gone"
 
 # ---------------------------------------------
@@ -203,7 +216,7 @@ check "Multipart upload (7MB)" "true" "$large_ok"
 
 # Verify size via HeadObject
 large_head=$(s3 s3api head-object --bucket "$bucket_name" --key "large-file.bin" --output json)
-remote_size=$(echo "$large_head" | jq -r '.ContentLength // 0' 2>/dev/null)
+remote_size=$(echo "$large_head" | jq_r '.ContentLength // 0')
 check "Multipart upload size matches ($large_size bytes)" "$large_size" "$remote_size"
 
 # Download and verify size
@@ -248,7 +261,7 @@ s3 s3 cp "$presign_file" "s3://$bucket_name/presign-test.txt" >/dev/null
 rm -f "$presign_file"
 
 presigned_url=$(s3 s3 presign "s3://$bucket_name/presign-test.txt")
-presign_body=$(curl -s "$presigned_url")
+presign_body=$(curl -s "$presigned_url" || true)
 check "Presigned URL returns correct content" "presigned content test" "$presign_body"
 
 # ---------------------------------------------
@@ -276,7 +289,7 @@ s3 s3 rm "s3://$bucket_name/" --recursive >/dev/null
 s3 s3api delete-bucket --bucket "$bucket_name" >/dev/null
 # Verify bucket is gone
 bucket_gone=$(s3 s3api list-buckets --output json | \
-    jq -r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "false" else "true" end' 2>/dev/null)
+    jq_r --arg name "$bucket_name" '[.Buckets[] | .Name] | if any(. == $name) then "false" else "true" end')
 check "Bucket deleted via S3" "true" "$bucket_gone"
 
 # ---------------------------------------------
diff --git a/docker/tests/test-self-hosted.sh b/docker/tests/test-self-hosted.sh
index a72638abdec4b..52b11cc055883 100644
--- a/docker/tests/test-self-hosted.sh
+++ b/docker/tests/test-self-hosted.sh
@@ -167,7 +167,7 @@ else
     check "Create user (admin)" "true" "false"
 fi
 
-# Public signup (optional — depends on email autoconfirm setting)
+# Public signup (optional - depends on email autoconfirm setting)
 signup_email="smoke-signup-$$@example.com"
 signup_resp=$(http_body "$BASE_URL/auth/v1/signup" \
     -H "apikey: $ANON_KEY" \
diff --git a/docker/volumes/api/kong.yml b/docker/volumes/api/kong.yml
index 13fb01e1fca17..84433c13657d4 100644
--- a/docker/volumes/api/kong.yml
+++ b/docker/volumes/api/kong.yml
@@ -305,7 +305,7 @@ services:
             - anon
 
   ## Storage API endpoint (with Authorization header transformation).
-  ## No key-auth — S3 protocol requests don't carry an apikey header.
+  ## No key-auth - S3 protocol requests don't carry an apikey header.
   ##
   ## The request-transformer translates opaque API keys to asymmetric JWTs
   ## and passes through existing Authorization headers (user JWTs, AWS SigV4).
diff --git a/packages/config/typography.config.js b/packages/config/typography.config.js
index 508f17766a5b5..8607488bbfdbc 100644
--- a/packages/config/typography.config.js
+++ b/packages/config/typography.config.js
@@ -130,13 +130,15 @@ module.exports = {
               paddingBottom: '2px',
               fontWeight: '400',
               opacity: 1,
-              color: 'var(--foreground-default)',
+              // Match Studio InlineLink: inherit body color, foreground on hover
+              color: 'inherit',
               textDecorationLine: 'underline',
-              textDecorationColor: 'var(--foreground-muted)',
+              textDecorationColor: 'inherit',
               textDecorationThickness: '1px',
               textUnderlineOffset: '2px',
             },
             'a:hover': {
+              color: 'var(--foreground-default)',
               textDecorationColor: 'var(--foreground-default)',
             },
             figcaption: {
@@ -199,7 +201,7 @@ module.exports = {
             '--tw-prose-body': 'var(--foreground-light)',
             '--tw-prose-headings': 'var(--foreground-default)',
             '--tw-prose-lead': 'var(--foreground-light)',
-            '--tw-prose-links': 'hsl(var(--brand-500))',
+            '--tw-prose-links': 'inherit',
             '--tw-prose-bold': 'var(--foreground-light)',
             '--tw-prose-counters': 'var(--foreground-light)',
             '--tw-prose-bullets': 'var(--foreground-muted)',
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index 1955a7f3195c3..acae169ac4488 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -394,10 +394,6 @@
       "import": "./src/GlassPanel/index.tsx",
       "types": "./src/GlassPanel/index.tsx"
     },
-    "./IconPanel": {
-      "import": "./src/IconPanel/index.tsx",
-      "types": "./src/IconPanel/index.tsx"
-    },
     "./Image/Image": {
       "import": "./src/Image/Image.tsx",
       "types": "./src/Image/Image.tsx"
diff --git a/packages/ui-patterns/src/Admonition/Admonition.test.tsx b/packages/ui-patterns/src/Admonition/Admonition.test.tsx
index 0f0482fd0ef81..a86b6e6733999 100644
--- a/packages/ui-patterns/src/Admonition/Admonition.test.tsx
+++ b/packages/ui-patterns/src/Admonition/Admonition.test.tsx
@@ -119,7 +119,7 @@ describe('Admonition', () => {
     expect(within(screen.getByRole('alert')).queryByText(`${name}:`)).not.toBeInTheDocument()
   })
 
-  it('renders the title as a paragraph with its own margin', () => {
+  it('renders the title via AlertTitle (paragraph, not a heading)', () => {
     render(<Admonition type="note" title="Manual approval required" description="Body copy." />)
 
     const note = screen.getByRole('alert', { name: 'Note' })
@@ -127,8 +127,8 @@ describe('Admonition', () => {
 
     expect(note.querySelector('h1, h2, h3, h4, h5, h6')).not.toBeInTheDocument()
     expect(title.tagName).toBe('P')
-    expect(title).toHaveAttribute('data-admonition-title')
-    expect(title).toHaveClass('mb-0.5')
+    expect(title).toHaveAttribute('data-slot', 'alert-title')
+    expect(title).toHaveClass('!mt-0', 'mb-0.5', 'font-medium')
   })
 
   it('wraps a string description in a paragraph', () => {
@@ -137,4 +137,19 @@ describe('Admonition', () => {
     const note = screen.getByRole('alert', { name: 'Note' })
     expect(within(note).getByText('Body copy.').tagName).toBe('P')
   })
+
+  it('wraps MDX children in AlertDescription', () => {
+    render(
+      <Admonition type="note">
+        <p>Children body copy.</p>
+      </Admonition>
+    )
+
+    const note = screen.getByRole('alert', { name: 'Note' })
+    const paragraph = within(note).getByText('Children body copy.')
+
+    expect(paragraph.tagName).toBe('P')
+    expect(paragraph.parentElement).toHaveClass('text-sm')
+    expect(paragraph.parentElement).toHaveAttribute('data-slot', 'alert-description')
+  })
 })
diff --git a/packages/ui-patterns/src/Admonition/Admonition.tsx b/packages/ui-patterns/src/Admonition/Admonition.tsx
index 530f65658b588..7333aac1d741a 100644
--- a/packages/ui-patterns/src/Admonition/Admonition.tsx
+++ b/packages/ui-patterns/src/Admonition/Admonition.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import { Alert, AlertDescription, cn } from 'ui'
+import { Alert, AlertDescription, AlertTitle, cn } from 'ui'
 
 import { TYPE_LABEL, TYPE_TO_VARIANT } from './Admonition.constants'
 import type { AdmonitionLayout, AdmonitionProps, AdmonitionType } from './Admonition.types'
@@ -7,6 +7,9 @@ import { AdmonitionTypeIcon } from './AdmonitionIcons'
 
 export type { AdmonitionLayout, AdmonitionProps, AdmonitionType }
 
+const admonitionBodyClassName =
+  '[&_p]:!mt-0 [&_p]:!mb-1.5 [&_p:last-child]:!mb-0 [&_ul]:!my-1.5 [&_ol]:!my-1.5 [&_li]:!my-0.5'
+
 export const Admonition = forwardRef<
   React.ComponentRef<typeof Alert>,
   Omit<
@@ -66,28 +69,31 @@ export const Admonition = forwardRef<
               ]
             )}
           >
-            <div
-              {...childProps?.description}
-              className={cn(
-                'text-foreground-light',
-                // Exclude the title <p> so these MDX body resets don't override its mb-0.5
-                // ([&_p]:!mb-1.5 beats !mb-0.5 on specificity: class+element vs class).
-                '[&_p:not([data-admonition-title])]:!mt-0 [&_p:not([data-admonition-title])]:!mb-1.5 [&_p:not([data-admonition-title]):last-child]:!mb-0',
-                '[&_ul]:!my-1.5 [&_ol]:!my-1.5 [&_li]:!my-0.5',
-                childProps?.description?.className
-              )}
-            >
+            <div>
               {title && (
-                <p
+                <AlertTitle
                   {...childProps?.title}
-                  data-admonition-title
-                  className={cn('mb-0.5 font-medium text-foreground', childProps?.title?.className)}
+                  className={cn('text-foreground', childProps?.title?.className)}
                 >
                   {title}
-                </p>
+                </AlertTitle>
+              )}
+              {description && (
+                <AlertDescription
+                  {...childProps?.description}
+                  className={cn(admonitionBodyClassName, childProps?.description?.className)}
+                >
+                  {description}
+                </AlertDescription>
+              )}
+              {children && (
+                <AlertDescription
+                  {...childProps?.description}
+                  className={cn(admonitionBodyClassName, childProps?.description?.className)}
+                >
+                  {children}
+                </AlertDescription>
               )}
-              {description && <AlertDescription>{description}</AlertDescription>}
-              {children}
             </div>
             {actions && (
               <div
diff --git a/packages/ui-patterns/src/GlassPanel/index.tsx b/packages/ui-patterns/src/GlassPanel/index.tsx
index 9fcf7d7586fc6..430a8d48bb48f 100644
--- a/packages/ui-patterns/src/GlassPanel/index.tsx
+++ b/packages/ui-patterns/src/GlassPanel/index.tsx
@@ -7,10 +7,11 @@ import { cn } from 'ui'
 
 interface Props {
   title: string
+  /** Brand/company name for logo alt text when the logo is the only place that name appears. */
+  name?: string
   icon?: string | React.ReactNode
   children?: React.ReactNode
   header?: string
-  background?: boolean
   className?: string
   logo?: string
   logoInverse?: string
@@ -41,18 +42,18 @@ const LogoComponent = ({
   logoImage,
   className,
   wrapperClassName,
-  title,
+  alt,
 }: {
-  title: string
   logoImage: string
   className?: string
   wrapperClassName?: string
+  alt: string
 }) => (
-  <div className={cn('relative box-content p-8 pb-0', wrapperClassName)}>
+  <div className={cn('relative box-content p-4 pb-0 md:p-6 md:pb-0', wrapperClassName)}>
     <div className="relative h-[33px] w-auto max-w-[145px]">
       <Image
         src={logoImage}
-        alt={title}
+        alt={alt}
         fill
         sizes="100%"
         className={cn('object-contain object-left', className)}
@@ -63,10 +64,10 @@ const LogoComponent = ({
 
 export const GlassPanel = ({
   title,
+  name,
   icon,
   children,
   header,
-  background = true,
   logo,
   logoInverse,
   hasLightIcon,
@@ -76,36 +77,34 @@ export const GlassPanel = ({
   className,
 }: Props) => {
   const { resolvedTheme } = useTheme()
+  const logoAlt = name ?? ''
 
   return (
     <div
       className={cn(
         'relative',
         'h-full',
-        'group',
         'cursor-pointer',
         'overflow-hidden',
         'border rounded-lg',
         'text-left',
-        background
-          ? 'hover:border-strong bg-surface-75'
-          : 'border-muted hover:border-default bg-transparent',
+        'bg-surface-75 hover:border-strong',
         'transition',
         className
       )}
     >
       {logoInverse && (
         <LogoComponent
-          title={title}
           logoImage={logoInverse}
+          alt={logoAlt}
           className="opacity-50"
           wrapperClassName="hidden dark:block"
         />
       )}
       {logo && (
         <LogoComponent
-          title={title}
           logoImage={logo}
+          alt={logoAlt}
           className="opacity-75"
           wrapperClassName={logoInverse ? 'block dark:hidden' : undefined}
         />
@@ -119,16 +118,12 @@ export const GlassPanel = ({
             "
         />
       )}
-      {/* <div
-        className="absolute left-0 top-0 w-[250px] h-[150px] transform scale-100 opacity-50 group-hover:scale-150 group-hover:opacity-100 transition-all duration-700 ease-out"
-        style={{ background: `radial-gradient(100% 100% at 0% 0%, #3EACCF18, transparent)` }}
-      /> */}
       <div
         className={cn(
-          'px-8 pb-8 relative',
+          'relative px-4.5 py-4 md:px-5.5 md:py-5.5',
           'flex flex-col h-full',
-          icon ? 'gap-6' : 'gap-2',
-          !header ? 'pt-8' : ''
+          icon ? 'gap-3' : 'gap-2',
+          header && 'pt-0'
         )}
       >
         <div className="flex items-center gap-3">
@@ -136,7 +131,7 @@ export const GlassPanel = ({
             <IconBackground showIconBg={showIconBg}>
               <img
                 className="w-5"
-                alt={title}
+                alt=""
                 src={`${icon}${
                   hasLightIcon && !resolvedTheme?.includes('dark') ? '-light' : ''
                 }.svg`}
diff --git a/packages/ui-patterns/src/IconPanel/index.tsx b/packages/ui-patterns/src/IconPanel/index.tsx
deleted file mode 100644
index 05fec9834e697..0000000000000
--- a/packages/ui-patterns/src/IconPanel/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-'use client'
-
-import { ChevronRight } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import * as React from 'react'
-import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-
-interface Props {
-  title?: string
-  tooltip?: string
-
-  icon?: string | React.ReactNode
-  iconSize?: 'sm' | 'lg'
-  children?: React.ReactNode
-
-  background?: boolean
-
-  hasLightIcon?: boolean
-
-  showLink?: boolean
-}
-
-export const IconPanel = ({
-  title,
-  tooltip,
-  icon,
-  iconSize = 'sm',
-  children,
-  background = true,
-  hasLightIcon,
-  showLink = false,
-}: Props) => {
-  const { theme } = useTheme()
-
-  const IconContainer: React.FC<React.PropsWithChildren> = (props) => {
-    return (
-      <div
-        className={[
-          'relative',
-          'flex items-center justify-center shrink-0',
-          iconSize === 'lg' ? 'h-16 w-16 rounded-lg' : 'h-10 w-10 rounded-lg',
-          'group',
-          'cursor-pointer',
-          'overflow-hidden',
-          'border rounded-full',
-          background
-            ? 'hover:border-strong bg-surface-100'
-            : 'border-muted hover:border-default bg-transparent',
-          'transition',
-        ].join(' ')}
-      >
-        {props.children}
-      </div>
-    )
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div className={['relative', 'group'].join(' ')} data-tip={tooltip}>
-          <div className={['peer relative', 'flex flex-col', icon ? 'gap-6' : 'gap-2'].join(' ')}>
-            <div
-              className={[
-                'flex',
-                children ? 'items-start' : 'items-center',
-                (title || showLink) && 'gap-3',
-              ].join(' ')}
-            >
-              {typeof icon === 'string' ? (
-                <IconContainer>
-                  <img
-                    className={iconSize === 'lg' ? 'w-8' : 'w-5'}
-                    src={`${icon}${hasLightIcon && theme !== 'dark' ? '-light' : ''}.svg`}
-                    alt={
-                      title !== undefined
-                        ? `${title} Icon`
-                        : tooltip !== undefined
-                          ? `${tooltip} Icon`
-                          : 'Icon'
-                    }
-                  />
-                </IconContainer>
-              ) : (
-                <IconContainer>{icon}</IconContainer>
-              )}
-              <div className="flex flex-col gap-1">
-                <div className="flex items-center gap-3">
-                  {title && <h5 className="text-base text-foreground m-0">{title}</h5>}
-                </div>
-                {children && (
-                  <span className="text-sm text-foreground-light not-prose">{children}</span>
-                )}
-                {showLink && (
-                  <span className="text-brand-link justify-end text-sm">Learn more</span>
-                )}
-              </div>
-            </div>
-          </div>
-          <div
-            className="
-        absolute transition-all ease-in
-        -z-10 -inset-3 rounded-2xl
-        bg-surface-100 opacity-0 peer-hover:opacity-100"
-          ></div>
-        </div>
-      </TooltipTrigger>
-
-      {tooltip && (
-        <TooltipContent side="top" className="">
-          {tooltip}
-        </TooltipContent>
-      )}
-    </Tooltip>
-  )
-}
diff --git a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.test.tsx b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.test.tsx
index 83c0cb998c41b..fa4e5022f994a 100644
--- a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.test.tsx
+++ b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.test.tsx
@@ -60,6 +60,25 @@ describe('CustomHTMLElementsUtils', () => {
 
         expect(result).toStrictEqual('function')
       })
+
+      it('flattens nested element children including icons without props.children', () => {
+        const value = [
+          'See ',
+          {
+            props: {
+              children: [
+                'pg_prewarm',
+                // lucide icons (and similar) are objects without useful text children
+                { $$typeof: Symbol.for('react.element'), type: 'svg', props: undefined },
+              ],
+            },
+          },
+        ]
+
+        const result = getAnchor(value)
+
+        expect(result).toStrictEqual('see-pgprewarm')
+      })
     })
 
     describe('when value is a string', () => {
diff --git a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
index 244210c945ae8..082e2a1c7f6fe 100644
--- a/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
+++ b/packages/ui/src/components/CustomHTMLElements/CustomHTMLElements.utils.ts
@@ -1,3 +1,20 @@
+/**
+ * Flatten React node trees to plain text for heading anchor ids.
+ * MDX headings often mix strings with inline nodes (`code`, links, icons);
+ * older code assumed every non-string had `props.children` and crashed when
+ * that was missing (e.g. lucide icons inside docs MDX links).
+ */
+const flattenNodeText = (node: unknown): string => {
+  if (node == null || typeof node === 'boolean') return ''
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(flattenNodeText).join('')
+  if (typeof node === 'object' && node !== null && 'props' in node) {
+    const props = (node as { props?: { children?: unknown } }).props
+    return flattenNodeText(props?.children)
+  }
+  return ''
+}
+
 // Check if heading has custom anchor first, before forming the anchor based on the title
 export const getAnchor = (text: any, { id }: { id?: string } = {}): string | undefined => {
   if (id) {
@@ -15,27 +32,22 @@ export const getAnchor = (text: any, { id }: { id?: string } = {}): string | und
 
       const formattedText = text
         .map((x) => {
-          if (typeof x !== 'string') {
-            return x.props.children
+          if (typeof x === 'string') {
+            return x.trim()
           }
-
-          return x.trim()
+          return flattenNodeText(x)
         })
         .map((x) => {
           if (typeof x !== 'string') {
             return x
           }
-
           return slugify(x)
         })
 
       return formattedText.join('-').toLowerCase()
     } else {
-      const anchor = text.props.children
-      if (typeof anchor === 'string') {
-        return slugify(anchor)
-      }
-      return anchor
+      const flattened = flattenNodeText(text).trim()
+      return flattened ? slugify(flattened) : undefined
     }
   } else if (typeof text === 'string') {
     if (hasCustomAnchor(text)) {
diff --git a/packages/ui/src/components/shadcn/ui/alert.tsx b/packages/ui/src/components/shadcn/ui/alert.tsx
index 56e00a1b8fc6d..e1590d9857efd 100644
--- a/packages/ui/src/components/shadcn/ui/alert.tsx
+++ b/packages/ui/src/components/shadcn/ui/alert.tsx
@@ -31,40 +31,54 @@ const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+  <div
+    ref={ref}
+    data-slot="alert"
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
 ))
 Alert.displayName = 'Alert'
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => <h5 ref={ref} className={cn('mb-0.5', className)} {...props} />
-)
-AlertTitle.displayName = 'AlertTitle'
-
-const AlertDescription = React.forwardRef<
+const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  // Automatically wrap primitive text nodes (string/number) in <p> tags for semantic HTML
-  const content =
-    typeof children === 'string' || typeof children === 'number' ? <p>{children}</p> : children
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="alert-title"
+    className={cn('!mt-0 mb-0.5 font-medium', className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    // Automatically wrap primitive text nodes (string/number) in <p> tags for semantic HTML
+    const content =
+      typeof children === 'string' || typeof children === 'number' ? <p>{children}</p> : children
 
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'text-sm text-foreground-light font-normal',
-        // Optically align text in container
-        'mb-0.5',
-        // Handle paragraphs
-        '[&_p]:mb-0.5 [&_p:last-child]:mb-0',
-        className
-      )}
-      {...props}
-    >
-      {content}
-    </div>
-  )
-})
+    return (
+      <div
+        ref={ref}
+        data-slot="alert-description"
+        className={cn(
+          'text-sm text-foreground-light font-normal text-balance md:text-pretty',
+          // Optically align text in container
+          'mb-0.5',
+          // Handle paragraphs (keep Studio density; shadcn uses mb-4)
+          '[&_p]:mb-0.5 [&_p:last-child]:mb-0',
+          className
+        )}
+        {...props}
+      >
+        {content}
+      </div>
+    )
+  }
+)
 AlertDescription.displayName = 'AlertDescription'
 
 export { Alert, AlertDescription, AlertTitle }