diff --git a/chess/public/index.html b/chess/public/index.html
index f2b6415..4a70f29 100644
--- a/chess/public/index.html
+++ b/chess/public/index.html
@@ -1,784 +1,241 @@
 <!doctype html>
 <html lang="ru">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chess Party | Играть в шахматы онлайн</title>
+    <meta name="description" content="Играйте в красивые шахматы против компьютера или с друзьями в приватных комнатах." />
+    
+    <!-- Bunny Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800&display=swap" rel="stylesheet" />
+    
+    <link rel="stylesheet" href="/styles.css" />
+    
+    <link rel="icon" type="image/png" href="https://cdn-icons-png.flaticon.com/512/823/823301.png">
+  </head>
+  <body>
+    <div class="page-shell">
+      <header class="main-header">
+        <h1><span class="chess-icon">♞</span> Chess Party</h1>
+      </header>
 
-    <meta
-        name="viewport"
-        content="width=device-width, initial-scale=1.0, viewport-fit=cover"
-    >
-
-    <meta
-        name="theme-color"
-        content="#111318"
-    >
-
-    <title>Chess Party</title>
-
-    <meta
-        name="description"
-        content="Chess Party — AI, multiplayer, spectators, chat and chess clocks."
-    >
-
-    <link
-        rel="stylesheet"
-        href="/styles.css"
-    >
-
-    <link
-        rel="preconnect"
-        href="https://fonts.googleapis.com"
-    >
-
-    <link
-        rel="preconnect"
-        href="https://fonts.gstatic.com"
-        crossorigin
-    >
-
-    <link
-        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
-        rel="stylesheet"
-    >
-</head>
-
-<body>
-
-<div class="app">
-
-    <header class="topbar">
-
-        <div class="brand">
-
-            <div class="brand-icon">
-                ♟
+      <main class="app-grid">
+        <!-- Левая часть: Игровая доска -->
+        <section class="board-panel panel">
+          <div class="board-toolbar">
+            <div class="mode-info">
+              <p class="label">Текущий режим</p>
+              <h2 id="modeBadge">AI Арена</h2>
             </div>
-
-            <div>
-                <strong>
-                    Chess Party
-                </strong>
-
-                <span>
-                    Play. Think. Win.
-                </span>
+            <div class="toolbar-actions">
+              <button id="newGameToolbarButton" class="secondary-button" type="button">Новая игра</button>
+              <button id="flipBoardButton" class="icon-button" type="button" title="Перевернуть доску">
+                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M7 16V4m0 0L3 8m4-4l4 4m6 4v12m0 0l4-4m-4 4l-4-4"/></svg>
+              </button>
+              <button id="copyInviteButton" class="secondary-button hidden" type="button">Инвайт</button>
             </div>
+          </div>
 
-        </div>
-
-        <div class="top-status">
-
-            <span
-                id="modeBadge"
-                class="badge"
-            >
-                AI Arena
-            </span>
-
-            <span
-                id="connectionBadge"
-                class="badge muted"
-            >
-                Solo
-            </span>
-
-        </div>
-
-    </header>
-
-
-    <main class="layout">
-
-        <section class="game-area">
-
-            <div class="players-row">
-
-                <div class="player-card">
-
-                    <div class="avatar black">
-                        ♟
-                    </div>
-
-                    <div class="player-info">
-
-                        <span class="player-side">
-                            BLACK
-                        </span>
-
-                        <strong id="blackPlayerLabel">
-                            Computer
-                        </strong>
-
-                    </div>
-
-                    <div
-                        id="blackClock"
-                        class="clock"
-                    >
-                        00:00
-                    </div>
-
-                </div>
-
-
-                <div class="vs">
-                    VS
-                </div>
-
-
-                <div class="player-card">
-
-                    <div class="avatar white">
-                        ♙
-                    </div>
-
-                    <div class="player-info">
-
-                        <span class="player-side">
-                            WHITE
-                        </span>
-
-                        <strong id="whitePlayerLabel">
-                            You
-                        </strong>
-
-                    </div>
-
-                    <div
-                        id="whiteClock"
-                        class="clock active"
-                    >
-                        00:00
-                    </div>
-
-                </div>
+          <div class="board-stage">
+            <div id="board" class="board" aria-label="Шахматная доска"></div>
+          </div>
 
+          <div class="status-strip">
+            <div class="status-text">
+              <p class="label">Статус игры</p>
+              <p id="statusMessage" class="status-message">Загрузка доски...</p>
             </div>
-
-
-            <div class="board-wrapper">
-
-                <div
-                    id="board"
-                    class="board"
-                    aria-label="Chess board"
-                ></div>
-
+            <div class="status-meta">
+              <span id="turnBadge" class="status-chip turn-white">Ход белых</span>
+              <span id="connectionBadge" class="status-chip connection-solo">Соло</span>
             </div>
-
-
-            <div class="game-status panel">
-
-                <div>
-
-                    <span class="small-label">
-                        STATUS
-                    </span>
-
-                    <strong id="statusMessage">
-                        White to move
-                    </strong>
-
-                </div>
-
-                <span
-                    id="turnBadge"
-                    class="turn-badge"
-                >
-                    White to move
-                </span>
-
-            </div>
-
-
-            <div class="game-actions">
-
-                <button
-                    id="resignButton"
-                    class="action-button danger"
-                    type="button"
-                >
-                    🏳
-                    <span>
-                        Сдаться
-                    </span>
-                </button>
-
-                <button
-                    id="drawButton"
-                    class="action-button draw"
-                    type="button"
-                >
-                    🤝
-                    <span>
-                        Предложить ничью
-                    </span>
-                </button>
-
-                <button
-                    id="rematchButton"
-                    class="action-button"
-                    type="button"
-                >
-                    🔄
-                    <span>
-                        Реванш
-                    </span>
-                </button>
-
-                <button
-                    id="flipBoardButton"
-                    class="action-button"
-                    type="button"
-                >
-                    ↻
-                    <span>
-                        Перевернуть
-                    </span>
-                </button>
-
-            </div>
-
-
-            <div
-                id="drawRequest"
-                class="draw-request hidden"
-            >
-
-                <div>
-
-                    <strong>
-                        Предложена ничья
-                    </strong>
-
-                    <span id="drawRequestName">
-                        Player предлагает ничью
-                    </span>
-
-                </div>
-
-                <div class="draw-buttons">
-
-                    <button
-                        id="acceptDrawButton"
-                        class="primary-button"
-                        type="button"
-                    >
-                        Принять
-                    </button>
-
-                    <button
-                        id="declineDrawButton"
-                        class="secondary-button"
-                        type="button"
-                    >
-                        Отклонить
-                    </button>
-
-                </div>
-
-            </div>
-
+          </div>
         </section>
 
-
+        <!-- Правая часть: Управление -->
         <aside class="sidebar">
+          
+          <section class="panel">
+            <div class="panel-head">
+              <p class="label">Настройки</p>
+              <h3>Выберите режим</h3>
+            </div>
 
+            <div class="mode-switcher">
+              <button id="modeAiButton" class="mode-button active" type="button">С Компьютером</button>
+              <button id="modePartyButton" class="mode-button" type="button">С Другом</button>
+            </div>
 
-            <section class="panel">
-
-                <div class="section-title">
-
-                    <span class="eyebrow">
-                        GAME MODE
-                    </span>
-
-                    <h2>
-                        Choose your game
-                    </h2>
-
-                </div>
-
-
-                <div class="mode-buttons">
-
-                    <button
-                        id="modeAiButton"
-                        class="mode-button active"
-                        type="button"
-                    >
-                        <span class="mode-icon">
-                            🤖
-                        </span>
-
-                        <span>
-                            <strong>
-                                AI
-                            </strong>
-
-                            <small>
-                                Play computer
-                            </small>
-                        </span>
-                    </button>
-
-
-                    <button
-                        id="modePartyButton"
-                        class="mode-button"
-                        type="button"
-                    >
-                        <span class="mode-icon">
-                            👥
-                        </span>
-
-                        <span>
-                            <strong>
-                                Party
-                            </strong>
-
-                            <small>
-                                Play with people
-                            </small>
-                        </span>
-                    </button>
-
-                </div>
-
+            <label class="field">
+              <span>Ваше имя</span>
+              <input id="playerNameInput" type="text" maxlength="24" placeholder="Введите имя..." />
+            </label>
 
+            <!-- Контролы для игры с ИИ -->
+            <div id="aiControls" class="control-stack">
+              <div class="field-grid">
                 <label class="field">
-
-                    <span>
-                        Your name
-                    </span>
-
-                    <input
-                        id="playerNameInput"
-                        maxlength="24"
-                        placeholder="Enter your name"
-                    >
-
+                  <span>Сложность</span>
+                  <select id="aiLevelSelect">
+                    <option value="easy">Легкая</option>
+                    <option value="intermediate" selected>Средняя</option>
+                    <option value="hard">Сложная</option>
+                  </select>
                 </label>
+                <label class="field">
+                  <span>Играть за</span>
+                  <select id="playerColorSelect">
+                    <option value="w" selected>Белых</option>
+                    <option value="b">Черных</option>
+                  </select>
+                </label>
+              </div>
+              
+              <!-- Выбор контроля времени (AI) -->
+              <label class="field">
+                <span>Контроль времени</span>
+                <select id="aiClockSelect">
+                  <option value="none">Без лимита</option>
+                  <option value="1+0">1 + 0 • Bullet</option>
+                  <option value="3+0">3 + 0 • Blitz</option>
+                  <option value="3+2">3 + 2 • Blitz</option>
+                  <option value="5+0">5 + 0 • Blitz</option>
+                  <option value="5+3">5 + 3 • Blitz</option>
+                  <option value="10+0" selected>10 + 0 • Rapid</option>
+                  <option value="15+10">15 + 10 • Rapid</option>
+                  <option value="30+0">30 + 0 • Classical</option>
+                  <option value="30+20">30 + 20 • Classical</option>
+                </select>
+              </label>
 
+              <button id="startAiButton" class="primary-button" type="button">Начать игру с ИИ</button>
+            </div>
 
-                <div
-                    id="aiControls"
-                    class="controls"
-                >
-
-                    <div class="field-grid">
-
-                        <label class="field">
-
-                            <span>
-                                AI level
-                            </span>
-
-                            <select id="aiLevelSelect">
-
-                                <option value="easy">
-                                    Easy
-                                </option>
-
-                                <option
-                                    value="intermediate"
-                                    selected
-                                >
-                                    Intermediate
-                                </option>
-
-                                <option value="hard">
-                                    Hard
-                                </option>
-
-                                <option value="expert">
-                                    Expert
-                                </option>
-
-                            </select>
-
-                        </label>
-
-
-                        <label class="field">
-
-                            <span>
-                                Play as
-                            </span>
-
-                            <select id="playerColorSelect">
-
-                                <option value="w">
-                                    White
-                                </option>
-
-                                <option value="b">
-                                    Black
-                                </option>
-
-                            </select>
-
-                        </label>
-
-                    </div>
-
-
-                    <label class="field">
-
-                        <span>
-                            Time control
-                        </span>
-
-                        <select id="aiClockSelect">
-
-                            <option value="1+0">
-                                Bullet · 1+0
-                            </option>
-
-                            <option value="3+2">
-                                Blitz · 3+2
-                            </option>
-
-                            <option value="5+3">
-                                Blitz · 5+3
-                            </option>
-
-                            <option
-                                value="10+0"
-                                selected
-                            >
-                                Rapid · 10+0
-                            </option>
-
-                            <option value="15+10">
-                                Rapid · 15+10
-                            </option>
-
-                            <option value="30+20">
-                                Classical · 30+20
-                            </option>
-
-                            <option value="none">
-                                Без часов
-                            </option>
-
-                        </select>
-
-                    </label>
-
-
-                    <button
-                        id="startAiButton"
-                        class="primary-button large"
-                        type="button"
-                    >
-                        New AI Game
-                    </button>
+            <!-- Контролы для игры с другом -->
+            <div id="partyControls" class="control-stack hidden">
+              <div class="field-grid">
+                <button id="createPartyButton" class="primary-button" type="button">Создать комнату</button>
+                <button id="newPartyGameButton" class="secondary-button hidden" type="button">Новая игра</button>
+              </div>
 
+              <label class="field">
+                <span>Код комнаты</span>
+                <div class="join-row">
+                  <input id="partyCodeInput" type="text" maxlength="6" placeholder="ABC123" />
+                  <button id="joinPartyButton" class="secondary-button" type="button">Войти</button>
                 </div>
+              </label>
 
+              <!-- Выбор контроля времени (Мультиплеер) -->
+              <label class="field" id="partyClockContainer">
+                <span>Контроль времени (при создании)</span>
+                <select id="partyClockSelect">
+                  <option value="none">Без лимита</option>
+                  <option value="1+0">1 + 0 • Bullet</option>
+                  <option value="3+0">3 + 0 • Blitz</option>
+                  <option value="3+2">3 + 2 • Blitz</option>
+                  <option value="5+0">5 + 0 • Blitz</option>
+                  <option value="5+3">5 + 3 • Blitz</option>
+                  <option value="10+0" selected>10 + 0 • Rapid</option>
+                  <option value="15+10">15 + 10 • Rapid</option>
+                  <option value="30+0">30 + 0 • Classical</option>
+                  <option value="30+20">30 + 20 • Classical</option>
+                </select>
+              </label>
 
-                <div
-                    id="partyControls"
-                    class="controls hidden"
-                >
-
-                    <label class="field">
-
-                        <span>
-                            Time control
-                        </span>
-
-                        <select id="partyClockSelect">
-
-                            <option value="1+0">
-                                Bullet · 1+0
-                            </option>
-
-                            <option value="3+2">
-                                Blitz · 3+2
-                            </option>
-
-                            <option value="5+3">
-                                Blitz · 5+3
-                            </option>
-
-                            <option
-                                value="10+0"
-                                selected
-                            >
-                                Rapid · 10+0
-                            </option>
-
-                            <option value="15+10">
-                                Rapid · 15+10
-                            </option>
-
-                            <option value="30+20">
-                                Classical · 30+20
-                            </option>
-
-                            <option value="none">
-                                Без часов
-                            </option>
-
-                        </select>
-
-                    </label>
-
-
-                    <button
-                        id="createPartyButton"
-                        class="primary-button large"
-                        type="button"
-                    >
-                        Create Party
-                    </button>
-
-
-                    <div class="join-box">
-
-                        <input
-                            id="partyCodeInput"
-                            maxlength="6"
-                            placeholder="PARTY CODE"
-                        >
-
-                        <button
-                            id="joinPartyButton"
-                            class="secondary-button"
-                            type="button"
-                        >
-                            Join
-                        </button>
-
-                    </div>
-
-
-                    <button
-                        id="copyInviteButton"
-                        class="secondary-button hidden full"
-                        type="button"
-                    >
-                        🔗 Copy Invite
-                    </button>
-
-
-                    <button
-                        id="leavePartyButton"
-                        class="ghost-button hidden"
-                        type="button"
-                    >
-                        Leave Party
-                    </button>
-
-
-                    <div
-                        id="partySummary"
-                        class="party-summary"
-                    >
-                        Create a party to play with another person.
-                    </div>
+              <button id="leavePartyButton" class="ghost-button hidden" type="button">Покинуть комнату</button>
+              <p id="partySummary" class="muted-copy">
+                Создайте комнату, чтобы играть белыми. Следующий игрок присоединится за черных.
+              </p>
+            </div>
+          </section>
 
+          <section class="panel">
+            <div class="panel-head">
+              <p class="label">Участники</p>
+              <h3>Стол и зрители</h3>
+            </div>
+            
+            <div class="roster-grid">
+              <!-- Белые -->
+              <div class="roster-card white-player">
+                <div class="roster-info">
+                  <span class="roster-role">Белые</span>
+                  <strong id="whitePlayerLabel">Свободно</strong>
                 </div>
-
-            </section>
-
-
-            <section class="panel">
-
-                <div class="section-title">
-
-                    <span class="eyebrow">
-                        PARTY
-                    </span>
-
-                    <h2>
-                        Players & spectators
-                    </h2>
-
+                <!-- Часы белых -->
+                <div id="whiteClock" class="player-clock">10:00</div>
+              </div>
+              
+              <!-- Черные -->
+              <div class="roster-card black-player">
+                <div class="roster-info">
+                  <span class="roster-role">Черные</span>
+                  <strong id="blackPlayerLabel">Компьютер</strong>
                 </div>
+                <!-- Часы черных -->
+                <div id="blackClock" class="player-clock">10:00</div>
+              </div>
+            </div>
 
+            <div class="spectator-panel">
+              <div class="spectator-header">
+                <p class="label">Зрители</p>
+                <span id="spectatorCount" class="badge">0 / 20</span>
+              </div>
+              <ul id="spectatorList" class="spectator-list">
+                <li class="empty-state">Пока никого нет</li>
+              </ul>
+            </div>
+          </section>
 
-                <div class="roster">
-
-                    <div class="roster-item">
-
-                        <span class="piece-dot white-dot">
-                            ♙
-                        </span>
-
-                        <div>
-
-                            <small>
-                                WHITE
-                            </small>
-
-                            <strong id="rosterWhite">
-                                You
-                            </strong>
-
-                        </div>
-
-                    </div>
-
-
-                    <div class="roster-item">
-
-                        <span class="piece-dot black-dot">
-                            ♟
-                        </span>
-
-                        <div>
-
-                            <small>
-                                BLACK
-                            </small>
-
-                            <strong id="rosterBlack">
-                                Computer
-                            </strong>
-
-                        </div>
-
-                    </div>
-
-                </div>
-
-
-                <div class="spectator-header">
-
-                    <span>
-                        👁 Spectators
-                    </span>
-
-                    <strong id="spectatorCount">
-                        0 / 20
-                    </strong>
-
-                </div>
-
-
-                <ul
-                    id="spectatorList"
-                    class="spectator-list"
-                >
-                    <li>
-                        No spectators yet
-                    </li>
-                </ul>
-
-            </section>
-
-
-            <section
-                id="chatPanel"
-                class="panel chat-panel"
-            >
-
-                <div class="section-title">
-
-                    <span class="eyebrow">
-                        LIVE CHAT
-                    </span>
-
-                    <h2>
-                        💬 Room chat
-                    </h2>
-
-                </div>
-
-
-                <div
-                    id="chatMessages"
-                    class="chat-messages"
-                >
-
-                    <div class="chat-empty">
-                        Chat becomes available in Party mode.
-                    </div>
-
-                </div>
-
-
-                <form
-                    id="chatForm"
-                    class="chat-form"
-                >
-
-                    <input
-                        id="chatInput"
-                        maxlength="300"
-                        autocomplete="off"
-                        placeholder="Write a message..."
-                    >
-
-                    <button
-                        type="submit"
-                        class="send-button"
-                    >
-                        →
-                    </button>
-
-                </form>
-
-            </section>
+          <section class="panel">
+            <div class="panel-head">
+              <p class="label">Взятые фигуры</p>
+              <h3>Материал</h3>
+            </div>
+            <div class="captured-grid">
+              <div class="captured-box">
+                <p class="captured-label">Белые забрали</p>
+                <div id="capturedByWhite" class="captured-row"></div>
+              </div>
+              <div class="captured-box">
+                <p class="captured-label">Черные забрали</p>
+                <div id="capturedByBlack" class="captured-row"></div>
+              </div>
+            </div>
+          </section>
 
+          <section class="panel">
+            <div class="panel-head">
+              <p class="label">История ходов</p>
+              <h3>Запись партии</h3>
+            </div>
+            <ol id="moveHistory" class="move-history"></ol>
+          </section>
         </aside>
+      </main>
 
-    </main>
-
-
-    <footer class="footer">
-
-        <span>
-            ♟ Chess Party
-        </span>
-
-        <span>
-            AI · Multiplayer · Chat · Chess Clock
-        </span>
-
-    </footer>
-
-</div>
-
-
-<div
-    id="promotionDialog"
-    class="modal hidden"
->
-
-    <div class="modal-card">
-
-        <span class="eyebrow">
-            PROMOTION
-        </span>
-
-        <h2>
-            Choose a piece
-        </h2>
-
-        <div
-            id="promotionOptions"
-            class="promotion-options"
-        ></div>
-
+      <footer class="footer">
+        <a href="https://github.com/ВАШ_НИК" target="_blank" rel="noopener noreferrer" class="github-link">
+          <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" class="github-icon">
+        </a>
+      </footer>
     </div>
 
-</div>
+    <!-- UI Уведомления и Модальные окна -->
+    <div id="toastHost" class="toast-host" aria-live="polite" aria-atomic="true"></div>
 
+    <div id="promotionDialog" class="modal hidden" role="dialog" aria-modal="true">
+      <div class="modal-card">
+        <p class="label">Превращение</p>
+        <h3>Выберите фигуру</h3>
+        <div id="promotionOptions" class="promotion-options"></div>
+      </div>
+    </div>
 
-<div
-    id="toastHost"
-    class="toast-host"
-></div>
+    <script type="module" src="/js/app.js"></script>
+  </body>
+</html>
 
-
-<script
-    type="module"
-    src="/js/app.js"
-></script>
-
-</body>
-</html>
\ No newline at end of file
