diff --git a/src/client/components/player/controls.scss b/src/client/components/player/controls.scss
index 71da75a1..2df24317 100644
--- a/src/client/components/player/controls.scss
+++ b/src/client/components/player/controls.scss
@@ -7,13 +7,13 @@ $primary: #00ACC1;
   display: flex;
   justify-content: space-around;
   align-items: center;
-  height: $spacing*2.5;
+  height: calc($spacing*2.5);
   text-align: center;
   background: $primary;
 
   .button {
     height: 100%;
-    width: $spacing*2.5;
+    width: calc($spacing*2.5);
     border: 0;
     border-radius: 0;
     transition: background 250ms;
diff --git a/src/client/components/player/player.scss b/src/client/components/player/player.scss
index b25d5fa9..cfa38788 100644
--- a/src/client/components/player/player.scss
+++ b/src/client/components/player/player.scss
@@ -21,7 +21,7 @@ $primary: #00ACC1;
     width: 90%;
     position: absolute;
     top: $spacing;
-    left: $spacing/0.5;
+    left: calc($spacing/0.5);
     border: 0;
     outline: 0;
     background: transparent;
@@ -33,8 +33,8 @@ $primary: #00ACC1;
 
   .toggle-playlist {
     position: absolute;
-    top: $spacing/2;
-    right: $spacing/0.5;
+    top: calc($spacing/2);
+    right: calc($spacing/0.5);
     border: 0;
     outline: 0;
     background: transparent;
@@ -83,7 +83,7 @@ $primary: #00ACC1;
   }
 
   &__head {
-    padding: $spacing/2 $spacing;
+    padding: calc($spacing/2) $spacing;
   }
 
   &__art {
@@ -146,7 +146,7 @@ $primary: #00ACC1;
     .subtitle {
       font-size: 0.75rem;
       color: #90A4AE;
-      padding-top: $spacing/4;
+      padding-top: calc($spacing/4);
       margin-bottom: $spacing;
       text-transform: uppercase;
     }
diff --git a/src/client/components/player/timestamp.scss b/src/client/components/player/timestamp.scss
index 2d649824..923fbcb5 100644
--- a/src/client/components/player/timestamp.scss
+++ b/src/client/components/player/timestamp.scss
@@ -18,9 +18,9 @@ $primary: #556a77;
 
   &__progress {
     position: relative;
-    top: $spacing/4;
+    top: calc($spacing/4);
     left: 50%;
-    height: $spacing/4;
+    height: calc($spacing/4);
     width: calc(100% - #{$spacing*3});
     transform: translate(-50%, 0);
     border-radius: 5px;
diff --git a/src/client/components/player/trackInfo.scss b/src/client/components/player/trackInfo.scss
index de2b4d6a..4eac8250 100644
--- a/src/client/components/player/trackInfo.scss
+++ b/src/client/components/player/trackInfo.scss
@@ -10,8 +10,8 @@ $primary: #00ACC1;
   bottom: 0;
   left: 0;
   right: 0;
-  padding: $spacing/1.7;
-  padding-right: $spacing/1.5;
+  padding: calc($spacing/1.7);
+  padding-right: calc($spacing/1.5);
   //overflow: auto;
   //background: #282c34;
 
@@ -51,7 +51,7 @@ $primary: #00ACC1;
     }
 
     .subtitle {
-      margin-top: -$spacing/2;
+      margin-top: - calc($spacing/2);
       font-size: 0.75rem;
       text-transform: uppercase;
       color: #607D8B
@@ -61,8 +61,8 @@ $primary: #00ACC1;
 
 .toggle-playlist {
   position: absolute;
-  top: $spacing/2;
-  right: $spacing/2;
+  top: calc($spacing/2);
+  right: calc($spacing/2);
   border: 0;
   outline: 0;
   background: transparent;