diff --git a/frontend/assets/scss/abstract/functions/_functions.scss b/frontend/assets/scss/abstract/functions/_functions.scss
index caa128cd9f..23e7b2eb5a 100644
--- a/frontend/assets/scss/abstract/functions/_functions.scss
+++ b/frontend/assets/scss/abstract/functions/_functions.scss
@@ -29,7 +29,7 @@
 //  }
 
 @function calculateRem($size) {
-    $remSize: $size / 16px;
+    $remSize: calc($size / 16px);
     @return $remSize * 1rem;
 }
 
diff --git a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
index 24312d12a9..0f6704032d 100644
--- a/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
+++ b/frontend/components/text-classifier/labeling-rules/RulesMetrics.vue
@@ -213,7 +213,7 @@ $color: #333346;
   &__title {
     padding-bottom: 0;
     color: $lighter-color;
-    @include font-size(22);
+    @include font-size(22px);
     font-weight: bold;
     margin-top: 0;
   }
diff --git a/frontend/components/text-classifier/results/RecordExplain.vue b/frontend/components/text-classifier/results/RecordExplain.vue
index e3f052fdc1..df61b005d6 100644
--- a/frontend/components/text-classifier/results/RecordExplain.vue
+++ b/frontend/components/text-classifier/results/RecordExplain.vue
@@ -101,7 +101,7 @@ export default {
 }
 @for $i from 0 through 100 {
   .grad-#{$i} {
-    $bg: hsla(40, 100%, 100 - $i * 0.5, 1);
+    $bg: hsla(40, 100%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
@@ -112,7 +112,7 @@ export default {
     }
   }
   .grad-neg-#{$i} {
-    $bg: hsla(200, 60%, 100 - $i * 0.5, 1);
+    $bg: hsla(200, 60%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
@@ -123,7 +123,7 @@ export default {
     }
   }
   .grad-plus-#{$i} {
-    $bg: hsla(100, 60%, 100 - $i * 0.5, 1);
+    $bg: hsla(100, 60%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
@@ -134,7 +134,7 @@ export default {
     }
   }
   .grad-rest-#{$i} {
-    $bg: hsla(0, 80%, 100 - $i * 0.5, 1);
+    $bg: hsla(0, 80%, 100% - $i * 0.5, 1);
     @extend %grad;
     background: $bg;
     .atom__tooltip {
diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
index 38f5023a4f..f4cc4c2933 100755
--- a/frontend/components/token-classifier/results/EntitiesHeader.vue
+++ b/frontend/components/token-classifier/results/EntitiesHeader.vue
@@ -177,7 +177,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
     &.active,
diff --git a/frontend/components/token-classifier/results/EntityHighlight.vue b/frontend/components/token-classifier/results/EntityHighlight.vue
index d69a562d79..3dacc13d47 100755
--- a/frontend/components/token-classifier/results/EntityHighlight.vue
+++ b/frontend/components/token-classifier/results/EntityHighlight.vue
@@ -116,7 +116,7 @@ export default {
 }
 
 .highlight {
-  @include font-size(0);
+  font-size: 0;
   line-height: 1em;
   position: relative;
   cursor: default; // display: inline-flex;
diff --git a/frontend/components/token-classifier/results/TextSpan.vue b/frontend/components/token-classifier/results/TextSpan.vue
index f9a96ba381..d2519d3504 100755
--- a/frontend/components/token-classifier/results/TextSpan.vue
+++ b/frontend/components/token-classifier/results/TextSpan.vue
@@ -166,7 +166,7 @@ export default {
   position: relative;
   display: inline;
   line-height: 18px;
-  @include font-size(0);
+  font-size: 0;
   &__text {
     display: inline;
     position: relative;
@@ -211,7 +211,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     &.annotation ::v-deep .highlight__content {
       background: $rcolor;
diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
index abf7a5be72..f6f340155c 100755
--- a/frontend/components/token-classifier/results/TextSpanStatic.vue
+++ b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -100,7 +100,7 @@ export default {
   position: relative;
   display: inline;
   line-height: 18px;
-  @include font-size(0);
+  font-size: 0;
   &__text {
     display: inline;
     position: relative;
@@ -162,7 +162,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     &.annotation ::v-deep .highlight__content {
       background: $rcolor;
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue b/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
index b9f8959f8d..e8820b64ac 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationProgress.vue
@@ -75,7 +75,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
   }
diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
index c3ba46b42b..11f05872fe 100644
--- a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
+++ b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
@@ -194,7 +194,7 @@ export default {
 $colors: 50;
 $hue: 360;
 @for $i from 1 through $colors {
-  $rcolor: hsla(($colors * $i) + ($hue * $i / $colors), 100%, 88%, 1);
+  $rcolor: hsla(($colors * $i) + calc($hue * $i / $colors), 100%, 88%, 1);
   .color_#{$i - 1} {
     background: $rcolor;
     &.predicted_mentions {
diff --git a/frontend/package.json b/frontend/package.json
index 1d7cac2920..30e585ad06 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,11 +28,12 @@
     "@vuex-orm/core": "^0.36.3",
     "@vuex-orm/plugin-axios": "^0.9.3",
     "core-js": "^3.6.5",
+    "js-base64": "^3.7.2",
     "moment-timezone": "^0.5.33",
-    "node-sass": "^5.0.0",
     "nuxt": "^2.14.6",
     "nuxt-highlightjs": "^1.0.1",
     "nuxt-mq": "^2.0.2",
+    "sass": "^1.49.9",
     "sass-loader": "^10.1.0",
     "stringz": "^2.1.0",
     "v-click-outside": "^3.1.2",