diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 928e1e92e..55931a85b 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -5,9 +5,9 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
 
-  <div layout="column" class="layout-fill">
-    <md-toolbar class="md-whiteframe-z1">
-      <div class="md-toolbar-tools">
+  <div layout="column" class="layout-fill sg-reversible">
+    <md-card style="overflow: hidden">
+      <md-card-actions layout="row" layout-align="end center">
         <md-button class="sg-icon-button"
                    label:aria-label="Cancel"
                    ng-click="editor.cancel()">
@@ -24,10 +24,8 @@
                    ng-click="editor.save(editor.card.$isCard()?cardForm:listForm)">
           <md-icon>save</md-icon>
         </md-button>
-      </div>
-    </md-toolbar>
-    <md-content class="md-flex md-static">
-      <div layout="column" class="viewer md-padding">
+      </md-card-actions>
+      <md-card-content>
         <hgroup class="header">
           <h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
           <h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
@@ -42,7 +40,6 @@
             </label>
             <input type="text" ng-maxlength="30" ng-model="editor.card.c_cn"/>
           </md-input-container>
-          <!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles -->
           <div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
             <md-input-container flex="40">
               <label>
@@ -375,7 +372,7 @@
           <!-- list members -->
           <div class="pseudo-input-container">
             <label class="pseudo-input-label">
-                  <var:string label:value="Members"/>
+              <var:string label:value="Members"/>
             </label>
             <md-contact-chips
                 ng-model="editor.card.refs"
@@ -388,7 +385,7 @@
                 label:placeholder="Add Member"><!-- members --></md-contact-chips>
           </div>
         </form>
-      </div>
-    </md-content>
+      </md-card-content>
+    </md-card>
   </div>
 </container>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 9e8e320de..7cdd3fa54 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -24,7 +24,6 @@
                 md-component-id="left" md-is-locked-open="isGtMedium"
                 ng-class="{ 'sg-closed': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
-      <!-- <div style="position: relative; display: flex;"> -->
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <!-- User's addressbooks -->
         <section>
@@ -113,8 +112,8 @@
               <span><var:string label:value="Subscriptions"/></span>
               <md-button class="sg-icon-button"
                          label:aria-label="Subscribe to an Addressbook..."
-                       sg-subscribe="contact"
-                       sg-subscribe-on-select="app.subscribeToFolder(folderData)">
+                         sg-subscribe="contact"
+                         sg-subscribe-on-select="app.subscribeToFolder(folderData)">
                 <md-icon>add_circle_outline</md-icon>
               </md-button>
             </div>
@@ -182,7 +181,6 @@
           </md-list>
         </section>
       </md-content>
-    <!-- </div> -->
     </md-sidenav>
 
     <section layout="column" class="sg-app-content layout-fill" ui-view="addressbook"><!-- contacts list --></section>
@@ -198,7 +196,7 @@
       <div class="view-list" layout="column">
 
         <!-- single-selection toolbar -->
-        <md-toolbar class="md-whiteframe-z1"
+        <md-toolbar class="md-accent md-hue-1"
                     ng-show="addressbook.selectedFolder.$selectedCount() == 0">
           <!-- sort mode (default) -->
           <div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
@@ -352,20 +350,16 @@
           </div>
         </md-toolbar>
 
+        <md-divider><!-- divider --></md-divider>
+
         <md-content id="contactsList" layout="column" class="md-flex">
           <md-subheader ng-show="addressbook.service.$query.value">
-            <md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
-              <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
-            </md-button>
             <span ng-switch="addressbook.selectedFolder.cards.length">
               <span ng-switch-when="0"><var:string label:value="No matching contact"/></span>
               <span ng-switch-default="true">{{addressbook.selectedFolder.cards.length}} <var:string label:value="matching contacts"/></span>
             </span>
           </md-subheader>
           <md-subheader ng-hide="addressbook.service.$query.value">
-            <md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
-              <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
-            </md-button>
             <span ng-switch="addressbook.selectedFolder.isRemote">
               <span ng-switch-when="1">
                 <var:string label:value="Start a search to browse this address book"/>
@@ -434,7 +428,6 @@
            layout="column" layout-align="start center"
            ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
            ui-view="card">
-        <md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
         <md-content class="hide-xs md-flex layout-fill md-hue-1"
                     layout="column" layout-align="center center">
           <div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No contact selected"/></div>
@@ -477,7 +470,6 @@
         <input id="file-input" type="file" class="ng-hide"
                nv-file-select="nv-file-select"
                uploader="$CardsImportDialogController.uploader"/>
-        <!-- <md-button ng-disabled="uploader.queue.length == 0" ng-click="upload()"><var:string label:value="Upload"/></md-button> -->
       </md-dialog-actions>
     </md-dialog>
   </script>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index fdacd004a..6b3a5273d 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -5,185 +5,199 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
 
-  <div layout="column" class="layout-fill">
-    <md-toolbar class="md-whiteframe-z1">
-      <div class="md-toolbar-tools">
-        <md-button class="sg-icon-button hide show-sm"
-                   label:aria-label="Close"
-                   ng-click="editor.close()">
-          <md-icon>close</md-icon>
-        </md-button>
-        <div class="md-flex"><!-- spacer --></div>
-        <md-button class="sg-icon-button"
-                   label:aria-label="Edit"
-                   ng-show="editor.currentFolder.acls.objectEditor"
-                   ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
-          <md-tooltip md-direction="left"><var:string label:value="Edit"/></md-tooltip>
-          <md-icon>mode_edit</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button"
-                   label:aria-label="Delete"
-                   ng-show="editor.currentFolder.acls.objectEraser"
-                   ng-click="editor.confirmDelete(editor.card)">
-          <md-tooltip md-direction="left"><var:string label:value="Delete"/></md-tooltip>
-          <md-icon>delete</md-icon>
-        </md-button>
-        <md-menu>
-          <md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
-            <md-icon>more_vert</md-icon>
+  <div class="sg-reversible" ng-class="{ 'sg-flip': editor.showRawSource }">
+    <div layout="column" class="layout-fill sg-face">
+      <md-card>
+        <md-card-actions layout="row" layout-align="end center">
+          <md-button class="sg-icon-button hide show-xs"
+                     label:aria-label="Close"
+                     ng-click="editor.close()">
+            <md-icon>close</md-icon>
           </md-button>
-          <md-menu-content>
-            <md-menu-item>
-              <md-button label:aria-label="Export"
-                         ng-click="editor.exportCard()">
-                <var:string label:value="Export"/>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <md-button label:aria-label="View Raw Source"
-                         ng-click="editor.viewRawSource($event)">
-                <var:string label:value="View Raw Source"/>
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-      </div>
-    </md-toolbar>
-    <md-content class="md-flex md-static">
-      <div layout="column" class="viewer md-padding">
-        <header class="msg-header">
-          <div ng-show="editor.card.c_component == 'vcard'">
-            <sg-avatar-image class="md-tile-left"
-                             sg-email="editor.card.$preferredEmail()"
-                             sg-src="editor.card.photoURL"
-                             size="40"><!-- avatar --></sg-avatar-image>
-          </div>
-          <div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
-            <!--list avatar-->
-          </div>
-          <div class="msg-header-content">
-            <h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
-            <h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
-            <md-chips ng-model="editor.card.categories"
-                      class="sg-readonly" readonly="true">
-              <md-chip-template>
-                {{$chip.value}}
-              </md-chip-template>
-            </md-chips>
-          </div>
-        </header>
-        <section class="msg-body">
-
-          <div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
-            <div class="key">
-              <label class="pseudo-input-label">
-                <var:string label:value="Birthday"/>
-              </label>
+          <div class="md-flex"><!-- spacer --></div>
+          <md-button type="button" class="sg-icon-button"
+                     label:aria-label="Edit"
+                     ng-show="editor.currentFolder.acls.objectEditor"
+                     ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
+            <md-tooltip><var:string label:value="Edit"/></md-tooltip>
+            <md-icon>mode_edit</md-icon>
+          </md-button>
+          <md-button class="sg-icon-button"
+                     label:aria-label="Delete"
+                     ng-show="editor.currentFolder.acls.objectEraser"
+                     ng-click="editor.confirmDelete(editor.card)">
+            <md-tooltip><var:string label:value="Delete"/></md-tooltip>
+            <md-icon>delete</md-icon>
+          </md-button>
+          <md-menu>
+            <md-button label:aria-label="More options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>
+                <md-button label:aria-label="Export"
+                           ng-click="editor.exportCard()">
+                  <var:string label:value="Export"/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button label:aria-label="View Raw Source"
+                           ng-click="editor.toggleRawSource($event)">
+                  <var:string label:value="View Raw Source"/>
+                </md-button>
+              </md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </md-card-actions>
+        <md-card-content>
+          <header class="msg-header">
+            <div ng-show="editor.card.c_component == 'vcard'">
+              <sg-avatar-image class="md-tile-left"
+                               sg-email="editor.card.$preferredEmail()"
+                               sg-src="editor.card.photoURL"
+                               size="40"><!-- avatar --></sg-avatar-image>
             </div>
-            <div class="pseudo-input-field">
-              <span>{{editor.card.$birthday()}}</span>
+            <div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
+              <!--list avatar-->
             </div>
-          </div>
+            <div class="msg-header-content">
+              <h1 class="sg-md-display-2--thin" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
+              <h6 class="sg-md-display-2-subheader--thin">{{editor.card.$description()}}</h6>
+              <md-chips ng-model="editor.card.categories"
+                        class="sg-readonly" readonly="true">
+                <md-chip-template>
+                  {{$chip.value}}
+                </md-chip-template>
+              </md-chips>
+            </div>
+          </header>
+          <section class="msg-body">
 
-          <!-- list members -->
-          <div class="section" ng-show="editor.card.refs.length > 0">
-            <label class="pseudo-input-label">
-              <var:string label:value="Members"/>
-            </label>
-            <md-list>
-              <md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
-                <sg-avatar-image class="md-tile-left"
-                                 sg-email="ref.$preferredEmail()"
-                                 size="48">
-                  <!-- contact avatar -->
-                </sg-avatar-image>
-                <div class="md-list-item-text">
-                  <h3>
-                    <a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
-                      {{ ref.$fullname() }}
-                    </a>
-                  </h3>
-                  <h4 ng-show="ref.email">
-                    <a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
-                      {{ ref.email }}
-                    </a>
-                  </h4>
-                </div>
-              </md-list-item>
-            </md-list>
-          </div>
-
-          <div class="section" ng-show="editor.card.emails.length > 0">
-            <div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
+            <div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
               <div class="key">
-                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
-              </div>
-
-              <div class="pseudo-input-field">
-                <a href="#" ng-bind="email.value"
-                   ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
-              </div>
-
-            </div>
-          </div>
-
-          <div class="section" ng-show="editor.card.c_screenname">
-            <div class="pseudo-input-container">
-              <div class="key">
-                <label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
-              </div>
-
-              <div class="pseudo-input-field">{{editor.card.c_screenname}}</div>
-            </div>
-          </div>
-
-          <div class="section" ng-show="editor.card.phones.length > 0">
-            <div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
-              <div class="key">
-                <label class="pseudo-input-label">{{phone.type}}</label>
-              </div>
-
-              <div class="pseudo-input-field">
-                <a href="tel:{{phone.value}}">{{phone.value}}</a>
-              </div>
-
-            </div>
-          </div>
-          <div class="section" ng-show="editor.card.urls">
-            <div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
-              <div class="key">
-                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
+                <label class="pseudo-input-label">
+                  <var:string label:value="Birthday"/>
                 </label>
               </div>
-
               <div class="pseudo-input-field">
-                <a href="#" target="_new" ng-href="{{url.value}}">{{url.value}}</a>
-              </div>
-
-            </div>
-          </div>
-          <div class="section" ng-show="editor.card.addresses">
-            <div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
-              <div class="key">
-                <label class="pseudo-input-label">{{address.type}}</label>
-              </div>
-              <div class="pseudo-input-field">
-                <div sg-address="address"><!-- address --></div>
+                <span>{{editor.card.$birthday()}}</span>
               </div>
             </div>
-          </div>
-          <div class="pseudo-input-container" ng-show="editor.card.note">
-            <div class="key">
+
+            <!-- list members -->
+            <div class="section" ng-show="editor.card.refs.length > 0">
               <label class="pseudo-input-label">
-                <var:string label:value="Note"/>
+                <var:string label:value="Members"/>
               </label>
+              <md-list>
+                <md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
+                  <sg-avatar-image class="md-tile-left"
+                                   sg-email="ref.$preferredEmail()"
+                                   size="48">
+                    <!-- contact avatar -->
+                  </sg-avatar-image>
+                  <div class="md-list-item-text">
+                    <h3>
+                      <a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
+                        {{ ref.$fullname() }}
+                      </a>
+                    </h3>
+                    <h4 ng-show="ref.email">
+                      <a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
+                        {{ ref.email }}
+                      </a>
+                    </h4>
+                  </div>
+                </md-list-item>
+              </md-list>
             </div>
-            <div class="pseudo-input-field">
-              <div ng-bind-html="editor.card.note"><!-- note --></div>
+
+            <div class="section" ng-show="editor.card.emails.length > 0">
+              <div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
+                <div class="key">
+                  <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
+                </div>
+
+                <div class="pseudo-input-field">
+                  <a href="#" ng-bind="email.value"
+                     ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
+                </div>
+
+              </div>
             </div>
-          </div>
-        </section>
-      </div>
-    </md-content>
+
+            <div class="section" ng-show="editor.card.c_screenname">
+              <div class="pseudo-input-container">
+                <div class="key">
+                  <label class="pseudo-input-label"><var:string label:value="Screen Name"/></label>
+                </div>
+
+                <div class="pseudo-input-field">{{editor.card.c_screenname}}</div>
+              </div>
+            </div>
+
+            <div class="section" ng-show="editor.card.phones.length > 0">
+              <div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
+                <div class="key">
+                  <label class="pseudo-input-label">{{phone.type}}</label>
+                </div>
+
+                <div class="pseudo-input-field">
+                  <a href="tel:{{phone.value}}">{{phone.value}}</a>
+                </div>
+
+              </div>
+            </div>
+            <div class="section" ng-show="editor.card.urls">
+              <div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
+                <div class="key">
+                  <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
+                  </label>
+                </div>
+
+                <div class="pseudo-input-field">
+                  <a href="#" target="_new" ng-href="{{url.value}}">{{url.value}}</a>
+                </div>
+
+              </div>
+            </div>
+            <div class="section" ng-show="editor.card.addresses">
+              <div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
+                <div class="key">
+                  <label class="pseudo-input-label">{{address.type}}</label>
+                </div>
+                <div class="pseudo-input-field">
+                  <div sg-address="address"><!-- address --></div>
+                </div>
+              </div>
+            </div>
+            <div class="pseudo-input-container" ng-show="editor.card.note">
+              <div class="key">
+                <label class="pseudo-input-label">
+                  <var:string label:value="Note"/>
+                </label>
+              </div>
+              <div class="pseudo-input-field">
+                <div ng-bind-html="editor.card.note"><!-- note --></div>
+              </div>
+            </div>
+          </section>
+        </md-card-content>
+      </md-card>
+    </div>
+    <div class="layout-fill sg-back" layout="column">
+      <md-card>
+        <md-card-actions layout="row" layout-align="end center">
+          <md-button class="md-icon-button"
+                     label:aria-label="Close"
+                     ng-click="editor.toggleRawSource()">
+            <md-icon>arrow_forward</md-icon>
+          </md-button>
+        </md-card-actions>
+        <md-card-content>
+          <pre>{{editor.rawSource}}</pre>
+        </md-card-content>
+      </md-card>
+    </div>
   </div>
 </container>
diff --git a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
index a3e08485f..e5ca911ca 100644
--- a/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
+++ b/UI/Templates/ContactsUI/UIxContactsUserFolders.wox
@@ -25,7 +25,8 @@
                ng-change="subscribe.onChange()"/>
       </md-input-container>
       <md-card ng-repeat="user in subscribe.users"
-               ng-class="{ 'sg-collapsed': user.uid != subscribe.selectedUser.uid, 'sg-expanded': user.uid == subscribe.selectedUser.uid }">
+               ng-class="{ 'sg-collapsed': user.uid != subscribe.selectedUser.uid,
+                           'sg-expanded': user.uid == subscribe.selectedUser.uid }">
         <md-button ng-click="subscribe.selectUser($index)">
           <div layout="row" layout-align="start center" class="md-flex">
             <span class="card-picture" ng-switch="user.isGroup">
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 3db998892..f28b3cd9a 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -60,7 +60,7 @@
       </div>
     </md-toolbar>
     <!-- single-selection toolbars -->
-    <md-toolbar class="md-whiteframe-z1"
+    <md-toolbar class="md-accent md-hue-1"
                 ng-hide="app.showingAdvancedSearch || mailbox.selectedFolder.$selectedCount() > 0">
       <!-- sort mode (default) -->
       <div class="md-toolbar-tools" ng-hide="mailbox.mode.search">
@@ -200,12 +200,10 @@
       </div>
     </md-toolbar>
 
+    <md-divider><!-- divider --></md-divider>
+
     <md-content id="messagesList" layout="column" class="md-flex">
       <md-subheader>
-        <!-- toggle sidenav -->
-        <md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
-          <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
-        </md-button>
         <!-- message count -->
         <span ng-switch="mailbox.service.selectedFolder.getLength()">
           <span ng-switch-when="0"><var:string label:value="No message"/></span>
@@ -272,8 +270,7 @@
        layout="column" layout-align="start center"
        ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
        ui-view="message">
-    <md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
-    <md-content class="hide-sm md-flex layout-fill md-hue-1"
+    <md-content class="hide-xs md-flex layout-fill md-hue-1"
                 layout="column" layout-align="center center">
       <div class="md-default-theme md-background md-fg md-hue-3 sg-md-title"><var:string label:value="No message selected"/></div>
     </md-content>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 1d85c6f46..0e68f50c0 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -251,7 +251,6 @@
           </md-subheader>
           <md-list>
             <md-list-item ng-repeat="folder in account.$flattenMailboxes() track by folder.path"
-                          ng-click="app.selectFolder(account, folder)"
                           ng-dblclick="app.editFolder(folder)"
                           ui-sref="mail.account.mailbox({accountId: account.id, mailboxId: (folder.path | encodeUri)})"
                           ui-sref-active="md-default-theme md-background md-bg md-hue-1">
@@ -264,6 +263,7 @@
                              ng-change="account.$flattenMailboxes({ reload: true, saveState: true })"><!-- expanded --></md-checkbox>
               </div>
               <p class="sg-item-name"
+                 ng-click="app.selectFolder(account, folder)"
                  ng-show="app.editMode != folder.path">
                 {{app.metadataForFolder(folder).name}}
                 <span class="sg-counter-badge" ng-show="folder.unseenCount">{{folder.unseenCount}}</span>
@@ -278,14 +278,13 @@
                        sg-enter="app.saveFolder(folder)"
                        sg-escape="app.revertEditing(folder)"/>
               </md-input-container>
-              <md-menu class="md-secondary"
-                       ng-show="app.service.selectedFolder.path == folder.path">
+              <md-menu ng-show="app.service.selectedFolder.path == folder.path">
                 <md-icon label:aria-label="Options"
-                         ng-click="$mdOpenMenu()"
+                         ng-click="$mdOpenMenu($event)"
                          md-menu-origin="md-menu-origin">more_vert</md-icon>
                 <md-menu-content width="3">
                   <md-menu-item>
-                    <md-button type="button" ng-click="app.markFolderRead(folder)">
+                    <md-button type="button" md-menu-align-target="md-menu-align-target" ng-click="app.markFolderRead(folder)">
                       <var:string label:value="Mark Folder Read"/>
                     </md-button>
                   </md-menu-item>
@@ -368,25 +367,7 @@
     <md-toolbar layout="column" class="md-tall toolbar-main"
                 ng-show="app.showingAdvancedSearch">
       <div class="md-toolbar-tools">
-        <md-chips class="md-flex"
-                  ng-model="app.search.params"
-                  md-on-append="app.newSearchParam($chip)">
-          <input sg-focus-on="advancedSearch" type="text"
-                 ng-disabled="app.currentSearchParam.length == 0"
-                 sg-placeholder="app.search.options[app.currentSearchParam]"/>
-          <md-chip-template>
-            <span class="md-caption" ng-show="$chip.negative == 0">(match</span>
-            <span class="md-caption" ng-show="$chip.negative == 1">(does not match</span>
-            <span class="md-caption">{{$chip.searchBy}})</span>
-            <span>{{$chip.searchInput}}</span>
-          </md-chip-template>
-        </md-chips>
-        <md-button type="button" class="sg-icon-button" ng-click="app.hideAdvancedSearch()">
-          <md-icon>close</md-icon>
-        </md-button>
-      </div>
-      <div class="md-toolbar-tools">
-        <div layout="column">
+        <div layout="column" class="md-flex">
           <div class="pseudo-input-container--compact">
             <label class="pseudo-input-label"><var:string label:value="Add a Criteria"/></label>
           </div>
@@ -408,6 +389,24 @@
             </span>
           </div>
         </div>
+        <md-button type="button" class="sg-icon-button" ng-click="app.hideAdvancedSearch()">
+          <md-icon>close</md-icon>
+        </md-button>
+      </div>
+      <div class="md-toolbar-tools">
+        <md-chips class="md-flex"
+                  ng-model="app.search.params"
+                  md-transform-chip="app.newSearchParam($chip)">
+          <input sg-focus-on="advancedSearch" type="text"
+                 ng-disabled="app.currentSearchParam.length == 0"
+                 sg-placeholder="app.search.options[app.currentSearchParam]"/>
+          <md-chip-template>
+            <span class="md-caption" ng-show="$chip.negative == 0">(match</span>
+            <span class="md-caption" ng-show="$chip.negative == 1">(does not match</span>
+            <span class="md-caption">{{$chip.searchBy}})</span>
+            <span>{{$chip.searchInput}}</span>
+          </md-chip-template>
+        </md-chips>
       </div>
     </md-toolbar>
 
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index f23e8776c..09e1f472b 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -7,210 +7,229 @@
     xmlns:label="OGo:label"
     xmlns:uix="OGo:uix">
 
-  <div layout="column" class="layout-fill">
-    <md-toolbar>
-      <div class="md-toolbar-tools">
-        <md-button class="sg-icon-button"
-                   ng-if="isPopup"
-                   label:aria-label="Close"
-                   ng-click="viewer.closePopup()">
-          <md-icon>close</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button hide show-sm"
-                   ng-hide="isPopup"
-                   label:aria-label="Close"
-                   ng-click="viewer.close()">
-          <md-icon>arrow_back</md-icon>
-        </md-button>
-        <div class="md-flex hide show-sm"><!-- spacer --></div>
-        <md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
-          <md-icon ng-class="{'icon-star': viewer.message.isflagged,
-                             'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
-        </md-button>
-        <div class="md-flex hide-sm"><!-- spacer --></div>
-        <md-button class="sg-icon-button"
-                   ng-hide="viewer.message.isDraft"
-                   ng-click="viewer.reply($event)"
-                   label:aria-label="Reply">
-          <md-tooltip md-direction="bottom"><var:string label:value="Reply to Sender Only"/></md-tooltip>
-          <md-icon>reply</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button"
-                   ng-show="viewer.message.allowReplyAll()"
-                   ng-click="viewer.replyAll($event)"
-                   label:aria-label="Reply All">
-          <md-tooltip md-direction="bottom"><var:string label:value="Reply to sender and all recipients"/></md-tooltip>
-          <md-icon>reply_all</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button" label:aria-label="Forward"
-                   ng-hide="viewer.message.isDraft"
-                   ng-click="viewer.forward($event)">
-          <md-tooltip md-direction="bottom"><var:string label:value="Forward selected message"/></md-tooltip>
-          <md-icon>forward</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button" label:aria-label="Edit"
-                   ng-show="viewer.message.isDraft"
-                   ng-click="viewer.edit($event)">
-          <md-icon>create</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button" label:aria-label="Delete"
-                   ng-click="viewer.doDelete()">
-          <md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
-          <md-icon>delete</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button hide-sm" label:aria-label="Open in New Mail Window"
-                   ng-hide="isPopup"
-                   ng-click="viewer.openPopup()">
-          <md-tooltip md-direction="bottom"><var:string label:value="Open in New Mail Window"/></md-tooltip>
-          <md-icon>open_in_new</md-icon>
-        </md-button>
-        <md-menu>
-          <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
-            <md-icon>more_vert</md-icon>
+  <div class="sg-reversible" ng-class="{ 'sg-flip': viewer.showRawSource }">
+    <div layout="column" class="layout-fill sg-face">
+      <md-card>
+        <md-card-actions layout="row">
+          <md-button class="md-icon-button"
+                     ng-if="isPopup"
+                     label:aria-label="Close"
+                     ng-click="viewer.closePopup()">
+            <md-icon>close</md-icon>
           </md-button>
-          <md-menu-content width="4">
-            <md-menu-item ng-hide="viewer.showFlags">
-              <md-button label:aria-label="Add a tag"
-                         ng-click="viewer.showFlags = true">
-                <var:string label:value="Add a tag"/>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <md-button label:aria-label="Save As..."
-                         ng-click="viewer.saveMessage()">
-                <var:string label:value="Save As..."/>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <md-button label:aria-label="View Message Source"
-                         ng-click="viewer.viewRawSource($event)">
-                <var:string label:value="View Message Source"/>
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-      </div>
-    </md-toolbar>
-    <md-content class="md-flex md-static">
-      <div class="viewer">
-        <md-toolbar class="sg-padded">
-          <h3 class="sg-md-title-msg">{{viewer.message.subject}}</h3>
-          <time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
-        </md-toolbar>
-        <md-toolbar class="sg-padded">
+          <md-button class="md-icon-button hide show-xs"
+                     ng-hide="isPopup"
+                     label:aria-label="Close"
+                     ng-click="viewer.close()">
+            <md-icon>arrow_back</md-icon>
+          </md-button>
+          <div class="md-flex hide show-xs"><!-- spacer --></div>
+          <md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
+            <md-icon ng-class="{'icon-star': viewer.message.isflagged,
+                               'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
+          </md-button>
+          <div class="md-flex hide-xs"><!-- spacer --></div>
+          <md-button class="sg-icon-button"
+                     ng-hide="viewer.message.isDraft"
+                     ng-click="viewer.reply($event)"
+                     label:aria-label="Reply">
+            <md-tooltip md-direction="bottom"><var:string label:value="Reply to Sender Only"/></md-tooltip>
+            <md-icon>reply</md-icon>
+          </md-button>
+          <md-button class="sg-icon-button"
+                     ng-show="viewer.message.allowReplyAll()"
+                     ng-click="viewer.replyAll($event)"
+                     label:aria-label="Reply All">
+            <md-tooltip md-direction="bottom"><var:string label:value="Reply to sender and all recipients"/></md-tooltip>
+            <md-icon>reply_all</md-icon>
+          </md-button>
+          <md-button class="sg-icon-button" label:aria-label="Forward"
+                     ng-hide="viewer.message.isDraft"
+                     ng-click="viewer.forward($event)">
+            <md-tooltip md-direction="bottom"><var:string label:value="Forward selected message"/></md-tooltip>
+            <md-icon>forward</md-icon>
+          </md-button>
+          <md-button class="sg-icon-button" label:aria-label="Edit"
+                     ng-show="viewer.message.isDraft"
+                     ng-click="viewer.edit($event)">
+            <md-icon>create</md-icon>
+          </md-button>
+          <md-button class="sg-icon-button" label:aria-label="Delete"
+                     ng-click="viewer.doDelete()">
+            <md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
+            <md-icon>delete</md-icon>
+          </md-button>
+          <md-button class="sg-icon-button hide-xs" label:aria-label="Open in New Mail Window"
+                     ng-hide="isPopup"
+                     ng-click="viewer.openPopup()">
+            <md-tooltip md-direction="bottom"><var:string label:value="Open in New Mail Window"/></md-tooltip>
+            <md-icon>open_in_new</md-icon>
+          </md-button>
+          <md-menu>
+            <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content width="4">
+              <md-menu-item ng-hide="viewer.showFlags">
+                <md-button label:aria-label="Add a tag"
+                           ng-click="viewer.showFlags = true">
+                  <var:string label:value="Add a tag"/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button label:aria-label="Save As..."
+                           ng-click="viewer.saveMessage()">
+                  <var:string label:value="Save As..."/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button label:aria-label="View Message Source"
+                           ng-click="viewer.toggleRawSource($event)">
+                  <var:string label:value="View Message Source"/>
+                </md-button>
+              </md-menu-item>
+            </md-menu-content>
+          </md-menu>
+        </md-card-actions>
+        <md-card-content>
+          <div class="sg-padded">
+            <h5>{{viewer.message.subject}}</h5>
+            <time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
+          </div>
+          <div class="sg-padded">
 
-          <div class="pseudo-input-container--compact">
-            <label class="pseudo-input-label">
-              <var:string label:value="From"/>
-            </label>
-            <div layout="row" layout-align="start center">
-              <sg-avatar-image class="md-tile-left"
-                               sg-email="viewer.message.from[0].email"
-                               size="40">
-                <!-- 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 layout="row" layout-wrap="layout-wrap">
+              <div class="pseudo-input-container--compact" flex="50" flex-xs="100">
+                <label class="pseudo-input-label">
+                  <var:string label:value="From"/>
+                </label>
+                <div layout="row" layout-align="start center">
+                  <sg-avatar-image class="md-tile-left"
+                                   sg-email="viewer.message.from[0].email"
+                                   size="40">
+                    <!-- 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>
+              <div layout="column" flex="50">
+                <div class="pseudo-input-container--compact">
+                  <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">
+                    <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>
               </div>
             </div>
-          </div>
-          <div class="pseudo-input-container--compact">
-            <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">
-              <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>
-          <md-chips class="sg-readonly hide-sm"
+            <md-chips class="sg-readonly hide-xs"
                       ng-show="viewer.showFlags"
                       ng-model="viewer.message.flags"
-                      md-on-append="$chip.name"
+                      md-transform-chip="$chip.name"
                       md-on-remove="viewer.message.removeTag($chip)">
-            <md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
-            <md-autocomplete
-                md-selected-item="viewer.tags.selected"
-                md-selected-item-change="viewer.message.addTag(viewer.tags.selected.name)"
-                md-search-text="viewer.tags.searchText"
-                md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
-                md-autoselect="true"
-                label:placeholder="Add a tag">
-              <md-item-template>
-                <span md-highlight-text="viewer.tags.searchText"
-                      md-highlight-flags="^i">{{tag.description}}</span>
-              </md-item-template>
-            </md-autocomplete>
-          </md-chips>
-        </md-toolbar>
-        <md-content md-scroll-x="md-scroll-x" class="md-padding md-whiteframe-z1">
+              <md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
+              <md-autocomplete
+                  md-selected-item="viewer.tags.selected"
+                  md-selected-item-change="viewer.message.addTag(viewer.tags.selected.name)"
+                  md-search-text="viewer.tags.searchText"
+                  md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
+                  md-autoselect="true"
+                  label:placeholder="Add a tag">
+                <md-item-template>
+                  <span md-highlight-text="viewer.tags.searchText"
+                        md-highlight-flags="^i">{{tag.description}}</span>
+                </md-item-template>
+              </md-autocomplete>
+            </md-chips>
+          </div>
+          <md-divider><!-- end of headers --></md-divider>
+          <div>
 
-          <!-- Load external images -->
-          <md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
-                         ng-show="viewer.message.$hasUnsafeContent">
-            <div layout="row" layout-align="start center" class="layout-fill">
-              <div class="md-tile-left">
-                <md-icon>collections</md-icon>
+            <!-- Load external images -->
+            <md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
+                           ng-show="viewer.message.$hasUnsafeContent">
+              <div layout="row" layout-align="start center" class="layout-fill">
+                <div class="md-tile-left">
+                  <md-icon>collections</md-icon>
+                </div>
+                <p class="hide show-gt-md"><var:string label:value="This message contains external images."/></p>
+                <div class="md-flex"><!-- spacer --></div>
+                <md-button label:aria-label="Load Images"
+                           ng-click="viewer.message.loadUnsafeContent()">
+                  <var:string label:value="Load Images"/>
+                </md-button>
               </div>
-              <p class="hide show-gt-md"><var:string label:value="This message contains external images."/></p>
-              <div class="md-flex"><!-- spacer --></div>
-              <md-button label:aria-label="Load Images"
-                         ng-click="viewer.message.loadUnsafeContent()">
-                <var:string label:value="Load Images"/>
-              </md-button>
-            </div>
-          </md-whiteframe>
+            </md-whiteframe>
 
-          <!-- Send MDN -->
-          <md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
-                         ng-show="viewer.message.shouldAskReceipt == 1">
-            <div layout="row" layout-align="start center">
-              <div class="md-tile-left">
-                <md-icon>message</md-icon>
+            <!-- Send MDN -->
+            <md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
+                           ng-show="viewer.message.shouldAskReceipt == 1">
+              <div layout="row" layout-align="start center">
+                <div class="md-tile-left">
+                  <md-icon>message</md-icon>
+                </div>
+                <p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
               </div>
-              <p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
-            </div>
-            <div class="layout-fill" layout="row" layout-align="end center">
-              <md-button label:aria-label="No"
-                         type="button"
-                         ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
-              <md-button label:aria-label="Yes"
-                         type="submit"
-                         ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
-            </div>
-          </md-whiteframe>
+              <div class="layout-fill" layout="row" layout-align="end center">
+                <md-button label:aria-label="No"
+                           type="button"
+                           ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
+                <md-button label:aria-label="Yes"
+                           type="submit"
+                           ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
+              </div>
+            </md-whiteframe>
 
-          <div class="msg-body">
-            <div layout="row" layout-wrap="layout-wrap">
-              <div class="mailer_mailcontent" layout="row" layout-wrap="layout-wrap"
-                   ng-repeat="part in viewer.message.$content()"
-                   ng-class="part.msgclass">
-                <div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
-                <div ng-if="part.compile" sg-compile="part.content" sg-zoomable-image="sg-zoomable-image"><!-- msg --></div>
+            <div class="msg-body">
+              <div layout="row" layout-wrap="layout-wrap">
+                <div class="mailer_mailcontent" layout="row" layout-wrap="layout-wrap"
+                     ng-repeat="part in viewer.message.$content()"
+                     ng-class="part.msgclass">
+                  <div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
+                  <div ng-if="part.compile" sg-compile="part.content" sg-zoomable-image="sg-zoomable-image"><!-- msg --></div>
+                </div>
               </div>
             </div>
           </div>
-        </md-content>
-      </div>
-    </md-content>
+        </md-card-content>
+      </md-card>
+    </div>
+    <div class="layout-fill sg-back" layout="column">
+      <md-card>
+        <md-card-actions layout="row" layout-align="end center">
+          <md-button class="md-icon-button"
+                     label:aria-label="Close"
+                     ng-click="viewer.toggleRawSource()">
+            <md-icon>arrow_forward</md-icon>
+          </md-button>
+        </md-card-actions>
+        <md-card-content>
+          <pre>{{viewer.rawSource}}</pre>
+        </md-card-content>
+      </md-card>
+    </div>
   </div>
 </container>
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 24ae11631..b431b05b6 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -22,7 +22,9 @@
   </script>
 
   <script type="text/ng-template" id="preferences.html">
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" layout="column"
+                md-component-id="left" md-is-locked-open="isGtMedium"
+                ng-class="{ 'sg-closed': leftIsClose }">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <md-list>
@@ -62,9 +64,7 @@
 
       <!-- TOP RIGHT TOOLBAR -->
       <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
-        <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
-          <var:component className="UIxTopnavToolbarTemplate" />
-        </div>
+        <var:component className="UIxTopnavToolbarTemplate" />
         <md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
                    ng-click="app.save()">
           <md-icon>save</md-icon>
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 415aa5d02..aa39b6bfd 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -49,7 +49,7 @@
           </md-autocomplete>
         </md-chips>
         <!-- classification -->
-        <md-radio-group layout="row" layout-align="space-around center"
+        <md-radio-group class="md-padding" layout="row" layout-align="space-around center"
                         ng-model="editor.component.classification">
           <md-radio-button value="public">
             <var:string label:value="label_Public"/>
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
index c7342767f..87345f6ef 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -4,7 +4,7 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <md-dialog flex="40" flex-md="80" flex-sm="100">
+  <md-dialog flex="40" flex-sm="80" flex-xs="100">
     <md-toolbar ng-class="editor.component.getClassName('bg')">
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
@@ -24,7 +24,7 @@
           <md-menu-content>
             <md-menu-item>
               <md-button label:aria-label="View Raw Source"
-                         ng-click="editor.viewRawSource($event)">
+                         ng-click="editor.toggleRawSource($event)">
                 <var:string label:value="View Raw Source"/>
               </md-button>
             </md-menu-item>
diff --git a/UI/Templates/SchedulerUI/UIxCalDayTable.wox b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
index c336f8cfa..b151e8608 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayTable.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayTable.wox
@@ -6,7 +6,7 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:rsrc="OGo:url"
     xmlns:label="OGo:label">
-  <md-toolbar class="daysView md-hue-1" var:sg-view="currentView">
+  <md-toolbar class="daysView" var:sg-view="currentView">
 
     <!-- Display today abreviation and date -->
     <div class="days dayLabels">
diff --git a/UI/Templates/SchedulerUI/UIxCalDayView.wox b/UI/Templates/SchedulerUI/UIxCalDayView.wox
index 6a2027ec3..8399983b2 100644
--- a/UI/Templates/SchedulerUI/UIxCalDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalDayView.wox
@@ -7,8 +7,8 @@
     xmlns:rsrc="OGo:url"
     xmlns:label="OGo:label">
 
-  <md-toolbar hide-sm="hide-sm">
-    <div class="md-toolbar-tools">
+  <md-card>
+    <md-card-actions layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Day"
                  var:date="prevDayQueryParameters.day"
@@ -35,13 +35,13 @@
       <a class="md-icon-button md-button"
          label:aria-label="Multicolumn Day View"
          href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
-    </div>
-  </md-toolbar>
+    </md-card-actions>
 
-  <var:component
-      className="UIxCalDayTable"
-      startDate="startDate"
-      const:CSSClass="dayOverview"
-      const:numberOfDays="1"
-      const:currentView="dayview"/>
+    <var:component
+        className="UIxCalDayTable"
+        startDate="startDate"
+        const:CSSClass="dayOverview"
+        const:numberOfDays="1"
+        const:currentView="dayview"/>
+  </md-card>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 895157e70..a064965df 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -360,7 +360,7 @@
       <div layout="row" class="md-flex">
       <div class="view-list" layout="column">
 
-        <md-toolbar class="md-whiteframe-z1"
+        <md-toolbar class="md-accent md-hue-1"
                     ng-show="list.component.$selectedCount() == 0">
           <!-- sort/filter mode (default) -->
           <div class="md-toolbar-tools" layout="row" ng-hide="list.mode.search">
@@ -576,6 +576,8 @@
           </div>
         </md-toolbar>
 
+        <md-divider><!-- divider --></md-divider>
+
         <md-content layout="column" class="view-list">
           <md-tabs md-dynamic-height="true"
                    md-selected="list.selectedList">
@@ -583,9 +585,6 @@
             <md-tab label:label="Events"
                     md-on-select="list.selectComponentType('events')">
               <md-subheader>
-                <md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
-                  <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
-                </md-button>
                 <span>{{list.component.$queryEvents.filterpopup | loc}}</span>
               </md-subheader>
               <md-list class="sg-section-list">
@@ -626,9 +625,6 @@
             <md-tab label:label="Tasks"
                     md-on-select="list.selectComponentType('tasks')">
               <md-subheader>
-                <md-button class="md-icon-button hide show-gt-sm" ng-click="toggleLeft()">
-                  <md-icon ng-class="{'md-rotate-180': leftIsClose }">keyboard_arrow_left</md-icon>
-                </md-button>
                 <span>{{list.component.$queryTasks.filterpopup | loc}}</span>
               </md-subheader>
               <md-list class="sg-section-list">
@@ -680,7 +676,7 @@
           </md-button>
         </md-content>
         </div>
-        <div id="detailView" class="view-detail" hide-xs="hide-xs" layout="column" ui-view="calendarView">
+        <div id="detailView" class="view-detail hide-xs" layout="column" ui-view="calendarView">
           <!-- calendar view -->
         </div>
       </div>
@@ -693,7 +689,7 @@
 
   <!-- modal for calendar import -->
   <script type="text/ng-template" id="UIxCalendarImportDialog">
-    <md-dialog flex="40" flex-sm="100" label:aria-label="Import Calendar">
+    <md-dialog flex="40" flex-xs="100" label:aria-label="Import Calendar">
       <md-toolbar>
         <div class="md-toolbar-tools">
           <md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>
diff --git a/UI/Templates/SchedulerUI/UIxCalMonthView.wox b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
index ac7351032..de432d537 100644
--- a/UI/Templates/SchedulerUI/UIxCalMonthView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
@@ -7,22 +7,13 @@
     xmlns:rsrc="OGo:url"
     xmlns:label="OGo:label">
 
-  <md-toolbar class="md-whiteframe-z1" hide-sm="hide-sm">
-    <div class="md-toolbar-tools">
+  <md-card>
+    <md-card-actions layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Month"
                  var:date="prevMonthQueryParameters.day"
                  ng-click="calendar.changeView($event)"><md-icon>chevron_left</md-icon></md-button>
-      <md-input-container>
-        <md-select ng-model="calendar.nav.month">
-          <md-option><var:string value="monthNameOfThisMonth" /></md-option>
-        </md-select>
-      </md-input-container>
-      <md-input-container>
-        <md-select ng-model="calendar.nav.year">
-          <md-option><var:string value="selectedDate.yearOfCommonEra" /></md-option>
-        </md-select>
-      </md-input-container>
+          <var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" />
       <md-button class="md-icon-button"
                  label:aria-label="Next Month"
                  var:date="nextMonthQueryParameters.day"
@@ -44,60 +35,60 @@
       <a class="md-icon-button md-button"
          label:aria-label="Multicolumn Day View"
          href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
-    </div>
-  </md-toolbar>
+    </md-card-actions>
 
-  <md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
-    <div layout="row" layout-align="center center"
-         class="md-flex md-default-theme md-fg md-hue-1">
-      <var:foreach list="headerDaysToDisplay" item="currentTableDay">
-        <div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
-      </var:foreach>
-    </div>
-  </md-toolbar>
-
-  <md-content class="md-flex" sg-calendar-scroll-view="monthly">
-    <div class="calendarView monthView">
-      <md-grid-list
-          md-cols="7"
-          md-row-height="1:1"
-          md-gutter="0">
-        <var:foreach list="weeksToDisplay" item="currentWeek">
-          <var:foreach list="currentWeek" item="currentTableDay">
-            <md-grid-tile
-                md-rowspan="1"
-                md-colspan="1"
-                var:class="dayCellClasses"
-                var:id="currentDayId"
-                >
-              <sg-calendar-day layout="column" layout-fill="true"
-                               var:sg-day="currentTableDay.shortDateString"
-                               var:sg-day-number="currentDayNumber"
-                               var:sg-day-string="currentTableDay.iso8601DateString">
-                <div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
-                <var:if condition="currentTableDay.isToday">
-                  <span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
-                </var:if>
-                <var:if condition="currentTableDay.isToday" const:negate="YES">
-                  <span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
-                </var:if>
-                </div>
-                <md-content
-                    sg-draggable-calendar-block="sg-draggable-calendar-block"
-                    class="clickableDayCell">
-                  <sg-calendar-month-day
-                      sg-blocks="calendar.views[0].blocks"
-                      sg-click="list.openEvent(event, component)"
-                      var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
-                </md-content>
-                <sg-calendar-month-event
-                    sg-calendar-ghost="sg-calendar-ghost"
-                    sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
-              </sg-calendar-day>
-            </md-grid-tile>
-          </var:foreach>
+    <md-toolbar md-scroll-shrink="true" class="monthView md-hue-1">
+      <div layout="row" layout-align="center center"
+           class="md-flex md-default-theme md-fg md-hue-1">
+        <var:foreach list="headerDaysToDisplay" item="currentTableDay">
+          <div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
         </var:foreach>
-      </md-grid-list>
-    </div>
-  </md-content>
+      </div>
+    </md-toolbar>
+
+    <md-content class="md-flex" sg-calendar-scroll-view="monthly">
+      <div class="calendarView monthView">
+        <md-grid-list
+            md-cols="7"
+            md-row-height="1:1"
+            md-gutter="0">
+          <var:foreach list="weeksToDisplay" item="currentWeek">
+            <var:foreach list="currentWeek" item="currentTableDay">
+              <md-grid-tile
+                  md-rowspan="1"
+                  md-colspan="1"
+                  var:class="dayCellClasses"
+                  var:id="currentDayId"
+                  >
+                <sg-calendar-day layout="column" layout-fill="true"
+                                 var:sg-day="currentTableDay.shortDateString"
+                                 var:sg-day-number="currentDayNumber"
+                                 var:sg-day-string="currentTableDay.iso8601DateString">
+                  <div class="sg-calendar-tile-header md-default-theme md-fg md-hue-2">
+                    <var:if condition="currentTableDay.isToday">
+                      <span class="md-default-theme md-bg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
+                    </var:if>
+                    <var:if condition="currentTableDay.isToday" const:negate="YES">
+                      <span class=""><var:string value="currentTableDay.dayOfMonth"/></span> <var:string value="dayHeaderMonth"/>
+                    </var:if>
+                  </div>
+                  <md-content
+                      sg-draggable-calendar-block="sg-draggable-calendar-block"
+                      class="clickableDayCell">
+                    <sg-calendar-month-day
+                        sg-blocks="calendar.views[0].blocks"
+                        sg-click="list.openEvent(event, component)"
+                        var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
+                  </md-content>
+                  <sg-calendar-month-event
+                      sg-calendar-ghost="sg-calendar-ghost"
+                      sg-block="list.component.$ghost"><!-- drag ghost --></sg-calendar-month-event>
+                </sg-calendar-day>
+              </md-grid-tile>
+            </var:foreach>
+          </var:foreach>
+        </md-grid-list>
+      </div>
+    </md-content>
+  </md-card>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
index c888c920b..758408cd6 100644
--- a/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
@@ -6,9 +6,9 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:rsrc="OGo:url"
     xmlns:label="OGo:label">
-    
-  <md-toolbar hide-sm="hide-sm">
-    <div class="md-toolbar-tools">
+
+  <md-card>
+    <md-card-actions layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Day"
                  var:date="prevDayQueryParameters.day"
@@ -35,12 +35,12 @@
          label:aria-label="Multicolumn Day View"
          ng-disabled="true"
          href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
-    </div>
-  </md-toolbar>
+    </md-card-actions>
 
-  <var:component
-      className="UIxCalDayTable"
-      startDate="startDate"
-      const:numberOfDays="1"
-      const:currentView="multicolumndayview"/>
+    <var:component
+        className="UIxCalDayTable"
+        startDate="startDate"
+        const:numberOfDays="1"
+        const:currentView="multicolumndayview"/>
+  </md-card>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxCalWeekView.wox b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
index f652b358b..c8ef3d322 100644
--- a/UI/Templates/SchedulerUI/UIxCalWeekView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalWeekView.wox
@@ -7,8 +7,8 @@
     xmlns:rsrc="OGo:url"
     xmlns:label="OGo:label">
 
-  <md-toolbar hide-sm="hide-sm">
-    <div class="md-toolbar-tools">
+  <md-card>
+    <md-card-actions layout="row" layout-align="start center">
       <md-button class="md-icon-button"
                  label:aria-label="Previous Week"
                  var:date="prevWeekQueryParameters.day"
@@ -35,13 +35,12 @@
       <a class="md-icon-button md-button"
          label:aria-label="Multicolumn Day View"
          href="#/calendar/multicolumnday"><md-icon>view_array</md-icon></a>
-    </div>
-  </md-toolbar>
-
+    </md-card-actions>
   <var:component
       className="UIxCalDayTable"
       startDate="startDate"
       const:CSSClass="weekOverview"
       const:numberOfDays="7"
       const:currentView="weekview"/>
+  </md-card>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index 542d27ee1..b0e32485c 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -62,8 +62,8 @@
           </md-radio-button>
         </md-radio-group>
         <!-- priority -->
-        <div layout="row" layout-align="center center">
-          <div flex="20"><var:string label:value="Priority"/></div>
+        <div class="pseudo-input-container">
+          <label class="pseudo-input-label"><var:string label:value="Priority"/></label>
           <md-slider class="md-flex"
                      md-discrete="true"
                      ng-model="editor.component.priority"
diff --git a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
index 314b515fe..4b69c51bf 100644
--- a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
@@ -4,7 +4,7 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <md-dialog flex="40" flex-md="60" flex-sm="100">
+  <md-dialog flex="40" flex-sm="80" flex-xs="100">
     <md-toolbar ng-class="editor.component.getClassName('bg')">
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
@@ -24,7 +24,7 @@
           <md-menu-content>
             <md-menu-item>
               <md-button label:aria-label="View Raw Source"
-                         ng-click="editor.viewRawSource($event)">
+                         ng-click="editor.toggleRawSource($event)">
                 <var:string label:value="View Raw Source"/>
               </md-button>
             </md-menu-item>
diff --git a/UI/Templates/UIxSidenavToolbarTemplate.wox b/UI/Templates/UIxSidenavToolbarTemplate.wox
index 29d2ed0f9..8c8c0cbc8 100644
--- a/UI/Templates/UIxSidenavToolbarTemplate.wox
+++ b/UI/Templates/UIxSidenavToolbarTemplate.wox
@@ -4,13 +4,21 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <md-toolbar class="md-tall sg-padded md-hue-2">
-    <div layout="column" layout-align="center start">
-      <sg-avatar-image class="md-tile-left"
-                       sg-email="activeUser.email"
-                       size="64"><!-- avatar --></sg-avatar-image>
-      <p class="sg-md-title">{{activeUser.identification}}</p>
-      <p class="md-caption">{{activeUser.email}}</p>
+  <md-toolbar class="sg-padded md-hue-2 md-tall">
+    <sg-avatar-image class="md-tile-left"
+                     sg-email="activeUser.email"
+                     size="40"><!-- avatar --></sg-avatar-image>
+    <div layout="row" layout-align="space-between center">
+      <div style="overflow: hidden">
+        <p class="sg-md-title sg-no-wrap">{{activeUser.identification}}</p>
+        <p class="md-caption sg-no-wrap">{{activeUser.email}}</p>
+      </div>
+      <md-button class="md-icon-button"
+                 ng-hide="baseURL.endsWith('/Preferences')"
+                 ng-href="{{activeUser.path.preferences}}">
+        <md-icon>settings</md-icon>
+        <md-tooltip><var:string label:value="Preferences"/></md-tooltip>
+      </md-button>
     </div>
   </md-toolbar>
 </container>
diff --git a/UI/Templates/UIxTopnavToolbarTemplate.wox b/UI/Templates/UIxTopnavToolbarTemplate.wox
index eb38cb315..b7b4f81b8 100644
--- a/UI/Templates/UIxTopnavToolbarTemplate.wox
+++ b/UI/Templates/UIxTopnavToolbarTemplate.wox
@@ -5,71 +5,60 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
 
-  <div class="sg-toolbar-group-1" layout="row">
+  <div class="sg-toolbar-group-1 sg-toolbar-secondary" layout="row">
     <md-button ng-click="toggleLeft()"
-               class="hide-gt-sm sg-button-navicon sg-icon-button"
-               label:aria-label="Toggle Menu">
-      <md-icon>menu</md-icon>
+               class="md-icon-button"
+               label:aria-label="Toggle Menu"
+               ng-switch="leftIsClose">
+      <md-icon ng-switch-when="true">menu</md-icon>
+      <md-icon ng-switch-when="false">arrow_back</md-icon>
     </md-button>
-    <div class="sg-date-group sg-padded" layout="column" layout-align="space-between end">
+    <div class="sg-date-group sg-padded hide-xs" layout="column" layout-align="space-between end">
       <p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
       <p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
       <p class="sg-year" ng-bind="currentDay.year"><!-- year --></p>
     </div>
-    <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
+    <p class="sg-md-display-3 sg-date-today hide-xs" ng-bind="currentDay.day"><!-- day --></p>
   </div>
 
-  <div class="sg-toolbar-group-last">
-    <md-menu>
-      <md-button label:aria-label="Modules"
-                 class="sg-icon-button" ng-click="$mdOpenMenu($event)">
-        <md-icon>apps</md-icon>
+  <div class="sg-toolbar-group-last" layout="row" layout-align="center center">
+    <div class="md-toolbar-tools" layout="row"
+         layout-align="space-around start">
+      <md-button class="md-icon-button"
+                 ng-show="activeUser.path.calendar.length"
+                 ng-disabled="baseURL.endsWith('/Calendar/')"
+                 ng-href="{{activeUser.path.calendar}}">
+        <md-tooltip><var:string label:value="Calendar"/></md-tooltip>
+        <md-icon>event</md-icon>
       </md-button>
-      <md-menu-content width="8">
-        <div class="md-toolbar-tools" layout="row"
-             layout-align="space-around start">
-          <md-button class="sg-icon-button"
-                     ng-show="activeUser.path.calendar.length"
-                     ng-disabled="baseURL.endsWith('/Calendar/')"
-                     ng-href="{{activeUser.path.calendar}}">
-            <md-icon>event</md-icon>
-            <md-tooltip><var:string label:value="Calendar"/></md-tooltip>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     ng-disabled="baseURL.endsWith('/Contacts/')"
-                     ng-href="{{activeUser.path.contacts}}">
-            <md-icon>contacts</md-icon>
-            <md-tooltip><var:string label:value="Address Book"/></md-tooltip>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     ng-show="activeUser.path.mail.length"
-                     ng-disabled="baseURL.endsWith('/Mail/')"
-                     ng-href="{{activeUser.path.mail}}">
-            <md-icon>email</md-icon>
-            <md-tooltip><var:string label:value="Mail"/></md-tooltip>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     ng-disabled="baseURL.endsWith('/Preferences/')"
-                     ng-href="{{activeUser.path.preferences}}">
-            <md-icon>settings</md-icon>
-            <md-tooltip><var:string label:value="Preferences"/></md-tooltip>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     ng-disabled="baseURL.endsWith('/Administration/')"
-                     ng-show="activeUser.isSuperUser"
-                     ng-href="{{activeUser.path.administration}}">
-            <md-icon>settings_applications</md-icon>
-            <md-tooltip><var:string label:value="Administration"/></md-tooltip>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     ng-show="activeUser.path.logoff.length"
-                     ng-href="{{activeUser.path.logoff}}">
-            <md-icon>settings_power</md-icon>
-            <md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
-          </md-button>
-        </div>
-      </md-menu-content>
-    </md-menu>
+      <md-button class="md-icon-button"
+                 ng-disabled="baseURL.endsWith('/Contacts/')"
+                 ng-href="{{activeUser.path.contacts}}">
+        <md-icon>contacts</md-icon>
+        <md-tooltip><var:string label:value="Address Book"/></md-tooltip>
+      </md-button>
+      <md-button class="md-icon-button"
+                 ng-show="activeUser.path.mail.length"
+                 ng-disabled="baseURL.endsWith('/Mail/')"
+                 ng-href="{{activeUser.path.mail}}">
+        <md-icon>email</md-icon>
+        <md-tooltip><var:string label:value="Mail"/></md-tooltip>
+      </md-button>
+      <md-button class="md-icon-button"
+                 ng-disabled="baseURL.endsWith('/Administration/')"
+                 ng-show="activeUser.isSuperUser"
+                 ng-href="{{activeUser.path.administration}}">
+        <md-icon>settings_applications</md-icon>
+        <md-tooltip><var:string label:value="Administration"/></md-tooltip>
+      </md-button>
+      <div class="hide-xs" style="width: 40px"><!-- divider --></div>
+      <md-button class="md-icon-button"
+                 ng-show="activeUser.path.logoff.length"
+                 ng-href="{{activeUser.path.logoff}}">
+        <md-icon>settings_power</md-icon>
+        <md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
+      </md-button>
+    </div>
   </div>
 
 </container>
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index d43d64861..4c327eb77 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -131,6 +131,7 @@
    */
   configure.$inject = ['$logProvider', '$compileProvider', '$mdThemingProvider', '$httpProvider'];
   function configure($logProvider, $compileProvider, $mdThemingProvider, $httpProvider) {
+    // Accent palette
     $mdThemingProvider.definePalette('sogo-green', {
       '50': 'eaf5e9',
       '100': 'cbe5c8',
@@ -142,14 +143,16 @@
       '700': '388e3c',
       '800': '367d2e',
       '900': '225e1b',
-      'A100': 'b9f6ca',
+      // 'A100': 'b9f6ca',
+      'A100': 'ffffff', // assigned to md-hue-1
       'A200': '69f0ae',
       'A400': '00e676',
       'A700': '00c853',
       'contrastDefaultColor': 'dark',
-      'contrastDarkColors': ['50', '100', '200'],
+      // 'contrastDarkColors': ['50', '100', '200', 'A100'],
       'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900']
     });
+    // Primary palette
     $mdThemingProvider.definePalette('sogo-blue', {
       '50': 'f0faf9',
       '100': 'e1f5f3',
@@ -167,8 +170,9 @@
       'A700': '00b0c0',
       'contrastDefaultColor': 'light',
       'contrastDarkColors': ['50', '100', '200'],
-      'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
+      // 'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
     });
+    // Background palette
     $mdThemingProvider.definePalette('sogo-paper', {
       '50': 'fcf7f8',
       '100': 'f7f1dc',
@@ -191,14 +195,15 @@
     // Default theme definition
     $mdThemingProvider.theme('default')
       .primaryPalette('sogo-blue', {
-        'default': '300',
-        'hue-1': '100',
-        'hue-2': '400',
+        'default': '900',
+        'hue-1': '400',
+        'hue-2': '800',
         'hue-3': 'A700'
       })
       .accentPalette('sogo-green', {
         'default': '500',
-        'hue-1': '200',
+        // 'hue-1': '200',
+        'hue-1': 'A100',
         'hue-2': '300',
         'hue-3': 'A700'
       })
diff --git a/UI/WebServerResources/js/Common/mdColors.app.js b/UI/WebServerResources/js/Common/mdColors.app.js
index 2bbcd8bc2..0fcd14f46 100644
--- a/UI/WebServerResources/js/Common/mdColors.app.js
+++ b/UI/WebServerResources/js/Common/mdColors.app.js
@@ -40,7 +40,7 @@
         fgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
         bgDefaultHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
         fgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-fg']) + ' { color:{{value}};}'),
-        bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}};}'),
+        bgColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bg']) + ' { background-color:{{value}}; color:{{contrast}}; }'),
         bdrColor = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}','.md-bdr']) + ' { border-color:{{value}};}'),
         fgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-fg']) + ' { color:{{value}};}'),
         bgHue = $interpolate(buildCssSelectors(['.md-{{theme}}-theme','.md-{{palette}}.md-{{hue}}','.md-bg']) + ' { background-color:{{value}};}'),
@@ -79,24 +79,22 @@
     function addRule(fgInterpolate, bgInterpolate, themeName, paletteName, colorArray, hueName){
       // Set up interpolation functions to build css rules.
       if (!colorArray) return;
-      var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')';
+      var colorValue = 'rgb(' + colorArray.value[0] + ',' + colorArray.value[1] + ',' + colorArray.value[2] + ')',
+          colorContrast = 'rgb(' + colorArray.contrast[0] + ',' + colorArray.contrast[1] + ',' + colorArray.contrast[2] + ')',
+          context = {
+            theme: themeName,
+            palette: paletteName,
+            value: colorValue,
+            contrast: colorContrast,
+            hue: hueName
+          };
 
       // Insert foreground color rule
-      customSheet.insertRule(fgInterpolate({
-        theme: themeName,
-        palette: paletteName,
-        value: colorValue,
-        hue: hueName
-      }), index);
+      customSheet.insertRule(fgInterpolate(context), index);
       index += 1;
 
       // Insert background color rule
-      customSheet.insertRule(bgInterpolate({
-        theme: themeName,
-        palette: paletteName,
-        value: colorValue,
-        hue: hueName
-      }), index);
+      customSheet.insertRule(bgInterpolate(context), index);
       index += 1;
     }
 
diff --git a/UI/WebServerResources/js/Common/navController.js b/UI/WebServerResources/js/Common/navController.js
index dfd656ea4..4e4e80d67 100644
--- a/UI/WebServerResources/js/Common/navController.js
+++ b/UI/WebServerResources/js/Common/navController.js
@@ -15,7 +15,7 @@
     $scope.isPopup = sgSettings.isPopup;
     $scope.activeUser = sgSettings.activeUser();
     $scope.baseURL = sgSettings.baseURL();
-    $scope.leftIsClose = false;
+    $scope.leftIsClose = $mdMedia(sgConstant.xs);
 
     // Show current day in top bar
     $scope.currentDay = window.currentDay;
diff --git a/UI/WebServerResources/js/Contacts/CardController.js b/UI/WebServerResources/js/Contacts/CardController.js
index 057425d06..0f55b10e3 100644
--- a/UI/WebServerResources/js/Contacts/CardController.js
+++ b/UI/WebServerResources/js/Contacts/CardController.js
@@ -35,7 +35,8 @@
     vm.cancel = cancel;
     vm.confirmDelete = confirmDelete;
     vm.exportCard = exportCard;
-    vm.viewRawSource = viewRawSource;
+    vm.toggleRawSource = toggleRawSource;
+    vm.showRawSource = false;
 
     function addOrgUnit() {
       var i = vm.card.$addOrgUnit('');
@@ -137,38 +138,16 @@
       window.location.href = ApplicationBaseURL + '/' + vm.currentFolder.id + '/export?uid=' + vm.card.id;
     }
 
-    function viewRawSource($event) {
-      Card.$$resource.post(vm.currentFolder.id + '/' + vm.card.id, "raw").then(function(data) {
-        $mdDialog.show({
-          parent: angular.element(document.body),
-          targetEvent: $event,
-          clickOutsideToClose: true,
-          escapeToClose: true,
-          template: [
-            '<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Card Source') + '">',
-            '  <md-dialog-content class="md-dialog-content">',
-            '    <pre>',
-            data,
-            '    </pre>',
-            '  </md-dialog-content>',
-            '  <md-dialog-actions>',
-            '    <md-button ng-click="close()">' + l('Close') + '</md-button>',
-            '  </md-dialog-actions>',
-            '</md-dialog>'
-          ].join(''),
-          controller: CardRawSourceDialogController
+    function toggleRawSource($event) {
+      if (!vm.showRawSource && !vm.rawSource) {
+        Card.$$resource.post(vm.currentFolder.id + '/' + vm.card.id, "raw").then(function(data) {
+          vm.rawSource = data;
+          vm.showRawSource = true;
         });
-
-        /**
-         * @ngInject
-         */
-        CardRawSourceDialogController.$inject = ['scope', '$mdDialog'];
-        function CardRawSourceDialogController(scope, $mdDialog) {
-          scope.close = function() {
-            $mdDialog.hide();
-          };
-        }
-      });
+      }
+      else {
+        vm.showRawSource = !vm.showRawSource;
+      }
     }
   }
 
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index 6a7908c33..30fb2443e 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -16,7 +16,7 @@
     vm.message = stateMessage;
     vm.service = Message;
     vm.tags = { searchText: '', selected: '' };
-    vm.showFlags = stateMessage.flags.length > 0;
+    vm.showFlags = stateMessage.flags && stateMessage.flags.length > 0;
     vm.doDelete = doDelete;
     vm.close = close;
     vm.reply = reply;
@@ -27,7 +27,8 @@
     vm.closePopup = closePopup;
     vm.newMessage = newMessage;
     vm.saveMessage = saveMessage;
-    vm.viewRawSource = viewRawSource;
+    vm.toggleRawSource = toggleRawSource;
+    vm.showRawSource = false;
 
     // Watch the message model "flags" attribute to remove on-the-fly a tag from the IMAP message
     // when removed from the message viewer.
@@ -142,38 +143,16 @@
       window.location.href = ApplicationBaseURL + '/' + vm.mailbox.id + '/saveMessages?uid=' + vm.message.uid;
     }
 
-    function viewRawSource($event) {
-      Message.$$resource.post(vm.message.id, "viewsource").then(function(data) {
-        $mdDialog.show({
-          parent: angular.element(document.body),
-          targetEvent: $event,
-          clickOutsideToClose: true,
-          escapeToClose: true,
-          template: [
-            '<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Message Source') + '">',
-            '  <md-dialog-content class="md-dialog-content">',
-            '    <pre>',
-            data,
-            '    </pre>',
-            '  </md-dialog-content>',
-            '  <md-dialog-actions>',
-            '    <md-button ng-click="close()">' + l('Close') + '</md-button>',
-            '  </md-dialog-actions>',
-            '</md-dialog>'
-          ].join(''),
-          controller: MessageRawSourceDialogController
+    function toggleRawSource($event) {
+      if (!vm.showRawSource && !vm.rawSource) {
+        Message.$$resource.post(vm.message.id, "viewsource").then(function(data) {
+          vm.rawSource = data;
+          vm.showRawSource = true;
         });
-
-        /**
-         * @ngInject
-         */
-        MessageRawSourceDialogController.$inject = ['scope', '$mdDialog'];
-        function MessageRawSourceDialogController(scope, $mdDialog) {
-          scope.close = function() {
-            $mdDialog.hide();
-          };
-        }
-      });
+      }
+      else {
+        vm.showRawSource = !vm.showRawSource;
+      }
     }
   }
   
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index dccebaf66..6213c5eaa 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -19,7 +19,7 @@
     vm.replyAllOccurrences = replyAllOccurrences;
     vm.deleteOccurrence = deleteOccurrence;
     vm.deleteAllOccurrences = deleteAllOccurrences;
-    vm.viewRawSource = viewRawSource;
+    vm.toggleRawSource = toggleRawSource;
 
     // Load all attributes of component
     if (angular.isUndefined(vm.component.$futureComponentData)) {
@@ -106,15 +106,16 @@
       });
     }
 
-    function viewRawSource($event) {
+    function toggleRawSource($event) {
       Calendar.$$resource.post(vm.component.pid + '/' + vm.component.id, "raw").then(function(data) {
+        $mdDialog.hide();
         $mdDialog.show({
           parent: angular.element(document.body),
           targetEvent: $event,
           clickOutsideToClose: true,
           escapeToClose: true,
           template: [
-            '<md-dialog flex="80" flex-sm="100" aria-label="' + l('View Raw Source') + '">',
+            '<md-dialog flex="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
             '  <md-dialog-content class="md-dialog-content">',
             '    <pre>',
             data,
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index 391a81e53..107f8f4a5 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -20,6 +20,15 @@
     width: 100%;
 }
 
+// Remove left margin when in first menu button of dialogs
+.md-toolbar-tools {
+  md-menu:first-child {
+    .md-icon-button:first-child {
+      margin-left: 0
+    }
+  }
+}
+
 ///
 /// sg-icon-button
 /// according to Material design specs:
@@ -50,13 +59,12 @@ $button-fab-height: 56px;
 a.md-button.sg-icon-button,
 .md-button.sg-icon-button,
 md-list md-list-item button.md-button.sg-icon-button {
-  z-index: 1;
-  //line-height: inherit;
-  border-radius: 50%;
-  min-width: $iconButton-size;
+  @extend .md-button.md-icon-button;
   transition: $iconButton-transition;
-  .md-ripple-container {
-    border-radius: 50%;
+  &:hover:not([disabled]),
+  &:active {
+    background-color: transparent;
+    transform: scale($iconButton-hover-scale);
   }
 }
 
diff --git a/UI/WebServerResources/scss/components/card/card.scss b/UI/WebServerResources/scss/components/card/card.scss
index 5bee99a08..8ee76499b 100644
--- a/UI/WebServerResources/scss/components/card/card.scss
+++ b/UI/WebServerResources/scss/components/card/card.scss
@@ -8,6 +8,18 @@ md-card {
     transition: $swift-ease-in-out;
   }
 
+  md-card-actions:not(.layout-column) {
+    .md-button {
+      // "last-of-type" doesn't work well when we have multiple types so we overwrite md's directive
+      &.md-icon-button,
+      &.md-icon-button:last-of-type,
+      &.sg-icon-button,
+      &.sg-icon-button:last-of-type {
+        margin: 0 $baseline-grid * .5;
+      }
+    }
+  }
+
   // Collapsed/expanded states for cards in ACL editor
   &.sg-collapsed, &.sg-expanded {
     transition: $swift-ease-in-out;
diff --git a/UI/WebServerResources/scss/components/dialog/dialog.scss b/UI/WebServerResources/scss/components/dialog/dialog.scss
index 35ce2267f..2a96dcc92 100644
--- a/UI/WebServerResources/scss/components/dialog/dialog.scss
+++ b/UI/WebServerResources/scss/components/dialog/dialog.scss
@@ -15,17 +15,17 @@
 
 body.popup {
   md-dialog {
-    &[flex-sm="100"],
-    &.flex-sm-100 {
+    &[flex-xs="100"],
+    &.flex-xs-100 {
       @include fullscreen;
     }
   }
 }
 
-@media (max-width: $layout-breakpoint-sm) {
+@media (max-width: $layout-breakpoint-xs) {
   md-dialog {
-    &[flex-sm="100"],
-    &.flex-sm-100 {
+    &[flex-xs="100"],
+    &.flex-xs-100 {
       @include fullscreen;
     }
   }
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 37377c4cd..591c9ada9 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -21,7 +21,7 @@ $sg-color-chip-width: $subhead-font-size-base;
 md-list-item {
   .md-list-item-inner {
     flex-grow: 1; // use all column space
-    overflow: hidden;
+    //overflow: hidden;
 
     // Gain some space since we want small list items
     & > md-checkbox {
@@ -173,7 +173,7 @@ div.md-tile-left {
 
   &-counter-badge {
     border-left-width: 1px;
-    border-left-color: #999;
+    border-left-color: $colorGrey500;
     border-style: solid;
     margin: 0;
     padding: 0 rem(0.500);
diff --git a/UI/WebServerResources/scss/components/menu/menu.scss b/UI/WebServerResources/scss/components/menu/menu.scss
index 0d3914c8e..eea73fba0 100644
--- a/UI/WebServerResources/scss/components/menu/menu.scss
+++ b/UI/WebServerResources/scss/components/menu/menu.scss
@@ -1,2 +1,10 @@
 /// menu.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
+
+md-card {
+  md-card-actions:not(.layout-column) {
+    .md-menu {
+      padding: 0; // don't add padding so all icon buttons are of the same height
+    }
+  }
+}
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 3ab1d36cc..e0113a15a 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -50,6 +50,12 @@ md-toolbar,
       transform: translateX(-$touch-zone-width);
     }
   }
+  &.md-accent.md-hue-1 {
+    md-icon {
+      // Hack until this bug is fixed: https://github.com/angular/material/issues/5989
+      color: rgba(0,0,0,0.54);
+    }
+  }
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {
diff --git a/UI/WebServerResources/scss/views/LoginUI.scss b/UI/WebServerResources/scss/views/LoginUI.scss
index efc2294bf..1d8ed43fc 100644
--- a/UI/WebServerResources/scss/views/LoginUI.scss
+++ b/UI/WebServerResources/scss/views/LoginUI.scss
@@ -2,6 +2,7 @@
 
 [ui-view="login"] {
   md-content {
+    padding: 0;
     @include to(xs) {
       [id=logo] {
         text-align: center;
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index fd550dc4e..1b9d9e6d4 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -40,7 +40,7 @@
 
 .msg-date {
   font-size: $sg-font-size-2;
-  text-align: right;
+//  text-align: right;
 //  margin-bottom: 10px;
 //  margin-bottom: ($mg/2);
 }
@@ -77,6 +77,9 @@ md-sidenav {
   }
   .sg-item-name {
     line-height: 6 * $baseline-grid; // $list-item-height, 48px
+    &:focus {
+      outline: none;
+    }
   }
 }
 .msg-attachment-image,
@@ -144,6 +147,28 @@ md-sidenav {
   }
 }
 
+.sg-mail-editor {
+  .pseudo-input-container {
+    max-height: 400px;
+    overflow: hidden;
+    overflow-y: auto;
+    transition: $swift-ease-in;
+    &.ng-hide {
+      max-height: 0;
+      overflow: hidden;
+    }
+  }
+  md-dialog-content {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+  md-chip-template {
+    md-icon[ng-click] {
+      cursor: pointer;
+    }
+  }
+}
+
 //$total-columns: 13;
 //$column-gutter: 0;
 
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index e223fe1c6..de5814096 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -137,6 +137,15 @@ $block_radius: 3px;
     }
   }
 
+  md-card {
+    // All views wrap a md-card
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
   md-content[sg-calendar-scroll-view] {
     overflow-y: scroll;
     overflow-x: hidden;
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 9e5dae799..d9e9b2f08 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -165,5 +165,35 @@ $detailView-width: grid-step(8) !global;
       right: 0;
       overflow-x: hidden;
     }
+    md-card {
+      height: 100%;
+      margin: 0;
+    }
   }
-}
+
+  // Flippable view card, used to show raw source of cards and messages
+  perspective: 1000px;
+  .sg-reversible {
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    &.sg-flip {
+      transform: rotateY( 180deg );
+    }
+    .sg-face, .sg-back {
+      backface-visibility: hidden;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    .sg-face {
+      transform: rotateY( 0deg );
+    }
+    .sg-back {
+      transform: rotateY( 180deg );
+    }
+  }
+}
\ No newline at end of file