diff --git a/client/package.json b/client/package.json
index ce2b4ffb8..4ba41e54c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -51,6 +51,7 @@
         "ng-pick-datetime": "^7.0.0",
         "ngx-file-drop": "^6.0.0",
         "ngx-mat-select-search": "^1.7.2",
+        "ng2-pdf-viewer": "^5.2.3",
         "ngx-papaparse": "^3.0.2",
         "pdfmake": "^0.1.53",
         "po2json": "^1.0.0-alpha",
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
index 0aeb50f15..c0b7bb4fe 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.html
@@ -1,5 +1,13 @@
 <div *ngIf="data">
-    <p>{{ data.data.path }}</p>
-    <p>{{ data.data.type }}</p>
-    <p>{{ data.data.media_url_prefix }}</p>
+    <div *ngIf="data.data.type == 'image/png'">
+        <img [src]="url" alt=""/>
+    </div>
+    <div *ngIf="data.data.type == 'application/pdf'">
+          <pdf-viewer [src]="url"
+              [render-text]="true"
+              style="display: block;"></pdf-viewer>
+    </div>
+    <div *ngIf="data.data.type == 'image/jpeg'">
+        <img [src]="url" alt=""/>
+    </div>
 </div>
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
index cab715e8b..e62a48122 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.component.ts
@@ -1,7 +1,9 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {computed} from 'mobx-angular';
 
-import { BaseSlideComponent } from 'app/slides/base-slide-component';
-import { MediafileSlideData } from './mediafile-slide-data';
+
+import {BaseSlideComponent} from 'app/slides/base-slide-component';
+import {MediafileSlideData} from './mediafile-slide-data';
 
 @Component({
     selector: 'os-mediafile-slide',
@@ -12,4 +14,8 @@ export class MediafileSlideComponent extends BaseSlideComponent<MediafileSlideDa
     public constructor() {
         super();
     }
+
+    @computed get url() {
+        return `${this.data.data.media_url_prefix}/${this.data.data.path}`;
+    }
 }
diff --git a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
index 39935f7f1..3ba88ebb3 100644
--- a/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
+++ b/client/src/app/slides/mediafiles/mediafile/mediafile-slide.module.ts
@@ -2,6 +2,12 @@ import { NgModule } from '@angular/core';
 
 import { makeSlideModule } from 'app/slides/base-slide-module';
 import { MediafileSlideComponent } from './mediafile-slide.component';
+import { PdfViewerModule } from 'ng2-pdf-viewer';
 
-@NgModule(makeSlideModule(MediafileSlideComponent))
+
+let moduleConfiguration = makeSlideModule(MediafileSlideComponent);
+
+moduleConfiguration.imports.push(PdfViewerModule)
+
+@NgModule(moduleConfiguration)
 export class MediafileSlideModule {}