diff --git a/frontend/src/App.css b/frontend/src/App.css
index 0472c1c..f72809a 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -73,9 +73,24 @@
   flex-shrink: 0;
   border-top-color: rgba(255, 255, 255, 0.1) !important;
 }
-.navbar-vertical .navbar-sidebar-footer .nav-link {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon {
+  padding: 0.35rem;
+  color: rgba(255, 255, 255, 0.75);
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.08);
+}
+.navbar-vertical .navbar-sidebar-footer .nav-link.btn-icon .badge {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.35rem;
+}
+.navbar-vertical .navbar-sidebar-footer .dropdown-toggle::after {
+  display: none;
 }
 /* Стрелка только у пунктов с подменю (dropdown-toggle), не у обычных ссылок и не у бренда */
 .navbar-vertical .nav-link:not(.dropdown-toggle)::after {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f00f312..1e38a46 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -469,65 +469,49 @@ function MainLayout() {
                 </li>
               ))}
             </ul>
-            {/* Кнопки внизу сайдбара: язык, раскладка, тема, горячие клавиши, настройки */}
-            <div className="navbar-sidebar-footer navbar-nav flex-column border-top pt-2 mt-auto">
-              <div className="nav-item dropdown">
-                <a
-                  href="#"
-                  className="nav-link dropdown-toggle px-3 py-2"
-                  data-bs-toggle="dropdown"
-                  onClick={(e) => e.preventDefault()}
-                  title="Язык"
-                >
-                  <span className="badge">{lang.toUpperCase()}</span>
-                </a>
-                <div className="dropdown-menu dropdown-menu-end">
-                  <a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
-                  <a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
-                </div>
-              </div>
-              <div className="nav-item dropdown">
-                <a
-                  href="#"
-                  className="nav-link dropdown-toggle px-3 py-2"
-                  data-bs-toggle="dropdown"
-                  onClick={(e) => e.preventDefault()}
-                  title={t('layoutSidebar')}
-                >
-                  {layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
-                </a>
-                <div className="dropdown-menu dropdown-menu-end">
-                  <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
-                    <IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
+            {/* Горизонтальный ряд значков в самом низу сайдбара */}
+            <div className="navbar-sidebar-footer border-top mt-auto">
+              <div className="d-flex align-items-center justify-content-center gap-1 py-2 px-2">
+                <div className="nav-item dropdown dropup">
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title="Язык">
+                    <span className="badge bg-secondary">{lang.toUpperCase()}</span>
                   </a>
-                  <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
-                    <IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
+                  <div className="dropdown-menu dropdown-menu-end">
+                    <a href="#" className={`dropdown-item ${lang === 'ru' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('ru'); }}>Русский</a>
+                    <a href="#" className={`dropdown-item ${lang === 'en' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLang('en'); }}>English</a>
+                  </div>
+                </div>
+                <div className="nav-item dropdown dropup">
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('layoutSidebar')}>
+                    {layout === LAYOUT_FLUID ? <IconLayoutSidebarLeftExpand size={20} /> : <IconLayoutNavbar size={20} />}
+                  </a>
+                  <div className="dropdown-menu dropdown-menu-end">
+                    <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_FLUID ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_FLUID); }}>
+                      <IconLayoutSidebarLeftExpand className="me-2" size={18} /> {t('layoutSidebar')}
+                    </a>
+                    <a href="#" className={`dropdown-item d-flex align-items-center ${layout === LAYOUT_HORIZONTAL ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setLayout(LAYOUT_HORIZONTAL); }}>
+                      <IconLayoutNavbar className="me-2" size={18} /> {t('layoutHorizontal')}
+                    </a>
+                  </div>
+                </div>
+                <div className="nav-item dropdown dropup">
+                  <a href="#" className="nav-link btn-icon rounded" data-bs-toggle="dropdown" onClick={(e) => e.preventDefault()} title={t('light') + ' / ' + t('dark')}>
+                    {theme === 'dark' ? '🌙' : '☀️'}
+                  </a>
+                  <div className="dropdown-menu dropdown-menu-end">
+                    <a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
+                    <a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
+                  </div>
+                </div>
+                <div className="nav-item">
+                  <KeyboardShortcutsButton className="nav-link btn-icon rounded" title="Горячие клавиши" />
+                </div>
+                <div className="nav-item">
+                  <a href="#" className="nav-link btn-icon rounded" onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }} title="Настройки">
+                    <IconSettings size={20} />
                   </a>
                 </div>
               </div>
-              <div className="nav-item dropdown">
-                <a
-                  href="#"
-                  className="nav-link dropdown-toggle px-3 py-2"
-                  data-bs-toggle="dropdown"
-                  onClick={(e) => e.preventDefault()}
-                  title={t('light') + ' / ' + t('dark')}
-                >
-                  {theme === 'dark' ? '🌙' : '☀️'}
-                </a>
-                <div className="dropdown-menu dropdown-menu-end">
-                  <a href="#" className={`dropdown-item ${theme === 'light' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('light'); }}>☀️ {t('light')}</a>
-                  <a href="#" className={`dropdown-item ${theme === 'dark' ? 'active' : ''}`} onClick={(e) => { e.preventDefault(); setTheme('dark'); }}>🌙 {t('dark')}</a>
-                </div>
-              </div>
-              <div className="nav-item">
-                <KeyboardShortcutsButton className="nav-link px-3 py-2" title="Горячие клавиши" />
-              </div>
-              <div className="nav-item">
-                <a href="#" className="nav-link px-3 py-2" onClick={(e) => { e.preventDefault(); setSettingsOpen(true); }} title="Настройки">
-                  <IconSettings size={20} />
-                </a>
-              </div>
             </div>
           </div>
         </div>