diff --git a/ghost/admin/app/components/modals/settings/signup-form-embed.hbs b/ghost/admin/app/components/modals/settings/signup-form-embed.hbs
index e6f7be43a1..b559ca144d 100644
--- a/ghost/admin/app/components/modals/settings/signup-form-embed.hbs
+++ b/ghost/admin/app/components/modals/settings/signup-form-embed.hbs
@@ -9,65 +9,60 @@
 
     <div class="modal-signup-form-embed-main">
         <header class="modal-header">
-            <h1>Embed a signup form</h1>
+            <h1>Embed signup form</h1>
         </header>
 
         <div class="modal-body">
-
-            <div class="gh-signup-form-container">
-                <div class="gh-stack-item gh-setting-first">
-                    <div class="flex-grow-1">
-                        <label class="gh-setting-title">
-                            Choose layout
-                        </label>
-
-                            <Settings::SignupForm::StyleSelect
-                            @value={{this.style}}
-                            @onChange={{this.setStyle}}
-                        />
-                    </div>
+            <GhFormGroup class="gh-signup-form-container">
+                <div class="gh-stack-item row">
+                    <label class="modal-fullsettings-title">
+                        Layout
+                    </label>
+                        <Settings::SignupForm::StyleSelect
+                        @value={{this.style}}
+                        @onChange={{this.setStyle}}
+                    />
                 </div>
 
-                <div class="gh-stack-item gh-setting-first">
-                    <div class="flex-grow-1">
-                        <label class="gh-setting-title">
-                            Apply labels at signup
-                        </label>
-
-                        <GhMemberLabelInput
-                            @onChange={{this.setLabels}}
-                            @allowEdit={{false}}
-                            @labels={{this.labels}}
-                            @triggerId="label-input"
-                            @placeholder="Select"
-                        />
-                    </div>
+                <div class="gh-stack-item row">
+                    <label class="modal-fullsettings-title">
+                        Background color
+                    </label>
+                    <Modals::Newsletters::Components::ColorPicker
+                        @color={{this.backgroundColor}}
+                        @presetColors={{this.backgroundPresetColors}}
+                        @onColorChange={{this.setBackgroundColor}}
+                    />
                 </div>
 
-
-                <div>
-                    <div class="form-group gh-stack-item row">
-                        <label class="fw6 f8">Background color</label>
-                        <Modals::Newsletters::Components::ColorPicker
-                            @color={{this.backgroundColor}}
-                            @presetColors={{this.backgroundPresetColors}}
-                            @onColorChange={{this.setBackgroundColor}}
-                        />
-                    </div>
+                <div class="gh-stack-item">
+                    <label class="modal-fullsettings-title">
+                        Labels at signup
+                    </label>
+                    <GhMemberLabelInput
+                        @onChange={{this.setLabels}}
+                        @allowEdit={{false}}
+                        @labels={{this.labels}}
+                        @triggerId="label-input"
+                        @placeholder="Select"
+                    />
                 </div>
 
-                <div class="gh-stack-item gh-setting-first">
+                <div class="gh-stack-item">
                     <div class="flex-grow-1">
-                        <label class="gh-setting-title">
+                        <label class="modal-fullsettings-title">
                             Embed code
                         </label>
-
-                        <textarea id="gh-signup-form-embed-code-input" class="gh-input" readonly>{{this.generatedCode}}</textarea>
-                        <p>Copy and paste this HTML code somewhere inside the &lt;body&gt; tag of your site.</p>
+                        <GhTextarea
+                            @id="gh-signup-form-embed-code-input"
+                            @class="gh-input gh-signup-form-embed-code-input"
+                            @value={{this.generatedCode}}
+                            readonly
+                        />
+                        <p>Copy and paste this HTML code somewhere inside the <code>&lt;body&gt;</code> tag of your site.</p>
                     </div>
                 </div>
-            </div>
-
+            </GhFormGroup>
 
         </div>
 
diff --git a/ghost/admin/app/components/modals/settings/signup-form-embed.js b/ghost/admin/app/components/modals/settings/signup-form-embed.js
index 63dca52458..aa5d72bf59 100644
--- a/ghost/admin/app/components/modals/settings/signup-form-embed.js
+++ b/ghost/admin/app/components/modals/settings/signup-form-embed.js
@@ -24,12 +24,12 @@ export default class SignupFormEmbedModal extends Component {
     @service feature;
     @tracked style = 'all-in-one';
     @tracked labels = [];
-    @tracked backgroundColor = '#f9f9f9';
+    @tracked backgroundColor = '#F1F3F4';
     @inject config;
     @service notifications;
 
     static modalOptions = {
-        className: 'fullwidth-modal'
+        className: 'fullwidth-modal gh-signup-form-embed'
     };
 
     @action
@@ -50,10 +50,10 @@ export default class SignupFormEmbedModal extends Component {
     get backgroundPresetColors() {
         return [
             {
-                value: '#f9f9f9',
+                value: '#F1F3F4',
                 name: 'Light grey',
                 class: '',
-                style: 'background: #f9f9f9 !important;'
+                style: 'background: #F1F3F4 !important;'
             },
             {
                 value: '#000000',
diff --git a/ghost/admin/app/components/settings/signup-form/style-select.hbs b/ghost/admin/app/components/settings/signup-form/style-select.hbs
index ac4620ec94..69c57b5387 100644
--- a/ghost/admin/app/components/settings/signup-form/style-select.hbs
+++ b/ghost/admin/app/components/settings/signup-form/style-select.hbs
@@ -1,16 +1,5 @@
-<span
-    class="gh-select mt2"
-    data-select-text="test"
-    tabindex="0"
->
-    <OneWaySelect
-        @id="portal-button-style"
-        @name="portal[button-style]"
-        @options={{this.options}}
-        @optionValuePath="value"
-        @optionLabelPath="name"
-        @value={{this.selectedOption.value}}
-        @update={{this.setRecipients}}
-    />
-    {{svg-jar "arrow-down-small"}}
-</span>
+<div class="gh-btn-group">
+    {{#each this.options as |option|}}
+        <button class="gh-btn {{if (eq this.selectedOption.value option.value) "gh-btn-group-selected"}}" type="button" {{on "click" (fn this.setRecipients option)}}><span>{{option.name}}</span></button>
+    {{/each}}
+</div>
diff --git a/ghost/admin/app/components/settings/signup-form/style-select.js b/ghost/admin/app/components/settings/signup-form/style-select.js
index c0061c9d5f..052973743b 100644
--- a/ghost/admin/app/components/settings/signup-form/style-select.js
+++ b/ghost/admin/app/components/settings/signup-form/style-select.js
@@ -20,4 +20,9 @@ export default class StyleSelect extends Component {
     setRecipients(option) {
         this.args.onChange(option.value);
     }
+
+    @action
+    changeOption(option) {
+        this.option = option;
+    }
 }
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 28c71619cc..4bba4da20c 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1743,14 +1743,14 @@ p.gh-members-import-errordetail:first-of-type {
     overflow: hidden;
     padding: 4px;
     margin-right: -4px;
+    background: none;
 }
 
 .gh-email-design-color-picker .gh-btn-group p {
     opacity: 1;
     margin: 0;
     color: var(--midgrey);
-    font-size: 1.2rem;
-    font-weight: 500;
+    font-weight: 400;
     transition: all .15s ease-in-out;
     transition-delay: .03s;
 }
diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css
index 9f0658161c..5c5b1d4053 100644
--- a/ghost/admin/app/styles/layouts/settings.css
+++ b/ghost/admin/app/styles/layouts/settings.css
@@ -3073,6 +3073,78 @@ p.theme-validation-details {
     color: var(--midgrey);
 }
 
+/* Signup form modal */
+.gh-signup-form-embed {
+    margin: 6vw 0;
+}
+
+.gh-signup-form-iframe {
+    width: 100%;
+    border: 0;
+}
+
+.fullwidth-modal {
+    max-width: 100%;
+}
+
+.epm-modal .modal-signup-form-embed {
+    display: grid;
+    grid-template-columns: 5fr 3fr;
+    max-width: 1120px;
+    max-height: 520px;
+    margin: 32px;
+    padding: 0;
+}
+
+.modal-signup-form-embed-preview {
+    position: relative;
+    margin: 1.6rem;
+    margin-right: 0;
+}
+
+.modal-signup-form-embed-preview iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+.modal-signup-form-embed-main {
+    padding: 32px;
+    height: 100%;
+}
+
+.modal-signup-form-embed-main .modal-body {
+    overflow-y: auto;
+    height: 320px;
+}
+
+.modal-signup-form-embed-main .form-group {
+    margin-bottom: 0;
+}
+
+.gh-signup-form-container .gh-stack-item {
+    margin-bottom: 1.6rem;
+}
+
+.gh-signup-form-container .gh-stack-item:last-child {
+    margin-bottom: 0;
+}
+
+.gh-signup-form-embed-code-input {
+    min-height: 72px;
+    background: var(--whitegrey-l2);
+    font-family: var(--font-family-mono);
+    font-size: 1.35rem;
+}
+
+.gh-signup-form-embed-code-input:focus {
+    background: var(--whitegrey-l2);
+    border-color: var(--lightgrey-l1) !important;
+    box-shadow: none;
+}
+
 /* History log
 /* ---------------------------------------------------------- */
 .gh-history-filter-li {
@@ -3751,61 +3823,3 @@ p.theme-validation-details {
     padding: 0;
     height: auto;
 }
-
-/* Signup form */
-
-.gh-signup-form-embed-code {
-    display: flex;
-}
-
-.gh-signup-form-embed-code button {
-    flex-shrink: 0;
-    /* Overlap the input to keep the button radius */
-    margin-left: -5px;
-}
-
-.gh-signup-form-embed-code input {
-    min-width: 0; /* Make sure this input can shrink inside a flex container */
-    font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
-    font-size: .9em;
-}
-
-.gh-signup-form-iframe {
-    width: 100%;
-    border: 0;
-}
-
-.fullwidth-modal {
-    max-width: 100%;
-}
-
-.epm-modal .modal-signup-form-embed {
-    display: flex;
-    flex-direction: row;
-    margin: 32px;
-    align-items: stretch;
-    padding: 0;
-}
-
-.modal-signup-form-embed-preview {
-    flex-basis: 65%;
-    position: relative;
-    min-width: 500px;
-}
-
-.modal-signup-form-embed-preview iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-}
-
-.modal-signup-form-embed-main {
-    flex-basis: 35%;
-    flex-shrink: 0;
-    padding: 32px;
-    max-height: 80vh;
-    min-width: 400px;
-    overflow-y: auto;
-}
diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css
index c291461efe..ab5fe840de 100644
--- a/ghost/admin/app/styles/patterns/global.css
+++ b/ghost/admin/app/styles/patterns/global.css
@@ -530,14 +530,14 @@ tt {
 
 code,
 tt {
-    padding: 0.2rem 0.3rem 0.1rem;
-    border: color-mod(#f5f7f8 lightness(-10%)) 1px solid;
-    background: #f5f7f8;
+    padding: 0.2rem 0.3rem;
+    border: 1px solid var(--whitegrey-d1);
+    background: var(--whitegrey-l1);
     border-radius: 2px;
-    color: #c25;
+    color: var(--pink-d3);
     vertical-align: middle;
     white-space: pre-wrap;
-    font-size: 0.8em;
+    font-size: 0.85em;
     line-height: 1em;
 }
 
@@ -546,8 +546,8 @@ pre {
     margin: 1.6em 0;
     padding: 10px;
     width: 100%;
-    border: color-mod(#f5f7f8 lightness(-10%)) 1px solid;
-    background: #f5f7f8;
+    border: 1px solid var(--whitegrey-d1);
+    background: var(--whitegrey-l1);
     border-radius: 3px;
     white-space: pre;
     font-family: var(--font-family-mono);