diff --git a/static/js/offline-tasks.js b/static/js/offline-tasks.js
index fb4a9ad..916741b 100644
--- a/static/js/offline-tasks.js
+++ b/static/js/offline-tasks.js
@@ -114,9 +114,16 @@ function escapeHtml(str) {
     return div.innerHTML;
 }
 
+function isTaskOverdue(task) {
+    // Mirrors Task.is_overdue in tasks/models.py.
+    if (!task.due_date || task.status === 'completed' || task.status === 'cancelled') return false;
+    return task.due_date < todayLocalStr();
+}
+
 function renderTaskItem(task, tagsBySyncId) {
+    const overdue = isTaskOverdue(task);
     const item = document.createElement('div');
-    item.className = `task-item priority-${task.priority}${task.status === 'completed' ? ' completed' : ''}`;
+    item.className = `task-item priority-${task.priority}${overdue ? ' overdue' : ''}${task.status === 'completed' ? ' completed' : ''}`;
 
     const toggleForm = document.createElement('button');
     toggleForm.type = 'button';
@@ -140,13 +147,13 @@ function renderTaskItem(task, tagsBySyncId) {
 
     const metaParts = [];
     if (task.due_date) {
-        metaParts.push(`📅 ${formatDueDate(task.due_date)}`);
+        metaParts.push(`<span class="task-due${overdue ? ' overdue' : ''}">📅 ${formatDueDate(task.due_date)}</span>`);
     }
     const tagChips = renderTagChips(task, tagsBySyncId);
     if (metaParts.length || tagChips) {
         const meta = document.createElement('div');
         meta.className = 'task-meta';
-        meta.innerHTML = metaParts.map((p) => `<span>${p}</span>`).join(' ') + tagChips;
+        meta.innerHTML = metaParts.join(' ') + tagChips;
         content.appendChild(meta);
     }
 
diff --git a/templates/sw.js b/templates/sw.js
index 026ef13..b85a8f6 100644
--- a/templates/sw.js
+++ b/templates/sw.js
@@ -1,4 +1,4 @@
-{% load static %}const CACHE_NAME = 'keepitgoing-shell-v6';
+{% load static %}const CACHE_NAME = 'keepitgoing-shell-v7';
 const OFFLINE_URL = '{% url "offline" %}';
 const OFFLINE_TASKS_URL = '{% url "offline-tasks" %}';