diff --git a/app/assets/javascripts/admin/addon/models/theme.js b/app/assets/javascripts/admin/addon/models/theme.js
index 9783b07e00f..d41ecb7f5f7 100644
--- a/app/assets/javascripts/admin/addon/models/theme.js
+++ b/app/assets/javascripts/admin/addon/models/theme.js
@@ -253,6 +253,11 @@ const Theme = RestModel.extend({
     }
   },
 
+  @discourseComputed("recentlyInstalled", "component", "hasParents")
+  warnUnassignedComponent(recent, component, hasParents) {
+    return recent && component && !hasParents;
+  },
+
   removeChildTheme(theme) {
     const childThemes = this.childThemes;
     childThemes.removeObject(theme);
diff --git a/app/assets/javascripts/admin/addon/routes/admin-customize-themes-show.js b/app/assets/javascripts/admin/addon/routes/admin-customize-themes-show.js
index 6311e6100e5..5bcf95d3d2d 100644
--- a/app/assets/javascripts/admin/addon/routes/admin-customize-themes-show.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-customize-themes-show.js
@@ -3,6 +3,20 @@ import I18n from "I18n";
 import Route from "@ember/routing/route";
 import { scrollTop } from "discourse/mixins/scroll-top";
 
+export function showUnassignedComponentWarning(theme, callback) {
+  bootbox.confirm(
+    I18n.t("admin.customize.theme.unsaved_parent_themes"),
+    I18n.t("admin.customize.theme.discard"),
+    I18n.t("admin.customize.theme.stay"),
+    (result) => {
+      if (!result) {
+        theme.set("recentlyInstalled", false);
+      }
+      callback(result);
+    }
+  );
+}
+
 export default Route.extend({
   serialize(model) {
     return { theme_id: model.get("id") };
@@ -11,7 +25,7 @@ export default Route.extend({
   model(params) {
     const all = this.modelFor("adminCustomizeThemes");
     const model = all.findBy("id", parseInt(params.theme_id, 10));
-    return model ? model : this.replaceWith("adminCustomizeTheme.index");
+    return model ? model : this.replaceWith("adminCustomizeThemes.index");
   },
 
   setupController(controller, model) {
@@ -55,19 +69,13 @@ export default Route.extend({
     },
     willTransition(transition) {
       const model = this.controller.model;
-      if (model.recentlyInstalled && !model.hasParents && model.component) {
+      if (model.warnUnassignedComponent) {
         transition.abort();
-        bootbox.confirm(
-          I18n.t("admin.customize.theme.unsaved_parent_themes"),
-          I18n.t("admin.customize.theme.discard"),
-          I18n.t("admin.customize.theme.stay"),
-          (result) => {
-            if (!result) {
-              this.controller.model.setProperties({ recentlyInstalled: false });
-              transition.retry();
-            }
+        showUnassignedComponentWarning(model, (result) => {
+          if (!result) {
+            transition.retry();
           }
-        );
+        });
       }
     },
   },
diff --git a/app/assets/javascripts/admin/addon/routes/admin-customize-themes.js b/app/assets/javascripts/admin/addon/routes/admin-customize-themes.js
index 2da0266f429..9397c938a9b 100644
--- a/app/assets/javascripts/admin/addon/routes/admin-customize-themes.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-customize-themes.js
@@ -1,5 +1,6 @@
 import Route from "@ember/routing/route";
 import showModal from "discourse/lib/show-modal";
+import { showUnassignedComponentWarning } from "admin/routes/admin-customize-themes-show";
 
 export default Route.extend({
   model() {
@@ -13,7 +14,17 @@ export default Route.extend({
 
   actions: {
     installModal() {
-      showModal("admin-install-theme", { admin: true });
+      const currentTheme = this.controllerFor("adminCustomizeThemes.show")
+        .model;
+      if (currentTheme && currentTheme.warnUnassignedComponent) {
+        showUnassignedComponentWarning(currentTheme, (result) => {
+          if (!result) {
+            showModal("admin-install-theme", { admin: true });
+          }
+        });
+      } else {
+        showModal("admin-install-theme", { admin: true });
+      }
     },
 
     addTheme(theme) {