diff --git a/ghost/admin-x-settings/src/App.tsx b/ghost/admin-x-settings/src/App.tsx
index 2573eeaf8d..e1ef1b2e55 100644
--- a/ghost/admin-x-settings/src/App.tsx
+++ b/ghost/admin-x-settings/src/App.tsx
@@ -16,10 +16,12 @@ function App() {
 
                 {/* Sidebar */}
                 <div className="relative min-w-[240px] grow-0 md:fixed md:top-[8vmin] md:basis-[240px]">
-                    <div className='h-[60px]'>
+                    <div className='h-[84px]'>
                         <Heading>Settings</Heading>
                     </div>
-                    <Sidebar />
+                    <div className="relative mt-[-32px] w-[240px] overflow-x-hidden after:absolute after:inset-x-0 after:top-0 after:block after:h-[40px] after:bg-gradient-to-b after:from-white after:to-transparent after:content-['']">
+                        <Sidebar />
+                    </div>
                 </div>
                 <div className="flex-auto pt-[3vmin] md:ml-[280px] md:pt-[84px]">
                     <SettingsProvider>
diff --git a/ghost/admin-x-settings/src/components/Sidebar.tsx b/ghost/admin-x-settings/src/components/Sidebar.tsx
index 379e24ad3a..661b1497c4 100644
--- a/ghost/admin-x-settings/src/components/Sidebar.tsx
+++ b/ghost/admin-x-settings/src/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import SettingNavSection from '../admin-x-ds/settings/SettingNavSection';
 
 const Sidebar: React.FC = () => {
     return (
-        <div className="mt-6 hidden md:!visible md:!block md:h-[calc(100vh-8vmin-84px)] md:overflow-y-scroll">
+        <div className="hidden md:!visible md:!block md:h-[calc(100vh-8vmin-84px)] md:w-[300px] md:overflow-y-scroll md:pt-[32px]">
             <SettingNavSection title="General">
                 <SettingNavItem title="Title and description" />
                 <SettingNavItem title="Timezone" />