diff --git a/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.gjs b/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.gjs
new file mode 100644
index 00000000000..cb39c68b2a6
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.gjs
@@ -0,0 +1,67 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import avatar from "discourse/helpers/avatar";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+export default class ReviewableClaimedTopic extends Component {
+  @service currentUser;
+  @service siteSettings;
+  @service store;
+
+  get enabled() {
+    return this.siteSettings.reviewable_claiming !== "disabled";
+  }
+
+  @action
+  async unclaim() {
+    try {
+      await ajax(`/reviewable_claimed_topics/${this.args.topicId}`, {
+        type: "DELETE",
+      });
+      this.args.onClaim(null);
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  @action
+  async claim() {
+    const claim = this.store.createRecord("reviewable-claimed-topic");
+
+    try {
+      await claim.save({ topic_id: this.args.topicId });
+      this.args.onClaim(this.currentUser);
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  <template>
+    {{#if this.enabled}}
+      <div class="reviewable-claimed-topic">
+        {{#if @claimedBy}}
+          <div class="claimed-by">
+            {{avatar @claimedBy imageSize="small"}}
+            <span class="claimed-username">{{@claimedBy.username}}</span>
+          </div>
+          <DButton
+            @icon="times"
+            @action={{this.unclaim}}
+            @title="review.unclaim.help"
+            class="btn-small unclaim"
+          />
+        {{else}}
+          <DButton
+            @icon="user-plus"
+            @title="review.claim.title"
+            @action={{this.claim}}
+            class="btn-small claim"
+          />
+        {{/if}}
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.hbs b/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.hbs
deleted file mode 100644
index 774a4c879d2..00000000000
--- a/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-{{#if this.enabled}}
-  <div class="reviewable-claimed-topic">
-    {{#if this.claimedBy}}
-      <div class="claimed-by">
-        {{avatar this.claimedBy imageSize="small"}}
-        <span class="claimed-username">{{this.claimedBy.username}}</span>
-      </div>
-      <DButton
-        @icon="times"
-        @action={{action "unclaim"}}
-        @disabled={{this.unassigning}}
-        @title="review.unclaim.help"
-        class="btn-small unclaim"
-      />
-    {{else}}
-      <DButton
-        @icon="user-plus"
-        @title="review.claim.title"
-        @action={{action "claim"}}
-        class="btn-small claim"
-      />
-    {{/if}}
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.js b/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.js
deleted file mode 100644
index 9693d0cabf3..00000000000
--- a/app/assets/javascripts/discourse/app/components/reviewable-claimed-topic.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Component from "@ember/component";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default Component.extend({
-  tagName: "",
-
-  @discourseComputed
-  enabled() {
-    return this.siteSettings.reviewable_claiming !== "disabled";
-  },
-
-  actions: {
-    unclaim() {
-      ajax(`/reviewable_claimed_topics/${this.topicId}`, {
-        type: "DELETE",
-      }).then(() => {
-        this.set("claimedBy", null);
-      });
-    },
-
-    claim() {
-      let claim = this.store.createRecord("reviewable-claimed-topic");
-
-      claim
-        .save({ topic_id: this.topicId })
-        .then(() => {
-          this.set("claimedBy", this.currentUser);
-        })
-        .catch(popupAjaxError);
-    },
-  },
-});
diff --git a/app/assets/javascripts/discourse/app/components/reviewable-item.hbs b/app/assets/javascripts/discourse/app/components/reviewable-item.hbs
index 0bd1e763041..ef65029ffda 100644
--- a/app/assets/javascripts/discourse/app/components/reviewable-item.hbs
+++ b/app/assets/javascripts/discourse/app/components/reviewable-item.hbs
@@ -84,6 +84,7 @@
           <ReviewableClaimedTopic
             @topicId={{this.topicId}}
             @claimedBy={{this.reviewable.claimed_by}}
+            @onClaim={{fn (mut this.reviewable.claimed_by)}}
           />
         </div>
       {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/review-topics.hbs b/app/assets/javascripts/discourse/app/templates/review-topics.hbs
index 5bed189751f..faefc68850e 100644
--- a/app/assets/javascripts/discourse/app/templates/review-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/review-topics.hbs
@@ -29,6 +29,7 @@
             <ReviewableClaimedTopic
               @topicId={{rt.id}}
               @claimedBy={{rt.claimed_by}}
+              @onClaim={{fn (mut rt.claimed_by)}}
             />
             <LinkTo
               @route="review.index"