diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 82a6ec568..1ab249444 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -150,46 +150,52 @@ div.md-tile-left {
   font-size: 40px;
   color: rgba(0, 0, 0, 0.26);
 }
-.md-tile-left-card:before {
+.md-tile-left-card {
   @extend .md-tile-left;
-  content: "\e7fd"; // person
+  &:before {
+    content: "\e7fd"; // person
+  }
 }
-.md-tile-left-list:before {
+.md-tile-left-list {
   @extend .md-tile-left;
-  content: "\e7ef"; // group
+  &:before {
+    content: "\e7ef"; // group
+  }
 }
-.md-tile-left-selected:before {
+.md-tile-left-selected {
   @extend .md-tile-left;
-  content: "\e5ca"; // check
-}
-.md-tile-left-accepted:before {
-  @extend .md-tile-left;
-  background-color: rgba(0, 255, 0, 0.3) !important;
-  content: "\e5ca"; // check
-  color: rgba(0, 0, 0, 0.5);
-}
-.md-tile-left-declined:before {
-  @extend .md-tile-left;
-  background-color: rgba(255, 0, 0, 0.3) !important;
-  content: "\e15b"; // remove
-  color: rgba(0, 0, 0, 0.5);
-}
-.md-tile-left-delegated:before {
-  @extend .md-tile-left;
-  background-color: rgba(192, 192, 192, 0.3) !important;
-  content: "\e5c8"; // arrow-forward
-  color: rgba(0, 0, 0, 0.5);
-}
-.md-tile-left-needs-action:before {
-  @extend .md-tile-left;
-  background-color: rgba(255, 255, 0, 0.3) !important;
-  content: "?";
-}
-.md-tile-left-tentative:before {
-  @extend .md-tile-left;
-  background-color: rgba(255, 255, 0, 0.3) !important;
-  content: "\e7fd"; // person
+  &:before {
+    content: "\e5ca"; // check
+  }
 }
+//.md-tile-left-accepted:before {
+//  @extend .md-tile-left;
+//  background-color: rgba(0, 255, 0, 0.3) !important;
+//  content: "\e5ca"; // check
+//  color: rgba(0, 0, 0, 0.5);
+//}
+//.md-tile-left-declined:before {
+//  @extend .md-tile-left;
+//  background-color: rgba(255, 0, 0, 0.3) !important;
+//  content: "\e15b"; // remove
+//  color: rgba(0, 0, 0, 0.5);
+//}
+//.md-tile-left-delegated:before {
+//  @extend .md-tile-left;
+//  background-color: rgba(192, 192, 192, 0.3) !important;
+//  content: "\e5c8"; // arrow-forward
+//  color: rgba(0, 0, 0, 0.5);
+//}
+//.md-tile-left-needs-action:before {
+//  @extend .md-tile-left;
+//  background-color: rgba(255, 255, 0, 0.3) !important;
+//  content: "?";
+//}
+//.md-tile-left-tentative:before {
+//  @extend .md-tile-left;
+//  background-color: rgba(255, 255, 0, 0.3) !important;
+//  content: "\e7fd"; // person
+//}
 .sg-avatar {
   @extend .md-tile-left-card;
   margin-right: 0;
@@ -205,28 +211,28 @@ div.md-tile-left {
   margin-right: 0;
   margin-left: 0;
 }
-.sg-accepted {
-  @extend .md-tile-left-accepted;
-  margin-right: 0;
-  margin-left: 0;
-}
-.sg-declined {
-  @extend .md-tile-left-declined;
-  margin-right: 0;
-  margin-left: 0;
-}
-.sg-delegated {
-  @extend .md-tile-left-delegated;
-  margin-right: 0;
-  margin-left: 0;
-}
-.sg-needs-action {
-  @extend .md-tile-left-needs-action;
-  margin-right: 0;
-  margin-left: 0;
-}
-.sg-tentative {
-  @extend .md-tile-left-tentative;
-  margin-right: 0;
-  margin-left: 0;
-}
\ No newline at end of file
+//.sg-accepted {
+//  @extend .md-tile-left-accepted;
+//  margin-right: 0;
+//  margin-left: 0;
+//}
+//.sg-declined {
+//  @extend .md-tile-left-declined;
+//  margin-right: 0;
+//  margin-left: 0;
+//}
+//.sg-delegated {
+//  @extend .md-tile-left-delegated;
+//  margin-right: 0;
+//  margin-left: 0;
+//}
+//.sg-needs-action {
+//  @extend .md-tile-left-needs-action;
+//  margin-right: 0;
+//  margin-left: 0;
+//}
+//.sg-tentative {
+//  @extend .md-tile-left-tentative;
+//  margin-right: 0;
+//  margin-left: 0;
+//}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index 52dc5f818..c77d2c6eb 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -60,11 +60,11 @@ $input-padding-top: 2px !default;
   margin-top: 0;
 }
 // md overqualifies so we are
-.md-input-focused label.pseudo-input-label,
-.md-input-has-value label.pseudo-input-label {
-  transform: translate3d(0, 4px, 0) scale(1);
-  margin-top: $mg;
-}
+//.md-input-focused label.pseudo-input-label,
+//.md-input-has-value label.pseudo-input-label {
+//  transform: translate3d(0, 4px, 0) scale(1);
+//  margin-top: $mg;
+//}
 
 .pseudo-input-field {
   display: block;
diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss
index 18d20f930..3d2cba933 100644
--- a/UI/WebServerResources/scss/core/layout.scss
+++ b/UI/WebServerResources/scss/core/layout.scss
@@ -26,102 +26,102 @@
 */
 
 // SMALL SCREEN
-@include at(sm) {
-  .hide-sm, .hide {
-    &:not(.show-sm):not(.show) {
-      display: none !important;
-    }
-  }
+//@include at(sm) {
+//  .hide-sm, .hide {
+//    &:not(.show-sm):not(.show) {
+//      display: none !important;
+//    }
+//  }
+//
+//  @include flex-order-for-name(sm);
+//  @include layout-align-for-name(sm);
+//  @include layout-for-name(sm);
+//  @include flex-properties-for-name(sm);
+//}
 
-  @include flex-order-for-name(sm);
-  @include layout-align-for-name(sm);
-  @include layout-for-name(sm);
-  @include flex-properties-for-name(sm);
-}
-
-@include from(md) {
-  .show-sm {
-    display: none !important;
-  }
-}
+//@include from(md) {
+//  .show-sm {
+//    display: none !important;
+//  }
+//}
 
 
 // BIGGER THAN SMALL SCREEN
-@include from(md) {
-  @include flex-order-for-name(gt-sm);
-  @include layout-align-for-name(gt-sm);
-  @include layout-for-name(gt-sm);
-  @include flex-properties-for-name(gt-sm);
-}
+//@include from(md) {
+//  @include flex-order-for-name(gt-sm);
+//  @include layout-align-for-name(gt-sm);
+//  @include layout-for-name(gt-sm);
+//  @include flex-properties-for-name(gt-sm);
+//}
 
 // MEDIUM SCREEN
-@include at(md) {
-  .hide, .hide-gt-sm {
-    &:not(.show-gt-sm):not(.show-md):not(.show) {
-      display: none;
-    }
-  }
-  .hide-md:not(.show-md):not(.show) {
-    display: none;
-  }
-
-  @include flex-order-for-name(md);
-  @include layout-align-for-name(md);
-  @include layout-for-name(md);
-  @include flex-properties-for-name(md);
-}
+//@include at(md) {
+//  .hide, .hide-gt-sm {
+//    &:not(.show-gt-sm):not(.show-md):not(.show) {
+//      display: none;
+//    }
+//  }
+//  .hide-md:not(.show-md):not(.show) {
+//    display: none;
+//  }
+//
+//  @include flex-order-for-name(md);
+//  @include layout-align-for-name(md);
+//  @include layout-for-name(md);
+//  @include flex-properties-for-name(md);
+//}
 
 // BIGGER THAN MEDIUM SCREEN
-@include from(lg) {
-  @include flex-order-for-name(gt-md);
-  @include layout-align-for-name(gt-md);
-  @include layout-for-name(gt-md);
-  @include flex-properties-for-name(gt-md);
-  @include flex-order-for-name(lg);
-  @include layout-align-for-name(lg);
-  @include layout-for-name(lg);
-  @include flex-properties-for-name(lg);
-}
+//@include from(lg) {
+//  @include flex-order-for-name(gt-md);
+//  @include layout-align-for-name(gt-md);
+//  @include layout-for-name(gt-md);
+//  @include flex-properties-for-name(gt-md);
+//  @include flex-order-for-name(lg);
+//  @include layout-align-for-name(lg);
+//  @include layout-for-name(lg);
+//  @include flex-properties-for-name(lg);
+//}
 // BIGGER THAN LARGE SCREEN
-@include  from(lg) {
-  .hide, .hide-gt-sm, .hide-gt-md {
-    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
-      display: none;
-    }
-  }
-  .hide-lg:not(.show-lg):not(.show) {
-    display: none;
-  }
-}
+//@include  from(lg) {
+//  .hide, .hide-gt-sm, .hide-gt-md {
+//    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
+//      display: none;
+//    }
+//  }
+//  .hide-lg:not(.show-lg):not(.show) {
+//    display: none;
+//  }
+//}
 
 // BIGGER THAN X-LARGE SCREEN in needed
-@include from(xl) {
-  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
-    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
-      display: none;
-    }
-  }
-
-  @include flex-order-for-name(gt-lg);
-  @include layout-align-for-name(gt-lg);
-  @include layout-for-name(gt-lg);
-  @include flex-properties-for-name(gt-lg);
-}
+//@include from(xl) {
+//  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
+//    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
+//      display: none;
+//    }
+//  }
+//
+//  @include flex-order-for-name(gt-lg);
+//  @include layout-align-for-name(gt-lg);
+//  @include layout-for-name(gt-lg);
+//  @include flex-properties-for-name(gt-lg);
+//}
 
 
 // Utility classes to compensate for the the xml mandatory attribute values
 // ------------------------------------------------------------------------
-$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
-flex, hide, show, show-sm;
-
-@include attributesToClasses($selectors);
+//$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
+//flex, hide, show, show-sm;
 
+//@include attributesToClasses($selectors);
+//
 // We need to silently extend this class
-%md-layout-fill {
-  margin: 0;
-  min-height: 100%;
-  width: 100%;
-}
+//%md-layout-fill {
+//  margin: 0;
+//  min-height: 100%;
+//  width: 100%;
+//}
 
 .md-flex {
   flex: 1 1 auto;
@@ -133,49 +133,49 @@ flex, hide, show, show-sm;
 
 // Generate responsive columns
 // ----------------------------------------------------------------------------
-@mixin responsive-columns($breakpoint, $query) {
-  $cols: map-get($base-grid-total-columns, $breakpoint);
-  $colWidth: ((100 / $cols) * 1vw);
-  // there must be a way to escape the rule but we didn't found-out
-  @if ($query == 'from') {
-    @include from($breakpoint)  {
-      @for $i from 1 to $cols {
-        .cols-#{$i}, {
-          max-width: ($colWidth * $i);
-          flex: 1 1 ($colWidth * $i);
-        }
-      }
-    }
-  } @else {
-    @include at($breakpoint) {
-      @for $i from 1 to $cols {
-        .cols-#{$i} {
-          max-width: ($colWidth * $i);
-          flex: 1 1 ($colWidth * $i);
-        }
-      }
-    }
-  }
-}
-@include responsive-columns('md', 'at');
-@include responsive-columns('lg', 'from');
+//@mixin responsive-columns($breakpoint, $query) {
+//  $cols: map-get($base-grid-total-columns, $breakpoint);
+//  $colWidth: ((100 / $cols) * 1vw);
+//  // there must be a way to escape the rule but we didn't found-out
+//  @if ($query == 'from') {
+//    @include from($breakpoint)  {
+//      @for $i from 1 to $cols {
+//        .cols-#{$i}, {
+//          max-width: ($colWidth * $i);
+//          flex: 1 1 ($colWidth * $i);
+//        }
+//      }
+//    }
+//  } @else {
+//    @include at($breakpoint) {
+//      @for $i from 1 to $cols {
+//        .cols-#{$i} {
+//          max-width: ($colWidth * $i);
+//          flex: 1 1 ($colWidth * $i);
+//        }
+//      }
+//    }
+//  }
+//}
+//@include responsive-columns('md', 'at');
+//@include responsive-columns('lg', 'from');
 
 // Utility to implement a specific one without extending
 // todo: include error handling
 
 @mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
-    $cols: map-get($base-grid-total-columns, $breakpoint);
-    $colWidth: ((100 / $cols) * 1vw);
-      max-width: ($colWidth * $nb);
-      flex: $grow $shrink ($colWidth * $nb);
+   $cols: map-get($base-grid-total-columns, $breakpoint);
+   $colWidth: ((100 / $cols) * 1vw);
+     max-width: ($colWidth * $nb);
+     flex: $grow $shrink ($colWidth * $nb);
 }
 
 // Rows are included in padded containers, margins are used for vertical spacing
 // ----------------------------------------------------------------------------
-[layout="row"].md-layout-margin {
-  margin-right: 0;
-  margin-left: 0;
-}
+//[layout="row"].md-layout-margin {
+//  margin-right: 0;
+//  margin-left: 0;
+//}
 
 // App container for responsive
 .sg-app-content {