diff --git a/wwcompanion-extension/settings.css b/wwcompanion-extension/settings.css
index 67ded54..3d0c33d 100644
--- a/wwcompanion-extension/settings.css
+++ b/wwcompanion-extension/settings.css
@@ -73,6 +73,49 @@ body {
   box-shadow: var(--panel-shadow);
 }
 
+.panel-summary {
+  list-style: none;
+  cursor: pointer;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  gap: 12px;
+}
+
+.panel-summary::-webkit-details-marker {
+  display: none;
+}
+
+.panel-caret {
+  display: inline-flex;
+  align-items: center;
+  width: 16px;
+  justify-content: center;
+  color: var(--muted);
+  font-weight: 700;
+  font-family: "Segoe UI Symbol", "Apple Symbols", system-ui, sans-serif;
+}
+
+.panel-caret .caret-open {
+  display: none;
+}
+
+.panel[open] .panel-caret .caret-open {
+  display: inline;
+}
+
+.panel[open] .panel-caret .caret-closed {
+  display: none;
+}
+
+.panel-body {
+  margin-top: 12px;
+}
+
+.panel[open] .panel-summary {
+  margin-bottom: 6px;
+}
+
 .row {
   display: flex;
   align-items: center;
diff --git a/wwcompanion-extension/settings.html b/wwcompanion-extension/settings.html
index 5b7c1ec..4a144af 100644
--- a/wwcompanion-extension/settings.html
+++ b/wwcompanion-extension/settings.html
@@ -16,72 +16,118 @@
       <button id="saveBtn" class="accent">Save Settings</button>
     </div>
 
-    <section class="panel">
-      <div class="row">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <h2>API</h2>
-        <button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
-      </div>
-      <div class="field">
-        <label for="apiKey">API Key</label>
-        <div class="inline">
-          <input id="apiKey" type="password" autocomplete="off" placeholder="sk-..." />
-          <button id="toggleKey" class="ghost" type="button">Show</button>
+      </summary>
+      <div class="panel-body">
+        <div class="row">
+          <div></div>
+          <button id="resetApiBtn" class="ghost" type="button">Reset to OpenAI</button>
+        </div>
+        <div class="field">
+          <label for="apiKey">API Key</label>
+          <div class="inline">
+            <input id="apiKey" type="password" autocomplete="off" placeholder="sk-..." />
+            <button id="toggleKey" class="ghost" type="button">Show</button>
+          </div>
+        </div>
+        <div class="field">
+          <label for="apiBaseUrl">API Base URL</label>
+          <input
+            id="apiBaseUrl"
+            type="text"
+            placeholder="https://api.openai.com/v1"
+          />
+        </div>
+        <div class="field">
+          <label for="apiKeyHeader">API Key Header</label>
+          <input id="apiKeyHeader" type="text" placeholder="Authorization" />
+        </div>
+        <div class="field">
+          <label for="apiKeyPrefix">API Key Prefix</label>
+          <input id="apiKeyPrefix" type="text" placeholder="Bearer " />
+        </div>
+        <div class="field">
+          <label for="model">Model name</label>
+          <input id="model" type="text" placeholder="gpt-4o-mini" />
         </div>
       </div>
-      <div class="field">
-        <label for="apiBaseUrl">API Base URL</label>
-        <input
-          id="apiBaseUrl"
-          type="text"
-          placeholder="https://api.openai.com/v1"
-        />
-      </div>
-      <div class="field">
-        <label for="apiKeyHeader">API Key Header</label>
-        <input id="apiKeyHeader" type="text" placeholder="Authorization" />
-      </div>
-      <div class="field">
-        <label for="apiKeyPrefix">API Key Prefix</label>
-        <input id="apiKeyPrefix" type="text" placeholder="Bearer " />
-      </div>
-      <div class="field">
-        <label for="model">Model name</label>
-        <input id="model" type="text" placeholder="gpt-4o-mini" />
-      </div>
-    </section>
+    </details>
 
-    <section class="panel">
-      <h2>Appearance</h2>
-      <div class="field">
-        <label for="themeSelect">Theme</label>
-        <select id="themeSelect">
-          <option value="system">System</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-        </select>
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
+        <h2>Appearance</h2>
+      </summary>
+      <div class="panel-body">
+        <div class="field">
+          <label for="themeSelect">Theme</label>
+          <select id="themeSelect">
+            <option value="system">System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+          </select>
+        </div>
       </div>
-    </section>
+    </details>
 
-    <section class="panel">
-      <h2>System Prompt</h2>
-      <textarea id="systemPrompt" rows="8" placeholder="Define tone and standards..."></textarea>
-    </section>
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
+        <h2>System Prompt</h2>
+      </summary>
+      <div class="panel-body">
+        <textarea
+          id="systemPrompt"
+          rows="8"
+          placeholder="Define tone and standards..."
+        ></textarea>
+      </div>
+    </details>
 
-    <section class="panel">
-      <h2>Resume</h2>
-      <textarea id="resume" rows="10" placeholder="Paste your resume text..."></textarea>
-    </section>
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
+        <h2>Resume</h2>
+      </summary>
+      <div class="panel-body">
+        <textarea id="resume" rows="10" placeholder="Paste your resume text..."></textarea>
+      </div>
+    </details>
 
-    <section class="panel">
-      <div class="row">
+    <details class="panel">
+      <summary class="panel-summary">
+        <span class="panel-caret" aria-hidden="true">
+          <span class="caret-closed">▸</span>
+          <span class="caret-open">▾</span>
+        </span>
         <div class="row-title">
           <h2>Task Presets</h2>
           <span class="hint hint-accent">Top task is the default</span>
         </div>
-        <button id="addTaskBtn" class="ghost" type="button">Add Task</button>
+      </summary>
+      <div class="panel-body">
+        <div class="row">
+          <div></div>
+          <button id="addTaskBtn" class="ghost" type="button">Add Task</button>
+        </div>
+        <div id="tasks" class="tasks"></div>
       </div>
-      <div id="tasks" class="tasks"></div>
-    </section>
+    </details>
 
     <script src="settings.js"></script>
   </body>
diff --git a/wwcompanion-extension/settings.js b/wwcompanion-extension/settings.js
index c382a45..1c1adf4 100644
--- a/wwcompanion-extension/settings.js
+++ b/wwcompanion-extension/settings.js
@@ -255,7 +255,13 @@ async function saveSettings() {
 
 saveBtn.addEventListener("click", () => void saveSettings());
 addTaskBtn.addEventListener("click", () => {
-  tasksContainer.appendChild(buildTaskCard({ id: newTaskId(), name: "", text: "" }));
+  const newCard = buildTaskCard({ id: newTaskId(), name: "", text: "" });
+  const first = tasksContainer.firstElementChild;
+  if (first) {
+    tasksContainer.insertBefore(newCard, first);
+  } else {
+    tasksContainer.appendChild(newCard);
+  }
   updateTaskControls();
 });