diff --git a/_includes/components/widgets/toc.njk b/_includes/components/widgets/toc.njk
index 9470e02..de6e280 100644
--- a/_includes/components/widgets/toc.njk
+++ b/_includes/components/widgets/toc.njk
@@ -1,19 +1,27 @@
-{# Table of Contents Widget (for articles with headings) #}
-{% if toc and toc.length %}
-<is-land on:visible>
-<div class="widget">
-  <h3 class="widget-title">Contents</h3>
-  <nav class="toc" aria-label="Table of contents">
-    <ul class="space-y-1 text-sm">
-      {% for item in toc %}
-      <li class="{% if item.level == 3 %}ml-3{% elif item.level == 4 %}ml-6{% elif item.level == 5 %}ml-9{% elif item.level == 6 %}ml-12{% endif %}">
-        <a href="#{{ item.slug }}" class="text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400 hover:underline transition-colors">
-          {{ item.text }}
-        </a>
-      </li>
-      {% endfor %}
-    </ul>
-  </nav>
+{# Table of Contents Widget — client-side Alpine.js heading scanner with scroll spy #}
+{# Only renders on Articles/Notes with 3+ headings (h2-h4) #}
+{% if title or (not (bookmarkOf or bookmark_of or likeOf or like_of or repostOf or repost_of)) %}
+<div x-data="tocScanner" x-show="items.length > 0" x-cloak>
+  <div class="widget">
+    <h3 class="widget-title">Contents</h3>
+    <nav class="toc" aria-label="Table of contents">
+      <ul class="space-y-1 text-sm">
+        <template x-for="item in items" :key="item.id">
+          <li :class="{
+            'ml-3': item.level === 3,
+            'ml-6': item.level === 4
+          }">
+            <a :href="'#' + item.id"
+               x-text="item.text"
+               class="transition-colors hover:underline"
+               :class="item.active
+                 ? 'text-accent-600 dark:text-accent-400 font-medium'
+                 : 'text-surface-600 dark:text-surface-400 hover:text-accent-600 dark:hover:text-accent-400'"
+            ></a>
+          </li>
+        </template>
+      </ul>
+    </nav>
+  </div>
 </div>
-</is-land>
 {% endif %}
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 492a41f..6ba6999 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -79,6 +79,7 @@
   <script src="/js/comments.js?v={{ '/js/comments.js' | hash }}" defer></script>
   <script src="/js/fediverse-interact.js?v={{ '/js/fediverse-interact.js' | hash }}" defer></script>
   <script src="/js/lightbox.js?v={{ '/js/lightbox.js' | hash }}" defer></script>
+  <script src="/js/toc-scanner.js?v={{ '/js/toc-scanner.js' | hash }}" defer></script>
   <script defer src="/js/vendor/alpine-collapse.min.js?v={{ '/js/vendor/alpine-collapse.min.js' | hash }}"></script>
   <script defer src="/js/vendor/alpine.min.js?v={{ '/js/vendor/alpine.min.js' | hash }}"></script>
   <style>[x-cloak] { display: none !important; }</style>
diff --git a/js/toc-scanner.js b/js/toc-scanner.js
new file mode 100644
index 0000000..1b0f904
--- /dev/null
+++ b/js/toc-scanner.js
@@ -0,0 +1,46 @@
+/**
+ * Alpine.js TOC scanner component.
+ * Scans .e-content for h2/h3/h4 headings with IDs,
+ * builds a table of contents, and highlights the
+ * current section via IntersectionObserver scroll spy.
+ */
+document.addEventListener("alpine:init", () => {
+  Alpine.data("tocScanner", () => ({
+    items: [],
+    _observer: null,
+
+    init() {
+      const content = document.querySelector(".e-content");
+      if (!content) return;
+
+      const headings = content.querySelectorAll("h2[id], h3[id], h4[id]");
+      if (headings.length < 3) return;
+
+      this.items = Array.from(headings).map((h) => ({
+        id: h.id,
+        text: h.textContent.replace(/^#\s*/, "").trim(),
+        level: parseInt(h.tagName[1]),
+        active: false,
+      }));
+
+      this._observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              this.items.forEach((item) => {
+                item.active = item.id === entry.target.id;
+              });
+            }
+          }
+        },
+        { rootMargin: "0px 0px -70% 0px" },
+      );
+
+      headings.forEach((h) => this._observer.observe(h));
+    },
+
+    destroy() {
+      if (this._observer) this._observer.disconnect();
+    },
+  }));
+});