diff --git a/src/DotNetApiDiff/Reporting/HtmlTemplates/main-layout.scriban b/src/DotNetApiDiff/Reporting/HtmlTemplates/main-layout.scriban
index fdbd2b1..b70a2e5 100644
--- a/src/DotNetApiDiff/Reporting/HtmlTemplates/main-layout.scriban
+++ b/src/DotNetApiDiff/Reporting/HtmlTemplates/main-layout.scriban
@@ -56,22 +56,50 @@
         <section class="summary">
             <h2>📈 Summary</h2>
             <div class="summary-cards">
+                {{if result.summary.added_count > 0}}
+                <div class="summary-card added clickable" onclick="navigateToSection('added-items')">
+                    <div class="card-number">{{ result.summary.added_count }}</div>
+                    <div class="card-label">Added</div>
+                </div>
+                {{else}}
                 <div class="summary-card added">
                     <div class="card-number">{{ result.summary.added_count }}</div>
                     <div class="card-label">Added</div>
                 </div>
+                {{end}}
+                {{if result.summary.removed_count > 0}}
+                <div class="summary-card removed clickable" onclick="navigateToSection('removed-items')">
+                    <div class="card-number">{{ result.summary.removed_count }}</div>
+                    <div class="card-label">Removed</div>
+                </div>
+                {{else}}
                 <div class="summary-card removed">
                     <div class="card-number">{{ result.summary.removed_count }}</div>
                     <div class="card-label">Removed</div>
                 </div>
+                {{end}}
+                {{if result.summary.modified_count > 0}}
+                <div class="summary-card modified clickable" onclick="navigateToSection('modified-items')">
+                    <div class="card-number">{{ result.summary.modified_count }}</div>
+                    <div class="card-label">Modified</div>
+                </div>
+                {{else}}
                 <div class="summary-card modified">
                     <div class="card-number">{{ result.summary.modified_count }}</div>
                     <div class="card-label">Modified</div>
                 </div>
+                {{end}}
+                {{if result.summary.breaking_changes_count > 0}}
+                <div class="summary-card breaking clickable" onclick="navigateToSection('breaking-changes')">
+                    <div class="card-number">{{ result.summary.breaking_changes_count }}</div>
+                    <div class="card-label">Breaking</div>
+                </div>
+                {{else}}
                 <div class="summary-card breaking">
                     <div class="card-number">{{ result.summary.breaking_changes_count }}</div>
                     <div class="card-label">Breaking</div>
                 </div>
+                {{end}}
             </div>
         </section>
 
@@ -91,13 +119,19 @@
 
         <!-- Breaking changes section -->
         {{if result.has_breaking_changes}}
-        <section class="breaking-changes">
-            <h2>⚠️ Breaking Changes</h2>
-            <div class="alert alert-danger">
-                <strong>Warning:</strong> The following changes may break compatibility with existing code.
+        <section class="breaking-changes" id="breaking-changes">
+            <div class="section-header">
+                <h2>⚠️ Breaking Changes</h2>
+                <button class="section-toggle collapsed" onclick="toggleSection('breaking-changes')">
+                    <span class="toggle-icon">▶</span>
+                </button>
             </div>
-            <!-- Breaking changes content directly inline for debugging -->
-            <div class="breaking-changes-table">
+            <div class="section-content collapsed" id="breaking-changes-content">
+                <div class="alert alert-danger">
+                    <strong>Warning:</strong> The following changes may break compatibility with existing code.
+                </div>
+                <!-- Breaking changes content directly inline for debugging -->
+                <div class="breaking-changes-table">
                 <table>
                     <thead>
                         <tr>
@@ -119,17 +153,25 @@
                     </tbody>
                 </table>
             </div>
+            </div>
         </section>
         {{end}}
 
         <!-- Change sections -->
         {{for section in change_sections}}
-        <section class="changes-section">
-            <h2>{{ section.icon }} {{ section.title }} ({{ section.count }})</h2>
-            {{if section.description}}
-            <p class="section-description">{{ section.description }}</p>
-            {{end}}
-            {{ render_change_group section }}
+        <section class="changes-section" id="{{ section.change_type }}-items">
+            <div class="section-header">
+                <h2>{{ section.icon }} {{ section.title }} ({{ section.count }})</h2>
+                <button class="section-toggle collapsed" onclick="toggleSection('{{ section.change_type }}-items')">
+                    <span class="toggle-icon">▶</span>
+                </button>
+            </div>
+            <div class="section-content collapsed" id="{{ section.change_type }}-items-content">
+                {{if section.description}}
+                <p class="section-description">{{ section.description }}</p>
+                {{end}}
+                {{ render_change_group section }}
+            </div>
         </section>
         {{end}}
     </div>
diff --git a/src/DotNetApiDiff/Reporting/HtmlTemplates/scripts.js b/src/DotNetApiDiff/Reporting/HtmlTemplates/scripts.js
index a24cc91..e21bf9f 100644
--- a/src/DotNetApiDiff/Reporting/HtmlTemplates/scripts.js
+++ b/src/DotNetApiDiff/Reporting/HtmlTemplates/scripts.js
@@ -30,3 +30,104 @@ function toggleConfig() {
         text.textContent = 'Show Configuration Details';
     }
 }
+
+// Session storage helpers
+function setSectionState(sectionId, state) {
+    try {
+        sessionStorage.setItem('section-' + sectionId, state);
+    } catch (e) {
+        // Ignore storage errors
+    }
+}
+
+function getSectionState(sectionId) {
+    try {
+        return sessionStorage.getItem('section-' + sectionId);
+    } catch (e) {
+        return null;
+    }
+}
+
+// New collapsible section functionality
+function toggleSection(sectionId) {
+    const section = document.getElementById(sectionId);
+    const content = document.getElementById(sectionId + '-content');
+    const button = section.querySelector('.section-toggle');
+    const icon = button.querySelector('.toggle-icon');
+
+    if (content.classList.contains('collapsed')) {
+        // Expand section
+        content.classList.remove('collapsed');
+        button.classList.remove('collapsed');
+        icon.textContent = '▶'; // Keep using ▶ and let CSS handle rotation
+        setSectionState(sectionId, 'expanded');
+    } else {
+        // Collapse section
+        content.classList.add('collapsed');
+        button.classList.add('collapsed');
+        icon.textContent = '▶'; // Keep using ▶ and let CSS handle rotation
+        setSectionState(sectionId, 'collapsed');
+    }
+}
+
+// Navigate to section with smooth scrolling and auto-expand
+function navigateToSection(sectionId) {
+    const section = document.getElementById(sectionId);
+    const content = document.getElementById(sectionId + '-content');
+
+    if (!section) return;
+
+    // Auto-expand if collapsed
+    if (content && content.classList.contains('collapsed')) {
+        toggleSection(sectionId);
+    }
+
+    // Smooth scroll to section
+    section.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+    });
+
+    // Brief highlight effect
+    section.style.transition = 'box-shadow 0.3s ease';
+    section.style.boxShadow = '0 0 20px rgba(0, 123, 255, 0.3)';
+    setTimeout(() => {
+        section.style.boxShadow = '';
+    }, 1500);
+}
+
+// Initialize sections to collapsed state by default
+function initializeSections() {
+    const sections = ['breaking-changes', 'added-items', 'removed-items', 'modified-items'];
+
+    sections.forEach(sectionId => {
+        const section = document.getElementById(sectionId);
+        const content = document.getElementById(sectionId + '-content');
+        const button = section?.querySelector('.section-toggle');
+        const icon = button?.querySelector('.toggle-icon');
+
+        if (!section || !content || !button || !icon) return;
+
+        // Check session storage first
+        const savedState = getSectionState(sectionId);
+
+        if (savedState === 'expanded') {
+            // Expand based on saved state
+            content.classList.remove('collapsed');
+            button.classList.remove('collapsed');
+            icon.textContent = '▶';
+        } else {
+            // Default to collapsed (including null/new sessions)
+            content.classList.add('collapsed');
+            button.classList.add('collapsed');
+            icon.textContent = '▶';
+            // Save the default state if not already set
+            if (savedState === null) {
+                setSectionState(sectionId, 'collapsed');
+            }
+        }
+    });
+}
+
+// Initialize sections when the page loads
+document.addEventListener('DOMContentLoaded', initializeSections);
diff --git a/src/DotNetApiDiff/Reporting/HtmlTemplates/styles.css b/src/DotNetApiDiff/Reporting/HtmlTemplates/styles.css
index bd8bfb1..d31d381 100644
--- a/src/DotNetApiDiff/Reporting/HtmlTemplates/styles.css
+++ b/src/DotNetApiDiff/Reporting/HtmlTemplates/styles.css
@@ -54,6 +54,84 @@ section h2 {
     font-size: 1.5rem;
 }
 
+/* Collapsible Section Styles */
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #f8f9fa;
+    padding: 15px 20px;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.section-header h2 {
+    background: none;
+    padding: 0;
+    margin: 0;
+    border: none;
+    font-size: 1.5rem;
+}
+
+.section-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    color: #6c757d;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    min-height: 32px;
+}
+
+.section-toggle:hover {
+    background-color: #e9ecef;
+    color: #495057;
+}
+
+.section-toggle:focus {
+    outline: 2px solid #007bff;
+    outline-offset: 2px;
+}
+
+.toggle-icon {
+    font-size: 14px;
+    transition: transform 0.3s ease;
+}
+
+.section-toggle.collapsed .toggle-icon {
+    transform: rotate(0deg); /* No rotation - ▶ points right when collapsed */
+}
+
+.section-toggle:not(.collapsed) .toggle-icon {
+    transform: rotate(90deg); /* Rotate ▶ to point down when expanded */
+}
+
+.section-content {
+    transition: all 0.3s ease;
+    overflow: hidden;
+}
+
+.section-content.collapsed {
+    max-height: 0;
+    opacity: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.section-content:not(.collapsed) {
+    max-height: none;
+    opacity: 1;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
 .metadata-content {
     padding: 20px;
 }
@@ -157,6 +235,21 @@ section h2 {
     border-radius: 8px;
     color: white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.summary-card.clickable {
+    cursor: pointer;
+}
+
+.summary-card.clickable:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.summary-card.clickable:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .summary-card.added {