diff --git a/css/changelog.css b/css/changelog.css
index 985958c..7cd15b6 100644
--- a/css/changelog.css
+++ b/css/changelog.css
@@ -165,10 +165,17 @@
 .changelog-date-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: 0.75rem;
     padding-bottom: 0.75rem;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0;
     border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s ease;
+}
+
+.changelog-date-header:hover {
+    border-bottom-color: var(--status-green-dim);
 }
 
 .changelog-date-header .changelog-date {
@@ -187,6 +194,50 @@
     letter-spacing: 1px;
 }
 
+.changelog-date-summary {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    letter-spacing: 1px;
+    margin-left: auto;
+}
+
+/* ─── Toggle Arrow ───────────────────────────────────── */
+.changelog-toggle-arrow {
+    font-size: 0.65rem;
+    color: var(--status-green);
+    transition: transform 0.3s ease;
+    display: inline-block;
+    width: 0.8rem;
+    flex-shrink: 0;
+}
+
+.changelog-entry:not(.collapsed) .changelog-toggle-arrow {
+    transform: rotate(90deg);
+}
+
+/* ─── Collapsible Content ────────────────────────────── */
+.changelog-content {
+    max-height: 2000px;
+    overflow: hidden;
+    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
+    opacity: 1;
+    margin-top: 0.75rem;
+}
+
+.changelog-entry.collapsed .changelog-content {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+}
+
+.changelog-entry.collapsed .changelog-date-header {
+    border-bottom-color: transparent;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+
 /* ─── Sub-entry within date group ────────────────────── */
 .changelog-sub-entry {
     padding: 0.6rem 0;
diff --git a/js/changelog.js b/js/changelog.js
index c4ab57b..ff2f09c 100644
--- a/js/changelog.js
+++ b/js/changelog.js
@@ -60,22 +60,32 @@
         // Timeline — grouped by date
         html += `<div class="changelog-timeline">`;
 
-        for (const group of grouped) {
+        for (let gi = 0; gi < grouped.length; gi++) {
+            const group = grouped[gi];
             // Version range for this date
             const versions = group.entries.map(e => e.version);
             const versionRange = versions.length > 1
                 ? `v${esc(versions[versions.length - 1])} — v${esc(versions[0])}`
                 : `v${esc(versions[0])}`;
 
-            html += `<div class="changelog-entry">`;
+            // Count total changes for this date group
+            const dateChanges = group.entries.reduce((sum, e) => sum + (e.changes ? e.changes.length : 0), 0);
+            const entryCount = group.entries.length;
+
+            html += `<div class="changelog-entry collapsed" data-group="${gi}">`;
             html += `<div class="changelog-entry-card">`;
 
-            // Date header
-            html += `<div class="changelog-date-header">`;
+            // Date header (clickable)
+            html += `<div class="changelog-date-header" onclick="this.closest('.changelog-entry').classList.toggle('collapsed')">`;
+            html += `<span class="changelog-toggle-arrow">▶</span>`;
             html += `<span class="changelog-date">${formatDate(group.date)}</span>`;
             html += `<span class="changelog-version-range">${versionRange}</span>`;
+            html += `<span class="changelog-date-summary">${entryCount} update${entryCount > 1 ? 's' : ''} · ${dateChanges} change${dateChanges > 1 ? 's' : ''}</span>`;
             html += `</div>`;
 
+            // Collapsible content
+            html += `<div class="changelog-content">`;
+
             // Each sub-entry within this date
             for (const entry of group.entries) {
                 const badge = entry.category || 'update';
@@ -98,6 +108,7 @@
                 html += `</div>`;
             }
 
+            html += `</div>`; // .changelog-content
             html += `</div></div>`;
         }