diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index 8f48264e86e09..5ad8d8d0bf72b 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -53,6 +53,8 @@ Never hand-edit generated files: `packages/api-types/types/**`, `**/routeTree.ge
 
 **Language** — Use U.S. English everywhere.
 
+**Public surfaces** — this repo is public: PR descriptions, issues, and code comments are world-readable. Keep internal content out of them: absolute production metrics (event counts, user counts, revenue figures: state percentages, ratios, or relative change instead), internal decision detail (vendor, legal, pricing, or strategy discussions), and competitor names (protocol identifiers such as user-agent strings are fine). Put that context in the Linear issue and link it.
+
 ## Skills
 
 The skills in `.claude/skills/` are the source of truth for conventions — load the relevant ones before working, don't guess:
diff --git a/.github/workflows/studio-e2e-test.yml b/.github/workflows/studio-e2e-test.yml
index 9573189273d52..67da2f67312e2 100644
--- a/.github/workflows/studio-e2e-test.yml
+++ b/.github/workflows/studio-e2e-test.yml
@@ -44,6 +44,8 @@ jobs:
           filters: |
             studio:
               - 'packages/pg-meta/**'
+              - 'packages/ui/**'
+              - 'packages/ui-patterns/**'
               - 'apps/studio/**'
               - 'apps/ui-library/**'
               - 'apps/design-system/**'
diff --git a/.github/workflows/studio-unit-tests.yml b/.github/workflows/studio-unit-tests.yml
index bed6790239f47..65e65dabcf412 100644
--- a/.github/workflows/studio-unit-tests.yml
+++ b/.github/workflows/studio-unit-tests.yml
@@ -8,6 +8,8 @@ on:
     branches: [master, studio]
     paths:
       - 'apps/studio/**'
+      - 'packages/ui/**'
+      - 'packages/ui-patterns/**'
       - 'pnpm-lock.yaml'
   pull_request:
     branches: [master, studio]
@@ -44,6 +46,8 @@ jobs:
         with:
           filters: |
             relevant:
+              - 'packages/ui/**'
+              - 'packages/ui-patterns/**'
               - 'apps/studio/**'
               - 'pnpm-lock.yaml'
       - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
diff --git a/apps/docs/content/guides/functions/auth-headers.mdx b/apps/docs/content/guides/functions/auth-headers.mdx
index 21d1ac59ef553..e0f982507ba74 100644
--- a/apps/docs/content/guides/functions/auth-headers.mdx
+++ b/apps/docs/content/guides/functions/auth-headers.mdx
@@ -16,7 +16,11 @@ Edge Functions care about two request headers. Sending the wrong credential in t
 | `Authorization` | `Bearer <user-jwt>`                     | A user signed in through Supabase Auth |
 | `apikey`        | `sb_publishable_...` or `sb_secret_...` | Calls from clients or services         |
 
-A common mistake is sending a publishable or secret key as a bearer token: `Authorization: Bearer sb_publishable_...`. The new API keys are not JWTs. The platform check can't validate them, and your handler can't verify them as JWTs either. Instead, put API keys in the `apikey` header.
+<Admonition type="note" title="Don't send API keys as bearer tokens">
+
+A common mistake is sending a publishable or secret key as a bearer token: `Authorization: Bearer sb_publishable_...`. The new API keys are not JWTs. The platform check still accepts them, but your handler can't verify them as JWTs. Instead, put API keys in the `apikey` header.
+
+</Admonition>
 
 You can send both headers together. A signed-in user calling your function through `supabase-js`, for example, sends their session JWT in `Authorization` and the project's publishable key in `apikey`.
 
@@ -26,7 +30,13 @@ When `verify_jwt` is enabled (the default), the platform inspects the `Authoriza
 
 The check validates legacy HS256 JWTs and JWTs signed with the new asymmetric [signing keys](/docs/guides/auth/signing-keys).
 
-The check does not accept an API key. Publishable and secret keys are not JWTs, so callers that send one in the `Authorization` header fail the check before their request reaches your handler.
+Publishable and secret keys are not JWTs, but the check still accepts them in the `Authorization` header, so callers that send one there reach your handler.
+
+<Admonition type="caution" title="API keys and the verify_jwt check">
+
+For migration compatibility, `verify_jwt` accepts publishable and secret keys on either header, so a key on `apikey` passes the check too. The check alone doesn't authenticate a caller that sends only an API key. Reserve `Authorization` for user tokens, and send API keys on `apikey`. To move off legacy keys entirely, migrate to the `@supabase/server` SDK as shown in [Securing Edge Functions](/docs/guides/functions/auth).
+
+</Admonition>
 
 Use the `verify_jwt` flag to match how the function is called:
 
diff --git a/apps/studio/.claude/skills/explorer/SKILL.md b/apps/studio/.claude/skills/explorer/SKILL.md
index 3a086025fe822..96af375105e2b 100644
--- a/apps/studio/.claude/skills/explorer/SKILL.md
+++ b/apps/studio/.claude/skills/explorer/SKILL.md
@@ -31,13 +31,13 @@ Compose the toolbar from slots rather than adding resource-specific props:
   <ExplorerToolbarTitle>{/* static or editable title */}</ExplorerToolbarTitle>
   <ExplorerToolbarActions>
     {/* badges, source controls, display controls, and direct actions */}
-    <ExplorerToolbarAction aria-label="Run query" icon={<Play />} />
+    <ExplorerToolbarAction aria-label="Run query" icon={<Play size={16} strokeWidth={2} />} />
   </ExplorerToolbarActions>
 </ExplorerToolbar>
 ```
 
 - The row defaults to 40px and follows `--header-height` at the `md` breakpoint.
-- Use `ExplorerToolbarAction` for compact direct actions. Icon-only actions are 28px wide automatically.
+- Use `ExplorerToolbarAction` for compact direct actions. Icon-only actions are 28px wide automatically. It defaults to `text-tertiary-foreground` and `hover:text-foreground`. Pass `size={16} strokeWidth={2}` on Lucide icons.
 - Keep execution, persistence, source selection, and other resource state in the consuming Explorer surface.
 - Extend layouts with children and `className`; avoid boolean props for resource-specific variants.
 
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
index 64a91e603df27..a57127f6b65be 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/Form/TokenDetails.tsx
@@ -61,7 +61,7 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         render={({ field }) => (
           <FormItemLayout name="tokenName" label="Name" layout="flex-row-reverse">
             <FormControl>
-              <Input id="tokenName" {...field} placeholder="e.g. CI deploy token" />
+              <Input {...field} placeholder="e.g. CI deploy token" />
             </FormControl>
           </FormItemLayout>
         )}
@@ -72,11 +72,11 @@ export const TokenDetails = ({ control, setValue }: TokenDetailsProps) => {
         name="expiresAt"
         control={control}
         render={({ field }) => (
-          <FormItemLayout name="expiresAt" label="Expires in" layout="flex-row-reverse">
+          <FormItemLayout id="expiresAt" label="Expires in" layout="flex-row-reverse">
             <div className="flex gap-2 w-full">
               <FormControl className="grow">
                 <Select value={field.value} onValueChange={handleExpiryChange}>
-                  <SelectTrigger>
+                  <SelectTrigger id="expiresAt">
                     <SelectValue placeholder="Select an expiry" />
                   </SelectTrigger>
                   <SelectContent>
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
index 8e8c21e29c2a3..a312551064b72 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
@@ -276,13 +276,11 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_SINGLE_PER_USER"
                         label="Enforce single session per user"
                         description="If enabled, all but a user's most recently active session will be terminated."
                       >
                         <FormControl>
                           <Switch
-                            id="SESSIONS_SINGLE_PER_USER"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig || !hasUserSessionsEntitlement}
@@ -300,14 +298,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_TIMEBOX"
                         label="Time-box user sessions"
                         description={`The amount of time before a user is forced to sign in again. Use 0 for never. Maximum ${MAX_SESSIONS_TIMEBOX_HOURS} hours (1 year).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SESSIONS_TIMEBOX"
                               type="number"
                               min={0}
                               {...field}
@@ -332,14 +328,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SESSIONS_INACTIVITY_TIMEOUT"
                         label="Inactivity timeout"
                         description={`The amount of time a user needs to be inactive to be forced to sign in again. Use 0 for never. Maximum ${MAX_SESSIONS_INACTIVITY_TIMEOUT_HOURS} hours (1 year).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SESSIONS_INACTIVITY_TIMEOUT"
                               type="number"
                               min={0}
                               {...field}
@@ -413,14 +407,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="JWT_EXP"
                         label="Access token expiry time"
                         description="How long access tokens are valid for before they must be refreshed. Recommendation: 3600 seconds."
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="JWT_EXP"
                               type="number"
                               min={1}
                               {...field}
@@ -480,13 +472,11 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="REFRESH_TOKEN_ROTATION_ENABLED"
                         label="Detect and revoke potentially compromised refresh tokens"
                         description="Prevent replay attacks from potentially compromised refresh tokens."
                       >
                         <FormControl>
                           <Switch
-                            id="REFRESH_TOKEN_ROTATION_ENABLED"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                             disabled={!canUpdateConfig}
@@ -503,14 +493,12 @@ export const SessionsAuthSettingsForm = () => {
                     render={({ field }) => (
                       <FormItemLayout
                         layout="flex-row-reverse"
-                        name="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                         label="Refresh token reuse interval"
                         description={`Time interval where the same refresh token can be used multiple times to request for an access token. Recommendation: 10 seconds. Maximum ${MAX_REFRESH_TOKEN_REUSE_INTERVAL_SECONDS} seconds (5 minutes).`}
                       >
                         <FormControl className="w-full">
                           <InputGroup>
                             <FormInputGroupInput
-                              id="SECURITY_REFRESH_TOKEN_REUSE_INTERVAL"
                               type="number"
                               min={0}
                               {...field}
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx b/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx
index 14edcaf9f6dfc..0c2511aa07ff9 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerChatToolbar.tsx
@@ -69,7 +69,7 @@ export const ExplorerChatToolbar = ({
     <div className="z-30 sticky top-0">
       <ExplorerToolbar aria-label="Chat toolbar">
         <ExplorerToolbarIcon>
-          <MessageSquare />
+          <MessageSquare size={16} strokeWidth={2} />
         </ExplorerToolbarIcon>
         <ExplorerToolbarTitle onSaveTitle={handleSaveName}>{chat?.name ?? ''}</ExplorerToolbarTitle>
         <ExplorerToolbarActions>
@@ -77,7 +77,7 @@ export const ExplorerChatToolbar = ({
             <DropdownMenuTrigger asChild>
               <ExplorerToolbarAction
                 aria-label="More options"
-                icon={<MoreVertical />}
+                icon={<MoreVertical size={16} strokeWidth={2} />}
                 disabled={isChatLoading}
               />
             </DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
index 54e97c0e193ef..24272c3f941e3 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerHomeTab.tsx
@@ -38,6 +38,13 @@ export const ExplorerHomeTab = () => {
 
         <section className="mt-6">
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <ActionCard
+              icon={<SquareCode className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
+              title="Run SQL"
+              description="Write and run an ad-hoc query"
+              bgColor="bg-blue-500"
+              onClick={() => createQuery()}
+            />
             <ActionCard
               icon={<NotebookText className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
               title="Create a notebook"
@@ -45,13 +52,6 @@ export const ExplorerHomeTab = () => {
               bgColor="bg-blue-500"
               onClick={() => createNotebook()}
             />
-            <ActionCard
-              icon={<SquareCode className="h-4 w-4 text-foreground" strokeWidth={1.5} />}
-              title="Run SQL"
-              description="Write and run an ad-hoc query"
-              bgColor="bg-blue-500"
-              onClick={createQuery}
-            />
           </div>
         </section>
 
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
index d34f51cd77c11..4ad4e4159ce01 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.tsx
@@ -359,12 +359,18 @@ export const ExplorerNotebookTab = () => {
     <div className="flex flex-col h-full bg-surface-100">
       <ExplorerToolbar className="px-4">
         <ExplorerToolbarIcon>
-          <NotebookText size={14} className="text-foreground-light" />
+          <NotebookText size={16} strokeWidth={2} />
         </ExplorerToolbarIcon>
         <ExplorerToolbarTitle onSaveTitle={handleSaveTitle}>{name ?? ''}</ExplorerToolbarTitle>
         <ExplorerToolbarActions>
           <ExplorerToolbarAction
-            icon={<AiIconAnimation size={16} />}
+            className="group"
+            icon={
+              <AiIconAnimation
+                size={16}
+                className="text-tertiary-foreground group-hover:text-brand"
+              />
+            }
             loading={isCreating}
             disabled={cells.length === 0}
             tooltip={cells.length === 0 ? 'Add a cell to the notebook to analyze it' : undefined}
@@ -374,7 +380,7 @@ export const ExplorerNotebookTab = () => {
           </ExplorerToolbarAction>
           <ExplorerToolbarAction
             aria-label="Save changes"
-            icon={<Save />}
+            icon={<Save size={16} strokeWidth={2} />}
             tooltip="Save changes"
             loading={isUpdating}
             onClick={handleSaveNotebook}
@@ -382,7 +388,10 @@ export const ExplorerNotebookTab = () => {
           <ExplorerToolbarActions>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <ExplorerToolbarAction aria-label="More options" icon={<MoreVertical />} />
+                <ExplorerToolbarAction
+                  aria-label="More options"
+                  icon={<MoreVertical size={16} strokeWidth={2} />}
+                />
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="w-48">
                 <DropdownMenuItem
@@ -405,7 +414,7 @@ export const ExplorerNotebookTab = () => {
           </ExplorerToolbarActions>
           <ExplorerToolbarAction
             aria-label="Run notebook"
-            icon={<Play />}
+            icon={<Play size={16} strokeWidth={2} />}
             tooltip="Run notebook"
             loading={isRunningNotebook}
             disabled={queryCellIds.length === 0}
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx b/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
index 8dec7a680b5f4..5cc0ad4a3bd54 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerQueryTab.tsx
@@ -202,7 +202,10 @@ export const ExplorerQueryTab = () => {
         <>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <ExplorerToolbarAction icon={<Save />} tooltip="Save query" />
+              <ExplorerToolbarAction
+                icon={<Save size={16} strokeWidth={2} />}
+                tooltip="Save query"
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-52" align="end">
               <DropdownMenuSub>
@@ -250,7 +253,7 @@ export const ExplorerQueryTab = () => {
           </DropdownMenu>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <ExplorerToolbarAction icon={<MoreVertical />} />
+              <ExplorerToolbarAction icon={<MoreVertical size={16} strokeWidth={2} />} />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem
diff --git a/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx b/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx
index 0c99f82e52d8c..ce1d946780317 100644
--- a/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx
+++ b/apps/studio/components/interfaces/Explorer/ExplorerToolbar.tsx
@@ -38,7 +38,7 @@ const ExplorerToolbarIcon = ({
   <span
     data-slot="explorer-toolbar-icon"
     aria-hidden={ariaHidden}
-    className={cn('shrink-0 text-foreground-muted [&_svg]:size-3.5', className)}
+    className={cn('shrink-0 text-tertiary-foreground', className)}
     {...props}
   />
 )
@@ -98,14 +98,19 @@ const ExplorerToolbarTitle = ({
           }}
         />
       ) : onSaveTitle ? (
-        <Button
-          variant="text"
+        <ExplorerToolbarAction
           className="group/title"
           onClick={handleStartEditing}
-          iconRight={<Edit className="opacity-0 group-hover/title:opacity-100 transition" />}
+          iconRight={
+            <Edit
+              size={16}
+              strokeWidth={2}
+              className="opacity-0 transition group-hover/title:opacity-100 group-focus-visible/title:opacity-100"
+            />
+          }
         >
           {title}
-        </Button>
+        </ExplorerToolbarAction>
       ) : (
         title
       )}
@@ -139,6 +144,7 @@ export type ExplorerToolbarActionProps = Omit<
 /**
  * The standard tiny, text-style button used for a direct toolbar action.
  * Icon-only actions receive the prototype's compact 28px width automatically.
+ * `!h-auto !w-auto` lets Lucide's `size` prop win over Button `tiny`'s 14px icon box.
  */
 const ExplorerToolbarAction = ({
   children,
@@ -152,7 +158,12 @@ const ExplorerToolbarAction = ({
     data-slot="explorer-toolbar-action"
     variant="text"
     size="tiny"
-    className={cn(children == null && 'w-7 px-0', className)}
+    className={cn(
+      'text-tertiary-foreground hover:text-foreground data-[state=open]:text-foreground',
+      '[&>[aria-hidden]]:text-current [&_svg]:!h-auto [&_svg]:!w-auto',
+      children == null && 'w-7 px-0',
+      className
+    )}
     tooltip={{ content: { side: 'bottom', text: tooltip } }}
     {...props}
   >
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
index 5534a2a633d23..58967a2cd0f5c 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/DisplaySettingsButton.tsx
@@ -104,7 +104,11 @@ export const DisplaySettingsButton = ({
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <ExplorerToolbarAction disabled={disabled} icon={<Settings2 />} tooltip="Result settings" />
+        <ExplorerToolbarAction
+          disabled={disabled}
+          icon={<Settings2 size={16} strokeWidth={2} />}
+          tooltip="Result settings"
+        />
       </PopoverTrigger>
       <PopoverContent
         side="bottom"
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
index 61f6ffb8b6adc..4cad8b12da466 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/QuerySourceMenu.tsx
@@ -1,7 +1,6 @@
 import { useFlag, useParams } from 'common'
 import { Check, ChevronDown } from 'lucide-react'
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -11,6 +10,7 @@ import {
 
 import { RowLimitSubMenu } from '../../SQLEditor/UtilityPanel/QuerySourceMenu/RowLimitSubMenu'
 import { RunAsSubMenu } from '../../SQLEditor/UtilityPanel/QuerySourceMenu/RunAsSubMenu'
+import { ExplorerToolbarAction } from '../ExplorerToolbar'
 import { DatabaseParametersSubMenu } from '@/components/interfaces/QuerySources/DatabaseParametersSubMenu'
 import { LogsCustomRangeDialog } from '@/components/interfaces/QuerySources/LogsCustomRangeDialog'
 import { LogsTimeRangeSubMenu } from '@/components/interfaces/QuerySources/LogsTimeRangeSubMenu'
@@ -75,16 +75,14 @@ export const QuerySourceMenu = ({
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button
+          <ExplorerToolbarAction
             disabled={disabled}
-            variant="text"
-            size="tiny"
             aria-label={`Query source: ${QUERY_SOURCE_LABELS[source._tag]}`}
-            icon={<QuerySourceIcon source={source._tag} className="text-foreground-light" />}
-            iconRight={<ChevronDown className="text-foreground-light" />}
+            icon={<QuerySourceIcon source={source._tag} />}
+            iconRight={<ChevronDown size={16} strokeWidth={2} />}
           >
             {QUERY_SOURCE_LABELS[source._tag]}
-          </Button>
+          </ExplorerToolbarAction>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-60">
           {availableSources.map((candidate) => (
diff --git a/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
index 8974a780ee014..96fd8e4a7c983 100644
--- a/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
+++ b/apps/studio/components/interfaces/Explorer/QueryEditor/index.tsx
@@ -368,7 +368,7 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
       <Shell className={cn(variant === 'embedded' && 'mx-auto max-w-6xl', className)}>
         <ExplorerToolbar className={cn(variant === 'viewport' && 'px-4')}>
           <ExplorerToolbarIcon>
-            <CodeSquare size={14} />
+            <CodeSquare size={16} strokeWidth={2} />
           </ExplorerToolbarIcon>
           <ExplorerToolbarTitle onSaveTitle={onTitleChange}>{title}</ExplorerToolbarTitle>
           <ExplorerToolbarActions>
@@ -396,7 +396,9 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
               />
             )}
             <ExplorerToolbarAction
-              icon={showQuery ? <EyeOff /> : <Eye />}
+              icon={
+                showQuery ? <EyeOff size={16} strokeWidth={2} /> : <Eye size={16} strokeWidth={2} />
+              }
               disabled={pendingProposal !== null}
               tooltip={showQuery ? 'Hide query' : 'Show query'}
               onClick={() => onShowQueryChange(!showQuery)}
@@ -405,7 +407,7 @@ export const QueryEditor = forwardRef<QueryEditorHandle, QueryEditorProps>(funct
             {toolbarActions}
 
             <ExplorerToolbarAction
-              icon={<Play />}
+              icon={<Play size={16} strokeWidth={2} />}
               loading={isExecuting}
               tooltip={hasSelection ? 'Run selected query' : 'Run query'}
               disabled={
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx
index 6b748059c21ab..ff889ca523ab0 100644
--- a/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/ExplorerToolbar.test.tsx
@@ -35,7 +35,6 @@ describe('ExplorerToolbar', () => {
     const runAction = within(toolbar).getByRole('button', { name: 'Run cell' })
     expect(runAction).toHaveAttribute('data-slot', 'explorer-toolbar-action')
     expect(runAction).toHaveAttribute('data-size', 'tiny')
-    expect(runAction).toHaveClass('w-7', 'px-0')
   })
 
   it('supports labeled actions and forwards refs and native props', () => {
@@ -64,6 +63,7 @@ describe('ExplorerToolbar', () => {
     expect(toolbar.querySelector('[data-slot="explorer-toolbar-actions"]')).toHaveClass('gap-px')
     expect(action).toHaveAttribute('data-command', 'analyze')
     expect(action).not.toHaveClass('w-7')
+    expect(action).toHaveClass('text-tertiary-foreground', 'hover:text-foreground')
     expect(actionRef.current).toBe(action)
   })
 })
diff --git a/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx b/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx
index 321dbd4c94db2..7b5e476aceb5c 100644
--- a/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx
+++ b/apps/studio/components/interfaces/Explorer/__tests__/hooks.test.tsx
@@ -1,10 +1,11 @@
 import { act, renderHook } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { useCreateChat } from '../hooks'
+import { useCreateChat, useCreateQuery } from '../hooks'
 
 const {
   mockCreateChat,
+  mockCreateDraft,
   mockPush,
   mockSelectChat,
   mockSetContext,
@@ -12,6 +13,7 @@ const {
   mockWhenInitialized,
 } = vi.hoisted(() => ({
   mockCreateChat: vi.fn(() => 'chat-2'),
+  mockCreateDraft: vi.fn(),
   mockPush: vi.fn(),
   mockSelectChat: vi.fn(),
   mockSetContext: vi.fn(),
@@ -28,6 +30,12 @@ vi.mock('@/hooks/misc/useSelectedProject', () => ({
 vi.mock('@/hooks/misc/useSelectedOrganization', () => ({
   useSelectedOrganizationQuery: () => ({ data: { slug: 'acme' } }),
 }))
+vi.mock('@/lib/api/snippets.browser', () => ({
+  generateUuid: () => 'query-new',
+}))
+vi.mock('@/state/explorer-query', () => ({
+  useExplorerQueryStateSnapshot: () => ({ createDraft: mockCreateDraft }),
+}))
 vi.mock('@/state/ai-assistant-state', () => ({
   useAiAssistantState: () => ({
     createChat: mockCreateChat,
@@ -109,3 +117,36 @@ describe('useCreateChat', () => {
     expect(mockPush).toHaveBeenCalledWith('/project/default/explorer/chat/chat-2')
   })
 })
+
+describe('useCreateQuery', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('creates a draft and opens it as an Explorer query tab', () => {
+    const { result } = renderHook(() => useCreateQuery())
+
+    expect(result.current.createQuery({ sql: 'select 1', name: 'Untitled query' })).toBe(
+      'query-new'
+    )
+    expect(mockCreateDraft).toHaveBeenCalledWith({
+      id: 'query-new',
+      projectRef: 'default',
+      sql: 'select 1',
+      name: 'Untitled query',
+    })
+    expect(mockPush).toHaveBeenCalledWith('/project/default/explorer/query/query-new')
+  })
+
+  it('creates an empty draft when no sql or name is provided', () => {
+    const { result } = renderHook(() => useCreateQuery())
+
+    expect(result.current.createQuery()).toBe('query-new')
+    expect(mockCreateDraft).toHaveBeenCalledWith({
+      id: 'query-new',
+      projectRef: 'default',
+      sql: undefined,
+      name: undefined,
+    })
+  })
+})
diff --git a/apps/studio/components/interfaces/Explorer/hooks.ts b/apps/studio/components/interfaces/Explorer/hooks.ts
index 39c2e75719d1f..6d152d9ffb2e8 100644
--- a/apps/studio/components/interfaces/Explorer/hooks.ts
+++ b/apps/studio/components/interfaces/Explorer/hooks.ts
@@ -148,11 +148,11 @@ export const useCreateQuery = () => {
   const { data: project } = useSelectedProjectQuery()
   const querySnap = useExplorerQueryStateSnapshot()
 
-  const createQuery = () => {
+  const createQuery = ({ sql, name }: { sql?: string; name?: string } = {}) => {
     if (!project) return console.error('Project is required')
 
     const id = generateUuid()
-    querySnap.createDraft({ id, projectRef: project.ref })
+    querySnap.createDraft({ id, projectRef: project.ref, sql, name })
 
     router.push(`/project/${project.ref}/explorer/query/${id}`)
 
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
index aaa1bbbd6cecb..d23c09d6e3c99 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/EditSecretModal.tsx
@@ -146,7 +146,7 @@ export const EditSecretModal = () => {
                     render={({ field }) => (
                       <FormItemLayout name="name" label="Name">
                         <FormControl>
-                          <Input id="name" {...field} />
+                          <Input {...field} />
                         </FormControl>
                       </FormItemLayout>
                     )}
@@ -162,7 +162,7 @@ export const EditSecretModal = () => {
                         labelOptional="Optional"
                       >
                         <FormControl>
-                          <Input id="description" {...field} data-lpignore="true" />
+                          <Input {...field} data-lpignore="true" />
                         </FormControl>
                       </FormItemLayout>
                     )}
@@ -173,10 +173,9 @@ export const EditSecretModal = () => {
                     control={form.control}
                     render={({ field }) => (
                       <FormItemLayout name="secret" label="Secret value">
-                        <FormControl>
-                          <div className="relative">
+                        <div className="relative">
+                          <FormControl>
                             <Textarea
-                              id="secret"
                               {...field}
                               rows={1}
                               ref={(el) => {
@@ -200,18 +199,16 @@ export const EditSecretModal = () => {
                                   Math.max(40, e.currentTarget.scrollHeight) + 'px'
                               }}
                             />
-                            <Button
-                              variant="default"
-                              title={showSecretValue ? `Hide secret value` : `Show secret value`}
-                              aria-label={
-                                showSecretValue ? `Hide secret value` : `Show secret value`
-                              }
-                              className="absolute right-1 top-1 w-7"
-                              icon={showSecretValue ? <EyeOff /> : <Eye />}
-                              onClick={() => setShowSecretValue(!showSecretValue)}
-                            />
-                          </div>
-                        </FormControl>
+                          </FormControl>
+                          <Button
+                            variant="default"
+                            title={showSecretValue ? `Hide secret value` : `Show secret value`}
+                            aria-label={showSecretValue ? `Hide secret value` : `Show secret value`}
+                            className="absolute right-1 top-1 w-7"
+                            icon={showSecretValue ? <EyeOff /> : <Eye />}
+                            onClick={() => setShowSecretValue(!showSecretValue)}
+                          />
+                        </div>
                       </FormItemLayout>
                     )}
                   />
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
index c4a38b2e5ed4c..dc95a80bbd13f 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/CreateWrapperSheet.tsx
@@ -282,7 +282,6 @@ export const CreateWrapperSheet = ({
                       <FormItemLayout
                         layout="vertical"
                         label="Wrapper Name"
-                        name="wrapper_name"
                         description={
                           wrapper_name.length > 0 ? (
                             <>
@@ -295,7 +294,7 @@ export const CreateWrapperSheet = ({
                         }
                       >
                         <FormControl>
-                          <Input id="wrapper_name" {...field} />
+                          <Input {...field} />
                         </FormControl>
                       </FormItemLayout>
                     )}
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
index 9a17a2828a75c..664fb36f4dfb0 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/InputField.tsx
@@ -29,7 +29,6 @@ const InputField = <
       defaultValue={(option.defaultValue ?? '') as any}
       render={({ field }) => (
         <FormItemLayout
-          name={option.name}
           layout="vertical"
           label={
             <div className="flex items-center space-x-2">
@@ -55,11 +54,11 @@ const InputField = <
                 Fetching value from Vault...
               </span>
             ) : option.isTextArea ? (
-              <Textarea {...field} id={option.name} rows={6} className="input-mono resize-none" />
+              <Textarea {...field} rows={6} className="input-mono resize-none" />
             ) : option.secureEntry ? (
-              <PasswordInput copy reveal {...field} id={option.name} />
+              <PasswordInput copy reveal {...field} />
             ) : (
-              <Input {...field} id={option.name} />
+              <Input {...field} />
             )}
           </FormControl>
         </FormItemLayout>
diff --git a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
index c052e9551c211..0d7ccbcd3489c 100644
--- a/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
+++ b/apps/studio/components/interfaces/Integrations/Wrappers/WrapperTableEditor.tsx
@@ -192,7 +192,7 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
         name={option.name}
         defaultValue={option.defaultValue}
         render={({ field }) => (
-          <FormItemLayout layout="vertical" label={option.label} name={option.name}>
+          <FormItemLayout layout="vertical" label={option.label}>
             <FormControl>
               <Select value={field.value} onValueChange={field.onChange}>
                 <SelectTrigger>
@@ -220,9 +220,9 @@ const Option = ({ option, control }: { option: TableOption; control: Control<Fie
       name={option.name}
       defaultValue={option.defaultValue ?? ''}
       render={({ field }) => (
-        <FormItemLayout layout="vertical" label={option.label} name={option.name}>
+        <FormItemLayout layout="vertical" label={option.label}>
           <FormControl>
-            <Input {...field} id={option.name} placeholder={option.placeholder ?? ''} />
+            <Input {...field} placeholder={option.placeholder ?? ''} />
           </FormControl>
         </FormItemLayout>
       )}
@@ -349,7 +349,6 @@ const TableForm = ({
             <FormItemLayout layout="vertical" label="Select a schema for the foreign table">
               <FormControl>
                 <Select
-                  name="schema"
                   value={field.value}
                   onValueChange={(schema) => {
                     field.onChange(schema)
@@ -380,9 +379,9 @@ const TableForm = ({
             control={form.control}
             name="schema_name"
             render={({ field }) => (
-              <FormItemLayout name="schema_name" layout="vertical" label="Schema name">
+              <FormItemLayout layout="vertical" label="Schema name">
                 <FormControl>
-                  <Input {...field} id="schema_name" />
+                  <Input {...field} />
                 </FormControl>
               </FormItemLayout>
             )}
@@ -395,12 +394,11 @@ const TableForm = ({
           render={({ field }) => (
             <FormItemLayout
               layout="vertical"
-              name="table_name"
               label="Table name"
               description="You can query from this table after the wrapper is enabled."
             >
               <FormControl>
-                <Input {...field} id="table_name" />
+                <Input {...field} />
               </FormControl>
             </FormItemLayout>
           )}
@@ -472,13 +470,9 @@ const TableForm = ({
                   control={form.control}
                   name={`columns.${columnIndex}.name`}
                   render={({ field }) => (
-                    <FormItemLayout
-                      layout="vertical"
-                      name={`columns.${columnIndex}.name`}
-                      label="Name"
-                    >
+                    <FormItemLayout layout="vertical" label="Name">
                       <FormControl>
-                        <Input {...field} id={`columns.${columnIndex}.name`} />
+                        <Input {...field} />
                       </FormControl>
                     </FormItemLayout>
                   )}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
index c31c236f73026..b75d324bc0d90 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/EnterpriseCard.tsx
@@ -1,3 +1,4 @@
+import { motion, type Variants } from 'framer-motion'
 import { Check } from 'lucide-react'
 import { PricingInformation } from 'shared-data'
 import { Button, cn } from 'ui'
@@ -8,9 +9,10 @@ import { useTrack } from '@/lib/telemetry/track'
 export interface EnterpriseCardProps {
   plan: PricingInformation
   isCurrentPlan: boolean
+  variants?: Variants
 }
 
-export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) => {
+export const EnterpriseCard = ({ plan, isCurrentPlan, variants }: EnterpriseCardProps) => {
   const { data: selectedOrganization } = useSelectedOrganizationQuery()
 
   const features = plan.features
@@ -19,8 +21,9 @@ export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) =>
   const track = useTrack()
 
   return (
-    <div
+    <motion.div
       key={plan.id}
+      variants={variants}
       className={cn(
         'grid grid-cols-1 md:grid-cols-3 border rounded-md bg-studio',
         'py-4 col-span-12 justify-between gap-x-8'
@@ -95,6 +98,6 @@ export const EnterpriseCard = ({ plan, isCurrentPlan }: EnterpriseCardProps) =>
           </a>
         </Button>
       </div>
-    </div>
+    </motion.div>
   )
 }
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
new file mode 100644
index 0000000000000..d6a7fee845588
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCard.tsx
@@ -0,0 +1,393 @@
+import { motion, type Variants } from 'framer-motion'
+import { isArray } from 'lodash'
+import { Check, X } from 'lucide-react'
+import type { PricingInformation } from 'shared-data'
+import { Button, cn } from 'ui'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import type { GapFeature, PlanPresentationVariant } from './plan-presentation'
+import {
+  FREE_PLAN_GAPS,
+  hasPlanGaps,
+  isParityPresentation,
+  PRO_PLAN_GAPS,
+} from './plan-presentation'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { RequestUpgradeToBillingOwners } from '@/components/ui/RequestUpgradeToBillingOwners'
+import { MANAGED_BY } from '@/lib/constants/infrastructure'
+import { formatCurrency } from '@/lib/helpers'
+
+const GAPS_BY_PLAN_ID: Record<string, GapFeature[]> = {
+  tier_free: FREE_PLAN_GAPS,
+  tier_pro: PRO_PLAN_GAPS,
+}
+
+export interface PlanCardProps {
+  plan: PricingInformation
+  price: number
+  isCurrentPlan: boolean
+  isDowngradeOption: boolean
+  isLoadingPlans: boolean
+  canUpdateSubscription: boolean
+  isPartnerBilledOrganization: boolean
+  hasOrioleProjects: boolean
+  currentSubscriptionPlanId: string | undefined
+  managedBy: string | undefined
+  shouldHighlight: boolean
+  variant: PlanPresentationVariant
+  variants?: Variants
+  onSelectTier: () => void
+  onTrackCtaClick: () => void
+}
+
+export function PlanCard({
+  plan,
+  price,
+  isCurrentPlan,
+  isDowngradeOption,
+  isLoadingPlans,
+  canUpdateSubscription,
+  isPartnerBilledOrganization,
+  hasOrioleProjects,
+  currentSubscriptionPlanId,
+  managedBy,
+  shouldHighlight,
+  variant,
+  variants,
+  onSelectTier,
+  onTrackCtaClick,
+}: PlanCardProps) {
+  const isParity = isParityPresentation(variant)
+  const features = plan.features
+  const footer = plan.footer
+
+  const gaps: GapFeature[] = hasPlanGaps(variant) ? (GAPS_BY_PLAN_ID[plan.id] ?? []) : []
+
+  const ctaButton = isCurrentPlan ? (
+    <Button block disabled variant="default">
+      Current plan
+    </Button>
+  ) : !canUpdateSubscription &&
+    !isDowngradeOption &&
+    (plan.name === 'Pro' || plan.name === 'Team') ? (
+    <RequestUpgradeToBillingOwners block plan={plan.name} />
+  ) : (
+    <ButtonTooltip
+      block
+      variant={isDowngradeOption ? 'default' : 'primary'}
+      disabled={
+        (!canUpdateSubscription && isDowngradeOption) ||
+        currentSubscriptionPlanId === 'enterprise' ||
+        currentSubscriptionPlanId === 'platform' ||
+        (isPartnerBilledOrganization && plan.id !== 'tier_free') ||
+        managedBy === MANAGED_BY.AWS_MARKETPLACE ||
+        hasOrioleProjects
+      }
+      onClick={() => {
+        onSelectTier()
+        onTrackCtaClick()
+      }}
+      tooltip={{
+        content: {
+          side: 'bottom' as const,
+          className: hasOrioleProjects ? 'w-96 text-center' : '',
+          text:
+            !canUpdateSubscription && isDowngradeOption
+              ? "You need additional permissions to change your organization's plan"
+              : currentSubscriptionPlanId === 'enterprise' ||
+                  currentSubscriptionPlanId === 'platform'
+                ? 'Reach out to us via support to update your plan'
+                : hasOrioleProjects
+                  ? 'Your organization has projects that are using the OrioleDB extension which is only available on the Free plan. Remove all OrioleDB projects before changing your plan.'
+                  : managedBy === MANAGED_BY.AWS_MARKETPLACE
+                    ? 'You cannot change the plan for an organization managed by AWS Marketplace'
+                    : undefined,
+        },
+      }}
+    >
+      {isDowngradeOption ? 'Downgrade' : 'Upgrade'} to {plan.name}
+    </ButtonTooltip>
+  )
+
+  if (!isParity) {
+    return (
+      <ControlCard
+        plan={plan}
+        price={price}
+        isCurrentPlan={isCurrentPlan}
+        isLoadingPlans={isLoadingPlans}
+        shouldHighlight={shouldHighlight}
+        features={features}
+        footer={footer}
+        ctaButton={ctaButton}
+        variants={variants}
+      />
+    )
+  }
+
+  return (
+    <ParityCard
+      plan={plan}
+      price={price}
+      isCurrentPlan={isCurrentPlan}
+      isLoadingPlans={isLoadingPlans}
+      shouldHighlight={shouldHighlight}
+      features={features}
+      footer={footer}
+      gaps={gaps}
+      ctaButton={ctaButton}
+      variants={variants}
+    />
+  )
+}
+
+function ControlCard({
+  plan,
+  price,
+  isCurrentPlan,
+  isLoadingPlans,
+  shouldHighlight,
+  features,
+  footer,
+  ctaButton,
+  variants,
+}: {
+  plan: PricingInformation
+  price: number
+  isCurrentPlan: boolean
+  isLoadingPlans: boolean
+  shouldHighlight: boolean
+  features: (string | string[])[]
+  footer: string | undefined
+  ctaButton: React.ReactNode
+  variants?: Variants
+}) {
+  return (
+    <motion.div
+      variants={variants}
+      className={cn(
+        'px-4 py-4 flex flex-col items-start justify-between',
+        'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
+        shouldHighlight &&
+          'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand/40'
+      )}
+    >
+      <div className="w-full">
+        <div className="flex items-center space-x-2">
+          <p className="text-brand-link text-sm uppercase">{plan.name}</p>
+          {isCurrentPlan ? (
+            <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
+              Current plan
+            </div>
+          ) : plan.nameBadge ? (
+            <div className="text-xs bg-brand-300 dark:bg-brand-400 text-brand-600 rounded-sm px-2 py-0.5">
+              {plan.nameBadge}
+            </div>
+          ) : null}
+        </div>
+        <div className="mt-4 flex items-center space-x-1 mb-4">
+          {(price ?? 0) > 0 && <p className="text-foreground-light text-sm">From</p>}
+          {isLoadingPlans ? (
+            <div className="h-[28px] flex items-center justify-center">
+              <ShimmeringLoader className="w-[30px] h-[24px]" />
+            </div>
+          ) : (
+            <p className="text-foreground text-lg" translate="no">
+              {formatCurrency(price)}
+            </p>
+          )}
+          <p className="text-foreground-light text-sm">{plan.costUnit}</p>
+        </div>
+        {ctaButton}
+
+        <div className="border-t my-4" />
+
+        <ul role="list">
+          {features.map((feature) => (
+            <li key={typeof feature === 'string' ? feature : feature[0]} className="flex py-2">
+              <div className="w-[12px]">
+                <Check
+                  className="h-3 w-3 text-brand translate-y-[2.5px]"
+                  aria-hidden="true"
+                  strokeWidth={3}
+                />
+              </div>
+              <div>
+                <p className="ml-3 text-xs text-foreground-light">
+                  {typeof feature === 'string' ? feature : feature[0]}
+                </p>
+                {isArray(feature) && (
+                  <p className="ml-3 text-xs text-foreground-lighter">{feature[1]}</p>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {footer && (
+        <div className="border-t pt-4 mt-4">
+          <p className="text-foreground-light text-xs">{footer}</p>
+        </div>
+      )}
+    </motion.div>
+  )
+}
+
+function ParityCard({
+  plan,
+  price,
+  isCurrentPlan,
+  isLoadingPlans,
+  shouldHighlight,
+  features,
+  footer,
+  gaps,
+  ctaButton,
+  variants,
+}: {
+  plan: PricingInformation
+  price: number
+  isCurrentPlan: boolean
+  isLoadingPlans: boolean
+  shouldHighlight: boolean
+  features: (string | string[])[]
+  footer: string | undefined
+  gaps: GapFeature[]
+  ctaButton: React.ReactNode
+  variants?: Variants
+}) {
+  return (
+    <motion.div
+      variants={variants}
+      className={cn(
+        'flex flex-col items-start justify-between',
+        'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
+        shouldHighlight &&
+          'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] motion-reduce:animate-none shadow-md shadow-brand/40'
+      )}
+    >
+      <div className="w-full px-4 pt-4">
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 pb-2">
+            <h3 className="text-foreground text-xl font-normal uppercase font-mono">{plan.name}</h3>
+            {isCurrentPlan ? (
+              <span className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
+                Current plan
+              </span>
+            ) : plan.nameBadge ? (
+              <span className="bg-foreground-light text-background rounded-md py-0.5 px-2 text-[13px] leading-4">
+                {plan.nameBadge}
+              </span>
+            ) : null}
+          </div>
+        </div>
+
+        <p className="text-foreground-light text-[13px] leading-4 mb-4 min-h-12 line-clamp-3">
+          {plan.description}
+        </p>
+
+        {ctaButton}
+
+        <div className="border-t my-4" />
+
+        <div className="flex items-end gap-1 pb-4">
+          <div>
+            <p
+              className={cn(
+                'text-foreground-lighter text-[13px] leading-4',
+                (price ?? 0) <= 0 && 'invisible'
+              )}
+            >
+              From
+            </p>
+            <div className="flex items-end">
+              {isLoadingPlans ? (
+                <div className="h-[40px] flex items-center justify-center">
+                  <ShimmeringLoader className="w-[60px] h-[32px]" />
+                </div>
+              ) : (
+                <p className="text-foreground text-3xl font-mono" translate="no">
+                  {formatCurrency(price)}
+                </p>
+              )}
+              <p className="text-foreground-lighter mb-0.5 ml-1 text-[13px] leading-4">
+                {plan.costUnit}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full flex-1 flex flex-col px-4 pb-4">
+        {plan.preface && (
+          <p className="text-foreground-lighter text-[13px] mt-2 mb-4">{plan.preface}</p>
+        )}
+        <ul className="text-[13px] flex-1">
+          {features.map((feature) => (
+            <li
+              key={typeof feature === 'string' ? feature : feature[0]}
+              className="flex flex-col py-2 first:mt-0"
+            >
+              <div className="flex items-center">
+                <div className="flex w-5">
+                  <Check className="h-4 w-4 text-brand" aria-hidden="true" strokeWidth={3} />
+                </div>
+                <span className="text-foreground">
+                  {typeof feature === 'string' ? feature : feature[0]}
+                </span>
+              </div>
+              {typeof feature !== 'string' && isArray(feature) && (
+                <p className="ml-5 text-foreground-lighter">{feature[1]}</p>
+              )}
+            </li>
+          ))}
+        </ul>
+
+        {gaps.length > 0 && (
+          <>
+            <div className="border-t my-3" />
+            <p className="text-foreground-muted text-[13px] mb-3">
+              {gaps.some((g) => g.type === 'lesser') ? 'Plan limits' : 'Not included'}
+            </p>
+            <ul className="text-[13px]">
+              {gaps.map((gap) => (
+                <li key={gap.label} className="flex items-center py-1.5">
+                  {gap.type === 'missing' ? (
+                    <>
+                      <div className="flex w-5">
+                        <X
+                          className="h-4 w-4 text-foreground-muted"
+                          aria-hidden="true"
+                          strokeWidth={2}
+                        />
+                      </div>
+                      <span className="text-foreground-muted">{gap.label}</span>
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex w-5">
+                        <Check
+                          className="h-4 w-4 text-foreground-muted"
+                          aria-hidden="true"
+                          strokeWidth={2}
+                        />
+                      </div>
+                      <span className="text-foreground-muted">{gap.label}</span>
+                    </>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+
+        {footer && (
+          <div className="border-t pt-4 mt-auto">
+            <p className="text-foreground-lighter text-[13px] whitespace-pre-wrap">{footer}</p>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
new file mode 100644
index 0000000000000..558cd7abe31e5
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.tsx
@@ -0,0 +1,100 @@
+import { motion } from 'framer-motion'
+import { useRouter } from 'next/router'
+import { plans as subscriptionsPlans } from 'shared-data/plans'
+
+import { EnterpriseCard } from './EnterpriseCard'
+import type { PlanPresentationVariant } from './plan-presentation'
+import { PlanCard } from './PlanCard'
+import { getPlanCardsEntryAnimation } from './PlanCards.utils'
+import { getPlanChangeType } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
+import type { OrgPlan, PlanId } from '@/data/subscriptions/types'
+import { useTrack } from '@/lib/telemetry/track'
+import type { Organization } from '@/types/base'
+
+export interface PlanCardsProps {
+  availablePlans: OrgPlan[]
+  isLoadingPlans: boolean
+  currentSubscriptionPlanId: PlanId | undefined
+  currentSubscriptionPlanName: string | undefined
+  canUpdateSubscription: boolean
+  isPartnerBilledOrganization: boolean
+  hasOrioleProjects: boolean
+  selectedOrganization: Organization | undefined
+  variant: PlanPresentationVariant
+  /** Seconds to wait before the cards stagger in. Omit to render them without an entry animation. */
+  entryDelay?: number
+  onSelectTier: (tier: 'tier_free' | 'tier_pro' | 'tier_team') => void
+}
+
+export function PlanCards({
+  availablePlans,
+  isLoadingPlans,
+  currentSubscriptionPlanId,
+  currentSubscriptionPlanName,
+  canUpdateSubscription,
+  isPartnerBilledOrganization,
+  hasOrioleProjects,
+  selectedOrganization,
+  variant,
+  entryDelay,
+  onSelectTier,
+}: PlanCardsProps) {
+  const router = useRouter()
+  const track = useTrack()
+
+  const entryAnimation = getPlanCardsEntryAnimation(entryDelay)
+
+  return (
+    <motion.div className="py-6 grid grid-cols-12 gap-3" {...entryAnimation.container}>
+      {subscriptionsPlans.map((plan) => {
+        const planMeta = availablePlans.find((p) => p.id === plan.id.split('tier_')[1])
+        const price = planMeta?.price ?? 0
+        const isDowngradeOption =
+          getPlanChangeType(currentSubscriptionPlanId, plan?.planId) === 'downgrade'
+        const isCurrentPlan = planMeta?.id === currentSubscriptionPlanId
+
+        const source = Array.isArray(router.query.source)
+          ? router.query.source[0]
+          : router.query.source
+        const shouldHighlight = source === 'log-drains-empty-state' && plan.id === 'tier_pro'
+
+        if (plan.id === 'tier_enterprise') {
+          return (
+            <EnterpriseCard
+              key={plan.id}
+              plan={plan}
+              isCurrentPlan={isCurrentPlan}
+              variants={entryAnimation.card}
+            />
+          )
+        }
+
+        return (
+          <PlanCard
+            key={plan.id}
+            plan={plan}
+            price={price}
+            isCurrentPlan={isCurrentPlan}
+            isDowngradeOption={isDowngradeOption}
+            isLoadingPlans={isLoadingPlans}
+            canUpdateSubscription={canUpdateSubscription}
+            isPartnerBilledOrganization={isPartnerBilledOrganization}
+            hasOrioleProjects={hasOrioleProjects}
+            currentSubscriptionPlanId={currentSubscriptionPlanId}
+            managedBy={selectedOrganization?.managed_by}
+            shouldHighlight={shouldHighlight}
+            variant={variant}
+            variants={entryAnimation.card}
+            onSelectTier={() => onSelectTier(plan.id as 'tier_free' | 'tier_pro' | 'tier_team')}
+            onTrackCtaClick={() =>
+              track('studio_pricing_plan_cta_clicked', {
+                selectedPlan: plan.name,
+                currentPlan: currentSubscriptionPlanName,
+              })
+            }
+          />
+        )
+      })}
+    </motion.div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts
new file mode 100644
index 0000000000000..82fc30ac4f829
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+
+import { getPlanCardsEntryAnimation } from './PlanCards.utils'
+
+describe('getPlanCardsEntryAnimation', () => {
+  it('returns no animation props when no entry delay is given', () => {
+    const animation = getPlanCardsEntryAnimation(undefined)
+
+    expect(animation.container).toEqual({})
+    expect(animation.card).toBeUndefined()
+  })
+
+  it('staggers the cards after the container delay', () => {
+    const animation = getPlanCardsEntryAnimation(0.4)
+
+    expect(animation.container.initial).toBe('hidden')
+    expect(animation.container.animate).toBe('visible')
+    expect(animation.card).toBeDefined()
+
+    const visible = animation.container.variants?.visible as { transition: Record<string, number> }
+    expect(visible.transition.delayChildren).toBeCloseTo(0.6)
+    expect(visible.transition.staggerChildren).toBe(0.08)
+  })
+
+  it('treats a zero delay as an animation, not as absent', () => {
+    const animation = getPlanCardsEntryAnimation(0)
+
+    expect(animation.container.initial).toBe('hidden')
+    expect(animation.card).toBeDefined()
+  })
+})
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
new file mode 100644
index 0000000000000..e735cf7a4eab0
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanCards.utils.ts
@@ -0,0 +1,37 @@
+import type { Variants } from 'framer-motion'
+
+const CARD_VARIANTS: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  visible: { opacity: 1, y: 0, transition: { duration: 0.3, ease: 'easeOut' } },
+}
+
+const STAGGER_AFTER_CONTAINER = 0.2
+const STAGGER_BETWEEN_CARDS = 0.08
+
+export interface PlanCardsEntryAnimation {
+  container: { variants?: Variants; initial?: string; animate?: string }
+  card: Variants | undefined
+}
+
+export function getPlanCardsEntryAnimation(
+  entryDelay: number | undefined
+): PlanCardsEntryAnimation {
+  if (entryDelay === undefined) return { container: {}, card: undefined }
+
+  return {
+    container: {
+      variants: {
+        hidden: {},
+        visible: {
+          transition: {
+            delayChildren: entryDelay + STAGGER_AFTER_CONTAINER,
+            staggerChildren: STAGGER_BETWEEN_CARDS,
+          },
+        },
+      },
+      initial: 'hidden',
+      animate: 'visible',
+    },
+    card: CARD_VARIANTS,
+  }
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
new file mode 100644
index 0000000000000..a7324843807b6
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdatePanelShell.tsx
@@ -0,0 +1,96 @@
+import { motion } from 'framer-motion'
+import { ArrowLeft, ExternalLink } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { Button, SidePanel } from 'ui'
+
+export interface PlanUpdatePanelShellProps {
+  organizationName: string | undefined
+  /** Rendered above the plan cards, outside the scrollable card grid. */
+  notice: ReactNode
+  onClose: () => void
+  children: ReactNode
+}
+
+export function PlanUpdateSheetShell({
+  visible,
+  organizationName,
+  notice,
+  onClose,
+  children,
+}: PlanUpdatePanelShellProps & { visible: boolean }) {
+  return (
+    <SidePanel
+      hideFooter
+      size="xxlarge"
+      visible={visible}
+      onCancel={onClose}
+      header={
+        <div className="flex items-center justify-between w-full">
+          <h4>Change subscription plan for {organizationName}</h4>
+          <Button asChild variant="default" icon={<ExternalLink />}>
+            <a href="https://supabase.com/pricing" target="_blank" rel="noreferrer">
+              Pricing
+            </a>
+          </Button>
+        </div>
+      }
+    >
+      {notice}
+      <SidePanel.Content>{children}</SidePanel.Content>
+    </SidePanel>
+  )
+}
+
+export function PlanUpdateFullScreenShell({
+  organizationName,
+  notice,
+  skipOverlayFade,
+  contentDelay,
+  onClose,
+  children,
+}: PlanUpdatePanelShellProps & { skipOverlayFade: boolean; contentDelay: number }) {
+  return (
+    <motion.div
+      className="fixed inset-0 z-50 overflow-y-auto overscroll-contain bg-studio"
+      initial={skipOverlayFade ? false : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
+    >
+      <Button
+        variant="text"
+        icon={<ArrowLeft />}
+        onClick={onClose}
+        className="fixed top-4 left-4 z-10"
+      >
+        Go back to Studio
+      </Button>
+      <div className="fixed top-4 right-4 z-10 flex items-center gap-2">
+        <Button
+          asChild
+          variant="text"
+          iconRight={<ExternalLink />}
+          className="hidden sm:inline-flex"
+        >
+          <a href="https://supabase.com/pricing#faq" target="_blank" rel="noreferrer">
+            Pricing FAQ
+          </a>
+        </Button>
+        <Button asChild variant="default" iconRight={<ExternalLink />}>
+          <a href="https://supabase.com/pricing#compare-plans" target="_blank" rel="noreferrer">
+            Compare plans
+          </a>
+        </Button>
+      </div>
+      <motion.div
+        className="mx-auto flex w-full max-w-6xl flex-col gap-4 px-6 py-16"
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: contentDelay, duration: 0.3, ease: 'easeOut' }}
+      >
+        <h1 className="text-2xl text-center">Change subscription plan for {organizationName}</h1>
+        {notice}
+        {children}
+      </motion.div>
+    </motion.div>
+  )
+}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
index 7cb5fb3fd3a11..3607d413e6091 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.test.tsx
@@ -8,12 +8,19 @@ import { createMockOrganization, render } from '@/tests/helpers'
 const mockSelectedOrganization = vi.hoisted(() => vi.fn())
 const mockPush = vi.hoisted(() => vi.fn())
 const mockPartnerManagedResource = vi.hoisted(() => vi.fn())
+const mockUsePHFlag = vi.hoisted(() => vi.fn())
+const mockFeatureFlags = vi.hoisted(() => vi.fn())
+const mockIsPlatform = vi.hoisted(() => ({ value: true }))
 
 vi.mock('common', async (importOriginal) => {
   const original = (await importOriginal()) as typeof import('common')
   return {
     ...original,
     useParams: () => ({ slug: 'stripe-org' }),
+    useFeatureFlags: mockFeatureFlags,
+    get IS_PLATFORM() {
+      return mockIsPlatform.value
+    },
   }
 })
 
@@ -27,8 +34,26 @@ vi.mock('next/router', () => ({
 
 vi.mock('shared-data/plans', () => ({
   plans: [
-    { id: 'tier_free', planId: 'free', name: 'Free', costUnit: '/ month', features: [] },
-    { id: 'tier_pro', planId: 'pro', name: 'Pro', costUnit: '/ month', features: [] },
+    {
+      id: 'tier_free',
+      planId: 'free',
+      name: 'Free',
+      costUnit: '/ month',
+      features: ['Unlimited API requests'],
+      description: 'Perfect for passion projects & simple websites.',
+      preface: 'Get started with:',
+      footer: 'Free projects are paused after 1 week of inactivity. Limit of 2 active projects.',
+    },
+    {
+      id: 'tier_pro',
+      planId: 'pro',
+      name: 'Pro',
+      nameBadge: 'Most Popular',
+      costUnit: '/ month',
+      features: ['Email support'],
+      description: 'For production applications with the power to scale.',
+      preface: 'Everything in the Free Plan, plus:',
+    },
   ],
 }))
 
@@ -117,9 +142,20 @@ vi.mock('./SubscriptionPlanUpdateDialog', () => ({
   SubscriptionPlanUpdateDialog: () => null,
 }))
 
+vi.mock('@/hooks/ui/useFlag', () => ({
+  usePHFlag: mockUsePHFlag,
+}))
+
+vi.mock('@/hooks/misc/useTrackExperimentExposure', () => ({
+  useTrackExperimentExposure: vi.fn(),
+}))
+
 describe('PlanUpdateSidePanel', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockIsPlatform.value = true
+    mockFeatureFlags.mockReturnValue({ posthog: {}, configcat: {}, hasLoaded: true })
+    mockUsePHFlag.mockReturnValue('control')
     mockSelectedOrganization.mockReturnValue(
       createMockOrganization({
         slug: 'stripe-org',
@@ -183,4 +219,179 @@ describe('PlanUpdateSidePanel', () => {
 
     expect(screen.getByTestId('partner-managed-resource')).toBeInTheDocument()
   })
+
+  describe('parity variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('parity')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders plan description', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(
+        screen.getByText('Perfect for passion projects & simple websites.')
+      ).toBeInTheDocument()
+    })
+
+    it('renders preface line', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.getByText('Everything in the Free Plan, plus:')).toBeInTheDocument()
+    })
+  })
+
+  describe('gaps variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('gaps')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders gap rows on the Free plan', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.getByText('Daily backups')).toBeInTheDocument()
+      // "Email support" appears twice: once as a Pro plan feature (✓), once as a Free plan gap (✗)
+      expect(screen.getAllByText('Email support')).toHaveLength(2)
+    })
+
+    it('shows log retention as a lesser value, not a missing feature', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.getByText('1-day log retention')).toBeInTheDocument()
+    })
+
+    it('renders the gap section heading on Free and Pro cards', () => {
+      render(<PlanUpdateSidePanel />)
+      // Free has a `lesser` item, so its heading is "Plan limits"; Pro has only `missing` items → "Not included"
+      expect(screen.getByText('Plan limits')).toBeInTheDocument()
+      expect(screen.getByText('Not included')).toBeInTheDocument()
+    })
+  })
+
+  describe.each(['fullscreen', 'fullscreen-gaps'])('%s variant', (flag) => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue(flag)
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders the full-screen shell instead of the sheet', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('button', { name: /Go back to Studio/ })).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: /Compare plans/ })).toBeInTheDocument()
+      expect(screen.queryByRole('link', { name: 'Pricing' })).not.toBeInTheDocument()
+    })
+
+    it('renders parity cards', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(
+        screen.getByText('Perfect for passion projects & simple websites.')
+      ).toBeInTheDocument()
+      expect(screen.getByText('Everything in the Free Plan, plus:')).toBeInTheDocument()
+    })
+  })
+
+  describe('fullscreen variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('fullscreen')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('does not render gap rows', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.queryByText('Not included')).not.toBeInTheDocument()
+      expect(screen.queryByText('Plan limits')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('fullscreen-gaps variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('fullscreen-gaps')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders gap rows inside the full-screen shell', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('button', { name: /Go back to Studio/ })).toBeInTheDocument()
+      expect(screen.getByText('Daily backups')).toBeInTheDocument()
+      expect(screen.getByText('1-day log retention')).toBeInTheDocument()
+      // Free has a `lesser` item → "Plan limits"; Pro has only `missing` items → "Not included"
+      expect(screen.getByText('Plan limits')).toBeInTheDocument()
+      expect(screen.getByText('Not included')).toBeInTheDocument()
+    })
+  })
+
+  describe('while feature flags are still loading', () => {
+    beforeEach(() => {
+      mockFeatureFlags.mockReturnValue({ posthog: {}, configcat: {}, hasLoaded: false })
+      mockUsePHFlag.mockReturnValue(undefined)
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('opens neither shell, so the fullscreen variant cannot flash the sheet', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.queryByRole('button', { name: /Go back to Studio/ })).not.toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Upgrade to Pro' })).not.toBeInTheDocument()
+    })
+
+    it('does not gate the panel when self-hosted, where flags never load', () => {
+      mockIsPlatform.value = false
+
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('button', { name: 'Upgrade to Pro' })).toBeInTheDocument()
+    })
+  })
+
+  describe.each(['control', 'parity', 'gaps'])('%s variant keeps the sheet shell', (flag) => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue(flag)
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('renders the sheet header and no full-screen chrome', () => {
+      render(<PlanUpdateSidePanel />)
+
+      expect(screen.getByRole('link', { name: 'Pricing' })).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: /Go back to Studio/ })).not.toBeInTheDocument()
+    })
+  })
+
+  describe('control variant', () => {
+    beforeEach(() => {
+      mockUsePHFlag.mockReturnValue('control')
+      mockSelectedOrganization.mockReturnValue(
+        createMockOrganization({ slug: 'test-org', billing_partner: null })
+      )
+    })
+
+    it('does not render preface or description', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.queryByText('Everything in the Free Plan, plus:')).not.toBeInTheDocument()
+      expect(
+        screen.queryByText('Perfect for passion projects & simple websites.')
+      ).not.toBeInTheDocument()
+    })
+
+    it('does not render gap rows', () => {
+      render(<PlanUpdateSidePanel />)
+      expect(screen.queryByText('Not included')).not.toBeInTheDocument()
+      expect(screen.queryByText('Plan limits')).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
index d3bd6f55b245d..6bd719154d15d 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/PlanUpdateSidePanel.tsx
@@ -2,23 +2,22 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useDebounce } from '@uidotdev/usehooks'
 import { useParams } from 'common'
 import { StudioPricingSidePanelOpenedEvent } from 'common/telemetry-constants'
-import { isArray } from 'lodash'
-import { Check, ExternalLink } from 'lucide-react'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
 import { plans as subscriptionsPlans } from 'shared-data/plans'
-import { Button, cn, SidePanel } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { CancellationFlow } from './CancellationFlow'
-import { EnterpriseCard } from './EnterpriseCard'
+import {
+  isFullScreenPresentation,
+  isPlanChangeEligible,
+  usePlanPresentationExperiment,
+} from './plan-presentation'
+import { PlanCards } from './PlanCards'
+import { PlanUpdateFullScreenShell, PlanUpdateSheetShell } from './PlanUpdatePanelShell'
 import { SubscriptionPlanUpdateDialog } from './SubscriptionPlanUpdateDialog'
 import UpgradeSurveyModal from './UpgradeModal'
 import { STRIPE_PROJECTS_DOCS_URL } from '@/components/interfaces/Billing/Payment/PaymentMethods/StripePaymentConnection'
-import { getPlanChangeType } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
-import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
 import PartnerManagedResource from '@/components/ui/PartnerManagedResource'
-import { RequestUpgradeToBillingOwners } from '@/components/ui/RequestUpgradeToBillingOwners'
 import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
 import { useOrganizationBillingSubscriptionPreview } from '@/data/organizations/organization-billing-subscription-preview'
 import { useOrganizationQuery } from '@/data/organizations/organization-query'
@@ -30,7 +29,6 @@ import type { OrgPlan } from '@/data/subscriptions/types'
 import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
 import { MANAGED_BY } from '@/lib/constants/infrastructure'
-import { formatCurrency } from '@/lib/helpers'
 import { useTrack } from '@/lib/telemetry/track'
 import { useOrgSettingsPageStateSnapshot } from '@/state/organization-settings'
 import { Organization } from '@/types/base'
@@ -50,6 +48,52 @@ const getPartnerManagedResourceCta = (selectedOrganization: Organization) => {
   }
 }
 
+const PartnerManagedPlanNotice = ({
+  organization,
+  isStripeManaged,
+  isPartnerBilled,
+  stripeProjectsUpgradeCommand,
+}: {
+  organization: Organization | undefined
+  isStripeManaged: boolean
+  isPartnerBilled: boolean
+  stripeProjectsUpgradeCommand: string
+}) => {
+  if (!organization) return null
+
+  if (isStripeManaged) {
+    return (
+      <PartnerManagedResource
+        managedBy={MANAGED_BY.STRIPE_PROJECTS}
+        resource="Organization plans"
+        title="Organization plans are managed through Stripe."
+        details={
+          <>
+            Run <code className="text-code-inline">{stripeProjectsUpgradeCommand}</code> in your
+            project directory.
+          </>
+        }
+        cta={{
+          overrideUrl: `${STRIPE_PROJECTS_DOCS_URL}#upgrade-a-service-tier`,
+          message: 'Stripe Projects docs',
+        }}
+      />
+    )
+  }
+
+  if (isPartnerBilled) {
+    return (
+      <PartnerManagedResource
+        managedBy={organization.managed_by}
+        resource="Organization plans"
+        cta={getPartnerManagedResourceCta(organization)}
+      />
+    )
+  }
+
+  return null
+}
+
 const getStripeProjectsUpgradeCommand = (planId: string | null | undefined) => {
   const currentTier = planId ?? 'free'
   const action = currentTier === 'team' ? 'downgrade' : 'upgrade'
@@ -98,7 +142,10 @@ export const PlanUpdateSidePanel = () => {
   )
 
   const snap = useOrgSettingsPageStateSnapshot()
-  const visible = snap.panelKey === 'subscriptionPlan'
+  const isOpenedViaUrl = router.query.panel === 'subscriptionPlan'
+  const visible = snap.panelKey === 'subscriptionPlan' || isOpenedViaUrl
+
+  const contentDelay = isOpenedViaUrl ? 0.4 : 0.15
 
   const { data: orgProjectsData } = useOrgProjectsInfiniteQuery({ slug }, { enabled: visible })
   const orgProjects =
@@ -135,6 +182,23 @@ export const PlanUpdateSidePanel = () => {
 
   const availablePlans: OrgPlan[] = plans?.plans ?? []
 
+  // Only orgs that can actually act on the panel enter the experiment, and only once it is open
+  const isPlanPresentationEligible =
+    visible &&
+    isPlanChangeEligible({
+      managedBy: selectedOrganization?.managed_by,
+      billingPartner: selectedOrganization?.billing_partner,
+      currentPlanId: subscription?.plan?.id,
+      canUpdateSubscription,
+    })
+
+  const { variant: presentation, isResolved: isPresentationResolved } =
+    usePlanPresentationExperiment({ eligible: isPlanPresentationEligible })
+  const isFullScreen = isFullScreenPresentation(presentation)
+
+  // The fullscreen variant swaps the shell, so hold the panel closed until the variant is known
+  const isPanelOpen = visible && isPresentationResolved
+
   const onPanelOpened = useEffectEvent(
     (properties: StudioPricingSidePanelOpenedEvent['properties']) => {
       track('studio_pricing_side_panel_opened', properties)
@@ -182,194 +246,55 @@ export const PlanUpdateSidePanel = () => {
     selectedOrganization?.plan?.id ?? subscription?.plan?.id
   )
 
+  const notice = (
+    <PartnerManagedPlanNotice
+      organization={selectedOrganization}
+      isStripeManaged={isStripeManagedOrganization}
+      isPartnerBilled={isPartnerBilledOrganization}
+      stripeProjectsUpgradeCommand={stripeProjectsUpgradeCommand}
+    />
+  )
+
+  const planCards = (
+    <PlanCards
+      availablePlans={availablePlans}
+      isLoadingPlans={isLoadingPlans}
+      currentSubscriptionPlanId={subscription?.plan?.id}
+      currentSubscriptionPlanName={subscription?.plan?.name}
+      canUpdateSubscription={canUpdateSubscription}
+      isPartnerBilledOrganization={isPartnerBilledOrganization}
+      hasOrioleProjects={hasOrioleProjects}
+      selectedOrganization={selectedOrganization}
+      variant={presentation}
+      entryDelay={isFullScreen ? contentDelay : undefined}
+      onSelectTier={setSelectedTier}
+    />
+  )
+
   return (
     <>
-      <SidePanel
-        hideFooter
-        size="xxlarge"
-        visible={visible}
-        onCancel={() => onClose()}
-        header={
-          <div className="flex items-center justify-between w-full">
-            <h4>Change subscription plan for {selectedOrganization?.name}</h4>
-            <Button asChild variant="default" icon={<ExternalLink />}>
-              <a href="https://supabase.com/pricing" target="_blank" rel="noreferrer">
-                Pricing
-              </a>
-            </Button>
-          </div>
-        }
-      >
-        {selectedOrganization &&
-          (isStripeManagedOrganization ? (
-            <PartnerManagedResource
-              managedBy={MANAGED_BY.STRIPE_PROJECTS}
-              resource="Organization plans"
-              title="Organization plans are managed through Stripe."
-              details={
-                <>
-                  Run <code className="text-code-inline">{stripeProjectsUpgradeCommand}</code> in
-                  your project directory.
-                </>
-              }
-              cta={{
-                overrideUrl: `${STRIPE_PROJECTS_DOCS_URL}#upgrade-a-service-tier`,
-                message: 'Stripe Projects docs',
-              }}
-            />
-          ) : isPartnerBilledOrganization ? (
-            <PartnerManagedResource
-              managedBy={selectedOrganization.managed_by}
-              resource="Organization plans"
-              cta={getPartnerManagedResourceCta(selectedOrganization)}
-            />
-          ) : null)}
-        <SidePanel.Content>
-          <div className="py-6 grid grid-cols-12 gap-3">
-            {subscriptionsPlans.map((plan) => {
-              const planMeta = availablePlans.find((p) => p.id === plan.id.split('tier_')[1])
-              const price = planMeta?.price ?? 0
-              const isDowngradeOption =
-                getPlanChangeType(subscription?.plan.id, plan?.planId) === 'downgrade'
-              const isCurrentPlan = planMeta?.id === subscription?.plan?.id
-              const features = plan.features
-              const footer = plan.footer
-
-              const source = Array.isArray(router.query.source)
-                ? router.query.source[0]
-                : router.query.source
-              // TODO this panel should allow direct configuration of the highlighting rather than indirectly via the source param
-              const shouldHighlight = source === 'log-drains-empty-state' && plan.id === 'tier_pro'
-
-              if (plan.id === 'tier_enterprise') {
-                return <EnterpriseCard key={plan.id} plan={plan} isCurrentPlan={isCurrentPlan} />
-              }
-
-              return (
-                <div
-                  key={plan.id}
-                  className={cn(
-                    'px-4 py-4 flex flex-col items-start justify-between',
-                    'border rounded-md col-span-12 md:col-span-4 bg-surface-200',
-                    shouldHighlight &&
-                      'ring-4 ring-brand animate-[pulse_1.5s_ease-in-out_1] shadow-md shadow-brand/40'
-                  )}
-                >
-                  <div className="w-full">
-                    <div className="flex items-center space-x-2">
-                      <p className="text-brand-link text-sm uppercase">{plan.name}</p>
-                      {isCurrentPlan ? (
-                        <div className="text-xs bg-surface-300 text-foreground-light rounded-sm px-2 py-0.5">
-                          Current plan
-                        </div>
-                      ) : plan.nameBadge ? (
-                        <div className="text-xs bg-brand-300 dark:bg-brand-400 text-brand-600 rounded-sm px-2 py-0.5">
-                          {plan.nameBadge}
-                        </div>
-                      ) : null}
-                    </div>
-                    <div className="mt-4 flex items-center space-x-1 mb-4">
-                      {(price ?? 0) > 0 && <p className="text-foreground-light text-sm">From</p>}
-                      {isLoadingPlans ? (
-                        <div className="h-[28px] flex items-center justify-center">
-                          <ShimmeringLoader className="w-[30px] h-[24px]" />
-                        </div>
-                      ) : (
-                        <p className="text-foreground text-lg" translate="no">
-                          {formatCurrency(price)}
-                        </p>
-                      )}
-                      <p className="text-foreground-light text-sm">{plan.costUnit}</p>
-                    </div>
-                    {isCurrentPlan ? (
-                      <Button block disabled variant="default">
-                        Current plan
-                      </Button>
-                    ) : !canUpdateSubscription && !isDowngradeOption ? (
-                      <RequestUpgradeToBillingOwners block plan={plan.name as 'Pro' | 'Team'} />
-                    ) : (
-                      <ButtonTooltip
-                        block
-                        variant={isDowngradeOption ? 'default' : 'primary'}
-                        disabled={
-                          (!canUpdateSubscription && isDowngradeOption) ||
-                          subscription?.plan?.id === 'enterprise' ||
-                          subscription?.plan?.id === 'platform' ||
-                          // Downgrades to free are still allowed through the dashboard given we have much better control about showing customers the impact + any possible issues with downgrading to free
-                          (isPartnerBilledOrganization && plan.id !== 'tier_free') ||
-                          // Orgs managed by AWS marketplace are not allowed to change the plan
-                          selectedOrganization?.managed_by === MANAGED_BY.AWS_MARKETPLACE ||
-                          hasOrioleProjects
-                        }
-                        onClick={() => {
-                          setSelectedTier(plan.id as 'tier_free' | 'tier_pro' | 'tier_team')
-                          track('studio_pricing_plan_cta_clicked', {
-                            selectedPlan: plan.name,
-                            currentPlan: subscription?.plan?.name,
-                          })
-                        }}
-                        tooltip={{
-                          content: {
-                            side: 'bottom',
-                            className: hasOrioleProjects ? 'w-96 text-center' : '',
-                            text:
-                              !canUpdateSubscription && isDowngradeOption
-                                ? "You need additional permissions to change your organization's plan"
-                                : subscription?.plan?.id === 'enterprise' ||
-                                    subscription?.plan?.id === 'platform'
-                                  ? 'Reach out to us via support to update your plan'
-                                  : hasOrioleProjects
-                                    ? 'Your organization has projects that are using the OrioleDB extension which is only available on the Free plan. Remove all OrioleDB projects before changing your plan.'
-                                    : selectedOrganization?.managed_by ===
-                                        MANAGED_BY.AWS_MARKETPLACE
-                                      ? 'You cannot change the plan for an organization managed by AWS Marketplace'
-                                      : undefined,
-                          },
-                        }}
-                      >
-                        {isDowngradeOption ? 'Downgrade' : 'Upgrade'} to {plan.name}
-                      </ButtonTooltip>
-                    )}
-
-                    <div className="border-t my-4" />
-
-                    <ul role="list">
-                      {features.map((feature) => (
-                        <li
-                          key={typeof feature === 'string' ? feature : feature[0]}
-                          className="flex py-2"
-                        >
-                          <div className="w-[12px]">
-                            <Check
-                              className="h-3 w-3 text-brand translate-y-[2.5px]"
-                              aria-hidden="true"
-                              strokeWidth={3}
-                            />
-                          </div>
-                          <div>
-                            <p className="ml-3 text-xs text-foreground-light">
-                              {typeof feature === 'string' ? feature : feature[0]}
-                            </p>
-                            {isArray(feature) && (
-                              <p className="ml-3 text-xs text-foreground-lighter">{feature[1]}</p>
-                            )}
-                          </div>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-
-                  {footer && (
-                    <div className="border-t pt-4 mt-4">
-                      <p className="text-foreground-light text-xs">{footer}</p>
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        </SidePanel.Content>
-      </SidePanel>
+      {isFullScreen && isPanelOpen && (
+        <PlanUpdateFullScreenShell
+          organizationName={selectedOrganization?.name}
+          notice={notice}
+          skipOverlayFade={isOpenedViaUrl}
+          contentDelay={contentDelay}
+          onClose={onClose}
+        >
+          {planCards}
+        </PlanUpdateFullScreenShell>
+      )}
+
+      {!isFullScreen && (
+        <PlanUpdateSheetShell
+          visible={isPanelOpen}
+          organizationName={selectedOrganization?.name}
+          notice={notice}
+          onClose={onClose}
+        >
+          {planCards}
+        </PlanUpdateSheetShell>
+      )}
 
       <CancellationFlow
         visible={selectedTier === 'tier_free'}
@@ -380,6 +305,7 @@ export const PlanUpdateSidePanel = () => {
       <SubscriptionPlanUpdateDialog
         selectedTier={selectedTier}
         onClose={() => setSelectedTier(undefined)}
+        onSuccess={isFullScreen ? onClose : undefined}
         planMeta={planMeta}
         subscriptionPreviewQueryResult={subscriptionPreviewData}
         projects={orgProjects}
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
index 2c9c14826fe4a..484da2f54e740 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
@@ -64,6 +64,8 @@ type BreakdownItem =
 interface Props {
   selectedTier: 'tier_free' | 'tier_pro' | 'tier_team' | undefined
   onClose: () => void
+  /** Called after the subscription update succeeds, in addition to onClose. */
+  onSuccess?: () => void
   planMeta?: OrgPlan | null
   currentPlanMeta?: Partial<OrgPlan> & { features: (string | string[])[] }
   subscriptionPreviewQueryResult: OrganizationBillingSubscriptionPreviewQueryResult
@@ -77,6 +79,7 @@ interface Props {
 export const SubscriptionPlanUpdateDialog = ({
   selectedTier,
   onClose,
+  onSuccess,
   planMeta,
   subscriptionPreviewQueryResult,
   currentPlanMeta,
@@ -132,6 +135,7 @@ export const SubscriptionPlanUpdateDialog = ({
       `Successfully ${changeType === 'downgrade' ? 'downgraded' : 'upgraded'} subscription to ${subscriptionPlanMeta?.name}!`
     )
     onClose()
+    onSuccess?.()
     window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
   }
 
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
new file mode 100644
index 0000000000000..9a5fbed383eb6
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  FREE_PLAN_GAPS,
+  hasPlanGaps,
+  isFullScreenPresentation,
+  isParityPresentation,
+  isPlanChangeEligible,
+  parsePlanPresentationVariant,
+  PLAN_PRESENTATION_VARIANTS,
+  PRO_PLAN_GAPS,
+} from './plan-presentation'
+import { MANAGED_BY } from '@/lib/constants/infrastructure'
+
+describe('isPlanChangeEligible', () => {
+  const baseArgs = {
+    managedBy: 'supabase' as const,
+    billingPartner: null as string | null | undefined,
+    currentPlanId: 'free',
+    canUpdateSubscription: true,
+  }
+
+  it('returns true for a standard free-plan org with billing permissions', () => {
+    expect(isPlanChangeEligible(baseArgs)).toBe(true)
+  })
+
+  it('returns false for Stripe-managed orgs', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, managedBy: MANAGED_BY.STRIPE_PROJECTS })).toBe(false)
+  })
+
+  it('returns false for AWS Marketplace orgs', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, managedBy: MANAGED_BY.AWS_MARKETPLACE })).toBe(false)
+  })
+
+  it('returns false for partner-billed orgs', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, billingPartner: 'aws_marketplace' })).toBe(false)
+  })
+
+  it('returns false for enterprise plan', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, currentPlanId: 'enterprise' })).toBe(false)
+  })
+
+  it('returns false for platform plan', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, currentPlanId: 'platform' })).toBe(false)
+  })
+
+  it('returns false when user cannot update subscription', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, canUpdateSubscription: false })).toBe(false)
+  })
+
+  it('returns true for pro-plan org with billing permissions', () => {
+    expect(isPlanChangeEligible({ ...baseArgs, currentPlanId: 'pro' })).toBe(true)
+  })
+})
+
+describe('parsePlanPresentationVariant', () => {
+  it.each(PLAN_PRESENTATION_VARIANTS)('accepts %s', (variant) => {
+    expect(parsePlanPresentationVariant(variant)).toBe(variant)
+  })
+
+  it.each([undefined, false, '', 'Fullscreen', 'full-screen', 'fullscreen_gaps'])(
+    'rejects %o as not in the experiment',
+    (flag) => {
+      expect(parsePlanPresentationVariant(flag)).toBeUndefined()
+    }
+  )
+})
+
+describe('presentation matrix', () => {
+  // cards, shell, gaps — the three things a variant decides
+  it.each([
+    { variant: 'control', isParity: false, isFullScreen: false, showsGaps: false },
+    { variant: 'parity', isParity: true, isFullScreen: false, showsGaps: false },
+    { variant: 'gaps', isParity: true, isFullScreen: false, showsGaps: true },
+    { variant: 'fullscreen', isParity: true, isFullScreen: true, showsGaps: false },
+    { variant: 'fullscreen-gaps', isParity: true, isFullScreen: true, showsGaps: true },
+  ] as const)('$variant', ({ variant, isParity, isFullScreen, showsGaps }) => {
+    expect(isParityPresentation(variant)).toBe(isParity)
+    expect(isFullScreenPresentation(variant)).toBe(isFullScreen)
+    expect(hasPlanGaps(variant)).toBe(showsGaps)
+  })
+
+  it('covers every variant in the experiment', () => {
+    expect(PLAN_PRESENTATION_VARIANTS).toHaveLength(5)
+  })
+})
+
+describe('gap lists', () => {
+  it('FREE_PLAN_GAPS includes backups and email support as missing', () => {
+    const missing = FREE_PLAN_GAPS.filter((g) => g.type === 'missing')
+    expect(missing.map((g) => g.label)).toContain('Daily backups')
+    expect(missing.map((g) => g.label)).toContain('Email support')
+  })
+
+  it('FREE_PLAN_GAPS shows log retention as lesser, not missing', () => {
+    const logRetention = FREE_PLAN_GAPS.find((g) => g.label.includes('log retention'))
+    expect(logRetention).toBeDefined()
+    expect(logRetention!.type).toBe('lesser')
+  })
+
+  it('PRO_PLAN_GAPS includes SOC2 and SSO as missing', () => {
+    const missing = PRO_PLAN_GAPS.filter((g) => g.type === 'missing')
+    expect(missing.map((g) => g.label)).toContain('SOC2 & ISO 27001')
+    expect(missing.map((g) => g.label)).toContain('SSO for Supabase Dashboard')
+  })
+})
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
new file mode 100644
index 0000000000000..e7512346010a4
--- /dev/null
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/plan-presentation.ts
@@ -0,0 +1,120 @@
+import { IS_PLATFORM, useFeatureFlags } from 'common'
+import { useMemo } from 'react'
+
+import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
+import { useTrackExperimentExposure } from '@/hooks/misc/useTrackExperimentExposure'
+import { usePHFlag } from '@/hooks/ui/useFlag'
+import { MANAGED_BY } from '@/lib/constants/infrastructure'
+import type { ManagedBy } from '@/lib/constants/infrastructure'
+
+export const PLAN_PRESENTATION_VARIANTS = [
+  'control',
+  'parity',
+  'gaps',
+  'fullscreen',
+  'fullscreen-gaps',
+] as const
+
+export type PlanPresentationVariant = (typeof PLAN_PRESENTATION_VARIANTS)[number]
+
+const FLAG_KEY = 'pricingPanelPlanPresentation'
+const EXPERIMENT_ID = 'pricing_panel_plan_presentation'
+
+interface PlanPresentation {
+  /** `control` is the original compact card; `parity` is the richer card. */
+  cards: 'control' | 'parity'
+  /** `sheet` is the SidePanel; `fullscreen` is a full-screen overlay. */
+  shell: 'sheet' | 'fullscreen'
+  /** Whether cards list what the plan is missing ("Not included" / "Plan limits"). */
+  showsGaps: boolean
+}
+
+const PLAN_PRESENTATIONS: Record<PlanPresentationVariant, PlanPresentation> = {
+  control: { cards: 'control', shell: 'sheet', showsGaps: false },
+  parity: { cards: 'parity', shell: 'sheet', showsGaps: false },
+  gaps: { cards: 'parity', shell: 'sheet', showsGaps: true },
+  fullscreen: { cards: 'parity', shell: 'fullscreen', showsGaps: false },
+  'fullscreen-gaps': { cards: 'parity', shell: 'fullscreen', showsGaps: true },
+}
+
+export function parsePlanPresentationVariant(
+  flag: string | boolean | undefined
+): PlanPresentationVariant | undefined {
+  return PLAN_PRESENTATION_VARIANTS.find((variant) => variant === flag)
+}
+
+export function isParityPresentation(variant: PlanPresentationVariant): boolean {
+  return PLAN_PRESENTATIONS[variant].cards === 'parity'
+}
+
+export function isFullScreenPresentation(variant: PlanPresentationVariant): boolean {
+  return PLAN_PRESENTATIONS[variant].shell === 'fullscreen'
+}
+
+export function hasPlanGaps(variant: PlanPresentationVariant): boolean {
+  return PLAN_PRESENTATIONS[variant].showsGaps
+}
+
+export function isPlanChangeEligible({
+  managedBy,
+  billingPartner,
+  currentPlanId,
+  canUpdateSubscription,
+}: {
+  managedBy: ManagedBy | undefined
+  billingPartner: string | null | undefined
+  currentPlanId: string | undefined
+  canUpdateSubscription: boolean
+}): boolean {
+  if (managedBy === MANAGED_BY.STRIPE_PROJECTS) return false
+  if (managedBy === MANAGED_BY.AWS_MARKETPLACE) return false
+  if (isPartnerBillingOrganization(billingPartner)) return false
+  if (currentPlanId === 'enterprise' || currentPlanId === 'platform') return false
+  if (!canUpdateSubscription) return false
+  return true
+}
+
+export interface PlanPresentationExperiment {
+  variant: PlanPresentationVariant
+  /**
+   * False while PostHog flags are still in flight. The `fullscreen` variant swaps the whole panel
+   * shell, so callers must wait rather than open the control sheet and swap it out mid-animation.
+   */
+  isResolved: boolean
+}
+
+export function usePlanPresentationExperiment({
+  eligible,
+}: {
+  eligible: boolean
+}): PlanPresentationExperiment {
+  const { hasLoaded } = useFeatureFlags()
+  const flag = usePHFlag<PlanPresentationVariant>(FLAG_KEY)
+
+  const assignedVariant = useMemo(() => parsePlanPresentationVariant(flag), [flag])
+
+  const liveVariant = eligible ? assignedVariant : undefined
+  useTrackExperimentExposure(EXPERIMENT_ID, liveVariant)
+
+  return {
+    variant: liveVariant ?? 'control',
+    isResolved: !IS_PLATFORM || !!hasLoaded,
+  }
+}
+
+export interface GapFeature {
+  label: string
+  type: 'missing' | 'lesser'
+}
+
+export const FREE_PLAN_GAPS: GapFeature[] = [
+  { label: 'Daily backups', type: 'missing' },
+  { label: 'Email support', type: 'missing' },
+  { label: '1-day log retention', type: 'lesser' },
+]
+
+export const PRO_PLAN_GAPS: GapFeature[] = [
+  { label: 'SOC2 & ISO 27001', type: 'missing' },
+  { label: 'SSO for Supabase Dashboard', type: 'missing' },
+  { label: 'Priority email support & SLAs', type: 'missing' },
+]
diff --git a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
index f26b15f611245..b0dc49349fac8 100644
--- a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
@@ -82,11 +82,7 @@ export const AdvisorSection = ({ showEmptyState = false }: { showEmptyState?: bo
 
       const advisorCategory =
         item.source === 'lint'
-          ? item.original.categories.includes('SECURITY')
-            ? 'SECURITY'
-            : item.original.categories.includes('PERFORMANCE')
-              ? 'PERFORMANCE'
-              : undefined
+          ? item.original.categories[0]
           : item.source === 'signal'
             ? 'SECURITY'
             : undefined
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index 8041ebe9b7d3b..b3273b870c2dc 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -171,7 +171,7 @@ const RenameQueryForm = ({ snippet, onCancel, onComplete }: RenameQueryFormProps
             render={({ field }) => (
               <FormItemLayout name="name" layout="vertical" label="Name">
                 <FormControl>
-                  <Input {...field} id="name" />
+                  <Input {...field} />
                 </FormControl>
               </FormItemLayout>
             )}
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
index 38c9cc7626957..793038eb43b70 100644
--- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx
@@ -198,13 +198,11 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="name"
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
                     <FormControl>
                       <Input
-                        id="name"
                         data-1p-ignore
                         data-lpignore="true"
                         data-form-type="other"
@@ -228,18 +226,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 render={({ field }) => (
                   <FormItemLayout
                     hideMessage
-                    name="public"
                     label="Public bucket"
                     description="Allow anyone to read objects without authorization"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="public"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -262,18 +254,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="has_file_size_limit"
                     label="Restrict file size"
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="has_file_size_limit"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -286,22 +272,11 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                     name="formatted_size_limit"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItemLayout
-                        hideMessage
-                        name="formatted_size_limit"
-                        label="File size limit"
-                      >
+                      <FormItemLayout hideMessage label="File size limit">
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
                             <FormControl>
-                              <Input
-                                id="formatted_size_limit"
-                                aria-label="File size limit"
-                                type="number"
-                                min={0}
-                                placeholder="0"
-                                {...field}
-                              />
+                              <Input type="number" min={0} placeholder="0" {...field} />
                             </FormControl>
                           </div>
                           <div className="col-span-4">
@@ -357,7 +332,7 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
 
             <DialogSection className="space-y-2">
               <FormItemLayout
-                name="has_allowed_mime_types"
+                id="has_allowed_mime_types"
                 label="Restrict MIME types"
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
@@ -378,14 +353,12 @@ export const CreateBucketModal = ({ open, onOpenChange }: CreateBucketModalProps
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout
-                      name="allowed_mime_types"
                       label="Allowed MIME types"
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
                       <FormControl>
                         <Input
-                          id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index 125d45e2d093d..a2a723364ae6f 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -212,12 +212,11 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 render={({ field }) => (
                   <FormItemLayout
                     hideMessage
-                    name="name"
                     label="Bucket name"
                     labelOptional="Cannot be changed after creation"
                   >
                     <FormControl>
-                      <Input id="name" {...field} disabled />
+                      <Input {...field} disabled />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -231,14 +230,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                   render={({ field }) => (
                     <FormItemLayout
                       hideMessage
-                      name="public"
                       label="Public bucket"
                       description="Allow anyone to read objects without authorization"
                       layout="flex"
                     >
                       <FormControl>
                         <Switch
-                          id="public"
                           size="large"
                           checked={field.value}
                           onCheckedChange={field.onChange}
@@ -292,18 +289,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                 control={form.control}
                 render={({ field }) => (
                   <FormItemLayout
-                    name="has_file_size_limit"
                     label="Restrict file size"
                     description="Prevent uploading of files larger than a specified limit"
                     layout="flex"
                   >
                     <FormControl>
-                      <Switch
-                        id="has_file_size_limit"
-                        size="large"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl>
                   </FormItemLayout>
                 )}
@@ -315,16 +306,11 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                     name="formatted_size_limit"
                     control={form.control}
                     render={({ field }) => (
-                      <FormItemLayout
-                        hideMessage
-                        name="formatted_size_limit"
-                        label="File size limit"
-                      >
+                      <FormItemLayout hideMessage label="File size limit">
                         <div className="grid grid-cols-12 gap-x-2">
                           <div className="col-span-8">
                             <FormControl>
                               <Input
-                                id="formatted_size_limit"
                                 aria-label="File size limit"
                                 type="number"
                                 min={0}
@@ -386,14 +372,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
 
             <DialogSection className="space-y-2">
               <FormItemLayout
-                name="has_allowed_mime_types"
                 label="Restrict MIME types"
                 description="Allow only certain types of files to be uploaded"
                 layout="flex"
               >
                 <FormControl>
                   <Switch
-                    id="has_allowed_mime_types"
                     size="large"
                     checked={hasAllowedMimeTypes}
                     onCheckedChange={setHasAllowedMimeTypes}
@@ -407,14 +391,12 @@ export const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalPro
                   control={form.control}
                   render={({ field }) => (
                     <FormItemLayout
-                      name="allowed_mime_types"
                       label="Allowed MIME types"
                       labelOptional="Comma separated values"
                       description="Wildcards are allowed, e.g. image/*."
                     >
                       <FormControl>
                         <Input
-                          id="allowed_mime_types"
                           {...field}
                           placeholder="e.g image/jpeg, image/png, audio/mpeg, video/mp4, etc"
                         />
diff --git a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
index 35f20e3484034..3aa8056790b0f 100644
--- a/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
+++ b/apps/studio/components/interfaces/Support/DashboardLogsToggle.tsx
@@ -1,7 +1,14 @@
 import { ChevronRight } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import type { UseFormReturn } from 'react-hook-form'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  FormControl,
+  FormField,
+  Switch,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import { DASHBOARD_LOG_CATEGORIES } from './dashboard-logs'
@@ -33,7 +40,6 @@ export function DashboardLogsToggle({
       render={({ field }) => (
         <FormItemLayout
           hideMessage
-          name="attachDashboardLogs"
           className={className}
           layout="flex"
           align={align}
@@ -68,12 +74,9 @@ export function DashboardLogsToggle({
             </div>
           }
         >
-          <Switch
-            size="large"
-            id="attachDashboardLogs"
-            checked={field.value}
-            onCheckedChange={field.onChange}
-          />
+          <FormControl>
+            <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
+          </FormControl>
         </FormItemLayout>
       )}
     />
diff --git a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
index 674ed5a11d241..0d3ba10a5df3e 100644
--- a/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
+++ b/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
@@ -3,7 +3,15 @@
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import type { UseFormReturn } from 'react-hook-form'
-import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
+import {
+  Badge,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  FormControl,
+  FormField,
+  Switch,
+} from 'ui'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
 import type { SupportFormValues } from './SupportForm.schema'
@@ -23,7 +31,6 @@ export function SupportAccessToggle({ form, align = 'left', className }: Support
         return (
           <FormItemLayout
             hideMessage
-            name="allowSupportAccess"
             className={className}
             layout="flex"
             align={align}
@@ -75,12 +82,9 @@ export function SupportAccessToggle({ form, align = 'left', className }: Support
               </div>
             }
           >
-            <Switch
-              size="large"
-              id="allowSupportAccess"
-              checked={field.value}
-              onCheckedChange={field.onChange}
-            />
+            <FormControl>
+              <Switch size="large" checked={field.value} onCheckedChange={field.onChange} />
+            </FormControl>
           </FormItemLayout>
         )
       }}
diff --git a/apps/studio/components/interfaces/Workers/Workers.utils.test.ts b/apps/studio/components/interfaces/Workers/Workers.utils.test.ts
index da791ba034949..735d86fe26cb8 100644
--- a/apps/studio/components/interfaces/Workers/Workers.utils.test.ts
+++ b/apps/studio/components/interfaces/Workers/Workers.utils.test.ts
@@ -112,8 +112,8 @@ describe('formatRuntime', () => {
     expect(formatRuntime('rust')).toBe('rust')
   })
 
-  it('reports unknown when the API omits the runtime', () => {
-    expect(formatRuntime(undefined)).toBe('Unknown')
+  it('labels an omitted runtime as custom', () => {
+    expect(formatRuntime(undefined)).toBe('Custom')
   })
 })
 
diff --git a/apps/studio/components/interfaces/Workers/Workers.utils.ts b/apps/studio/components/interfaces/Workers/Workers.utils.ts
index ddbcae1ee2094..116781496367e 100644
--- a/apps/studio/components/interfaces/Workers/Workers.utils.ts
+++ b/apps/studio/components/interfaces/Workers/Workers.utils.ts
@@ -42,7 +42,7 @@ export const getRuntimeMeta = (runtime: string | undefined): RuntimeMeta | undef
   runtime === undefined ? undefined : RUNTIMES[runtime]
 
 export const formatRuntime = (runtime: string | undefined): string =>
-  getRuntimeMeta(runtime)?.label ?? runtime ?? 'Unknown'
+  getRuntimeMeta(runtime)?.label ?? runtime ?? 'Custom'
 
 // The API reports size as e.g. "2gb-1vcpu"; render the parts when they parse, the raw value if not.
 export const formatSize = (size: string): string => {
diff --git a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
index 293ec7d6fdeea..fac0c33c63823 100644
--- a/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
+++ b/apps/studio/components/layouts/ExplorerLayout/ExplorerLayout.tsx
@@ -153,7 +153,7 @@ const NewTabButton = () => {
       <DropdownMenuContent className="w-40" align="end">
         <DropdownMenuItem className="gap-x-2" onClick={() => createQuery()}>
           <SquareCode size={14} />
-          <span>New query</span>
+          <span>Run SQL</span>
         </DropdownMenuItem>
         <DropdownMenuItem className="gap-x-2" onClick={() => createNotebook()}>
           <NotebookText size={14} />
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
index 0b94d8cdb6800..1a9aa92f849b3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantChat.tsx
@@ -462,6 +462,19 @@ export const AssistantChat = ({
     }
   }, [composerContext?.initialInput])
 
+  let placeholder: string
+  if (hasMessages && isSupportChat) {
+    placeholder = 'Share details so the assistant can help with your support request...'
+  } else if (hasMessages) {
+    placeholder = 'Ask a follow up question...'
+  } else if ((composerContext?.sqlSnippets ?? []).length > 0) {
+    placeholder = 'Ask a question or make a change...'
+  } else if (isSupportChat) {
+    placeholder = 'Describe your support issue...'
+  } else {
+    placeholder = 'Chat to Postgres...'
+  }
+
   return (
     <ErrorBoundary
       message="Something went wrong with the AI Assistant"
@@ -614,102 +627,89 @@ export const AssistantChat = ({
           )}
         </AnimatePresence>
 
-        <div className="px-3 pb-3 z-20 relative w-full max-w-3xl mx-auto flex flex-col gap-y-3">
-          {isSupportChat && !isSupportChatClosed && (
-            <div>
-              <div className="mb-3 border-t" />
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="tiny"
-                  disabled={!supportConversationId}
-                  onClick={() => state.setSupportLifecycleStatus(chatId, 'escalated')}
-                >
-                  Escalate to human
-                </Button>
-                <Button
-                  variant="outline"
-                  size="tiny"
-                  disabled={!supportConversationId}
-                  onClick={() => state.setSupportLifecycleStatus(chatId, 'user_resolved')}
-                >
-                  Resolve
-                </Button>
+        <div className="relative z-20 w-full px-7 pb-3">
+          <div className="mx-auto flex w-full max-w-3xl flex-col gap-y-3">
+            {isSupportChat && !isSupportChatClosed && (
+              <div>
+                <div className="mb-3 border-t" />
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="tiny"
+                    disabled={!supportConversationId}
+                    onClick={() => state.setSupportLifecycleStatus(chatId, 'escalated')}
+                  >
+                    Escalate to human
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="tiny"
+                    disabled={!supportConversationId}
+                    onClick={() => state.setSupportLifecycleStatus(chatId, 'user_resolved')}
+                  >
+                    Resolve
+                  </Button>
+                </div>
               </div>
-            </div>
-          )}
-
-          {disablePrompts && (
-            <Admonition
-              showIcon={false}
-              type="default"
-              title="Assistant has been temporarily disabled"
-              description="We're currently looking into getting it back online"
-            />
-          )}
+            )}
 
-          {isSuccess && !isApiKeySet && (
-            <Admonition
-              type="default"
-              title="OpenAI API key not set"
-              description={
-                <Markdown
-                  content={
-                    'Add your `OPENAI_API_KEY` to your environment variables to use the AI Assistant.'
-                  }
-                />
-              }
-            />
-          )}
+            {disablePrompts && (
+              <Admonition
+                showIcon={false}
+                type="default"
+                title="Assistant has been temporarily disabled"
+                description="We're currently looking into getting it back online"
+              />
+            )}
 
-          <AssistantChatForm
-            textAreaRef={inputRef}
-            className={cn(
-              'z-20',
-              '[&>form>textarea]:text-base [&>form>textarea]:md:text-sm [&>form>textarea]:border',
-              '[&>form>textarea]:rounded-md [&>form>textarea]:outline-hidden!',
-              '[&>form>textarea]:ring-offset-0! [&>form>textarea]:ring-0!'
+            {isSuccess && !isApiKeySet && (
+              <Admonition
+                type="default"
+                title="OpenAI API key not set"
+                description={
+                  <Markdown
+                    content={
+                      'Add your `OPENAI_API_KEY` to your environment variables to use the AI Assistant.'
+                    }
+                  />
+                }
+              />
             )}
-            loading={isChatLoading}
-            isEditing={!!editingMessageId}
-            disabled={isChatInputDisabled}
-            placeholder={
-              hasMessages
-                ? isSupportChat
-                  ? 'Share details so the assistant can help with your support request...'
-                  : 'Ask a follow up question...'
-                : (composerContext?.sqlSnippets ?? []).length > 0
-                  ? 'Ask a question or make a change...'
-                  : isSupportChat
-                    ? 'Describe your support issue...'
-                    : 'Chat to Postgres...'
-            }
-            value={value}
-            onValueChange={(e) => {
-              setValue(e.target.value)
-              onInputChange?.(e.target.value)
-            }}
-            onSubmit={(finalMessage) => {
-              sendMessageToAssistant(finalMessage)
-            }}
-            onStop={() => {
-              stop()
-              // to save partial responses from the AI
-              const lastMessage = chatMessages[chatMessages.length - 1]
-              if (lastMessage && lastMessage.role === 'assistant') {
-                state.updateMessage(lastMessage, chatId)
-              }
-            }}
-            sqlSnippets={composerContext?.sqlSnippets}
-            onRemoveSnippet={(index) => {
-              const newSnippets = [...(composerContext?.sqlSnippets ?? [])]
-              newSnippets.splice(index, 1)
-              composerContext?.onSetSqlSnippets?.(newSnippets)
-            }}
-            includeSnippetsInMessage={includeSnippetsInMessage}
-            selectedModel={selectedModel}
-            onSelectModel={(model) => snap.setModel(model)}
-          />
+
+            <AssistantChatForm
+              textAreaRef={inputRef}
+              className="z-20"
+              loading={isChatLoading}
+              isEditing={!!editingMessageId}
+              disabled={isChatInputDisabled}
+              placeholder={placeholder}
+              value={value}
+              onValueChange={(e) => {
+                setValue(e.target.value)
+                onInputChange?.(e.target.value)
+              }}
+              onSubmit={(finalMessage) => {
+                sendMessageToAssistant(finalMessage)
+              }}
+              onStop={() => {
+                stop()
+                // to save partial responses from the AI
+                const lastMessage = chatMessages[chatMessages.length - 1]
+                if (lastMessage && lastMessage.role === 'assistant') {
+                  state.updateMessage(lastMessage, chatId)
+                }
+              }}
+              sqlSnippets={composerContext?.sqlSnippets}
+              onRemoveSnippet={(index) => {
+                const newSnippets = [...(composerContext?.sqlSnippets ?? [])]
+                newSnippets.splice(index, 1)
+                composerContext?.onSetSqlSnippets?.(newSnippets)
+              }}
+              includeSnippetsInMessage={includeSnippetsInMessage}
+              selectedModel={selectedModel}
+              onSelectModel={(model) => snap.setModel(model)}
+            />
+          </div>
         </div>
       </div>
     </ErrorBoundary>
diff --git a/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx b/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx
index 4b273f3dd749a..75c793a11c478 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AssistantNotebookPreview.tsx
@@ -86,7 +86,7 @@ export const AssistantNotebookPreview = ({
     <div className={cn('flex w-full min-w-0 max-w-6xl mx-auto flex-col', className)}>
       <ExplorerToolbar aria-label="Notebook toolbar">
         <ExplorerToolbarIcon>
-          <NotebookText />
+          <NotebookText size={16} strokeWidth={2} />
         </ExplorerToolbarIcon>
         <ExplorerToolbarTitle>{title ?? FALLBACK_TITLE[mode]}</ExplorerToolbarTitle>
         <ExplorerToolbarActions>
diff --git a/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx b/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
index 47144332cc3a5..dd0b6acc89cd3 100644
--- a/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/elements/Conversation.tsx
@@ -1,21 +1,33 @@
 import { ArrowDownIcon } from 'lucide-react'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { useCallback } from 'react'
 import { Button, cn } from 'ui'
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom'
 
-type ConversationProps = ComponentProps<typeof StickToBottom>
+type ConversationProps = Omit<ComponentProps<typeof StickToBottom>, 'children'> & {
+  children?: ReactNode
+}
 type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>
 type ConversationScrollButtonProps = ComponentProps<typeof Button>
 
-export const Conversation = ({ className, ...props }: ConversationProps) => (
+export const Conversation = ({ className, children, ...props }: ConversationProps) => (
   <StickToBottom
     className={cn('relative flex-1 overflow-y-auto', className)}
     initial="smooth"
     resize="smooth"
     role="log"
     {...props}
-  />
+  >
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-linear-to-b from-card to-transparent"
+    />
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-8 bg-linear-to-t from-card to-transparent"
+    />
+    {children}
+  </StickToBottom>
 )
 
 export const ConversationContent = ({ className, ...props }: ConversationContentProps) => (
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx
index 7622d05782558..e19bd4b16740b 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanel.tsx
@@ -202,11 +202,7 @@ export const AdvisorPanel = () => {
 
     const advisorCategory =
       item.source === 'lint'
-        ? item.original.categories.includes('SECURITY')
-          ? 'SECURITY'
-          : item.original.categories.includes('PERFORMANCE')
-            ? 'PERFORMANCE'
-            : undefined
+        ? item.original.categories[0]
         : item.source === 'signal'
           ? 'SECURITY'
           : undefined
diff --git a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
index 78120cc7b397b..70979ff5054f0 100644
--- a/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
+++ b/apps/studio/components/ui/BannerStack/Banners/BannerExplorer.tsx
@@ -1,5 +1,6 @@
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { AnimatePresence, motion } from 'framer-motion'
+import { useEffect } from 'react'
 import { Badge, Button } from 'ui'
 
 import { BannerCard } from '../BannerCard'
@@ -8,6 +9,8 @@ import { useFeaturePreviewModal } from '@/components/interfaces/App/FeaturePrevi
 import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
 import { useTrack } from '@/lib/telemetry/track'
 
+let hasTrackedExposureThisPageLoad = false
+
 export const BannerExplorer = () => {
   const track = useTrack()
   const { dismissBanner } = useBannerStack()
@@ -18,6 +21,13 @@ export const BannerExplorer = () => {
     false
   )
 
+  useEffect(() => {
+    if (hasTrackedExposureThisPageLoad) return
+    hasTrackedExposureThisPageLoad = true
+
+    track('explorer_banner_exposed')
+  }, [track])
+
   return (
     <BannerCard
       onDismiss={() => {
diff --git a/apps/studio/components/ui/DataGridResults/ResultCell.tsx b/apps/studio/components/ui/DataGridResults/ResultCell.tsx
index 1fd909239fdfb..3b77a9b6b88f8 100644
--- a/apps/studio/components/ui/DataGridResults/ResultCell.tsx
+++ b/apps/studio/components/ui/DataGridResults/ResultCell.tsx
@@ -1,7 +1,8 @@
 import { Expand } from 'lucide-react'
-import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { formatCellValue, isLargeValue } from './DataGridResults.utils'
+import { NullValue } from '@/components/grid/components/common/NullValue'
 
 interface ResultCellProps {
   column: string
@@ -15,16 +16,13 @@ export const ResultCell = ({ column, value, onContextMenu, onExpand }: ResultCel
 
   return (
     <div
-      className={cn(
-        'group/cell relative flex items-center h-full font-mono text-xs w-full whitespace-pre',
-        value === null && 'text-foreground-lighter'
-      )}
+      className="group/cell relative flex h-full w-full items-center overflow-hidden text-ellipsis text-grid text-foreground"
       onContextMenu={(e) => {
         e.preventDefault()
         onContextMenu(e, column, value)
       }}
     >
-      {formatCellValue(value)}
+      {value === null ? <NullValue /> : formatCellValue(value)}
       {showExpand && (
         <Tooltip>
           <TooltipTrigger asChild>
diff --git a/apps/studio/components/ui/DataGridResults/index.tsx b/apps/studio/components/ui/DataGridResults/index.tsx
index 6aa117000f47e..fb7dccda9a80a 100644
--- a/apps/studio/components/ui/DataGridResults/index.tsx
+++ b/apps/studio/components/ui/DataGridResults/index.tsx
@@ -43,7 +43,11 @@ export const DataGridResults = ({ rows }: { rows: readonly ResultRow[] }) => {
   }, [])
 
   const columnRender = (name: string) => {
-    return <div className="flex h-full items-center justify-center font-mono text-xs">{name}</div>
+    return (
+      <div className="flex h-full items-center overflow-hidden text-ellipsis text-xs select-text text-foreground">
+        {name}
+      </div>
+    )
   }
 
   const columns: CalculatedColumn<ResultRow>[] = useMemo(
@@ -80,7 +84,7 @@ export const DataGridResults = ({ rows }: { rows: readonly ResultRow[] }) => {
   return (
     <>
       {rows.length === 0 ? (
-        <p className="px-4 py-3 font-mono text-sm text-foreground-light">
+        <p className="px-4 py-3 font-sans text-sm text-foreground-light">
           Success. No rows returned
         </p>
       ) : (
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index 9b696b3a207cd..afa5bb51574fe 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -44,7 +44,9 @@ import { DataGridResults } from '../DataGridResults'
 import { SqlWarningAdmonition } from '../SqlWarningAdmonition'
 import { formatSqlError } from './EditorPanel.utils'
 import { SaveSnippetDialog } from './SaveSnippetDialog'
+import { useIsExplorerEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { isExplainQuery } from '@/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils'
+import { useCreateQuery } from '@/components/interfaces/Explorer/hooks'
 import { generateSnippetTitle } from '@/components/interfaces/SQLEditor/SQLEditor.constants'
 import { createSqlSnippetSkeletonV2 } from '@/components/interfaces/SQLEditor/SQLEditor.utils'
 import { useAddDefinitions } from '@/components/interfaces/SQLEditor/useAddDefinitions'
@@ -84,6 +86,8 @@ export const EditorPanel = () => {
   const { profile } = useProfile()
   const { closeSidebar } = useSidebarManagerSnapshot()
   const sqlEditorSnap = useSqlEditorV2StateSnapshot()
+  const isExplorerEnabled = useIsExplorerEnabled()
+  const { createQuery } = useCreateQuery()
   const queryClient = useQueryClient()
 
   const [activeSnippet, setActiveSnippet] = useState<Extract<Content, { type: 'sql' }> | null>(null)
@@ -271,6 +275,38 @@ export const EditorPanel = () => {
     editorPanelState.setActiveSnippetId(null)
   }
 
+  const handleExpand = () => {
+    if (isExplorerEnabled) {
+      const id = createQuery({ sql: currentValue, name: generateSnippetTitle() })
+      if (id) handleClosePanel()
+      return
+    }
+
+    if (!ref) return console.error('Project ref is required')
+
+    if (!project) {
+      console.error('Project is required')
+      return
+    }
+    if (!profile) {
+      console.error('Profile is required')
+      return
+    }
+
+    const snippet = createSqlSnippetSkeletonV2({
+      name: generateSnippetTitle(),
+      sql: currentValue,
+      owner_id: profile.id,
+      project_id: project.id,
+    })
+
+    sqlEditorSnap.addSnippet({ projectRef: ref, snippet })
+    sqlEditorSnap.addNeedsSaving(snippet.id)
+
+    router.push(`/project/${ref}/sql/${snippet.id}`)
+    handleClosePanel()
+  }
+
   return (
     <div className="flex h-full flex-col bg-card">
       <div className="border-b border-b-muted flex items-center justify-between gap-x-4 pl-4 pr-3 h-(--header-height)">
@@ -426,37 +462,14 @@ export const EditorPanel = () => {
             variant="text"
             className="w-7 h-7 p-0"
             icon={<Maximize2 strokeWidth={1.5} />}
+            aria-label={isExplorerEnabled ? 'Open in Explorer' : 'Expand to SQL editor'}
             tooltip={{
               content: {
                 side: 'bottom',
-                text: 'Expand to SQL editor',
+                text: isExplorerEnabled ? 'Open in Explorer' : 'Expand to SQL editor',
               },
             }}
-            onClick={() => {
-              if (!ref) return console.error('Project ref is required')
-
-              if (!project) {
-                console.error('Project is required')
-                return
-              }
-              if (!profile) {
-                console.error('Profile is required')
-                return
-              }
-
-              const snippet = createSqlSnippetSkeletonV2({
-                name: generateSnippetTitle(),
-                sql: currentValue,
-                owner_id: profile.id,
-                project_id: project.id,
-              })
-
-              sqlEditorSnap.addSnippet({ projectRef: ref, snippet })
-              sqlEditorSnap.addNeedsSaving(snippet.id)
-
-              router.push(`/project/${ref}/sql/${snippet.id}`)
-              handleClosePanel()
-            }}
+            onClick={handleExpand}
           />
 
           <ButtonTooltip
diff --git a/apps/studio/hooks/misc/useTrackExperimentExposure.ts b/apps/studio/hooks/misc/useTrackExperimentExposure.ts
new file mode 100644
index 0000000000000..5b1f491137dac
--- /dev/null
+++ b/apps/studio/hooks/misc/useTrackExperimentExposure.ts
@@ -0,0 +1,18 @@
+import { hasConsented, posthogClient } from 'common'
+import { useEffect } from 'react'
+
+export function useTrackExperimentExposure(
+  experimentId: string,
+  variant: string | undefined,
+  extraProperties?: Record<string, any>
+) {
+  useEffect(() => {
+    if (!variant) return
+
+    posthogClient.captureExperimentExposure(
+      experimentId,
+      { variant, ...extraProperties },
+      hasConsented()
+    )
+  }, [experimentId, variant])
+}
diff --git a/apps/www/md-alternates.test.ts b/apps/www/md-alternates.test.ts
index d610d6360632e..27791115c60a1 100644
--- a/apps/www/md-alternates.test.ts
+++ b/apps/www/md-alternates.test.ts
@@ -91,6 +91,25 @@ describe('markdown alternate drift', () => {
     ).toBe(true)
   })
 
+  it('changelog entry page gates its .md alternate on CHANGELOG_PAGES membership', async () => {
+    const source = await fs.readFile(
+      path.join(process.cwd(), 'pages', 'changelog', '[slug].tsx'),
+      'utf-8'
+    )
+    expect(
+      source.includes('CHANGELOG_PAGES.has(`changelog/${entry.slug}`)'),
+      'pages/changelog/[slug].tsx must compute the markdown alternate flag from CHANGELOG_PAGES membership using the changelog/-prefixed key the generator emits'
+    ).toBe(true)
+    expect(
+      source.includes('hasMarkdownVariant &&'),
+      'pages/changelog/[slug].tsx must render the markdown alternate link only when hasMarkdownVariant is true'
+    ).toBe(true)
+    expect(
+      source.includes('rel="alternate" type="text/markdown"'),
+      'pages/changelog/[slug].tsx must advertise the text/markdown alternate for published slugs'
+    ).toBe(true)
+  })
+
   it.for(MDX_SECTIONS)('%s pages advertise their .md sibling', async (urlPrefix) => {
     const appPagePath = path.join(process.cwd(), 'app', urlPrefix, '[slug]', 'page.tsx')
     if (!existsSync(appPagePath)) {
diff --git a/apps/www/pages/changelog/[slug].tsx b/apps/www/pages/changelog/[slug].tsx
index c27fd4281f270..692a8ab1adece 100644
--- a/apps/www/pages/changelog/[slug].tsx
+++ b/apps/www/pages/changelog/[slug].tsx
@@ -5,6 +5,7 @@ import { NextSeo } from 'next-seo'
 import Head from 'next/head'
 import Link from 'next/link'
 
+import { CHANGELOG_PAGES } from '@/app/api-v2/md/content.generated'
 import { ChangelogDetailSidebar } from '@/components/Changelog/ChangelogDetailSidebar'
 import { ChangelogInlineMarkdown } from '@/components/Changelog/ChangelogInlineMarkdown'
 import CTABanner from '@/components/CTABanner'
@@ -20,15 +21,25 @@ type PageProps = {
   slug: string
   frontmatter: ChangelogEntryFrontmatter
   source: MDXRemoteSerializeResult
+  hasMarkdownVariant: boolean
 }
 
-const ChangelogDetailPage = ({ title, created_at, slug, frontmatter, source }: PageProps) => {
+const ChangelogDetailPage = ({
+  title,
+  created_at,
+  slug,
+  frontmatter,
+  source,
+  hasMarkdownVariant,
+}: PageProps) => {
   const plainTitle = stripTitleMarkdown(title)
   return (
     <>
-      <Head>
-        <link rel="alternate" type="text/markdown" href={`/changelog/${slug}.md`} />
-      </Head>
+      {hasMarkdownVariant && (
+        <Head>
+          <link rel="alternate" type="text/markdown" href={`/changelog/${slug}.md`} />
+        </Head>
+      )}
       <NextSeo
         title={`${plainTitle} · Changelog`}
         description={plainTitle}
@@ -106,6 +117,7 @@ export const getStaticProps: GetStaticProps<PageProps> = async ({ params }) => {
       slug: entry.slug,
       frontmatter: entry.frontmatter,
       source,
+      hasMarkdownVariant: CHANGELOG_PAGES.has(`changelog/${entry.slug}`),
     },
     revalidate: 900,
   }
diff --git a/packages/common/telemetry-constants.ts b/packages/common/telemetry-constants.ts
index bafb97da93703..12dad4e22439e 100644
--- a/packages/common/telemetry-constants.ts
+++ b/packages/common/telemetry-constants.ts
@@ -1531,6 +1531,19 @@ export interface DatabaseConnectionsBannerCtaButtonClickedEvent {
   groups: TelemetryGroups
 }
 
+/**
+ * The Explorer feature preview banner was rendered in studio project pages, fired at most once
+ * per page load. Acts as the denominator for the banner's dismiss and CTA rates; dedupe per
+ * session or per user at query time.
+ *
+ * @group Events
+ * @source studio
+ */
+export interface ExplorerBannerExposedEvent {
+  action: 'explorer_banner_exposed'
+  groups: TelemetryGroups
+}
+
 /**
  * User clicked the dismiss button on the Explorer feature preview banner in studio project pages.
  *
@@ -2946,7 +2959,7 @@ export interface AdvisorDetailOpenedEvent {
      */
     advisorSource: 'lint' | 'notification' | 'signal'
     /**
-     * Category of the advisor (SECURITY or PERFORMANCE)
+     * Category of the advisor
      */
     advisorCategory?: AdvisorCategory
     /**
@@ -2977,7 +2990,7 @@ export interface AdvisorAssistantButtonClickedEvent {
      */
     origin: 'homepage' | 'lint_detail'
     /**
-     * Category of the advisor (SECURITY or PERFORMANCE)
+     * Category of the advisor
      */
     advisorCategory?: AdvisorCategory
     /**
@@ -3503,6 +3516,25 @@ export interface UpgradeCtaClickedEvent {
   groups: Omit<TelemetryGroups, 'project'>
 }
 
+/**
+ * User was exposed to the plan-change panel presentation experiment.
+ * Fires once per session per enrolled user in any variant (including control), so the
+ * conversion analysis has a baseline cohort. Conversion itself is tracked server-side.
+ * GROWTH experiment: `pricingPanelPlanPresentation`.
+ *
+ * @group Events
+ * @page /org/[slug]/billing (plan-change side panel)
+ * @source studio
+ */
+export interface PricingPanelPlanPresentationExperimentExposedEvent {
+  action: 'pricing_panel_plan_presentation_experiment_exposed'
+  properties: {
+    /** The experiment variant the user is enrolled in */
+    variant: 'control' | 'parity' | 'gaps'
+  }
+  groups: Omit<TelemetryGroups, 'project'>
+}
+
 /**
  * User clicked the primary CTA on a resource exhaustion warning banner.
  *
@@ -3834,6 +3866,7 @@ export type TelemetryEvent =
   | DatabaseConnectionsBlockerViewClickedEvent
   | DatabaseConnectionsBannerDismissButtonClickedEvent
   | DatabaseConnectionsBannerCtaButtonClickedEvent
+  | ExplorerBannerExposedEvent
   | ExplorerBannerDismissButtonClickedEvent
   | ExplorerBannerCtaButtonClickedEvent
   | SessionTerminateButtonClickedEvent
@@ -3923,6 +3956,7 @@ export type TelemetryEvent =
   | FreeMicroUpgradeBannerDismissedEvent
   | FreeMicroUpgradeBannerCtaClickedEvent
   | UpgradeCtaClickedEvent
+  | PricingPanelPlanPresentationExperimentExposedEvent
   | AccessTokenCreatedEvent
   | AccessTokenRemovedEvent
   | ResourceExhaustionBannerUpgradeClickedEvent
diff --git a/packages/ui-patterns/src/form/Layout/FormLayout.tsx b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
index 37f67aa61a314..2b2db87dca161 100644
--- a/packages/ui-patterns/src/form/Layout/FormLayout.tsx
+++ b/packages/ui-patterns/src/form/Layout/FormLayout.tsx
@@ -398,7 +398,7 @@ export const FormLayout = React.forwardRef<
                 <FormLabel
                   className="text-foreground flex gap-2 items-center wrap-break-word"
                   data-formlayout-id="formLabel"
-                  htmlFor={props.name || id}
+                  htmlFor={id}
                 >
                   <LabelContents />
                 </FormLabel>
diff --git a/packages/ui/src/components/shadcn/ui/form.tsx b/packages/ui/src/components/shadcn/ui/form.tsx
index 25db5a4ff666e..f1bfd096cbbde 100644
--- a/packages/ui/src/components/shadcn/ui/form.tsx
+++ b/packages/ui/src/components/shadcn/ui/form.tsx
@@ -91,7 +91,7 @@ FormItem.displayName = 'FormItem'
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { enableSelection?: boolean }
->(({ className, enableSelection = false, ...props }, ref) => {
+>(({ className, enableSelection = false, htmlFor, ...props }, ref) => {
   const { error, formItemId } = useFormField()
 
   const Comp = enableSelection ? 'label' : Label
@@ -106,7 +106,7 @@ const FormLabel = React.forwardRef<
         className,
         'leading-normal'
       )}
-      htmlFor={formItemId}
+      htmlFor={htmlFor ?? formItemId}
       {...props}
     />
   )