diff --git a/backend/config_parser.py b/backend/config_parser.py
index a955deb..8f6ea69 100644
--- a/backend/config_parser.py
+++ b/backend/config_parser.py
@@ -17,7 +17,7 @@ class NeedNVR(Exception):
 
 class Recorder:
     loop = asyncio.get_event_loop()
-    def __init__(self, address, port, username, password, name = "", index = 0):
+    def __init__(self, address, port, username, password, name = "", index = 0, name_overrides = {}):
         self.address = address
         self.port = int(port)
         self.username = username
@@ -26,6 +26,7 @@ class Recorder:
         self.index = index
         self.channels = 0
         self.nvr_index = 0
+        self.name_overrides = name_overrides
 
     @property
     def nvr(self):
@@ -370,7 +371,7 @@ class Config:
         self.recorders = []
         i = 0
         for raw_server in raw.get("recorders", []):
-            self.recorders.append(Recorder(raw_server.get("ip"), raw_server.get("port"), raw_server.get("user"), raw_server.get("password"), raw_server.get("name", ""), index=i))
+            self.recorders.append(Recorder(raw_server.get("ip"), raw_server.get("port"), raw_server.get("user"), raw_server.get("password"), raw_server.get("name", ""), index=i, name_overrides=raw_server.get("name_overrides", {})))
             i += 1
         if (self.recorders.__len__() == 0):
             self.logger.warning("Recorders not find")
diff --git a/backend/server.py b/backend/server.py
index c6e2668..0fc92c1 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -51,7 +51,10 @@ class Server:
                 nvr:NVR = self.config.getRecorder(recorder_index).nvr
                 await nvr.login()
                 channels = await nvr.channels()
-                return {"ok":True, "data":channels}
+                overrides = []
+                for channel in channels:
+                    overrides.append(self.config.getRecorder(recorder_index).name_overrides.get(channel, channel))
+                return {"ok":True, "data":overrides}
             except Exception as e:
                 traceback.print_exc()
                 response.status_code = 400
diff --git a/frontend/ang_dvrip/src/app/app.component.css b/frontend/ang_dvrip/src/app/app.component.css
index e69de29..56c98f3 100644
--- a/frontend/ang_dvrip/src/app/app.component.css
+++ b/frontend/ang_dvrip/src/app/app.component.css
@@ -0,0 +1,7 @@
+.container {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
diff --git a/frontend/ang_dvrip/src/app/app.component.html b/frontend/ang_dvrip/src/app/app.component.html
index 013c25c..dd23fe6 100644
--- a/frontend/ang_dvrip/src/app/app.component.html
+++ b/frontend/ang_dvrip/src/app/app.component.html
@@ -1,32 +1,71 @@
 <ng-container>
-  <mat-toolbar style="border-bottom: black 1px solid">
-    <span>DVRIP Клиент</span>
-    <mat-spinner *ngIf="loading" [diameter]="50"></mat-spinner>
-    <span class="spacer"></span>
-    <ng-container *ngIf="!loading">
-      <mat-form-field *ngIf="availble_channels.length>0">
-        <mat-select [(value)]="selected_channel" (valueChange)="goToRoot()">
-          <mat-option *ngFor="let r of availble_channels" [value]="availble_channels.indexOf(r)">{{r}}</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <p *ngIf="availble_channels.length==0">Нет доступных каналов</p>
-      <span class="spacer"></span>
-      <mat-form-field *ngIf="availble_recorders.length>0">
-        <mat-select [(value)]="selected_recorder" (valueChange)="getChannels(selected_recorder)">
-          <mat-option *ngFor="let r of availble_recorders" [value]="availble_recorders.indexOf(r)">{{r}}</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <p *ngIf="availble_recorders.length==0">Нет доступных рекордеров</p>
-    </ng-container>
-  </mat-toolbar>
-  <mat-toolbar *ngIf="!loading && availble_channels.length>0 && availble_recorders.length>0" style="border-bottom: black 1px solid">
-    <button mat-button [routerLink]="['about', selected_recorder, selected_channel]">Обзор</button>
-    <span class="spacer"></span>
-    <button mat-button [routerLink]="['stream', selected_recorder, selected_channel]">Просмотр в реальном времени</button>
-    <span class="spacer"></span>
-    <button mat-button [routerLink]="['history', selected_recorder, selected_channel]">История обнаружений</button>
+
+  <mat-sidenav-container class="container">
+    <mat-sidenav #sidenav mode="over">
+      <div>
+        <mat-toolbar (click)="sidenav.toggle()">
+          <button mat-icon-button>
+            <mat-icon>menu</mat-icon>
+          </button>
+          <span>Закрыть</span>
+        </mat-toolbar>
+        <br>
+        <mat-form-field *ngIf="availble_recorders.length>0">
+          <mat-label>Выбранный рекордер</mat-label>
+          <mat-select [(value)]="selected_recorder" (valueChange)="getChannels(selected_recorder)">
+            <mat-option *ngFor="let r of availble_recorders" [value]="availble_recorders.indexOf(r)">{{r}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <p *ngIf="availble_recorders.length==0">Нет доступных рекордеров</p>
+        <br>
+        <mat-form-field *ngIf="availble_channels.length>0">
+          <mat-label>Выбранный канал</mat-label>
+          <mat-select [(value)]="selected_channel" (valueChange)="goToRoot()">
+            <mat-option *ngFor="let r of availble_channels" [value]="availble_channels.indexOf(r)">{{r}}</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <p *ngIf="availble_channels.length==0">Нет доступных каналов</p>
+        <br>
+        <span>DVRIP Клиент <span style="color: darkgrey">{{version}}</span></span>
+      </div>
+    </mat-sidenav>
+
+    <mat-sidenav-content>
+      <mat-toolbar>
+        <button mat-icon-button (click)="sidenav.toggle()">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <span>{{availble_recorders.length == 0?'Нет доступных рекордеров':availble_recorders[selected_recorder]}}
+          <span>{{availble_channels.length == 0?'':'/ ' + availble_channels[selected_channel]}}</span>
+        </span>
+        <span class="spacer"></span>
+        <button mat-button [routerLink]="['about', selected_recorder, selected_channel]">Обзор</button>
+        <span class="spacer"></span>
+        <button mat-button [routerLink]="['stream', selected_recorder, selected_channel]">Просмотр в реальном времени</button>
+        <span class="spacer"></span>
+        <button mat-button [routerLink]="['history', selected_recorder, selected_channel]">История обнаружений</button>
+        <!--<span class="spacer"></span>
+        <button mat-button>Бибки</button>-->
+      </mat-toolbar>
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</ng-container>
+<!--<ng-container>
+<mat-toolbar style="border-bottom: black 1px solid">
+  <span>DVRIP Клиент <span style="color: darkgrey">{{version}}</span></span>
+  <mat-spinner *ngIf="loading" [diameter]="50"></mat-spinner>
+  <span class="spacer"></span>
+  <ng-container *ngIf="!loading">
+
+
     <span class="spacer"></span>
-    <button mat-button>Бибки</button>
-  </mat-toolbar>
+
+  </ng-container>
+</mat-toolbar>
+<mat-toolbar *ngIf="!loading && availble_channels.length>0 && availble_recorders.length>0" style="border-bottom: black 1px solid">
+
+</mat-toolbar>
 </ng-container>
-<router-outlet></router-outlet>
+
+-->
diff --git a/frontend/ang_dvrip/src/app/app.component.ts b/frontend/ang_dvrip/src/app/app.component.ts
index 512e823..d47d98d 100644
--- a/frontend/ang_dvrip/src/app/app.component.ts
+++ b/frontend/ang_dvrip/src/app/app.component.ts
@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ApiService} from "./services/ApiService";
 import {HttpClient} from "@angular/common/http";
 import {ActivatedRoute, Router} from "@angular/router";
+import {version} from "./version";
 
 @Component({
   selector: 'app-root',
@@ -14,6 +15,7 @@ export class AppComponent implements OnInit {
   availble_channels:string[] = [];
   selected_channel:number = 0;
   loading:boolean = true
+  version = version;
 
   ngOnInit(): void {
     this.getRecorders();
diff --git a/frontend/ang_dvrip/src/app/components/history/history.component.html b/frontend/ang_dvrip/src/app/components/history/history.component.html
index 58b4e53..f4b9867 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.html
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.html
@@ -8,14 +8,14 @@
       </mat-select>
     </mat-form-field>
     <mat-form-field style="padding-right: 1%; padding-left: 1%">
-      <mat-label>Choose a date</mat-label>
+      <mat-label>Дата начала поиска</mat-label>
       <input matInput [matDatepicker]="picker_start" [ngModel]="start_date" (dateChange)="setDate($event, 'start')">
       <mat-hint>MM/DD/YYYY</mat-hint>
       <mat-datepicker-toggle matSuffix [for]="picker_start"></mat-datepicker-toggle>
       <mat-datepicker #picker_start></mat-datepicker>
     </mat-form-field>
     <mat-form-field style="padding-right: 1%; padding-left: 1%">
-      <mat-label>Choose a date</mat-label>
+      <mat-label>Дата конца поиска</mat-label>
       <input matInput [matDatepicker]="picker_end" [ngModel]="end_date" (dateChange)="setDate($event, 'end')">
       <mat-hint>MM/DD/YYYY</mat-hint>
       <mat-datepicker-toggle matSuffix [for]="picker_end"></mat-datepicker-toggle>
@@ -31,7 +31,12 @@
       <mat-card-title>{{element.filename}}</mat-card-title>
       <mat-card-subtitle>{{baseUtils.getFancySize(element.size)}}</mat-card-subtitle>
     </mat-card-header>
-    <img mat-card-image style="cursor: pointer" (click)="openTransCodeDialog(element)" [src]="'api/dvrip/preview/'+recorder_index+'?b64='+element.b64" alt="Превью">
+    <img
+      mat-card-image
+      style="cursor: pointer"
+      (click)="openTransCodeDialog(element)"
+      [src]="'api/dvrip/preview/'+recorder_index+'?b64='+element.b64"
+      alt="Превью недоступно">
     <mat-card-content>
     </mat-card-content>
     <mat-card-actions>
diff --git a/frontend/ang_dvrip/src/app/components/history/history.component.ts b/frontend/ang_dvrip/src/app/components/history/history.component.ts
index 85744e2..5215374 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.ts
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.ts
@@ -46,6 +46,7 @@ export class HistoryComponent implements OnInit {
     switch (type) {
       case "start": {
         this.start_date = event.value == null?null:event.value;
+        this.end_date = this.start_date;
         break;
       }
       case "end": {
diff --git a/frontend/ang_dvrip/src/app/components/stream/stream.component.html b/frontend/ang_dvrip/src/app/components/stream/stream.component.html
index fe0c129..0c20462 100644
--- a/frontend/ang_dvrip/src/app/components/stream/stream.component.html
+++ b/frontend/ang_dvrip/src/app/components/stream/stream.component.html
@@ -1,12 +1,14 @@
 <div style="text-align: center">
-  <mat-form-field>
-    <mat-label>Выбранный поток</mat-label>
-    <mat-select [(value)]="selected_stream" (valueChange)="getStreamUrl()">
-      <mat-option [value]="0">Основной</mat-option>
-      <mat-option [value]="1">Дополнительный</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <button mat-button (click)="getOpenNewWindow()">Открыть в новом окне</button>
+  <div style="text-align: center; padding-top: 1%; padding-bottom: 1%">
+    <mat-form-field  style="padding-right: 1%; padding-left: 1%">
+      <mat-label>Выбранный поток</mat-label>
+      <mat-select [(value)]="selected_stream" (valueChange)="getStreamUrl()">
+        <mat-option [value]="0">Основной</mat-option>
+        <mat-option [value]="1">Дополнительный</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button  style="padding-right: 1%; padding-left: 1%" mat-button (click)="getOpenNewWindow()">Открыть в новом окне</button>
+  </div>
 </div>
 <ng-container>
   <iframe width="100%" height="100%" [src]="url"></iframe>
diff --git a/frontend/ang_dvrip/src/app/version.ts b/frontend/ang_dvrip/src/app/version.ts
new file mode 100644
index 0000000..47757fe
--- /dev/null
+++ b/frontend/ang_dvrip/src/app/version.ts
@@ -0,0 +1 @@
+export const version = "dev";