diff --git a/src/baby_monitor/static/index.html b/src/baby_monitor/static/index.html
index c053243..c3e3370 100644
--- a/src/baby_monitor/static/index.html
+++ b/src/baby_monitor/static/index.html
@@ -547,7 +547,7 @@
         // Build diaper card
         const diaperCard = lastDiaperChange
           ? `
-            <div class="activity-card">
+            <a href="/diapers.html" class="activity-card" style="text-decoration:none; color:inherit;">
               <div class="icon">🧷</div>
               <div class="type">Last Diaper</div>
               <div class="time">${formatTime(lastDiaperChange.change_time)}</div>
@@ -556,19 +556,19 @@
                 ${lastDiaperChange.poop_amount && lastDiaperChange.pee_amount ? " • " : ""}
                 ${lastDiaperChange.pee_amount ? `💧 ${lastDiaperChange.pee_amount}` : ""}
               </div>
-            </div>
+            </a>
           `
           : `
-            <div class="activity-card empty">
+            <a href="/diapers.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
               <div class="icon">🧷</div>
               <div class="type">No diaper changes yet</div>
-            </div>
+            </a>
           `;
 
         // Build feeding card
         const feedingCard = lastFeeding
           ? `
-            <div class="activity-card">
+            <a href="/feedings.html" class="activity-card" style="text-decoration:none; color:inherit;">
               <div class="icon">🍼</div>
               <div class="type">Last Feeding</div>
               <div class="time">${formatTime(lastFeeding.start_time)}</div>
@@ -576,32 +576,32 @@
                 ${formatFeedingType(lastFeeding.feeding_type)}
                 ${lastFeeding.end_time ? ` • ${calculateDuration(lastFeeding.start_time, lastFeeding.end_time)}` : " (ongoing)"}
               </div>
-            </div>
+            </a>
           `
           : `
-            <div class="activity-card empty">
+            <a href="/feedings.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
               <div class="icon">🍼</div>
               <div class="type">No feedings yet</div>
-            </div>
+            </a>
           `;
 
         // Build sleep card
         const sleepCard = lastSleep
           ? `
-            <div class="activity-card">
+            <a href="/sleep.html" class="activity-card" style="text-decoration:none; color:inherit;">
               <div class="icon">😴</div>
               <div class="type">Last Sleep</div>
               <div class="time">${formatTime(lastSleep.start_time)}</div>
               <div class="details">
                 ${lastSleep.end_time ? calculateDuration(lastSleep.start_time, lastSleep.end_time) : "ongoing"}
               </div>
-            </div>
+            </a>
           `
           : `
-            <div class="activity-card empty">
+            <a href="/sleep.html" class="activity-card empty" style="text-decoration:none; color:inherit;">
               <div class="icon">😴</div>
               <div class="type">No sleep sessions yet</div>
-            </div>
+            </a>
           `;
 
         return `