diff --git a/css/auth.css b/css/auth.css
new file mode 100644
index 0000000..f992f5c
--- /dev/null
+++ b/css/auth.css
@@ -0,0 +1,14 @@
+.btn-primary {
+    width: 100%;
+    padding: 10px 12px;
+    border: none;
+    border-radius: 8px;
+    background: #3b82f6;
+    color: #fff;
+    font-size: 15px;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.btn-primary:hover {
+    background: #2563eb;
+}
diff --git a/index.html b/index.html
index e9f0633..3d64776 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,59 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Личный кабинет</title>
+    <link rel="stylesheet" href="css/auth.css">
+    <style>
+        :root {
+            color-scheme: light;
+            --bg: #f5f7fb;
+            --card: #ffffff;
+            --text: #1b1f2a;
+            --muted: #6b7280;
+            --border: #e5e7eb;
+            --accent: #3b82f6;
+            --accent-dark: #2563eb;
+        }
+        * { box-sizing: border-box; }
+        body {
+            margin: 0;
+            font-family: "Segoe UI", Arial, sans-serif;
+            background: linear-gradient(135deg, #eef2ff, #f8fafc);
+            color: var(--text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+        }
+        .card {
+            width: 100%;
+            max-width: 520px;
+            background: var(--card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 24px;
+            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+        }
+        h2 {
+            margin: 0 0 16px;
+            font-size: 24px;
+        }
+        .actions {
+            display: flex;
+            justify-content: flex-end;
+        }
+    </style>
 </head>
 <body>
-    <div id="user-info"></div>
-    <button onclick="logout()">Выйти</button>
+    <div class="card">
+        <div id="user-info"></div>
+        <div class="actions">
+            <button class="btn-primary" onclick="logout()">Выйти</button>
+        </div>
+    </div>
     
     <script>
         // Проверка авторизации при загрузке страницы
diff --git a/login.html b/login.html
index f45a1b5..25386eb 100644
--- a/login.html
+++ b/login.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Вход</title>
+    <link rel="stylesheet" href="css/auth.css">
     <style>
         :root {
             color-scheme: light;
@@ -67,18 +68,6 @@
             border-color: var(--accent);
             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
         }
-        button {
-            width: 100%;
-            padding: 10px 12px;
-            border: none;
-            border-radius: 8px;
-            background: var(--accent);
-            color: #fff;
-            font-size: 15px;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        button:hover { background: var(--accent-dark); }
         .helper {
             margin-top: 14px;
             font-size: 12px;
@@ -100,7 +89,7 @@
                 <label for="password">Пароль</label>
                 <input id="password" type="password" name="password" placeholder="Введите пароль" required autocomplete="current-password">
             </div>
-            <button type="submit">Войти</button>
+            <button class="btn-primary" type="submit">Войти</button>
         </form>
         <div class="helper">Доступ только для зарегистрированных пользователей</div>
     </div>
