diff --git a/app/assets/javascripts/discourse/app/components/modal/user-status.js b/app/assets/javascripts/discourse/app/components/modal/user-status.gjs
similarity index 50%
rename from app/assets/javascripts/discourse/app/components/modal/user-status.js
rename to app/assets/javascripts/discourse/app/components/modal/user-status.gjs
index 9f765d2f81a..ac6d6718692 100644
--- a/app/assets/javascripts/discourse/app/components/modal/user-status.js
+++ b/app/assets/javascripts/discourse/app/components/modal/user-status.gjs
@@ -1,13 +1,20 @@
 import Component from "@glimmer/component";
+import { Input } from "@ember/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import ItsATrap from "@discourse/itsatrap";
 import { TrackedObject } from "@ember-compat/tracked-built-ins";
+import DButton from "discourse/components/d-button";
+import DModal from "discourse/components/d-modal";
+import DModalCancel from "discourse/components/d-modal-cancel";
+import TimeShortcutPicker from "discourse/components/time-shortcut-picker";
+import UserStatusPicker from "discourse/components/user-status-picker";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import {
   TIME_SHORTCUT_TYPES,
   timeShortcuts,
 } from "discourse/lib/time-shortcut";
+import { i18n } from "discourse-i18n";
 
 export default class UserStatusModal extends Component {
   @service currentUser;
@@ -90,4 +97,61 @@ export default class UserStatusModal extends Component {
       this.#handleError(e);
     }
   }
+
+  <template>
+    <DModal
+      @title={{i18n "user_status.set_custom_status"}}
+      @closeModal={{@closeModal}}
+      class="user-status"
+    >
+      <:body>
+        <div class="control-group">
+          <UserStatusPicker @status={{this.status}} />
+        </div>
+
+        {{#unless @model.hidePauseNotifications}}
+          <div class="control-group pause-notifications">
+            <label class="checkbox-label">
+              <Input @type="checkbox" @checked={{@model.pauseNotifications}} />
+              {{i18n "user_status.pause_notifications"}}
+            </label>
+          </div>
+        {{/unless}}
+
+        <div class="control-group control-group-remove-status">
+          <label class="control-label">
+            {{i18n "user_status.remove_status"}}
+          </label>
+
+          <TimeShortcutPicker
+            @timeShortcuts={{this.timeShortcuts}}
+            @hiddenOptions={{this.hiddenTimeShortcutOptions}}
+            @customLabels={{this.customTimeShortcutLabels}}
+            @prefilledDatetime={{this.prefilledDateTime}}
+            @onTimeSelected={{this.onTimeSelected}}
+            @_itsatrap={{this._itsatrap}}
+          />
+        </div>
+      </:body>
+
+      <:footer>
+        <DButton
+          @label="user_status.save"
+          @disabled={{this.saveDisabled}}
+          @action={{this.saveAndClose}}
+          class="btn-primary"
+        />
+
+        <DModalCancel @close={{@closeModal}} />
+
+        {{#if this.showDeleteButton}}
+          <DButton
+            @icon="trash-can"
+            @action={{this.delete}}
+            class="delete-status btn-danger"
+          />
+        {{/if}}
+      </:footer>
+    </DModal>
+  </template>
 }
diff --git a/app/assets/javascripts/discourse/app/components/modal/user-status.hbs b/app/assets/javascripts/discourse/app/components/modal/user-status.hbs
deleted file mode 100644
index 096a7fc52e5..00000000000
--- a/app/assets/javascripts/discourse/app/components/modal/user-status.hbs
+++ /dev/null
@@ -1,54 +0,0 @@
-<DModal
-  @title={{i18n "user_status.set_custom_status"}}
-  @closeModal={{@closeModal}}
-  class="user-status"
->
-  <:body>
-    <div class="control-group">
-      <UserStatusPicker @status={{this.status}} />
-    </div>
-
-    {{#unless @model.hidePauseNotifications}}
-      <div class="control-group pause-notifications">
-        <label class="checkbox-label">
-          <Input @type="checkbox" @checked={{@model.pauseNotifications}} />
-          {{i18n "user_status.pause_notifications"}}
-        </label>
-      </div>
-    {{/unless}}
-
-    <div class="control-group control-group-remove-status">
-      <label class="control-label">
-        {{i18n "user_status.remove_status"}}
-      </label>
-
-      <TimeShortcutPicker
-        @timeShortcuts={{this.timeShortcuts}}
-        @hiddenOptions={{this.hiddenTimeShortcutOptions}}
-        @customLabels={{this.customTimeShortcutLabels}}
-        @prefilledDatetime={{this.prefilledDateTime}}
-        @onTimeSelected={{this.onTimeSelected}}
-        @_itsatrap={{this._itsatrap}}
-      />
-    </div>
-  </:body>
-
-  <:footer>
-    <DButton
-      @label="user_status.save"
-      @disabled={{this.saveDisabled}}
-      @action={{this.saveAndClose}}
-      class="btn-primary"
-    />
-
-    <DModalCancel @close={{@closeModal}} />
-
-    {{#if this.showDeleteButton}}
-      <DButton
-        @icon="trash-can"
-        @action={{this.delete}}
-        class="delete-status btn-danger"
-      />
-    {{/if}}
-  </:footer>
-</DModal>
\ No newline at end of file