diff --git a/client/core/src/components/dialog/style.scss b/client/core/src/components/dialog/style.scss
index 8aa2ed7a1..1a7404546 100644
--- a/client/core/src/components/dialog/style.scss
+++ b/client/core/src/components/dialog/style.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import "effects";
 
 .vn-dialog {
     display: none;
@@ -10,7 +10,7 @@
     top: 0;
     height: 100%;
     width: 100%;
-    background-color: rgba(1, 1, 1, .6);
+    background-color: rgba(0, 0, 0, .6);
     opacity: 0;
     transition: opacity 300ms ease-in-out;
 
@@ -19,7 +19,7 @@
     }
     & > div {
         position: relative;
-        box-shadow: 0 0 .4em rgba(1,1,1,.4);
+        box-shadow: 0 0 .4em rgba(0, 0, 0, .4);
         background-color: white;
         border-radius: .2em;
         overflow: auto;
@@ -34,16 +34,11 @@
         input[type="button"],
         input[type="submit"],
         input[type="reset"] {
+            @extend %clickable;
             text-transform: uppercase;
             background-color: transparent;
             border: none;
-            cursor: pointer;
-            transition: background-color 250ms;
             border-radius: .1em;
-    
-            &:hover {
-                background-color: rgba(1,1,1,.1);
-            }
         }
         & > button.close {
             position: absolute;
diff --git a/client/core/src/components/drop-down/style.scss b/client/core/src/components/drop-down/style.scss
index d0ab93745..89c274e7a 100755
--- a/client/core/src/components/drop-down/style.scss
+++ b/client/core/src/components/drop-down/style.scss
@@ -1,4 +1,4 @@
-@import "colors";
+@import "effects";
 
 vn-drop-down {
     .dropdown {
@@ -47,19 +47,15 @@ vn-drop-down {
                 list-style-type: none;
             }
             li, .status {
+                @extend %clickable;
                 padding: .6em;
-                cursor: pointer;
                 white-space: nowrap;
-                transition: background-color 250ms ease-out;
                 display: flex;
 
                 & > input[type=checkbox] {
                     margin: 0;
                     margin-right: .6em;
                 }
-                &:hover {
-                    background-color: rgba(0, 0, 0, .1);
-                }
                 &.active {
                     background-color: #3D3A3B;
                     color: white;
diff --git a/client/core/src/components/icon-button/style.scss b/client/core/src/components/icon-button/style.scss
index 5aeef63af..e748a4ba4 100644
--- a/client/core/src/components/icon-button/style.scss
+++ b/client/core/src/components/icon-button/style.scss
@@ -6,6 +6,7 @@ vn-icon-button {
     color: rgba($main-01, 0.7);
     transition: color 200ms ease-in-out;
     cursor: pointer;
+
     &.button {
         background-color: $main-01;
         color: white;
diff --git a/client/salix/src/styles/misc.scss b/client/salix/src/styles/misc.scss
index 7c815b1a3..8392b0210 100644
--- a/client/salix/src/styles/misc.scss
+++ b/client/salix/src/styles/misc.scss
@@ -167,7 +167,6 @@ vn-main-block {
             padding: .5em;
             color: white;
             text-decoration: none;
-            transition: background-color 250ms ease-out;
 
             & > vn-icon {
                 font-size: 1.8em;
@@ -212,6 +211,7 @@ vn-main-block {
             margin-left: .5em;
             transition: opacity 250ms ease-out;
             font-size: 2em;
+
             &:hover {
                 opacity: 1;
             }