diff --git a/javascripts/discourse/components/table-of-contents.js b/javascripts/discourse/components/table-of-contents.js
index b8bdf9a..f3fa26c 100644
--- a/javascripts/discourse/components/table-of-contents.js
+++ b/javascripts/discourse/components/table-of-contents.js
@@ -1,3 +1,10 @@
 import Component from "@glimmer/component";
+import { action } from "@ember/object";
 
-export default class TableOfContents extends Component {}
+export default class TableOfContents extends Component {
+  @action
+  closeOverlay(e) {
+    e.preventDefault();
+    document.querySelector(".d-toc-wrapper").classList.remove("overlay");
+  }
+}
diff --git a/javascripts/discourse/initializers/disco-toc-main.js b/javascripts/discourse/initializers/disco-toc-main.js
index 7ec2681..5e48a9d 100644
--- a/javascripts/discourse/initializers/disco-toc-main.js
+++ b/javascripts/discourse/initializers/disco-toc-main.js
@@ -207,13 +207,6 @@ export default {
         e.preventDefault();
         return false;
       }
-
-      // close overlay
-      if (e.target.closest("a").classList.contains("d-toc-close")) {
-        document.querySelector(".d-toc-wrapper").classList.remove("overlay");
-        e.preventDefault();
-        return false;
-      }
     }
 
     if (!document.querySelector(".d-toc-wrapper.overlay")) {
diff --git a/javascripts/discourse/templates/components/table-of-contents.hbs b/javascripts/discourse/templates/components/table-of-contents.hbs
index 5149390..830d1e3 100644
--- a/javascripts/discourse/templates/components/table-of-contents.hbs
+++ b/javascripts/discourse/templates/components/table-of-contents.hbs
@@ -7,8 +7,11 @@
     >
       {{d-icon "downward"}}
     </a>
-    <a href="#" class="d-toc-close">{{d-icon "times"}}</a>
+    <a href class="d-toc-close" {{on "click" this.closeOverlay}}>
+      {{d-icon "times"}}
+    </a>
   </div>
+
   <div id="d-toc">
   </div>
 </div>