diff --git a/images/default-avatar.jpg b/images/default-avatar.jpg
deleted file mode 100644
index 56de3503..00000000
Binary files a/images/default-avatar.jpg and /dev/null differ
diff --git a/images/default.png b/images/default.png
index 08bc283d..cdf0bb9f 100644
Binary files a/images/default.png and b/images/default.png differ
diff --git a/index.html b/index.html
index 7dc21274..be3872b2 100644
--- a/index.html
+++ b/index.html
@@ -68,7 +68,7 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='contact'>
-            <img class='avatar' src='{{ contact_avatar }}'>
+            <div class='avatar' style='background-image: url({{ contact_avatar }});'></div>
             <div class='contact-details'>
                 <h3>
                 {{ contact_name }}
diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js
index f4aa0fb1..8e81964d 100644
--- a/js/views/conversation_list_item_view.js
+++ b/js/views/conversation_list_item_view.js
@@ -34,6 +34,7 @@ var Whisper = Whisper || {};
       this.$el.html(
         Mustache.render(this.template, {
           contact_name: this.model.get('name'),
+          contact_avatar: this.model.get('image'),
           last_message: this.model.get('lastMessage'),
           last_message_timestamp: this.formatTimestamp()
         })
diff --git a/stylesheets/index.css b/stylesheets/index.css
index cd370a32..8327a2bd 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -26,6 +26,11 @@ body {
   background-color: aliceblue;
 }
 
+.gutter .contact .avatar {
+  background-position: center;
+  background-size: cover;
+}
+
 .conversation {
   margin: 0;
   padding: 0;