diff --git a/de/home/.config/eww/eww.scss b/de/home/.config/eww/eww.scss
index f089c5c..54d3c60 100644
--- a/de/home/.config/eww/eww.scss
+++ b/de/home/.config/eww/eww.scss
@@ -10,6 +10,7 @@
 $bar-module-width: 25px;
 $bar-module-bg-color: rgba($color5,0.0);
 $bar-bg-color: rgba($color5,1);
+$bar-fg-color: rgba($color15,1);
 $bar-module-fg-color: rgba($color0,0.8);
 $bar-module-inactive-fg-color: rgba($color0,0.4);
 $bar-module-active-fg-color: rgba($color13,0.9);
diff --git a/de/home/.config/eww/modules/bar/volume.yuck b/de/home/.config/eww/modules/bar/volume.yuck
index 9a0c112..4e5cde2 100644
--- a/de/home/.config/eww/modules/bar/volume.yuck
+++ b/de/home/.config/eww/modules/bar/volume.yuck
@@ -5,7 +5,7 @@
     :revealvar reveal_volume
     :revealvar-name "reveal_volume"
     (button :onclick 'pavucontrol-qt --tab 3'
-            :class "${(volume == 0) ? '' : 'active'} revealer-preview"
+            :class "${(volume == 0) ? 'inactive' : 'active'} revealer-preview"
       {(volume == 0) ? "" : ((volume > 50) ? "" : "")})
     (volume_children)))
 
diff --git a/de/home/.config/eww/style/bar/styles/revealer.scss b/de/home/.config/eww/style/bar/styles/revealer.scss
index 16c06a8..daae045 100644
--- a/de/home/.config/eww/style/bar/styles/revealer.scss
+++ b/de/home/.config/eww/style/bar/styles/revealer.scss
@@ -1,6 +1,6 @@
 &.revealer-on-hover {
 //  border: 2px solid $bar-bg-color;
-  border: 2px solid $module-color;
+//  border: 2px solid $module-color;
   border-radius: $bar-module-border-radius;//
 }
 .revealer-preview,
@@ -8,27 +8,41 @@
   padding: 0px 7px;
   min-width: $bar-module-width;
   transition: all 0.3s;
-  background: linear-gradient($bar-bg-color 65%, $module-color);
+//  background: linear-gradient($bar-bg-color 65%, $module-color);
+  background-color: rgba($bar-bg-color,0.5);
+    &.active {
+//      background-color: rgba($module-color,0.5);
+      background: mix(rgba($bar-bg-color,0.5), rgba($module-color,0.5));
+      &:hover {
+        background: mix(rgba($bar-bg-color,0.75), rgba($module-color,0.75));        
+      }
+    }
+    &.inactive {
+      background-color: rgba($bar-bg-color,0.5);
+      color: rgba($bar-fg-color,0.5);
+      &:hover {
+        background: mix(rgba($bar-bg-color,0.5), rgba($module-color,0.5));
+      }
+    }
+/*    &:hover {
+      background: linear-gradient(rgba($bar-bg-color,0.5) 15%, rgba($module-color,0.75));
+      color: rgba($bar-fg-color,1)
+//      background: rgba($module-color,0.5);
+    }*/
 }
 .revealer-preview {
 //  box-shadow: inset 0px -7px 9px -4px rgba($module-color,0.4);
 //  background-color: $bar-bg-color;
-  border-radius: $bar-module-border-radius - 2;
+  border-radius: $bar-module-border-radius;
 }
 &.true .revealer-preview {
-  border-radius: $bar-module-border-radius - 2 0 0 $bar-module-border-radius - 2;
+  border-radius: $bar-module-border-radius 0 0 $bar-module-border-radius;
 }
 .reveal-children {
   >* {
     border-left: 2px solid $module-color;
-    &.active {
-      background-color: rgba($module-color,0.5);
-    }
-    &:hover {
-      background-color: rgba($module-color,0.5);
-    }
     &:last-child {
-      border-radius: 0 $bar-module-border-radius - 2 $bar-module-border-radius - 2 0;
+      border-radius: 0 $bar-module-border-radius $bar-module-border-radius 0;
     }
   }
 }
diff --git a/de/home/.config/eww/style/bar/volume.scss b/de/home/.config/eww/style/bar/volume.scss
index cf33da5..6f4e7f7 100644
--- a/de/home/.config/eww/style/bar/volume.scss
+++ b/de/home/.config/eww/style/bar/volume.scss
@@ -1,5 +1,6 @@
 .volume {
   margin: 0px 5px;
-  $module-color: mix($color9, $color0, 75%);
+  $module-color: $bar-bg-color;
+//  $module-color: mix($color9, $color0, 75%);
   @import "./styles/revealer.scss";
 }