diff --git a/static/index.html b/static/index.html
index 6d38204..48bdfd9 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1149,6 +1149,14 @@
     </div>
   </div>
 
+  <!-- ═══════════════════════════════════════════════════════════════════════
+       OFFLINE BANNER
+       ═══════════════════════════════════════════════════════════════════════ -->
+  <div id="offlineBanner" class="offline-banner">
+    📡 Offline mode — changes will sync when connected
+    <span id="queueCountBadge" class="queue-count" style="display:none;">0</span>
+  </div>
+
   <!-- ═══════════════════════════════════════════════════════════════════════
        DRAWER
        ═══════════════════════════════════════════════════════════════════════ -->
diff --git a/static/sw.js b/static/sw.js
index 7e1862b..c943e3e 100644
--- a/static/sw.js
+++ b/static/sw.js
@@ -3,7 +3,7 @@
 // Caches app shell + CDN deps. Network-first for API, cache fallback for static.
 // ═══════════════════════════════════════════════════════════════════════════
 
-const CACHE_NAME = 'canteen-v1';
+const CACHE_NAME = 'canteen-v2';
 
 // App shell — core resources needed to boot the PWA
 const APP_SHELL = [
@@ -73,8 +73,23 @@ self.addEventListener('fetch', (event) => {
     return;
   }
 
-  // API calls: pass through — main thread handles offline queuing
+  // API GET calls: network-first, cache fallback (offline reads)
+  // API POST/PUT/DELETE: pass through — main thread handles offline queuing
   if (url.pathname.startsWith('/api/')) {
+    if (event.request.method === 'GET') {
+      event.respondWith(
+        fetch(event.request)
+          .then((response) => {
+            if (response.ok) {
+              const clone = response.clone();
+              caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
+            }
+            return response;
+          })
+          .catch(() => caches.match(event.request))
+      );
+    }
+    // Non-GET API calls: pass through — main thread queues offline writes
     return;
   }