diff --git a/ghost/admin/app/components/modal-upgrade-host-limit-custom-theme.hbs b/ghost/admin/app/components/modal-upgrade-host-limit-custom-theme.hbs
index b0f1497819..e8d3e26f22 100644
--- a/ghost/admin/app/components/modal-upgrade-host-limit-custom-theme.hbs
+++ b/ghost/admin/app/components/modal-upgrade-host-limit-custom-theme.hbs
@@ -15,7 +15,7 @@
         <span>Cancel</span>
     </button>
 
-    <button {{on "click" (action "upgrade")}} class="gh-btn gh-btn-black" data-test-button="upgrade-plan">
+    <button {{on "click" (action "upgrade")}} class="gh-btn gh-btn-green" data-test-button="upgrade-plan">
         <span>Upgrade</span>
     </button>
 </div>
\ No newline at end of file
diff --git a/ghost/admin/app/controllers/settings/theme.js b/ghost/admin/app/controllers/settings/theme.js
index 77ef0f31a9..f387cf38b2 100644
--- a/ghost/admin/app/controllers/settings/theme.js
+++ b/ghost/admin/app/controllers/settings/theme.js
@@ -44,6 +44,7 @@ export const MARKETPLACE_THEMES = [{
 export default Controller.extend({
     config: service(),
     ghostPaths: service(),
+    limit: service(),
     notifications: service(),
     session: service(),
     settings: service(),
@@ -53,6 +54,7 @@ export default Controller.extend({
     newSecondaryNavItem: null,
     themes: null,
     themeToDelete: null,
+    displayUpgradeModal: false,
 
     init() {
         this._super(...arguments);
@@ -68,7 +70,12 @@ export default Controller.extend({
     }),
 
     actions: {
-        activateTheme(theme) {
+        async activateTheme(theme) {
+            const isOverLimit = await this.limit.checkWouldGoOverLimit('customThemes', {value: theme.name});
+            if (isOverLimit) {
+                this.set('displayUpgradeModal', true);
+                return;
+            }
             return theme.activate().then((activatedTheme) => {
                 if (!isEmpty(activatedTheme.get('warnings'))) {
                     this.set('themeWarnings', activatedTheme.get('warnings'));
@@ -138,6 +145,10 @@ export default Controller.extend({
             this.set('showThemeErrorsModal', false);
         },
 
+        hideUpgradeModal() {
+            this.set('displayUpgradeModal', false);
+        },
+
         reset() {}
     },
 
diff --git a/ghost/admin/app/services/limit.js b/ghost/admin/app/services/limit.js
index c6f3cf139b..1403e2a6e4 100644
--- a/ghost/admin/app/services/limit.js
+++ b/ghost/admin/app/services/limit.js
@@ -59,6 +59,10 @@ export default class LimitsService extends Service {
         });
     }
 
+    async checkWouldGoOverLimit(limitName, metadata = {}) {
+        return this.limiter.checkWouldGoOverLimit(limitName, metadata);
+    }
+
     decorateWithCountQueries(limits) {
         if (limits.staff) {
             limits.staff.currentCountQuery = bind(this, this.getStaffUsersCount);
diff --git a/ghost/admin/app/templates/settings/theme.hbs b/ghost/admin/app/templates/settings/theme.hbs
index 8d4195253e..db6c5309f8 100644
--- a/ghost/admin/app/templates/settings/theme.hbs
+++ b/ghost/admin/app/templates/settings/theme.hbs
@@ -100,4 +100,10 @@
     </section>
 </section>
 
-{{outlet}}
\ No newline at end of file
+{{outlet}}
+
+{{#if this.displayUpgradeModal}}
+    <GhFullscreenModal @modal="upgrade-host-limit-custom-theme"
+        @close={{action "hideUpgradeModal"}}
+        @modifier="action wide" />
+{{/if}}