diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less
index 42909bd2a..e704a346d 100644
--- a/customize.dist/src/less/mixins.less
+++ b/customize.dist/src/less/mixins.less
@@ -74,16 +74,16 @@
         white-space: nowrap;
         display: flex;
         flex-flow: column;
+        .name {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
         .friend {
             padding: 0;
         }
     }
-    .name {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
     media-tag {
         min-height: @width;
         min-width: @width;
diff --git a/www/common/common-messaging.js b/www/common/common-messaging.js
index 23da2bee6..b8e0058bd 100644
--- a/www/common/common-messaging.js
+++ b/www/common/common-messaging.js
@@ -68,7 +68,7 @@ define([
         var friends = proxy.friends || {};
         Object.keys(friends).forEach(function (f) {
             var data = friends[f];
-            var $friend = $('<div>', {'class': 'friend'}).appendTo($block);
+            var $friend = $('<div>', {'class': 'friend avatar'}).appendTo($block);
             $friend.data('key', f);
             var $rightCol = $('<span>', {'class': 'right-col'});
             $('<span>', {'class': 'name'}).text(data.displayName).appendTo($rightCol);
@@ -149,7 +149,7 @@ define([
         var data = getFriend(common, edPublic);
         var proxy = common.getProxy();
 
-        var $header = $('<div>', {'class': 'header'}).appendTo($container);
+        var $header = $('<div>', {'class': 'header avatar'}).appendTo($container);
         $('<div>', {'class': 'messages'}).appendTo($container);
         var $inputBlock = $('<div>', {'class': 'input'}).appendTo($container);
 
diff --git a/www/friends/main.less b/www/friends/main.less
index c9b2ae06f..816ce393d 100644
--- a/www/friends/main.less
+++ b/www/friends/main.less
@@ -67,63 +67,17 @@ body {
 }
 
 #friendList .friend, #messaging .header {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 16px;
+    .avatar(50px);
+    &.avatar {
         display: flex;
-        align-items: center;
-        cursor: pointer;
-        color: @color;
-        .default, media-tag {
-            display: inline-flex;
-            width: 50px;
-            height: 50px;
-            justify-content: center;
-            align-items: center;
-            margin-right: 5px;
-            border-radius: 10px / 6px;
-            overflow: hidden;
-            border: 1px solid black;
-            box-sizing: content-box;
-        }
-        .default {
-            .unselectable();
-            background: white;
-            color: black;
-            font-size: 40px;
-        }
-        .right-col {
-            flex: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            display: flex;
-            flex-flow: column;
-            .name {
-                flex: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .friend {
-                padding: 0;
-            }
-        }
-        media-tag {
-            min-height: 50px;
-            min-width: 50px;
-            max-height: 50px;
-            max-width: 50px;
-            img {
-                color: #000;
-                min-width: 100%;
-                min-height: 100%;
-                max-width: none;
-                max-height: none; // To override 'media-tag img' in slide.less
-            }
+    }
+    cursor: pointer;
+    color: @color;
+    media-tag {
+        img {
+            color: #000;
         }
-
-
+    }
 }
 
 #messaging {