diff --git a/app/assets/javascripts/discourse/app/components/user-badge.gjs b/app/assets/javascripts/discourse/app/components/user-badge.gjs
new file mode 100644
index 00000000000..a16286d6faf
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/user-badge.gjs
@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";
+import BadgeButton from "discourse/components/badge-button";
+
+export default class UserBadge extends Component {
+  get showGrantCount() {
+    return this.args.count > 1;
+  }
+
+  get badgeUrl() {
+    // NOTE: I tried using a link-to helper here but the queryParams mean it fails
+    let username = this.args.user?.username_lower;
+    username = username ? `?username=${username}` : "";
+    return this.args.badge.url + username;
+  }
+
+  <template>
+    <a class="user-card-badge-link" href={{this.badgeUrl}}>
+      <BadgeButton @badge={{@badge}}>
+        {{#if this.showGrantCount}}
+          <span class="count">&nbsp;(&times;{{@count}})</span>
+        {{/if}}
+      </BadgeButton>
+    </a>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/user-badge.hbs b/app/assets/javascripts/discourse/app/components/user-badge.hbs
deleted file mode 100644
index fd61b1c4874..00000000000
--- a/app/assets/javascripts/discourse/app/components/user-badge.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<a class="user-card-badge-link" href={{this.badgeUrl}}>
-  <BadgeButton @badge={{@badge}}>
-    {{#if this.showGrantCount}}
-      <span class="count">&nbsp;(&times;{{@count}})</span>
-    {{/if}}
-  </BadgeButton>
-</a>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/user-badge.js b/app/assets/javascripts/discourse/app/components/user-badge.js
deleted file mode 100644
index ae21334c03e..00000000000
--- a/app/assets/javascripts/discourse/app/components/user-badge.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Component.extend({
-  tagName: "",
-
-  @discourseComputed("count")
-  showGrantCount(count) {
-    return count && count > 1;
-  },
-
-  @discourseComputed("badge", "user")
-  badgeUrl() {
-    // NOTE: I tried using a link-to helper here but the queryParams mean it fails
-    let username = this.get("user.username_lower") || "";
-    username = username !== "" ? "?username=" + username : "";
-    return this.get("badge.url") + username;
-  },
-});