diff --git a/kds/index.html b/kds/index.html
index 93ebf1b..0b57415 100644
--- a/kds/index.html
+++ b/kds/index.html
@@ -44,10 +44,15 @@
 
     .line-items { margin-bottom: 15px; }
     .line-item { margin-bottom: 10px; padding: 10px; background: #0a0a0a; border-radius: 6px; }
-    .line-item-main { display: flex; justify-content: space-between; align-items: flex-start; }
+    .line-item-main { display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer; }
     .item-name { font-size: 14px; font-weight: 500; color: #aaa; flex: 1; }
     .item-qty { font-size: 14px; font-weight: 600; color: #666; margin-left: 10px; }
-    .modifiers { margin-left: 12px; margin-top: 6px; }
+    .mod-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; background: #1a1a2e; border-radius: 10px; font-size: 11px; color: #888; cursor: pointer; }
+    .mod-badge .chevron { font-size: 10px; transition: transform 0.2s; }
+    .mod-badge .chevron.open { transform: rotate(180deg); }
+    .mod-extras { margin-left: 12px; margin-top: 6px; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
+    .mod-extras.open { max-height: 500px; }
+    .modifiers { }
     .modifier { font-size: 12px; color: #555; margin-bottom: 3px; padding-left: 10px; border-left: 1px solid #333; }
     .item-remark { margin-top: 6px; padding: 6px 8px; background: #1a1500; border-left: 2px solid #f59e0b; font-size: 12px; color: #a58a2a; font-style: italic; }
     .order-remarks { margin-bottom: 12px; padding: 8px; background: #1a0a0a; border-left: 2px solid #ef4444; font-size: 12px; color: #a55; font-style: italic; }
diff --git a/kds/kds.js b/kds/kds.js
index 15f4da4..05ba413 100644
--- a/kds/kds.js
+++ b/kds/kds.js
@@ -370,20 +370,26 @@ function renderOrder(order) {
   `;
 }
 
-// Render line item with modifiers
+// Render line item with expandable modifiers
 function renderLineItem(item, allItems, isOtherStation = false) {
   const modifiers = allItems.filter(mod => mod.ParentOrderLineItemID === item.OrderLineItemID);
   console.log(`Item: ${item.Name} (ID: ${item.OrderLineItemID}) has ${modifiers.length} direct modifiers:`, modifiers.map(m => m.Name));
   const otherClass = isOtherStation ? ' other-station' : '';
   const doneClass = (item.StatusID === 1) ? ' line-item-done' : '';
+  const hasExtras = modifiers.length > 0 || item.Remark;
+  const extrasCount = modifiers.length + (item.Remark ? 1 : 0);
+  const extrasId = `extras-${item.OrderLineItemID}`;
   return `
     <div class="line-item${otherClass}${doneClass}">
-      <div class="line-item-main">
+      <div class="line-item-main"${hasExtras ? ` onclick="toggleExtras('${extrasId}', this)"` : ''}>
         <div class="item-name">${escapeHtml(item.Name)}</div>
+        ${hasExtras ? `<span class="mod-badge">${extrasCount}<span class="chevron">▼</span></span>` : ''}
         <div class="item-qty">x${item.Quantity}</div>
       </div>
-      ${modifiers.length > 0 ? renderAllModifiers(modifiers, allItems) : ''}
-      ${item.Remark ? `<div class="item-remark">Note: ${escapeHtml(item.Remark)}</div>` : ''}
+      ${hasExtras ? `<div class="mod-extras" id="${extrasId}">
+        ${modifiers.length > 0 ? renderAllModifiers(modifiers, allItems) : ''}
+        ${item.Remark ? `<div class="item-remark">Note: ${escapeHtml(item.Remark)}</div>` : ''}
+      </div>` : ''}
     </div>
   `;
 }
@@ -586,6 +592,14 @@ function formatSubmitTime(dateString) {
   return new Date(dateString).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
 }
 
+function toggleExtras(id, mainEl) {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.classList.toggle('open');
+  const chevron = mainEl.querySelector('.chevron');
+  if (chevron) chevron.classList.toggle('open');
+}
+
 function escapeHtml(text) {
   if (!text) return '';
   const div = document.createElement('div');