diff --git a/apps/admin-x-settings/src/components/settings/general/Metadata.tsx b/apps/admin-x-settings/src/components/settings/general/Metadata.tsx
index b508cdee5f..79cef8d418 100644
--- a/apps/admin-x-settings/src/components/settings/general/Metadata.tsx
+++ b/apps/admin-x-settings/src/components/settings/general/Metadata.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import TopLevelGroup from '../../TopLevelGroup';
 import useSettingGroup from '../../../hooks/useSettingGroup';
-import {GoogleLogo, Heading, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
+import {GoogleLogo, Icon, SettingGroupContent, TextField, withErrorBoundary} from '@tryghost/admin-x-design-system';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
 
 interface SearchEnginePreviewProps {
@@ -22,32 +22,35 @@ const SearchEnginePreview: React.FC<SearchEnginePreviewProps> = ({
 
     return (
         <div>
-            <Heading grey={true} level={6}>Search engine result preview</Heading>
-            <div className='mt-3 flex items-center'>
-                <div className='basis-'>
-                    <GoogleLogo className='mr-7 h-7' />
-                </div>
-                <div className='grow'>
-                    <div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow dark:bg-grey-900'>
-                        <Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
+            <div className='-mx-5 -mb-5 overflow-hidden rounded-b-xl bg-grey-50 px-5 pt-5 dark:bg-grey-950 md:-mx-7 md:-mb-7 md:px-7 md:pt-7'>
+                <div className='rounded-t-sm bg-white px-5 py-3 shadow-lg dark:bg-grey-975'>
+                    <div className='mt-3 flex items-center'>
+                        <div className='basis-'>
+                            <GoogleLogo className='mr-7 h-7' />
+                        </div>
+                        <div className='grow'>
+                            <div className='flex w-full items-center justify-end rounded-full bg-white p-3 px-4 shadow dark:bg-grey-900'>
+                                <Icon className='stroke-[2px] text-blue-600' name='magnifying-glass' size='sm' />
+                            </div>
+                        </div>
+                    </div>
+                    <div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4 dark:border-grey-900'>
+                        <div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200 dark:bg-grey-700' style={{
+                            backgroundImage: icon ? `url(${icon})` : 'none',
+                            backgroundSize: 'contain'
+                        }}>
+                        </div>
+                        <div className='flex flex-col text-sm'>
+                            <span>{siteDomain}</span>
+                            <span className='-mt-0.5 inline-block text-xs text-grey-600'>{siteUrl}</span>
+                        </div>
+                    </div>
+                    <div className='mt-1 flex flex-col'>
+                        <span className='text-lg text-[#1a0dab] dark:text-blue'>{title}</span>
+                        <span className='text-sm text-grey-900 dark:text-grey-700'>{description}</span>
                     </div>
                 </div>
             </div>
-            <div className='mt-4 flex items-center gap-2 border-t border-grey-200 pt-4 dark:border-grey-900'>
-                <div className='flex h-7 w-7 items-center justify-center rounded-full bg-grey-200 dark:bg-grey-700' style={{
-                    backgroundImage: icon ? `url(${icon})` : 'none',
-                    backgroundSize: 'contain'
-                }}>
-                </div>
-                <div className='flex flex-col text-sm'>
-                    <span>{siteDomain}</span>
-                    <span className='-mt-0.5 inline-block text-xs text-grey-600'>{siteUrl}</span>
-                </div>
-            </div>
-            <div className='mt-1 flex flex-col'>
-                <span className='text-lg text-[#1a0dab] dark:text-blue'>{title}</span>
-                <span className='text-sm text-grey-900 dark:text-grey-700'>{description}</span>
-            </div>
         </div>
     );
 };
@@ -108,7 +111,7 @@ const Metadata: React.FC<{ keywords: string[] }> = ({keywords}) => {
             onEditingChange={handleEditingChange}
             onSave={handleSave}
         >
-            {isEditing &&
+            {!isEditing &&
             <>
                 <SearchEnginePreview
                     description={metaDescription ? metaDescription : siteDescription}
@@ -116,6 +119,10 @@ const Metadata: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     title={metaTitle ? metaTitle : siteTitle}
                     url={siteData?.url}
                 />
+            </>
+            }
+            {isEditing &&
+            <>
                 {inputFields}
             </>
             }