diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index c7682b19e..d4d677b29 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -8,26 +8,53 @@
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
   <div id="messageEditor">
     <form>
-      <label><var:string label:value="From"/>
-      <select name="from"
-              data-ng-model="message.editable.from"
-              data-ng-options="identity for identity in identities"><!-- from --></select></label>
-      <label><var:string label:value="To"/>
-      <tags-input type="text" name="to"
-                  ng-model="message.editable.to"
-                  label:placeholder="Add a recipient">
-      <auto-complete data-source="userFilter($query)"><!-- to --></auto-complete></tags-input></label>
-      <label><var:string label:value="Cc"/>
-      <tags-input type="text" name="cc"
-                  ng-model="message.editable.cc"
-                  label:placeholder="Add a recipient">
-      <auto-complete data-source="userFilter($query)"><!-- to --></auto-complete></tags-input></label>
-      <label><var:string label:value="Subject"/>
-      <input type="text" name="subject" ng-model="message.editable.subject"/></label>
-      <label><var:string label:value="Attachments"/>
-      <input type="file"
-             data-nv-file-select="nv-file-select"
-             data-uploader="uploader"/></label>
+
+        <label>
+          <var:string label:value="From"/>
+        </label>
+        <select name="from"
+                data-ng-model="message.editable.from"
+                data-ng-options="identity for identity in identities"><!-- from --></select>
+
+
+      <md-input-container>
+        <label>
+          <var:string label:value="To"/>
+          <input type="text" name="to"
+                      ng-model="message.editable.to"
+                      label:placeholder="Add a recipient">
+            <auto-complete data-source="userFilter($query)"><!-- to --></auto-complete>
+          </input>
+        </label>
+      </md-input-container>
+
+      <md-input-container>
+        <label>
+          <var:string label:value="Cc"/>
+        </label>
+          <input type="text" name="cc"
+                      ng-model="message.editable.cc"
+                      label:placeholder="Add a recipient">
+            <auto-complete data-source="userFilter($query)"><!-- to --></auto-complete>
+          </input>
+      </md-input-container>
+
+      <md-input-container>
+        <label>
+          <var:string label:value="Subject"/>
+        </label>
+          <input type="text" name="subject" ng-model="message.editable.subject"/>
+      </md-input-container>
+
+      <md-input-container>
+        <label>
+          <var:string label:value="Attachments"/>
+        </label>
+          <input type="file"
+                 data-nv-file-select="nv-file-select"
+                 data-uploader="uploader"/>
+      </md-input-container>
+
       <ul>
         <li ng-repeat="item in message.editable.attachmentAttrs">
           <span ng-bind="item.filename"><!-- filename --></span>
@@ -36,7 +63,10 @@
           <span ng-bind="item.file.name"><!-- filename --></span> (<span ng-bind="item.file.progress"><!-- progress --></span>)
         </li>
       </ul>
-      <textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
+
+        <textarea name="content" var:class="editorClass" ng-model="message.editable.text"/>
+
+
       <div class="buttonsToolbar">
         <span>
           <a class="button tiny radius"
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index d883cd2e0..159dd4383 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -8,22 +8,32 @@
    xmlns:uix="OGo:uix">
 
 <md-content md-scroll-y="md-scroll-y"  class="md-padding">
-    <header class="header">
+    <header class="msg-header">
       <hgroup>
         <h3 class="sg-md-headline" data-ng-bind="message.subject"><!-- subject --></h3>
         <div class="msg-header-group">
-          <div class="md-tile-left">
-            <!--avatar-->
+          <div layout="row" layout-align="start center">
+            <label>
+              <var:string label:value="From"/>
+            </label>
+            <div class="sg-avatar">
+              <!--avatar-->
+            </div>
+            <div class="sg-md-body-multi name">
+              <a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
+            </div>
           </div>
-          <div class="sg-md-body-multi name">
-            <a data-ng-href="mailto:{{message.from[0].email}}" data-ng-bind="message.from[0].full"><!-- from --></a>
+
+          <div layout="row" layout-align="start center">
+            <label>
+              <var:string label:value="To"/>
+            </label>
+            <div class="sg-md-body-multi">
+              <a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
+            </div>
           </div>
-          <div class="msg-date sg-md-body-multi"><span data-ng-bind="message.date"><!-- date --></span></div>
         </div>
 
-        <div>
-          <a data-ng-href="mailto:{{message.to[0].email}}" data-ng-bind="message.to[0].full"><!-- to --></a>
-        </div>
         <p class="flags">
           <span class="label radius" data-ng-repeat="flag in message.flags">{{flag}}</span>
         </p>
@@ -46,7 +56,8 @@
               data-ng-click="loadImages()"><var:string label:value="Load Images"/></span>
       </div>
     </header>
-
+  <md-divider><!-- divider --></md-divider>
+  <div class="msg-date sg-md-body-multi"><span data-ng-bind="message.date"><!-- date --></span></div>
   <div class="mailer_mailcontent"
        data-ng-bind-html="message.$content()"><!-- msg --></div>
 </md-content>
diff --git a/UI/WebServerResources/angular-material b/UI/WebServerResources/angular-material
index d0fdd9f5a..82e1befb5 160000
--- a/UI/WebServerResources/angular-material
+++ b/UI/WebServerResources/angular-material
@@ -1 +1 @@
-Subproject commit d0fdd9f5a91e3619763acd25bc7513d43d4a1ceb
+Subproject commit 82e1befb5428eaafce0ec05f229072cf00b379d9
diff --git a/UI/WebServerResources/scss/components/_palette.scss b/UI/WebServerResources/scss/components/_palette.scss
index 7e345ebcb..85c3c8753 100755
--- a/UI/WebServerResources/scss/components/_palette.scss
+++ b/UI/WebServerResources/scss/components/_palette.scss
@@ -59,7 +59,7 @@ $paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c #607d8b #546e7a #455a6
 //  ---------------------------------------------------------------------------
 
 $sogoPaper: (
-  50: #fcf7f8,
+  50: #fcfbf8,
   100: #f7f1dc,
   200: #ede5ca,
   300: #e6d8ba,
diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
index a762972f1..d86d47d39 100644
--- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
+++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
@@ -81,3 +81,7 @@
     flex-wrap: wrap;
   }
 }
+.sg-avatar {
+  @extend .md-tile-left;
+  margin-right: 0;
+}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 98840628b..5514bae3f 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -18,20 +18,17 @@ hgroup {
   }
 }
 .sg-icon-bar {
-  font-size: $sg-font-size-5;
+  font-size: $sg-font-size-3;
   color: $colorGray;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  width: ($pitch);
-  height:(3 * $pitch);
-  margin-right: $mg * -1;
+  height:(2 * $pitch);
+  margin-left: $mg;
     }
 .sg-icon-bar *.button {
   display: block;
-  margin: 0 auto;
-  width: (2 * $mg);
 }
 
 
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 2b90267a1..dd8f2cb17 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -9,17 +9,38 @@
 [data-ui-view="message"] {
   max-width: grid-step(8);
 }
-
+.msg-header {
+  padding-bottom: $mg;
+}
 .msg-header-group {
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+
+
+
+  [layout="row"] + [layout="row"] {
+    margin-top: -1 * 1em;
+  }
 }
-.msg-header-group .sg-md-body-multi.name,
+.msg-header-group .sg-md-body-multi.name {}
 .msg-date {
-  padding: $mg 0 0 $mg;
+  margin: $mg 0;
+  text-align: right;
 }
+
+.msg-header label {
+  font-size: sg-size(caption) - 1; // -1px to compensate for the uppercase and simulate Small caps
+  text-transform: uppercase;
+  margin-right: $mg;
+  width: ($pitch + $bl);
+  text-align: right;
+  line-height: $sg-line-height-2;
+  font-weight: 600;
+  color: $colorGray;
+}
+
 .mailer_mailcontent {
   @extend .sg-md-body-multi;
 }