diff --git a/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.hbs b/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.hbs
index d88fd52..0e0135c 100644
--- a/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.hbs
+++ b/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.hbs
@@ -1,5 +1,5 @@
-{{d-button
+<DButton
   class="btn-primary"
-  action=(action "showTOCOverlay")
-  label=(theme-prefix "table_of_contents")
-}}
\ No newline at end of file
+  @action={{this.showTOCOverlay}}
+  @label={{theme-prefix "table_of_contents"}}
+/>
\ No newline at end of file
diff --git a/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.js b/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.js
index c413a9d..41476f0 100644
--- a/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.js
+++ b/javascripts/discourse/connectors/after-topic-progress/d-toc-mini.js
@@ -1,7 +1,9 @@
-export default {
-  actions: {
-    showTOCOverlay() {
-      document.querySelector(".d-toc-wrapper").classList.toggle("overlay");
-    },
-  },
-};
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+
+export default class DTocMini extends Component {
+  @action
+  showTOCOverlay() {
+    document.querySelector(".d-toc-wrapper").classList.toggle("overlay");
+  }
+}