diff --git a/frontend/index.html b/frontend/index.html
index fd4f855..15f65f1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1949,6 +1949,9 @@ async function loadMitre() {
       const borderColor = t.rule_count >= 20 ? 'border-l-purple-500' : t.rule_count >= 5 ? 'border-l-blue-500' : 'border-l-slate-600'
       const badgeColor  = t.rule_count >= 20 ? 'bg-purple-900/60 text-purple-300 border-purple-700' : t.rule_count >= 5 ? 'bg-blue-900/60 text-blue-300 border-blue-700' : 'bg-slate-800/60 text-slate-400 border-slate-700'
 
+      const bodyId  = 'mitre-body-'   + t.tactic.replace(/[^a-z0-9]/gi, '_')
+      const chevId  = 'mitre-chev-'   + t.tactic.replace(/[^a-z0-9]/gi, '_')
+
       const MAX_SHOWN = 12
       const chips = t.techniques.slice(0, MAX_SHOWN).map(tech =>
         `<span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs bg-slate-800/80 ring-1 ring-white/5 text-slate-400 font-mono" title="${esc(tech.name)}">${esc(tech.id || tech.name)}</span>`
@@ -1963,14 +1966,25 @@ async function loadMitre() {
         <button onclick="mitreToggleMore('${expandId}', this)"
           class="mt-1.5 text-xs text-purple-500 hover:text-purple-400 transition-colors">+${t.techniques.length - MAX_SHOWN} more</button>` : ''
 
-      return `<div class="bg-gradient-to-b from-gray-900 to-gray-950 ring-1 ring-white/5 rounded-xl p-4 border-l-4 ${borderColor} shadow-sm">
-        <div class="flex items-center justify-between mb-3">
-          <span class="font-semibold text-white text-sm">${esc(t.tactic)}</span>
-          <span class="px-2 py-0.5 rounded-full text-xs font-medium border ${badgeColor}">${t.rule_count} rule${t.rule_count !== 1 ? 's' : ''}</span>
-        </div>
-        ${t.techniques.length > 0 ? `
-          <div class="flex flex-wrap gap-1">${chips}</div>
-          ${moreSection}` : `<p class="text-xs text-slate-600">No technique IDs mapped</p>`}
+      const techCount = t.techniques.length
+      const bodyContent = techCount > 0
+        ? `<div class="flex flex-wrap gap-1">${chips}</div>${moreSection}`
+        : `<p class="text-xs text-slate-600">No technique IDs mapped</p>`
+
+      return `<div class="bg-gradient-to-b from-gray-900 to-gray-950 ring-1 ring-white/5 rounded-xl border-l-4 ${borderColor} shadow-sm overflow-hidden">
+        <button onclick="mitreToggleTactic('${bodyId}','${chevId}')" class="w-full flex items-center justify-between px-4 py-3 hover:bg-white/[0.03] transition-colors text-left">
+          <div class="flex items-center gap-2.5">
+            <span class="font-semibold text-white text-sm">${esc(t.tactic)}</span>
+            ${techCount > 0 ? `<span class="text-xs text-slate-500">${techCount} technique${techCount !== 1 ? 's' : ''}</span>` : ''}
+          </div>
+          <div class="flex items-center gap-2 shrink-0">
+            <span class="px-2 py-0.5 rounded-full text-xs font-medium border ${badgeColor}">${t.rule_count} rule${t.rule_count !== 1 ? 's' : ''}</span>
+            <svg id="${chevId}" class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+            </svg>
+          </div>
+        </button>
+        <div id="${bodyId}" class="hidden px-4 pb-3 pt-1 border-t border-white/5">${bodyContent}</div>
       </div>`
     }).join('')
   } catch(e) {
@@ -1978,6 +1992,14 @@ async function loadMitre() {
   }
 }
 
+function mitreToggleTactic(bodyId, chevId) {
+  const body = document.getElementById(bodyId)
+  const chev  = document.getElementById(chevId)
+  if (!body) return
+  const hidden = body.classList.toggle('hidden')
+  if (chev) chev.style.transform = hidden ? '' : 'rotate(180deg)'
+}
+
 function mitreToggleMore(id, btn) {
   const el = document.getElementById(id)
   if (!el) return