diff --git a/app/web/static/js/models-running.js b/app/web/static/js/models-running.js
index 538282a..94e4ab7 100644
--- a/app/web/static/js/models-running.js
+++ b/app/web/static/js/models-running.js
@@ -86,6 +86,10 @@ class RunningModelsPage {
         }
 
         if (!runningData) {
+            if (!this.lastRunningData) {
+                this.renderStats([], health?.timestamp || null);
+                this.renderRunningUnavailable(health);
+            }
             return;
         }
 
@@ -134,11 +138,7 @@ class RunningModelsPage {
             this.renderStats(models, runningData.timestamp);
             this.renderRunningModels(models);
         } catch (error) {
-            container.innerHTML = `
-                <div class="text-center py-8 text-red-400">
-                    <p>Failed to load ollama ps output</p>
-                </div>
-            `;
+            this.renderRunningUnavailable(null);
             this.renderStats([], null);
             console.error(error);
         }
@@ -244,6 +244,21 @@ class RunningModelsPage {
             .join("");
     }
 
+    renderRunningUnavailable(health = null) {
+        const container = document.getElementById("running-models");
+        if (!container) {
+            return;
+        }
+
+        const isOffline = health?.ollama_status === "offline";
+        container.innerHTML = `
+            <div class="text-center py-8 ${isOffline ? "text-yellow-300" : "text-red-400"}">
+                <p>${isOffline ? "Selected server is offline." : "Failed to load ollama ps output."}</p>
+                <p class="text-sm text-gray-400 mt-2">Data will refresh automatically when the server becomes reachable.</p>
+            </div>
+        `;
+    }
+
     renderModelCard(model) {
         const name = this.escapeHtml(model.name || "unknown");
         const modelId = this.escapeHtml(model.model || "-");