diff --git a/web/templates/login.html b/web/templates/login.html
index 1af320e..cbad8dd 100644
--- a/web/templates/login.html
+++ b/web/templates/login.html
@@ -1,16 +1,52 @@
-{% extends "base.html" %}
-{% block title %}Sign in - Illustrations DB{% endblock %}
-{% block content %}
-  <div class="panel" style="max-width:420px; margin:80px auto;">
-    <h2 style="margin-top:0; color: var(--blue);">Sign in</h2>
-    {% if error %}<div class="flash">{{ error }}</div>{% endif %}
-    <form method="post">{% csrf_token %}
-      <label>Username</label><input type="text" name="username" required />
-      <label style="margin-top:12px;">Password</label><input type="password" name="password" required />
-      <div style="margin-top:16px; display:flex; gap:10px; justify-content:flex-end;">
-        <a class="btn" href="#">Cancel</a>
-        <button class="btn primary" type="submit">Sign in</button>
-      </div>
-    </form>
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Sign in · Illustrations</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="{% static 'app.css' %}">
+</head>
+<body class="login-page">
+
+  <div class="login-hero">
+    <div class="login-card">
+      <h1 class="login-title">Sign in</h1>
+
+      {% if form.non_field_errors %}
+        <div class="login-alert">
+          {% for e in form.non_field_errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
+        </div>
+      {% endif %}
+
+      <form method="post" action="{% url 'login' %}" novalidate>
+        {% csrf_token %}
+        {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
+
+        <label for="id_username" class="login-label">Username</label>
+        <input id="id_username" name="username" type="text" autocomplete="username"
+               value="{{ form.username.value|default:'' }}" required autofocus class="login-input">
+
+        {% if form.username.errors %}
+          <div class="login-field-error">
+            {% for e in form.username.errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
+          </div>
+        {% endif %}
+
+        <label for="id_password" class="login-label">Password</label>
+        <input id="id_password" name="password" type="password" autocomplete="current-password"
+               required class="login-input">
+
+        {% if form.password.errors %}
+          <div class="login-field-error">
+            {% for e in form.password.errors %}{{ e }}{% if not forloop.last %}<br>{% endif %}{% endfor %}
+          </div>
+        {% endif %}
+
+        <button class="btn btn-primary btn-lg login-submit" type="submit">Sign in</button>
+      </form>
+    </div>
   </div>
-{% endblock %}
+
+</body>
+</html>
\ No newline at end of file
