diff --git a/static/styles/main.css b/static/styles/main.css
index cd17bcf..d4fc598 100644
--- a/static/styles/main.css
+++ b/static/styles/main.css
@@ -1833,7 +1833,7 @@ input[type="datetime-local"] {
 }
 
 .signals-list {
-  width: 345px;
+  /* width: 345px; */
   height: 100%;
   background-color: #f7f7fa;
   border-right: #f5f5fa 2px solid;
@@ -1843,17 +1843,14 @@ input[type="datetime-local"] {
   z-index: 3;
 }
 
-.signals-list.hide {
+.signals-list {
   width: 40px;
+  overflow: hidden;
+  transition: width 0.3s ease-in-out;
 }
 
-.signals-list.hide h1,
-.signals-list.hide ul,
-.signals-list.hide input {
-  transition: 1s;
-  /* width: 10; */
-  margin-left: 50px;
-  display: none;
+.signals-list.active {
+  width: 345px; 
 }
 
 .signals-list h1 {
@@ -1891,6 +1888,30 @@ input[type="datetime-local"] {
   padding-bottom: 50px;
 }
 
+.signals-list.active li,
+.signals-list.active h1 {
+  opacity: 1;
+  transform: translateX(0);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.signals-list.active #left-slider {
+  transform: rotate(0);
+  transition: transform 0.3s ease-in-out;
+}
+
+.signals-list #left-slider {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease-in-out;
+}
+
+.signals-list li,
+.signals-list h1 {
+  opacity: 0;
+  transform: translateX(-20px);
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
 .signals-list li {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -2075,6 +2096,7 @@ input[type="datetime-local"] {
   right: 0;
   width: calc(100% - 345px - 2px);
   z-index: 3;
+  transition: all 0.3s ease-in-out
 }
 
 .stream-cameras button {
diff --git a/static/templates/live.html b/static/templates/live.html
index 8acc4c3..4c3818f 100644
--- a/static/templates/live.html
+++ b/static/templates/live.html
@@ -124,37 +124,24 @@
                 
 
                     <section class="table" style="position: relative;">
-                      <div id="signals-list" class="signals-list">
-                        <h1>Сигналы ТС</h1>
+                      <div id="signals-list" class="signals-list active">
+                        <h1 id="signalsListName">Сигналы ТС</h1>
                         <!-- <input class="search" type="text" placeholder="Поиск"> -->
+                        <svg id="left-slider" class="left-slider" xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" viewBox="0 0 11 19">
+                          <path fill="#000" fill-opacity=".75" d="M0 9.495c0 .273.101.514.315.722l8.92 8.477a.981.981 0 0 0 .73.295c.585 0 1.035-.427 1.035-.995 0-.285-.124-.525-.304-.711L2.508 9.495l8.188-7.789c.18-.186.304-.437.304-.71C11 .425 10.55 0 9.965 0c-.292 0-.54.098-.73.284L.314 8.773A.955.955 0 0 0 0 9.495Z"/>
+                        </svg>
 
                         <ul id="list">
                           {{#each Alarms}}
                           <li>
-                            <!-- <input type="radio" name="signal" id="signal-{{this.id}}" hidden> -->
                             <a style="color:rgba(0, 0, 0, 0.7);" href="/reports/{{this.id}}" target="_blank">
                             <label for="signal-{{this.id}}">
-                              <!-- <h2>{{this.type}}</h2> -->
-                              <!-- <span>ID {{this.id}}</span> -->
-                              <!-- <p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
-                                <path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
-                              </svg>{{this.time}}</p>
-                              <p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
-                                <path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
-                              </svg>{{this.latitude}},{{this.longitude}}</p> -->
                               <p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 19">
                                 <path fill="#000" fill-opacity=".75" d="M4.58 6.143c-.078.341.068.478.44.459 1.562-.108 3.418-.196 6.533-.196 3.125 0 4.98.088 6.543.196.361.02.508-.118.43-.46-.235-1.035-.684-2.382-.997-2.92-.254-.439-.537-.634-1.045-.702-.703-.098-2.304-.166-4.931-.166-2.617 0-4.219.068-4.932.166-.508.068-.79.263-1.045.703-.312.537-.752 1.884-.996 2.92Zm-.068 6.65c.888 0 1.572-.684 1.572-1.572 0-.899-.684-1.573-1.572-1.573-.889 0-1.573.674-1.573 1.573 0 .888.684 1.572 1.573 1.572Zm4.463-.39h5.166c.664 0 1.123-.46 1.123-1.133 0-.665-.46-1.123-1.123-1.123H8.975c-.674 0-1.133.458-1.133 1.123 0 .673.459 1.132 1.133 1.132Zm9.619.39c.898 0 1.572-.684 1.572-1.572 0-.899-.674-1.573-1.572-1.573-.889 0-1.563.674-1.563 1.573 0 .888.674 1.572 1.563 1.572Zm-7.041 2.637c3.281 0 7.646-.166 9.492-.381 1.328-.147 2.06-.88 2.06-2.13v-1.718c0-1.65-.332-2.568-1.23-3.74l-.83-1.065c-.352-1.757-1.006-3.603-1.338-4.326C19.18.967 18.174.313 16.875.137 16.221.049 14.082 0 11.553 0 9.033 0 6.895.059 6.24.137 4.941.293 3.926.967 3.408 2.07c-.342.723-.986 2.569-1.347 4.326l-.82 1.065C.331 8.633 0 9.55 0 11.2v1.719c0 1.25.742 1.982 2.06 2.129 1.856.215 6.211.38 9.493.38Zm0-1.28c-3.32 0-7.578-.156-9.15-.351-.83-.098-1.124-.527-1.124-1.27v-1.328c0-1.338.215-1.963.977-2.959l.996-1.308c.264-1.416.898-3.39 1.318-4.288.313-.673.928-1.093 1.817-1.2.625-.079 2.607-.167 5.166-.167 2.568 0 4.58.088 5.146.166.918.117 1.524.537 1.846 1.201.42.899 1.055 2.872 1.308 4.288l1.006 1.308c.752.996.967 1.621.967 2.96v1.327c0 .742-.293 1.172-1.123 1.27-1.562.195-5.83.351-9.15.351Zm-9.756 3.965h1.142c.733 0 1.3-.566 1.3-1.289v-2.324l-3.741-.537v2.861c0 .723.566 1.29 1.299 1.29Zm18.369 0h1.152a1.27 1.27 0 0 0 1.29-1.289v-2.861l-3.731.537v2.324a1.27 1.27 0 0 0 1.289 1.29Z"/>
                               </svg>{{this.serial}}</p>
                               <p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" fill="none" viewBox="0 0 13 14">
                                 <path fill="rgba(255, 106, 75, 0.8)" fill-opacity=".85" d="M0 10.722c0 .494.386.82 1.04.82h2.908c.055 1.307 1.095 2.451 2.549 2.451 1.46 0 2.5-1.138 2.555-2.452h2.908c.647 0 1.04-.325 1.04-.82 0-.677-.703-1.286-1.295-1.889-.455-.467-.579-1.429-.634-2.208-.048-2.668-.75-4.389-2.583-5.04C8.253.699 7.516 0 6.497 0 5.484 0 4.74.698 4.512 1.585c-1.832.65-2.535 2.37-2.583 5.04-.055.778-.18 1.74-.634 2.207C.695 9.435 0 10.044 0 10.722Zm1.337-.203v-.082c.124-.196.537-.596.895-.989.496-.541.73-1.415.792-2.736.055-2.96.951-3.901 2.13-4.22.171-.04.268-.121.275-.298.02-.704.434-1.198 1.068-1.198.64 0 1.047.494 1.074 1.198.007.177.097.258.269.299 1.185.318 2.08 1.26 2.136 4.22.062 1.32.296 2.194.785 2.735.365.393.772.793.896.99v.08H1.337Zm3.685 1.022h2.956c-.055.922-.648 1.497-1.481 1.497-.827 0-1.427-.575-1.475-1.497Z"/>
                               </svg>{{this.type}}</p>
-                              
-                              <!-- <p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
-                                <path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
-                              </svg></p>
-                              <p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
-                                <path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
-                              </svg></p> -->
                             </label>
                           </a>
                           </li>
@@ -180,6 +167,7 @@
                           <video id="camera-2"></video>
                           <video id="camera-3"></video>
                           <video id="camera-4"></video>
+                          <video style="display: none;" id="camera-5"></video>
                         </div>
                         <button onclick="switchCameras(-1)">Назад</button>
                         <button onclick="switchCameras(1)">Вперед</button>
@@ -197,6 +185,36 @@
 
     <script src="../scripts/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+      const leftSlider = document.getElementById("left-slider");
+      const signalsList = document.getElementById("signals-list");
+
+      leftSlider.addEventListener("click", function () {
+        signalsList.classList.toggle("active");
+
+        const listItems = signalsList.querySelectorAll("li");
+
+        if (signalsList.classList.contains("active")) {
+          listItems.forEach(function (item, index) {
+            setTimeout(function () {
+              item.classList.add("active");
+            }, index * 50); 
+          });
+          $(".stream-cameras").css("width", "calc(100% - 345px - 2px)");
+          setTimeout(() => $("#signalsListName").show(), 200);
+        } else {
+          listItems.forEach(function (item) {
+            item.classList.remove("active");
+          });
+          $(".stream-cameras").css("width", "calc(100% - 40px - 2px)");
+            $("#signalsListName").hide();
+        }
+      });
+    });
+
+    </script>
     <script>
       document.addEventListener('DOMContentLoaded', function () {
         const areaNames = document.querySelectorAll('.area-name');
@@ -289,7 +307,7 @@
     <script>
       let flvPlayers = [];
       let currentCameraGroup = 1;
-      const camerasPerGroup = 4;
+      const camerasPerGroup = 5;
       var totalCameras = 12 - 1; 
       const baseURL = "http://45.9.42.252:8080/http/live.flv";
     
@@ -304,7 +322,7 @@
       }
     
       async function playNextCamerasInGroup() {
-  const startCamera = (currentCameraGroup - 1) * camerasPerGroup + 2;
+  const startCamera = currentCameraGroup === 1 ? 2 : (currentCameraGroup - 1) * camerasPerGroup + 1;
   const endCamera = startCamera + camerasPerGroup - 1;
 
   if (startCamera > totalCameras) {
@@ -362,7 +380,7 @@
 
     videoElementIndex++;
 
-    await new Promise(resolve => setTimeout(resolve, 4000));
+    await new Promise(resolve => setTimeout(resolve, 2000));
   }
 }