diff --git a/backlogger/static/backlogger/style.css b/backlogger/static/backlogger/style.css
new file mode 100644
index 0000000..a53aeec
--- /dev/null
+++ b/backlogger/static/backlogger/style.css
@@ -0,0 +1,104 @@
+/* ── Reset ─────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Base ──────────────────────────────────────────────────────── */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #0f172a;
+  color: #e2e8f0;
+  min-height: 100vh;
+}
+a { color: inherit; text-decoration: none; }
+
+/* ── Site header ───────────────────────────────────────────────── */
+.site-header {
+  background: #0a0f1e;
+  border-bottom: 1px solid #1e293b;
+  padding: 0.75rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
+.site-header nav { display: flex; gap: 1.5rem; align-items: center; }
+.site-header nav a { color: #64748b; font-size: 0.85rem; }
+.site-header nav a:hover { color: #e2e8f0; }
+
+/* ── Buttons ───────────────────────────────────────────────────── */
+.btn {
+  display: inline-block;
+  padding: 0.45rem 1rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  cursor: pointer;
+  border: none;
+  transition: opacity 0.15s;
+  font-family: inherit;
+}
+.btn:hover { opacity: 0.85; }
+.btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
+.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
+.btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
+.btn-danger { background: transparent; color: #f87171; border: 1px solid #f87171; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
+.btn-danger:hover { background: #f87171; color: #0f172a; opacity: 1; }
+.btn-done { background: transparent; color: #34d399; border: 1px solid #34d399; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
+.btn-done:hover { background: #34d399; color: #0f172a; opacity: 1; }
+.btn-abandon { background: transparent; color: #fb923c; border: 1px solid #fb923c; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
+.btn-abandon:hover { background: #fb923c; color: #0f172a; opacity: 1; }
+.btn-ghost { background: transparent; color: #64748b; border: 1px solid #334155; }
+.btn-ghost:hover { color: #e2e8f0; opacity: 1; }
+.btn-text { background: none; border: none; color: #64748b; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0; }
+.btn-text:hover { color: #e2e8f0; }
+
+/* ── Form fields ───────────────────────────────────────────────── */
+.field { margin-bottom: 1.1rem; }
+.field label {
+  display: block;
+  font-size: 0.78rem;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  margin-bottom: 0.4rem;
+}
+.field input[type="text"],
+.field input[type="number"],
+.field input[type="password"],
+.field select {
+  width: 100%;
+  background: #1e293b;
+  border: 1px solid #334155;
+  border-radius: 6px;
+  color: #e2e8f0;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.9rem;
+  font-family: inherit;
+}
+.field input:focus,
+.field select:focus { outline: none; border-color: #38bdf8; }
+
+/* ── Errors ────────────────────────────────────────────────────── */
+.errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
+.error-banner {
+  background: #450a0a;
+  border: 1px solid #f87171;
+  border-radius: 8px;
+  color: #fca5a5;
+  padding: 0.85rem 1.1rem;
+  margin-bottom: 1.5rem;
+}
+
+/* ── Light theme ───────────────────────────────────────────────── */
+body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
+body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
+body[data-theme="light"] .site-header .brand { color: #0284c7; }
+body[data-theme="light"] .site-header nav a { color: #64748b; }
+body[data-theme="light"] .btn-primary { background: #0284c7; }
+body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
+body[data-theme="light"] .field input[type="text"],
+body[data-theme="light"] .field input[type="number"],
+body[data-theme="light"] .field input[type="password"],
+body[data-theme="light"] .field select {
+  background: #f1f5f9;
+  color: #0f172a;
+  border-color: #cbd5e1;
+}
diff --git a/backlogger/templates/backlogger/base.html b/backlogger/templates/backlogger/base.html
new file mode 100644
index 0000000..6d886c1
--- /dev/null
+++ b/backlogger/templates/backlogger/base.html
@@ -0,0 +1,22 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}Backlogger{% endblock %}</title>
+  <link rel="stylesheet" href="{% static 'backlogger/style.css' %}">
+  {% block styles %}{% endblock %}
+</head>
+<body data-theme="{{ request.session.theme|default:'dark' }}">
+
+<header class="site-header">
+  <a class="brand" href="/">{% block brand %}k-boris.tech{% endblock %}</a>
+  <nav>{% block nav %}{% endblock %}</nav>
+</header>
+
+{% block content %}{% endblock %}
+
+{% block scripts %}{% endblock %}
+</body>
+</html>
diff --git a/backlogger/templates/backlogger/base_auth.html b/backlogger/templates/backlogger/base_auth.html
new file mode 100644
index 0000000..2b90dd0
--- /dev/null
+++ b/backlogger/templates/backlogger/base_auth.html
@@ -0,0 +1,39 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}Backlogger{% endblock %}</title>
+  <link rel="stylesheet" href="{% static 'backlogger/style.css' %}">
+  <style>
+    body { display: flex; flex-direction: column; align-items: center; justify-content: center; }
+    .auth-card {
+      background: #0a0f1e;
+      border: 1px solid #1e293b;
+      border-radius: 12px;
+      padding: 2.5rem 2rem;
+      width: 100%;
+      max-width: 360px;
+    }
+    .auth-brand {
+      display: block;
+      text-align: center;
+      color: #38bdf8;
+      font-weight: 600;
+      font-size: 1.1rem;
+      margin-bottom: 0.4rem;
+    }
+    .auth-subtitle {
+      text-align: center;
+      color: #64748b;
+      font-size: 0.85rem;
+      margin-bottom: 2rem;
+    }
+  </style>
+  {% block styles %}{% endblock %}
+</head>
+<body>
+{% block content %}{% endblock %}
+</body>
+</html>
diff --git a/backlogger/templates/backlogger/item_form.html b/backlogger/templates/backlogger/item_form.html
index fce87bb..216d622 100644
--- a/backlogger/templates/backlogger/item_form.html
+++ b/backlogger/templates/backlogger/item_form.html
@@ -1,144 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{ action }} Item — Backlogger</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-    }
-    a { text-decoration: none; color: inherit; }
+{% extends 'backlogger/base.html' %}
 
-    .site-header {
-      background: #0a0f1e;
-      border-bottom: 1px solid #1e293b;
-      padding: 0.75rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
-    .site-header nav a { color: #64748b; font-size: 0.85rem; }
-    .site-header nav a:hover { color: #e2e8f0; }
+{% block title %}{{ action }} Item — Backlogger{% endblock %}
 
-    .container {
-      max-width: 520px;
-      margin: 3rem auto;
-      padding: 0 1.5rem;
-    }
+{% block styles %}
+<style>
+  .container { max-width: 520px; margin: 3rem auto; padding: 0 1.5rem; }
 
-    .card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 12px;
-      padding: 2rem;
-    }
-    h1 { font-size: 1.35rem; margin-bottom: 1.75rem; letter-spacing: -0.02em; }
+  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 12px; padding: 2rem; }
+  h1 { font-size: 1.35rem; margin-bottom: 1.75rem; letter-spacing: -0.02em; }
 
-    .field { margin-bottom: 1.25rem; }
-    .field label {
-      display: block;
-      font-size: 0.8rem;
-      color: #94a3b8;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      margin-bottom: 0.4rem;
-    }
-    .field input[type="text"],
-    .field input[type="number"],
-    .field select {
-      width: 100%;
-      background: #1e293b;
-      border: 1px solid #334155;
-      border-radius: 6px;
-      color: #e2e8f0;
-      padding: 0.55rem 0.75rem;
-      font-size: 0.9rem;
-    }
-    .field input:focus,
-    .field select:focus { outline: none; border-color: #38bdf8; }
+  .field { margin-bottom: 1.25rem; }
+  .field input[type="range"] { width: 100%; accent-color: #38bdf8; cursor: pointer; margin-top: 0.2rem; }
+  .progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
+  .progress-val { color: #38bdf8; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
 
-    .field input[type="range"] {
-      width: 100%;
-      accent-color: #38bdf8;
-      cursor: pointer;
-      margin-top: 0.2rem;
-    }
-    .progress-label {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.2rem;
-    }
-    .progress-val { color: #38bdf8; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
+  .checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
+  .checkbox-row input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
+  .checkbox-row label { font-size: 0.9rem; color: #e2e8f0; text-transform: none; letter-spacing: 0; margin-bottom: 0; }
 
-    .checkbox-row {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .checkbox-row input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
-    .checkbox-row label {
-      font-size: 0.9rem;
-      color: #e2e8f0;
-      text-transform: none;
-      letter-spacing: 0;
-      margin-bottom: 0;
-    }
+  .section-divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0 1.25rem; }
+  .section-title { font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; }
+  .optional { color: #475569; font-size: 0.7rem; margin-left: 0.3rem; text-transform: none; letter-spacing: 0; }
 
-    .section-divider {
-      border: none;
-      border-top: 1px solid #1e293b;
-      margin: 1.5rem 0 1.25rem;
-    }
-    .section-title {
-      font-size: 0.72rem;
-      color: #64748b;
-      text-transform: uppercase;
-      letter-spacing: 0.1em;
-      margin-bottom: 1rem;
-    }
+  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
 
-    .optional { color: #475569; font-size: 0.7rem; margin-left: 0.3rem; text-transform: none; letter-spacing: 0; }
+  .actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; }
+  .btn { padding: 0.5rem 1.25rem; font-size: 0.875rem; }
+</style>
+{% endblock %}
 
-    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-
-    .actions {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 2rem;
-    }
-    .btn {
-      display: inline-block;
-      padding: 0.5rem 1.25rem;
-      border-radius: 6px;
-      font-size: 0.875rem;
-      cursor: pointer;
-      border: none;
-    }
-    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
-    .btn-primary:hover { opacity: 0.88; }
-    .btn-ghost { background: transparent; color: #64748b; border: 1px solid #334155; text-decoration: none; padding: 0.5rem 1.25rem; }
-    .btn-ghost:hover { color: #e2e8f0; }
-
-    .errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
-  </style>
-</head>
-<body>
-
-<header class="site-header">
-  <a class="brand" href="/">k-boris.tech</a>
-  <nav>
-    <a href="{% url 'backlogger:list' %}">&larr; Back to backlogger</a>
-  </nav>
-</header>
+{% block nav %}
+<a href="{% url 'backlogger:list' %}">&larr; Back to backlogger</a>
+{% endblock %}
 
+{% block content %}
 <div class="container">
   <div class="card">
     <h1>{{ action }} item</h1>
@@ -174,7 +69,6 @@
         </div>
       </div>
 
-      <!-- Games fields -->
       <div class="cat-section" data-show-category="games">
         <hr class="section-divider">
         <div class="section-title">Games</div>
@@ -200,7 +94,6 @@
         </div>
       </div>
 
-      <!-- Books fields -->
       <div class="cat-section" data-show-category="books">
         <hr class="section-divider">
         <div class="section-title">Books</div>
@@ -218,12 +111,11 @@
         </div>
       </div>
 
-      <!-- Films fields -->
       <div class="cat-section" data-show-category="films">
         <hr class="section-divider">
         <div class="section-title">Films</div>
         <div class="two-col">
-          <div class="field" style="display:flex; align-items:center; padding-top:1.5rem;">
+          <div class="field" style="display:flex;align-items:center;padding-top:1.5rem;">
             <div class="checkbox-row">
               {{ form.watched }}
               <label for="{{ form.watched.id_for_label }}">Watched</label>
@@ -244,7 +136,9 @@
     </form>
   </div>
 </div>
+{% endblock %}
 
+{% block scripts %}
 <script>
   const catSelect = document.getElementById('{{ form.category.id_for_label }}');
   const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}');
@@ -253,13 +147,9 @@
 
   function updateVisibility() {
     const cat = catSelect.value;
-
-    // Show only the section matching the selected category
     document.querySelectorAll('[data-show-category]').forEach(el => {
       el.style.display = el.dataset.showCategory === cat ? 'block' : 'none';
     });
-
-    // Hide fields that are not applicable for the current status
     document.querySelectorAll('[data-hide-status]').forEach(el => {
       el.style.display = el.dataset.hideStatus === itemStatus ? 'none' : '';
     });
@@ -272,6 +162,4 @@
     progressDisplay.textContent = Math.round(this.value) + '%';
   });
 </script>
-
-</body>
-</html>
+{% endblock %}
diff --git a/backlogger/templates/backlogger/list.html b/backlogger/templates/backlogger/list.html
index 75b8490..15d8dcf 100644
--- a/backlogger/templates/backlogger/list.html
+++ b/backlogger/templates/backlogger/list.html
@@ -1,200 +1,73 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Backlogger — k-boris.tech</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-    }
-    a { color: inherit; text-decoration: none; }
+{% extends 'backlogger/base.html' %}
 
-    .site-header {
-      background: #0a0f1e;
-      border-bottom: 1px solid #1e293b;
-      padding: 0.75rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
-    .site-header nav { display: flex; gap: 1.5rem; align-items: center; }
-    .site-header nav a { color: #64748b; font-size: 0.85rem; }
-    .site-header nav a:hover { color: #e2e8f0; }
+{% block title %}Backlogger — k-boris.tech{% endblock %}
 
-    .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
+{% block styles %}
+<style>
+  .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
 
-    .top-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.5rem;
-    }
-    .top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
-    .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
+  .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+  .top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
+  .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
 
-    .btn {
-      display: inline-block;
-      padding: 0.45rem 1rem;
-      border-radius: 6px;
-      font-size: 0.85rem;
-      cursor: pointer;
-      border: none;
-      transition: opacity 0.15s;
-    }
-    .btn:hover { opacity: 0.85; }
-    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
-    .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-    .btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
-    .btn-danger { background: transparent; color: #f87171; border: 1px solid #f87171; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-    .btn-danger:hover { background: #f87171; color: #0f172a; opacity: 1; }
-    .btn-done { background: transparent; color: #34d399; border: 1px solid #34d399; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-    .btn-done:hover { background: #34d399; color: #0f172a; opacity: 1; }
+  .filter-bar { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #1e293b; margin-bottom: 1.5rem; }
+  .tabs { display: flex; gap: 0; }
+  .tab { padding: 0.6rem 1rem; font-size: 0.85rem; color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab:hover { color: #e2e8f0; }
+  .tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
+  .tab-sep { width: 1px; background: #1e293b; margin: 0.5rem 0.25rem; align-self: stretch; }
 
-    @keyframes complete-glow {
-      0%   { box-shadow: 0 0 0px 0px rgba(255,255,255,0);  transform: scale(1); }
-      30%  { box-shadow: 0 0 18px 6px rgba(255,255,255,0.55); transform: scale(1.03); }
-      70%  { box-shadow: 0 0 24px 8px rgba(255,255,255,0.35); transform: scale(1.03); }
-      100% { box-shadow: 0 0 0px 0px rgba(255,255,255,0);  transform: scale(1); opacity: 0; }
-    }
-    .card.completing {
-      animation: complete-glow 0.7s ease-out forwards;
-      pointer-events: none;
-    }
-    .btn-abandon { background: transparent; color: #fb923c; border: 1px solid #fb923c; padding: 0.3rem 0.65rem; font-size: 0.78rem; }
-    .btn-abandon:hover { background: #fb923c; color: #0f172a; opacity: 1; }
+  .sort-wrap { padding-bottom: 0.75rem; }
+  .sort-wrap select { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px; padding: 0.3rem 0.65rem; font-size: 0.8rem; cursor: pointer; }
 
-    .filter-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-      border-bottom: 1px solid #1e293b;
-      margin-bottom: 1.5rem;
-    }
-    .tabs { display: flex; gap: 0; }
-    .tab {
-      padding: 0.6rem 1rem;
-      font-size: 0.85rem;
-      color: #64748b;
-      border-bottom: 2px solid transparent;
-      margin-bottom: -1px;
-      cursor: pointer;
-    }
-    .tab:hover { color: #e2e8f0; }
-    .tab.active { color: #38bdf8; border-bottom-color: #38bdf8; }
-    .tab-sep { width: 1px; background: #1e293b; margin: 0.5rem 0.25rem; align-self: stretch; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
 
-    .sort-wrap { padding-bottom: 0.75rem; }
-    .sort-wrap select {
-      background: #1e293b;
-      color: #e2e8f0;
-      border: 1px solid #334155;
-      border-radius: 6px;
-      padding: 0.3rem 0.65rem;
-      font-size: 0.8rem;
-      cursor: pointer;
-    }
+  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 10px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
+  .card-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
+  .badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; }
+  .badge-games { background: #3b2f6a; color: #a78bfa; }
+  .badge-books { background: #064e3b; color: #34d399; }
+  .badge-films { background: #431407; color: #fb923c; }
+  .badge-other { background: #1e293b; color: #94a3b8; }
+  .star { color: #fbbf24; font-size: 0.9rem; margin-left: auto; }
 
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-      gap: 1rem;
-    }
+  .card-name { font-size: 1rem; font-weight: 600; margin-bottom: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .progress-bar { height: 4px; background: #1e293b; border-radius: 2px; margin-bottom: 0.3rem; }
+  .progress-fill { height: 100%; background: #38bdf8; border-radius: 2px; min-width: 0; }
+  .card-stat { font-size: 0.78rem; color: #38bdf8; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
+  .card-info { font-size: 0.76rem; color: #64748b; min-height: 1.1em; margin-bottom: 0.85rem; flex: 1; }
+  .card-actions { display: flex; gap: 0.4rem; }
+  .card-actions form { display: inline; }
 
-    .card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 10px;
-      padding: 1.1rem 1.25rem;
-      display: flex;
-      flex-direction: column;
-    }
-    .card-top {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      margin-bottom: 0.6rem;
-    }
-    .badge {
-      font-size: 0.62rem;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      padding: 0.18rem 0.45rem;
-      border-radius: 4px;
-    }
-    .badge-games { background: #3b2f6a; color: #a78bfa; }
-    .badge-books { background: #064e3b; color: #34d399; }
-    .badge-films { background: #431407; color: #fb923c; }
-    .badge-other { background: #1e293b; color: #94a3b8; }
-    .star { color: #fbbf24; font-size: 0.9rem; margin-left: auto; }
+  .empty { text-align: center; padding: 5rem 2rem; color: #64748b; }
+  .empty a { color: #38bdf8; }
 
-    .card-name {
-      font-size: 1rem;
-      font-weight: 600;
-      margin-bottom: 0.7rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .progress-bar {
-      height: 4px;
-      background: #1e293b;
-      border-radius: 2px;
-      margin-bottom: 0.3rem;
-    }
-    .progress-fill {
-      height: 100%;
-      background: #38bdf8;
-      border-radius: 2px;
-      min-width: 0;
-    }
-    .card-stat { font-size: 0.78rem; color: #38bdf8; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; }
-    .card-info { font-size: 0.76rem; color: #64748b; min-height: 1.1em; margin-bottom: 0.85rem; flex: 1; }
+  @keyframes complete-glow {
+    0%   { box-shadow: 0 0 0px 0px rgba(255,255,255,0);   transform: scale(1); }
+    30%  { box-shadow: 0 0 18px 6px rgba(255,255,255,0.55); transform: scale(1.03); }
+    70%  { box-shadow: 0 0 24px 8px rgba(255,255,255,0.35); transform: scale(1.03); }
+    100% { box-shadow: 0 0 0px 0px rgba(255,255,255,0);   transform: scale(1); opacity: 0; }
+  }
+  .card.completing { animation: complete-glow 0.7s ease-out forwards; pointer-events: none; }
 
-    .card-actions { display: flex; gap: 0.4rem; }
-    .card-actions form { display: inline; }
+  body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
+  body[data-theme="light"] .progress-bar { background: #e2e8f0; }
+  body[data-theme="light"] .progress-fill { background: #0284c7; }
+  body[data-theme="light"] .card-stat { color: #0284c7; }
+  body[data-theme="light"] .filter-bar { border-color: #e2e8f0; }
+  body[data-theme="light"] .tab-sep { background: #e2e8f0; }
+  body[data-theme="light"] .tab.active { color: #0284c7; border-bottom-color: #0284c7; }
+  body[data-theme="light"] .sort-wrap select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
+  body[data-theme="light"] .empty a { color: #0284c7; }
+</style>
+{% endblock %}
 
-    .empty {
-      text-align: center;
-      padding: 5rem 2rem;
-      color: #64748b;
-    }
-    .empty a { color: #38bdf8; }
-
-    /* Light theme overrides */
-    body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
-    body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
-    body[data-theme="light"] .site-header .brand { color: #0284c7; }
-    body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
-    body[data-theme="light"] .progress-bar { background: #e2e8f0; }
-    body[data-theme="light"] .progress-fill { background: #0284c7; }
-    body[data-theme="light"] .card-stat { color: #0284c7; }
-    body[data-theme="light"] .filter-bar { border-color: #e2e8f0; }
-    body[data-theme="light"] .tab-sep { background: #e2e8f0; }
-    body[data-theme="light"] .tab.active { color: #0284c7; border-bottom-color: #0284c7; }
-    body[data-theme="light"] .sort-wrap select { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }
-    body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
-    body[data-theme="light"] .btn-primary { background: #0284c7; }
-    body[data-theme="light"] .site-header nav a { color: #64748b; }
-    body[data-theme="light"] .empty a { color: #0284c7; }
-  </style>
-</head>
-<body data-theme="{{ request.session.theme|default:'dark' }}">
-
-<header class="site-header">
-  <a class="brand" href="/">k-boris.tech</a>
-  <nav>
-    <a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
-    <form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
-  </nav>
-</header>
+{% block nav %}
+<a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
+<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
+{% endblock %}
 
+{% block content %}
 <div class="container">
   <div class="top-bar">
     <h1>Backlogger <span class="count">{{ items|length }}</span></h1>
@@ -242,7 +115,7 @@
         <option value="newest"   {% if sort == 'newest'   %}selected{% endif %}>Newest first</option>
         <option value="oldest"   {% if sort == 'oldest'   %}selected{% endif %}>Oldest first</option>
         <option value="progress" {% if sort == 'progress' %}selected{% endif %}>Most complete</option>
-        <option value="updated"   {% if sort == 'updated'   %}selected{% endif %}>Recently updated</option>
+        <option value="updated"  {% if sort == 'updated'  %}selected{% endif %}>Recently updated</option>
       </select>
     </div>
   </div>
@@ -327,12 +200,13 @@
   </div>
   {% endif %}
 </div>
+{% endblock %}
 
+{% block scripts %}
 <script>
   function playDing() {
     try {
       const ctx = new (window.AudioContext || window.webkitAudioContext)();
-      // Two-note ding: base note then a fifth above
       [[880, 0, 0.15], [1320, 0.12, 0.28]].forEach(([freq, start, end]) => {
         const osc = ctx.createOscillator();
         const gain = ctx.createGain();
@@ -359,6 +233,4 @@
     });
   });
 </script>
-
-</body>
-</html>
+{% endblock %}
diff --git a/backlogger/templates/backlogger/login.html b/backlogger/templates/backlogger/login.html
index 19c5e9b..c0c8d28 100644
--- a/backlogger/templates/backlogger/login.html
+++ b/backlogger/templates/backlogger/login.html
@@ -1,123 +1,41 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Log in — k-boris.tech</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 12px;
-      padding: 2.5rem 2rem;
-      width: 100%;
-      max-width: 360px;
-    }
-    .brand {
-      display: block;
-      text-align: center;
-      color: #38bdf8;
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin-bottom: 0.4rem;
-      text-decoration: none;
-    }
-    .subtitle {
-      text-align: center;
-      color: #64748b;
-      font-size: 0.85rem;
-      margin-bottom: 2rem;
-    }
-    .field { margin-bottom: 1.1rem; }
-    .field label {
-      display: block;
-      font-size: 0.78rem;
-      color: #94a3b8;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      margin-bottom: 0.4rem;
-    }
-    .field input {
-      width: 100%;
-      background: #1e293b;
-      border: 1px solid #334155;
-      border-radius: 6px;
-      color: #e2e8f0;
-      padding: 0.6rem 0.75rem;
-      font-size: 0.9rem;
-    }
-    .field input:focus { outline: none; border-color: #38bdf8; }
-    .btn {
-      width: 100%;
-      background: #38bdf8;
-      color: #0f172a;
-      font-weight: 600;
-      border: none;
-      border-radius: 6px;
-      padding: 0.6rem;
-      font-size: 0.9rem;
-      cursor: pointer;
-      margin-top: 0.5rem;
-    }
-    .btn:hover { opacity: 0.88; }
-    .errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
-    .error-banner {
-      background: #450a0a;
-      border: 1px solid #f87171;
-      border-radius: 6px;
-      color: #fca5a5;
-      font-size: 0.83rem;
-      padding: 0.6rem 0.85rem;
-      margin-bottom: 1.25rem;
-    }
-  </style>
-</head>
-<body>
-  <div class="card">
-    <a class="brand" href="/">k-boris.tech</a>
-    <p class="subtitle">Backlogger</p>
+{% extends 'backlogger/base_auth.html' %}
 
-    {% if form.non_field_errors %}
-      {% for error in form.non_field_errors %}
-        {% if 'inactive' in error|lower or 'active' in error|lower %}
-        <div class="error-banner">Your account is pending approval. You'll be able to log in once it's activated.</div>
-        {% else %}
-        <div class="error-banner">Invalid username or password.</div>
-        {% endif %}
-      {% endfor %}
-    {% endif %}
+{% block title %}Log in — k-boris.tech{% endblock %}
 
-    <form method="post">
-      {% csrf_token %}
-      <input type="hidden" name="next" value="{{ next }}">
+{% block content %}
+<div class="auth-card">
+  <a class="auth-brand" href="/">k-boris.tech</a>
+  <p class="auth-subtitle">Backlogger</p>
 
-      <div class="field">
-        <label for="{{ form.username.id_for_label }}">Username</label>
-        {{ form.username }}
-        {{ form.username.errors }}
-      </div>
-      <div class="field">
-        <label for="{{ form.password.id_for_label }}">Password</label>
-        {{ form.password }}
-        {{ form.password.errors }}
-      </div>
+  {% if form.non_field_errors %}
+    {% for error in form.non_field_errors %}
+      {% if 'inactive' in error|lower or 'active' in error|lower %}
+      <div class="error-banner">Your account is pending approval. You'll be able to log in once it's activated.</div>
+      {% else %}
+      <div class="error-banner">Invalid username or password.</div>
+      {% endif %}
+    {% endfor %}
+  {% endif %}
 
-      <button type="submit" class="btn">Log in</button>
-    </form>
-    <p style="text-align:center; margin-top:1.25rem; font-size:0.83rem; color:#64748b;">
-      No account? <a href="/accounts/signup/" style="color:#38bdf8; text-decoration:none;">Sign up</a>
-    </p>
-  </div>
-</body>
-</html>
+  <form method="post">
+    {% csrf_token %}
+    <input type="hidden" name="next" value="{{ next }}">
+
+    <div class="field">
+      <label for="{{ form.username.id_for_label }}">Username</label>
+      {{ form.username }}
+      {{ form.username.errors }}
+    </div>
+    <div class="field">
+      <label for="{{ form.password.id_for_label }}">Password</label>
+      {{ form.password }}
+      {{ form.password.errors }}
+    </div>
+
+    <button type="submit" class="btn btn-primary" style="width:100%;margin-top:0.5rem">Log in</button>
+  </form>
+  <p style="text-align:center;margin-top:1.25rem;font-size:0.83rem;color:#64748b;">
+    No account? <a href="/accounts/signup/" style="color:#38bdf8;">Sign up</a>
+  </p>
+</div>
+{% endblock %}
diff --git a/backlogger/templates/backlogger/profile.html b/backlogger/templates/backlogger/profile.html
index 429ef50..d41fcc2 100644
--- a/backlogger/templates/backlogger/profile.html
+++ b/backlogger/templates/backlogger/profile.html
@@ -1,112 +1,45 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Profile — Backlogger</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-    }
-    a { color: inherit; text-decoration: none; }
+{% extends 'backlogger/base.html' %}
 
-    .site-header {
-      background: #0a0f1e;
-      border-bottom: 1px solid #1e293b;
-      padding: 0.75rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
-    .site-header nav { display: flex; gap: 1.5rem; align-items: center; }
-    .site-header nav a { color: #64748b; font-size: 0.85rem; }
-    .site-header nav a:hover { color: #e2e8f0; }
+{% block title %}Profile — Backlogger{% endblock %}
 
-    .container { max-width: 520px; margin: 0 auto; padding: 2.5rem 2rem; }
+{% block styles %}
+<style>
+  .container { max-width: 520px; margin: 0 auto; padding: 2.5rem 2rem; }
 
-    h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
-    .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 2rem; }
+  h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
+  .subtitle { color: #64748b; font-size: 0.85rem; margin-bottom: 2rem; }
 
-    .card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 10px;
-      padding: 1.5rem;
-    }
+  .card { background: #0a0f1e; border: 1px solid #1e293b; border-radius: 10px; padding: 1.5rem; }
 
-    .field { margin-bottom: 1.25rem; }
-    .field:last-of-type { margin-bottom: 0; }
-    label { display: block; font-size: 0.82rem; color: #94a3b8; margin-bottom: 0.4rem; }
-    input[type="text"], select {
-      width: 100%;
-      background: #0f172a;
-      color: #e2e8f0;
-      border: 1px solid #334155;
-      border-radius: 6px;
-      padding: 0.5rem 0.75rem;
-      font-size: 0.9rem;
-      font-family: inherit;
-    }
-    input[type="text"]:focus, select:focus {
-      outline: none;
-      border-color: #38bdf8;
-    }
-    select { cursor: pointer; }
-    .field-static {
-      font-size: 0.9rem;
-      color: #64748b;
-      padding: 0.5rem 0;
-    }
+  .field { margin-bottom: 1.25rem; }
+  .field:last-of-type { margin-bottom: 0; }
+  .field label { font-size: 0.82rem; }
+  /* Profile uses a slightly darker input background than the default */
+  .field input[type="text"], .field select { background: #0f172a; }
 
-    .divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0; }
+  .field-static { font-size: 0.9rem; color: #64748b; padding: 0.5rem 0; }
 
-    .actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }
-    .btn {
-      display: inline-block;
-      padding: 0.5rem 1.25rem;
-      border-radius: 6px;
-      font-size: 0.85rem;
-      cursor: pointer;
-      border: none;
-      font-family: inherit;
-      transition: opacity 0.15s;
-    }
-    .btn:hover { opacity: 0.85; }
-    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
-    .btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
+  .divider { border: none; border-top: 1px solid #1e293b; margin: 1.5rem 0; }
 
-    .saved-msg { font-size: 0.82rem; color: #34d399; display: none; }
-    .saved-msg.show { display: inline; }
+  .actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; }
 
-    /* Light theme overrides */
-    body[data-theme="light"] { background: #f8fafc; color: #0f172a; }
-    body[data-theme="light"] .site-header { background: #ffffff; border-color: #e2e8f0; }
-    body[data-theme="light"] .site-header .brand { color: #0284c7; }
-    body[data-theme="light"] .site-header nav a { color: #64748b; }
-    body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
-    body[data-theme="light"] input[type="text"],
-    body[data-theme="light"] select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
-    body[data-theme="light"] .divider { border-color: #e2e8f0; }
-    body[data-theme="light"] .btn-primary { background: #0284c7; }
-    body[data-theme="light"] .btn-outline { color: #64748b; border-color: #cbd5e1; }
-  </style>
-</head>
-<body data-theme="{{ request.session.theme|default:'dark' }}">
+  .saved-msg { font-size: 0.82rem; color: #34d399; display: none; }
+  .saved-msg.show { display: inline; }
 
-<header class="site-header">
-  <a class="brand" href="/">k-boris.tech</a>
-  <nav>
-    <a href="{% url 'backlogger:list' %}">Backlog</a>
-    <a href="{% url 'backlogger:profile' %}" style="color:#e2e8f0">Profile</a>
-    <form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
-  </nav>
-</header>
+  body[data-theme="light"] .card { background: #ffffff; border-color: #e2e8f0; }
+  body[data-theme="light"] .field input[type="text"],
+  body[data-theme="light"] .field select { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }
+  body[data-theme="light"] .divider { border-color: #e2e8f0; }
+</style>
+{% endblock %}
 
+{% block nav %}
+<a href="{% url 'backlogger:list' %}">Backlog</a>
+<a href="{% url 'backlogger:profile' %}" style="color:#e2e8f0">Profile</a>
+<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
+{% endblock %}
+
+{% block content %}
 <div class="container">
   <h1>Profile</h1>
   <p class="subtitle">@{{ request.user.username }}{% if request.user.date_joined %} · member since {{ request.user.date_joined|date:"N Y" }}{% endif %}</p>
@@ -134,6 +67,4 @@
     </div>
   </form>
 </div>
-
-</body>
-</html>
+{% endblock %}
diff --git a/backlogger/templates/backlogger/signup.html b/backlogger/templates/backlogger/signup.html
index ac7b90d..3f90bd6 100644
--- a/backlogger/templates/backlogger/signup.html
+++ b/backlogger/templates/backlogger/signup.html
@@ -1,117 +1,46 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sign up — Backlogger</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 12px;
-      padding: 2.5rem 2rem;
-      width: 100%;
-      max-width: 360px;
-    }
-    .brand {
-      display: block;
-      text-align: center;
-      color: #38bdf8;
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin-bottom: 0.4rem;
-      text-decoration: none;
-    }
-    .subtitle {
-      text-align: center;
-      color: #64748b;
-      font-size: 0.85rem;
-      margin-bottom: 2rem;
-    }
-    .field { margin-bottom: 1.1rem; }
-    .field label {
-      display: block;
-      font-size: 0.78rem;
-      color: #94a3b8;
-      text-transform: uppercase;
-      letter-spacing: 0.07em;
-      margin-bottom: 0.4rem;
-    }
-    .field input {
-      width: 100%;
-      background: #1e293b;
-      border: 1px solid #334155;
-      border-radius: 6px;
-      color: #e2e8f0;
-      padding: 0.6rem 0.75rem;
-      font-size: 0.9rem;
-    }
-    .field input:focus { outline: none; border-color: #38bdf8; }
-    .btn {
-      width: 100%;
-      background: #38bdf8;
-      color: #0f172a;
-      font-weight: 600;
-      border: none;
-      border-radius: 6px;
-      padding: 0.6rem;
-      font-size: 0.9rem;
-      cursor: pointer;
-      margin-top: 0.5rem;
-    }
-    .btn:hover { opacity: 0.88; }
-    .errorlist { list-style: none; color: #f87171; font-size: 0.8rem; margin-top: 0.3rem; }
-    .help { font-size: 0.75rem; color: #475569; margin-top: 0.3rem; }
-  </style>
-</head>
-<body>
-  <div class="card">
-    <a class="brand" href="/">killmybacklog.com</a>
-    <p class="subtitle">Create an account</p>
+{% extends 'backlogger/base_auth.html' %}
 
-    <form method="post">
-      {% csrf_token %}
+{% block title %}Sign up — Backlogger{% endblock %}
 
-      <div class="field">
-        <label for="{{ form.username.id_for_label }}">Username</label>
-        {{ form.username }}
-        {{ form.username.errors }}
-      </div>
+{% block styles %}
+<style>
+  .help { font-size: 0.75rem; color: #475569; margin-top: 0.3rem; }
+</style>
+{% endblock %}
 
-      <div class="field">
-        <label for="{{ form.email.id_for_label }}">Email</label>
-        {{ form.email }}
-        {{ form.email.errors }}
-      </div>
+{% block content %}
+<div class="auth-card">
+  <a class="auth-brand" href="/">killmybacklog.com</a>
+  <p class="auth-subtitle">Create an account</p>
 
-      <div class="field">
-        <label for="{{ form.password1.id_for_label }}">Password</label>
-        {{ form.password1 }}
-        {{ form.password1.errors }}
-      </div>
+  <form method="post">
+    {% csrf_token %}
 
-      <div class="field">
-        <label for="{{ form.password2.id_for_label }}">Confirm password</label>
-        {{ form.password2 }}
-        {{ form.password2.errors }}
-      </div>
+    <div class="field">
+      <label for="{{ form.username.id_for_label }}">Username</label>
+      {{ form.username }}
+      {{ form.username.errors }}
+    </div>
+    <div class="field">
+      <label for="{{ form.email.id_for_label }}">Email</label>
+      {{ form.email }}
+      {{ form.email.errors }}
+    </div>
+    <div class="field">
+      <label for="{{ form.password1.id_for_label }}">Password</label>
+      {{ form.password1 }}
+      {{ form.password1.errors }}
+    </div>
+    <div class="field">
+      <label for="{{ form.password2.id_for_label }}">Confirm password</label>
+      {{ form.password2 }}
+      {{ form.password2.errors }}
+    </div>
 
-      <button type="submit" class="btn">Request account</button>
-    </form>
-    <p style="text-align:center; margin-top:1.25rem; font-size:0.83rem; color:#64748b;">
-      Already have an account? <a href="/accounts/login/" style="color:#38bdf8; text-decoration:none;">Log in</a>
-    </p>
-  </div>
-</body>
-</html>
+    <button type="submit" class="btn btn-primary" style="width:100%;margin-top:0.5rem">Request account</button>
+  </form>
+  <p style="text-align:center;margin-top:1.25rem;font-size:0.83rem;color:#64748b;">
+    Already have an account? <a href="/accounts/login/" style="color:#38bdf8;">Log in</a>
+  </p>
+</div>
+{% endblock %}
diff --git a/backlogger/templates/backlogger/signup_pending.html b/backlogger/templates/backlogger/signup_pending.html
index 65a450b..25a2bae 100644
--- a/backlogger/templates/backlogger/signup_pending.html
+++ b/backlogger/templates/backlogger/signup_pending.html
@@ -1,51 +1,23 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Account requested — Backlogger</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    .card {
-      background: #0a0f1e;
-      border: 1px solid #1e293b;
-      border-radius: 12px;
-      padding: 2.5rem 2rem;
-      width: 100%;
-      max-width: 360px;
-      text-align: center;
-    }
-    .brand {
-      display: block;
-      color: #38bdf8;
-      font-weight: 600;
-      font-size: 1.1rem;
-      margin-bottom: 0.4rem;
-      text-decoration: none;
-    }
-    .icon { font-size: 2rem; margin: 1.25rem 0 0.75rem; }
-    h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }
-    p { font-size: 0.85rem; color: #64748b; line-height: 1.5; }
-    a { color: #38bdf8; text-decoration: none; }
-  </style>
-</head>
-<body>
-  <div class="card">
-    <a class="brand" href="/">killmybacklog.com</a>
-    <div class="icon">&#10003;</div>
-    <h2>Account requested</h2>
-    <p>Your account is pending approval.<br>You'll receive access once it's activated.</p>
-    <p style="margin-top:1.5rem;"><a href="/accounts/login/">Back to log in</a></p>
-  </div>
-</body>
-</html>
+{% extends 'backlogger/base_auth.html' %}
+
+{% block title %}Account requested — Backlogger{% endblock %}
+
+{% block styles %}
+<style>
+  .auth-card { text-align: center; }
+  .icon { font-size: 2rem; margin: 1.25rem 0 0.75rem; }
+  h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; }
+  p { font-size: 0.85rem; color: #64748b; line-height: 1.5; }
+  a { color: #38bdf8; }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="auth-card">
+  <a class="auth-brand" href="/">killmybacklog.com</a>
+  <div class="icon">&#10003;</div>
+  <h2>Account requested</h2>
+  <p>Your account is pending approval.<br>You'll receive access once it's activated.</p>
+  <p style="margin-top:1.5rem;"><a href="/accounts/login/">Back to log in</a></p>
+</div>
+{% endblock %}
diff --git a/backlogger/templates/backlogger/steam_import.html b/backlogger/templates/backlogger/steam_import.html
index 1b43c4c..a29b1b2 100644
--- a/backlogger/templates/backlogger/steam_import.html
+++ b/backlogger/templates/backlogger/steam_import.html
@@ -1,154 +1,52 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Import from Steam — Backlogger</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
-      min-height: 100vh;
-    }
-    a { color: inherit; text-decoration: none; }
+{% extends 'backlogger/base.html' %}
 
-    .site-header {
-      background: #0a0f1e;
-      border-bottom: 1px solid #1e293b;
-      padding: 0.75rem 2rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .site-header .brand { color: #38bdf8; font-weight: 600; font-size: 0.95rem; }
-    .site-header nav a { color: #64748b; font-size: 0.85rem; }
-    .site-header nav a:hover { color: #e2e8f0; }
+{% block title %}Import from Steam — Backlogger{% endblock %}
 
-    .container { max-width: 860px; margin: 0 auto; padding: 2rem; }
+{% block brand %}killmybacklog.com{% endblock %}
 
-    .top-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 1.75rem;
-    }
-    .top-bar h1 { font-size: 1.5rem; letter-spacing: -0.03em; }
-    .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
+{% block styles %}
+<style>
+  .container { max-width: 860px; margin: 0 auto; padding: 2rem; }
 
-    .error-banner {
-      background: #450a0a;
-      border: 1px solid #f87171;
-      border-radius: 8px;
-      color: #fca5a5;
-      padding: 0.85rem 1.1rem;
-      margin-bottom: 1.5rem;
-    }
+  .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; }
+  .top-bar h1 { font-size: 1.5rem; letter-spacing: -0.03em; }
+  .top-bar .count { color: #64748b; font-size: 1rem; font-weight: 400; margin-left: 0.5rem; }
 
-    .toolbar {
-      display: flex;
-      gap: 0.75rem;
-      align-items: center;
-      margin-bottom: 1rem;
-    }
-    .btn {
-      display: inline-block;
-      padding: 0.45rem 1rem;
-      border-radius: 6px;
-      font-size: 0.85rem;
-      cursor: pointer;
-      border: none;
-      transition: opacity 0.15s;
-      font-family: inherit;
-    }
-    .btn:hover { opacity: 0.85; }
-    .btn-primary { background: #38bdf8; color: #0f172a; font-weight: 600; }
-    .btn-outline { background: transparent; color: #94a3b8; border: 1px solid #334155; }
-    .btn-text { background: none; border: none; color: #64748b; font-size: 0.8rem; cursor: pointer; font-family: inherit; padding: 0; }
-    .btn-text:hover { color: #e2e8f0; }
+  .toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
 
-    .game-table {
-      width: 100%;
-      border-collapse: collapse;
-    }
-    .game-table thead th {
-      text-align: left;
-      font-size: 0.72rem;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: #475569;
-      padding: 0 0.75rem 0.6rem;
-      border-bottom: 1px solid #1e293b;
-    }
-    .game-table thead th:first-child { padding-left: 0; width: 2rem; }
-    .game-table tbody tr {
-      border-bottom: 1px solid #1a2235;
-      transition: background 0.1s;
-    }
-    .game-table tbody tr:hover:not(.already-imported) { background: #0d1526; }
-    .game-table td {
-      padding: 0.6rem 0.75rem;
-      font-size: 0.88rem;
-    }
-    .game-table td:first-child { padding-left: 0; }
+  .game-table { width: 100%; border-collapse: collapse; }
+  .game-table thead th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #475569; padding: 0 0.75rem 0.6rem; border-bottom: 1px solid #1e293b; }
+  .game-table thead th:first-child { padding-left: 0; width: 2rem; }
+  .game-table tbody tr { border-bottom: 1px solid #1a2235; transition: background 0.1s; }
+  .game-table tbody tr:hover:not(.already-imported) { background: #0d1526; }
+  .game-table td { padding: 0.6rem 0.75rem; font-size: 0.88rem; }
+  .game-table td:first-child { padding-left: 0; }
 
-    .already-imported td { opacity: 0.38; }
-    .already-imported .tag {
-      font-size: 0.68rem;
-      color: #475569;
-      border: 1px solid #1e293b;
-      border-radius: 4px;
-      padding: 0.1rem 0.4rem;
-      margin-left: 0.5rem;
-      vertical-align: middle;
-    }
+  .already-imported td { opacity: 0.38; }
+  .already-imported .tag { font-size: 0.68rem; color: #475569; border: 1px solid #1e293b; border-radius: 4px; padding: 0.1rem 0.4rem; margin-left: 0.5rem; vertical-align: middle; }
 
-    .hours { color: #38bdf8; font-variant-numeric: tabular-nums; }
-    .hours-zero { color: #334155; }
+  .hours { color: #38bdf8; font-variant-numeric: tabular-nums; }
+  .hours-zero { color: #334155; }
 
-    input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
+  input[type="checkbox"] { accent-color: #38bdf8; width: 1rem; height: 1rem; cursor: pointer; }
 
-    .sticky-footer {
-      position: sticky;
-      bottom: 0;
-      background: #0a0f1e;
-      border-top: 1px solid #1e293b;
-      padding: 1rem 2rem;
-      display: flex;
-      align-items: center;
-      gap: 1.25rem;
-    }
-    .sticky-footer .summary { font-size: 0.85rem; color: #64748b; }
-    .sticky-footer .summary strong { color: #e2e8f0; }
+  .sticky-footer { position: sticky; bottom: 0; background: #0a0f1e; border-top: 1px solid #1e293b; padding: 1rem 2rem; display: flex; align-items: center; gap: 1.25rem; }
+  .sticky-footer .summary { font-size: 0.85rem; color: #64748b; }
+  .sticky-footer .summary strong { color: #e2e8f0; }
 
-    .empty { text-align: center; padding: 4rem 2rem; color: #475569; }
-    .steam-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.6rem;
-      background: #1b2838;
-      border: 1px solid #2a475e;
-      color: #c7d5e0;
-      font-weight: 600;
-      border-radius: 6px;
-      padding: 0.6rem 1.1rem;
-      font-size: 0.9rem;
-      cursor: pointer;
-      text-decoration: none;
-      transition: background 0.15s;
-    }
-    .steam-btn:hover { background: #2a475e; }
-    .steam-logo { width: 20px; height: 20px; }
-  </style>
-</head>
-<body>
+  .empty { text-align: center; padding: 4rem 2rem; color: #475569; }
 
-<header class="site-header">
-  <a class="brand" href="/">killmybacklog.com</a>
-  <nav><a href="{% url 'backlogger:list' %}">← Back to backlog</a></nav>
-</header>
+  .steam-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: #1b2838; border: 1px solid #2a475e; color: #c7d5e0; font-weight: 600; border-radius: 6px; padding: 0.6rem 1.1rem; font-size: 0.9rem; cursor: pointer; transition: background 0.15s; }
+  .steam-btn:hover { background: #2a475e; }
+  .steam-logo { width: 20px; height: 20px; }
+</style>
+{% endblock %}
 
+{% block nav %}
+<a href="{% url 'backlogger:list' %}">← Back to backlog</a>
+{% endblock %}
+
+{% block content %}
 <div class="container">
 
   {% if error %}
@@ -219,7 +117,7 @@
   {% else %}
   <div class="top-bar"><h1>Import from Steam</h1></div>
   <div class="empty">
-    <p style="margin-bottom:1.25rem; color:#64748b">Connect your Steam account to import your library.</p>
+    <p style="margin-bottom:1.25rem;color:#64748b">Connect your Steam account to import your library.</p>
     <a href="{% url 'backlogger:steam_login' %}" class="steam-btn">
       <svg class="steam-logo" viewBox="0 0 233 233" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M116.5 0C52.1 0 0 52.1 0 116.5c0 55.4 38.6 101.8 90.4 113.7l34.2-84.2c-1.2.1-2.4.1-3.6.1-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40c0 19.1-13.4 35.1-31.4 39l-33.8 83.3C147.5 222 185 179.5 185 128c0-1.6-.1-3.1-.2-4.7l-31.5-13c.4 2.2.7 4.5.7 6.8 0 19.9-16.1 36-36 36s-36-16.1-36-36 16.1-36 36-36 36 16.1 36 36" fill="#c7d5e0"/>
@@ -230,7 +128,9 @@
   {% endif %}
 
 </div>
+{% endblock %}
 
+{% block scripts %}
 <script>
 function toggleAll(check) {
   document.querySelectorAll('input[name="appids"]').forEach(cb => cb.checked = check);
@@ -244,5 +144,4 @@ function updateCount() {
 document.querySelectorAll('input[name="appids"]').forEach(cb => cb.addEventListener('change', updateCount));
 updateCount();
 </script>
-</body>
-</html>
+{% endblock %}