diff --git a/UI/MailerUI/UIxMailListActions.m b/UI/MailerUI/UIxMailListActions.m
index 0f1c11abe..8cf15a4f3 100644
--- a/UI/MailerUI/UIxMailListActions.m
+++ b/UI/MailerUI/UIxMailListActions.m
@@ -732,7 +732,7 @@
       // To
       to = [[message objectForKey: @"envelope"] to];
       if ([to count] > 0)
-	[msg addObject: [[addressFormatter stringForArray: to] stringByEscapingHTMLString]];
+	[msg addObject: [addressFormatter dictionariesForArray: to]];
       else
 	[msg addObject: @""];
 
@@ -748,7 +748,7 @@
       // From
       from = [[message objectForKey: @"envelope"] from];
       if ([from count] > 0)
-	[msg addObject: [[addressFormatter stringForArray: from] stringByEscapingHTMLString]];
+	[msg addObject: [addressFormatter dictionariesForArray: from]];
       else
 	[msg addObject: @""];
       
diff --git a/UI/MailerUI/UIxMailView.m b/UI/MailerUI/UIxMailView.m
index 59564c631..82d6a0a36 100644
--- a/UI/MailerUI/UIxMailView.m
+++ b/UI/MailerUI/UIxMailView.m
@@ -57,6 +57,7 @@
 #import <MailPartViewers/UIxMailSizeFormatter.h>
 
 #import "WOContext+UIxMailer.h"
+#import "UIxMailFormatter.h"
 
 @interface UIxMailView : UIxComponent
 {
@@ -69,7 +70,6 @@
 
 - (BOOL) mailIsDraft;
 - (NSNumber *) shouldAskReceipt;
-- (NSArray *) formattedAddresses: (NSArray *) theAddresses;
 - (NSString *) formattedDate;
 
 @end
@@ -190,31 +190,6 @@ static NSString *mailETag = nil;
   return [UIxMailSizeFormatter sharedMailSizeFormatter];
 }
 
-- (NSArray *) formattedAddresses: (NSArray *) theAddresses
-{
-  NSMutableArray *addresses;
-  NSMutableDictionary *metaAddress;
-  NSString *name, *address;
-  NGImap4EnvelopeAddress *envelopeAddress;
-  int count, i;
-
-  count = [theAddresses count];
-  addresses = [NSMutableArray arrayWithCapacity: count];
-  for (i = 0; i < count; i++)
-    {
-      envelopeAddress = [theAddresses objectAtIndex: i];
-      address = [envelopeAddress baseEMail];
-      name = [envelopeAddress personalName];
-      metaAddress = [NSMutableDictionary dictionaryWithObject: address forKey: @"address"];
-      if (name)
-        [metaAddress setObject: name forKey: @"name"];
-
-      [addresses addObject: metaAddress];
-    }
-
-  return addresses;
-}
-
 - (NSString *) formattedDate
 {
   NSFormatter *formatter;
@@ -253,8 +228,10 @@ static NSString *mailETag = nil;
   NSString *s;
   NSDictionary *data;
   SOGoMailObject *co;
+  UIxEnvelopeAddressFormatter *addressFormatter;
 
   co = [self clientObject];
+  addressFormatter = [context mailEnvelopeAddressFormatter];
 
   /* check etag to see whether we really must rerender */
   /*
@@ -296,12 +273,13 @@ static NSString *mailETag = nil;
     }
 
   data = [NSDictionary dictionaryWithObjectsAndKeys:
-                         [self formattedAddresses: [co fromEnvelopeAddresses]], @"fromAddresses",
-                       [self formattedAddresses: [co toEnvelopeAddresses]], @"toAddresses",
-                       [self formattedAddresses: [co ccEnvelopeAddresses]], @"ccAddresses",
-                       [self formattedAddresses: [co bccEnvelopeAddresses]], @"bccAddresses",
-                       [self formattedAddresses: [co replyToEnvelopeAddresses]], @"replyToAddresses",
+                         [addressFormatter dictionariesForArray: [co fromEnvelopeAddresses]], @"from",
+                       [addressFormatter dictionariesForArray: [co toEnvelopeAddresses]], @"to",
+                       [addressFormatter dictionariesForArray: [co ccEnvelopeAddresses]], @"cc",
+                       [addressFormatter dictionariesForArray: [co bccEnvelopeAddresses]], @"bcc",
+                       [addressFormatter dictionariesForArray: [co replyToEnvelopeAddresses]], @"reply-to",
                        [self formattedDate], @"date",
+                       [self messageSubject], @"subject",
                        [self attachmentAttrs], @"attachmentAttrs",
                        [self shouldAskReceipt], @"shouldAskReceipt",
                        [NSNumber numberWithBool: [self mailIsDraft]], @"isDraft",
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 10b32fe94..ebe0713b4 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -251,9 +251,9 @@
           data-vs-scroll-parent="#messagesList">
         <li ng-repeat="currentMessage in mailbox.$messages"
             data-ng-class="{unread: !currentMessage.isread, _selected: message.id == currentMessage.id}">
-          <a name="{{}}" data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: mailbox.path, messageId: currentMessage.uid})">
+          <a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})">
             <div class="name">
-              {{currentMessage.from}}
+              {{currentMessage.$shortAddress('from')}}
               <span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
             </div>
             <div class="subject">{{currentMessage.subject}}</div>
@@ -268,23 +268,23 @@
 
   <script type="text/ng-template" id="message.html">
     <div class="header">
-      <h4 data-ng-bind="message.subject"><!-- subject --></h4>
-      <h6><var:string label:value="From"/> <a
-                data-ng-href="mailto:{{message.fromAddresses[0].address}}"
-                data-ng-bind="message.fromAddresses[0].full"><!-- from --></a></h6>
+      <h2 data-ng-bind="message.subject"><!-- subject --></h2>
       <h6>
-        <var:string label:value="To"/> <a
-                data-ng-href="mailto:{{message.toAddresses[0].address}}"
-                data-ng-bind="message.toAddresses[0].full"><!-- to --></a>
+        <a data-ng-href="mailto:{{message.from[0].address}}"
+           data-ng-bind="message.from[0].full"><!-- from --></a>
+        -
+        <a data-ng-href="mailto:{{message.to[0].address}}"
+           data-ng-bind="message.to[0].full"><!-- to --></a>
       </h6>
-      <h6>
+      <p class="flags">
         <span class="label radius" data-ng-repeat="flag in message.flags">{{flag}}</span>
-      </h6>
+      </p>
+      <h6 data-ng-bind="message.date"><!-- date --></h6>
     </div>
     <div class="buttonsToolbar">
       <span>
         <a class="button tiny radius"
-           data-ui-sref="mail.acount.mailbox.messageEditor({accountId: account.id, mailboxId: mailbox.path, messageId: message.uid})"
+           data-ui-sref="mail.account.mailbox.messageEditor({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: message.uid})"
            data-ng-show="message.isDraft"><i class="icon-pencil"><!-- edit --></i></a>
         <span class="button tiny radius alert"
               data-ng-click="delete(message)"><i class="icon-trash"><!-- delete --></i></span>
diff --git a/UI/Templates/Themes/mobile/MailerUI/UIxMailMainFrame.wox b/UI/Templates/Themes/mobile/MailerUI/UIxMailMainFrame.wox
index 40dd68442..aa01427f5 100644
--- a/UI/Templates/Themes/mobile/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/Themes/mobile/MailerUI/UIxMailMainFrame.wox
@@ -56,33 +56,33 @@
                    data-ng-keyup="doSearch($event)"/>
           </ion-item>
         </ion-list>
-        <div class="scroll">
         <ion-list class="small">
           <ion-item class="item-icon-right" option-buttons="buttons"
-                    collection-repeat="message in mailbox.$messages"
+                    collection-repeat="currentMessage in mailbox.$messages"
                     collection-item-height="52"
-                    ui-sref="app.mail.account.mailbox.message({accountId: account.id, mailboxId: mailbox.path, messageId: message.uid})">
-            <small class="right">{{message.relativedate}}</small>
-            <h2>{{message.from}}</h2>
-            <p>{{message.subject}}</p>
+                    ui-sref="app.mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})">
+            <small class="right">{{currentMessage.relativedate}}</small>
+            <h2>{{currentMessage.$shortAddress('from')}}</h2>
+            <p>{{currentMessage.subject}}</p>
+            <i class="icon ion-looping"
+               data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
             <i class="icon ion-ios7-arrow-right"><!-- right arrow icon --></i>
           </ion-item>
         </ion-list>
-        </div>
       </ion-content>
     </ion-view>
   </script>
 
   <script type="text/ng-template" id="message.html">
-    <ion-view title="">
+    <ion-view title="{{message.from[0].name}}">
       <ion-nav-buttons side="right">
         <a class="button button-clear button-positive button-icon icon ion-ios7-plus-empty"><!-- new --></a>
       </ion-nav-buttons>
       <ion-content class="has-header" padding="10">
         <h5>{{message.subject}}</h5>
-        <small><var:string label:value="From"/> <b><a data-ng-href="mailto:{{message.fromAddresses[0].address}}">{{message.fromAddresses[0].name}}</a></b>
-        <br/>
-        <var:string label:value="To"/> <b><a data-ng-href="mailto:{{message.toAddresses[0].address}}">{{message.toAddresses[0].name}}</a></b>
+        <small><a data-ng-href="mailto:{{message.from[0].address}}">{{message.from[0].name}}</a>
+        -
+        <a data-ng-href="mailto:{{message.to[0].address}}">{{message.to[0].name}}</a>
         <br />
         {{message.date}}</small>
         <hr/>
diff --git a/UI/WebServerResources/js/Mailer/message-model.js b/UI/WebServerResources/js/Mailer/message-model.js
index 67495e052..f862a052f 100644
--- a/UI/WebServerResources/js/Mailer/message-model.js
+++ b/UI/WebServerResources/js/Mailer/message-model.js
@@ -64,6 +64,21 @@
     return path.join('/');
   };
 
+  /**
+   * @function $shortAddress
+   * @memberof Message.prototype
+   * @desc Format the first address of a specific type with a short description.
+   * @returns a string of the name or the email of the envelope address type
+   */
+  Message.prototype.$shortAddress = function(type) {
+    var address = '';
+    if (this[type] && this[type].length > 0) {
+      address = this[type][0].name || this[type][0].email || '';
+    }
+
+    return address;
+  };
+
   /**
    * @function $content
    * @memberof Message.prototype
@@ -102,9 +117,9 @@
         angular.extend(_this, data);
         _this.id = _this.$absolutePath();
         // Build long representation of email addresses
-        _.each(['from', 'to', 'cc', 'bcc', 'replyTo'], function(type) {
-          _.each(_this[type + 'Addresses'], function(data, i) {
-            if (data.name != data.address)
+        _.each(['from', 'to', 'cc', 'bcc', 'reply-to'], function(type) {
+          _.each(_this[type], function(data, i) {
+            if (data.name && data.name != data.address)
               data.full = data.name + ' <' + data.address + '>';
             else
               data.full = '<' + data.address + '>';
diff --git a/UI/WebServerResources/scss/MailerUI.scss b/UI/WebServerResources/scss/MailerUI.scss
index 83b9963e9..9baf4e55c 100644
--- a/UI/WebServerResources/scss/MailerUI.scss
+++ b/UI/WebServerResources/scss/MailerUI.scss
@@ -159,13 +159,15 @@ $column-gutter: 0;
         }
     }
 
-    #messagesList {
+    #messagesList, #messageEditor {
         position: absolute;
         overflow: auto;
         overflow-x: hidden;
         top: $topbar-height;
         bottom: 0;
         left: 23.07692%;
+    }
+    #messagesList {
         background-color: $f-dropdown-list-hover-bg;
         @include grid-column($columns:13);
         @media #{$medium-up} {
@@ -260,17 +262,21 @@ $column-gutter: 0;
             @include grid-column($columns:6);
         }
         h1, h2, h3, h4, h5, h6 {
-            margin-left: rem-calc(12);
-            margin-top: 0;
+            margin: 0;
             padding-top: rem-calc(12);
         }
         h1 {
             margin-bottom: 0;
         }
+        h2 {
+            font-weight: lighter;
+        }
         .header {
             background-color: $secondary-color;
+            padding-left: rem-calc(12);
+            padding-right: rem-calc(12);
             padding-bottom: 0.2em;
-            h1, h4, h6 {
+            h1, h2, h4, h6 {
                 color: #fff;
             }
             .label {
@@ -280,8 +286,8 @@ $column-gutter: 0;
                 color: $primary-color;
                 color: scale-color($primary-color, $lightness: 52%);
             }
-            label {
-                
+            .flags {
+                float: right;
             }
         }
             /*
@@ -340,6 +346,9 @@ $column-gutter: 0;
             }
 
     }
+    #messageEditor {
+        right: 0;
+    }
 }
 
 h1 {