diff --git a/templates/apps_table.html b/templates/apps_table.html
index 11cabdc..52a3825 100644
--- a/templates/apps_table.html
+++ b/templates/apps_table.html
@@ -1,150 +1,211 @@
-{% macro donut(label, pct, subtitle) %}
-{% set r = 22 %}
-{% set c = 2 * 3.1415926 * r %}
-{% set dash = (pct / 100.0) * c %}
-<div style="border:1px solid #ddd; border-radius: 12px; padding: 12px; display:flex; gap: 12px; align-items:center;">
-    <svg width="64" height="64" viewBox="0 0 64 64" aria-label="{{ label }}">
-        <circle cx="32" cy="32" r="{{ r }}" fill="none" stroke="#eee" stroke-width="8" />
-        <circle cx="32" cy="32" r="{{ r }}" fill="none" stroke="#111" stroke-width="8" stroke-linecap="round"
-            stroke-dasharray="{{ dash }} {{ c - dash }}" transform="rotate(-90 32 32)" />
-        <text x="32" y="36" text-anchor="middle" font-size="14" font-family="system-ui" fill="#111">{{ pct|round(0)
-            }}%</text>
-    </svg>
-    <div>
-        <div style="font-weight:700;">{{ label }}</div>
-        <div class="muted">{{ subtitle }}</div>
-    </div>
-</div>
-{% endmacro %}
+{% macro donut(label, pct, subtitle, value_text=None) %}
+{% set p = pct if pct is not none else 0 %}
+{% if p < 0 %}{% set p=0 %}{% endif %} {% if p> 100 %}{% set p = 100 %}{% endif %}
 
-<h2>Live usage</h2>
-<div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
-    {{ donut("CPU (containers)", data.gauges.cpu_total_pct, "Sum of container CPU%") }}
-    {{ donut("RAM (containers)", data.gauges.ram_pct, "Container RAM vs host total") }}
-    {{ donut("Docker images", data.gauges.docker_images_pct, "Used vs total image store") }}
-</div>
+    {# severity color #}
+    {% if p < 60 %} {% set col="#16a34a" %} {# green #} {% elif p < 85 %} {% set col="#f59e0b" %} {# amber #} {% else %}
+        {% set col="#ef4444" %} {# red #} {% endif %} {% set r=24 %} {% set stroke=10 %} {% set c=2 * 3.1415926 * r %}
+        {% set dash=(p / 100.0) * c %} {% set txt=value_text if value_text else (p|round(0) ~ "%" ) %} <div style="
+      border:1px solid rgba(0,0,0,.08);
+      border-radius: 16px;
+      padding: 14px 14px;
+      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
+      box-shadow: 0 8px 24px rgba(0,0,0,.06);
+      display:flex;
+      align-items:center;
+      gap: 14px;
+      min-height: 92px;
+    ">
+        <div style="position:relative; width:72px; height:72px; flex: 0 0 auto;">
+            <svg width="72" height="72" viewBox="0 0 72 72">
+                <defs>
+                    <filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%">
+                        <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.18" />
+                    </filter>
+                </defs>
 
-<h2>System</h2>
-<div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
-    <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
-        <div class="muted">Host</div>
-        <div><strong>{{ data.system.name or "—" }}</strong></div>
-        <div class="muted">{{ data.system.operating_system }} · {{ data.system.kernel_version }}</div>
-    </div>
+                {# track #}
+                <circle cx="36" cy="36" r="{{ r }}" fill="none" stroke="rgba(0,0,0,.08)" stroke-width="{{ stroke }}"
+                    stroke-linecap="round" />
 
-    <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
-        <div class="muted">Compute</div>
-        <div><strong>{{ data.system.cpus or "—" }}</strong> CPUs</div>
-        <div><strong>{{ data.system.mem_total_h or "—" }}</strong> RAM</div>
-    </div>
+                {# progress ring #}
+                <circle cx="36" cy="36" r="{{ r }}" fill="none" stroke="{{ col }}" stroke-width="{{ stroke }}"
+                    stroke-linecap="round" stroke-dasharray="{{ dash }} {{ c - dash }}" transform="rotate(-90 36 36)"
+                    filter="url(#softShadow)" />
 
-    <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
-        <div class="muted">Docker</div>
-        <div>Engine: <strong>{{ data.system.server_version or "—" }}</strong></div>
-        <div>Images: <strong>{{ data.system.images or "—" }}</strong></div>
-        <div>Containers: <strong>{{ data.system.containers_running or "—" }}</strong> running / <strong>{{
-                data.system.containers_stopped or "—" }}</strong> stopped</div>
-    </div>
-</div>
+                {# center text #}
+                <text x="36" y="40" text-anchor="middle" font-size="14" font-weight="700"
+                    font-family="system-ui, -apple-system, Segoe UI, Roboto" fill="rgba(0,0,0,.82)">{{ txt }}</text>
+            </svg>
+
+            {# small dot marker at end (nice touch) #}
+            {% set angle = (p/100.0) * 2 * 3.1415926 - (3.1415926/2) %}
+            {% set cx = 36 + r * (angle|float|cos) %}
+            {% set cy = 36 + r * (angle|float|sin) %}
+        </div>
+
+        <div style="min-width: 0;">
+            <div style="
+          display:flex;
+          align-items:center;
+          justify-content:space-between;
+          gap: 10px;">
+                <div style="font-weight:800; letter-spacing:-0.2px;">{{ label }}</div>
+                <div style="
+            font-size:12px;
+            padding: 2px 8px;
+            border-radius: 999px;
+            background: rgba(0,0,0,.04);
+            color: rgba(0,0,0,.65);
+            flex: 0 0 auto;">
+                    live
+                </div>
+            </div>
+
+            <div class="muted"
+                style="margin-top:4px; font-size:12.5px; color: rgba(0,0,0,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
+                {{ subtitle }}
+            </div>
+
+            {# bar meter for quick scan #}
+            <div
+                style="margin-top:10px; height:8px; border-radius:999px; background: rgba(0,0,0,.07); overflow:hidden;">
+                <div style="height:100%; width: {{ p }}%; background: {{ col }}; border-radius:999px;"></div>
+            </div>
+        </div>
+        </div>
+        {% endmacro %}
 
 
-<h3>Docker disk usage</h3>
-<table>
-    <thead>
-        <tr>
-            <th>Type</th>
-            <th>Total</th>
-            <th>Active</th>
-            <th>Size</th>
-            <th>Reclaimable</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for typ, r in data.system.system_df.items() %}
-        <tr>
-            <td><strong>{{ typ }}</strong></td>
-            <td>{{ r.total }}</td>
-            <td>{{ r.active }}</td>
-            <td>{{ r.size }}</td>
-            <td>{{ r.reclaimable }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        <h2 style="margin-top: 0;">Live usage</h2>
+        <div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
+            {{ donut("CPU", data.gauges.cpu_total_pct, "Sum of container CPU% (clamped)") }}
+            {{ donut("RAM", data.gauges.ram_pct, "All containers vs host RAM", (data.gauges.ram_used_h ~ " / " ~
+            data.gauges.ram_total_h)) }}
+            {{ donut("Docker disk", data.gauges.docker_images_pct, "Images used vs total store") }}
+        </div>
 
-<div class="muted">Generated at: {{ data.generated_at }}</div>
+        <h2>System</h2>
+        <div style="display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px 0;">
+            <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
+                <div class="muted">Host</div>
+                <div><strong>{{ data.system.name or "—" }}</strong></div>
+                <div class="muted">{{ data.system.operating_system }} · {{ data.system.kernel_version }}</div>
+            </div>
 
-{% if data.warnings %}
-<div style="margin: 10px 0; padding: 10px; border: 1px solid #f2c037; background: #fff7db; border-radius: 8px;">
-    <strong>Warnings</strong>
-    <ul>
-        {% for w in data.warnings %}
-        <li>{{ w }}</li>
-        {% endfor %}
-    </ul>
-</div>
-{% endif %}
+            <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
+                <div class="muted">Compute</div>
+                <div><strong>{{ data.system.cpus or "—" }}</strong> CPUs</div>
+                <div><strong>{{ data.system.mem_total_h or "—" }}</strong> RAM</div>
+            </div>
 
-<h2>Apps</h2>
-<table>
-    <thead>
-        <tr>
-            <th>App</th>
-            <th>URL</th>
-            <th>Status</th>
-            <th>CPU</th>
-            <th>RAM</th>
-            <th>Restarts</th>
-            <th>Image</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for r in data.apps %}
-        <tr>
-            <td><strong>{{ r.app }}</strong></td>
-            <td><a href="{{ r.url }}">{{ r.url }}</a></td>
-            <td class="muted">{{ r.status }}</td>
-            <td>{{ r.cpu or "—" }}</td>
-            <td>
-                {% if r.mem_used %}
-                {{ r.mem_used }} / {{ r.mem_limit }} ({{ r.mem_pct }})
-                {% else %} — {% endif %}
-            </td>
-            <td>{{ r.restarts }}</td>
-            <td class="muted">{{ r.image }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
+            <div style="border:1px solid #ddd; border-radius: 10px; padding: 12px;">
+                <div class="muted">Docker</div>
+                <div>Engine: <strong>{{ data.system.server_version or "—" }}</strong></div>
+                <div>Images: <strong>{{ data.system.images or "—" }}</strong></div>
+                <div>Containers: <strong>{{ data.system.containers_running or "—" }}</strong> running / <strong>{{
+                        data.system.containers_stopped or "—" }}</strong> stopped</div>
+            </div>
+        </div>
 
-{% if data.infra %}
-<h2 style="margin-top: 24px;">Infra</h2>
-<table>
-    <thead>
-        <tr>
-            <th>Container</th>
-            <th>Status</th>
-            <th>CPU</th>
-            <th>RAM</th>
-            <th>Restarts</th>
-            <th>Image</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for r in data.infra %}
-        <tr>
-            <td><strong>{{ r.container }}</strong></td>
-            <td class="muted">{{ r.status }}</td>
-            <td>{{ r.cpu or "—" }}</td>
-            <td>
-                {% if r.mem_used %}
-                {{ r.mem_used }} / {{ r.mem_limit }} ({{ r.mem_pct }})
-                {% else %} — {% endif %}
-            </td>
-            <td>{{ r.restarts }}</td>
-            <td class="muted">{{ r.image }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
-{% endif %}
\ No newline at end of file
+
+        <h3>Docker disk usage</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>Type</th>
+                    <th>Total</th>
+                    <th>Active</th>
+                    <th>Size</th>
+                    <th>Reclaimable</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for typ, r in data.system.system_df.items() %}
+                <tr>
+                    <td><strong>{{ typ }}</strong></td>
+                    <td>{{ r.total }}</td>
+                    <td>{{ r.active }}</td>
+                    <td>{{ r.size }}</td>
+                    <td>{{ r.reclaimable }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+
+        <div class="muted">Generated at: {{ data.generated_at }}</div>
+
+        {% if data.warnings %}
+        <div style="margin: 10px 0; padding: 10px; border: 1px solid #f2c037; background: #fff7db; border-radius: 8px;">
+            <strong>Warnings</strong>
+            <ul>
+                {% for w in data.warnings %}
+                <li>{{ w }}</li>
+                {% endfor %}
+            </ul>
+        </div>
+        {% endif %}
+
+        <h2>Apps</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>App</th>
+                    <th>URL</th>
+                    <th>Status</th>
+                    <th>CPU</th>
+                    <th>RAM</th>
+                    <th>Restarts</th>
+                    <th>Image</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for r in data.apps %}
+                <tr>
+                    <td><strong>{{ r.app }}</strong></td>
+                    <td><a href="{{ r.url }}">{{ r.url }}</a></td>
+                    <td class="muted">{{ r.status }}</td>
+                    <td>{{ r.cpu or "—" }}</td>
+                    <td>
+                        {% if r.mem_used %}
+                        {{ r.mem_used }} / {{ r.mem_limit }} ({{ r.mem_pct }})
+                        {% else %} — {% endif %}
+                    </td>
+                    <td>{{ r.restarts }}</td>
+                    <td class="muted">{{ r.image }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+
+        {% if data.infra %}
+        <h2 style="margin-top: 24px;">Infra</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Container</th>
+                    <th>Status</th>
+                    <th>CPU</th>
+                    <th>RAM</th>
+                    <th>Restarts</th>
+                    <th>Image</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for r in data.infra %}
+                <tr>
+                    <td><strong>{{ r.container }}</strong></td>
+                    <td class="muted">{{ r.status }}</td>
+                    <td>{{ r.cpu or "—" }}</td>
+                    <td>
+                        {% if r.mem_used %}
+                        {{ r.mem_used }} / {{ r.mem_limit }} ({{ r.mem_pct }})
+                        {% else %} — {% endif %}
+                    </td>
+                    <td>{{ r.restarts }}</td>
+                    <td class="muted">{{ r.image }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% endif %}
\ No newline at end of file