diff --git a/src/models/DirectoryModel.js b/src/models/DirectoryModel.js
index 94f02a08e..30cd939b1 100644
--- a/src/models/DirectoryModel.js
+++ b/src/models/DirectoryModel.js
@@ -33,6 +33,9 @@ export function createDirectoryModel(origin, accessToken, appId) {
 
       const text = await result.text();
       return text;
+    },
+    getFileUrl(path) {
+      return `${origin}/api/v1/apps/${appId}/files/${path}?access_token=${accessToken}`;
     }
   };
 }
diff --git a/src/views/Viewer.vue b/src/views/Viewer.vue
index c1981e890..0a09e8beb 100644
--- a/src/views/Viewer.vue
+++ b/src/views/Viewer.vue
@@ -1,10 +1,13 @@
 <template>
-  <TextEditor ref="textEditor" @close="onClose"/>
+  <div class="viewer">
+    <TextEditor ref="textEditor" v-show="active === 'textEditor'" @close="onClose"/>
+    <ImageViewer ref="imageViewer" v-show="active === 'imageViewer'" @close="onClose"/>
+  </div>
 </template>
 
 <script>
 
-import { TextEditor } from 'pankow';
+import { TextEditor, ImageViewer } from 'pankow';
 import { createDirectoryModel } from '../models/DirectoryModel.js';
 import { sanitize } from 'pankow/utils';
 
@@ -13,12 +16,14 @@ const BASE_URL = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.
 export default {
   name: 'Viewer',
   components: {
+    ImageViewer,
     TextEditor
   },
   data() {
     return {
       appId: '',
-      item: null
+      item: null,
+      active: ''
     };
   },
   methods: {
@@ -43,11 +48,16 @@ export default {
       return;
     }
 
-    if (this.$refs.textEditor.canHandle(this.item)) {
+    if (this.$refs.imageViewer.canHandle(this.item)) {
+      this.$refs.imageViewer.open(this.item, this.directoryModel.getFileUrl(filePath));
+      this.active = 'imageViewer';
+    } else if (this.$refs.textEditor.canHandle(this.item)) {
       const content = await this.directoryModel.getFile(filePath);
       this.$refs.textEditor.open(this.item, content);
+      this.active = 'textEditor';
     } else {
-      console.log('text editor cant handle this');
+      console.warn('now editor or viewer for', this.item);
+      this.active = '';
     }
   }
 };
@@ -56,12 +66,11 @@ export default {
 
 <style scoped>
 
-.main-view {
+.viewer{
   flex-grow: 1;
   overflow: hidden;
   height: 100%;
   display: flex;
-  padding: 0 10px
 }
 
 .main-view-col {