diff --git a/background.html b/background.html
index d53057fe0..114ef2859 100644
--- a/background.html
+++ b/background.html
@@ -151,6 +151,10 @@
         <img src='{{ source }}' class='preview' />
         <a class='x close' alt='remove attachment' href='#'></a>
   </script>
+  <script type='text/x-tmpl-mustache' id='file-view'>
+    <span class='icon'></span>
+    <span class='fileName' alt='{{ fileName }}' title='{{ altText }}'>{{ fileName }}</a>
+  </script>
   <script type='text/x-tmpl-mustache' id='hasRetry'>
     {{ messageNotSent }}
     <span href='#' class='retry'>{{ resend }}</span>
diff --git a/images/file.svg b/images/file.svg
new file mode 100644
index 000000000..dedeef231
--- /dev/null
+++ b/images/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M12 4C9.79 4 8.02 5.79 8.02 8L8 40c0 2.21 1.77 4 3.98 4H36c2.21 0 4-1.79 4-4V16L28 4H12zm14 14V7l11 11H26z"/></svg>
\ No newline at end of file
diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index f6f6600ef..7b18905b9 100644
--- a/js/views/attachment_view.js
+++ b/js/views/attachment_view.js
@@ -4,16 +4,15 @@
 (function () {
   'use strict';
 
-  var FileView = Backbone.View.extend({
-      tagName: 'a',
-      initialize: function(dataUrl) {
-          this.dataUrl = dataUrl;
-          this.$el.text(i18n('unsupportedAttachment'));
-      },
-      render: function() {
-        this.$el.attr('href', this.dataUrl);
-        this.trigger('update');
-        return this;
+  var FileView = Whisper.View.extend({
+      tagName: 'div',
+      className: 'fileView',
+      templateName: 'file-view',
+      render_attributes: function() {
+        return {
+            fileName : this.model.fileName,
+            altText  : i18n('unsupportedAttachment')
+        };
       }
   });
 
@@ -58,6 +57,12 @@
   var AudioView = MediaView.extend({ tagName: 'audio' });
   var VideoView = MediaView.extend({ tagName: 'video' });
 
+  // Blacklist common file types known to be unsupported in Chrome
+  var UnsupportedFileTypes = [
+    'audio/aiff',
+    'video/quicktime'
+  ];
+
   Whisper.AttachmentView = Backbone.View.extend({
     tagName: 'span',
     className: 'attachment',
@@ -76,9 +81,6 @@
     },
     onclick: function(e) {
         switch (this.contentType) {
-            case 'audio':
-            case 'video':
-                return;
             case 'image':
                 var view = new Whisper.LightboxView({ model: this });
                 view.render();
@@ -86,6 +88,10 @@
                 view.$el.trigger('show');
                 break;
 
+            case 'video':
+                if (this.view instanceof MediaView) {
+                    return;
+                }
             default:
                 this.saveFile();
         }
@@ -126,18 +132,39 @@
         var View;
         switch(this.contentType) {
             case 'image': View = ImageView; break;
-            case 'audio': View = AudioView; break;
             case 'video': View = VideoView; break;
-            default     : View = FileView; break;
+            case 'audio': View = AudioView; break;
         }
+
+        if (!View || _.contains(UnsupportedFileTypes, this.model.contentType)) {
+            return this.renderFileView();
+        }
+
         if (!this.objectUrl) {
             this.objectUrl = window.URL.createObjectURL(this.blob);
         }
-        var view = new View(this.objectUrl, this.model.contentType);
-        view.$el.appendTo(this.$el);
-        view.on('update', this.trigger.bind(this, 'update'));
-        view.render();
+        this.view = new View(this.objectUrl, this.model.contentType);
+        this.view.$el.appendTo(this.$el);
+        this.listenTo(this.view, 'update', this.update);
+        this.view.render();
+        this.timeout = setTimeout(this.onTimeout.bind(this), 3000);
         return this;
+    },
+    onTimeout: function() {
+        // Image or media element failed to load. Fall back to FileView.
+        this.stopListening(this.view);
+        this.renderFileView();
+    },
+    renderFileView: function() {
+        this.view = new FileView({model: {fileName: this.suggestedName()}});
+        this.view.$el.appendTo(this.$el.empty());
+        this.view.render();
+        this.update();
+        return this;
+    },
+    update: function() {
+        clearTimeout(this.timeout);
+        this.trigger('update');
     }
   });
 
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 5e87890a4..76cc28a25 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -465,6 +465,39 @@ li.entry .error-icon-container {
       cursor: pointer;
     }
 
+    .fileView {
+      position: relative;
+      padding: 5px;
+      padding-right: 10px;
+      background-color: #fafafa;
+      border: 1px solid $grey_l2;
+      border-radius: $border-radius;
+      cursor: pointer;
+      color: $grey_d;
+
+      .icon, .fileName {
+        opacity: 0.75;
+      }
+
+      &:hover {
+        .icon, .fileName {
+          opacity: 1.0;
+        }
+      }
+
+      .icon {
+        display: inline-block;
+        vertical-align: middle;
+        &:before {
+          content: '';
+          display: inline-block;
+          width: $button-height;
+          height: $button-height;
+          @include color-svg('/images/file.svg', black);
+        }
+      }
+    }
+
   }
 
   .outgoing .avatar {
diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index 4024520d9..36f38beb4 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -6,7 +6,7 @@
 
     .content {
       margin: 0;
-      padding: 0 50px;
+      padding: 0 60px;
       max-width: 100%;
       height: 100%;
       box-shadow: none;
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
index 4982b0a16..783a3a03b 100644
--- a/stylesheets/android-dark.scss
+++ b/stylesheets/android-dark.scss
@@ -83,7 +83,7 @@ $text-dark: #CCCCCC;
     display: inline-block;
     @include color-svg('/images/double-check.svg', white);
   }
-  .paperclip:before {
+  .file-input .paperclip:before {
     content: '';
     display: inline-block;
     width: $button-height;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index a4f5e61ab..7b8067718 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -551,7 +551,7 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   background-color: rgba(0, 0, 0, 0.8); }
   .lightbox.modal .content {
     margin: 0;
-    padding: 0 50px;
+    padding: 0 60px;
     max-width: 100%;
     height: 100%;
     box-shadow: none;
@@ -1313,6 +1313,37 @@ li.entry .error-icon-container {
   .message-container .attachments img,
   .message-list .attachments img {
     cursor: pointer; }
+  .message-container .attachments .fileView,
+  .message-list .attachments .fileView {
+    position: relative;
+    padding: 5px;
+    padding-right: 10px;
+    background-color: #fafafa;
+    border: 1px solid #d9d9d9;
+    border-radius: 5px;
+    cursor: pointer;
+    color: #454545; }
+    .message-container .attachments .fileView .icon, .message-container .attachments .fileView .fileName,
+    .message-list .attachments .fileView .icon,
+    .message-list .attachments .fileView .fileName {
+      opacity: 0.75; }
+    .message-container .attachments .fileView:hover .icon, .message-container .attachments .fileView:hover .fileName,
+    .message-list .attachments .fileView:hover .icon,
+    .message-list .attachments .fileView:hover .fileName {
+      opacity: 1.0; }
+    .message-container .attachments .fileView .icon,
+    .message-list .attachments .fileView .icon {
+      display: inline-block;
+      vertical-align: middle; }
+      .message-container .attachments .fileView .icon:before,
+      .message-list .attachments .fileView .icon:before {
+        content: '';
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        -webkit-mask: url("/images/file.svg") no-repeat center;
+        -webkit-mask-size: 100%;
+        background-color: black; }
   .message-container .outgoing .avatar,
   .message-list .outgoing .avatar {
     display: none; }
@@ -1820,7 +1851,7 @@ li.entry .error-icon-container {
     -webkit-mask: url("/images/double-check.svg") no-repeat center;
     -webkit-mask-size: 100%;
     background-color: white; }
-  .android-dark .paperclip:before {
+  .android-dark .file-input .paperclip:before {
     content: '';
     display: inline-block;
     width: 24px;