diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 0f109daee..6e16ffda0 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -20,10 +20,18 @@
           <label class="pseudo-input-label">
             <var:string label:value="From"/>
           </label>
-          <div class="pseudo-input-field">
-            <a href="#"
-               ng-bind="viewer.message.from[0].full"
-               ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
+          <div layout="row" layout-align="start center">
+            <sg-avatar-image class="md-tile-left"
+                             sg-email="viewer.message.from[0].email"
+                             size="48">
+              <!-- contact avatar -->
+            </sg-avatar-image>
+            <div class="md-list-item-text">
+              <span>{{ viewer.message.from[0].name }}</span><br/>
+              <a class="md-caption" href="#"
+                 ng-bind="viewer.message.from[0].email"
+                 ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
+            </div>
           </div>
         </div>
 
@@ -31,10 +39,26 @@
           <label class="pseudo-input-label">
             <var:string label:value="To"/>
           </label>
+          <div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
+            <a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
+          </div>
+          <div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
+            <span ng-repeat="recipient in viewer.message.to">
+              <a href="#" ng-bind="recipient.full"
+                 ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
+            </span>
+          </div>
+        </div>
+
+        <div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
+          <label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
+            <var:string label:value="Cc"/>
+          </label>
           <div class="pseudo-input-field">
-            <a href="#"
-               ng-bind="viewer.message.to[0].full"
-               ng-click="viewer.newMessage($event, viewer.message.to[0])"><!-- to --></a>
+            <span ng-repeat="recipient in viewer.message.cc">
+              <a href="#" ng-bind="recipient.full"
+                 ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
+            </span>
           </div>
         </div>
 
diff --git a/UI/WebServerResources/js/Mailer/Message.service.js b/UI/WebServerResources/js/Mailer/Message.service.js
index 329113255..ee6ccab61 100644
--- a/UI/WebServerResources/js/Mailer/Message.service.js
+++ b/UI/WebServerResources/js/Mailer/Message.service.js
@@ -15,6 +15,7 @@
     this.$mailbox = mailbox;
     this.$hasUnsafeContent = false;
     this.$loadUnsafeContent = false;
+    this.$showDetailedRecipients = false;
     this.editable = {to: [], cc: [], bcc: []};
     // Data is immediately available
     if (typeof futureMessageData.then !== 'function') {
@@ -128,21 +129,58 @@
    * @function $formatFullAddresses
    * @memberof Message.prototype
    * @desc Format all sender and recipients addresses with a complete description (name <email>).
+   *       This function also generates a gravatar for each email address, and a short name
    */
   Message.prototype.$formatFullAddresses = function() {
     var _this = this;
+    var identities = _.pluck(_this.$mailbox.$account.identities, 'email');
 
     // Build long representation of email addresses
     _.each(['from', 'to', 'cc', 'bcc', 'reply-to'], function(type) {
       _.each(_this[type], function(data, i) {
-        if (data.name && data.name != data.email)
+        if (data.name && data.name != data.email) {
           data.full = data.name + ' <' + data.email + '>';
-        else
+
+          // If we have "Alice Foo" as name, we grab "Alice"
+          if (data.name.split(' ').length)
+            data.shortname = data.name.split(' ')[0].replace('\'','');
+        }
+        else {
           data.full = '<' + data.email + '>';
+          data.shortname = data.email.split('@')[0];
+        }
+
+        // Generate the gravatar
+        data.image = Message.$gravatar(data.email, 32);
+
+        // If the current user is the recepient, overwrite
+        // the short name with 'me'
+        if (_.indexOf(identities, data.email) >= 0)
+          data.shortname = 'me';
       });
     });
   };
 
+  /**
+   * @function $shortRecipients
+   * @memberof Message.prototype
+   * @desc Format all recipients into a very compact string
+   * @returns a compacted string of all recipients
+   */
+  Message.prototype.$shortRecipients = function() {
+    var _this = this;
+    var result = [];
+
+    // Build long representation of email addresses
+    _.each(['to', 'cc', 'bcc'], function(type) {
+      _.each(_this[type], function(data, i) {
+        result.push(data.shortname);
+      });
+    });
+
+    return result.join(', ');
+  };
+
   /**
    * @function $shortAddress
    * @memberof Message.prototype
@@ -167,6 +205,15 @@
     this.$loadUnsafeContent = true;
   };
 
+  /**
+   * @function showDetailedRecipients
+   * @memberof Message.prototype
+   * @desc Mark the message to show all to/cc recipients.
+   */
+  Message.prototype.showDetailedRecipients = function() {
+    this.$showDetailedRecipients = true;
+  };
+
   /**
    * @function $content
    * @memberof Message.prototype