diff --git a/templates/info.html b/templates/info.html
index cca5be7..fccfd3b 100644
--- a/templates/info.html
+++ b/templates/info.html
@@ -2,113 +2,412 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <title>System Info</title>
+    <title>Инструкция | System Info</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link rel="icon" href="{{ request.url_for('static', path='smith.ico') }}?v=1">
+    <link rel="icon" href="{{ request.url_for('static', path='smith.ico') }}?v=2" type="image/x-icon">
+    <link rel="shortcut icon" href="{{ request.url_for('static', path='smith.ico') }}?v=2" type="image/x-icon">
 
     <style>
+        :root {
+            --bg: #000000;
+            --panel: rgba(0, 0, 0, 0.72);
+            --panel-soft: rgba(0, 20, 10, 0.58);
+            --border: rgba(0, 255, 136, 0.35);
+            --text: #b8ffd8;
+            --green: #00ff88;
+            --green-soft: #7dffbf;
+            --muted: #6fcf97;
+            --shadow: 0 0 18px rgba(0, 255, 136, 0.18);
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        html {
+            scroll-behavior: smooth;
+        }
+
         body {
             margin: 0;
-            padding: 40px;
-            background: #000;
-            color: #00ff88;
+            background: var(--bg);
+            color: var(--text);
             font-family: "Courier New", monospace;
+            line-height: 1.6;
         }
 
-        h1 {
-            color: #00ff88;
-            font-size: 32px;
+        #matrix {
+            position: fixed;
+            inset: 0;
+            z-index: 0;
+            opacity: 0.32;
+            pointer-events: none;
         }
 
-        h2 {
-            margin-top: 40px;
-            color: #00ffaa;
+        .page {
+            position: relative;
+            z-index: 1;
+            display: grid;
+            grid-template-columns: 290px minmax(0, 1fr);
+            min-height: 100vh;
         }
 
-        .block {
-            margin-top: 20px;
-            padding: 20px;
-            border: 1px solid #00ff88;
-            background: rgba(0, 255, 100, 0.05);
+        .sidebar {
+            position: sticky;
+            top: 0;
+            height: 100vh;
+            padding: 28px 20px;
+            border-right: 1px solid var(--border);
+            background: rgba(0, 0, 0, 0.82);
+            backdrop-filter: blur(4px);
+            overflow-y: auto;
         }
 
-        .quote {
-            color: #00ffaa;
-            font-style: italic;
-            margin-bottom: 20px;
+        .brand {
+            margin-bottom: 24px;
+            padding: 14px 16px;
+            border: 1px solid var(--border);
+            background: var(--panel-soft);
+            box-shadow: var(--shadow);
         }
 
-        .code {
-            background: #001a0f;
-            padding: 10px;
-            border: 1px solid #00ff88;
-            margin-top: 10px;
+        .brand-title {
+            margin: 0 0 8px;
+            color: var(--green);
+            font-size: 22px;
         }
 
-        img {
+        .brand-subtitle {
+            margin: 0;
+            color: var(--muted);
+            font-size: 13px;
+        }
+
+        .nav-title {
+            margin: 22px 0 10px;
+            color: var(--green-soft);
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .nav {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .nav a {
+            display: block;
+            padding: 10px 12px;
+            color: var(--text);
+            text-decoration: none;
+            border: 1px solid transparent;
+            transition: 0.2s ease;
+        }
+
+        .nav a:hover,
+        .nav a:focus {
+            color: var(--green);
+            border-color: var(--border);
+            background: rgba(0, 255, 136, 0.06);
+            box-shadow: var(--shadow);
+        }
+
+        .status-box {
+            margin-top: 24px;
+            padding: 14px 16px;
+            border: 1px solid var(--border);
+            background: var(--panel-soft);
+            color: var(--green);
+            font-size: 13px;
+            box-shadow: var(--shadow);
+        }
+
+        .content {
+            padding: 36px 40px 80px;
+        }
+
+        .hero {
+            margin-bottom: 28px;
+            padding: 24px;
+            border: 1px solid var(--border);
+            background: var(--panel);
+            box-shadow: var(--shadow);
+        }
+
+        .hero h1 {
+            margin: 0 0 10px;
+            color: var(--green);
+            font-size: 34px;
+            line-height: 1.2;
+        }
+
+        .hero p {
+            margin: 0;
+            color: var(--green-soft);
+        }
+
+        .section {
+            scroll-margin-top: 24px;
+            margin-bottom: 28px;
+            padding: 24px;
+            border: 1px solid var(--border);
+            background: var(--panel);
+            box-shadow: var(--shadow);
+        }
+
+        .section h2 {
+            margin-top: 0;
+            margin-bottom: 14px;
+            color: var(--green);
+            font-size: 26px;
+        }
+
+        .section h3 {
+            color: var(--green-soft);
+            margin-top: 24px;
+            margin-bottom: 10px;
+        }
+
+        .section p {
+            margin: 0 0 14px;
+        }
+
+        .section img {
+            display: block;
             max-width: 100%;
-            margin-top: 15px;
-            border: 1px solid #00ff88;
+            margin: 16px 0;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow);
+            background: #03150c;
+        }
+
+        .section ul {
+            margin: 0 0 14px 18px;
+            padding: 0;
+        }
+
+        .section li {
+            margin-bottom: 8px;
+        }
+
+        .note {
+            padding: 12px 14px;
+            border-left: 3px solid var(--green);
+            background: rgba(0, 255, 136, 0.06);
+            color: var(--green-soft);
+        }
+
+        .top-link {
+            margin-top: 18px;
+            display: inline-block;
+            color: var(--green);
+            text-decoration: none;
+        }
+
+        .top-link:hover {
+            text-decoration: underline;
+        }
+
+        @media (max-width: 980px) {
+            .page {
+                grid-template-columns: 1fr;
+            }
+
+            .sidebar {
+                position: relative;
+                height: auto;
+                border-right: none;
+                border-bottom: 1px solid var(--border);
+            }
+
+            .content {
+                padding: 24px 18px 60px;
+            }
+
+            .hero h1 {
+                font-size: 28px;
+            }
+
+            .section h2 {
+                font-size: 22px;
+            }
         }
     </style>
 </head>
-
 <body>
+    <canvas id="matrix"></canvas>
 
-    <h1>[ SYSTEM INFO ]</h1>
+    <div class="page" id="top">
+        <aside class="sidebar">
+            <div class="brand">
+                <h2 class="brand-title">[ SYSTEM INFO ]</h2>
+                <p class="brand-subtitle">
+                    Навигация по инструкции
+                </p>
+            </div>
 
-    <div class="quote">
-        > Добро пожаловать в систему.
+            <div class="nav-title">Разделы</div>
+            <nav class="nav">
+                <a href="#intro">Введение</a>
+                <a href="#login">Вход в систему</a>
+                <a href="#matches">Список матчей</a>
+                <a href="#workspace">Матч-центр</a>
+                <a href="#live">Live обновления</a>
+                <a href="#standings">Турнирная таблица</a>
+                <a href="#vmix">vMix</a>
+                <a href="#faq">FAQ</a>
+            </nav>
+
+            <div class="status-box">
+                [ SYSTEM ONLINE ]<br>
+                [ GUIDE LINKED ]<br>
+                [ MATRIX ACTIVE ]
+            </div>
+        </aside>
+
+        <main class="content">
+            <section class="hero">
+                <h1>Инструкция по работе с системой</h1>
+                <p>
+                    Слева — быстрые переходы по разделам. Справа — полное описание,
+                    скриншоты и пошаговые действия.
+                </p>
+            </section>
+
+            <section class="section" id="intro">
+                <h2>Введение</h2>
+                <p>
+                    Здесь можешь написать общее описание проекта, для кого он нужен и как им пользоваться.
+                </p>
+                <p class="note">
+                    В этот блок удобно поместить краткое вступление и логику работы всей системы.
+                </p>
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="login">
+                <h2>Вход в систему</h2>
+                <p>
+                    Здесь будет инструкция по авторизации.
+                </p>
+                <img src="/static/docs/login.png" alt="Скриншот входа">
+                <p>
+                    Добавь сюда шаги входа, особенности логина и типичные ошибки.
+                </p>
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="matches">
+                <h2>Список матчей</h2>
+                <p>
+                    Здесь опиши, как выбирать матч, как работают фильтры и как открыть нужную игру.
+                </p>
+                <img src="/static/docs/matches.png" alt="Список матчей">
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="workspace">
+                <h2>Матч-центр</h2>
+                <p>
+                    Здесь можно подробно описать рабочую страницу матча: составы, события, судей и остальные вкладки.
+                </p>
+                <img src="/static/docs/workspace.png" alt="Матч-центр">
+                <h3>Что здесь можно делать</h3>
+                <ul>
+                    <li>управлять составами;</li>
+                    <li>редактировать данные матча;</li>
+                    <li>работать с событиями;</li>
+                    <li>готовить данные для трансляции.</li>
+                </ul>
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="live">
+                <h2>Live обновления</h2>
+                <p>
+                    Здесь можешь описать работу scheduler, auto-update и обновление счета.
+                </p>
+                <p class="note">
+                    Хорошее место для объяснения, как матч переходит в live, как обновляется статус и когда останавливается watcher.
+                </p>
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="standings">
+                <h2>Турнирная таблица</h2>
+                <p>
+                    Здесь опиши, как обновляется таблица и где она используется.
+                </p>
+                <img src="/static/docs/standings.png" alt="Турнирная таблица">
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="vmix">
+                <h2>vMix</h2>
+                <p>
+                    Здесь будет инструкция по работе с vMix, подключению клиента и использованию данных системы в графике.
+                </p>
+                <img src="/static/docs/vmix.png" alt="vMix">
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+
+            <section class="section" id="faq">
+                <h2>FAQ</h2>
+                <p>
+                    Здесь можешь собрать частые вопросы, типичные ошибки и быстрые решения.
+                </p>
+                <a class="top-link" href="#top">↑ Наверх</a>
+            </section>
+        </main>
     </div>
 
-    <!-- БЛОК 1 -->
-    <div class="block">
-        <h2>🔴 Вход в систему</h2>
-        <p>
-            Здесь будет описание логина.
-        </p>
+    <script>
+        const canvas = document.getElementById("matrix");
+        const ctx = canvas.getContext("2d");
 
-        <!-- сюда вставишь скрин -->
-        <!-- <img src="/static/docs/login.png"> -->
-    </div>
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
 
-    <!-- БЛОК 2 -->
-    <div class="block">
-        <h2>🔵 Список матчей</h2>
-        <p>
-            Здесь будет описание матчей.
-        </p>
-    </div>
+        resizeCanvas();
+        window.addEventListener("resize", resizeCanvas);
 
-    <!-- БЛОК 3 -->
-    <div class="block">
-        <h2>🟣 Матч-центр</h2>
-        <p>
-            Управление матчем.
-        </p>
-    </div>
+        const letters = "01アイウエオカキクケコサシスセソABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        const fontSize = 16;
+        let columns = Math.floor(window.innerWidth / fontSize);
+        let drops = Array(columns).fill(1);
 
-    <!-- БЛОК 4 -->
-    <div class="block">
-        <h2>🟢 Live система</h2>
-        <p>
-            Scheduler и обновления.
-        </p>
-    </div>
+        function resetDrops() {
+            columns = Math.floor(window.innerWidth / fontSize);
+            drops = Array(columns).fill(1);
+        }
 
-    <!-- БЛОК 5 -->
-    <div class="block">
-        <h2>🟡 vMix</h2>
-        <p>
-            Интеграция с трансляцией.
-        </p>
-    </div>
+        window.addEventListener("resize", resetDrops);
 
-    <div class="code">
-        [ SYSTEM ONLINE ]<br>
-        [ MATCH TRACKING ENABLED ]<br>
-        [ VMIX CONNECTED ]
-    </div>
+        function drawMatrix() {
+            ctx.fillStyle = "rgba(0, 0, 0, 0.08)";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
 
+            ctx.fillStyle = "#00ff88";
+            ctx.font = fontSize + "px monospace";
+
+            for (let i = 0; i < drops.length; i++) {
+                const text = letters[Math.floor(Math.random() * letters.length)];
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+
+                drops[i]++;
+            }
+        }
+
+        setInterval(drawMatrix, 40);
+    </script>
 </body>
 </html>
\ No newline at end of file
