diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index f0658845e..189621451 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -43,5 +43,9 @@
   <!-- This extra container is used to animate views transitions
        double quotes in ng-animate is not a typo                         -->
     <div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
+  <md-button class="iconButton md-fab md-accent" aria-label="create" ui-sref="mail.newMessage()">
+    <i class="md-icon-add"><!-- icon --></i>
+  </md-button>
+
 
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 338c9af34..406248dad 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -233,7 +233,7 @@
 <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxMailMainFrame">
     <!-- dropdown menu for mailbox options button -->
-    <div id="folderProperties" class ="f-dropdown icons-dropdown" dropdown-content="dropdown-content">
+    <div id="folderProperties" class ="f-dropdown icons-dropdown" dropdown-content="dropdown-content" ng-hide="true">
       <ul class="button-group">
         <li ng-show="currentFolder.isEditable">
           <span class="button" ng-click="editFolder(currentFolder)">
@@ -338,9 +338,6 @@
                 <md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
                 <md-option value="body"><var:string label:value="Entire Message"/></md-option>
               </md-select>
-              <md-button class="iconButton" aria-label="create" ui-sref="mail.newMessage()">
-                <i class="md-icon-create"><!-- icon --></i>
-              </md-button>
 
             </div>
           </div>
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 564dc9f09..2ac641610 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -14,7 +14,8 @@ $toolbar-padding: $mg;
 md-toolbar {
   padding: $toolbar-padding 0;
   z-index: $z-index-toolbar;
-  font-size: initial;
+  // dirty fix to override angular-material botchy typography
+  font-size: 1em !important;
   background-image: url("../img/felt-transp.png");
   background-blend-mode: luminosity;
   box-shadow: $whiteframe-shadow-z1;
@@ -22,6 +23,8 @@ md-toolbar {
 
 .md-toolbar-tools {
   padding: 0 initial;
+  // dirty fix to override angular-material botchy typography
+  font-size: 1em !important;
 }
 
 // angular-material is overspecifying so we are
diff --git a/UI/WebServerResources/scss/core/typography.scss b/UI/WebServerResources/scss/core/typography.scss
index 9798c5946..05a826652 100644
--- a/UI/WebServerResources/scss/core/typography.scss
+++ b/UI/WebServerResources/scss/core/typography.scss
@@ -1,6 +1,6 @@
 // Import from sources for extends
 // -------------------------------
-@import "../../angular-material/src/core/style/typography";
+//@import "../../angular-material/src/core/style/typography";
 
 // Fonts declaration
 // ----------------------------------------------------------------------------
@@ -124,6 +124,96 @@
   font-style: italic;
 }
 
+html {
+  // angular-material does it like in 2005
+  font-size: 62.5%;
+  // but we won't let evrything pass
+  line-height: 1;
+}
+body {
+  // angular-material does it like in 2005
+  font-size: 1.6rem;
+}
+html, body {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-touch-callout: none;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+}
+
+md-select, md-card, md-list, md-toolbar,
+ul, ol, p, h1, h2, h3, h4, h5, h6 {
+  text-rendering: optimizeLegibility;
+}
+
+// angular-material source
+
+
+/************
+ * Headings
+ ************/
+.md-display-4 {
+  font-size: $display-4-font-size-base;
+  font-weight: 300;
+  letter-spacing: -0.010em;
+  line-height: $display-4-font-size-base;
+}
+.md-display-3 {
+  font-size: $display-3-font-size-base;
+  font-weight: 400;
+  letter-spacing: -0.005em;
+  line-height: $display-3-font-size-base;
+}
+.md-display-2 {
+  font-size: $display-2-font-size-base;
+  font-weight: 400;
+  line-height: 6.4rem;
+}
+.md-display-1 {
+  font-size: $display-1-font-size-base;
+  font-weight: 400;
+  line-height: 4rem;
+}
+.md-headline {
+  font-size: $headline-font-size-base;
+  font-weight: 400;
+  line-height: 3.2rem;
+}
+.md-title {
+  font-size: $title-font-size-base;
+  font-weight: 500;
+  letter-spacing: 0.005em;
+}
+.md-subhead {
+  font-size: $subhead-font-size-base;
+  font-weight: 400;
+  letter-spacing: 0.010em;
+  line-height: 2.4rem;
+}
+/************
+ * Body Copy
+ ************/
+.md-body-1 {
+  font-size: $body-font-size-base;
+  font-weight: 400;
+  letter-spacing: 0.010em;
+  line-height: 2rem;
+}
+.md-body-2 {
+  font-size: $body-font-size-base;
+  font-weight: 500;
+  letter-spacing: 0.010em;
+  line-height: 2.4rem;
+}
+.md-caption {
+  font-size: $caption-font-size-base;
+  letter-spacing: 0.020em;
+}
+.md-button {
+  letter-spacing: 0.010em;
+}
+
+
 // Google's Material design specs are in 'sp' or 'dp' which are not css units
 // 'dp' is 'density independant pixels' and 'sp' is 'scale-independent pixels'
 // (same as dp, but will be scaled by the user's font size preference)
@@ -262,6 +352,7 @@ h6 {
 html p {
   font-size: inherit;
   line-height: $sg-base-line-height;
+  margin: 0;
 }
 
 
@@ -405,6 +496,25 @@ $today-font-size: 72px; // Visualy adjusted
   font-weight: $sg-font-thin;
 }
 
+/************
+ * Defaults
+ ************/
+
+button,
+select,
+html,
+textarea,
+input {
+  font-family: $font-family;
+}
+
+select,
+button,
+textarea,
+input {
+  font-size: 100%;
+}
+
 a,
 a:hover,
 a:active,
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index a38cfb010..44dd074e0 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -19,7 +19,7 @@
 
 // Browser reset - most effective for applications. Generated by Compass in a non-regular way
 // ------------------------------------------------------------------------------
-//@import 'core/reset';
+@import 'core/reset';
 
 // CORE elements
 // ------------------------------------------------------------------------------
diff --git a/UI/WebServerResources/scss/views/MessageEditorUI.scss b/UI/WebServerResources/scss/views/MessageEditorUI.scss
index 88a255cd9..5548f21b7 100644
--- a/UI/WebServerResources/scss/views/MessageEditorUI.scss
+++ b/UI/WebServerResources/scss/views/MessageEditorUI.scss
@@ -6,7 +6,13 @@
 ////
 
 [id=messageEditor] {
-  width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
+  //width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
+  @include from(lg) {
+    @include flex-col(lg, 11, 1, 1);
+  }
+  @include at(md) {
+    @include flex-col(md, 10, 1, 1);
+  }
   margin: 0 auto;
   overflow: auto;
   height: 100%;
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 13d73e503..b691376b7 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -43,6 +43,7 @@ $detailView-width: grid-step(8) !global;
   min-width: ($listView-width - ($pitch * 2));
   @include at(md){
     @include flex-col(md, 7, 1, 1);
+    min-width: ($pitch * 3);
   }
   @include from(lg) {
     @include flex-col(lg, 6, 1, 0);
@@ -71,6 +72,7 @@ $detailView-width: grid-step(8) !global;
   @include from(md) {
     .viewer {
       position: absolute;
+      max-width: 100%;
       transform: translate3d(0, 0, 0);
       transition: all 0.5s $swift-ease-in-out-timing-function;
       &.ng-enter {