diff --git a/public/admin.html b/public/admin.html
index 7a0b5bf..df4db3b 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -305,8 +305,12 @@
             <div id="results-area"></div>
           </div>
           <div class="panel-col">
-            <details id="list-editor-details">
-              <summary id="list-editor-title">New list</summary>
+            <div class="toggle-btns">
+              <button type="button" id="list-new-btn">+ New list</button>
+              <button type="button" id="list-bulk-btn" class="secondary">⬆ Bulk import</button>
+            </div>
+            <div id="list-editor-section" hidden>
+              <h3 id="list-editor-title" class="section-form-title">New list</h3>
               <form id="list-form" class="admin-card">
                 <input type="hidden" id="list-id">
                 <input id="list-name" placeholder="List name (e.g. Week of July 6)" aria-label="List name">
@@ -316,12 +320,12 @@
                   placeholder="One word per line. Paste any list from your curriculum!&#10;&#10;Add an example sentence with |&#10;receive | Did you receive my letter?&#10;&#10;Or just a plain list:&#10;because&#10;enough&#10;friend"></textarea>
                 <div class="row-actions">
                   <button type="submit">Save list</button>
-                  <button type="button" id="list-cancel" class="secondary">Clear</button>
+                  <button type="button" id="list-cancel" class="secondary">Cancel</button>
                 </div>
               </form>
-            </details>
-            <details id="list-bulk-details">
-              <summary>Bulk import lists</summary>
+            </div>
+            <div id="list-bulk-section" hidden>
+              <h3 class="section-form-title">Bulk import lists</h3>
               <div class="admin-card">
                 <p class="hint" style="margin:0 0 0.5rem">Start each list with <strong># List name</strong> on its own line, then words below it. Optional group applies to all imported lists.</p>
                 <input id="list-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="list-groups-datalist">
@@ -333,7 +337,7 @@
                 </div>
                 <p id="list-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
               </div>
-            </details>
+            </div>
           </div>
         </div>
       </section>
@@ -346,8 +350,12 @@
             <div id="deck-rows"></div>
           </div>
           <div class="panel-col">
-            <details id="deck-editor-details">
-              <summary id="deck-editor-title">New deck</summary>
+            <div class="toggle-btns">
+              <button type="button" id="deck-new-btn">+ New deck</button>
+              <button type="button" id="deck-bulk-btn" class="secondary">⬆ Bulk import</button>
+            </div>
+            <div id="deck-editor-section" hidden>
+              <h3 id="deck-editor-title" class="section-form-title">New deck</h3>
               <form id="deck-form" class="admin-card">
                 <input type="hidden" id="deck-id">
                 <input id="deck-name" placeholder="Deck name (e.g. State Capitals)" aria-label="Deck name">
@@ -357,12 +365,12 @@
                   placeholder="One card per line: front | back&#10;What is the capital of Ohio? | Columbus"></textarea>
                 <div class="row-actions">
                   <button type="submit">Save deck</button>
-                  <button type="button" id="deck-cancel" class="secondary">Clear</button>
+                  <button type="button" id="deck-cancel" class="secondary">Cancel</button>
                 </div>
               </form>
-            </details>
-            <details id="deck-bulk-details">
-              <summary>Bulk import decks</summary>
+            </div>
+            <div id="deck-bulk-section" hidden>
+              <h3 class="section-form-title">Bulk import decks</h3>
               <div class="admin-card">
                 <p class="hint" style="margin:0 0 0.5rem">Start each deck with <strong># Deck name</strong> on its own line, then cards below as <strong>front | back</strong>. Optional group applies to all imported decks.</p>
                 <input id="deck-bulk-group" placeholder="Group (e.g. Bible 6) — optional" aria-label="Group for bulk import" list="deck-groups-datalist">
@@ -374,7 +382,7 @@
                 </div>
                 <p id="deck-bulk-status" class="hint" style="margin:0.4rem 0 0"></p>
               </div>
-            </details>
+            </div>
           </div>
         </div>
       </section>
diff --git a/public/admin.js b/public/admin.js
index 69fc223..5bde470 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -1368,7 +1368,7 @@ function renderLists(lists) {
         return w.word;
       }).join('\n');
       $('#list-editor-title').textContent = list.builtin ? 'New list (from copy)' : `Editing: ${list.name}`;
-      $('#list-editor-details').open = true;
+      showSection('list', 'editor');
       $('#list-name').scrollIntoView({ behavior: 'smooth' });
     })
   );
@@ -1398,6 +1398,7 @@ $('#list-form').addEventListener('submit', async (e) => {
   if (id) await api(`/api/lists/${id}`, { method: 'PUT', body: { name, words, groupName } });
   else await api('/api/lists', { method: 'POST', body: { name, words, groupName } });
   clearListForm();
+  hideSections('list');
   msg('List saved.');
   loadSpelling();
 });
@@ -1408,8 +1409,31 @@ function clearListForm() {
   $('#list-group').value = '';
   $('#list-words').value = '';
   $('#list-editor-title').textContent = 'New list';
+  hideSections('list');
 }
 
+function showSection(type, which) {
+  $(`#${type}-editor-section`).hidden = which !== 'editor';
+  $(`#${type}-bulk-section`).hidden = which !== 'bulk';
+  $(`#${type}-new-btn`).classList.toggle('active', which === 'editor');
+  $(`#${type}-bulk-btn`).classList.toggle('active', which === 'bulk');
+}
+function hideSections(type) {
+  $(`#${type}-editor-section`).hidden = true;
+  $(`#${type}-bulk-section`).hidden = true;
+  $(`#${type}-new-btn`).classList.remove('active');
+  $(`#${type}-bulk-btn`).classList.remove('active');
+}
+
+$('#list-new-btn').addEventListener('click', () => {
+  if ($('#list-editor-section').hidden) showSection('list', 'editor');
+  else hideSections('list');
+});
+$('#list-bulk-btn').addEventListener('click', () => {
+  if ($('#list-bulk-section').hidden) showSection('list', 'bulk');
+  else hideSections('list');
+});
+
 function parseBulkSections(text) {
   const sections = [];
   let current = null;
@@ -1560,7 +1584,7 @@ async function loadDecks() {
       $('#deck-group').value = deck.group_name || '';
       $('#deck-cards').value = deck.cards.map((c) => `${c.front} | ${c.back}`).join('\n');
       $('#deck-editor-title').textContent = deck.builtin ? 'New deck (from copy)' : `Editing: ${deck.name}`;
-      $('#deck-editor-details').open = true;
+      showSection('deck', 'editor');
       $('#deck-name').scrollIntoView({ behavior: 'smooth' });
     })
   );
@@ -1590,6 +1614,7 @@ $('#deck-form').addEventListener('submit', async (e) => {
   if (id) await api(`/api/decks/${id}`, { method: 'PUT', body: { name, cards, groupName } });
   else await api('/api/decks', { method: 'POST', body: { name, cards, groupName } });
   clearDeckForm();
+  hideSections('deck');
   msg('Deck saved.');
   loadDecks();
 });
@@ -1600,8 +1625,18 @@ function clearDeckForm() {
   $('#deck-group').value = '';
   $('#deck-cards').value = '';
   $('#deck-editor-title').textContent = 'New deck';
+  hideSections('deck');
 }
 
+$('#deck-new-btn').addEventListener('click', () => {
+  if ($('#deck-editor-section').hidden) showSection('deck', 'editor');
+  else hideSections('deck');
+});
+$('#deck-bulk-btn').addEventListener('click', () => {
+  if ($('#deck-bulk-section').hidden) showSection('deck', 'bulk');
+  else hideSections('deck');
+});
+
 $('#deck-bulk-save').addEventListener('click', async () => {
   const groupName = $('#deck-bulk-group').value.trim();
   const sections = parseBulkSections($('#deck-bulk-text').value);
diff --git a/public/styles.css b/public/styles.css
index 4e190af..72d5599 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -338,6 +338,11 @@ table.results tr:nth-child(even) td { background: #faf7ee; }
 .admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; }
 .panel { text-align: left; }
 
+/* ---------- toggle button rows (new/bulk import) ---------- */
+.toggle-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
+.toggle-btns button.active { background: var(--accent); color: #fff; }
+.section-form-title { font-size: 1rem; font-weight: 700; margin: 0 0 0; color: var(--ink); }
+
 /* 2-column layout for wide screens */
 .panel-cols { display: flex; flex-direction: column; gap: 1.5rem; }
 .panel-col { min-width: 0; }