diff --git a/src/main/resources/templates/system-settings/list.html b/src/main/resources/templates/system-settings/list.html
index 760cb2e..37d98e4 100644
--- a/src/main/resources/templates/system-settings/list.html
+++ b/src/main/resources/templates/system-settings/list.html
@@ -7,20 +7,41 @@
 
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h2><i class="bi bi-gear"></i> System settings</h2>
+            <div>
+                <button type="button" class="btn btn-outline-secondary btn-sm me-2" id="expandAllSections">
+                    <i class="bi bi-arrows-expand"></i> Expand all
+                </button>
+                <button type="button" class="btn btn-outline-secondary btn-sm" id="collapseAllSections">
+                    <i class="bi bi-arrows-collapse"></i> Collapse all
+                </button>
+            </div>
         </div>
 
+        <style>
+            .collapsible-card-header { cursor: pointer; }
+            .collapsible-card-header .section-chevron { transition: transform 0.2s ease-in-out; }
+            .collapsible-card-header.collapsed .section-chevron { transform: rotate(-90deg); }
+        </style>
+
         <div class="row g-4">
             <div class="col-12">
                 <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <div>
-                            <h5 class="mb-0">System prompts</h5>
-                            <small class="text-secondary">Prompt sets available to bot configurations.</small>
+                    <div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
+                         data-bs-toggle="collapse" data-bs-target="#section-system-prompts"
+                         role="button" aria-expanded="true" aria-controls="section-system-prompts">
+                        <div class="d-flex align-items-center">
+                            <i class="bi bi-chevron-down section-chevron me-2"></i>
+                            <div>
+                                <h5 class="mb-0">System prompts</h5>
+                                <small class="text-secondary">Prompt sets available to bot configurations.</small>
+                            </div>
                         </div>
-                        <a th:href="@{/system-settings/system-prompts/new}" class="btn btn-primary btn-sm">
+                        <a th:href="@{/system-settings/system-prompts/new}" class="btn btn-primary btn-sm"
+                           onclick="event.stopPropagation();">
                             <i class="bi bi-plus-circle"></i> Add
                         </a>
                     </div>
+                    <div class="collapse show" id="section-system-prompts">
                     <div class="card-body">
                         <div th:if="${#lists.isEmpty(systemPrompts)}" class="text-center py-4">
                             <i class="bi bi-inbox fs-1 text-secondary"></i>
@@ -71,20 +92,28 @@ <h5 class="mb-0">System prompts</h5>
                             </table>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
 
             <div class="col-12">
                 <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <div>
-                            <h5 class="mb-0">MCP configurations</h5>
-                            <small class="text-secondary">Remote MCP server configurations assignable to bots.</small>
+                    <div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
+                         data-bs-toggle="collapse" data-bs-target="#section-mcp-configurations"
+                         role="button" aria-expanded="true" aria-controls="section-mcp-configurations">
+                        <div class="d-flex align-items-center">
+                            <i class="bi bi-chevron-down section-chevron me-2"></i>
+                            <div>
+                                <h5 class="mb-0">MCP configurations</h5>
+                                <small class="text-secondary">Remote MCP server configurations assignable to bots.</small>
+                            </div>
                         </div>
-                        <a th:href="@{/system-settings/mcp-configurations/new}" class="btn btn-primary btn-sm">
+                        <a th:href="@{/system-settings/mcp-configurations/new}" class="btn btn-primary btn-sm"
+                           onclick="event.stopPropagation();">
                             <i class="bi bi-plus-circle"></i> Add
                         </a>
                     </div>
+                    <div class="collapse show" id="section-mcp-configurations">
                     <div class="card-body">
                         <div th:if="${#lists.isEmpty(mcpConfigurations)}" class="text-center py-4">
                             <i class="bi bi-inbox fs-1 text-secondary"></i>
@@ -130,20 +159,28 @@ <h5 class="mb-0">MCP configurations</h5>
                             </table>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
 
             <div class="col-12">
                 <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <div>
-                            <h5 class="mb-0">Tool configurations</h5>
-                            <small class="text-secondary">Whitelists of built-in agent tools (file, context, validation, repository) assignable to bots.</small>
+                    <div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
+                         data-bs-toggle="collapse" data-bs-target="#section-bot-tools"
+                         role="button" aria-expanded="true" aria-controls="section-bot-tools">
+                        <div class="d-flex align-items-center">
+                            <i class="bi bi-chevron-down section-chevron me-2"></i>
+                            <div>
+                                <h5 class="mb-0">Tool configurations</h5>
+                                <small class="text-secondary">Whitelists of built-in agent tools (file, context, validation, repository) assignable to bots.</small>
+                            </div>
                         </div>
-                        <a th:href="@{/system-settings/bot-tools/new}" class="btn btn-primary btn-sm">
+                        <a th:href="@{/system-settings/bot-tools/new}" class="btn btn-primary btn-sm"
+                           onclick="event.stopPropagation();">
                             <i class="bi bi-plus-circle"></i> Add
                         </a>
                     </div>
+                    <div class="collapse show" id="section-bot-tools">
                     <div class="card-body">
                         <div th:if="${#lists.isEmpty(botToolConfigurations)}" class="text-center py-4">
                             <i class="bi bi-inbox fs-1 text-secondary"></i>
@@ -198,20 +235,28 @@ <h5 class="mb-0">Tool configurations</h5>
                             </table>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
 
             <div class="col-12">
                 <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <div>
-                            <h5 class="mb-0">Workflow configurations</h5>
-                            <small class="text-secondary">Named whitelists of PR workflows (review, tests, …) assignable to bots.</small>
+                    <div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
+                         data-bs-toggle="collapse" data-bs-target="#section-workflow-configurations"
+                         role="button" aria-expanded="true" aria-controls="section-workflow-configurations">
+                        <div class="d-flex align-items-center">
+                            <i class="bi bi-chevron-down section-chevron me-2"></i>
+                            <div>
+                                <h5 class="mb-0">Workflow configurations</h5>
+                                <small class="text-secondary">Named whitelists of PR workflows (review, tests, …) assignable to bots.</small>
+                            </div>
                         </div>
-                        <a th:href="@{/system-settings/workflow-configurations/new}" class="btn btn-primary btn-sm">
+                        <a th:href="@{/system-settings/workflow-configurations/new}" class="btn btn-primary btn-sm"
+                           onclick="event.stopPropagation();">
                             <i class="bi bi-plus-circle"></i> Add
                         </a>
                     </div>
+                    <div class="collapse show" id="section-workflow-configurations">
                     <div class="card-body">
                         <div th:if="${#lists.isEmpty(workflowConfigurations)}" class="text-center py-4">
                             <i class="bi bi-inbox fs-1 text-secondary"></i>
@@ -266,20 +311,28 @@ <h5 class="mb-0">Workflow configurations</h5>
                             </table>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
 
             <div class="col-12">
                 <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <div>
-                            <h5 class="mb-0">Deployment targets</h5>
-                            <small class="text-secondary">Per-PR preview environments used by workflows that need a live deployment (E2E tests, smoke checks).</small>
+                    <div class="card-header collapsible-card-header d-flex justify-content-between align-items-center"
+                         data-bs-toggle="collapse" data-bs-target="#section-deployment-targets"
+                         role="button" aria-expanded="true" aria-controls="section-deployment-targets">
+                        <div class="d-flex align-items-center">
+                            <i class="bi bi-chevron-down section-chevron me-2"></i>
+                            <div>
+                                <h5 class="mb-0">Deployment targets</h5>
+                                <small class="text-secondary">Per-PR preview environments used by workflows that need a live deployment (E2E tests, smoke checks).</small>
+                            </div>
                         </div>
-                        <a th:href="@{/system-settings/deployment-targets/new}" class="btn btn-primary btn-sm">
+                        <a th:href="@{/system-settings/deployment-targets/new}" class="btn btn-primary btn-sm"
+                           onclick="event.stopPropagation();">
                             <i class="bi bi-plus-circle"></i> Add
                         </a>
                     </div>
+                    <div class="collapse show" id="section-deployment-targets">
                     <div class="card-body">
                         <div th:if="${#lists.isEmpty(deploymentTargets)}" class="text-center py-4">
                             <i class="bi bi-cloud-slash fs-1 text-secondary"></i>
@@ -328,10 +381,64 @@ <h5 class="mb-0">Deployment targets</h5>
                             </table>
                         </div>
                     </div>
+                    </div>
                 </div>
             </div>
         </div>
 
+        <script>
+            (function () {
+                const STORAGE_KEY = 'systemSettings.collapsedSections';
+                const loadCollapsed = () => {
+                    try { return new Set(JSON.parse(localStorage.getItem(STORAGE_KEY)) || []); }
+                    catch (e) { return new Set(); }
+                };
+                const saveCollapsed = (set) => {
+                    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(Array.from(set))); }
+                    catch (e) { /* ignore */ }
+                };
+
+                const collapsed = loadCollapsed();
+                const collapses = document.querySelectorAll('[id^="section-"].collapse');
+
+                // Apply persisted state before Bootstrap initializes transitions.
+                collapses.forEach((el) => {
+                    const header = document.querySelector('[data-bs-target="#' + el.id + '"]');
+                    if (collapsed.has(el.id)) {
+                        el.classList.remove('show');
+                        if (header) {
+                            header.classList.add('collapsed');
+                            header.setAttribute('aria-expanded', 'false');
+                        }
+                    }
+                });
+
+                collapses.forEach((el) => {
+                    el.addEventListener('shown.bs.collapse', () => {
+                        collapsed.delete(el.id);
+                        saveCollapsed(collapsed);
+                    });
+                    el.addEventListener('hidden.bs.collapse', () => {
+                        collapsed.add(el.id);
+                        saveCollapsed(collapsed);
+                    });
+                });
+
+                const expandBtn = document.getElementById('expandAllSections');
+                const collapseBtn = document.getElementById('collapseAllSections');
+                if (expandBtn) {
+                    expandBtn.addEventListener('click', () => {
+                        collapses.forEach((el) => bootstrap.Collapse.getOrCreateInstance(el).show());
+                    });
+                }
+                if (collapseBtn) {
+                    collapseBtn.addEventListener('click', () => {
+                        collapses.forEach((el) => bootstrap.Collapse.getOrCreateInstance(el).hide());
+                    });
+                }
+            })();
+        </script>
+
     </div>
 </div>
 </body>