diff --git a/app/assets/javascripts/discourse/app/components/category-read-only-banner.gjs b/app/assets/javascripts/discourse/app/components/category-read-only-banner.gjs
new file mode 100644
index 00000000000..3530b4e0e44
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/category-read-only-banner.gjs
@@ -0,0 +1,25 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+
+export default class CategoryReadOnlyBanner extends Component {
+  @service currentUser;
+
+  get shouldShow() {
+    return (
+      this.args.category?.read_only_banner &&
+      this.args.readOnly &&
+      this.currentUser
+    );
+  }
+
+  <template>
+    {{#if this.shouldShow}}
+      <div class="row">
+        <div class="alert alert-info category-read-only-banner">
+          {{htmlSafe @category.read_only_banner}}
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/category-read-only-banner.hbs b/app/assets/javascripts/discourse/app/components/category-read-only-banner.hbs
deleted file mode 100644
index 50f83b08094..00000000000
--- a/app/assets/javascripts/discourse/app/components/category-read-only-banner.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-{{#if this.shouldShow}}
-  <div class="row">
-    <div class="alert alert-info category-read-only-banner">
-      {{html-safe this.category.read_only_banner}}
-    </div>
-  </div>
-{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/category-read-only-banner.js b/app/assets/javascripts/discourse/app/components/category-read-only-banner.js
deleted file mode 100644
index 495409e4780..00000000000
--- a/app/assets/javascripts/discourse/app/components/category-read-only-banner.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from "@ember/component";
-import { and } from "@ember/object/computed";
-import discourseComputed from "discourse-common/utils/decorators";
-
-export default class CategoryReadOnlyBanner extends Component {
-  @and("category.read_only_banner", "readOnly", "user") shouldShow;
-
-  @discourseComputed
-  user() {
-    return this.currentUser;
-  }
-}