diff --git a/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.gjs b/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.gjs
new file mode 100644
index 00000000000..91e7939eafa
--- /dev/null
+++ b/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.gjs
@@ -0,0 +1,87 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import { notEq, or } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+
+export default class DialogHolder extends Component {
+  @service dialog;
+
+  @action
+  async handleButtonAction(btn) {
+    if (typeof btn.action === "function") {
+      await btn.action();
+    }
+
+    this.dialog.cancel();
+  }
+
+  <template>
+    <div
+      aria-labelledby={{this.dialog.titleElementId}}
+      aria-hidden="true"
+      id="dialog-holder"
+      class="dialog-container {{this.dialog.class}}"
+    >
+      <div class="dialog-overlay" data-a11y-dialog-hide></div>
+
+      {{#if this.dialog.type}}
+        <div class="dialog-content" role="document">
+          {{#if this.dialog.title}}
+            <div class="dialog-header">
+              <h3 id={{this.dialog.titleElementId}}>{{this.dialog.title}}</h3>
+              <DButton
+                @action={{this.dialog.cancel}}
+                @title="modal.close"
+                @icon="times"
+                class="btn-flat dialog-close close"
+              />
+            </div>
+          {{/if}}
+
+          {{#if (or this.dialog.message this.dialog.bodyComponent)}}
+            <div class="dialog-body">
+              {{#if this.dialog.bodyComponent}}
+                <this.dialog.bodyComponent
+                  @model={{this.dialog.bodyComponentModel}}
+                />
+              {{else if this.dialog.message}}
+                <p>{{htmlSafe this.dialog.message}}</p>
+              {{/if}}
+            </div>
+          {{/if}}
+
+          {{#if (notEq this.dialog.type "notice")}}
+            <div class="dialog-footer">
+              {{#each this.dialog.buttons as |button|}}
+                <DButton
+                  @action={{fn this.handleButtonAction button}}
+                  @translatedLabel={{button.label}}
+                  @icon={{button.icon}}
+                  class={{button.class}}
+                />
+              {{else}}
+                <DButton
+                  @action={{this.dialog.didConfirmWrapped}}
+                  @icon={{this.dialog.confirmButtonIcon}}
+                  @label={{this.dialog.confirmButtonLabel}}
+                  @disabled={{this.dialog.confirmButtonDisabled}}
+                  class={{this.dialog.confirmButtonClass}}
+                />
+                {{#if this.dialog.shouldDisplayCancel}}
+                  <DButton
+                    @action={{this.dialog.cancel}}
+                    @label={{this.dialog.cancelButtonLabel}}
+                    class={{this.dialog.cancelButtonClass}}
+                  />
+                {{/if}}
+              {{/each}}
+            </div>
+          {{/if}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.hbs b/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.hbs
deleted file mode 100644
index 16f06d85c9c..00000000000
--- a/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.hbs
+++ /dev/null
@@ -1,64 +0,0 @@
-<div
-  id="dialog-holder"
-  class="dialog-container {{this.dialog.class}}"
-  aria-labelledby={{this.dialog.titleElementId}}
-  aria-hidden="true"
->
-  <div class="dialog-overlay" data-a11y-dialog-hide></div>
-
-  {{#if this.dialog.type}}
-    <div class="dialog-content" role="document">
-      {{#if this.dialog.title}}
-        <div class="dialog-header">
-          <h3 id={{this.dialog.titleElementId}}>{{this.dialog.title}}</h3>
-          <DButton
-            @icon="times"
-            @action={{action this.dialog.cancel}}
-            @title="modal.close"
-            class="btn-flat dialog-close close"
-          />
-        </div>
-      {{/if}}
-
-      {{#if (or this.dialog.message this.dialog.bodyComponent)}}
-        <div class="dialog-body">
-          {{#if this.dialog.bodyComponent}}
-            <this.dialog.bodyComponent
-              @model={{this.dialog.bodyComponentModel}}
-            />
-          {{else if this.dialog.message}}
-            <p>{{html-safe this.dialog.message}}</p>
-          {{/if}}
-        </div>
-      {{/if}}
-
-      {{#if (notEq this.dialog.type "notice")}}
-        <div class="dialog-footer">
-          {{#each this.dialog.buttons as |button|}}
-            <DButton
-              @icon={{button.icon}}
-              @action={{fn this.handleButtonAction button}}
-              @translatedLabel={{button.label}}
-              class={{button.class}}
-            />
-          {{else}}
-            <DButton
-              @disabled={{this.dialog.confirmButtonDisabled}}
-              @action={{this.dialog.didConfirmWrapped}}
-              @icon={{this.dialog.confirmButtonIcon}}
-              @label={{this.dialog.confirmButtonLabel}}
-              class={{this.dialog.confirmButtonClass}}
-            />
-            {{#if this.dialog.shouldDisplayCancel}}
-              <DButton
-                @action={{this.dialog.cancel}}
-                @label={{this.dialog.cancelButtonLabel}}
-                class={{this.dialog.cancelButtonClass}}
-              />
-            {{/if}}
-          {{/each}}
-        </div>
-      {{/if}}
-    </div>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.js b/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.js
deleted file mode 100644
index ae6eb853d61..00000000000
--- a/app/assets/javascripts/dialog-holder/addon/components/dialog-holder.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Component from "@glimmer/component";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-
-export default class DialogHolder extends Component {
-  @service dialog;
-
-  @action
-  async handleButtonAction(btn) {
-    if (btn.action && typeof btn.action === "function") {
-      await btn.action();
-    }
-
-    this.dialog.cancel();
-  }
-}
diff --git a/app/assets/javascripts/dialog-holder/package.json b/app/assets/javascripts/dialog-holder/package.json
index 017372ef00c..b040f19cb26 100644
--- a/app/assets/javascripts/dialog-holder/package.json
+++ b/app/assets/javascripts/dialog-holder/package.json
@@ -11,7 +11,8 @@
     "a11y-dialog": "8.0.4",
     "ember-auto-import": "^2.7.2",
     "ember-cli-babel": "^8.2.0",
-    "ember-cli-htmlbars": "^6.3.0"
+    "ember-cli-htmlbars": "^6.3.0",
+    "ember-template-imports": "^4.1.0"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.30",