diff --git a/backend/config_parser.py b/backend/config_parser.py
index 87abb9f..64f9330 100644
--- a/backend/config_parser.py
+++ b/backend/config_parser.py
@@ -8,6 +8,8 @@ from nvr_types import File
 import platform
 import aiofiles
 
+from subprocess import DEVNULL
+
 from global_funcs import *   
 
 class NeedNVR(Exception):
@@ -234,7 +236,7 @@ class TranscodeTools:
         await proc.communicate()
 
         if delete_source_file:
-            os.remove(source_file)
+            self.deleteFile(source_file)
         if os.path.exists(source_file + ".avi"):
             return source_file + ".avi"
         else:
@@ -247,7 +249,7 @@ class TranscodeTools:
         await proc.communicate()
 
         if delete_source_file:
-            os.remove(source_file)
+            self.deleteFile(source_file)
         if os.path.exists(source_file + ".mp4"):
             return source_file + ".mp4"
         else:
@@ -256,18 +258,21 @@ class TranscodeTools:
     async def anytoimage(self, source_file, out_file, delete_source_file = False):
         exec_string = ["-y", "-i", source_file, "-ss", "1", "-vframes", "1", out_file]
         self.logger.debug(f"execute {exec_string}")
-        proc = await asyncio.create_subprocess_exec("ffmpeg", *exec_string)
+        proc = await asyncio.create_subprocess_exec("ffmpeg", *exec_string, stderr=DEVNULL)
         await proc.communicate()
 
         if delete_source_file:
-            os.remove(source_file)
+            self.deleteFile(source_file)
         if os.path.exists(out_file):
             return out_file
         else:
             raise Exception(f"{out_file} not be created")
 
     def deleteFile(self, source_file):
-        os.remove(source_file)
+        try:
+            os.remove(source_file)
+        except:
+            pass
 
     async def processing_preview(self, file:File, nvr: NVR, ext = "webp"):
         raw_file = file.previewPath(self.transcode_directory)
diff --git a/backend/nvr_types.py b/backend/nvr_types.py
index ec7297e..57a1618 100644
--- a/backend/nvr_types.py
+++ b/backend/nvr_types.py
@@ -47,7 +47,14 @@ class File:
     @property
     def json(self):
         b64 = self.to_b64.replace("==", "")
-        return {"filename": self.filename_cleared, "type": self.type, "size": self.size, "b64": b64, "converted":self.converted}
+        return {
+            "filename": self.filename_cleared,
+            "type": self.type,
+            "size": self.size,
+            "b64": b64,
+            "converted":self.converted,
+            "date":self.begin.strftime(NVR_DATE_FORMAT)
+        }
 
     @staticmethod
     def from_b64(b64):
diff --git a/frontend/ang_dvrip/src/app/app.module.ts b/frontend/ang_dvrip/src/app/app.module.ts
index 1e0ff40..17db593 100644
--- a/frontend/ang_dvrip/src/app/app.module.ts
+++ b/frontend/ang_dvrip/src/app/app.module.ts
@@ -30,6 +30,7 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
 import {MatIconModule} from "@angular/material/icon";
 import { AboutComponent } from './components/about/about.component';
 import { StreamComponent } from './components/stream/stream.component';
+import {MatCardModule} from "@angular/material/card";
 
 @NgModule({
   declarations: [
@@ -40,21 +41,21 @@ import { StreamComponent } from './components/stream/stream.component';
     AboutComponent,
     StreamComponent
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    MatSidenavModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    HttpClientModule,
-    BrowserAnimationsModule,
-    MatDatepickerModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatNativeDateModule,
-    MatAutocompleteModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatDatepickerModule, MatRadioModule, MatInputModule, MatSelectModule, MatSlideToggleModule, MatSlideToggleModule, MatToolbarModule, MatListModule, MatTableModule, ReactiveFormsModule, MatDialogModule, FormsModule, MatProgressBarModule, MatProgressSpinnerModule, MatIconModule
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        MatSidenavModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatSelectModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        MatDatepickerModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatNativeDateModule,
+        MatAutocompleteModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatDatepickerModule, MatRadioModule, MatInputModule, MatSelectModule, MatSlideToggleModule, MatSlideToggleModule, MatToolbarModule, MatListModule, MatTableModule, ReactiveFormsModule, MatDialogModule, FormsModule, MatProgressBarModule, MatProgressSpinnerModule, MatIconModule, MatCardModule
+    ],
   exports: [
     BrowserModule,
     AppRoutingModule,
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 e4ba4dd..90437a7 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.css
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.css
@@ -13,3 +13,9 @@
 .processing {
   color: coral;
 }
+
+.responsive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 24px;
+}
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 72fa77a..78c7a7a 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.html
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.html
@@ -9,41 +9,41 @@
     </mat-form-field>
     <mat-form-field>
       <mat-label>Choose a date</mat-label>
-      <input matInput [matDatepicker]="picker_start" (dateChange)="setDate($event, 'start')">
+      <input matInput [matDatepicker]="picker_start" [ngModel]="start_date" (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')">
+      <input matInput [matDatepicker]="picker_end" [ngModel]="end_date" (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%">
-    <ng-container matColumnDef="filename">
-      <th mat-header-cell *matHeaderCellDef> Имя файла / Время обнаружения </th>
-      <td mat-cell *matCellDef="let element"> {{element.filename}} </td>
-    </ng-container>
 
-    <ng-container matColumnDef="size">
-      <th mat-header-cell *matHeaderCellDef> Размер </th>
-      <td mat-cell *matCellDef="let element"> {{baseUtils.getFancySize(element.size)}} </td>
-    </ng-container>
 
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> Действия </th>
-      <td mat-cell *matCellDef="let element">
-        <a style="padding-left: 4px; cursor: pointer" [class]="element.processing != null?'processing':element.converted?'converted':'not-converted'" (click)="openTransCodeDialog(element)"><mat-icon>{{element.converted?'cloud_done':'cloud_download'}}</mat-icon></a><!--<mat-icon>cloud_done</mat-icon>-->
-        <a [href]="'api/dvrip/file/'+recorder_index+'?b64='+element.b64" [class]="'raw'"><mat-icon>attachment</mat-icon></a>
-        </td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-</ng-container>
+<div style="padding-left: 1%; padding-right: 1%; text-align: center" class="responsive-grid">
+  <mat-card style="max-width: 300px" *ngFor="let element of dataSource">
+    <mat-card-header>
+      <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="Превью">
+    <mat-card-content>
+    </mat-card-content>
+    <mat-card-actions>
+      <button
+        mat-button
+        style="padding-left: 4px; cursor: pointer"
+        [class]="element.processing != null?'processing':element.converted?'converted':'not-converted'"
+        (click)="openTransCodeDialog(element)"
+      >
+        <mat-icon>{{element.processing != null?'cloud_upload':element.converted?'cloud_done':'cloud_download'}}</mat-icon> {{element.processing != null?'Обработка':element.converted?'Просмотреть':'Загрузить'}}
+      </button>
+      <!--<a [href]="'api/dvrip/file/'+recorder_index+'?b64='+element.b64" [class]="'raw'"><mat-icon>attachment</mat-icon></a>-->
+    </mat-card-actions>
+  </mat-card>
+</div>
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 21bf1e5..85744e2 100644
--- a/frontend/ang_dvrip/src/app/components/history/history.component.ts
+++ b/frontend/ang_dvrip/src/app/components/history/history.component.ts
@@ -1,8 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {HttpClient} from "@angular/common/http";
-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 "../../modals/transcode-modal/transcode-modal.component";
@@ -18,27 +16,29 @@ export class HistoryComponent implements OnInit {
 
   selected_stream: number = 1;
   recorder_index: number = 0;
-  dataSource:MatTableDataSource<DVRFILE> = new MatTableDataSource<DVRFILE>();
-  displayedColumns: string[] = ['filename', 'size', 'actions'];
+  dataSource: DVRFILE[] = [];
   start_date:Date|null = null;
   end_date:Date|null = null;
   baseUtils = BaseUtils;
 
   constructor(private route:ActivatedRoute,
               private http: HttpClient,
-              private dialog:MatDialog) { }
+              private dialog:MatDialog,
+              private router:Router) { }
 
   ngOnInit(): void {
     this.recorder_index = Number.parseInt(<string>this.route.snapshot.paramMap.get('recorderId'));
+    this.start_date = this.baseUtils.parseDate(this.route.snapshot.queryParamMap.get("start"));
+    this.end_date = this.baseUtils.parseDate(this.route.snapshot.queryParamMap.get("end"));
     this.getHistory();
   }
 
   getHistory() {
     const params = this.route.snapshot.paramMap;
-    this.dataSource = new MatTableDataSource<DVRFILE>();
+    this.dataSource = [];
     this.http.get(`api/dvrip/history/${params.get('recorderId')}/${params.get('channelId')}/${this.selected_stream}?start_date=${this.baseUtils.prepareDate(this.start_date, true)}&end_date=${this.baseUtils.prepareDate(this.end_date, false)}`)
       .subscribe((a:any) => {
-        this.dataSource = new MatTableDataSource<DVRFILE>(a['data']);
+        this.dataSource = a['data'];
       })
   }
 
@@ -54,12 +54,13 @@ export class HistoryComponent implements OnInit {
       }
     }
     console.log(this.start_date, this.end_date);
+    this.router.navigate([], {queryParams: {start:this.start_date?.toLocaleDateString(), end:this.end_date?.toLocaleDateString()}, queryParamsHandling:"merge"})
     this.getHistory();
   }
 
   openTransCodeDialog(dvrfile:DVRFILE) {
     const dialog = this.dialog.open(TranscodeModalComponent, {data:{b64:dvrfile.b64, recorder_index:this.route.snapshot.paramMap.get('recorderId')}});
-    dialog.afterOpened().subscribe(() => dvrfile.processing = true);
+    dialog.afterOpened().subscribe(() => dvrfile.converted?'':dvrfile.processing = true);
     dialog.afterClosed().subscribe((res:boolean) => {
       dvrfile.converted = res;
       if (res) {
diff --git a/frontend/ang_dvrip/src/app/entities/DVRFILE.ts b/frontend/ang_dvrip/src/app/entities/DVRFILE.ts
index 21ea5d8..096a2d9 100644
--- a/frontend/ang_dvrip/src/app/entities/DVRFILE.ts
+++ b/frontend/ang_dvrip/src/app/entities/DVRFILE.ts
@@ -3,5 +3,6 @@ export default interface DVRFILE {
   size:number,
   b64:string,
   converted:boolean,
-  processing:boolean|null
+  processing:boolean|null,
+  date:string
 }
diff --git a/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html
index cbe743b..d8134c2 100644
--- a/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html
+++ b/frontend/ang_dvrip/src/app/modals/transcode-modal/transcode-modal.component.html
@@ -1,16 +1,22 @@
 <h2 mat-dialog-title>{{status.done?"Файл успешно преобразован":"Подождите, перекодировка файла"}}</h2>
 <mat-dialog-content>
-  <mat-spinner *ngIf="loading"></mat-spinner>
+  <mat-spinner *ngIf="loading" style="margin:0 auto;"></mat-spinner>
   <ng-container *ngIf="!loading && !status.done">
-    <p>Прогресс загрузки h264x {{status.h264}} %</p>
-    <mat-progress-bar [mode]="'determinate'" [value]="status.h264"></mat-progress-bar>
-    <p>Прогресс перекодировки avi {{status.avi}} %</p>
-    <mat-progress-bar [mode]="'determinate'" [value]="status.avi"></mat-progress-bar>
-    <p>Прогресс перекодировки mp4 {{status.mp4}} %</p>
-    <mat-progress-bar [mode]="'determinate'" [value]="status.mp4"></mat-progress-bar>
+    <div *ngIf="status.h264 != 100">
+      <p>1) Прогресс загрузки h264x {{status.h264}} %</p>
+      <mat-progress-bar [mode]="'determinate'" [value]="status.h264"></mat-progress-bar>
+    </div>
+    <div *ngIf="status.avi != 100">
+      <p>2) Прогресс перекодировки avi {{status.avi}} %</p>
+      <mat-progress-bar [mode]="'determinate'" [value]="status.avi"></mat-progress-bar>
+    </div>
+    <div *ngIf="status.mp4 != 100">
+      <p>3) Прогресс перекодировки mp4 {{status.mp4}} %</p>
+      <mat-progress-bar [mode]="'determinate'" [value]="status.mp4"></mat-progress-bar>
+    </div>
   </ng-container>
   <ng-container *ngIf="!loading && status.done">
-    <video controls>
+    <video controls style="max-width: 100%">
       <source [src]="'api/dvrip/transcode/stream?b64=' + status.b64" type="video/mp4"/>
     </video>
   </ng-container>
@@ -18,5 +24,4 @@
 <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>
-  <a [href]="'api/dvrip/preview/0?b64=' + status.b64">Превью</a>
 </mat-dialog-actions>
diff --git a/frontend/ang_dvrip/src/app/utils/BaseUtils.ts b/frontend/ang_dvrip/src/app/utils/BaseUtils.ts
index f1affb3..fe86b25 100644
--- a/frontend/ang_dvrip/src/app/utils/BaseUtils.ts
+++ b/frontend/ang_dvrip/src/app/utils/BaseUtils.ts
@@ -15,4 +15,14 @@ export class BaseUtils {
     else
       return d.toISOString().split("T")[0] + " 23:59:59";
   }
+
+  static parseDate(date: any): any {
+    try {
+      const p: number[] = date.split(".").map((v: any) => Number(v))
+      return new Date(Date.UTC(p[2], p[1] - 1, p[0]));
+    } catch (e) {
+      console.log("cannot parse date", date)
+      return new Date();
+    }
+  }
 }