diff --git a/assets/javascripts/discourse/connectors/topic-more-content/related-topics.gjs b/assets/javascripts/discourse/connectors/topic-more-content/related-topics.gjs
deleted file mode 100644
index 77514c1f..00000000
--- a/assets/javascripts/discourse/connectors/topic-more-content/related-topics.gjs
+++ /dev/null
@@ -1,57 +0,0 @@
-import Component from "@glimmer/component";
-import { service } from "@ember/service";
-import BasicTopicList from "discourse/components/basic-topic-list";
-import concatClass from "discourse/helpers/concat-class";
-import i18n from "discourse-common/helpers/i18n";
-
-const LIST_ID = "related-topics";
-
-export default class extends Component {
-  static shouldRender(args) {
-    return args.model.related_topics?.length;
-  }
-
-  @service store;
-  @service moreTopicsPreferenceTracking;
-
-  constructor() {
-    super(...arguments);
-    this.moreTopicsPreferenceTracking.registerTopicList({
-      name: i18n("discourse_ai.related_topics.pill"),
-      id: LIST_ID,
-      icon: "discourse-sparkles",
-    });
-  }
-
-  willDestroy() {
-    super.willDestroy(...arguments);
-    this.moreTopicsPreferenceTracking.removeTopicList(LIST_ID);
-  }
-
-  get hidden() {
-    return this.moreTopicsPreferenceTracking.selectedTab !== LIST_ID;
-  }
-
-  get relatedTopics() {
-    return this.args.outletArgs.model.related_topics.map((topic) =>
-      this.store.createRecord("topic", topic)
-    );
-  }
-
-  <template>
-    <div
-      role="complementary"
-      aria-labelledby="related-topics-title"
-      id="related-topics"
-      class={{concatClass "more-topics__list" (if this.hidden "hidden")}}
-    >
-      <h3 id="related-topics-title" class="more-topics__list-title">
-        {{i18n "discourse_ai.related_topics.title"}}
-      </h3>
-
-      <div class="topics">
-        <BasicTopicList @topics={{this.relatedTopics}} />
-      </div>
-    </div>
-  </template>
-}
diff --git a/assets/javascripts/discourse/connectors/topic-more-content/related-topics.hbs b/assets/javascripts/discourse/connectors/topic-more-content/related-topics.hbs
new file mode 100644
index 00000000..2471ab37
--- /dev/null
+++ b/assets/javascripts/discourse/connectors/topic-more-content/related-topics.hbs
@@ -0,0 +1,15 @@
+<div
+  id="related-topics"
+  class="more-topics__list {{if this.hidden 'hidden'}}"
+  role="complementary"
+  aria-labelledby="related-topics-title"
+  {{did-insert this.registerList}}
+  {{will-destroy this.removeList}}
+>
+  <h3 id="related-topics-title" class="more-topics__list-title">
+    {{i18n "discourse_ai.related_topics.title"}}
+  </h3>
+  <div class="topics">
+    <BasicTopicList @topics={{this.relatedTopics}} />
+  </div>
+</div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/connectors/topic-more-content/related-topics.js b/assets/javascripts/discourse/connectors/topic-more-content/related-topics.js
new file mode 100644
index 00000000..a1996dad
--- /dev/null
+++ b/assets/javascripts/discourse/connectors/topic-more-content/related-topics.js
@@ -0,0 +1,41 @@
+import Component from "@glimmer/component";
+import { action, computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+import I18n from "I18n";
+
+export default class extends Component {
+  static shouldRender(args) {
+    return (args.model.related_topics?.length || 0) > 0;
+  }
+
+  @service store;
+  @service site;
+  @service moreTopicsPreferenceTracking;
+
+  listId = "related-topics";
+
+  @computed("moreTopicsPreferenceTracking.selectedTab")
+  get hidden() {
+    return this.moreTopicsPreferenceTracking.selectedTab !== this.listId;
+  }
+
+  get relatedTopics() {
+    return this.args.outletArgs.model.related_topics.map((topic) =>
+      this.store.createRecord("topic", topic)
+    );
+  }
+
+  @action
+  registerList() {
+    this.moreTopicsPreferenceTracking.registerTopicList({
+      name: I18n.t("discourse_ai.related_topics.pill"),
+      id: this.listId,
+      icon: "discourse-sparkles",
+    });
+  }
+
+  @action
+  removeList() {
+    this.moreTopicsPreferenceTracking.removeTopicList(this.listId);
+  }
+}