diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css
index a57946b0ef..bfc69bad86 100644
--- a/ghost/admin/app/styles/layouts/apps.css
+++ b/ghost/admin/app/styles/layouts/apps.css
@@ -133,8 +133,9 @@
 .apps-grid-cell {
     flex: 1 1 100%;
 }
+
 .apps-grid-cell:hover {
-    background: color-mod(var(--lightgrey) l(+5%));
+    background: color-mod(var(--lightgrey) l(+6%) s(-2%));
 }
 
 .apps-card-app {
@@ -148,11 +149,21 @@
     transition: background 0.3s ease;
 }
 
+.new-integration-cell .apps-card-app {
+    padding: 10px 14px;
+    height: auto;
+}
+
 @media (max-width: 500px) {
     .apps-card-app {
         min-height: 75px;
         height: auto;
     }
+
+    .new-integration-cell .apps-card-app {
+        min-height: auto;
+        height: auto;
+    }
 }
 
 .apps-grid-cell:first-of-type .apps-card-app {
@@ -229,7 +240,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-size: 1.7rem;
+    font-size: 1.75rem;
     line-height: 1.15em;
     font-weight: bold;
 }
@@ -276,6 +287,7 @@
     margin-top: 15px;
     width: 100%;
 }
+
 /* Slack
 /* ---------------------------------------------------------- */
 
@@ -333,3 +345,14 @@
 .app-config-form > .gh-btn-grey:focus {
     border-color: rgb(223, 225, 227);
 }
+
+
+/* Custom Integrations
+/* ---------------------------------------------------------- */
+.new-webhook-cell td {
+    padding: 0;
+}
+
+.new-webhook-cell:hover {
+    background: color-mod(var(--lightgrey) l(+6%) s(-2%));
+}
\ No newline at end of file
diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs
index 1c5cfe338b..f1171324ee 100644
--- a/ghost/admin/app/templates/settings/integration.hbs
+++ b/ghost/admin/app/templates/settings/integration.hbs
@@ -17,7 +17,7 @@
                 <figure class="relative flex items-center h-100 ma0 br4 hide-child ba b--whitegrey-d2 pa8 mt1" style={{iconImageStyle}}>
                     {{#aspect-ratio-box class="flex items-center h-100" ratio="1/1" base="height"}}
                         {{#unless integration.iconImage}}
-                            {{svg-jar "integration" class="w14 h14 stroke-darkgrey"}}
+                            {{svg-jar "integration" class="w14 h14"}}
                         {{/unless}}
                     {{/aspect-ratio-box}}
 
@@ -191,22 +191,32 @@
                 {{else}}
                 <tr class="bt b--whitegrey" data-test-webhooks-blank-slate>
                     <td colspan="5" class="pa5 pt15 pb15 tc midgrey f7">
-                        <span class="db">No webhooks configured</span>
-                        <span class="dib mt1">
-                            {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}}
-                                {{svg-jar "add" class="w3 h3 fill-blue mr1"}} Add webhook
+                        <div class="flex flex-column items-center">
+                            <p class="ma0 pa0 tc midgrey lh-title mt2">
+                                No webhooks configured
+                            </p>
+                            {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"
+                            data-test-link="add-webhook"}}
+                            <div class="flex items-center pa2 pt1">
+                                {{svg-jar "add" class="w3 h3 fill-blue-d1"}}
+                                <span class="ml1 blue">Add webhook</span>
+                            </div>
                             {{/link-to}}
-                        </span>
+                        </div>
                     </td>
                 </tr>
                 {{/each}}
             </tbody>
             {{#if filteredWebhooks}}
             <tfoot class="bt b--lightgrey">
-                <tr>
-                    <td colspan="5" class="pa3 f7">
-                        {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}}
-                            {{svg-jar "add" class="w3 h3 fill-blue mr1"}} Add webhook
+                <tr class="new-webhook-cell">
+                    <td colspan="5">
+                        {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"
+                        data-test-link="add-webhook"}}
+                        <div class="pa3 f7">
+                            {{svg-jar "add" class="w3 h3 fill-blue-d1"}} 
+                            <span class="ml1 blue">Add webhook</span>
+                        </div>
                         {{/link-to}}
                     </td>
                 </tr>
diff --git a/ghost/admin/app/templates/settings/integrations.hbs b/ghost/admin/app/templates/settings/integrations.hbs
index 9a9652f060..c311251688 100644
--- a/ghost/admin/app/templates/settings/integrations.hbs
+++ b/ghost/admin/app/templates/settings/integrations.hbs
@@ -156,13 +156,8 @@
     </section>
 
     <section class="apps-grid-container pt6">
-        <div class="flex flex-row items-center pb2">
-            <span class="dib flex-grow-1 midgrey">Custom integrations</span>
-            {{#link-to "settings.integrations.new" class="gh-btn gh-btn-green" data-test-button="new-integration"}}
-                <span>Add custom integration</span>
-            {{/link-to}}
-        </div>
 
+        <span class="apps-grid-title pb2">Custom integrations</span>
         <div class="apps-grid">
             {{#each integrations as |integration|}}
                 <div class="apps-grid-cell" data-test-custom-integration>
@@ -193,17 +188,37 @@
                     {{/link-to}}
                 </div>
             {{else}}
-                <div class="flex flex-column justify-center items-center mih40 miw-100" data-test-blank="custom-integrations">
+                <div class="flex flex-column justify-center items-center mih30 miw-100" data-test-blank="custom-integrations">
                     {{#if fetchIntegrations.isRunning}}
                         <div class="gh-loading-spinner"></div>
                     {{else}}
-                        <p class="ma0 pa0 tc midgrey lh-title">
-                            Create your own custom Ghost integrations<br>
-                            with dedicated API keys & webhooks
-                        </p>
+                        <div class="flex flex-column items-center pa5 pt15 pb15">
+                            <p class="ma0 pa0 tc midgrey lh-title mt2">
+                                Create your own custom Ghost integrations with dedicated API keys & webhooks
+                            </p>
+                            {{#link-to "settings.integrations.new" class="" data-test-button="new-integration"}}
+                                <div class="flex items-center pa2 pt1">
+                                    {{svg-jar "add" class="w3 h3 fill-blue-d1"}}
+                                    <span class="db ml1 blue nudge-bottom--1">Add custom integration</span>
+                                </div>
+                            {{/link-to}}
+                        </div>
                     {{/if}}
                 </div>
             {{/each}}
+
+            {{#if integrations}}
+            <div class="apps-grid-cell new-integration-cell">
+                {{#link-to "settings.integrations.new" class="" data-test-button="new-integration"}}
+                <article class="apps-card-app">
+                    <div class="flex items-center">
+                        {{svg-jar "add" class="w3 h3 fill-blue-d1"}}
+                        <span class="db ml1 blue nudge-bottom--1 fw4">Add custom integration</span>
+                    </div>
+                </article>
+                {{/link-to}}
+            </div>
+            {{/if}}
         </div>
     </section>
 </section>
diff --git a/ghost/admin/public/assets/icons/integration.svg b/ghost/admin/public/assets/icons/integration.svg
index 302b3f0512..d07eab2fc8 100644
--- a/ghost/admin/public/assets/icons/integration.svg
+++ b/ghost/admin/public/assets/icons/integration.svg
@@ -1 +1 @@
-<svg width="46" height="43" viewBox="0 0 46 43" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" fill="none" fill-rule="evenodd"><path stroke-opacity=".012" stroke-width="0" d="M-1-3h48v48H-1z"/><g stroke-linecap="round" stroke-linejoin="round"><path d="M32.932 6.574c.713.428 1.069 1.057 1.068 1.888v9.278l-11 7.076-11-7.076V8.462c0-.831.355-1.46 1.068-1.888l8.8-5.28c.755-.453 1.51-.453 2.264 0l8.8 5.28zM23 13.816v11"/><path d="M34 31.416l-11-6.6 11-7.076 10 6.426c.669.435 1.002 1.052 1 1.85v8.124c.002.798-.331 1.415-1 1.85l-8.8 5.66c-.793.51-1.587.51-2.38 0L23 35.34V24.816M34 31.416V42M23 24.816V35.34l-9.8 6.31c-.793.51-1.587.51-2.38 0l-8.8-5.66c-.678-.43-1.018-1.047-1.02-1.85v-8.124c-.002-.798.331-1.415 1-1.85l10-6.426 11 7.076-11 6.6M12 31.416L1.262 24.974M12 31.416V42M23 13.816L12.282 7.384M33.718 7.384L23 13.816M44.738 24.974L34 31.416"/></g></g></svg>
\ No newline at end of file
+<svg width="46" height="43" viewBox="0 0 46 43" xmlns="http://www.w3.org/2000/svg"><g stroke="#343f44" fill="none" fill-rule="evenodd"><path stroke-opacity=".012" stroke-width="0" d="M-1-3h48v48H-1z"/><g stroke-linecap="round" stroke-linejoin="round"><path d="M32.932 6.574c.713.428 1.069 1.057 1.068 1.888v9.278l-11 7.076-11-7.076V8.462c0-.831.355-1.46 1.068-1.888l8.8-5.28c.755-.453 1.51-.453 2.264 0l8.8 5.28zM23 13.816v11"/><path d="M34 31.416l-11-6.6 11-7.076 10 6.426c.669.435 1.002 1.052 1 1.85v8.124c.002.798-.331 1.415-1 1.85l-8.8 5.66c-.793.51-1.587.51-2.38 0L23 35.34V24.816M34 31.416V42M23 24.816V35.34l-9.8 6.31c-.793.51-1.587.51-2.38 0l-8.8-5.66c-.678-.43-1.018-1.047-1.02-1.85v-8.124c-.002-.798.331-1.415 1-1.85l10-6.426 11 7.076-11 6.6M12 31.416L1.262 24.974M12 31.416V42M23 13.816L12.282 7.384M33.718 7.384L23 13.816M44.738 24.974L34 31.416"/></g></g></svg>
\ No newline at end of file