diff --git a/assets/js/app.js b/assets/js/app.js
index b479b61..c468d6e 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -5197,20 +5197,30 @@ function _applyInsightPhase() {
 
 // ===== DASHBOARD =====
 function renderDashboardLocationCards(counts) {
-    const container = document.getElementById('dashboard-location-cards');
-    if (!container) return;
+    const statsContainer = document.getElementById('dashboard-stats');
+    if (!statsContainer) return;
     const keys = Object.keys(LOCATIONS);
-    container.innerHTML = keys.map(key => {
+    const cardsHtml = keys.map(key => {
         const info = LOCATIONS[key];
         const count = counts[key] !== undefined ? counts[key] : '-';
         return `
-            <div class="stat-card" onclick="showPage('inventory', '${key}')">
+            <div class="stat-card stat-card-location" onclick="showPage('inventory', '${key}')">
                 <span class="stat-icon">${info.icon}</span>
                 <span class="stat-value">${count}</span>
                 <span class="stat-label">${escapeHtml(info.label)}</span>
             </div>
         `;
     }).join('');
+
+    // Remove previously injected location cards (keep the static "Courses" card)
+    statsContainer.querySelectorAll('.stat-card-location').forEach(el => el.remove());
+    // Insert before the Courses card (first remaining child)
+    const shoppingCard = statsContainer.querySelector('.stat-card');
+    if (shoppingCard) {
+        shoppingCard.insertAdjacentHTML('beforebegin', cardsHtml);
+    } else {
+        statsContainer.insertAdjacentHTML('afterbegin', cardsHtml);
+    }
 }
 async function loadDashboard() {
     // Render one card per known location, with shimmer while loading