diff --git a/index.html b/index.html
index c7dfa28..fe658e3 100644
--- a/index.html
+++ b/index.html
@@ -7,42 +7,25 @@
   <link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
   <link rel="stylesheet" href="./design-system/kt-ai-components.css">
   <link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
+  <link rel="stylesheet" href="./design-system/kt-ai-page.css">
   <style>
-    body { background: var(--kt-ai-bg-base); font-family: var(--kt-ai-font-family); }
-    .kt-ai-pagehead { display: flex; align-items: center; gap: 16px; padding: 24px 32px; background: var(--kt-ai-bg-surface); border-bottom: 1px solid var(--kt-ai-border-subtle); }
-    .kt-ai-pagehead h1 { font-size: 24px; font-weight: 600; color: var(--kt-ai-text-primary); margin: 0; }
+    body { background: var(--kt-ai-bg); font-family: var(--kt-ai-font-sans); }
     .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 24px 32px; }
     @media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
-    .kt-ai-kpi { background: var(--kt-ai-bg-surface); border: 1px solid var(--kt-ai-border-subtle); border-radius: var(--kt-ai-radius-m); padding: 20px; }
-    .kt-ai-kpi .value { font-size: 28px; font-weight: 700; color: var(--kt-ai-text-primary); margin-bottom: 4px; }
-    .kt-ai-kpi .label { font-size: 14px; color: var(--kt-ai-text-secondary); margin-bottom: 2px; }
-    .kt-ai-kpi .hint { font-size: 12px; color: var(--kt-ai-text-muted); }
     .charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; }
     @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
-    .kt-ai-card { background: var(--kt-ai-bg-surface); border: 1px solid var(--kt-ai-border-subtle); border-radius: var(--kt-ai-radius-m); padding: 20px; }
-    .kt-ai-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--kt-ai-text-primary); }
-    .chart-wrap { height: 200px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 10px; overflow-x: auto; }
+    .chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 24px; overflow-x: auto; }
     .bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; }
-    .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--kt-ai-bg-overlay); color: var(--kt-ai-text-inverse); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
+    .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
     .bar:hover::after { opacity: 1; }
-    .bar-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--kt-ai-text-muted); white-space: nowrap; }
-    .bar-value { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: monospace; color: var(--kt-ai-text-muted); }
+    .bar-value { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); }
     .table-section { padding: 0 32px 32px; }
     .table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
-    .kt-ai-input { padding: 10px 12px; border: 1px solid var(--kt-ai-border-default); border-radius: var(--kt-ai-radius-s); font-size: 14px; background: var(--kt-ai-bg-base); color: var(--kt-ai-text-primary); min-width: 200px; }
-    .kt-ai-select { padding: 10px 12px; border: 1px solid var(--kt-ai-border-default); border-radius: var(--kt-ai-radius-s); font-size: 14px; background: var(--kt-ai-bg-base); color: var(--kt-ai-text-primary); }
-    .kt-ai-table-wrap { overflow-x: auto; }
-    table.kt-ai-table { width: 100%; border-collapse: collapse; font-size: 14px; }
-    table.kt-ai-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--kt-ai-text-secondary); border-bottom: 1px solid var(--kt-ai-border-subtle); white-space: nowrap; }
-    table.kt-ai-table td { padding: 12px 16px; border-bottom: 1px solid var(--kt-ai-border-subtle); color: var(--kt-ai-text-primary); }
-    table.kt-ai-table tr:hover td { background: var(--kt-ai-bg-hover); }
-    table.kt-ai-table .num { text-align: right; font-variant-numeric: tabular-nums; }
     .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
-    .kt-ai-chip { padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--kt-ai-bg-tertiary); color: var(--kt-ai-text-primary); border: 1px solid var(--kt-ai-border-subtle); cursor: pointer; }
-    .kt-ai-chip.active { background: var(--kt-ai-bg-brand); color: var(--kt-ai-text-inverse); border-color: var(--kt-ai-bg-brand); }
+    .kt-ai-chip.active { background: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); border-color: var(--kt-ai-primary); }
   </style>
 </head>
-<body>
+<body class="kt-ai-app">
   <div class="kt-ai-pagehead">
     <img src="./kt-logo.svg" alt="Казахтелеком" height="36">
     <h1>Топ услуг B2C по регионам</h1>