diff --git a/lib/watcher.js b/lib/watcher.js
index 3e8f3ef..308bd6d 100644
--- a/lib/watcher.js
+++ b/lib/watcher.js
@@ -104,7 +104,7 @@ class Watcher
             const mimeType = mime.lookup(relativePath)
             const file = {}
 
-            file.path     = relativePath
+            file.path = relativePath
             file.canRead = true
 
             // Test mime type
diff --git a/site/src/components/file/script.js b/site/src/components/file/script.js
index 96b419b..6346ad0 100644
--- a/site/src/components/file/script.js
+++ b/site/src/components/file/script.js
@@ -16,6 +16,16 @@ export default
         downloadUrl()
         {
             return `${this.$store.state.url}/${this.$store.state.projects.current.slug}/files/${this.content.path.full}`
+        },
+
+        isImage()
+        {
+            return ['jpg', 'jpeg', 'png', 'tiff', 'gif', 'webp'].indexOf(this.content.extension) !== -1
+        },
+
+        isCode()
+        {
+            return this.content.versions.length > 0
         }
     },
 
diff --git a/site/src/components/file/template.html b/site/src/components/file/template.html
index ae320ec..a8dae9c 100644
--- a/site/src/components/file/template.html
+++ b/site/src/components/file/template.html
@@ -1,10 +1,17 @@
-<div class="file" :class="[versionsActive ? 'version-active' : '']">
+<div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
     <header>
-        <a href="#" @click.prevent="onDifferencesClick">Differences <span v-if="differencesActive">(on)</span></a>
-        <a href="#" @click.prevent="onVersionsClick">Versions <span v-if="versionsActive">(on)</span></a>
+        <a href="#" @click.prevent="onDifferencesClick" v-if="isCode">Differences <span v-if="differencesActive">(on)</span></a>
+        <a href="#" @click.prevent="onVersionsClick" v-if="isCode">Versions <span v-if="versionsActive">(on)</span></a>
         <a :href="downloadUrl" download>Download</a>
-        {{ content.path.directory }} {{ content.name }}
+        {{ content.path.directory }}/{{ content.name }}
     </header>
-    <versions :file="content" :content="content.versions" v-if="versionsActive"></versions>
-    <viewer :differences-active="differencesActive"></viewer>
+    <versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
+    <viewer :differences-active="differencesActive" v-if="isCode"></viewer>
+    <div class="preview" v-if="isImage">
+    	<img :src="downloadUrl">
+    </div>
+    <div class="cant-read" v-if="!isCode && !isImage">
+    	<br>Sorry, I can't read this file.
+    	<br>But you can <a :href="downloadUrl" download>download it</a>
+    </div>
 </div>
\ No newline at end of file
diff --git a/test/demo-folder/video.mp4 b/test/demo-folder/video.mp4
new file mode 100644
index 0000000..ed139d6
Binary files /dev/null and b/test/demo-folder/video.mp4 differ