diff --git a/templates/head.html b/templates/head.html
index afc463f..73623e8 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -22,11 +22,9 @@
     <link href="/static/bootstrap-responsive.min.css" rel="stylesheet">
     <link href="/static/plus.css" rel="stylesheet">
     <link href="/static/plus2.css" rel="stylesheet">
+    <script src="/static/bootstrap.bundle.min.js"></script>
     <style type="text/css">
         @media (max-width: 768px) {
-            .navbar-inner {
-                padding: 0 10px;
-            }
             .search_box {
                 width: 100%;
                 max-width: 300px;
@@ -66,9 +64,6 @@
                 max-width: 100%;
                 height: auto;
             }
-            .navbar .nav > li > a {
-                padding: 10px 8px;
-            }
         }
         .search-title {
             text-align: center;
@@ -279,8 +274,8 @@
         }
         
         .navbar {
-            background: #fff;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            background: #333;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
             position: relative;
             min-height: 50px;
             margin-bottom: 20px;
@@ -301,7 +296,7 @@
             display: flex;
             align-items: center;
             text-decoration: none;
-            color: #333;
+            color: #fff;
             font-weight: 600;
         }
         
@@ -324,36 +319,34 @@
         .navbar .nav > li > a {
             display: block;
             padding: 15px 20px;
-            color: #333;
+            color: #fff;
             text-decoration: none;
-            font-weight: 600;
+            font-weight: 500;
             transition: all 0.3s;
-            background: #fff;
         }
         
         .navbar .nav > li > a:hover {
-            color: #fff;
-            background: #007bff;
+            background: rgba(255,255,255,0.1);
         }
         
         .navbar .nav > li.active > a {
-            color: #fff;
-            background: #007bff;
+            background: rgba(255,255,255,0.15);
         }
         
         .navbar .btn-navbar {
             display: none;
-            background: none;
+            background: transparent;
             border: none;
             padding: 10px;
             cursor: pointer;
+            margin-left: 15px;
         }
         
         .navbar .btn-navbar .icon-bar {
             display: block;
             width: 22px;
             height: 2px;
-            background-color: #333;
+            background-color: #fff;
             margin: 4px 0;
             transition: all 0.3s;
         }
@@ -363,15 +356,18 @@
                 padding: 0 15px;
             }
             
-            .navbar .nav {
+            .navbar .btn-navbar {
+                display: block;
+            }
+            
+            .navbar .nav-collapse {
                 position: fixed;
                 top: 50px;
                 left: 0;
                 right: 0;
-                background: #fff;
-                flex-direction: column;
+                background: #333;
                 padding: 10px 0;
-                box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+                box-shadow: 0 2px 10px rgba(0,0,0,0.3);
                 transform: translateY(-100%);
                 opacity: 0;
                 visibility: hidden;
@@ -379,36 +375,23 @@
                 z-index: 1000;
             }
             
-            .navbar .nav.active {
+            .navbar .nav-collapse.in {
                 transform: translateY(0);
                 opacity: 1;
                 visibility: visible;
             }
             
+            .navbar .nav {
+                flex-direction: column;
+            }
+            
+            .navbar .nav > li {
+                width: 100%;
+            }
+            
             .navbar .nav > li > a {
-                padding: 15px 20px;
-                border-bottom: 1px solid #eee;
-                font-size: 16px;
-                font-weight: 600;
-            }
-            
-            .navbar .nav > li > a:hover {
-                color: #fff;
-                background: #007bff;
-            }
-            
-            .navbar .nav > li.active > a {
-                color: #fff;
-                background: #007bff;
-            }
-            
-            .navbar .btn-navbar {
-                background: #007bff;
-                border-radius: 4px;
-            }
-            
-            .navbar .btn-navbar .icon-bar {
-                background-color: #fff;
+                padding: 12px 20px;
+                border-bottom: 1px solid rgba(255,255,255,0.1);
             }
         }
     </style>
@@ -433,22 +416,23 @@
 <!-- End Matomo Code -->
 
     <script src="https://www.google.com/recaptcha/api.js"></script>
+    <script src="/static/bootstrap.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             var btnNavbar = document.querySelector('.btn-navbar');
-            var nav = document.querySelector('.navbar .nav');
+            var navCollapse = document.querySelector('.nav-collapse');
             
-            if (btnNavbar && nav) {
+            if (btnNavbar && navCollapse) {
                 btnNavbar.addEventListener('click', function() {
                     this.classList.toggle('active');
-                    nav.classList.toggle('active');
+                    navCollapse.classList.toggle('active');
                 });
                 
                 // Закрытие меню при клике вне его
                 document.addEventListener('click', function(e) {
-                    if (!nav.contains(e.target) && !btnNavbar.contains(e.target)) {
+                    if (!navCollapse.contains(e.target) && !btnNavbar.contains(e.target)) {
                         btnNavbar.classList.remove('active');
-                        nav.classList.remove('active');
+                        navCollapse.classList.remove('active');
                     }
                 });
             }