diff --git a/src/components/PreviewPanel.vue b/src/components/PreviewPanel.vue
index 98e0a9ebf..e8d3abd85 100644
--- a/src/components/PreviewPanel.vue
+++ b/src/components/PreviewPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="preview-panel">
-    <img :src="item.icon" :alt="item.name"/>
+    <img :src="item.previewUrl || item.icon" :alt="item.name" :class="{'shadow': item.previewUrl }"/>
     <p>{{ item.name }}</p>
   </div>
 </template>
@@ -19,21 +19,26 @@ export default {
 <style scoped>
 
 .preview-panel {
-  min-width: 260px;
-  width: 20%;
   padding: 0 30px;
   display: flex;
   flex-direction: column;
 }
 
 .preview-panel > img {
-  width: 90%;
+  min-width: 90%;
   max-width: 256px;
+  margin: auto;
+}
+
+.shadow {
+  box-shadow: 0 2px 5px rgba(0,0,0,.1);
 }
 
 .preview-panel > p {
   text-align: center;
   font-size: 24px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/models/DirectoryModel.js b/src/models/DirectoryModel.js
index b3a0bb756..94f02a08e 100644
--- a/src/models/DirectoryModel.js
+++ b/src/models/DirectoryModel.js
@@ -12,6 +12,13 @@ export function createDirectoryModel(origin, accessToken, appId) {
         return [];
       }
 
+      // if we have an image, attach previewUrl
+      result.body.entries.forEach(item => {
+        if (item.mimeType.indexOf('image/') === 0) {
+          item.previewUrl = `${origin}/api/v1/apps/${appId}/files/${encodeURIComponent(path + '/' + item.fileName)}?access_token=${accessToken}`
+        }
+      });
+
       return result.body.entries;
     },
     async rename(oldPath, newPath) {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a1949aa13..1f361bea5 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -196,6 +196,7 @@ export default {
           modified: new Date(i.mtime),
           type: i.isDirectory ? 'directory' : 'file',
           mimeType: i.mimeType,
+          previewUrl: i.previewUrl || null,
           icon: `/mime-types/${i.mimeType === 'inode/symlink' ? 'none' : i.mimeType.split('/').join('-')}.svg`
         };
       });