diff --git a/UI/WebServerResources/scss/components/backdrop/backdrop.scss b/UI/WebServerResources/scss/components/backdrop/backdrop.scss
index 3e1cfbf75..07334f525 100644
--- a/UI/WebServerResources/scss/components/backdrop/backdrop.scss
+++ b/UI/WebServerResources/scss/components/backdrop/backdrop.scss
@@ -1,3 +1,5 @@
+@import 'extends';
+
 md-backdrop {
   z-index: $z-index-backdrop;
   &.md-dialog-backdrop {
diff --git a/UI/WebServerResources/scss/components/card/_extends.scss b/UI/WebServerResources/scss/components/card/_extends.scss
new file mode 100644
index 000000000..ee61361b5
--- /dev/null
+++ b/UI/WebServerResources/scss/components/card/_extends.scss
@@ -0,0 +1,2 @@
+/*! card/_extends.scss - */
+@import '../../../angular-material/src/components/card/card.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/card/card.scss b/UI/WebServerResources/scss/components/card/card.scss
index 044746f6c..d14092022 100644
--- a/UI/WebServerResources/scss/components/card/card.scss
+++ b/UI/WebServerResources/scss/components/card/card.scss
@@ -1,3 +1,5 @@
+@import 'extends';
+
 $card-margin: 8px !default;
 $card-box-shadow: $whiteframe-shadow-z1 !default;
 
diff --git a/UI/WebServerResources/scss/components/checkbox/_extends.scss b/UI/WebServerResources/scss/components/checkbox/_extends.scss
new file mode 100644
index 000000000..892a34f79
--- /dev/null
+++ b/UI/WebServerResources/scss/components/checkbox/_extends.scss
@@ -0,0 +1,2 @@
+/*! checkbox/_extends.scss - */
+@import '../../../angular-material/src/components/checkbox/checkbox.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/checkbox/checkbox.scss b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
index f98b6df3b..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/checkbox/checkbox.scss
+++ b/UI/WebServerResources/scss/components/checkbox/checkbox.scss
@@ -1,91 +1 @@
-$checkbox-width: 18px !default;
-$checkbox-height: $checkbox-width !default;
-
-md-checkbox {
-  display: block;
-  margin: 15px;
-  white-space: nowrap;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-
-  .md-container {
-    position: relative;
-    top: 4px;
-    display: inline-block;
-    width: $checkbox-width;
-    height: $checkbox-height;
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: -10px;
-      right: -10px;
-      bottom: -10px;
-      left: -10px;
-    }
-
-    .md-ripple-container {
-      position: absolute;
-      display: block;
-      width: auto;
-      height: auto;
-      left: -15px;
-      top: -15px;
-      right: -15px;
-      bottom: -15px;
-    }
-  }
-
-  // unchecked
-  .md-icon {
-    transition: 240ms;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $checkbox-width;
-    height: $checkbox-height;
-    border: 2px solid;
-    border-radius: 2px;
-  }
-
-  &.md-checked .md-icon {
-    border: none;
-  }
-
-  // disabled
-  &[disabled] {
-    cursor: no-drop;
-  }
-
-  // focus
-  &:focus .md-label:not(:empty) {
-    border-color: black;
-  }
-
-
-  &.md-checked .md-icon:after {
-    transform: rotate(45deg);
-    position: absolute;
-    left: 6px;
-    top: 2px;
-    display: table;
-    width: 6px;
-    height: 12px;
-    border: 2px solid;
-    border-top: 0;
-    border-left: 0;
-    content: ' ';
-  }
-
-  .md-label {
-    border: 1px dotted transparent;
-    position: relative;
-    display: inline-block;
-    margin-left: 10px;
-    vertical-align: middle;
-    white-space: normal;
-    pointer-events: none;
-    user-select: text;
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/content/_extends.scss b/UI/WebServerResources/scss/components/content/_extends.scss
new file mode 100644
index 000000000..cb200b6b8
--- /dev/null
+++ b/UI/WebServerResources/scss/components/content/_extends.scss
@@ -0,0 +1,2 @@
+/*! content/_extends.scss - */
+@import '../../../angular-material/src/components/content/content.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/content/content.scss b/UI/WebServerResources/scss/components/content/content.scss
index 621feb4b5..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/content/content.scss
+++ b/UI/WebServerResources/scss/components/content/content.scss
@@ -1,28 +1 @@
-md-content {
-
-  display: block;
-  position: relative;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  &[md-scroll-y] {
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  &[md-scroll-x] {
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-  &[md-scroll-xy] {
-  }
-
-  &.md-padding {
-    padding: 8px;
-  }
-}
-
-@media (min-width: $layout-breakpoint-sm) {
-  md-content.md-padding {
-    padding: 16px;
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/dialog/_extends.scss b/UI/WebServerResources/scss/components/dialog/_extends.scss
new file mode 100644
index 000000000..f5a879edb
--- /dev/null
+++ b/UI/WebServerResources/scss/components/dialog/_extends.scss
@@ -0,0 +1,2 @@
+/*! dialog/_extends.scss - */
+@import '../../../angular-material/src/components/dialog/dialog.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/dialog/dialog.scss b/UI/WebServerResources/scss/components/dialog/dialog.scss
index f61b94733..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/dialog/dialog.scss
+++ b/UI/WebServerResources/scss/components/dialog/dialog.scss
@@ -1,65 +1 @@
-.md-dialog-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index: $z-index-dialog;
-}
-
-md-dialog {
-  &.transition-in {
-    opacity: 1;
-    transition: $swift-ease-out;
-    transform: translate3d(0,0,0) scale(1.0);
-  }
-  &.transition-out {
-    transition: $swift-ease-out;
-    transform: translate3d(0,100%,0) scale(0.2);
-  }
-
-  opacity: 0;
-  min-width: 240px;
-  max-width: 80%;
-  max-height: 80%;
-  margin: auto;
-  position: relative;
-  overflow: hidden; // stop content from leaking out of dialog parent
-
-  box-shadow: $whiteframe-shadow-z5;
-
-  display: flex;
-  flex-direction: column;
-
-  md-content {
-    order: 1;
-    padding: 24px;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-
-    *:first-child {
-      margin-top: 0px;
-    }
-  }
-
-  .md-actions {
-    display: flex;
-    order: 2;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 16px 16px;
-    min-height: $baseline-grid * 5;
-
-    > * {
-      margin-left: 8px;
-    }
-  }
-  &.md-content-overflow .md-actions {
-    border-top: 1px solid;
-  }
-
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/divider/_extends.scss b/UI/WebServerResources/scss/components/divider/_extends.scss
new file mode 100644
index 000000000..c75a614e1
--- /dev/null
+++ b/UI/WebServerResources/scss/components/divider/_extends.scss
@@ -0,0 +1,2 @@
+/*! divider/_extends.scss - */
+@import '../../../angular-material/src/components/divider/divider.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/divider/divider.scss b/UI/WebServerResources/scss/components/divider/divider.scss
index 764543e97..4dc99186c 100644
--- a/UI/WebServerResources/scss/components/divider/divider.scss
+++ b/UI/WebServerResources/scss/components/divider/divider.scss
@@ -1,3 +1,5 @@
+@import 'extends';
+
 md-divider {
   display: block;
   border-top: 1px solid;
diff --git a/UI/WebServerResources/scss/components/icon/_extends.scss b/UI/WebServerResources/scss/components/icon/_extends.scss
index c35d1fc43..4c553abfe 100644
--- a/UI/WebServerResources/scss/components/icon/_extends.scss
+++ b/UI/WebServerResources/scss/components/icon/_extends.scss
@@ -10,6 +10,7 @@
 /// if not compiled in a specific order
 /// todo : build with grunt
 ///
+@import "../../../angular-material/src/components/icon/icon.scss";
 @import "../../../bower_components/material-design-iconic-font/scss/_variables";
 // variables in source are not defaulted, we MUST override here
 // relative (to css) path for src fonts
diff --git a/UI/WebServerResources/scss/components/progressCircular/_extends.scss b/UI/WebServerResources/scss/components/progressCircular/_extends.scss
new file mode 100644
index 000000000..fda3a18b0
--- /dev/null
+++ b/UI/WebServerResources/scss/components/progressCircular/_extends.scss
@@ -0,0 +1,2 @@
+/*! progressCircular/_extends.scss - */
+@import '../../../angular-material/src/components/progressCircular/progressCircular.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/progressCircular/progressCircular.scss b/UI/WebServerResources/scss/components/progressCircular/progressCircular.scss
index a1dc16967..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/progressCircular/progressCircular.scss
+++ b/UI/WebServerResources/scss/components/progressCircular/progressCircular.scss
@@ -1,159 +1 @@
-$progress-circular-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1) !default;
-$progress-circular-duration : 5.25s !default;
-$progress-circular-circle-duration : $progress-circular-duration * 0.25 !default;
-$progress-circular-outer-duration : $progress-circular-duration * (5 / 9) !default;
-$progress-circular-sporadic-duration : $progress-circular-duration !default;
-$progress-circular-size : 50px !default;
-
-@keyframes outer-rotate {
-  100% { transform: rotate(360deg); }
-}
-@keyframes left-wobble {
-  0%, 100% { transform: rotate(130deg); }
-  50% { transform: rotate( -5deg); }
-}
-@keyframes right-wobble {
-  0%, 100% { transform: rotate(-130deg); }
-  50% { transform: rotate(   5deg); }
-}
-@keyframes sporadic-rotate {
-  12.5% { transform: rotate( 135deg); }
-  25% { transform: rotate( 270deg); }
-  37.5% { transform: rotate( 405deg); }
-  50% { transform: rotate( 540deg); }
-  62.5% { transform: rotate( 675deg); }
-  75% { transform: rotate( 810deg); }
-  87.5% { transform: rotate( 945deg); }
-  100% { transform: rotate(1080deg); }
-}
-
-md-progress-circular {
-  width: $progress-circular-size;
-  height: $progress-circular-size;
-  display: block;
-  position: relative;
-  padding-top: 0 !important;
-  margin-bottom: 0 !important;
-  overflow: hidden;
-  .md-inner {
-    width: $progress-circular-size;
-    height: $progress-circular-size;
-    position: relative;
-    .md-gap {
-      position: absolute;
-      left: $progress-circular-size * 0.5 - 1;
-      right: $progress-circular-size * 0.5 - 1;
-      top: 0;
-      bottom: 0;
-      border-top: 5px solid black;
-      box-sizing: border-box;
-    }
-    .md-left, .md-right {
-      position: absolute;
-      top: 0;
-      height: $progress-circular-size;
-      width: $progress-circular-size * 0.5;
-      overflow: hidden;
-      .md-half-circle {
-        position: absolute;
-        top: 0;
-        width: $progress-circular-size;
-        height: $progress-circular-size;
-        box-sizing: border-box;
-        border-width: 5px;
-        border-style: solid;
-        border-color: black black transparent;
-        border-radius: 50%;
-      }
-    }
-    .md-left {
-      left: 0;
-      .md-half-circle {
-        left: 0;
-        border-right-color: transparent;
-      }
-    }
-    .md-right {
-      right: 0;
-      .md-half-circle {
-        right: 0;
-        border-left-color: transparent;
-      }
-    }
-  }
-
-  $i: 0;
-  @while $i <= 100 {
-    &[value="#{$i}"] {
-      .md-inner {
-        .md-left {
-          .md-half-circle {
-            @if $i <= 50 {
-              transform: rotate(135deg);
-            } @else {
-              transition: transform 0.1s linear;
-              $deg: ($i - 50) / 50 * 180 + 135;
-              transform: rotate(#{$deg}deg);
-            }
-          }
-        }
-        .md-right {
-          .md-half-circle {
-            @if $i <= 50 {
-              transition: transform 0.1s linear;
-              $deg: $i / 50 * 180 - 135;
-              transform: rotate(#{$deg}deg);
-            } @else {
-              transform: rotate(45deg);
-            }
-          }
-        }
-        .md-gap {
-          border-bottom-width: 5px;
-          border-bottom-style: solid;
-          @if $i <= 50 {
-            border-bottom-color: transparent !important;
-          } @else {
-            transition: border-bottom-color 0.1s linear;
-          }
-        }
-      }
-    }
-    $i: $i + 1;
-  }
-
-  &:not([md-mode=indeterminate]) {
-    .md-inner {
-      .md-left, .md-right {
-        .md-half-circle {
-        }
-      }
-    }
-  }
-
-  &[md-mode=indeterminate] {
-    .md-spinner-wrapper {
-      animation: outer-rotate $progress-circular-outer-duration linear infinite;
-      .md-inner {
-        animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
-        .md-left, .md-right {
-          .md-half-circle {
-            animation-iteration-count: infinite;
-            animation-duration: ($progress-circular-duration * 0.25);
-            animation-timing-function: $progress-circular-ease-in-out;
-          }
-        }
-        .md-left {
-          .md-half-circle {
-            animation-name: left-wobble;
-          }
-        }
-        .md-right {
-          .md-half-circle {
-            animation-name: right-wobble;
-          }
-        }
-      }
-    }
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/progressLinear/_extends.scss b/UI/WebServerResources/scss/components/progressLinear/_extends.scss
new file mode 100644
index 000000000..6355e0ccd
--- /dev/null
+++ b/UI/WebServerResources/scss/components/progressLinear/_extends.scss
@@ -0,0 +1,2 @@
+/*! progressLinear/_extends.scss - */
+@import '../../../angular-material/src/components/progressLinear/progressLinear.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/progressLinear/progressLinear.scss b/UI/WebServerResources/scss/components/progressLinear/progressLinear.scss
index ee54d477e..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/progressLinear/progressLinear.scss
+++ b/UI/WebServerResources/scss/components/progressLinear/progressLinear.scss
@@ -1,201 +1 @@
-$progress-linear-bar-height:5px !default;
-
-md-progress-linear {
-  display: block;
-  width: 100%;
-  height: $progress-linear-bar-height;
-
-  .md-container {
-    overflow: hidden;
-    position: relative;
-    height: $progress-linear-bar-height;
-    top: $progress-linear-bar-height;
-    transform: translate(0, 5px) scale(1, 0);
-    transition: all .3s linear;
-  }
-
-  .md-container.md-ready {
-    transform: translate(0, 0) scale(1, 1);
-  }
-
-  .md-bar {
-    height: $progress-linear-bar-height;
-    position: absolute;
-    width: 100%;
-  }
-
-  .md-bar1, .md-bar2 {
-    transition: all 0.2s linear;
-  }
-
-  &[md-mode=determinate] {
-    .md-bar1 {
-      display: none;
-    }
-  }
-
-  &[md-mode=indeterminate] {
-    .md-bar1 {
-      animation: indeterminate1 4s infinite linear;
-    }
-
-    .md-bar2 {
-      animation: indeterminate2 4s infinite linear;
-    }
-  }
-
-  &[md-mode=buffer] {
-    .md-container {
-      background-color: transparent !important;
-    }
-
-    .md-dashed:before {
-      content: "";
-      display: block;
-      height: $progress-linear-bar-height;
-      width: 100%;
-      margin-top: 0px;
-      position: absolute;
-      background-color: transparent;
-      background-size: 10px 10px !important;
-      background-position: 0px -23px;
-      animation: buffer 3s infinite linear;
-    }
-  }
-
-  &[md-mode=query] {
-    .md-bar2 {
-      animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
-    }
-  }
-}
-
-@keyframes indeterminate1 {
-  0% {
-    transform: translateX(-25%) scale(.5, 1);
-  }
-  10% {
-    transform: translateX(25%) scale(.5, 1);
-  }
-  19.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  20% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  30% {
-    transform: translateX(37.5%) scale(.25, 1);
-  }
-  34.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  36.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  37% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  47% {
-    transform: translateX(20%) scale(.25, 1);
-  }
-  52% {
-    transform: translateX(35%) scale(.05, 1);
-  }
-  55% {
-    transform: translateX(35%) scale(.1, 1);
-  }
-  58% {
-    transform: translateX(50%) scale(.1, 1);
-  }
-  61.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  69.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  70% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  80% {
-    transform: translateX(20%) scale(.25, 1);
-  }
-  85% {
-    transform: translateX(35%) scale(.05, 1);
-  }
-  88% {
-    transform: translateX(35%) scale(.1, 1);
-  }
-  91% {
-    transform: translateX(50%) scale(.1, 1);
-  }
-  92.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  93% {
-    transform: translateX(-50%) scale(0, 1);
-  }
-  100% {
-    transform: translateX(-25%) scale(.5, 1);
-  }
-}
-
-@keyframes indeterminate2 {
-  0% {
-    transform: translateX(-50%) scale(0, 1);
-  }
-  25.99%{
-    transform: translateX(-50%) scale(0, 1);
-  }
-  28% {
-    transform: translateX(-37.5%) scale(.25, 1);
-  }
-  38% {
-    transform: translateX(37.5%) scale(.25, 1);
-  }
-  42.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  46.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  49.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-  50% {
-    transform: translateX(-50%) scale(0, 1);
-  }
-  60% {
-    transform: translateX(-25%) scale(.5, 1);
-  }
-  70% {
-    transform: translateX(25%) scale(.5, 1);
-  }
-  79.99% {
-    transform: translateX(50%) scale(0, 1);
-  }
-}
-
-@keyframes query {
-  0% {
-    opacity: 1;
-    transform: translateX(35%) scale(.3, 1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0, 1);
-  }
-}
-
-@keyframes buffer {
-  0% {
-    opacity: 1;
-    background-position: 0px -23px;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-    background-position: -200px -23px;
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/radioButton/_extends.scss b/UI/WebServerResources/scss/components/radioButton/_extends.scss
new file mode 100644
index 000000000..0800bdd9f
--- /dev/null
+++ b/UI/WebServerResources/scss/components/radioButton/_extends.scss
@@ -0,0 +1,2 @@
+/*! radioButton/_extends.scss - */
+@import '../../../angular-material/src/components/radioButton/radio-button.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/radioButton/radio-button.scss b/UI/WebServerResources/scss/components/radioButton/radio-button.scss
index 514a55b93..33b266beb 100644
--- a/UI/WebServerResources/scss/components/radioButton/radio-button.scss
+++ b/UI/WebServerResources/scss/components/radioButton/radio-button.scss
@@ -1,80 +1 @@
-$radio-width: 16px !default;
-$radio-height: $radio-width !default;
-
-md-radio-button,
-.md-switch-thumb { // Used in switch
-  display: block;
-  margin: 15px;
-  white-space: nowrap;
-  cursor: pointer;
-
-  input {
-    display: none;
-  }
-
-  .md-container {
-    position: relative;
-    top: 4px;
-    display: inline-block;
-    width: $radio-width;
-    height: $radio-width;
-    cursor: pointer;
-
-    .md-ripple-container {
-      position: absolute;
-      display: block;
-      width: $radio-width * 3; 
-      height: $radio-width * 3;
-      left: -$radio-width;
-      top: -$radio-width;
-    }
-  }
-
-
-  .md-off {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: $radio-width;
-    height: $radio-width;
-    border: solid 2px;
-    border-radius: 50%;
-    transition: border-color ease 0.28s;
-  }
-
-  .md-on {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $radio-width;
-    height: $radio-width;
-    border-radius: 50%;
-    transition: transform ease 0.28s;
-    transform: scale(0);
-  }
-
-  &.md-checked .md-on {
-    transform: scale(0.55);
-  }
-
-  .md-label {
-    position: relative;
-    display: inline-block;
-    margin-left: 10px;
-    margin-right: 10px;
-    vertical-align: middle;
-    white-space: normal;
-    pointer-events: none;
-    width: auto;
-  }
-
-  .circle {
-    border-radius: 50%;
-  }
-
-}
-md-radio-group {
-  border: 1px dotted transparent;
-  display: block;
-  outline: none;
-}
+@import "extends";
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/sidenav/_extends.scss b/UI/WebServerResources/scss/components/sidenav/_extends.scss
new file mode 100644
index 000000000..4a341d273
--- /dev/null
+++ b/UI/WebServerResources/scss/components/sidenav/_extends.scss
@@ -0,0 +1,2 @@
+/*! sidenav/_extends.scss - */
+@import '../../../angular-material/src/components/sidenav/sidenav.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/sidenav/sidenav.scss b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
index 3f7bbcb94..33b266beb 100644
--- a/UI/WebServerResources/scss/components/sidenav/sidenav.scss
+++ b/UI/WebServerResources/scss/components/sidenav/sidenav.scss
@@ -1,93 +1 @@
-$sidenav-default-width: 304px !default;
-
-md-sidenav {
-  position: absolute;
-
-  width: $sidenav-default-width;
-  min-width: $sidenav-default-width;
-  bottom: 0;
-  z-index: $z-index-sidenav;
-  background-color: white;
-  overflow: auto;
-  flex-direction: column;
-
-  &.md-closed {
-    display: none;
-  }
-  &.md-closed-add,
-  &.md-closed-remove {
-    display: flex;
-    /* this is required as of 1.3x to properly
-       apply all styling in a show/hide animation */
-    transition: 0s all;
-  }
-
-  &.md-closed-add.md-closed-add-active,
-  &.md-closed-remove.md-closed-remove-active {
-    transition: $swift-ease-out;
-  }
-
-  &.md-locked-open-add,
-  &.md-locked-open-remove {
-    position: static;
-    display: flex;
-    transform: translate3d(0, 0, 0);
-  }
-  &.md-locked-open {
-    width: $sidenav-default-width;
-    min-width: $sidenav-default-width;
-  }
-
-  &.md-locked-open,
-  &.md-locked-open.md-closed,
-  &.md-locked-open.md-closed.md-sidenav-left,
-  &.md-locked-open.md-closed.md-sidenav-right,
-  &.md-locked-open-remove.md-closed {
-    position: static;
-    display: flex;
-    transform: translate3d(0, 0, 0);
-  }
-  &.md-locked-open-remove-active {
-    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
-                min-width $swift-ease-in-duration $swift-ease-in-timing-function;
-    width: 0;
-    min-width: 0;
-  }
-
-  &.md-closed.md-locked-open-add {
-    width: 0;
-    min-width: 0;
-    transform: translate3d(0%, 0, 0);
-  }
-
-  &.md-closed.md-locked-open-add-active {
-    transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
-                min-width $swift-ease-in-duration $swift-ease-in-timing-function;
-    width: $sidenav-default-width;
-    min-width: $sidenav-default-width;
-    transform: translate3d(0%, 0, 0);
-  }
-
-  @extend .md-sidenav-left;
-}
-.md-sidenav-backdrop.md-locked-open {
-  display: none;
-}
-
-.md-sidenav-left {
-  left: 0;
-  top: 0;
-  transform: translate3d(0%, 0, 0);
-  &.md-closed {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-.md-sidenav-right {
-  left: 100%;
-  top: 0;
-  transform: translate3d(-100%, 0, 0);
-  &.md-closed {
-    transform: translate3d(0%, 0, 0);
-  }
-}
+@import "extends";
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/slider/_extends.scss b/UI/WebServerResources/scss/components/slider/_extends.scss
new file mode 100644
index 000000000..d9c8009b8
--- /dev/null
+++ b/UI/WebServerResources/scss/components/slider/_extends.scss
@@ -0,0 +1,2 @@
+/*! slider/_extends.scss - */
+@import '../../../angular-material/src/components/slider/slider.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/slider/slider.scss b/UI/WebServerResources/scss/components/slider/slider.scss
index 04af5307b..33b266beb 100644
--- a/UI/WebServerResources/scss/components/slider/slider.scss
+++ b/UI/WebServerResources/scss/components/slider/slider.scss
@@ -1,269 +1 @@
-$slider-background-color:  rgb(200, 200, 200) !default;
-$slider-height:  48px !default;
-
-$slider-track-height:  2px !default;
-$slider-thumb-width:  32px !default;
-$slider-thumb-height:  $slider-thumb-width !default;
-
-$slider-thumb-default-scale: 0.5 !default;
-$slider-thumb-hover-scale: 0.6 !default;
-$slider-thumb-focus-scale: 0.85 !default;
-$slider-thumb-disabled-scale: 0.35 !default;
-$slider-thumb-disabled-border: 6px !default;
-
-$slider-focus-thumb-width:  48px !default;
-$slider-focus-thumb-height: $slider-focus-thumb-width !default;
-$slider-focus-ring-border-width: 3px !default;
-
-$slider-arrow-height: 16px !default;
-$slider-arrow-width: 28px !default;
-
-$slider-sign-height: 28px !default;
-$slider-sign-width: 28px !default;
-$slider-sign-top: ($slider-height / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 8px !default;
-
-@keyframes sliderFocusThumb {
-  0% {
-    opacity: 0;
-    transform: scale(0.0);
-  }
-  50% {
-    transform: scale(1.0);
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
-  position: absolute;
-  left: -$width / 2;
-  top: ($slider-height / 2) - ($height / 2);
-  width: $width;
-  height: $height;
-  border-radius: max($width, $height);
-}
-
-md-slider {
-
-  height: $slider-height;
-  position: relative;
-  display: block;
-  margin-left: 4px;
-  margin-right: 4px;
-
-  /**
-   * Track
-   */
-  .md-track-container {
-    width: 100%;
-    position: absolute;
-    top: ($slider-height / 2) - ($slider-track-height) / 2;
-    height: $slider-track-height;
-  }
-  .md-track {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 100%;
-  }
-  .md-track-fill {
-    transition: width 0.05s linear;
-  }
-  .md-track-ticks {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 100%;
-  }
-
-  /**
-   * Slider thumb
-   */
-  .md-thumb-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    transform: translate3d(0,0,0);
-    transition: transform 0.1s linear;
-  }
-  .md-thumb {
-    z-index: 1;
-
-    // Positioning the outer area of the thumb 6px bigger than it needs to be keeps
-    // the :after area being clipped by the background of the focus-thumb animation.
-    @include slider-thumb-position($slider-thumb-width + 6, $slider-thumb-height + 6);
-
-    // We render thumb in an :after selector to fix an obscure problem with the
-    // thumb being clipped by the focus-ring and focus-thumb while running the focus
-    // animation.
-    &:after {
-      content: '';
-      position: absolute;
-      left: 3px;
-      top: 3px;
-      width: $slider-thumb-width;
-      height: $slider-thumb-height;
-      border-radius: max($slider-thumb-width, $slider-thumb-height);
-      border: 3px solid;
-    }
-
-    transform: scale($slider-thumb-default-scale);
-    transition: all 0.1s linear;
-  }
-
-  /* The sign that's focused in discrete mode */
-  .md-sign {
-
-    /* Center the children (slider-thumb-text) */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    position: absolute;
-    left: -($slider-sign-height / 2);
-    top: $slider-sign-top;
-    width: $slider-sign-width;
-    height: $slider-sign-height;
-    border-radius: max($slider-sign-height, $slider-sign-width);
-
-    transform: scale(0.4) translate3d(0,(-$slider-sign-top + 8) / 0.4,0);
-    transition: all 0.2s ease-in-out;
-
-    /* The arrow pointing down under the sign */
-    &:after {
-      position: absolute;
-      content: '';
-      left: -($slider-sign-width / 2 - $slider-arrow-width / 2);
-      border-radius: $slider-arrow-height;
-      top: 19px;
-      border-left: $slider-arrow-width / 2 solid transparent;
-      border-right: $slider-arrow-width / 2 solid transparent;
-      border-top: $slider-arrow-height solid;
-
-      opacity: 0;
-      transform: translate3d(0,-8px,0);
-      transition: all 0.2s ease-in-out;
-    }
-
-    .md-thumb-text {
-      z-index: 1;
-      font-size: 12px;
-      font-weight: bold;
-    }
-  }
-
-  /**
-   * The border/background that comes in when focused in non-discrete mode
-   */
-  .md-focus-thumb {
-    @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
-    display: none;
-    opacity: 0;
-    background-color: #C0C0C0;
-    animation: sliderFocusThumb 0.4s linear;
-  }
-  .md-focus-ring {
-    @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
-    border: 2px solid #D6D6D6;
-    background-color: transparent;
-    transform: scale(0);
-    transition: all 0.2s linear;
-  }
-  .md-disabled-thumb {
-    @include slider-thumb-position(
-      $slider-thumb-width + $slider-thumb-disabled-border * 2,
-      $slider-thumb-height + $slider-thumb-disabled-border * 2
-    );
-    transform: scale($slider-thumb-disabled-scale);
-    border: $slider-thumb-disabled-border solid;
-    display: none;
-  }
-
-  &.md-min {
-    .md-thumb {
-      &:after {
-        background-color: white;
-      }
-    }
-    .md-sign {
-      opacity: 0;
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  /* Don't animate left/right while panning */
-  &.panning {
-    .md-thumb-container,
-    .md-track-fill {
-      transition: none;
-    }
-  }
-
-  &:not([md-discrete]) {
-    /* Hide the sign and ticks in non-discrete mode */
-    .md-track-ticks,
-    .md-sign {
-      display: none;
-    }
-
-    &:not([disabled]) {
-      &:hover {
-        .md-thumb {
-          transform: scale($slider-thumb-hover-scale);
-        }
-      }
-
-      &:focus,
-      &.active {
-        .md-focus-thumb {
-          display: block;
-        }
-        .md-focus-ring {
-          transform: scale(1);
-        }
-        .md-thumb {
-          transform: scale($slider-thumb-focus-scale);
-        }
-      }
-    }
-  }
-
-  &[md-discrete] {
-    /* Hide the focus thumb in discrete mode */
-    .md-focus-thumb,
-    .md-focus-ring {
-      display: none;
-    }
-
-    &:not([disabled]) {
-      &:focus,
-      &.active {
-        .md-sign,
-        .md-sign:after {
-          opacity: 1;
-          transform: translate3d(0,0,0) scale(1.0);
-        }
-      }
-    }
-  }
-
-  &[disabled] {
-    .md-track-fill {
-      display: none;
-    }
-    .md-sign {
-      display: none;
-    }
-    .md-thumb {
-      transform: scale($slider-thumb-disabled-scale);
-    }
-    .md-disabled-thumb {
-      display: block;
-    }
-  }
-}
+@import "extends";
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/sticky/_extends.scss b/UI/WebServerResources/scss/components/sticky/_extends.scss
new file mode 100644
index 000000000..6c692c180
--- /dev/null
+++ b/UI/WebServerResources/scss/components/sticky/_extends.scss
@@ -0,0 +1,2 @@
+/*! sticky/_extends.scss - */
+@import '../../../angular-material/src/components/sticky/sticky.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/sticky/sticky.scss b/UI/WebServerResources/scss/components/sticky/sticky.scss
index d52b53828..33b266beb 100644
--- a/UI/WebServerResources/scss/components/sticky/sticky.scss
+++ b/UI/WebServerResources/scss/components/sticky/sticky.scss
@@ -1,18 +1 @@
-.md-sticky-clone {
-  z-index: 1;
-  top: 0;
-  left: 0;
-  right: 0;
-  position: absolute !important;
-
-  transform: translate3d(-9999px,-9999px,0);
-
-  &[sticky-state="active"] {
-    transform: translate3d(0, 0, 0);
-    &:not(.md-sticky-no-effect) {
-      &:after {
-        animation: subheaderStickyHoverIn 0.3s ease-out both;
-      }
-    }
-  }
-}
+@import "extends";
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/subheader/_extends.scss b/UI/WebServerResources/scss/components/subheader/_extends.scss
new file mode 100644
index 000000000..f7d056665
--- /dev/null
+++ b/UI/WebServerResources/scss/components/subheader/_extends.scss
@@ -0,0 +1,2 @@
+/*! subheader/_extends.scss - */
+@import '../../../angular-material/src/components/subheader/subheader.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/subheader/subheader.scss b/UI/WebServerResources/scss/components/subheader/subheader.scss
index be3590088..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/subheader/subheader.scss
+++ b/UI/WebServerResources/scss/components/subheader/subheader.scss
@@ -1,54 +1 @@
-$subheader-line-height: 1em !default;
-$subheader-font-size: 0.9em !default;
-$subheader-padding: ($baseline-grid * 2) 0px ($baseline-grid * 2) ($baseline-grid * 2) !default;
-$subheader-font-weight: 400 !default;
-$subheader-margin: 0 0 0 0 !default;
-$subheader-margin-right: 16px !default;
-$subheader-sticky-shadow: 0px 2px 4px 0 rgba(0,0,0,0.16) !default;
-
-@keyframes subheaderStickyHoverIn {
-  0% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-  100% {
-    box-shadow: $subheader-sticky-shadow;
-  }
-}
-@keyframes subheaderStickyHoverOut {
-  0% {
-    box-shadow: $subheader-sticky-shadow;
-  }
-  100% {
-    box-shadow: 0 0 0 0 transparent;
-  }
-}
-
-.md-subheader {
-  display: block;
-  font-size: $subheader-font-size;
-  font-weight: $subheader-font-weight;
-  line-height: $subheader-line-height;
-  padding: $subheader-padding;
-  margin: $subheader-margin;
-  margin-right: $subheader-margin-right;
-  position: relative;
-
-  &:not(.md-sticky-no-effect) {
-    &:after {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      top: 0;
-      right: -$subheader-margin-right;
-      content: '';
-    }
-
-    transition: 0.2s ease-out margin;
-    &[sticky-state="active"] {
-      margin-top: -2px;
-    }
-    &:not(.md-sticky-clone)[sticky-prev-state="active"]:after {
-      animation: subheaderStickyHoverOut 0.3s ease-out both;
-    }
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/switch/_extends.scss b/UI/WebServerResources/scss/components/switch/_extends.scss
new file mode 100644
index 000000000..38c8036a1
--- /dev/null
+++ b/UI/WebServerResources/scss/components/switch/_extends.scss
@@ -0,0 +1,2 @@
+/*! switch/_extends.scss - */
+@import '../../../angular-material/src/components/switch/switch.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/switch/switch.scss b/UI/WebServerResources/scss/components/switch/switch.scss
index 8c5fc1f2d..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/switch/switch.scss
+++ b/UI/WebServerResources/scss/components/switch/switch.scss
@@ -1,90 +1 @@
-$switch-width: 36px !default;
-$switch-height: $baseline-grid * 3 !default;
-$switch-bar-height: 14px !default;
-$switch-thumb-size: 20px !default;
-
-md-switch {
-
-  display: flex;
-  align-items: center;
-
-  .md-container {
-    cursor: grab;
-    width: $switch-width;
-    height: $switch-height;
-    position: relative;
-    user-select: none;
-    margin-right: 8px;
-  }
-
-  // If the user moves his mouse off the switch, stil display grabbing cursor
-  &:not([disabled]) {
-    .md-dragging,
-    &.md-dragging .md-container {
-      cursor: grabbing;
-    }
-  }
-
-  .md-label {
-    border-color: transparent;
-    border-width: 1px;
-  }
-
-  .md-bar {
-    left: 1px;
-    width: $switch-width - 2px;
-    top: $switch-height / 2 - $switch-bar-height / 2;
-    height: $switch-bar-height;
-    border-radius: 8px;
-    position: absolute;
-  }
-
-  .md-thumb-container {
-    top: $switch-height / 2 - $switch-thumb-size / 2;
-    left: 0;
-    width: $switch-width - $switch-thumb-size;
-    position: absolute;
-    transform: translate3d(0,0,0);
-    z-index: 1;
-  }
-  &.md-checked .md-thumb-container {
-    transform: translate3d(100%,0,0);
-  }
-
-  .md-thumb {
-    position: absolute;
-    margin: 0;
-    left: 0;
-    top: 0;
-    outline: none;
-    height: $switch-thumb-size;
-    width: $switch-thumb-size;
-    border-radius: 50%;
-    box-shadow: $whiteframe-shadow-z1;
-
-    .md-ripple-container {
-      position: absolute;
-      display: block;
-      width: auto;
-      height: auto;
-      left: -$switch-thumb-size;
-      top: -$switch-thumb-size;
-      right: -$switch-thumb-size;
-      bottom: -$switch-thumb-size;
-    }
-  }
-
-  &:not(.md-dragging) {
-    .md-bar,
-    .md-thumb-container,
-    .md-thumb {
-      transition: $swift-ease-in-out;
-      transition-property: transform, background-color;
-    }
-    .md-bar,
-    .md-thumb {
-      transition-delay: 0.05s;
-    }
-  }
-
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/tabs/_extends.scss b/UI/WebServerResources/scss/components/tabs/_extends.scss
new file mode 100644
index 000000000..60686e1d0
--- /dev/null
+++ b/UI/WebServerResources/scss/components/tabs/_extends.scss
@@ -0,0 +1,2 @@
+/*! tabs/_extends.scss - */
+@import '../../../angular-material/src/components/tabs/tabs.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/tabs/tabs.scss b/UI/WebServerResources/scss/components/tabs/tabs.scss
index 78d285fcf..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/tabs/tabs.scss
+++ b/UI/WebServerResources/scss/components/tabs/tabs.scss
@@ -1,175 +1 @@
-// Tabs
-$tabs-paginator-width: $baseline-grid * 4 !default;
-$tabs-tab-width: $baseline-grid * 12 !default;
-$tabs-header-height: 48px !default;
-
-md-tabs {
-  display: block;
-  width: 100%;
-  font-weight: 500;
-}
-
-.md-header {
-  width: 100%;
-  height: $tabs-header-height;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.md-paginator {
-  z-index: 1;
-  margin-right: -2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: $tabs-paginator-width;
-  min-height: 100%;
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: center center;
-
-  position: absolute;
-  &.md-prev {
-    left: 0;
-  }
-  &.md-next {
-    right: 0;
-  }
-
-  /* TODO Once we have a better way to inline svg images, change this
-   to use svgs correctly */
-  &.md-prev {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg==');
-  }
-  &.md-next {
-   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K');
-  }
-}
-
-/* If `center` justified, change to left-justify if paginating */
-md-tabs[center] .md-header:not(.md-paginating) .md-header-items {
-  justify-content: center;
-}
-.md-paginating .md-header-items-container {
-  left: $tabs-paginator-width;
-  right: $tabs-paginator-width;
-}
-.md-header-items-container {
-  overflow: hidden;
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 100%;
-  white-space: nowrap;
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-  margin: auto;
-
-  .md-header-items {
-    display: flex;
-    box-sizing: border-box;
-    transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
-    transform: translate3d(0, 0, 0);
-    height: 100%;
-    width: 99999px;
-  }
-}
-
-.md-tabs-content {
-  overflow: hidden;
-  width: 100%;
-  position: relative;
-  .md-tab-content {
-    height: 100%;
-    &.ng-hide {
-      &.ng-animate {
-        display: block !important;
-      }
-    }
-    &.ng-animate {
-      transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
-      transform: translateX(0);
-      &.ng-hide-add {
-        transform: translateX(-100%);
-        &.md-transition-rtl {
-          transform: translateX(100%);
-        }
-      }
-      &.ng-hide-remove {
-        position: absolute;
-        transform: translateX(100%);
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        &.md-transition-rtl {
-          transform: translateX(-100%);
-        }
-        &.ng-hide-remove-active {
-          transform: translateX(0);
-        }
-      }
-    }
-  }
-}
-
-md-tabs-ink-bar {
-  $time: 0.25s;
-  $delay: $time * 0.3;
-  $shortTime: $time;
-  z-index: 1;
-  display: none;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  box-sizing: border-box;
-  height: 2px;
-  margin-top: -2px;
-  transform: scaleX(1);
-  transform-origin: 0 0;
-  &.md-transition-right {
-    transition: right $time $swift-ease-in-out-timing-function,
-                left  $shortTime $swift-ease-in-out-timing-function $delay;
-  }
-  &.md-transition-left {
-    transition: right $shortTime $swift-ease-in-out-timing-function $delay,
-                left  $time $swift-ease-in-out-timing-function;
-  }
-}
-
-md-tab {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 0;
-  overflow: hidden;
-  height: 100%;
-  text-align: center;
-  cursor: pointer;
-  padding: 20px 24px;
-  box-sizing: border-box;
-  transition: background 0.35s $swift-ease-in-out-timing-function,
-              color 0.35s $swift-ease-in-out-timing-function;
-
-  &[disabled] {
-    pointer-events: none;
-    cursor: default;
-  }
-
-  @include not-selectable();
-
-  &:focus {
-    outline: none;
-  }
-
-  md-tab-label {
-    flex: 1 1 auto;
-    z-index: 100;
-    opacity: 1;
-    overflow: hidden;
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/textField/_extends.scss b/UI/WebServerResources/scss/components/textField/_extends.scss
new file mode 100644
index 000000000..fef9800a3
--- /dev/null
+++ b/UI/WebServerResources/scss/components/textField/_extends.scss
@@ -0,0 +1,2 @@
+/*! textField/_extends.scss - */
+@import '../../../angular-material/src/components/textField/textField.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/textField/textField.scss b/UI/WebServerResources/scss/components/textField/textField.scss
index 060748b03..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/textField/textField.scss
+++ b/UI/WebServerResources/scss/components/textField/textField.scss
@@ -1,148 +1 @@
-$tff-font-size: 0.75em !default;
-$tff-line-height:26px !default;
-$tff-transition: all 0.15s $swift-ease-in-out-timing-function !default;
-// - `label` element (aka hint)
-$tff-hint-offset-large : 22px !default;
-$tff-hint-offset-small : 4px !default;
-$ttf-hint-offset-scale : 0.75 !default;
-// - `line` element
-$tff-line-focused-width: 2px !default;
-$tff-line-disabled-width: 0px !default;
-$tff-line-dot-width: 1px !default;
-$tff-line-dot-size: 3px !default;
-$tff-line-dashed: #cfcfcf !default;
-
-$tff-margin: 10px 0 (10px - $tff-line-focused-width) 0 !default;
-
-// ******************************
-// Mixins: Text Fields
-// ******************************
-
-@mixin text-field($transition:false, $borderWidth:1px ) {
-  input, textarea {
-    border-bottom-width: $borderWidth;
-
-    @if( $transition != false ) {
-      transition: $transition;
-    }
-  }
-}
-
-@mixin text-hint($size:large, $transition:false ) {
-  label {
-    @if $size == "small" {
-      transform: translate3d(0, $tff-hint-offset-small, 0) scale($ttf-hint-offset-scale);
-    } @else {
-      transform: translate3d(0, $tff-hint-offset-large, 0);
-      transform-origin: left center;
-      transition: $tff-transition;
-    }
-
-    @if( $transition != false ) {
-      transition: $transition;
-    }
-  }
-}
-
-@mixin text-dashed-line( $dotGap, $dotSize) {
-  background-size: $dotSize $dotGap;
-  background-position: 0 bottom;
-  background-size: (1px + 1px) $dotGap;
-  background-repeat: repeat-x;
-}
-
-md-input-group,
-.md-input-group {
-
-  label {
-    display: block;
-    font-size: $tff-font-size;
-  }
-
-  textarea,
-  input[type="text"],
-  input[type="password"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="date"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"],
-  input[type="number"],
-  input[type="email"],
-  input[type="url"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="color"] {
-    display: block;
-    border-width: 0 0 1px 0;
-    padding-top: 2px;
-    line-height: $tff-line-height;
-    padding-bottom: 1px;
-
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  input, textarea {
-    background: none;
-  }
-}
-
-// Light-Theme
-md-input-group,
-.md-input-group {
-  padding-bottom: $tff-line-focused-width;
-  margin: $tff-margin;
-
-  position: relative;
-  display:  block;
-
-  label {
-    font-size: 1em;
-    z-index: 1;
-    pointer-events: none;
-    -webkit-font-smoothing: antialiased;
-
-    &:hover {
-      cursor: text;
-    }
-  }
-
-  @include text-hint( large, $tff-transition );
-  @include text-field( $tff-transition );
-
-
-  &.md-input-focused {
-    @include text-hint( small );
-    @include text-field( false, $tff-line-focused-width );
-    input {
-      padding-bottom: 0px;
-    }
-  }
-
-  &.md-input-has-value {
-    @include text-hint( small );
-
-    &:not(.md-input-focused) {
-      @include text-hint( small );
-    }
-  }
-
-  &[disabled] {
-
-    @include text-field( false, $tff-line-disabled-width );
-    input, textarea {
-      @include text-dashed-line( $tff-line-dot-width, $tff-line-dot-size);
-      pointer-events: none;
-    }
-
-    @include text-hint( small );
-
-    *:not(.md-input-has-value) {
-      @include text-hint( large );
-    }
-
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toast/_extends.scss b/UI/WebServerResources/scss/components/toast/_extends.scss
new file mode 100644
index 000000000..d618cb901
--- /dev/null
+++ b/UI/WebServerResources/scss/components/toast/_extends.scss
@@ -0,0 +1,2 @@
+/*! toast/_extends.scss - */
+@import '../../../angular-material/src/components/toast/toast.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toast/toast.scss b/UI/WebServerResources/scss/components/toast/toast.scss
index 1b49e1121..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/toast/toast.scss
+++ b/UI/WebServerResources/scss/components/toast/toast.scss
@@ -1,130 +1 @@
-// See height set globally, depended on by buttons
-md-toast {
-  display: flex;
-  position:absolute;
-  box-sizing: border-box;
-  align-items: center;
-
-  min-height: 48px;
-  padding-left: 24px;
-  padding-right: 24px;
-
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-  border-radius: 2px;
-  font-size: 14px;
-  cursor: default;
-
-  max-width: 879px;
-  max-height: 40px;
-
-  height: $toast-height;
-  z-index: $z-index-toast;
-
-  &.md-capsule {
-    border-radius: 24px;
-  }
-
-  opacity: 1;
-  transform: translate3d(0,0,0) rotateZ(0deg);
-  transition: $swift-ease-out;
-
-  &.ng-leave-active {
-    transition: $swift-ease-in;
-  }
-
-  /* Transition differently when swiping */
-  &.md-swipeleft,
-  &.md-swiperight,
-  &.md-swipeup,
-  &.md-swipedown {
-    transition: $swift-ease-out;
-  }
-
-  &.ng-enter {
-    transform: translate3d(0, 100%, 0);
-    &.md-top {
-      transform: translate3d(0, -100%, 0);
-    }
-    opacity: 0;
-    &.ng-enter-active {
-      transform: translate3d(0, 0, 0);
-      opacity: 1;
-    }
-  }
-  &.ng-leave.ng-leave-active {
-    opacity: 0;
-    transform: translate3d(0, 100%, 0);
-    &.md-top {
-      transform: translate3d(0, -100%, 0);
-    }
-    &.md-swipeleft {
-      transform: translate3d(-100%, 0%, 0);
-    }
-    &.md-swiperight {
-      transform: translate3d(100%, 0%, 0);
-    }
-  }
-
-  .md-action {
-    line-height: 19px;
-    padding-left: 24px;
-    cursor: pointer;
-    text-transform: uppercase;
-    float: right;
-  }
-}
-
-
-@media (max-width: $layout-breakpoint-sm) {
-  md-toast {
-    left: 0;
-    right: 0;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    border-radius: 0;
-    bottom: 0;
-    &.md-top {
-      bottom: auto;
-      top: 0;
-    }
-  }
-}
-@media (min-width: $layout-breakpoint-sm) {
-  md-toast {
-    min-width: 288px;
-    &.md-bottom {
-      bottom: $toast-margin;
-    }
-    &.md-left {
-      left: $toast-margin;
-    }
-    &.md-right {
-      right: $toast-margin;
-    }
-    &.md-top {
-      top: $toast-margin;
-    }
-
-    /* 
-     * When the toast doesn't take up the whole screen,
-     * make it rotate when the user swipes it away
-     */
-    &.ng-leave.ng-leave-active {
-      &.md-swipeleft {
-        transform: translate3d(-100%, 25%, 0) rotateZ(-15deg);
-      }
-      &.md-swiperight {
-        transform: translate3d(100%, 25%, 0) rotateZ(15deg);
-      }
-      &.md-top {
-        &.md-swipeleft {
-          transform: translate3d(-100%, 0, 0) rotateZ(-15deg);
-        }
-        &.md-swiperight {
-          transform: translate3d(100%, 0, 0) rotateZ(15deg);
-        }
-      }
-    }
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/_extends.scss b/UI/WebServerResources/scss/components/toolbar/_extends.scss
new file mode 100644
index 000000000..614b8193d
--- /dev/null
+++ b/UI/WebServerResources/scss/components/toolbar/_extends.scss
@@ -0,0 +1,2 @@
+/*! toolbar/_extends.scss - */
+@import '../../../angular-material/src/components/toolbar/toolbar.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 825f5f16a..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -1,81 +1 @@
-// fixme : place all variables in settings
-$toolbar-tools-height: 64px !default;
-$toolbar-height: 64px !default;
-$toolbar-medium-tall-height: 88px !default;
-$toolbar-tall-height: 128px !default;
-$toolbar-indent-margin: 64px !default;
-$toolbar-padding: 16px !default;
-
-md-toolbar {
-  display: flex;
-  flex-direction: column;
-
-  position: relative;
-  z-index: 2;
-
-  font-size: 1.3em;
-  min-height: $baseline-grid * 8;
-  width: 100%;
-
-  &.md-tall {
-    height: $toolbar-tall-height;
-    min-height: $toolbar-tall-height;
-    max-height: $toolbar-tall-height;
-  }
-
-  &.md-medium-tall {
-    height: $toolbar-medium-tall-height;
-    min-height: $toolbar-medium-tall-height;
-    max-height: $toolbar-medium-tall-height;
-
-    .md-toolbar-tools {
-      height: 48px;
-      min-height: 48px;
-      max-height: 48px;
-    }
-  }
-
-  &.md-toolbar-small {
-    min-height: $baseline-grid * 6;
-  }
-
-  .md-indent {
-    margin-left: $toolbar-indent-margin;
-  }
-}
-
-.md-toolbar-tools {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-
-  width: 100%;
-  height: $toolbar-tools-height;
-  min-height: 100%;
-  max-height: $toolbar-tools-height;
-  font-size: inherit;
-  font-weight: normal;
-  padding: 0 $toolbar-padding;
-  margin: 0;
-
-  > * {
-    font-size: inherit;
-  }
-  h2, h3 {
-    font-weight: normal;
-  }
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-  .fill-height {
-    display: flex;
-    align-items: center;
-  }
-  .md-tools {
-    margin-left: auto;
-  }
-  .md-button {
-    font-size: 14px;
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/tooltip/_extends.scss b/UI/WebServerResources/scss/components/tooltip/_extends.scss
new file mode 100644
index 000000000..46abc7a03
--- /dev/null
+++ b/UI/WebServerResources/scss/components/tooltip/_extends.scss
@@ -0,0 +1,2 @@
+/*! tooltip/_extends.scss - */
+@import '../../../angular-material/src/components/tooltip/tooltip.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/tooltip/tooltip.scss b/UI/WebServerResources/scss/components/tooltip/tooltip.scss
index b0ae10213..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/tooltip/tooltip.scss
+++ b/UI/WebServerResources/scss/components/tooltip/tooltip.scss
@@ -1,96 +1 @@
-@keyframes tooltipBackgroundShow {
-  0% {
-    transform: scale(0.2);
-    opacity: 0.25;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.0);
-    opacity: 1;
-  }
-}
-@keyframes tooltipBackgroundHide {
-  0% { opacity: 1; }
-  100% { opacity: 0; }
-}
-
-md-tooltip {
-  position: absolute;
-  font-size: 14px;
-  z-index: $z-index-tooltip;
-  overflow: hidden;
-  pointer-events: none;
-  border-radius: 4px;
-
-  &[md-direction="bottom"] {
-    transform: translate3d(0, -30%, 0);
-    margin-top: 8px;
-  }
-  &[md-direction="top"] {
-    transform: translate3d(0, 30%, 0);
-    margin-bottom: 8px;
-  }
-
-  .md-background {
-    position: absolute;
-    left: 50%;
-    width: 256px;
-    height: 256px;
-    margin-left: -128px;
-    margin-top: -128px;
-    border-radius: 256px;
-
-    opacity: 0.25;
-    transform: scale(0.2);
-  }
-
-  .md-content {
-    max-width: 240px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    padding: 8px;
-    background: transparent;
-    opacity: 0.3;
-    transition: inherit;
-  }
-
-  &.md-hide {
-    transition: $swift-ease-in;
-  }
-
-  &.md-show {
-    transition: $swift-ease-out;
-    pointer-events: auto;
-    transform: translate3d(0,0,0);
-
-    .md-background {
-      transform: scale(1.0);
-      opacity: 1.0;
-      animation: tooltipBackgroundShow linear;
-    }
-    .md-content {
-      opacity: 0.99;
-    }
-  }
-  &.md-hide .md-background {
-    transform: scale(1.0);
-    opacity: 0;
-    animation: tooltipBackgroundHide 0.2s linear;
-  }
-
-  /**
-   * Depending on the tooltip's size as a multiple of 32 (set by JS),
-   * change the background's animation duration.
-   * The larger the tooltip, the less time the background should take to ripple outwards.
-   */
-  @for $i from 1 through 8 {
-    &[width-32="#{$i}"].md-show .md-background {
-      $duration: 1000 - $i * 100;
-      animation-duration: #{$duration}ms;
-    }
-  }
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/whiteframe/_extends.scss b/UI/WebServerResources/scss/components/whiteframe/_extends.scss
new file mode 100644
index 000000000..649345c7b
--- /dev/null
+++ b/UI/WebServerResources/scss/components/whiteframe/_extends.scss
@@ -0,0 +1,2 @@
+/*! whiteframe/_extends.scss - */
+@import '../../../angular-material/src/components/whiteframe/whiteframe.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/whiteframe/whiteframe.scss b/UI/WebServerResources/scss/components/whiteframe/whiteframe.scss
index 0de6f6130..48c4ab4ca 100644
--- a/UI/WebServerResources/scss/components/whiteframe/whiteframe.scss
+++ b/UI/WebServerResources/scss/components/whiteframe/whiteframe.scss
@@ -1,15 +1 @@
-.md-whiteframe-z1 {
-  box-shadow: $whiteframe-shadow-z1;
-}
-.md-whiteframe-z2 {
-  box-shadow: $whiteframe-shadow-z2;
-}
-.md-whiteframe-z3 {
-  box-shadow: $whiteframe-shadow-z3;
-}
-.md-whiteframe-z4 {
-  box-shadow: $whiteframe-shadow-z4;
-}
-.md-whiteframe-z5 {
-  box-shadow: $whiteframe-shadow-z5;
-}
+@import 'extends';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss
index 0d57c1680..f93af8568 100644
--- a/UI/WebServerResources/scss/core/layout.scss
+++ b/UI/WebServerResources/scss/core/layout.scss
@@ -1,5 +1,5 @@
 // Import from sources for extends
-// ------------------------------
+// -------------------------------
 @import "../../angular-material/src/core/style/layout";
 
 // Utility classes to compensate for the the xml mandatory attribute values
diff --git a/UI/WebServerResources/scss/core/mixins.scss b/UI/WebServerResources/scss/core/mixins.scss
index 69771dbc1..5ecff92bf 100644
--- a/UI/WebServerResources/scss/core/mixins.scss
+++ b/UI/WebServerResources/scss/core/mixins.scss
@@ -1,3 +1,5 @@
+@import '../angular-material/src/core/style/mixins.scss';
+
 @mixin margin-selectors($before:1em, $after:1em, $start:0px, $end:0px) {
   -webkit-margin-before: $before;
   -webkit-margin-after: $after;