diff --git a/apps/activitypub/src/utils/content-formatters.ts b/apps/activitypub/src/utils/content-formatters.ts
index 2661a6b783d..080b77693e2 100644
--- a/apps/activitypub/src/utils/content-formatters.ts
+++ b/apps/activitypub/src/utils/content-formatters.ts
@@ -24,27 +24,18 @@ export function sanitizeHtml(html: string): string {
     return DOMPurify.sanitize(html);
 }
 
-// Must stay in sync with allowedScriptHostnames in the backend sanitizer
-// (https://github.com/TryGhost/ActivityPub/blob/main/src/helpers/html.ts)
-const ALLOWED_SCRIPT_HOSTNAMES = ['platform.twitter.com', 'platform.x.com'];
-
-// Article content needs looser rules than sanitizeHtml (iframes for YouTube
-// embeds, scripts for Twitter embeds), so it gets its own DOMPurify instance
-const articlePurify = DOMPurify(window);
-
-articlePurify.addHook('uponSanitizeElement', (node, data) => {
-    if (data.tagName !== 'script') {
-        return;
-    }
-
-    const element = node as Element;
-    const src = element.getAttribute('src') || '';
+// Removes any <script> unless it loads a Twitter/X embed widget from an allowed
+// host; allowed scripts keep only their src, never inline code.
+function stripDisallowedScript(element: Element): void {
+    // Must stay in sync with allowedScriptHostnames in the backend sanitizer
+    // (https://github.com/TryGhost/ActivityPub/blob/main/src/helpers/html.ts)
+    const allowedScriptHostnames = ['platform.twitter.com', 'platform.x.com'];
 
     let hasAllowedSrc = false;
     try {
         // Relative URLs must not pass, so no base URL here
-        const url = new URL(src);
-        hasAllowedSrc = url.protocol === 'https:' && ALLOWED_SCRIPT_HOSTNAMES.includes(url.hostname);
+        const url = new URL(element.getAttribute('src') || '');
+        hasAllowedSrc = url.protocol === 'https:' && allowedScriptHostnames.includes(url.hostname);
     } catch {
         hasAllowedSrc = false;
     }
@@ -56,12 +47,54 @@ articlePurify.addHook('uponSanitizeElement', (node, data) => {
 
     // Allowed scripts may only load code via src, never run inline code
     element.textContent = '';
+}
+
+// Removes iframes we can't safely embed and forces a restrictive sandbox on the rest.
+function sandboxIframe(element: Element): void {
+    // Only keep iframes with an absolute, cross-origin http(s) source. A relative
+    // or same-origin src would run same-origin with Ghost Admin, where allow-scripts
+    // + allow-same-origin can defeat the sandbox. This also rejects javascript:/data:
+    // and other non-http(s) schemes.
+    let isCrossOrigin = false;
+    try {
+        const url = new URL(element.getAttribute('src') || '', window.location.href);
+        isCrossOrigin =
+            (url.protocol === 'https:' || url.protocol === 'http:') &&
+            url.origin !== window.location.origin;
+    } catch {
+        isCrossOrigin = false;
+    }
+
+    if (!isCrossOrigin) {
+        element.parentNode?.removeChild(element);
+        return;
+    }
+
+    // Force a restrictive sandbox onto the (now verified cross-origin) frame,
+    // overriding any supplied value. Omits allow-top-navigation (no tab hijacking);
+    // allow-same-origin is safe here because the frame is cross-origin. Set before
+    // attribute sanitization so it survives via ADD_ATTR.
+    element.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups allow-presentation allow-forms');
+}
+
+// Article content needs looser rules than sanitizeHtml (iframes for YouTube
+// embeds, scripts for Twitter embeds), so it gets its own DOMPurify instance
+const articlePurify = DOMPurify(window);
+
+articlePurify.addHook('uponSanitizeElement', (node, data) => {
+    const element = node as Element;
+
+    if (data.tagName === 'script') {
+        stripDisallowedScript(element);
+    } else if (data.tagName === 'iframe') {
+        sandboxIframe(element);
+    }
 });
 
 export function sanitizeArticleContent(content: string): string {
     return articlePurify.sanitize(content, {
         ADD_TAGS: ['iframe', 'script'],
-        ADD_ATTR: ['target', 'frameborder', 'allowfullscreen', 'async', 'charset'],
+        ADD_ATTR: ['target', 'frameborder', 'allowfullscreen', 'async', 'charset', 'sandbox'],
         // Without this the HTML parser hoists leading <script>/<style> tags
         // into <head>, which DOMPurify then discards — content starting with
         // an embed script would lose it
diff --git a/apps/activitypub/test/unit/utils/content-formatters.test.ts b/apps/activitypub/test/unit/utils/content-formatters.test.ts
index 5cc95c3f089..d2d76f39a96 100644
--- a/apps/activitypub/test/unit/utils/content-formatters.test.ts
+++ b/apps/activitypub/test/unit/utils/content-formatters.test.ts
@@ -181,19 +181,74 @@ describe('Content Formatters', function () {
             expect(iframe.hasAttribute('allowfullscreen')).toBe(true);
         });
 
-        it('removes unsafe iframe attributes and protocols', function () {
+        it('forces a restrictive sandbox on iframes, overriding any supplied value', function () {
+            const sandbox = 'allow-scripts allow-same-origin allow-popups allow-presentation allow-forms';
+
             const result = sanitizeArticleContent(`
-                <iframe src="javascript:alert(1)"></iframe>
-                <iframe srcdoc="<script>window.__xss=true</script>" onload="window.__xss=true"></iframe>
+                <iframe src="https://codepen.io/x/embed/abc"></iframe>
+                <iframe src="https://evil.example/phish" sandbox="allow-top-navigation allow-modals allow-same-origin"></iframe>
             `);
 
             const iframes = renderHtml(result).querySelectorAll('iframe');
 
+            expect(iframes).toHaveLength(2);
             iframes.forEach((iframe) => {
-                expect(iframe.getAttribute('src')).toBeNull();
-                expect(iframe.hasAttribute('srcdoc')).toBe(false);
-                expect(iframe.hasAttribute('onload')).toBe(false);
+                // Overridden to our fixed set (attacker's allow-top-navigation is gone)
+                expect(iframe.getAttribute('sandbox')).toBe(sandbox);
             });
+            // Arbitrary embed hosts are kept (not host-filtered), just sandboxed
+            expect(iframes[0].getAttribute('src')).toBe('https://codepen.io/x/embed/abc');
+            expect(iframes[1].getAttribute('src')).toBe('https://evil.example/phish');
+        });
+
+        it('does not preserve author-supplied referrerpolicy on non-iframe elements', function () {
+            const result = sanitizeArticleContent(
+                '<img src="https://example.com/image.png" referrerpolicy="unsafe-url">'
+            );
+
+            const img = renderHtml(result).querySelector('img') as HTMLImageElement;
+
+            expect(img).not.toBeNull();
+            expect(img.hasAttribute('referrerpolicy')).toBe(false);
+        });
+
+        it('removes iframes with unsafe or non-http(s) sources', function () {
+            const result = sanitizeArticleContent(`
+                <iframe src="javascript:alert(1)"></iframe>
+                <iframe src="data:text/html,<script>window.__xss=true</script>"></iframe>
+                <iframe srcdoc="<script>window.__xss=true</script>" onload="window.__xss=true"></iframe>
+            `);
+
+            // None are absolute cross-origin http(s) embeds, so all are dropped
+            expect(renderHtml(result).querySelectorAll('iframe')).toHaveLength(0);
+        });
+
+        it('strips event handlers and srcdoc from surviving cross-origin iframes', function () {
+            const result = sanitizeArticleContent(
+                '<iframe src="https://player.vimeo.com/video/1" srcdoc="<script>window.__xss=true</script>" onload="window.__xss=true"></iframe>'
+            );
+
+            const iframe = renderHtml(result).querySelector('iframe') as HTMLIFrameElement;
+
+            expect(iframe).not.toBeNull();
+            expect(iframe.hasAttribute('srcdoc')).toBe(false);
+            expect(iframe.hasAttribute('onload')).toBe(false);
+        });
+
+        it('removes relative and same-origin iframes, keeping cross-origin embeds', function () {
+            // A same-origin frame would run same-origin with Ghost Admin, where
+            // allow-scripts + allow-same-origin can defeat the sandbox
+            const result = sanitizeArticleContent(`
+                <iframe src="/ghost/#/dashboard"></iframe>
+                <iframe src="${window.location.origin}/ghost/"></iframe>
+                <iframe src="foo.html"></iframe>
+                <iframe src="https://player.vimeo.com/video/123"></iframe>
+            `);
+
+            const iframes = renderHtml(result).querySelectorAll('iframe');
+
+            expect(iframes).toHaveLength(1);
+            expect(iframes[0].getAttribute('src')).toBe('https://player.vimeo.com/video/123');
         });
 
         it('keeps Twitter embed scripts from allowed hostnames', function () {
diff --git a/apps/admin-x-design-system/src/global/chrome/desktop-chrome.stories.tsx b/apps/admin-x-design-system/src/global/chrome/desktop-chrome.stories.tsx
deleted file mode 100644
index f28afed48e6..00000000000
--- a/apps/admin-x-design-system/src/global/chrome/desktop-chrome.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {ReactNode} from 'react';
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import DesktopChrome from './desktop-chrome';
-
-const meta = {
-    title: 'Global / Chrome / Desktop Chrome',
-    component: DesktopChrome,
-    tags: ['autodocs'],
-    decorators: [(_story: () => ReactNode) => (<div style={{padding: '40px', backgroundColor: '#efefef', display: 'flex', justifyContent: 'center'}}>{_story()}</div>)]
-} satisfies Meta<typeof DesktopChrome>;
-
-export default meta;
-type Story = StoryObj<typeof DesktopChrome>;
-
-export const Default: Story = {
-    args: {
-        children: (
-            <div className='bg-white p-4'>
-                <p className='mb-6'>This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. </p>
-
-                <img alt='Testimage' className='mb-6' src='https://images.unsplash.com/photo-1685374156924-5230519f4ab3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8YWxsfDI1fHx8fHx8Mnx8MTY4NTYzNzE3M3w&ixlib=rb-4.0.3&q=80&w=2000' />
-
-                <p className='mb-6'>This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. This is a desktop chrome with lots of text. </p>
-            </div>
-        )
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/chrome/desktop-chrome.tsx b/apps/admin-x-design-system/src/global/chrome/desktop-chrome.tsx
deleted file mode 100644
index e4ac2ba2063..00000000000
--- a/apps/admin-x-design-system/src/global/chrome/desktop-chrome.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export interface DesktopChromeProps {
-    children?: React.ReactNode;
-}
-
-const DesktopChrome: React.FC<DesktopChromeProps & React.HTMLAttributes<HTMLDivElement>> = ({children, ...props}) => {
-    return (
-        <div className='flex size-full flex-col px-8' {...props}>
-            <div className="size-full overflow-hidden rounded-t-[4px] shadow-sm">
-                {children}
-            </div>
-        </div>
-    );
-};
-
-export default DesktopChrome;
diff --git a/apps/admin-x-design-system/src/global/chrome/mobile-chrome.stories.tsx b/apps/admin-x-design-system/src/global/chrome/mobile-chrome.stories.tsx
deleted file mode 100644
index 443d7d14a98..00000000000
--- a/apps/admin-x-design-system/src/global/chrome/mobile-chrome.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import {ReactNode} from 'react';
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import MobileChrome from './mobile-chrome';
-
-const meta = {
-    title: 'Global / Chrome / Mobile Chrome',
-    component: MobileChrome,
-    tags: ['autodocs'],
-    decorators: [(_story: () => ReactNode) => (<div style={{padding: '40px', backgroundColor: '#efefef', display: 'flex', justifyContent: 'center'}}>{_story()}</div>)]
-} satisfies Meta<typeof MobileChrome>;
-
-export default meta;
-type Story = StoryObj<typeof MobileChrome>;
-
-export const Default: Story = {
-    args: {
-        children: (
-            <div className='p-4'>
-                <p className='mb-6'>This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. </p>
-
-                <img alt='Testimage' className='mb-6' src='https://images.unsplash.com/photo-1685374156924-5230519f4ab3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTc3M3wwfDF8YWxsfDI1fHx8fHx8Mnx8MTY4NTYzNzE3M3w&ixlib=rb-4.0.3&q=80&w=2000' />
-
-                <p className='mb-6'>This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. This is a mobile chrome with lots of text. </p>
-            </div>
-        )
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/chrome/mobile-chrome.tsx b/apps/admin-x-design-system/src/global/chrome/mobile-chrome.tsx
deleted file mode 100644
index 1637f54defb..00000000000
--- a/apps/admin-x-design-system/src/global/chrome/mobile-chrome.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export interface MobileChromeProps {
-    children?: React.ReactNode;
-}
-
-const MobileChrome: React.FC<MobileChromeProps & React.HTMLAttributes<HTMLDivElement>> = ({children, ...props}) => {
-    return (
-        <div className='flex h-[775px] w-[380px] flex-col rounded-3xl bg-white p-2 shadow-xl dark:bg-grey-900' {...props}>
-            <div className='size-full grow overflow-auto rounded-2xl border border-grey-100 dark:border-grey-950'>
-                {children}
-            </div>
-        </div>
-    );
-};
-
-export default MobileChrome;
diff --git a/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx
deleted file mode 100644
index b4b53f93eba..00000000000
--- a/apps/admin-x-design-system/src/global/modal/confirmation-modal.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import type {Meta, StoryContext, StoryObj} from '@storybook/react-vite';
-import {ReactNode} from 'react';
-
-import NiceModal from '@ebay/nice-modal-react';
-import ConfirmationModal, {ConfirmationModalProps} from './confirmation-modal';
-
-const ConfirmationModalContainer: React.FC<ConfirmationModalProps> = ({...props}) => {
-    return (
-        <button type='button' onClick={() => {
-            NiceModal.show(ConfirmationModal, {...props});
-        }}>Open confirmation modal</button>
-    );
-};
-
-const meta = {
-    title: 'Global / Modal / Confirmation Modal',
-    component: ConfirmationModal,
-    tags: ['autodocs'],
-    decorators: [(_story: () => ReactNode, context: StoryContext) => (
-        <NiceModal.Provider>
-            <ConfirmationModalContainer {...context.args} />
-        </NiceModal.Provider>
-    )]
-} satisfies Meta<typeof ConfirmationModal>;
-
-export default meta;
-type Story = StoryObj<typeof ConfirmationModal>;
-
-export const Default: Story = {
-    args: {
-        title: 'Are you sure?',
-        prompt: 'Watch out, you\'re doing something super-super dangerous. Don\'t press the red button (you know you will).'
-    }
-};
-
-export const CustomButtons: Story = {
-    args: {
-        ...Default.args,
-        title: 'You want to delete?',
-        cancelLabel: 'Meh',
-        okLabel: 'Alrite',
-        okVariant: 'destructive'
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx b/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx
deleted file mode 100644
index 7ec2ba47737..00000000000
--- a/apps/admin-x-design-system/src/global/modal/confirmation-modal.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import Modal from './modal';
-import NiceModal, {useModal} from '@ebay/nice-modal-react';
-import React, {useState} from 'react';
-import type {ButtonProps} from '@tryghost/shade/components';
-
-export interface ConfirmationModalProps {
-    title?: React.ReactNode;
-    prompt?: React.ReactNode;
-    cancelLabel?: string;
-    okLabel?: string;
-    okRunningLabel?: string;
-    okVariant?: ButtonProps['variant'];
-    onCancel?: () => void;
-    onOk?: (modal?: {
-        remove: () => void;
-    }) => void | Promise<void>;
-    customFooter?: boolean | React.ReactNode;
-    formSheet?: boolean;
-    stickyFooter?: boolean;
-}
-
-export const ConfirmationModalContent: React.FC<ConfirmationModalProps> = ({
-    title = 'Are you sure?',
-    prompt,
-    cancelLabel = 'Cancel',
-    okLabel = 'OK',
-    okRunningLabel = '...',
-    okVariant = 'default',
-    onCancel,
-    onOk,
-    customFooter,
-    formSheet = true,
-    stickyFooter = false
-}) => {
-    const modal = useModal();
-    const [taskState, setTaskState] = useState<'running' | ''>('');
-    return (
-        <Modal
-            backDropClick={false}
-            buttonsDisabled={taskState === 'running'}
-            cancelLabel={cancelLabel}
-            footer={customFooter}
-            formSheet={formSheet}
-            okLabel={taskState === 'running' ? okRunningLabel : okLabel}
-            okVariant={okVariant}
-            stickyFooter={stickyFooter}
-            testId='confirmation-modal'
-            title={title}
-            width={540}
-            onCancel={onCancel}
-            onOk={async () => {
-                setTaskState('running');
-
-                try {
-                    await onOk?.(modal);
-                } catch (e) {
-                    // eslint-disable-next-line no-console
-                    console.error('Unhandled Promise Rejection. Make sure you catch errors in your onOk handler.', e);
-                }
-                setTaskState('');
-            }}
-        >
-            <div className='py-4'>
-                {prompt}
-            </div>
-        </Modal>
-    );
-};
-
-export default NiceModal.create(ConfirmationModalContent);
diff --git a/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx
deleted file mode 100644
index 8fcf9d493ef..00000000000
--- a/apps/admin-x-design-system/src/global/modal/limit-modal.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type {Meta, StoryContext, StoryObj} from '@storybook/react-vite';
-import {ReactNode} from 'react';
-
-import NiceModal from '@ebay/nice-modal-react';
-import LimitModal, {LimitModalProps} from './limit-modal';
-
-const LimitModalContainer: React.FC<LimitModalProps> = ({...props}) => {
-    return (
-        <button type='button' onClick={() => {
-            NiceModal.show(LimitModal, {...props});
-        }}>Open limit modal</button>
-    );
-};
-
-const meta = {
-    title: 'Global / Modal / Limit Modal',
-    component: LimitModal,
-    tags: ['autodocs'],
-    decorators: [(_story: () => ReactNode, context: StoryContext) => (
-        <NiceModal.Provider>
-            <LimitModalContainer {...context.args} />
-        </NiceModal.Provider>
-    )]
-} satisfies Meta<typeof LimitModal>;
-
-export default meta;
-type Story = StoryObj<typeof LimitModal>;
-
-export const Default: Story = {
-    args: {
-        title: 'You need to upgrade your plan',
-        prompt: 'Your current plan only <a href="https://ghost.org/pricing/" target="_blank" rel="noopener">supports free integrations</a> including Slack, Unsplash, and FirstPromoter. To add a custom integration, upgrade to a different plan.'
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/modal/modal-page.stories.tsx b/apps/admin-x-design-system/src/global/modal/modal-page.stories.tsx
deleted file mode 100644
index 3250b0ae00d..00000000000
--- a/apps/admin-x-design-system/src/global/modal/modal-page.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-
-import ModalPage from './modal-page';
-
-const meta = {
-    title: 'Global / Modal / Modal page contents',
-    component: ModalPage,
-    tags: ['autodocs']
-} satisfies Meta<typeof ModalPage>;
-
-export default meta;
-type Story = StoryObj<typeof ModalPage>;
-
-export const Default: Story = {
-    args: {
-        heading: 'Here\'s a modal page',
-        children: <>
-            <p>Use this component to in full-width or bleed modals in which you build a complete page (e.g. Theme grid)</p>
-        </>
-    }
-};
diff --git a/apps/admin-x-design-system/src/global/modal/modal-page.tsx b/apps/admin-x-design-system/src/global/modal/modal-page.tsx
deleted file mode 100644
index 66cedc539c9..00000000000
--- a/apps/admin-x-design-system/src/global/modal/modal-page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import clsx from 'clsx';
-import React from 'react';
-import {Text} from '@tryghost/shade/primitives';
-
-export interface ModalPageProps {
-    heading?: string;
-    children?: React.ReactNode;
-    className?: string;
-}
-
-const ModalPage: React.FC<ModalPageProps> = ({heading, children, className}) => {
-    className = clsx(
-        'w-full p-[8vmin] pt-5',
-        className
-    );
-    return (
-        <div className={className}>
-            {heading && <Text as='h1' className='mb-8 text-4xl' leading='supertight' weight='bold'>{heading}</Text>}
-            {children}
-        </div>
-    );
-};
-
-export default ModalPage;
diff --git a/apps/admin-x-design-system/src/global/modal/modal.stories.tsx b/apps/admin-x-design-system/src/global/modal/modal.stories.tsx
index 635668ea92e..e90afa48a0e 100644
--- a/apps/admin-x-design-system/src/global/modal/modal.stories.tsx
+++ b/apps/admin-x-design-system/src/global/modal/modal.stories.tsx
@@ -3,7 +3,6 @@ import {ReactNode} from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
 import Modal, {ModalProps} from './modal';
-import ModalPage from './modal-page';
 
 const ModalContainer: React.FC<ModalProps> = ({children, ...props}) => {
     const modal = NiceModal.create<ModalProps>(() => {
@@ -176,9 +175,7 @@ export const CompletePage: Story = {
         footer: <></>,
         padding: false,
         children: <>
-            <ModalPage heading='Hey there full page'>
-                <p>This is a full page in a modal</p>
-            </ModalPage>
+            <div>Full-page modal content</div>
         </>
     }
 };
diff --git a/apps/admin-x-design-system/src/index.ts b/apps/admin-x-design-system/src/index.ts
index 11580ca4008..350d99264ff 100644
--- a/apps/admin-x-design-system/src/index.ts
+++ b/apps/admin-x-design-system/src/index.ts
@@ -3,21 +3,11 @@ export {default as GoogleLogo} from './assets/images/google-logo.svg?react';
 export {default as TwitterLogo} from './assets/images/twitter-logo.svg?react';
 export {default as XLogo} from './assets/images/x-logo.svg?react';
 
-export {default as DesktopChrome} from './global/chrome/desktop-chrome';
-export type {DesktopChromeProps} from './global/chrome/desktop-chrome';
 export {default as DesktopChromeHeader} from './global/chrome/desktop-chrome-header';
 export type {DesktopChromeHeaderProps} from './global/chrome/desktop-chrome-header';
-export {default as MobileChrome} from './global/chrome/mobile-chrome';
-export type {MobileChromeProps} from './global/chrome/mobile-chrome';
 
-export {default as ConfirmationModal, ConfirmationModalContent} from './global/modal/confirmation-modal';
-export type {ConfirmationModalProps} from './global/modal/confirmation-modal';
-export {default as LimitModal, LimitModalContent} from './global/modal/limit-modal';
-export type {LimitModalProps} from './global/modal/limit-modal';
 export {default as Modal, topLevelBackdropClasses} from './global/modal/modal';
 export type {ModalProps} from './global/modal/modal';
-export {default as ModalPage} from './global/modal/modal-page';
-export type {ModalPageProps} from './global/modal/modal-page';
 export {default as PreviewModal, PreviewModalContent} from './global/modal/preview-modal';
 export type {PreviewModalProps} from './global/modal/preview-modal';
 
diff --git a/apps/admin-x-framework/src/api/config.ts b/apps/admin-x-framework/src/api/config.ts
index fc095a9033a..c3ce0026861 100644
--- a/apps/admin-x-framework/src/api/config.ts
+++ b/apps/admin-x-framework/src/api/config.ts
@@ -70,7 +70,11 @@ export type Config = {
             },
             publicSiteAccess?: {
                 disabled: boolean,
-                error?: string
+                // Copy shown in the pre-launch banner when public site access is disabled.
+                // Managed hosting providers can override these; each falls back to Ghost's default.
+                error?: string, // Banner message
+                title?: string, // Banner heading
+                upgradeUrl?: string // Destination for the banner's upgrade button
             }
         }
         billing?: {
diff --git a/apps/admin-x-settings/src/components/confirmation-modal.tsx b/apps/admin-x-settings/src/components/confirmation-modal.tsx
new file mode 100644
index 00000000000..552d32e1864
--- /dev/null
+++ b/apps/admin-x-settings/src/components/confirmation-modal.tsx
@@ -0,0 +1,123 @@
+import NiceModal, {useModal} from '@ebay/nice-modal-react';
+import React, {useState} from 'react';
+import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    Button,
+    type ButtonProps,
+    StickyFooter
+} from '@tryghost/shade/components';
+import {cn} from '@tryghost/shade/utils';
+
+export interface ConfirmationModalProps {
+    title?: React.ReactNode;
+    prompt?: React.ReactNode;
+    cancelLabel?: string;
+    okLabel?: string;
+    okRunningLabel?: string;
+    okVariant?: ButtonProps['variant'];
+    onCancel?: () => void;
+    onOk?: (modal?: {
+        remove: () => void;
+    }) => void | Promise<void>;
+    customFooter?: boolean | React.ReactNode;
+    formSheet?: boolean;
+    stickyFooter?: boolean;
+    testId?: string;
+}
+
+export const ConfirmationModalContent: React.FC<ConfirmationModalProps> = ({
+    title = 'Are you sure?',
+    prompt,
+    cancelLabel = 'Cancel',
+    okLabel = 'OK',
+    okRunningLabel = '...',
+    okVariant = 'default',
+    onCancel,
+    onOk,
+    customFooter,
+    formSheet = true,
+    stickyFooter = false,
+    testId = 'confirmation-modal'
+}) => {
+    const modal = useModal();
+    const [taskState, setTaskState] = useState<'running' | ''>('');
+    const isRunning = taskState === 'running';
+
+    const handleCancel = () => {
+        if (isRunning) {
+            return;
+        }
+
+        if (onCancel) {
+            onCancel();
+        } else {
+            modal.remove();
+        }
+    };
+
+    const handleConfirm = async () => {
+        setTaskState('running');
+
+        try {
+            await onOk?.(modal);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error('Unhandled Promise Rejection. Make sure you catch errors in your onOk handler.', error);
+        }
+
+        setTaskState('');
+    };
+
+    const defaultFooter = (
+        <AlertDialogFooter>
+            {cancelLabel && (
+                <Button className='font-semibold' data-testid='cancel-modal' disabled={isRunning} type='button' variant='ghost' onClick={handleCancel}>
+                    {cancelLabel}
+                </Button>
+            )}
+            {okLabel && (
+                <Button className='min-w-20' data-testid='ok-modal' disabled={isRunning} type='button' variant={okVariant} onClick={handleConfirm}>
+                    {isRunning ? okRunningLabel : okLabel}
+                </Button>
+            )}
+        </AlertDialogFooter>
+    );
+
+    const footer = customFooter === undefined ? defaultFooter : customFooter;
+
+    return (
+        <AlertDialog open={modal.visible} onOpenChange={open => !open && handleCancel()}>
+            <AlertDialogContent
+                className={cn(
+                    'z-[1100] max-h-[calc(100dvh-4rem)] w-[calc(100%-2rem)] max-w-[540px] gap-0 overflow-y-auto bg-background p-8',
+                    formSheet ? 'shadow-md' : 'shadow-xl'
+                )}
+                data-testid={testId}
+                overlayClassName={cn(
+                    'z-[1100] bg-foreground/20! backdrop-blur-[3px]',
+                    formSheet && 'bg-foreground/10!'
+                )}
+                onEscapeKeyDown={event => event.stopPropagation()}
+            >
+                <AlertDialogHeader className='gap-0'>
+                    <AlertDialogTitle className='text-xl leading-heading font-bold md:text-2xl'>{title}</AlertDialogTitle>
+                    <AlertDialogDescription asChild>
+                        <div className='py-4 text-left text-base text-foreground'>{prompt}</div>
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                {footer && (stickyFooter ? (
+                    <StickyFooter className='-mx-8 -mb-8 w-[calc(100%+4rem)]' contentClassName='px-8' height={84}>
+                        {footer}
+                    </StickyFooter>
+                ) : footer)}
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+};
+
+export default NiceModal.create(ConfirmationModalContent);
diff --git a/apps/admin-x-design-system/src/global/modal/limit-modal.tsx b/apps/admin-x-settings/src/components/limit-modal.tsx
similarity index 60%
rename from apps/admin-x-design-system/src/global/modal/limit-modal.tsx
rename to apps/admin-x-settings/src/components/limit-modal.tsx
index ef3085775d7..20f5b4bd033 100644
--- a/apps/admin-x-design-system/src/global/modal/limit-modal.tsx
+++ b/apps/admin-x-settings/src/components/limit-modal.tsx
@@ -1,6 +1,7 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
-import Modal from './modal';
+
+import {ConfirmationModalContent} from './confirmation-modal';
 
 export interface LimitModalProps {
     title?: string;
@@ -19,25 +20,19 @@ export const LimitModalContent: React.FC<LimitModalProps> = ({
     formSheet = false,
     onOk
 }) => {
+    const promptContent = typeof prompt === 'string' && prompt.includes('<') ? (
+        <div dangerouslySetInnerHTML={{__html: prompt}} />
+    ) : prompt;
+
     return (
-        <Modal
-            backDropClick={false}
+        <ConfirmationModalContent
             formSheet={formSheet}
             okLabel={okLabel}
-            okVariant='default'
+            prompt={<div className='w-full'>{promptContent}</div>}
             testId='limit-modal'
             title={title}
-            width={540}
             onOk={onOk}
-        >
-            <div className='py-4 leading-9 text-pretty'>
-                {typeof prompt === 'string' && prompt.includes('<') ? (
-                    <div dangerouslySetInnerHTML={{__html: prompt}} />
-                ) : (
-                    prompt
-                )}
-            </div>
-        </Modal>
+        />
     );
 };
 
diff --git a/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx b/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
index be14060704c..5e96fa0cf70 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/danger-zone.tsx
@@ -1,10 +1,10 @@
+import ConfirmationModal from '../../confirmation-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import TopLevelGroup from '../../top-level-group';
 import trackEvent from '../../../utils/analytics';
 import useStaffUsers from '../../../hooks/use-staff-users';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {toast} from 'sonner';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
index 73a99ec2aa2..9d65ca7cf0c 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations.tsx
@@ -1,11 +1,11 @@
 import BrandIcon from '../../icons/brand-icon';
+import ConfirmationModal from '../../confirmation-modal';
 import IntegrationsSettingsImg from '../../../assets/images/integrations-settings.png';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import usePinturaEditor from '../../../hooks/use-pintura-editor';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, NoValueLabel, NoValueLabelIcon, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type Integration, useBrowseIntegrations, useDeleteIntegration} from '@tryghost/admin-x-framework/api/integrations';
 import {LucideIcon} from '@tryghost/shade/utils';
 import {Plug} from 'lucide-react';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx
index e654d6e3dfd..512587631d1 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/add-integration-modal.tsx
@@ -1,8 +1,9 @@
+import LimitModal from '../../../limit-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import {Field, FieldError, FieldGroup, FieldLabel, Input} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
-import {LimitModal, Modal} from '@tryghost/admin-x-design-system';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {useCreateIntegration} from '@tryghost/admin-x-framework/api/integrations';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx
index 10f6d575633..c93efd8f09c 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/custom-integration-modal.tsx
@@ -1,13 +1,14 @@
 import APIKeys from './api-keys';
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import WebhooksTable from './webhooks-table';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {type APIKey, useRefreshAPIKey} from '@tryghost/admin-x-framework/api/api-keys';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {Field, FieldError, FieldGroup, FieldLabel, Input} from '@tryghost/shade/components';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
 import {type Integration, useBrowseIntegrations, useEditIntegration} from '@tryghost/admin-x-framework/api/integrations';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Trash2} from 'lucide-react';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
index cec55096df9..a036cb57ccb 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/transistor-modal.tsx
@@ -1,10 +1,11 @@
 import APIKeys from './api-keys';
 import BookmarkThumb from '../../../../assets/images/integrations/ghost-transistor.png';
 import BrandIcon from '../../../icons/brand-icon';
+import ConfirmationModal from '../../../confirmation-modal';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, Switch} from '@tryghost/shade/components';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type Setting, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useBrowseIntegrations} from '@tryghost/admin-x-framework/api/integrations';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
index 65887af14f0..3d4fcb8185d 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/webhooks-table.tsx
@@ -1,7 +1,7 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import WebhookModal from './webhook-modal';
 import {Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type Integration} from '@tryghost/admin-x-framework/api/integrations';
 import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {getWebhookEventLabel} from './webhook-event-options';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
index 7303a48d8fc..9d948c1487d 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/zapier-modal.tsx
@@ -1,11 +1,12 @@
 import APIKeys from './api-keys';
 import BrandIcon from '../../../icons/brand-icon';
+import ConfirmationModal from '../../../confirmation-modal';
 import IntegrationHeader from './integration-header';
 import NiceModal from '@ebay/nice-modal-react';
 import ZapierLogo from '../../../../assets/images/zapier-logo.svg';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button} from '@tryghost/shade/components';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {useBrowseIntegrations} from '@tryghost/admin-x-framework/api/integrations';
 import {useEffect, useState} from 'react';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
index a1cf288e6e9..c2b037a5da8 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/migration-options.tsx
@@ -1,8 +1,8 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import LabItem from './lab-item';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import {ActionList, Button, Dropzone} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {downloadAllContent, useDeleteAllContent, useImportContent} from '@tryghost/admin-x-framework/api/db';
 import {toast} from 'sonner';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
diff --git a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
index 2b8ee04a699..6a9263a5262 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/migration-tools/universal-import-modal.tsx
@@ -1,7 +1,8 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import {Button, Dropzone} from '@tryghost/shade/components';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {useImportContent} from '@tryghost/admin-x-framework/api/db';
 
diff --git a/apps/admin-x-settings/src/components/settings/email/emails.tsx b/apps/admin-x-settings/src/components/settings/email/emails.tsx
index d87a83012d9..07a46e07ffd 100644
--- a/apps/admin-x-settings/src/components/settings/email/emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/emails.tsx
@@ -1,3 +1,4 @@
+import ConfirmationModal from '../../confirmation-modal';
 import DefaultRecipients from './default-recipients';
 import EnableNewsletters from './enable-newsletters';
 import MailGun from './mailgun';
@@ -10,7 +11,6 @@ import WelcomeEmailCustomizeModal from '../membership/member-emails/welcome-emai
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {LucideIcon} from '@tryghost/shade/utils';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 import {useGlobalData} from '../../providers/global-data-provider';
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
index ec1ae707a24..add779a1c3b 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters.tsx
@@ -1,3 +1,4 @@
+import ConfirmationModal from '../../confirmation-modal';
 import NewslettersList from './newsletters/newsletters-list';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {type ReactNode, useEffect, useState} from 'react';
@@ -5,7 +6,6 @@ import TopLevelGroup from '../../top-level-group';
 import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {Button, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type InfiniteData, useQueryClient} from '@tryghost/admin-x-framework';
 import {type Newsletter, type NewslettersResponseType, newslettersDataType, useBrowseNewsletters, useEditNewsletter, useVerifyNewsletterEmail} from '@tryghost/admin-x-framework/api/newsletters';
 import {arrayMove} from '@dnd-kit/sortable';
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx
index 6118728ecd6..6d573a01c8d 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/add-newsletter-modal.tsx
@@ -1,9 +1,10 @@
+import LimitModal from '../../../limit-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import {Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, Input, Switch, Textarea} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
-import {LimitModal, Modal} from '@tryghost/admin-x-design-system';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {formatNumber} from '@tryghost/shade/utils';
 import {useAddNewsletter} from '@tryghost/admin-x-framework/api/newsletters';
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
index 404bb4b11c8..8a3011f6b27 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletter-detail-modal.tsx
@@ -1,5 +1,7 @@
 import ColorPickerField from '../../../color-picker-field';
+import ConfirmationModal from '../../../confirmation-modal';
 import HtmlField from '../../../html-field';
+import LimitModal from '../../../limit-modal';
 import NewsletterPreview from './newsletter-preview';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useCallback, useEffect, useState} from 'react';
@@ -7,12 +9,12 @@ import useFeatureFlag from '../../../../hooks/use-feature-flag';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import validator from 'validator';
 import {Button, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, LimitModal, PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
 import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {type Newsletter, useBrowseNewsletters, useEditNewsletter} from '@tryghost/admin-x-framework/api/newsletters';
+import {PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Stack, Text} from '@tryghost/shade/primitives';
 import {Trash2} from 'lucide-react';
diff --git a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
index 46388f6597e..66b8e0dd11b 100644
--- a/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
+++ b/apps/admin-x-settings/src/components/settings/email/newsletters/newsletters-tab-content.tsx
@@ -1,10 +1,10 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import NewslettersList from './newsletters-list';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {type ReactNode, useEffect, useState} from 'react';
 import useQueryParams from '../../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {Button} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {type InfiniteData, useQueryClient} from '@tryghost/admin-x-framework';
 import {type Newsletter, type NewslettersResponseType, newslettersDataType, useBrowseNewsletters, useEditNewsletter, useVerifyNewsletterEmail} from '@tryghost/admin-x-framework/api/newsletters';
 import {arrayMove} from '@dnd-kit/sortable';
diff --git a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
index 32ae51f93cd..162dd4185eb 100644
--- a/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/user-detail-modal.tsx
@@ -1,4 +1,6 @@
+import ConfirmationModal from '../../confirmation-modal';
 import EmailNotificationsTab from './users/email-notifications-tab';
+import LimitModal from '../../limit-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import ProfileTab from './users/profile-tab';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
@@ -9,11 +11,11 @@ import useStaffUsers from '../../../hooks/use-staff-users';
 import validator from 'validator';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Dropzone, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, LimitModal, Modal} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
 import {ImageUpload, ImageUploadAction, ImageUploadActions, ImageUploadDropzone, ImageUploadImage, ImageUploadPreview} from '@tryghost/shade/patterns';
 import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {Pencil, Trash2} from 'lucide-react';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {SOCIAL_PLATFORM_CONFIGS, SOCIAL_PLATFORM_KEYS, getSocialValidationError} from '../../../utils/social-urls/index';
@@ -441,9 +443,9 @@ const UserDetailModalContent: React.FC<{user: User; onDeletingUserChange: (isDel
                             <TabsTrigger title='Social Links' value='social-links'>Social Links</TabsTrigger>
                             <TabsTrigger title='Email Notifications' value='email-notifications'>Email Notifications</TabsTrigger>
                         </TabsList>
-                        <TabsContent value='profile'><ProfileTab clearError={clearError} errors={errors} setUserData={setUserData} user={formState} validateField={validateField} /></TabsContent>
-                        <TabsContent value='social-links'><SocialLinksTab clearError={clearError} errors={errors} setUserData={setUserData} user={formState} validateField={validateField} /></TabsContent>
-                        <TabsContent value='email-notifications'><EmailNotificationsTab setUserData={setUserData} user={formState} /></TabsContent>
+                        <TabsContent className='pt-4' value='profile'><ProfileTab clearError={clearError} errors={errors} setUserData={setUserData} user={formState} validateField={validateField} /></TabsContent>
+                        <TabsContent className='pt-4' value='social-links'><SocialLinksTab clearError={clearError} errors={errors} setUserData={setUserData} user={formState} validateField={validateField} /></TabsContent>
+                        <TabsContent className='pt-4' value='email-notifications'><EmailNotificationsTab setUserData={setUserData} user={formState} /></TabsContent>
                     </Tabs>
                 </div>
             </div>
diff --git a/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx b/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
index 13f3c9a3bd9..14c30e48ed5 100644
--- a/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/users/staff-token.tsx
@@ -1,6 +1,6 @@
 import APIKeys from '../../advanced/integrations/api-keys';
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal from '@ebay/nice-modal-react';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {Text} from '@tryghost/shade/primitives';
 import {genStaffToken, getStaffToken} from '@tryghost/admin-x-framework/api/staff-token';
 import {useEffect, useState} from 'react';
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
index 144ea01254e..e32eea9eeff 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/edit-offer-modal.tsx
@@ -1,11 +1,12 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import PortalFrame from '../../membership/portal/portal-frame';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
 import {Button, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, Textarea} from '@tryghost/shade/components';
-import {ConfirmationModal, PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {type Offer, useBrowseOffersById, useEditOffer} from '@tryghost/admin-x-framework/api/offers';
+import {PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {createOfferRedemptionFilterUrl} from './offer-helpers';
 import {formatNumber} from '@tryghost/shade/utils';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
diff --git a/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx b/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
index 7e29dd02474..56154d0977d 100644
--- a/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/recommendations/edit-recommendation-modal.tsx
@@ -1,8 +1,9 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import RecommendationDescriptionForm, {validateDescriptionForm} from './recommendation-description-form';
 import {Button} from '@tryghost/shade/components';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type Recommendation, useDeleteRecommendation, useEditRecommendation} from '@tryghost/admin-x-framework/api/recommendations';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {toast} from 'sonner';
diff --git a/apps/admin-x-settings/src/components/settings/membership/access.tsx b/apps/admin-x-settings/src/components/settings/membership/access.tsx
index 86dbcfc43f5..c20ab631dd8 100644
--- a/apps/admin-x-settings/src/components/settings/membership/access.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/access.tsx
@@ -88,6 +88,10 @@ const COMMENTS_ENABLED_OPTIONS = [
     }
 ];
 
+const DEFAULT_PRELAUNCH_TITLE = 'Pre-launch mode';
+const DEFAULT_PRELAUNCH_MESSAGE = 'During your free trial, a private access code is required to browse your site. When you\'re ready to launch, pick a plan to upgrade your account and make everything public.';
+const DEFAULT_PRELAUNCH_UPGRADE_URL = '#/pro/billing/plans';
+
 const renderAccessOptions = (options: Array<{value: string; label: string; hint: string}>) => options.map(option => (
     <SelectItem key={option.value} value={option.value}>
         <span className='flex flex-col'>
@@ -101,9 +105,13 @@ const getAccessOptionLabel = (options: Array<{value: string; label: string}>, va
 
 const Access: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const [tiersOpen, setTiersOpen] = React.useState(false);
-    const {settings} = useGlobalData();
+    const {settings, config} = useGlobalData();
     const limiter = useLimiter();
     const isTrialMode = limiter?.isDisabled('publicSiteAccess');
+    const publicSiteAccessLimit = config.hostSettings?.limits?.publicSiteAccess;
+    const preLaunchTitle = publicSiteAccessLimit?.title || DEFAULT_PRELAUNCH_TITLE;
+    const preLaunchMessage = publicSiteAccessLimit?.error || DEFAULT_PRELAUNCH_MESSAGE;
+    const preLaunchUpgradeUrl = publicSiteAccessLimit?.upgradeUrl || DEFAULT_PRELAUNCH_UPGRADE_URL;
     const isPrivateLocked = isSettingReadOnly(settings, 'is_private') || isSettingReadOnly(settings, 'password');
     const {mutateAsync: regenerateAccessCode} = useRegenerateAccessCode();
     const [isRegenerating, setIsRegenerating] = React.useState(false);
@@ -180,12 +188,12 @@ const Access: React.FC<{ keywords: string[] }> = ({keywords}) => {
                 <div className='-m-5 overflow-hidden p-5'>
                     <Banner className='mb-2 flex w-full cursor-default flex-col gap-4 border-0 p-6 pt-5 transition-none hover:translate-y-0 hover:scale-100 hover:shadow-[-7px_-6px_42px_8px_rgb(75_225_226_/_28%),7px_6px_42px_8px_rgb(202_103_255_/_32%)] md:flex-row md:items-center md:justify-between dark:hover:shadow-[-7px_-6px_42px_8px_rgb(75_225_226_/_36%),7px_6px_42px_8px_rgb(202_103_255_/_38%)]' size='lg' variant='gradient'>
                         <div>
-                            <div className='text-base font-semibold'>Pre-launch mode</div>
+                            <div className='text-base font-semibold'>{preLaunchTitle}</div>
                             <div className='mt-2 text-gray-700'>
-                                During your free trial, a private access code is required to browse your site. When you&apos;re ready to launch, pick a plan to upgrade your account and make everything public.
+                                {preLaunchMessage}
                             </div>
                         </div>
-                        <ShadeButton className='shrink-0 self-start md:self-center' asChild><a href="#/pro/billing/plans">Upgrade now</a></ShadeButton>
+                        <ShadeButton className='shrink-0 self-start md:self-center' asChild><a href={preLaunchUpgradeUrl}>Upgrade now</a></ShadeButton>
                     </Banner>
                 </div>
             )}
diff --git a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
index 934f7ce7efd..bb8c8da04fa 100644
--- a/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/custom-fields/custom-field-modal.tsx
@@ -1,9 +1,10 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import CustomFieldIcon from './custom-field-icon';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React from 'react';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {ValidationError, getErrorMessage} from '@tryghost/admin-x-framework/errors';
 import {memberCustomFieldUserTypes, useCreateMemberCustomField, useDeleteMemberCustomField, useEditMemberCustomField, userTypeForField} from '@tryghost/admin-x-framework/api/member-custom-fields';
 import {toast} from 'sonner';
diff --git a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
index ef79057903f..8572f108c34 100644
--- a/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/member-emails.tsx
@@ -1,3 +1,4 @@
+import ConfirmationModal from '../../confirmation-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useRef} from 'react';
 import TopLevelGroup from '../../top-level-group';
@@ -7,7 +8,6 @@ import useQueryParams from '../../../hooks/use-query-params';
 import {APIError} from '@tryghost/admin-x-framework/errors';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Switch} from '@tryghost/shade/components';
 import {Button} from '@tryghost/shade/components';
-import {ConfirmationModal} from '@tryghost/admin-x-design-system';
 import {LucideIcon} from '@tryghost/shade/utils';
 import {WELCOME_EMAIL_SLUGS, type WelcomeEmailType, getDefaultWelcomeEmailRecord, getDefaultWelcomeEmailValues} from './member-emails/default-welcome-email-values';
 import {checkStripeEnabled, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
index 3d0894f351f..49c74ddbb03 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/portal-links.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useId, useState} from 'react';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Field, FieldLabel, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
 import {Button} from '@tryghost/shade/components';
-import {ModalPage} from '@tryghost/admin-x-design-system';
+import {ModalPage} from '@tryghost/shade/page-templates';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -65,7 +65,8 @@ const PortalLinks: React.FC = () => {
     const homePageURL = getHomepageUrl(siteData!);
 
     return (
-        <ModalPage className='max-w-[920px] text-base text-foreground' heading='Links'>
+        <ModalPage className='max-w-[920px] text-base text-foreground'>
+            <ModalPage.Title>Links</ModalPage.Title>
             <p className='-mt-6 mb-16'>Use these {isDataAttributes ? 'data attributes' : 'links'} in your theme to show pages of Portal.</p>
 
             <section>
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
index d79cb46c3d5..721773d4023 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/portal-modal.tsx
@@ -1,12 +1,13 @@
 import AccountPage from './account-page';
+import ConfirmationModal from '../../../confirmation-modal';
 import LookAndFeel from './look-and-feel';
 import NiceModal from '@ebay/nice-modal-react';
 import PortalPreview from './portal-preview';
 import React, {useEffect, useState} from 'react';
 import SignupOptions from './signup-options';
 import useQueryParams from '../../../../hooks/use-query-params';
-import {ConfirmationModal, PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {type Dirtyable, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
+import {PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {type Setting, type SettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
 import {type Tier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
@@ -15,6 +16,17 @@ import {useGlobalData} from '../../../providers/global-data-provider';
 import {useRouting} from '@tryghost/admin-x-framework/routing';
 import {verifyEmailToken} from '@tryghost/admin-x-framework/api/email-verification';
 
+type PreviewTab = 'signup' | 'account' | 'links';
+type SidebarTab = 'signupOptions' | 'lookAndFeel' | 'accountPage';
+
+const previewTabForSidebar: Record<SidebarTab, PreviewTab> = {
+    signupOptions: 'signup',
+    lookAndFeel: 'signup',
+    accountPage: 'account'
+};
+
+const portalSidebarTabClassName = 'border-b-2 border-transparent after:hidden data-[state=active]:border-foreground';
+
 const Sidebar: React.FC<{
     localSettings: Setting[]
     updateSetting: (key: string, setting: SettingValue) => void
@@ -22,16 +34,16 @@ const Sidebar: React.FC<{
     updateTier: (tier: Tier) => void
     errors: Record<string, string | undefined>
     setError: (key: string, error: string | undefined) => void
-    selectedTab: string
-    onTabChange: (id: string) => void
+    selectedTab: SidebarTab
+    onTabChange: (id: SidebarTab) => void
 }> = ({localSettings, updateSetting, localTiers, updateTier, errors, setError, selectedTab, onTabChange}) => {
     return (
         <div className='pt-4'>
-            <Tabs value={selectedTab} variant='underline' onValueChange={onTabChange}>
+            <Tabs value={selectedTab} variant='underline' onValueChange={value => onTabChange(value as SidebarTab)}>
                 <TabsList>
-                    <TabsTrigger value='signupOptions'>Signup options</TabsTrigger>
-                    <TabsTrigger value='lookAndFeel'>Look & feel</TabsTrigger>
-                    <TabsTrigger value='accountPage'>Account page</TabsTrigger>
+                    <TabsTrigger className={portalSidebarTabClassName} value='signupOptions'>Signup options</TabsTrigger>
+                    <TabsTrigger className={portalSidebarTabClassName} value='lookAndFeel'>Look & feel</TabsTrigger>
+                    <TabsTrigger className={portalSidebarTabClassName} value='accountPage'>Account page</TabsTrigger>
                 </TabsList>
                 <TabsContent value='signupOptions'>
                     <SignupOptions
@@ -53,8 +65,8 @@ const Sidebar: React.FC<{
 const PortalModal: React.FC = () => {
     const {updateRoute} = useRouting();
 
-    const [selectedPreviewTab, setSelectedPreviewTab] = useState('signup');
-    const [selectedSidebarTab, setSelectedSidebarTab] = useState('signupOptions');
+    const [selectedPreviewTab, setSelectedPreviewTab] = useState<PreviewTab>('signup');
+    const [selectedSidebarTab, setSelectedSidebarTab] = useState<SidebarTab>('signupOptions');
 
     const handleError = useHandleError();
     const {settings, siteData, config} = useGlobalData();
@@ -178,24 +190,19 @@ const PortalModal: React.FC = () => {
         }));
     };
 
-    const onSelectURL = (id: string) => {
+    const onSelectURL = (id: PreviewTab) => {
         setSelectedPreviewTab(id);
-        // Sync sidebar tab with preview tab
-        if (id === 'signup') {
-            setSelectedSidebarTab('signupOptions');
-        } else if (id === 'account') {
+
+        if (id === 'account') {
             setSelectedSidebarTab('accountPage');
+        } else if (id === 'signup' && selectedSidebarTab === 'accountPage') {
+            setSelectedSidebarTab('signupOptions');
         }
     };
 
-    const onSidebarTabChange = (id: string) => {
+    const onSidebarTabChange = (id: SidebarTab) => {
         setSelectedSidebarTab(id);
-        // Sync preview tab with sidebar tab
-        if (id === 'signupOptions') {
-            setSelectedPreviewTab('signup');
-        } else if (id === 'accountPage') {
-            setSelectedPreviewTab('account');
-        }
+        setSelectedPreviewTab(previewTabForSidebar[id]);
     };
 
     const sidebar = <Sidebar
@@ -215,7 +222,7 @@ const PortalModal: React.FC = () => {
     />;
 
     const previewTabs = (
-        <Tabs value={selectedPreviewTab} variant='button-sm' onValueChange={onSelectURL}>
+        <Tabs value={selectedPreviewTab} variant='button-sm' onValueChange={value => onSelectURL(value as PreviewTab)}>
             <TabsList>
                 <TabsTrigger value='signup'>Signup</TabsTrigger>
                 <TabsTrigger value='account'>Account page</TabsTrigger>
diff --git a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
index 8ffae8e87a5..ef006400c59 100644
--- a/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/stripe/stripe-connect-modal.tsx
@@ -1,6 +1,8 @@
 import BookmarkThumb from '../../../../assets/images/stripe-thumb.jpg';
+import ConfirmationModal from '../../../confirmation-modal';
 import GhostLogo from '../../../../assets/images/orb-squircle.png';
 import GhostLogoPink from '../../../../assets/images/orb-pink.png';
+import LimitModal from '../../../limit-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import StripeButton from '../../../stripe-button';
@@ -8,10 +10,10 @@ import StripeLogo from '../../../../assets/images/stripe-emblem.svg';
 import StripeVerifiedBadge from '../../../../assets/images/stripe-verified.svg';
 import useSettingGroup from '../../../../hooks/use-setting-group';
 import {Button, Field, FieldError, FieldGroup, FieldLabel, Input, Switch, Textarea} from '@tryghost/shade/components';
-import {ConfirmationModal, LimitModal, Modal} from '@tryghost/admin-x-design-system';
 import {HostLimitError, useLimiter} from '../../../../hooks/use-limiter';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {Text} from '@tryghost/shade/primitives';
 import {checkStripeEnabled, getSettingValue, getSettingValues, useDeleteStripeSettings, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
 import {getGhostPaths} from '@tryghost/admin-x-framework/helpers';
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers.tsx
index 7806c14d7b3..32694fe6380 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers.tsx
@@ -1,3 +1,4 @@
+import LimitModal from '../../limit-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useState} from 'react';
 import StripeButton from '../../stripe-button';
@@ -6,7 +7,6 @@ import TopLevelGroup from '../../top-level-group';
 import clsx from 'clsx';
 import {Button, Indicator, Tabs, TabsContent, TabsList, TabsTrigger} from '@tryghost/shade/components';
 import {HostLimitError, useLimiter} from '../../../hooks/use-limiter';
-import {LimitModal} from '@tryghost/admin-x-design-system';
 import {type Tier, getActiveTiers, getArchivedTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
 import {checkStripeEnabled} from '@tryghost/admin-x-framework/api/settings';
 import {formatNumber} from '@tryghost/shade/utils';
diff --git a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
index 08267abeb8a..c092f9f17ee 100644
--- a/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/tiers/tier-detail-modal.tsx
@@ -1,3 +1,4 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useRef} from 'react';
 import TierDetailPreview from './tier-detail-preview';
@@ -6,9 +7,9 @@ import useSettingGroup from '../../../../hooks/use-setting-group';
 import useSortableIndexedList from '../../../../hooks/use-sortable-indexed-list';
 import useUrlInput from '../../../../hooks/use-url-input';
 import {Button, Combobox, ComboboxContent, ComboboxTrigger, ComboboxValue, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSet, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, MultiSelectCombobox, SortableList, Switch} from '@tryghost/shade/components';
-import {ConfirmationModal, Modal} from '@tryghost/admin-x-design-system';
 import {type ErrorMessages, useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
 import {LucideIcon} from '@tryghost/shade/utils';
+import {Modal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {Text} from '@tryghost/shade/primitives';
 import {type Tier, useAddTier, useBrowseTiers, useEditTier} from '@tryghost/admin-x-framework/api/tiers';
diff --git a/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx b/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
index 8e68accc513..f0598d1dac8 100644
--- a/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/announcement-bar-modal.tsx
@@ -4,9 +4,9 @@ import HtmlField from '../../html-field';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useRef, useState} from 'react';
 import useSettingGroup from '../../../hooks/use-setting-group';
-import {Checkbox, Field, FieldGroup, FieldLabel, FieldLegend, FieldSet, Tabs, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
-import {DesktopChrome, MobileChrome, PreviewModalContent} from '@tryghost/admin-x-design-system';
+import {Checkbox, Field, FieldGroup, FieldLabel, FieldLegend, FieldSet, PreviewChrome, Tabs, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
 import {Laptop, Smartphone} from 'lucide-react';
+import {PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {debounce} from '../../../utils/debounce';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
@@ -196,9 +196,9 @@ const AnnouncementBarModal: React.FC = () => {
         visibility={visibilitySettings}
     />;
     const preview = previewDevice === 'desktop' ? (
-        <DesktopChrome data-testid='preview-desktop'>{rawPreview}</DesktopChrome>
+        <PreviewChrome data-testid='preview-desktop' device='desktop'>{rawPreview}</PreviewChrome>
     ) : (
-        <MobileChrome data-testid='preview-mobile'>{rawPreview}</MobileChrome>
+        <PreviewChrome data-testid='preview-mobile' device='mobile'>{rawPreview}</PreviewChrome>
     );
     const previewTabs = latestPost ? (
         <Tabs value={selectedPreviewTab} variant='button-sm' onValueChange={onSelectURL}>
diff --git a/apps/admin-x-settings/src/components/settings/site/announcement-bar/announcement-bar-preview.tsx b/apps/admin-x-settings/src/components/settings/site/announcement-bar/announcement-bar-preview.tsx
index f8fb81802f3..fb3d0bb1448 100644
--- a/apps/admin-x-settings/src/components/settings/site/announcement-bar/announcement-bar-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/announcement-bar/announcement-bar-preview.tsx
@@ -74,10 +74,10 @@ const AnnouncementBarPreview: React.FC<AnnouncementBarSettings> = ({announcement
     return (
         <IframeBuffering
             addDelay={true}
-            className="absolute size-[110%] origin-top-left scale-[.90909] bg-white max-[1600px]:size-[130%] max-[1600px]:scale-[.76923]"
+            className="absolute -top-px -left-px size-[calc(110%_+_3px)] origin-top-left scale-[.90909] bg-white max-[1600px]:size-[calc(130%_+_3px)] max-[1600px]:scale-[.76923]"
             generateContent={injectContentIntoIframe}
             height='100%'
-            parentClassName="relative h-full w-full"
+            parentClassName="relative h-full w-full overflow-hidden"
             testId='announcement-bar-preview-iframe'
             width='100%'
         />
diff --git a/apps/admin-x-settings/src/components/settings/site/change-theme.tsx b/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
index a3ef2fc227a..109512720a2 100644
--- a/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/change-theme.tsx
@@ -1,8 +1,8 @@
+import LimitModal from '../../limit-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useState} from 'react';
 import TopLevelGroup from '../../top-level-group';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
-import {LimitModal} from '@tryghost/admin-x-design-system';
 import {LucideIcon} from '@tryghost/shade/utils';
 import {SettingGroupContent} from '@tryghost/shade/patterns';
 import {Text} from '@tryghost/shade/primitives';
diff --git a/apps/admin-x-settings/src/components/settings/site/design-and-branding/theme-preview.tsx b/apps/admin-x-settings/src/components/settings/site/design-and-branding/theme-preview.tsx
index 49aa7c7b6e0..071c55d1310 100644
--- a/apps/admin-x-settings/src/components/settings/site/design-and-branding/theme-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/design-and-branding/theme-preview.tsx
@@ -116,10 +116,10 @@ const ThemePreview: React.FC<ThemePreviewProps> = ({settings,url}) => {
     return (
         <IframeBuffering
             addDelay={false}
-            className="absolute size-[110%] origin-top-left scale-[.90909] bg-white max-[1600px]:size-[130%] max-[1600px]:scale-[.76923]"
+            className="absolute -top-px -left-px size-[calc(110%_+_3px)] origin-top-left scale-[.90909] bg-white max-[1600px]:size-[calc(130%_+_3px)] max-[1600px]:scale-[.76923]"
             generateContent={injectContentIntoIframe}
             height='100%'
-            parentClassName="relative h-full w-full"
+            parentClassName="relative h-full w-full overflow-hidden"
             testId="theme-preview"
             width='100%'
         />
diff --git a/apps/admin-x-settings/src/components/settings/site/design-and-theme-modal.tsx b/apps/admin-x-settings/src/components/settings/site/design-and-theme-modal.tsx
index 62fb9f31247..1685b2d4425 100644
--- a/apps/admin-x-settings/src/components/settings/site/design-and-theme-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/design-and-theme-modal.tsx
@@ -1,9 +1,9 @@
 import ChangeThemeModal from './theme-modal';
 import DesignModal from './design-modal';
+import LimitModal from '../../limit-modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
 import React, {useCallback, useEffect, useState} from 'react';
 import ThemeCodeEditorModal from './theme/theme-code-editor-modal';
-import {LimitModal} from '@tryghost/admin-x-design-system';
 import {type RoutingModalProps, useRouting} from '@tryghost/admin-x-framework/routing';
 import {parseEditingThemeRoute} from './theme/theme-editor-utils';
 import {useCheckThemeLimitError} from '../../../hooks/use-check-theme-limit-error';
diff --git a/apps/admin-x-settings/src/components/settings/site/design-modal.tsx b/apps/admin-x-settings/src/components/settings/site/design-modal.tsx
index e33b3d0cc11..411130567d7 100644
--- a/apps/admin-x-settings/src/components/settings/site/design-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/design-modal.tsx
@@ -4,10 +4,10 @@ import ThemePreview from './design-and-branding/theme-preview';
 import ThemeSettings from './design-and-branding/theme-settings';
 import useQueryParams from '../../../hooks/use-query-params';
 import {type CustomThemeSetting, useBrowseCustomThemeSettings, useEditCustomThemeSettings} from '@tryghost/admin-x-framework/api/custom-theme-settings';
-import {DesktopChrome, MobileChrome, PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {Laptop, Smartphone} from 'lucide-react';
+import {PreviewChrome, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
+import {PreviewModalContent} from '@tryghost/admin-x-design-system';
 import {type Setting, type SettingValue, getSettingValues, useEditSettings} from '@tryghost/admin-x-framework/api/settings';
-import {Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem} from '@tryghost/shade/components';
 import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
 import {useBrowsePosts} from '@tryghost/admin-x-framework/api/posts';
 import {useForm, useHandleError} from '@tryghost/admin-x-framework/hooks';
@@ -176,9 +176,9 @@ const DesignModal: React.FC = () => {
             url={selectedTabURL}
         />;
     const previewContent = previewDevice === 'desktop' ? (
-        <DesktopChrome data-testid='preview-desktop'>{rawPreviewContent}</DesktopChrome>
+        <PreviewChrome data-testid='preview-desktop' device='desktop'>{rawPreviewContent}</PreviewChrome>
     ) : (
-        <MobileChrome data-testid='preview-mobile'>{rawPreviewContent}</MobileChrome>
+        <PreviewChrome data-testid='preview-mobile' device='mobile'>{rawPreviewContent}</PreviewChrome>
     );
     const previewTabs = latestPost ? (
         <Tabs value={selectedPreviewTab} variant='button-sm' onValueChange={onSelectURL}>
diff --git a/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
index 849fb1ca5ca..f002f527ee2 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme-modal.tsx
@@ -1,14 +1,16 @@
 import AdvancedThemeSettings from './theme/advanced-theme-settings';
+import ConfirmationModal from '../../confirmation-modal';
 import InvalidThemeModal, {type FatalErrors} from './theme/invalid-theme-modal';
+import LimitModal from '../../limit-modal';
 import NiceModal, {type NiceModalHandler, useModal} from '@ebay/nice-modal-react';
 import OfficialThemes from './theme/official-themes';
 import React, {useEffect, useState} from 'react';
 import ThemeInstalledModal from './theme/theme-installed-modal';
 import ThemePreview from './theme/theme-preview';
 import {Button, Dropzone, LoadingIndicator, Tabs, TabsList, TabsTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, LimitModal, Modal, PageHeader} from '@tryghost/admin-x-design-system';
 import {type InstalledTheme, type Theme, type ThemesInstallResponseType, isDefaultOrLegacyTheme, useActivateTheme, useBrowseThemes, useInstallTheme, useUploadTheme} from '@tryghost/admin-x-framework/api/themes';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
+import {Modal, PageHeader} from '@tryghost/admin-x-design-system';
 import {type OfficialTheme} from '../../providers/settings-app-provider';
 import {toast} from 'sonner';
 import {useCheckThemeLimitError} from '../../../hooks/use-check-theme-limit-error';
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
index 3fc7bd4d461..a492d7dd731 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/advanced-theme-settings.tsx
@@ -1,11 +1,13 @@
+import ConfirmationModal from '../../../confirmation-modal';
 import InvalidThemeModal, {type FatalErrors} from './invalid-theme-modal';
+import LimitModal from '../../../limit-modal';
 import NiceModal from '@ebay/nice-modal-react';
 import React from 'react';
 import useCustomFonts from '../../../../hooks/use-custom-fonts';
 import {ActionList, ActionListItem, ActionListItemActions, ActionListItemContent, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@tryghost/shade/components';
-import {ConfirmationModal, LimitModal, ModalPage} from '@tryghost/admin-x-design-system';
 import {JSONError} from '@tryghost/admin-x-framework/errors';
 import {LucideIcon} from '@tryghost/shade/utils';
+import {ModalPage} from '@tryghost/shade/page-templates';
 import {type Theme, isActiveTheme, isDefaultTheme, isDeletableTheme, isLegacyTheme, useActivateTheme, useDeleteTheme} from '@tryghost/admin-x-framework/api/themes';
 import {downloadFile, getGhostPaths} from '@tryghost/admin-x-framework/helpers';
 import {toast} from 'sonner';
@@ -161,7 +163,7 @@ const ThemeActions: React.FC<ThemeActionProps> = ({
                 <DropdownMenuTrigger asChild>
                     <Button aria-label='Menu' size='icon' type='button' variant='ghost'><LucideIcon.Ellipsis /></Button>
                 </DropdownMenuTrigger>
-                {/* legacy ModalPage overlay is z-[1000]; keep the portalled menu above it */}
+                {/* legacy Modal overlay is z-[1000]; keep the portalled menu above it */}
                 <DropdownMenuContent align='end' className='z-[9999]'>
                     <DropdownMenuItem onSelect={handleEditCode}>Edit code</DropdownMenuItem>
                     <DropdownMenuItem onSelect={handleDownload}>Download</DropdownMenuItem>
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx
index 5b61f862025..da261307423 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/invalid-theme-modal.tsx
@@ -1,6 +1,6 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React, {type ReactNode} from 'react';
-import {ConfirmationModalContent} from '@tryghost/admin-x-design-system';
+import {ConfirmationModalContent} from '../../../confirmation-modal';
 import {ErrorTextCard, type FatalErrors, ThemeValidationDetailsDisclosure, ValidationProblemCard, getIssuesFromFatalErrors} from './theme-validation-details';
 import {useBrowseConfig} from '@tryghost/admin-x-framework/api/config';
 
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/official-themes.tsx b/apps/admin-x-settings/src/components/settings/site/theme/official-themes.tsx
index 534554cd9c4..282c863932b 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/official-themes.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/official-themes.tsx
@@ -1,7 +1,7 @@
 import MarketplaceBgImage from '../../../../assets/images/footer-marketplace-bg.png';
 import React, {useEffect, useState} from 'react';
 import clsx from 'clsx';
-import {ModalPage} from '@tryghost/admin-x-design-system';
+import {ModalPage} from '@tryghost/shade/page-templates';
 import {type OfficialTheme, type ThemeVariant, useOfficialThemes} from '../../../providers/settings-app-provider';
 import {Text} from '@tryghost/shade/primitives';
 
@@ -53,7 +53,8 @@ const OfficialThemes: React.FC<{
     }, [variantLoopTheme, visibleVariantIdx]);
 
     return (
-        <ModalPage heading='Themes'>
+        <ModalPage>
+            <ModalPage.Title>Themes</ModalPage.Title>
             <div className='mt-[6vmin] grid grid-cols-1 gap-[6vmin] sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4'>
                 {officialThemes.map((theme) => {
                     const showVariants = hasVariants(theme);
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
index 41b51e65b2d..83a84ee60f3 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-installed-modal.tsx
@@ -1,7 +1,7 @@
 import NiceModal from '@ebay/nice-modal-react';
 import React, {type ReactNode} from 'react';
 import useCustomFonts from '../../../../hooks/use-custom-fonts';
-import {ConfirmationModalContent} from '@tryghost/admin-x-design-system';
+import {ConfirmationModalContent} from '../../../confirmation-modal';
 import {type InstalledTheme, useActivateTheme} from '@tryghost/admin-x-framework/api/themes';
 import {OutcomeBanner, ThemeValidationDetailsDisclosure, getIssuesFromInstalledTheme} from './theme-validation-details';
 import {getHomepageUrl, useBrowseSite} from '@tryghost/admin-x-framework/api/site';
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx b/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
index a3a3701aca5..04ea46f00dd 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/theme-preview.tsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
 import SettingsBreadcrumbs from '../../settings-breadcrumbs';
-import {Button, Field, FieldLabel, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
-import {DesktopChrome, MobileChrome, PageHeader} from '@tryghost/admin-x-design-system';
+import {Button, Field, FieldLabel, PreviewChrome, Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@tryghost/shade/components';
 import {Inline} from '@tryghost/shade/primitives';
 import {LucideIcon} from '@tryghost/shade/utils';
 import {type OfficialTheme, type ThemeVariant} from '../../../providers/settings-app-provider';
+import {PageHeader} from '@tryghost/admin-x-design-system';
 import {type Theme, isDefaultOrLegacyTheme} from '@tryghost/admin-x-framework/api/themes';
 
 const hasVariants = (theme: OfficialTheme) => theme.variants && theme.variants.length > 0;
@@ -125,21 +125,21 @@ const ThemePreview: React.FC<{
             <PageHeader containerClassName='bg-grey-50 dark:bg-black z-[100]' left={left} right={right} sticky={false} />
             <div className='flex h-[calc(100%-92px)] grow flex-col items-center justify-center bg-grey-50 dark:bg-black'>
                 {previewMode === 'desktop' ?
-                    <DesktopChrome>
+                    <PreviewChrome device='desktop'>
                         <iframe
                             className='size-full'
                             src={previewUrl}
                             title='Theme preview'
                         />
-                    </DesktopChrome>
+                    </PreviewChrome>
                     :
-                    <MobileChrome>
+                    <PreviewChrome device='mobile'>
                         <iframe
                             className='size-full'
                             src={previewUrl}
                             title='Theme preview'
                         />
-                    </MobileChrome>
+                    </PreviewChrome>
                 }
             </div>
         </div>
diff --git a/apps/admin-x-settings/test/unit/components/confirmation-modal.test.tsx b/apps/admin-x-settings/test/unit/components/confirmation-modal.test.tsx
new file mode 100644
index 00000000000..3c04990b214
--- /dev/null
+++ b/apps/admin-x-settings/test/unit/components/confirmation-modal.test.tsx
@@ -0,0 +1,71 @@
+import ConfirmationModal, {type ConfirmationModalProps} from '@src/components/confirmation-modal';
+import NiceModal from '@ebay/nice-modal-react';
+import {act, fireEvent, render, screen, waitFor} from '@testing-library/react';
+
+describe('ConfirmationModal', () => {
+    afterEach(() => {
+        void NiceModal.remove(ConfirmationModal);
+    });
+
+    const showModal = (props: ConfirmationModalProps) => {
+        render(<NiceModal.Provider />);
+
+        act(() => {
+            void NiceModal.show(ConfirmationModal, props);
+        });
+    };
+
+    it('renders the supplied content and confirms without closing implicitly', async () => {
+        const onOk = vi.fn();
+
+        showModal({
+            title: 'Delete newsletter?',
+            prompt: 'This cannot be undone.',
+            cancelLabel: 'Keep it',
+            okLabel: 'Delete',
+            onOk
+        });
+
+        expect(await screen.findByRole('heading', {name: 'Delete newsletter?'})).toBeInTheDocument();
+        expect(screen.getByText('This cannot be undone.')).toBeInTheDocument();
+
+        fireEvent.click(screen.getByRole('button', {name: 'Delete'}));
+
+        await waitFor(() => expect(onOk).toHaveBeenCalledOnce());
+        expect(screen.getByTestId('confirmation-modal')).toBeInTheDocument();
+    });
+
+    it('disables both actions and shows the running label while confirming', async () => {
+        let resolveTask: () => void = () => undefined;
+        const task = new Promise<void>((resolve) => {
+            resolveTask = resolve;
+        });
+
+        showModal({
+            okLabel: 'Activate',
+            okRunningLabel: 'Activating...',
+            onOk: () => task
+        });
+
+        const confirmButton = await screen.findByRole('button', {name: 'Activate'});
+        fireEvent.click(confirmButton);
+
+        expect(screen.getByRole('button', {name: 'Activating...'})).toBeDisabled();
+        expect(screen.getByRole('button', {name: 'Cancel'})).toBeDisabled();
+
+        resolveTask();
+
+        await waitFor(() => expect(screen.getByRole('button', {name: 'Activate'})).toBeEnabled());
+    });
+
+    it('delegates cancellation when a caller owns the close behavior', async () => {
+        const onCancel = vi.fn();
+
+        showModal({onCancel});
+
+        fireEvent.click(await screen.findByRole('button', {name: 'Cancel'}));
+
+        expect(onCancel).toHaveBeenCalledOnce();
+        expect(screen.getByTestId('confirmation-modal')).toBeInTheDocument();
+    });
+});
diff --git a/apps/admin-x-settings/test/unit/components/limit-modal.test.tsx b/apps/admin-x-settings/test/unit/components/limit-modal.test.tsx
new file mode 100644
index 00000000000..5a5f2f486c9
--- /dev/null
+++ b/apps/admin-x-settings/test/unit/components/limit-modal.test.tsx
@@ -0,0 +1,36 @@
+import LimitModal, {type LimitModalProps} from '@src/components/limit-modal';
+import NiceModal from '@ebay/nice-modal-react';
+import {act, fireEvent, render, screen, waitFor} from '@testing-library/react';
+
+describe('LimitModal', () => {
+    afterEach(() => {
+        void NiceModal.remove(LimitModal);
+    });
+
+    const showModal = (props: LimitModalProps) => {
+        render(<NiceModal.Provider />);
+
+        act(() => {
+            void NiceModal.show(LimitModal, props);
+        });
+    };
+
+    it('preserves the upgrade defaults and renders HTML prompts', async () => {
+        const onOk = vi.fn();
+
+        showModal({
+            prompt: 'Upgrade to use <a href="https://ghost.org/pricing/">this feature</a>.',
+            onOk
+        });
+
+        expect(await screen.findByRole('heading', {name: 'Upgrade your plan'})).toBeInTheDocument();
+        const promptLink = screen.getByRole('link', {name: 'this feature'});
+        expect(promptLink).toHaveAttribute('href', 'https://ghost.org/pricing/');
+        expect(promptLink.closest('.w-full')).toBeInTheDocument();
+
+        fireEvent.click(screen.getByRole('button', {name: 'Upgrade'}));
+
+        await waitFor(() => expect(onOk).toHaveBeenCalledOnce());
+        expect(screen.getByTestId('limit-modal')).toBeInTheDocument();
+    });
+});
diff --git a/apps/admin/src/settings/membership/access.acceptance.test.tsx b/apps/admin/src/settings/membership/access.acceptance.test.tsx
index c07f638792c..041597cf182 100644
--- a/apps/admin/src/settings/membership/access.acceptance.test.tsx
+++ b/apps/admin/src/settings/membership/access.acceptance.test.tsx
@@ -122,6 +122,42 @@ describe("Access settings", () => {
         expect(document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2)?.closest("[role='option']")).toBe(element);
     });
 
+    it("shows the default pre-launch banner copy when public site access is disabled", async () => {
+        fakeSettingsScreens();
+        const config = configResponse();
+        config.config.hostSettings = {
+            limits: {publicSiteAccess: {disabled: true}},
+        };
+        await renderAdminApp("/settings", {boot: {browseConfig: {response: config}}});
+
+        const section = settingsScreen.access();
+        await expect.element(section.getByText("Pre-launch mode", {exact: true})).toBeVisible();
+        await expect.element(section.getByText(/During your free trial, a private access code is required/)).toBeVisible();
+        await expect.element(section.getByRole("link", {name: "Upgrade now"})).toHaveAttribute("href", "#/pro/billing/plans");
+    });
+
+    it("uses configurable title, message, and link for the pre-launch banner", async () => {
+        fakeSettingsScreens();
+        const config = configResponse();
+        config.config.hostSettings = {
+            limits: {
+                publicSiteAccess: {
+                    disabled: true,
+                    title: "Trial mode",
+                    error: "Your site is private while you evaluate the platform.",
+                    upgradeUrl: "https://billing.example.com/upgrade",
+                },
+            },
+        };
+        await renderAdminApp("/settings", {boot: {browseConfig: {response: config}}});
+
+        const section = settingsScreen.access();
+        await expect.element(section.getByText("Trial mode", {exact: true})).toBeVisible();
+        await expect.element(section.getByText("Your site is private while you evaluate the platform.")).toBeVisible();
+        await expect.element(section.getByRole("link", {name: "Upgrade now"})).toHaveAttribute("href", "https://billing.example.com/upgrade");
+        await expect(section.getByText("Pre-launch mode", {exact: true})).toHaveCount(0);
+    });
+
     it("disables dependent settings when signup is disabled", async () => {
         fakeSettingsScreens();
         const settingsApi = fakeEditSettings();
diff --git a/apps/admin/src/settings/membership/portal.acceptance.test.tsx b/apps/admin/src/settings/membership/portal.acceptance.test.tsx
index a6e0450eda6..eebec7ab333 100644
--- a/apps/admin/src/settings/membership/portal.acceptance.test.tsx
+++ b/apps/admin/src/settings/membership/portal.acceptance.test.tsx
@@ -78,7 +78,7 @@ describe("Portal settings", () => {
 
         const modal = await openPortal();
         await modal.getByRole("tab", {name: "Look & feel"}).click();
-        await modal.getByRole("textbox").fill("become a member of something epic");
+        await modal.getByRole("textbox", {name: "Signup button text"}).fill("become a member of something epic");
         await modal.getByRole("switch").click();
         await modal.getByRole("button", {name: "Save"}).click();
 
@@ -89,6 +89,31 @@ describe("Portal settings", () => {
         ]);
     });
 
+    it("keeps the preview and settings tabs synchronized", async () => {
+        fakeSettingsScreens();
+        await renderAdminApp("/settings");
+
+        const modal = await openPortal();
+        const previewAccountTab = modal.getByRole("tab", {name: "Account page"}).first();
+        const settingsAccountTab = modal.getByRole("tab", {name: "Account page"}).last();
+        const linksTab = modal.getByRole("tab", {name: "Links"});
+        const lookAndFeelTab = modal.getByRole("tab", {name: "Look & feel"});
+        const signupTab = modal.getByRole("tab", {name: "Signup", exact: true});
+        const signupOptionsTab = modal.getByRole("tab", {name: "Signup options"});
+
+        await previewAccountTab.click();
+        await expect.element(settingsAccountTab).toHaveAttribute("data-state", "active");
+
+        await linksTab.click();
+        await expect.element(settingsAccountTab).toHaveAttribute("data-state", "active");
+
+        await lookAndFeelTab.click();
+        await expect.element(signupTab).toHaveAttribute("data-state", "active");
+
+        await signupOptionsTab.click();
+        await expect.element(signupTab).toHaveAttribute("data-state", "active");
+    });
+
     it("validates and saves the support email address", async () => {
         fakeSettingsScreens();
         const settingsApi = fakeEditSettings();
diff --git a/apps/shade/src/components.ts b/apps/shade/src/components.ts
index 7596f168bfe..69cc6c38be4 100644
--- a/apps/shade/src/components.ts
+++ b/apps/shade/src/components.ts
@@ -36,6 +36,7 @@ export * from './components/ui/navbar';
 export * from './components/ui/no-value-label';
 export * from './components/ui/pagemenu';
 export * from './components/ui/popover';
+export * from './components/ui/preview-chrome';
 export * from './components/ui/right-sidebar';
 export * from './components/ui/radio-group';
 export * from './components/ui/separator';
diff --git a/apps/shade/src/components/page-templates/modal-page.stories.tsx b/apps/shade/src/components/page-templates/modal-page.stories.tsx
new file mode 100644
index 00000000000..51828478d27
--- /dev/null
+++ b/apps/shade/src/components/page-templates/modal-page.stories.tsx
@@ -0,0 +1,35 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {ModalPage} from '@/components/page-templates/modal-page';
+
+const meta = {
+    title: 'Page Templates / Modal Page',
+    component: ModalPage,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'Content layout for full-width and full-bleed modals that present a complete page.'
+            }
+        }
+    }
+} satisfies Meta<typeof ModalPage>;
+
+export default meta;
+type Story = StoryObj<typeof ModalPage>;
+
+export const Default: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use inside a full-width or full-bleed modal when its content needs page-level spacing and an optional title.'
+            }
+        }
+    },
+    render: () => (
+        <ModalPage>
+            <ModalPage.Title>Links</ModalPage.Title>
+            <p>Use these links in your theme to open pages of Portal.</p>
+        </ModalPage>
+    )
+};
diff --git a/apps/shade/src/components/page-templates/modal-page.tsx b/apps/shade/src/components/page-templates/modal-page.tsx
new file mode 100644
index 00000000000..e3488ead034
--- /dev/null
+++ b/apps/shade/src/components/page-templates/modal-page.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {Box, Text} from '@/components/primitives';
+import {cn} from '@/lib/utils';
+
+type ModalPageProps = React.ComponentPropsWithoutRef<typeof Box>;
+type ModalPageTitleProps = Omit<React.ComponentPropsWithoutRef<typeof Text>, 'as'>;
+
+const ModalPageTitle = React.forwardRef<HTMLElement, ModalPageTitleProps>(
+    function ModalPageTitle({className, ...props}, ref) {
+        return (
+            <Text
+                ref={ref}
+                as='h1'
+                className={cn('mb-8 text-4xl', className)}
+                data-modal-page='title'
+                leading='supertight'
+                weight='bold'
+                {...props}
+            />
+        );
+    }
+);
+
+ModalPageTitle.displayName = 'ModalPage.Title';
+
+const ModalPageRoot = React.forwardRef<HTMLDivElement, ModalPageProps>(
+    function ModalPage({className, ...props}, ref) {
+        return (
+            <Box
+                ref={ref}
+                className={cn('w-full p-[8vmin] pt-5', className)}
+                data-modal-page='root'
+                {...props}
+            />
+        );
+    }
+);
+
+ModalPageRoot.displayName = 'ModalPage';
+
+type ModalPageComponent = typeof ModalPageRoot & {
+    Title: typeof ModalPageTitle;
+};
+
+const ModalPage = Object.assign(ModalPageRoot, {
+    Title: ModalPageTitle
+}) as ModalPageComponent;
+
+export {ModalPage, ModalPageTitle};
+export type {ModalPageProps, ModalPageTitleProps};
diff --git a/apps/shade/src/components/patterns/setting-group.tsx b/apps/shade/src/components/patterns/setting-group.tsx
index 39ebf6664e6..a46c0af8f15 100644
--- a/apps/shade/src/components/patterns/setting-group.tsx
+++ b/apps/shade/src/components/patterns/setting-group.tsx
@@ -92,7 +92,7 @@ const SettingGroupContent = React.forwardRef<HTMLDivElement, SettingGroupContent
     }
 
     return (
-        <Stack ref={ref} className={cn(!className && 'gap-y-7', className)} gap='none' {...props}>
+        <Stack ref={ref} className={cn('gap-y-7', className)} gap='none' {...props}>
             {children}
         </Stack>
     );
diff --git a/apps/shade/src/components/ui/preview-chrome.stories.tsx b/apps/shade/src/components/ui/preview-chrome.stories.tsx
new file mode 100644
index 00000000000..72364a08510
--- /dev/null
+++ b/apps/shade/src/components/ui/preview-chrome.stories.tsx
@@ -0,0 +1,60 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {Box, Text} from '@/components/primitives';
+import {PreviewChrome} from '@/components/ui/preview-chrome';
+
+const meta = {
+    title: 'Components / Preview Chrome',
+    component: PreviewChrome,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'Frames preview content at desktop or mobile device dimensions.'
+            }
+        }
+    }
+} satisfies Meta<typeof PreviewChrome>;
+
+export default meta;
+type Story = StoryObj<typeof PreviewChrome>;
+
+const previewContent = (
+    <Box className='size-full bg-background' padding='xl'>
+        <Text weight='semibold'>Preview content</Text>
+    </Box>
+);
+
+export const Desktop: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use the desktop frame for wide publication and theme previews.'
+            }
+        }
+    },
+    render: () => (
+        <Box className='h-[480px] w-[960px] bg-muted'>
+            <PreviewChrome device='desktop'>
+                {previewContent}
+            </PreviewChrome>
+        </Box>
+    )
+};
+
+export const Mobile: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use the mobile frame for narrow, independently scrolling previews.'
+            }
+        }
+    },
+    render: () => (
+        <Box className='bg-muted' padding='2xl'>
+            <PreviewChrome device='mobile'>
+                {previewContent}
+            </PreviewChrome>
+        </Box>
+    )
+};
diff --git a/apps/shade/src/components/ui/preview-chrome.tsx b/apps/shade/src/components/ui/preview-chrome.tsx
new file mode 100644
index 00000000000..8af76e69cda
--- /dev/null
+++ b/apps/shade/src/components/ui/preview-chrome.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {cn} from '@/lib/utils';
+import {cva, type VariantProps} from 'class-variance-authority';
+
+const previewChromeVariants = cva('size-full', {
+    variants: {
+        device: {
+            desktop: 'px-8',
+            mobile: 'h-[775px] w-[380px] rounded-3xl bg-surface-elevated p-2 shadow-xl'
+        }
+    },
+    defaultVariants: {
+        device: 'desktop'
+    }
+});
+
+const previewViewportVariants = cva('size-full overflow-hidden', {
+    variants: {
+        device: {
+            desktop: 'rounded-t-xs shadow-sm',
+            mobile: 'overflow-auto rounded-2xl border border-border-default'
+        }
+    },
+    defaultVariants: {
+        device: 'desktop'
+    }
+});
+
+export interface PreviewChromeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof previewChromeVariants> {}
+
+const PreviewChrome = React.forwardRef<HTMLDivElement, PreviewChromeProps>(
+    ({children, className, device = 'desktop', ...props}, ref) => (
+        <div
+            ref={ref}
+            className={cn(previewChromeVariants({device}), className)}
+            {...props}
+        >
+            <div className={previewViewportVariants({device})}>
+                {children}
+            </div>
+        </div>
+    )
+);
+
+PreviewChrome.displayName = 'PreviewChrome';
+
+export {PreviewChrome, previewChromeVariants};
diff --git a/apps/shade/src/components/ui/sonner.stories.tsx b/apps/shade/src/components/ui/sonner.stories.tsx
index c6bf2d73357..8b029e4bae5 100644
--- a/apps/shade/src/components/ui/sonner.stories.tsx
+++ b/apps/shade/src/components/ui/sonner.stories.tsx
@@ -23,28 +23,72 @@ export const Default: Story = {
     args: {},
     render: () => (
         <Button onClick={() => toast('Toast title')}>Toast!</Button>
-    )
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use a default toast for brief neutral feedback.'
+            }
+        }
+    }
 };
 
 export const Error: Story = {
     args: {},
     render: () => (
         <Button onClick={() => toast.error('Hello world!', {description: 'Error description', duration: Infinity})}>Toast!</Button>
-    )
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use an error toast when an action fails and the user may need to respond.'
+            }
+        }
+    }
 };
 
 export const Success: Story = {
     args: {},
     render: () => (
         <Button onClick={() => toast.success('Hello world!', {description: 'Error description', duration: Infinity})}>Toast!</Button>
-    )
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use a success toast to confirm that an action completed.'
+            }
+        }
+    }
 };
 
 export const Info: Story = {
     args: {},
     render: () => (
         <Button onClick={() => toast.info('Hello world!', {description: 'Error description', duration: Infinity})}>Toast!</Button>
-    )
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Use an informational toast for contextual feedback without success or error semantics.'
+            }
+        }
+    }
+};
+
+export const WithCloseButton: Story = {
+    args: {
+        closeButton: true
+    },
+    render: () => (
+        <Button onClick={() => toast.success('Newsletter reactivated', {duration: Infinity})}>Toast with close button</Button>
+    ),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Close buttons retain visible default, hover, and focus states in both light and dark themes.'
+            }
+        }
+    }
 };
 
 export const WithAction: Story = {
diff --git a/apps/shade/src/components/ui/sonner.tsx b/apps/shade/src/components/ui/sonner.tsx
index a0c7807bb8e..1d1df2f4133 100644
--- a/apps/shade/src/components/ui/sonner.tsx
+++ b/apps/shade/src/components/ui/sonner.tsx
@@ -1,19 +1,33 @@
 import {Toaster as Sonner} from 'sonner';
+import {cn} from '@/lib/utils';
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-const Toaster = ({...props}: ToasterProps) => {
+const Toaster = ({className, style, theme = 'light', toastOptions, ...props}: ToasterProps) => {
+    const {classNames, ...toastOptionProps} = toastOptions ?? {};
+
     return (
         <Sonner
-            className="toaster group"
+            className={cn('toaster group', className)}
             style={
                 {
                     '--normal-bg': 'var(--background)',
                     '--normal-text': 'var(--foreground)',
-                    '--normal-border': 'var(--border)'
+                    '--normal-border': 'var(--border)',
+                    ...style
                 } as React.CSSProperties
             }
-            theme="light" // Always force light to prevent browser override
+            theme={theme}
+            toastOptions={{
+                ...toastOptionProps,
+                classNames: {
+                    ...classNames,
+                    closeButton: cn(
+                        'border-control-border! bg-background! text-foreground! hover:bg-interactive-hover! focus-visible:ring-2! focus-visible:ring-focus-ring! focus-visible:ring-offset-2! focus-visible:ring-offset-background! data-[disabled=true]:opacity-50!',
+                        classNames?.closeButton
+                    )
+                }
+            }}
             {...props}
         />
     );
diff --git a/apps/shade/src/docs/adoption-data.json b/apps/shade/src/docs/adoption-data.json
index e308327dcf7..d3af438df1a 100644
--- a/apps/shade/src/docs/adoption-data.json
+++ b/apps/shade/src/docs/adoption-data.json
@@ -1,15 +1,15 @@
 {
   "snapshot": {
-    "generatedAt": "2026-07-22T23:23:28.078Z",
-    "sha": "0c8323b77b84da688b7db1f3d9b15b5635434c10",
-    "branch": "codex/admin-settings-shade-buttons"
+    "generatedAt": "2026-07-23T16:03:50.691Z",
+    "sha": "cadcb2fb49b0ea46452b404422b57413ab3c2608",
+    "branch": "codex/admin-settings-shade-confirmation"
   },
   "summary": {
-    "adminReactFilesTotal": 702,
-    "adminReactFilesUsingShade": 364,
-    "shadeAdoptionPct": 51.9,
-    "uniqueShadeComponentsUsed": 285,
-    "adminXDsComponentsStillUsed": 28
+    "adminReactFilesTotal": 705,
+    "adminReactFilesUsingShade": 375,
+    "shadeAdoptionPct": 53.2,
+    "uniqueShadeComponentsUsed": 295,
+    "adminXDsComponentsStillUsed": 19
   },
   "apps": [
     {
@@ -1200,26 +1200,42 @@
     },
     {
       "name": "admin-x-settings",
-      "files": 249,
-      "shadeFiles": 137,
-      "adminXDsFiles": 108,
+      "files": 252,
+      "shadeFiles": 148,
+      "adminXDsFiles": 55,
       "shadeComponents": [
         {
           "name": "Button",
-          "count": 68
+          "count": 70
         },
         {
           "name": "FieldLabel",
-          "count": 43
+          "count": 53
         },
         {
           "name": "Field",
-          "count": 41
+          "count": 51
+        },
+        {
+          "name": "LucideIcon",
+          "count": 37
         },
         {
           "name": "FieldDescription",
+          "count": 36
+        },
+        {
+          "name": "Input",
+          "count": 35
+        },
+        {
+          "name": "FieldError",
           "count": 31
         },
+        {
+          "name": "FieldGroup",
+          "count": 26
+        },
         {
           "name": "formatNumber",
           "count": 26
@@ -1260,6 +1276,10 @@
           "name": "SelectValue",
           "count": 20
         },
+        {
+          "name": "SettingGroupContent",
+          "count": 19
+        },
         {
           "name": "Text",
           "count": 17
@@ -1269,17 +1289,13 @@
           "count": 17
         },
         {
-          "name": "ActionList",
+          "name": "Inline",
           "count": 16
         },
         {
-          "name": "FieldError",
+          "name": "ActionList",
           "count": 16
         },
-        {
-          "name": "Inline",
-          "count": 14
-        },
         {
           "name": "ActionListItem",
           "count": 14
@@ -1304,6 +1320,14 @@
           "name": "Textarea",
           "count": 12
         },
+        {
+          "name": "FieldLegend",
+          "count": 11
+        },
+        {
+          "name": "FieldSet",
+          "count": 11
+        },
         {
           "name": "ToggleGroup",
           "count": 9
@@ -1348,9 +1372,25 @@
           "name": "MultiSelectCombobox",
           "count": 8
         },
+        {
+          "name": "InputGroup",
+          "count": 7
+        },
+        {
+          "name": "InputGroupAddon",
+          "count": 7
+        },
+        {
+          "name": "InputGroupInput",
+          "count": 7
+        },
+        {
+          "name": "cn",
+          "count": 7
+        },
         {
           "name": "Stack",
-          "count": 6
+          "count": 7
         },
         {
           "name": "Dropzone",
@@ -1376,10 +1416,6 @@
           "name": "ComboboxValue",
           "count": 6
         },
-        {
-          "name": "cn",
-          "count": 6
-        },
         {
           "name": "DirtyConfirmDialog",
           "count": 5
@@ -1388,18 +1424,6 @@
           "name": "useDirtyConfirmation",
           "count": 5
         },
-        {
-          "name": "InputGroup",
-          "count": 5
-        },
-        {
-          "name": "InputGroupAddon",
-          "count": 5
-        },
-        {
-          "name": "InputGroupInput",
-          "count": 5
-        },
         {
           "name": "DropdownMenu",
           "count": 5
@@ -1417,11 +1441,11 @@
           "count": 5
         },
         {
-          "name": "Input",
-          "count": 5
+          "name": "SettingGroup",
+          "count": 4
         },
         {
-          "name": "LucideIcon",
+          "name": "InputGroupButton",
           "count": 4
         },
         {
@@ -1445,25 +1469,17 @@
           "count": 3
         },
         {
-          "name": "Badge",
+          "name": "ButtonProps",
           "count": 3
         },
         {
-          "name": "InputGroupButton",
+          "name": "Badge",
           "count": 3
         },
         {
           "name": "useFocusContext",
           "count": 3
         },
-        {
-          "name": "FieldLegend",
-          "count": 3
-        },
-        {
-          "name": "FieldSet",
-          "count": 3
-        },
         {
           "name": "SortableList",
           "count": 3
@@ -1492,6 +1508,10 @@
           "name": "CopyFieldValue",
           "count": 3
         },
+        {
+          "name": "InputGroupText",
+          "count": 3
+        },
         {
           "name": "RadioGroup",
           "count": 3
@@ -1505,11 +1525,11 @@
           "count": 3
         },
         {
-          "name": "ButtonProps",
+          "name": "inputSurface",
           "count": 2
         },
         {
-          "name": "inputSurface",
+          "name": "StickyFooter",
           "count": 2
         },
         {
@@ -1524,10 +1544,6 @@
           "name": "Checkbox",
           "count": 2
         },
-        {
-          "name": "FieldGroup",
-          "count": 2
-        },
         {
           "name": "TabsTriggerCount",
           "count": 2
@@ -1568,14 +1584,70 @@
           "name": "TableRow",
           "count": 2
         },
+        {
+          "name": "SettingGroupValue",
+          "count": 2
+        },
+        {
+          "name": "SettingGroupValueContent",
+          "count": 2
+        },
+        {
+          "name": "SettingGroupValueTitle",
+          "count": 2
+        },
         {
           "name": "GhostOrb",
           "count": 2
         },
+        {
+          "name": "SettingGroupActions",
+          "count": 1
+        },
+        {
+          "name": "SettingGroupDescription",
+          "count": 1
+        },
+        {
+          "name": "SettingGroupDetails",
+          "count": 1
+        },
+        {
+          "name": "SettingGroupHeader",
+          "count": 1
+        },
+        {
+          "name": "SettingGroupTitle",
+          "count": 1
+        },
         {
           "name": "Kbd",
           "count": 1
         },
+        {
+          "name": "AlertDialog",
+          "count": 1
+        },
+        {
+          "name": "AlertDialogContent",
+          "count": 1
+        },
+        {
+          "name": "AlertDialogDescription",
+          "count": 1
+        },
+        {
+          "name": "AlertDialogFooter",
+          "count": 1
+        },
+        {
+          "name": "AlertDialogHeader",
+          "count": 1
+        },
+        {
+          "name": "AlertDialogTitle",
+          "count": 1
+        },
         {
           "name": "ColorPicker",
           "count": 1
@@ -1613,7 +1685,7 @@
           "count": 1
         },
         {
-          "name": "InputGroupText",
+          "name": "Box",
           "count": 1
         },
         {
@@ -1644,10 +1716,6 @@
           "name": "DropdownMenuSeparator",
           "count": 1
         },
-        {
-          "name": "StickyFooter",
-          "count": 1
-        },
         {
           "name": "FieldSeparator",
           "count": 1
@@ -1686,30 +1754,10 @@
         }
       ],
       "adminXDsComponents": [
-        {
-          "name": "Icon",
-          "count": 39
-        },
         {
           "name": "Modal",
           "count": 34
         },
-        {
-          "name": "TextField",
-          "count": 33
-        },
-        {
-          "name": "Form",
-          "count": 26
-        },
-        {
-          "name": "ConfirmationModal",
-          "count": 23
-        },
-        {
-          "name": "SettingGroupContent",
-          "count": 19
-        },
         {
           "name": "LimitModal",
           "count": 10
@@ -1718,14 +1766,6 @@
           "name": "PreviewModalContent",
           "count": 7
         },
-        {
-          "name": "SettingGroupHeader",
-          "count": 5
-        },
-        {
-          "name": "SettingGroup",
-          "count": 4
-        },
         {
           "name": "DesktopChrome",
           "count": 3
@@ -1746,10 +1786,6 @@
           "name": "PageHeader",
           "count": 2
         },
-        {
-          "name": "ConfirmationModalContent",
-          "count": 2
-        },
         {
           "name": "topLevelBackdropClasses",
           "count": 1
@@ -1762,10 +1798,6 @@
           "name": "DesignSystemAppProps",
           "count": 1
         },
-        {
-          "name": "SettingGroupProps",
-          "count": 1
-        },
         {
           "name": "SettingNavItem",
           "count": 1
@@ -1804,35 +1836,43 @@
   "topShadeComponents": [
     {
       "name": "Button",
-      "count": 183
+      "count": 185
     },
     {
       "name": "LucideIcon",
-      "count": 139
+      "count": 172
     },
     {
       "name": "formatNumber",
       "count": 74
     },
+    {
+      "name": "FieldLabel",
+      "count": 56
+    },
+    {
+      "name": "Field",
+      "count": 54
+    },
     {
       "name": "LoadingIndicator",
       "count": 52
     },
     {
-      "name": "FieldLabel",
-      "count": 46
+      "name": "Input",
+      "count": 49
     },
     {
       "name": "cn",
-      "count": 44
+      "count": 45
     },
     {
-      "name": "Field",
-      "count": 44
+      "name": "FieldDescription",
+      "count": 37
     },
     {
-      "name": "FieldDescription",
-      "count": 32
+      "name": "FieldError",
+      "count": 34
     },
     {
       "name": "Tabs",
@@ -1873,41 +1913,13 @@
     {
       "name": "Select",
       "count": 26
-    },
-    {
-      "name": "SelectContent",
-      "count": 26
-    },
-    {
-      "name": "SelectItem",
-      "count": 26
     }
   ],
   "adminXDsComponentsAggregate": [
-    {
-      "name": "Icon",
-      "count": 39
-    },
     {
       "name": "Modal",
       "count": 34
     },
-    {
-      "name": "TextField",
-      "count": 33
-    },
-    {
-      "name": "Form",
-      "count": 26
-    },
-    {
-      "name": "ConfirmationModal",
-      "count": 23
-    },
-    {
-      "name": "SettingGroupContent",
-      "count": 19
-    },
     {
       "name": "LimitModal",
       "count": 10
@@ -1916,14 +1928,6 @@
       "name": "PreviewModalContent",
       "count": 7
     },
-    {
-      "name": "SettingGroupHeader",
-      "count": 5
-    },
-    {
-      "name": "SettingGroup",
-      "count": 4
-    },
     {
       "name": "DesktopChrome",
       "count": 3
@@ -1944,10 +1948,6 @@
       "name": "PageHeader",
       "count": 2
     },
-    {
-      "name": "ConfirmationModalContent",
-      "count": 2
-    },
     {
       "name": "topLevelBackdropClasses",
       "count": 1
@@ -1960,10 +1960,6 @@
       "name": "DesignSystemAppProps",
       "count": 1
     },
-    {
-      "name": "SettingGroupProps",
-      "count": 1
-    },
     {
       "name": "SettingNavItem",
       "count": 1
diff --git a/apps/shade/src/page-templates.ts b/apps/shade/src/page-templates.ts
index 79d5d6e6d18..c1f7643d86e 100644
--- a/apps/shade/src/page-templates.ts
+++ b/apps/shade/src/page-templates.ts
@@ -1,3 +1,4 @@
 // Full page layout templates — assemble patterns into complete route-level structures
 export * from './components/page-templates/detail-page';
 export * from './components/page-templates/list-page';
+export * from './components/page-templates/modal-page';
diff --git a/apps/shade/test/unit/components/page-templates/modal-page.test.tsx b/apps/shade/test/unit/components/page-templates/modal-page.test.tsx
new file mode 100644
index 00000000000..963d3436290
--- /dev/null
+++ b/apps/shade/test/unit/components/page-templates/modal-page.test.tsx
@@ -0,0 +1,29 @@
+import assert from 'assert/strict';
+import {ModalPage} from '@/components/page-templates/modal-page';
+import {render, screen} from '../../utils/test-utils';
+
+describe('ModalPage', () => {
+    it('renders the page shell and title slots', () => {
+        render(
+            <ModalPage data-testid='modal-page'>
+                <ModalPage.Title>Themes</ModalPage.Title>
+                <p>Theme content</p>
+            </ModalPage>
+        );
+
+        assert.equal(screen.getByTestId('modal-page').getAttribute('data-modal-page'), 'root');
+        assert.equal(screen.getByRole('heading', {name: 'Themes'}).getAttribute('data-modal-page'), 'title');
+        assert.ok(screen.getByText('Theme content'));
+    });
+
+    it('forwards custom classes to each slot', () => {
+        render(
+            <ModalPage className='max-w-3xl' data-testid='modal-page'>
+                <ModalPage.Title className='mb-4'>Links</ModalPage.Title>
+            </ModalPage>
+        );
+
+        assert.ok(screen.getByTestId('modal-page').className.includes('max-w-3xl'));
+        assert.ok(screen.getByRole('heading', {name: 'Links'}).className.includes('mb-4'));
+    });
+});
diff --git a/ghost/core/core/server/adapters/scheduling/scheduling-base.js b/ghost/core/core/server/adapters/scheduling/scheduling-base.js
deleted file mode 100644
index 2b95d04bf91..00000000000
--- a/ghost/core/core/server/adapters/scheduling/scheduling-base.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const {SchedulingBase} = require('@tryghost/adapter-base-scheduling');
-
-// NOTE: this is a temporary shim to ensure that Moya requires continue to work
-// until @tryghost/adapter-base-scheduling is published to NPM and Moya depends on it directly
-module.exports = SchedulingBase;
diff --git a/ghost/core/core/server/adapters/sso/SSOBase.js b/ghost/core/core/server/adapters/sso/SSOBase.js
deleted file mode 100644
index d7c5cf64116..00000000000
--- a/ghost/core/core/server/adapters/sso/SSOBase.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const {SSOBase} = require('@tryghost/adapter-base-sso');
-
-// NOTE: this is a temporary shim to ensure that Moya requires continue to work
-// until @tryghost/adapter-base-sso is published to NPM and Moya depends on it directly.
-module.exports = SSOBase;
diff --git a/ghost/core/core/server/data/migrations/versions/6.54/2026-07-23-10-24-18-add-automation-action-revision-to-redirects.js b/ghost/core/core/server/data/migrations/versions/6.54/2026-07-23-10-24-18-add-automation-action-revision-to-redirects.js
new file mode 100644
index 00000000000..6e736dcf73e
--- /dev/null
+++ b/ghost/core/core/server/data/migrations/versions/6.54/2026-07-23-10-24-18-add-automation-action-revision-to-redirects.js
@@ -0,0 +1,9 @@
+const {createAddColumnMigration} = require('../../utils');
+
+module.exports = createAddColumnMigration('redirects', 'automation_action_revision_id', {
+    type: 'string',
+    maxlength: 24,
+    nullable: true,
+    references: 'automation_action_revisions.id',
+    setNullDelete: true
+}, {algorithm: 'auto'});
diff --git a/ghost/core/core/server/data/schema/schema.js b/ghost/core/core/server/data/schema/schema.js
index 446f601ce49..dadc6031f75 100644
--- a/ghost/core/core/server/data/schema/schema.js
+++ b/ghost/core/core/server/data/schema/schema.js
@@ -1076,20 +1076,6 @@ module.exports = {
         metadata: {type: 'string', maxlength: 2000, nullable: true},
         queue_entry: {type: 'integer', nullable: true, unsigned: true}
     },
-    redirects: {
-        id: {type: 'string', maxlength: 24, nullable: false, primary: true},
-        from: {type: 'string', maxlength: 191, nullable: false, index: true},
-        to: {type: 'string', maxlength: 2000, nullable: false},
-        post_id: {type: 'string', maxlength: 24, nullable: true, unique: false, references: 'posts.id', setNullDelete: true},
-        created_at: {type: 'dateTime', nullable: false},
-        updated_at: {type: 'dateTime', nullable: true}
-    },
-    members_click_events: {
-        id: {type: 'string', maxlength: 24, nullable: false, primary: true},
-        member_id: {type: 'string', maxlength: 24, nullable: false, references: 'members.id', cascadeDelete: true},
-        redirect_id: {type: 'string', maxlength: 24, nullable: false, references: 'redirects.id', cascadeDelete: true},
-        created_at: {type: 'dateTime', nullable: false}
-    },
     members_feedback: {
         id: {type: 'string', maxlength: 24, nullable: false, primary: true},
         score: {type: 'integer', nullable: false, unsigned: true, defaultTo: 0},
@@ -1271,6 +1257,21 @@ module.exports = {
             ['created_at', 'action_id']
         ]
     },
+    redirects: {
+        id: {type: 'string', maxlength: 24, nullable: false, primary: true},
+        from: {type: 'string', maxlength: 191, nullable: false, index: true},
+        to: {type: 'string', maxlength: 2000, nullable: false},
+        post_id: {type: 'string', maxlength: 24, nullable: true, unique: false, references: 'posts.id', setNullDelete: true},
+        automation_action_revision_id: {type: 'string', maxlength: 24, nullable: true, references: 'automation_action_revisions.id', setNullDelete: true},
+        created_at: {type: 'dateTime', nullable: false},
+        updated_at: {type: 'dateTime', nullable: true}
+    },
+    members_click_events: {
+        id: {type: 'string', maxlength: 24, nullable: false, primary: true},
+        member_id: {type: 'string', maxlength: 24, nullable: false, references: 'members.id', cascadeDelete: true},
+        redirect_id: {type: 'string', maxlength: 24, nullable: false, references: 'redirects.id', cascadeDelete: true},
+        created_at: {type: 'dateTime', nullable: false}
+    },
     automation_action_edges: {
         source_action_id: {type: 'string', maxlength: 24, nullable: false, references: 'automation_actions.id', restrictDelete: true},
         target_action_id: {type: 'string', maxlength: 24, nullable: false, references: 'automation_actions.id', restrictDelete: true},
diff --git a/ghost/core/core/server/data/seeders/data-generator.js b/ghost/core/core/server/data/seeders/data-generator.js
index d4f13091e8e..39429223f66 100644
--- a/ghost/core/core/server/data/seeders/data-generator.js
+++ b/ghost/core/core/server/data/seeders/data-generator.js
@@ -59,8 +59,10 @@ class DataGenerator {
             table.dependencies = Object.entries(this.schemaTables[table.name]).reduce((acc, [_col, data]) => {
                 if (data.references) {
                     const referencedTable = data.references.split('.')[0];
-                    // The ghost_subscriptions_id property has a foreign key to the subscriptions table, but we don't use that table yet atm, so don't add it as a dependency
-                    if (!acc.includes(referencedTable) && referencedTable !== 'subscriptions') {
+                    // Some nullable relationships point to tables the generator does not populate.
+                    // Generated redirects belong to posts, so automation revisions are not a seed dependency.
+                    const isUnsupportedOptionalDependency = referencedTable === 'subscriptions' || (referencedTable === 'automation_action_revisions' && data.nullable);
+                    if (!acc.includes(referencedTable) && !isUnsupportedOptionalDependency) {
                         acc.push(referencedTable);
                     }
                 }
diff --git a/ghost/core/core/server/services/automations/automations-repository.ts b/ghost/core/core/server/services/automations/automations-repository.ts
index f19947fa521..46ac1219a5e 100644
--- a/ghost/core/core/server/services/automations/automations-repository.ts
+++ b/ghost/core/core/server/services/automations/automations-repository.ts
@@ -88,6 +88,7 @@ export type RecordEmailSentOptions = Readonly<{
     memberId: string;
     memberName: string | null;
     memberUuid: string;
+    trackClicks: boolean;
     trackOpens: boolean;
 }>;
 
diff --git a/ghost/core/core/server/services/automations/database-automations-repository.ts b/ghost/core/core/server/services/automations/database-automations-repository.ts
index 74bd1f5a816..e2dd58b707e 100644
--- a/ghost/core/core/server/services/automations/database-automations-repository.ts
+++ b/ghost/core/core/server/services/automations/database-automations-repository.ts
@@ -241,9 +241,8 @@ export function createDatabaseAutomationsRepository({
                     member_name: options.memberName,
                     automation_action_revision_id: options.automationActionRevisionId,
                     ...(options.mailgunMessageId ? {mailgun_message_id: options.mailgunMessageId} : {}),
+                    track_clicks: options.trackClicks,
                     track_opens: options.trackOpens,
-                    // TODO(NY-1491) Snapshot the email_track_clicks setting when creating recipients.
-                    track_clicks: false,
                     created_at: now,
                     updated_at: now
                 });
diff --git a/ghost/core/core/server/services/automations/poll.ts b/ghost/core/core/server/services/automations/poll.ts
index d0430e4d3de..8bf77248490 100644
--- a/ghost/core/core/server/services/automations/poll.ts
+++ b/ghost/core/core/server/services/automations/poll.ts
@@ -183,6 +183,7 @@ const processStep = async ({
                 break;
             }
             memberWelcomeEmailService.init();
+            const trackClicks = Boolean(settingsCache.get('email_track_clicks'));
             const trackOpens = Boolean(settingsCache.get('email_track_opens'));
             const sendResult = await memberWelcomeEmailService.api.sendAutomationEmail({
                 email: {
@@ -209,6 +210,7 @@ const processStep = async ({
                     memberId: step.member_id,
                     memberName: member.get('name'),
                     memberUuid: member.get('uuid'),
+                    trackClicks,
                     trackOpens: trackOpensForRecipient
                 });
             } catch (err) {
diff --git a/ghost/core/test/integration/services/email-analytics/automation-email-analytics.test.js b/ghost/core/test/integration/services/email-analytics/automation-email-analytics.test.js
index 8035c5c980e..92867405a9e 100644
--- a/ghost/core/test/integration/services/email-analytics/automation-email-analytics.test.js
+++ b/ghost/core/test/integration/services/email-analytics/automation-email-analytics.test.js
@@ -133,7 +133,7 @@ describe('Automation email analytics', function () {
         });
     }
 
-    async function recordEmailSent({revision, mailgunMessageId, trackOpens = true}) {
+    async function recordEmailSent({revision, mailgunMessageId, trackClicks = true, trackOpens = true}) {
         const member = await createMember();
         await automationsApi.recordEmailSent({
             automationActionRevisionId: revision.id,
@@ -142,6 +142,7 @@ describe('Automation email analytics', function () {
             memberId: member.id,
             memberName: member.name,
             memberUuid: member.uuid,
+            trackClicks,
             trackOpens
         });
         return await testUtils.knex('automated_email_recipients')
diff --git a/ghost/core/test/unit/server/data/schema/integrity.test.js b/ghost/core/test/unit/server/data/schema/integrity.test.js
index 0214a7b4c45..045bdf1fff7 100644
--- a/ghost/core/test/unit/server/data/schema/integrity.test.js
+++ b/ghost/core/test/unit/server/data/schema/integrity.test.js
@@ -35,7 +35,7 @@ const validateRouteSettings = require('../../../../../core/server/services/route
  */
 describe('DB version integrity', function () {
     // Only these variables should need updating
-    const currentSchemaHash = 'c9971ddc1b9d88d7078db1d421cdb6b4';
+    const currentSchemaHash = '34a2e4ccd25c04dc9c4eb90abed13494';
     const currentFixturesHash = '065b413e1d1f4f95fa7cb7734c5e7934';
     const currentSettingsHash = '397be8628c753b1959b8954d5610f83f';
     const currentRoutesHash = '3d180d52c663d173a6be791ef411ed01';
diff --git a/ghost/core/test/unit/server/services/automations/automations-repository.test.ts b/ghost/core/test/unit/server/services/automations/automations-repository.test.ts
index f9aa1029e03..161d0dbb9a6 100644
--- a/ghost/core/test/unit/server/services/automations/automations-repository.test.ts
+++ b/ghost/core/test/unit/server/services/automations/automations-repository.test.ts
@@ -1867,6 +1867,7 @@ describe('automations repository', function () {
                 memberId: 'member-id',
                 memberName: 'Test Member',
                 memberUuid: '00000000-0000-4000-8000-000000000001',
+                trackClicks: true,
                 trackOpens: true
             });
 
@@ -1882,8 +1883,8 @@ describe('automations repository', function () {
                 delivered_at: null,
                 opened_at: null,
                 clicked_at: null,
+                track_clicks: 1,
                 track_opens: 1,
-                track_clicks: 0,
                 created_at: recipient.created_at,
                 updated_at: recipient.updated_at
             });
@@ -1908,14 +1909,15 @@ describe('automations repository', function () {
                 memberId: 'member-id',
                 memberName: null,
                 memberUuid: '00000000-0000-4000-8000-000000000001',
+                trackClicks: false,
                 trackOpens: false
             });
 
             const recipient = await knex('automated_email_recipients').first();
             assert.equal(recipient.mailgun_message_id, null);
             assert.equal(recipient.member_name, null);
-            assert.equal(recipient.track_opens, 0);
             assert.equal(recipient.track_clicks, 0);
+            assert.equal(recipient.track_opens, 0);
         });
     });
 
diff --git a/ghost/core/test/unit/server/services/automations/poll.test.ts b/ghost/core/test/unit/server/services/automations/poll.test.ts
index 4b97bb2256f..aca1d0c8c1c 100644
--- a/ghost/core/test/unit/server/services/automations/poll.test.ts
+++ b/ghost/core/test/unit/server/services/automations/poll.test.ts
@@ -154,6 +154,7 @@ describe('automations poll', function () {
         };
 
         settingsCacheGet = sinon.stub(settingsCache, 'get');
+        settingsCacheGet.withArgs('email_track_clicks').returns(false);
         settingsCacheGet.withArgs('email_track_opens').returns(false);
         sinon.stub(Member, 'findOne').resolves(buildMember());
     });
@@ -368,6 +369,7 @@ describe('automations poll', function () {
             memberId: 'member-id',
             memberName: 'Test Member',
             memberUuid: '00000000-0000-4000-8000-000000000001',
+            trackClicks: false,
             trackOpens: false
         });
         sinon.assert.callOrder(
@@ -423,6 +425,30 @@ describe('automations poll', function () {
         sinon.assert.notCalled(scheduleAutomationEmailAnalyticsJob);
     });
 
+    it('snapshots enabled click tracking on the recipient', async function () {
+        const step = buildEmailStep();
+        automationsApi.fetchAndLockSteps.resolves({steps: [step], nextStepReadyAt: null});
+        settingsCacheGet.withArgs('email_track_clicks').returns(true);
+
+        await poll(options);
+
+        sinon.assert.calledOnceWithExactly(automationsApi.recordEmailSent, sinon.match({
+            trackClicks: true
+        }));
+    });
+
+    it('snapshots disabled click tracking on the recipient', async function () {
+        const step = buildEmailStep();
+        automationsApi.fetchAndLockSteps.resolves({steps: [step], nextStepReadyAt: null});
+        settingsCacheGet.withArgs('email_track_clicks').returns(false);
+
+        await poll(options);
+
+        sinon.assert.calledOnceWithExactly(automationsApi.recordEmailSent, sinon.match({
+            trackClicks: false
+        }));
+    });
+
     it('records the automated email recipient without a Mailgun message ID after an SMTP send', async function () {
         const step = buildEmailStep({
             automation_action_revision_id: 'revision-id'
@@ -445,6 +471,7 @@ describe('automations poll', function () {
             memberId: 'member-id',
             memberName: 'Test Member',
             memberUuid: '00000000-0000-4000-8000-000000000001',
+            trackClicks: false,
             trackOpens: false
         });
         sinon.assert.callOrder(