diff --git a/.claude/plans/reflective-meandering-castle.md b/.claude/plans/reflective-meandering-castle.md
index bd3dadb0..d5cdfdf6 100644
--- a/.claude/plans/reflective-meandering-castle.md
+++ b/.claude/plans/reflective-meandering-castle.md
@@ -69,7 +69,7 @@ After getting Claude Max OAuth working on the live server, hardening the deploy
 - **Change**: Add tab bar with "Dashboard" and "Setup" tabs below welcome header. Dashboard tab: current overview cards. Setup tab: EasyHome goal cards (already imported). After completing all setup wizards, default to Dashboard. Use `.mode-switcher` pattern for tab styling.
 - **Verify**: Both tabs visible, Dashboard shows live data, Setup shows goal wizards
 
-### Task 12: Wire up Home.vue Network card with real data
+### Task 12: Wire up Home.vue Network card with real data [DONE]
 - **Files**: `neode-ui/src/views/Home.vue`, `neode-ui/src/views/Server.vue`
 - **Change**: Replace hardcoded "All Running", "Connected", "12" with computed values from `useAppStore`. Check `runningCount === appCount` for services status. Use `store.isConnected` for connectivity.
 - **Verify**: Network card reflects actual service states
diff --git a/neode-ui/src/views/Home.vue b/neode-ui/src/views/Home.vue
index 3b540a0c..caa28477 100644
--- a/neode-ui/src/views/Home.vue
+++ b/neode-ui/src/views/Home.vue
@@ -141,24 +141,24 @@
             <div class="home-card-stats space-y-3 mb-4 flex-1 min-h-0">
               <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                 <div class="flex items-center gap-3">
-                  <div class="w-2 h-2 rounded-full bg-green-400"></div>
+                  <div class="w-2 h-2 rounded-full" :class="servicesDotColor"></div>
                   <span class="text-sm text-white/80">Services Status</span>
                 </div>
-                <span class="text-sm text-green-400 font-medium">All Running</span>
+                <span class="text-sm font-medium" :class="servicesStatusColor">{{ servicesStatusText }}</span>
               </div>
               <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                 <div class="flex items-center gap-3">
-                  <div class="w-2 h-2 rounded-full bg-green-400"></div>
+                  <div class="w-2 h-2 rounded-full" :class="connectivityDotColor"></div>
                   <span class="text-sm text-white/80">Connectivity</span>
                 </div>
-                <span class="text-sm text-green-400 font-medium">Connected</span>
+                <span class="text-sm font-medium" :class="connectivityColor">{{ connectivityText }}</span>
               </div>
               <div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
                 <div class="flex items-center gap-3">
                   <div class="w-2 h-2 rounded-full bg-blue-400"></div>
-                  <span class="text-sm text-white/80">Connected Nodes</span>
+                  <span class="text-sm text-white/80">Running Apps</span>
                 </div>
-                <span class="text-sm text-white/80 font-medium">12</span>
+                <span class="text-sm text-white/80 font-medium">{{ runningCount }}</span>
               </div>
             </div>
             <div class="home-card-buttons flex gap-2 mt-auto pt-4 shrink-0">
@@ -377,6 +377,24 @@ const runningCount = computed(() =>
   Object.values(packages.value).filter(pkg => pkg.state === PackageState.Running).length
 )
 
+// Network card computed values
+const servicesAllRunning = computed(() =>
+  appCount.value > 0 && runningCount.value === appCount.value
+)
+const servicesStatusText = computed(() => {
+  if (appCount.value === 0) return 'No Apps'
+  return servicesAllRunning.value ? 'All Running' : `${runningCount.value}/${appCount.value} Running`
+})
+const servicesStatusColor = computed(() =>
+  appCount.value === 0 ? 'text-white/60' : servicesAllRunning.value ? 'text-green-400' : 'text-yellow-400'
+)
+const servicesDotColor = computed(() =>
+  appCount.value === 0 ? 'bg-white/40' : servicesAllRunning.value ? 'bg-green-400' : 'bg-yellow-400'
+)
+const connectivityText = computed(() => store.isConnected ? 'Connected' : 'Disconnected')
+const connectivityColor = computed(() => store.isConnected ? 'text-green-400' : 'text-red-400')
+const connectivityDotColor = computed(() => store.isConnected ? 'bg-green-400' : 'bg-red-400')
+
 // Quick Start Goals dismiss logic
 const quickStartDismissed = ref(false)