diff --git a/app/static/style.css b/app/static/style.css
index e87faee..c0db413 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -1,127 +1,598 @@
-body {
-    max-width: 800px;
-    margin: auto;
-    padding-top: 60px;
-    text-align: center;
-    font-family: Arial, sans-serif;
+@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+
+:root {
+    --bg: #0a0a0a;
+    --surface: #111111;
+    --border: #222222;
+    --accent: #7ea1e8;
+    --text: #e8e4dc;
+    --muted: #7ea1e8;
+    --font-display: "Playfair Display", Georgia, serif;
+    --font-mono: "DM Mono", monospace;
 }
 
+* {
+    box-sizing: border-box;
+}
+
+html {
+    min-height: 100%;
+    background: var(--bg);
+}
+
+body {
+    display: grid;
+    min-height: 100vh;
+    grid-template-rows: auto 1fr auto;
+    margin: 0;
+    color: var(--text);
+    background: var(--bg);
+    font-family: var(--font-mono);
+    line-height: 1.5;
+}
+
+body::before {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    content: "";
+    opacity: 0.035;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
+}
+
+body > * {
+    position: relative;
+    z-index: 1;
+}
+
+a,
 button {
-    width: 250px;
-    height: 100px;
-    margin: 10px;
-    font-size: 22px;
-    cursor: pointer;
+    font: inherit;
 }
 
 a {
-    font-size: 20px;
+    color: var(--accent);
+    text-decoration: none;
 }
 
-.site-nav {
-    display: flex;
+h1,
+h2,
+p {
+    margin-top: 0;
+}
+
+h1,
+h2 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    letter-spacing: 0;
+}
+
+kbd {
+    display: inline-flex;
+    min-width: 1.55rem;
+    min-height: 1.35rem;
+    align-items: center;
     justify-content: center;
-    gap: 16px;
-    margin-bottom: 32px;
+    border: 1px solid #333333;
+    border-radius: 2px;
+    padding: 0 0.35rem;
+    color: var(--text);
+    background: #171717;
+    box-shadow: inset 0 -1px 0 #050505;
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    line-height: 1;
 }
 
-.admin-page .site-nav {
-    justify-content: flex-start;
-}
-
-.page {
-    padding: 0 20px 60px;
-}
-
-.admin-page {
-    text-align: left;
-}
-
-.admin-header {
+.app-header,
+.app-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 20px;
+    gap: 32px;
+    min-height: 82px;
+    border-color: var(--border);
+    padding: 0 clamp(28px, 4vw, 76px);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
 }
 
+.app-header {
+    border-bottom: 1px solid var(--border);
+}
+
+.app-footer {
+    border-top: 1px solid var(--border);
+}
+
+.brand {
+    color: var(--text);
+    font-size: 1.35rem;
+    font-weight: 500;
+    letter-spacing: 0.28em;
+    text-transform: lowercase;
+}
+
+.site-nav,
 .admin-header nav,
 .row-actions,
 .form-actions {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 16px;
+    justify-content: flex-end;
+    gap: 14px;
+}
+
+.site-nav a,
+.admin-header nav a,
+.row-actions a,
+.form-actions a,
+.button-link,
+button {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: inline-flex;
+    min-height: 52px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--accent);
+    border-radius: 0;
+    padding: 1rem 1.25rem;
+    color: var(--accent);
+    background: transparent;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    font-weight: 500;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    transition:
+        color 220ms ease,
+        transform 120ms ease,
+        border-color 220ms ease;
+}
+
+.site-nav a::before,
+.admin-header nav a::before,
+.row-actions a::before,
+.form-actions a::before,
+.button-link::before,
+button::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    content: "";
+    background: var(--accent);
+    transform: translateX(-100%);
+    transition: transform 260ms ease;
+}
+
+.site-nav a:hover,
+.site-nav a:focus-visible,
+.admin-header nav a:hover,
+.admin-header nav a:focus-visible,
+.row-actions a:hover,
+.row-actions a:focus-visible,
+.form-actions a:hover,
+.form-actions a:focus-visible,
+.button-link:hover,
+.button-link:focus-visible,
+button:hover,
+button:focus-visible {
+    color: var(--bg);
+}
+
+.site-nav a:hover::before,
+.site-nav a:focus-visible::before,
+.admin-header nav a:hover::before,
+.admin-header nav a:focus-visible::before,
+.row-actions a:hover::before,
+.row-actions a:focus-visible::before,
+.form-actions a:hover::before,
+.form-actions a:focus-visible::before,
+.button-link:hover::before,
+.button-link:focus-visible::before,
+button:hover::before,
+button:focus-visible::before {
+    transform: translateX(0);
+}
+
+.site-nav a:active,
+.admin-header nav a:active,
+.row-actions a:active,
+.form-actions a:active,
+.button-link:active,
+button:active {
+    transform: scale(0.97);
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible {
+    outline: 1px solid var(--accent);
+    outline-offset: 4px;
+}
+
+.page {
+    display: grid;
+    width: min(100%, 1320px);
+    margin: 0 auto;
+    place-items: center;
+    padding: clamp(48px, 7vh, 96px) 32px;
+    animation: page-intro 0.6s ease both;
+}
+
+.admin-page {
+    width: min(100%, 1420px);
+}
+
+.main-card {
+    position: relative;
+    width: min(100%, 1120px);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--accent);
+    padding: clamp(44px, 5vw, 84px);
+    background: var(--surface);
+}
+
+.main-card::before {
+    position: absolute;
+    top: 0.2rem;
+    left: 1.45rem;
+    content: "“";
+    color: var(--accent);
+    font-family: var(--font-display);
+    font-size: 8rem;
+    font-style: italic;
+    line-height: 1;
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.admin-card::before {
+    content: "";
+}
+
+.vote-panel,
+.results-panel,
+.empty-state {
+    display: grid;
+    justify-items: start;
+    text-align: left;
+}
+
+.eyebrow,
+.question-date,
+.total-votes,
+.result-row p,
+.empty-state p,
+.app-footer span {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    font-weight: 400;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+}
+
+.eyebrow {
+    margin-bottom: 34px;
+    font-size: 0.82rem;
+}
+
+.question-title {
+    max-width: 16ch;
+    margin-bottom: 68px;
+    font-family: var(--font-display);
+    font-size: clamp(2.35rem, 3.8vw, 5.2rem);
+    font-style: italic;
+    font-weight: 600;
+    line-height: 1.18;
+}
+
+.vote-form {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+}
+
+.vote-button {
+    display: grid;
+    align-content: space-between;
+    justify-content: stretch;
+    width: 100%;
+    min-height: clamp(220px, 23vh, 340px);
+    padding: clamp(24px, 3vw, 44px);
+    text-align: left;
+    font-size: clamp(1.55rem, 2.1vw, 2.65rem);
+    line-height: 1.08;
+}
+
+.vote-button span {
+    color: inherit;
+    font-size: 0.78rem;
+    letter-spacing: 0.24em;
+}
+
+.result-list {
+    display: grid;
+    width: 100%;
+    gap: 1px;
+    margin-bottom: 46px;
+    border: 1px solid var(--border);
+    background: var(--border);
+}
+
+.result-row {
+    padding: clamp(28px, 3vw, 44px);
+    background: var(--surface);
+}
+
+.result-topline {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 18px;
+}
+
+.result-topline h2,
+.question-row h2 {
+    margin-bottom: 18px;
+    font-size: clamp(1.7rem, 2.4vw, 3rem);
+    font-style: italic;
+}
+
+.result-topline strong {
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: clamp(1.6rem, 2.2vw, 2.7rem);
+    font-weight: 400;
+    letter-spacing: 0.18em;
+}
+
+.result-bar {
+    overflow: hidden;
+    height: 14px;
+    margin-bottom: 18px;
+    border: 1px solid var(--border);
+    background: #0d0d0d;
+}
+
+.result-bar span {
+    display: block;
+    height: 100%;
+    background: var(--accent);
+}
+
+.total-votes {
+    margin-bottom: 34px;
+    font-size: 0.88rem;
+}
+
+.total-votes::before,
+.question-date::before {
+    content: "— ";
+}
+
+.button-link {
+    width: fit-content;
+}
+
+.admin-card {
+    width: min(100%, 1240px);
+}
+
+.admin-header {
+    margin-bottom: 40px;
+}
+
+.admin-page h1 {
+    margin-bottom: 40px;
+    font-size: clamp(2.5rem, 4.6vw, 5.4rem);
+    font-style: italic;
+    line-height: 1.04;
 }
 
 .admin-form {
     display: grid;
-    gap: 10px;
-    max-width: 520px;
+    width: 100%;
+    gap: 16px;
+}
+
+.admin-form label {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.78rem;
+    letter-spacing: 0.24em;
+    text-transform: uppercase;
 }
 
 .admin-form input,
 .admin-form textarea {
-    box-sizing: border-box;
     width: 100%;
-    padding: 10px;
-    font: inherit;
+    border: 1px solid var(--border);
+    border-radius: 0;
+    padding: 1.15rem 1.25rem;
+    color: var(--text);
+    background: var(--bg);
+    font-family: var(--font-mono);
+    font-size: 1.1rem;
+}
+
+.admin-form textarea {
+    min-height: 180px;
+    resize: vertical;
+}
+
+.admin-form input:hover,
+.admin-form textarea:hover,
+.admin-form input:focus,
+.admin-form textarea:focus {
+    border-color: var(--accent);
+}
+
+.form-actions {
+    justify-content: flex-start;
+    margin-top: 12px;
 }
 
 .button-compact {
-    width: auto;
-    height: auto;
-    margin: 10px 0;
-    padding: 12px 18px;
-    font-size: 18px;
+    width: fit-content;
 }
 
 .danger {
-    background: #b00020;
-    color: white;
+    border-color: var(--text);
+    color: var(--text);
 }
 
+.danger::before {
+    background: var(--text);
+}
+
+.notice,
 .error {
-    color: #b00020;
-    font-weight: bold;
-}
-
-.notice {
-    color: #245900;
-    font-weight: bold;
+    width: fit-content;
+    max-width: 100%;
+    border: 1px solid var(--border);
+    margin-bottom: 28px;
+    padding: 1rem 1.2rem;
+    color: var(--accent);
+    background: var(--bg);
+    font-family: var(--font-mono);
+    font-size: 0.82rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
 }
 
 .question-list {
     display: grid;
-    gap: 14px;
+    gap: 1px;
+    border: 1px solid var(--border);
+    background: var(--border);
 }
 
 .question-row {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 20px;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    padding: 16px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 34px;
+    align-items: start;
+    padding: clamp(26px, 3vw, 42px);
+    background: var(--surface);
 }
 
-.question-row h2,
 .question-row p {
-    margin: 0 0 8px;
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 1rem;
 }
 
-.question-date {
-    color: #666;
-    font-weight: bold;
+.row-actions {
+    justify-content: flex-end;
 }
 
-@media (max-width: 640px) {
-    .admin-header,
+.loader {
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.loading-text {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    animation: pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes page-intro {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0%,
+    100% {
+        opacity: 0.6;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}
+
+@media (max-width: 760px) {
+    .app-header,
+    .app-footer {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+        padding: 18px;
+    }
+
+    .site-nav,
+    .row-actions,
+    .form-actions {
+        justify-content: flex-start;
+    }
+
+    .page {
+        padding: 28px 14px;
+    }
+
+    .main-card {
+        padding: 28px 20px;
+    }
+
+    .question-title {
+        max-width: 100%;
+        margin-bottom: 34px;
+        font-size: clamp(2rem, 12vw, 3.25rem);
+    }
+
+    .vote-form {
+        grid-template-columns: 1fr;
+    }
+
+    .vote-button {
+        display: grid;
+        justify-items: start;
+        gap: 10px;
+        min-height: 160px;
+    }
+
+    .result-topline,
     .question-row {
-        display: block;
+        grid-template-columns: 1fr;
     }
 
-    .admin-header nav,
-    .row-actions {
-        margin-top: 12px;
+    .result-topline {
+        display: grid;
+        gap: 4px;
     }
 }
diff --git a/app/templates/admin/account.html b/app/templates/admin/account.html
index a7bce33..0713e78 100644
--- a/app/templates/admin/account.html
+++ b/app/templates/admin/account.html
@@ -2,62 +2,74 @@
 <html>
 <head>
     <title>Change Admin Credentials</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page admin-page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
     <nav class="site-nav">
         <a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
         <a href="{{ url_for('public.home') }}">Public Site</a>
     </nav>
+</header>
 
-    <h1>Change Admin Credentials</h1>
+<main class="page admin-page">
+    <section class="main-card admin-card">
+        <p class="eyebrow">Account</p>
+        <h1>Change Admin Credentials</h1>
 
-    {% if error %}
-        <p class="error">{{ error }}</p>
-    {% endif %}
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
 
-    <form class="admin-form" method="POST">
-        <label for="username">Username</label>
-        <input
-            id="username"
-            name="username"
-            type="text"
-            value="{{ admin.username }}"
-            required
-        >
+        <form class="admin-form" method="POST">
+            <label for="username">Username</label>
+            <input
+                id="username"
+                name="username"
+                type="text"
+                value="{{ admin.username }}"
+                required
+            >
 
-        <label for="current_password">Current Password</label>
-        <input
-            id="current_password"
-            name="current_password"
-            type="password"
-            required
-        >
+            <label for="current_password">Current Password</label>
+            <input
+                id="current_password"
+                name="current_password"
+                type="password"
+                required
+            >
 
-        <label for="new_password">New Password</label>
-        <input
-            id="new_password"
-            name="new_password"
-            type="password"
-            minlength="8"
-        >
+            <label for="new_password">New Password</label>
+            <input
+                id="new_password"
+                name="new_password"
+                type="password"
+                minlength="8"
+            >
 
-        <label for="confirm_password">Confirm New Password</label>
-        <input
-            id="confirm_password"
-            name="confirm_password"
-            type="password"
-            minlength="8"
-        >
+            <label for="confirm_password">Confirm New Password</label>
+            <input
+                id="confirm_password"
+                name="confirm_password"
+                type="password"
+                minlength="8"
+            >
 
-        <div class="form-actions">
-            <button class="button-compact" type="submit">Save Credentials</button>
-            <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
-        </div>
-    </form>
+            <div class="form-actions">
+                <button class="button-compact" type="submit">Save Credentials</button>
+                <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
+            </div>
+        </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>credentials</span>
+    <span>admin</span>
+</footer>
+
 </body>
 </html>
diff --git a/app/templates/admin/dashboard.html b/app/templates/admin/dashboard.html
index bb20b2e..73a0785 100644
--- a/app/templates/admin/dashboard.html
+++ b/app/templates/admin/dashboard.html
@@ -2,45 +2,58 @@
 <html>
 <head>
     <title>Admin Dashboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
+    <nav class="site-nav">
+        <a href="{{ url_for('public.home') }}">Public Site</a>
+        <a href="{{ url_for('admin.new_question') }}">Create Question</a>
+        <a href="{{ url_for('admin.account') }}">Change Credentials</a>
+        <a href="{{ url_for('admin.logout') }}">Log Out</a>
+    </nav>
+</header>
+
 <main class="page admin-page">
-    <div class="admin-header">
-        <h1>Questions</h1>
-        <nav>
-            <a href="{{ url_for('public.home') }}">Public Site</a>
-            <a href="{{ url_for('admin.new_question') }}">Create Question</a>
-            <a href="{{ url_for('admin.account') }}">Change Credentials</a>
-            <a href="{{ url_for('admin.logout') }}">Log Out</a>
-        </nav>
-    </div>
-
-    {% for message in get_flashed_messages() %}
-        <p class="notice">{{ message }}</p>
-    {% endfor %}
-
-    {% if questions %}
-        <div class="question-list">
-            {% for question in questions %}
-                <article class="question-row">
-                    <div>
-                        <p class="question-date">{{ question.date }}</p>
-                        <h2>{{ question.question }}</h2>
-                        <p>{{ question.option_a }} or {{ question.option_b }}</p>
-                    </div>
-                    <div class="row-actions">
-                        <a href="{{ url_for('admin.edit_question', question_id=question.id) }}">Edit</a>
-                        <a href="{{ url_for('admin.delete_question', question_id=question.id) }}">Delete</a>
-                    </div>
-                </article>
-            {% endfor %}
+    <section class="main-card admin-card">
+        <div class="admin-header">
+            <p class="eyebrow">Console</p>
+            <h1>Questions</h1>
         </div>
-    {% else %}
-        <p>No questions yet.</p>
-    {% endif %}
+
+        {% for message in get_flashed_messages() %}
+            <p class="notice">{{ message }}</p>
+        {% endfor %}
+
+        {% if questions %}
+            <div class="question-list">
+                {% for question in questions %}
+                    <article class="question-row">
+                        <div>
+                            <p class="question-date">{{ question.date }}</p>
+                            <h2>{{ question.question }}</h2>
+                            <p>{{ question.option_a }} or {{ question.option_b }}</p>
+                        </div>
+                        <div class="row-actions">
+                            <a href="{{ url_for('admin.edit_question', question_id=question.id) }}">Edit</a>
+                            <a href="{{ url_for('admin.delete_question', question_id=question.id) }}">Delete</a>
+                        </div>
+                    </article>
+                {% endfor %}
+            </div>
+        {% else %}
+            <p>No questions yet.</p>
+        {% endif %}
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>questions</span>
+    <span>sqlite</span>
+</footer>
+
 </body>
 </html>
diff --git a/app/templates/admin/delete_confirm.html b/app/templates/admin/delete_confirm.html
index 5b5b287..aa65c23 100644
--- a/app/templates/admin/delete_confirm.html
+++ b/app/templates/admin/delete_confirm.html
@@ -2,23 +2,40 @@
 <html>
 <head>
     <title>Delete Question</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
+    <nav class="site-nav">
+        <a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
+        <a href="{{ url_for('public.home') }}">Public Site</a>
+    </nav>
+</header>
+
 <main class="page admin-page">
-    <h1>Delete Question</h1>
+    <section class="main-card admin-card">
+        <p class="eyebrow">Delete</p>
+        <h1>Delete Question</h1>
 
-    <p>Delete the question scheduled for {{ question.date }}?</p>
-    <h2>{{ question.question }}</h2>
+        <p>Delete the question scheduled for {{ question.date }}?</p>
+        <h2>{{ question.question }}</h2>
 
-    <form class="admin-form" method="POST">
-        <div class="form-actions">
-            <button class="button-compact danger" type="submit">Delete</button>
-            <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
-        </div>
-    </form>
+        <form class="admin-form" method="POST">
+            <div class="form-actions">
+                <button class="button-compact danger" type="submit">Delete</button>
+                <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
+            </div>
+        </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>destructive action</span>
+    <span>confirm</span>
+</footer>
+
 </body>
 </html>
diff --git a/app/templates/admin/login.html b/app/templates/admin/login.html
index 31d30a4..cb64cb6 100644
--- a/app/templates/admin/login.html
+++ b/app/templates/admin/login.html
@@ -2,31 +2,43 @@
 <html>
 <head>
     <title>Admin Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page admin-page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('public.home') }}">wyr</a>
     <nav class="site-nav">
         <a href="{{ url_for('public.home') }}">Public Site</a>
     </nav>
+</header>
 
-    <h1>Admin Login</h1>
+<main class="page admin-page">
+    <section class="main-card admin-card">
+        <p class="eyebrow">Restricted</p>
+        <h1>Admin Login</h1>
 
-    {% for message in get_flashed_messages() %}
-        <p class="error">{{ message }}</p>
-    {% endfor %}
+        {% for message in get_flashed_messages() %}
+            <p class="error">{{ message }}</p>
+        {% endfor %}
 
-    <form class="admin-form" action="{{ url_for('admin.login') }}" method="POST">
-        <label for="username">Username</label>
-        <input id="username" name="username" type="text" required>
+        <form class="admin-form" action="{{ url_for('admin.login') }}" method="POST">
+            <label for="username">Username</label>
+            <input id="username" name="username" type="text" required>
 
-        <label for="password">Password</label>
-        <input id="password" name="password" type="password" required>
+            <label for="password">Password</label>
+            <input id="password" name="password" type="password" required>
 
-        <button class="button-compact" type="submit">Log In</button>
-    </form>
+            <button class="button-compact" type="submit">Log In</button>
+        </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>secure area</span>
+    <span>session auth</span>
+</footer>
+
 </body>
 </html>
diff --git a/app/templates/admin/question_form.html b/app/templates/admin/question_form.html
index ab184a2..386f0b4 100644
--- a/app/templates/admin/question_form.html
+++ b/app/templates/admin/question_form.html
@@ -2,54 +2,71 @@
 <html>
 <head>
     <title>{{ title }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
+<header class="app-header">
+    <a class="brand" href="{{ url_for('admin.dashboard') }}">admin</a>
+    <nav class="site-nav">
+        <a href="{{ url_for('admin.dashboard') }}">Dashboard</a>
+        <a href="{{ url_for('public.home') }}">Public Site</a>
+    </nav>
+</header>
+
 <main class="page admin-page">
-    <h1>{{ title }}</h1>
+    <section class="main-card admin-card">
+        <p class="eyebrow">Question</p>
+        <h1>{{ title }}</h1>
 
-    {% if error %}
-        <p class="error">{{ error }}</p>
-    {% endif %}
+        {% if error %}
+            <p class="error">{{ error }}</p>
+        {% endif %}
 
-    <form class="admin-form" method="POST">
-        <label for="date">Date</label>
-        <input
-            id="date"
-            name="date"
-            type="date"
-            value="{{ question.date if question else '' }}"
-            required
-        >
+        <form class="admin-form" method="POST">
+            <label for="date">Date</label>
+            <input
+                id="date"
+                name="date"
+                type="date"
+                value="{{ question.date if question else '' }}"
+                required
+            >
 
-        <label for="question">Question</label>
-        <textarea id="question" name="question" rows="4" required>{{ question.question if question else '' }}</textarea>
+            <label for="question">Question</label>
+            <textarea id="question" name="question" rows="4" required>{{ question.question if question else '' }}</textarea>
 
-        <label for="option_a">Option A</label>
-        <input
-            id="option_a"
-            name="option_a"
-            type="text"
-            value="{{ question.option_a if question else '' }}"
-            required
-        >
+            <label for="option_a">Option A</label>
+            <input
+                id="option_a"
+                name="option_a"
+                type="text"
+                value="{{ question.option_a if question else '' }}"
+                required
+            >
 
-        <label for="option_b">Option B</label>
-        <input
-            id="option_b"
-            name="option_b"
-            type="text"
-            value="{{ question.option_b if question else '' }}"
-            required
-        >
+            <label for="option_b">Option B</label>
+            <input
+                id="option_b"
+                name="option_b"
+                type="text"
+                value="{{ question.option_b if question else '' }}"
+                required
+            >
 
-        <div class="form-actions">
-            <button class="button-compact" type="submit">Save</button>
-            <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
-        </div>
-    </form>
+            <div class="form-actions">
+                <button class="button-compact" type="submit">Save</button>
+                <a href="{{ url_for('admin.dashboard') }}">Cancel</a>
+            </div>
+        </form>
+    </section>
 </main>
 
+<footer class="app-footer">
+    <span>editor</span>
+    <span>daily prompt</span>
+</footer>
+
 </body>
 </html>
diff --git a/app/templates/public/index.html b/app/templates/public/index.html
index 24a83f1..b4bf6d9 100644
--- a/app/templates/public/index.html
+++ b/app/templates/public/index.html
@@ -2,48 +2,67 @@
 <html>
 <head>
     <title>Would You Rather</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('public.home') }}">wyr</a>
     <nav class="site-nav">
         <a href="{{ url_for('admin.dashboard') }}">Admin</a>
     </nav>
+</header>
 
+<main class="page">
     {% if question %}
-        <h1>{{ question.question }}</h1>
+        <section class="main-card vote-panel">
+            <p class="eyebrow">Daily question</p>
+            <h1 class="question-title">{{ question.question }}</h1>
 
-        <form action="{{ url_for('public.vote') }}" method="POST">
+            <form class="vote-form" action="{{ url_for('public.vote') }}" method="POST">
 
-            <input
-                type="hidden"
-                name="qid"
-                value="{{ question.id }}"
-            >
+                <input
+                    type="hidden"
+                    name="qid"
+                    value="{{ question.id }}"
+                >
 
-            <button
-                type="submit"
-                name="vote"
-                value="A"
-            >
-                {{ question.option_a }}
-            </button>
+                <button
+                    class="vote-button"
+                    type="submit"
+                    name="vote"
+                    value="A"
+                >
+                    <span>Option A</span>
+                    {{ question.option_a }}
+                </button>
 
-            <button
-                type="submit"
-                name="vote"
-                value="B"
-            >
-                {{ question.option_b }}
-            </button>
+                <button
+                    class="vote-button"
+                    type="submit"
+                    name="vote"
+                    value="B"
+                >
+                    <span>Option B</span>
+                    {{ question.option_b }}
+                </button>
 
-        </form>
+            </form>
+        </section>
     {% else %}
-        <h1>No question is scheduled yet.</h1>
-        <p>Check back soon.</p>
+        <section class="main-card empty-state">
+            <p class="eyebrow">Daily question</p>
+            <h1 class="question-title">No question is scheduled yet.</h1>
+            <p>Check back soon.</p>
+        </section>
     {% endif %}
 </main>
 
+<footer class="app-footer">
+    <span>one vote</span>
+    <span>per question</span>
+</footer>
+
 </body>
 </html>
diff --git a/app/templates/public/results.html b/app/templates/public/results.html
index 36fa20c..cda4529 100644
--- a/app/templates/public/results.html
+++ b/app/templates/public/results.html
@@ -2,36 +2,67 @@
 <html>
 <head>
     <title>Results</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
 
-<main class="page">
+<header class="app-header">
+    <a class="brand" href="{{ url_for('public.home') }}">wyr</a>
     <nav class="site-nav">
         <a href="{{ url_for('public.home') }}">Vote</a>
         <a href="{{ url_for('admin.dashboard') }}">Admin</a>
     </nav>
+</header>
 
+<main class="page">
     {% if question %}
-        <h1>{{ question.question }}</h1>
+        <section class="main-card results-panel">
+            <p class="eyebrow">Live results</p>
+            <h1 class="question-title">{{ question.question }}</h1>
 
-        <h2>{{ question.option_a }}</h2>
-        <p>{{ percent_a }}% ({{ votes_a }} votes)</p>
+            <div class="result-list">
+                <article class="result-row">
+                    <div class="result-topline">
+                        <h2>{{ question.option_a }}</h2>
+                        <strong>{{ percent_a }}%</strong>
+                    </div>
+                    <div class="result-bar" aria-hidden="true">
+                        <span style="width: {{ percent_a }}%"></span>
+                    </div>
+                    <p>{{ votes_a }} votes</p>
+                </article>
 
-        <h2>{{ question.option_b }}</h2>
-        <p>{{ percent_b }}% ({{ votes_b }} votes)</p>
+                <article class="result-row">
+                    <div class="result-topline">
+                        <h2>{{ question.option_b }}</h2>
+                        <strong>{{ percent_b }}%</strong>
+                    </div>
+                    <div class="result-bar" aria-hidden="true">
+                        <span style="width: {{ percent_b }}%"></span>
+                    </div>
+                    <p>{{ votes_b }} votes</p>
+                </article>
+            </div>
 
-        <hr>
+            <p class="total-votes">Total votes: {{ total }}</p>
 
-        <p>Total votes: {{ total }}</p>
-
-        <a href="{{ url_for('public.home') }}">Back</a>
+            <a class="button-link" href="{{ url_for('public.home') }}">Back</a>
+        </section>
     {% else %}
-        <h1>No results yet.</h1>
-        <p>No question is scheduled yet.</p>
-        <a href="{{ url_for('public.home') }}">Back</a>
+        <section class="main-card empty-state">
+            <p class="eyebrow">Live results</p>
+            <h1 class="question-title">No results yet.</h1>
+            <p>No question is scheduled yet.</p>
+            <a class="button-link" href="{{ url_for('public.home') }}">Back</a>
+        </section>
     {% endif %}
 </main>
 
+<footer class="app-footer">
+    <span>results</span>
+    <span>live tally</span>
+</footer>
+
 </body>
 </html>