diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 51e8c6f98..11484523d 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -696,8 +696,10 @@
             </md-fab-actions>
           </md-fab-speed-dial>
         </div>
-        <div id="detailView" class="view-detail hide show-gt-xs md-default-theme md-background md-bg md-hue-2"
-             layout="column" ui-view="calendarView">
+        <div id="detailView" class="view-detail hide show-gt-xs"
+             layout="column"
+             md-colors="::{backgroundColor: 'default-background-200'}"
+             ui-view="calendarView">
           <!-- calendar view -->
         </div>
       </div>
diff --git a/UI/WebServerResources/angular-material b/UI/WebServerResources/angular-material
index 70cecda54..d774b76e6 160000
--- a/UI/WebServerResources/angular-material
+++ b/UI/WebServerResources/angular-material
@@ -1 +1 @@
-Subproject commit 70cecda543e9e4724307a674fde08d7330f024d8
+Subproject commit d774b76e6b664e2bb157a4d74db5e46198947dce
diff --git a/UI/WebServerResources/bower.json b/UI/WebServerResources/bower.json
index 8d7784d8c..ea5ead2df 100644
--- a/UI/WebServerResources/bower.json
+++ b/UI/WebServerResources/bower.json
@@ -10,7 +10,7 @@
     "angular-sanitize": "1.5.x",
     "angular-ui-router": "latest",
     "angular-file-upload": "latest",
-    "angular-material": "1.1.1-master-70cecda",
+    "angular-material": "1.1.1-master-d774b76",
     "file-saver.js": "latest",
     "lodash": "latest",
     "ng-sortable": "latest",
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index dd8064e85..1e83bd2ab 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -154,7 +154,7 @@
       '800': '367d2e',
       '900': '225e1b',
       // 'A100': 'b9f6ca',
-      'A100': 'fafafa', // assigned to md-hue-1
+      'A100': 'fafafa', // assigned to md-hue-1, equivalent to grey-50 (default background palette)
       'A200': '69f0ae',
       'A400': '00e676',
       'A700': '00c853',
@@ -213,15 +213,9 @@
       .accentPalette('sogo-green', {
         'default': '500',
         // 'hue-1': '200',
-        'hue-1': 'A100', // background-50
+        'hue-1': 'A100', // grey-50
         'hue-2': '300',
         'hue-3': 'A700'
-      })
-      .backgroundPalette('grey', {
-        'default': '50',
-        'hue-1': '200',
-        'hue-2': '300',
-        'hue-3': '500'
       });
 
     if (!DebugEnabled) {
diff --git a/UI/WebServerResources/scss/components/chips/chips.scss b/UI/WebServerResources/scss/components/chips/chips.scss
index e9b57b778..3167b59d0 100644
--- a/UI/WebServerResources/scss/components/chips/chips.scss
+++ b/UI/WebServerResources/scss/components/chips/chips.scss
@@ -10,7 +10,7 @@ md-chips {
         box-shadow: none;
       }
       .md-chip-content {
-        max-width: initial; // fix bug in ng-material
+        //max-width: initial; // fix bug in ng-material
       }
       // Custom 'chip remove' button used with chips in readonly mode
       .sg-chip-remove {
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 04f67df99..29fad1844 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -31,9 +31,9 @@ md-list-item {
   }
 
   // Fix for md-menu visibility when set as a secondary action in a list item
-  &._md-button-wrap > div.md-button:first-child > .md-button:first-child {
-    z-index: $z-index-sidenav - 2;
-  }
+//  &._md-button-wrap > div.md-button:first-child > .md-button:first-child {
+//    z-index: $z-index-sidenav - 2;
+//  }
   .md-secondary-container {
     z-index: $z-index-sidenav - 1;
   }
diff --git a/UI/WebServerResources/scss/components/panel/_extends.scss b/UI/WebServerResources/scss/components/panel/_extends.scss
new file mode 100644
index 000000000..17534b0cf
--- /dev/null
+++ b/UI/WebServerResources/scss/components/panel/_extends.scss
@@ -0,0 +1,2 @@
+/*! panel/_extends.scss - */
+@import '../../../angular-material/src/components/panel/panel.scss';
diff --git a/UI/WebServerResources/scss/components/panel/panel.scss b/UI/WebServerResources/scss/components/panel/panel.scss
new file mode 100644
index 000000000..48c4ab4ca
--- /dev/null
+++ b/UI/WebServerResources/scss/components/panel/panel.scss
@@ -0,0 +1 @@
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/virtualRepeat/virtual-repeat.scss b/UI/WebServerResources/scss/components/virtualRepeat/virtual-repeat.scss
index 52719c083..43d732204 100644
--- a/UI/WebServerResources/scss/components/virtualRepeat/virtual-repeat.scss
+++ b/UI/WebServerResources/scss/components/virtualRepeat/virtual-repeat.scss
@@ -1,11 +1,11 @@
 /// virtualRepeater.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
-md-virtual-repeat-container {
-  md-list {
-    // Fix weird scroll behavior when reaching bottom of list
-    // See https://github.com/angular/material/issues/4169
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
\ No newline at end of file
+//.md-virtual-repeat-container {
+//  md-list {
+//    // Fix weird scroll behavior when reaching bottom of list
+//    // See https://github.com/angular/material/issues/4169
+//    padding-top: 0;
+//    padding-bottom: 0;
+//  }
+//}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 877194515..9eba56eeb 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -1,12 +1,5 @@
 /// variables.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
-// Include rem function from angular-material/src/core/style/variables.scss
-// ------------------------------------------------------------------------
-@function rem($multiplier) {
-  $font-size: 10px;
-  @return $multiplier * $font-size;
-}
-
 // palettes import -
 // ------------------------------------------------------------------------------
 // fixme : consolidate all settings and imports in a decent 'settings' file
@@ -23,6 +16,11 @@
 $font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
 $font-size:   10px;
 
+//-- Must be defined before $font-size.
+@function rem($multiplier) {
+  @return $multiplier * $font-size;
+}
+
 $display-4-font-size-base: rem(11.20) !default;
 $display-3-font-size-base: rem(5.600) !default;
 $display-2-font-size-base: rem(4.500) !default;
@@ -168,14 +166,15 @@ $z-index-toast: 105 !default;
 $z-index-tooltip: 100 !default;
 $z-index-menu: 100 !default;
 $z-index-calendar-pane: 100 !default;
-$z-index-select: 90 !default;
+//$z-index-select: 90 !default;
+$z-index-select: 106 !default;
 $z-index-dialog: 80 !default;
 $z-index-bottom-sheet: 70 !default;
 $z-index-scroll-mask: 65 !default;
 $z-index-scroll-mask-bar: 65 !default;
 $z-index-sidenav: 60 !default;
 $z-index-backdrop: 50 !default;
-$z-index-fab: 60 !default;
+$z-index-fab: 20 !default;
 $z-index-progress-circular: 2 !default; // Used to fix animation bug in Chrome
 $z-index-toolbar: 10 !default;
 $z-index-view: 9;
@@ -213,6 +212,7 @@ $button-fab-width: rem(5.600) !default;
 $button-fab-height: rem(5.600) !default;
 $button-fab-padding: rem(1.60) !default;
 
+
 // Shared Checkbox variables
 $checkbox-width: 20px !default;
 $checkbox-height: $checkbox-width !default;
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 0c8b26a68..a05dada96 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -45,6 +45,7 @@
 @import 'components/input/input';
 @import 'components/list/list';
 @import 'components/menu/menu';
+@import 'components/panel/panel';
 @import 'components/progressCircular/progress-circular';
 @import 'components/progressLinear/progress-linear';
 @import 'components/radioButton/radio-button';