diff --git a/app/templates/login.html b/app/templates/login.html
index 02141ee..7752063 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -1,30 +1,40 @@
 <!-- app/templates/login.html -->
 <!DOCTYPE html>
-<html lang="pt-BR">
+<html lang="pt-BR" data-tema="escuro">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Entrar — Painel de Clientes</title>
+  <link rel="stylesheet" href="/static/estilo.css">
   <style>
-    body { font-family: system-ui, sans-serif; margin: 0; background: #17171a; color: #f4f4f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
-    form { width: 320px; padding: 24px; background: #232326; border-radius: 10px; }
-    h1 { font-size: 1.2rem; margin-top: 0; }
-    label { display: block; margin-top: 10px; font-size: 0.85rem; color: #a1a1aa; }
-    input { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #3a3a3e; background: #17171a; color: #f4f4f5; box-sizing: border-box; }
-    button { margin-top: 16px; width: 100%; padding: 10px 16px; border: none; border-radius: 6px; background: #F5821F; color: #17171a; font-weight: 700; cursor: pointer; }
-    .mensagem.danger { padding: 10px; border-radius: 6px; margin-bottom: 12px; background: #7f1d1d; }
+    body {
+      display: flex; align-items: center; justify-content: center;
+      min-height: 100vh; padding: 16px;
+      background: radial-gradient(circle at top, var(--cor-superficie-alt), var(--cor-fundo));
+    }
+    .login-cartao { width: 100%; max-width: 360px; text-align: center; }
+    .login-logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 12px; }
+    .login-cartao h1 { font-size: 1.3rem; margin-bottom: 4px; }
+    .login-subtitulo { color: var(--cor-texto-secundario); font-size: 0.9rem; margin: 0 0 20px; }
+    .login-cartao form { text-align: left; }
+    .login-cartao button { width: 100%; }
   </style>
 </head>
 <body>
-  <form method="post" action="/login">
+  <div class="cartao login-cartao">
+    <img src="/static/logo-gti-256x256.png" alt="GTI Grupo" class="login-logo">
     <h1>Painel de Clientes</h1>
+    <p class="login-subtitulo">Entre com suas credenciais para acessar o sistema</p>
     {% if erro %}<div class="mensagem danger">{{ erro }}</div>{% endif %}
-    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-    <input type="hidden" name="next" value="{{ next }}">
-    <label for="usuario">Usuário</label>
-    <input type="text" id="usuario" name="usuario" required autofocus>
-    <label for="senha">Senha</label>
-    <input type="password" id="senha" name="senha" required>
-    <button type="submit">Entrar</button>
-  </form>
+    <form method="post" action="/login">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+      <input type="hidden" name="next" value="{{ next }}">
+      <label for="usuario">Usuário</label>
+      <input type="text" id="usuario" name="usuario" required autofocus>
+      <label for="senha">Senha</label>
+      <input type="password" id="senha" name="senha" required>
+      <button type="submit">Entrar</button>
+    </form>
+  </div>
 </body>
 </html>