diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss
index 71f414e507..c6134f16e0 100644
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/src/renderer/components/hotbar/hotbar-icon.scss
@@ -14,7 +14,7 @@
     }
 
     &.active {
-      box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #ffffff;
+      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
       transition: all 0s 0.8s;
     }
 
@@ -25,7 +25,7 @@
     }
 
     &:hover {
-      box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff;
+      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
     }
 
     &.isDragging {
diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index b609890827..1805fdf4c5 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -60,7 +60,7 @@
         }
 
         &:not(:empty) {
-          animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+          animation: outline 1s cubic-bezier(0.19, 1, 0.22, 1);
         }
       }
     }