diff --git a/assets/javascripts/discourse/components/wizard-subscription-container.hbs b/assets/javascripts/discourse/components/wizard-subscription-container.hbs
new file mode 100644
index 00000000..044b57f6
--- /dev/null
+++ b/assets/javascripts/discourse/components/wizard-subscription-container.hbs
@@ -0,0 +1,14 @@
+<div class="wizard-subscription-container {{if this.subscription.subscribed "subscribed"}}">
+  <div class="subscription-header">
+    <h4>{{i18n "admin.wizard.subscription.title"}}</h4>
+
+    <a href={{subscriptionLink}} title={{i18n subscribedTitle}}>
+      {{d-icon subscribedIcon}}
+      {{i18n subscribedLabel}}
+    </a>
+  </div>
+
+  <div class="subscription-settings">
+    {{yield}}
+  </div>
+</div>
\ No newline at end of file
diff --git a/assets/javascripts/discourse/components/wizard-subscription-container.js b/assets/javascripts/discourse/components/wizard-subscription-container.js
new file mode 100644
index 00000000..25cb3973
--- /dev/null
+++ b/assets/javascripts/discourse/components/wizard-subscription-container.js
@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+
+export default class WizardSubscriptionContainer extends Component {
+  @service subscription;
+
+  @computed("subscription.subscribed")
+  get subscribedIcon() {
+    return this.subscription.subscribed ? "check" : "times";
+  };
+
+  @computed("subscription.subscribed")
+  get subscribedLabel() {
+    return `admin.wizard.subscription.${
+      this.subscription.subscribed ? "subscribed" : "not_subscribed"
+    }.label`;
+  };
+
+  @computed("subscription.subscribed")
+  get subscribedTitle() {
+    return `admin.wizard.subscription.${
+      this.subscription.subscribed ? "subscribed" : "not_subscribed"
+    }.title`;
+  };
+};
diff --git a/assets/javascripts/discourse/components/wizard-subscription-container.js.es6 b/assets/javascripts/discourse/components/wizard-subscription-container.js.es6
deleted file mode 100644
index 8c750519..00000000
--- a/assets/javascripts/discourse/components/wizard-subscription-container.js.es6
+++ /dev/null
@@ -1,27 +0,0 @@
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
-
-export default Component.extend({
-  classNameBindings: [":wizard-subscription-container", "subscribed"],
-  subscription: service(),
-
-  @discourseComputed("subscription.subscribed")
-  subscribedIcon(subscribed) {
-    return subscribed ? "check" : "times";
-  },
-
-  @discourseComputed("subscription.subscribed")
-  subscribedLabel(subscribed) {
-    return `admin.wizard.subscription.${
-      subscribed ? "subscribed" : "not_subscribed"
-    }.label`;
-  },
-
-  @discourseComputed("subscription.subscribed")
-  subscribedTitle(subscribed) {
-    return `admin.wizard.subscription.${
-      subscribed ? "subscribed" : "not_subscribed"
-    }.title`;
-  },
-});
diff --git a/assets/javascripts/discourse/templates/components/wizard-subscription-container.hbs b/assets/javascripts/discourse/templates/components/wizard-subscription-container.hbs
deleted file mode 100644
index b8031bfe..00000000
--- a/assets/javascripts/discourse/templates/components/wizard-subscription-container.hbs
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="subscription-header">
-  <h4>{{i18n "admin.wizard.subscription.title"}}</h4>
-
-  <a href={{subscriptionLink}} title={{i18n subscribedTitle}}>
-    {{d-icon subscribedIcon}}
-    {{i18n subscribedLabel}}
-  </a>
-</div>
-
-<div class="subscription-settings">
-  {{yield}}
-</div>
\ No newline at end of file