diff --git a/index.html b/index.html
index 5586635..f358f9a 100644
--- a/index.html
+++ b/index.html
@@ -16,8 +16,8 @@
   <div class="kt-ai-shell">
     <aside class="kt-ai-sidebar" id="sidebar">
       <div class="kt-ai-brand-row">
-        <img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" class="kt-ai-brand-logo">
-        <span class="brand-label">Свод отчётов</span>
+        <img src="design-system/brand/kt-ai-logo.png" alt="Казахтелеком" class="kt-ai-brand-logo">
+        <span class="kt-ai-brand-label">Свод отчётов</span>
       </div>
       <button class="kt-ai-btn" data-variant="primary" data-size="sm" id="btnNewReport">
         <svg class="kt-icon" aria-hidden="true"><use href="#upload"></use></svg>
@@ -60,10 +60,11 @@
 
     <main class="kt-ai-main">
       <header class="kt-ai-topbar" id="topbar">
-        <div class="topbar-left">
-          <span class="topbar-crumb" id="topbarCrumb">Загрузка отчётов</span>
+        <div class="kt-ai-topbar-left">
+          <span class="kt-ai-topbar-crumb" id="topbarCrumb">Загрузка отчётов</span>
+            <button class="kt-ai-btn kt-ai-btn--margin-bottom" id="btnToggleTheme" data-variant="ghost" style="margin-left: var(--kt-ai-space-4);">Тема</button>
         </div>
-        <div class="topbar-actions" id="topbarActions"></div>
+        <div class="kt-ai-topbar-actions" id="topbarActions"></div>
       </header>
 
       <!-- 1. Загрузка отчётов -->
@@ -192,7 +193,7 @@
                 <label>Значение по ручному вводу</label>
                 <input class="kt-ai-input" id="recheckManualValue" type="number" step="0.01" placeholder="Введите значение">
               </div>
-              <button class="kt-ai-btn" id="btnDoRecheck" style="margin-bottom: var(--kt-ai-space-4);">
+              <button class="kt-ai-btn kt-ai-btn--margin-bottom" id="btnDoRecheck">
                 <svg class="kt-icon" aria-hidden="true"><use href="#compare"></use></svg>
                 Провести сверку
               </button>
@@ -229,7 +230,7 @@
           <div class="kt-ai-card kt-ai-chat-card">
             <div class="kt-ai-card-head">
               <span class="kt-ai-chip" data-ai="true">Чат-бот</span>
-              <span class="topbar-spacer"></span>
+              <span class="kt-ai-topbar-spacer"></span>
               <span class="kt-ai-chip" id="chatStatusChip" data-tone="muted">Готов</span>
             </div>
             <div class="kt-ai-chat-log" id="chatLog">
diff --git a/script.js b/script.js
index fc2fbdb..12d4f8b 100644
--- a/script.js
+++ b/script.js
@@ -295,7 +295,7 @@ function summaryRowHtml(r) {
   const renameTxt = showRename ? 'Было: ' + r.originalName + ' → ' + r.metricName : r.originalName;
   return '<tr data-row="' + r.id + '">' +
     '<td>' + (c ? c.name : r.company) + '</td>' +
-    '<td><div class="metric-cell">' +
+    '<td><div class="kt-ai-metric-cell">' +
       '<span class="metric-name">' + r.metricName + '</span>' +
       (showRename ? '<span class="metric-source">' + renameTxt + '</span>' : '') +
     '</div></td>' +
@@ -303,7 +303,7 @@ function summaryRowHtml(r) {
       fmtValue(r) + ' ' + r.unit +
     '</td>' +
     '<td>' + r.source + '</td>' +
-    '<td class="status-cell"><div class="status-cell-in">' + statusPillHtml(r.status) + '<div class="kt-ai-cell-actions">' + rowActionsForSummary(r) + '</div></div></td>' +
+    '<td class="kt-ai-status-cell"><div class="kt-ai-status-cell-in">' + statusPillHtml(r.status) + '<div class="kt-ai-cell-actions">' + rowActionsForSummary(r) + '</div></div></td>' +
     '</tr>';
 }
 
@@ -1100,6 +1100,11 @@ function bindAll() {
   bindSummary();
   bindVerify();
   bindDashboard();
+  const btnToggle = el('btnToggleTheme');
+  if (btnToggle) btnToggle.addEventListener('click', function () {
+    const cur = document.documentElement.getAttribute('data-theme') || 'light';
+    document.documentElement.setAttribute('data-theme', cur === 'light' ? 'dark' : 'light');
+  });
 }
 
 function init() {
diff --git a/style.css b/style.css
index 957ccec..bb2ad59 100644
--- a/style.css
+++ b/style.css
@@ -11,7 +11,7 @@
   width: auto;
 }
 
-.brand-label {
+.kt-ai-brand-label {
   font-size: var(--kt-ai-text-xs);
   color: var(--kt-ai-fg);
   font-weight: var(--kt-ai-weight-medium);
@@ -30,18 +30,18 @@
   margin-top: auto;
 }
 
-.topbar-left {
+.kt-ai-topbar-left {
   display: flex;
   align-items: center;
   gap: var(--kt-ai-space-4);
 }
 
-.topbar-crumb {
+.kt-ai-topbar-crumb {
   font-size: var(--kt-ai-text-sm);
   color: var(--kt-ai-fg-muted);
 }
 
-.topbar-actions {
+.kt-ai-topbar-actions {
   display: flex;
   align-items: center;
   gap: var(--kt-ai-space-3);
@@ -398,18 +398,22 @@
 
 /* === Дополнительные детали === */
 
-.metric-cell {
+.kt-ai-btn--margin-bottom {
+  margin-bottom: var(--kt-ai-space-4);
+}
+
+.kt-ai-metric-cell {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }
 
-.metric-name {
+.kt-ai-metric-name {
   font-weight: var(--kt-ai-weight-medium);
   color: var(--kt-ai-fg);
 }
 
-.metric-source {
+.kt-ai-metric-source {
   font-size: var(--kt-ai-text-2xs);
   color: var(--kt-ai-fg-faint);
 }
@@ -436,19 +440,19 @@
   flex-wrap: wrap;
 }
 
-.status-cell {
+.kt-ai-status-cell {
   width: 1%;
   white-space: nowrap;
 }
 
-.status-cell-in {
+.kt-ai-status-cell-in {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: var(--kt-ai-space-2);
 }
 
-.status-cell-in .kt-ai-cell-actions {
+.kt-ai-status-cell-in .kt-ai-cell-actions {
   flex-direction: row;
 }
 
@@ -491,6 +495,6 @@
   pointer-events: none;
 }
 
-.topbar-spacer {
+.kt-ai-topbar-spacer {
   flex: 1;
 }