diff --git a/README.md b/README.md
index 65473b7a..bfedde51 100644
--- a/README.md
+++ b/README.md
@@ -147,6 +147,9 @@ export default {
       // called when the user scrolls message list to top
       // leverage pagination for loading another page of messages
     },
+    downloadMessage(message) {
+      console.log('Try to download the file')
+    },
     handleOnType () {
       console.log('Emit typing event')
     },
@@ -195,6 +198,7 @@ For more detailed examples see the demo folder.
 |-----|--------|---------------|
 | onType | undefined | Fires when user types on the message input |
 | edit | `message` | Fires after user edited message |
+| download | `message` | Download file only if document type is file |
 
 #### Slots
 
@@ -284,8 +288,47 @@ Message objects are rendered differently depending on their type. Currently, onl
     }
   }
 }
+
+{
+  author: 'me',
+  type: 'file',
+  id: 1, // or text '1'
+  isEdited: false,
+  data: {
+    file: {
+      id: 1,
+      mime: 'image/png',
+      name: 'test.png',
+      size: 588147,
+      meta: '06-16-2019 12:45'
+    }
+  }
+}
+
 ```
+##### File type messages
+
+Custom file icons based on mime:
+
+WORD file <img src="https://user-images.githubusercontent.com/16837548/94787922-36f5e700-03d3-11eb-8e95-f468938d24c2.png">
+
+PDF file <img src="https://user-images.githubusercontent.com/16837548/94788088-66a4ef00-03d3-11eb-9907-b380a6bb1907.png">
+
+EXCEL file <img src="https://user-images.githubusercontent.com/16837548/94788119-70c6ed80-03d3-11eb-9031-ce46131e0b06.png">
+
+POWER POINT file <img src="https://user-images.githubusercontent.com/16837548/94788155-7cb2af80-03d3-11eb-80dc-bb77a4a0d429.png">
+
+ZIP file <img src="https://user-images.githubusercontent.com/16837548/94788179-850aea80-03d3-11eb-8b5a-8945e2232c2c.png">
+
+JPG/JPEG file <img src="https://user-images.githubusercontent.com/16837548/94788216-918f4300-03d3-11eb-9778-a148828fba8d.png">
+
+PNG file <img src="https://user-images.githubusercontent.com/16837548/94788250-9b18ab00-03d3-11eb-91be-4af48dea21eb.png">
+
+SVG file <img src="https://user-images.githubusercontent.com/16837548/94788290-a53aa980-03d3-11eb-9c37-936f1c5ac53f.png">
+
+CSV file <img src="https://user-images.githubusercontent.com/16837548/94788314-acfa4e00-03d3-11eb-8e69-835a699b7ea0.png">
 
+For file types other than the above, the default icon is displayed ... <img src="https://user-images.githubusercontent.com/16837548/94788364-be435a80-03d3-11eb-870a-f0defe70ef21.png">
 
 #### Quick replies
 
diff --git a/demo/src/App.vue b/demo/src/App.vue
index f2ec2300..b9a66708 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -4,7 +4,7 @@
       :chosenColor="chosenColor"
       :colors="colors"
     />
-    <beautiful-chat 
+    <beautiful-chat
       :alwaysScrollToBottom="alwaysScrollToBottom"
       :close="closeChat"
       :colors="colors"
@@ -29,13 +29,14 @@
       @onType="handleOnType"
       @edit="editMessage"
       @remove="removeMessage"
+      @download="downloadMessage"
     >
       <template v-slot:text-message-toolbox="scopedProps">
         <button v-if="!scopedProps.me && scopedProps.message.type==='text'" @click.prevent="like(scopedProps.message.id)">
           👍
         </button>
       </template>
-      <template v-slot:text-message-body="scopedProps"> 
+      <template v-slot:text-message-body="scopedProps">
         <p class="sc-message--text-content" v-html="scopedProps.messageText"></p>
         <p v-if="scopedProps.message.data.meta" class='sc-message--meta' :style="{color: scopedProps.messageColors.color}">{{scopedProps.message.data.meta}}</p>
         <p v-if="scopedProps.message.isEdited || scopedProps.message.liked" class='sc-message--edited'>
@@ -204,6 +205,7 @@ export default {
       m.type = 'system';
       m.data.text = 'This message has been removed';
     },
+    downloadMessage(message){},
     like(id){
       const m = this.messageList.findIndex(m => m.id === id);
       var msg = this.messageList[m];
diff --git a/demo/src/messageHistory.js b/demo/src/messageHistory.js
index cbdabb16..f59ad508 100644
--- a/demo/src/messageHistory.js
+++ b/demo/src/messageHistory.js
@@ -21,5 +21,15 @@ export default [
   { type: 'text', author: `me`, id: 18, data: { text: `Do you read me...`, meta: '✓✓ Read' } },
   { type: 'text', author: `me`, id: 19, data: { text: `...or not?`, meta: '✓ Delivered' } },
   { type: 'system', id: 20, data: { text: 'User changed security key', meta: '04-08-2018 15:57' } },
-  { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."] }
+  { type: 'text', author: `support`, id: 21, data: { text: `What about suggestions?` }, suggestions: ["Looks good!", "It's OK.", "Uhh.. Do I really have to say something?", "This suggestion is way too long for css purpose. Let's make it long... Longer, and more and more.. Never ending."] },
+  { type: 'file', author: `me`, id: 22, data: { meta: '12-11-2020 15:57', file: {id:"122134", mime:"application/vnd.openxmlformats-officedocument.wordprocessingml.document", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.docx"} } },
+  { type: 'file', author: `me`, id: 23, data: { meta: '12-11-2020 15:57', file: {id:"122135", mime:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.xlsx"} } },
+  { type: 'file', author: `me`, id: 24, data: { meta: '12-11-2020 15:57', file: {id:"122136", mime:"application/vnd.openxmlformats-officedocument.presentationml.presentation", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.pptx"} } },
+  { type: 'file', author: `me`, id: 25, data: { meta: '12-11-2020 15:57', file: {id:"122137", mime:"application/zip", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.zip"} } },
+  { type: 'file', author: `me`, id: 26, data: { meta: '12-11-2020 15:57', file: {id:"122138", mime:"image/jpeg", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.jpg"} } },
+  { type: 'file', author: `me`, id: 27, data: { meta: '12-11-2020 15:57', file: {id:"122139", mime:"image/svg+xml", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.svg"} } },
+  { type: 'file', author: `me`, id: 28, data: { meta: '12-11-2020 15:57', file: {id:"1221310", mime:"text/csv", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.csv"} } },
+  { type: 'file', author: `me`, id: 29, data: { meta: '12-11-2020 15:57', file: {id:"1221311", mime:"image/png", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.png"} } },
+  { type: 'file', author: `me`, id: 30, data: { meta: '12-11-2020 15:57', file: {id:"1221312", mime:"application/pdf", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.pdf"} } },
+  { type: 'file', author: `me`, id: 30, data: { meta: '12-11-2020 15:57', file: {id:"1221312", mime:"text/html", size:"108604", name: "ScreenShot 2020-10-21 à 21.38.52.html"} } }
 ]
diff --git a/package.json b/package.json
index 71b352f9..cc56344e 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "kind-of": "6.0.3",
     "minimist": "1.2.3",
     "msgdown": "^1.0.2",
+    "pretty-bytes": "^5.4.1",
+    "smart-truncate": "^1.0.1",
     "v-tooltip": "^2.0.1"
   },
   "devDependencies": {
diff --git a/src/ChatWindow.vue b/src/ChatWindow.vue
index 72e92f43..91adf570 100644
--- a/src/ChatWindow.vue
+++ b/src/ChatWindow.vue
@@ -26,6 +26,7 @@
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
diff --git a/src/Launcher.vue b/src/Launcher.vue
index 89411a4d..d1df6772 100644
--- a/src/Launcher.vue
+++ b/src/Launcher.vue
@@ -36,6 +36,7 @@
       @onType="$emit('onType')"
       @edit="$emit('edit', $event)"
       @remove="$emit('remove', $event)"
+      @download="$emit('download', $event)"
     >
       <template v-slot:header>
         <slot name="header"> </slot>
diff --git a/src/Message.vue b/src/Message.vue
index 652452d5..906887a4 100644
--- a/src/Message.vue
+++ b/src/Message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="message.id" class="sc-message">
+  <div class="sc-message" :id="message.type === 'file' ? message.data.file.id : message.id">
     <div
       class="sc-message--content"
       :class="{
@@ -48,17 +48,27 @@
       </TextMessage>
       <EmojiMessage v-else-if="message.type === 'emoji'" :data="message.data" />
       <FileMessage
-        v-else-if="message.type === 'file'"
+        v-else-if="message.type === 'file' && message.data.file.mime"
         :data="message.data"
         :message-colors="messageColors"
+        @download="$emit('download')"
+      />
+      <ImageMessage
+        v-else-if="message.type === 'file' && message.data.file.url"
+        :data="message.data"
+        :message-colors="messageColors"
+      />
+      <TypingMessage
+        v-else-if="message.type === 'typing'"
+        :message-colors="messageColors"
       />
-      <TypingMessage v-else-if="message.type === 'typing'" :message-colors="messageColors" />
       <SystemMessage
         v-else-if="message.type === 'system'"
         :data="message.data"
         :message-colors="messageColors"
       >
-        <slot name="system-message-body" :message="message.data"> </slot>
+        <slot name="system-message-body" :message="message.data">
+        </slot>
       </SystemMessage>
     </div>
   </div>
@@ -67,6 +77,7 @@
 <script>
 import TextMessage from './messages/TextMessage.vue'
 import FileMessage from './messages/FileMessage.vue'
+import ImageMessage from './messages/ImageMessage.vue'
 import EmojiMessage from './messages/EmojiMessage.vue'
 import TypingMessage from './messages/TypingMessage.vue'
 import SystemMessage from './messages/SystemMessage.vue'
@@ -183,7 +194,7 @@ export default {
 }
 
 .sc-message--meta {
-  font-size: xx-small;
+  font-size: x-small;
   margin-bottom: 0px;
   color: white;
   text-align: center;
diff --git a/src/MessageList.vue b/src/MessageList.vue
index 586a0285..b3dae87c 100644
--- a/src/MessageList.vue
+++ b/src/MessageList.vue
@@ -17,6 +17,7 @@
       :show-confirmation-deletion="showConfirmationDeletion"
       :confirmation-deletion-message="confirmationDeletionMessage"
       @remove="$emit('remove', message)"
+      @download="$emit('download', message)"
     >
       <template v-slot:user-avatar="scopedProps">
         <slot name="user-avatar" :user="scopedProps.user" :message="scopedProps.message"> </slot>
diff --git a/src/assets/download-icon.svg.vue b/src/assets/download-icon.svg.vue
new file mode 100644
index 00000000..9726d67d
--- /dev/null
+++ b/src/assets/download-icon.svg.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="30" height="30">
+    <path fill="none" d="M31 28l-6 6-6-6"/>
+    <path fill="none" d="M31 28l-6 6-6-6m6-8v14"/>
+    <path fill="none" d="M43 24.3V24a10.03 10.03 0 00-13.4-9.4C27.7 11.3 24.1 9 20 9 13.9 9 9 13.9 9 20v.2c-4.6.9-8 5-8 9.8 0 5.5 4.5 10 10 10h30c4.4 0 8-3.6 8-8 0-3.7-2.6-6.9-6-7.7z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_msword.svg.vue b/src/assets/mimes/application_msword.svg.vue
new file mode 100644
index 00000000..a2be6083
--- /dev/null
+++ b/src/assets/mimes/application_msword.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M168 384a8 8 0 00-8 8v64a8 8 0 008 8 40 40 0 000-80zm8 62.63v-45.26a24 24 0 010 45.26zM256 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40-14.36-40-32-40zm0 64c-8.67 0-16-11-16-24s7.33-24 16-24 16 11 16 24-7.33 24-16 24zM336 400a10.7 10.7 0 014.59 1.06 8 8 0 106.82-14.48A26.58 26.58 0 00336 384c-17.64 0-32 17.94-32 40s14.36 40 32 40a26.6 26.6 0 0011.41-2.58 8 8 0 00-6.82-14.48A10.71 10.71 0 01336 448c-8.67 0-16-11-16-24s7.33-24 16-24zM192 168a8 8 0 008 8h176a8 8 0 000-16H200a8 8 0 00-8 8zM136 208h144a8 8 0 000-16H136a8 8 0 000 16zM376 224H248a8 8 0 000 16h128a8 8 0 000-16zM136 272h184a8 8 0 000-16H136a8 8 0 000 16zM136 176h32a8 8 0 000-16h-32a8 8 0 000 16zM376 192h-64a8 8 0 000 16h64a8 8 0 000-16zM136 240h80a8 8 0 000-16h-80a8 8 0 000 16zM376 256h-24a8 8 0 000 16h24a8 8 0 000-16zM136 304h48a8 8 0 000-16h-48a8 8 0 000 16zM136 144h80a8 8 0 000-16h-80a8 8 0 000 16zM296 288h-80a8 8 0 000 16h80a8 8 0 000-16zM376 288h-48a8 8 0 000 16h48a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_pdf.svg.vue b/src/assets/mimes/application_pdf.svg.vue
new file mode 100644
index 00000000..77a3eb61
--- /dev/null
+++ b/src/assets/mimes/application_pdf.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M336 384h-32a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a8 8 0 000-16h-8v-16h24a8 8 0 000-16zM192 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM240 384a8 8 0 00-8 8v64a8 8 0 008 8 40 40 0 000-80zm8 62.63v-45.26a24 24 0 010 45.26zM248 176h128a8 8 0 000-16H248a8 8 0 000 16zM248 208h32a8 8 0 000-16h-32a8 8 0 000 16zM248 240h128a8 8 0 000-16H248a8 8 0 000 16zM136 272h184a8 8 0 000-16H136a8 8 0 000 16zM376 192h-64a8 8 0 000 16h64a8 8 0 000-16zM376 256h-24a8 8 0 000 16h24a8 8 0 000-16zM136 304h48a8 8 0 000-16h-48a8 8 0 000 16zM296 288h-80a8 8 0 000 16h80a8 8 0 000-16zM376 288h-48a8 8 0 000 16h48a8 8 0 000-16zM136 240h80a8 8 0 008-8v-96a8 8 0 00-8-8h-80a8 8 0 00-8 8v96a8 8 0 008 8zm8-96h64v80h-64zM248 144h64a8 8 0 000-16h-64a8 8 0 000 16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_vnd.ms-excel.svg.vue b/src/assets/mimes/application_vnd.ms-excel.svg.vue
new file mode 100644
index 00000000..cdffc2d1
--- /dev/null
+++ b/src/assets/mimes/application_vnd.ms-excel.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M272 448h-24v-56a8 8 0 00-16 0v64a8 8 0 008 8h32a8 8 0 000-16zM211.58 384.85a8 8 0 00-10.74 3.57l-8.84 17.7-8.85-17.7a8 8 0 00-14.3 7.16l14.2 28.42-14.2 28.42a8 8 0 1014.3 7.16l8.85-17.7 8.85 17.7a8 8 0 1014.3-7.16L200.96 424l14.2-28.42a8 8 0 00-3.57-10.73zM320 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zM136 304h240a8 8 0 008-8V152a8 8 0 00-8-8H136a8 8 0 00-8 8v144a8 8 0 008 8zm8-48h64v32h-64zm144-48v32h-64v-32zm-64-16v-32h64v32zm80 16h64v32h-64zm-16 48v32h-64v-32zm-80-16h-64v-32h64zm96 48v-32h64v32zm64-96h-64v-32h64zm-160-32v32h-64v-32z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
new file mode 100644
index 00000000..ca27c3ba
--- /dev/null
+++ b/src/assets/mimes/application_vnd.ms-powerpoint.svg.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M184 224a80 80 0 1080-80 8 8 0 00-8 8v64h-64a8 8 0 00-8 8zm80 8a8 8 0 008-8v-63.5a64 64 0 11-71.5 71.5z"/>
+    <path d="M160 200h72a8 8 0 008-8v-72a8 8 0 00-8-8 80.1 80.1 0 00-80 80 8 8 0 008 8zm64-71.5V184h-55.5a64.14 64.14 0 0155.5-55.5z"/>
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M256 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM192 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM336 384h-32a8 8 0 000 16h8v56a8 8 0 0016 0v-56h8a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/application_zip.svg.vue b/src/assets/mimes/application_zip.svg.vue
new file mode 100644
index 00000000..37087c0a
--- /dev/null
+++ b/src/assets/mimes/application_zip.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h56v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16h-16a8 8 0 000 16h16v16a8 8 0 00-7.76 6.06l-5.9 23.62a24 24 0 1043.33 0l-5.9-23.62A8 8 0 00192 240v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16v-16h16a8 8 0 000-16h-16V96h16a8 8 0 000-16h-16V64h16a8 8 0 000-16h-16V32h144v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm72 248a8 8 0 01-16 0 7.9 7.9 0 01.94-3.76 8 8 0 00.7-1.82l4.6-18.42h3.51l4.6 18.42a8 8 0 00.7 1.82A7.9 7.9 0 01192 280zm200 200H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M272 400a8 8 0 000-16h-32a8 8 0 000 16h8v48h-8a8 8 0 000 16h32a8 8 0 000-16h-8v-48zm48-16h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zm-112 32h-19.06l26.21-52.42A8 8 0 00208 384h-32a8 8 0 000 16h19.06l-26.21 52.42A8 8 0 00176 464h32a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/default_file.svg.vue b/src/assets/mimes/default_file.svg.vue
new file mode 100644
index 00000000..d6734546
--- /dev/null
+++ b/src/assets/mimes/default_file.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg height="512" width="512" xmlns="http://www.w3.org/2000/svg">
+    <path d="M104 496h304a40.05 40.05 0 0040-40V120a8 8 0 00-2.34-5.66l-96-96A8 8 0 00344 16H104a40.05 40.05 0 00-40 40v400a40.05 40.05 0 0040 40zM352 43.31L420.69 112H376a24.03 24.03 0 01-24-24zM80 56a24.03 24.03 0 0124-24h232v56a40.05 40.05 0 0040 40h56v328a24.03 24.03 0 01-24 24H104a24.03 24.03 0 01-24-24z"/>
+    <path d="M192 168a8 8 0 008 8h192a8 8 0 000-16H200a8 8 0 00-8 8zM120 224h160a8 8 0 000-16H120a8 8 0 000 16zM392 256H248a8 8 0 000 16h144a8 8 0 000-16zM120 320h192a8 8 0 000-16H120a8 8 0 000 16zM120 176h48a8 8 0 000-16h-48a8 8 0 000 16zM392 208h-80a8 8 0 000 16h80a8 8 0 000-16zM120 272h96a8 8 0 000-16h-96a8 8 0 000 16zM392 304h-48a8 8 0 000 16h48a8 8 0 000-16zM328 400h-80a8 8 0 000 16h80a8 8 0 000-16zM120 416h96a8 8 0 000-16h-96a8 8 0 000 16zM120 368h64a8 8 0 000-16h-64a8 8 0 000 16zM120 128h96a8 8 0 000-16h-96a8 8 0 000 16zM304 360a8 8 0 00-8-8h-80a8 8 0 000 16h80a8 8 0 008-8zM392 352h-64a8 8 0 000 16h64a8 8 0 000-16zM392 400h-32a8 8 0 000 16h32a8 8 0 000-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/image_jpeg.svg.vue b/src/assets/mimes/image_jpeg.svg.vue
new file mode 100644
index 00000000..6a20999c
--- /dev/null
+++ b/src/assets/mimes/image_jpeg.svg.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M248 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM200 384a8 8 0 00-8 8v48a8 8 0 01-16 0 8 8 0 00-16 0 24 24 0 0048 0v-48a8 8 0 00-8-8zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM152 304h208a8 8 0 008-8V136a8 8 0 00-8-8H152a8 8 0 00-8 8v160a8 8 0 008 8zm16.64-16l47.49-59.35 33.72 40.47a8 8 0 008.68 2.47l43.7-14.57L338.37 288zM352 144v134.6l-42.8-36.67a8 8 0 00-7.73-1.52l-42.82 14.27-36.5-43.8A8 8 0 00216 208h-.08a8 8 0 00-6.17 3L160 273.2V144z"/>
+    <path d="M288 224a24 24 0 10-24-24 24.03 24.03 0 0024 24zm0-32a8 8 0 11-8 8 8 8 0 018-8z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/image_png.svg.vue b/src/assets/mimes/image_png.svg.vue
new file mode 100644
index 00000000..25bf598a
--- /dev/null
+++ b/src/assets/mimes/image_png.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M445.66 114.34l-96-96A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M184 384h-16a8 8 0 00-8 8v64a8 8 0 0016 0v-24h8a24 24 0 000-48zm0 32h-8v-16h8a8 8 0 010 16zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM264 384a8 8 0 00-8 8v30.11l-16.84-33.69A8 8 0 00224 392v64a8 8 0 0016 0v-30.11l16.84 33.69A8 8 0 00272 456v-64a8 8 0 00-8-8zM176 304h32a8 8 0 008-8v-24h16v24a8 8 0 008 8h32a8 8 0 008-8v-24h16v24a8 8 0 008 8h32a8 8 0 008-8v-32a8 8 0 00-8-8h-24v-16h24a8 8 0 008-8v-32a8 8 0 00-8-8h-24v-16h24a8 8 0 008-8v-32a8 8 0 00-8-8h-32a8 8 0 00-8 8v24h-16v-24a8 8 0 00-8-8h-32a8 8 0 00-8 8v24h-16v-24a8 8 0 00-8-8h-32a8 8 0 00-8 8v32a8 8 0 008 8h24v16h-24a8 8 0 00-8 8v32a8 8 0 008 8h24v16h-24a8 8 0 00-8 8v32a8 8 0 008 8zm56-96v16h-16v-16zm64 16h-16v-16h16zm-32 0h-16v-16h16zm-16 16h16v16h-16zm16-48h-16v-16h16zm-48 48h16v16h-16zm48 48h-16v-16h16zm16-48h16v16h-16zm48 48h-16v-16h16zm0-64h-16v-16h16zm-16-80h16v16h-16zm-16 48h-16v-16h16zm-48-48h16v16h-16zm-16 48h-16v-16h16zm-48-48h16v16h-16zm0 64h16v16h-16zm0 64h16v16h-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/image_svg.svg.vue b/src/assets/mimes/image_svg.svg.vue
new file mode 100644
index 00000000..de16e856
--- /dev/null
+++ b/src/assets/mimes/image_svg.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M184 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zM265.94 384.24a8 8 0 00-9.7 5.82L248 423.01l-8.24-32.95a8 8 0 10-15.52 3.88l16 64a8 8 0 0015.52 0l16-64a8 8 0 00-5.82-9.7zM344 416h-16a8 8 0 000 16h7.05c-2.25 9.22-8.24 16-15.05 16-8.67 0-16-11-16-24s7.33-24 16-24a10.71 10.71 0 014.59 1.06 8 8 0 006.82-14.48A26.6 26.6 0 00320 384c-17.64 0-32 17.94-32 40s14.36 40 32 40 32-17.94 32-40a8 8 0 00-8-8zM176 304h32a8 8 0 008-8v-8h80v8a8 8 0 008 8h32a8 8 0 008-8v-32a8 8 0 00-8-8h-8v-80h8a8 8 0 008-8v-32a8 8 0 00-8-8h-32a8 8 0 00-8 8v8h-80v-8a8 8 0 00-8-8h-32a8 8 0 00-8 8v32a8 8 0 008 8h8v80h-8a8 8 0 00-8 8v32a8 8 0 008 8zm152-16h-16v-16h16zm-16-144h16v16h-16zm-128 0h16v16h-16zm16 32h8a8 8 0 008-8v-8h80v8a8 8 0 008 8h8v80h-8a8 8 0 00-8 8v8h-80v-8a8 8 0 00-8-8h-8zm-16 96h16v16h-16z"/>
+  </svg>
+</template>
diff --git a/src/assets/mimes/text_csv.svg.vue b/src/assets/mimes/text_csv.svg.vue
new file mode 100644
index 00000000..4ee7f0e4
--- /dev/null
+++ b/src/assets/mimes/text_csv.svg.vue
@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512">
+    <path d="M349.66 18.34A8 8 0 00344 16H120a56.06 56.06 0 00-56 56v368a56.06 56.06 0 0056 56h272a56.06 56.06 0 0056-56V120a8 8 0 00-2.34-5.66zM352 43.31L420.69 112H392a40.05 40.05 0 01-40-40zM120 32h216v40a56.06 56.06 0 0056 56h40v224H80V72a40.05 40.05 0 0140-40zm272 448H120a40.05 40.05 0 01-40-40v-72h352v72a40.05 40.05 0 01-40 40z"/>
+    <path d="M256 400h16a8 8 0 000-16h-16a24 24 0 000 48 8 8 0 010 16h-16a8 8 0 000 16h16a24 24 0 000-48 8 8 0 010-16zm81.94-15.76a8 8 0 00-9.7 5.82L320 423.02l-8.24-32.96a8 8 0 10-15.52 3.88l16 64a8 8 0 0015.52 0l16-64a8 8 0 00-5.82-9.7zM200 400a10.68 10.68 0 014.59 1.06 8 8 0 006.82-14.48A26.59 26.59 0 00200 384c-17.64 0-32 17.94-32 40s14.36 40 32 40a26.59 26.59 0 0011.41-2.58 8 8 0 00-6.82-14.48A10.68 10.68 0 01200 448c-8.67 0-16-10.99-16-24s7.33-24 16-24zm-40-144a8 8 0 000 16h24v24a8 8 0 0016 0v-24h48v24a8 8 0 0016 0v-24h48v24a8 8 0 0016 0v-24h24a8 8 0 000-16h-24v-32h24a8 8 0 000-16h-24v-32h24a8 8 0 000-16h-24v-24a8 8 0 00-16 0v24h-48v-24a8 8 0 00-16 0v24h-48v-24a8 8 0 00-16 0v24h-24a8 8 0 000 16h24v32h-24a8 8 0 000 16h24v32zm152 0h-48v-32h48zm0-80v32h-48v-32zm-112 0h48v32h-48zm0 48h48v32h-48z"/>
+  </svg>
+</template>
diff --git a/src/messages/FileMessage.vue b/src/messages/FileMessage.vue
index 5bdf6a29..5b2f51b9 100644
--- a/src/messages/FileMessage.vue
+++ b/src/messages/FileMessage.vue
@@ -1,22 +1,55 @@
 <template>
-  <div class="sc-message--file" :style="messageColors">
-    <div class="sc-message--file-icon">
-      <img :src="data.file.url" class="sc-image" />
+  <div class="sc-message--file" :style="messageColors" :id="data.file.id">
+    <div class="sc-message--file-icon" :style="messageColors">
+      <component :is="`Application${mimeToIcon[data.file.mime] || 'Default'}`" />
     </div>
-    <div class="sc-message--file-name" :style="messageColors">
-      <a :href="data.file.url ? data.file.url : '#'" target="_blank">{{ data.file.name || '' }}</a>
+    <div class="sc-message--file-content">
+      <div class="sc-message--file-name" :style="messageColors">
+        {{data.file && smartTruncate(data.file.name || '', 20)}}
+      </div>
+      <div class="sc-message--file-download-icon" :style="messageColors" @click="$emit('download')">
+        <DownloadIcon />
+      </div>
+      <div class="sc-message--file-size" :style="messageColors">
+        {{data.file && prettyBytes(data.file.size || 0)}}
+      </div>
     </div>
-    <div class="sc-message--file-text" :style="messageColors">
-      {{ data.text }}
-      <p v-if="data.meta" class="sc-message--meta" :style="messageColors">
-        {{ data.meta }}
-      </p>
+    <div class="sc-message--file-meta" :style="messageColors">
+      <p v-if="data.meta" class='sc-message--meta' :style="messageColors">{{data.meta}}</p>
     </div>
   </div>
 </template>
 
 <script>
+import prettyBytes from 'pretty-bytes'
+import smartTruncate from 'smart-truncate'
+import ApplicationWord from '../assets/mimes/application_msword.svg.vue'
+import ApplicationPdf from '../assets/mimes/application_pdf.svg.vue'
+import ApplicationPng from '../assets/mimes/image_png.svg.vue'
+import ApplicationExcel from '../assets/mimes/application_vnd.ms-excel.svg.vue'
+import ApplicationPowerPoint from '../assets/mimes/application_vnd.ms-powerpoint.svg.vue'
+import ApplicationZip from '../assets/mimes/application_zip.svg.vue'
+import ApplicationDefault from '../assets/mimes/default_file.svg.vue'
+import ApplicationJpg from '../assets/mimes/image_jpeg.svg.vue'
+import ApplicationSvg from '../assets/mimes/image_svg.svg.vue'
+import ApplicationCsv from '../assets/mimes/text_csv.svg.vue'
+import DownloadIcon from '../assets/download-icon.svg.vue'
 export default {
+  data() {
+    return {
+      mimeToIcon: {
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PowerPoint',
+        'application/zip': 'Zip',
+        'image/jpeg': 'Jpg',
+        'image/svg+xml': 'Svg',
+        'text/csv': 'Csv',
+        'application/pdf': 'Pdf',
+        'image/png':'Png',
+      }
+    }
+  },
   props: {
     data: {
       type: Object,
@@ -25,7 +58,26 @@ export default {
     messageColors: {
       type: Object,
       required: true
-    }
+    },
+  },
+  methods:{
+    prettyBytes,
+    smartTruncate(str, len) {
+      return smartTruncate(str, len, {position: 10})
+    },
+  },
+  components:{
+    ApplicationWord,
+    ApplicationPdf,
+    ApplicationPng,
+    ApplicationExcel,
+    ApplicationPowerPoint,
+    ApplicationZip,
+    ApplicationDefault,
+    ApplicationJpg,
+    ApplicationSvg,
+    ApplicationCsv,
+    DownloadIcon
   }
 }
 </script>
@@ -40,25 +92,23 @@ export default {
   -webkit-font-smoothing: subpixel-antialiased;
 }
 
-.sc-message--content.sent .sc-message--file {
+.sc-message--content .sc-message--file {
   word-wrap: break-word;
+  padding: 5px;
+  width: 223px;
 }
 
-.sc-message--file-icon {
-  text-align: center;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 15px;
-  margin-bottom: 0px;
-}
+.sc-message--file-content {
+  font-size: small;
+  float: right;
 
-.sc-image {
-  max-width: 100%;
-  min-width: 100%;
+  .sc-message--file-download-icon {
+    float: right;
+    cursor: pointer;
+  }
 }
 
 .sc-message--file-text {
-  padding: 17px 20px;
   border-radius: 6px;
   font-weight: 300;
   font-size: 14px;
@@ -69,11 +119,9 @@ export default {
 
 .sc-message--file-name {
   color: white;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-top: 0;
-  font-size: x-small;
-  text-align: center;
+  margin-top: 7px;
+  text-align: left;
+  width: 148px;
 }
 
 .sc-message--file-name a {
@@ -94,7 +142,6 @@ export default {
 .sc-message--content.received .sc-message--file {
   color: #263238;
   background-color: #f4f7f9;
-  margin-right: 40px;
 }
 
 .sc-message--content.received .sc-message--file-name {
@@ -108,4 +155,24 @@ export default {
 .sc-message--content.received .sc-message--file a:hover {
   color: #0c0c0c;
 }
+
+.sc-message--file-icon {
+  float: left;
+}
+
+.sc-message--file-icon svg {
+  fill: #000000;
+  height: 60px;
+  width: 60px;
+}
+
+.sc-message--file-download-icon svg {
+  fill: #000000;
+  stroke: #000000;
+}
+
+.sc-message--content.sent svg {
+  fill: #ffffff;
+  stroke: #ffffff;
+}
 </style>
diff --git a/src/messages/ImageMessage.vue b/src/messages/ImageMessage.vue
new file mode 100644
index 00000000..56dbdc43
--- /dev/null
+++ b/src/messages/ImageMessage.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="sc-message--image" :style="messageColors">
+    <div class="sc-message--image-icon">
+      <img :src="data.file.url" class="sc-image">
+    </div>
+    <div class="sc-message--image-name" :style="messageColors">
+      <a :href="data.file.url ? data.file.url : '#'" target='_blank'>{{data.file.name || ''}}</a>
+    </div>
+    <div class="sc-message--image-text" :style="messageColors">{{data.text}}<p v-if="data.meta" class="sc-message--meta" :style="messageColors">{{data.meta}}</p></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      required: true
+    },
+    messageColors: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sc-message--image {
+  border-radius: 6px;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  /* white-space: pre-wrap; */
+  -webkit-font-smoothing: subpixel-antialiased
+}
+
+.sc-message--content.sent .sc-message--image {
+  word-wrap: break-word;
+}
+
+.sc-message--image-icon {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 15px;
+  margin-bottom: 0px;
+}
+
+.sc-image {
+  max-width: 100%;
+  min-width: 100%;
+}
+
+.sc-message--image-text {
+  padding: 17px 20px;
+  border-radius: 6px;
+  font-weight: 300;
+  font-size: 14px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  -webkit-font-smoothing: subpixel-antialiased
+}
+
+.sc-message--image-name {
+  color: white;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 0;
+  font-size: x-small;
+  text-align: center;
+}
+
+.sc-message--image-name a {
+  text-decoration: none;
+  color: #ece7e7;
+}
+
+.sc-message--image-name a:hover {
+  color: white;
+}
+
+.sc-message--content.sent .sc-message--image-text {
+  color: white;
+  background-color: #4e8cff;
+  word-wrap: break-word;
+}
+
+.sc-message--content.received .sc-message--image {
+  color: #263238;
+  background-color: #f4f7f9;
+  margin-right: 40px;
+}
+
+.sc-message--content.received .sc-message--image-name {
+  color: #000;
+}
+
+.sc-message--content.received .sc-message--image a {
+  color: rgba(43, 40, 40, 0.7);
+}
+
+.sc-message--content.received .sc-message--image a:hover {
+  color: #0c0c0c;
+}
+</style>
diff --git a/yarn.lock b/yarn.lock
index 02a5425c..c91a9132 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7063,6 +7063,11 @@ prettier@^2.0.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
   integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
 
+pretty-bytes@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
+
 pretty-error@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -7898,6 +7903,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+smart-truncate@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/smart-truncate/-/smart-truncate-1.0.1.tgz#a2173d7abc724a5a30e1b63af88616228b14a475"
+  integrity sha512-f+kSLMDWKSCpYhwOZM+Da4d8klk5nY4gH57HOEOaaotsZEsTIm/51/9vKDNE26WjU72eBM1zEYdQl6uDwvZfLg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"