diff --git a/fablednetmon/templates/auth/login.html b/fablednetmon/templates/auth/login.html
index 5058f50..0fdd7d3 100644
--- a/fablednetmon/templates/auth/login.html
+++ b/fablednetmon/templates/auth/login.html
@@ -1 +1,20 @@
-{% extends "base.html" %}{% block content %}login{% endblock %}
+{% extends "base.html" %}
+{% block title %}Login — FabledNetMon{% endblock %}
+{% block content %}
+<div style="max-width:400px;margin:4rem auto;">
+    <div class="card">
+        <h2 style="margin-bottom:1.5rem;color:#c0c0ff;">Sign In</h2>
+        <form method="post" action="/login">
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" name="username" autofocus required>
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" name="password" required>
+            </div>
+            <button type="submit">Sign In</button>
+        </form>
+    </div>
+</div>
+{% endblock %}
diff --git a/fablednetmon/templates/auth/setup.html b/fablednetmon/templates/auth/setup.html
index dc49480..7a73b92 100644
--- a/fablednetmon/templates/auth/setup.html
+++ b/fablednetmon/templates/auth/setup.html
@@ -1 +1,25 @@
-{% extends "base.html" %}{% block content %}setup{% endblock %}
+{% extends "base.html" %}
+{% block title %}First-Run Setup — FabledNetMon{% endblock %}
+{% 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>
+        <form method="post" action="/setup">
+            <div class="form-group">
+                <label>Username</label>
+                <input type="text" name="username" autofocus required>
+            </div>
+            <div class="form-group">
+                <label>Email</label>
+                <input type="email" name="email" required>
+            </div>
+            <div class="form-group">
+                <label>Password</label>
+                <input type="password" name="password" required>
+            </div>
+            <button type="submit">Create Admin Account</button>
+        </form>
+    </div>
+</div>
+{% endblock %}
diff --git a/fablednetmon/templates/base.html b/fablednetmon/templates/base.html
index 7f16efb..876b107 100644
--- a/fablednetmon/templates/base.html
+++ b/fablednetmon/templates/base.html
@@ -1 +1,47 @@
-<!DOCTYPE html><html><body>{% block content %}{% endblock %}</body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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; }
+    </style>
+    {% block head %}{% endblock %}
+</head>
+<body>
+    {% if session.user_id is defined %}
+    <nav>
+        <span class="brand">FabledNetMon</span>
+        <a href="/">Dashboard</a>
+        <a href="/logout">Logout ({{ session.username }})</a>
+    </nav>
+    {% endif %}
+    <main>
+        {% if error %}
+        <div class="alert alert-error">{{ error }}</div>
+        {% endif %}
+        {% block content %}{% endblock %}
+    </main>
+</body>
+</html>
diff --git a/fablednetmon/templates/dashboard/index.html b/fablednetmon/templates/dashboard/index.html
index 9d9dbef..94717a7 100644
--- a/fablednetmon/templates/dashboard/index.html
+++ b/fablednetmon/templates/dashboard/index.html
@@ -1 +1,19 @@
-{% extends "base.html" %}{% block content %}dashboard{% endblock %}
+{% extends "base.html" %}
+{% block title %}Dashboard — FabledNetMon{% endblock %}
+{% block content %}
+<h1 style="margin-bottom:1.5rem;color:#c0c0ff;">Dashboard</h1>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;">
+    <div class="card">
+        <h3 style="color:#8080ff;margin-bottom:0.5rem;">Ping Monitor</h3>
+        <p style="color:#606080;font-size:0.9rem;">No hosts configured yet.</p>
+    </div>
+    <div class="card">
+        <h3 style="color:#8080ff;margin-bottom:0.5rem;">DNS Monitor</h3>
+        <p style="color:#606080;font-size:0.9rem;">No hosts configured yet.</p>
+    </div>
+    <div class="card">
+        <h3 style="color:#8080ff;margin-bottom:0.5rem;">Ansible</h3>
+        <p style="color:#606080;font-size:0.9rem;">No playbook sources configured yet.</p>
+    </div>
+</div>
+{% endblock %}
