diff --git a/restaurant-picker.html b/restaurant-picker.html
index 4156588..bbe8694 100644
--- a/restaurant-picker.html
+++ b/restaurant-picker.html
@@ -74,6 +74,19 @@ header p{font-size:0.85rem;color:#f0cca0;margin-top:3px}
 @keyframes pop{from{transform:scale(0.85);opacity:0}to{transform:scale(1);opacity:1}}
 .no-results{padding:30px;text-align:center;color:#5a3a20}
 ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#1a0a00}::-webkit-scrollbar-thumb{background:#5a2a00;border-radius:3px}
+.course-browse-bar{background:#241000;padding:8px 24px;display:flex;gap:10px;border-bottom:1px solid #5a2a00}
+.btn-course{background:#3a1a00;border:1px solid #7a4a00;color:#f5c842;padding:7px 20px;border-radius:20px;cursor:pointer;font-size:0.85rem;font-weight:600;transition:all 0.2s}
+.btn-course:hover{background:#5a2a00;border-color:#f5c842}
+.course-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:100;display:flex;align-items:center;justify-content:center}
+.course-modal{background:#1f0c00;border:1px solid #7a4a00;border-radius:12px;padding:24px 24px 18px;max-width:480px;width:90%;max-height:80vh;display:flex;flex-direction:column}
+.course-modal h2{color:#f5c842;font-size:1.2rem;margin-bottom:14px;flex-shrink:0}
+.course-modal-list{overflow-y:auto;flex:1;border:1px solid #3a1a00;border-radius:8px}
+.course-dish-item{padding:10px 14px;border-bottom:1px solid #2a1200;cursor:pointer;transition:background 0.15s}
+.course-dish-item:last-child{border-bottom:none}
+.course-dish-item:hover{background:#2e1500}
+.course-dish-name{font-weight:600;color:#f0e6d3;font-size:0.9rem}
+.course-dish-restaurant{font-size:0.78rem;color:#a0785a;margin-top:2px}
+.course-modal-close{margin-top:14px;flex-shrink:0;text-align:right}
 </style>
 </head>
 <body>
@@ -103,6 +116,11 @@ header p{font-size:0.85rem;color:#f0cca0;margin-top:3px}
   <button class="btn btn-outline" onclick="clearAll()">Clear All</button>
   <button class="btn btn-gold" onclick="openPicker()">🎲 Pick for Us!</button>
 </div>
+<div class="course-browse-bar">
+  <button class="btn btn-course" onclick="openCourseBrowse('First Course')">🥗 First Course</button>
+  <button class="btn btn-course" onclick="openCourseBrowse('Second Course')">🍖 Second Course</button>
+  <button class="btn btn-course" onclick="openCourseBrowse('Third Course')">🍮 Third Course</button>
+</div>
 <div class="main">
   <div class="list-panel" id="listPanel"></div>
   <div class="detail-panel" id="detailPanel">
@@ -276,9 +294,39 @@ function pickAgain(){
 function closePicker(){ document.getElementById('pickerModal').style.display='none'; }
 function viewWinner(){ closePicker(); if(currentWinner) showDetail(currentWinner.slug); }
 
+function openCourseBrowse(course){
+  const dishes = [];
+  RESTAURANTS.forEach(r => {
+    const items = r.menu && r.menu.courses && r.menu.courses[course];
+    if(items && items.length){
+      items.forEach(item => dishes.push({name: item.name, restaurant: r.name, slug: r.slug}));
+    }
+  });
+  dishes.sort((a,b) => a.name.localeCompare(b.name));
+  document.getElementById('courseBrowseTitle').textContent = course + ' Dishes';
+  document.getElementById('courseBrowseList').innerHTML = dishes.length
+    ? dishes.map(d => `<div class="course-dish-item" onclick="selectCourseDish('${d.slug}')">
+        <div class="course-dish-name">${d.name}</div>
+        <div class="course-dish-restaurant">${d.restaurant}</div>
+      </div>`).join('')
+    : '<div style="color:#5a3a20;padding:20px;text-align:center">No dishes available</div>';
+  document.getElementById('courseBrowseOverlay').style.display = 'flex';
+}
+function closeCourseBrowse(){ document.getElementById('courseBrowseOverlay').style.display = 'none'; }
+function selectCourseDish(slug){ closeCourseBrowse(); showDetail(slug); }
+
 // Init
 applyFilters();
 updateCounts();
 </script>
+<div class="course-modal-overlay" id="courseBrowseOverlay" style="display:none" onclick="if(event.target===this)closeCourseBrowse()">
+  <div class="course-modal">
+    <h2 id="courseBrowseTitle"></h2>
+    <div class="course-modal-list" id="courseBrowseList"></div>
+    <div class="course-modal-close">
+      <button class="btn btn-outline" onclick="closeCourseBrowse()">Close</button>
+    </div>
+  </div>
+</div>
 </body>
 </html>
\ No newline at end of file
