diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Button.tsx b/apps/admin-x-settings/src/admin-x-ds/global/Button.tsx
index 3540ac0213..3ffe39e57f 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/Button.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/Button.tsx
@@ -16,6 +16,7 @@ export interface ButtonProps {
     link?: boolean;
     disabled?: boolean;
     className?: string;
+    tag?: string;
     onClick?: () => void;
 }
 
@@ -29,8 +30,9 @@ const Button: React.FC<ButtonProps> = ({
     fullWidth,
     link,
     disabled,
-    onClick,
     className = '',
+    tag = 'button',
+    onClick,
     ...props
 }) => {
     if (!color) {
@@ -68,18 +70,17 @@ const Button: React.FC<ButtonProps> = ({
     styles += (disabled) ? ' opacity-40' : ' cursor-pointer';
     styles += ` ${className}`;
 
-    return (
-        <button
-            className={styles}
-            disabled={disabled}
-            type="button"
-            onClick={onClick}
-            {...props}
-        >
-            {icon && <Icon colorClass={iconColorClass} name={icon} size={size === 'sm' ? 'sm' : 'md'} />}
-            {(label && hideLabel) ? <span className="sr-only">{label}</span> : label}
-        </button>
-    );
+    const buttonChildren = <>
+        {icon && <Icon colorClass={iconColorClass} name={icon} size={size === 'sm' ? 'sm' : 'md'} />}
+        {(label && hideLabel) ? <span className="sr-only">{label}</span> : label}
+    </>;
+    const buttonElement = React.createElement(tag, {className: styles,
+        disabled: disabled,
+        type: 'button',
+        onClick: onClick,
+        ...props}, buttonChildren);
+
+    return buttonElement;
 };
 
 export default Button;
diff --git a/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx b/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
index 6dcb368f93..fc72c4a6ee 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx
@@ -119,7 +119,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
                     height: (unstyled ? '' : height)
                 }
             } unstyled={unstyled} onUpload={onUpload}>
-                {children}
+                <span>{children}</span>
             </FileUpload>
         );
     }
diff --git a/apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx b/apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
index 1c17502c6e..54ebf9bc0e 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/modal/Modal.tsx
@@ -133,7 +133,7 @@ const Modal: React.FC<ModalProps> = ({
 
     case 'full':
         modalClasses += ' h-full ';
-        backdropClasses += ' p-[2vmin]';
+        backdropClasses += ' p-[3vmin]';
         padding = 'p-10';
         break;
 
@@ -206,7 +206,7 @@ const Modal: React.FC<ModalProps> = ({
         <div className={backdropClasses} id='modal-backdrop' onClick={handleBackdropClick}>
             <div className={clsx(
                 'pointer-events-none fixed inset-0 z-0',
-                backDrop && 'bg-[rgba(98,109,121,0.15)] backdrop-blur-[3px]'
+                backDrop && 'bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]'
             )}></div>
             <section className={modalClasses} data-testid={testId} style={modalStyles}>
                 <div className={contentClasses}>
diff --git a/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx b/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
index 604e4dfffe..236e8e692a 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
@@ -33,6 +33,7 @@ export interface PreviewModalProps {
     sidebarButtons?: React.ReactNode;
     sidebarHeader?: React.ReactNode;
     sidebarPadding?: boolean;
+    sidebarContentClasses?: string;
 
     onCancel?: () => void;
     onOk?: () => void;
@@ -63,6 +64,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     sidebarButtons,
     sidebarHeader,
     sidebarPadding = true,
+    sidebarContentClasses,
 
     onCancel,
     onOk,
@@ -189,14 +191,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                     {preview}
                 </div>
                 {sidebar &&
-                    <div className='flex h-full basis-[400px] flex-col border-l border-grey-100'>
+                    <div className='relative flex h-full basis-[400px] flex-col border-l border-grey-100'>
                         {sidebarHeader ? sidebarHeader : (
                             <div className='flex max-h-[74px] items-start justify-between gap-3 px-7 py-5'>
                                 <Heading className='mt-1' level={4}>{title}</Heading>
                                 {sidebarButtons ? sidebarButtons : <ButtonGroup buttons={buttons} /> }
                             </div>
                         )}
-                        <div className={`grow ${sidebarPadding && 'p-7 pt-0'} flex flex-col justify-between overflow-y-auto`}>
+                        <div className={`${!sidebarHeader ? 'absolute inset-x-0 bottom-0 top-[74px] grow' : ''} ${sidebarPadding && 'p-7 pt-0'} flex flex-col justify-between overflow-y-auto ${sidebarContentClasses}`}>
                             {sidebar}
                         </div>
                     </div>
diff --git a/apps/admin-x-settings/src/components/Sidebar.tsx b/apps/admin-x-settings/src/components/Sidebar.tsx
index 560a5c781a..a83aeb64d8 100644
--- a/apps/admin-x-settings/src/components/Sidebar.tsx
+++ b/apps/admin-x-settings/src/components/Sidebar.tsx
@@ -34,8 +34,8 @@ const Sidebar: React.FC = () => {
             </SettingNavSection>
 
             <SettingNavSection title="Site">
-                <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} />
-                <SettingNavItem navid='branding-and-design' title="Branding and design" onClick={handleSectionClick} />
+                {/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
+                <SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
                 <SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
             </SettingNavSection>
 
diff --git a/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx b/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
index 16b2c50080..7d3a1fec23 100644
--- a/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
+++ b/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
@@ -41,9 +41,9 @@ function handleNavigation() {
     const pathName = getHashPath(hash);
 
     if (pathName) {
-        if (pathName === 'themes/manage') {
+        if (pathName === 'design/edit/themes') {
             NiceModal.show(ChangeThemeModal);
-        } else if (pathName === 'branding-and-design/edit') {
+        } else if (pathName === 'design/edit') {
             NiceModal.show(DesignModal);
         } else if (pathName === 'navigation/edit') {
             NiceModal.show(NavigationModal);
diff --git a/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx b/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
index 37d2fd26ea..75dd59d0d2 100644
--- a/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
@@ -101,6 +101,7 @@ const PortalModal: React.FC = () => {
     return <PreviewModalContent
         deviceSelector={selectedPreviewTab !== 'links'}
         dirty={saveState === 'unsaved'}
+        okLabel='Save & close'
         preview={preview}
         previewToolbarTabs={previewTabs}
         selectedURL={selectedPreviewTab}
diff --git a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
index c3c6599bcc..2186d3afee 100644
--- a/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/DesignModal.tsx
@@ -1,6 +1,10 @@
 import BrandSettings, {BrandSettingValues} from './designAndBranding/BrandSettings';
-import NiceModal, {useModal} from '@ebay/nice-modal-react';
+// import Button from '../../../admin-x-ds/global/Button';
+// import ChangeThemeModal from './ThemeModal';
+import Icon from '../../../admin-x-ds/global/Icon';
+import NiceModal, {NiceModalHandler, useModal} from '@ebay/nice-modal-react';
 import React, {useContext, useEffect, useState} from 'react';
+import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
 import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
 import ThemePreview from './designAndBranding/ThemePreview';
 import ThemeSettings from './designAndBranding/ThemeSettings';
@@ -14,17 +18,22 @@ import {getHomepageUrl, getSettingValues} from '../../../utils/helpers';
 
 const Sidebar: React.FC<{
     brandSettings: BrandSettingValues
-    updateBrandSetting: (key: string, value: SettingValue) => void
     themeSettingSections: Array<{id: string, title: string, settings: CustomThemeSetting[]}>
+    modal: NiceModalHandler<Record<string, unknown>>;
+    updateBrandSetting: (key: string, value: SettingValue) => void
     updateThemeSetting: (updated: CustomThemeSetting) => void
     onTabChange: (id: string) => void
+    handleSave: () => Promise<void>
 }> = ({
     brandSettings,
-    updateBrandSetting,
     themeSettingSections,
+    modal,
+    updateBrandSetting,
     updateThemeSetting,
-    onTabChange
+    onTabChange,
+    handleSave
 }) => {
+    const {updateRoute} = useRouting();
     const [selectedTab, setSelectedTab] = useState('brand');
 
     const tabs: Tab[] = [
@@ -46,11 +55,23 @@ const Sidebar: React.FC<{
     };
 
     return (
-        <>
+        <div className='flex h-full flex-col justify-between'>
             <div className='p-7' data-testid="design-setting-tabs">
                 <TabView selectedTab={selectedTab} tabs={tabs} onTabChange={handleTabChange} />
             </div>
-        </>
+            <StickyFooter height={74}>
+                <div className='w-full px-7'>
+                    <button className='group flex w-full items-center justify-between text-sm font-medium opacity-80 transition-all hover:opacity-100' data-testid='change-theme' type='button' onClick={async () => {
+                        await handleSave();
+                        modal.remove();
+                        updateRoute('design/edit/themes');
+                    }}>
+                        Change theme
+                        <Icon className='mr-2 transition-all group-hover:translate-x-2' name='chevron-right' size='sm' />
+                    </button>
+                </div>
+            </StickyFooter>
+        </div>
     );
 };
 
@@ -178,6 +199,8 @@ const DesignModal: React.FC = () => {
     const sidebarContent =
         <Sidebar
             brandSettings={{description, accentColor, icon, logo, coverImage}}
+            handleSave={handleSave}
+            modal={modal}
             themeSettingSections={themeSettingSections}
             updateBrandSetting={updateBrandSetting}
             updateThemeSetting={updateThemeSetting}
@@ -186,12 +209,12 @@ const DesignModal: React.FC = () => {
 
     return <PreviewModalContent
         afterClose={() => {
-            updateRoute('branding-and-design');
+            updateRoute('design');
         }}
         buttonsDisabled={saveState === 'saving'}
         defaultTab='homepage'
         dirty={saveState === 'unsaved'}
-        okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save and close')}
+        okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save & close')}
         preview={previewContent}
         previewToolbarTabs={previewTabs}
         selectedURL={selectedPreviewTab}
@@ -203,7 +226,7 @@ const DesignModal: React.FC = () => {
         onOk={async () => {
             await handleSave();
             modal.remove();
-            updateRoute('branding-and-design');
+            updateRoute('design');
         }}
         onSelectURL={onSelectURL}
     />;
diff --git a/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx b/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
index 5415dedcf9..4fd141f778 100644
--- a/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/DesignSetting.tsx
@@ -6,7 +6,7 @@ import useRouting from '../../../hooks/useRouting';
 const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
     const {updateRoute} = useRouting();
     const openPreviewModal = () => {
-        updateRoute('branding-and-design/edit');
+        updateRoute('design/edit');
     };
 
     return (
@@ -14,7 +14,7 @@ const DesignSetting: React.FC<{ keywords: string[] }> = ({keywords}) => {
             customButtons={<Button color='green' label='Customize' link onClick={openPreviewModal}/>}
             description="Customize the look and feel of your site"
             keywords={keywords}
-            navid='branding-and-design'
+            navid='design'
             testId='design'
             title="Branding and design"
         />
diff --git a/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx b/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
index e368547fa2..9e26e437cc 100644
--- a/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
@@ -2,7 +2,7 @@ import DesignSetting from './DesignSetting';
 import Navigation from './Navigation';
 import React from 'react';
 import SettingSection from '../../../admin-x-ds/settings/SettingSection';
-import Theme from './Theme';
+// import Theme from './Theme';
 
 const searchKeywords = {
     theme: ['themes', 'design', 'appearance', 'style'],
@@ -14,7 +14,7 @@ const SiteSettings: React.FC = () => {
     return (
         <>
             <SettingSection keywords={Object.values(searchKeywords).flat()} title="Site">
-                <Theme keywords={searchKeywords.theme} />
+                {/* <Theme keywords={searchKeywords.theme} /> */}
                 <DesignSetting keywords={searchKeywords.design} />
                 <Navigation keywords={searchKeywords.navigation} />
             </SettingSection>
diff --git a/apps/admin-x-settings/src/components/settings/site/Theme.tsx b/apps/admin-x-settings/src/components/settings/site/Theme.tsx
index 5f944daf79..1a54fd2bfd 100644
--- a/apps/admin-x-settings/src/components/settings/site/Theme.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/Theme.tsx
@@ -8,7 +8,7 @@ const Theme: React.FC<{ keywords: string[] }> = ({keywords}) => {
     return (
         <SettingGroup
             customButtons={<Button color='green' label='Manage themes' link onClick={() => {
-                updateRoute('themes/manage');
+                updateRoute('design/edit/themes');
             }}/>}
             description="Change or upload themes"
             keywords={keywords}
diff --git a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
index 2f2b14a8b9..235d48069c 100644
--- a/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx
@@ -1,4 +1,5 @@
 import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
+import Breadcrumbs from '../../../admin-x-ds/global/Breadcrumbs';
 import Button from '../../../admin-x-ds/global/Button';
 import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
 import FileUpload from '../../../admin-x-ds/global/form/FileUpload';
@@ -52,11 +53,13 @@ function addThemeToList(theme: Theme, themes: Theme[]): Theme[] {
 async function handleThemeUpload({
     api,
     file,
-    setThemes
+    setThemes,
+    onActivate
 }: {
     api: API;
     file: File;
-    setThemes: React.Dispatch<React.SetStateAction<Theme[]>>
+    setThemes: React.Dispatch<React.SetStateAction<Theme[]>>;
+    onActivate?: () => void
 }) {
     const data = await api.themes.upload({file});
     const uploadedTheme = data.themes[0];
@@ -97,7 +100,8 @@ async function handleThemeUpload({
         title,
         prompt,
         installedTheme: uploadedTheme,
-        setThemes
+        setThemes,
+        onActivate: onActivate
     });
 }
 
@@ -110,55 +114,68 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
 }) => {
     const {updateRoute} = useRouting();
     const api = useApi();
+
+    const onClose = () => {
+        updateRoute('design/edit');
+        modal.remove();
+    };
+
     const left =
-        <TabView
-            border={false}
-            selectedTab={currentTab}
-            tabs={[
-                {id: 'official', title: 'Official themes'},
-                {id: 'installed', title: 'Installed'}
+        <Breadcrumbs
+            items={[
+                {label: 'Design', onClick: onClose},
+                {label: 'Change theme'}
             ]}
-            onTabChange={(id: string) => {
-                setCurrentTab(id);
-            }} />;
+            backIcon
+            onBack={onClose}
+        />;
 
     const right =
-        <div className='flex items-center gap-3'>
-            <FileUpload id='theme-uplaod' onUpload={async (file: File) => {
-                const themeFileName = file?.name.replace(/\.zip$/, '');
-                const existingThemeNames = themes.map(t => t.name);
-                if (existingThemeNames.includes(themeFileName)) {
-                    NiceModal.show(ConfirmationModal, {
-                        title: 'Overwrite theme',
-                        prompt: (
-                            <>
-                                The theme <strong>{themeFileName}</strong> already exists.
-                                Do you want to overwrite it?
-                            </>
-                        ),
-                        okLabel: 'Overwrite',
-                        cancelLabel: 'Cancel',
-                        okRunningLabel: 'Overwriting...',
-                        okColor: 'red',
-                        onOk: async (confirmModal) => {
-                            await handleThemeUpload({api, file, setThemes});
-                            setCurrentTab('installed');
-                            confirmModal?.remove();
-                        }
-                    });
-                } else {
-                    setCurrentTab('installed');
-                    handleThemeUpload({api, file, setThemes});
-                }
-            }}>Upload theme</FileUpload>
-            <Button
-                className='min-w-[75px]'
-                color='black'
-                label='OK'
-                onClick = {() => {
-                    updateRoute('theme');
-                    modal.remove();
+        <div className='flex items-center gap-14'>
+            <TabView
+                border={false}
+                selectedTab={currentTab}
+                tabs={[
+                    {id: 'official', title: 'Official themes'},
+                    {id: 'installed', title: 'Installed'}
+                ]}
+                onTabChange={(id: string) => {
+                    setCurrentTab(id);
                 }} />
+            <div className='flex items-center gap-3'>
+                <FileUpload id='theme-uplaod' onUpload={async (file: File) => {
+                    const themeFileName = file?.name.replace(/\.zip$/, '');
+                    const existingThemeNames = themes.map(t => t.name);
+                    if (existingThemeNames.includes(themeFileName)) {
+                        NiceModal.show(ConfirmationModal, {
+                            title: 'Overwrite theme',
+                            prompt: (
+                                <>
+                                    The theme <strong>{themeFileName}</strong> already exists.
+                                    Do you want to overwrite it?
+                                </>
+                            ),
+                            okLabel: 'Overwrite',
+                            cancelLabel: 'Cancel',
+                            okRunningLabel: 'Overwriting...',
+                            okColor: 'red',
+                            onOk: async (confirmModal) => {
+                                await handleThemeUpload({api, file, setThemes, onActivate: onClose});
+                                setCurrentTab('installed');
+                                confirmModal?.remove();
+                            }
+                        });
+                    } else {
+                        setCurrentTab('installed');
+                        handleThemeUpload({api, file, setThemes, onActivate: onClose});
+                    }
+                }}>
+                    <Button color='black' label='Upload theme' tag='div' />
+                </FileUpload>
+                {/* <Button color='black' label='Save & Close' onClick={() => {
+                    modal.remove();
+                }} /> */}
+            </div>
         </div>;
 
     return <PageHeader containerClassName='bg-white' left={left} right={right} />;
@@ -248,7 +265,11 @@ const ChangeThemeModal = NiceModal.create(() => {
                 title,
                 prompt,
                 installedTheme: newlyInstalledTheme,
-                setThemes
+                setThemes,
+                onActivate: () => {
+                    updateRoute('design/edit');
+                    modal.remove();
+                }
             });
         };
     }
@@ -256,7 +277,7 @@ const ChangeThemeModal = NiceModal.create(() => {
     return (
         <Modal
             afterClose={() => {
-                updateRoute('theme');
+                updateRoute('design/edit');
             }}
             cancelLabel=''
             footer={false}
@@ -277,6 +298,10 @@ const ChangeThemeModal = NiceModal.create(() => {
                             onBack={() => {
                                 setSelectedTheme(null);
                             }}
+                            onClose={() => {
+                                updateRoute('design/edit');
+                                modal.remove();
+                            }}
                             onInstall={onInstall} />
                     }
                     <ThemeToolbar
diff --git a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
index 378374c2dc..a7427cc12d 100644
--- a/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
@@ -71,7 +71,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
                     <ImageUpload
                         deleteButtonClassName='!top-1 !right-1'
                         height='80px'
-                        id='logo'
+                        id='site-logo'
                         imageBWCheckedBg={true}
                         imageFit='contain'
                         imageURL={values.logo || ''}
@@ -84,7 +84,7 @@ const BrandSettings: React.FC<{ values: BrandSettingValues, updateSetting: (key:
                     </ImageUpload>
                 </div>
                 <div>
-                    <Heading className='mb-2' level={6}>Publication cover</Heading>
+                    <Heading className='mb-2' grey={(values.coverImage ? true : false)} level={6}>Publication cover</Heading>
                     <ImageUpload
                         deleteButtonClassName='!top-1 !right-1'
                         height='180px'
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx b/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx
index 26219d05f7..f096ba7e67 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/ThemeInstalledModal.tsx
@@ -13,22 +13,28 @@ const ThemeProblemView = ({problem}:{problem: ThemeProblem}) => {
     const [isExpanded, setExpanded] = useState(false);
 
     return <ListItem
-        action={<Button color="green" label={isExpanded ? 'Collapse' : 'Expand'} link onClick={() => setExpanded(!isExpanded)} />}
-        detail={
-            isExpanded ?
-                <>
-                    <div dangerouslySetInnerHTML={{__html: problem.details}} />
-                    <Heading level={6}>Affected files:</Heading>
-                    <ul>
-                        {problem.failures.map(failure => <li><code>{failure.ref}</code>{failure.message ? `: ${failure.message}` : ''}</li>)}
-                    </ul>
-                </> :
-                null
+        title={
+            <>
+                <div className={`${problem.level === 'error' ? 'before:bg-red' : 'before:bg-yellow'} relative px-4 text-sm before:absolute before:left-0 before:top-1.5 before:block before:h-2 before:w-2 before:rounded-full before:content-['']`}>
+                    <strong>{problem.level === 'error' ? 'Error: ' : 'Warning: '}</strong>
+                    <span dangerouslySetInnerHTML={{__html: problem.rule}} />
+                    <div className='absolute -right-4 top-1'>
+                        <Button color="green" icon={isExpanded ? 'chevron-down' : 'chevron-right'} iconColorClass='text-grey-700' size='sm' link onClick={() => setExpanded(!isExpanded)} />
+                    </div>
+                </div>
+                {
+                    isExpanded ?
+                        <div className='mt-2 px-4 text-[13px] leading-8'>
+                            <div dangerouslySetInnerHTML={{__html: problem.details}} className='mb-4' />
+                            <Heading level={6}>Affected files:</Heading>
+                            <ul className='mt-1'>
+                                {problem.failures.map(failure => <li><code>{failure.ref}</code>{failure.message ? `: ${failure.message}` : ''}</li>)}
+                            </ul>
+                        </div> :
+                        null
+                }
+            </>
         }
-        title={<>
-            <strong>{problem.level === 'error' ? 'Error: ' : 'Warning: '}</strong>
-            <span dangerouslySetInnerHTML={{__html: problem.rule}} />
-        </>}
         hideActions
         separator
     />;
@@ -39,7 +45,8 @@ const ThemeInstalledModal: React.FC<{
     prompt: ReactNode
     installedTheme: InstalledTheme;
     setThemes: (callback: (themes: Theme[]) => Theme[]) => void;
-}> = ({title, prompt, installedTheme, setThemes}) => {
+    onActivate?: () => void;
+}> = ({title, prompt, installedTheme, setThemes, onActivate}) => {
     const api = useApi();
 
     let errorPrompt = null;
@@ -53,7 +60,7 @@ const ThemeInstalledModal: React.FC<{
 
     let warningPrompt = null;
     if (installedTheme.warnings) {
-        warningPrompt = <div className="mt-6">
+        warningPrompt = <div className="mt-10">
             <List title="Warnings">
                 {installedTheme.warnings?.map(warning => <ThemeProblemView problem={warning} />)}
             </List>
@@ -101,6 +108,7 @@ const ThemeInstalledModal: React.FC<{
                     message: `${updatedTheme.name} is now your active theme.`
                 });
             }
+            onActivate?.();
             activateModal?.remove();
         }}
     />;
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx b/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
index 7d42d0d5ce..019e23ba86 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
@@ -11,17 +11,19 @@ import {Theme} from '../../../../types/api';
 
 const ThemePreview: React.FC<{
     selectedTheme?: OfficialTheme;
-    onBack: () => void;
     isInstalling?: boolean;
     installedTheme?: Theme;
     installButtonLabel?: string;
+    onBack: () => void;
+    onClose: () => void;
     onInstall?: () => void | Promise<void>;
 }> = ({
     selectedTheme,
-    onBack,
     isInstalling,
     installedTheme,
     installButtonLabel,
+    onBack,
+    onClose,
     onInstall
 }) => {
     const [previewMode, setPreviewMode] = useState('desktop');
@@ -57,7 +59,8 @@ const ThemePreview: React.FC<{
         <div className='flex items-center gap-2'>
             <Breadcrumbs
                 items={[
-                    {label: 'Official themes', onClick: onBack},
+                    {label: 'Design', onClick: onClose},
+                    {label: 'Change theme', onClick: onBack},
                     {label: selectedTheme.name}
                 ]}
                 backIcon
diff --git a/apps/admin-x-settings/test/e2e/search.test.ts b/apps/admin-x-settings/test/e2e/search.test.ts
index 0a1217076c..1408d91231 100644
--- a/apps/admin-x-settings/test/e2e/search.test.ts
+++ b/apps/admin-x-settings/test/e2e/search.test.ts
@@ -9,14 +9,14 @@ test.describe('Search', async () => {
 
         const searchBar = page.getByLabel('Search');
 
-        await searchBar.fill('theme');
+        await searchBar.fill('design');
 
-        await expect(page.getByTestId('theme')).toBeVisible();
+        await expect(page.getByTestId('design')).toBeVisible();
         await expect(page.getByTestId('title-and-description')).not.toBeVisible();
 
         await searchBar.fill('title');
 
-        await expect(page.getByTestId('theme')).not.toBeVisible();
+        await expect(page.getByTestId('design')).not.toBeVisible();
         await expect(page.getByTestId('title-and-description')).toBeVisible();
     });
 });
diff --git a/apps/admin-x-settings/test/e2e/site/theme.test.ts b/apps/admin-x-settings/test/e2e/site/theme.test.ts
index aebe601b81..74bf88d11b 100644
--- a/apps/admin-x-settings/test/e2e/site/theme.test.ts
+++ b/apps/admin-x-settings/test/e2e/site/theme.test.ts
@@ -26,13 +26,17 @@ test.describe('Theme settings', async () => {
 
         await page.goto('/');
 
-        const section = page.getByTestId('theme');
+        const designSection = page.getByTestId('design');
 
-        await section.getByRole('button', {name: 'Manage themes'}).click();
+        await designSection.getByRole('button', {name: 'Customize'}).click();
+
+        const designModal = page.getByTestId('design-modal');
+
+        await designModal.getByTestId('change-theme').click();
 
         const modal = page.getByTestId('theme-modal');
 
-        // The default theme is always considered "installed"
+        // // The default theme is always considered "installed"
 
         await modal.getByRole('button', {name: /Casper/}).click();
 
@@ -40,7 +44,7 @@ test.describe('Theme settings', async () => {
 
         await expect(page.locator('iframe[title="Theme preview"]')).toHaveAttribute('src', 'https://demo.ghost.io/');
 
-        await modal.getByRole('button', {name: 'Official themes'}).click();
+        await modal.getByRole('button', {name: 'Change theme'}).click();
 
         // Try installing another theme
 
@@ -71,9 +75,13 @@ test.describe('Theme settings', async () => {
 
         await page.goto('/');
 
-        const section = page.getByTestId('theme');
+        const designSection = page.getByTestId('design');
 
-        await section.getByRole('button', {name: 'Manage themes'}).click();
+        await designSection.getByRole('button', {name: 'Customize'}).click();
+
+        const designModal = page.getByTestId('design-modal');
+
+        await designModal.getByTestId('change-theme').click();
 
         const modal = page.getByTestId('theme-modal');