From 165a202ba4c61e993113d3ed6f7d187f5bc56b76 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 18 Mar 2026 23:37:46 -0400
Subject: [PATCH] feat: UI redesign (CSS system, DNS widget, Traefik dashboard
 widget)

- Replace base.html style block with full CSS design system using custom properties (dark theme, cards, tables, badges, dots, widgets)
- Add DNS blueprint (fablednetmon/dns/) with /dns/ and /dns/rows routes + templates
- Add Traefik /widget route and widget.html fragment for dashboard
- Update dashboard: DNS + Traefik widgets, traefik_enabled config detection
- Update all templates to use new CSS classes (page-title, section-title, card-flush, table, badge-*, dot-*, btn-*)
- Register dns_bp in app.py

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 fablednetmon/app.py                           |   2 +
 fablednetmon/dashboard/routes.py              |  15 +-
 fablednetmon/dns/__init__.py                  |   0
 fablednetmon/dns/routes.py                    |  52 ++++++
 fablednetmon/templates/alerts/list.html       |  78 ++++-----
 fablednetmon/templates/alerts/rules_form.html |   8 +-
 fablednetmon/templates/ansible/browse.html    |  37 ++--
 fablednetmon/templates/ansible/index.html     |  36 ++--
 .../templates/ansible/run_detail.html         |   2 +-
 fablednetmon/templates/auth/login.html        |   4 +-
 fablednetmon/templates/auth/setup.html        |   6 +-
 fablednetmon/templates/base.html              | 163 ++++++++++++++----
 fablednetmon/templates/dashboard/index.html   |  99 +++++++----
 fablednetmon/templates/dns/index.html         |  16 ++
 fablednetmon/templates/dns/rows.html          |  29 ++++
 fablednetmon/templates/hosts/form.html        |   8 +-
 fablednetmon/templates/hosts/list.html        |  68 ++++----
 fablednetmon/templates/ping/index.html        |  10 +-
 fablednetmon/templates/settings/index.html    |  18 +-
 plugins/traefik/routes.py                     |  23 +++
 plugins/traefik/templates/traefik/index.html  |  28 +--
 plugins/traefik/templates/traefik/widget.html |  29 ++++
 22 files changed, 495 insertions(+), 236 deletions(-)
 create mode 100644 fablednetmon/dns/__init__.py
 create mode 100644 fablednetmon/dns/routes.py
 create mode 100644 fablednetmon/templates/dns/index.html
 create mode 100644 fablednetmon/templates/dns/rows.html
 create mode 100644 plugins/traefik/templates/traefik/widget.html

diff --git a/fablednetmon/app.py b/fablednetmon/app.py
index ca2770b..9007194 100644
--- a/fablednetmon/app.py
+++ b/fablednetmon/app.py
@@ -87,6 +87,7 @@ def create_app(
     from .dashboard.routes import dashboard_bp
     from .hosts.routes import hosts_bp
     from .ping.routes import ping_bp
+    from .dns.routes import dns_bp
     from .alerts.routes import alerts_bp
     from .ansible.routes import ansible_bp
     from .settings.routes import settings_bp
@@ -95,6 +96,7 @@ def create_app(
     app.register_blueprint(dashboard_bp)
     app.register_blueprint(hosts_bp)
     app.register_blueprint(ping_bp)
+    app.register_blueprint(dns_bp)
     app.register_blueprint(alerts_bp)
     app.register_blueprint(ansible_bp)
     app.register_blueprint(settings_bp)
diff --git a/fablednetmon/dashboard/routes.py b/fablednetmon/dashboard/routes.py
index 95b5472..dc1cd63 100644
--- a/fablednetmon/dashboard/routes.py
+++ b/fablednetmon/dashboard/routes.py
@@ -16,8 +16,7 @@ async def index():
         # Latest ping per host
         latest_ping_subq = (
             select(PingResult.host_id, func.max(PingResult.probed_at).label("max_at"))
-            .group_by(PingResult.host_id)
-            .subquery()
+            .group_by(PingResult.host_id).subquery()
         )
         pr = await db.execute(
             select(PingResult).join(
@@ -33,8 +32,7 @@ async def index():
         # Latest DNS per host
         latest_dns_subq = (
             select(DnsResult.host_id, func.max(DnsResult.resolved_at).label("max_at"))
-            .group_by(DnsResult.host_id)
-            .subquery()
+            .group_by(DnsResult.host_id).subquery()
         )
         dr = await db.execute(
             select(DnsResult).join(
@@ -49,14 +47,15 @@ async def index():
 
         total_hosts = (await db.execute(select(func.count()).select_from(Host))).scalar()
 
+    plugins = current_app.config.get("PLUGINS", {})
+    traefik_enabled = plugins.get("traefik", {}).get("enabled", False)
     poll_interval = current_app.config.get("MONITORS_POLL_INTERVAL", 60)
 
     return await render_template(
         "dashboard/index.html",
-        ping_up=ping_up,
-        ping_down=ping_down,
-        dns_ok=dns_ok,
-        dns_fail=dns_fail,
+        ping_up=ping_up, ping_down=ping_down,
+        dns_ok=dns_ok, dns_fail=dns_fail,
         total_hosts=total_hosts,
+        traefik_enabled=traefik_enabled,
         poll_interval=poll_interval,
     )
diff --git a/fablednetmon/dns/__init__.py b/fablednetmon/dns/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/fablednetmon/dns/routes.py b/fablednetmon/dns/routes.py
new file mode 100644
index 0000000..8fbcd25
--- /dev/null
+++ b/fablednetmon/dns/routes.py
@@ -0,0 +1,52 @@
+from __future__ import annotations
+from quart import Blueprint, current_app, render_template
+from sqlalchemy import select, func
+from fablednetmon.auth.middleware import require_role
+from fablednetmon.models.users import UserRole
+from fablednetmon.models.hosts import Host
+from fablednetmon.models.monitors import DnsResult
+
+dns_bp = Blueprint("dns", __name__, url_prefix="/dns")
+
+
+async def _latest_dns(db, host_ids: list[str]) -> dict:
+    if not host_ids:
+        return {}
+    subq = (
+        select(DnsResult.host_id, func.max(DnsResult.resolved_at).label("max_at"))
+        .where(DnsResult.host_id.in_(host_ids))
+        .group_by(DnsResult.host_id)
+        .subquery()
+    )
+    pr = await db.execute(
+        select(DnsResult).join(
+            subq,
+            (DnsResult.host_id == subq.c.host_id) & (DnsResult.resolved_at == subq.c.max_at),
+        )
+    )
+    return {r.host_id: r for r in pr.scalars()}
+
+
+@dns_bp.get("/")
+@require_role(UserRole.viewer)
+async def index():
+    async with current_app.db_sessionmaker() as db:
+        result = await db.execute(
+            select(Host).where(Host.dns_enabled.is_(True)).order_by(Host.name)
+        )
+        hosts = result.scalars().all()
+        latest = await _latest_dns(db, [h.id for h in hosts])
+    poll_interval = current_app.config.get("MONITORS_POLL_INTERVAL", 60)
+    return await render_template("dns/index.html", hosts=hosts, latest=latest, poll_interval=poll_interval)
+
+
+@dns_bp.get("/rows")
+@require_role(UserRole.viewer)
+async def rows():
+    async with current_app.db_sessionmaker() as db:
+        result = await db.execute(
+            select(Host).where(Host.dns_enabled.is_(True)).order_by(Host.name)
+        )
+        hosts = result.scalars().all()
+        latest = await _latest_dns(db, [h.id for h in hosts])
+    return await render_template("dns/rows.html", hosts=hosts, latest=latest)
diff --git a/fablednetmon/templates/alerts/list.html b/fablednetmon/templates/alerts/list.html
index 4824701..be43f26 100644
--- a/fablednetmon/templates/alerts/list.html
+++ b/fablednetmon/templates/alerts/list.html
@@ -1,40 +1,40 @@
 {% extends "base.html" %}
 {% block title %}Alerts — FabledNetMon{% endblock %}
 {% block content %}
-<h1 style="color:#c0c0ff;margin-bottom:1.5rem;">Alerts</h1>
+<h1 class="page-title">Alerts</h1>
 
 {% if active %}
-<h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Active</h2>
-<div class="card" style="padding:0;margin-bottom:2rem;">
-    <table style="width:100%;border-collapse:collapse;">
+<h2 class="section-title" style="margin-bottom:1rem;">Active</h2>
+<div class="card-flush" style="margin-bottom:2rem;">
+    <table class="table">
         <thead>
-            <tr style="border-bottom:1px solid #2a2a4a;">
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">State</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Rule</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Resource</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Metric</th>
-                <th style="padding:0.75rem 1rem;"></th>
+            <tr>
+                <th>State</th>
+                <th>Rule</th>
+                <th>Resource</th>
+                <th>Metric</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
             {% for state, rule in active %}
-            <tr style="border-bottom:1px solid #1a1a3a;">
-                <td style="padding:0.75rem 1rem;">
+            <tr>
+                <td>
                     {% if state.state.value == 'firing' %}
-                    <span style="color:#ff6060;font-weight:bold;">FIRING</span>
+                    <span class="badge badge-red">FIRING</span>
                     {% elif state.state.value == 'acknowledged' %}
-                    <span style="color:#ffa040;">ACK</span>
+                    <span class="badge badge-yellow">ACK</span>
                     {% else %}
-                    <span style="color:#a0a0a0;">PENDING</span>
+                    <span class="badge badge-dim">PENDING</span>
                     {% endif %}
                 </td>
-                <td style="padding:0.75rem 1rem;">{{ rule.name }}</td>
-                <td style="padding:0.75rem 1rem;color:#a0a0c0;">{{ rule.resource_name }}</td>
-                <td style="padding:0.75rem 1rem;color:#a0a0c0;">{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}</td>
-                <td style="padding:0.75rem 1rem;text-align:right;">
+                <td>{{ rule.name }}</td>
+                <td style="color:var(--text-muted);">{{ rule.resource_name }}</td>
+                <td style="color:var(--text-muted);">{{ rule.metric_name }} {{ rule.operator.value }} {{ rule.threshold }}</td>
+                <td class="td-actions">
                     {% if state.state.value == 'firing' %}
                     <form method="post" action="/alerts/{{ rule.id }}/acknowledge" style="display:inline;">
-                        <button type="submit" class="btn" style="background:#605010;">Acknowledge</button>
+                        <button type="submit" class="btn btn-sm btn-warn">Acknowledge</button>
                     </form>
                     {% endif %}
                 </td>
@@ -44,40 +44,40 @@
     </table>
 </div>
 {% else %}
-<p style="color:#606080;margin-bottom:2rem;">No active alerts.</p>
+<p style="color:var(--text-muted);margin-bottom:2rem;">No active alerts.</p>
 {% endif %}
 
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
-    <h2 style="color:#8080ff;font-size:1rem;">Rules</h2>
+    <h2 class="section-title">Rules</h2>
     <a class="btn" href="/alerts/rules/new">New Rule</a>
 </div>
 {% if rules %}
-<div class="card" style="padding:0;">
-    <table style="width:100%;border-collapse:collapse;">
+<div class="card-flush">
+    <table class="table">
         <thead>
-            <tr style="border-bottom:1px solid #2a2a4a;">
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Name</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Condition</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Consec.</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Enabled</th>
-                <th style="padding:0.75rem 1rem;"></th>
+            <tr>
+                <th>Name</th>
+                <th>Condition</th>
+                <th>Consec.</th>
+                <th>Enabled</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
             {% for rule in rules %}
-            <tr style="border-bottom:1px solid #1a1a3a;">
-                <td style="padding:0.75rem 1rem;">{{ rule.name }}</td>
-                <td style="padding:0.75rem 1rem;color:#a0a0c0;">
+            <tr>
+                <td>{{ rule.name }}</td>
+                <td style="color:var(--text-muted);">
                     {{ rule.source_module }}/{{ rule.resource_name }}:{{ rule.metric_name }}
                     {{ rule.operator.value }} {{ rule.threshold }}
                 </td>
-                <td style="padding:0.75rem 1rem;color:#a0a0c0;">{{ rule.consecutive_failures_required }}</td>
-                <td style="padding:0.75rem 1rem;">
-                    {% if rule.enabled %}<span style="color:#60c060;">yes</span>{% else %}<span style="color:#606060;">no</span>{% endif %}
+                <td style="color:var(--text-muted);">{{ rule.consecutive_failures_required }}</td>
+                <td>
+                    {% if rule.enabled %}<span class="badge badge-green">yes</span>{% else %}<span class="badge badge-dim">no</span>{% endif %}
                 </td>
-                <td style="padding:0.75rem 1rem;text-align:right;">
+                <td class="td-actions">
                     <form method="post" action="/alerts/rules/{{ rule.id }}/delete" style="display:inline;">
-                        <button type="submit" style="background:none;border:none;color:#ff6060;cursor:pointer;"
+                        <button type="submit" class="btn btn-sm btn-danger"
                             onclick="return confirm('Delete rule {{ rule.name }}?')">Delete</button>
                     </form>
                 </td>
@@ -87,6 +87,6 @@
     </table>
 </div>
 {% else %}
-<p style="color:#606080;">No alert rules configured.</p>
+<p style="color:var(--text-muted);">No alert rules configured.</p>
 {% endif %}
 {% endblock %}
diff --git a/fablednetmon/templates/alerts/rules_form.html b/fablednetmon/templates/alerts/rules_form.html
index 6a7bbcf..6c5d23f 100644
--- a/fablednetmon/templates/alerts/rules_form.html
+++ b/fablednetmon/templates/alerts/rules_form.html
@@ -2,7 +2,7 @@
 {% block title %}New Alert Rule — FabledNetMon{% endblock %}
 {% block content %}
 <div style="max-width:560px;margin:2rem auto;">
-    <h1 style="color:#c0c0ff;margin-bottom:1.5rem;">New Alert Rule</h1>
+    <h1 class="page-title">New Alert Rule</h1>
     <div class="card">
         <form method="post" action="/alerts/rules">
             <div class="form-group">
@@ -24,7 +24,7 @@
             <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                 <div class="form-group">
                     <label>Operator</label>
-                    <select name="operator" style="width:100%;padding:0.5rem 0.75rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;">
+                    <select name="operator">
                         {% for val, label in operators %}
                         <option value="{{ val }}">{{ label }}</option>
                         {% endfor %}
@@ -40,8 +40,8 @@
                 <input type="number" name="consecutive_failures_required" value="1" min="1">
             </div>
             <div style="display:flex;gap:1rem;margin-top:1.5rem;">
-                <button type="submit">Create Rule</button>
-                <a href="/alerts/" style="padding:0.5rem 1rem;color:#a0a0c0;text-decoration:none;">Cancel</a>
+                <button type="submit" class="btn">Create Rule</button>
+                <a href="/alerts/" class="btn btn-ghost">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/fablednetmon/templates/ansible/browse.html b/fablednetmon/templates/ansible/browse.html
index 19f5e2b..4c66689 100644
--- a/fablednetmon/templates/ansible/browse.html
+++ b/fablednetmon/templates/ansible/browse.html
@@ -2,14 +2,14 @@
 {% block title %}Browse Playbooks — FabledNetMon{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-    <h1 style="color:#c0c0ff;">Browse Playbooks</h1>
+    <h1 class="page-title" style="margin-bottom:0;">Browse Playbooks</h1>
     <a href="/ansible/" style="color:#a0a0ff;font-size:0.9rem;">← Run History</a>
 </div>
 
 {% if view_contents is defined %}
 <div class="card">
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
-        <h3 style="color:#8080ff;">{{ view_path }}</h3>
+        <h3 class="section-title">{{ view_path }}</h3>
         <a href="/ansible/browse" style="color:#a0a0ff;font-size:0.85rem;">← Back to browse</a>
     </div>
     <pre style="background:#0a0a1a;padding:1rem;border-radius:4px;overflow-x:auto;font-size:0.8rem;color:#c0c0c0;max-height:600px;overflow-y:auto;">{{ view_contents }}</pre>
@@ -26,7 +26,7 @@
 {% for sd in source_data %}
 <div class="card" style="margin-bottom:1.5rem;">
     <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
-        <h3 style="color:#8080ff;">{{ sd.source.name }}</h3>
+        <h3 class="section-title">{{ sd.source.name }}</h3>
         <span style="color:#404060;font-size:0.8rem;background:#12122a;padding:0.2rem 0.5rem;border-radius:3px;">{{ sd.source.type }}</span>
         <span style="color:#505070;font-size:0.8rem;">{{ sd.source.path }}</span>
     </div>
@@ -34,25 +34,25 @@
     {% if not sd.playbooks %}
     <p style="color:#606080;font-size:0.9rem;">No playbooks found at this path.</p>
     {% else %}
-    <table style="width:100%;border-collapse:collapse;margin-bottom:1rem;">
+    <table class="table" style="margin-bottom:1rem;">
         <thead>
-            <tr style="background:#12122a;">
-                <th style="padding:0.5rem 0.75rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.82rem;">Playbook</th>
-                <th style="padding:0.5rem 0.75rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.82rem;width:120px;"></th>
+            <tr>
+                <th>Playbook</th>
+                <th style="width:120px;"></th>
             </tr>
         </thead>
         <tbody>
         {% for pb in sd.playbooks %}
-        <tr style="border-top:1px solid #1a1a3a;">
-            <td style="padding:0.5rem 0.75rem;color:#c0c0e0;font-size:0.88rem;font-family:monospace;">{{ pb }}</td>
-            <td style="padding:0.5rem 0.75rem;">
-                <a href="/ansible/browse/{{ sd.source.name }}/{{ pb }}" style="color:#6060c0;font-size:0.82rem;margin-right:0.75rem;">View</a>
+        <tr>
+            <td style="font-family:ui-monospace,monospace;font-size:0.88rem;">{{ pb }}</td>
+            <td class="td-actions">
+                <a href="/ansible/browse/{{ sd.source.name }}/{{ pb }}" class="btn btn-sm btn-ghost" style="margin-right:0.5rem;">View</a>
                 <a href="#run-form-{{ sd.source.name }}"
                    onclick="document.getElementById('run-form-{{ sd.source.name }}').style.display='block';
                             document.getElementById('run-playbook-{{ sd.source.name }}').value='{{ pb }}';
                             document.getElementById('run-playbook-display-{{ sd.source.name }}').value='{{ pb }}';
                             return false;"
-                   style="color:#a0a0ff;font-size:0.82rem;">Run</a>
+                   class="btn btn-sm btn-ghost">Run</a>
             </td>
         </tr>
         {% endfor %}
@@ -60,19 +60,19 @@
     </table>
 
     {# Run trigger form for this source #}
-    <div id="run-form-{{ sd.source.name }}" style="display:none;background:#12122a;border-radius:4px;padding:1rem;border:1px solid #2a2a4a;">
-        <h4 style="color:#8080ff;margin-bottom:0.75rem;">Trigger Run</h4>
+    <div id="run-form-{{ sd.source.name }}" style="display:none;background:var(--bg-elevated);border-radius:6px;padding:1rem;border:1px solid var(--border-mid);">
+        <h4 class="section-title" style="margin-bottom:0.75rem;">Trigger Run</h4>
         <form hx-post="/ansible/runs" hx-target="#run-result-{{ sd.source.name }}" hx-swap="innerHTML">
             <input type="hidden" name="source_name" value="{{ sd.source.name }}">
             <input type="hidden" id="run-playbook-{{ sd.source.name }}" name="playbook_path" value="">
             <div class="form-group">
                 <label>Playbook</label>
                 <input type="text" id="run-playbook-display-{{ sd.source.name }}"
-                       readonly style="color:#8080a0;" value="">
+                       readonly style="color:var(--text-muted);" value="">
             </div>
             <div class="form-group">
                 <label>Inventory</label>
-                <select name="inventory_path" style="width:100%;padding:0.5rem 0.75rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;font-size:1rem;">
+                <select name="inventory_path">
                     {% for inv in sd.inventories %}
                     <option value="{{ inv }}">{{ inv }}</option>
                     {% endfor %}
@@ -81,8 +81,7 @@
             </div>
             <div class="form-group">
                 <label>Or enter inventory path manually</label>
-                <input type="text" id="manual-inv-{{ sd.source.name }}" placeholder="inventories/production/hosts"
-                       style="color:#c0c0e0;">
+                <input type="text" id="manual-inv-{{ sd.source.name }}" placeholder="inventories/production/hosts">
             </div>
             <div style="display:flex;gap:0.75rem;align-items:center;">
                 <button type="button" class="btn"
@@ -90,7 +89,7 @@
                              if(manual){this.closest('form').querySelector('[name=inventory_path]').value=manual;}
                              htmx.trigger(this.closest('form'),'submit');">Execute</button>
                 <a href="#" onclick="document.getElementById('run-form-{{ sd.source.name }}').style.display='none';return false;"
-                   style="color:#606080;font-size:0.9rem;">Cancel</a>
+                   class="btn btn-ghost btn-sm">Cancel</a>
             </div>
         </form>
         <div id="run-result-{{ sd.source.name }}" style="margin-top:1rem;"></div>
diff --git a/fablednetmon/templates/ansible/index.html b/fablednetmon/templates/ansible/index.html
index 03f7e0a..406a4a2 100644
--- a/fablednetmon/templates/ansible/index.html
+++ b/fablednetmon/templates/ansible/index.html
@@ -2,37 +2,37 @@
 {% block title %}Ansible Runs — FabledNetMon{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-    <h1 style="color:#c0c0ff;">Ansible Runs</h1>
+    <h1 class="page-title" style="margin-bottom:0;">Ansible Runs</h1>
     <a href="/ansible/browse" class="btn">Browse Playbooks</a>
 </div>
 {% if not runs %}
 <div class="card">
-    <p style="color:#606080;">No runs yet. <a href="/ansible/browse" style="color:#a0a0ff;">Browse playbooks</a> to trigger a run.</p>
+    <p style="color:var(--text-muted);">No runs yet. <a href="/ansible/browse">Browse playbooks</a> to trigger a run.</p>
 </div>
 {% else %}
-<div class="card" style="padding:0;overflow:hidden;">
-<table style="width:100%;border-collapse:collapse;">
+<div class="card-flush">
+<table class="table">
     <thead>
-        <tr style="background:#12122a;">
-            <th style="padding:0.75rem 1rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.85rem;">Playbook</th>
-            <th style="padding:0.75rem 1rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.85rem;">Source</th>
-            <th style="padding:0.75rem 1rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.85rem;">Status</th>
-            <th style="padding:0.75rem 1rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.85rem;">Started</th>
-            <th style="padding:0.75rem 1rem;text-align:left;color:#a0a0c0;font-weight:normal;font-size:0.85rem;"></th>
+        <tr>
+            <th>Playbook</th>
+            <th>Source</th>
+            <th>Status</th>
+            <th>Started</th>
+            <th></th>
         </tr>
     </thead>
     <tbody>
     {% for run in runs %}
-    {% set status_color = {"running": "#a0a000", "success": "#40a040", "failed": "#a04040", "interrupted": "#806040"}.get(run.status.value, "#808080") %}
-    <tr style="border-top:1px solid #2a2a4a;">
-        <td style="padding:0.75rem 1rem;color:#e0e0e0;font-size:0.9rem;">{{ run.playbook_path }}</td>
-        <td style="padding:0.75rem 1rem;color:#8080a0;font-size:0.9rem;">{{ run.source_name }}</td>
-        <td style="padding:0.75rem 1rem;">
+    {% set status_color = {"running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
+    <tr>
+        <td style="font-size:0.9rem;">{{ run.playbook_path }}</td>
+        <td style="color:var(--text-muted);font-size:0.9rem;">{{ run.source_name }}</td>
+        <td>
             <span style="color:{{ status_color }};font-size:0.85rem;font-weight:bold;">{{ run.status.value.upper() }}</span>
         </td>
-        <td style="padding:0.75rem 1rem;color:#606080;font-size:0.85rem;">{{ run.started_at.strftime("%Y-%m-%d %H:%M") }}</td>
-        <td style="padding:0.75rem 1rem;">
-            <a href="/ansible/runs/{{ run.id }}" style="color:#a0a0ff;font-size:0.85rem;">View</a>
+        <td style="color:var(--text-muted);font-size:0.85rem;">{{ run.started_at.strftime("%Y-%m-%d %H:%M") }}</td>
+        <td class="td-actions">
+            <a href="/ansible/runs/{{ run.id }}" class="btn btn-sm btn-ghost">View</a>
         </td>
     </tr>
     {% endfor %}
diff --git a/fablednetmon/templates/ansible/run_detail.html b/fablednetmon/templates/ansible/run_detail.html
index 1c6cf28..1d54b5f 100644
--- a/fablednetmon/templates/ansible/run_detail.html
+++ b/fablednetmon/templates/ansible/run_detail.html
@@ -3,7 +3,7 @@
 {% block content %}
 <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
     <a href="/ansible/" style="color:#6060c0;font-size:0.9rem;">← Runs</a>
-    <h1 style="color:#c0c0ff;">Run Detail</h1>
+    <h1 class="page-title" style="margin-bottom:0;">Run Detail</h1>
 </div>
 
 {% set status_color = {"running": "#a0a000", "success": "#40a040", "failed": "#a04040", "interrupted": "#806040"}.get(run.status.value, "#808080") %}
diff --git a/fablednetmon/templates/auth/login.html b/fablednetmon/templates/auth/login.html
index 0fdd7d3..9712833 100644
--- a/fablednetmon/templates/auth/login.html
+++ b/fablednetmon/templates/auth/login.html
@@ -3,7 +3,7 @@
 {% block content %}
 <div style="max-width:400px;margin:4rem auto;">
     <div class="card">
-        <h2 style="margin-bottom:1.5rem;color:#c0c0ff;">Sign In</h2>
+        <h2 class="page-title">Sign In</h2>
         <form method="post" action="/login">
             <div class="form-group">
                 <label>Username</label>
@@ -13,7 +13,7 @@
                 <label>Password</label>
                 <input type="password" name="password" required>
             </div>
-            <button type="submit">Sign In</button>
+            <button type="submit" class="btn">Sign In</button>
         </form>
     </div>
 </div>
diff --git a/fablednetmon/templates/auth/setup.html b/fablednetmon/templates/auth/setup.html
index 7a73b92..0e19dd3 100644
--- a/fablednetmon/templates/auth/setup.html
+++ b/fablednetmon/templates/auth/setup.html
@@ -3,8 +3,8 @@
 {% block content %}
 <div style="max-width:400px;margin:4rem auto;">
     <div class="card">
-        <h2 style="margin-bottom:0.5rem;color:#c0c0ff;">First-Run Setup</h2>
-        <p style="margin-bottom:1.5rem;color:#8080a0;font-size:0.9rem;">Create the initial admin account.</p>
+        <h2 class="page-title" style="margin-bottom:0.5rem;">First-Run Setup</h2>
+        <p style="margin-bottom:1.5rem;color:var(--text-muted);font-size:0.9rem;">Create the initial admin account.</p>
         <form method="post" action="/setup">
             <div class="form-group">
                 <label>Username</label>
@@ -18,7 +18,7 @@
                 <label>Password</label>
                 <input type="password" name="password" required>
             </div>
-            <button type="submit">Create Admin Account</button>
+            <button type="submit" class="btn">Create Admin Account</button>
         </form>
     </div>
 </div>
diff --git a/fablednetmon/templates/base.html b/fablednetmon/templates/base.html
index f25617a..c5a8dbd 100644
--- a/fablednetmon/templates/base.html
+++ b/fablednetmon/templates/base.html
@@ -6,43 +6,129 @@
     <title>{% block title %}FabledNetMon{% endblock %}</title>
     <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
     <style>
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body { font-family: system-ui, sans-serif; background: #0f0f0f; color: #e0e0e0; }
-        nav { background: #1a1a2e; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid #2a2a4a; }
-        nav a { color: #a0a0ff; text-decoration: none; font-size: 0.9rem; }
-        nav .brand { font-weight: bold; color: #c0c0ff; font-size: 1.1rem; margin-right: auto; }
-        main { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
-        .alert { padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
-        .alert-error { background: #3a1a1a; border: 1px solid #8b2020; color: #ffaaaa; }
-        .card { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 6px; padding: 1.25rem; margin-bottom: 1rem; }
-        .form-group { margin-bottom: 1rem; }
-        label { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; color: #a0a0c0; }
-        input[type=text], input[type=email], input[type=password] {
-            width: 100%; padding: 0.5rem 0.75rem; background: #0f0f1e; border: 1px solid #3a3a5a;
-            border-radius: 4px; color: #e0e0e0; font-size: 1rem;
-        }
-        button[type=submit], .btn {
-            padding: 0.5rem 1.25rem; background: #4040a0; color: #fff; border: none;
-            border-radius: 4px; cursor: pointer; font-size: 0.95rem;
-        }
-        button[type=submit]:hover, .btn:hover { background: #5050c0; }
-        /* Ping pills */
-        .ping-card { padding: 0.75rem 1.25rem; }
-        .ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid #161626; }
-        .ping-row:last-child { border-bottom:none; }
-        .ping-meta { min-width:160px; flex-shrink:0; }
-        .ping-name { font-size:0.9rem; }
-        .ping-addr { display:block; color:#505070; font-size:0.75rem; }
-        .ping-pills { display:flex; gap:2px; flex:1; align-items:center; }
-        .pill { display:inline-block; width:7px; height:22px; border-radius:2px; cursor:default; transition:opacity .1s; }
-        .pill:hover { opacity:.75; }
-        .pill-empty { background:#1a1a28; }
-        .ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
-        .ping-cur-good { color:#22aa44; }
-        .ping-cur-warn { color:#ccaa20; }
-        .ping-cur-bad  { color:#dd6020; }
-        .ping-cur-down { color:#cc2020; font-weight:bold; }
-        .ping-cur-nd   { color:#404060; }
+:root {
+  --bg: #09091a;
+  --bg-card: #111126;
+  --bg-elevated: #17173a;
+  --border: #21213d;
+  --border-mid: #2a2a4a;
+  --text: #d4d8f0;
+  --text-muted: #6870a0;
+  --text-dim: #30305a;
+  --accent: #5b5ef4;
+  --accent-hover: #7274f8;
+  --green: #26d96b;
+  --green-dim: #0e3a1e;
+  --yellow: #e6b818;
+  --yellow-dim: #3a3000;
+  --orange: #e07828;
+  --orange-dim: #3a1e00;
+  --red: #e83848;
+  --red-dim: #3a0e14;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--accent-hover); }
+code { font-family: ui-monospace, monospace; font-size: 0.875em; background: var(--bg-elevated); padding: 0.1em 0.35em; border-radius: 3px; }
+
+/* Nav */
+nav { background: var(--bg-card); padding: 0 1.5rem; display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border-mid); height: 48px; }
+nav .brand { font-weight: 700; color: #a0a8f8; font-size: 1rem; margin-right: 2rem; letter-spacing: -0.02em; }
+nav a { color: var(--text-muted); font-size: 0.875rem; padding: 0 0.875rem; height: 48px; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
+nav a:hover { color: var(--text); border-bottom-color: var(--border-mid); }
+nav a.nav-end { margin-left: auto; }
+
+/* Layout */
+main { padding: 1.5rem; max-width: 1280px; margin: 0 auto; }
+
+/* Alerts */
+.alert { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; }
+.alert-error { background: var(--red-dim); border: 1px solid #6a1820; color: #ffb0b8; }
+.alert-success { background: var(--green-dim); border: 1px solid #1a5a28; color: #90f0b0; }
+
+/* Cards */
+.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
+.card-flush { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
+
+/* Typography */
+.page-title { font-size: 1.5rem; font-weight: 600; color: #b0b8f8; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
+.section-title { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
+
+/* Tables */
+.table { width: 100%; border-collapse: collapse; }
+.table th { text-align: left; padding: 0.6rem 1rem; color: var(--text-muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-mid); }
+.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
+.table tbody tr:last-child td { border-bottom: none; }
+.table tbody tr:hover td { background: var(--bg-elevated); }
+.table .td-actions { text-align: right; white-space: nowrap; }
+
+/* Forms */
+.form-group { margin-bottom: 1rem; }
+label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--text-muted); }
+input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], select, textarea {
+  width: 100%; padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--border-mid);
+  border-radius: 5px; color: var(--text); font-size: 0.9rem; font-family: inherit;
+  transition: border-color .15s;
+}
+input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
+select { cursor: pointer; }
+textarea { resize: vertical; }
+
+/* Buttons */
+.btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 1rem; background: var(--accent); color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 0.875rem; font-family: inherit; font-weight: 500; transition: background .15s; text-decoration: none; }
+.btn:hover { background: var(--accent-hover); color: #fff; }
+.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
+.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); }
+.btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }
+.btn-danger { background: #7a1820; color: #ffb0b0; }
+.btn-danger:hover { background: #9a2030; }
+.btn-warn { background: var(--yellow-dim); color: var(--yellow); border: 1px solid #6a5000; }
+.btn-warn:hover { background: #4a4000; }
+
+/* Badges / Status */
+.badge { display: inline-block; padding: 0.2em 0.55em; border-radius: 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; }
+.badge-green  { background: var(--green-dim);  color: var(--green); }
+.badge-red    { background: var(--red-dim);    color: #ff8090; }
+.badge-yellow { background: var(--yellow-dim); color: var(--yellow); }
+.badge-orange { background: var(--orange-dim); color: var(--orange); }
+.badge-dim    { background: var(--bg-elevated); color: var(--text-muted); }
+.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.dot-up   { background: var(--green); box-shadow: 0 0 4px var(--green); }
+.dot-down { background: var(--red); }
+.dot-warn { background: var(--yellow); }
+.dot-dim  { background: var(--text-dim); }
+
+/* Empty state */
+.empty { color: var(--text-muted); font-size: 0.9rem; padding: 2rem; text-align: center; }
+
+/* Stat cards (dashboard) */
+.stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
+.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.3rem; }
+
+/* Ping pills */
+.ping-card { padding: 0.75rem 1.25rem; }
+.ping-row { display:flex; align-items:center; gap:1rem; padding:0.45rem 0; border-bottom:1px solid var(--border); }
+.ping-row:last-child { border-bottom:none; }
+.ping-meta { min-width:160px; flex-shrink:0; }
+.ping-name { font-size:0.875rem; font-weight: 500; }
+.ping-addr { display:block; color:var(--text-muted); font-size:0.75rem; }
+.ping-pills { display:flex; gap:2px; flex:1; align-items:center; }
+.pill { display:inline-block; width:7px; height:22px; border-radius:2px; cursor:default; transition:opacity .1s; }
+.pill:hover { opacity:.75; }
+.pill-empty { background:var(--bg-elevated); }
+.ping-cur { min-width:72px; text-align:right; font-size:0.85rem; font-variant-numeric:tabular-nums; }
+.ping-cur-good { color:var(--green); }
+.ping-cur-warn { color:var(--yellow); }
+.ping-cur-bad  { color:var(--orange); }
+.ping-cur-down { color:var(--red); font-weight:bold; }
+.ping-cur-nd   { color:var(--text-dim); }
+
+/* Widget headers */
+.widget-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
+.widget-title { font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
+.widget-link { font-size:0.8rem; color:var(--text-muted); }
+.widget-link:hover { color:var(--text); }
     </style>
     {% block head %}{% endblock %}
 </head>
@@ -53,12 +139,13 @@
         <a href="/">Dashboard</a>
         <a href="/hosts/">Hosts</a>
         <a href="/ping/">Ping</a>
+        <a href="/dns/">DNS</a>
         <a href="/alerts/">Alerts</a>
         <a href="/ansible/">Ansible</a>
         {% if session.user_role == 'admin' %}
         <a href="/settings/">Settings</a>
         {% endif %}
-        <a href="/logout">Logout ({{ session.username }})</a>
+        <a href="/logout" class="nav-end">{{ session.username }}</a>
     </nav>
     {% endif %}
     <main>
diff --git a/fablednetmon/templates/dashboard/index.html b/fablednetmon/templates/dashboard/index.html
index 6371e06..98b96a2 100644
--- a/fablednetmon/templates/dashboard/index.html
+++ b/fablednetmon/templates/dashboard/index.html
@@ -1,56 +1,83 @@
 {% extends "base.html" %}
 {% block title %}Dashboard — FabledNetMon{% endblock %}
 {% block content %}
-<h1 style="margin-bottom:1.5rem;color:#c0c0ff;">Dashboard</h1>
+<h1 class="page-title">Dashboard</h1>
 
-{# ── Summary row ──────────────────────────────────────────────────────────── #}
-<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;">
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Hosts</h3>
-    <span style="font-size:1.8rem;font-weight:bold;color:#c0c0e0;">{{ total_hosts }}</span>
-    <span style="color:#505070;font-size:0.8rem;margin-left:0.3rem;">configured</span>
-    <p style="margin-top:0.4rem;"><a href="/hosts/" style="color:#6060a0;font-size:0.8rem;">Manage →</a></p>
+{# ── Summary strip ───────────────────────────────────────────────────────── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.75rem;margin-bottom:1.5rem;">
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Hosts</div>
+    <span class="stat-val">{{ total_hosts }}</span>
+    <span class="stat-label">total</span>
+    <div style="margin-top:0.5rem;"><a href="/hosts/" style="font-size:0.8rem;">Manage →</a></div>
   </div>
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Ping</h3>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Ping</div>
     {% if ping_up + ping_down == 0 %}
-    <p style="color:#505070;font-size:0.85rem;"><a href="/hosts/" style="color:#a0a0ff;">Enable ping</a> on a host.</p>
+      <span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
     {% else %}
-    <div style="display:flex;gap:1rem;align-items:baseline;">
-      <div><span style="font-size:1.8rem;font-weight:bold;color:#40c040;">{{ ping_up }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">up</span></div>
-      {% if ping_down %}<div><span style="font-size:1.8rem;font-weight:bold;color:#c04040;">{{ ping_down }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">down</span></div>{% endif %}
-    </div>
+      <span class="stat-val" style="color:var(--green);">{{ ping_up }}</span><span class="stat-label">up</span>
+      {% if ping_down %}&nbsp;<span class="stat-val" style="color:var(--red);">{{ ping_down }}</span><span class="stat-label">down</span>{% endif %}
     {% endif %}
   </div>
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">DNS</h3>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">DNS</div>
     {% if dns_ok + dns_fail == 0 %}
-    <p style="color:#505070;font-size:0.85rem;"><a href="/hosts/" style="color:#a0a0ff;">Enable DNS</a> on a host.</p>
+      <span style="color:var(--text-muted);font-size:0.85rem;">No hosts</span>
     {% else %}
-    <div style="display:flex;gap:1rem;align-items:baseline;">
-      <div><span style="font-size:1.8rem;font-weight:bold;color:#40c040;">{{ dns_ok }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">ok</span></div>
-      {% if dns_fail %}<div><span style="font-size:1.8rem;font-weight:bold;color:#c04040;">{{ dns_fail }}</span><span style="color:#505070;font-size:0.8rem;margin-left:0.2rem;">failed</span></div>{% endif %}
-    </div>
+      <span class="stat-val" style="color:var(--green);">{{ dns_ok }}</span><span class="stat-label">ok</span>
+      {% if dns_fail %}&nbsp;<span class="stat-val" style="color:var(--red);">{{ dns_fail }}</span><span class="stat-label">failed</span>{% endif %}
     {% endif %}
   </div>
-  <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.5rem;font-size:0.85rem;text-transform:uppercase;letter-spacing:.05em;">Alerts</h3>
-    <p style="color:#505070;font-size:0.85rem;"><a href="/alerts/" style="color:#a0a0ff;">Configure rules →</a></p>
+  <div class="card" style="margin-bottom:0;">
+    <div class="section-title" style="margin-bottom:0.5rem;">Alerts</div>
+    <a href="/alerts/" style="font-size:0.85rem;">View rules →</a>
   </div>
 </div>
 
-{# ── Live ping widget ─────────────────────────────────────────────────────── #}
-<div class="card ping-card">
-  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
-    <h2 style="color:#8080ff;font-size:0.9rem;text-transform:uppercase;letter-spacing:.05em;">
-      Ping — last 30 probes
-    </h2>
-    <a href="/ping/" style="color:#6060a0;font-size:0.8rem;">Details &amp; settings →</a>
+{# ── Widget grid ─────────────────────────────────────────────────────────── #}
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:1rem;">
+
+  {# Ping widget #}
+  <div class="card ping-card" style="margin-bottom:0;">
+    <div class="widget-header">
+      <span class="widget-title">Ping — last 30 probes</span>
+      <a href="/ping/" class="widget-link">Details &amp; settings →</a>
+    </div>
+    <div id="ping-widget"
+         hx-get="/ping/rows"
+         hx-trigger="load, every {{ poll_interval }}s"
+         hx-swap="innerHTML">
+    </div>
   </div>
-  <div id="ping-widget"
-       hx-get="/ping/rows"
-       hx-trigger="load, every {{ poll_interval }}s"
-       hx-swap="innerHTML">
+
+  {# DNS widget #}
+  <div class="card ping-card" style="margin-bottom:0;">
+    <div class="widget-header">
+      <span class="widget-title">DNS</span>
+      <a href="/dns/" class="widget-link">Details →</a>
+    </div>
+    <div id="dns-widget"
+         hx-get="/dns/rows"
+         hx-trigger="load, every {{ poll_interval }}s"
+         hx-swap="innerHTML">
+    </div>
   </div>
+
+  {# Traefik widget — only if plugin enabled #}
+  {% if traefik_enabled %}
+  <div class="card ping-card" style="margin-bottom:0;">
+    <div class="widget-header">
+      <span class="widget-title">Traefik</span>
+      <a href="/plugins/traefik/" class="widget-link">Details →</a>
+    </div>
+    <div id="traefik-widget"
+         hx-get="/plugins/traefik/widget"
+         hx-trigger="load, every {{ poll_interval }}s"
+         hx-swap="innerHTML">
+    </div>
+  </div>
+  {% endif %}
+
 </div>
 {% endblock %}
diff --git a/fablednetmon/templates/dns/index.html b/fablednetmon/templates/dns/index.html
new file mode 100644
index 0000000..8499888
--- /dev/null
+++ b/fablednetmon/templates/dns/index.html
@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% block title %}DNS Monitor — FabledNetMon{% endblock %}
+{% block content %}
+<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
+  <h1 class="page-title" style="margin-bottom:0;">DNS Monitor</h1>
+  <span style="color:var(--text-muted);font-size:0.85rem;">polling every {{ poll_interval }}s</span>
+</div>
+<div class="card ping-card">
+  <div id="dns-rows"
+       hx-get="/dns/rows"
+       hx-trigger="every {{ poll_interval }}s"
+       hx-swap="innerHTML">
+    {% include "dns/rows.html" %}
+  </div>
+</div>
+{% endblock %}
diff --git a/fablednetmon/templates/dns/rows.html b/fablednetmon/templates/dns/rows.html
new file mode 100644
index 0000000..66d3259
--- /dev/null
+++ b/fablednetmon/templates/dns/rows.html
@@ -0,0 +1,29 @@
+{% if hosts %}
+{% for host in hosts %}
+{% set d = latest.get(host.id) %}
+<div class="ping-row">
+  <div class="ping-meta">
+    <span class="ping-name">{{ host.name }}</span>
+    <span class="ping-addr">{{ host.address }}</span>
+  </div>
+  <div style="flex:1;">
+    {% if d is none %}
+      <span style="color:var(--text-dim);font-size:0.85rem;">—</span>
+    {% elif d.status.value == 'resolved' %}
+      <span class="dot dot-up" style="margin-right:0.5rem;"></span>
+      <span style="font-size:0.85rem;color:var(--green);">{{ d.resolved_ip or 'resolved' }}</span>
+    {% else %}
+      <span class="dot dot-down" style="margin-right:0.5rem;"></span>
+      <span style="font-size:0.85rem;color:var(--red);">Failed</span>
+    {% endif %}
+  </div>
+  <div class="ping-cur">
+    {% if d %}
+      <span style="color:var(--text-muted);font-size:0.75rem;">{{ d.resolved_at.strftime('%H:%M:%S') }} UTC</span>
+    {% endif %}
+  </div>
+</div>
+{% endfor %}
+{% else %}
+<p class="empty" style="padding:0.5rem 0;">No DNS-enabled hosts. <a href="/hosts/">Enable DNS on a host →</a></p>
+{% endif %}
diff --git a/fablednetmon/templates/hosts/form.html b/fablednetmon/templates/hosts/form.html
index e58dc32..f846010 100644
--- a/fablednetmon/templates/hosts/form.html
+++ b/fablednetmon/templates/hosts/form.html
@@ -2,7 +2,7 @@
 {% block title %}{% if host %}Edit Host{% else %}New Host{% endif %} — FabledNetMon{% endblock %}
 {% block content %}
 <div style="max-width:560px;margin:2rem auto;">
-    <h1 style="color:#c0c0ff;margin-bottom:1.5rem;">{% if host %}Edit Host{% else %}Add Host{% endif %}</h1>
+    <h1 class="page-title">{% if host %}Edit Host{% else %}Add Host{% endif %}</h1>
     <div class="card">
         <form method="post" action="{% if host %}/hosts/{{ host.id }}{% else %}/hosts/{% endif %}">
             <div class="form-group">
@@ -15,7 +15,7 @@
             </div>
             <div class="form-group">
                 <label>Probe Type</label>
-                <select name="probe_type" style="width:100%;padding:0.5rem 0.75rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;">
+                <select name="probe_type">
                     {% for pt in probe_types %}
                     <option value="{{ pt.value }}" {% if host and host.probe_type == pt %}selected{% endif %}>
                         {{ pt.value | upper }}
@@ -44,8 +44,8 @@
                 <input type="text" name="dns_expected_ip" value="{{ host.dns_expected_ip if host and host.dns_expected_ip else '' }}">
             </div>
             <div style="display:flex;gap:1rem;margin-top:1.5rem;">
-                <button type="submit">{% if host %}Save{% else %}Add Host{% endif %}</button>
-                <a href="/hosts/" style="padding:0.5rem 1rem;color:#a0a0c0;text-decoration:none;">Cancel</a>
+                <button type="submit" class="btn">{% if host %}Save{% else %}Add Host{% endif %}</button>
+                <a href="/hosts/" class="btn btn-ghost">Cancel</a>
             </div>
         </form>
     </div>
diff --git a/fablednetmon/templates/hosts/list.html b/fablednetmon/templates/hosts/list.html
index 8589442..bd5e401 100644
--- a/fablednetmon/templates/hosts/list.html
+++ b/fablednetmon/templates/hosts/list.html
@@ -2,72 +2,72 @@
 {% block title %}Hosts — FabledNetMon{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-    <h1 style="color:#c0c0ff;">Hosts</h1>
+    <h1 class="page-title" style="margin-bottom:0;">Hosts</h1>
     <a class="btn" href="/hosts/new">Add Host</a>
 </div>
 {% if hosts %}
-<div class="card" style="padding:0;">
-    <table style="width:100%;border-collapse:collapse;">
+<div class="card-flush">
+    <table class="table">
         <thead>
-            <tr style="border-bottom:1px solid #2a2a4a;">
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Name</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Address</th>
-                <th style="text-align:left;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Probe</th>
-                <th style="text-align:center;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Ping</th>
-                <th style="text-align:center;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">Latency</th>
-                <th style="text-align:center;padding:0.75rem 1rem;color:#8080a0;font-weight:normal;">DNS</th>
-                <th style="padding:0.75rem 1rem;"></th>
+            <tr>
+                <th>Name</th>
+                <th>Address</th>
+                <th>Probe</th>
+                <th style="text-align:center;">Ping</th>
+                <th style="text-align:center;">Latency</th>
+                <th style="text-align:center;">DNS</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
             {% for host in hosts %}
             {% set ping = latest_pings.get(host.id) %}
             {% set dns = latest_dns.get(host.id) %}
-            <tr style="border-bottom:1px solid #1a1a3a;">
-                <td style="padding:0.75rem 1rem;">{{ host.name }}</td>
-                <td style="padding:0.75rem 1rem;color:#a0a0c0;">{{ host.address }}</td>
-                <td style="padding:0.75rem 1rem;color:#a0a0c0;font-size:0.85rem;">
+            <tr>
+                <td>{{ host.name }}</td>
+                <td style="color:var(--text-muted);">{{ host.address }}</td>
+                <td style="color:var(--text-muted);font-size:0.85rem;">
                     {{ host.probe_type.value | upper }}{% if host.probe_type.value == 'tcp' %}:{{ host.probe_port }}{% endif %}
                 </td>
-                <td style="padding:0.75rem 1rem;text-align:center;">
+                <td style="text-align:center;">
                     {% if not host.ping_enabled %}
-                        <span style="color:#404060;font-size:0.8rem;">off</span>
+                        <span style="color:var(--text-dim);font-size:0.8rem;">off</span>
                     {% elif ping is none %}
-                        <span style="color:#606080;font-size:0.8rem;">—</span>
+                        <span style="color:var(--text-muted);font-size:0.8rem;">—</span>
                     {% elif ping.status.value == 'up' %}
-                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#40c040;" title="Up"></span>
+                        <span class="dot dot-up" title="Up"></span>
                     {% else %}
-                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#c04040;" title="Down"></span>
+                        <span class="dot dot-down" title="Down"></span>
                     {% endif %}
                 </td>
-                <td style="padding:0.75rem 1rem;text-align:center;font-size:0.9rem;">
+                <td style="text-align:center;font-size:0.9rem;">
                     {% if ping and ping.response_time_ms is not none %}
                         {% if ping.response_time_ms < 10 %}
-                            <span style="color:#40c040;">{{ ping.response_time_ms | round(1) }} ms</span>
+                            <span style="color:var(--green);">{{ ping.response_time_ms | round(1) }} ms</span>
                         {% elif ping.response_time_ms < 100 %}
-                            <span style="color:#c0c040;">{{ ping.response_time_ms | round(1) }} ms</span>
+                            <span style="color:var(--yellow);">{{ ping.response_time_ms | round(1) }} ms</span>
                         {% else %}
-                            <span style="color:#c08040;">{{ ping.response_time_ms | round(1) }} ms</span>
+                            <span style="color:var(--orange);">{{ ping.response_time_ms | round(1) }} ms</span>
                         {% endif %}
                     {% else %}
-                        <span style="color:#404060;">—</span>
+                        <span style="color:var(--text-dim);">—</span>
                     {% endif %}
                 </td>
-                <td style="padding:0.75rem 1rem;text-align:center;">
+                <td style="text-align:center;">
                     {% if not host.dns_enabled %}
-                        <span style="color:#404060;font-size:0.8rem;">off</span>
+                        <span style="color:var(--text-dim);font-size:0.8rem;">off</span>
                     {% elif dns is none %}
-                        <span style="color:#606080;font-size:0.8rem;">—</span>
+                        <span style="color:var(--text-muted);font-size:0.8rem;">—</span>
                     {% elif dns.status.value == 'resolved' %}
-                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#40c040;" title="{{ dns.resolved_ip }}"></span>
+                        <span class="dot dot-up" title="{{ dns.resolved_ip }}"></span>
                     {% else %}
-                        <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#c04040;" title="Failed"></span>
+                        <span class="dot dot-down" title="Failed"></span>
                     {% endif %}
                 </td>
-                <td style="padding:0.75rem 1rem;text-align:right;">
-                    <a href="/hosts/{{ host.id }}/edit" style="color:#a0a0ff;margin-right:1rem;">Edit</a>
+                <td class="td-actions">
+                    <a href="/hosts/{{ host.id }}/edit" class="btn btn-sm btn-ghost" style="margin-right:0.5rem;">Edit</a>
                     <form method="post" action="/hosts/{{ host.id }}/delete" style="display:inline;">
-                        <button type="submit" style="background:none;border:none;color:#ff6060;cursor:pointer;"
+                        <button type="submit" class="btn btn-sm btn-danger"
                             onclick="return confirm('Delete {{ host.name }}?')">Delete</button>
                     </form>
                 </td>
@@ -78,7 +78,7 @@
 </div>
 {% else %}
 <div class="card">
-    <p style="color:#606080;">No hosts configured yet. <a href="/hosts/new" style="color:#a0a0ff;">Add one.</a></p>
+    <p style="color:var(--text-muted);">No hosts configured yet. <a href="/hosts/new">Add one.</a></p>
 </div>
 {% endif %}
 {% endblock %}
diff --git a/fablednetmon/templates/ping/index.html b/fablednetmon/templates/ping/index.html
index ae4e88e..3eab739 100644
--- a/fablednetmon/templates/ping/index.html
+++ b/fablednetmon/templates/ping/index.html
@@ -2,13 +2,13 @@
 {% block title %}Ping Monitor — FabledNetMon{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
-  <h1 style="color:#c0c0ff;">Ping Monitor</h1>
+  <h1 class="page-title" style="margin-bottom:0;">Ping Monitor</h1>
   <span style="color:#505070;font-size:0.85rem;">polling every {{ poll_interval }}s</span>
 </div>
 
 {# ── Threshold settings ─────────────────────────────────────────────────── #}
 <div class="card" style="margin-bottom:1.25rem;">
-  <h2 style="color:#8080ff;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:1rem;">Latency Thresholds</h2>
+  <h2 class="section-title" style="margin-bottom:1rem;">Latency Thresholds</h2>
   <form method="post" action="/ping/settings"
         style="display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;">
     <div class="form-group" style="margin:0;">
@@ -16,16 +16,14 @@
         <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#1a6632;vertical-align:middle;margin-right:4px;"></span>
         Good below (ms)
       </label>
-      <input type="number" name="good_ms" value="{{ good_ms }}" min="1" max="9999"
-             style="width:100px;padding:0.4rem 0.6rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;">
+      <input type="number" name="good_ms" value="{{ good_ms }}" min="1" max="9999" style="width:100px;">
     </div>
     <div class="form-group" style="margin:0;">
       <label style="font-size:0.8rem;">
         <span style="display:inline-block;width:10px;height:10px;border-radius:2px;background:#6b5c00;vertical-align:middle;margin-right:4px;"></span>
         Warn above (ms)
       </label>
-      <input type="number" name="warn_ms" value="{{ warn_ms }}" min="1" max="9999"
-             style="width:100px;padding:0.4rem 0.6rem;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;">
+      <input type="number" name="warn_ms" value="{{ warn_ms }}" min="1" max="9999" style="width:100px;">
     </div>
     <button type="submit" class="btn" style="padding:0.4rem 1rem;">Save</button>
     <span style="color:#505070;font-size:0.8rem;align-self:center;">
diff --git a/fablednetmon/templates/settings/index.html b/fablednetmon/templates/settings/index.html
index fd01108..25d312f 100644
--- a/fablednetmon/templates/settings/index.html
+++ b/fablednetmon/templates/settings/index.html
@@ -2,13 +2,13 @@
 {% extends "base.html" %}
 {% block title %}Settings — FabledNetMon{% endblock %}
 {% block content %}
-<h1 style="color:#c0c0ff;margin-bottom:1.5rem;">Settings</h1>
+<h1 class="page-title">Settings</h1>
 <form method="post" action="/settings/">
 <div style="display:grid;gap:1.5rem;">
 
   {# ── General ──────────────────────────────────────────────────────────── #}
   <div class="card">
-    <h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">General</h2>
+    <h2 class="section-title" style="margin-bottom:1rem;">General</h2>
     <div class="form-group">
       <label>Session lifetime (hours)</label>
       <input type="number" name="session.lifetime_hours" min="1" max="720"
@@ -28,7 +28,7 @@
 
   {# ── SMTP ─────────────────────────────────────────────────────────────── #}
   <div class="card">
-    <h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Email (SMTP)</h2>
+    <h2 class="section-title" style="margin-bottom:1rem;">Email (SMTP)</h2>
     <div class="form-group">
       <label>SMTP host</label>
       <input type="text" name="smtp.host" value="{{ settings['smtp.host'] }}" placeholder="mail.example.com">
@@ -62,7 +62,7 @@
 
   {# ── Webhook ──────────────────────────────────────────────────────────── #}
   <div class="card">
-    <h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Webhook</h2>
+    <h2 class="section-title" style="margin-bottom:1rem;">Webhook</h2>
     <div class="form-group">
       <label>Webhook URL <span style="color:#606080;font-size:0.8rem;">(leave blank to disable)</span></label>
       <input type="text" name="webhook.url" value="{{ settings['webhook.url'] }}"
@@ -70,23 +70,21 @@
     </div>
     <div class="form-group">
       <label>Payload template <span style="color:#606080;font-size:0.8rem;">(Jinja2, must produce valid JSON)</span></label>
-      <textarea name="webhook.template" rows="3"
-                style="width:100%;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;padding:0.5rem;font-family:monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
+      <textarea name="webhook.template" rows="3" style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['webhook.template'] }}</textarea>
     </div>
   </div>
 
   {# ── Ansible Sources ──────────────────────────────────────────────────── #}
   <div class="card">
-    <h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Ansible Sources</h2>
+    <h2 class="section-title" style="margin-bottom:1rem;">Ansible Sources</h2>
     <p style="color:#606080;font-size:0.85rem;margin-bottom:0.75rem;">JSON array of source objects. Each requires <code>name</code>, <code>type</code> (git or local), and either <code>url</code> or <code>path</code>.</p>
-    <textarea name="ansible.sources" rows="8"
-              style="width:100%;background:#0f0f1e;border:1px solid #3a3a5a;border-radius:4px;color:#e0e0e0;padding:0.5rem;font-family:monospace;font-size:0.85rem;">{{ settings['ansible.sources'] | tojson(indent=2) }}</textarea>
+    <textarea name="ansible.sources" rows="8" style="font-family:ui-monospace,monospace;font-size:0.85rem;">{{ settings['ansible.sources'] | tojson(indent=2) }}</textarea>
   </div>
 
   {# ── Plugins ──────────────────────────────────────────────────────────── #}
   {% if discovered_plugins %}
   <div class="card">
-    <h2 style="color:#8080ff;margin-bottom:1rem;font-size:1rem;">Plugins</h2>
+    <h2 class="section-title" style="margin-bottom:1rem;">Plugins</h2>
     {% for plugin in discovered_plugins %}
     <div style="border:1px solid #2a2a4a;border-radius:4px;padding:1rem;margin-bottom:0.75rem;">
       <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;">
diff --git a/plugins/traefik/routes.py b/plugins/traefik/routes.py
index bbd3d8e..d6ab2ee 100644
--- a/plugins/traefik/routes.py
+++ b/plugins/traefik/routes.py
@@ -68,3 +68,26 @@ async def index():
             })
 
     return await render_template("traefik/index.html", router_data=router_data)
+
+
+@traefik_bp.get("/widget")
+@require_role(UserRole.viewer)
+async def widget():
+    """HTMX dashboard widget fragment."""
+    async with current_app.db_sessionmaker() as db:
+        result = await db.execute(
+            select(TraefikMetric.router_name).distinct().order_by(TraefikMetric.router_name)
+        )
+        routers = [row[0] for row in result.all()]
+        router_data = []
+        for router in routers:
+            result = await db.execute(
+                select(TraefikMetric)
+                .where(TraefikMetric.router_name == router)
+                .order_by(TraefikMetric.scraped_at.desc())
+                .limit(1)
+            )
+            latest = result.scalar_one_or_none()
+            if latest:
+                router_data.append({"name": router, "latest": latest})
+    return await render_template("traefik/widget.html", router_data=router_data)
diff --git a/plugins/traefik/templates/traefik/index.html b/plugins/traefik/templates/traefik/index.html
index 0d3c875..aa802db 100644
--- a/plugins/traefik/templates/traefik/index.html
+++ b/plugins/traefik/templates/traefik/index.html
@@ -2,7 +2,7 @@
 {% extends "base.html" %}
 {% block title %}Traefik — FabledNetMon{% endblock %}
 {% block content %}
-<h1 style="color:#c0c0ff;margin-bottom:1.5rem;">Traefik Routers</h1>
+<h1 class="page-title">Traefik Routers</h1>
 {% if not router_data %}
 <div class="card">
     <p style="color:#606080;">No Traefik metrics yet. Configure <code>metrics_url</code> in <code>config.yaml</code> under <code>plugins.traefik</code>.</p>
@@ -11,39 +11,39 @@
 <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem;">
 {% for r in router_data %}
 <div class="card">
-    <h3 style="color:#8080ff;margin-bottom:0.75rem;font-size:0.95rem;word-break:break-all;">{{ r.name }}</h3>
-    <table style="width:100%;border-collapse:collapse;font-size:0.85rem;">
+    <h3 class="section-title" style="margin-bottom:0.75rem;word-break:break-all;">{{ r.name }}</h3>
+    <table class="table" style="font-size:0.85rem;">
         <tr>
-            <td style="color:#606080;padding:0.2rem 0;">Req/s</td>
-            <td style="color:#c0c0e0;padding:0.2rem 0.5rem;">{{ "%.2f"|format(r.latest.request_rate) }}</td>
+            <td style="color:var(--text-muted);padding:0.2rem 0;">Req/s</td>
+            <td style="padding:0.2rem 0.5rem;">{{ "%.2f"|format(r.latest.request_rate) }}</td>
             <td style="padding:0.2rem 0;">{{ r.sparkline_req | safe }}</td>
         </tr>
         <tr>
-            <td style="color:#606080;padding:0.2rem 0;">p95 ms</td>
-            <td style="color:#c0c0e0;padding:0.2rem 0.5rem;">{{ "%.1f"|format(r.latest.latency_p95_ms) }}</td>
+            <td style="color:var(--text-muted);padding:0.2rem 0;">p95 ms</td>
+            <td style="padding:0.2rem 0.5rem;">{{ "%.1f"|format(r.latest.latency_p95_ms) }}</td>
             <td style="padding:0.2rem 0;">{{ r.sparkline_p95 | safe }}</td>
         </tr>
         <tr>
-            <td style="color:#606080;padding:0.2rem 0;">p99 ms</td>
-            <td style="color:#e0e0e0;padding:0.2rem 0.5rem;">{{ "%.1f"|format(r.latest.latency_p99_ms) }}</td>
+            <td style="color:var(--text-muted);padding:0.2rem 0;">p99 ms</td>
+            <td style="padding:0.2rem 0.5rem;">{{ "%.1f"|format(r.latest.latency_p99_ms) }}</td>
             <td style="padding:0.2rem 0;"></td>
         </tr>
         <tr>
-            <td style="color:#606080;padding:0.2rem 0;">4xx %</td>
-            <td style="color:{% if r.latest.error_rate_4xx_pct > 1 %}#c0a000{% else %}#40a040{% endif %};padding:0.2rem 0.5rem;">
+            <td style="color:var(--text-muted);padding:0.2rem 0;">4xx %</td>
+            <td style="color:{% if r.latest.error_rate_4xx_pct > 1 %}var(--yellow){% else %}var(--green){% endif %};padding:0.2rem 0.5rem;">
                 {{ "%.1f"|format(r.latest.error_rate_4xx_pct) }}%
             </td>
             <td style="padding:0.2rem 0;"></td>
         </tr>
         <tr>
-            <td style="color:#606080;padding:0.2rem 0;">5xx %</td>
-            <td style="color:{% if r.latest.error_rate_5xx_pct > 0.1 %}#a04040{% else %}#40a040{% endif %};padding:0.2rem 0.5rem;">
+            <td style="color:var(--text-muted);padding:0.2rem 0;">5xx %</td>
+            <td style="color:{% if r.latest.error_rate_5xx_pct > 0.1 %}var(--red){% else %}var(--green){% endif %};padding:0.2rem 0.5rem;">
                 {{ "%.1f"|format(r.latest.error_rate_5xx_pct) }}%
             </td>
             <td style="padding:0.2rem 0;">{{ r.sparkline_5xx | safe }}</td>
         </tr>
     </table>
-    <div style="color:#404060;font-size:0.75rem;margin-top:0.5rem;">
+    <div style="color:var(--text-dim);font-size:0.75rem;margin-top:0.5rem;">
         Last scraped {{ r.latest.scraped_at.strftime("%H:%M:%S") }} UTC
     </div>
 </div>
diff --git a/plugins/traefik/templates/traefik/widget.html b/plugins/traefik/templates/traefik/widget.html
new file mode 100644
index 0000000..9649198
--- /dev/null
+++ b/plugins/traefik/templates/traefik/widget.html
@@ -0,0 +1,29 @@
+{% if router_data %}
+{% for r in router_data %}
+<div class="ping-row">
+  <div class="ping-meta">
+    <span class="ping-name" style="font-size:0.8rem;word-break:break-all;">{{ r.name }}</span>
+  </div>
+  <div style="flex:1;display:flex;gap:1.5rem;font-size:0.82rem;font-variant-numeric:tabular-nums;">
+    <span title="Requests/s">
+      <span style="color:var(--text-muted);">req/s</span>
+      <span style="margin-left:0.3rem;">{{ "%.2f"|format(r.latest.request_rate) }}</span>
+    </span>
+    <span title="p95 latency">
+      <span style="color:var(--text-muted);">p95</span>
+      <span style="margin-left:0.3rem;
+        {% if r.latest.latency_p95_ms > 500 %}color:var(--red){% elif r.latest.latency_p95_ms > 200 %}color:var(--yellow){% else %}color:var(--green){% endif %};">
+        {{ "%.0f"|format(r.latest.latency_p95_ms) }}ms
+      </span>
+    </span>
+    {% if r.latest.error_rate_5xx_pct > 0 %}
+    <span title="5xx error rate">
+      <span style="color:var(--red);">{{ "%.1f"|format(r.latest.error_rate_5xx_pct) }}% 5xx</span>
+    </span>
+    {% endif %}
+  </div>
+</div>
+{% endfor %}
+{% else %}
+<p class="empty" style="padding:0.5rem 0;font-size:0.85rem;">No Traefik data yet.</p>
+{% endif %}