diff --git a/app/assets/javascripts/discourse/app/components/modal/convert-to-public-topic.hbs b/app/assets/javascripts/discourse/app/components/modal/convert-to-public-topic.hbs
new file mode 100644
index 00000000000..0c47bc23033
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/convert-to-public-topic.hbs
@@ -0,0 +1,29 @@
+<DModal
+  @title={{i18n "topic.make_public.title"}}
+  @closeModal={{@closeModal}}
+  class="convert-to-public-topic"
+  @flash={{this.flash}}
+>
+  <:body>
+    <div class="instructions">
+      {{i18n "topic.make_public.choose_category"}}
+    </div>
+    <CategoryChooser
+      @value={{this.publicCategoryId}}
+      @onChange={{action (mut this.publicCategoryId)}}
+    />
+  </:body>
+  <:footer>
+    <DButton
+      class="btn-primary"
+      @action={{this.makePublic}}
+      @label="composer.modal_ok"
+      @disabled={{this.saving}}
+    />
+    <DButton
+      class="btn-flat d-modal-cancel"
+      @action={{@closeModal}}
+      @label="cancel"
+    />
+  </:footer>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/convert-to-public-topic.js b/app/assets/javascripts/discourse/app/components/modal/convert-to-public-topic.js
new file mode 100644
index 00000000000..e5bc93e0416
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/convert-to-public-topic.js
@@ -0,0 +1,31 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import I18n from "I18n";
+
+export default class ConvertToPublicTopic extends Component {
+  @service appEvents;
+
+  @tracked publicCategoryId;
+  @tracked saving = false;
+  @tracked flash;
+
+  @action
+  async makePublic() {
+    try {
+      this.saving = true;
+      await this.args.model.topic.convertTopic("public", {
+        categoryId: this.publicCategoryId,
+      });
+      this.args.model.topic.set("archetype", "regular");
+      this.args.model.topic.set("category_id", this.publicCategoryId);
+      this.appEvents.trigger("header:show-topic", this.args.model.topic);
+      this.saving = false;
+      this.args.closeModal();
+    } catch (e) {
+      this.flash = I18n.t("generic_error");
+      this.saving = false;
+    }
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/convert-to-public-topic.js b/app/assets/javascripts/discourse/app/controllers/convert-to-public-topic.js
deleted file mode 100644
index 4fb7c1eee76..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/convert-to-public-topic.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-
-export default Controller.extend(ModalFunctionality, {
-  publicCategoryId: null,
-  saving: true,
-
-  onShow() {
-    this.setProperties({ publicCategoryId: null, saving: false });
-  },
-
-  actions: {
-    makePublic() {
-      let topic = this.model;
-      topic
-        .convertTopic("public", { categoryId: this.publicCategoryId })
-        .then(() => {
-          topic.set("archetype", "regular");
-          topic.set("category_id", this.publicCategoryId);
-          this.appEvents.trigger("header:show-topic", topic);
-          this.send("closeModal");
-        })
-        .catch(popupAjaxError);
-    },
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/controllers/topic.js b/app/assets/javascripts/discourse/app/controllers/topic.js
index 075a0cdec6f..6785a9c09c3 100644
--- a/app/assets/javascripts/discourse/app/controllers/topic.js
+++ b/app/assets/javascripts/discourse/app/controllers/topic.js
@@ -36,6 +36,7 @@ import showModal from "discourse/lib/show-modal";
 import { spinnerHTML } from "discourse/helpers/loading-spinner";
 import { BookmarkFormData } from "discourse/lib/bookmark";
 import DeleteTopicConfirmModal from "discourse/components/modal/delete-topic-confirm";
+import ConvertToPublicTopicModal from "discourse/components/modal/convert-to-public-topic";
 
 let customPostMessageCallbacks = {};
 
@@ -1185,9 +1186,8 @@ export default Controller.extend(bufferedProperty("model"), {
     },
 
     convertToPublicTopic() {
-      showModal("convert-to-public-topic", {
-        model: this.model,
-        modalClass: "convert-to-public-topic",
+      this.modal.show(ConvertToPublicTopicModal, {
+        model: { topic: this.model },
       });
     },
 
diff --git a/app/assets/javascripts/discourse/app/services/modal.js b/app/assets/javascripts/discourse/app/services/modal.js
index 3426436f154..0d383cb16d3 100644
--- a/app/assets/javascripts/discourse/app/services/modal.js
+++ b/app/assets/javascripts/discourse/app/services/modal.js
@@ -20,7 +20,6 @@ const KNOWN_LEGACY_MODALS = [
   "change-owner",
   "change-post-notice",
   "change-timestamp",
-  "convert-to-public-topic",
   "create-account",
   "create-invite-bulk",
   "create-invite",
diff --git a/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs
deleted file mode 100644
index 02834e002b5..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/convert-to-public-topic.hbs
+++ /dev/null
@@ -1,21 +0,0 @@
-<DModalBody @title="topic.make_public.title">
-
-  <div class="instructions">
-    {{i18n "topic.make_public.choose_category"}}
-  </div>
-  <CategoryChooser
-    @value={{this.publicCategoryId}}
-    @onChange={{action (mut this.publicCategoryId)}}
-  />
-
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @class="btn-primary"
-    @action={{action "makePublic"}}
-    @label="composer.modal_ok"
-    @disabled={{this.saving}}
-  />
-  <DModalCancel @close={{route-action "closeModal"}} />
-</div>
\ No newline at end of file