diff --git a/assets/javascripts/discourse-user-notes/connectors/user-card-post-names/show-user-notes-on-card.gjs b/assets/javascripts/discourse-user-notes/connectors/user-card-post-names/show-user-notes-on-card.gjs
new file mode 100644
index 0000000..11b3748
--- /dev/null
+++ b/assets/javascripts/discourse-user-notes/connectors/user-card-post-names/show-user-notes-on-card.gjs
@@ -0,0 +1,54 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import emoji from "discourse/helpers/emoji";
+import icon from "discourse-common/helpers/d-icon";
+import I18n from "I18n";
+import { showUserNotes } from "discourse/plugins/discourse-user-notes/discourse-user-notes/lib/user-notes";
+
+export default class extends Component {
+  static shouldRender(args, context) {
+    const { siteSettings, currentUser } = context;
+    return siteSettings.user_notes_enabled && currentUser?.staff;
+  }
+
+  @service siteSettings;
+  @service currentUser;
+  @service store;
+
+  get userNotesCount() {
+    return parseInt(
+      this.args.outletArgs.user.get("user_notes_count") ||
+        this.args.outletArgs.user.get("custom_fields.user_notes_count") ||
+        0,
+      10
+    );
+  }
+
+  @action
+  showUserNotes() {
+    showUserNotes(this.store, this.args.outletArgs.user.id);
+  }
+
+  <template>
+    <div class="show-user-notes-on-card">
+      {{#if this.userNotesCount}}
+        <DButton
+          @translatedTitle={{I18n.t
+            "user_notes.show"
+            count=this.userNotesCount
+          }}
+          @action={{this.showUserNotes}}
+          class="btn-flat"
+        >
+          {{#if this.siteSettings.enable_emoji}}
+            {{emoji "pencil"}}
+          {{else}}
+            {{icon "sticky-note"}}
+          {{/if}}
+        </DButton>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/assets/javascripts/discourse-user-notes/connectors/user-card-post-names/show-user-notes-on-card.js b/assets/javascripts/discourse-user-notes/connectors/user-card-post-names/show-user-notes-on-card.js
deleted file mode 100644
index b6f3bc4..0000000
--- a/assets/javascripts/discourse-user-notes/connectors/user-card-post-names/show-user-notes-on-card.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { emojiUrlFor } from "discourse/lib/text";
-import { getOwner } from "discourse-common/lib/get-owner";
-import I18n from "I18n";
-import { showUserNotes } from "discourse/plugins/discourse-user-notes/discourse-user-notes/lib/user-notes";
-
-export default {
-  shouldRender(args, component) {
-    const { siteSettings, currentUser } = component;
-    return siteSettings.user_notes_enabled && currentUser && currentUser.staff;
-  },
-
-  setupComponent(args, component) {
-    const { user } = args;
-    const count =
-      user.user_notes_count || user.get("custom_fields.user_notes_count") || 0;
-
-    component.setProperties({
-      userNotesCount: count,
-      emojiEnabled: component.siteSettings.enable_emoji,
-      emojiUrl: emojiUrlFor("pencil"),
-      userNotesTitle: I18n.t("user_notes.show", { count }),
-    });
-  },
-
-  actions: {
-    showUserNotes() {
-      this.parentView.parentView._close();
-      const store = getOwner(this).lookup("service:store");
-      const user = this.get("args.user");
-      showUserNotes(store, user.id, (count) => {
-        if (this.isDestroying || this.isDestroyed) {
-          return;
-        }
-
-        this.set("userNotesCount", count);
-      });
-    },
-  },
-};
diff --git a/assets/javascripts/discourse-user-notes/templates/connectors/user-card-post-names/show-user-notes-on-card.hbs b/assets/javascripts/discourse-user-notes/templates/connectors/user-card-post-names/show-user-notes-on-card.hbs
deleted file mode 100644
index b3b62cf..0000000
--- a/assets/javascripts/discourse-user-notes/templates/connectors/user-card-post-names/show-user-notes-on-card.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-{{#if userNotesCount}}
-  <DButton
-    @translatedTitle={{userNotesTitle}}
-    @action={{action "showUserNotes"}}
-    class="btn btn-flat"
-  >
-    {{#if emojiEnabled}}
-      <img
-        src={{emojiUrl}}
-        title={{userNotesTitle}}
-        alt="pencil"
-        class="emoji"
-      />
-    {{else}}
-      {{d-icon "sticky-note"}}
-    {{/if}}
-  </DButton>
-{{/if}}
\ No newline at end of file