diff --git a/backend/config_parser.py b/backend/config_parser.py
index 225f270..1d634c6 100644
--- a/backend/config_parser.py
+++ b/backend/config_parser.py
@@ -178,6 +178,14 @@ class TranscodeTools:
     async def processing(self, status: TranscodeStatus, file:File, nvr: NVR, reCreate:bool = False):
         raw_file = os.path.join(self.transcode_directory, status.uuid + ".h264")
         
+        mp4_file = os.path.join(self.transcode_directory, status.uuid + ".h264.avi.mp4")
+        if os.path.exists(mp4_file) and os.path.getsize(mp4_file) != 0:
+            nvr.logout()
+            self.statuses[status.b64].outFile = mp4_file
+            self.statuses[status.b64].done = True
+            self.statuses[status.b64].outSize = os.path.getsize(mp4_file)
+            return
+
         if not os.path.exists(raw_file) or os.path.getsize(raw_file) != file.size:
             print("save raw file to", raw_file)
             async with aiofiles.open(raw_file, "wb") as raw:
diff --git a/backend/server.py b/backend/server.py
index 7139ec6..e1876b2 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -63,10 +63,9 @@ class Server:
             try:
                 nvr:NVR = self.config.getRecorder(recorder_index).nvr
                 await nvr.login()
-                async def image():
-                    async for b in await nvr.client.snapshot(channel):
-                        yield b
-                return StreamingResponse(image(), media_type="image/jpg")
+                data = await nvr.client.snapshot(channel)
+
+                return Response(content=bytes(data), media_type="image/jpg")
             except Exception as e:
                 traceback.print_exc()
                 response.status_code = 400
diff --git a/frontend/ang_dvrip/src/app/app.component.html b/frontend/ang_dvrip/src/app/app.component.html
index d31a0e3..9269d2a 100644
--- a/frontend/ang_dvrip/src/app/app.component.html
+++ b/frontend/ang_dvrip/src/app/app.component.html
@@ -5,7 +5,7 @@
     <span class="spacer"></span>
     <ng-container *ngIf="!loading">
       <mat-form-field *ngIf="availble_channels.length>0">
-        <mat-select [(value)]="selected_channel">
+        <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>
diff --git a/frontend/ang_dvrip/src/app/app.component.ts b/frontend/ang_dvrip/src/app/app.component.ts
index 387f1c2..b2a9d5e 100644
--- a/frontend/ang_dvrip/src/app/app.component.ts
+++ b/frontend/ang_dvrip/src/app/app.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {ApiService} from "./services/ApiService";
 import {HttpClient} from "@angular/common/http";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'app-root',
@@ -19,7 +20,8 @@ export class AppComponent implements OnInit {
   }
 
   constructor(private api:ApiService,
-              private http: HttpClient) {
+              private http: HttpClient,
+              private router:Router) {
   }
 
   getRecorders() {
@@ -41,4 +43,8 @@ export class AppComponent implements OnInit {
       this.loading = false;
     })
   }
+
+  goToRoot() {
+    this.router.navigate(["/"])
+  }
 }
diff --git a/frontend/ang_dvrip/src/app/components/about/about.component.html b/frontend/ang_dvrip/src/app/components/about/about.component.html
index 6094aa9..473e3de 100644
--- a/frontend/ang_dvrip/src/app/components/about/about.component.html
+++ b/frontend/ang_dvrip/src/app/components/about/about.component.html
@@ -1 +1 @@
-<p>about works!</p>
+<img style="width: 100%" [src]="'/api/snapshot/' + recorder_index + '/' + channel_index">
diff --git a/frontend/ang_dvrip/src/app/components/about/about.component.ts b/frontend/ang_dvrip/src/app/components/about/about.component.ts
index e4ae6d9..882530e 100644
--- a/frontend/ang_dvrip/src/app/components/about/about.component.ts
+++ b/frontend/ang_dvrip/src/app/components/about/about.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: 'app-about',
@@ -6,10 +7,14 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./about.component.css']
 })
 export class AboutComponent implements OnInit {
+  recorder_index: number = 0;
+  channel_index: number = 0;
 
-  constructor() { }
+  constructor(private route:ActivatedRoute) {}
 
   ngOnInit(): void {
+    this.recorder_index = Number.parseInt(<string>this.route.snapshot.paramMap.get('recorderId'));
+    this.channel_index = Number.parseInt(<string>this.route.snapshot.paramMap.get('channelId'));
   }
 
 }