diff --git a/backend/exposition/src/video/handler.rs b/backend/exposition/src/video/handler.rs
index 24c94d8..4416823 100644
--- a/backend/exposition/src/video/handler.rs
+++ b/backend/exposition/src/video/handler.rs
@@ -28,7 +28,6 @@ pub async fn get_video_stream(
 ) -> impl Responder {
     let video_result = video_service.get_video_stream(video_id.into_inner());
 
-
     match video_result {
         Ok(video) => {
             if let Some(tokio_video_file) = video.file.as_any().downcast_ref::<TokioVideoFile>() {
@@ -39,11 +38,12 @@ pub async fn get_video_stream(
                     Ok(file) => HttpResponse::Ok()
                         .content_type("application/octet-stream")
                         .streaming(async_stream::stream! {
-                        let mut stream = FramedRead::new(file, BytesCodec::new());
-                        while let Some(chunk) = stream.next().await {
-                            yield chunk.map(|bytes| bytes.freeze());
-                        }
-                    }),
+                            let file = tokio::fs::File::from_std(file);
+                            let mut stream = FramedRead::new(file, BytesCodec::new());
+                            while let Some(chunk) = stream.next().await {
+                                yield chunk.map(|bytes| bytes.freeze());
+                            }
+                        }),
                     Err(_) => HttpResponse::InternalServerError().body("Failed to clone video file")
                 }
 
diff --git a/frontend/src/app/app.css b/frontend/src/app/app.css
index e69de29..f150d82 100644
--- a/frontend/src/app/app.css
+++ b/frontend/src/app/app.css
@@ -0,0 +1,12 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.items-container {
+  display: flex;
+  flex-direction: column;
+  gap: .7em;
+  padding: 0 .5em;
+}
diff --git a/frontend/src/app/app.html b/frontend/src/app/app.html
index f99d6f9..4b72cef 100644
--- a/frontend/src/app/app.html
+++ b/frontend/src/app/app.html
@@ -4,15 +4,20 @@
 </div>
 <div class="items-container">
   @for (item of libraryItems.value(); track item.id) {
-    <div class="item">
-      [{{item.type[0]}}] ({{item.id.substring(0, 4)}}…) {{item.name}}
-    </div>
+    @if (item.type === 'VIDEO') {
+      <button type="button" (click)="activeVideo.set(item)">
+        [{{item.type[0]}}] ({{item.id.substring(0, 4)}}…) {{item.name}}
+      </button>
+    } @else {
+      <div class="item">
+        [{{item.type[0]}}] ({{item.id.substring(0, 4)}}…) {{item.name}}
+      </div>
+    }
   }
 </div>
 <div>
-  @if (firstVideo(); as firstVideo) {
-    <video controls>
-      <source src="/api/videos/{{firstVideo.id}}/stream" type="video/mp4">
+  @if (activeVideo(); as firstVideo) {
+    <video width="320" height="240" src="/api/videos/{{firstVideo.id}}/stream" controls>
       Your browser does not support the html video player.
     </video>
   }
diff --git a/frontend/src/app/app.ts b/frontend/src/app/app.ts
index e3952bc..302f842 100644
--- a/frontend/src/app/app.ts
+++ b/frontend/src/app/app.ts
@@ -28,10 +28,7 @@ export class App implements OnInit {
     loader: ({}) => firstValueFrom(this.#httpClient.get<LibraryItem[]>('/api/library'))
   });
 
-  firstVideo = computed(() => {
-    const libraryItems = this.libraryItems.value() ?? [];
-    return libraryItems.length ? libraryItems[0] : null
-  });
+  activeVideo = signal<LibraryItem | null>(null);
 
   ngOnInit(): void {
     this.loadLibrary();