diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index 7bfc164be..7d6115671 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -21,7 +21,7 @@ module.exports = function(grunt) {
     'js/vendor/FileSaver.min.js': ['node_modules/file-saver/dist/FileSaver.js']
   };
 
-  const sass = require('node-sass');
+  const sass = require('sass');
   require('time-grunt')(grunt);
 
   // Tasks
diff --git a/UI/WebServerResources/package.json b/UI/WebServerResources/package.json
index bed930963..a93b5c912 100644
--- a/UI/WebServerResources/package.json
+++ b/UI/WebServerResources/package.json
@@ -20,18 +20,15 @@
   "devDependencies": {
     "autoprefixer": "^9.8.5",
     "breakpoint-sass": ">=2.4.2",
-    "csswring": ">=3.0.0",
     "grunt": "^1.3.0",
     "grunt-contrib-cssmin": ">=1.0.0",
-    "grunt-contrib-jshint": ">=0.11.2",
+    "grunt-contrib-jshint": "^3.0.0",
     "grunt-contrib-uglify": "^5.0.0",
     "grunt-contrib-watch": ">=0.5.3",
-    "grunt-cssnano": "^2.1.0",
     "grunt-ng-annotate": "^4.0.0",
     "grunt-postcss": ">=0.6.0",
     "grunt-sass": "^3.1.0",
-    "kss": "^3.0.1",
-    "node-sass": "^4.14.1",
+    "sass": "^1.29.0",
     "time-grunt": "latest"
   },
   "browserslist": [
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index 6f82deb81..c7b418c3d 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -1,6 +1,10 @@
 /// button.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
+md-button {
+  font-weight: 600;
+}
+
 md-sidenav md-list .md-button {
   font-weight: normal;
 }
@@ -150,7 +154,7 @@ $button-fab-height: 56px;
 a.md-button.sg-icon-button,
 .md-button.sg-icon-button,
 md-list md-list-item button.md-button.sg-icon-button {
-  @extend .md-button.md-icon-button;
+  @extend .md-button, .md-icon-button;
   //transition: $iconButton-transition;
   min-width: $iconButton-size;
   &:hover:not([disabled]),
diff --git a/UI/WebServerResources/scss/components/timepicker/timepicker.scss b/UI/WebServerResources/scss/components/timepicker/timepicker.scss
index cceff252a..337165780 100644
--- a/UI/WebServerResources/scss/components/timepicker/timepicker.scss
+++ b/UI/WebServerResources/scss/components/timepicker/timepicker.scss
@@ -185,7 +185,7 @@ sg-timepicker {
 }
 
 .sg-timepicker-triangle-button.md-button.md-icon-button {
-  @extend .md-datepicker-triangle-button.md-button.md-icon-button;
+  @extend .md-datepicker-triangle-button, .md-button, .md-icon-button;
 }
 
 // Disabled state for all elements of the picker.
diff --git a/UI/WebServerResources/scss/core/typography.scss b/UI/WebServerResources/scss/core/typography.scss
index 25cc85b51..683ba489d 100644
--- a/UI/WebServerResources/scss/core/typography.scss
+++ b/UI/WebServerResources/scss/core/typography.scss
@@ -147,7 +147,7 @@ $sg-typo-scale: (
     45,
     56,
     112
-) !global;
+);
 
 // todo: fix that
 //@function sg-font-sizes($size-List: $sg-typo-scale, $prefix: '$sg-font-size') {