diff --git a/app/routes/company.py b/app/routes/company.py
index 673673e..774871d 100644
--- a/app/routes/company.py
+++ b/app/routes/company.py
@@ -496,9 +496,10 @@ def assign_playlist(display_id: int):
 @bp.post("/displays/<int:display_id>")
 @login_required
 def update_display(display_id: int):
-    """Update display metadata (description + assigned playlist).
+    """Update display metadata.
 
-    Company users should be able to set a short description per display and assign a playlist.
+    Supports both form POST (full update) and JSON/AJAX (partial update).
+    Company users can set a short description per display and assign a playlist.
     """
 
     company_user_required()
@@ -507,26 +508,77 @@ def update_display(display_id: int):
     if not display or display.company_id != current_user.company_id:
         abort(404)
 
+    wants_json = (
+        (request.headers.get("X-Requested-With") == "XMLHttpRequest")
+        or ("application/json" in (request.headers.get("Accept") or ""))
+        or request.is_json
+    )
+
+    def _json_error(message: str, status: int = 400):
+        return jsonify({"ok": False, "error": message}), status
+
+    # Inputs from either form or JSON
+    payload = request.get_json(silent=True) if request.is_json else None
+
     # Description (short, optional)
-    desc = (request.form.get("description") or "").strip() or None
-    if desc is not None:
-        desc = desc[:200]
-    display.description = desc
+    if request.is_json:
+        if payload is None:
+            return _json_error("Invalid JSON")
+        if "description" in payload:
+            desc = (payload.get("description") or "").strip() or None
+            if desc is not None:
+                desc = desc[:200]
+            display.description = desc
+    else:
+        # form POST implies full update
+        desc = (request.form.get("description") or "").strip() or None
+        if desc is not None:
+            desc = desc[:200]
+        display.description = desc
 
     # Playlist assignment
-    playlist_id = (request.form.get("playlist_id") or "").strip()
-    if not playlist_id:
-        display.assigned_playlist_id = None
+    if request.is_json:
+        if "playlist_id" in payload:
+            playlist_id_val = payload.get("playlist_id")
+            if playlist_id_val in (None, ""):
+                display.assigned_playlist_id = None
+            else:
+                try:
+                    playlist_id_int = int(playlist_id_val)
+                except (TypeError, ValueError):
+                    return _json_error("Invalid playlist_id")
+                playlist = db.session.get(Playlist, playlist_id_int)
+                if not playlist or playlist.company_id != current_user.company_id:
+                    return _json_error("Invalid playlist")
+                display.assigned_playlist_id = playlist.id
     else:
-        try:
-            playlist_id_int = int(playlist_id)
-        except ValueError:
-            abort(400)
-        playlist = db.session.get(Playlist, playlist_id_int)
-        if not playlist or playlist.company_id != current_user.company_id:
-            abort(400)
-        display.assigned_playlist_id = playlist.id
+        playlist_id = (request.form.get("playlist_id") or "").strip()
+        if not playlist_id:
+            display.assigned_playlist_id = None
+        else:
+            try:
+                playlist_id_int = int(playlist_id)
+            except ValueError:
+                abort(400)
+            playlist = db.session.get(Playlist, playlist_id_int)
+            if not playlist or playlist.company_id != current_user.company_id:
+                abort(400)
+            display.assigned_playlist_id = playlist.id
 
     db.session.commit()
+
+    if wants_json:
+        return jsonify(
+            {
+                "ok": True,
+                "display": {
+                    "id": display.id,
+                    "name": display.name,
+                    "description": display.description,
+                    "assigned_playlist_id": display.assigned_playlist_id,
+                },
+            }
+        )
+
     flash("Display updated", "success")
     return redirect(url_for("company.dashboard"))
diff --git a/app/static/styles.css b/app/static/styles.css
new file mode 100644
index 0000000..8514db1
--- /dev/null
+++ b/app/static/styles.css
@@ -0,0 +1,286 @@
+:root {
+  --brand: #f2d20b; /* warm yellow */
+  --brand-hover: #f6dd3d;
+  --ink: #111111;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --surface: #ffffff;
+  --surface-alt: #f7f7f7;
+  --shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
+  --radius: 14px;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: var(--surface);
+  color: var(--ink);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Layout */
+.app-navbar {
+  background: var(--surface) !important;
+  border-bottom: 1px solid var(--border) !important;
+}
+
+.app-main {
+  padding-top: 6.25rem; /* fixed navbar offset */
+  padding-bottom: 4rem;
+}
+
+@media (min-width: 992px) {
+  .app-main {
+    padding-top: 6.75rem;
+  }
+}
+
+.container {
+  max-width: 1120px;
+}
+
+/* Branding */
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  background: var(--brand);
+  color: var(--ink);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.navbar-brand {
+  font-weight: 700;
+}
+
+.navbar .nav-link {
+  color: var(--ink) !important;
+  font-weight: 500;
+}
+
+.navbar .nav-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+/* Typography */
+h1, h2, h3, .display-1, .display-2, .display-3 {
+  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  letter-spacing: -0.02em;
+}
+
+.page-title {
+  font-size: clamp(2rem, 4vw, 3rem);
+  margin-bottom: 1.25rem;
+}
+
+/* Cards / surfaces */
+.card {
+  border-radius: var(--radius);
+  border-color: var(--border);
+  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
+}
+
+.card.card-elevated {
+  box-shadow: var(--shadow);
+}
+
+.card-header {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+/* Tables */
+.table {
+  border-color: var(--border);
+}
+
+.table thead th {
+  background: var(--surface-alt);
+  color: var(--muted);
+  font-weight: 600;
+  border-bottom: 1px solid var(--border);
+}
+
+.table td, .table th {
+  vertical-align: middle;
+}
+
+/* Prevent tables from breaking layouts on long tokens/URLs */
+.table td,
+.table th {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.table-responsive {
+  border-radius: var(--radius);
+}
+
+/* Forms */
+.form-control,
+.form-select {
+  border-radius: 12px;
+  border-color: var(--border);
+  padding: .75rem .9rem;
+}
+
+.form-control:focus,
+.form-select:focus {
+  border-color: rgba(242, 210, 11, 0.9);
+  box-shadow: 0 0 0 .25rem rgba(242, 210, 11, 0.18);
+}
+
+/* Buttons */
+.btn {
+  border-radius: 12px;
+  font-weight: 600;
+}
+
+.btn-brand {
+  background: var(--brand);
+  border-color: var(--brand);
+  color: var(--ink);
+}
+
+.btn-brand:hover,
+.btn-brand:focus {
+  background: var(--brand-hover);
+  border-color: var(--brand-hover);
+  color: var(--ink);
+}
+
+.btn-ink {
+  background: var(--ink);
+  border-color: var(--ink);
+  color: #fff;
+}
+
+.btn-ink:hover,
+.btn-ink:focus {
+  background: #000;
+  border-color: #000;
+  color: #fff;
+}
+
+.btn-outline-ink {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+
+.btn-outline-ink:hover,
+.btn-outline-ink:focus {
+  background: var(--ink);
+  color: #fff;
+}
+
+/* Bootstrap outline-primary -> match brand */
+.btn-outline-primary {
+  border-color: var(--ink);
+  color: var(--ink);
+}
+
+.btn-check:checked + .btn-outline-primary,
+.btn-outline-primary:hover,
+.btn-outline-primary:focus {
+  background: var(--brand);
+  border-color: var(--brand);
+  color: var(--ink);
+}
+
+.btn-outline-secondary {
+  border-color: var(--border);
+  color: var(--ink);
+}
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus {
+  background: var(--surface-alt);
+  border-color: var(--border);
+  color: var(--ink);
+}
+
+/* Alerts */
+.alert {
+  border-radius: var(--radius);
+}
+
+/* Auth pages */
+.auth-shell {
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.auth-card {
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+
+/* Playlist gallery cards (used in company/playlist_detail.html) */
+.playlist-card {
+  border-radius: var(--radius) !important;
+  border-color: var(--border) !important;
+}
+
+.playlist-card .card-top {
+  border-bottom-color: var(--border) !important;
+}
+
+.playlist-card .drag-handle {
+  color: var(--muted) !important;
+}
+
+/* Nice monospace blocks */
+.monospace {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/* Company display gallery */
+.display-gallery-card {
+  border-radius: var(--radius);
+  border-color: var(--border);
+}
+
+.display-gallery-grid {
+  display: grid;
+  grid-template-columns: 1.4fr 0.8fr 1.1fr 0.9fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.display-preview {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border);
+  background: #000;
+}
+
+.display-preview iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #000;
+}
+
+@media (max-width: 768px) {
+  .display-gallery-grid {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
+
+.toast {
+  border-radius: var(--radius);
+}
diff --git a/app/templates/admin/company_detail.html b/app/templates/admin/company_detail.html
index 74e8538..3b8dd54 100644
--- a/app/templates/admin/company_detail.html
+++ b/app/templates/admin/company_detail.html
@@ -1,13 +1,112 @@
 {% extends "base.html" %}
 {% block content %}
   <div class="d-flex justify-content-between align-items-start">
-    <h1 class="h3">Company: {{ company.name }}</h1>
+    <h1 class="page-title">Company: {{ company.name }}</h1>
     <div>
-      <a class="btn btn-outline-secondary" href="{{ url_for('admin.dashboard') }}">Back</a>
+      <a class="btn btn-outline-ink" href="{{ url_for('admin.dashboard') }}">Back</a>
     </div>
   </div>
 
-  <div class="card border-danger mt-3">
+  <div class="mt-4">
+    <div class="card card-elevated">
+      <div class="card-header d-flex justify-content-between align-items-center">
+        <h2 class="h5 mb-0">Displays</h2>
+        <form method="post" action="{{ url_for('admin.create_display', company_id=company.id) }}" class="d-flex gap-2">
+          <input class="form-control" name="name" placeholder="Display name" />
+          <button class="btn btn-brand" type="submit">Add display</button>
+        </form>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-hover mb-0">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Token</th>
+              <th>Assigned</th>
+              <th class="text-end">Player</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for d in company.displays %}
+              <tr>
+                <td>
+                  <form method="post" action="{{ url_for('admin.update_display_name', display_id=d.id) }}" class="d-flex gap-2 align-items-center flex-wrap">
+                    <input
+                      class="form-control form-control-sm"
+                      style="max-width: 320px"
+                      name="name"
+                      value="{{ d.name }}"
+                      required
+                      maxlength="120"
+                    />
+                    <button class="btn btn-ink btn-sm" type="submit">Save</button>
+                  </form>
+                </td>
+                <td class="monospace small">{{ d.token }}</td>
+                <td class="text-muted">{{ d.assigned_playlist.name if d.assigned_playlist else "(none)" }}</td>
+                <td class="text-end">
+                  <a class="btn btn-outline-ink btn-sm" href="{{ url_for('display.display_player', token=d.token) }}" target="_blank">Open</a>
+                </td>
+              </tr>
+            {% else %}
+              <tr>
+                <td colspan="4" class="text-muted">No displays.</td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-4">
+    <div class="col-12 col-lg-6">
+      <div class="card card-elevated">
+        <div class="card-header">
+          <h2 class="h5 mb-0">Add user</h2>
+        </div>
+        <div class="card-body">
+          <form method="post" action="{{ url_for('admin.create_company_user', company_id=company.id) }}">
+            <div class="mb-2">
+              <label class="form-label">Email</label>
+              <input class="form-control" type="email" name="email" required />
+            </div>
+            <div class="mb-2">
+              <label class="form-label">Password</label>
+              <input class="form-control" type="password" name="password" required />
+            </div>
+            <button class="btn btn-brand" type="submit">Create user</button>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-12 col-lg-6 mt-4 mt-lg-0">
+      <div class="card card-elevated">
+        <div class="card-header">
+          <h2 class="h5 mb-0">Users</h2>
+        </div>
+        <div class="card-body p-0">
+          <div class="list-group list-group-flush">
+            {% for u in company.users %}
+              <div class="list-group-item d-flex justify-content-between align-items-center">
+                <div>
+                  <strong>{{ u.email or "(no email)" }}</strong>
+                </div>
+                <form method="post" action="{{ url_for('admin.impersonate', user_id=u.id) }}">
+                  <button class="btn btn-brand btn-sm" type="submit">Impersonate</button>
+                </form>
+              </div>
+            {% else %}
+              <div class="list-group-item text-muted">No users.</div>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card border-danger mt-4">
     <div class="card-body">
       <h2 class="h6 text-danger mb-2">Danger zone</h2>
       <p class="mb-2 text-muted">
@@ -22,80 +121,4 @@
       </form>
     </div>
   </div>
-
-  <div class="row mt-4">
-    <div class="col-md-6">
-      <h2 class="h5">Users</h2>
-      <form method="post" action="{{ url_for('admin.create_company_user', company_id=company.id) }}" class="card card-body mb-3">
-        <div class="mb-2">
-          <label class="form-label">Email</label>
-          <input class="form-control" type="email" name="email" required />
-        </div>
-        <div class="mb-2">
-          <label class="form-label">Password</label>
-          <input class="form-control" type="password" name="password" required />
-        </div>
-        <button class="btn btn-success" type="submit">Create user</button>
-      </form>
-
-      <div class="list-group">
-        {% for u in company.users %}
-          <div class="list-group-item d-flex justify-content-between align-items-center">
-            <div>
-              <strong>{{ u.email or "(no email)" }}</strong>
-              <div class="text-muted">{{ u.email or "(no email set)" }}</div>
-            </div>
-            <div class="d-flex align-items-center gap-2">
-              <form method="post" action="{{ url_for('admin.update_user_email', user_id=u.id) }}" class="d-flex gap-2">
-                <input class="form-control form-control-sm" style="width: 240px" type="email" name="email" placeholder="email" value="{{ u.email or '' }}" />
-                <button class="btn btn-outline-primary btn-sm" type="submit">Save</button>
-              </form>
-              <form method="post" action="{{ url_for('admin.impersonate', user_id=u.id) }}">
-                <button class="btn btn-warning btn-sm" type="submit">Impersonate</button>
-              </form>
-            </div>
-          </div>
-        {% else %}
-          <div class="text-muted">No users.</div>
-        {% endfor %}
-      </div>
-    </div>
-
-    <div class="col-md-6">
-      <h2 class="h5">Displays</h2>
-      <form method="post" action="{{ url_for('admin.create_display', company_id=company.id) }}" class="card card-body mb-3">
-        <div class="input-group">
-          <input class="form-control" name="name" placeholder="Display name" />
-          <button class="btn btn-success" type="submit">Add display</button>
-        </div>
-      </form>
-
-      <div class="list-group">
-        {% for d in company.displays %}
-          <div class="list-group-item">
-            <div class="d-flex justify-content-between">
-              <div>
-                <form method="post" action="{{ url_for('admin.update_display_name', display_id=d.id) }}" class="d-flex gap-2 align-items-center">
-                  <input
-                    class="form-control form-control-sm"
-                    style="max-width: 260px"
-                    name="name"
-                    value="{{ d.name }}"
-                    required
-                    maxlength="120"
-                  />
-                  <button class="btn btn-outline-primary btn-sm" type="submit">Save</button>
-                </form>
-                <div class="text-muted monospace">Token: {{ d.token }}</div>
-                <div class="text-muted">Player URL: <a href="{{ url_for('display.display_player', token=d.token) }}" target="_blank">{{ url_for('display.display_player', token=d.token, _external=true) }}</a></div>
-              </div>
-              <div class="text-muted">Assigned: {{ d.assigned_playlist.name if d.assigned_playlist else "(none)" }}</div>
-            </div>
-          </div>
-        {% else %}
-          <div class="text-muted">No displays.</div>
-        {% endfor %}
-      </div>
-    </div>
-  </div>
 {% endblock %}
diff --git a/app/templates/admin/dashboard.html b/app/templates/admin/dashboard.html
index 8137d2d..aede741 100644
--- a/app/templates/admin/dashboard.html
+++ b/app/templates/admin/dashboard.html
@@ -1,28 +1,49 @@
 {% extends "base.html" %}
 {% block content %}
   <div class="d-flex justify-content-between align-items-center">
-    <h1 class="h3">Admin dashboard</h1>
+    <h1 class="page-title">Admin</h1>
   </div>
 
   <div class="row mt-4">
     <div class="col-md-12">
-      <h2 class="h5">Companies</h2>
-      <form method="post" action="{{ url_for('admin.create_company') }}" class="card card-body mb-3">
-        <div class="input-group">
-          <input class="form-control" name="name" placeholder="New company name" required />
-          <button class="btn btn-success" type="submit">Add</button>
+      <div class="card card-elevated">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <h2 class="h5 mb-0">Companies</h2>
+          <form method="post" action="{{ url_for('admin.create_company') }}" class="d-flex gap-2">
+            <input class="form-control" name="name" placeholder="New company name" required />
+            <button class="btn btn-brand" type="submit">Add</button>
+          </form>
+        </div>
+        <div class="table-responsive">
+          <table class="table table-hover mb-0">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th class="text-end">Users</th>
+                <th class="text-end">Displays</th>
+                <th class="text-end">Playlists</th>
+                <th class="text-end">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for c in companies %}
+                <tr>
+                  <td><strong>{{ c.name }}</strong></td>
+                  <td class="text-end">{{ c.users|length }}</td>
+                  <td class="text-end">{{ c.displays|length }}</td>
+                  <td class="text-end">{{ c.playlists|length }}</td>
+                  <td class="text-end">
+                    <a class="btn btn-ink btn-sm" href="{{ url_for('admin.company_detail', company_id=c.id) }}">Open</a>
+                  </td>
+                </tr>
+              {% else %}
+                <tr>
+                  <td colspan="5" class="text-muted">No companies yet.</td>
+                </tr>
+              {% endfor %}
+            </tbody>
+          </table>
         </div>
-      </form>
-
-      <div class="list-group">
-        {% for c in companies %}
-          <a class="list-group-item list-group-item-action" href="{{ url_for('admin.company_detail', company_id=c.id) }}">
-            {{ c.name }}
-            <span class="text-muted">(users: {{ c.users|length }}, displays: {{ c.displays|length }}, playlists: {{ c.playlists|length }})</span>
-          </a>
-        {% else %}
-          <div class="text-muted">No companies yet.</div>
-        {% endfor %}
       </div>
     </div>
   </div>
diff --git a/app/templates/auth_change_password.html b/app/templates/auth_change_password.html
index a7b8334..e2070f5 100644
--- a/app/templates/auth_change_password.html
+++ b/app/templates/auth_change_password.html
@@ -3,7 +3,7 @@
 {% block content %}
   <div class="row justify-content-center mt-4">
     <div class="col-12 col-md-6">
-      <div class="card">
+      <div class="card card-elevated">
         <div class="card-header">
           <h1 class="h5 mb-0">Change password</h1>
         </div>
@@ -26,8 +26,8 @@
             </div>
 
             <div class="d-flex gap-2">
-              <button type="submit" class="btn btn-primary">Update password</button>
-              <a class="btn btn-outline-secondary" href="{{ url_for('index') }}">Cancel</a>
+              <button type="submit" class="btn btn-brand">Update password</button>
+              <a class="btn btn-outline-ink" href="{{ url_for('index') }}">Cancel</a>
             </div>
           </form>
         </div>
diff --git a/app/templates/auth_forgot_password.html b/app/templates/auth_forgot_password.html
index 02089ee..52fa9bb 100644
--- a/app/templates/auth_forgot_password.html
+++ b/app/templates/auth_forgot_password.html
@@ -1,20 +1,18 @@
 {% extends "base.html" %}
 
 {% block content %}
-  <div class="row justify-content-center">
-    <div class="col-md-6 col-lg-5">
-      <h1 class="h3 mb-3">Forgot password</h1>
-      <form method="post" class="card card-body">
+  <div class="auth-shell">
+    <h1 class="page-title">Forgot password</h1>
+    <form method="post" class="card auth-card card-body">
         <p class="text-muted">Enter your email address and we’ll send you a password reset link.</p>
         <div class="mb-3">
           <label class="form-label">Email</label>
           <input class="form-control" name="email" type="email" autocomplete="email" required />
         </div>
         <div class="d-flex gap-2">
-          <button class="btn btn-primary" type="submit">Send reset link</button>
-          <a class="btn btn-outline-secondary" href="{{ url_for('auth.login') }}">Back to login</a>
+          <button class="btn btn-brand" type="submit">Send reset link</button>
+          <a class="btn btn-outline-ink" href="{{ url_for('auth.login') }}">Back to login</a>
         </div>
-      </form>
-    </div>
+    </form>
   </div>
 {% endblock %}
diff --git a/app/templates/auth_login.html b/app/templates/auth_login.html
index d631679..cde937f 100644
--- a/app/templates/auth_login.html
+++ b/app/templates/auth_login.html
@@ -1,9 +1,8 @@
 {% extends "base.html" %}
 {% block content %}
-  <div class="row justify-content-center">
-    <div class="col-md-5">
-      <h1 class="h3 mb-3">Login</h1>
-      <form method="post" class="card card-body">
+  <div class="auth-shell">
+    <h1 class="page-title">Login</h1>
+    <form method="post" class="card auth-card card-body">
         <div class="mb-3">
           <label class="form-label">Email</label>
           <input class="form-control" type="email" name="email" autocomplete="email" required />
@@ -12,11 +11,10 @@
           <label class="form-label">Password</label>
           <input class="form-control" type="password" name="password" autocomplete="current-password" required />
         </div>
-        <button class="btn btn-primary" type="submit">Login</button>
-        <div class="mt-3">
-          <a href="{{ url_for('auth.forgot_password') }}">Forgot password?</a>
+        <button class="btn btn-brand w-100 py-2" type="submit">Login</button>
+        <div class="mt-3 text-center">
+          <a class="link-secondary" href="{{ url_for('auth.forgot_password') }}">Forgot password?</a>
         </div>
-      </form>
-    </div>
+    </form>
   </div>
 {% endblock %}
diff --git a/app/templates/auth_reset_password.html b/app/templates/auth_reset_password.html
index e4dc043..906bdf4 100644
--- a/app/templates/auth_reset_password.html
+++ b/app/templates/auth_reset_password.html
@@ -1,15 +1,14 @@
 {% extends "base.html" %}
 
 {% block content %}
-  <div class="row justify-content-center">
-    <div class="col-md-6 col-lg-5">
-      <h1 class="h3 mb-3">Reset password</h1>
+  <div class="auth-shell">
+      <h1 class="page-title">Reset password</h1>
 
       {% if token_error %}
         <div class="alert alert-danger">{{ token_error }}</div>
-        <a class="btn btn-outline-secondary" href="{{ url_for('auth.forgot_password') }}">Request a new reset link</a>
+        <a class="btn btn-outline-ink" href="{{ url_for('auth.forgot_password') }}">Request a new reset link</a>
       {% else %}
-        <form method="post" class="card card-body">
+        <form method="post" class="card auth-card card-body">
           <div class="mb-3">
             <label class="form-label">New password</label>
             <input class="form-control" type="password" name="new_password" autocomplete="new-password" minlength="8" required />
@@ -19,9 +18,8 @@
             <label class="form-label">Confirm new password</label>
             <input class="form-control" type="password" name="confirm_password" autocomplete="new-password" minlength="8" required />
           </div>
-          <button class="btn btn-primary" type="submit">Set new password</button>
+          <button class="btn btn-brand w-100 py-2" type="submit">Set new password</button>
         </form>
       {% endif %}
-    </div>
   </div>
 {% endblock %}
diff --git a/app/templates/base.html b/app/templates/base.html
index 0e7e40c..a62fa9f 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -5,40 +5,46 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{{ title or "Signage" }}</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" />
-    <style>
-      body { padding-top: 4.5rem; }
-      .monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-    </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
   </head>
   <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
-      <div class="container-fluid">
-        <a class="navbar-brand" href="/">Signage</a>
-        <div class="collapse navbar-collapse">
-          <ul class="navbar-nav me-auto">
-            {% if current_user.is_authenticated and current_user.is_admin %}
-              <li class="nav-item"><a class="nav-link" href="{{ url_for('admin.dashboard') }}">Admin</a></li>
-            {% elif current_user.is_authenticated %}
-              <li class="nav-item"><a class="nav-link" href="{{ url_for('company.dashboard') }}">Company</a></li>
-            {% endif %}
-          </ul>
-          <ul class="navbar-nav ms-auto">
+    <nav class="navbar navbar-expand-lg navbar-light fixed-top app-navbar">
+      <div class="container">
+        <a class="navbar-brand d-flex align-items-center gap-2" href="/">
+          <span class="brand-mark" aria-hidden="true">S</span>
+          <span>Signage</span>
+        </a>
+
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#mainNav"
+          aria-controls="mainNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="mainNav">
+          <div class="d-flex align-items-lg-center flex-column flex-lg-row gap-2 ms-lg-auto">
             {% if current_user.is_authenticated %}
-              <li class="nav-item"><span class="navbar-text me-3">Logged in as <strong>{{ current_user.email }}</strong></span></li>
-              <li class="nav-item"><a class="btn btn-outline-light btn-sm me-2" href="{{ url_for('auth.change_password') }}">Change password</a></li>
+              <div class="small text-muted">{{ current_user.email }}</div>
+              <a class="btn btn-outline-ink btn-sm" href="{{ url_for('auth.change_password') }}">Change password</a>
               {% if session.get('impersonator_admin_id') %}
-                <li class="nav-item"><a class="btn btn-warning btn-sm me-2" href="{{ url_for('auth.stop_impersonation') }}">Stop impersonation</a></li>
+                <a class="btn btn-brand btn-sm" href="{{ url_for('auth.stop_impersonation') }}">Stop impersonation</a>
               {% endif %}
-              <li class="nav-item"><a class="btn btn-outline-light btn-sm" href="{{ url_for('auth.logout') }}">Logout</a></li>
+              <a class="btn btn-outline-ink btn-sm" href="{{ url_for('auth.logout') }}">Logout</a>
             {% else %}
-              <li class="nav-item"><a class="btn btn-outline-light btn-sm" href="{{ url_for('auth.login') }}">Login</a></li>
+              <a class="btn btn-outline-ink btn-sm" href="{{ url_for('auth.login') }}">Login</a>
             {% endif %}
-          </ul>
+          </div>
         </div>
       </div>
     </nav>
 
-    <main class="container">
+    <main class="container app-main">
       {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
           <div class="mt-2">
@@ -50,5 +56,8 @@
       {% endwith %}
       {% block content %}{% endblock %}
     </main>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    {% block page_scripts %}{% endblock %}
   </body>
 </html>
diff --git a/app/templates/company/dashboard.html b/app/templates/company/dashboard.html
index 84ecc34..edea3fa 100644
--- a/app/templates/company/dashboard.html
+++ b/app/templates/company/dashboard.html
@@ -1,74 +1,254 @@
 {% extends "base.html" %}
 {% block content %}
-  <h1 class="h3">Company dashboard</h1>
+  <h1 class="page-title">Welcome{% if current_user and current_user.email %}, {{ current_user.email }}{% endif %}!</h1>
 
   <div class="row mt-4">
-    <div class="col-md-6">
-      <h2 class="h5">Playlists</h2>
-      <form method="post" action="{{ url_for('company.create_playlist') }}" class="card card-body mb-3">
-        <div class="input-group">
-          <input class="form-control" name="name" placeholder="New playlist name" required />
-          <button class="btn btn-success" type="submit">Add</button>
+    <div class="col-12">
+      <div class="card card-elevated">
+        <div class="card-header d-flex justify-content-between align-items-center">
+          <h2 class="h5 mb-0">Playlists</h2>
+          <form method="post" action="{{ url_for('company.create_playlist') }}" class="d-flex gap-2">
+            <input class="form-control" name="name" placeholder="New playlist name" required />
+            <button class="btn btn-brand" type="submit">Add</button>
+          </form>
+        </div>
+        <div class="table-responsive">
+          <table class="table table-hover mb-0">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th class="text-end">Items</th>
+                <th class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for p in playlists %}
+                <tr>
+                  <td><strong>{{ p.name }}</strong></td>
+                  <td class="text-end">{{ p.items|length }}</td>
+                  <td class="text-end">
+                    <div class="d-inline-flex gap-2">
+                      <a class="btn btn-ink btn-sm" href="{{ url_for('company.playlist_detail', playlist_id=p.id) }}">Open</a>
+                      <form method="post" action="{{ url_for('company.delete_playlist', playlist_id=p.id) }}" onsubmit="return confirm('Delete playlist? This will remove all items and unassign it from displays.');">
+                        <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
+                      </form>
+                    </div>
+                  </td>
+                </tr>
+              {% else %}
+                <tr>
+                  <td colspan="3" class="text-muted">No playlists yet.</td>
+                </tr>
+              {% endfor %}
+            </tbody>
+          </table>
         </div>
-      </form>
-
-      <div class="list-group">
-        {% for p in playlists %}
-          <div class="list-group-item">
-            <div class="d-flex justify-content-between align-items-center">
-              <a class="text-decoration-none" href="{{ url_for('company.playlist_detail', playlist_id=p.id) }}">
-                <strong>{{ p.name }}</strong> <span class="text-muted">({{ p.items|length }} items)</span>
-              </a>
-              <form method="post" action="{{ url_for('company.delete_playlist', playlist_id=p.id) }}" onsubmit="return confirm('Delete playlist? This will remove all items and unassign it from displays.');">
-                <button class="btn btn-outline-danger btn-sm" type="submit">Delete</button>
-              </form>
-            </div>
-          </div>
-        {% else %}
-          <div class="text-muted">No playlists yet.</div>
-        {% endfor %}
       </div>
     </div>
 
-    <div class="col-md-6">
-      <h2 class="h5">Displays</h2>
-      <div class="list-group">
-        {% for d in displays %}
-          <div class="list-group-item">
-            <div class="d-flex justify-content-between align-items-center">
-              <div>
-                <div><strong>{{ d.name }}</strong></div>
-                {% if d.description %}
-                  <div class="text-muted">{{ d.description }}</div>
-                {% endif %}
-              </div>
-              <div style="min-width: 220px;">
-                <form method="post" action="{{ url_for('company.update_display', display_id=d.id) }}" class="d-flex flex-column gap-2">
-                  <input
-                    class="form-control form-control-sm"
-                    name="description"
-                    placeholder="Description (e.g. entrance, office)"
-                    value="{{ d.description or '' }}"
-                    maxlength="200"
-                  />
-
-                  <div class="d-flex gap-2">
-                    <select class="form-select form-select-sm" name="playlist_id">
-                      <option value="">(none)</option>
-                      {% for p in playlists %}
-                        <option value="{{ p.id }}" {% if d.assigned_playlist_id == p.id %}selected{% endif %}>{{ p.name }}</option>
-                      {% endfor %}
-                    </select>
-                    <button class="btn btn-primary btn-sm" type="submit">Save</button>
+    <div class="col-12 mt-4">
+      <div class="card card-elevated">
+        <div class="card-header">
+          <h2 class="h5 mb-0">Displays</h2>
+        </div>
+        <div class="card-body">
+          <div class="row g-3">
+            {% for d in displays %}
+              <div class="col-12 col-md-6 col-xl-4">
+                <div class="card display-gallery-card h-100">
+                  <div class="display-preview">
+                    <iframe
+                      title="Preview — {{ d.name }}"
+                      src="{{ url_for('display.display_player', token=d.token) }}?preview=1"
+                      loading="lazy"
+                      referrerpolicy="no-referrer"
+                    ></iframe>
                   </div>
-                </form>
+
+                  <div class="card-body d-flex flex-column gap-2">
+                    <div>
+                      <div class="fw-bold">{{ d.name }}</div>
+                      <div class="text-muted small js-display-desc" data-display-id="{{ d.id }}">
+                        {{ d.description or "—" }}
+                      </div>
+                    </div>
+
+                    <div class="d-flex flex-column gap-2 mt-auto">
+                      <select
+                        class="form-select form-select-sm js-playlist-select"
+                        data-display-id="{{ d.id }}"
+                        aria-label="Playlist selection"
+                      >
+                        <option value="">(none)</option>
+                        {% for p in playlists %}
+                          <option value="{{ p.id }}" {% if d.assigned_playlist_id == p.id %}selected{% endif %}>{{ p.name }}</option>
+                        {% endfor %}
+                      </select>
+
+                      <div class="d-flex justify-content-end">
+                        <button
+                          type="button"
+                          class="btn btn-ink btn-sm js-edit-desc"
+                          data-display-id="{{ d.id }}"
+                          data-display-name="{{ d.name }}"
+                          data-current-desc="{{ d.description or '' }}"
+                        >
+                          Edit description
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
-            </div>
+            {% else %}
+              <div class="col-12">
+                <div class="text-muted">No displays. Ask admin to add displays.</div>
+              </div>
+            {% endfor %}
           </div>
-        {% else %}
-          <div class="text-muted">No displays. Ask admin to add displays.</div>
-        {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Toast notifications -->
+  <div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1080">
+    <div id="companyToast" class="toast" role="alert" aria-live="polite" aria-atomic="true">
+      <div class="toast-body" id="companyToastBody">Saved</div>
+    </div>
+  </div>
+
+  <!-- Edit description modal -->
+  <div class="modal fade" id="editDescModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="editDescModalTitle">Edit description</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <label class="form-label" for="editDescInput">Description</label>
+          <textarea class="form-control" id="editDescInput" maxlength="200" rows="3" placeholder="Optional description (max 200 chars)"></textarea>
+          <div class="form-text"><span id="editDescCount">0</span>/200</div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-brand" id="editDescSaveBtn">Save</button>
+        </div>
       </div>
     </div>
   </div>
 {% endblock %}
+
+{% block page_scripts %}
+  <script>
+    (function () {
+      const toastEl = document.getElementById('companyToast');
+      const toastBodyEl = document.getElementById('companyToastBody');
+      const toast = toastEl ? new bootstrap.Toast(toastEl, { delay: 2200 }) : null;
+
+      function showToast(message, variant) {
+        if (!toast || !toastEl || !toastBodyEl) return;
+        toastEl.classList.remove('text-bg-success', 'text-bg-danger', 'text-bg-secondary');
+        if (variant) toastEl.classList.add(variant);
+        toastBodyEl.textContent = message;
+        toast.show();
+      }
+
+      async function postDisplayUpdate(displayId, payload) {
+        const res = await fetch(`/company/displays/${displayId}` , {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+            'X-Requested-With': 'XMLHttpRequest'
+          },
+          body: JSON.stringify(payload)
+        });
+        const data = await res.json().catch(() => null);
+        if (!res.ok || !data || !data.ok) {
+          const msg = (data && data.error) ? data.error : 'Save failed';
+          throw new Error(msg);
+        }
+        return data.display;
+      }
+
+      // Playlist auto-save
+      document.querySelectorAll('.js-playlist-select').forEach((sel) => {
+        sel.addEventListener('change', async () => {
+          const displayId = sel.dataset.displayId;
+          const playlistId = sel.value || null;
+          sel.disabled = true;
+          try {
+            await postDisplayUpdate(displayId, { playlist_id: playlistId });
+            showToast('Playlist saved', 'text-bg-success');
+          } catch (e) {
+            showToast(e && e.message ? e.message : 'Save failed', 'text-bg-danger');
+          } finally {
+            sel.disabled = false;
+          }
+        });
+      });
+
+      // Description modal
+      const modalEl = document.getElementById('editDescModal');
+      const modal = modalEl ? new bootstrap.Modal(modalEl) : null;
+      const titleEl = document.getElementById('editDescModalTitle');
+      const inputEl = document.getElementById('editDescInput');
+      const countEl = document.getElementById('editDescCount');
+      const saveBtn = document.getElementById('editDescSaveBtn');
+
+      let activeDisplayId = null;
+
+      function updateCount() {
+        if (!inputEl || !countEl) return;
+        countEl.textContent = String((inputEl.value || '').length);
+      }
+      if (inputEl) inputEl.addEventListener('input', updateCount);
+
+      document.querySelectorAll('.js-edit-desc').forEach((btn) => {
+        btn.addEventListener('click', () => {
+          activeDisplayId = btn.dataset.displayId;
+          const displayName = btn.dataset.displayName || 'Display';
+          const currentDesc = btn.dataset.currentDesc || '';
+          if (titleEl) titleEl.textContent = `Edit description — ${displayName}`;
+          if (inputEl) inputEl.value = currentDesc;
+          updateCount();
+          if (modal) modal.show();
+        });
+      });
+
+      async function saveDescription() {
+        if (!activeDisplayId || !inputEl) return;
+        const desc = (inputEl.value || '').trim();
+        saveBtn.disabled = true;
+        try {
+          const updated = await postDisplayUpdate(activeDisplayId, { description: desc });
+          // Update visible description
+          const descEl = document.querySelector(`.js-display-desc[data-display-id="${activeDisplayId}"]`);
+          if (descEl) descEl.textContent = updated.description ? updated.description : '—';
+          // Update button's stored value
+          const btn = document.querySelector(`.js-edit-desc[data-display-id="${activeDisplayId}"]`);
+          if (btn) btn.dataset.currentDesc = updated.description || '';
+          showToast('Description saved', 'text-bg-success');
+          if (modal) modal.hide();
+        } catch (e) {
+          showToast(e && e.message ? e.message : 'Save failed', 'text-bg-danger');
+        } finally {
+          saveBtn.disabled = false;
+        }
+      }
+      if (saveBtn) {
+        saveBtn.addEventListener('click', saveDescription);
+      }
+      if (modalEl) {
+        modalEl.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            saveDescription();
+          }
+        });
+      }
+    })();
+  </script>
+{% endblock %}
diff --git a/app/templates/company/playlist_detail.html b/app/templates/company/playlist_detail.html
index e64c4f8..3404a3c 100644
--- a/app/templates/company/playlist_detail.html
+++ b/app/templates/company/playlist_detail.html
@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %}
   {# Cropper.js (used for image cropping) #}
-  <link rel="stylesheet" href="{{ url_for('static', filename='vendor/cropperjs/cropper.min.css') }}" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css" />
   <style>
     /* Gallery grid for playlist items */
     #playlist-items.playlist-gallery,
@@ -11,9 +11,9 @@
       gap: 12px;
     }
     .playlist-card {
-      background: #fff;
-      border: 1px solid rgba(0,0,0,.125);
-      border-radius: .5rem;
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
       overflow: hidden;
       box-shadow: 0 1px 2px rgba(0,0,0,.05);
     }
@@ -26,13 +26,13 @@
       justify-content: space-between;
       gap: .5rem;
       padding: .5rem .75rem;
-      border-bottom: 1px solid rgba(0,0,0,.08);
+      border-bottom: 1px solid var(--border);
     }
     .playlist-card .drag-handle {
       width: 26px;
       cursor: grab;
       user-select: none;
-      color: #6c757d;
+      color: var(--muted);
       flex: 0 0 auto;
     }
     .playlist-card .card-body {
@@ -68,7 +68,7 @@
       <form method="post" action="{{ url_for('company.delete_playlist', playlist_id=playlist.id) }}" onsubmit="return confirm('Delete playlist? This will remove all items and unassign it from displays.');">
         <button class="btn btn-outline-danger btn-sm" type="submit">Delete playlist</button>
       </form>
-      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('company.dashboard') }}">Back</a>
+      <a class="btn btn-outline-ink btn-sm" href="{{ url_for('company.dashboard') }}">Back</a>
     </div>
   </div>
 
@@ -77,7 +77,7 @@
       <h2 class="h5 mb-0">Items</h2>
       <div class="text-muted small">Tip: drag items to reorder. Changes save automatically.</div>
     </div>
-    <button class="btn btn-success" type="button" id="open-add-item">Add item</button>
+    <button class="btn btn-brand" type="button" id="open-add-item">Add item</button>
   </div>
 
   <div class="mt-3">
@@ -301,19 +301,17 @@
               </form>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-outline-secondary" id="add-item-back">Back</button>
-              <button type="button" class="btn btn-success" id="add-item-submit">Add</button>
+              <button type="button" class="btn btn-outline-ink" id="add-item-back">Back</button>
+              <button type="button" class="btn btn-brand" id="add-item-submit">Add</button>
             </div>
           </div>
         </div>
       </div>
 
       {# Load Cropper.js BEFORE our inline script so window.Cropper is available #}
-      <script src="{{ url_for('static', filename='vendor/cropperjs/cropper.min.js') }}"></script>
-      {# Bootstrap JS required for modal (already included via base.html CSS only) #}
-      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.js"></script>
 
-      <script>
+      <script type="module">
         (function() {
           // -------------------------
           // Add-item modal + steps
diff --git a/app/templates/display/player.html b/app/templates/display/player.html
index a182e44..9f175ec 100644
--- a/app/templates/display/player.html
+++ b/app/templates/display/player.html
@@ -19,6 +19,8 @@
       const stage = document.getElementById('stage');
       const notice = document.getElementById('notice');
 
+      const isPreview = new URLSearchParams(window.location.search).get('preview') === '1';
+
       // Stable session id per browser (used to enforce max concurrent viewers per display token)
       const SID_KEY = `display_sid_${token}`;
       function getSid() {
@@ -31,14 +33,15 @@
         return sid;
       }
 
-      const sid = getSid();
+      const sid = isPreview ? null : getSid();
 
       let playlist = null;
       let idx = 0;
       let timer = null;
 
       async function fetchPlaylist() {
-        const res = await fetch(`/api/display/${token}/playlist?sid=${encodeURIComponent(sid)}`, { cache: 'no-store' });
+        const qs = sid ? `?sid=${encodeURIComponent(sid)}` : '';
+        const res = await fetch(`/api/display/${token}/playlist${qs}`, { cache: 'no-store' });
         if (res.status === 429) {
           const data = await res.json().catch(() => null);
           throw Object.assign(new Error(data?.message || 'Display limit reached'), { code: 'LIMIT', data });