diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.stories.tsx
new file mode 100644
index 0000000000..951324adc0
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.stories.tsx
@@ -0,0 +1,27 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import MobileChrome from './MobileChrome';
+
+const meta = {
+    title: 'Global / Chrome / Mobile Chrome',
+    component: MobileChrome,
+    tags: ['autodocs'],
+    decorators: [(_story: any) => (<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/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.tsx
new file mode 100644
index 0000000000..1687f4c815
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/MobileChrome.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface MobileChromeProps {
+    children?: React.ReactNode;
+}
+
+const MobileChrome: React.FC<MobileChromeProps> = ({children}) => {
+    return (
+        <div className='flex h-[646px] w-[318px] flex-col rounded-3xl bg-white p-2 shadow-xl'>
+            <div className='w-100 h-100 grow overflow-auto rounded-2xl border border-grey-100'>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default MobileChrome;
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
index 3475a42c50..044da4e84c 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
@@ -1,9 +1,10 @@
 import ButtonGroup from './ButtonGroup';
 import DesktopChromeHeader from './DesktopChromeHeader';
 import Heading from './Heading';
+import MobileChrome from './MobileChrome';
 import Modal from './Modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
-import React from 'react';
+import React, {useState} from 'react';
 import URLSelect from './URLSelect';
 import {IButton} from './Button';
 import {SelectOption} from './Select';
@@ -52,6 +53,16 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     const modal = useModal();
     let buttons: IButton[] = [];
 
+    const [view, setView] = useState('desktop');
+
+    if (view === 'mobile') {
+        preview = (
+            <MobileChrome>
+                {preview}
+            </MobileChrome>
+        );
+    }
+
     if (previewToolbar) {
         let toolbarCenter = (<></>);
         if (previewToolbarURLs) {
@@ -60,6 +71,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
             );
         }
 
+        const unSelectedIconColorClass = 'text-grey-500';
         const toolbarRight = (
             <ButtonGroup
                 buttons={[
@@ -67,14 +79,19 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                         icon: 'laptop',
                         link: true,
                         size: 'sm',
-                        onClick: onSelectDesktopView
+                        iconColorClass: (view === 'desktop' ? 'text-black' : unSelectedIconColorClass),
+                        onClick: onSelectDesktopView || (() => {
+                            setView('desktop');
+                        })
                     },
                     {
                         icon: 'mobile',
                         link: true,
                         size: 'sm',
-                        iconColorClass: 'text-grey-500',
-                        onClick: onSelectMobileView
+                        iconColorClass: (view === 'mobile' ? 'text-black' : unSelectedIconColorClass),
+                        onClick: onSelectMobileView || (() => {
+                            setView('mobile');
+                        })
                     }
                 ]}
             />