diff --git a/backend/config_parser.py b/backend/config_parser.py
index 42d8c87..225f270 100644
--- a/backend/config_parser.py
+++ b/backend/config_parser.py
@@ -1,30 +1,12 @@
 import os, sys
-from json import loads
-import uuid
 from asyncio_dvrip import DVRIPCam
 import asyncio
 from nvr_core import NVR
 from nvr_types import File
 import platform
 import aiofiles
-import hashlib
-
-def uuid_from_string(string:str):
-    hex_string = hashlib.md5(string.encode("utf8")).hexdigest()
-    return uuid.UUID(hex=hex_string)
-
-def app_dir():
-    return os.path.dirname(os.path.abspath(__file__))
-
-def load_config(config_name):
-    try:
-        path = os.path.join(app_dir(), config_name)
-        print("Looking config file", path)
-        with open(path, "r", encoding="utf8") as f:
-            return loads(f.read())
-    except Exception as e:
-        print("cannot find or parse config.json", e)
-        sys.exit(1)       
+
+from global_funcs import *   
 
 class Recorder:
     loop = asyncio.get_event_loop()
diff --git a/backend/global_funcs.py b/backend/global_funcs.py
new file mode 100644
index 0000000..245396f
--- /dev/null
+++ b/backend/global_funcs.py
@@ -0,0 +1,22 @@
+import hashlib
+import os
+import sys
+from json import loads
+import uuid
+
+def uuid_from_string(string:str):
+    hex_string = hashlib.md5(string.encode("utf8")).hexdigest()
+    return uuid.UUID(hex=hex_string)
+
+def app_dir():
+    return os.path.dirname(os.path.abspath(__file__))
+
+def load_config(config_name):
+    try:
+        path = os.path.join(app_dir(), config_name)
+        print("Looking config file", path)
+        with open(path, "r", encoding="utf8") as f:
+            return loads(f.read())
+    except Exception as e:
+        print("cannot find or parse config.json", e)
+        sys.exit(1)    
\ No newline at end of file
diff --git a/backend/nvr_types.py b/backend/nvr_types.py
index 4b0f2b9..1f974b8 100644
--- a/backend/nvr_types.py
+++ b/backend/nvr_types.py
@@ -3,6 +3,8 @@ from asyncio_dvrip import DVRIPCam
 import json
 import struct
 import base64
+from global_funcs import *   
+import os
 
 NVR_DATETIME_FORMAT = "%Y-%m-%d %H:%M:%S"
 NVR_TIME_FORMAT = "%H:%M:%S"
@@ -44,7 +46,8 @@ class File:
 
     @property
     def json(self):
-        return {"filename": self.filename_cleared, "type": self.type, "size": self.size, "b64": self.to_b64.replace("==", "")}
+        b64 = self.to_b64.replace("==", "")
+        return {"filename": self.filename_cleared, "type": self.type, "size": self.size, "b64": b64, "converted":File.converted(b64)}
 
     @staticmethod
     def from_b64(b64):
@@ -52,6 +55,10 @@ class File:
         print(data)
         return File(data, data.get("channel"), data.get("stream"))
 
+    @staticmethod
+    def converted(b64):
+        return os.path.exists(os.path.join(os.path.join(app_dir(), "transcode"), str(uuid_from_string(b64)) + ".h264.avi.mp4"))
+
     async def generate_first_bytes(self, client:DVRIPCam, version = 0):
         client.logger.debug("init request")
         #init request
diff --git a/frontend/ang_dvrip/src/app/app-routing.module.ts b/frontend/ang_dvrip/src/app/app-routing.module.ts
index 83389fa..6265816 100644
--- a/frontend/ang_dvrip/src/app/app-routing.module.ts
+++ b/frontend/ang_dvrip/src/app/app-routing.module.ts
@@ -2,14 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {MainComponent} from "./components/main/main.component";
 import {HistoryComponent} from "./components/history/history.component";
+import {AboutComponent} from "./components/about/about.component";
 
 const routes: Routes = [
   {path: "history/:recorderId/:channelId", component:HistoryComponent},
+  {path: "about/:recorderId/:channelId", component:AboutComponent},
   {path: "**", component: MainComponent}
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {useHash: true})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/frontend/ang_dvrip/src/app/app.component.html b/frontend/ang_dvrip/src/app/app.component.html
index 5dfa331..d31a0e3 100644
--- a/frontend/ang_dvrip/src/app/app.component.html
+++ b/frontend/ang_dvrip/src/app/app.component.html
@@ -1,20 +1,30 @@
 <ng-container>
-  <mat-drawer-container  style="height: 100%">
-    <mat-drawer  mode="side" opened>
-      <h1>DVRIP Клиент</h1>
+  <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">
+          <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-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>
-      <mat-list>
-        <mat-list-item *ngFor="let c of availble_channels"><a [routerLink]="['history', selected_recorder, availble_channels.indexOf(c)]">{{c}}</a></mat-list-item>
-      </mat-list>
-      <h5 *ngIf="availble_recorders.length==0">Нет доступных DVR</h5>
-    </mat-drawer>
-    <mat-drawer-content>
-      <router-outlet></router-outlet>
-    </mat-drawer-content>
-  </mat-drawer-container>
+      <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]="['history', selected_recorder, selected_channel]">История обнаружений</button>
+    <span class="spacer"></span>
+    <button mat-button>Бибки</button>
+  </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 2082e35..387f1c2 100644
--- a/frontend/ang_dvrip/src/app/app.component.ts
+++ b/frontend/ang_dvrip/src/app/app.component.ts
@@ -11,6 +11,8 @@ export class AppComponent implements OnInit {
   availble_recorders:string[] = [];
   selected_recorder:number = 0;
   availble_channels:string[] = [];
+  selected_channel:number = 0;
+  loading:boolean = true
 
   ngOnInit(): void {
     this.getRecorders();
@@ -21,17 +23,22 @@ export class AppComponent implements OnInit {
   }
 
   getRecorders() {
+    this.loading = true;
     this.http.get("/api", {}).subscribe((a:any) => {
       this.availble_recorders = a["data"];
       if (this.availble_recorders.length > 0) {
         this.getChannels(0);
+      } else {
+        this.loading = false;
       }
     })
   }
 
   getChannels(recorder:number) {
+    this.loading = true;
     this.http.get(`/api/channels/${recorder}`).subscribe((a:any) => {
       this.availble_channels = a["data"];
+      this.loading = false;
     })
   }
 }
diff --git a/frontend/ang_dvrip/src/app/app.module.ts b/frontend/ang_dvrip/src/app/app.module.ts
index f69bf1d..123547d 100644
--- a/frontend/ang_dvrip/src/app/app.module.ts
+++ b/frontend/ang_dvrip/src/app/app.module.ts
@@ -23,17 +23,20 @@ import { HistoryComponent } from './components/history/history.component';
 import {MatTableModule} from "@angular/material/table";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatNativeDateModule} from "@angular/material/core";
-import { TranscodeModalComponent } from './components/transcode-modal/transcode-modal.component';
+import { TranscodeModalComponent } from './modals/transcode-modal/transcode-modal.component';
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatIconModule} from "@angular/material/icon";
+import { AboutComponent } from './components/about/about.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MainComponent,
     HistoryComponent,
-    TranscodeModalComponent
+    TranscodeModalComponent,
+    AboutComponent
   ],
   imports: [
     BrowserModule,
@@ -48,7 +51,7 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
     MatButtonModule,
     MatFormFieldModule,
     MatNativeDateModule,
-    MatAutocompleteModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatDatepickerModule, MatRadioModule, MatInputModule, MatSelectModule, MatSlideToggleModule, MatSlideToggleModule, MatToolbarModule, MatListModule, MatTableModule, ReactiveFormsModule, MatDialogModule, FormsModule, MatProgressBarModule, MatProgressSpinnerModule
+    MatAutocompleteModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatDatepickerModule, MatRadioModule, MatInputModule, MatSelectModule, MatSlideToggleModule, MatSlideToggleModule, MatToolbarModule, MatListModule, MatTableModule, ReactiveFormsModule, MatDialogModule, FormsModule, MatProgressBarModule, MatProgressSpinnerModule, MatIconModule
   ],
   exports: [
     BrowserModule,
diff --git a/frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.css b/frontend/ang_dvrip/src/app/components/about/about.component.css
similarity index 100%
rename from frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.css
rename to frontend/ang_dvrip/src/app/components/about/about.component.css
diff --git a/frontend/ang_dvrip/src/app/components/about/about.component.html b/frontend/ang_dvrip/src/app/components/about/about.component.html
new file mode 100644
index 0000000..6094aa9
--- /dev/null
+++ b/frontend/ang_dvrip/src/app/components/about/about.component.html
@@ -0,0 +1 @@
+<p>about works!</p>
diff --git a/frontend/ang_dvrip/src/app/components/about/about.component.spec.ts b/frontend/ang_dvrip/src/app/components/about/about.component.spec.ts
new file mode 100644
index 0000000..7e3a2ca
--- /dev/null
+++ b/frontend/ang_dvrip/src/app/components/about/about.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutComponent } from './about.component';
+
+describe('AboutComponent', () => {
+  let component: AboutComponent;
+  let fixture: ComponentFixture<AboutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AboutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AboutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/ang_dvrip/src/app/components/about/about.component.ts b/frontend/ang_dvrip/src/app/components/about/about.component.ts
new file mode 100644
index 0000000..e4ae6d9
--- /dev/null
+++ b/frontend/ang_dvrip/src/app/components/about/about.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/ang_dvrip/src/app/components/history/history.component.css b/frontend/ang_dvrip/src/app/components/history/history.component.css
index e69de29..8ce872c 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.css
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.css
@@ -0,0 +1,11 @@
+.converted {
+  color: green;
+}
+
+.not-converted {
+  color: red;
+}
+
+.raw {
+  color: black;
+}
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 f98af52..538c690 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.html
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.html
@@ -1,28 +1,27 @@
-<mat-toolbar>
-  <span>История обнаружений</span>
-</mat-toolbar>
 <ng-container>
-  <mat-form-field>
-    <mat-label>Выбранный поток</mat-label>
-    <mat-select [(value)]="selected_stream" (valueChange)="getHistory()">
-      <mat-option [value]="0">Основной</mat-option>
-      <mat-option [value]="1">Дополнительный</mat-option>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Choose a date</mat-label>
-    <input matInput [matDatepicker]="picker_start" (dateChange)="setDate($event, 'start')">
-    <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker_start"></mat-datepicker-toggle>
-    <mat-datepicker #picker_start></mat-datepicker>
-  </mat-form-field>
-  <mat-form-field>
-    <mat-label>Choose a date</mat-label>
-    <input matInput [matDatepicker]="picker_end"  (dateChange)="setDate($event, 'end')">
-    <mat-hint>MM/DD/YYYY</mat-hint>
-    <mat-datepicker-toggle matIconSuffix [for]="picker_end"></mat-datepicker-toggle>
-    <mat-datepicker #picker_end></mat-datepicker>
-  </mat-form-field>
+  <div>
+    <mat-form-field>
+      <mat-label>Выбранный поток</mat-label>
+      <mat-select [(value)]="selected_stream" (valueChange)="getHistory()">
+        <mat-option [value]="0">Основной</mat-option>
+        <mat-option [value]="1">Дополнительный</mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Choose a date</mat-label>
+      <input matInput [matDatepicker]="picker_start" (dateChange)="setDate($event, 'start')">
+      <mat-hint>MM/DD/YYYY</mat-hint>
+      <mat-datepicker-toggle matIconSuffix [for]="picker_start"></mat-datepicker-toggle>
+      <mat-datepicker #picker_start></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+      <mat-label>Choose a date</mat-label>
+      <input matInput [matDatepicker]="picker_end"  (dateChange)="setDate($event, 'end')">
+      <mat-hint>MM/DD/YYYY</mat-hint>
+      <mat-datepicker-toggle matIconSuffix [for]="picker_end"></mat-datepicker-toggle>
+      <mat-datepicker #picker_end></mat-datepicker>
+    </mat-form-field>
+  </div>
 </ng-container>
 <ng-container *ngIf="dataSource.data.length>0">
   <table mat-table [dataSource]="dataSource" style="width: 100%">
@@ -39,9 +38,9 @@
     <ng-container matColumnDef="actions">
       <th mat-header-cell *matHeaderCellDef> Действия </th>
       <td mat-cell *matCellDef="let element">
-        <a [href]="'api/file/'+recorder_index+'?b64='+element.b64">Скачать h26Xx</a>
-        <a style="padding-left: 4px" (click)="openTransCodeDialog(element.b64)">Перекодировать</a>
-      </td>
+        <a style="padding-left: 4px; cursor: pointer" [class]="element.converted?'converted':'not-converted'" (click)="openTransCodeDialog(element.b64)"><mat-icon>{{element.converted?'cloud_done':'cloud_download'}}</mat-icon></a><!--<mat-icon>cloud_done</mat-icon>-->
+        <a [href]="'api/file/'+recorder_index+'?b64='+element.b64" [class]="'raw'"><mat-icon>attachment</mat-icon></a>
+        </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
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 4d992ad..32f555e 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.ts
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.ts
@@ -5,13 +5,14 @@ import {MatTableDataSource} from "@angular/material/table";
 import {FormControl, FormGroup} from "@angular/forms";
 import {MatDatepickerInputEvent} from "@angular/material/datepicker";
 import {MatDialog} from "@angular/material/dialog";
-import {TranscodeModalComponent} from "../transcode-modal/transcode-modal.component";
+import {TranscodeModalComponent} from "../../modals/transcode-modal/transcode-modal.component";
 import {BaseUtils} from "../../utils/BaseUtils";
 
 export interface DVRFILE {
   filename:string,
   size:number,
-  b64:string
+  b64:string,
+  converted:boolean
 }
 
 @Component({
diff --git a/frontend/ang_dvrip/src/app/components/main/main.component.html b/frontend/ang_dvrip/src/app/components/main/main.component.html
index b292cac..d9fdb51 100644
--- a/frontend/ang_dvrip/src/app/components/main/main.component.html
+++ b/frontend/ang_dvrip/src/app/components/main/main.component.html
@@ -1,4 +1,2 @@
-<mat-toolbar>
-  <span>Wow it's shit must work "maybe"</span>
-</mat-toolbar>
-<p>main works!</p>
+<p style="text-align: center">Добро пожаловать в альтернативный клиент для просмотра истории с рекодреров для видео записи</p>
+<mat-icon>home</mat-icon>
diff --git a/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.css b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.html b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html
similarity index 87%
rename from frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.html
rename to frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html
index 1620ac8..c538931 100644
--- a/frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.html
+++ b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html
@@ -13,10 +13,9 @@
     <video controls>
       <source [src]="'api/transcode/download?b64=' + status.b64" type="video/mp4"/>
     </video>
-    <br>
-    <a [href]="'api/transcode/download?b64=' + status.b64">Скачать MP4 ({{baseUtils.getFancySize(status.outSize)}})</a>
   </ng-container>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button (click)="close()">Закрыть</button>
+  <button mat-button *ngIf="!loading && status.done" (click)="getMP4(status.b64)">Скачать MP4 ({{baseUtils.getFancySize(status.outSize)}})</button>
 </mat-dialog-actions>
diff --git a/frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.spec.ts b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.spec.ts
similarity index 100%
rename from frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.spec.ts
rename to frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.spec.ts
diff --git a/frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.ts b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.ts
similarity index 94%
rename from frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.ts
rename to frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.ts
index 0711616..ac1ef94 100644
--- a/frontend/ang_dvrip/src/app/components/transcode-modal/transcode-modal.component.ts
+++ b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.ts
@@ -46,4 +46,8 @@ export class TranscodeModalComponent implements OnInit {
       })
   }
 
+  getMP4(b64:string) {
+    window.open(`api/transcode/download?b64=${b64}`)
+  }
+
 }
diff --git a/frontend/ang_dvrip/src/index.html b/frontend/ang_dvrip/src/index.html
index df53fb3..9b0a22b 100644
--- a/frontend/ang_dvrip/src/index.html
+++ b/frontend/ang_dvrip/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body style="height: 100%">
+<body style="height: 100%; margin: 0 0">
   <app-root></app-root>
 </body>
 </html>
diff --git a/frontend/ang_dvrip/src/styles.css b/frontend/ang_dvrip/src/styles.css
index 2f77f15..0dc9c75 100644
--- a/frontend/ang_dvrip/src/styles.css
+++ b/frontend/ang_dvrip/src/styles.css
@@ -1 +1,28 @@
 @import "@angular/material/prebuilt-themes/deeppurple-amber.css";
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}
diff --git a/nginx.conf b/nginx.conf
index f6e96a5..54df594 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -9,7 +9,7 @@ server {
     server_name _;
 
     location / {
-            try_files $uri $uri/ =404;
+            try_files $uri /index.html;
     }
 
     location ^~ /api {