diff --git a/app.css b/app.css
index 66e9585..3df3a2b 100644
--- a/app.css
+++ b/app.css
@@ -207,13 +207,19 @@ dialog::backdrop { background: rgba(22, 23, 26, .55); }
 .toast.err { background: var(--bad-ink); }
 
 /* login */
-.loginpage { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--ink); }
-.loginbox { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
-.loginbox .brand { justify-content: center; padding: 0; }
-.loginbox .brand .wm { font-size: 20px; }
-.loginbox .brand .kana { font-size: 11px; }
-.loginform { background: var(--surface); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
-.loginform input { min-height: 44px; }
-.loginform .btn { min-height: 44px; width: 100%; }
+.loginpage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 32px 16px; background: var(--ink); color: #f4f4f1; }
+.loginbox { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
+.loginbox .brand { flex-direction: column; gap: 18px; padding: 0; text-align: center; }
+.loginbox .brand .wm { font-size: 24px; letter-spacing: 0.18em; margin-right: -0.18em; }
+.loginbox .brand .kana { font-size: 12px; letter-spacing: 0.4em; margin: 6px -0.4em 0 0; }
+.loginform { width: 100%; display: flex; flex-direction: column; gap: 14px; }
+.loginform .field > label { color: #c9c9c3; }
+.loginform input { min-height: 44px; font-size: 15px; background: #1f2024; border-color: #34353b; color: #fff; }
+.loginform input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(42, 120, 214, .25); }
+.loginform .btn { min-height: 44px; width: 100%; margin-top: 10px; font-size: 15px; font-weight: 600; background: #f4f4f1; border-color: #f4f4f1; color: var(--ink); }
+.loginform .btn:hover { background: #fff; border-color: #fff; }
+.loginform .err-text { color: #ff8a80; }
+.loginform .err-text:empty { display: none; }
+.loginfoot { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8d8e93; }
 .err-text { color: var(--bad-ink); font-size: 13px; margin: 0; }
 .loading-page { padding: 40px; color: var(--ink-3); }
diff --git a/app.js b/app.js
index a680d8c..045f078 100644
--- a/app.js
+++ b/app.js
@@ -405,8 +405,9 @@
     h('div', { class: 'field' }, h('label', { htmlFor: 'p' }, 'Password'), pw),
     err, btn);
     app.replaceChildren(h('div', { class: 'loginpage' }, h('div', { class: 'loginbox' },
-      brand(44),
-      form)));
+      brand(72),
+      form),
+      h('p', { class: 'loginfoot' }, 'WireGuard server manager')));
     pw.focus();
   }