diff --git a/webui/index.html b/webui/index.html
index e5834383..458e9049 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -344,6 +344,7 @@
                 <a class="nav-button" data-video-page="video-watchlist" href="#">
                     <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></span>
                     <span class="nav-text">Watchlist</span>
+                    <span class="dl-nav-badge hidden" data-video-watchlist-badge>0</span>
                 </a>
                 <a class="nav-button" data-video-page="video-wishlist" href="#">
                     <span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></span>
diff --git a/webui/static/video/video-watchlist.js b/webui/static/video/video-watchlist.js
index c224bb63..4994078e 100644
--- a/webui/static/video/video-watchlist.js
+++ b/webui/static/video/video-watchlist.js
@@ -58,10 +58,24 @@
             esc(it.title) + '</span>' + meta + '</div></a>';
     }
 
+    function updateNavBadge(counts) {
+        var b = $('[data-video-watchlist-badge]'); if (!b) return;
+        var n = counts ? ((counts.show || 0) + (counts.person || 0)) : 0;
+        b.textContent = n;
+        b.classList.toggle('hidden', !n);
+    }
+    function refreshBadge() {
+        fetch('/api/video/watchlist/counts', { headers: { Accept: 'application/json' } })
+            .then(function (r) { return r.ok ? r.json() : null; })
+            .then(function (d) { if (d && d.success) updateNavBadge(d); })
+            .catch(function () { /* ignore */ });
+    }
+
     function setCounts(counts) {
         state.counts = { show: (counts && counts.show) || 0, person: (counts && counts.person) || 0 };
         var cs = $('[data-vwlp-count-show]'); if (cs) cs.textContent = state.counts.show;
         var cp = $('[data-vwlp-count-person]'); if (cp) cp.textContent = state.counts.person;
+        updateNavBadge(state.counts);
     }
 
     function updatePagination(p) {
@@ -132,7 +146,8 @@
     // un-followed card drops and counts/pagination stay correct.
     function onChanged() {
         var grid = $('[data-vwlp-grid]');
-        if (state.loaded && grid && grid.offsetParent !== null) load();
+        if (grid && grid.offsetParent !== null) load();   // visible → reload (refreshes badge via setCounts)
+        else refreshBadge();                              // not visible → keep the nav badge current
     }
 
     function wire() {
@@ -187,6 +202,7 @@
     function init() {
         wire();
         document.addEventListener('soulsync:video-page-shown', onShown);
+        refreshBadge();   // seed the nav badge on boot
     }
 
     if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);