diff --git a/frontend/src/App.css b/frontend/src/App.css
index 19b13ea..fecca8c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -336,24 +336,15 @@
   min-width: 0;
 }
 
-/* Страница настроек — боковое меню в стиле Tabler Settings */
-.settings-sidebar-nav .list-group-item {
-  font-size: 0.875rem;
-  padding-left: 0;
-}
-.settings-sidebar-nav .dropdown-header {
+/* Tabler-style subheader (как на preview.tabler.io/settings.html) */
+.subheader {
   font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
   letter-spacing: 0.04em;
-}
-
-/* Страница настроек: сайдбар не растягивается слишком широко */
-.settings-page-sidebar {
-  max-width: 220px;
-}
-@media (min-width: 992px) {
-  .settings-page-sidebar {
-    max-width: 260px;
-  }
+  color: var(--tblr-muted-color, #6c757d);
+  margin-bottom: 0.25rem;
+  padding-left: 0;
 }
 
 /* Responsive navbar */
diff --git a/frontend/src/SettingsPage.jsx b/frontend/src/SettingsPage.jsx
index d59e8a4..7b0cb41 100644
--- a/frontend/src/SettingsPage.jsx
+++ b/frontend/src/SettingsPage.jsx
@@ -253,7 +253,7 @@ export default function SettingsPage() {
     return (
       <div className="page-wrapper">
         <div className="page-body">
-          <div className="container-fluid">
+          <div className="container-xl">
             <PageHeader
               title="Настройки интерфейса"
               icon={<IconSettings size={28} />}
@@ -274,7 +274,7 @@ export default function SettingsPage() {
   return (
     <div className="page-wrapper">
       <div className="page-body">
-        <div className="container-fluid">
+        <div className="container-xl">
           <PageHeader
             title="Настройки интерфейса"
             icon={<IconSettings size={28} />}
@@ -321,63 +321,58 @@ export default function SettingsPage() {
             </div>
           )}
 
-          <div className="row g-0 g-lg-4">
-            {/* Боковое меню — узкая колонка, светлый фон */}
-            <div className="col-12 col-lg-3 col-xl-2 mb-4 mb-lg-0 settings-page-sidebar">
-              <div
-                className="sticky-top bg-body-tertiary rounded-end py-3 px-3 pe-lg-3"
-                style={{ top: '1rem', minHeight: '200px' }}
-              >
-                <div className="input-icon mb-3">
-                  <span className="input-icon-addon">
-                    <IconSearch size={18} className="text-muted" />
-                  </span>
-                  <input
-                    type="text"
-                    className="form-control form-control-sm"
-                    placeholder="Поиск разделов"
-                    value={sidebarSearch}
-                    onChange={(e) => setSidebarSearch(e.target.value)}
-                    aria-label="Поиск разделов"
-                  />
-                </div>
-                <nav className="settings-sidebar-nav">
-                  {sidebarGroupsFiltered.map((group) => (
-                    <div key={group.title} className="mb-3">
-                      <div className="dropdown-header small text-uppercase text-muted px-0 pt-1 pb-1">
-                        {group.title}
-                      </div>
-                      <ul className="list-group list-group-flush list-group-transparent">
+          {/* Как в Tabler Settings: одна card, row g-0, col-md-3 border-end + col-md-9 */}
+          <div className="card">
+            <div className="row g-0">
+              {/* Левая колонка — навигация (list-group list-group-transparent) */}
+              <div className="col-12 col-md-3 border-end">
+                <div className="card-body">
+                  <div className="input-icon mb-3">
+                    <span className="input-icon-addon">
+                      <IconSearch size={18} className="text-muted" />
+                    </span>
+                    <input
+                      type="text"
+                      className="form-control form-control-sm"
+                      placeholder="Поиск разделов"
+                      value={sidebarSearch}
+                      onChange={(e) => setSidebarSearch(e.target.value)}
+                      aria-label="Поиск разделов"
+                    />
+                  </div>
+                  {sidebarGroupsFiltered.map((group, idx) => (
+                    <div key={group.title} className={idx > 0 ? 'mt-4' : ''}>
+                      <h4 className="subheader">{group.title}</h4>
+                      <div className="list-group list-group-transparent">
                         {group.items.map((section) => {
                           const Icon = section.icon;
                           const isActive = activeSection === section.id;
                           return (
-                            <li key={section.id}>
-                              <button
-                                type="button"
-                                className={`list-group-item list-group-item-action d-flex align-items-center border-0 rounded px-0 py-2 ${isActive ? 'bg-primary-lt text-primary fw-semibold' : 'text-body'}`}
-                                onClick={() => goToSection(section.id)}
-                              >
-                                <span className={`me-2 d-flex ${isActive ? 'text-primary' : 'text-muted'}`}>
-                                  <Icon size={18} />
-                                </span>
-                                {section.title}
-                              </button>
-                            </li>
+                            <button
+                              key={section.id}
+                              type="button"
+                              className={`list-group-item list-group-item-action d-flex align-items-center border-0 ${isActive ? 'active' : ''}`}
+                              onClick={() => goToSection(section.id)}
+                            >
+                              <span className="me-2 d-flex opacity-75">
+                                <Icon size={18} />
+                              </span>
+                              {section.title}
+                            </button>
                           );
                         })}
-                      </ul>
+                      </div>
                     </div>
                   ))}
-                </nav>
-                {sidebarGroupsFiltered.length === 0 && (
-                  <p className="text-muted small mb-0 mt-2">Нет подходящих разделов</p>
-                )}
+                  {sidebarGroupsFiltered.length === 0 && (
+                    <p className="text-muted small mb-0">Нет подходящих разделов</p>
+                  )}
+                </div>
               </div>
-            </div>
 
-            {/* Контент выбранного раздела — на всю оставшуюся ширину */}
-            <div className="col-lg-9 col-xl-10 min-vw-0 pt-lg-0">
+              {/* Правая колонка — контент раздела */}
+              <div className="col-12 col-md-9 d-flex flex-column">
+                <div className="card-body">
               {activeSection === 'live-doh' && (
               <SectionCard
                 id="live-doh"
@@ -583,6 +578,8 @@ export default function SettingsPage() {
                 </div>
               </SectionCard>
               )}
+                </div>
+              </div>
             </div>
           </div>
         </div>