diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 458358835..01b4f7172 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -354,7 +354,7 @@
 
         <md-content id="contactsList" layout="column" class="md-flex">
           <md-subheader ng-show="addressbook.service.$query.value">
-            <md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
+            <md-button class="md-icon-button md-primary 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">
@@ -363,7 +363,7 @@
             </span>
           </md-subheader>
           <md-subheader ng-hide="addressbook.service.$query.value">
-            <md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
+            <md-button class="md-icon-button md-primary 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">
@@ -435,7 +435,7 @@
            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-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 contact selected"/></div>
         </md-content>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 79da022d3..a648e55a5 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -202,7 +202,7 @@
 
     <md-content id="messagesList" layout="column" class="md-flex">
       <md-subheader>
-        <md-button class="md-icon-button md-primary hide show-gt-md" ng-click="toggleLeft()">
+        <md-button class="md-icon-button md-primary 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="mailbox.service.selectedFolder.getLength()">
diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index 676bc4793..0715f2e70 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -21,7 +21,7 @@
         ng-controller="LoginController as app">
     <md-content class="ng-cloak md-whiteframe-z1"
                 layout="row" layout-align="center center"
-                layout-sm="column" layout-align-sm="space-between center"
+                layout-xs="column" layout-align-xs="space-between center"
                 md-scroll-y="true"
                 ng-show="app.showLogin">
       <div id="logo" class="md-padding">
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index e364cfb4b..3bb7d2e6f 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -121,7 +121,9 @@
          ng-repeat="category in app.categories"
          ng-model="category"><!-- stylesheet --></sg-category-stylesheet>
     <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+    <md-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">
         <!-- User's calendars -->
@@ -666,7 +668,7 @@
           </md-button>
         </md-content>
         </div>
-        <div id="detailView" class="view-detail" hide-sm="hide-sm" layout="column" ui-view="calendarView">
+        <div id="detailView" class="view-detail" hide-xs="hide-xs" layout="column" ui-view="calendarView">
           <!-- calendar view -->
         </div>
       </div>
diff --git a/UI/Templates/UIxTopnavToolbarTemplate.wox b/UI/Templates/UIxTopnavToolbarTemplate.wox
index ad687c902..eb38cb315 100644
--- a/UI/Templates/UIxTopnavToolbarTemplate.wox
+++ b/UI/Templates/UIxTopnavToolbarTemplate.wox
@@ -7,7 +7,7 @@
 
   <div class="sg-toolbar-group-1" layout="row">
     <md-button ng-click="toggleLeft()"
-               class="hide-gt-md sg-button-navicon sg-icon-button"
+               class="hide-gt-sm sg-button-navicon sg-icon-button"
                label:aria-label="Toggle Menu">
       <md-icon>menu</md-icon>
     </md-button>
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index 8c7f9a4d5..d43d64861 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -110,15 +110,16 @@
 
   // 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
-  // For some reasons, angular-material's break-points don't match the specs
-  // Here we define values according to specs
     .constant('sgConstant', {
-      'sm': '(max-width: 600px)',
-      'gt-sm': '(min-width: 600px)',
-      'md': '(min-width: 600px) and (max-width: 1024px)',
-      'gt-md': '(min-width: 1025px)',
-      'lg': '(min-width: 1024px) and (max-width: 1280px)',
-      'gt-lg': '(min-width: 1280px)'
+      '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)'
     })
 
     .config(configure)
diff --git a/UI/WebServerResources/js/Common/navController.js b/UI/WebServerResources/js/Common/navController.js
index d1d2a32f2..dfd656ea4 100644
--- a/UI/WebServerResources/js/Common/navController.js
+++ b/UI/WebServerResources/js/Common/navController.js
@@ -52,7 +52,7 @@
     //   detail.toggleClass('sg-close');
     // };
     $scope.$watch(function() {
-      return $mdMedia(sgConstant['gt-md']);
+      return $mdMedia(sgConstant['gt-sm']);
     }, function(newVal) {
       $scope.isGtMedium = newVal;
       if (newVal) {
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 02961f8ac..92e0b4756 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -6,8 +6,8 @@ $sidenav-min-space: $pitch;
 
 md-sidenav {
   &.md-locked-open {
-    @include from(lg) {
-      @include flex-col(lg, 4, 1, 0);
+    @include from(md) {
+      @include flex-col(md, 4, 1, 0);
       // Custom representation of a closed sidenav where the sidenav is pushed to the left;
       // Used in in "locked open" mode.
       &.sg-closed.md-sidenav-left {
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index db20ab3c1..73858ca8e 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -62,9 +62,10 @@ $touch-zone: $touch-zone-width;
 // angular-material share breakpoint values between sass and js files (/core/constant.js)
 // we might consider using a sass library to import values as json single source for both
 
-$layout-breakpoint-sm:     600px !default;
-$layout-breakpoint-md:     960px !default;
-$layout-breakpoint-lg:     1200px !default;
+$layout-breakpoint-xs:     600px !default;
+$layout-breakpoint-sm:     960px !default;
+$layout-breakpoint-md:     1280px !default;
+$layout-breakpoint-lg:     1920px !default;
 $layout-gutter-width:      ($baseline-grid * 2) !default;
 
 // Margins
@@ -81,15 +82,16 @@ $layout-breakpoint-lg:     1280px;
 // ----------------------------------------------------------------------------
 
 $base-grid-total-columns: (
-  'sm': 1,
-  'md': 16,
+  'xs': 1,
+  'sm': 16,
+  'md': 20,
   'lg': 20,
 );
 
 // Passing to breakpoint-slicer
-$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
+$slicer-breakpoints: 0 $layout-breakpoint-xs $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
 // todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
-$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
+$slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl';
 
 $media-pointer: (pointer fine);
 
diff --git a/UI/WebServerResources/scss/views/LoginUI.scss b/UI/WebServerResources/scss/views/LoginUI.scss
index bb2640e36..efc2294bf 100644
--- a/UI/WebServerResources/scss/views/LoginUI.scss
+++ b/UI/WebServerResources/scss/views/LoginUI.scss
@@ -2,7 +2,7 @@
 
 [ui-view="login"] {
   md-content {
-    @include to(sm) {
+    @include to(xs) {
       [id=logo] {
         text-align: center;
         img {
@@ -10,7 +10,7 @@
         }
       }
     }
-    @include from(md) {
+    @include from(sm) {
       &.ng-hide {
         [id=logo] {
           opacity: 0;
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 2233ac2a2..f9afcd26c 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -20,12 +20,12 @@ $block_radius: 3px;
 
   .view-list {
     min-width: ($listView-width - ($pitch * 2));
-    @include at(md){
-      @include flex-col(md, 6, 1, 1);
+    @include at(sm){
+      @include flex-col(sm, 6, 1, 1);
       min-width: ($pitch * 3);
     }
-    @include from(lg) {
-      @include flex-col(lg, 5, 1, 0);
+    @include from(md) {
+      @include flex-col(md, 5, 1, 0);
     }
 
     // The color chip is smaller; adjust the "selected" icon accordingly
@@ -40,11 +40,11 @@ $block_radius: 3px;
   }
 
   .view-detail {
-    @include at(md) {
-      @include flex-col(md, 10);
+    @include at(sm) {
+      @include flex-col(sm, 10);
     }
-    @include from(lg) {
-      @include flex-col(lg, 11, 1, 1);
+    @include from(md) {
+      @include flex-col(md, 11, 1, 1);
     }
   }
 
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index c3b97b046..9e5dae799 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -19,7 +19,7 @@ body.popup {
   .view-detail {
     max-width: 100%;
   }
-  @include from(md) {
+  @include from(sm) {
     [class|="view"] {
       position: static;
     }
@@ -57,14 +57,14 @@ $detailView-width: grid-step(8) !global;
       margin: 0;
     }
   }
-  @include at(md){
-    @include flex-col(md, 6, 1, 1);
+  @include at(sm){
+    @include flex-col(sm, 6, 1, 1);
     min-width: ($pitch * 3);
   }
-  @include from(lg) {
-    @include flex-col(lg, 6, 1, 0);
+  @include from(md) {
+    @include flex-col(md, 6, 1, 0);
   }
-  @include to(sm) {
+  @include to(xs) {
     width: 100%;
     min-width: 100%;
   }
@@ -74,17 +74,21 @@ $detailView-width: grid-step(8) !global;
   z-index: $z-index-view;
   //overflow-x: hidden;
   overflow: hidden;
-  @include at(md) {
-    @include flex-col(md, 10);
+  md-card {
+    overflow: hidden;
+  }
+
+  @include at(sm) {
+    @include flex-col(sm, 10);
     margin: 0;
   }
-  @include from(lg) {
+  @include from(md) {
     flex: 1 1 auto;
     margin: 0;
   }
 
   // No animation on medium to large screens
-  @include from(md) {
+  @include from(sm) {
     .md-static {
       position: static;
     }
@@ -129,7 +133,7 @@ $detailView-width: grid-step(8) !global;
   //   a. viewer slides out of view-detail and is removed from the DOM
   //   b. view-detail (transparent) slides outside view-list
   //   c. sg-close is added to view-detail
-  @include to(sm) {
+  @include to(xs) {
     display: block;
     background-color: transparent !important;
     position: absolute;