diff --git a/app.py b/app.py
index 880ae75..b5150a2 100644
--- a/app.py
+++ b/app.py
@@ -1,5 +1,6 @@
 import base64
 import json
+import math
 import os
 import pprint
 import re
@@ -448,6 +449,30 @@ def humanize_uptime(seconds):
 
 app.jinja_env.filters["humanize_uptime"] = humanize_uptime
 
+
+def humanize_bytes(num_bytes, decimals=1):
+    """Convert a byte count to an adaptive-unit string (B/KB/MB/GB/TB/PB),
+    keeping the numeric value between roughly 1.0 and 999.9."""
+    try:
+        num_bytes = float(num_bytes)
+    except (ValueError, TypeError):
+        return "N/A"
+    if num_bytes <= 0:
+        return "0 B"
+
+    units = ["B", "KB", "MB", "GB", "TB", "PB"]
+    k = 1024
+    unit_index = int(math.floor(math.log(num_bytes, k)))
+    unit_index = max(0, min(unit_index, len(units) - 1))
+    value = num_bytes / (k**unit_index)
+
+    if unit_index == 0:
+        return f"{int(value)} B"
+    return f"{value:.{decimals}f} {units[unit_index]}"
+
+
+app.jinja_env.filters["humanize_bytes"] = humanize_bytes
+
 # Configuration file path for Docker volume
 import os
 
@@ -2315,6 +2340,8 @@ def index():
 
     # Get node list for metrics
     nodes = [n["name"] for n in cluster_nodes if n.get("status") == "online"]
+    total_nodes = len(cluster_nodes)
+    online_nodes = len(nodes)
 
     return render_template(
         "index.html",
@@ -2326,6 +2353,8 @@ def index():
         top_cpu=top_cpu,
         top_memory=top_memory,
         nodes=nodes,
+        total_nodes=total_nodes,
+        online_nodes=online_nodes,
     )
 
 
@@ -2649,7 +2678,7 @@ def tasks():
     return render_template("tasks.html")
 
 
-@app.route("/create_vm", methods=["GET", "POST"])
+@app.route("/create", methods=["GET", "POST"])
 def create_vm():
     """Create new VM or container"""
     if request.method == "POST":
@@ -2986,6 +3015,195 @@ def cluster():
     return render_template("cluster.html", cluster=cluster_info)
 
 
+@app.route("/node/<node>")
+def node_detail(node):
+    """Show detailed status, storage, disks, and guests for a single node"""
+    node_info = next((n for n in cluster_nodes if n["name"] == node), None)
+    if not node_info:
+        flash(f"Node '{node}' not found", "error")
+        return redirect(url_for("cluster"))
+
+    if node_info.get("status") != "online":
+        return render_template(
+            "node_detail.html",
+            node=node,
+            online=False,
+            status=None,
+            storages=[],
+            guests=[],
+        )
+
+    proxmox = get_proxmox_connection(node, auto_renew=True)
+    if not proxmox:
+        return render_template(
+            "node_detail.html",
+            node=node,
+            online=False,
+            status=None,
+            storages=[],
+            guests=[],
+        )
+
+    try:
+        status = proxmox.nodes(node).status.get()
+    except Exception as e:
+        flash(f"Error loading node status: {e}", "error")
+        return render_template(
+            "node_detail.html",
+            node=node,
+            online=False,
+            status=None,
+            storages=[],
+            guests=[],
+        )
+
+    # All storages configured on this node (unfiltered by content type).
+    node_storages = []
+    try:
+        for storage in proxmox.nodes(node).storage.get():
+            total = storage.get("total", 0) or 0
+            used = storage.get("used", 0) or 0
+            storage["used_percent"] = (used / total * 100) if total > 0 else 0
+            node_storages.append(storage)
+        node_storages.sort(key=lambda s: s.get("storage", "").lower())
+    except Exception as e:
+        print(f"Error getting storages for node {node}: {e}")
+
+    # Guests (VMs/containers) living on this node.
+    guests = [r for r in get_all_vms_and_containers() if r.get("node") == node]
+    guests.sort(key=lambda g: (g.get("name") or "").lower())
+
+    return render_template(
+        "node_detail.html",
+        node=node,
+        online=True,
+        status=status,
+        storages=node_storages,
+        guests=guests,
+    )
+
+
+@app.route("/api/node/<node>/metrics")
+def api_node_metrics(node):
+    """Historical CPU/load/memory/network metrics for a node (RRD-backed)."""
+    proxmox = get_proxmox_connection(node, auto_renew=True)
+    if not proxmox:
+        return jsonify({"error": "Node not found"}), 404
+
+    timeframe = request.args.get("timeframe", "day")
+    timeframe_mapping = {
+        "hour": "hour",
+        "day": "day",
+        "week": "week",
+        "month": "month",
+        "year": "year",
+    }
+    proxmox_timeframe = timeframe_mapping.get(timeframe, "day")
+
+    try:
+        status = proxmox.nodes(node).status.get()
+        try:
+            rrd_data = proxmox.nodes(node).rrddata.get(timeframe=proxmox_timeframe)
+        except Exception:
+            rrd_data = []
+
+        chart_data = {
+            "labels": [],
+            "cpu": [],
+            "loadavg": [],
+            "memory": [],
+            "network_in": [],
+            "network_out": [],
+        }
+
+        for entry in rrd_data:
+            timestamp = entry.get("time", 0)
+            if not timestamp:
+                continue
+
+            mem_total = entry.get("memtotal") or 0
+            mem_used = entry.get("memused") or 0
+
+            # Send the raw Unix timestamp (seconds) — the browser formats it
+            # in the viewer's own local timezone, so this is correct
+            # everywhere regardless of what timezone the server runs in.
+            chart_data["labels"].append(timestamp)
+            chart_data["cpu"].append(
+                (entry.get("cpu", 0) * 100) if entry.get("cpu") is not None else 0
+            )
+            chart_data["loadavg"].append(
+                entry.get("loadavg", 0) if entry.get("loadavg") is not None else 0
+            )
+            chart_data["memory"].append(
+                (mem_used / mem_total * 100) if mem_total else 0
+            )
+            chart_data["network_in"].append(
+                (entry.get("netin", 0) or 0) / (1024 * 1024)
+            )  # MB
+            chart_data["network_out"].append(
+                (entry.get("netout", 0) or 0) / (1024 * 1024)
+            )  # MB
+
+        loadavg = status.get("loadavg") or [0, 0, 0]
+        mem = status.get("memory", {}) or {}
+        current = {
+            "cpu_percent": (status.get("cpu", 0) or 0) * 100,
+            "cores": status.get("cpuinfo", {}).get("cpus", 1),
+            "loadavg": loadavg,
+            "memory": {
+                "used": mem.get("used", 0),
+                "total": mem.get("total", 0),
+                "usage_percent": (
+                    (mem.get("used", 0) / mem.get("total", 1)) * 100
+                    if mem.get("total")
+                    else 0
+                ),
+            },
+            "uptime": status.get("uptime", 0),
+        }
+
+        return jsonify(
+            {
+                "current": current,
+                "historical": chart_data,
+                "timeframe": timeframe,
+                "timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S"),
+            }
+        )
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@app.route("/api/node/<node>/disks")
+def api_node_disks(node):
+    """List local disk devices for a node, including SMART health/model/serial."""
+    proxmox = get_proxmox_connection(node, auto_renew=True)
+    if not proxmox:
+        return jsonify({"error": "Node not found"}), 404
+
+    try:
+        disks = proxmox.nodes(node).disks.list.get()
+        disks.sort(key=lambda d: d.get("devpath", ""))
+        return jsonify(disks)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
+@app.route("/api/node/<node>/zfs")
+def api_node_zfs(node):
+    """List ZFS pools for a node, if any (empty list if ZFS is not in use)."""
+    proxmox = get_proxmox_connection(node, auto_renew=True)
+    if not proxmox:
+        return jsonify({"error": "Node not found"}), 404
+
+    try:
+        pools = proxmox.nodes(node).disks.zfs.get()
+        return jsonify(pools)
+    except Exception as e:
+        # No ZFS support / not configured on this node — not a real error.
+        return jsonify([])
+
+
 @app.route("/api/nodes")
 def api_nodes():
     """API endpoint to get all cluster nodes"""
@@ -4148,20 +4366,10 @@ def api_vm_metrics(node, vmid):
         for entry in rrd_data:
             timestamp = entry.get("time", 0)
             if timestamp:
-                # Format timestamp based on timeframe
-                dt = datetime.fromtimestamp(timestamp)
-                if timeframe == "hour":
-                    label = dt.strftime("%H:%M")
-                elif timeframe == "day":
-                    label = dt.strftime("%H:%M")
-                elif timeframe == "week":
-                    label = dt.strftime("%m/%d %H:%M")
-                elif timeframe == "month":
-                    label = dt.strftime("%m/%d")
-                else:  # year
-                    label = dt.strftime("%Y-%m")
-
-                chart_data["labels"].append(label)
+                # Send the raw Unix timestamp (seconds) — the browser formats
+                # it in the viewer's own local timezone, so this is correct
+                # everywhere regardless of what timezone the server runs in.
+                chart_data["labels"].append(timestamp)
                 chart_data["cpu"].append(
                     (entry.get("cpu", 0) * 100) if entry.get("cpu") is not None else 0
                 )
diff --git a/static/img/favicon.png b/static/img/favicon.png
new file mode 100644
index 0000000..d6fd996
Binary files /dev/null and b/static/img/favicon.png differ
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
new file mode 100644
index 0000000..af3bad1
--- /dev/null
+++ b/static/img/favicon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="ProxUI">
+  <defs><linearGradient id="pxf" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4c8dff"></stop><stop offset="1" stop-color="#7b6bff"></stop></linearGradient></defs>
+  <rect x="0" y="0" width="64" height="64" rx="15" fill="url(#pxf)"></rect>
+  <g stroke="#fff" stroke-width="3.5" stroke-linecap="round">
+    <line x1="32" y1="32" x2="32" y2="14"></line><line x1="32" y1="32" x2="16" y2="47"></line><line x1="32" y1="32" x2="48" y2="47"></line>
+  </g>
+  <g fill="#fff">
+    <circle cx="32" cy="32" r="7.5"></circle><circle cx="32" cy="14" r="5"></circle><circle cx="16" cy="47" r="5"></circle><circle cx="48" cy="47" r="5"></circle>
+  </g>
+</svg>
diff --git a/static/img/logo-wordmark.svg b/static/img/logo-wordmark.svg
new file mode 100644
index 0000000..7905d45
--- /dev/null
+++ b/static/img/logo-wordmark.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 64" width="220" height="64" role="img" aria-label="ProxUI">
+  <defs>
+    <linearGradient id="pxg2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4c8dff"></stop><stop offset="1" stop-color="#7b6bff"></stop></linearGradient>
+    <linearGradient id="pxt" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#4c8dff"></stop><stop offset="1" stop-color="#7b6bff"></stop></linearGradient>
+  </defs>
+  <g stroke="url(#pxg2)" stroke-width="3" stroke-linecap="round">
+    <line x1="32" y1="32" x2="32" y2="12"></line><line x1="32" y1="32" x2="15" y2="48"></line><line x1="32" y1="32" x2="49" y2="48"></line>
+  </g>
+  <circle cx="32" cy="32" r="8" fill="url(#pxg2)"></circle>
+  <circle cx="32" cy="12" r="5.5" fill="#4c8dff"></circle>
+  <circle cx="15" cy="48" r="5.5" fill="#6478ff"></circle>
+  <circle cx="49" cy="48" r="5.5" fill="#7b6bff"></circle>
+  <text x="72" y="41" font-family="'Sora',-apple-system,'Segoe UI',sans-serif" font-weight="700" font-size="28" letter-spacing="-0.5" fill="#e6ebf5">Prox<tspan fill="url(#pxt)">UI</tspan></text>
+</svg>
diff --git a/static/img/logo.svg b/static/img/logo.svg
new file mode 100644
index 0000000..22a31c1
--- /dev/null
+++ b/static/img/logo.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="ProxUI">
+  <defs><linearGradient id="pxg" x1="0" y1="0" x2="1" y2="1">
+    <stop offset="0" stop-color="#4c8dff"></stop><stop offset="1" stop-color="#7b6bff"></stop>
+  </linearGradient></defs>
+  <g stroke="url(#pxg)" stroke-width="3" stroke-linecap="round">
+    <line x1="32" y1="32" x2="32" y2="12"></line>
+    <line x1="32" y1="32" x2="15" y2="48"></line>
+    <line x1="32" y1="32" x2="49" y2="48"></line>
+  </g>
+  <circle cx="32" cy="32" r="8" fill="url(#pxg)"></circle>
+  <circle cx="32" cy="12" r="5.5" fill="#4c8dff"></circle>
+  <circle cx="15" cy="48" r="5.5" fill="#6478ff"></circle>
+  <circle cx="49" cy="48" r="5.5" fill="#7b6bff"></circle>
+</svg>
diff --git a/static/js/utils.js b/static/js/utils.js
index 2297651..fd0b782 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -123,6 +123,38 @@ export function createAdaptivePoller(fn, baseMs = 30000) {
   };
 }
 
+/**
+ * Format a Unix timestamp (seconds) for a chart x-axis label, using the
+ * *browser's* local timezone — Date's locale methods are always
+ * timezone-correct for whoever is viewing the page, unlike formatting the
+ * timestamp on the server (which depends on the server/container's own
+ * timezone and is frequently wrong, e.g. Docker images defaulting to UTC).
+ */
+export function formatChartLabel(unixSeconds, timeframe) {
+  const d = new Date(unixSeconds * 1000);
+  switch (timeframe) {
+    case 'hour':
+    case 'day':
+      return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    case 'week':
+      return d.toLocaleDateString([], { month: '2-digit', day: '2-digit' }) + ' ' +
+        d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    case 'month':
+      return d.toLocaleDateString([], { month: '2-digit', day: '2-digit' });
+    default: // year
+      return d.toLocaleDateString([], { year: 'numeric', month: '2-digit' });
+  }
+}
+
+/** Format a Unix timestamp (seconds) as a full local date+time string. */
+export function formatDateTime(unixSeconds) {
+  if (!unixSeconds) return 'Unknown';
+  return new Date(unixSeconds * 1000).toLocaleString([], {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+  });
+}
+
 export function notify(message, type = 'info') {
   const cls = type === 'error' ? 'danger' : type;
   const el = document.createElement('div');
diff --git a/static/style.css b/static/style.css
index 3411c8b..7f340ac 100644
--- a/static/style.css
+++ b/static/style.css
@@ -2,39 +2,81 @@
 
 :root {
     color-scheme: light;
-    --app-bg: #f5f7fb;
-    --app-surface: #ffffff;
-    --app-surface-alt: #f8f9fa;
-    --app-surface-elevated: #ffffff;
-    --app-text: #212529;
-    --app-muted: #6c757d;
-    --app-border: #dee2e6;
-    --app-hover: rgba(13, 110, 253, 0.06);
-    --app-input-bg: #ffffff;
-    --app-input-disabled-bg: #e9ecef;
-    --app-shadow: rgba(0, 0, 0, 0.075);
+
+    /* ── Layout + typography tokens ── */
+    --sidebar-w: 264px; --rail-w: 74px; --topbar-h: 60px;
+    --radius: 12px; --radius-sm: 9px;
+    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+    /* ── Design tokens (light) ── */
+    --bg:#eef1f6; --bg-elev:#f6f8fb; --panel:#ffffff; --panel-2:#f7f9fc; --panel-hover:#f0f4fa;
+    --border:#e1e7f0; --border-soft:#eaeef5;
+    --text:#0f1a2b; --text-muted:#5b6b83; --text-faint:#8b98ad;
+    --accent:#2f6bff; --accent-soft:rgba(47,107,255,.10); --accent-border:rgba(47,107,255,.30);
+    --brand-grad:linear-gradient(135deg,#2f6bff,#6f6bff);
+    --ok:#12a06a; --ok-soft:rgba(18,160,106,.12);
+    --warn:#c9860a; --warn-soft:rgba(201,134,10,.14);
+    --danger:#e03e3e; --danger-soft:rgba(224,62,62,.12);
+    --violet:#6f5bff; --violet-soft:rgba(111,91,255,.12);
+    --sidebar-bg:#10131c;
+    --shadow:0 1px 2px rgba(16,28,51,.06),0 10px 30px rgba(16,28,51,.08); --shadow-sm:0 1px 2px rgba(16,28,51,.08);
+    --grid-line:rgba(15,26,43,.06); --scrim:rgba(15,26,43,.4);
+
+    /* ── Bridge: legacy --app-* vars now resolve to the design tokens above.
+       Because these use var(), they automatically follow the token overrides in
+       the dark block below (custom-property substitution is per-element). ── */
+    --app-bg: var(--bg);
+    --app-surface: var(--panel);
+    --app-surface-alt: var(--panel-2);
+    --app-surface-elevated: var(--bg-elev);
+    --app-text: var(--text);
+    --app-muted: var(--text-muted);
+    --app-border: var(--border);
+    --app-hover: var(--panel-hover);
+    --app-input-bg: var(--panel-2);
+    --app-input-disabled-bg: var(--border-soft);
+    --app-shadow: rgba(16, 28, 51, 0.06);
 }
 
 :root[data-theme="dark"] {
     color-scheme: dark;
-    --app-bg: #111827;
-    --app-surface: #172033;
-    --app-surface-alt: #202a3d;
-    --app-surface-elevated: #1c2638;
-    --app-text: #e6eaf0;
-    --app-muted: #a5afbf;
-    --app-border: #334155;
-    --app-hover: rgba(96, 165, 250, 0.12);
-    --app-input-bg: #101827;
-    --app-input-disabled-bg: #253044;
+
+    /* ── Design tokens (dark) — override the same names; --app-* follow automatically ── */
+    --bg:#0c0f16; --bg-elev:#11151f; --panel:#151a25; --panel-2:#1a2130; --panel-hover:#1f2838;
+    --border:#232b3a; --border-soft:#1b222e;
+    --text:#e6ebf5; --text-muted:#93a0b5; --text-faint:#64708a;
+    --accent:#4c8dff; --accent-soft:rgba(76,141,255,.14); --accent-border:rgba(76,141,255,.35);
+    --brand-grad:linear-gradient(135deg,#4c8dff,#6f6bff);
+    --ok:#37d19a; --ok-soft:rgba(55,209,154,.15);
+    --warn:#f5b544; --warn-soft:rgba(245,181,68,.15);
+    --danger:#ff6b6b; --danger-soft:rgba(255,107,107,.15);
+    --violet:#8b7cff; --violet-soft:rgba(139,124,255,.15);
+    --sidebar-bg:#0b0e15;
+    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.28); --shadow-sm:0 1px 2px rgba(0,0,0,.35);
+    --grid-line:rgba(255,255,255,.05); --scrim:rgba(3,6,12,.66);
+
     --app-shadow: rgba(0, 0, 0, 0.35);
 }
 
+html, body { height: 100%; }
 body {
+    margin: 0;
     background-color: var(--app-bg);
     color: var(--app-text);
+    font-family: var(--font-sans);
+    font-size: 14px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    overflow-x: hidden;
 }
 
+/* Themed scrollbars */
+* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
+*::-webkit-scrollbar { width: 9px; height: 9px; }
+*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; }
+*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
+
 .navbar-brand {
     font-weight: bold;
 }
@@ -154,6 +196,7 @@ body {
 
 .spin {
     animation: spin 1s linear infinite;
+    display: inline-block;
 }
 
 /* Form improvements */
@@ -360,5 +403,366 @@ body {
     background-size: 20px;
 }
 
-.spin { animation: spin 1s linear infinite; }
-@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+/* ============================================================
+   New UI shell — left sidebar + top utility bar (ported from the
+   ProxUI redesign mockup). Hook classes: .app-shell / .app-sidebar /
+   .app-nav-primary / .app-navbar / .app-nav-utility / .app-main.
+   ============================================================ */
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent); text-decoration: underline; }
+.text-muted-2 { color: var(--text-muted) !important; }
+.text-faint { color: var(--text-faint) !important; }
+.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+/* ===================== SHELL ===================== */
+.app-shell{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; grid-template-rows:100vh; }
+
+.app-sidebar{ grid-column:1; background:var(--sidebar-bg); color:#c7d0e0; display:flex; flex-direction:column;
+  min-height:0; border-right:1px solid rgba(255,255,255,.06); position:relative; z-index:40; }
+.sidebar-brand{ display:flex; align-items:center; gap:11px; height:var(--topbar-h); padding:0 20px; flex-shrink:0;
+  border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; }
+.sidebar-brand:hover{ text-decoration:none; }
+.brand-mark{ width:34px; height:34px; flex-shrink:0; display:grid; place-items:center; }
+.brand-mark img{ width:100%; height:100%; display:block; }
+.brand-text{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
+.brand-name{ font-weight:700; font-size:16px; color:#fff; letter-spacing:-.2px; }
+.brand-ver{ font-size:11px; color:#7a8599; font-variant-numeric:tabular-nums; }
+.app-nav-primary{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px; list-style:none; margin:0; }
+.nav-section-label{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
+  color:#5b6579; padding:16px 12px 7px; white-space:nowrap; }
+.nav-link-item{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--radius-sm);
+  color:#aeb8ca; font-weight:500; font-size:13.5px; white-space:nowrap; position:relative; cursor:pointer;
+  transition:background .13s,color .13s; }
+.nav-link-item .bi{ font-size:17px; flex-shrink:0; width:20px; text-align:center; }
+.nav-link-item:hover{ background:rgba(255,255,255,.055); color:#fff; text-decoration:none; }
+.nav-link-item.active{ background:var(--accent-soft); color:#fff; }
+.nav-link-item.active::before{ content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
+  width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--accent); }
+.nav-link-item.disabled{ color:#5f6a7e; cursor:default; }
+.nav-link-item.disabled:hover{ background:transparent; color:#5f6a7e; }
+.nav-badge{ margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
+  padding:2px 7px; border-radius:20px; background:rgba(255,255,255,.08); color:#8a94a8; }
+.nav-badge.soon{ background:var(--warn-soft); color:var(--warn); }
+.nav-count{ margin-left:auto; font-size:11px; font-weight:700; min-width:20px; text-align:center; padding:1px 6px;
+  border-radius:20px; background:rgba(255,255,255,.09); color:#c7d0e0; }
+.sidebar-foot{ flex-shrink:0; padding:12px; border-top:1px solid rgba(255,255,255,.06); }
+.node-pill{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:var(--radius-sm); background:rgba(255,255,255,.04); }
+.node-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); flex-shrink:0; }
+.node-pill .meta{ min-width:0; line-height:1.25; }
+.node-pill .nm{ font-size:12.5px; color:#e6ebf5; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.node-pill .sub{ font-size:10.5px; color:#7a8599; white-space:nowrap; }
+
+.app-col{ grid-column:2; display:flex; flex-direction:column; min-width:0; height:100vh; }
+
+.app-navbar{ height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; gap:14px; padding:0 20px;
+  background:var(--bg-elev); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30; }
+.topbar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
+.page-heading{ min-width:0; line-height:1.15; }
+.page-heading .crumb{ font-size:11px; color:var(--text-faint); font-weight:500; }
+.page-heading .h{ font-size:16px; font-weight:700; letter-spacing:-.3px; white-space:nowrap; }
+.icon-btn{ width:38px; height:38px; border-radius:10px; border:1px solid transparent; background:transparent;
+  color:var(--text-muted); font-size:18px; display:grid; place-items:center; cursor:pointer; position:relative;
+  transition:background .13s,color .13s,border-color .13s; }
+.icon-btn:hover{ background:var(--panel-hover); color:var(--text); }
+.icon-btn.on,.icon-btn.show{ background:var(--accent-soft); color:var(--accent); }
+.hamburger{ display:none; }
+.app-nav-utility{ display:flex; align-items:center; gap:8px; margin-left:auto; }
+.count-badge{ position:absolute; top:3px; right:3px; min-width:17px; height:17px; padding:0 4px; border-radius:20px;
+  background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center;
+  border:2px solid var(--bg-elev); line-height:1; }
+.count-badge.warn{ background:var(--warn); }
+.util-divider{ width:1px; height:26px; background:var(--border); margin:0 3px; }
+.cluster-trigger{ display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:10px;
+  border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; transition:border-color .13s,background .13s; }
+.cluster-trigger:hover{ border-color:var(--accent-border); background:var(--panel-hover); }
+.cluster-trigger .cl-ico{ color:var(--accent); font-size:16px; }
+.cluster-trigger .cl-name{ font-weight:600; font-size:13px; white-space:nowrap; }
+.cluster-trigger .cl-lbl{ font-size:10px; color:var(--text-faint); line-height:1; }
+.cluster-trigger .bi-chevron-down{ font-size:11px; color:var(--text-faint); }
+.pop{ position:absolute; top:calc(100% + 9px); right:0; min-width:280px; background:var(--panel);
+  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); z-index:60; overflow:hidden; }
+.pop.left{ right:auto; left:0; }
+.pop-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 15px; border-bottom:1px solid var(--border-soft); }
+.pop-head .t{ font-weight:700; font-size:13px; }
+.pop-body{ max-height:340px; overflow-y:auto; }
+.pop-foot{ padding:9px 15px; border-top:1px solid var(--border-soft); }
+.pop-item{ display:flex; align-items:center; gap:11px; padding:10px 15px; cursor:pointer; color:var(--text); transition:background .12s; }
+.pop-item:hover{ background:var(--panel-hover); text-decoration:none; color:var(--text); }
+.pop-item.active-cl{ background:var(--accent-soft); }
+.pop-item .job-ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; flex-shrink:0; }
+.job-ico.run{ background:var(--accent-soft); color:var(--accent); }
+.job-ico.ok{ background:var(--ok-soft); color:var(--ok); }
+.job-ico.err{ background:var(--danger-soft); color:var(--danger); }
+.pop-empty{ padding:34px 15px; text-align:center; color:var(--text-faint); font-size:13px; }
+
+.app-main{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:24px 26px 48px; }
+.main-inner{ max-width:1560px; margin:0 auto; }
+
+/* ===================== SHARED PIECES ===================== */
+.card-x{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
+.card-x .cx-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border-soft); }
+.card-x .cx-title{ font-size:13px; font-weight:700; letter-spacing:.01em; }
+.card-x .cx-body{ padding:16px 18px; }
+.card-x .cx-body.tight{ padding:6px 6px; }
+.card-x .cx-body.flush{ padding:0; }
+
+.stat{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px 17px;
+  display:flex; align-items:flex-start; gap:14px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
+  transition:border-color .15s,transform .15s; height:100%; }
+.stat:hover{ border-color:var(--accent-border); transform:translateY(-1px); }
+.stat .ico{ width:44px; height:44px; border-radius:11px; display:grid; place-items:center; font-size:21px; flex-shrink:0; }
+.stat .val{ font-size:27px; font-weight:750; line-height:1; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
+.stat .lbl{ font-size:12px; color:var(--text-muted); font-weight:600; margin-top:5px; }
+.stat .trend{ font-size:11px; font-weight:600; margin-top:6px; display:flex; align-items:center; gap:4px; }
+.ico.blue{ background:var(--accent-soft); color:var(--accent); }
+.ico.ok{ background:var(--ok-soft); color:var(--ok); }
+.ico.warn{ background:var(--warn-soft); color:var(--warn); }
+.ico.violet{ background:var(--violet-soft); color:var(--violet); }
+.ico.slate{ background:rgba(148,163,184,.14); color:var(--text-muted); }
+.ico.danger{ background:var(--danger-soft); color:var(--danger); }
+
+.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; line-height:1.3; white-space:nowrap; }
+.pill .d{ width:6px; height:6px; border-radius:50%; }
+.pill.run{ background:var(--ok-soft); color:var(--ok); } .pill.run .d{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
+.pill.stop{ background:var(--danger-soft); color:var(--danger); } .pill.stop .d{ background:var(--danger); }
+.pill.tmpl{ background:var(--violet-soft); color:var(--violet); } .pill.tmpl .d{ background:var(--violet); }
+.pill.maint{ background:var(--warn-soft); color:var(--warn); } .pill.maint .d{ background:var(--warn); }
+.pill.err{ background:var(--danger-soft); color:var(--danger); }
+.pill.ok{ background:var(--ok-soft); color:var(--ok); }
+.pill.info{ background:var(--accent-soft); color:var(--accent); }
+.type-chip{ font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:6px;
+  text-transform:uppercase; background:var(--panel-2); color:var(--text-muted); border:1px solid var(--border); white-space:nowrap; }
+.type-chip.vm{ color:var(--accent); border-color:var(--accent-border); }
+.type-chip.lxc{ color:var(--violet); border-color:var(--violet); }
+
+.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
+.tbl th{ text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
+  color:var(--text-faint); padding:10px 14px; border-bottom:1px solid var(--border); position:sticky; top:0;
+  background:var(--panel); z-index:1; white-space:nowrap; }
+.tbl td{ padding:11px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
+.tbl tbody tr:last-child td{ border-bottom:0; }
+.tbl tbody tr{ transition:background .1s; }
+.tbl tbody tr:hover{ background:var(--panel-hover); }
+.tbl td .nm{ font-weight:600; color:var(--text); }
+.tbl td.num{ text-align:right; font-variant-numeric:tabular-nums; }
+.tbl th.num{ text-align:right; }
+
+.ubar{ height:6px; border-radius:20px; background:var(--panel-2); overflow:hidden; min-width:60px; }
+.ubar > i{ display:block; height:100%; border-radius:20px; background:var(--accent); }
+.ubar > i.hot{ background:var(--warn); }
+.ubar > i.crit{ background:var(--danger); }
+.ubar > i.okc{ background:var(--ok); }
+.usage-cell{ display:flex; align-items:center; gap:9px; }
+.usage-cell .pct{ font-size:12px; font-variant-numeric:tabular-nums; min-width:44px; text-align:right; color:var(--text-muted); }
+
+.seg{ display:inline-flex; background:var(--panel-2); border:1px solid var(--border); border-radius:9px; padding:3px; gap:2px; }
+.seg button{ border:0; background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; padding:5px 12px;
+  border-radius:6px; cursor:pointer; transition:background .12s,color .12s; white-space:nowrap; }
+.seg button:hover{ color:var(--text); }
+.seg button.on{ background:var(--panel); color:var(--text); box-shadow:var(--shadow-sm); }
+
+.chart-box{ position:relative; height:150px; }
+.chart-box.tall{ height:210px; }
+.sec-title{ font-size:15px; font-weight:750; letter-spacing:-.3px; }
+.sec-sub{ font-size:12.5px; color:var(--text-muted); }
+
+/* buttons */
+.btn-x{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:8px 14px;
+  border-radius:9px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer;
+  transition:background .12s,border-color .12s,color .12s; white-space:nowrap; }
+.btn-x:hover{ background:var(--panel-hover); border-color:var(--accent-border); color:var(--text); text-decoration:none; }
+.btn-x.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
+.btn-x.primary:hover{ filter:brightness(1.08); color:#fff; }
+.btn-x.ghost{ background:transparent; border-color:transparent; }
+.btn-x.sm{ padding:5px 10px; font-size:12px; }
+.btn-x.danger{ color:var(--danger); border-color:transparent; background:transparent; }
+.btn-x.danger:hover{ background:var(--danger-soft); border-color:var(--danger-soft); }
+
+/* row actions */
+.act-row{ display:flex; align-items:center; gap:3px; justify-content:flex-end; }
+.act-btn{ width:30px; height:30px; border-radius:8px; border:1px solid transparent; background:transparent;
+  color:var(--text-muted); font-size:14px; display:grid; place-items:center; cursor:pointer; transition:background .12s,color .12s; }
+.act-btn:hover{ background:var(--panel-hover); color:var(--text); }
+.act-btn.go:hover{ color:var(--ok); } .act-btn.stopc:hover{ color:var(--danger); } .act-btn.pri:hover{ color:var(--accent); }
+
+/* form controls (opt-in .inp helpers from the design system) */
+.field{ margin-bottom:14px; }
+.field > label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
+.field .hint{ font-size:11px; color:var(--text-faint); margin-top:5px; }
+.inp, select.inp, textarea.inp{ width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:9px;
+  color:var(--text); font-size:13.5px; padding:9px 12px; font-family:inherit; transition:border-color .12s,box-shadow .12s; outline:none; }
+.inp:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
+.inp::placeholder{ color:var(--text-faint); }
+select.inp{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path fill='%2393a0b5' d='M4 6l4 4 4-4'/></svg>");
+  background-repeat:no-repeat; background-position:right 11px center; padding-right:32px; }
+.search-inp{ position:relative; }
+.search-inp .bi{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:15px; }
+.search-inp input{ padding-left:34px; }
+
+/* toggle switch */
+.sw{ width:38px; height:22px; border-radius:20px; background:var(--panel-2); border:1px solid var(--border); position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
+.sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-faint); transition:transform .15s,background .15s; }
+.sw.on{ background:var(--accent); border-color:var(--accent); } .sw.on::after{ transform:translateX(16px); background:#fff; }
+
+/* node health strip */
+.node-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:12px; }
+.node-card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px;
+  cursor:pointer; transition:border-color .13s,transform .13s,box-shadow .13s; box-shadow:var(--shadow-sm); }
+.node-card:hover{ border-color:var(--accent-border); transform:translateY(-1px); }
+.node-card.sel{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
+.node-card .nc-top{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
+.node-card .nc-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
+.nc-dot.online{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
+.nc-dot.maintenance{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }
+.nc-dot.offline{ background:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
+.node-card .nc-name{ font-weight:700; font-size:13.5px; line-height:1.1; }
+.node-card .nc-role{ font-size:10.5px; color:var(--text-faint); }
+.node-card .nc-metric{ display:flex; align-items:center; gap:8px; margin-top:7px; }
+.node-card .nc-metric .k{ width:34px; font-size:10px; font-weight:700; letter-spacing:.03em; color:var(--text-faint); text-transform:uppercase; }
+.node-card .nc-metric .pct{ width:42px; text-align:right; font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--text-muted); }
+
+/* stepper */
+.stepper{ display:flex; align-items:center; gap:0; overflow-x:auto; padding-bottom:4px; }
+.step{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
+.step .sdot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
+  background:var(--panel-2); border:1px solid var(--border); color:var(--text-faint); flex-shrink:0; }
+.step.on .sdot{ background:var(--accent); border-color:var(--accent); color:#fff; }
+.step.done .sdot{ background:var(--ok-soft); border-color:var(--ok); color:var(--ok); }
+.step .slbl{ font-size:12.5px; font-weight:600; color:var(--text-faint); white-space:nowrap; }
+.step.on .slbl, .step.done .slbl{ color:var(--text); }
+.step-line{ width:34px; height:2px; background:var(--border); margin:0 6px; flex-shrink:0; }
+.step.done + .step-line, .step-line.done{ background:var(--ok); }
+
+.summary-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
+.summary-row:last-child{ border-bottom:0; }
+.summary-row .k{ color:var(--text-muted); } .summary-row .v{ font-weight:600; }
+
+.divider{ height:1px; background:var(--border-soft); border:0; margin:0; }
+.dot-online{ color:var(--ok); } .dot-offline{ color:var(--danger); }
+
+.tag{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent); }
+.scrim{ position:fixed; inset:0; background:var(--scrim); z-index:39; backdrop-filter:blur(2px); }
+
+.filter-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
+.filter-bar .search-inp{ flex:1 1 240px; max-width:340px; }
+.filter-bar select.inp{ width:auto; min-width:130px; }
+
+.empty-hint{ padding:44px 20px; text-align:center; color:var(--text-faint); }
+
+/* detail / config / tabs */
+.kv{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:12.5px; }
+.kv:last-child{ border-bottom:0; }
+.kv .k{ color:var(--text-muted); white-space:nowrap; } .kv .v{ font-weight:600; text-align:right; word-break:break-word; }
+.metric-hero{ display:flex; gap:12px; flex-wrap:wrap; }
+.hero-stat{ flex:1 1 140px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px 14px; }
+.hero-stat .k{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); }
+.hero-stat .v{ font-size:20px; font-weight:750; font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-.3px; }
+.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer; }
+.back-link:hover{ color:var(--text); }
+.cfg-grid{ column-count:2; column-gap:20px; }
+@media (max-width:900px){ .cfg-grid{ column-count:1; } }
+.cfg-box{ break-inside:avoid; margin-bottom:16px; }
+.cfg-box h6{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); margin:0 0 6px; }
+.confirm-box{ border:1px solid var(--danger); background:var(--danger-soft); border-radius:var(--radius); padding:16px 18px; }
+.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border); overflow-x:auto; }
+.tabs button{ border:0; background:transparent; color:var(--text-muted); font-size:13px; font-weight:600; padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
+.tabs button:hover{ color:var(--text); }
+.tabs button.on{ color:var(--accent); border-bottom-color:var(--accent); }
+.pkg-line{ display:flex; align-items:center; gap:10px; font-size:12.5px; padding:6px 0; }
+.pkg-line .mono{ color:var(--text-muted); }
+
+/* ===================== RESPONSIVE ===================== */
+@media (max-width:1199.98px){
+  .app-shell{ grid-template-columns:var(--rail-w) 1fr; }
+  .app-sidebar .brand-text,.app-sidebar .nav-link-item span.lbl,.app-sidebar .nav-badge,
+  .app-sidebar .nav-count,.app-sidebar .nav-section-label,.app-sidebar .node-pill .meta{ display:none; }
+  .app-sidebar .nav-link-item{ justify-content:center; padding:11px 0; }
+  .app-sidebar .sidebar-brand{ justify-content:center; padding:0; }
+  .app-sidebar .node-pill{ justify-content:center; padding:9px 0; }
+  .app-sidebar{ transition:width .18s ease; }
+  .app-sidebar:hover{ width:var(--sidebar-w); box-shadow:24px 0 48px rgba(0,0,0,.35); }
+  .app-sidebar:hover .brand-text,.app-sidebar:hover .nav-link-item span.lbl,.app-sidebar:hover .nav-badge,
+  .app-sidebar:hover .nav-count,.app-sidebar:hover .nav-section-label,.app-sidebar:hover .node-pill .meta{ display:revert; }
+  .app-sidebar:hover .nav-link-item{ justify-content:flex-start; padding:9px 12px; }
+  .app-sidebar:hover .sidebar-brand{ justify-content:flex-start; padding:0 20px; }
+  .app-sidebar:hover .node-pill{ justify-content:flex-start; padding:9px 11px; }
+}
+@media (max-width:767.98px){
+  .app-shell{ grid-template-columns:1fr; }
+  .app-sidebar{ position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .22s ease; }
+  .app-sidebar.open{ transform:translateX(0); box-shadow:24px 0 48px rgba(0,0,0,.45); }
+  .app-sidebar .brand-text,.app-sidebar .nav-link-item span.lbl,.app-sidebar .nav-badge,
+  .app-sidebar .nav-count,.app-sidebar .nav-section-label,.app-sidebar .node-pill .meta{ display:revert !important; }
+  .app-sidebar .nav-link-item{ justify-content:flex-start !important; padding:9px 12px !important; }
+  .app-sidebar .sidebar-brand{ justify-content:flex-start !important; padding:0 20px !important; }
+  .app-sidebar .node-pill{ justify-content:flex-start !important; padding:9px 11px !important; }
+  .app-col{ grid-column:1; }
+  .hamburger{ display:grid; }
+  .app-main{ padding:18px 14px 44px; }
+  .cluster-trigger .cl-txt{ display:none; }
+  .cluster-trigger .cl-name{ max-width:80px; overflow:hidden; text-overflow:ellipsis; }
+  .page-heading .crumb{ display:none; }
+  .util-divider{ display:none; }
+  .tbl-scroll{ overflow-x:auto; }
+}
+@media (min-width:768px){ .scrim{ display:none !important; } }
+
+/* ============================================================
+   Bootstrap bridge — make existing Bootstrap markup adopt the new
+   palette, accent, and rounding without per-page edits.
+   ============================================================ */
+.card{ border-radius:var(--radius); }
+.card-header:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
+.btn{ border-radius:var(--radius-sm); }
+.form-control, .form-select, .input-group-text{ border-radius:var(--radius-sm); }
+.dropdown-menu{ border-radius:var(--radius); box-shadow:var(--shadow); padding:6px; }
+.dropdown-item{ border-radius:var(--radius-sm); }
+.modal-content{ border-radius:var(--radius); }
+.list-group{ border-radius:var(--radius-sm); }
+
+/* Accent + semantic background bridge (dashboard stat cards, badges, progress) */
+.bg-primary{ background-color:var(--accent) !important; }
+.bg-info{ background-color:var(--violet) !important; }
+.bg-success{ background-color:var(--ok) !important; }
+.bg-danger{ background-color:var(--danger) !important; }
+.bg-warning{ background-color:var(--warn) !important; }
+.bg-secondary{ background-color:var(--text-faint) !important; }
+.text-primary{ color:var(--accent) !important; }
+.text-success{ color:var(--ok) !important; }
+.text-danger{ color:var(--danger) !important; }
+.text-warning{ color:var(--warn) !important; }
+.text-info{ color:var(--violet) !important; }
+
+.btn-primary{ --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
+  --bs-btn-hover-bg:var(--accent); --bs-btn-hover-border-color:var(--accent);
+  --bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent);
+  --bs-btn-disabled-bg:var(--accent); --bs-btn-disabled-border-color:var(--accent); }
+.btn-primary:hover{ filter:brightness(1.08); }
+.btn-outline-primary{ --bs-btn-color:var(--accent); --bs-btn-border-color:var(--accent-border);
+  --bs-btn-hover-bg:var(--accent); --bs-btn-hover-border-color:var(--accent);
+  --bs-btn-active-bg:var(--accent); --bs-btn-active-border-color:var(--accent); }
+.progress-bar{ background-color:var(--accent); }
+.link-primary, a.text-primary{ color:var(--accent) !important; }
+.form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); }
+.form-check-input:focus{ border-color:var(--accent-border); box-shadow:0 0 0 0.2rem var(--accent-soft); }
+.inp.is-valid{ border-color:var(--ok) !important; }
+.inp.is-invalid{ border-color:var(--danger) !important; }
+
+/* ===================== VNC CONSOLE ===================== */
+.vnc{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:#05070c; box-shadow:var(--shadow-sm); }
+.vnc-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; background:var(--bg-elev); border-bottom:1px solid var(--border); }
+.vnc-left{ display:flex; align-items:center; gap:10px; margin-right:auto; }
+.vnc-tools{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
+.vnc-status{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
+.vnc-status .d{ width:8px; height:8px; border-radius:50%; }
+.vnc-status.on .d{ background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); } .vnc-status.on{ color:var(--ok); }
+.vnc-status.off .d{ background:var(--text-faint); } .vnc-status.off{ color:var(--text-faint); }
+.vnc-status.busy .d{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); } .vnc-status.busy{ color:var(--warn); }
+.vnc-screen{ position:relative; aspect-ratio:16/9; background:#0a0e17; display:grid; place-items:center; overflow:hidden; }
+.vnc-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px); }
+.vnc-term{ font-family:var(--font-mono); font-size:13px; color:#8ad0a8; line-height:1.7; width:100%; max-width:560px; padding:26px; position:relative; z-index:1; }
+.vnc-term .p{ color:#5fb0ff; } .vnc-term .cur{ display:inline-block; width:8px; height:15px; background:#8ad0a8; vertical-align:-2px; animation:blink 1.1s step-end infinite; }
+@keyframes blink{ 50%{ opacity:0; } }
+.vnc-off{ text-align:center; color:var(--text-faint); position:relative; z-index:1; } .vnc-off .bi{ font-size:34px; display:block; margin-bottom:12px; }
+.vnc-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:8px 13px; background:var(--bg-elev); border-top:1px solid var(--border); font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
+.vnc-foot .s{ display:inline-flex; align-items:center; gap:6px; }
diff --git a/templates/base.html b/templates/base.html
index 4498ca7..09b42e3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>{% block title %}Proxmox Manager{% endblock %}</title>
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='img/favicon.svg') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
     <script>
         (function() {
             const themeKey = 'proxui-theme';
@@ -79,62 +81,84 @@
 </head>
 <body>
     {#
-      App chrome. Structured into regions so a top→left sidebar redesign is
-      mostly CSS: `.app-navbar` is the shell, `.app-nav-primary` holds the page
-      links, `.app-nav-utility` holds theme/jobs/cluster. All behaviour is in
-      self-contained Alpine components (no getElementById), so these regions can
-      be repositioned freely.
+      App shell (left sidebar + slim top utility bar). Regions keep their hook
+      classes so behaviour stays put: `.app-sidebar`/`.app-nav-primary` hold the
+      page links, `.app-navbar`/`.app-nav-utility` hold jobs/cluster/theme, and
+      `.app-main` is the content column. All behaviour lives in self-contained
+      Alpine components (globalJobs, clusterSwitcher) — no getElementById.
     #}
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark app-navbar">
-        <div class="container-fluid">
-            <a class="navbar-brand app-brand" href="{{ url_for('index') }}">
-                <i class="bi bi-server"></i> Proxmox Manager
+    {% set _nav = [
+        ('index', 'bi-speedometer2', 'Dashboard'),
+        ('vms', 'bi-pc-display', 'VMs & Containers'),
+        ('create_vm', 'bi-plus-circle', 'Create'),
+        ('tasks', 'bi-list-task', 'Tasks'),
+        ('storages', 'bi-hdd', 'Storage'),
+        ('networks', 'bi-diagram-3', 'Networks'),
+        ('isos_templates', 'bi-disc', 'ISOs & Templates'),
+        ('cluster', 'bi-diagram-2', 'Cluster'),
+    ] %}
+    {% set _pt = namespace(title='Proxmox Manager') %}
+    {% for endpoint, icon, label in _nav %}
+        {% if request.endpoint == endpoint %}{% set _pt.title = label %}{% endif %}
+    {% endfor %}
+    {% set _cluster_name = current_cluster.name if current_cluster else 'No cluster' %}
+
+    <div class="app-shell" x-data="{ drawer: false }" @keydown.escape.window="drawer = false">
+
+        <!-- ==================== SIDEBAR ==================== -->
+        <aside class="app-sidebar" :class="{ open: drawer }">
+            <a class="sidebar-brand" href="{{ url_for('index') }}">
+                <div class="brand-mark"><img src="{{ url_for('static', filename='img/logo.svg') }}" alt="ProxUI" width="34" height="34"></div>
+                <div class="brand-text">
+                    <span class="brand-name">ProxUI</span>
+                    <span class="brand-ver">{{ app_version }}</span>
+                </div>
             </a>
-            <span class="badge bg-secondary fw-normal small">{{ app_version }}</span>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav app-nav-primary">
-                    {% set _nav = [
-                        ('index', 'bi-speedometer2', 'Dashboard'),
-                        ('vms', 'bi-pc-display', 'VMs & Containers'),
-                        ('create_vm', 'bi-plus-circle', 'Create VM'),
-                        ('tasks', 'bi-list-task', 'Tasks'),
-                        ('storages', 'bi-hdd', 'Storage'),
-                        ('networks', 'bi-diagram-3', 'Networks'),
-                        ('isos_templates', 'bi-disc', 'ISOs & Templates'),
-                        ('cluster', 'bi-diagram-2', 'Cluster'),
-                    ] %}
-                    {% for endpoint, icon, label in _nav %}
-                    <li class="nav-item">
-                        <a class="nav-link {% if request.endpoint == endpoint %}active{% endif %}" href="{{ url_for(endpoint) }}">
-                            <i class="bi {{ icon }}"></i> {{ label }}
-                        </a>
-                    </li>
-                    {% endfor %}
-                </ul>
-
-                <!-- Utility region: theme toggle, background jobs, cluster selector -->
-                <div class="navbar-nav ms-auto d-flex align-items-center app-nav-utility">
-                    <!-- Theme toggle -->
-                    <button class="btn btn-sm btn-outline-light theme-toggle me-3" type="button"
-                            x-data="{ dark: (document.documentElement.getAttribute('data-theme') || 'light') === 'dark' }"
-                            @click="window.ProxUITheme.toggle(); dark = !dark"
-                            :title="dark ? 'Switch to light mode' : 'Switch to dark mode'"
-                            :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'">
-                        <i class="bi" :class="dark ? 'bi-sun' : 'bi-moon-stars'"></i>
+
+            <nav class="app-nav-primary">
+                {% for endpoint, icon, label in _nav %}
+                <a class="nav-link-item {% if request.endpoint == endpoint %}active{% endif %}"
+                   href="{{ url_for(endpoint) }}" @click="drawer = false">
+                    <i class="bi {{ icon }}"></i><span class="lbl">{{ label }}</span>
+                </a>
+                {% endfor %}
+                {# Operations section (Maintenance / Backups / Updates) intentionally hidden for now. #}
+            </nav>
+
+            <div class="sidebar-foot">
+                <div class="node-pill">
+                    <span class="dot"></span>
+                    <div class="meta">
+                        <div class="nm">{{ _cluster_name }}</div>
+                        <div class="sub">Active cluster</div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- ==================== COLUMN ==================== -->
+        <div class="app-col">
+            <header class="app-navbar">
+                <div class="topbar-left">
+                    <button class="icon-btn hamburger" type="button" @click="drawer = !drawer" aria-label="Menu">
+                        <i class="bi bi-list"></i>
                     </button>
+                    <div class="page-heading">
+                        <div class="crumb">{{ _cluster_name }}</div>
+                        <div class="h">{% block page_heading %}{{ _pt.title }}{% endblock %}</div>
+                    </div>
+                </div>
+
+                <!-- Utility region: background jobs, cluster selector, theme toggle -->
+                <div class="app-nav-utility">
 
                     <!-- Background Jobs -->
-                    <div class="nav-item dropdown me-3" x-data="globalJobs">
-                        <a class="nav-link position-relative" href="#" role="button"
-                           data-bs-toggle="dropdown" aria-expanded="false" title="Background Jobs"
-                           :class="{ 'jobs-active': activeJobs.length }">
-                            <i class="bi bi-list-task fs-5"></i>
-                            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"
-                                  style="font-size: 0.6rem;" x-show="activeJobs.length" x-text="activeJobs.length"></span>
-                        </a>
+                    <div class="dropdown" x-data="globalJobs">
+                        <button class="icon-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false"
+                                title="Background Jobs" :class="{ 'jobs-active': activeJobs.length }">
+                            <i class="bi bi-list-check"></i>
+                            <span class="count-badge" x-show="activeJobs.length" x-text="activeJobs.length"></span>
+                        </button>
                         <div class="dropdown-menu dropdown-menu-end shadow" style="min-width: 400px; max-height: 500px; overflow-y: auto;">
                             <div class="dropdown-header d-flex justify-content-between align-items-center">
                                 <span><i class="bi bi-list-task"></i> Background Jobs</span>
@@ -228,13 +252,19 @@ <h5 class="modal-title"><i class="bi bi-info-circle"></i> Job Details</h5>
                     </div>
 
                 {% if all_clusters|length >= 1 %}
+                    <div class="util-divider"></div>
+
                     <!-- Cluster Selector -->
-                    <div class="nav-item dropdown"
+                    <div class="dropdown"
                          x-data="clusterSwitcher('{{ current_cluster.id }}', {{ current_cluster.name | tojson | forceescape }}, {{ all_clusters | map(attribute='id') | list | tojson | forceescape }})">
-                        <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <i class="bi bi-diagram-2 me-2"></i>
-                            <span x-text="currentName">{{ current_cluster.name }}</span>
-                        </a>
+                        <button class="cluster-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            <i class="bi bi-diagram-2 cl-ico"></i>
+                            <span class="cl-txt" style="text-align:left; line-height:1.15">
+                                <span class="cl-lbl d-block">Cluster</span>
+                                <span class="cl-name d-block" x-text="currentName">{{ current_cluster.name }}</span>
+                            </span>
+                            <i class="bi bi-chevron-down"></i>
+                        </button>
                         <ul class="dropdown-menu dropdown-menu-end">
                             <li><h6 class="dropdown-header"><i class="bi bi-diagram-2"></i> Switch Cluster</h6></li>
                             <li><hr class="dropdown-divider"></li>
@@ -302,59 +332,64 @@ <h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill text-warning m
                         </div>
                     </div>
                 {% endif %}
+
+                    <div class="util-divider"></div>
+
+                    <!-- Theme toggle -->
+                    <button class="icon-btn" type="button"
+                            x-data="{ dark: (document.documentElement.getAttribute('data-theme') || 'light') === 'dark' }"
+                            @click="window.ProxUITheme.toggle(); dark = !dark"
+                            :title="dark ? 'Switch to light mode' : 'Switch to dark mode'"
+                            :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'">
+                        <i class="bi" :class="dark ? 'bi-sun' : 'bi-moon-stars'"></i>
+                    </button>
                 </div>
-            </div>
-        </div>
-    </nav>
-
-    {% if demo_mode %}
-    <div class="demo-banner alert alert-info alert-dismissible mb-0 rounded-0 py-2" role="alert"
-         x-data="{ dismissed: sessionStorage.getItem('demoBannerDismissed') === 'true' }"
-         x-show="!dismissed" x-cloak>
-        <div class="container-fluid d-flex align-items-center justify-content-center gap-2">
-            <i class="bi bi-info-circle-fill"></i>
-            <span>{{ demo_message }}</span>
-            <button type="button" class="btn-close btn-close-sm ms-2" aria-label="Close"
-                    @click="dismissed = true; sessionStorage.setItem('demoBannerDismissed', 'true')"></button>
-        </div>
-    </div>
-    {% endif %}
-
-    <div class="container-fluid mt-3 app-main">
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                {% for category, message in messages %}
-                    <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
-                        {{ message }}
-                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            </header>
+
+            <!-- ==================== MAIN ==================== -->
+            <main class="app-main">
+                <div class="main-inner">
+                    {% if demo_mode %}
+                    <div class="demo-banner alert alert-info alert-dismissible mb-3 py-2" role="alert"
+                         x-data="{ dismissed: sessionStorage.getItem('demoBannerDismissed') === 'true' }"
+                         x-show="!dismissed" x-cloak>
+                        <div class="d-flex align-items-center justify-content-center gap-2">
+                            <i class="bi bi-info-circle-fill"></i>
+                            <span>{{ demo_message }}</span>
+                            <button type="button" class="btn-close btn-close-sm ms-2" aria-label="Close"
+                                    @click="dismissed = true; sessionStorage.setItem('demoBannerDismissed', 'true')"></button>
+                        </div>
                     </div>
-                {% endfor %}
-            {% endif %}
-        {% endwith %}
+                    {% endif %}
+
+                    {% with messages = get_flashed_messages(with_categories=true) %}
+                        {% if messages %}
+                            {% for category, message in messages %}
+                                <div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show" role="alert">
+                                    {{ message }}
+                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                                </div>
+                            {% endfor %}
+                        {% endif %}
+                    {% endwith %}
 
-        {% block content %}{% endblock %}
+                    {% block content %}{% endblock %}
+                </div>
+            </main>
+        </div>
+
+        <!-- Off-canvas scrim (mobile drawer) -->
+        <div class="scrim" x-show="drawer" @click="drawer = false" x-cloak></div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
-    
+
 
     <style>
     /* Hide Alpine-controlled elements until Alpine initializes (prevents flash). */
     [x-cloak] { display: none !important; }
 
-    /* ── App shell hooks ──────────────────────────────────────────────────
-       The chrome is structured into regions so a top→left sidebar redesign is
-       CSS-only. Today `.app-navbar` renders as Bootstrap's top bar; to move it
-       to a left sidebar, target these classes (no markup changes needed):
-         .app-navbar      → position: fixed; left/top/bottom: 0; width: 240px;
-                            flex-direction: column; align-items: stretch;
-         .app-nav-primary → flex-direction: column; (stacks the page links)
-         .app-nav-utility → margin-top: auto; (pins theme/jobs/cluster to bottom)
-         .app-main        → margin-left: 240px; (main content beside the sidebar)
-       On narrow screens keep the current collapsed top-bar behaviour.
-       ──────────────────────────────────────────────────────────────────── */
-
     /* Pulsing animation for active jobs indicator */
     .jobs-active {
         animation: pulse-jobs 2s infinite;
@@ -366,8 +401,8 @@ <h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill text-warning m
         100% { opacity: 1; }
     }
 
-    .jobs-active .bi-list-task {
-        color: #ffc107 !important;
+    .jobs-active .bi-list-check {
+        color: var(--warn) !important;
     }
 
     /* Demo banner styling */
diff --git a/templates/cluster.html b/templates/cluster.html
index 156092c..520227f 100644
--- a/templates/cluster.html
+++ b/templates/cluster.html
@@ -3,74 +3,62 @@
 {% block title %}Cluster - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <h1><i class="bi bi-diagram-2"></i> Cluster Information</h1>
-        <p class="text-muted">{{ cluster.name }}</p>
-    </div>
+<div class="mb-3">
+    <div class="sec-title">Cluster Information</div>
+    <div class="sec-sub">{{ cluster.name }} · {{ cluster.nodes|length }} nodes</div>
 </div>
 
-<div class="row mt-3">
+<div class="row g-3">
     {% for node in cluster.nodes %}
-    <div class="col-md-6 mb-3">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0">
+    <div class="col-12 col-lg-6">
+        <div class="card-x">
+            <div class="cx-head">
+                <span class="nc-dot {{ 'offline' if node.error else 'online' }}" style="width:10px;height:10px"></span>
+                <a href="{{ url_for('node_detail', node=node.host) }}" class="cx-title" style="color:var(--text)">
                     <i class="bi bi-server"></i> {{ node.host }}
-                    {% if node.error %}
-                        <span class="badge bg-danger float-end">Offline</span>
-                    {% else %}
-                        <span class="badge bg-success float-end">Online</span>
-                    {% endif %}
-                </h5>
+                </a>
+                {% if node.error %}
+                <span class="pill err ms-2"><span class="d"></span>Offline</span>
+                {% else %}
+                <span class="pill ok ms-2"><span class="d"></span>Online</span>
+                {% endif %}
+                <a href="{{ url_for('node_detail', node=node.host) }}" class="btn-x sm ms-auto" style="text-decoration:none">
+                    <i class="bi bi-arrow-right"></i> Details
+                </a>
             </div>
-            <div class="card-body">
+            <div class="cx-body">
                 {% if node.error %}
-                    <div class="alert alert-danger">
-                        <i class="bi bi-exclamation-triangle"></i> Connection Error: {{ node.error }}
-                    </div>
+                <div class="callout danger">
+                    <i class="bi bi-exclamation-triangle"></i>
+                    <div><div class="t">Connection Error</div><div class="b">{{ node.error }}</div></div>
+                </div>
                 {% else %}
-                    <dl class="row">
-                        <dt class="col-sm-4">CPU Model:</dt>
-                        <dd class="col-sm-8">{{ node.cpuinfo.model|default('N/A') }}</dd>
-                        
-                        <dt class="col-sm-4">CPU Cores:</dt>
-                        <dd class="col-sm-8">{{ node.cpuinfo.cpus|default('N/A') }}</dd>
-                        
-                        <dt class="col-sm-4">CPU Usage:</dt>
-                        <dd class="col-sm-8">
-                            <div class="progress" style="height: 20px;">
-                                <div class="progress-bar bg-{{ 'danger' if (node.cpu * 100) > 80 else 'warning' if (node.cpu * 100) > 60 else 'success' }}" 
-                                     style="width: {{ (node.cpu * 100)|round(1) }}%">
-                                    {{ (node.cpu * 100)|round(1) }}%
-                                </div>
-                            </div>
-                        </dd>
-                        
-                        <dt class="col-sm-4">Memory:</dt>
-                        <dd class="col-sm-8">
-                            <div class="progress" style="height: 20px;">
-                                <div class="progress-bar bg-{{ 'danger' if ((node.memory.used / node.memory.total) * 100) > 80 else 'warning' if ((node.memory.used / node.memory.total) * 100) > 60 else 'success' }}" 
-                                     style="width: {{ ((node.memory.used / node.memory.total) * 100)|round(1) }}%">
-                                    {{ ((node.memory.used / node.memory.total) * 100)|round(1) }}%
-                                </div>
-                            </div>
-                            <small>{{ (node.memory.used / 1024 / 1024 / 1024)|round(1) }} / {{ (node.memory.total / 1024 / 1024 / 1024)|round(1) }} GB</small>
-                        </dd>
-                        
-                        <dt class="col-sm-4">Uptime:</dt>
-                        <dd class="col-sm-8">{{ node.uptime|humanize_uptime }}</dd>
-                        
-                        <dt class="col-sm-4">Kernel:</dt>
-                        <dd class="col-sm-8">{{ node.kversion|default('N/A') }}</dd>
-                        
-                        <dt class="col-sm-4">PVE Version:</dt>
-                        <dd class="col-sm-8">{{ node.pveversion|default('N/A') }}</dd>
-                    </dl>
+                <div class="row g-3 mb-3">
+                    <div class="col-6">
+                        <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700">CPU Usage</div>
+                        <div class="usage-cell mt-1">
+                            <div class="ubar" style="flex:1"><i class="{{ 'crit' if (node.cpu * 100) > 80 else 'hot' if (node.cpu * 100) > 60 else 'okc' }}" style="width:{{ (node.cpu * 100)|round(1) }}%"></i></div>
+                            <span class="pct">{{ (node.cpu * 100)|round(1) }}%</span>
+                        </div>
+                    </div>
+                    <div class="col-6">
+                        <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700">Memory</div>
+                        <div class="usage-cell mt-1">
+                            <div class="ubar" style="flex:1"><i class="{{ 'crit' if ((node.memory.used / node.memory.total) * 100) > 80 else 'hot' if ((node.memory.used / node.memory.total) * 100) > 60 else 'okc' }}" style="width:{{ ((node.memory.used / node.memory.total) * 100)|round(1) }}%"></i></div>
+                            <span class="pct">{{ ((node.memory.used / node.memory.total) * 100)|round(1) }}%</span>
+                        </div>
+                        <div class="text-faint mono" style="font-size:10.5px">{{ (node.memory.used / 1024 / 1024 / 1024)|round(1) }} / {{ (node.memory.total / 1024 / 1024 / 1024)|round(1) }} GB</div>
+                    </div>
+                </div>
+                <div class="summary-row"><span class="k">CPU Model</span><span class="v" style="font-size:12px">{{ node.cpuinfo.model|default('N/A') }}</span></div>
+                <div class="summary-row"><span class="k">CPU Cores</span><span class="v">{{ node.cpuinfo.cpus|default('N/A') }}</span></div>
+                <div class="summary-row"><span class="k">Uptime</span><span class="v mono">{{ node.uptime|humanize_uptime }}</span></div>
+                <div class="summary-row"><span class="k">Kernel</span><span class="v mono" style="font-size:11.5px">{{ node.kversion.split(' ')[:2]|join(' ') if node.kversion else 'N/A' }}</span></div>
+                <div class="summary-row"><span class="k">PVE Version</span><span class="v mono" style="font-size:11.5px">{{ node.pveversion|default('N/A') }}</span></div>
                 {% endif %}
             </div>
         </div>
     </div>
     {% endfor %}
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/connect.html b/templates/connect.html
index 5b8aeb4..c9fa579 100644
--- a/templates/connect.html
+++ b/templates/connect.html
@@ -3,303 +3,273 @@
 {% block title %}Cluster Management - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row" x-data="connectPage()">
+<div x-data="connectPage()">
     <!-- Existing Clusters -->
     {% if existing_clusters %}
-    <div class="col-12 mb-4">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0">
-                    <i class="bi bi-diagram-2 text-primary"></i>
-                    Configured Clusters
-                </h5>
-                <small class="text-muted">{{ existing_clusters|length }} cluster(s)</small>
-            </div>
-            <div class="card-body">
-                <div class="row">
-                    {% for cluster in existing_clusters %}
-                    <div class="col-md-6 col-lg-4 mb-3">
-                        <div class="card border {% if cluster.id == current_cluster.id %}border-primary{% endif %}">
-                            <div class="card-body">
-                                <div class="d-flex justify-content-between align-items-start mb-2">
-                                    <h6 class="card-title mb-0">
-                                        {{ cluster.name }}
-                                        {% if cluster.id == current_cluster.id %}
-                                        <span class="badge bg-primary ms-1">Active</span>
-                                        {% endif %}
-                                    </h6>
-                                    <div class="dropdown">
-                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
-                                            <i class="bi bi-three-dots"></i>
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            {% if cluster.id != current_cluster.id %}
-                                            <li><a class="dropdown-item" href="#"
-                                                   @click.prevent="switchCluster('{{ cluster.id }}')">
-                                                <i class="bi bi-arrow-right-circle"></i> Switch to
-                                            </a></li>
-                                            {% endif %}
-                                            <li><a class="dropdown-item" href="#"
-                                                   @click.prevent="openEdit('{{ cluster.id }}')">
-                                                <i class="bi bi-pencil"></i> Edit
-                                            </a></li>
-                                            <li><a class="dropdown-item text-danger" href="#"
-                                                   @click.prevent="deleteCluster('{{ cluster.id }}', '{{ cluster.name }}')">
-                                                <i class="bi bi-trash"></i> Delete
-                                            </a></li>
-                                        </ul>
-                                    </div>
+    <div class="card-x mb-4">
+        <div class="cx-head d-flex justify-content-between align-items-center">
+            <span class="cx-title"><i class="bi bi-diagram-2" style="color:var(--accent)"></i> Configured Clusters</span>
+            <span class="text-faint" style="font-size:12px">{{ existing_clusters|length }} cluster(s)</span>
+        </div>
+        <div class="cx-body">
+            <div class="row g-3">
+                {% for cluster in existing_clusters %}
+                <div class="col-md-6 col-lg-4">
+                    <div class="card-x h-100" {% if cluster.id == current_cluster.id %}style="border-color:var(--accent)"{% endif %}>
+                        <div class="cx-body">
+                            <div class="d-flex justify-content-between align-items-start mb-2">
+                                <div>
+                                    <span class="nm">{{ cluster.name }}</span>
+                                    {% if cluster.id == current_cluster.id %}
+                                    <span class="tag ms-1">Active</span>
+                                    {% endif %}
                                 </div>
-                                <small class="text-muted d-block mb-2">ID: {{ cluster.id }}</small>
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <small class="text-muted">
-                                        <i class="bi bi-hdd-network"></i>
-                                        {{ cluster.nodes|length }} node(s)
-                                    </small>
-                                    <!-- Per-cluster status island -->
-                                    <div x-data="{
-                                            status: 'checking',
-                                            init() {
-                                                fetch('/api/cluster-status/{{ cluster.id }}')
-                                                    .then(r => r.json())
-                                                    .then(d => { this.status = d.success ? 'online' : 'offline'; })
-                                                    .catch(() => { this.status = 'error'; });
-                                            }
-                                        }">
-                                        <small x-show="status === 'checking'" class="text-muted">
-                                            <i class="bi bi-arrow-clockwise spin"></i> Checking...
-                                        </small>
-                                        <small x-show="status === 'online'" class="text-success">
-                                            <i class="bi bi-check-circle-fill"></i> Online
-                                        </small>
-                                        <small x-show="status === 'offline'" class="text-danger">
-                                            <i class="bi bi-exclamation-triangle-fill"></i> Offline
-                                        </small>
-                                        <small x-show="status === 'error'" class="text-warning">
-                                            <i class="bi bi-exclamation-triangle-fill"></i> Error
-                                        </small>
-                                    </div>
+                                <div class="dropdown">
+                                    <button class="act-btn" type="button" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></button>
+                                    <ul class="dropdown-menu dropdown-menu-end">
+                                        {% if cluster.id != current_cluster.id %}
+                                        <li><a class="dropdown-item" href="#"
+                                               @click.prevent="switchCluster('{{ cluster.id }}')">
+                                            <i class="bi bi-arrow-right-circle"></i> Switch to
+                                        </a></li>
+                                        {% endif %}
+                                        <li><a class="dropdown-item" href="#"
+                                               @click.prevent="openEdit('{{ cluster.id }}')">
+                                            <i class="bi bi-pencil"></i> Edit
+                                        </a></li>
+                                        <li><a class="dropdown-item text-danger" href="#"
+                                               @click.prevent="deleteCluster('{{ cluster.id }}', '{{ cluster.name }}')">
+                                            <i class="bi bi-trash"></i> Delete
+                                        </a></li>
+                                    </ul>
                                 </div>
-                                <div class="mt-2">
-                                    {% for node in cluster.nodes %}
-                                    <small class="d-block text-muted">
-                                        <i class="bi bi-server"></i> {{ node.host }}
-                                    </small>
-                                    {% endfor %}
+                            </div>
+                            <div class="text-faint mono" style="font-size:11px" class="mb-2">ID: {{ cluster.id }}</div>
+                            <div class="d-flex justify-content-between align-items-center mt-2">
+                                <span class="text-faint" style="font-size:12px"><i class="bi bi-hdd-network"></i> {{ cluster.nodes|length }} node(s)</span>
+                                <!-- Per-cluster status island -->
+                                <div x-data="{
+                                        status: 'checking',
+                                        init() {
+                                            fetch('/api/cluster-status/{{ cluster.id }}')
+                                                .then(r => r.json())
+                                                .then(d => { this.status = d.success ? 'online' : 'offline'; })
+                                                .catch(() => { this.status = 'error'; });
+                                        }
+                                    }">
+                                    <span x-show="status === 'checking'" class="pill" style="background:var(--panel-2);color:var(--text-muted)"><span class="d" style="background:var(--text-faint)"></span><i class="bi bi-arrow-clockwise spin"></i> Checking</span>
+                                    <span x-show="status === 'online'" class="pill ok"><span class="d"></span>Online</span>
+                                    <span x-show="status === 'offline'" class="pill err"><span class="d"></span>Offline</span>
+                                    <span x-show="status === 'error'" class="pill maint"><span class="d"></span>Error</span>
                                 </div>
                             </div>
+                            <div class="mt-2">
+                                {% for node in cluster.nodes %}
+                                <div class="text-faint" style="font-size:11.5px"><i class="bi bi-server"></i> {{ node.host }}</div>
+                                {% endfor %}
+                            </div>
                         </div>
                     </div>
-                    {% endfor %}
                 </div>
+                {% endfor %}
             </div>
         </div>
     </div>
     {% endif %}
 
     <!-- Add New Cluster -->
-    <div class="col-12">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0">
-                    <i class="bi bi-plus-circle text-success"></i>
-                    {% if existing_clusters %}Add New Cluster{% else %}Connect to Proxmox{% endif %}
-                </h5>
+    <div class="card-x">
+        <div class="cx-head"><i class="bi bi-plus-circle" style="color:var(--ok)"></i><span class="cx-title">{% if existing_clusters %}Add New Cluster{% else %}Connect to Proxmox{% endif %}</span></div>
+        <div class="cx-body">
+            {% if not existing_clusters %}
+            <div class="callout info mb-4">
+                <i class="bi bi-info-circle"></i>
+                <div><div class="t">Welcome!</div><div class="b">No Proxmox configuration was found. Please enter your Proxmox cluster details to get started.</div></div>
             </div>
-            <div class="card-body">
-                {% if not existing_clusters %}
-                <div class="alert alert-info mb-4">
-                    <i class="bi bi-info-circle"></i>
-                    <strong>Welcome!</strong> No Proxmox configuration was found.
-                    Please enter your Proxmox cluster details to get started.
-                </div>
-                {% endif %}
+            {% endif %}
 
-                <form method="POST" action="{{ url_for('connect') }}" id="connectForm">
-                    <!-- Cluster Information -->
-                    <div class="mb-4">
-                        <h5 class="text-primary mb-3">
-                            <i class="bi bi-diagram-2"></i> Cluster Information
-                        </h5>
+            <form method="POST" action="{{ url_for('connect') }}" id="connectForm">
+                <!-- Cluster Information -->
+                <div class="mb-4">
+                    <div class="sub-h" style="margin-top:0"><i class="bi bi-diagram-2"></i> Cluster Information</div>
 
-                        <div class="mb-3">
-                            <label for="cluster_name" class="form-label">Cluster Name</label>
-                            <input type="text" class="form-control" id="cluster_name" name="cluster_name"
-                                   value="My Proxmox Cluster" required
-                                   @input="document.getElementById('cluster_id').value = generateId($event.target.value)">
-                            <div class="form-text">A friendly name for your Proxmox cluster</div>
-                        </div>
+                    <div class="field">
+                        <label for="cluster_name">Cluster Name</label>
+                        <input type="text" class="inp" id="cluster_name" name="cluster_name"
+                               value="My Proxmox Cluster" required
+                               @input="document.getElementById('cluster_id').value = generateId($event.target.value)">
+                        <div class="hint">A friendly name for your Proxmox cluster</div>
+                    </div>
 
-                        <div class="mb-3">
-                            <label for="cluster_id" class="form-label">Cluster ID</label>
-                            <input type="text" class="form-control" id="cluster_id" name="cluster_id"
-                                   value="main" required pattern="[a-zA-Z0-9_-]+">
-                            <div class="form-text">Unique identifier (letters, numbers, underscores, and dashes only)</div>
-                        </div>
+                    <div class="field">
+                        <label for="cluster_id">Cluster ID</label>
+                        <input type="text" class="inp" id="cluster_id" name="cluster_id"
+                               value="main" required pattern="[a-zA-Z0-9_-]+">
+                        <div class="hint">Unique identifier (letters, numbers, underscores, and dashes only)</div>
+                    </div>
 
-                        <div class="form-check mb-3">
+                    <div class="field">
+                        <div class="form-check">
                             <input class="form-check-input" type="checkbox" id="incremental_vmid" name="incremental_vmid">
                             <label class="form-check-label" for="incremental_vmid">
                                 Incremental VMID (prevent reuse)
                             </label>
-                            <div class="form-text">When enabled, updates the cluster's next-id lower bound after each VM/container creation to prevent VMID reuse. This avoids mixing backups and monitoring data from deleted VMs.</div>
                         </div>
+                        <div class="hint">When enabled, updates the cluster's next-id lower bound after each VM/container creation to prevent VMID reuse. This avoids mixing backups and monitoring data from deleted VMs.</div>
                     </div>
+                </div>
 
-                    <!-- Node Connection -->
-                    <div class="mb-4">
-                        <h5 class="text-primary mb-3">
-                            <i class="bi bi-hdd-network"></i> Node Connection
-                        </h5>
+                <!-- Node Connection -->
+                <div class="mb-4">
+                    <div class="sub-h"><i class="bi bi-hdd-network"></i> Node Connection</div>
 
-                        <div class="mb-3">
-                            <label for="node_host" class="form-label">Proxmox Host</label>
-                            <input type="text" class="form-control" id="node_host" name="node_host"
-                                   placeholder="192.168.1.100 or pve.example.com" required>
-                            <div class="form-text">IP address or hostname of your Proxmox node</div>
-                        </div>
+                    <div class="field">
+                        <label for="node_host">Proxmox Host</label>
+                        <input type="text" class="inp" id="node_host" name="node_host"
+                               placeholder="192.168.1.100 or pve.example.com" required>
+                        <div class="hint">IP address or hostname of your Proxmox node</div>
+                    </div>
 
-                        <div class="mb-3">
-                            <label for="node_user" class="form-label">Username</label>
-                            <input type="text" class="form-control" id="node_user" name="node_user"
-                                   value="root@pam" required>
-                            <div class="form-text">Usually root@pam (for API token, use user@realm format without token suffix)</div>
-                        </div>
+                    <div class="field">
+                        <label for="node_user">Username</label>
+                        <input type="text" class="inp" id="node_user" name="node_user"
+                               value="root@pam" required>
+                        <div class="hint">Usually root@pam (for API token, use user@realm format without token suffix)</div>
+                    </div>
 
-                        <!-- Authentication Type -->
-                        <div class="mb-3">
-                            <label class="form-label">Authentication Method</label>
-                            <div class="btn-group w-100" role="group">
-                                <input type="radio" class="btn-check" name="auth_type" id="auth_password"
-                                       value="password" x-model="authType">
-                                <label class="btn btn-outline-primary" for="auth_password">
-                                    <i class="bi bi-key"></i> Password
-                                </label>
-                                <input type="radio" class="btn-check" name="auth_type" id="auth_token"
-                                       value="token" x-model="authType">
-                                <label class="btn btn-outline-primary" for="auth_token">
-                                    <i class="bi bi-shield-lock"></i> API Token
-                                </label>
-                            </div>
+                    <!-- Authentication Type -->
+                    <div class="field">
+                        <label>Authentication Method</label>
+                        <div class="btn-group w-100" role="group">
+                            <input type="radio" class="btn-check" name="auth_type" id="auth_password"
+                                   value="password" x-model="authType">
+                            <label class="btn btn-outline-primary" for="auth_password">
+                                <i class="bi bi-key"></i> Password
+                            </label>
+                            <input type="radio" class="btn-check" name="auth_type" id="auth_token"
+                                   value="token" x-model="authType">
+                            <label class="btn btn-outline-primary" for="auth_token">
+                                <i class="bi bi-shield-lock"></i> API Token
+                            </label>
                         </div>
+                    </div>
 
-                        <!-- Password Fields -->
-                        <div class="mb-3" x-show="authType === 'password'">
-                            <label for="node_password" class="form-label">Password</label>
-                            <input type="password" class="form-control" id="node_password" name="node_password"
-                                   :required="authType === 'password'">
-                            <div class="form-text">Root password for Proxmox</div>
-                        </div>
+                    <!-- Password Fields -->
+                    <div class="field" x-show="authType === 'password'">
+                        <label for="node_password">Password</label>
+                        <input type="password" class="inp" id="node_password" name="node_password"
+                               :required="authType === 'password'">
+                        <div class="hint">Root password for Proxmox</div>
+                    </div>
 
-                        <!-- API Token Fields -->
-                        <div class="mb-3" x-show="authType === 'token'">
-                            <div class="row">
-                                <div class="col-md-6 mb-3">
-                                    <label for="token_name" class="form-label">Token Name</label>
-                                    <input type="text" class="form-control" id="token_name" name="token_name"
+                    <!-- API Token Fields -->
+                    <div x-show="authType === 'token'">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="field">
+                                    <label for="token_name">Token Name</label>
+                                    <input type="text" class="inp" id="token_name" name="token_name"
                                            placeholder="mytoken" :required="authType === 'token'">
-                                    <div class="form-text">Token ID (without user prefix)</div>
+                                    <div class="hint">Token ID (without user prefix)</div>
                                 </div>
-                                <div class="col-md-6 mb-3">
-                                    <label for="token_value" class="form-label">Token Secret</label>
-                                    <input type="password" class="form-control" id="token_value" name="token_value"
+                            </div>
+                            <div class="col-md-6">
+                                <div class="field">
+                                    <label for="token_value">Token Secret</label>
+                                    <input type="password" class="inp" id="token_value" name="token_value"
                                            placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                                            :required="authType === 'token'">
-                                    <div class="form-text">Token secret value (UUID format)</div>
+                                    <div class="hint">Token secret value (UUID format)</div>
                                 </div>
                             </div>
-                            <div class="alert alert-info small">
-                                <i class="bi bi-info-circle"></i>
-                                <strong>API Token Format:</strong> Create tokens in Proxmox under Datacenter → Permissions → API Tokens.
-                                The token is in format <code>user@realm!tokenid</code> - enter just the token ID here.
-                            </div>
                         </div>
+                        <div class="callout info mb-3">
+                            <i class="bi bi-info-circle"></i>
+                            <div><div class="t">API Token Format</div><div class="b">Create tokens in Proxmox under Datacenter → Permissions → API Tokens. The token is in format <code>user@realm!tokenid</code> - enter just the token ID here.</div></div>
+                        </div>
+                    </div>
 
-                        <div class="form-check mb-3">
+                    <div class="field">
+                        <div class="form-check">
                             <input class="form-check-input" type="checkbox" id="verify_ssl" name="verify_ssl">
                             <label class="form-check-label" for="verify_ssl">
                                 Verify SSL Certificate
                             </label>
-                            <div class="form-text">Uncheck if using self-signed certificates (common for home labs)</div>
-                        </div>
-
-                        <div class="alert alert-secondary small mb-0">
-                            <i class="bi bi-info-circle"></i>
-                            <strong>Note:</strong> some features (writing custom cloud-init snippets to
-                            node storage) need filesystem access to a node. When ProxUI runs remotely it
-                            reaches nodes over <strong>SSH</strong> (port 22) or the node <strong>Shell/termproxy</strong>
-                            (over the API port). You'll be guided to install ProxUI's SSH key — a one-time
-                            step using root's password — from the Cloud-Init tab when needed. Basic
-                            cloud-init (user, password, SSH keys, IP/DNS) works over the API alone.
                         </div>
+                        <div class="hint">Uncheck if using self-signed certificates (common for home labs)</div>
                     </div>
 
-                    <!-- Actions -->
-                    <div class="d-grid gap-2">
-                        <button type="submit" class="btn btn-primary btn-lg">
-                            <i class="bi bi-plug"></i> Connect to Proxmox
-                        </button>
-                        <button type="button" class="btn btn-outline-secondary"
-                                @click="testConnection()" :disabled="testing">
-                            <i class="bi bi-wifi" :class="testing && 'spin'"></i>
-                            <span x-text="testing ? 'Testing...' : 'Test Connection'"></span>
-                        </button>
+                    <div class="callout mb-0">
+                        <i class="bi bi-info-circle"></i>
+                        <div><div class="t">Note</div><div class="b">Some features (writing custom cloud-init snippets to
+                        node storage) need filesystem access to a node. When ProxUI runs remotely it
+                        reaches nodes over <strong>SSH</strong> (port 22) or the node <strong>Shell/termproxy</strong>
+                        (over the API port). You'll be guided to install ProxUI's SSH key — a one-time
+                        step using root's password — from the Cloud-Init tab when needed. Basic
+                        cloud-init (user, password, SSH keys, IP/DNS) works over the API alone.</div></div>
                     </div>
-                </form>
+                </div>
+
+                <!-- Actions -->
+                <div class="d-grid gap-2">
+                    <button type="submit" class="btn-x primary" style="justify-content:center;padding:10px 14px">
+                        <i class="bi bi-plug"></i> Connect to Proxmox
+                    </button>
+                    <button type="button" class="btn-x" style="justify-content:center"
+                            @click="testConnection()" :disabled="testing">
+                        <i class="bi bi-wifi" :class="testing && 'spin'"></i>
+                        <span x-text="testing ? 'Testing...' : 'Test Connection'"></span>
+                    </button>
+                </div>
+            </form>
 
-                <!-- Connection Status -->
-                <div class="mt-3">
-                    <div class="alert alert-success" x-show="testSuccess === true">
-                        <i class="bi bi-check-circle"></i>
-                        <strong>Connection successful!</strong><br>
-                        Connected to <span x-text="testNode"></span> running Proxmox VE <span x-text="testVersion"></span>
-                        <div x-show="testWarning" class="mt-2">
-                            <i class="bi bi-exclamation-triangle"></i> <strong>Warning:</strong>
-                            <span x-text="testWarning"></span>
+            <!-- Connection Status -->
+            <div class="mt-3">
+                <div class="callout ok" x-show="testSuccess === true">
+                    <i class="bi bi-check-circle"></i>
+                    <div>
+                        <div class="t">Connection successful!</div>
+                        <div class="b">Connected to <span x-text="testNode"></span> running Proxmox VE <span x-text="testVersion"></span>
+                        <template x-if="testWarning"><div class="mt-1"><i class="bi bi-exclamation-triangle"></i> <strong>Warning:</strong> <span x-text="testWarning"></span></div></template>
                         </div>
                     </div>
-                    <div class="alert alert-danger" x-show="testSuccess === false">
-                        <i class="bi bi-exclamation-triangle"></i>
-                        <strong>Connection failed:</strong><br>
-                        <span x-text="testError"></span>
-                    </div>
+                </div>
+                <div class="callout danger" x-show="testSuccess === false">
+                    <i class="bi bi-exclamation-triangle"></i>
+                    <div><div class="t">Connection failed</div><div class="b" x-text="testError"></div></div>
                 </div>
             </div>
         </div>
+    </div>
 
-        <!-- Help Card -->
-        <div class="card mt-4">
-            <div class="card-header">
-                <h6 class="mb-0">
-                    <i class="bi bi-question-circle"></i> Need Help?
-                </h6>
-            </div>
-            <div class="card-body">
-                <h6>Common Issues:</h6>
-                <ul class="mb-3">
-                    <li><strong>Connection refused:</strong> Check if Proxmox web interface is accessible</li>
-                    <li><strong>SSL errors:</strong> Uncheck "Verify SSL Certificate" for self-signed certs</li>
-                    <li><strong>Authentication failed:</strong> Verify username/password or token credentials</li>
-                    <li><strong>Network timeout:</strong> Ensure firewall allows port 8006</li>
-                    <li><strong>No data with API token:</strong> Ensure "Privilege Separation" is unchecked when creating the token, or assign PVEAuditor role to the token</li>
-                </ul>
+    <!-- Help Card -->
+    <div class="card-x mt-4">
+        <div class="cx-head"><i class="bi bi-question-circle" style="color:var(--accent)"></i><span class="cx-title">Need Help?</span></div>
+        <div class="cx-body">
+            <div class="sub-h" style="margin-top:0">Common Issues</div>
+            <ul class="mb-3">
+                <li><strong>Connection refused:</strong> Check if Proxmox web interface is accessible</li>
+                <li><strong>SSL errors:</strong> Uncheck "Verify SSL Certificate" for self-signed certs</li>
+                <li><strong>Authentication failed:</strong> Verify username/password or token credentials</li>
+                <li><strong>Network timeout:</strong> Ensure firewall allows port 8006</li>
+                <li><strong>No data with API token:</strong> Ensure "Privilege Separation" is unchecked when creating the token, or assign PVEAuditor role to the token</li>
+            </ul>
 
-                <h6>Default Settings:</h6>
-                <ul class="mb-3">
-                    <li><strong>Web Interface:</strong> https://your-ip:8006</li>
-                    <li><strong>Username:</strong> root@pam</li>
-                    <li><strong>Port:</strong> 8006 (HTTPS)</li>
-                </ul>
+            <div class="sub-h">Default Settings</div>
+            <ul class="mb-3">
+                <li><strong>Web Interface:</strong> https://your-ip:8006</li>
+                <li><strong>Username:</strong> root@pam</li>
+                <li><strong>Port:</strong> 8006 (HTTPS)</li>
+            </ul>
 
-                <h6>API Token Setup:</h6>
-                <ul class="mb-0">
-                    <li>Go to Datacenter → Permissions → API Tokens</li>
-                    <li>Click "Add" and select a user (e.g., root@pam)</li>
-                    <li>Enter a token ID (e.g., "proxui")</li>
-                    <li><strong>Uncheck "Privilege Separation"</strong> for full user permissions</li>
-                    <li>Copy the token secret (shown only once!)</li>
-                </ul>
-            </div>
+            <div class="sub-h">API Token Setup</div>
+            <ul class="mb-0">
+                <li>Go to Datacenter → Permissions → API Tokens</li>
+                <li>Click "Add" and select a user (e.g., root@pam)</li>
+                <li>Enter a token ID (e.g., "proxui")</li>
+                <li><strong>Uncheck "Privilege Separation"</strong> for full user permissions</li>
+                <li>Copy the token secret (shown only once!)</li>
+            </ul>
         </div>
     </div>
 
@@ -310,46 +280,44 @@ <h6>API Token Setup:</h6>
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="editClusterModalLabel">
-                        <i class="bi bi-pencil text-primary"></i> Edit Cluster
+                        <i class="bi bi-pencil" style="color:var(--accent)"></i> Edit Cluster
                     </h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <!-- Cluster Information -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3">
-                            <i class="bi bi-diagram-2"></i> Cluster Information
-                        </h6>
-                        <div class="mb-3">
-                            <label class="form-label">Cluster Name</label>
-                            <input type="text" class="form-control" x-model="editName" required>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-diagram-2"></i> Cluster Information</div>
+                        <div class="field">
+                            <label>Cluster Name</label>
+                            <input type="text" class="inp" x-model="editName" required>
                         </div>
-                        <div class="form-check mb-3">
-                            <input class="form-check-input" type="checkbox" x-model="editIncrementalVmid">
-                            <label class="form-check-label">
-                                Incremental VMID (prevent reuse)
-                            </label>
-                            <div class="form-text">When enabled, updates the cluster's next-id lower bound after each VM/container creation to prevent VMID reuse.</div>
+                        <div class="field">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" x-model="editIncrementalVmid">
+                                <label class="form-check-label">
+                                    Incremental VMID (prevent reuse)
+                                </label>
+                            </div>
+                            <div class="hint">When enabled, updates the cluster's next-id lower bound after each VM/container creation to prevent VMID reuse.</div>
                         </div>
                     </div>
 
                     <!-- Node Connection -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3">
-                            <i class="bi bi-hdd-network"></i> Node Connection
-                        </h6>
-                        <div class="mb-3">
-                            <label class="form-label">Proxmox Host</label>
-                            <input type="text" class="form-control" x-model="editHost" required>
+                        <div class="sub-h"><i class="bi bi-hdd-network"></i> Node Connection</div>
+                        <div class="field">
+                            <label>Proxmox Host</label>
+                            <input type="text" class="inp" x-model="editHost" required>
                         </div>
-                        <div class="mb-3">
-                            <label class="form-label">Username</label>
-                            <input type="text" class="form-control" x-model="editUser" required>
+                        <div class="field">
+                            <label>Username</label>
+                            <input type="text" class="inp" x-model="editUser" required>
                         </div>
 
                         <!-- Auth Type -->
-                        <div class="mb-3">
-                            <label class="form-label">Authentication Method</label>
+                        <div class="field">
+                            <label>Authentication Method</label>
                             <div class="btn-group w-100" role="group">
                                 <input type="radio" class="btn-check" name="edit_auth_type"
                                        id="edit_auth_password" value="password" x-model="editAuthType">
@@ -365,40 +333,46 @@ <h6 class="text-primary mb-3">
                         </div>
 
                         <!-- Password Fields -->
-                        <div class="mb-3" x-show="editAuthType === 'password'">
-                            <label class="form-label">Password</label>
-                            <input type="password" class="form-control" x-model="editPassword"
+                        <div class="field" x-show="editAuthType === 'password'">
+                            <label>Password</label>
+                            <input type="password" class="inp" x-model="editPassword"
                                    placeholder="Leave empty to keep existing">
-                            <div class="form-text">Leave empty to keep existing password</div>
+                            <div class="hint">Leave empty to keep existing password</div>
                         </div>
 
                         <!-- API Token Fields -->
-                        <div class="mb-3" x-show="editAuthType === 'token'">
+                        <div x-show="editAuthType === 'token'">
                             <div class="row">
-                                <div class="col-md-6 mb-3">
-                                    <label class="form-label">Token Name</label>
-                                    <input type="text" class="form-control" x-model="editTokenName"
-                                           placeholder="mytoken">
-                                    <div class="form-text">Token ID (without user prefix)</div>
+                                <div class="col-md-6">
+                                    <div class="field">
+                                        <label>Token Name</label>
+                                        <input type="text" class="inp" x-model="editTokenName"
+                                               placeholder="mytoken">
+                                        <div class="hint">Token ID (without user prefix)</div>
+                                    </div>
                                 </div>
-                                <div class="col-md-6 mb-3">
-                                    <label class="form-label">Token Secret</label>
-                                    <input type="password" class="form-control" x-model="editTokenValue"
-                                           placeholder="Leave empty to keep existing">
-                                    <div class="form-text">Leave empty to keep existing token</div>
+                                <div class="col-md-6">
+                                    <div class="field">
+                                        <label>Token Secret</label>
+                                        <input type="password" class="inp" x-model="editTokenValue"
+                                               placeholder="Leave empty to keep existing">
+                                        <div class="hint">Leave empty to keep existing token</div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
 
-                        <div class="form-check mb-3">
-                            <input class="form-check-input" type="checkbox" x-model="editVerifySsl">
-                            <label class="form-check-label">Verify SSL Certificate</label>
+                        <div class="field mb-0">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" x-model="editVerifySsl">
+                                <label class="form-check-label">Verify SSL Certificate</label>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                    <button type="button" class="btn btn-primary" @click="saveEdit()" :disabled="saving">
+                    <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn-x primary" @click="saveEdit()" :disabled="saving">
                         <i class="bi bi-check-lg" x-show="!saving"></i>
                         <span class="spinner-border spinner-border-sm" x-show="saving"></span>
                         Save Changes
diff --git a/templates/create_vm.html b/templates/create_vm.html
index 86a3309..2684513 100644
--- a/templates/create_vm.html
+++ b/templates/create_vm.html
@@ -1,25 +1,23 @@
 {% extends "base.html" %}
 
-{% block title %}Create VM - Proxmox Manager{% endblock %}
+{% block title %}Create - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
-    </div>
+<div class="mb-4">
+    <div class="sec-title">Create VM or Container</div>
+    <div class="sec-sub">Configure a new virtual machine or LXC container on the cluster</div>
 </div>
 
-<div class="row mt-3">
-    <div class="col-md-8 mx-auto">
-        <div class="card">
-            <div class="card-body">
-                <form method="POST" action="{{ url_for('create_vm') }}" id="createVmForm"
-                      x-data="createVmForm()">
+<div class="row g-3" x-data="createVmForm()">
+    <div class="col-12 col-xl-8">
+        <div class="card-x">
+            <div class="cx-body">
+                <form method="POST" action="{{ url_for('create_vm') }}" id="createVmForm">
 
                     <!-- Type Selection -->
-                    <div class="mb-3">
-                        <label for="type" class="form-label">Type</label>
-                        <select class="form-select" id="type" name="type" required
+                    <div class="field">
+                        <label for="type">Type</label>
+                        <select class="inp" id="type" name="type" required
                                 x-model="vmType" @change="onTypeChange()">
                             <option value="qemu">Virtual Machine (KVM)</option>
                             <option value="lxc">Container (LXC)</option>
@@ -27,9 +25,9 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                     </div>
 
                     <!-- Node Selection -->
-                    <div class="mb-3">
-                        <label for="node" class="form-label">Node</label>
-                        <select class="form-select" id="node" name="node" required
+                    <div class="field">
+                        <label for="node">Node</label>
+                        <select class="inp" id="node" name="node" required
                                 x-model="node" @change="onNodeChange()">
                             <option value="">Select node...</option>
                             {% for node in nodes %}
@@ -39,9 +37,9 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                     </div>
 
                     <!-- Creation Method -->
-                    <div class="mb-3">
-                        <label for="creation_method" class="form-label">Creation Method</label>
-                        <select class="form-select" id="creation_method" name="creation_method"
+                    <div class="field">
+                        <label for="creation_method">Creation Method</label>
+                        <select class="inp" id="creation_method" name="creation_method"
                                 x-model="creationMethod" @change="onMethodChange()">
                             <option value="blank">Create Blank VM/Container</option>
                             <option value="template">Use Template</option>
@@ -49,9 +47,9 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                     </div>
 
                     <!-- Template Selection -->
-                    <div class="mb-3" x-show="creationMethod === 'template'">
-                        <label for="template" class="form-label">Template</label>
-                        <select class="form-select" id="template" name="template" x-model="selectedTemplate">
+                    <div class="field" x-show="creationMethod === 'template'">
+                        <label for="template">Template</label>
+                        <select class="inp" id="template" name="template" x-model="selectedTemplate">
                             <option value="">Select template...</option>
                             <template x-for="t in templates" :key="t.value">
                                 <option :value="t.value" x-text="t.label"></option>
@@ -60,47 +58,53 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                     </div>
 
                     <!-- Basic Settings -->
-                    <div class="mb-3">
-                        <label for="vmid" class="form-label">VM ID</label>
-                        <input type="number" class="form-control" id="vmid" name="vmid"
+                    <div class="field">
+                        <label for="vmid">VM ID</label>
+                        <input type="number" class="inp" id="vmid" name="vmid"
                                min="100" max="999999" required placeholder="e.g., 100"
                                x-model="vmid"
                                @input="scheduleVmidCheck()"
                                :class="vmidValid === true ? 'is-valid' : vmidValid === false ? 'is-invalid' : ''">
-                        <div class="form-text" :class="vmidCls" x-text="vmidMsg"></div>
+                        <div class="hint" :class="vmidCls" x-text="vmidMsg"></div>
                     </div>
 
-                    <div class="mb-3">
-                        <label for="name" class="form-label">Name</label>
-                        <input type="text" class="form-control" id="name" name="name"
+                    <div class="field">
+                        <label for="name">Name</label>
+                        <input type="text" class="inp" id="name" name="name"
                                required placeholder="e.g., my-server">
                     </div>
 
                     <!-- Hardware Resources -->
                     <div class="row">
-                        <div class="col-md-4 mb-3">
-                            <label for="cores" class="form-label">CPU Cores</label>
-                            <input type="number" class="form-control" id="cores" name="cores"
-                                   min="1" max="128" value="2" required>
+                        <div class="col-md-4">
+                            <div class="field">
+                                <label for="cores">CPU Cores</label>
+                                <input type="number" class="inp" id="cores" name="cores"
+                                       min="1" max="128" value="2" required>
+                            </div>
                         </div>
 
-                        <div class="col-md-4 mb-3">
-                            <label for="memory" class="form-label">Memory (MB)</label>
-                            <input type="number" class="form-control" id="memory" name="memory"
-                                   min="512" max="524288" value="2048" step="512" required>
+                        <div class="col-md-4">
+                            <div class="field">
+                                <label for="memory">Memory (MB)</label>
+                                <input type="number" class="inp" id="memory" name="memory"
+                                       min="512" max="524288" value="2048" step="512" required>
+                            </div>
                         </div>
 
-                        <div class="col-md-4 mb-3" x-show="vmType === 'qemu'">
-                            <label for="sockets" class="form-label">CPU Sockets</label>
-                            <input type="number" class="form-control" id="sockets" name="sockets"
-                                   min="1" max="4" value="1" :required="vmType === 'qemu'">
+                        <div class="col-md-4" x-show="vmType === 'qemu'">
+                            <div class="field">
+                                <label for="sockets">CPU Sockets</label>
+                                <input type="number" class="inp" id="sockets" name="sockets"
+                                       min="1" max="4" value="1" :required="vmType === 'qemu'">
+                            </div>
                         </div>
                     </div>
 
                     <!-- Storage -->
-                    <div class="mb-3">
-                        <label for="storage" class="form-label">Storage</label>
-                        <select class="form-select" id="storage" name="storage" required
+                    <div class="field">
+                        <label for="storage">Storage</label>
+                        <select class="inp" id="storage" name="storage" required
                                 x-model="selectedStorage">
                             <option value="">Select storage...</option>
                             <template x-for="s in storages" :key="s.value">
@@ -109,16 +113,16 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                         </select>
                     </div>
 
-                    <div class="mb-3">
-                        <label for="disk_size" class="form-label">Disk Size (GB)</label>
-                        <input type="number" class="form-control" id="disk_size" name="disk_size"
+                    <div class="field">
+                        <label for="disk_size">Disk Size (GB)</label>
+                        <input type="number" class="inp" id="disk_size" name="disk_size"
                                min="1" max="2048" value="20" required>
                     </div>
 
                     <!-- Network -->
-                    <div class="mb-3">
-                        <label for="bridge" class="form-label">Network Bridge</label>
-                        <select class="form-select" id="bridge" name="bridge" x-model="selectedBridge">
+                    <div class="field">
+                        <label for="bridge">Network Bridge</label>
+                        <select class="inp" id="bridge" name="bridge" x-model="selectedBridge">
                             <option value="">Select network bridge...</option>
                             <template x-for="b in bridges" :key="b.value">
                                 <option :value="b.value" x-text="b.label"></option>
@@ -127,33 +131,33 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                     </div>
 
                     <!-- VM-specific: ISO -->
-                    <div class="mb-3" x-show="vmType === 'qemu'">
-                        <label for="iso" class="form-label">ISO Image (Optional)</label>
-                        <select class="form-select" id="iso" name="iso" x-model="selectedIso">
+                    <div class="field" x-show="vmType === 'qemu'">
+                        <label for="iso">ISO Image (Optional)</label>
+                        <select class="inp" id="iso" name="iso" x-model="selectedIso">
                             <option value="">No ISO (blank VM)</option>
                             <template x-for="iso in isos" :key="iso.value">
                                 <option :value="iso.value" x-text="iso.label"></option>
                             </template>
                         </select>
-                        <div class="form-text">Select an ISO image to attach to the VM for OS installation</div>
+                        <div class="hint">Select an ISO image to attach to the VM for OS installation</div>
                     </div>
 
                     <!-- VM-specific: QEMU guest agent -->
-                    <div class="mb-3" x-show="vmType === 'qemu'">
+                    <div class="field" x-show="vmType === 'qemu'">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" id="agent" name="agent" value="1">
                             <label class="form-check-label" for="agent">Enable QEMU guest agent</label>
                         </div>
-                        <div class="form-text">
+                        <div class="hint">
                             Leave off unless <code>qemu-guest-agent</code> is installed in the guest — enabling it
                             without the agent running makes detail pages slow to load.
                         </div>
                     </div>
 
                     <!-- Container-specific: OS Template -->
-                    <div class="mb-3" x-show="vmType === 'lxc'">
-                        <label for="ostemplate" class="form-label">OS Template</label>
-                        <select class="form-select" id="ostemplate" name="ostemplate" x-model="selectedOsTemplate">
+                    <div class="field" x-show="vmType === 'lxc'">
+                        <label for="ostemplate">OS Template</label>
+                        <select class="inp" id="ostemplate" name="ostemplate" x-model="selectedOsTemplate">
                             <option value="">Select OS template...</option>
                             <template x-for="t in osTemplates" :key="t.value">
                                 <option :value="t.value" x-text="t.label"></option>
@@ -161,16 +165,30 @@ <h1><i class="bi bi-plus-circle"></i> Create New VM/Container</h1>
                         </select>
                     </div>
 
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                        <a href="{{ url_for('vms') }}" class="btn btn-secondary">Cancel</a>
-                        <button type="submit" class="btn btn-primary">
-                            <i class="bi bi-plus-circle"></i> Create
-                        </button>
+                    <div class="divider my-4"></div>
+                    <div class="d-flex gap-2 justify-content-end">
+                        <a href="{{ url_for('vms') }}" class="btn-x ghost">Cancel</a>
+                        <button type="submit" class="btn-x primary"><i class="bi bi-plus-lg"></i> Create</button>
                     </div>
                 </form>
             </div>
         </div>
     </div>
+
+    <div class="col-12 col-xl-4" x-cloak>
+        <div class="card-x">
+            <div class="cx-head"><i class="bi bi-clipboard-check" style="color:var(--accent)"></i><span class="cx-title">Configuration</span></div>
+            <div class="cx-body">
+                <div class="summary-row"><span class="k">Type</span><span class="v" x-text="vmType === 'qemu' ? 'VM (KVM)' : 'Container (LXC)'"></span></div>
+                <div class="summary-row"><span class="k">Node</span><span class="v" x-text="node || '—'"></span></div>
+                <div class="summary-row"><span class="k">VM ID</span><span class="v mono" x-text="vmid || '—'"></span></div>
+                <div class="summary-row"><span class="k">Storage</span><span class="v" x-text="selectedStorage || '—'"></span></div>
+                <div class="summary-row" x-show="vmType === 'qemu'"><span class="k">Bridge</span><span class="v" x-text="selectedBridge || '—'"></span></div>
+                <div class="summary-row" x-show="vmType === 'qemu' && creationMethod !== 'template'"><span class="k">ISO</span><span class="v" x-text="selectedIso || 'None'"></span></div>
+                <div class="summary-row" x-show="vmType === 'lxc'"><span class="k">OS Template</span><span class="v" x-text="selectedOsTemplate || '—'"></span></div>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}
 
diff --git a/templates/index.html b/templates/index.html
index dfd98bd..14c73f3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,287 +3,212 @@
 {% block title %}Dashboard - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <h1><i class="bi bi-speedometer2"></i> Dashboard</h1>
+<div class="d-flex align-items-center flex-wrap gap-3 mb-4">
+    <div class="me-auto">
+        <div class="sec-title">Cluster overview</div>
+        <div class="sec-sub">Live health and utilization across the current cluster</div>
     </div>
 </div>
 
-<div class="row mt-4">
-    <!-- Statistics Cards -->
-    <div class="col-6 col-lg mb-3">
-        <div class="card text-white bg-primary h-100">
-            <div class="card-body py-2 px-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h6 class="card-title mb-1 small">Virtual Machines</h6>
-                        <h3 class="mb-0">{{ total_vms }}</h3>
-                    </div>
-                    <i class="bi bi-pc-display fs-2 opacity-75"></i>
-                </div>
-            </div>
+<!-- Statistics tiles -->
+<div class="row g-3 mb-4">
+    <div class="col-6 col-md-4 col-xl-2">
+        <div class="stat">
+            <div class="ico blue"><i class="bi bi-pc-display"></i></div>
+            <div><div class="val">{{ total_vms }}</div><div class="lbl">Virtual Machines</div></div>
         </div>
     </div>
-
-    <div class="col-6 col-lg mb-3">
-        <div class="card text-white bg-info h-100">
-            <div class="card-body py-2 px-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h6 class="card-title mb-1 small">Containers</h6>
-                        <h3 class="mb-0">{{ total_containers }}</h3>
-                    </div>
-                    <i class="bi bi-box fs-2 opacity-75"></i>
-                </div>
-            </div>
+    <div class="col-6 col-md-4 col-xl-2">
+        <div class="stat">
+            <div class="ico violet"><i class="bi bi-box"></i></div>
+            <div><div class="val">{{ total_containers }}</div><div class="lbl">Containers</div></div>
         </div>
     </div>
-
-    <div class="col-6 col-lg mb-3">
-        <div class="card text-white bg-secondary h-100">
-            <div class="card-body py-2 px-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h6 class="card-title mb-1 small">Templates</h6>
-                        <h3 class="mb-0">{{ total_templates }}</h3>
-                    </div>
-                    <i class="bi bi-copy fs-2 opacity-75"></i>
-                </div>
-            </div>
+    <div class="col-6 col-md-4 col-xl-2">
+        <div class="stat">
+            <div class="ico slate"><i class="bi bi-collection"></i></div>
+            <div><div class="val">{{ total_templates }}</div><div class="lbl">Templates</div></div>
         </div>
     </div>
-
-    <div class="col-6 col-lg mb-3">
-        <div class="card text-white bg-success h-100">
-            <div class="card-body py-2 px-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h6 class="card-title mb-1 small">Running</h6>
-                        <h3 class="mb-0">{{ running }}</h3>
-                    </div>
-                    <i class="bi bi-play-circle fs-2 opacity-75"></i>
-                </div>
-            </div>
+    <div class="col-6 col-md-4 col-xl-2">
+        <div class="stat">
+            <div class="ico ok"><i class="bi bi-play-circle"></i></div>
+            <div><div class="val">{{ running }}</div><div class="lbl">Running</div></div>
         </div>
     </div>
-
-    <div class="col-6 col-lg mb-3">
-        <div class="card text-white bg-danger h-100">
-            <div class="card-body py-2 px-3">
-                <div class="d-flex justify-content-between align-items-center">
-                    <div>
-                        <h6 class="card-title mb-1 small">Stopped</h6>
-                        <h3 class="mb-0">{{ stopped }}</h3>
-                    </div>
-                    <i class="bi bi-stop-circle fs-2 opacity-75"></i>
-                </div>
+    <div class="col-6 col-md-4 col-xl-2">
+        <div class="stat">
+            <div class="ico danger"><i class="bi bi-stop-circle"></i></div>
+            <div><div class="val">{{ stopped }}</div><div class="lbl">Stopped</div></div>
+        </div>
+    </div>
+    <div class="col-6 col-md-4 col-xl-2">
+        <div class="stat">
+            <div class="ico slate"><i class="bi bi-hdd-network"></i></div>
+            <div>
+                <div class="val">{{ total_nodes }}</div>
+                <div class="lbl">Nodes</div>
+                <div class="trend" style="color:var(--ok)"><i class="bi bi-circle-fill" style="font-size:6px"></i> {{ online_nodes }} online</div>
             </div>
         </div>
     </div>
 </div>
 
-<!-- Node Metrics -->
-<div class="row mt-4">
-    <div class="col-12">
-        <div class="card" x-data="dashboardNodes()">
-            <div class="card-header d-flex justify-content-between align-items-center py-2">
-                <h5 class="mb-0"><i class="bi bi-hdd-rack"></i> Node Status</h5>
-                <button class="btn btn-sm btn-outline-primary" @click="refresh()" :disabled="loading" title="Refresh">
-                    <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
-                </button>
-            </div>
-            <div class="card-body py-2">
-                <template x-if="loading && nodes.length === 0">
-                    <div class="text-center py-3"><div class="spinner-border spinner-border-sm" role="status"></div> Loading node metrics...</div>
-                </template>
-                <template x-if="error">
-                    <div class="text-danger p-3"><i class="bi bi-exclamation-triangle"></i> Error: <span x-text="error"></span></div>
-                </template>
-                <template x-if="!loading && !error && nodes.length === 0">
-                    <div class="text-muted p-3">No nodes available</div>
-                </template>
-                <div class="row g-3" x-show="nodes.length > 0">
-                    <template x-for="node in nodes" :key="node.name">
-                        <div class="col-md-6 col-lg-4">
-                            <div class="border rounded p-2" :class="!node.online && 'bg-light'">
-                                <div class="d-flex justify-content-between align-items-center mb-2">
-                                    <strong>
-                                        <i class="bi bi-hdd-network" :class="node.online ? 'text-success' : 'text-danger'"></i>
-                                        <span x-text="node.name || 'Unknown'"></span>
-                                    </strong>
-                                    <span x-show="!node.online" class="badge bg-danger">Offline</span>
-                                    <small x-show="node.online" class="text-muted"><i class="bi bi-clock"></i> <span x-text="fmtUptime(node.uptime)"></span></small>
-                                </div>
-                                <div class="row g-2 small" x-show="node.online">
-                                    <div class="col-6">
-                                        <div class="text-muted mb-1">CPU <span x-text="cpuPct(node)"></span>%</div>
-                                        <div class="progress" style="height:6px;">
-                                            <div class="progress-bar" :class="'bg-' + cpuColor(node)" :style="`width:${cpuPct(node)}%`"></div>
-                                        </div>
-                                    </div>
-                                    <div class="col-6">
-                                        <div class="text-muted mb-1">Mem <span x-text="memUsedGB(node)"></span>/<span x-text="memTotalGB(node)"></span> GB</div>
-                                        <div class="progress" style="height:6px;">
-                                            <div class="progress-bar" :class="'bg-' + memColor(node)" :style="`width:${memPct(node)}%`"></div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+<!-- Node health -->
+<div class="d-flex align-items-center gap-2 mb-2">
+    <div class="sec-title" style="font-size:14px">Node health</div>
+</div>
+
+<div class="card-x mb-4" x-data="dashboardNodes()">
+    <div class="cx-head d-flex justify-content-between align-items-center">
+        <span class="cx-title"><i class="bi bi-hdd-rack"></i> Node Status</span>
+        <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="refresh()" :disabled="loading" title="Refresh">
+            <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+        </button>
+    </div>
+    <div class="cx-body">
+        <template x-if="loading && nodes.length === 0">
+            <div class="text-center py-3"><div class="spinner-border spinner-border-sm" role="status"></div> Loading node metrics...</div>
+        </template>
+        <template x-if="error">
+            <div class="text-danger p-3"><i class="bi bi-exclamation-triangle"></i> Error: <span x-text="error"></span></div>
+        </template>
+        <template x-if="!loading && !error && nodes.length === 0">
+            <div class="empty-hint">No nodes available</div>
+        </template>
+        <div class="node-strip" x-show="nodes.length > 0">
+            <template x-for="node in nodes" :key="node.name">
+                <div class="node-card" style="cursor:default">
+                    <div class="nc-top">
+                        <span class="nc-dot" :class="node.online ? 'online' : 'offline'"></span>
+                        <div style="flex:1;min-width:0">
+                            <div class="nc-name" x-text="node.name || 'Unknown'"></div>
+                            <div class="nc-role" x-text="node.online ? fmtUptime(node.uptime) : 'Offline'"></div>
+                        </div>
+                    </div>
+                    <template x-if="node.online">
+                        <div>
+                            <div class="nc-metric"><span class="k">CPU</span><div class="ubar" style="flex:1"><i :class="cpuBarCls(node)" :style="'width:'+cpuPct(node)+'%'"></i></div><span class="pct" x-text="cpuPct(node)+'%'"></span></div>
+                            <div class="nc-metric"><span class="k">MEM</span><div class="ubar" style="flex:1"><i :class="memBarCls(node)" :style="'width:'+memPct(node)+'%'"></i></div><span class="pct" x-text="memPct(node)+'%'"></span></div>
                         </div>
                     </template>
                 </div>
-            </div>
+            </template>
         </div>
     </div>
 </div>
 
-<div class="row mt-4">
-    <!-- Top CPU Usage -->
-    <div class="col-md-6 mb-4">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-cpu"></i> Top CPU Usage</h5>
-            </div>
-            <div class="card-body">
+<!-- Top consumers + recent tasks -->
+<div class="row g-3">
+    <div class="col-12 col-xl-4">
+        <div class="card-x h-100">
+            <div class="cx-head"><i class="bi bi-cpu" style="color:var(--accent)"></i><span class="cx-title">Top CPU Usage</span></div>
+            <div class="cx-body tight">
                 {% if top_cpu %}
-                <div class="table-responsive">
-                    <table class="table table-sm table-hover">
-                        <thead class="table-light">
-                            <tr>
-                                <th>Name</th>
-                                <th class="d-none d-md-table-cell">Node</th>
-                                <th style="width: 40%">CPU</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for vm in top_cpu %}
-                            <tr>
-                                <td>
-                                    <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}" class="text-decoration-none">
-                                        {{ vm.name }}
-                                    </a>
-                                    <span class="badge bg-{{ 'primary' if vm.type == 'qemu' else 'info' }} ms-1">
-                                        {{ 'VM' if vm.type == 'qemu' else 'CT' }}
-                                    </span>
-                                </td>
-                                <td class="d-none d-md-table-cell text-muted">{{ vm.node }}</td>
-                                <td>
-                                    <div class="progress" style="height: 18px;">
-                                        <div class="progress-bar bg-{{ 'danger' if vm.cpu_percent > 80 else 'warning' if vm.cpu_percent > 60 else 'success' }}"
-                                             style="width: {{ vm.cpu_percent }}%">
-                                            {{ "%.1f"|format(vm.cpu_percent) }}%
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
+                <table class="tbl">
+                    <thead><tr><th>Name</th><th>Node</th><th class="num">CPU</th></tr></thead>
+                    <tbody>
+                        {% for vm in top_cpu %}
+                        <tr>
+                            <td>
+                                <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}" class="nm">{{ vm.name }}</a>
+                                <span class="type-chip {{ 'vm' if vm.type == 'qemu' else 'lxc' }}">{{ 'VM' if vm.type == 'qemu' else 'CT' }}</span>
+                            </td>
+                            <td class="text-muted-2">{{ vm.node }}</td>
+                            <td>
+                                <div class="usage-cell justify-content-end">
+                                    <div class="ubar" style="width:56px"><i class="{{ 'crit' if vm.cpu_percent > 80 else 'hot' if vm.cpu_percent > 60 else 'okc' }}" style="width:{{ vm.cpu_percent }}%"></i></div>
+                                    <span class="pct">{{ "%.1f"|format(vm.cpu_percent) }}%</span>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
                 {% else %}
-                <div class="text-muted text-center py-4">No running VMs</div>
+                <div class="empty-hint">No running VMs</div>
                 {% endif %}
             </div>
         </div>
     </div>
 
-    <!-- Top Memory Usage -->
-    <div class="col-md-6 mb-4">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-memory"></i> Top Memory Usage</h5>
-            </div>
-            <div class="card-body">
+    <div class="col-12 col-xl-4">
+        <div class="card-x h-100">
+            <div class="cx-head"><i class="bi bi-memory" style="color:var(--accent)"></i><span class="cx-title">Top Memory Usage</span></div>
+            <div class="cx-body tight">
                 {% if top_memory %}
-                <div class="table-responsive">
-                    <table class="table table-sm table-hover">
-                        <thead class="table-light">
-                            <tr>
-                                <th>Name</th>
-                                <th class="d-none d-md-table-cell">Node</th>
-                                <th style="width: 40%">Memory</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for vm in top_memory %}
-                            <tr>
-                                <td>
-                                    <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}" class="text-decoration-none">
-                                        {{ vm.name }}
-                                    </a>
-                                    <span class="badge bg-{{ 'primary' if vm.type == 'qemu' else 'info' }} ms-1">
-                                        {{ 'VM' if vm.type == 'qemu' else 'CT' }}
-                                    </span>
-                                </td>
-                                <td class="d-none d-md-table-cell text-muted">{{ vm.node }}</td>
-                                <td>
-                                    <div class="progress" style="height: 18px;">
-                                        <div class="progress-bar bg-{{ 'danger' if vm.mem_percent > 80 else 'warning' if vm.mem_percent > 60 else 'success' }}"
-                                             style="width: {{ vm.mem_percent }}%">
-                                            {{ "%.1f"|format(vm.mem_percent) }}%
-                                        </div>
-                                    </div>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
+                <table class="tbl">
+                    <thead><tr><th>Name</th><th>Node</th><th class="num">Memory</th></tr></thead>
+                    <tbody>
+                        {% for vm in top_memory %}
+                        <tr>
+                            <td>
+                                <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}" class="nm">{{ vm.name }}</a>
+                                <span class="type-chip {{ 'vm' if vm.type == 'qemu' else 'lxc' }}">{{ 'VM' if vm.type == 'qemu' else 'CT' }}</span>
+                            </td>
+                            <td class="text-muted-2">{{ vm.node }}</td>
+                            <td>
+                                <div class="usage-cell justify-content-end">
+                                    <div class="ubar" style="width:56px"><i class="{{ 'crit' if vm.mem_percent > 80 else 'hot' if vm.mem_percent > 60 else 'okc' }}" style="width:{{ vm.mem_percent }}%"></i></div>
+                                    <span class="pct">{{ "%.1f"|format(vm.mem_percent) }}%</span>
+                                </div>
+                            </td>
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
                 {% else %}
-                <div class="text-muted text-center py-4">No running VMs</div>
+                <div class="empty-hint">No running VMs</div>
                 {% endif %}
             </div>
         </div>
     </div>
-</div>
 
-<div class="row">
-    <!-- Recent Tasks -->
-    <div class="col-md-6 mb-4">
-        <div class="card" x-data="dashboardTasks()">
-            <div class="card-header d-flex justify-content-between align-items-center py-2">
-                <h5 class="mb-0"><i class="bi bi-list-task"></i> Recent Tasks</h5>
-                <div class="d-flex gap-2">
-                    <button class="btn btn-sm btn-outline-primary" @click="refresh()" :disabled="loading" title="Refresh Tasks">
-                        <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
-                    </button>
-                    <a href="{{ url_for('tasks') }}" class="btn btn-sm btn-outline-secondary">View All</a>
-                </div>
+    <div class="col-12 col-xl-4">
+        <div class="card-x h-100" x-data="dashboardTasks()">
+            <div class="cx-head">
+                <i class="bi bi-clock-history" style="color:var(--accent)"></i><span class="cx-title">Recent Tasks</span>
+                <button class="icon-btn ms-auto" style="width:28px;height:28px;font-size:13px" @click="refresh()" :disabled="loading" title="Refresh">
+                    <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+                </button>
+                <a href="{{ url_for('tasks') }}" style="font-size:12px;font-weight:600">View all</a>
             </div>
-            <div class="card-body p-0" style="max-height:350px;overflow-y:auto;">
+            <div class="cx-body tight" style="max-height:350px;overflow-y:auto">
                 <template x-if="loading && tasks.length === 0">
-                    <div class="text-center p-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading recent tasks...</div>
+                    <div class="text-center py-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading recent tasks...</div>
                 </template>
                 <template x-if="error">
-                    <div class="text-danger p-4"><i class="bi bi-exclamation-triangle"></i> Error loading tasks</div>
+                    <div class="text-danger p-3"><i class="bi bi-exclamation-triangle"></i> Error loading tasks</div>
                 </template>
                 <template x-if="!loading && !error && tasks.length === 0">
-                    <div class="text-muted p-4"><i class="bi bi-info-circle"></i> No recent tasks</div>
+                    <div class="empty-hint"><i class="bi bi-info-circle"></i> No recent tasks</div>
                 </template>
-                <div class="list-group list-group-flush" x-show="tasks.length > 0">
-                    <template x-for="task in tasks" :key="task.upid || (task.node + task.type + task.starttime)">
-                        <div class="list-group-item list-group-item-action">
-                            <div class="d-flex w-100 justify-content-between align-items-start">
-                                <div>
-                                    <h6 class="mb-1" x-text="displayName(task)"></h6>
-                                    <p class="mb-1 text-muted small">
-                                        Node: <span class="badge bg-secondary" x-text="task.node || 'Unknown'"></span>
+                <table class="tbl" x-show="tasks.length > 0">
+                    <tbody>
+                        <template x-for="task in tasks" :key="task.upid || (task.node + task.type + task.starttime)">
+                            <tr>
+                                <td style="width:26px">
+                                    <span class="job-ico" :class="dotCls(task)" style="width:26px;height:26px;font-size:13px">
+                                        <i class="bi" :class="dotIcon(task)"></i>
+                                    </span>
+                                </td>
+                                <td>
+                                    <div class="nm" x-text="displayName(task)"></div>
+                                    <div class="text-faint" style="font-size:11px">
+                                        <span x-text="task.node || 'Unknown'"></span>
                                         <template x-if="task.id && isVmTask(task)">
-                                            <span> | VM/CT <a :href="vmLink(task)" class="text-decoration-none" x-text="task.id"></a></span>
+                                            <span> · VM/CT <a :href="vmLink(task)" x-text="task.id"></a></span>
                                         </template>
                                         <template x-if="task.id && !isVmTask(task)">
-                                            <span> | <span x-text="task.id"></span></span>
+                                            <span> · <span x-text="task.id"></span></span>
                                         </template>
-                                    </p>
-                                </div>
-                                <div>
-                                    <span class="badge" :class="'bg-' + statusClass(task)" x-text="task.status || 'unknown'"></span><br>
-                                    <small class="text-muted" x-text="task.start_time_formatted || 'Unknown'"></small>
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </div>
+                                    </div>
+                                </td>
+                                <td class="text-faint mono" style="font-size:11px;text-align:right" x-text="fmtDateTime(task.starttime)"></td>
+                            </tr>
+                        </template>
+                    </tbody>
+                </table>
             </div>
         </div>
     </div>
@@ -295,6 +220,8 @@ <h6 class="mb-1" x-text="displayName(task)"></h6>
   import * as ProxUtils from "{{ url_for('static', filename='js/utils.js') }}";
 
   const ALLOWED_STATUS = new Set(['primary','secondary','success','danger','warning','info','dark']);
+  const JOB_ICO = { success: 'ok', danger: 'err', primary: 'run', secondary: 'ok' };
+  const JOB_ICON = { success: 'bi-check-circle', danger: 'bi-x-circle', primary: 'bi-arrow-repeat spin', secondary: 'bi-dash-circle' };
 
   function dashboardNodes() {
     return {
@@ -304,8 +231,8 @@ <h6 class="mb-1" x-text="displayName(task)"></h6>
       memPct(n)     { return ((n.mem_used / n.mem_total) * 100).toFixed(1); },
       memUsedGB(n)  { return (n.mem_used / 1073741824).toFixed(1); },
       memTotalGB(n) { return (n.mem_total / 1073741824).toFixed(1); },
-      cpuColor(n)   { const p = +this.cpuPct(n); return p > 80 ? 'danger' : p > 60 ? 'warning' : 'success'; },
-      memColor(n)   { const p = +this.memPct(n); return p > 80 ? 'danger' : p > 60 ? 'warning' : 'info'; },
+      cpuBarCls(n)  { const p = +this.cpuPct(n); return p > 80 ? 'crit' : p > 60 ? 'hot' : 'okc'; },
+      memBarCls(n)  { const p = +this.memPct(n); return p > 80 ? 'crit' : p > 60 ? 'hot' : 'okc'; },
       async load() {
         this.loading = true; this.error = '';
         try { this.nodes = await ProxUtils.apiJson('/api/nodes/status'); }
@@ -326,8 +253,11 @@ <h6 class="mb-1" x-text="displayName(task)"></h6>
       tasks: [], loading: true, error: '', _poller: null,
       displayName(t) { return ProxUtils.taskTypeName(t.type); },
       statusClass(t) { return ALLOWED_STATUS.has(t.status_class) ? t.status_class : 'secondary'; },
+      dotCls(t)      { return JOB_ICO[this.statusClass(t)] || 'ok'; },
+      dotIcon(t)     { return JOB_ICON[this.statusClass(t)] || 'bi-dash-circle'; },
       isVmTask(t)    { const ty = t.type || ''; return ty.startsWith('qm') || ty.startsWith('vz'); },
       vmLink(t)      { return `/vm/${encodeURIComponent(t.node)}/${encodeURIComponent(t.id)}`; },
+      fmtDateTime: ProxUtils.formatDateTime,
       async load() {
         this.loading = true; this.error = '';
         try {
diff --git a/templates/isos_templates.html b/templates/isos_templates.html
index 6c8aedc..4e159d6 100644
--- a/templates/isos_templates.html
+++ b/templates/isos_templates.html
@@ -5,11 +5,9 @@
 {% block content %}
 <div x-data="isosManager()">
 
-  <div class="row">
-    <div class="col-12">
-      <h1><i class="bi bi-disc"></i> ISOs & Templates</h1>
-      <p class="text-muted">Manage ISO images, VM templates, and container templates across all cluster nodes.</p>
-    </div>
+  <div class="mb-3">
+    <div class="sec-title">ISOs &amp; Templates</div>
+    <div class="sec-sub">Manage ISO images, VM templates, and container templates across all cluster nodes.</div>
   </div>
 
   <!-- Loading state -->
@@ -19,8 +17,9 @@ <h1><i class="bi bi-disc"></i> ISOs & Templates</h1>
   </div>
 
   <!-- No nodes available -->
-  <div x-show="!loading && nodes.length === 0" class="alert alert-warning">
-    <i class="bi bi-exclamation-triangle"></i> No online nodes available.
+  <div x-show="!loading && nodes.length === 0" class="callout warn">
+    <i class="bi bi-exclamation-triangle"></i>
+    <div><div class="b">No online nodes available.</div></div>
   </div>
 
   <!-- Node Tabs -->
@@ -47,49 +46,52 @@ <h1><i class="bi bi-disc"></i> ISOs & Templates</h1>
            :id="'node-content-' + node.name"
            role="tabpanel"
            :aria-labelledby="'node-tab-' + node.name">
-        <div class="row">
+        <div class="row g-3">
 
           <!-- ISO Images -->
-          <div class="col-12 mb-4">
-            <div class="card">
-              <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-disc"></i> ISO Images</h5>
-                <button class="btn btn-success btn-sm" @click="openDownload(node.name)">
+          <div class="col-12">
+            <div class="card-x">
+              <div class="cx-head">
+                <i class="bi bi-disc" style="color:var(--accent)"></i><span class="cx-title">ISO Images</span>
+                <button class="btn-x sm primary ms-auto" @click="openDownload(node.name)">
                   <i class="bi bi-download"></i> Download from URL
                 </button>
               </div>
-              <div class="card-body">
+              <div class="cx-body">
                 <div x-show="perNode[node.name] && perNode[node.name].loadingIsos" class="text-center py-3">
                   <div class="spinner-border spinner-border-sm" role="status"></div>
                   Loading ISO images...
                 </div>
                 <div x-show="perNode[node.name] && perNode[node.name].isoError"
-                     class="alert alert-danger"
-                     x-text="'Error: ' + (perNode[node.name] && perNode[node.name].isoError)">
+                     class="callout danger">
+                  <i class="bi bi-exclamation-triangle"></i>
+                  <div><div class="b" x-text="'Error: ' + (perNode[node.name] && perNode[node.name].isoError)"></div></div>
                 </div>
                 <div x-show="perNode[node.name] && !perNode[node.name].loadingIsos && !perNode[node.name].isoError && perNode[node.name].isos.length === 0"
-                     class="text-muted">
+                     class="empty-hint">
                   No ISO images found.
                 </div>
                 <div x-show="perNode[node.name] && !perNode[node.name].loadingIsos && perNode[node.name].isos.length > 0"
-                     class="table-responsive">
-                  <table class="table table-sm">
+                     class="tbl-scroll">
+                  <table class="tbl">
                     <thead>
-                      <tr><th>Name</th><th>Storage</th><th>Size</th><th>Format</th><th>Actions</th></tr>
+                      <tr><th>Name</th><th>Storage</th><th>Size</th><th>Format</th><th class="num">Actions</th></tr>
                     </thead>
                     <tbody>
                       <template x-for="iso in (perNode[node.name] ? perNode[node.name].isos : [])" :key="iso.volid">
                         <tr>
-                          <td><strong x-text="isoFilename(iso.volid)"></strong></td>
-                          <td><span class="badge bg-secondary" x-text="isoStorage(iso.volid)"></span></td>
+                          <td><span class="nm" x-text="isoFilename(iso.volid)"></span></td>
+                          <td><span class="type-chip" x-text="isoStorage(iso.volid)"></span></td>
                           <td x-text="isoSizeGB(iso) + ' GB'"></td>
                           <td x-text="iso.format || 'iso'"></td>
                           <td>
-                            <button class="btn btn-sm btn-outline-danger"
-                                    @click="deleteIso(node.name, iso.volid)"
-                                    title="Delete ISO">
-                              <i class="bi bi-trash"></i>
-                            </button>
+                            <div class="act-row">
+                              <button class="act-btn stopc"
+                                      @click="deleteIso(node.name, iso.volid)"
+                                      title="Delete ISO">
+                                <i class="bi bi-trash"></i>
+                              </button>
+                            </div>
                           </td>
                         </tr>
                       </template>
@@ -101,48 +103,49 @@ <h5 class="mb-0"><i class="bi bi-disc"></i> ISO Images</h5>
           </div>
 
           <!-- VM Templates -->
-          <div class="col-12 mb-4">
-            <div class="card">
-              <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-pc-display"></i> VM Templates</h5>
-                <button class="btn btn-success btn-sm" @click="openCloud(node.name)">
+          <div class="col-12">
+            <div class="card-x">
+              <div class="cx-head">
+                <i class="bi bi-pc-display" style="color:var(--accent)"></i><span class="cx-title">VM Templates</span>
+                <button class="btn-x sm primary ms-auto" @click="openCloud(node.name)">
                   <i class="bi bi-cloud-download"></i> Create Cloud Template
                 </button>
               </div>
-              <div class="card-body">
+              <div class="cx-body">
                 <div x-show="perNode[node.name] && perNode[node.name].loadingTemplates" class="text-center py-3">
                   <div class="spinner-border spinner-border-sm" role="status"></div>
                   Loading VM templates...
                 </div>
                 <div x-show="perNode[node.name] && perNode[node.name].templateError"
-                     class="alert alert-danger"
-                     x-text="'Error: ' + (perNode[node.name] && perNode[node.name].templateError)">
+                     class="callout danger">
+                  <i class="bi bi-exclamation-triangle"></i>
+                  <div><div class="b" x-text="'Error: ' + (perNode[node.name] && perNode[node.name].templateError)"></div></div>
                 </div>
                 <div x-show="perNode[node.name] && !perNode[node.name].loadingTemplates && !perNode[node.name].templateError && perNode[node.name].vmTemplates.length === 0"
-                     class="text-muted">
+                     class="empty-hint">
                   No VM templates found.
                 </div>
                 <div x-show="perNode[node.name] && !perNode[node.name].loadingTemplates && perNode[node.name].vmTemplates.length > 0"
-                     class="table-responsive">
-                  <table class="table table-sm">
+                     class="tbl-scroll">
+                  <table class="tbl">
                     <thead>
-                      <tr><th>ID</th><th>Name</th><th>Memory</th><th>CPU</th><th>Status</th><th>Actions</th></tr>
+                      <tr><th>ID</th><th>Name</th><th>Memory</th><th>CPU</th><th>Status</th><th class="num">Actions</th></tr>
                     </thead>
                     <tbody>
                       <template x-for="vm in (perNode[node.name] ? perNode[node.name].vmTemplates : [])" :key="vm.vmid">
                         <tr>
-                          <td><strong x-text="vm.vmid"></strong></td>
+                          <td class="mono" x-text="vm.vmid"></td>
                           <td x-text="vm.name || 'Unnamed'"></td>
                           <td x-text="vmMemGB(vm) + ' GB'"></td>
                           <td x-text="vmCpuInfo(vm)"></td>
-                          <td><span class="badge bg-info">Template</span></td>
+                          <td><span class="pill tmpl"><span class="d"></span>Template</span></td>
                           <td>
-                            <div class="btn-group btn-group-sm">
+                            <div class="act-row">
                               <a :href="'/vm/' + node.name + '/' + vm.vmid + '/clone'"
-                                 class="btn btn-outline-primary" title="Clone">
+                                 class="act-btn pri" title="Clone">
                                 <i class="bi bi-files"></i>
                               </a>
-                              <button class="btn btn-outline-danger"
+                              <button class="act-btn stopc"
                                       @click="deleteVmTemplate(node.name, vm.vmid, vm.name || 'Unnamed')"
                                       title="Delete Template">
                                 <i class="bi bi-trash"></i>
@@ -159,44 +162,44 @@ <h5 class="mb-0"><i class="bi bi-pc-display"></i> VM Templates</h5>
           </div>
 
           <!-- Container Templates -->
-          <div class="col-12 mb-4">
-            <div class="card">
-              <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-box"></i> Container Templates</h5>
-                <button class="btn btn-success btn-sm" @click="openLxcImport(node.name)">
+          <div class="col-12">
+            <div class="card-x">
+              <div class="cx-head">
+                <i class="bi bi-box" style="color:var(--accent)"></i><span class="cx-title">Container Templates</span>
+                <button class="btn-x sm primary ms-auto" @click="openLxcImport(node.name)">
                   <i class="bi bi-download"></i> Import Template
                 </button>
               </div>
-              <div class="card-body">
+              <div class="cx-body">
                 <div x-show="perNode[node.name] && perNode[node.name].loadingTemplates" class="text-center py-3">
                   <div class="spinner-border spinner-border-sm" role="status"></div>
                   Loading container templates...
                 </div>
                 <div x-show="perNode[node.name] && !perNode[node.name].loadingTemplates && !perNode[node.name].templateError && perNode[node.name].lxcTemplates.length === 0"
-                     class="text-muted">
+                     class="empty-hint">
                   No container templates found.
                 </div>
                 <div x-show="perNode[node.name] && !perNode[node.name].loadingTemplates && perNode[node.name].lxcTemplates.length > 0"
-                     class="table-responsive">
-                  <table class="table table-sm">
+                     class="tbl-scroll">
+                  <table class="tbl">
                     <thead>
-                      <tr><th>Template</th><th>Storage</th><th>Size</th><th>Filename</th><th>Actions</th></tr>
+                      <tr><th>Template</th><th>Storage</th><th>Size</th><th>Filename</th><th class="num">Actions</th></tr>
                     </thead>
                     <tbody>
                       <template x-for="t in (perNode[node.name] ? perNode[node.name].lxcTemplates : [])" :key="t.volid">
                         <tr>
-                          <td><strong x-text="lxcOsInfo(t)"></strong></td>
-                          <td><span class="badge bg-secondary" x-text="isoStorage(t.volid)"></span></td>
+                          <td><span class="nm" x-text="lxcOsInfo(t)"></span></td>
+                          <td><span class="type-chip" x-text="isoStorage(t.volid)"></span></td>
                           <td x-text="lxcSizeGB(t) + ' GB'"></td>
-                          <td><small class="text-muted" x-text="isoFilename(t.volid)"></small></td>
+                          <td><span class="text-faint" style="font-size:11.5px" x-text="isoFilename(t.volid)"></span></td>
                           <td>
-                            <div class="btn-group btn-group-sm">
-                              <button class="btn btn-outline-success"
+                            <div class="act-row">
+                              <button class="act-btn go"
                                       @click="openCreateCt(node.name, t.volid)"
                                       title="Create Container">
                                 <i class="bi bi-plus-circle"></i>
                               </button>
-                              <button class="btn btn-outline-danger"
+                              <button class="act-btn stopc"
                                       @click="deleteLxcTemplate(node.name, t.volid)"
                                       title="Delete Template">
                                 <i class="bi bi-trash"></i>
@@ -227,56 +230,60 @@ <h5 class="modal-title"><i class="bi bi-download"></i> Download ISO from URL</h5
           <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
         </div>
         <div class="modal-body">
-          <div class="mb-3">
-            <label class="form-label">ISO URL <span class="text-danger">*</span></label>
-            <input type="url" class="form-control" x-model="dl.url"
+          <div class="field">
+            <label>ISO URL <span class="text-danger">*</span></label>
+            <input type="url" class="inp" x-model="dl.url"
                    @change="dlAutofillFilename()"
                    placeholder="https://example.com/image.iso">
-            <div class="form-text">Enter the direct URL to download the ISO image</div>
+            <div class="hint">Enter the direct URL to download the ISO image</div>
           </div>
-          <div class="mb-3">
-            <label class="form-label">Filename</label>
-            <input type="text" class="form-control" x-model="dl.filename"
+          <div class="field">
+            <label>Filename</label>
+            <input type="text" class="inp" x-model="dl.filename"
                    placeholder="Auto-detect from URL">
-            <div class="form-text">Leave empty to auto-detect from URL</div>
+            <div class="hint">Leave empty to auto-detect from URL</div>
           </div>
-          <div class="mb-3">
-            <label class="form-label">Storage <span class="text-danger">*</span></label>
+          <div class="field">
+            <label>Storage <span class="text-danger">*</span></label>
             <div x-show="dl.loadingStorages" class="text-muted">
               <span class="spinner-border spinner-border-sm"></span> Loading storages...
             </div>
-            <select class="form-select" x-model="dl.storage" x-show="!dl.loadingStorages">
+            <select class="inp" x-model="dl.storage" x-show="!dl.loadingStorages">
               <option value="">Select storage...</option>
               <template x-for="s in dl.storages" :key="s.storage">
                 <option :value="s.storage" x-text="storageLabel(s)"></option>
               </template>
             </select>
-            <div class="form-text">Select storage that supports ISO content</div>
+            <div class="hint">Select storage that supports ISO content</div>
           </div>
 
           <!-- Progress feedback -->
           <div x-show="dl.showProgress" class="mt-3">
             <template x-if="dl.showProgress && !dl.manualUrl">
-              <div class="alert alert-info">
-                <i class="bi bi-download"></i> Download started. Check the Jobs panel for progress.
+              <div class="callout info">
+                <i class="bi bi-download"></i>
+                <div><div class="b">Download started. Check the Jobs panel for progress.</div></div>
               </div>
             </template>
             <template x-if="dl.showProgress && dl.manualUrl">
-              <div class="alert alert-warning">
-                <h6><i class="bi bi-exclamation-triangle"></i> Manual Download Required</h6>
-                <p class="mb-2">This URL requires manual download due to redirects or authentication.</p>
-                <div class="d-flex gap-2">
-                  <button type="button" class="btn btn-sm btn-secondary" @click="copyToClipboard(dl.manualUrl)">
-                    <i class="bi bi-clipboard"></i> Copy URL
-                  </button>
+              <div class="callout warn">
+                <i class="bi bi-exclamation-triangle"></i>
+                <div>
+                  <div class="t">Manual Download Required</div>
+                  <div class="b">This URL requires manual download due to redirects or authentication.</div>
+                  <div class="d-flex gap-2 mt-2">
+                    <button type="button" class="btn-x sm" @click="copyToClipboard(dl.manualUrl)">
+                      <i class="bi bi-clipboard"></i> Copy URL
+                    </button>
+                  </div>
                 </div>
               </div>
             </template>
           </div>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-primary" @click="startDownload()" :disabled="dl.busy">
+          <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn-x primary" @click="startDownload()" :disabled="dl.busy">
             <span x-show="dl.busy" class="spinner-border spinner-border-sm"></span>
             <span x-show="!dl.busy"><i class="bi bi-download"></i></span>
             <span x-text="dl.busy ? ' Starting...' : ' Start Download'"></span>
@@ -299,10 +306,10 @@ <h5 class="modal-title"><i class="bi bi-cloud-download"></i> Create Cloud VM Tem
 
           <!-- Cloud Image Selection -->
           <div class="mb-4">
-            <h6 class="text-primary"><i class="bi bi-image"></i> Cloud Image</h6>
-            <div class="mb-3">
-              <label class="form-label">Select Image <span class="text-danger">*</span></label>
-              <select class="form-select" x-model="cloud.image" @change="onCloudImageChange()">
+            <div class="sub-h" style="margin-top:0"><i class="bi bi-image"></i> Cloud Image</div>
+            <div class="field">
+              <label>Select Image <span class="text-danger">*</span></label>
+              <select class="inp" x-model="cloud.image" @change="onCloudImageChange()">
                 <option value="">Select a cloud image...</option>
                 <template x-for="group in cloudImageGroups" :key="group.label">
                   <optgroup :label="group.label">
@@ -312,7 +319,7 @@ <h6 class="text-primary"><i class="bi bi-image"></i> Cloud Image</h6>
                   </optgroup>
                 </template>
               </select>
-              <div class="form-text">
+              <div class="hint">
                 <template x-if="cloudSelectedImage">
                   <span>
                     <small x-text="cloudSelectedImage.description"></small><br>
@@ -325,122 +332,143 @@ <h6 class="text-primary"><i class="bi bi-image"></i> Cloud Image</h6>
 
           <!-- VM Configuration -->
           <div class="mb-4">
-            <h6 class="text-primary"><i class="bi bi-gear"></i> VM Configuration</h6>
+            <div class="sub-h"><i class="bi bi-gear"></i> VM Configuration</div>
             <div class="row">
-              <div class="col-md-6 mb-3">
-                <label class="form-label">Template Name</label>
-                <input type="text" class="form-control" x-model="cloud.name" placeholder="Auto-generated from image">
-              </div>
-              <div class="col-md-6 mb-3">
-                <label class="form-label">VM ID</label>
-                <input type="number" class="form-control" x-model.number="cloud.vmid"
-                       @input.debounce.300ms="checkVmid('cloud')"
-                       :class="cloud.vmidStatus.valid === true ? 'is-valid' : cloud.vmidStatus.valid === false ? 'is-invalid' : ''"
-                       placeholder="Auto (next available)">
-                <div class="form-text"
-                     :class="cloud.vmidStatus.valid === true ? 'text-success' : cloud.vmidStatus.valid === false ? 'text-danger' : 'text-muted'">
-                  <template x-if="cloud.vmidStatus.checking">
-                    <span><i class="bi bi-arrow-clockwise spin"></i> Checking...</span>
-                  </template>
-                  <template x-if="!cloud.vmidStatus.checking && cloud.vmidStatus.msg">
-                    <span x-text="cloud.vmidStatus.msg"></span>
-                  </template>
+              <div class="col-md-6">
+                <div class="field">
+                  <label>Template Name</label>
+                  <input type="text" class="inp" x-model="cloud.name" placeholder="Auto-generated from image">
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="field">
+                  <label>VM ID</label>
+                  <input type="number" class="inp" x-model.number="cloud.vmid"
+                         @input.debounce.300ms="checkVmid('cloud')"
+                         :class="cloud.vmidStatus.valid === true ? 'is-valid' : cloud.vmidStatus.valid === false ? 'is-invalid' : ''"
+                         placeholder="Auto (next available)">
+                  <div class="hint"
+                       :class="cloud.vmidStatus.valid === true ? 'text-success' : cloud.vmidStatus.valid === false ? 'text-danger' : 'text-muted'">
+                    <template x-if="cloud.vmidStatus.checking">
+                      <span><i class="bi bi-arrow-clockwise spin"></i> Checking...</span>
+                    </template>
+                    <template x-if="!cloud.vmidStatus.checking && cloud.vmidStatus.msg">
+                      <span x-text="cloud.vmidStatus.msg"></span>
+                    </template>
+                  </div>
                 </div>
               </div>
             </div>
             <div class="row">
-              <div class="col-md-4 mb-3">
-                <label class="form-label">CPU Cores</label>
-                <input type="number" class="form-control" x-model.number="cloud.cores" min="1" max="128">
+              <div class="col-md-4">
+                <div class="field">
+                  <label>CPU Cores</label>
+                  <input type="number" class="inp" x-model.number="cloud.cores" min="1" max="128">
+                </div>
               </div>
-              <div class="col-md-4 mb-3">
-                <label class="form-label">Memory (MB)</label>
-                <input type="number" class="form-control" x-model.number="cloud.memory" min="512" step="512">
+              <div class="col-md-4">
+                <div class="field">
+                  <label>Memory (MB)</label>
+                  <input type="number" class="inp" x-model.number="cloud.memory" min="512" step="512">
+                </div>
               </div>
-              <div class="col-md-4 mb-3">
-                <label class="form-label">Disk Size</label>
-                <input type="text" class="form-control" x-model="cloud.diskSize" placeholder="10G">
+              <div class="col-md-4">
+                <div class="field">
+                  <label>Disk Size</label>
+                  <input type="text" class="inp" x-model="cloud.diskSize" placeholder="10G">
+                </div>
               </div>
             </div>
             <div class="row">
-              <div class="col-md-6 mb-3">
-                <label class="form-label">Storage <span class="text-danger">*</span></label>
-                <select class="form-select" x-model="cloud.storage">
-                  <option value="">Select storage...</option>
-                  <template x-for="s in cloud.storages" :key="s.storage">
-                    <option :value="s.storage" x-text="storageLabel(s)"></option>
-                  </template>
-                </select>
+              <div class="col-md-6">
+                <div class="field">
+                  <label>Storage <span class="text-danger">*</span></label>
+                  <select class="inp" x-model="cloud.storage">
+                    <option value="">Select storage...</option>
+                    <template x-for="s in cloud.storages" :key="s.storage">
+                      <option :value="s.storage" x-text="storageLabel(s)"></option>
+                    </template>
+                  </select>
+                </div>
               </div>
-              <div class="col-md-6 mb-3">
-                <label class="form-label">Network Bridge</label>
-                <select class="form-select" x-model="cloud.bridge">
-                  <template x-for="net in cloud.bridges" :key="net.iface">
-                    <option :value="net.iface" x-text="bridgeLabel(net)"></option>
-                  </template>
-                </select>
+              <div class="col-md-6">
+                <div class="field">
+                  <label>Network Bridge</label>
+                  <select class="inp" x-model="cloud.bridge">
+                    <template x-for="net in cloud.bridges" :key="net.iface">
+                      <option :value="net.iface" x-text="bridgeLabel(net)"></option>
+                    </template>
+                  </select>
+                </div>
               </div>
             </div>
           </div>
 
           <!-- Cloud-Init -->
           <div class="mb-4">
-            <h6 class="text-primary"><i class="bi bi-cloud"></i> Cloud-Init Configuration</h6>
+            <div class="sub-h"><i class="bi bi-cloud"></i> Cloud-Init Configuration</div>
             <div class="row">
-              <div class="col-md-6 mb-3">
-                <label class="form-label">Default User</label>
-                <input type="text" class="form-control" x-model="cloud.ciUser" placeholder="e.g., ubuntu, debian">
-                <div class="form-text">Leave empty to use image default</div>
+              <div class="col-md-6">
+                <div class="field">
+                  <label>Default User</label>
+                  <input type="text" class="inp" x-model="cloud.ciUser" placeholder="e.g., ubuntu, debian">
+                  <div class="hint">Leave empty to use image default</div>
+                </div>
               </div>
-              <div class="col-md-6 mb-3">
-                <label class="form-label">Password</label>
-                <input type="password" class="form-control" x-model="cloud.ciPassword" placeholder="Optional">
+              <div class="col-md-6">
+                <div class="field">
+                  <label>Password</label>
+                  <input type="password" class="inp" x-model="cloud.ciPassword" placeholder="Optional">
+                </div>
               </div>
             </div>
-            <div class="mb-3">
-              <label class="form-label">SSH Public Keys</label>
-              <textarea class="form-control" x-model="cloud.ciSshKeys" rows="3"
+            <div class="field">
+              <label>SSH Public Keys</label>
+              <textarea class="inp" x-model="cloud.ciSshKeys" rows="3"
                         placeholder="ssh-rsa AAAA... or ssh-ed25519 AAAA..."></textarea>
-              <div class="form-text">One key per line. Recommended over password authentication.</div>
+              <div class="hint">One key per line. Recommended over password authentication.</div>
             </div>
-            <div class="mb-3">
-              <label class="form-label">IP Configuration</label>
-              <input type="text" class="form-control" x-model="cloud.ciIpConfig">
-              <div class="form-text">Use ip=dhcp for DHCP or ip=x.x.x.x/24,gw=x.x.x.x for static</div>
+            <div class="field">
+              <label>IP Configuration</label>
+              <input type="text" class="inp" x-model="cloud.ciIpConfig">
+              <div class="hint">Use ip=dhcp for DHCP or ip=x.x.x.x/24,gw=x.x.x.x for static</div>
             </div>
           </div>
 
           <!-- Progress -->
-          <div x-show="cloud.showProgress" class="alert alert-info">
-            <span class="spinner-border spinner-border-sm"></span> Starting background job...
+          <div x-show="cloud.showProgress" class="callout info">
+            <span class="spinner-border spinner-border-sm"></span>
+            <div><div class="b">Starting background job...</div></div>
           </div>
 
           <!-- Result -->
           <div x-show="cloud.result">
             <template x-if="cloud.result && cloud.result.success">
-              <div class="alert alert-info">
-                <i class="bi bi-check-circle"></i> <strong>Job started successfully!</strong><br>
-                <p class="mb-2">Template creation is running in the background.</p>
-                <p class="mb-0">
-                  <strong>Job ID:</strong> <span x-text="cloud.result.job_id"></span><br>
-                  <strong>VMID:</strong> <span x-text="cloud.result.vmid"></span>
-                </p>
-                <hr>
-                <small class="text-muted">Track progress via the Jobs icon in the top navbar.</small>
+              <div class="callout info">
+                <i class="bi bi-check-circle"></i>
+                <div>
+                  <div class="t">Job started successfully!</div>
+                  <div class="b">
+                    Template creation is running in the background.<br>
+                    <strong>Job ID:</strong> <span x-text="cloud.result.job_id"></span><br>
+                    <strong>VMID:</strong> <span x-text="cloud.result.vmid"></span><br>
+                    <small class="text-muted">Track progress via the Jobs icon in the top bar.</small>
+                  </div>
+                </div>
               </div>
             </template>
             <template x-if="cloud.result && !cloud.result.success">
-              <div class="alert alert-danger">
-                <i class="bi bi-exclamation-triangle"></i> <strong>Error:</strong>
-                <span x-text="cloud.result.error || 'Unknown error'"></span>
+              <div class="callout danger">
+                <i class="bi bi-exclamation-triangle"></i>
+                <div><div class="t">Error</div><div class="b" x-text="cloud.result.error || 'Unknown error'"></div></div>
               </div>
             </template>
           </div>
 
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-primary" @click="createCloudTemplate()" :disabled="cloud.busy">
+          <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn-x primary" @click="createCloudTemplate()" :disabled="cloud.busy">
             <span x-show="cloud.busy" class="spinner-border spinner-border-sm"></span>
             <span x-show="!cloud.busy"><i class="bi bi-plus-circle"></i></span>
             <span x-text="cloud.busy ? ' Creating...' : ' Create Template'"></span>
@@ -490,28 +518,28 @@ <h5 class="modal-title"><i class="bi bi-download"></i> Import Container Template
 
             <!-- Proxmox Templates tab -->
             <div class="tab-pane fade show active" id="proxmox-source" role="tabpanel">
-              <div class="mb-3">
-                <label class="form-label">Storage <span class="text-danger">*</span></label>
-                <select class="form-select" x-model="lxc.lxcStorage">
+              <div class="field">
+                <label>Storage <span class="text-danger">*</span></label>
+                <select class="inp" x-model="lxc.lxcStorage">
                   <option value="">Select storage...</option>
                   <template x-for="s in lxc.storages" :key="s.storage">
                     <option :value="s.storage" x-text="storageLabel(s)"></option>
                   </template>
                 </select>
-                <div class="form-text">Select storage that supports container templates</div>
+                <div class="hint">Select storage that supports container templates</div>
               </div>
-              <div class="mb-3">
-                <label class="form-label">Category</label>
-                <select class="form-select" x-model="lxc.filterSection">
+              <div class="field">
+                <label>Category</label>
+                <select class="inp" x-model="lxc.filterSection">
                   <option value="">All Categories</option>
                   <template x-for="sec in lxcSections" :key="sec.value">
                     <option :value="sec.value" x-text="sec.label"></option>
                   </template>
                 </select>
               </div>
-              <div class="mb-3">
-                <label class="form-label">Template <span class="text-danger">*</span></label>
-                <select class="form-select" x-model="lxc.selectedTemplate" @change="onLxcTemplateChange()">
+              <div class="field">
+                <label>Template <span class="text-danger">*</span></label>
+                <select class="inp" x-model="lxc.selectedTemplate" @change="onLxcTemplateChange()">
                   <option value="">Select template...</option>
                   <template x-for="group in lxcTemplateGroups" :key="group.label">
                     <optgroup :label="group.label">
@@ -521,15 +549,15 @@ <h5 class="modal-title"><i class="bi bi-download"></i> Import Container Template
                     </optgroup>
                   </template>
                 </select>
-                <div class="form-text">
+                <div class="hint">
                   <template x-if="lxc.templateData">
                     <span>
                       <strong x-text="lxc.templateData.headline"></strong>
                       <template x-if="lxc.templateData.os">
-                        <span class="badge bg-secondary ms-1" x-text="lxc.templateData.os"></span>
+                        <span class="type-chip ms-1" x-text="lxc.templateData.os"></span>
                       </template>
                       <template x-if="lxc.templateData.version">
-                        <span class="badge bg-info ms-1" x-text="lxc.templateData.version"></span>
+                        <span class="type-chip ms-1" x-text="lxc.templateData.version"></span>
                       </template>
                     </span>
                   </template>
@@ -539,96 +567,105 @@ <h5 class="modal-title"><i class="bi bi-download"></i> Import Container Template
 
             <!-- URL tab -->
             <div class="tab-pane fade" id="url-source" role="tabpanel">
-              <div class="mb-3">
-                <label class="form-label">Storage <span class="text-danger">*</span></label>
-                <select class="form-select" x-model="lxc.lxcUrlStorage">
+              <div class="field">
+                <label>Storage <span class="text-danger">*</span></label>
+                <select class="inp" x-model="lxc.lxcUrlStorage">
                   <option value="">Select storage...</option>
                   <template x-for="s in lxc.storages" :key="s.storage">
                     <option :value="s.storage" x-text="storageLabel(s)"></option>
                   </template>
                 </select>
               </div>
-              <div class="mb-3">
-                <label class="form-label">Template URL <span class="text-danger">*</span></label>
-                <input type="url" class="form-control" x-model="lxc.lxcUrl"
+              <div class="field">
+                <label>Template URL <span class="text-danger">*</span></label>
+                <input type="url" class="inp" x-model="lxc.lxcUrl"
                        @change="lxcUrlAutofill()"
                        placeholder="https://example.com/template.tar.xz">
-                <div class="form-text">Direct URL to a container template (.tar.xz, .tar.gz, or .tar.zst)</div>
+                <div class="hint">Direct URL to a container template (.tar.xz, .tar.gz, or .tar.zst)</div>
               </div>
-              <div class="mb-3">
-                <label class="form-label">Filename</label>
-                <input type="text" class="form-control" x-model="lxc.lxcUrlFilename" placeholder="Auto-detect from URL">
-                <div class="form-text">Leave empty to auto-detect from URL</div>
+              <div class="field">
+                <label>Filename</label>
+                <input type="text" class="inp" x-model="lxc.lxcUrlFilename" placeholder="Auto-detect from URL">
+                <div class="hint">Leave empty to auto-detect from URL</div>
               </div>
             </div>
 
             <!-- OCI tab -->
             <div class="tab-pane fade" id="oci-source" role="tabpanel">
-              <div class="mb-3">
-                <label class="form-label">Storage <span class="text-danger">*</span></label>
-                <select class="form-select" x-model="lxc.lxcOciStorage">
+              <div class="field">
+                <label>Storage <span class="text-danger">*</span></label>
+                <select class="inp" x-model="lxc.lxcOciStorage">
                   <option value="">Select storage...</option>
                   <template x-for="s in lxc.storages" :key="s.storage">
                     <option :value="s.storage" x-text="storageLabel(s)"></option>
                   </template>
                 </select>
               </div>
-              <div class="mb-3">
-                <label class="form-label">OCI Image <span class="text-danger">*</span></label>
-                <input type="text" class="form-control" x-model="lxc.lxcOciImage"
+              <div class="field">
+                <label>OCI Image <span class="text-danger">*</span></label>
+                <input type="text" class="inp" x-model="lxc.lxcOciImage"
                        placeholder="docker.io/library/alpine:latest">
-                <div class="form-text">OCI image reference (e.g., docker.io/library/alpine:latest)</div>
+                <div class="hint">OCI image reference (e.g., docker.io/library/alpine:latest)</div>
               </div>
-              <div class="alert alert-info">
-                <i class="bi bi-info-circle"></i> <strong>Note:</strong> OCI registry support requires Proxmox VE 8.0+. The image will be converted to an LXC template.
+              <div class="callout info">
+                <i class="bi bi-info-circle"></i>
+                <div><div class="t">Note</div><div class="b">OCI registry support requires Proxmox VE 8.0+. The image will be converted to an LXC template.</div></div>
               </div>
             </div>
 
           </div><!-- /tab-content -->
 
           <!-- Progress -->
-          <div x-show="lxc.showProgress" class="alert alert-info mt-3">
+          <div x-show="lxc.showProgress" class="callout info mt-3">
             <span class="spinner-border spinner-border-sm"></span>
-            <span x-text="lxc.progressMsg || 'Starting download...'"></span>
+            <div><div class="b" x-text="lxc.progressMsg || 'Starting download...'"></div></div>
           </div>
 
           <!-- Result -->
           <div x-show="lxc.result" class="mt-3">
             <template x-if="lxc.result && lxc.result.success">
-              <div class="alert alert-info">
-                <i class="bi bi-check-circle"></i> <strong>Download started!</strong><br>
-                <p class="mb-2" x-text="lxc.result.message"></p>
-                <template x-if="lxc.result.job_id">
-                  <p class="mb-0"><strong>Job ID:</strong> <span x-text="lxc.result.job_id"></span></p>
-                </template>
-                <hr>
-                <small class="text-muted">Track progress via the Jobs icon in the top navbar.</small>
+              <div class="callout info">
+                <i class="bi bi-check-circle"></i>
+                <div>
+                  <div class="t">Download started!</div>
+                  <div class="b">
+                    <span x-text="lxc.result.message"></span>
+                    <template x-if="lxc.result.job_id">
+                      <div><strong>Job ID:</strong> <span x-text="lxc.result.job_id"></span></div>
+                    </template>
+                    <small class="text-muted">Track progress via the Jobs icon in the top bar.</small>
+                  </div>
+                </div>
               </div>
             </template>
             <template x-if="lxc.result && !lxc.result.success && lxc.result.manual_command">
-              <div class="alert alert-warning">
-                <i class="bi bi-exclamation-triangle"></i> <strong>Manual download required</strong><br>
-                <p x-text="lxc.result.error"></p>
-                <hr>
-                <p class="mb-1"><strong>Run this command on the Proxmox node:</strong></p>
-                <code class="d-block p-2 bg-dark text-light rounded" x-text="lxc.result.manual_command"></code>
-                <button class="btn btn-sm btn-secondary mt-2" @click="copyToClipboard(lxc.result.manual_command)">
-                  <i class="bi bi-clipboard"></i> Copy Command
-                </button>
+              <div class="callout warn">
+                <i class="bi bi-exclamation-triangle"></i>
+                <div>
+                  <div class="t">Manual download required</div>
+                  <div class="b">
+                    <span x-text="lxc.result.error"></span><br>
+                    <strong>Run this command on the Proxmox node:</strong>
+                    <code class="d-block p-2 bg-dark text-light rounded mt-1" x-text="lxc.result.manual_command"></code>
+                    <button class="btn-x sm mt-2" @click="copyToClipboard(lxc.result.manual_command)">
+                      <i class="bi bi-clipboard"></i> Copy Command
+                    </button>
+                  </div>
+                </div>
               </div>
             </template>
             <template x-if="lxc.result && !lxc.result.success && !lxc.result.manual_command">
-              <div class="alert alert-danger">
-                <i class="bi bi-exclamation-triangle"></i> <strong>Error:</strong>
-                <span x-text="lxc.result.error || 'Unknown error'"></span>
+              <div class="callout danger">
+                <i class="bi bi-exclamation-triangle"></i>
+                <div><div class="t">Error</div><div class="b" x-text="lxc.result.error || 'Unknown error'"></div></div>
               </div>
             </template>
           </div>
 
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-primary" @click="importLxcTemplate()" :disabled="lxc.busy">
+          <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn-x primary" @click="importLxcTemplate()" :disabled="lxc.busy">
             <span x-show="lxc.busy" class="spinner-border spinner-border-sm"></span>
             <span x-show="!lxc.busy"><i class="bi bi-download"></i></span>
             <span x-text="lxc.busy ? ' Importing...' : ' Import Template'"></span>
@@ -650,112 +687,139 @@ <h5 class="modal-title"><i class="bi bi-plus-circle"></i> Create Container</h5>
         <div class="modal-body">
 
           <!-- Template info -->
-          <div class="alert alert-info mb-3">
-            <i class="bi bi-box"></i> Template: <strong x-text="ct.templateInfo"></strong>
+          <div class="callout info mb-3">
+            <i class="bi bi-box"></i>
+            <div><div class="b">Template: <strong x-text="ct.templateInfo"></strong></div></div>
           </div>
 
           <!-- Basic Settings -->
-          <div class="row mb-3">
+          <div class="row">
             <div class="col-md-6">
-              <label class="form-label">Container ID</label>
-              <input type="number" class="form-control" x-model.number="ct.vmid"
-                     @input.debounce.300ms="checkVmid('ct')"
-                     :class="ct.vmidStatus.valid === true ? 'is-valid' : ct.vmidStatus.valid === false ? 'is-invalid' : ''"
-                     placeholder="Auto (next available)">
-              <div class="form-text"
-                   :class="ct.vmidStatus.valid === true ? 'text-success' : ct.vmidStatus.valid === false ? 'text-danger' : 'text-muted'">
-                <template x-if="ct.vmidStatus.checking">
-                  <span><i class="bi bi-arrow-clockwise spin"></i> Checking...</span>
-                </template>
-                <template x-if="!ct.vmidStatus.checking && ct.vmidStatus.msg">
-                  <span x-text="ct.vmidStatus.msg"></span>
-                </template>
-                <template x-if="!ct.vmidStatus.checking && !ct.vmidStatus.msg">
-                  <span>Leave empty for next available ID</span>
-                </template>
+              <div class="field">
+                <label>Container ID</label>
+                <input type="number" class="inp" x-model.number="ct.vmid"
+                       @input.debounce.300ms="checkVmid('ct')"
+                       :class="ct.vmidStatus.valid === true ? 'is-valid' : ct.vmidStatus.valid === false ? 'is-invalid' : ''"
+                       placeholder="Auto (next available)">
+                <div class="hint"
+                     :class="ct.vmidStatus.valid === true ? 'text-success' : ct.vmidStatus.valid === false ? 'text-danger' : 'text-muted'">
+                  <template x-if="ct.vmidStatus.checking">
+                    <span><i class="bi bi-arrow-clockwise spin"></i> Checking...</span>
+                  </template>
+                  <template x-if="!ct.vmidStatus.checking && ct.vmidStatus.msg">
+                    <span x-text="ct.vmidStatus.msg"></span>
+                  </template>
+                  <template x-if="!ct.vmidStatus.checking && !ct.vmidStatus.msg">
+                    <span>Leave empty for next available ID</span>
+                  </template>
+                </div>
               </div>
             </div>
             <div class="col-md-6">
-              <label class="form-label">Hostname <span class="text-danger">*</span></label>
-              <input type="text" class="form-control" x-model="ct.hostname"
-                     pattern="[a-zA-Z0-9\-]+" placeholder="my-container" required>
+              <div class="field">
+                <label>Hostname <span class="text-danger">*</span></label>
+                <input type="text" class="inp" x-model="ct.hostname"
+                       pattern="[a-zA-Z0-9\-]+" placeholder="my-container" required>
+              </div>
             </div>
           </div>
 
           <!-- Resources -->
-          <div class="row mb-3">
+          <div class="row">
             <div class="col-md-4">
-              <label class="form-label">CPU Cores</label>
-              <input type="number" class="form-control" x-model.number="ct.cores" min="1" max="128">
+              <div class="field">
+                <label>CPU Cores</label>
+                <input type="number" class="inp" x-model.number="ct.cores" min="1" max="128">
+              </div>
             </div>
             <div class="col-md-4">
-              <label class="form-label">Memory (MB)</label>
-              <input type="number" class="form-control" x-model.number="ct.memory" min="16" step="128">
+              <div class="field">
+                <label>Memory (MB)</label>
+                <input type="number" class="inp" x-model.number="ct.memory" min="16" step="128">
+              </div>
             </div>
             <div class="col-md-4">
-              <label class="form-label">Swap (MB)</label>
-              <input type="number" class="form-control" x-model.number="ct.swap" min="0" step="128">
+              <div class="field">
+                <label>Swap (MB)</label>
+                <input type="number" class="inp" x-model.number="ct.swap" min="0" step="128">
+              </div>
             </div>
           </div>
 
           <!-- Storage -->
-          <div class="row mb-3">
+          <div class="row">
             <div class="col-md-6">
-              <label class="form-label">Root Disk Storage <span class="text-danger">*</span></label>
-              <select class="form-select" x-model="ct.storage">
-                <option value="">Select storage...</option>
-                <template x-for="s in ct.storages" :key="s.storage">
-                  <option :value="s.storage" x-text="storageLabel(s)"></option>
-                </template>
-              </select>
+              <div class="field">
+                <label>Root Disk Storage <span class="text-danger">*</span></label>
+                <select class="inp" x-model="ct.storage">
+                  <option value="">Select storage...</option>
+                  <template x-for="s in ct.storages" :key="s.storage">
+                    <option :value="s.storage" x-text="storageLabel(s)"></option>
+                  </template>
+                </select>
+              </div>
             </div>
             <div class="col-md-6">
-              <label class="form-label">Root Disk Size (GB)</label>
-              <input type="number" class="form-control" x-model.number="ct.diskSize" min="1">
+              <div class="field">
+                <label>Root Disk Size (GB)</label>
+                <input type="number" class="inp" x-model.number="ct.diskSize" min="1">
+              </div>
             </div>
           </div>
 
           <!-- Network -->
-          <div class="row mb-3">
+          <div class="row">
             <div class="col-md-6">
-              <label class="form-label">Network Bridge</label>
-              <select class="form-select" x-model="ct.bridge">
-                <template x-for="net in ct.bridges" :key="net.iface">
-                  <option :value="net.iface" x-text="bridgeLabel(net)"></option>
-                </template>
-              </select>
+              <div class="field">
+                <label>Network Bridge</label>
+                <select class="inp" x-model="ct.bridge">
+                  <template x-for="net in ct.bridges" :key="net.iface">
+                    <option :value="net.iface" x-text="bridgeLabel(net)"></option>
+                  </template>
+                </select>
+              </div>
             </div>
             <div class="col-md-6">
-              <label class="form-label">IP Configuration</label>
-              <select class="form-select" x-model="ct.ipConfig">
-                <option value="dhcp">DHCP</option>
-                <option value="static">Static IP</option>
-              </select>
+              <div class="field">
+                <label>IP Configuration</label>
+                <select class="inp" x-model="ct.ipConfig">
+                  <option value="dhcp">DHCP</option>
+                  <option value="static">Static IP</option>
+                </select>
+              </div>
             </div>
           </div>
 
           <!-- Static IP fields -->
-          <div class="row mb-3" x-show="ct.ipConfig === 'static'">
+          <div class="row" x-show="ct.ipConfig === 'static'">
             <div class="col-md-6">
-              <label class="form-label">IP Address (CIDR)</label>
-              <input type="text" class="form-control" x-model="ct.ip" placeholder="192.168.1.100/24">
+              <div class="field">
+                <label>IP Address (CIDR)</label>
+                <input type="text" class="inp" x-model="ct.ip" placeholder="192.168.1.100/24">
+              </div>
             </div>
             <div class="col-md-6">
-              <label class="form-label">Gateway</label>
-              <input type="text" class="form-control" x-model="ct.gateway" placeholder="192.168.1.1">
+              <div class="field">
+                <label>Gateway</label>
+                <input type="text" class="inp" x-model="ct.gateway" placeholder="192.168.1.1">
+              </div>
             </div>
           </div>
 
           <!-- Password -->
-          <div class="row mb-3">
+          <div class="row">
             <div class="col-md-6">
-              <label class="form-label">Root Password</label>
-              <input type="password" class="form-control" x-model="ct.password" placeholder="Leave empty for no password">
+              <div class="field">
+                <label>Root Password</label>
+                <input type="password" class="inp" x-model="ct.password" placeholder="Leave empty for no password">
+              </div>
             </div>
             <div class="col-md-6">
-              <label class="form-label">SSH Public Key</label>
-              <textarea class="form-control" x-model="ct.sshKeys" rows="2"
-                        placeholder="ssh-rsa AAAA... or ssh-ed25519 AAAA..."></textarea>
+              <div class="field">
+                <label>SSH Public Key</label>
+                <textarea class="inp" x-model="ct.sshKeys" rows="2"
+                          placeholder="ssh-rsa AAAA... or ssh-ed25519 AAAA..."></textarea>
+              </div>
             </div>
           </div>
 
@@ -776,34 +840,39 @@ <h5 class="modal-title"><i class="bi bi-plus-circle"></i> Create Container</h5>
           </div>
 
           <!-- Progress -->
-          <div x-show="ct.showProgress" class="alert alert-info">
-            <span class="spinner-border spinner-border-sm"></span> Creating container...
+          <div x-show="ct.showProgress" class="callout info">
+            <span class="spinner-border spinner-border-sm"></span>
+            <div><div class="b">Creating container...</div></div>
           </div>
 
           <!-- Result -->
           <div x-show="ct.result">
             <template x-if="ct.result && ct.result.success">
-              <div class="alert alert-success">
-                <i class="bi bi-check-circle"></i> <strong>Container created successfully!</strong><br>
-                <p class="mb-0">Container ID: <strong x-text="ct.result.vmid"></strong></p>
-                <hr>
-                <a :href="'/vm/' + ct.node + '/' + ct.result.vmid" class="btn btn-sm btn-primary">
-                  <i class="bi bi-box"></i> Go to Container
-                </a>
+              <div class="callout ok">
+                <i class="bi bi-check-circle"></i>
+                <div>
+                  <div class="t">Container created successfully!</div>
+                  <div class="b">
+                    Container ID: <strong x-text="ct.result.vmid"></strong><br>
+                    <a :href="'/vm/' + ct.node + '/' + ct.result.vmid" class="btn-x sm primary mt-2">
+                      <i class="bi bi-box"></i> Go to Container
+                    </a>
+                  </div>
+                </div>
               </div>
             </template>
             <template x-if="ct.result && !ct.result.success">
-              <div class="alert alert-danger">
-                <i class="bi bi-exclamation-triangle"></i> <strong>Error:</strong>
-                <span x-text="ct.result.error || 'Unknown error'"></span>
+              <div class="callout danger">
+                <i class="bi bi-exclamation-triangle"></i>
+                <div><div class="t">Error</div><div class="b" x-text="ct.result.error || 'Unknown error'"></div></div>
               </div>
             </template>
           </div>
 
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-success" @click="createContainer()" :disabled="ct.busy">
+          <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn-x primary" @click="createContainer()" :disabled="ct.busy">
             <span x-show="ct.busy" class="spinner-border spinner-border-sm"></span>
             <span x-show="!ct.busy"><i class="bi bi-plus-circle"></i></span>
             <span x-text="ct.busy ? ' Creating...' : ' Create Container'"></span>
diff --git a/templates/networks.html b/templates/networks.html
index 6d7ddee..806f2ff 100644
--- a/templates/networks.html
+++ b/templates/networks.html
@@ -3,57 +3,39 @@
 {% block title %}Networks - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <h1><i class="bi bi-diagram-3"></i> Networks</h1>
-    </div>
+<div class="mb-3">
+    <div class="sec-title">Networks</div>
+    <div class="sec-sub">Bridges and interfaces across the cluster</div>
 </div>
 
-<div class="row mt-3">
-    <div class="col-12">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0">Network Interfaces</h5>
-            </div>
-            <div class="card-body">
-                <div class="table-responsive">
-                    <table class="table table-hover">
-                        <thead>
-                            <tr>
-                                <th>Interface</th>
-                                <th>Node</th>
-                                <th>Type</th>
-                                <th>Active</th>
-                                <th>IP Address</th>
-                                <th>Bridge Ports</th>
-                                <th>Comments</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for network in networks %}
-                            <tr>
-                                <td><strong>{{ network.iface }}</strong></td>
-                                <td>{{ network.node }}</td>
-                                <td>
-                                    <span class="badge bg-info">{{ network.type }}</span>
-                                </td>
-                                <td>
-                                    {% if network.active %}
-                                        <span class="badge bg-success">Active</span>
-                                    {% else %}
-                                        <span class="badge bg-danger">Inactive</span>
-                                    {% endif %}
-                                </td>
-                                <td>{{ network.address|default('-') }}</td>
-                                <td>{{ network.bridge_ports|default('-') }}</td>
-                                <td>{{ network.comments|default('-') }}</td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
+<div class="card-x">
+    <div class="cx-head"><i class="bi bi-diagram-3" style="color:var(--accent)"></i><span class="cx-title">Network Interfaces</span></div>
+    <div class="cx-body flush tbl-scroll">
+        <table class="tbl">
+            <thead><tr><th>Interface</th><th>Node</th><th>Type</th><th>Active</th><th>IP Address</th><th>Bridge Ports</th><th>Comment</th></tr></thead>
+            <tbody>
+                {% for network in networks %}
+                <tr>
+                    <td><span class="nm mono">{{ network.iface }}</span></td>
+                    <td class="text-muted-2">{{ network.node }}</td>
+                    <td><span class="type-chip">{{ network.type }}</span></td>
+                    <td>
+                        {% if network.active %}
+                        <span class="pill ok"><span class="d"></span>Active</span>
+                        {% else %}
+                        <span class="pill stop"><span class="d"></span>Down</span>
+                        {% endif %}
+                    </td>
+                    <td class="mono text-muted-2" style="font-size:12px">{{ network.address|default('—') }}</td>
+                    <td class="mono text-faint" style="font-size:12px">{{ network.bridge_ports|default('—') }}</td>
+                    <td class="text-faint" style="font-size:12px">{{ network.comments|default('—') }}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% if not networks %}
+        <div class="empty-hint"><i class="bi bi-inbox" style="font-size:26px"></i><div class="mt-2">No network interfaces found.</div></div>
+        {% endif %}
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/node_detail.html b/templates/node_detail.html
new file mode 100644
index 0000000..fc2a662
--- /dev/null
+++ b/templates/node_detail.html
@@ -0,0 +1,467 @@
+{% extends "base.html" %}
+
+{% block title %}{{ node }} - Proxmox Manager{% endblock %}
+
+{% block content %}
+<div class="mb-3"><a href="{{ url_for('cluster') }}" class="back-link"><i class="bi bi-arrow-left"></i> Cluster</a></div>
+
+{% if not online %}
+<div class="d-flex align-items-center gap-3 mb-3">
+    <span class="job-ico err" style="width:46px;height:46px;font-size:22px"><i class="bi bi-server"></i></span>
+    <div>
+        <div class="sec-title" style="font-size:20px">{{ node }}</div>
+        <div class="sec-sub">Node</div>
+    </div>
+</div>
+<div class="callout danger">
+    <i class="bi bi-exclamation-triangle"></i>
+    <div><div class="t">Node offline or unreachable</div><div class="b">Could not connect to <strong>{{ node }}</strong>. It may be powered off, disconnected from the cluster, or its API is not responding.</div></div>
+</div>
+{% else %}
+
+<div x-data="nodeMetrics('{{ node }}')">
+    <div class="d-flex align-items-center flex-wrap gap-3 mb-3">
+        <div class="me-auto d-flex align-items-center gap-3">
+            <span class="job-ico ok" style="width:46px;height:46px;font-size:22px"><i class="bi bi-server"></i></span>
+            <div>
+                <div class="sec-title" style="font-size:20px">{{ node }}</div>
+                <div class="sec-sub">Node <span class="pill ok ms-1"><span class="d"></span>Online</span></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Hero stats -->
+    <div class="metric-hero mb-4">
+        <div class="hero-stat"><div class="k">Uptime</div><div class="v mono">{{ status.uptime|humanize_uptime }}</div></div>
+        <div class="hero-stat"><div class="k">CPU</div><div class="v">{{ (status.cpu * 100)|round(1) }}%</div></div>
+        <div class="hero-stat"><div class="k">Memory</div><div class="v">{{ (status.memory.used / status.memory.total * 100)|round(1) if status.memory.total else 0 }}%</div></div>
+        <div class="hero-stat"><div class="k">Load Average</div><div class="v mono">{{ status.loadavg[0] if status.loadavg else 'N/A' }}</div></div>
+        <div class="hero-stat"><div class="k">CPU Cores</div><div class="v">{{ status.cpuinfo.cpus|default('N/A') }}</div></div>
+    </div>
+
+    <div class="d-flex flex-wrap mb-3 pb-3" style="gap:8px 40px;border-bottom:1px solid var(--border-soft)">
+        <div>
+            <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700">CPU Model</div>
+            <div style="font-size:12px;font-weight:600">{{ status.cpuinfo.model|default('N/A') }}</div>
+        </div>
+        <div>
+            <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700">Kernel</div>
+            <div class="mono" style="font-size:11.5px;font-weight:600">{{ status.kversion.split(' ')[:2]|join(' ') if status.kversion else 'N/A' }}</div>
+        </div>
+        <div>
+            <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700">PVE Version</div>
+            <div class="mono" style="font-size:11.5px;font-weight:600">{{ status.pveversion|default('N/A') }}</div>
+        </div>
+    </div>
+
+    <!-- Performance Metrics -->
+    <div class="card-x mb-4">
+        <div class="cx-head d-flex justify-content-between align-items-center flex-wrap gap-2">
+            <span class="cx-title"><i class="bi bi-graph-up" style="color:var(--accent)"></i> Performance Metrics</span>
+            <div class="d-flex align-items-center gap-2">
+                <select class="inp" style="width:auto" x-model="timeframe">
+                    <option value="hour">Last Hour</option>
+                    <option value="day">Last Day</option>
+                    <option value="week">Last Week</option>
+                    <option value="month">Last Month</option>
+                    <option value="year">Last Year</option>
+                </select>
+                <span class="text-faint" style="font-size:12px" x-text="lastUpdate"></span>
+                <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="refresh()" :disabled="loading" title="Refresh">
+                    <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+                </button>
+            </div>
+        </div>
+        <div class="cx-body">
+            <div class="row g-4">
+                <div class="col-12 col-lg-6">
+                    <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700"><i class="bi bi-cpu"></i> CPU Usage (%)</div>
+                    <div class="chart-box"><canvas x-ref="cpu"></canvas></div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700"><i class="bi bi-speedometer"></i> Load Average</div>
+                    <div class="chart-box"><canvas x-ref="load"></canvas></div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700"><i class="bi bi-memory"></i> Memory Usage (%)</div>
+                    <div class="chart-box"><canvas x-ref="memory"></canvas></div>
+                </div>
+                <div class="col-12 col-lg-6">
+                    <div class="text-faint" style="font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:700"><i class="bi bi-diagram-3"></i> Network I/O (MB)</div>
+                    <div class="chart-box"><canvas x-ref="network"></canvas></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Storage -->
+<div class="card-x mb-4">
+    <div class="cx-head"><i class="bi bi-hdd" style="color:var(--accent)"></i><span class="cx-title">Storage</span></div>
+    <div class="cx-body flush tbl-scroll">
+        <table class="tbl">
+            <thead><tr><th>Storage</th><th>Type</th><th>Shared</th><th>Status</th><th style="width:230px">Usage</th></tr></thead>
+            <tbody>
+                {% for storage in storages %}
+                <tr>
+                    <td>
+                        <span class="nm">{{ storage.storage }}</span>
+                        {% if storage.content %}<div class="text-faint" style="font-size:11px">{{ storage.content }}</div>{% endif %}
+                    </td>
+                    <td><span class="type-chip">{{ storage.type }}</span></td>
+                    <td>
+                        {% if storage.shared %}
+                        <i class="bi bi-check-circle-fill" style="color:var(--ok)"></i>
+                        {% else %}
+                        <i class="bi bi-dash" style="color:var(--text-faint)"></i>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if storage.active %}
+                        <span class="pill ok"><span class="d"></span>Active</span>
+                        {% else %}
+                        <span class="pill err"><span class="d"></span>Inactive</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if storage.total %}
+                        <div class="usage-cell">
+                            <div class="ubar" style="flex:1"><i class="{{ 'crit' if storage.used_percent > 80 else 'hot' if storage.used_percent > 60 else 'okc' }}" style="width:{{ storage.used_percent }}%"></i></div>
+                            <span class="pct">{{ "%.0f"|format(storage.used_percent) }}%</span>
+                        </div>
+                        <div class="text-faint mono" style="font-size:10.5px">{{ storage.used|humanize_bytes }} / {{ storage.total|humanize_bytes }}</div>
+                        {% else %}
+                        <span class="text-faint">N/A</span>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% if not storages %}
+        <div class="empty-hint"><i class="bi bi-inbox" style="font-size:26px"></i><div class="mt-2">No storage configured on this node.</div></div>
+        {% endif %}
+    </div>
+</div>
+
+<!-- Local Disks -->
+<div class="card-x mb-4" x-data="nodeDisks('{{ node }}')">
+    <div class="cx-head d-flex justify-content-between align-items-center">
+        <span class="cx-title"><i class="bi bi-device-hdd" style="color:var(--accent)"></i> Local Disks</span>
+        <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="load()" :disabled="loading" title="Refresh">
+            <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+        </button>
+    </div>
+    <div class="cx-body flush tbl-scroll">
+        <template x-if="loading && disks.length === 0">
+            <div class="text-center py-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading disks...</div>
+        </template>
+        <template x-if="error">
+            <div class="text-danger p-3"><i class="bi bi-exclamation-triangle"></i> <span x-text="error"></span></div>
+        </template>
+        <template x-if="!loading && !error && disks.length === 0">
+            <div class="empty-hint">No disk information available.</div>
+        </template>
+        <table class="tbl" x-show="disks.length > 0">
+            <thead><tr><th>Device</th><th>Model</th><th>Serial</th><th>Type</th><th class="num">Size</th><th>Used By</th><th>SMART</th><th class="num">Wearout</th></tr></thead>
+            <tbody>
+                <template x-for="d in disks" :key="d.devpath">
+                    <tr>
+                        <td><span class="nm mono" x-text="d.devpath"></span></td>
+                        <td x-text="d.model || 'N/A'"></td>
+                        <td class="mono text-muted-2" style="font-size:12px" x-text="d.serial || 'N/A'"></td>
+                        <td><span class="type-chip" x-text="(d.type || 'disk').toUpperCase()"></span></td>
+                        <td class="num mono" x-text="fmtBytes(d.size)"></td>
+                        <td class="text-muted-2" x-text="usedByLabel(d.used)"></td>
+                        <td>
+                            <span class="pill" :class="smartCls(d.health)"><span class="d"></span><span x-text="d.health || 'UNKNOWN'"></span></span>
+                        </td>
+                        <td class="num mono" x-text="(d.wearout === undefined || d.wearout === null || d.wearout === 'N/A') ? '—' : d.wearout + '%'"></td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- ZFS Pools -->
+<div class="card-x mb-4" x-data="nodeZfs('{{ node }}')">
+    <div class="cx-head d-flex justify-content-between align-items-center">
+        <span class="cx-title"><i class="bi bi-stack" style="color:var(--accent)"></i> ZFS Pools</span>
+        <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="load()" :disabled="loading" title="Refresh">
+            <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+        </button>
+    </div>
+    <div class="cx-body flush tbl-scroll">
+        <template x-if="loading && pools.length === 0">
+            <div class="text-center py-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading ZFS pools...</div>
+        </template>
+        <template x-if="!loading && pools.length === 0">
+            <div class="empty-hint"><i class="bi bi-info-circle"></i> No ZFS pools on this node.</div>
+        </template>
+        <table class="tbl" x-show="pools.length > 0">
+            <thead><tr><th>Pool</th><th>Health</th><th style="width:230px">Usage</th><th class="num">Fragmentation</th></tr></thead>
+            <tbody>
+                <template x-for="p in pools" :key="p.name">
+                    <tr>
+                        <td><span class="nm">&#128190; <span x-text="p.name"></span></span></td>
+                        <td><span class="pill" :class="p.health === 'ONLINE' ? 'ok' : 'err'"><span class="d"></span><span x-text="p.health"></span></span></td>
+                        <td>
+                            <div class="usage-cell">
+                                <div class="ubar" style="flex:1"><i :class="poolBarCls(p)" :style="'width:'+poolPct(p)+'%'"></i></div>
+                                <span class="pct" x-text="poolPct(p)+'%'"></span>
+                            </div>
+                            <div class="text-faint mono" style="font-size:10.5px" x-text="fmtBytes(p.alloc) + ' / ' + fmtBytes(p.size)"></div>
+                        </td>
+                        <td class="num mono" x-text="(p.frag ?? 0) + '%'"></td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<!-- Guests on this node -->
+<div class="card-x" x-data="nodeGuests({{ guests|tojson|forceescape }})">
+    <div class="cx-head"><i class="bi bi-pc-display" style="color:var(--accent)"></i><span class="cx-title">VMs &amp; Containers</span><span class="text-faint ms-2" style="font-size:12px">{{ guests|length }} guests</span></div>
+    <div class="cx-body flush tbl-scroll">
+        <table class="tbl">
+            <thead>
+                <tr>
+                    <th>Status</th>
+                    <th><a href="#" @click.prevent="setSort('name')">Name <i class="bi" :class="sortIcon('name')"></i></a></th>
+                    <th><a href="#" @click.prevent="setSort('type')">Type <i class="bi" :class="sortIcon('type')"></i></a></th>
+                    <th style="width:150px"><a href="#" @click.prevent="setSort('cpu')">CPU <i class="bi" :class="sortIcon('cpu')"></i></a></th>
+                    <th style="width:170px"><a href="#" @click.prevent="setSort('memory')">Memory <i class="bi" :class="sortIcon('memory')"></i></a></th>
+                    <th class="num">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <template x-for="g in sorted" :key="g.node + '-' + g.vmid">
+                    <tr>
+                        <td>
+                            <span class="pill" :class="g.template ? 'tmpl' : (g.status === 'running' ? 'run' : 'stop')">
+                                <span class="d"></span><span x-text="g.template ? 'Template' : (g.status === 'running' ? 'Running' : 'Stopped')"></span>
+                            </span>
+                        </td>
+                        <td>
+                            <a :href="'/vm/' + g.node + '/' + g.vmid" class="nm" x-text="g.name"></a>
+                            <div class="text-faint mono" style="font-size:11px">VMID: <span x-text="g.vmid"></span></div>
+                        </td>
+                        <td>
+                            <span class="type-chip" :class="g.template ? '' : (g.type === 'qemu' ? 'vm' : 'lxc')" x-text="g.template ? 'TMPL' : (g.type === 'qemu' ? 'VM' : 'LXC')"></span>
+                        </td>
+                        <td>
+                            <div class="usage-cell">
+                                <div class="ubar"><i :class="barCls(g.cpu_percent)" :style="'width:'+g.cpu_percent+'%'"></i></div>
+                                <span class="pct" x-text="(g.cpu_percent||0).toFixed(1)+'%'"></span>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="usage-cell">
+                                <div class="ubar"><i :class="barCls(g.mem_percent)" :style="'width:'+g.mem_percent+'%'"></i></div>
+                                <span class="pct" x-text="(g.mem_percent||0).toFixed(1)+'%'"></span>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="act-row">
+                                <a :href="'/vm/' + g.node + '/' + g.vmid" class="act-btn" title="Details"><i class="bi bi-info-circle"></i></a>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+        <template x-if="guests.length === 0">
+            <div class="empty-hint"><i class="bi bi-inbox" style="font-size:26px"></i><div class="mt-2">No guests on this node.</div></div>
+        </template>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+<script type="module">
+  import * as ProxUtils from "{{ url_for('static', filename='js/utils.js') }}";
+
+  function cssVar(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
+  function withAlpha(hex, alpha) {
+    const h = hex.replace('#', '');
+    const bigint = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
+    const r = (bigint >> 16) & 255, g = (bigint >> 8) & 255, b = bigint & 255;
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+  function gradientFill(ctx, color) {
+    const g = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height || 150);
+    g.addColorStop(0, withAlpha(color, 0.35));
+    g.addColorStop(1, withAlpha(color, 0));
+    return g;
+  }
+  function dataset(ctx, label, color, fill) {
+    return {
+      label, data: [], borderColor: color,
+      backgroundColor: fill ? gradientFill(ctx, color) : 'transparent',
+      fill: !!fill, borderWidth: 2, tension: 0.4,
+      pointRadius: 0, pointHoverRadius: 4, pointHoverBackgroundColor: color,
+      pointHoverBorderColor: '#fff', pointHoverBorderWidth: 2,
+    };
+  }
+  function themedOptions({ pct = false, max } = {}) {
+    const grid = cssVar('--grid-line'), faint = cssVar('--text-faint');
+    return {
+      responsive: true, maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: { display: true, position: 'top', align: 'end',
+          labels: { color: faint, boxWidth: 8, boxHeight: 8, usePointStyle: true, font: { size: 11 }, padding: 12 } },
+        tooltip: { backgroundColor: cssVar('--panel'), titleColor: cssVar('--text'), bodyColor: cssVar('--text-muted'),
+          borderColor: cssVar('--border'), borderWidth: 1, padding: 10, cornerRadius: 8, usePointStyle: true },
+      },
+      scales: {
+        x: { grid: { display: false }, ticks: { color: faint, font: { size: 10 }, maxRotation: 0, autoSkip: true, maxTicksLimit: 6 } },
+        y: { grid: { color: grid, drawBorder: false },
+          ticks: { color: faint, font: { size: 10 }, maxTicksLimit: 5, callback: v => pct ? v + '%' : v },
+          beginAtZero: true, suggestedMax: max },
+      },
+    };
+  }
+
+  function nodeMetrics(node) {
+    let charts = null;
+    return {
+      timeframe: 'day', lastUpdate: 'Loading...', loading: false, _poller: null,
+      init() {
+        const cpuCtx = this.$refs.cpu.getContext('2d');
+        const loadCtx = this.$refs.load.getContext('2d');
+        const memCtx = this.$refs.memory.getContext('2d');
+        const netCtx = this.$refs.network.getContext('2d');
+        const accent = cssVar('--accent'), violet = cssVar('--violet'), ok = cssVar('--ok'), warn = cssVar('--warn');
+        charts = {
+          cpu: new Chart(cpuCtx, { type: 'line',
+            data: { labels: [], datasets: [dataset(cpuCtx, 'CPU Usage (%)', accent, true)] },
+            options: themedOptions({ pct: true, max: 100 }) }),
+          load: new Chart(loadCtx, { type: 'line',
+            data: { labels: [], datasets: [dataset(loadCtx, 'Load Average', warn, true)] },
+            options: themedOptions() }),
+          memory: new Chart(memCtx, { type: 'line',
+            data: { labels: [], datasets: [dataset(memCtx, 'Memory Usage (%)', violet, true)] },
+            options: themedOptions({ pct: true, max: 100 }) }),
+          network: new Chart(netCtx, { type: 'line',
+            data: { labels: [], datasets: [
+              dataset(netCtx, 'Network In (MB)', ok, false),
+              dataset(netCtx, 'Network Out (MB)', accent, false),
+            ] },
+            options: themedOptions() }),
+        };
+        this.$watch('timeframe', () => this.load());
+        this.load();
+        this._poller = ProxUtils.createAdaptivePoller(() => this.load(), 30000);
+      },
+      destroy() {
+        this._poller?.destroy();
+        if (charts) { Object.values(charts).forEach(c => c.destroy()); charts = null; }
+      },
+      async load() {
+        if (!charts) return;
+        this.loading = true;
+        try {
+          const data = await ProxUtils.apiJson(`/api/node/${node}/metrics?timeframe=${this.timeframe}`);
+          if (!data.error) {
+            const h = data.historical;
+            const labels = h.labels.map(ts => ProxUtils.formatChartLabel(ts, this.timeframe));
+            charts.cpu.data.labels = labels; charts.cpu.data.datasets[0].data = h.cpu; charts.cpu.update('none');
+            charts.load.data.labels = labels; charts.load.data.datasets[0].data = h.loadavg; charts.load.update('none');
+            charts.memory.data.labels = labels; charts.memory.data.datasets[0].data = h.memory; charts.memory.update('none');
+            charts.network.data.labels = labels;
+            charts.network.data.datasets[0].data = h.network_in;
+            charts.network.data.datasets[1].data = h.network_out;
+            charts.network.update('none');
+            this.lastUpdate = `Last update: ${new Date().toLocaleTimeString()}`;
+          }
+        } catch (e) {
+          this.lastUpdate = `Error: ${e.message}`;
+        } finally { this.loading = false; }
+      },
+      refresh() { this.load(); },
+    };
+  }
+
+  const SMART_CLS = { PASSED: 'ok', FAILED: 'err' };
+  function nodeDisks(node) {
+    return {
+      disks: [], loading: true, error: '',
+      fmtBytes: ProxUtils.formatBytes,
+      smartCls(health) { return SMART_CLS[health] || 'maint'; },
+      usedByLabel(used) {
+        if (!used) return '—';
+        return used.toLowerCase().startsWith('zfs') ? 'ZFS' : used;
+      },
+      async load() {
+        this.loading = true; this.error = '';
+        try { this.disks = await ProxUtils.apiJson(`/api/node/${node}/disks`); }
+        catch (e) { this.error = e.message; }
+        finally { this.loading = false; }
+      },
+      init() { this.load(); },
+    };
+  }
+
+  function nodeZfs(node) {
+    return {
+      pools: [], loading: true,
+      fmtBytes: ProxUtils.formatBytes,
+      poolPct(p) { return p.size ? ((p.alloc / p.size) * 100).toFixed(0) : 0; },
+      poolBarCls(p) { const pct = +this.poolPct(p); return pct > 85 ? 'crit' : pct > 65 ? 'hot' : 'okc'; },
+      async load() {
+        this.loading = true;
+        try { this.pools = await ProxUtils.apiJson(`/api/node/${node}/zfs`); }
+        catch (e) { this.pools = []; }
+        finally { this.loading = false; }
+      },
+      init() { this.load(); },
+    };
+  }
+
+  function nodeGuests(initial) {
+    return {
+      guests: initial,
+      sortKey: 'status', sortDir: 'asc',
+      barCls(pct) { pct = pct || 0; return pct > 80 ? 'crit' : pct > 60 ? 'hot' : 'okc'; },
+      statusRank(g) {
+        if (g.template) return 2;
+        return g.status === 'running' ? 0 : 1;
+      },
+      setSort(key) {
+        if (this.sortKey === key) { this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; }
+        else { this.sortKey = key; this.sortDir = 'asc'; }
+      },
+      sortIcon(key) {
+        if (this.sortKey !== key) return 'bi-arrow-down-up';
+        return this.sortDir === 'asc' ? 'bi-arrow-up' : 'bi-arrow-down';
+      },
+      get sorted() {
+        const dir = this.sortDir === 'asc' ? 1 : -1;
+        const byNameAsc = (a, b) => (a.name || '').localeCompare(b.name || '');
+        return [...this.guests].sort((a, b) => {
+          switch (this.sortKey) {
+            case 'name': return dir * byNameAsc(a, b);
+            case 'type': return dir * (a.type || '').localeCompare(b.type || '') || byNameAsc(a, b);
+            case 'cpu': return dir * ((a.cpu_percent || 0) - (b.cpu_percent || 0)) || byNameAsc(a, b);
+            case 'memory': return dir * ((a.mem_percent || 0) - (b.mem_percent || 0)) || byNameAsc(a, b);
+            default: return (this.statusRank(a) - this.statusRank(b)) || byNameAsc(a, b);
+          }
+        });
+      },
+    };
+  }
+
+  function register() {
+    window.Alpine.data('nodeMetrics', nodeMetrics);
+    window.Alpine.data('nodeDisks', nodeDisks);
+    window.Alpine.data('nodeZfs', nodeZfs);
+    window.Alpine.data('nodeGuests', nodeGuests);
+  }
+  if (window.Alpine) register();
+  else document.addEventListener('alpine:init', register);
+</script>
+{% endblock %}
diff --git a/templates/storages.html b/templates/storages.html
index 60af389..7fd4dd9 100644
--- a/templates/storages.html
+++ b/templates/storages.html
@@ -3,83 +3,66 @@
 {% block title %}Storage - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <h1><i class="bi bi-hdd"></i> Storage</h1>
-    </div>
+<div class="mb-3">
+    <div class="sec-title">Storage</div>
+    <div class="sec-sub">{{ storages|length }} storages across the cluster</div>
 </div>
 
-<div class="row mt-3">
-    <div class="col-12">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0">Storage Overview</h5>
-            </div>
-            <div class="card-body">
-                <div class="table-responsive">
-                    <table class="table table-hover">
-                        <thead>
-                            <tr>
-                                <th>Storage</th>
-                                <th>Nodes</th>
-                                <th>Type</th>
-                                <th>Status</th>
-                                <th>Usage</th>
-                                <th>Total Size</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for storage in storages %}
-                            <tr>
-                                <td><strong>{{ storage.storage }}</strong></td>
-                                <td>
-                                    {% if storage.nodes and storage.nodes|length > 1 %}
-                                        <span class="badge bg-info me-1">{{ storage.nodes|length }} nodes</span>
-                                        <br>
-                                        <small class="text-muted">{{ storage.nodes|join(', ') }}</small>
-                                    {% elif storage.nodes %}
-                                        {{ storage.nodes[0] }}
-                                    {% else %}
-                                        {{ storage.node }}
-                                    {% endif %}
-                                </td>
-                                <td>
-                                    <span class="badge bg-secondary">{% if storage.content %}{{ storage.content }} {% else %}{{ storage.type }}{% endif %}</span>
-                                </td>
-                                <td>
-                                    {% if storage.is_active or storage.enabled or (storage.status == 'available') %}
-                                        <span class="badge bg-success">Active</span>
-                                    {% else %}
-                                        <span class="badge bg-danger">Inactive</span>
-                                    {% endif %}
-                                </td>
-                                <td>
-                                    {% if storage.maxdisk %}
-                                    <div class="progress" style="height: 20px; min-width: 150px;">
-                                        <div class="progress-bar bg-{{ 'danger' if storage.used_percent > 80 else 'warning' if storage.used_percent > 60 else 'info' }}" 
-                                             style="width: {{ storage.used_percent }}%">
-                                            {{ "%.1f"|format(storage.used_percent) }}%
-                                        </div>
-                                    </div>
-                                    <small>{{ (storage.disk / 1024 / 1024 / 1024)|round(1) }} / {{ (storage.maxdisk / 1024 / 1024 / 1024)|round(1) }} GB</small>
-                                    {% else %}
-                                    <small class="text-muted">N/A</small>
-                                    {% endif %}
-                                </td>
-                                <td>
-                                    {% if storage.maxdisk %}
-                                        {{ (storage.maxdisk / 1024 / 1024 / 1024)|round(1) }} GB
-                                    {% else %}
-                                        <small class="text-muted">N/A</small>
-                                    {% endif %}
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
+<div class="card-x">
+    <div class="cx-head"><i class="bi bi-hdd" style="color:var(--accent)"></i><span class="cx-title">Storage Overview</span></div>
+    <div class="cx-body flush tbl-scroll">
+        <table class="tbl">
+            <thead><tr><th>Storage</th><th>Nodes</th><th>Type</th><th>Shared</th><th>Status</th><th style="width:230px">Usage</th></tr></thead>
+            <tbody>
+                {% for storage in storages %}
+                <tr>
+                    <td>
+                        <span class="nm">{{ storage.storage }}</span>
+                        {% if storage.content %}<div class="text-faint" style="font-size:11px">{{ storage.content }}</div>{% endif %}
+                    </td>
+                    <td class="text-muted-2">
+                        {% if storage.nodes and storage.nodes|length > 1 %}
+                        {{ storage.nodes|length }} nodes
+                        <div class="text-faint" style="font-size:11px">{{ storage.nodes|join(', ') }}</div>
+                        {% elif storage.nodes %}
+                        {{ storage.nodes[0] }}
+                        {% else %}
+                        {{ storage.node }}
+                        {% endif %}
+                    </td>
+                    <td><span class="type-chip">{{ storage.type }}</span></td>
+                    <td>
+                        {% if storage.shared %}
+                        <i class="bi bi-check-circle-fill" style="color:var(--ok)"></i>
+                        {% else %}
+                        <i class="bi bi-dash" style="color:var(--text-faint)"></i>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if storage.is_active or storage.enabled or (storage.status == 'available') %}
+                        <span class="pill ok"><span class="d"></span>Active</span>
+                        {% else %}
+                        <span class="pill err"><span class="d"></span>Inactive</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        {% if storage.maxdisk %}
+                        <div class="usage-cell">
+                            <div class="ubar" style="flex:1"><i class="{{ 'crit' if storage.used_percent > 80 else 'hot' if storage.used_percent > 60 else 'okc' }}" style="width:{{ storage.used_percent }}%"></i></div>
+                            <span class="pct">{{ "%.0f"|format(storage.used_percent) }}%</span>
+                        </div>
+                        <div class="text-faint mono" style="font-size:10.5px">{{ storage.disk|humanize_bytes }} / {{ storage.maxdisk|humanize_bytes }}</div>
+                        {% else %}
+                        <span class="text-faint">N/A</span>
+                        {% endif %}
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% if not storages %}
+        <div class="empty-hint"><i class="bi bi-inbox" style="font-size:26px"></i><div class="mt-2">No storages found.</div></div>
+        {% endif %}
     </div>
 </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/tasks.html b/templates/tasks.html
index 8e0d47b..1d559ce 100644
--- a/templates/tasks.html
+++ b/templates/tasks.html
@@ -4,111 +4,71 @@
 
 {% block content %}
 <div x-data="tasksPage()">
-<div class="row">
-    <div class="col-12">
-        <div class="d-flex justify-content-between align-items-center">
-            <h1><i class="bi bi-list-task"></i> Recent Tasks</h1>
-            <button class="btn btn-outline-primary" @click="refresh()" :disabled="loading" title="Refresh Tasks">
-                <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i> Refresh
-            </button>
+    <div class="d-flex align-items-center flex-wrap gap-3 mb-3">
+        <div class="me-auto">
+            <div class="sec-title">Recent Tasks</div>
+            <div class="sec-sub">Cluster-wide task log</div>
         </div>
-        <p class="text-muted">All recent tasks from the cluster</p>
+        <button class="btn-x" @click="refresh()" :disabled="loading">
+            <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i> Refresh
+        </button>
     </div>
-</div>
 
-<div class="row mt-3">
-    <div class="col-12">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0">Cluster Tasks</h5>
-                <div class="d-flex gap-2">
-                    <select class="form-select form-select-sm" style="width: auto;"
-                            x-model="filter" @change="applyFilter()">
-                        <option value="all">All Tasks</option>
-                        <option value="running">Running</option>
-                        <option value="ok">Completed</option>
-                        <option value="error">Failed</option>
-                    </select>
-                    <select class="form-select form-select-sm" style="width: auto;"
-                            x-model.number="limit" @change="load()">
-                        <option value="50">Last 50</option>
-                        <option value="100">Last 100</option>
-                        <option value="200">Last 200</option>
-                    </select>
-                </div>
+    <div class="card-x">
+        <div class="cx-head flex-wrap gap-2">
+            <div class="seg">
+                <button :class="{on:filter==='all'}" @click="filter='all'; applyFilter()">All</button>
+                <button :class="{on:filter==='running'}" @click="filter='running'; applyFilter()">Running</button>
+                <button :class="{on:filter==='ok'}" @click="filter='ok'; applyFilter()">Completed</button>
+                <button :class="{on:filter==='error'}" @click="filter='error'; applyFilter()">Failed</button>
             </div>
-            <div class="card-body p-0">
-                <template x-if="loading && filteredTasks.length === 0">
-                    <div class="text-center p-4">
-                        <div class="spinner-border spinner-border-sm" role="status"></div>
-                        Loading tasks...
-                    </div>
-                </template>
-                <template x-if="error">
-                    <div class="text-danger p-4">
-                        <i class="bi bi-exclamation-triangle"></i> Error loading tasks
-                    </div>
-                </template>
-                <template x-if="!loading && !error && filteredTasks.length === 0">
-                    <div class="text-muted p-4">
-                        <i class="bi bi-info-circle"></i>
-                        <span x-text="filter === 'all' ? 'No tasks found' : 'No tasks match the current filter'"></span>
-                    </div>
-                </template>
-                <div x-show="filteredTasks.length > 0" class="table-responsive">
-                    <table class="table table-hover mb-0">
-                        <thead class="table-light">
-                            <tr>
-                                <th>Task</th>
-                                <th>Node</th>
-                                <th>Description</th>
-                                <th>User</th>
-                                <th>Status</th>
-                                <th>Started</th>
-                                <th>Duration</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <template x-for="task in filteredTasks" :key="task.upid || (task.node + task.type + task.starttime)">
-                                <tr>
-                                    <td>
-                                        <strong x-text="taskName(task)"></strong>
-                                    </td>
-                                    <td>
-                                        <span class="badge bg-secondary" x-text="task.node || 'Unknown'"></span>
-                                    </td>
-                                    <td>
-                                        <template x-if="task.id && (task.type || '').startsWith('qm')">
-                                            <span>VM <a :href="vmLink(task)" class="text-decoration-none" x-text="task.id"></a></span>
-                                        </template>
-                                        <template x-if="task.id && (task.type || '').startsWith('vz')">
-                                            <span>CT <a :href="vmLink(task)" class="text-decoration-none" x-text="task.id"></a></span>
-                                        </template>
-                                        <template x-if="!task.id || (!(task.type || '').startsWith('qm') && !(task.type || '').startsWith('vz'))">
-                                            <span x-text="task.id || ''"></span>
-                                        </template>
-                                    </td>
-                                    <td x-text="task.user || ''"></td>
-                                    <td>
-                                        <span class="badge" :class="'bg-' + taskStatusClass(task)"
-                                              x-text="task.status || (task.endtime ? 'unknown' : 'running')"></span>
-                                    </td>
-                                    <td>
-                                        <small class="text-muted" x-text="task.start_time_formatted || 'Unknown'"></small>
-                                    </td>
-                                    <td>
-                                        <small class="text-muted" x-text="taskDuration(task)"></small>
-                                    </td>
-                                </tr>
-                            </template>
-                        </tbody>
-                    </table>
-                </div>
+            <div class="seg ms-auto">
+                <button :class="{on:limit===50}" @click="limit=50; load()">Last 50</button>
+                <button :class="{on:limit===100}" @click="limit=100; load()">Last 100</button>
+                <button :class="{on:limit===200}" @click="limit=200; load()">Last 200</button>
             </div>
         </div>
+        <div class="cx-body flush tbl-scroll">
+            <template x-if="loading && filteredTasks.length === 0">
+                <div class="text-center p-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading tasks...</div>
+            </template>
+            <template x-if="error">
+                <div class="text-danger p-4"><i class="bi bi-exclamation-triangle"></i> Error loading tasks</div>
+            </template>
+            <template x-if="!loading && !error && filteredTasks.length === 0">
+                <div class="empty-hint">
+                    <i class="bi bi-info-circle"></i>
+                    <span x-text="filter === 'all' ? 'No tasks found' : 'No tasks match the current filter'"></span>
+                </div>
+            </template>
+            <table class="tbl" x-show="filteredTasks.length > 0">
+                <thead><tr><th>Status</th><th>Task</th><th>Node</th><th>User</th><th>Start time</th><th class="num">Duration</th></tr></thead>
+                <tbody>
+                    <template x-for="task in filteredTasks" :key="task.upid || (task.node + task.type + task.starttime)">
+                        <tr>
+                            <td>
+                                <span class="pill" :class="pillCls(task)" x-text="task.status || (task.endtime ? 'unknown' : 'running')"></span>
+                            </td>
+                            <td>
+                                <div class="nm" x-text="taskName(task)"></div>
+                                <template x-if="task.id && ((task.type || '').startsWith('qm') || (task.type || '').startsWith('vz'))">
+                                    <div class="text-faint" style="font-size:11px">
+                                        <span x-text="(task.type || '').startsWith('qm') ? 'VM' : 'CT'"></span>
+                                        <a :href="vmLink(task)" x-text="task.id"></a>
+                                    </div>
+                                </template>
+                            </td>
+                            <td class="text-muted-2" x-text="task.node || 'Unknown'"></td>
+                            <td class="text-muted-2 mono" style="font-size:12px" x-text="task.user || ''"></td>
+                            <td class="text-muted-2 mono" style="font-size:12px" x-text="fmtDateTime(task.starttime)"></td>
+                            <td class="num mono text-muted-2" x-text="taskDuration(task)"></td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
     </div>
 </div>
-</div>{# end x-data="tasksPage" #}
 {% endblock %}
 
 {% block scripts %}
@@ -116,6 +76,7 @@ <h5 class="mb-0">Cluster Tasks</h5>
   import * as ProxUtils from "{{ url_for('static', filename='js/utils.js') }}";
 
   const ALLOWED_STATUS = new Set(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark']);
+  const PILL_CLS = { success: 'ok', danger: 'err', primary: 'run', secondary: 'stop' };
 
   function tasksPage() {
     return {
@@ -129,10 +90,16 @@ <h5 class="mb-0">Cluster Tasks</h5>
         return ProxUtils.taskTypeName(task.type);
       },
 
+      fmtDateTime: ProxUtils.formatDateTime,
+
       taskStatusClass(task) {
         return ALLOWED_STATUS.has(task.status_class) ? task.status_class : 'secondary';
       },
 
+      pillCls(task) {
+        return PILL_CLS[this.taskStatusClass(task)] || 'stop';
+      },
+
       vmLink(task) {
         return `/vm/${encodeURIComponent(task.node)}/${encodeURIComponent(task.id)}`;
       },
diff --git a/templates/vm_clone.html b/templates/vm_clone.html
index 0d1bc2b..69492cd 100644
--- a/templates/vm_clone.html
+++ b/templates/vm_clone.html
@@ -3,86 +3,76 @@
 {% block title %}Clone VM {{ config.name or vmid }} - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <div class="d-flex justify-content-between align-items-center mb-3">
-            <h1><i class="bi bi-files"></i> Clone VM {{ config.name or vmid }}</h1>
-            <div>
-                <span class="badge bg-{{ 'success' if vm.status == 'running' else 'danger' if vm.status == 'stopped' else 'warning' }}">
-                    {{ vm.status }}
-                </span>
-                <a href="{{ url_for('vm_detail', node=node, vmid=vmid) }}" class="btn btn-outline-secondary ms-2">
-                    <i class="bi bi-arrow-left"></i> Back to VM
-                </a>
-            </div>
-        </div>
+<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
+    <div>
+        <div class="sec-title"><i class="bi bi-files"></i> Clone VM {{ config.name or vmid }}</div>
+    </div>
+    <div class="d-flex align-items-center gap-2">
+        <span class="pill {{ 'run' if vm.status == 'running' else 'stop' if vm.status == 'stopped' else 'maint' }}">
+            <span class="d"></span>{{ vm.status }}
+        </span>
+        <a href="{{ url_for('vm_detail', node=node, vmid=vmid) }}" class="btn-x">
+            <i class="bi bi-arrow-left"></i> Back to VM
+        </a>
     </div>
 </div>
 
 <div x-data="vmClone('{{ node }}', '{{ vmid }}')">
-<div class="row justify-content-center">
-    <div class="col-md-8">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-files"></i> Clone Configuration</h5>
-            </div>
-            <div class="card-body">
+<div class="row g-3 justify-content-center">
+    <div class="col-12 col-xl-8">
+        <div class="card-x">
+            <div class="cx-head"><i class="bi bi-files" style="color:var(--accent)"></i><span class="cx-title">Clone Configuration</span></div>
+            <div class="cx-body">
                 <!-- Source VM Info -->
                 <div class="mb-4">
-                    <h6 class="text-primary mb-3"><i class="bi bi-pc-display"></i> Source VM</h6>
-                    <div class="row">
-                        <div class="col-md-6">
-                            <div class="bg-light p-3 rounded">
-                                <div><strong>ID:</strong> {{ vmid }}</div>
-                                <div><strong>Name:</strong> {{ config.name or 'Unnamed' }}</div>
-                                <div><strong>Node:</strong> {{ node }}</div>
-                                <div><strong>Memory:</strong>
-                                    {% if config.memory %}
-                                        {% if config.memory | string | length > 3 %}
-                                            {{ ((config.memory | int) / 1024) | round(1) }} GB
-                                        {% else %}
-                                            {{ config.memory }} MB
-                                        {% endif %}
-                                    {% else %}
-                                        Unknown
-                                    {% endif %}
-                                </div>
-                                <div><strong>CPU:</strong> {{ config.cores or 1 }} cores</div>
-                            </div>
-                        </div>
-                    </div>
+                    <div class="sub-h" style="margin-top:0"><i class="bi bi-pc-display"></i> Source VM</div>
+                    <div class="kv"><span class="k">ID</span><span class="v">{{ vmid }}</span></div>
+                    <div class="kv"><span class="k">Name</span><span class="v">{{ config.name or 'Unnamed' }}</span></div>
+                    <div class="kv"><span class="k">Node</span><span class="v">{{ node }}</span></div>
+                    <div class="kv"><span class="k">Memory</span><span class="v">
+                        {% if config.memory %}
+                            {% if config.memory | string | length > 3 %}
+                                {{ ((config.memory | int) / 1024) | round(1) }} GB
+                            {% else %}
+                                {{ config.memory }} MB
+                            {% endif %}
+                        {% else %}
+                            Unknown
+                        {% endif %}
+                    </span></div>
+                    <div class="kv"><span class="k">CPU</span><span class="v">{{ config.cores or 1 }} cores</span></div>
                 </div>
 
                 <form @submit.prevent="submit()">
                     <!-- Clone Options -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-gear"></i> Clone Settings</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-gear"></i> Clone Settings</div>
 
-                        <div class="mb-3">
-                            <label for="clone_name" class="form-label">New VM Name <span class="text-danger">*</span></label>
-                            <input type="text" class="form-control" id="clone_name" name="clone_name"
+                        <div class="field">
+                            <label for="clone_name">New VM Name <span style="color:var(--danger)">*</span></label>
+                            <input type="text" class="inp" id="clone_name" name="clone_name"
                                    x-model="cloneName"
                                    placeholder="Enter name for the cloned VM" required>
                         </div>
 
-                        <div class="mb-3">
-                            <label for="clone_vmid" class="form-label">New VM ID <span class="text-danger">*</span></label>
-                            <input type="number" class="form-control" id="clone_vmid" name="clone_vmid"
+                        <div class="field">
+                            <label for="clone_vmid">New VM ID <span style="color:var(--danger)">*</span></label>
+                            <input type="number" class="inp" id="clone_vmid" name="clone_vmid"
                                    min="100" max="999999999"
                                    placeholder="Auto-generate"
                                    x-model="cloneVmid"
                                    :class="vmidInputCls"
                                    @input="onVmidInput()"
                                    required>
-                            <div :class="'form-text ' + vmidFeedbackCls">
+                            <div class="hint" :class="vmidFeedbackCls">
                                 <i class="bi" :class="vmidFeedbackIcon" x-show="vmidState !== 'empty'"></i>
                                 <span x-text="vmidFeedbackMsg"></span>
                             </div>
                         </div>
 
-                        <div class="mb-3">
-                            <label for="target_node" class="form-label">Target Node</label>
-                            <select class="form-select" id="target_node" name="target_node"
+                        <div class="field">
+                            <label for="target_node">Target Node</label>
+                            <select class="inp" id="target_node" name="target_node"
                                     x-model="targetNode" @change="loadStorages()">
                                 {% for available_node in available_nodes %}
                                 <option value="{{ available_node }}" {{ 'selected' if available_node == node else '' }}>
@@ -90,26 +80,26 @@ <h6 class="text-primary mb-3"><i class="bi bi-gear"></i> Clone Settings</h6>
                                 </option>
                                 {% endfor %}
                             </select>
-                            <div class="form-text">Node where the cloned VM will be created</div>
+                            <div class="hint">Node where the cloned VM will be created</div>
                         </div>
                     </div>
 
                     <!-- Storage Options -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-hdd"></i> Storage Configuration</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-hdd"></i> Storage Configuration</div>
 
-                        <div class="form-check">
+                        <div class="form-check mb-2">
                             <input class="form-check-input" type="radio" name="clone_type" id="clone_full"
                                    value="full" x-model="cloneType">
                             <label class="form-check-label" for="clone_full">
                                 <strong>Full Clone</strong>
                             </label>
-                            <div class="form-text">Creates a complete independent copy of the VM (recommended)</div>
+                            <div class="hint">Creates a complete independent copy of the VM (recommended)</div>
                         </div>
 
-                        <div class="mb-3 mt-2">
-                            <label for="target_storage" class="form-label">Target Storage</label>
-                            <select class="form-select" id="target_storage" name="target_storage"
+                        <div class="field">
+                            <label for="target_storage">Target Storage</label>
+                            <select class="inp" id="target_storage" name="target_storage"
                                     x-model="targetStorage">
                                 <option value="">Same as source (default)</option>
                                 <template x-for="s in storages" :key="s.storage">
@@ -118,28 +108,28 @@ <h6 class="text-primary mb-3"><i class="bi bi-hdd"></i> Storage Configuration</h
                                     </option>
                                 </template>
                             </select>
-                            <div class="form-text">Storage where cloned disks will be placed</div>
+                            <div class="hint">Storage where cloned disks will be placed</div>
                         </div>
                     </div>
 
                     <!-- Advanced Options -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-sliders"></i> Advanced Options</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-sliders"></i> Advanced Options</div>
 
-                        <div class="mb-3">
-                            <label for="clone_description" class="form-label">Description</label>
-                            <textarea class="form-control" id="clone_description" name="clone_description"
+                        <div class="field">
+                            <label for="clone_description">Description</label>
+                            <textarea class="inp" id="clone_description" name="clone_description"
                                       rows="3" placeholder="Optional description for the cloned VM"
                                       x-model="description"></textarea>
                         </div>
 
-                        <div class="mb-3">
+                        <div class="field mb-0">
                             <div class="form-check">
                                 <input class="form-check-input" type="checkbox" id="clone_agent"
                                        x-model="agentEnabled">
                                 <label class="form-check-label" for="clone_agent">Enable QEMU guest agent</label>
                             </div>
-                            <div class="form-text">
+                            <div class="hint">
                                 Applied after the clone finishes. Leave off unless <code>qemu-guest-agent</code>
                                 is installed in the guest — enabling it without the agent running makes detail
                                 pages slow to load.
@@ -147,12 +137,13 @@ <h6 class="text-primary mb-3"><i class="bi bi-sliders"></i> Advanced Options</h6
                         </div>
                     </div>
 
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                        <button type="button" class="btn btn-secondary" @click="window.history.back()">
+                    <div class="divider mb-3"></div>
+                    <div class="d-flex gap-2 justify-content-end">
+                        <button type="button" class="btn-x ghost" @click="window.history.back()">
                             <i class="bi bi-x-circle"></i> Cancel
                         </button>
-                        <button type="submit" class="btn btn-primary" :disabled="submitting">
-                            <span x-show="submitting" class="spinner-border spinner-border-sm me-1" role="status"></span>
+                        <button type="submit" class="btn-x primary" :disabled="submitting">
+                            <span x-show="submitting" class="spinner-border spinner-border-sm" role="status"></span>
                             <i class="bi bi-files" x-show="!submitting"></i> Clone VM
                         </button>
                     </div>
@@ -160,14 +151,27 @@ <h6 class="text-primary mb-3"><i class="bi bi-sliders"></i> Advanced Options</h6
             </div>
         </div>
     </div>
+
+    <div class="col-12 col-xl-4">
+        <div class="card-x">
+            <div class="cx-head"><i class="bi bi-clipboard-check" style="color:var(--accent)"></i><span class="cx-title">Summary</span></div>
+            <div class="cx-body">
+                <div class="summary-row"><span class="k">Name</span><span class="v" x-text="cloneName || '—'"></span></div>
+                <div class="summary-row"><span class="k">VM ID</span><span class="v mono" x-text="cloneVmid || '—'"></span></div>
+                <div class="summary-row"><span class="k">Target node</span><span class="v" x-text="targetNode"></span></div>
+                <div class="summary-row"><span class="k">Storage</span><span class="v" x-text="targetStorage || 'Same as source'"></span></div>
+                <div class="summary-row"><span class="k">Clone type</span><span class="v" x-text="cloneType === 'full' ? 'Full clone' : cloneType"></span></div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <!-- Loading overlay -->
 <div class="position-fixed top-0 start-0 w-100 h-100 align-items-center justify-content-center"
-     style="background-color: rgba(0,0,0,0.5); z-index: 9999;"
+     style="background: var(--scrim); z-index: 9999;"
      x-show="submitting"
      x-cloak>
-    <div class="bg-white rounded p-4 text-center">
+    <div class="card-x p-4 text-center">
         <div class="spinner-border text-primary mb-2" role="status"></div>
         <div>Cloning VM...</div>
     </div>
diff --git a/templates/vm_console.html b/templates/vm_console.html
index be74ded..b0c735e 100644
--- a/templates/vm_console.html
+++ b/templates/vm_console.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark" data-bs-theme="dark">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,6 +10,10 @@
     </script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
+    <!-- The VNC console is always a dark surface regardless of the app's light/dark
+         toggle (a fullscreen popout, not part of the app shell), so data-theme="dark"
+         above is hardcoded and this stylesheet's dark tokens are used unconditionally. -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <!-- Alpine is loaded at the end of <body>, AFTER the module below, so the
          module registers the consoleToolbar component (on `alpine:init`) before
          Alpine auto-starts and walks the DOM. Loading it here in <head> makes
@@ -21,7 +25,7 @@
             padding: 0;
             height: 100%;
             overflow: hidden;
-            background-color: #1a1a1a;
+            background-color: var(--bg);
         }
 
         #console-container {
@@ -35,15 +39,11 @@
             height: 100dvh;
         }
 
+        /* #console-toolbar also carries the .vnc-bar component class (see
+           style.css) for the themed background/border/spacing; the rules
+           below only add page-specific behavior .vnc-bar doesn't define. */
         #console-toolbar {
-            background-color: #343a40;
-            padding: 6px 10px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
             flex-shrink: 0;
-            border-bottom: 1px solid #495057;
-            gap: 8px;
         }
 
         #console-toolbar .btn {
@@ -102,17 +102,17 @@
         }
 
         #console-status .status-indicator.connected {
-            background-color: #28a745;
-            box-shadow: 0 0 8px #28a745;
+            background-color: var(--ok);
+            box-shadow: 0 0 0 3px var(--ok-soft);
         }
 
         #console-status .status-indicator.connecting {
-            background-color: #ffc107;
+            background-color: var(--warn);
             animation: pulse 1s infinite;
         }
 
         #console-status .status-indicator.disconnected {
-            background-color: #dc3545;
+            background-color: var(--danger);
         }
 
         @keyframes pulse {
@@ -126,7 +126,7 @@
             align-items: center;
             justify-content: center;
             overflow: hidden;
-            background-color: #000;
+            background-color: #0a0e17;
         }
 
         #vnc-screen canvas {
@@ -144,8 +144,8 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            background-color: rgba(0, 0, 0, 0.9);
-            color: white;
+            background-color: var(--scrim);
+            color: var(--text);
             z-index: 100;
         }
 
@@ -160,30 +160,30 @@
         }
 
         #error-message {
-            color: #dc3545;
+            color: var(--danger);
             margin-top: 1rem;
             text-align: center;
             max-width: 400px;
         }
 
         .vm-info {
-            color: #adb5bd;
+            color: var(--text-muted);
             font-size: 0.9rem;
         }
 
         .vm-name {
-            color: #fff;
+            color: var(--text);
             font-weight: 500;
         }
 
         /* Keyboard hints - hidden on mobile */
         .kbd-hint {
             font-size: 0.75rem;
-            color: #6c757d;
+            color: var(--text-faint);
         }
 
         .kbd-hint kbd {
-            background-color: #495057;
+            background-color: var(--panel-2);
             padding: 2px 6px;
             border-radius: 3px;
             font-size: 0.7rem;
@@ -321,8 +321,8 @@
 <body>
     <div id="console-container" x-data="consoleToolbar()">
         <!-- Toolbar -->
-        <div id="console-toolbar">
-            <div id="console-status">
+        <div id="console-toolbar" class="vnc-bar">
+            <div id="console-status" class="vnc-left">
                 <a href="{{ url_for('vm_detail', node=node, vmid=vmid) }}" class="btn btn-sm btn-outline-secondary" title="Back to VM">
                     <i class="bi bi-arrow-left"></i>
                 </a>
@@ -333,12 +333,12 @@
                 </span>
                 <span id="connection-text" class="text-muted small">Connecting...</span>
             </div>
-            <div class="toolbar-actions">
+            <div class="toolbar-actions vnc-tools">
                 <span class="kbd-hint">
                     <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>
                 </span>
                 <button class="btn btn-sm btn-outline-danger" @click="sendCtrlAltDel()" title="Send Ctrl+Alt+Del">
-                    <i class="bi bi-sign-stop"></i>
+                    <i class="bi bi-x-octagon"></i>
                 </button>
                 <button class="btn btn-sm btn-outline-info" id="vkbToggleBtn"
                         @click="toggleVirtualKeyboard()" title="Virtual Keyboard"
diff --git a/templates/vm_detail.html b/templates/vm_detail.html
index dbdbf55..9a38c91 100644
--- a/templates/vm_detail.html
+++ b/templates/vm_detail.html
@@ -3,6 +3,8 @@
 {% block title %}{{ config.name or ('Container' if vm_type == 'lxc' else 'VM') }} ({{ vmid }}) - Proxmox Manager{% endblock %}
 
 {% block content %}
+<div class="mb-3"><a href="{{ url_for('vms') }}" class="back-link"><i class="bi bi-arrow-left"></i> VMs &amp; Containers</a></div>
+
 <!-- vmStatus wraps the header actions + status bar so both react to the live
      status polled every 5s (data-* attrs seed the initial values). -->
 <div x-data="vmStatus"
@@ -13,347 +15,296 @@
      data-cpu="{{ status.cpu or 0 }}"
      data-mem="{{ status.mem or 0 }}"
      data-maxmem="{{ status.maxmem or 0 }}">
-<div class="row">
-    <div class="col-12">
-        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
-            <div>
-                <h1>
-                    <i class="bi bi-{{ 'pc-display' if vm_type == 'qemu' else 'box' }}"></i>
-                    {{ config.name or config.hostname or (('Container ' if vm_type == 'lxc' else 'VM ') + vmid) }}
-                </h1>
-                <p class="text-muted mb-0">{{ vm_type|upper }} {{ vmid }} on {{ node }}</p>
-            </div>
-            <div class="d-flex flex-wrap gap-2 align-items-center">
-                <!-- Power Actions — all forms present; visibility flips with the live
-                     status (:class object syntax; Jinja sets the initial class).
-                     Hidden while the VM is locked (clone/migrate/etc.). -->
-                <div class="btn-group" role="group">
-                    <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='start') }}"
-                          class="d-inline {{ '' if (status.status == 'stopped' and not status.lock) else 'd-none' }}"
-                          :class="{ 'd-none': !isStopped || busy }">
-                        <button type="submit" class="btn btn-success">
-                            <i class="bi bi-play-fill"></i> Start
-                        </button>
-                    </form>
-                    <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='shutdown') }}"
-                          class="d-inline {{ 'd-none' if (status.status == 'stopped' or status.lock) else '' }}"
-                          :class="{ 'd-none': isStopped || busy }">
-                        <button type="submit" class="btn btn-warning">
-                            <i class="bi bi-power"></i> Shutdown
-                        </button>
-                    </form>
-                    <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='stop') }}"
-                          class="d-inline {{ 'd-none' if (status.status == 'stopped' or status.lock) else '' }}"
-                          :class="{ 'd-none': isStopped || busy }">
-                        <button type="submit" class="btn btn-danger" onclick="return confirm('Force stop {{ 'container' if vm_type == 'lxc' else 'VM' }}?')">
-                            <i class="bi bi-stop-fill"></i> Stop
-                        </button>
-                    </form>
-                    <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='reset') }}"
-                          class="d-inline {{ 'd-none' if (status.status == 'stopped' or status.lock) else '' }}"
-                          :class="{ 'd-none': isStopped || busy }">
-                        <button type="submit" class="btn btn-outline-warning" onclick="return confirm('Reset {{ 'container' if vm_type == 'lxc' else 'VM' }}?')">
-                            <i class="bi bi-arrow-clockwise"></i>
-                        </button>
-                    </form>
-                </div>
-
-                <!-- Console (QEMU and LXC) -->
-                <a href="{{ url_for('vm_console', node=node, vmid=vmid) }}"
-                   class="btn btn-outline-info {{ 'disabled' if (status.status != 'running' or status.lock) else '' }}"
-                   :class="{ 'disabled': !isRunning || busy }"
-                   :aria-disabled="!isRunning || busy"
-                   :tabindex="(isRunning && !busy) ? null : '-1'"
-                   :title="isRunning ? '' : '{{ 'VM' if vm_type == 'qemu' else 'Container' }} must be running'">
-                    <i class="bi bi-display"></i> Console
-                </a>
-
-                <!-- Migration -->
-                <button type="button" class="btn btn-outline-secondary {{ 'disabled' if migration_info else '' }}"
-                        data-bs-toggle="modal" data-bs-target="#migrateModal"
-                        {% if migration_info %}disabled title="Migration in progress"{% endif %}>
-                    <i class="bi bi-arrow-left-right"></i> Migrate
-                </button>
 
-                <!-- Edit & Delete -->
-                <a href="{{ url_for('vm_edit', node=node, vmid=vmid) }}" class="btn btn-outline-primary">
-                    <i class="bi bi-gear"></i> Edit
-                </a>
-                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
-                    <i class="bi bi-trash"></i> Delete
-                </button>
-            </div>
+<div class="d-flex align-items-center flex-wrap gap-3 mb-3">
+    <div class="me-auto d-flex align-items-center gap-3">
+        <span class="job-ico" style="width:46px;height:46px;font-size:22px" :class="isRunning ? 'ok' : 'err'">
+            <i class="bi bi-{{ 'pc-display' if vm_type == 'qemu' else 'box' }}"></i>
+        </span>
+        <div>
+            <div class="sec-title" style="font-size:20px">{{ config.name or config.hostname or (('Container ' if vm_type == 'lxc' else 'VM ') + vmid) }}</div>
+            <div class="sec-sub">{{ vm_type|upper }} <span class="mono">{{ vmid }}</span> on {{ node }}</div>
         </div>
     </div>
+
+    <!-- Power Actions — all forms present; visibility flips with the live
+         status (:class object syntax; Jinja sets the initial class).
+         Hidden while the VM is locked (clone/migrate/etc.). -->
+    <div class="d-flex flex-wrap gap-2">
+        <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='start') }}"
+              class="d-inline {{ '' if (status.status == 'stopped' and not status.lock) else 'd-none' }}"
+              :class="{ 'd-none': !isStopped || busy }">
+            <button type="submit" class="btn-x primary"><i class="bi bi-play-fill"></i> Start</button>
+        </form>
+        <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='shutdown') }}"
+              class="d-inline {{ 'd-none' if (status.status == 'stopped' or status.lock) else '' }}"
+              :class="{ 'd-none': isStopped || busy }">
+            <button type="submit" class="btn-x"><i class="bi bi-power"></i> Shutdown</button>
+        </form>
+        <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='stop') }}"
+              class="d-inline {{ 'd-none' if (status.status == 'stopped' or status.lock) else '' }}"
+              :class="{ 'd-none': isStopped || busy }">
+            <button type="submit" class="btn-x" onclick="return confirm('Force stop {{ 'container' if vm_type == 'lxc' else 'VM' }}?')">
+                <i class="bi bi-stop-fill"></i> Stop
+            </button>
+        </form>
+        <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='reset') }}"
+              class="d-inline {{ 'd-none' if (status.status == 'stopped' or status.lock) else '' }}"
+              :class="{ 'd-none': isStopped || busy }">
+            <button type="submit" class="btn-x" onclick="return confirm('Reset {{ 'container' if vm_type == 'lxc' else 'VM' }}?')">
+                <i class="bi bi-arrow-clockwise"></i> Reset
+            </button>
+        </form>
+
+        <!-- Console (QEMU and LXC) -->
+        <a href="{{ url_for('vm_console', node=node, vmid=vmid) }}"
+           class="btn-x pri {{ 'disabled' if (status.status != 'running' or status.lock) else '' }}"
+           :class="{ 'disabled': !isRunning || busy }"
+           :aria-disabled="!isRunning || busy"
+           :tabindex="(isRunning && !busy) ? null : '-1'"
+           :title="isRunning ? '' : '{{ 'VM' if vm_type == 'qemu' else 'Container' }} must be running'"
+           style="text-decoration:none">
+            <i class="bi bi-terminal"></i> Console
+        </a>
+
+        <!-- Migration -->
+        <button type="button" class="btn-x {{ 'disabled' if migration_info else '' }}"
+                data-bs-toggle="modal" data-bs-target="#migrateModal"
+                {% if migration_info %}disabled title="Migration in progress"{% endif %}>
+            <i class="bi bi-arrows-move"></i> Migrate
+        </button>
+
+        <!-- Edit & Delete -->
+        <a href="{{ url_for('vm_edit', node=node, vmid=vmid) }}" class="btn-x" style="text-decoration:none">
+            <i class="bi bi-pencil"></i> Edit
+        </a>
+        <button type="button" class="btn-x danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
+            <i class="bi bi-trash"></i> Delete
+        </button>
+    </div>
 </div>
 
 {% if migration_info %}
-<div class="row">
-    <div class="col-12">
-        <div class="alert alert-info alert-dismissible fade show" role="alert">
-            <i class="bi bi-arrow-left-right"></i>
-            <strong>Migration in Progress!</strong> 
+<div class="callout info mb-3">
+    <i class="bi bi-arrow-left-right"></i>
+    <div>
+        <div class="t">Migration in Progress!</div>
+        <div class="b">
             This {{ 'VM' if vm_type == 'qemu' else 'container' }} is currently being migrated{% if migration_info.target %} to {{ migration_info.target }}{% endif %}.
             Started at {{ migration_info.start_time }}.
-            <div class="mt-2">
-                <small class="text-muted">
-                    Status: <span class="badge bg-primary">{{ migration_info.status }}</span>
-                    {% if migration_info.task_id %} | Task ID: {{ migration_info.task_id }}{% endif %}
-                </small>
+            <div class="mt-2 text-faint" style="font-size:11.5px">
+                Status: <span class="tag">{{ migration_info.status }}</span>
+                {% if migration_info.task_id %} · Task ID: {{ migration_info.task_id }}{% endif %}
             </div>
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         </div>
     </div>
 </div>
 {% endif %}
 
-<!-- Status Bar (values come from the vmStatus wrapper above) -->
-<div class="card mb-3">
-    <div class="card-body py-2">
-        <div class="d-flex flex-wrap align-items-center gap-4">
-            <div class="d-flex align-items-center gap-2">
-                <span class="text-muted small">Status:</span>
-                <span class="badge d-inline-flex align-items-center gap-1" :class="statusClass">
-                    <span class="spinner-border spinner-border-sm" style="width:.7rem;height:.7rem;"
-                          :class="busy ? '' : 'd-none'"></span>
-                    <span x-text="statusLabel"></span>
-                </span>
-            </div>
-            <div class="d-flex align-items-center gap-2">
-                <span class="text-muted small">Uptime:</span>
-                <span class="small" x-text="uptimeText"></span>
-            </div>
-            <div class="d-flex align-items-center gap-2 flex-grow-1" style="min-width: 150px; max-width: 250px;">
-                <span class="text-muted small">CPU:</span>
-                <div class="progress flex-grow-1" style="height: 12px;">
-                    <div class="progress-bar" :style="`width: ${cpuPct}%`"></div>
-                </div>
-                <span class="small" style="min-width: 45px;" x-text="cpuPct + '%'"></span>
-            </div>
-            <div class="d-flex align-items-center gap-2 flex-grow-1" style="min-width: 200px; max-width: 300px;">
-                <span class="text-muted small">Memory:</span>
-                <div class="progress flex-grow-1" style="height: 12px;">
-                    <div class="progress-bar" :style="`width: ${memPct}%`"></div>
-                </div>
-                <span class="small" style="min-width: 100px;" x-text="memText"></span>
-            </div>
-            {% if guest_disk_info %}
-                {% for disk in guest_disk_info %}
-                    {% if disk.mountpoint == '/' %}
-            <div class="d-flex align-items-center gap-2 flex-grow-1" style="min-width: 180px; max-width: 280px;">
-                <span class="text-muted small">Disk:</span>
-                <div class="progress flex-grow-1" style="height: 12px;">
-                    <div class="progress-bar bg-{{ 'danger' if disk.used_percent > 80 else 'warning' if disk.used_percent > 60 else 'info' }}" style="width: {{ disk.used_percent }}%"></div>
-                </div>
-                <span class="small" style="min-width: 90px;">{{ "%.0f"|format(disk.used_gb) }}/{{ "%.0f"|format(disk.total_gb) }}GB</span>
-            </div>
-                    {% endif %}
-                {% endfor %}
-            {% endif %}
+<!-- Hero status metrics (values come from the vmStatus wrapper above) -->
+<div class="metric-hero mb-3">
+    <div class="hero-stat">
+        <div class="k">Status</div>
+        <div class="v">
+            <span class="badge d-inline-flex align-items-center gap-1" :class="statusClass" style="font-size:12.5px">
+                <span class="spinner-border spinner-border-sm" style="width:.7rem;height:.7rem;" :class="busy ? '' : 'd-none'"></span>
+                <span x-text="statusLabel"></span>
+            </span>
         </div>
     </div>
+    <div class="hero-stat">
+        <div class="k">Uptime</div>
+        <div class="v mono" style="font-size:15px" x-text="uptimeText"></div>
+    </div>
+    <div class="hero-stat">
+        <div class="k">CPU</div>
+        <div class="v" x-text="cpuPct + '%'"></div>
+        <div class="ubar mt-2"><i :class="cpuPct > 80 ? 'crit' : cpuPct > 60 ? 'hot' : 'okc'" :style="'width:' + cpuPct + '%'"></i></div>
+    </div>
+    <div class="hero-stat">
+        <div class="k">Memory</div>
+        <div class="v" style="font-size:15px" x-text="memText"></div>
+        <div class="ubar mt-2"><i :class="memPct > 80 ? 'crit' : memPct > 60 ? 'hot' : 'okc'" :style="'width:' + memPct + '%'"></i></div>
+    </div>
+    {% if guest_disk_info %}
+        {% for disk in guest_disk_info %}
+            {% if disk.mountpoint == '/' %}
+    <div class="hero-stat">
+        <div class="k">Disk</div>
+        <div class="v" style="font-size:15px">{{ "%.0f"|format(disk.used_gb) }} / {{ "%.0f"|format(disk.total_gb) }}GB</div>
+        <div class="ubar mt-2"><i class="{{ 'crit' if disk.used_percent > 80 else 'hot' if disk.used_percent > 60 else 'okc' }}" style="width:{{ disk.used_percent }}%"></i></div>
+    </div>
+            {% endif %}
+        {% endfor %}
+    {% endif %}
 </div>
 </div><!-- /vmStatus wrapper -->
 
-<div class="row mt-3">
-    <!-- Performance Metrics Charts -->
-    <div class="col-12 mb-3">
-        <div class="card" x-data="vmMetrics('{{ node }}', '{{ vmid }}')">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Performance Metrics</h5>
-                <div class="d-flex gap-2 align-items-center">
-                    <select class="form-select form-select-sm" x-model="timeframe" style="width: auto;">
-                        <option value="hour">Last Hour</option>
-                        <option value="day">Last Day</option>
-                        <option value="week">Last Week</option>
-                        <option value="month">Last Month</option>
-                        <option value="year">Last Year</option>
-                    </select>
-                    <small class="text-muted" x-text="lastUpdate">Loading...</small>
-                    <button class="btn btn-sm btn-outline-primary" @click="refresh()" :disabled="loading" title="Refresh Metrics">
-                        <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
-                    </button>
-                </div>
+<!-- Performance Metrics Charts -->
+<div class="card-x mb-3" x-data="vmMetrics('{{ node }}', '{{ vmid }}')">
+    <div class="cx-head flex-wrap gap-2">
+        <i class="bi bi-graph-up" style="color:var(--accent)"></i><span class="cx-title">Performance Metrics</span>
+        <select class="inp" x-model="timeframe" style="width:auto" class="ms-auto">
+            <option value="hour">Last Hour</option>
+            <option value="day">Last Day</option>
+            <option value="week">Last Week</option>
+            <option value="month">Last Month</option>
+            <option value="year">Last Year</option>
+        </select>
+        <small class="text-faint" x-text="lastUpdate">Loading...</small>
+        <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="refresh()" :disabled="loading" title="Refresh Metrics">
+            <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+        </button>
+    </div>
+    <div class="cx-body">
+        <div class="row g-4">
+            <div class="col-12 col-lg-6">
+                <div class="text-faint" style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px"><i class="bi bi-cpu"></i> CPU Usage (%)</div>
+                <div class="chart-box tall"><canvas x-ref="cpu"></canvas></div>
             </div>
-            <div class="card-body">
-                <!-- Charts Row -->
-                <div class="row">
-                    <div class="col-md-6 mb-3">
-                        <h6><i class="bi bi-cpu"></i> CPU Usage (%)</h6>
-                        <div style="height: 250px;">
-                            <canvas x-ref="cpu"></canvas>
-                        </div>
-                    </div>
-                    <div class="col-md-6 mb-3">
-                        <h6><i class="bi bi-memory"></i> Memory Usage (%)</h6>
-                        <div style="height: 250px;">
-                            <canvas x-ref="memory"></canvas>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="row">
-                    <div class="col-md-6 mb-3">
-                        <h6><i class="bi bi-diagram-3"></i> Network I/O (MB)</h6>
-                        <div style="height: 250px;">
-                            <canvas x-ref="network"></canvas>
-                        </div>
-                    </div>
-                    <div class="col-md-6 mb-3">
-                        <h6><i class="bi bi-hdd"></i> Disk I/O (MB)</h6>
-                        <div style="height: 250px;">
-                            <canvas x-ref="disk"></canvas>
-                        </div>
-                    </div>
-                </div>
+            <div class="col-12 col-lg-6">
+                <div class="text-faint" style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px"><i class="bi bi-memory"></i> Memory Usage (%)</div>
+                <div class="chart-box tall"><canvas x-ref="memory"></canvas></div>
+            </div>
+            <div class="col-12 col-lg-6">
+                <div class="text-faint" style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px"><i class="bi bi-diagram-3"></i> Network I/O (MB)</div>
+                <div class="chart-box tall"><canvas x-ref="network"></canvas></div>
+            </div>
+            <div class="col-12 col-lg-6">
+                <div class="text-faint" style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px"><i class="bi bi-hdd"></i> Disk I/O (MB)</div>
+                <div class="chart-box tall"><canvas x-ref="disk"></canvas></div>
             </div>
         </div>
     </div>
 </div>
 
-
-<div class="row">
-    
-    <div class="col-md-6 mb-3">
-        {% if guest_disk_info %}
-        <!-- Guest Disk Usage Card -->
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-hdd"></i> {{ 'Disk Usage' if vm_type == 'lxc' else 'Guest Disk Usage' }}</h5>
-            </div>
-            <div class="card-body">
-                <div style="max-height: 300px; overflow-y: auto;">
+<div class="row g-3">
+    <div class="col-12 col-xl-4">
+        <div class="d-flex flex-column gap-3 h-100">
+            {% if guest_disk_info %}
+            <!-- Guest Disk Usage Card -->
+            <div class="card-x">
+                <div class="cx-head"><i class="bi bi-hdd" style="color:var(--accent)"></i><span class="cx-title">{{ 'Disk Usage' if vm_type == 'lxc' else 'Guest Disk Usage' }}</span></div>
+                <div class="cx-body" style="max-height:300px;overflow-y:auto">
                     {% for disk in guest_disk_info %}
-                    <div class="mb-3{% if not loop.last %} border-bottom pb-2{% endif %}">
-                        <div class="d-flex justify-content-between align-items-center mb-1">
-                            <strong>{{ disk.mountpoint }}</strong>
-                            <small class="text-muted">{{ disk.type }}</small>
-                        </div>
-                        <div class="progress mb-1" style="height: 18px;">
-                            <div class="progress-bar bg-{{ 'danger' if disk.used_percent > 80 else 'warning' if disk.used_percent > 60 else 'info' }}" 
-                                 style="width: {{ disk.used_percent }}%">
-                                {{ "%.1f"|format(disk.used_percent) }}%
-                            </div>
+                    <div class="{{ 'mb-3' if not loop.last else '' }}">
+                        <div class="d-flex justify-content-between" style="font-size:12.5px">
+                            <span class="mono">{{ disk.mountpoint }} <span class="text-faint">{{ disk.type }}</span></span>
+                            <span class="mono">{{ "%.1f"|format(disk.used_percent) }}%</span>
                         </div>
-                        <small class="text-muted">
+                        <div class="ubar my-2"><i class="{{ 'crit' if disk.used_percent > 80 else 'hot' if disk.used_percent > 60 else 'okc' }}" style="width:{{ disk.used_percent }}%"></i></div>
+                        <div class="text-faint mono" style="font-size:11px">
                             {{ "%.1f"|format(disk.used_gb) }} / {{ "%.1f"|format(disk.total_gb) }} GB used
                             ({{ "%.1f"|format(disk.free_gb) }} GB free)
-                        </small>
+                        </div>
+                        {% if not loop.last %}<div class="divider my-3"></div>{% endif %}
                     </div>
                     {% endfor %}
+                    {% if not guest_disk_info %}
+                    <div class="empty-hint">
+                        <i class="bi bi-exclamation-triangle"></i>
+                        <p class="mb-0">Guest agent not available or no disk info</p>
+                    </div>
+                    {% endif %}
                 </div>
-                {% if not guest_disk_info %}
-                <div class="text-center text-muted">
-                    <i class="bi bi-exclamation-triangle"></i>
-                    <p class="mb-0">Guest agent not available or no disk info</p>
-                </div>
-                {% endif %}
             </div>
-        </div>
-        {% endif %}
-
-        <!-- Recent Tasks -->
-        <div class="card" x-data="vmTasks('{{ node }}', '{{ vmid }}')">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-list-task"></i> Recent Tasks</h5>
-                <button class="btn btn-sm btn-outline-primary" @click="refresh()" :disabled="loading" title="Refresh Tasks">
-                    <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
-                </button>
-            </div>
-            <div class="card-body p-0" style="max-height:350px;overflow-y:auto;">
-                <template x-if="loading && tasks.length === 0">
-                    <div class="text-center p-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading tasks...</div>
-                </template>
-                <template x-if="error">
-                    <div class="text-danger p-4"><i class="bi bi-exclamation-triangle"></i> Error loading tasks</div>
-                </template>
-                <template x-if="!loading && !error && tasks.length === 0">
-                    <div class="text-muted p-4"><i class="bi bi-info-circle"></i> No recent tasks</div>
-                </template>
-                <div class="list-group list-group-flush" x-show="tasks.length > 0">
-                    <template x-for="task in tasks" :key="task.upid || (task.node + task.type + task.starttime)">
-                        <div class="list-group-item list-group-item-action">
-                            <div class="d-flex w-100 justify-content-between align-items-start">
-                                <div>
-                                    <h6 class="mb-1" x-text="displayName(task)"></h6>
-                                    <p class="mb-1 text-muted small">Started: <span x-text="task.start_time_formatted || 'Unknown'"></span></p>
-                                    <template x-if="task.end_time_formatted">
-                                        <p class="mb-1 text-muted small">Ended: <span x-text="task.end_time_formatted"></span></p>
-                                    </template>
-                                </div>
-                                <span class="badge" :class="'bg-' + statusClass(task)" x-text="task.status || 'unknown'"></span>
-                            </div>
-                        </div>
+            {% endif %}
+
+            <!-- Recent Tasks -->
+            <div class="card-x" style="flex:1" x-data="vmTasks('{{ node }}', '{{ vmid }}')">
+                <div class="cx-head">
+                    <i class="bi bi-clock-history" style="color:var(--accent)"></i><span class="cx-title">Recent Tasks</span>
+                    <button class="icon-btn ms-auto" style="width:28px;height:28px;font-size:13px" @click="refresh()" :disabled="loading" title="Refresh Tasks">
+                        <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
+                    </button>
+                </div>
+                <div class="cx-body tight" style="max-height:350px;overflow-y:auto;">
+                    <template x-if="loading && tasks.length === 0">
+                        <div class="text-center p-4"><div class="spinner-border spinner-border-sm" role="status"></div> Loading tasks...</div>
+                    </template>
+                    <template x-if="error">
+                        <div class="text-danger p-4"><i class="bi bi-exclamation-triangle"></i> Error loading tasks</div>
+                    </template>
+                    <template x-if="!loading && !error && tasks.length === 0">
+                        <div class="empty-hint"><i class="bi bi-info-circle"></i> No recent tasks</div>
                     </template>
+                    <table class="tbl" x-show="tasks.length > 0">
+                        <tbody>
+                            <template x-for="task in tasks" :key="task.upid || (task.node + task.type + task.starttime)">
+                                <tr>
+                                    <td style="width:26px">
+                                        <span class="job-ico" :class="{success:'ok',danger:'err',primary:'run',warning:'run',secondary:'ok'}[statusClass(task)] || 'ok'" style="width:26px;height:26px;font-size:13px">
+                                            <i class="bi bi-circle-fill" style="font-size:8px"></i>
+                                        </span>
+                                    </td>
+                                    <td>
+                                        <div class="nm" style="font-size:12.5px" x-text="displayName(task)"></div>
+                                        <div class="text-faint" style="font-size:11px">
+                                            Started: <span x-text="fmtDateTime(task.starttime)"></span>
+                                            <template x-if="task.endtime">
+                                                <span> · Ended: <span x-text="fmtDateTime(task.endtime)"></span></span>
+                                            </template>
+                                        </div>
+                                    </td>
+                                    <td class="text-faint mono" style="font-size:11px;text-align:right" x-text="task.status || 'unknown'"></td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
 
     <!-- Configuration Details -->
-    <div class="col-md-6 mb-3">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-sliders"></i> Configuration</h5>
-            </div>
-            <div class="card-body" style="max-height: 500px; overflow-y: auto;">
-                
+    <div class="col-12 col-xl-8">
+        <div class="card-x h-100">
+            <div class="cx-head"><i class="bi bi-sliders" style="color:var(--accent)"></i><span class="cx-title">Configuration</span></div>
+            <div class="cx-body" style="max-height: 620px; overflow-y: auto;">
+                <div class="cfg-grid">
+
                 <!-- CPU Configuration -->
                 {% if parsed_config.cpu %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-cpu"></i> Processor</h6>
-                    <div class="row">
-                        {% for key, value in parsed_config.cpu.items() %}
-                        <div class="col-sm-4 mb-2">
-                            <small class="text-muted">{{ key|title }}:</small>
-                            <div><strong>{{ value }}</strong></div>
-                        </div>
-                        {% endfor %}
-                    </div>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-cpu"></i> Processor</h6>
+                    {% for key, value in parsed_config.cpu.items() %}
+                    <div class="kv"><span class="k">{{ key|title }}</span><span class="v">{{ value }}</span></div>
+                    {% endfor %}
                 </div>
                 {% endif %}
 
                 <!-- Memory Configuration -->
                 {% if parsed_config.memory %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-memory"></i> Memory</h6>
-                    <div class="row">
-                        {% for key, value in parsed_config.memory.items() %}
-                        <div class="col-sm-6 mb-2">
-                            <small class="text-muted">{{ key|title }}:</small>
-                            <div><strong>
-                                {% if key == 'memory' %}
-                                    {{ (value|int / 1024)|round(1) if value|string|length > 3 else value }} 
-                                    {{ 'GB' if value|string|length > 3 else 'MB' }}
-                                {% else %}
-                                    {{ value }}
-                                {% endif %}
-                            </strong></div>
-                        </div>
-                        {% endfor %}
+                <div class="cfg-box">
+                    <h6><i class="bi bi-memory"></i> Memory</h6>
+                    {% for key, value in parsed_config.memory.items() %}
+                    <div class="kv">
+                        <span class="k">{{ key|title }}</span>
+                        <span class="v">
+                            {% if key == 'memory' %}
+                                {{ (value|int / 1024)|round(1) if value|string|length > 3 else value }}
+                                {{ 'GB' if value|string|length > 3 else 'MB' }}
+                            {% else %}
+                                {{ value }}
+                            {% endif %}
+                        </span>
                     </div>
+                    {% endfor %}
                 </div>
                 {% endif %}
 
                 <!-- Network Configuration -->
                 {% if parsed_config.network %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-ethernet"></i> Network</h6>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-ethernet"></i> Network</h6>
                     {% for net in parsed_config.network %}
-                    <div class="border rounded p-2 mb-2">
-                        <div class="d-flex justify-content-between align-items-center mb-1">
-                            <strong>{{ net.interface }}</strong>
-                        </div>
-                        <div class="row">
-                            {% for key, value in net.items() %}
-                            {% if key not in ['interface', 'config'] %}
-                            <div class="col-sm-6 mb-1">
-                                <small class="text-muted">{{ key|title }}:</small>
-                                <small><strong>{{ value }}</strong></small>
-                            </div>
-                            {% endif %}
-                            {% endfor %}
-                        </div>
+                    <div class="{{ 'mb-2' if not loop.last else '' }}">
+                        <div class="kv" style="border-bottom:0;padding-bottom:2px"><span class="k" style="font-weight:700;color:var(--text)">{{ net.interface }}</span><span></span></div>
+                        {% for key, value in net.items() %}
+                        {% if key not in ['interface', 'config'] %}
+                        <div class="kv"><span class="k">{{ key|title }}</span><span class="v mono" style="font-size:11.5px">{{ value }}</span></div>
+                        {% endif %}
+                        {% endfor %}
                     </div>
                     {% endfor %}
                 </div>
@@ -361,17 +312,12 @@ <h6 class="text-primary mb-2"><i class="bi bi-ethernet"></i> Network</h6>
 
                 <!-- Hard Disks -->
                 {% if parsed_config.disks %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-hdd"></i> Hard Disks</h6>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-hdd"></i> Hard Disks</h6>
                     {% for disk in parsed_config.disks %}
-                    <div class="border rounded p-2 mb-2">
-                        <div class="d-flex justify-content-between align-items-center mb-1">
-                            <strong>{{ disk.device }}</strong>
-                            {% if disk.size %}
-                            <span class="badge bg-secondary">{{ disk.size }}</span>
-                            {% endif %}
-                        </div>
-                        <small class="text-muted">{{ disk.details or disk.config }}</small>
+                    <div class="kv">
+                        <span class="k">{{ disk.device }}</span>
+                        <span class="v mono" style="font-size:10.5px">{{ disk.size or '' }} {{ disk.details or disk.config }}</span>
                     </div>
                     {% endfor %}
                 </div>
@@ -379,18 +325,12 @@ <h6 class="text-primary mb-2"><i class="bi bi-hdd"></i> Hard Disks</h6>
 
                 <!-- CD/DVD Drives -->
                 {% if parsed_config.cdrom %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-disc"></i> CD/DVD</h6>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-disc"></i> CD/DVD</h6>
                     {% for cdrom in parsed_config.cdrom %}
-                    <div class="border rounded p-2 mb-2">
-                        <div class="d-flex justify-content-between align-items-center mb-1">
-                            <strong>{{ cdrom.device }}</strong>
-                            <span class="badge bg-info">ISO</span>
-                        </div>
-                        {% if cdrom.iso_name %}
-                        <div><small class="text-info">{{ cdrom.iso_name }}</small></div>
-                        {% endif %}
-                        <small class="text-muted">{{ cdrom.details or cdrom.config }}</small>
+                    <div class="kv">
+                        <span class="k">{{ cdrom.device }} <span class="type-chip">ISO</span></span>
+                        <span class="v mono" style="font-size:10.5px">{{ cdrom.iso_name or cdrom.details or cdrom.config }}</span>
                     </div>
                     {% endfor %}
                 </div>
@@ -398,118 +338,98 @@ <h6 class="text-primary mb-2"><i class="bi bi-disc"></i> CD/DVD</h6>
 
                 <!-- Cloud-init Drive -->
                 {% if parsed_config.cloudinit_drive %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-cloud-arrow-up"></i> Cloud-init Drive</h6>
-                    <div class="border rounded p-2 mb-2 border-info">
-                        <div class="d-flex justify-content-between align-items-center mb-1">
-                            <strong>{{ parsed_config.cloudinit_drive.device }}</strong>
-                            <span class="badge bg-info">Cloud-init</span>
-                        </div>
-                        <small class="text-muted">{{ parsed_config.cloudinit_drive.details or parsed_config.cloudinit_drive.config }}</small>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-cloud-arrow-up"></i> Cloud-init Drive</h6>
+                    <div class="kv">
+                        <span class="k">{{ parsed_config.cloudinit_drive.device }} <span class="type-chip">Cloud-init</span></span>
+                        <span class="v mono" style="font-size:10.5px">{{ parsed_config.cloudinit_drive.details or parsed_config.cloudinit_drive.config }}</span>
                     </div>
                 </div>
                 {% endif %}
 
                 <!-- Connected Devices -->
                 {% if parsed_config.devices %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-device-hdd"></i> Connected Devices</h6>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-device-hdd"></i> Connected Devices</h6>
                     {% for device in parsed_config.devices %}
-                    <div class="border rounded p-2 mb-2">
-                        <div class="d-flex justify-content-between align-items-center">
-                            <strong>{{ device.device }}</strong>
-                            <small class="text-muted">{{ device.config }}</small>
-                        </div>
-                    </div>
+                    <div class="kv"><span class="k">{{ device.device }}</span><span class="v mono" style="font-size:10.5px">{{ device.config }}</span></div>
                     {% endfor %}
                 </div>
                 {% endif %}
 
                 <!-- Cloud-init Configuration -->
                 {% if parsed_config.cloud_init %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-cloud"></i> Cloud-init</h6>
-                    <div class="row">
-                        {% for key, value in parsed_config.cloud_init.items() %}
-                        <div class="col-sm-6 mb-2">
-                            <small class="text-muted">
-                                {% if key == 'ciuser' %}Default User
-                                {% elif key == 'sshkeys' %}SSH Keys
-                                {% elif key.startswith('ipconfig') %}IP Config {{ key[-1] }}
-                                {% elif key == 'nameserver' %}DNS Server
-                                {% elif key == 'searchdomain' %}Search Domain
-                                {% else %}{{ key|title }}
-                                {% endif %}:
-                            </small>
-                            <div><strong>
-                                {% if key == 'sshkeys' and value.parsed %}
-                                    <div x-data="{ open: false }">
-                                    <div class="d-flex justify-content-between align-items-center">
-                                        <span>{{ value.parsed|length }} SSH key(s)</span>
-                                        <button class="btn btn-sm btn-outline-secondary" type="button"
-                                                data-bs-toggle="collapse"
-                                                data-bs-target="#sshKeysCollapse"
-                                                @click="open=!open">
-                                            <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
-                                            <span x-text="open ? 'Hide' : 'View'">View</span>
-                                        </button>
-                                    </div>
-                                    <div class="collapse mt-2" id="sshKeysCollapse">
-                                        {% for ssh_key in value.parsed %}
-                                        <div class="border-start border-2 border-info ps-2 mb-2">
-                                            <div class="d-flex justify-content-between align-items-center">
-                                                <span class="badge bg-secondary me-2">{{ ssh_key.type }}</span>
-                                                <small class="text-muted">{{ ssh_key.comment }}</small>
-                                            </div>
-                                            <small class="font-monospace text-muted">{{ ssh_key.preview }}</small>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-cloud"></i> Cloud-init</h6>
+                    {% for key, value in parsed_config.cloud_init.items() %}
+                    <div class="kv">
+                        <span class="k">
+                            {% if key == 'ciuser' %}Default User
+                            {% elif key == 'sshkeys' %}SSH Keys
+                            {% elif key.startswith('ipconfig') %}IP Config {{ key[-1] }}
+                            {% elif key == 'nameserver' %}DNS Server
+                            {% elif key == 'searchdomain' %}Search Domain
+                            {% else %}{{ key|title }}
+                            {% endif %}
+                        </span>
+                        <span class="v">
+                            {% if key == 'sshkeys' and value.parsed %}
+                                <div x-data="{ open: false }">
+                                <div class="d-flex justify-content-between align-items-center gap-2">
+                                    <span>{{ value.parsed|length }} SSH key(s)</span>
+                                    <button class="act-btn" type="button"
+                                            data-bs-toggle="collapse"
+                                            data-bs-target="#sshKeysCollapse"
+                                            @click="open=!open">
+                                        <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+                                    </button>
+                                </div>
+                                <div class="collapse mt-2" id="sshKeysCollapse" style="text-align:left">
+                                    {% for ssh_key in value.parsed %}
+                                    <div class="mb-2" style="border-left:2px solid var(--accent-border);padding-left:8px">
+                                        <div class="d-flex justify-content-between align-items-center gap-2">
+                                            <span class="type-chip">{{ ssh_key.type }}</span>
+                                            <small class="text-faint">{{ ssh_key.comment }}</small>
                                         </div>
-                                        {% endfor %}
-                                    </div>
+                                        <small class="mono text-faint">{{ ssh_key.preview }}</small>
                                     </div>
-                                {% elif key == 'sshkeys' %}
-                                    <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ value }}">
-                                        SSH keys configured
-                                    </span>
-                                {% else %}
-                                    {{ value }}
-                                {% endif %}
-                            </strong></div>
-                        </div>
-                        {% endfor %}
+                                    {% endfor %}
+                                </div>
+                                </div>
+                            {% elif key == 'sshkeys' %}
+                                <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ value }}">
+                                    SSH keys configured
+                                </span>
+                            {% else %}
+                                {{ value }}
+                            {% endif %}
+                        </span>
                     </div>
+                    {% endfor %}
                 </div>
                 {% endif %}
 
                 <!-- General Settings -->
                 {% if parsed_config.general %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-gear"></i> General</h6>
-                    <div class="row">
-                        {% for key, value in parsed_config.general.items() %}
-                        <div class="col-sm-6 mb-2">
-                            <small class="text-muted">{{ key|title }}:</small>
-                            <div><strong>{{ value }}</strong></div>
-                        </div>
-                        {% endfor %}
-                    </div>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-gear"></i> General</h6>
+                    {% for key, value in parsed_config.general.items() %}
+                    <div class="kv"><span class="k">{{ key|title }}</span><span class="v">{{ value }}</span></div>
+                    {% endfor %}
                 </div>
                 {% endif %}
 
                 <!-- Other Settings -->
                 {% if parsed_config.other %}
-                <div class="mb-4">
-                    <h6 class="text-primary mb-2"><i class="bi bi-three-dots"></i> Other Settings</h6>
-                    <div class="row">
-                        {% for key, value in parsed_config.other.items() %}
-                        <div class="col-sm-6 mb-2">
-                            <small class="text-muted">{{ key }}:</small>
-                            <div><strong>{{ value }}</strong></div>
-                        </div>
-                        {% endfor %}
-                    </div>
+                <div class="cfg-box">
+                    <h6><i class="bi bi-three-dots"></i> Other Settings</h6>
+                    {% for key, value in parsed_config.other.items() %}
+                    <div class="kv"><span class="k">{{ key }}</span><span class="v">{{ value }}</span></div>
+                    {% endfor %}
                 </div>
                 {% endif %}
 
+                </div>
             </div>
         </div>
     </div>
@@ -528,15 +448,15 @@ <h5 class="modal-title">
             <form method="POST" action="{{ url_for('vm_action', node=node, vmid=vmid, action='migrate') }}" id="migrateForm">
                 <div class="modal-body">
                     {% if vm_type == 'lxc' %}
-                    <div class="alert alert-info">
+                    <div class="callout info mb-3">
                         <i class="bi bi-info-circle"></i>
-                        <strong>Note:</strong> LXC containers don't support live migration. The container will be restarted during the migration process.
+                        <div><div class="t">Note</div><div class="b">LXC containers don't support live migration. The container will be restarted during the migration process.</div></div>
                     </div>
                     {% endif %}
 
-                    <div class="mb-3">
-                        <label class="form-label">Target Node</label>
-                        <select class="form-select" name="target_node" x-model="targetNode" @change="loadStorages()" required>
+                    <div class="field">
+                        <label>Target Node</label>
+                        <select class="inp" name="target_node" x-model="targetNode" @change="loadStorages()" required>
                             <option value="">Select target node...</option>
                             {% for target in available_nodes %}
                             <option value="{{ target }}">{{ target }}</option>
@@ -544,20 +464,20 @@ <h5 class="modal-title">
                         </select>
                     </div>
 
-                    <div class="mb-3">
-                        <label class="form-label">Target Storage (Optional)</label>
-                        <select class="form-select" name="target_storage" x-model="targetStorage">
+                    <div class="field mb-0">
+                        <label>Target Storage (Optional)</label>
+                        <select class="inp" name="target_storage" x-model="targetStorage">
                             <option value="">Keep current storage locations</option>
                             <template x-for="s in storages" :key="s.storage">
                                 <option :value="s.storage" x-text="s.storage + ' (' + s.type + ')' + (s.available_gb !== undefined ? ' - ' + s.available_gb + ' GB free' : '')"></option>
                             </template>
                         </select>
-                        <div class="form-text">Leave empty to keep disks on current storage</div>
+                        <div class="hint">Leave empty to keep disks on current storage</div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-primary" onclick="return confirm('Migrate {{ 'VM' if vm_type == 'qemu' else 'container' }} to selected node?')">
+                    <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn-x primary">
                         <i class="bi bi-arrow-right-circle"></i> Migrate
                     </button>
                 </div>
@@ -573,40 +493,39 @@ <h5 class="modal-title">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title text-danger">
+                <h5 class="modal-title" style="color:var(--danger)">
                     <i class="bi bi-exclamation-triangle"></i> Delete {{ 'Container' if vm_type == 'lxc' else 'VM' }} {{ vmid }}
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-                <div class="alert alert-danger">
-                    <i class="bi bi-exclamation-triangle"></i>
-                    <strong>Warning:</strong> This action cannot be undone!
+                <div class="confirm-box mb-3">
+                    <div class="d-flex gap-3">
+                        <i class="bi bi-exclamation-triangle-fill" style="color:var(--danger);font-size:22px"></i>
+                        <div style="flex:1">
+                            <div style="font-weight:700;margin-bottom:4px">This action cannot be undone!</div>
+                            <div class="sec-sub" style="color:var(--text-muted)">
+                                Are you sure you want to delete {{ 'container' if vm_type == 'lxc' else 'VM' }} <strong>{{ config.name or vmid }}</strong>?
+                                This will permanently remove {{ 'container' if vm_type == 'lxc' else 'VM' }} configuration, all disks and data, and all snapshots (if any).
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
-                <p>Are you sure you want to delete {{ 'container' if vm_type == 'lxc' else 'VM' }} <strong>{{ config.name or vmid }}</strong>?</p>
-
-                <p class="text-muted">This will permanently remove:</p>
-                <ul class="text-muted">
-                    <li>{{ 'Container' if vm_type == 'lxc' else 'VM' }} configuration</li>
-                    <li>All {{ 'container' if vm_type == 'lxc' else 'VM' }} disks and data</li>
-                    <li>All snapshots (if any)</li>
-                </ul>
-
                 <div class="mt-3" x-show="statusMsg">
-                    <div :class="'alert alert-' + statusType">
+                    <div class="callout" :class="statusType === 'success' ? 'ok' : statusType === 'info' ? 'info' : 'danger'">
                         <i :class="'bi bi-' + (statusType === 'success' ? 'check-circle' : statusType === 'info' ? 'info-circle' : 'exclamation-triangle')"></i>
                         <span x-text="statusMsg"></span>
                     </div>
                 </div>
 
-                <div class="alert alert-warning" :class="canDelete ? 'd-none' : ''">
+                <div class="callout warn" :class="canDelete ? 'd-none' : ''">
                     <i class="bi bi-exclamation-triangle"></i> <span x-text="warnMsg"></span>
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn btn-danger" @click="run()"
+                <button type="button" class="btn-x" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn-x" style="background:var(--danger);border-color:var(--danger);color:#fff" @click="run()"
                         :disabled="deleting || !canDelete">
                     <span x-show="deleting" class="spinner-border spinner-border-sm me-1" role="status"></span>
                     <span x-show="!deleting"><i class="bi bi-trash"></i></span>
@@ -618,60 +537,56 @@ <h5 class="modal-title text-danger">
 </div>
 {% if vm_type == 'lxc' %}
 <!-- LXC Advanced Summary (read-only) -->
-<div class="row mt-3">
-    <div class="col-12">
-        <div class="card" x-data="lxcSummary()">
-            <div class="card-header d-flex justify-content-between align-items-center py-2">
-                <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
-                <a href="{{ url_for('vm_edit', node=node, vmid=vmid) }}" class="btn btn-sm btn-outline-primary">
-                    <i class="bi bi-pencil-square"></i> Configure
-                </a>
-            </div>
-            <div class="card-body py-2">
-                <template x-if="loading">
-                    <div class="text-muted small"><div class="spinner-border spinner-border-sm me-1" role="status"></div> Loading…</div>
-                </template>
-                <template x-if="!loading && !hasAny">
-                    <div class="text-muted small">No advanced configuration. <a href="{{ url_for('vm_edit', node=node, vmid=vmid) }}">Configure</a></div>
-                </template>
-                <template x-if="!loading && hasAny">
-                    <div class="vstack gap-1">
-                        <template x-if="enabledFlags.length > 0">
-                            <div>
-                                <span class="text-muted small me-2">Flags</span>
-                                <template x-for="f in enabledFlags" :key="f">
-                                    <span class="badge bg-success me-1" x-text="f"></span>
-                                </template>
-                            </div>
+<div class="card-x mt-3" x-data="lxcSummary()">
+    <div class="cx-head">
+        <i class="bi bi-sliders" style="color:var(--accent)"></i><span class="cx-title">Advanced / Passthrough</span>
+        <a href="{{ url_for('vm_edit', node=node, vmid=vmid) }}" class="btn-x sm ms-auto" style="text-decoration:none">
+            <i class="bi bi-pencil-square"></i> Configure
+        </a>
+    </div>
+    <div class="cx-body">
+        <template x-if="loading">
+            <div class="text-muted small"><div class="spinner-border spinner-border-sm me-1" role="status"></div> Loading…</div>
+        </template>
+        <template x-if="!loading && !hasAny">
+            <div class="empty-hint">No advanced configuration. <a href="{{ url_for('vm_edit', node=node, vmid=vmid) }}">Configure</a></div>
+        </template>
+        <template x-if="!loading && hasAny">
+            <div class="vstack gap-2">
+                <template x-if="enabledFlags.length > 0">
+                    <div>
+                        <span class="text-faint" style="font-size:11px" class="me-2">Flags</span>
+                        <template x-for="f in enabledFlags" :key="f">
+                            <span class="tag me-1" x-text="f"></span>
                         </template>
-                        <template x-if="devices.length > 0">
-                            <div>
-                                <span class="text-muted small me-2">Devices</span>
-                                <template x-for="d in devices" :key="d.key">
-                                    <span class="badge bg-secondary me-1" x-text="d.path.split('/').pop()"></span>
-                                </template>
-                            </div>
+                    </div>
+                </template>
+                <template x-if="devices.length > 0">
+                    <div>
+                        <span class="text-faint" style="font-size:11px" class="me-2">Devices</span>
+                        <template x-for="d in devices" :key="d.key">
+                            <span class="tag me-1" x-text="d.path.split('/').pop()"></span>
                         </template>
-                        <template x-if="mounts.length > 0">
-                            <div>
-                                <span class="text-muted small me-2">Mounts</span>
-                                <template x-for="m in mounts" :key="m.key">
-                                    <span class="badge bg-info text-dark me-1" x-text="m.mp"></span>
-                                </template>
-                            </div>
+                    </div>
+                </template>
+                <template x-if="mounts.length > 0">
+                    <div>
+                        <span class="text-faint" style="font-size:11px" class="me-2">Mounts</span>
+                        <template x-for="m in mounts" :key="m.key">
+                            <span class="tag me-1" x-text="m.mp"></span>
                         </template>
-                        <template x-if="idmaps.length > 0">
-                            <div>
-                                <span class="text-muted small me-2">idmap</span>
-                                <template x-for="i in idmaps" :key="i.key">
-                                    <span class="badge bg-warning text-dark me-1" x-text="i.type + ' ' + i.ct_id + '→' + i.host_id"></span>
-                                </template>
-                            </div>
+                    </div>
+                </template>
+                <template x-if="idmaps.length > 0">
+                    <div>
+                        <span class="text-faint" style="font-size:11px" class="me-2">idmap</span>
+                        <template x-for="i in idmaps" :key="i.key">
+                            <span class="tag me-1" x-text="i.type + ' ' + i.ct_id + '→' + i.host_id"></span>
                         </template>
                     </div>
                 </template>
             </div>
-        </div>
+        </template>
     </div>
 </div>
 {% endif %}
@@ -689,6 +604,7 @@ <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
     tasks: [], loading: true, error: '', _poller: null,
     displayName(t) { return ProxUtils.taskTypeName(t.type); },
     statusClass(t) { return ALLOWED_STATUS.has(t.status_class) ? t.status_class : 'secondary'; },
+    fmtDateTime: ProxUtils.formatDateTime,
     async load() {
       this.loading = true; this.error = '';
       try { this.tasks = await ProxUtils.apiJson(`/api/vm/${node}/${vmid}/tasks`); }
@@ -705,10 +621,53 @@ <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
 }
 
 function vmMetrics(node, vmid) {
-  const base = {
-    responsive: true, maintainAspectRatio: false,
-    plugins: { legend: { display: true, position: 'bottom' } },
-    scales: { x: { display: true, title: { display: true, text: 'Time' } }, y: { display: true, beginAtZero: true } }
+  // Theme-aware Chart.js styling matching the ProxUI design system: thin
+  // smoothed lines, gradient fill, hidden x-axis grid, faint ticks/gridlines
+  // pulled from the CSS custom properties so both themes stay in sync.
+  const cssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  const withAlpha = (hex, alpha) => {
+    const h = hex.replace('#', '');
+    const bigint = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
+    const r = (bigint >> 16) & 255, g = (bigint >> 8) & 255, b = bigint & 255;
+    return `rgba(${r},${g},${b},${alpha})`;
+  };
+  const gradientFill = (ctx, color) => {
+    const g = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height || 150);
+    g.addColorStop(0, withAlpha(color, 0.35));
+    g.addColorStop(1, withAlpha(color, 0));
+    return g;
+  };
+  const dataset = (ctx, label, color, fill) => ({
+    label, data: [], borderColor: color,
+    backgroundColor: fill ? gradientFill(ctx, color) : 'transparent',
+    fill: !!fill, borderWidth: 2, tension: 0.4,
+    pointRadius: 0, pointHoverRadius: 4, pointHoverBackgroundColor: color,
+    pointHoverBorderColor: '#fff', pointHoverBorderWidth: 2,
+  });
+  const themedOptions = ({ pct = false, max } = {}) => {
+    const grid = cssVar('--grid-line'), faint = cssVar('--text-faint');
+    return {
+      responsive: true, maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: {
+          display: true, position: 'top', align: 'end',
+          labels: { color: faint, boxWidth: 8, boxHeight: 8, usePointStyle: true, font: { size: 11 }, padding: 12 },
+        },
+        tooltip: {
+          backgroundColor: cssVar('--panel'), titleColor: cssVar('--text'), bodyColor: cssVar('--text-muted'),
+          borderColor: cssVar('--border'), borderWidth: 1, padding: 10, cornerRadius: 8, usePointStyle: true,
+        },
+      },
+      scales: {
+        x: { grid: { display: false }, ticks: { color: faint, font: { size: 10 }, maxRotation: 0, autoSkip: true, maxTicksLimit: 6 } },
+        y: {
+          grid: { color: grid, drawBorder: false },
+          ticks: { color: faint, font: { size: 10 }, maxTicksLimit: 5, callback: v => pct ? v + '%' : v },
+          beginAtZero: true, suggestedMax: max,
+        },
+      },
+    };
   };
   // Closure variable — Chart instances never stored in Alpine's reactive state
   // (Alpine's Proxy corrupts Chart.js internals: this.options.events → undefined).
@@ -716,32 +675,37 @@ <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
   return {
     timeframe: 'day', lastUpdate: 'Loading...', loading: false, _poller: null,
     init() {
+      const cpuCtx = this.$refs.cpu.getContext('2d');
+      const memCtx = this.$refs.memory.getContext('2d');
+      const netCtx = this.$refs.network.getContext('2d');
+      const diskCtx = this.$refs.disk.getContext('2d');
+      const accent = cssVar('--accent'), violet = cssVar('--violet'), ok = cssVar('--ok'), warn = cssVar('--warn');
       charts = {
-        cpu: new Chart(this.$refs.cpu.getContext('2d'), {
+        cpu: new Chart(cpuCtx, {
           type: 'line',
-          data: { labels: [], datasets: [{ label: 'CPU Usage (%)', data: [], borderColor: 'rgb(54,162,235)', backgroundColor: 'rgba(54,162,235,0.1)', fill: true, tension: 0.1 }] },
-          options: { ...base, scales: { ...base.scales, y: { ...base.scales.y, max: 100, title: { display: true, text: 'CPU Usage (%)' } } } }
+          data: { labels: [], datasets: [dataset(cpuCtx, 'CPU Usage (%)', accent, true)] },
+          options: themedOptions({ pct: true, max: 100 }),
         }),
-        memory: new Chart(this.$refs.memory.getContext('2d'), {
+        memory: new Chart(memCtx, {
           type: 'line',
-          data: { labels: [], datasets: [{ label: 'Memory Usage (%)', data: [], borderColor: 'rgb(255,99,132)', backgroundColor: 'rgba(255,99,132,0.1)', fill: true, tension: 0.1 }] },
-          options: { ...base, scales: { ...base.scales, y: { ...base.scales.y, max: 100, title: { display: true, text: 'Memory Usage (%)' } } } }
+          data: { labels: [], datasets: [dataset(memCtx, 'Memory Usage (%)', violet, true)] },
+          options: themedOptions({ pct: true, max: 100 }),
         }),
-        network: new Chart(this.$refs.network.getContext('2d'), {
+        network: new Chart(netCtx, {
           type: 'line',
           data: { labels: [], datasets: [
-            { label: 'Network In (MB)', data: [], borderColor: 'rgb(75,192,192)', backgroundColor: 'rgba(75,192,192,0.1)', fill: false, tension: 0.1 },
-            { label: 'Network Out (MB)', data: [], borderColor: 'rgb(255,205,86)', backgroundColor: 'rgba(255,205,86,0.1)', fill: false, tension: 0.1 }
+            dataset(netCtx, 'Network In (MB)', ok, false),
+            dataset(netCtx, 'Network Out (MB)', accent, false),
           ] },
-          options: { ...base, scales: { ...base.scales, y: { ...base.scales.y, title: { display: true, text: 'Network I/O (MB)' } } } }
+          options: themedOptions(),
         }),
-        disk: new Chart(this.$refs.disk.getContext('2d'), {
+        disk: new Chart(diskCtx, {
           type: 'line',
           data: { labels: [], datasets: [
-            { label: 'Disk Read (MB)', data: [], borderColor: 'rgb(153,102,255)', backgroundColor: 'rgba(153,102,255,0.1)', fill: false, tension: 0.1 },
-            { label: 'Disk Write (MB)', data: [], borderColor: 'rgb(255,159,64)', backgroundColor: 'rgba(255,159,64,0.1)', fill: false, tension: 0.1 }
+            dataset(diskCtx, 'Disk Read (MB)', warn, false),
+            dataset(diskCtx, 'Disk Write (MB)', accent, false),
           ] },
-          options: { ...base, scales: { ...base.scales, y: { ...base.scales.y, title: { display: true, text: 'Disk I/O (MB)' } } } }
+          options: themedOptions(),
         }),
       };
       // $watch fires after x-model commits the new value; @change fires concurrently
@@ -761,11 +725,12 @@ <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
         const data = await ProxUtils.apiJson(`/api/vm/${node}/${vmid}/metrics?timeframe=${this.timeframe}`);
         if (!data.error) {
           const h = data.historical;
-          charts.cpu.data.labels = h.labels; charts.cpu.data.datasets[0].data = h.cpu; charts.cpu.update('none');
-          charts.memory.data.labels = h.labels; charts.memory.data.datasets[0].data = h.memory; charts.memory.update('none');
-          charts.network.data.labels = h.labels; charts.network.data.datasets[0].data = h.network_in; charts.network.data.datasets[1].data = h.network_out; charts.network.update('none');
-          charts.disk.data.labels = h.labels; charts.disk.data.datasets[0].data = h.disk_read; charts.disk.data.datasets[1].data = h.disk_write; charts.disk.update('none');
-          this.lastUpdate = `Last update: ${data.timestamp}`;
+          const labels = h.labels.map(ts => ProxUtils.formatChartLabel(ts, this.timeframe));
+          charts.cpu.data.labels = labels; charts.cpu.data.datasets[0].data = h.cpu; charts.cpu.update('none');
+          charts.memory.data.labels = labels; charts.memory.data.datasets[0].data = h.memory; charts.memory.update('none');
+          charts.network.data.labels = labels; charts.network.data.datasets[0].data = h.network_in; charts.network.data.datasets[1].data = h.network_out; charts.network.update('none');
+          charts.disk.data.labels = labels; charts.disk.data.datasets[0].data = h.disk_read; charts.disk.data.datasets[1].data = h.disk_write; charts.disk.update('none');
+          this.lastUpdate = `Last update: ${new Date().toLocaleTimeString()}`;
         }
       } catch(e) {
         this.lastUpdate = `Error: ${e.message}`;
@@ -944,4 +909,4 @@ <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
 if (window.Alpine) register();
 else document.addEventListener('alpine:init', register);
 </script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/vm_edit.html b/templates/vm_edit.html
index 781f998..3fa5f8d 100644
--- a/templates/vm_edit.html
+++ b/templates/vm_edit.html
@@ -126,60 +126,54 @@
 {% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <div class="d-flex justify-content-between align-items-center mb-3">
-            <h1><i class="bi bi-gear"></i> Edit {{ 'Container' if vm_type == 'lxc' else 'VM' }} {{ vm.name }}</h1>
-            <div>
-                <span class="badge bg-{{ 'success' if vm.status == 'running' else 'danger' if vm.status == 'stopped' else 'warning' }}">
-                    {{ vm.status }}
-                </span>
-                <a href="{{ url_for('vm_detail', node=node, vmid=vm.vmid) }}" class="btn btn-outline-secondary ms-2">
-                    <i class="bi bi-arrow-left"></i> Back to Details
-                </a>
-            </div>
-        </div>
+<div class="d-flex align-items-center flex-wrap gap-3 mb-3">
+    <div class="me-auto">
+        <div class="sec-title">Edit {{ 'Container' if vm_type == 'lxc' else 'VM' }} {{ vm.name }}</div>
     </div>
+    <span class="pill {{ 'run' if vm.status == 'running' else 'stop' if vm.status == 'stopped' else 'maint' }}"><span class="d"></span>{{ vm.status }}</span>
+    <a href="{{ url_for('vm_detail', node=node, vmid=vm.vmid) }}" class="btn-x">
+        <i class="bi bi-arrow-left"></i> Back to Details
+    </a>
 </div>
 
 {% if vm.status == 'running' %}
-<div class="alert alert-warning">
+<div class="callout warn mb-3">
     <i class="bi bi-exclamation-triangle"></i>
-    <strong>Warning:</strong> Some configuration changes require the {{ 'container' if vm_type == 'lxc' else 'VM' }} to be stopped to take effect.
-    Memory and CPU changes can be applied to running {{ 'containers' if vm_type == 'lxc' else 'VMs' }} but may need a restart for optimal performance.
+    <div><div class="t">Warning</div><div class="b">Some configuration changes require the {{ 'container' if vm_type == 'lxc' else 'VM' }} to be stopped to take effect.
+    Memory and CPU changes can be applied to running {{ 'containers' if vm_type == 'lxc' else 'VMs' }} but may need a restart for optimal performance.</div></div>
 </div>
 {% endif %}
 
 <div class="row justify-content-center">
     <div class="col-md-8">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-{{ 'box' if vm_type == 'lxc' else 'cpu' }}"></i> {{ 'Container' if vm_type == 'lxc' else 'VM' }} Configuration</h5>
+        <div class="card-x">
+            <div class="cx-head">
+                <span class="cx-title"><i class="bi bi-{{ 'box' if vm_type == 'lxc' else 'cpu' }}"></i> {{ 'Container' if vm_type == 'lxc' else 'VM' }} Configuration</span>
             </div>
-            <div class="card-body">
+            <div class="cx-body">
                 <form id="vmConfigForm">
                     <!-- General Settings (LXC only) -->
                     {% if vm_type == 'lxc' %}
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-gear"></i> General Settings</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-gear"></i> General Settings</div>
 
-                        <div class="mb-3">
-                            <label for="hostname" class="form-label">Hostname</label>
-                            <input type="text" class="form-control" id="hostname" name="hostname"
+                        <div class="field">
+                            <label for="hostname">Hostname</label>
+                            <input type="text" class="inp" id="hostname" name="hostname"
                                    value="{{ config.hostname or '' }}" pattern="[a-zA-Z0-9\-]+">
-                            <div class="form-text">Container hostname (alphanumeric and hyphens only)</div>
+                            <div class="hint">Container hostname (alphanumeric and hyphens only)</div>
                         </div>
                     </div>
                     {% endif %}
 
                     <!-- CPU Configuration -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-cpu"></i> CPU Configuration</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-cpu"></i> CPU Configuration</div>
 
                         {% if vm_type != 'lxc' %}
-                        <div class="mb-3">
-                            <label for="cpu_type" class="form-label">CPU Type</label>
-                            <select class="form-select" id="cpu_type" name="cpu_type">
+                        <div class="field">
+                            <label for="cpu_type">CPU Type</label>
+                            <select class="inp" id="cpu_type" name="cpu_type">
                                 <option value="host">Host (Recommended)</option>
                                 <option value="kvm64">KVM64</option>
                                 <option value="qemu64">QEMU64</option>
@@ -190,21 +184,25 @@ <h6 class="text-primary mb-3"><i class="bi bi-cpu"></i> CPU Configuration</h6>
                         </div>
 
                         <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="sockets" class="form-label">Sockets</label>
-                                <input type="number" class="form-control" id="sockets" name="sockets"
-                                       min="1" max="4" value="{{ config.sockets or 1 }}">
+                            <div class="col-md-6">
+                                <div class="field">
+                                    <label for="sockets">Sockets</label>
+                                    <input type="number" class="inp" id="sockets" name="sockets"
+                                           min="1" max="4" value="{{ config.sockets or 1 }}">
+                                </div>
                             </div>
-                            <div class="col-md-6 mb-3">
-                                <label for="cores" class="form-label">Cores</label>
-                                <input type="number" class="form-control" id="cores" name="cores"
-                                       min="1" max="128" value="{{ config.cores or 1 }}">
+                            <div class="col-md-6">
+                                <div class="field">
+                                    <label for="cores">Cores</label>
+                                    <input type="number" class="inp" id="cores" name="cores"
+                                           min="1" max="128" value="{{ config.cores or 1 }}">
+                                </div>
                             </div>
                         </div>
                         {% else %}
-                        <div class="mb-3">
-                            <label for="cores" class="form-label">CPU Cores</label>
-                            <input type="number" class="form-control" id="cores" name="cores"
+                        <div class="field">
+                            <label for="cores">CPU Cores</label>
+                            <input type="number" class="inp" id="cores" name="cores"
                                    min="1" max="128" value="{{ config.cores or 1 }}">
                         </div>
                         {% endif %}
@@ -212,19 +210,23 @@ <h6 class="text-primary mb-3"><i class="bi bi-cpu"></i> CPU Configuration</h6>
 
                     <!-- Memory Configuration -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-memory"></i> Memory Configuration</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-memory"></i> Memory Configuration</div>
 
                         <div class="row">
-                            <div class="col-md-6 mb-3">
-                                <label for="memory" class="form-label">Memory (MB)</label>
-                                <input type="number" class="form-control" id="memory" name="memory"
-                                       min="64" max="4194304" step="64" value="{{ config.memory or 512 }}">
+                            <div class="col-md-6">
+                                <div class="field">
+                                    <label for="memory">Memory (MB)</label>
+                                    <input type="number" class="inp" id="memory" name="memory"
+                                           min="64" max="4194304" step="64" value="{{ config.memory or 512 }}">
+                                </div>
                             </div>
                             {% if vm_type == 'lxc' %}
-                            <div class="col-md-6 mb-3">
-                                <label for="swap" class="form-label">Swap (MB)</label>
-                                <input type="number" class="form-control" id="swap" name="swap"
-                                       min="0" max="4194304" step="64" value="{{ config.swap or 512 }}">
+                            <div class="col-md-6">
+                                <div class="field">
+                                    <label for="swap">Swap (MB)</label>
+                                    <input type="number" class="inp" id="swap" name="swap"
+                                           min="0" max="4194304" step="64" value="{{ config.swap or 512 }}">
+                                </div>
                             </div>
                             {% endif %}
                         </div>
@@ -233,11 +235,11 @@ <h6 class="text-primary mb-3"><i class="bi bi-memory"></i> Memory Configuration<
                     <!-- Display Configuration (QEMU VMs only) -->
                     {% if vm_type|default('qemu') == 'qemu' %}
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-display"></i> Display Configuration</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-display"></i> Display Configuration</div>
 
-                        <div class="mb-3">
-                            <label for="vga_type" class="form-label">Display Type</label>
-                            <select class="form-select" id="vga_type" name="vga_type">
+                        <div class="field">
+                            <label for="vga_type">Display Type</label>
+                            <select class="inp" id="vga_type" name="vga_type">
                                 <option value="std">Standard VGA (std)</option>
                                 <option value="cirrus">Cirrus Logic (cirrus)</option>
                                 <option value="vmware">VMware Compatible (vmware)</option>
@@ -247,7 +249,7 @@ <h6 class="text-primary mb-3"><i class="bi bi-display"></i> Display Configuratio
                                 <option value="serial0">Serial Terminal (serial0)</option>
                                 <option value="none">None (headless)</option>
                             </select>
-                            <div class="form-text">
+                            <div class="hint">
                                 <strong>std</strong> - Standard VGA, most compatible<br>
                                 <strong>qxl</strong> - Best for SPICE remote access with multi-monitor support<br>
                                 <strong>virtio</strong> - Best performance for Linux guests with virtio drivers<br>
@@ -255,19 +257,19 @@ <h6 class="text-primary mb-3"><i class="bi bi-display"></i> Display Configuratio
                             </div>
                         </div>
 
-                        <div class="mb-3" id="vgaMemoryContainer">
-                            <label for="vga_memory" class="form-label">VGA Memory (MB)</label>
-                            <input type="number" class="form-control" id="vga_memory" name="vga_memory"
+                        <div class="field" id="vgaMemoryContainer">
+                            <label for="vga_memory">VGA Memory (MB)</label>
+                            <input type="number" class="inp" id="vga_memory" name="vga_memory"
                                    min="4" max="512" step="4" value="16">
-                            <div class="form-text">Video memory in MB (4-512). Default is 16MB. Higher values useful for higher resolutions.</div>
+                            <div class="hint">Video memory in MB (4-512). Default is 16MB. Higher values useful for higher resolutions.</div>
                         </div>
                     </div>
                     {% endif %}
 
                     <!-- Disk Configuration -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-hdd"></i> Disk Configuration</h6>
-                        
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-hdd"></i> Disk Configuration</div>
+
                         <div id="diskInterfaces">
                             <!-- Disk interfaces will be loaded here -->
                         </div>
@@ -277,8 +279,8 @@ <h6 class="text-primary mb-3"><i class="bi bi-hdd"></i> Disk Configuration</h6>
                     {% if vm_type|default('qemu') == 'qemu' %}
                     <div class="mb-4">
                         <div class="d-flex justify-content-between align-items-center mb-3">
-                            <h6 class="text-primary mb-0"><i class="bi bi-disc"></i> ISO/CD-ROM Images</h6>
-                            <button type="button" class="btn btn-sm btn-success" id="attachIsoBtn">
+                            <div class="sub-h mb-0" style="margin-top:0"><i class="bi bi-disc"></i> ISO/CD-ROM Images</div>
+                            <button type="button" class="btn-x sm primary" id="attachIsoBtn">
                                 <i class="bi bi-plus-circle"></i> Attach ISO
                             </button>
                         </div>
@@ -290,7 +292,7 @@ <h6 class="text-primary mb-0"><i class="bi bi-disc"></i> ISO/CD-ROM Images</h6>
 
                     <!-- Cloud-init Drive -->
                     <div class="mb-4" id="cloudinitSection" style="display: none;">
-                        <h6 class="text-primary mb-3"><i class="bi bi-cloud-arrow-up"></i> Cloud-init Drive</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-cloud-arrow-up"></i> Cloud-init Drive</div>
                         <div id="cloudinitDrive">
                             <!-- Cloud-init drive will be loaded here -->
                         </div>
@@ -300,58 +302,63 @@ <h6 class="text-primary mb-3"><i class="bi bi-cloud-arrow-up"></i> Cloud-init Dr
                     <!-- Network Interfaces -->
                     <div class="mb-4">
                         <div class="d-flex justify-content-between align-items-center mb-3">
-                            <h6 class="text-primary mb-0"><i class="bi bi-diagram-3"></i> Network Interfaces</h6>
-                            <button type="button" class="btn btn-sm btn-success" id="addNetworkBtn">
+                            <div class="sub-h mb-0" style="margin-top:0"><i class="bi bi-diagram-3"></i> Network Interfaces</div>
+                            <button type="button" class="btn-x sm primary" id="addNetworkBtn">
                                 <i class="bi bi-plus-circle"></i> Add Interface
                             </button>
                         </div>
-                        
+
                         <div id="networkInterfaces">
                             <!-- Network interfaces will be loaded here -->
                         </div>
                     </div>
 
-                    <!-- Boot Options -->
+                    <!-- Boot Options. NOTE: outer div keeps class="mb-4" verbatim —
+                         static/js/vm_edit inline script (loadBootOrder) selects it via
+                         document.querySelector('.mb-4:has(#bootOrderList)'). Do not rename. -->
                     <div class="mb-4">
-                        <h6 class="text-primary mb-3"><i class="bi bi-power"></i> Boot Options</h6>
+                        <div class="sub-h" style="margin-top:0"><i class="bi bi-power"></i> Boot Options</div>
 
                         {% if vm_type != 'lxc' %}
-                        <div class="mb-3">
-                            <label for="bootOrder" class="form-label">Boot Order</label>
-                            <div class="card">
-                                <div class="card-header bg-light">
-                                    <small class="text-muted">Drag and drop to reorder boot devices</small>
+                        <div class="field">
+                            <label for="bootOrder">Boot Order</label>
+                            <div class="card-x">
+                                <div class="cx-head">
+                                    <small class="text-muted-2">Drag and drop to reorder boot devices</small>
                                 </div>
-                                <div class="card-body p-2">
+                                <div class="cx-body tight">
                                     <div id="bootOrderList" class="list-group list-group-flush">
                                         <!-- Boot order items will be loaded here -->
                                     </div>
                                 </div>
                             </div>
-                            <div class="form-text mt-2">
+                            <div class="hint mt-2">
                                 The VM will attempt to boot from devices in the order shown above.
                                 Available devices depend on your VM configuration.
                             </div>
                         </div>
                         {% endif %}
 
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" id="autostart" name="autostart">
-                            <label class="form-check-label" for="autostart">
-                                Auto-start {{ 'Container' if vm_type == 'lxc' else 'VM' }} on node boot
-                            </label>
-                            <div class="form-text">{{ 'Container' if vm_type == 'lxc' else 'VM' }} will automatically start when the Proxmox node boots</div>
+                        <div class="field mb-0">
+                            <div class="form-check">
+                                <input class="form-check-input" type="checkbox" id="autostart" name="autostart">
+                                <label class="form-check-label" for="autostart">
+                                    Auto-start {{ 'Container' if vm_type == 'lxc' else 'VM' }} on node boot
+                                </label>
+                            </div>
+                            <div class="hint">{{ 'Container' if vm_type == 'lxc' else 'VM' }} will automatically start when the Proxmox node boots</div>
                         </div>
                     </div>
 
-                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                        <button type="button" class="btn btn-secondary" onclick="window.history.back()">
+                    <div class="divider my-4"></div>
+                    <div class="d-flex gap-2 justify-content-end flex-wrap">
+                        <button type="button" class="btn-x" onclick="window.history.back()">
                             <i class="bi bi-x-circle"></i> Cancel
                         </button>
-                        <button type="button" class="btn btn-primary" id="saveBtn">
+                        <button type="button" class="btn-x primary" id="saveBtn">
                             <i class="bi bi-check-circle"></i> Save
                         </button>
-                        <button type="button" class="btn btn-success" id="saveCloseBtn">
+                        <button type="button" class="btn-x primary" id="saveCloseBtn">
                             <i class="bi bi-check2-square"></i> Save and Close
                         </button>
                     </div>
@@ -397,12 +404,10 @@ <h6 class="text-primary mb-3"><i class="bi bi-power"></i> Boot Options</h6>
        }
      }">
     <div class="col-md-8">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-key"></i> Reset Root Password</h5>
-            </div>
-            <div class="card-body">
-                <p class="text-muted small mb-3">
+        <div class="card-x">
+            <div class="cx-head"><span class="cx-title"><i class="bi bi-key"></i> Reset Root Password</span></div>
+            <div class="cx-body">
+                <p class="text-muted-2 small mb-3">
                     {% if vm_type == 'lxc' %}
                     The container must be <strong>running</strong>. Uses <code>chpasswd</code> via <code>pct exec</code>.
                     {% else %}
@@ -412,26 +417,30 @@ <h5 class="mb-0"><i class="bi bi-key"></i> Reset Root Password</h5>
                 </p>
                 <div class="row g-2 align-items-end">
                     <div class="col-sm-4">
-                        <label class="form-label">New password</label>
-                        <input type="password" class="form-control" x-model="pw"
-                               @keydown.enter="submit()" autocomplete="new-password">
+                        <div class="field mb-0">
+                            <label>New password</label>
+                            <input type="password" class="inp" x-model="pw"
+                                   @keydown.enter="submit()" autocomplete="new-password">
+                        </div>
                     </div>
                     <div class="col-sm-4">
-                        <label class="form-label">Confirm password</label>
-                        <input type="password" class="form-control" x-model="pw2"
-                               @keydown.enter="submit()" autocomplete="new-password">
+                        <div class="field mb-0">
+                            <label>Confirm password</label>
+                            <input type="password" class="inp" x-model="pw2"
+                                   @keydown.enter="submit()" autocomplete="new-password">
+                        </div>
                     </div>
                     <div class="col-sm-4">
-                        <button class="btn btn-warning w-100" @click="submit()" :disabled="busy">
+                        <button class="btn-x primary w-100" style="justify-content:center" @click="submit()" :disabled="busy">
                             <span x-show="busy" class="spinner-border spinner-border-sm me-1"></span>
                             <i x-show="!busy" class="bi bi-key-fill"></i>
                             Reset Password
                         </button>
                     </div>
                 </div>
-                <div x-show="error" class="alert alert-danger py-2 small mt-2 mb-0" x-text="error"></div>
-                <div x-show="success && !rebootRequired" class="alert alert-success py-2 small mt-2 mb-0" x-text="success"></div>
-                <div x-show="success && rebootRequired" class="alert alert-warning py-2 small mt-2 mb-0">
+                <div x-show="error" class="callout danger mt-2 mb-0 py-2"><span x-text="error"></span></div>
+                <div x-show="success && !rebootRequired" class="callout ok mt-2 mb-0 py-2"><span x-text="success"></span></div>
+                <div x-show="success && rebootRequired" class="callout warn mt-2 mb-0 py-2">
                     <i class="bi bi-arrow-clockwise"></i> <span x-text="success"></span>
                 </div>
             </div>
@@ -468,12 +477,10 @@ <h5 class="mb-0"><i class="bi bi-key"></i> Reset Root Password</h5>
        }
      }">
     <div class="col-md-8">
-        <div class="card">
-            <div class="card-header">
-                <h5 class="mb-0"><i class="bi bi-cpu"></i> QEMU Guest Agent</h5>
-            </div>
-            <div class="card-body">
-                <p class="text-muted small mb-3">
+        <div class="card-x">
+            <div class="cx-head"><span class="cx-title"><i class="bi bi-cpu"></i> QEMU Guest Agent</span></div>
+            <div class="cx-body">
+                <p class="text-muted-2 small mb-3">
                     Enables improved guest integration: graceful shutdown, IP reporting,
                     file system freeze, and in-guest password reset.
                     Requires <code>qemu-guest-agent</code> installed in the guest OS.
@@ -484,14 +491,14 @@ <h5 class="mb-0"><i class="bi bi-cpu"></i> QEMU Guest Agent</h5>
                                id="agentToggle" x-model="enabled" :disabled="busy"
                                style="width: 3em; height: 1.5em; cursor: pointer;">
                         <label class="form-check-label ms-2" for="agentToggle" style="cursor: pointer;">
-                            <span x-show="enabled" class="text-success fw-semibold">Enabled</span>
-                            <span x-show="!enabled" class="text-muted">Disabled</span>
+                            <span x-show="enabled" class="fw-semibold" style="color:var(--ok)">Enabled</span>
+                            <span x-show="!enabled" class="text-muted-2">Disabled</span>
                         </label>
                     </div>
                     <span x-show="busy" class="spinner-border spinner-border-sm text-secondary"></span>
                 </div>
-                <div x-show="error" class="alert alert-danger py-2 small mt-2 mb-0" x-text="error"></div>
-                <div x-show="success" class="alert alert-success py-2 small mt-2 mb-0">
+                <div x-show="error" class="callout danger mt-2 mb-0 py-2"><span x-text="error"></span></div>
+                <div x-show="success" class="callout info mt-2 mb-0 py-2">
                     <i class="bi bi-info-circle"></i> <span x-text="success"></span>
                 </div>
             </div>
@@ -506,19 +513,19 @@ <h5 class="mb-0"><i class="bi bi-cpu"></i> QEMU Guest Agent</h5>
      x-data="cloudInit('{{ node }}', '{{ vm.vmid }}')"
      data-vm-name="{{ vm.name | e }}">
     <div class="col-md-8">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-cloud-fill"></i> Cloud-Init</h5>
+        <div class="card-x">
+            <div class="cx-head d-flex justify-content-between align-items-center">
+                <span class="cx-title"><i class="bi bi-cloud-fill"></i> Cloud-Init</span>
                 <div class="d-flex align-items-center gap-2">
                     <span x-show="loading" class="spinner-border spinner-border-sm text-secondary"></span>
-                    <button class="btn btn-sm btn-outline-secondary" @click="regenerate()" :disabled="regenBusy"
+                    <button class="btn-x sm" @click="regenerate()" :disabled="regenBusy"
                             title="Regenerate the cloud-init drive from the current config (qm cloudinit update). Reboot the VM to apply — an already-provisioned guest may also need 'cloud-init clean' inside it first.">
                         <span x-show="regenBusy" class="spinner-border spinner-border-sm me-1"></span>
                         <i x-show="!regenBusy" class="bi bi-arrow-clockwise"></i> Regenerate drive
                     </button>
                 </div>
             </div>
-            <div class="card-body">
+            <div class="cx-body">
                 <ul class="nav nav-tabs mb-3">
                     <li class="nav-item">
                         <a class="nav-link" :class="{active: tab==='native'}" href="#"
@@ -586,7 +593,7 @@ <h5 class="mb-0"><i class="bi bi-cloud-fill"></i> Cloud-Init</h5>
                     <div class="mt-3 d-flex gap-2 align-items-center">
                         <button class="btn btn-sm btn-primary" @click="saveNative()" :disabled="nativeBusy">
                             <span x-show="nativeBusy" class="spinner-border spinner-border-sm me-1"></span>
-                            <i x-show="!nativeBusy" class="bi bi-floppy"></i> Save Settings
+                            <i x-show="!nativeBusy" class="bi bi-save"></i> Save Settings
                         </button>
                     </div>
                     <div x-show="nativeError" class="alert alert-danger py-2 small mt-2 mb-0" x-text="nativeError"></div>
@@ -776,7 +783,7 @@ <h5 class="mb-0"><i class="bi bi-cloud-fill"></i> Cloud-Init</h5>
                                 @click="saveSnippet()"
                                 :disabled="snippetBusy || !snippetContent.trim() || !snippetStorage">
                             <span x-show="snippetBusy" class="spinner-border spinner-border-sm me-1"></span>
-                            <i x-show="!snippetBusy" class="bi bi-floppy"></i> Save &amp; Attach
+                            <i x-show="!snippetBusy" class="bi bi-save"></i> Save &amp; Attach
                         </button>
                     </div>
                     <div x-show="snippetError" class="alert alert-danger py-2 small mt-2 mb-0" x-text="snippetError"></div>
@@ -794,21 +801,21 @@ <h5 class="mb-0"><i class="bi bi-cloud-fill"></i> Cloud-Init</h5>
 <!-- LXC Advanced / Passthrough -->
 <div class="row justify-content-center mt-3">
     <div class="col-md-8">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-sliders2"></i> Advanced / Passthrough</h5>
+        <div class="card-x">
+            <div class="cx-head d-flex justify-content-between align-items-center">
+                <span class="cx-title"><i class="bi bi-sliders"></i> Advanced / Passthrough</span>
                 <div class="d-flex gap-2 align-items-center">
-                    <small class="text-muted fst-italic" x-show="hasBackup" x-text="'Snapshot: ' + backupTimestamp"></small>
-                    <button class="btn btn-sm btn-outline-secondary" x-show="hasBackup"
+                    <small class="text-faint fst-italic" x-show="hasBackup" x-text="'Snapshot: ' + backupTimestamp"></small>
+                    <button class="btn-x sm" x-show="hasBackup"
                             @click="restore()" title="Revert to pre-write snapshot">
                         <i class="bi bi-arrow-counterclockwise"></i> Restore
                     </button>
-                    <button class="btn btn-sm btn-outline-primary" @click="refresh()" title="Refresh">
+                    <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="refresh()" title="Refresh">
                         <i class="bi bi-arrow-clockwise" :class="loading && 'spin'"></i>
                     </button>
                 </div>
             </div>
-            <div class="card-body">
+            <div class="cx-body">
                 <template x-if="loading">
                     <div class="text-center py-3">
                         <div class="spinner-border spinner-border-sm" role="status"></div>
@@ -914,7 +921,7 @@ <h6 class="text-primary mb-2"><i class="bi bi-folder2-open"></i> Bind Mounts</h6
                     </button>
                     <hr class="my-3">
                     <!-- idmap -->
-                    <h6 class="text-primary mb-2"><i class="bi bi-person-lock"></i> UID/GID Mapping (idmap)</h6>
+                    <h6 class="text-primary mb-2"><i class="bi bi-shield-lock"></i> UID/GID Mapping (idmap)</h6>
                     <p x-show="idmaps.length === 0" class="text-muted small mb-2">No idmap entries (container uses default subuid/subgid mapping).</p>
                     <div class="mb-2" x-show="idmaps.length > 0">
                         <template x-for="m in idmaps" :key="m.key">
@@ -940,14 +947,14 @@ <h6 class="text-primary mb-2"><i class="bi bi-person-lock"></i> UID/GID Mapping
 <!-- LXC Profiles Card -->
 <div class="row justify-content-center mt-3">
     <div class="col-md-8">
-        <div class="card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <h5 class="mb-0"><i class="bi bi-collection"></i> Apply Config Profile</h5>
-                <button class="btn btn-sm btn-outline-primary" @click="loadProfiles()" title="Refresh">
+        <div class="card-x">
+            <div class="cx-head d-flex justify-content-between align-items-center">
+                <span class="cx-title"><i class="bi bi-collection"></i> Apply Config Profile</span>
+                <button class="icon-btn" style="width:32px;height:32px;font-size:15px" @click="loadProfiles()" title="Refresh">
                     <i class="bi bi-arrow-clockwise"></i>
                 </button>
             </div>
-            <div class="card-body">
+            <div class="cx-body">
                 <template x-if="loading">
                     <div class="text-center py-3"><div class="spinner-border spinner-border-sm" role="status"></div><span class="ms-2">Loading…</span></div>
                 </template>
@@ -1134,7 +1141,7 @@ <h5 class="modal-title"><i class="bi bi-device-hdd"></i> Add Device Passthrough<
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title"><i class="bi bi-person-lock"></i> Add UID/GID Mapping</h5>
+                <h5 class="modal-title"><i class="bi bi-shield-lock"></i> Add UID/GID Mapping</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
diff --git a/templates/vms.html b/templates/vms.html
index 8b514f0..bcebf93 100644
--- a/templates/vms.html
+++ b/templates/vms.html
@@ -3,144 +3,120 @@
 {% block title %}VMs & Containers - Proxmox Manager{% endblock %}
 
 {% block content %}
-<div class="row">
-    <div class="col-12">
-        <h1><i class="bi bi-pc-display"></i> Virtual Machines & Containers</h1>
+<div class="d-flex align-items-center flex-wrap gap-3 mb-3">
+    <div class="me-auto">
+        <div class="sec-title">Virtual Machines &amp; Containers</div>
+        <div class="sec-sub">{{ resources|length }} guests</div>
     </div>
+    <a href="{{ url_for('create_vm') }}" class="btn-x primary"><i class="bi bi-plus-lg"></i> Create</a>
 </div>
 
-<div class="row mt-3">
-    <div class="col-12">
-        <div class="card" x-data="{ search: '' }">
-            <div class="card-header">
-                <div class="d-flex flex-column flex-sm-row justify-content-between align-items-stretch align-items-sm-center gap-2">
-                    <div class="input-group input-group-sm flex-grow-1" style="max-width: 300px;">
-                        <span class="input-group-text"><i class="bi bi-search"></i></span>
-                        <input type="text" class="form-control" placeholder="Search..." autofocus
-                               x-model="search" @keydown.escape="search = ''">
-                    <a href="{{ url_for('create_vm') }}" class="btn btn-success btn-sm">
-                        <i class="bi bi-plus-circle"></i> Create
-                    </a>
-                </div>
-            </div>
-            <div class="card-body">
-                <div class="table-responsive">
-                    <table class="table table-hover">
-                        <thead>
-                            <tr>
-                                <th>Status</th>
-                                <th>
-                                    <a href="?sort=name&order={{ 'asc' if request.args.get('sort') == 'name' and request.args.get('order') == 'desc' else 'desc' }}">
-                                        Name <i class="bi bi-arrow-down-up"></i>
-                                    </a>
-                                </th>
-                                <th>Type</th>
-                                <th>Node</th>
-                                <th>
-                                    <a href="?sort=cpu&order={{ 'asc' if request.args.get('sort') == 'cpu' and request.args.get('order') == 'desc' else 'desc' }}">
-                                        CPU <i class="bi bi-arrow-down-up"></i>
-                                    </a>
-                                </th>
-                                <th>
-                                    <a href="?sort=memory&order={{ 'asc' if request.args.get('sort') == 'memory' and request.args.get('order') == 'desc' else 'desc' }}">
-                                        Memory <i class="bi bi-arrow-down-up"></i>
-                                    </a>
-                                </th>
-                                <th>Actions</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {% for vm in resources %}
-                            <tr x-show="!search || '{{ (vm.name ~ ' ' ~ vm.vmid ~ ' ' ~ vm.node)|lower }}'.includes(search.toLowerCase())">
-                                <td>
-                                    {% if vm.status == 'running' %}
-                                        <span class="badge bg-success"><i class="bi bi-play-circle"></i> Running</span>
-                                    {% elif vm.status == 'stopped' %}
-                                        <span class="badge bg-danger"><i class="bi bi-stop-circle"></i> Stopped</span>
-                                    {% else %}
-                                        <span class="badge bg-warning">{{ vm.status }}</span>
-                                    {% endif %}
-                                </td>
-                                <td>
-                                    <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}">
-                                        <strong>{{ vm.name }}</strong>
-                                    </a>
-                                    <br>
-                                    <small class="text-muted">VMID: {{ vm.vmid }}</small>
-                                </td>
-                                <td>
-                                    {% if vm.get('template') == 1 %}
-                                        <span class="badge bg-secondary">Template</span>
-                                    {% else %}
-                                        <span class="badge bg-{{ 'primary' if vm.type == 'qemu' else 'info' }}">
-                                            {{ 'VM' if vm.type == 'qemu' else 'LXC' }}
-                                        </span>
-                                    {% endif %}
-                                </td>
-                                <td>{{ vm.node }}</td>
-                                <td>
-                                    <div class="progress" style="height: 20px; min-width: 100px;">
-                                        <div class="progress-bar bg-{{ 'danger' if vm.cpu_percent > 80 else 'warning' if vm.cpu_percent > 60 else 'success' }}" 
-                                             style="width: {{ vm.cpu_percent }}%">
-                                            {{ "%.1f"|format(vm.cpu_percent) }}%
-                                        </div>
-                                    </div>
-                                    <small>{{ vm.maxcpu }} vCPU</small>
-                                </td>
-                                <td>
-                                    <div class="progress" style="height: 20px; min-width: 100px;">
-                                        <div class="progress-bar bg-{{ 'danger' if vm.mem_percent > 80 else 'warning' if vm.mem_percent > 60 else 'success' }}"
-                                             style="width: {{ vm.mem_percent }}%">
-                                            {{ "%.1f"|format(vm.mem_percent) }}%
-                                        </div>
-                                    </div>
-                                    <small>{% if vm.maxmem %}{{ (vm.maxmem / 1024 / 1024 / 1024)|round(1) }} GB{% else %}N/A{% endif%}</small>
-                                </td>
-                                <td>
-                                    <div class="btn-group btn-group-sm" role="group">
-                                        <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}"
-                                           class="btn btn-outline-primary" title="Details">
-                                            <i class="bi bi-info-circle"></i>
-                                        </a>
-
-                                        {% if vm.get('template') == 1 %}
-                                        <a href="{{ url_for('vm_clone', node=vm.node, vmid=vm.vmid) }}" class="btn btn-sm btn-outline-primary">
-                                            <i class="bi bi-files"></i> Clone
-                                        </a>
-
-                                        {% else %}
-                                            {% if vm.type == 'qemu' and vm.status == 'running' %}
-                                            <a href="{{ url_for('vm_console', node=vm.node, vmid=vm.vmid) }}"
-                                               class="btn btn-outline-info" title="Console">
-                                                <i class="bi bi-display"></i>
-                                            </a>
-                                            {% endif %}
-
-                                            {% if vm.status == 'stopped' %}
-                                            <form method="POST" action="{{ url_for('vm_action', node=vm.node, vmid=vm.vmid, action='start') }}" style="display: inline;">
-                                                <button type="submit" class="btn btn-outline-success" title="Start">
-                                                    <i class="bi bi-play-fill"></i>
-                                                </button>
-                                            </form>
-                                            {% else %}
-                                            <form method="POST" action="{{ url_for('vm_action', node=vm.node, vmid=vm.vmid, action='shutdown') }}" style="display: inline;">
-                                                <button type="submit" class="btn btn-outline-warning" title="Shutdown">
-                                                    <i class="bi bi-power"></i>
-                                                </button>
-                                            </form>
-                                            {% endif %}
-                                        {% endif %}
-                                    </div>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
+<div class="card-x" x-data="{ search: '' }">
+    <div class="cx-head">
+        <div class="filter-bar w-100">
+            <div class="search-inp">
+                <i class="bi bi-search"></i>
+                <input type="text" class="inp" placeholder="Search name, VMID, or node…" autofocus
+                       x-model="search" @keydown.escape="search = ''">
             </div>
+            <span class="text-faint ms-auto" style="font-size:12px" x-text="'Filtering ' + {{ resources|length }} + ' guests'"></span>
         </div>
     </div>
+    <div class="cx-body flush tbl-scroll">
+        <table class="tbl">
+            <thead>
+                <tr>
+                    <th>Status</th>
+                    <th>
+                        <a href="?sort=name&order={{ 'asc' if request.args.get('sort') == 'name' and request.args.get('order') == 'desc' else 'desc' }}">
+                            Name <i class="bi bi-arrow-down-up"></i>
+                        </a>
+                    </th>
+                    <th>Type</th>
+                    <th>Node</th>
+                    <th style="width:150px">
+                        <a href="?sort=cpu&order={{ 'asc' if request.args.get('sort') == 'cpu' and request.args.get('order') == 'desc' else 'desc' }}">
+                            CPU <i class="bi bi-arrow-down-up"></i>
+                        </a>
+                    </th>
+                    <th style="width:170px">
+                        <a href="?sort=memory&order={{ 'asc' if request.args.get('sort') == 'memory' and request.args.get('order') == 'desc' else 'desc' }}">
+                            Memory <i class="bi bi-arrow-down-up"></i>
+                        </a>
+                    </th>
+                    <th class="num">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for vm in resources %}
+                <tr x-show="!search || '{{ (vm.name ~ ' ' ~ vm.vmid ~ ' ' ~ vm.node)|lower }}'.includes(search.toLowerCase())">
+                    <td>
+                        {% if vm.get('template') == 1 %}
+                        <span class="pill tmpl"><span class="d"></span>Template</span>
+                        {% elif vm.status == 'running' %}
+                        <span class="pill run"><span class="d"></span>Running</span>
+                        {% elif vm.status == 'stopped' %}
+                        <span class="pill stop"><span class="d"></span>Stopped</span>
+                        {% else %}
+                        <span class="pill maint"><span class="d"></span>{{ vm.status }}</span>
+                        {% endif %}
+                    </td>
+                    <td>
+                        <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}" class="nm">{{ vm.name }}</a>
+                        <div class="text-faint mono" style="font-size:11px">VMID: {{ vm.vmid }}</div>
+                    </td>
+                    <td>
+                        {% if vm.get('template') == 1 %}
+                        <span class="type-chip">TMPL</span>
+                        {% else %}
+                        <span class="type-chip {{ 'vm' if vm.type == 'qemu' else 'lxc' }}">{{ 'VM' if vm.type == 'qemu' else 'LXC' }}</span>
+                        {% endif %}
+                    </td>
+                    <td class="text-muted-2">{{ vm.node }}</td>
+                    <td>
+                        <div class="usage-cell">
+                            <div class="ubar"><i class="{{ 'crit' if vm.cpu_percent > 80 else 'hot' if vm.cpu_percent > 60 else 'okc' }}" style="width:{{ vm.cpu_percent }}%"></i></div>
+                            <span class="pct">{{ "%.1f"|format(vm.cpu_percent) }}%</span>
+                        </div>
+                        <div class="text-faint" style="font-size:10.5px">{{ vm.maxcpu }} vCPU</div>
+                    </td>
+                    <td>
+                        <div class="usage-cell">
+                            <div class="ubar"><i class="{{ 'crit' if vm.mem_percent > 80 else 'hot' if vm.mem_percent > 60 else 'okc' }}" style="width:{{ vm.mem_percent }}%"></i></div>
+                            <span class="pct">{{ "%.1f"|format(vm.mem_percent) }}%</span>
+                        </div>
+                        <div class="text-faint" style="font-size:10.5px">{% if vm.maxmem %}{{ (vm.maxmem / 1024 / 1024 / 1024)|round(1) }} GB{% else %}N/A{% endif %}</div>
+                    </td>
+                    <td>
+                        <div class="act-row">
+                            <a href="{{ url_for('vm_detail', node=vm.node, vmid=vm.vmid) }}" class="act-btn" title="Details"><i class="bi bi-info-circle"></i></a>
+                            {% if vm.get('template') == 1 %}
+                            <a href="{{ url_for('vm_clone', node=vm.node, vmid=vm.vmid) }}" class="act-btn pri" title="Clone"><i class="bi bi-files"></i></a>
+                            {% else %}
+                                {% if vm.type == 'qemu' and vm.status == 'running' %}
+                                <a href="{{ url_for('vm_console', node=vm.node, vmid=vm.vmid) }}" class="act-btn pri" title="Console"><i class="bi bi-terminal"></i></a>
+                                {% endif %}
+                                {% if vm.status == 'stopped' %}
+                                <form method="POST" action="{{ url_for('vm_action', node=vm.node, vmid=vm.vmid, action='start') }}" class="d-inline">
+                                    <button type="submit" class="act-btn go" title="Start"><i class="bi bi-play-fill"></i></button>
+                                </form>
+                                {% else %}
+                                <form method="POST" action="{{ url_for('vm_action', node=vm.node, vmid=vm.vmid, action='shutdown') }}" class="d-inline">
+                                    <button type="submit" class="act-btn stopc" title="Shutdown"><i class="bi bi-power"></i></button>
+                                </form>
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% if not resources %}
+        <div class="empty-hint"><i class="bi bi-inbox" style="font-size:26px"></i><div class="mt-2">No guests found.</div></div>
+        {% endif %}
+    </div>
 </div>
 {% endblock %}
 
-{% block scripts %}{% endblock %}
\ No newline at end of file
+{% block scripts %}{% endblock %}
diff --git a/tests/test_integration.py b/tests/test_integration.py
index d8d5d05..a0a19f0 100644
--- a/tests/test_integration.py
+++ b/tests/test_integration.py
@@ -248,7 +248,7 @@ def test_vm_creation_workflow(self, mock_get_connection):
         app.cluster_nodes.append({"name": "test-node", "status": "online"})
 
         # Test VM creation form
-        response = self.client.get("/create_vm")
+        response = self.client.get("/create")
         self.assertEqual(response.status_code, 200)
 
         # Test VM creation POST
@@ -266,7 +266,7 @@ def test_vm_creation_workflow(self, mock_get_connection):
             "bridge": "vmbr0",
         }
 
-        response = self.client.post("/create_vm", data=vm_data)
+        response = self.client.post("/create", data=vm_data)
         # Should redirect on success
         self.assertEqual(response.status_code, 302)