diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 1f1e36cff..57b5e151d 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -445,7 +445,7 @@
            ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
            md-colors="::{backgroundColor: 'default-background-200'}"
            ui-view="card">
-        <md-content class="hide-xs md-flex"
+        <md-content class="hide show-gt-md md-flex"
                     md-colors="::{backgroundColor: 'default-background-200'}"
                     layout="column" layout-align="center center" layout-fill="layout-fill">
           <div class="sg-md-title"
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index fc2a50ff1..b6b10668b 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -9,7 +9,7 @@
     <div class="sg-face" layout="column" layout-fill="layout-fill">
       <md-card>
         <md-card-actions flex-none="flex-none" layout="row" layout-align="end center">
-          <md-button class="sg-icon-button hide show-xs"
+          <md-button class="sg-icon-button show hide-gt-md"
                      label:aria-label="Close"
                      ng-click="editor.close()">
             <md-icon>close</md-icon>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 05549063a..4163f77a8 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -322,7 +322,7 @@
        ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
        md-colors="::{backgroundColor: 'default-background-200'}"
        ui-view="message">
-    <md-content class="hide-xs md-flex"
+    <md-content class="hide show-gt-md md-flex"
                 md-colors="::{backgroundColor: 'default-background-200'}"
                 layout="column" layout-align="center center" layout-fill="layout-fill">
       <div class="sg-md-title"
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 0c6c7ef8c..fc970dce6 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -17,7 +17,7 @@
                      ng-click="viewer.closePopup()">
             <md-icon>close</md-icon>
           </md-button>
-          <md-button class="md-icon-button hide show-xs"
+          <md-button class="md-icon-button hide-gt-md"
                      ng-hide="isPopup"
                      label:aria-label="Close"
                      ng-click="viewer.close()">
@@ -58,7 +58,7 @@
             <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"
+          <md-button class="sg-icon-button hide show-gt-md" 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>
diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index e50f2d400..8860a4101 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -20,7 +20,7 @@
         ui-view="login"
         ng-controller="LoginController as app">
     <md-content class="ng-cloak md-whiteframe-z1"
-                layout-gt-sm="row" layout-align-gt-sm="start center"
+                layout-gt-md="row" layout-align-gt-md="start center"
                 layout="column" layout-align="space-between center"
                 md-scroll-y="true"
                 ng-show="app.showLogin">
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 3dbb5ecd4..2bb49c19a 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -648,7 +648,7 @@
           <md-icon>assignment_turned_in</md-icon>
         </md-button>
         </div>
-        <div id="detailView" class="view-detail hide-xs md-default-theme md-background md-bg md-hue-2"
+        <div id="detailView" class="view-detail hide show-gt-md md-default-theme md-background md-bg md-hue-2"
              layout="column" ui-view="calendarView">
           <!-- calendar view -->
         </div>
diff --git a/UI/Templates/UIxTopnavToolbar.wox b/UI/Templates/UIxTopnavToolbar.wox
index b2b44f530..63cb68647 100644
--- a/UI/Templates/UIxTopnavToolbar.wox
+++ b/UI/Templates/UIxTopnavToolbar.wox
@@ -7,18 +7,23 @@
 
   <div class="sg-toolbar-group-1" layout="row">
     <md-button ng-click="toggleLeft()"
-               class="md-icon-button"
+               class="md-icon-button hide-sm"
                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-icon ng-switch-when="true">fullscreen_exit</md-icon>
+      <md-icon ng-switch-when="false">fullscreen</md-icon>
     </md-button>
-    <div class="sg-date-group sg-padded hide-xs" layout="column" layout-align="space-between end">
+    <md-button ng-click="toggleLeft()"
+               class="md-icon-button hide show-sm"
+               label:aria-label="Toggle Menu">
+      <md-icon>menu</md-icon>
+    </md-button>
+    <div class="sg-date-group sg-padded hide-sm" 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 hide-xs" ng-bind="currentDay.day"><!-- day --></p>
+    <p class="sg-md-display-3 sg-date-today hide-sm" ng-bind="currentDay.day"><!-- day --></p>
   </div>
 
   <div class="sg-toolbar-group-last" layout="row" layout-align="center center">
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index 63aab7e6f..51054e169 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -110,17 +110,19 @@
     })
 
   // md break-points values are hard-coded in angular-material/src/core/util/constant.js
-  // $mdMedia has a built-in support for those values but can also evaluate others
+  // $mdMedia has a built-in support for those values but can also evaluate others.
+  // The following breakpoints match our CSS breakpoints in scss/core/variables.scss
     .constant('sgConstant', {
       'xs'    : '(max-width: 599px)'                         ,
       'gt-xs' : '(min-width: 600px)'                         ,
       'sm'    : '(min-width: 600px) and (max-width: 959px)'  ,
       'gt-sm' : '(min-width: 960px)'                         ,
-      'md'    : '(min-width: 960px) and (max-width: 1279px)' ,
-      'gt-md' : '(min-width: 1280px)'                        ,
-      'lg'    : '(min-width: 1280px) and (max-width: 1919px)',
-      'gt-lg' : '(min-width: 1920px)'                        ,
-      'xl'    : '(min-width: 1920px)'
+      'md'    : '(min-width: 960px) and (max-width: 1023px)' ,
+      'gt-md' : '(min-width: 1024px)'                        ,
+      'lg'    : '(min-width: 1024px) and (max-width: 1279px)',
+      'gt-lg' : '(min-width: 1280px)'                        ,
+      'xl'    : '(min-width: 1920px)'                        ,
+      'print' : 'print'
     })
 
     .config(configure)
diff --git a/UI/WebServerResources/js/Common/navController.js b/UI/WebServerResources/js/Common/navController.js
index f1c8fdce6..3568ac776 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 = $mdMedia(sgConstant.xs);
+    $scope.leftIsClose = !$mdMedia(sgConstant['gt-md']);
 
     // Show current day in top bar
     $scope.currentDay = window.currentDay;
@@ -58,7 +58,7 @@
     //   detail.toggleClass('sg-close');
     // };
     $scope.$watch(function() {
-      return $mdMedia(sgConstant['gt-sm']);
+      return $mdMedia(sgConstant['gt-md']);
     }, function(newVal) {
       $scope.isGtMedium = newVal;
       if (newVal) {
diff --git a/UI/WebServerResources/js/Contacts/AddressBooksController.js b/UI/WebServerResources/js/Contacts/AddressBooksController.js
index 1831b74ee..bdbcece62 100644
--- a/UI/WebServerResources/js/Contacts/AddressBooksController.js
+++ b/UI/WebServerResources/js/Contacts/AddressBooksController.js
@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  AddressBooksController.$inject = ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$window', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'FileUploader', 'sgFocus', 'Card', 'AddressBook', 'Dialog', 'sgSettings', 'User', 'stateAddressbooks'];
-  function AddressBooksController($state, $scope, $rootScope, $stateParams, $timeout, $window, $mdDialog, $mdToast, $mdMedia, $mdSidenav, FileUploader, focus, Card, AddressBook, Dialog, Settings, User, stateAddressbooks) {
+  AddressBooksController.$inject = ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$window', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'FileUploader', 'sgConstant', 'sgFocus', 'Card', 'AddressBook', 'Dialog', 'sgSettings', 'User', 'stateAddressbooks'];
+  function AddressBooksController($state, $scope, $rootScope, $stateParams, $timeout, $window, $mdDialog, $mdToast, $mdMedia, $mdSidenav, FileUploader, sgConstant, focus, Card, AddressBook, Dialog, Settings, User, stateAddressbooks) {
     var vm = this;
 
     vm.activeUser = Settings.activeUser;
@@ -30,7 +30,7 @@
         vm.editMode = false;
         AddressBook.$query.value = '';
         // Close sidenav on small devices
-        if ($mdMedia('xs'))
+        if (!$mdMedia(sgConstant['gt-md']))
           $mdSidenav('left').close();
         $state.go('app.addressbook', {addressbookId: folder.id});
       }
diff --git a/UI/WebServerResources/js/Mailer/MailboxesController.js b/UI/WebServerResources/js/Mailer/MailboxesController.js
index ef14092ba..909b77a3f 100644
--- a/UI/WebServerResources/js/Mailer/MailboxesController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxesController.js
@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
-  function MailboxesController($state, $timeout, $mdDialog, $mdToast, $mdMedia, $mdSidenav, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
+  MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', '$mdToast', '$mdMedia', '$mdSidenav', 'sgConstant', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
+  function MailboxesController($state, $timeout, $mdDialog, $mdToast, $mdMedia, $mdSidenav, sgConstant, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
     var vm = this,
         account,
         mailbox;
@@ -55,7 +55,7 @@
       vm.showingAdvancedSearch = true;
       vm.search.mailbox = path;
       // Close sidenav on small devices
-      if ($mdMedia('xs'))
+      if (!$mdMedia(sgConstant['gt-md']))
         $mdSidenav('left').close();
     }
 
@@ -217,7 +217,7 @@
       vm.showingAdvancedSearch = false;
       vm.service.$virtualMode = false;
       // Close sidenav on small devices
-      if ($mdMedia('xs'))
+      if (!$mdMedia(sgConstant['gt-md']))
         $mdSidenav('left').close();
       $state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) });
       $event.stopPropagation();
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index 132ad4ba6..78c02bb01 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  MessageController.$inject = ['$window', '$scope', '$state', '$mdMedia', '$mdDialog', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Calendar', 'Component', 'Account', 'Mailbox', 'Message'];
-  function MessageController($window, $scope, $state, $mdMedia, $mdDialog, stateAccounts, stateAccount, stateMailbox, stateMessage, encodeUriFilter, sgSettings, focus, Dialog, Calendar, Component, Account, Mailbox, Message) {
+  MessageController.$inject = ['$window', '$scope', '$state', '$mdMedia', '$mdDialog', 'sgConstant', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Calendar', 'Component', 'Account', 'Mailbox', 'Message'];
+  function MessageController($window, $scope, $state, $mdMedia, $mdDialog, sgConstant, stateAccounts, stateAccount, stateMailbox, stateMessage, encodeUriFilter, sgSettings, focus, Dialog, Calendar, Component, Account, Mailbox, Message) {
     var vm = this, messageDialog = null, popupWindow = null;
 
     // Expose controller
@@ -192,7 +192,7 @@
           }
 
           try {
-            if (nextMessage && !$mdMedia('xs')) {
+            if (nextMessage && $mdMedia(sgConstant['gt-md'])) {
               state.go('mail.account.mailbox.message', { messageId: nextMessage.uid });
               if (nextIndex < mailbox.$topIndex)
                 mailbox.$topIndex = nextIndex;
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index d18638b62..280c9e04e 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -119,7 +119,7 @@
           clickOutsideToClose: true,
           escapeToClose: true,
           template: [
-            '<md-dialog flex="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
+            '<md-dialog flex="40" flex-sm="80" flex-xs="100" aria-label="' + l('View Raw Source') + '">',
             '  <md-dialog-content class="md-dialog-content">',
             '    <pre>',
             data,