diff --git a/portal/menu-builder.html b/portal/menu-builder.html
index 810077c..fc62508 100644
--- a/portal/menu-builder.html
+++ b/portal/menu-builder.html
@@ -1227,6 +1227,7 @@
       redoStack: [],
       idCounter: 1,
       expandedCategoryId: null, // For accordion - only one category expanded at a time
+      expandedSubCategoryId: null, // For subcategory accordion - independent of parent
       expandedItemId: null, // For item accordion - only one item expanded at a time
       expandedModifierIds: new Set(), // Track which modifiers are expanded
 
@@ -4210,12 +4211,12 @@
             </div>
             <div class="items-list ${isExpanded ? '' : 'collapsed'}">
               ${hasSubcats ? subcategories.map(subcat => {
-                const subExpanded = this.expandedCategoryId === subcat.id;
+                const subExpanded = this.expandedSubCategoryId === subcat.id;
                 return `
                 <div class="category-card subcategory-card" data-category-id="${subcat.id}" draggable="true"
                   onclick="event.stopPropagation(); MenuBuilder.selectElement(this)" style="margin: 8px 0 8px 20px; border-color: var(--gray-300);">
                   <div class="category-header" style="padding: 8px 12px;">
-                    <div class="category-toggle ${subExpanded ? 'expanded' : ''}" onclick="event.stopPropagation(); MenuBuilder.toggleCategory('${subcat.id}')">
+                    <div class="category-toggle ${subExpanded ? 'expanded' : ''}" onclick="event.stopPropagation(); MenuBuilder.toggleSubCategory('${subcat.id}')">
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M9 18l6-6-6-6"/>
                       </svg>
@@ -4227,7 +4228,7 @@
                         <circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>
                       </svg>
                     </div>
-                    <div class="category-info" onclick="event.stopPropagation(); MenuBuilder.toggleCategory('${subcat.id}')" style="cursor: pointer;">
+                    <div class="category-info" onclick="event.stopPropagation(); MenuBuilder.toggleSubCategory('${subcat.id}')" style="cursor: pointer;">
                       <div class="category-name" style="font-size: 14px;">${this.escapeHtml(subcat.name)}</div>
                       <div class="category-count">${subcat.items.length} items</div>
                     </div>
@@ -4502,6 +4503,19 @@
           this.expandedCategoryId = null;
         } else {
           this.expandedCategoryId = categoryId;
+          this.expandedSubCategoryId = null;
+          this.expandedItemId = null;
+          this.expandedModifierIds.clear();
+        }
+        this.render();
+      },
+
+      // Toggle subcategory expanded/collapsed (independent of parent)
+      toggleSubCategory(subcatId) {
+        if (this.expandedSubCategoryId === subcatId) {
+          this.expandedSubCategoryId = null;
+        } else {
+          this.expandedSubCategoryId = subcatId;
           this.expandedItemId = null;
           this.expandedModifierIds.clear();
         }