diff --git a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
index 0115bed68f..c6f1ab932d 100644
--- a/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
+++ b/ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs
@@ -60,7 +60,7 @@
                         {{#if this.settings.icon}}
                             <GhFormGroup class="gh-stack-item row">
                                 <label class="modal-fullsettings-title {{unless this.settings.icon "disabled"}}">Publication icon</label>
-                                <div class="for-switch small {{unless this.settings.icon "disabled"}}">
+                                <div class="for-switch x-small {{unless this.settings.icon "disabled"}}">
                                     <label class="switch" for="show-header">
                                         <input
                                             type="checkbox"
@@ -78,7 +78,7 @@
 
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Publication title</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-title" data-test-toggle="showHeaderTitle">
                                     <input
                                         type="checkbox"
@@ -93,7 +93,7 @@
                         </GhFormGroup>
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Newsletter name</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-header-name" data-test-toggle="showHeaderName">
                                     <input
                                         type="checkbox"
@@ -123,10 +123,9 @@
                             <label class="modal-fullsettings-title">Background color</label>
                             <div class="gh-email-design-color-picker">
                                 <div class="gh-btn-group">
-                                    <button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
-                                    <button type="button" title="Grey" class="gh-btn gh-email-design-color grey"></button>
-                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
                                     <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+                                    <button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
+                                    <button type="button" title="White" class="gh-btn gh-email-design-color white gh-btn-group-selected"></button>
                                 </div>
                             </div>
                         </GhFormGroup>
@@ -135,17 +134,17 @@
                             <label class="modal-fullsettings-title">Border color</label>
                             <div class="gh-email-design-color-picker">
                                 <div class="gh-btn-group">
-                                    <button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
-                                    <button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
-                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
                                     <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
+                                    <button type="button" title="Black" class="gh-btn gh-email-design-color black"></button>
+                                    <button type="button" title="Transparent" class="gh-btn gh-email-design-color transparent gh-btn-group-selected"></button>
                                 </div>
                             </div>
                         </GhFormGroup>
                         
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Post title</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-post-title">
                                     <input
                                         type="checkbox"
@@ -180,16 +179,16 @@
                             <label class="modal-fullsettings-title">Heading color</label>
                             <div class="gh-email-design-color-picker">
                                 <div class="gh-btn-group">
-                                    <button type="button" title="Black"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
-                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
                                     <button type="button" title="Custom color" class="gh-btn gh-email-design-color custom">{{svg-jar "plus"}}</button>
+                                    <button type="button" title="Brand color" class="gh-btn gh-email-design-color accent"></button>
+                                    <button type="button" title="Auto"class="gh-btn gh-email-design-color black gh-btn-group-selected"></button>
                                 </div>
                             </div>
                         </GhFormGroup>
 
                         <GhFormGroup class="gh-stack-item row">
                             <label class="modal-fullsettings-title">Feature image</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <label class="switch" for="show-feature-image">
                                     <input
                                         type="checkbox"
@@ -230,7 +229,7 @@
                         {{#if (feature "audienceFeedback")}}
                             <GhFormGroup class="gh-stack-item row">
                                 <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="feedbackEnabled">Ask your readers for feedback</label>
-                                <div class="for-switch small">
+                                <div class="for-switch x-small">
                                     <div class="container">
                                         <input
                                             type="checkbox"
@@ -247,7 +246,7 @@
                         {{#unless (eq this.settings.commentsEnabled 'off') }}
                             <GhFormGroup class="gh-stack-item row">
                                 <label for="comments-link" class="modal-fullsettings-title" data-test-toggle="showCommentCta">Add a link to your comments</label>
-                                <div class="for-switch small">
+                                <div class="for-switch x-small">
                                     <div class="container">
                                         <input
                                             type="checkbox"
@@ -263,7 +262,7 @@
 
                         <GhFormGroup class="gh-stack-item row">
                             <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <div class="container">
                                     <input
                                         type="checkbox"
@@ -278,7 +277,7 @@
 
                         <GhFormGroup class="gh-stack-item row">
                             <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
-                            <div class="for-switch small">
+                            <div class="for-switch x-small">
                                 <div class="container">
                                     <input
                                         type="checkbox"
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index de48f4e678..09a98db569 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1737,29 +1737,27 @@ p.gh-members-import-errordetail:first-of-type {
 /* -------------------------------------------------------- */
 
 .gh-btn-group .gh-email-design-color {
+    display: none;
     position: relative;
+    z-index: 2;
     width: 22px;
     height: 22px;
-    border: 1px solid var(--lightgrey);
+    margin: 0 0 0 5px;
+    border: 1px solid transparent;
     border-radius: 999px;
-    margin-left: 4px;
 }
 
-.gh-email-design-color.gh-btn-group-selected::after {
-    position: absolute;
-    content: "";
+.gh-btn-group:hover .gh-email-design-color {
+    display: block;
+}
+
+.gh-email-design-color.gh-btn-group-selected {
     display: block;
-    top: -4px;
-    right: -4px;
-    bottom: -4px;
-    left: -4px;
-    border: 2px solid var(--green);
-    border-radius: 999px;
 }
 
 .gh-email-design-color.transparent {
     background: transparent;
-    border: 1px solid var(--midlightgrey-l2);
+    border: 1px solid var(--lightgrey);
 }
 
 .gh-email-design-color.transparent::before {
@@ -1768,6 +1766,7 @@ p.gh-members-import-errordetail:first-of-type {
     top: 3px;
     left: 3px;
     right: 0;
+    z-index: 1;
     border-bottom: 1px solid var(--red);
     width: 100%;
     transform: rotate(45deg);
@@ -1776,10 +1775,7 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-email-design-color.white {
     background: var(--white) !important;
-}
-
-.gh-email-design-color.grey {
-    background: var(--lightgrey) !important;
+    border: 1px solid var(--lightgrey-l1);
 }
 
 .gh-email-design-color.black {
@@ -1791,7 +1787,7 @@ p.gh-members-import-errordetail:first-of-type {
 }
 
 .gh-email-design-color.custom {
-    background: transparent;
+    background: var(--white-30) !important;
     border: 1px solid var(--lightgrey);
 }
 
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index ed6423ae7d..042d014e79 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -1190,7 +1190,7 @@ body:not([data-user-is-dragging]) .gh-newsletter-card-draggable:hover .grab-news
 }
 
 .modal-fullsettings-form-labs.email-design .gh-stack-item {
-    margin: 10px 0;
+    margin: 12px 0;
 }
 
 
diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css
index 694296eff1..bbae3f0e5f 100644
--- a/ghost/admin/app/styles/patterns/forms.css
+++ b/ghost/admin/app/styles/patterns/forms.css
@@ -534,10 +534,19 @@ textarea {
     cursor: pointer;
     position: relative;
     display: inline-block;
+}
+
+.for-switch label:not(.x-small .switch),
+.for-switch .container {
     width: 50px !important;
     height: 28px !important;
 }
 
+.for-switch.x-small label {
+    width: 34px !important;
+    height: 20px !important;
+}
+
 .for-switch label p,
 .for-switch .container p {
     overflow: auto;