diff --git a/assets/javascripts/discourse/components/modal/query-help.gjs b/assets/javascripts/discourse/components/modal/query-help.gjs
new file mode 100644
index 00000000..539423ed
--- /dev/null
+++ b/assets/javascripts/discourse/components/modal/query-help.gjs
@@ -0,0 +1,19 @@
+import DModal from "discourse/components/d-modal";
+import htmlSafe from "discourse-common/helpers/html-safe";
+import i18n from "discourse-common/helpers/i18n";
+
+const QueryHelp = <template>
+  <DModal
+    @title={{i18n "explorer.help.modal_title"}}
+    @closeModal={{@closeModal}}
+  >
+    <:body>
+      {{htmlSafe (i18n "explorer.help.auto_resolution")}}
+      {{htmlSafe (i18n "explorer.help.custom_params")}}
+      {{htmlSafe (i18n "explorer.help.default_values")}}
+      {{htmlSafe (i18n "explorer.help.data_types")}}
+    </:body>
+  </DModal>
+</template>;
+
+export default QueryHelp;
diff --git a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js
index 17b11974..ce8035b4 100644
--- a/assets/javascripts/discourse/controllers/admin-plugins-explorer.js
+++ b/assets/javascripts/discourse/controllers/admin-plugins-explorer.js
@@ -5,14 +5,15 @@ import { inject as service } from "@ember/service";
 import { Promise } from "rsvp";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import showModal from "discourse/lib/show-modal";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "I18n";
+import QueryHelp from "discourse/plugins/discourse-data-explorer/discourse/components/modal/query-help";
 import Query from "discourse/plugins/discourse-data-explorer/discourse/models/query";
 
 const NoQuery = Query.create({ name: "No queries", fake: true, group_ids: [] });
 
 export default class PluginsExplorerController extends Controller {
+  @service modal;
   @service dialog;
   @service appEvents;
   @service router;
@@ -270,7 +271,7 @@ export default class PluginsExplorerController extends Controller {
 
   @action
   showHelpModal() {
-    showModal("query-help");
+    this.modal.show(QueryHelp);
   }
 
   @action
diff --git a/assets/javascripts/discourse/templates/modal/query-help.hbs b/assets/javascripts/discourse/templates/modal/query-help.hbs
deleted file mode 100644
index 202f2e14..00000000
--- a/assets/javascripts/discourse/templates/modal/query-help.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-<DModalBody @title="explorer.help.modal_title">
-  {{html-safe (i18n "explorer.help.auto_resolution")}}
-  {{html-safe (i18n "explorer.help.custom_params")}}
-  {{html-safe (i18n "explorer.help.default_values")}}
-  {{html-safe (i18n "explorer.help.data_types")}}
-</DModalBody>
\ No newline at end of file