diff --git a/ghost/admin/app/components/custom-theme-settings/image.hbs b/ghost/admin/app/components/custom-theme-settings/image.hbs
index 71bd3ae357..7ac7dc62d5 100644
--- a/ghost/admin/app/components/custom-theme-settings/image.hbs
+++ b/ghost/admin/app/components/custom-theme-settings/image.hbs
@@ -4,7 +4,7 @@
         @onComplete={{this.imageUploaded}}
         as |uploader|
     >
-        <div class="{{if @setting.value "" "flex items-center justify-between"}}">
+        <div class="{{if @setting.value "" "flex flex-grow-1 items-center justify-between"}}">
             <div class="gh-setting-content">
                 <div class="gh-setting-title {{if @setting.value "gh-theme-setting-title"}}">{{humanize-setting-key @setting.key}}</div>
                 {{#each uploader.errors as |error|}}
diff --git a/ghost/admin/app/components/gh-nav-menu/design.hbs b/ghost/admin/app/components/gh-nav-menu/design.hbs
index d5c178335c..afc6e53368 100644
--- a/ghost/admin/app/components/gh-nav-menu/design.hbs
+++ b/ghost/admin/app/components/gh-nav-menu/design.hbs
@@ -7,8 +7,8 @@
             <LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo>
             {{#let (eq this.openSection "brand") as |isOpen|}}
                 <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}}>
-                    <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>
                     {{svg-jar "paintbrush"}}Brand
+                    <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
                 </button>
                 {{#liquid-if isOpen}}
                     <div class="gh-nav-design-settings">
@@ -22,8 +22,8 @@
             {{#each this.customThemeSettings.settingGroups as |group|}}
                 {{#let (eq this.openSection group.key) as |isOpen|}}
                     <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection group.key)}}>
-                        <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>
                         {{svg-jar group.icon}} {{group.name}}
+                        <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
                     </button>
 
                     {{#liquid-if isOpen}}
diff --git a/ghost/admin/app/components/settings/design/general-settings-form.hbs b/ghost/admin/app/components/settings/design/general-settings-form.hbs
index 50a6de0a24..fd06691058 100644
--- a/ghost/admin/app/components/settings/design/general-settings-form.hbs
+++ b/ghost/admin/app/components/settings/design/general-settings-form.hbs
@@ -107,33 +107,33 @@
             @onComplete={{fn this.imageUploaded "logo"}}
             as |uploader|
         >
-        <div>
-            <div class="gh-setting-title">Publication logo</div>
-            <div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>
+            <div>
+                <div class="gh-setting-title">Publication logo</div>
+                <div class="gh-setting-desc mb3">The primary logo, should be transparent and at least 600x72px</div>
 
-            <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
-                {{#each uploader.errors as |error|}}
-                    <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
-                {{/each}}
-                {{#if uploader.isUploading}}
-                    {{uploader.progressBar}}
-                {{else if this.settings.logo}}
-                    <div class="gh-branding-image-container largeimg justify-center transparent-bg">
-                        <img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
-                        <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.updateSetting "logo" null)}} data-test-delete-image="logo">
-                            {{svg-jar "trash" class="w4 h4 fill-white"}}
+                <div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
+                    {{#each uploader.errors as |error|}}
+                        <div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
+                    {{/each}}
+                    {{#if uploader.isUploading}}
+                        {{uploader.progressBar}}
+                    {{else if this.settings.logo}}
+                        <div class="gh-branding-image-container largeimg justify-center transparent-bg">
+                            <img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
+                            <button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.updateSetting "logo" null)}} data-test-delete-image="logo">
+                                {{svg-jar "trash" class="w4 h4 fill-white"}}
+                            </button>
+                        </div>
+                    {{else}}
+                        <button type="button" class="gh-btn gh-btn-white self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
+                            <span>Upload logo</span>
                         </button>
+                    {{/if}}
+                    <div style="display:none">
+                        <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
                     </div>
-                {{else}}
-                    <button type="button" class="gh-btn gh-btn-white self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
-                        <span>Upload logo</span>
-                    </button>
-                {{/if}}
-                <div style="display:none">
-                    <GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
                 </div>
             </div>
-        </div>
         </GhUploader>
     </div>
 
@@ -161,7 +161,7 @@
                         </button>
                     </div>
                 {{else}}
-                    <button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage">
+                    <button type="button" class="gh-btn gh-btn-white self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage">
                         <span>Upload cover</span>
                     </button>
                 {{/if}}
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index ac4d9ab087..3ecd1f9001 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1373,7 +1373,7 @@ p.theme-validation-details {
 /* ---------------------------------------------------- */
 
 .gh-nav-contextual {
-    flex: 0 0 400px;
+    flex: 0 0 420px;
 }
 
 .gh-nav-header {
@@ -1421,12 +1421,13 @@ p.theme-validation-details {
     display: flex;
     align-items: center;
     overflow: hidden;
-    margin-bottom: 4px;
-    padding: 8px var(--mainmenu-padding) 8px calc(var(--mainmenu-padding) + 7px);
+    margin: 0 16px 4px 16px;
+    padding: 8px 16px;
     color: var(--black);
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 1.3em;
+    border-radius: var(--border-radius);
 }
 
 .gh-nav-design .gh-nav-menu-title:hover {
@@ -1440,16 +1441,16 @@ p.theme-validation-details {
 
 .gh-nav-design-tab {
     display: flex;
+    flex-grow: 1;
     position: relative;
     align-items: center;
     box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
+    margin: 0 16px;
+    padding: 7px 16px;
     color: var(--darkgrey-l1);
     font-weight: 400;
     font-size: 1.45rem;
-    border-radius: 0;
+    border-radius: var(--border-radius);
     transition: none;
 }
 
@@ -1460,6 +1461,8 @@ p.theme-validation-details {
 .gh-nav-design-tab.active {
     color: var(--black);
     font-weight: 600;
+    background: var(--mainmenu-color-hover-bg);
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
 .gh-nav-bottom .gh-nav-design-tab {
@@ -1485,15 +1488,27 @@ p.theme-validation-details {
     font-weight: 400 !important;
 }
 
+.gh-nav-design .gh-nav-list {
+    display: flex;
+    flex-direction: column;
+}
+
 .gh-nav-design .gh-nav-list .active svg {
     fill: none;
 }
 
 .gh-nav-design .gh-nav-button-expand {
-    top: auto;
+    position: relative;
+    top: inherit;
+    left: inherit;
+    margin-left: auto;
     padding-top: 3px;
 }
 
+.gh-nav-design .gh-nav-button-expand svg {
+    margin-right: 0;
+}
+
 .gh-nav-design .gh-nav-bottom {
     padding: 40px 0;
 }
@@ -1509,13 +1524,10 @@ p.theme-validation-details {
 }
 
 .gh-nav-design-settings {
-    padding: 32px var(--mainmenu-padding) 16px calc(var(--mainmenu-padding) + 7px);
+    margin: 0 16px;
+    padding: 24px 16px 16px;
     background: var(--mainmenu-color-hover-bg);
-    border-radius: var(--border-radius);
-}
-
-.gh-nav-design .gh-stack-item {
-    flex-direction: column;
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 .gh-nav-design .gh-setting {
@@ -1632,6 +1644,17 @@ p.theme-validation-details {
     padding-bottom: 0;
 }
 
+.gh-advanced svg {
+    width: auto;
+    height: 6px;
+    margin-right: .6em;
+    fill: var(--darkgrey);
+}
+
+.gh-advanced svg path {
+    stroke: var(--darkgrey);
+}
+
 .gh-themes-container-labs {
     margin-bottom: 40px;
     background: var(--main-color-content-greybg);
@@ -1781,18 +1804,15 @@ p.theme-validation-details {
 
 .gh-theme-directory-footer-container {
     width: 100%;
-    background: var(--main-color-content-greybg);
+    border-top: 1px solid var(--main-color-area-divider)
 }
 
 
 .gh-theme-directory-footer {
     display: block;
-    max-width: var(--main-layout-content-maxwidth);
-    margin: 0 auto;
-    padding: var(--main-layout-content-sidepadding) 48px;
+    padding: 58px var(--main-layout-content-sidepadding);
     color: var(--darkgrey-l1);
     font-size: 1.6rem;
-    background: var(--main-color-content-greybg);
 }
 
 .gh-theme-directory-footer .link {
diff --git a/ghost/admin/app/templates/settings/design/change-theme.hbs b/ghost/admin/app/templates/settings/design/change-theme.hbs
index 64e7fbad15..83e0c6de4e 100644
--- a/ghost/admin/app/templates/settings/design/change-theme.hbs
+++ b/ghost/admin/app/templates/settings/design/change-theme.hbs
@@ -2,7 +2,7 @@
     <GhCanvasHeader class="gh-canvas-header">
         <h2 class="gh-canvas-title" data-test-screen-title>Themes</h2>
         <section class="view-actions">
-            <button type="button" class="mr4 gh-btn {{if this.showAdvanced "gh-btn-green"}}" {{on "click" this.toggleAdvanced}}><span>Advanced</span></button>
+            <button type="button" class="mr4 gh-btn gh-advanced " {{on "click" this.toggleAdvanced}}><span>{{svg-jar (if this.showAdvanced "arrow-up-small" "arrow-down-small")}}Advanced</span></button>
             <button type="button" class="gh-btn gh-btn-primary" {{on "click" this.startThemeUpload}}><span>Upload theme</span></button>
         </section>
     </GhCanvasHeader>