diff --git a/js/docsView.js b/js/docsView.js
index 7c0366ec..59a37fc9 100644
--- a/js/docsView.js
+++ b/js/docsView.js
@@ -105,21 +105,35 @@ function buildLink(item) {
   return link;
 }
 
+function getChevronIcon(expanded) {
+  if (expanded) {
+    // Chevron Down
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+    </svg>`;
+  }
+  // Chevron Right
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
+    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+  </svg>`;
+}
+
 function buildToggleButton(item, controlsId, expanded, groupList) {
   const button = document.createElement("button");
   button.type = "button";
-  button.className = "btn-ghost btn-xs";
+  button.className = "btn-ghost btn-xs btn-square text-muted hover:text-text-primary";
   button.setAttribute("aria-expanded", expanded ? "true" : "false");
   button.setAttribute("aria-controls", controlsId);
   button.setAttribute("aria-label", `Toggle ${item.title || item.slug} section`);
-  button.textContent = expanded ? "Hide" : "Show";
+  button.innerHTML = getChevronIcon(expanded);
   button.addEventListener("click", () => {
     const isExpanded = button.getAttribute("aria-expanded") === "true";
     const nextExpanded = !isExpanded;
     button.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
-    button.textContent = nextExpanded ? "Hide" : "Show";
+    button.innerHTML = getChevronIcon(nextExpanded);
     if (groupList) {
       groupList.hidden = !nextExpanded;
+      groupList.classList.toggle("hidden", !nextExpanded);
     }
   });
   return button;
@@ -152,6 +166,9 @@ function renderTocItems(items, container, level = 0, groupPrefix = "docs-toc") {
       childList.id = groupId;
       childList.classList.add("ml-md", "border-l", "border-border", "pl-md");
       childList.hidden = !expanded;
+      if (!expanded) {
+        childList.classList.add("hidden");
+      }
 
       const toggle = buildToggleButton(item, groupId, expanded, childList);
       row.appendChild(toggle);
@@ -220,8 +237,9 @@ function updateActiveToc(slug) {
       groups.forEach((group) => {
         if (group?.button && group?.list) {
           group.button.setAttribute("aria-expanded", "true");
-          group.button.textContent = "Hide";
+          group.button.innerHTML = getChevronIcon(true);
           group.list.hidden = false;
+          group.list.classList.remove("hidden");
         }
       });
     }
diff --git a/package-lock.json b/package-lock.json
index 21870fbe..6d45ef6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,14 @@
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@floating-ui/dom": "^1.7.4",
+        "@noble/hashes": "^2.0.1",
         "highlight.js": "^11.11.1",
         "jsdom": "^27.4.0",
         "marked": "^17.0.1",
         "ws": "^8.19.0"
       },
       "devDependencies": {
+        "@noble/hashes": "^2.0.1",
         "@playwright/test": "^1.58.0",
         "@tailwindcss/typography": "^0.5.15",
         "autoprefixer": "^10.4.23",
diff --git a/package.json b/package.json
index 4cf466a3..aa0a146c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "telemetry:aggregate": "node scripts/agent/telemetry-aggregator.mjs"
   },
   "devDependencies": {
+    "@noble/hashes": "^2.0.1",
     "@playwright/test": "^1.58.0",
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.23",
@@ -54,6 +55,7 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
+    "@noble/hashes": "^2.0.1",
     "highlight.js": "^11.11.1",
     "jsdom": "^27.4.0",
     "marked": "^17.0.1",
diff --git a/tests/ui/video-list-view-popular-tags.test.mjs b/tests/ui/video-list-view-popular-tags.test.mjs
index 5d07834e..e2f98a68 100644
--- a/tests/ui/video-list-view-popular-tags.test.mjs
+++ b/tests/ui/video-list-view-popular-tags.test.mjs
@@ -76,7 +76,7 @@ test("VideoListView renders sorted popular tag pills", () => {
   assert.equal(buttons.length, 3);
   assert.deepEqual(
     Array.from(buttons, (button) => button.dataset.tag),
-    ["Nostr", "Video", "Learning"],
+    ["#Nostr", "#Video", "#Learning"],
   );
 });
 
@@ -90,7 +90,7 @@ test("VideoListView applies tag preference variants to popular tags", () => {
   view.mount(listRoot);
   view.setPopularTagsContainer(tagsRoot);
   view.setTagPreferenceStateResolver((tag) =>
-    tag === "Nostr" ? "interest" : tag === "Video" ? "disinterest" : "neutral",
+    tag === "#Nostr" ? "interest" : tag === "#Video" ? "disinterest" : "neutral",
   );
 
   const videos = [
diff --git a/views/docs.html b/views/docs.html
index 8ed33524..21197b7a 100644
--- a/views/docs.html
+++ b/views/docs.html
@@ -19,12 +19,26 @@
           </h2>
           <button
             type="button"
-            class="btn-ghost lg:hidden"
+            class="btn-ghost lg:hidden flex items-center gap-2"
             aria-controls="docsTocDrawer"
             aria-expanded="false"
             data-docs-toc-toggle
           >
-            Contents
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+            <span>Contents</span>
           </button>
         </header>
         <div id="markdown-container" class="markdown-prose">