diff --git a/public/components/cms.html b/public/components/cms.html
index 5766fc8..514b9b7 100644
--- a/public/components/cms.html
+++ b/public/components/cms.html
@@ -196,30 +196,33 @@
                     </div>
                   </div>
 
-                  <!-- Row 2: context-aware size options -->
+                  <!-- Row 2: context-aware size options (shown/hidden via style.display in JS) -->
                   <div class="lh-ai-opt-row" id="lh-ai-size-row">
-                    <!-- Article / Pearl: word count hint -->
-                    <div class="lh-ai-opt-field" id="lh-ai-words-field">
-                      <label>Approx. word count <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
-                      <input type="number" id="lh-ai-word-count" value="" min="100" max="3000" step="50" class="cms-input-sm" style="width:100px;" placeholder="e.g. 600">
+                    <div id="lh-ai-words-field" style="display:flex;flex-direction:column;gap:3px;">
+                      <label style="font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;">Approx. word count <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
+                      <input type="number" id="lh-ai-word-count" value="" min="100" max="3000" step="50" class="cms-input-sm" style="width:110px;" placeholder="e.g. 600">
                     </div>
-                    <!-- Presentation: slide count -->
-                    <div class="lh-ai-opt-field hidden" id="lh-ai-slides-field">
-                      <label>Number of slides <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
-                      <input type="number" id="lh-ai-slide-count" value="" min="3" max="30" class="cms-input-sm" style="width:80px;" placeholder="e.g. 10">
+                    <div id="lh-ai-slides-field" style="display:none;flex-direction:column;gap:3px;">
+                      <label style="font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;">Number of slides <span style="color:var(--g400);font-weight:400;">(optional)</span></label>
+                      <input type="number" id="lh-ai-slide-count" value="" min="3" max="30" class="cms-input-sm" style="width:90px;" placeholder="e.g. 10">
                     </div>
                   </div>
 
-                  <!-- Row 3: quiz questions — always visible for quiz, optional toggle for others -->
-                  <div id="lh-ai-quiz-row" class="lh-ai-opt-row" style="align-items:center;padding:10px 12px;border:1.5px solid var(--g200);border-radius:8px;background:white;">
-                    <!-- Toggle (hidden for quiz type) -->
-                    <label id="lh-ai-q-toggle-label" style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--g700);margin:0;">
-                      <input type="checkbox" id="lh-ai-q-toggle" style="accent-color:var(--blue);width:15px;height:15px;">
-                      Also generate quiz questions
-                    </label>
-                    <div id="lh-ai-q-count-wrap" style="display:flex;align-items:center;gap:8px;margin-left:auto;">
-                      <label style="font-size:12px;color:var(--g500);margin:0;">How many</label>
-                      <input type="number" id="lh-ai-q-count" value="5" min="1" max="20" class="cms-input-sm" style="width:70px;">
+                  <!-- Row 3: quiz questions card -->
+                  <div id="lh-ai-quiz-row" class="lh-ai-quiz-card">
+                    <div class="lh-ai-quiz-card-header" id="lh-ai-quiz-card-header">
+                      <i class="fas fa-clipboard-question" style="color:var(--blue);font-size:14px;"></i>
+                      <span id="lh-ai-quiz-card-title" style="font-weight:600;font-size:13px;color:var(--g800);">Quiz Questions</span>
+                    </div>
+                    <div class="lh-ai-quiz-card-body">
+                      <label id="lh-ai-q-toggle-label" style="display:none;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--g700);margin:0;">
+                        <input type="checkbox" id="lh-ai-q-toggle" style="accent-color:var(--blue);width:15px;height:15px;flex-shrink:0;">
+                        Also generate quiz questions for this content
+                      </label>
+                      <div id="lh-ai-q-count-wrap" style="display:flex;align-items:center;gap:8px;">
+                        <label style="font-size:12px;color:var(--g600);margin:0;">Number of questions</label>
+                        <input type="number" id="lh-ai-q-count" value="5" min="1" max="20" class="cms-input-sm" style="width:70px;">
+                      </div>
                     </div>
                   </div>
 
diff --git a/public/css/styles.css b/public/css/styles.css
index 6382c07..fe30256 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -754,10 +754,15 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 .lh-ai-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;border:2px dashed var(--g300);border-radius:10px;cursor:pointer;text-align:center;font-size:13px;color:var(--g600);transition:border-color 0.2s;background:var(--g50);}
 .lh-ai-dropzone:hover{border-color:var(--blue);background:var(--blue-light);}
 .lh-ai-options{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:14px;background:var(--g50);border-radius:8px;}
-.lh-ai-opt-row{display:flex;gap:10px;flex-wrap:wrap;}
+.lh-ai-opt-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
 .lh-ai-opt-field{display:flex;flex-direction:column;gap:3px;}
 .lh-ai-opt-field label{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:0.3px;}
 
+/* Quiz questions card inside AI panel */
+.lh-ai-quiz-card{background:linear-gradient(135deg,#eff6ff,#eef2ff);border:1.5px solid #c7d2fe;border-radius:10px;overflow:hidden;}
+.lh-ai-quiz-card-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:white;border-bottom:1px solid #e0e7ff;}
+.lh-ai-quiz-card-body{padding:12px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
+
 /* WebDAV browser */
 .lh-webdav-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--g100);transition:background 0.1s;}
 .lh-webdav-item:last-child{border-bottom:none;}
diff --git a/public/js/learningHub.js b/public/js/learningHub.js
index 0385db7..b1cc5cf 100644
--- a/public/js/learningHub.js
+++ b/public/js/learningHub.js
@@ -545,34 +545,38 @@
   }
 
   function updateAiOptions(type) {
-    var wordsField    = document.getElementById('lh-ai-words-field');
-    var slidesField   = document.getElementById('lh-ai-slides-field');
-    var toggleLabel   = document.getElementById('lh-ai-q-toggle-label');
-    var toggleCb      = document.getElementById('lh-ai-q-toggle');
-    var countWrap     = document.getElementById('lh-ai-q-count-wrap');
+    var wordsField  = document.getElementById('lh-ai-words-field');
+    var slidesField = document.getElementById('lh-ai-slides-field');
+    var quizRow     = document.getElementById('lh-ai-quiz-row');
+    var cardTitle   = document.getElementById('lh-ai-quiz-card-title');
+    var toggleLabel = document.getElementById('lh-ai-q-toggle-label');
+    var toggleCb    = document.getElementById('lh-ai-q-toggle');
+    var countWrap   = document.getElementById('lh-ai-q-count-wrap');
 
-    // Word count: only for article and pearl
-    if (wordsField) wordsField.classList.toggle('hidden', type === 'quiz' || type === 'presentation');
-    // Slide count: only for presentation
-    if (slidesField) slidesField.classList.toggle('hidden', type !== 'presentation');
+    // Use style.display directly — classList.toggle('hidden') doesn't work because
+    // .lh-ai-opt-field { display:flex } is defined later in CSS and overrides .hidden
+    if (wordsField)  wordsField.style.display  = (type === 'quiz' || type === 'presentation') ? 'none' : 'flex';
+    if (slidesField) slidesField.style.display = (type === 'presentation') ? 'flex' : 'none';
 
-    // Questions section
     if (type === 'quiz') {
-      // Quiz: always generate questions, no toggle, show count directly
+      // Quiz: questions are the whole point — show the card prominently, no toggle needed
+      if (quizRow)    quizRow.style.display    = 'block';
+      if (cardTitle)  cardTitle.textContent    = 'Quiz Questions';
       if (toggleLabel) toggleLabel.style.display = 'none';
-      if (toggleCb) { toggleCb.checked = true; toggleCb.disabled = true; }
-      if (countWrap) countWrap.style.display = 'flex';
+      if (toggleCb)  { toggleCb.checked = true; toggleCb.disabled = true; }
+      if (countWrap)  countWrap.style.display  = 'flex';
     } else if (type === 'presentation') {
-      // Presentation: no questions at all
-      if (toggleLabel) toggleLabel.style.display = 'none';
-      if (toggleCb) { toggleCb.checked = false; toggleCb.disabled = true; }
-      if (countWrap) countWrap.style.display = 'none';
+      // Presentation: no questions
+      if (quizRow)    quizRow.style.display    = 'none';
+      if (toggleCb)  { toggleCb.checked = false; toggleCb.disabled = true; }
     } else {
-      // Article / pearl: optional toggle
+      // Article / pearl: optional questions via toggle
+      if (quizRow)    quizRow.style.display    = 'block';
+      if (cardTitle)  cardTitle.textContent    = 'Quiz Questions (optional)';
       if (toggleLabel) toggleLabel.style.display = 'flex';
-      if (toggleCb) { toggleCb.disabled = false; }
+      if (toggleCb)   toggleCb.disabled        = false;
       var checked = toggleCb ? toggleCb.checked : false;
-      if (countWrap) countWrap.style.display = checked ? 'flex' : 'none';
+      if (countWrap)  countWrap.style.display  = checked ? 'flex' : 'none';
     }
   }