diff --git a/app/assets/javascripts/discourse/app/components/modal/discard-draft.hbs b/app/assets/javascripts/discourse/app/components/modal/discard-draft.hbs
new file mode 100644
index 00000000000..3485bfea1bd
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/discard-draft.hbs
@@ -0,0 +1,28 @@
+<DModal @closeModal={{@closeModal}} class="discard-draft-modal">
+  <:body>
+    <div class="instructions">
+      {{i18n "post.cancel_composer.confirm"}}
+    </div>
+  </:body>
+
+  <:footer>
+    <DButton
+      @icon="far-trash-alt"
+      @label="post.cancel_composer.discard"
+      @class="btn-danger discard-draft"
+      @action={{this.discardDraft}}
+    />
+    {{#if @model.showSaveDraftButton}}
+      <DButton
+        @label="post.cancel_composer.save_draft"
+        @class="save-draft"
+        @action={{this.saveDraftAndClose}}
+      />
+    {{/if}}
+    <DButton
+      @label="post.cancel_composer.keep_editing"
+      @class="keep-editing"
+      @action={{@closeModal}}
+    />
+  </:footer>
+</DModal>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/modal/discard-draft.js b/app/assets/javascripts/discourse/app/components/modal/discard-draft.js
new file mode 100644
index 00000000000..965148baa71
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/modal/discard-draft.js
@@ -0,0 +1,16 @@
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
+
+export default class DiscardDraftModal extends Component {
+  @action
+  async discardDraft() {
+    await this.args.model.onDestroyDraft();
+    this.args.closeModal();
+  }
+
+  @action
+  async saveDraftAndClose() {
+    await this.args.model.onSaveDraft();
+    this.args.closeModal();
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/controllers/discard-draft.js b/app/assets/javascripts/discourse/app/controllers/discard-draft.js
deleted file mode 100644
index 8e48b1063e3..00000000000
--- a/app/assets/javascripts/discourse/app/controllers/discard-draft.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Controller from "@ember/controller";
-import ModalFunctionality from "discourse/mixins/modal-functionality";
-
-export default Controller.extend(ModalFunctionality, {
-  showSaveDraftButton: true,
-
-  actions: {
-    async destroyDraft() {
-      await this.onDestroyDraft();
-      this.send("closeModal");
-    },
-
-    async saveDraftAndClose() {
-      await this.onSaveDraft();
-      this.send("closeModal");
-    },
-
-    dismissModal() {
-      this.send("closeModal");
-    },
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/services/composer.js b/app/assets/javascripts/discourse/app/services/composer.js
index 7a95da9a5fb..d9ade6abfb7 100644
--- a/app/assets/javascripts/discourse/app/services/composer.js
+++ b/app/assets/javascripts/discourse/app/services/composer.js
@@ -34,6 +34,7 @@ import renderTags from "discourse/lib/render-tags";
 import { htmlSafe } from "@ember/template";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import prepareFormTemplateData from "discourse/lib/form-template-validation";
+import DiscardDraftModal from "discourse/components/modal/discard-draft";
 
 async function loadDraft(store, opts = {}) {
   let { draft, draftKey, draftSequence } = opts;
@@ -101,6 +102,7 @@ export default class ComposerController extends Controller {
   @service store;
   @service appEvents;
   @service capabilities;
+  @service modal;
 
   checkedMessages = false;
   messageCount = null;
@@ -1498,34 +1500,32 @@ export default class ComposerController extends Controller {
 
     return new Promise((resolve) => {
       if (this.get("model.hasMetaData") || this.get("model.replyDirty")) {
-        const modal = showModal("discard-draft", {
-          model: this.model,
-          modalClass: "discard-draft-modal",
-        });
         const overridesDraft =
           this.model.composeState === Composer.OPEN &&
           this.model.draftKey === opts.draftKey &&
           [Composer.EDIT_SHARED_DRAFT, Composer.EDIT].includes(opts.action);
         const showSaveDraftButton = this.model.canSaveDraft && !overridesDraft;
-        modal.setProperties({
-          showSaveDraftButton,
-          onDestroyDraft: () => {
-            return this.destroyDraft()
-              .then(() => {
-                this.model.clearState();
-                this.close();
-              })
-              .finally(() => {
-                this.appEvents.trigger("composer:cancelled");
-                resolve();
-              });
-          },
-          onSaveDraft: () => {
-            this._saveDraft();
-            this.model.clearState();
-            this.close();
-            this.appEvents.trigger("composer:cancelled");
-            return resolve();
+        this.modal.show(DiscardDraftModal, {
+          model: {
+            showSaveDraftButton,
+            onDestroyDraft: () => {
+              return this.destroyDraft()
+                .then(() => {
+                  this.model.clearState();
+                  this.close();
+                })
+                .finally(() => {
+                  this.appEvents.trigger("composer:cancelled");
+                  resolve();
+                });
+            },
+            onSaveDraft: () => {
+              this._saveDraft();
+              this.model.clearState();
+              this.close();
+              this.appEvents.trigger("composer:cancelled");
+              return resolve();
+            },
           },
         });
       } else {
diff --git a/app/assets/javascripts/discourse/app/services/modal.js b/app/assets/javascripts/discourse/app/services/modal.js
index 800a39a0118..252600fc323 100644
--- a/app/assets/javascripts/discourse/app/services/modal.js
+++ b/app/assets/javascripts/discourse/app/services/modal.js
@@ -26,7 +26,6 @@ const KNOWN_LEGACY_MODALS = [
   "create-invite",
   "delete-topic-confirm",
   "delete-topic-disallowed",
-  "discard-draft",
   "download-calendar",
   "edit-slow-mode",
   "edit-topic-timer",
diff --git a/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs b/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs
deleted file mode 100644
index ebc52368f39..00000000000
--- a/app/assets/javascripts/discourse/app/templates/modal/discard-draft.hbs
+++ /dev/null
@@ -1,26 +0,0 @@
-<DModalBody @headerClass="hidden">
-  <div class="instructions">
-    {{i18n "post.cancel_composer.confirm"}}
-  </div>
-</DModalBody>
-
-<div class="modal-footer">
-  <DButton
-    @icon="far-trash-alt"
-    @label="post.cancel_composer.discard"
-    @class="btn-danger discard-draft"
-    @action={{action "destroyDraft"}}
-  />
-  {{#if this.showSaveDraftButton}}
-    <DButton
-      @label="post.cancel_composer.save_draft"
-      @class="save-draft"
-      @action={{action "saveDraftAndClose"}}
-    />
-  {{/if}}
-  <DButton
-    @label="post.cancel_composer.keep_editing"
-    @class="keep-editing"
-    @action={{action "dismissModal"}}
-  />
-</div>
\ No newline at end of file