diff --git a/de/home/.config/eww/modules/bar/network.yuck b/de/home/.config/eww/modules/bar/network.yuck
index 5fdf37c..587a11b 100644
--- a/de/home/.config/eww/modules/bar/network.yuck
+++ b/de/home/.config/eww/modules/bar/network.yuck
@@ -5,12 +5,12 @@
     :revealvar reveal_network
     :revealvar-name "reveal_network"
     (button :onclick 'nm-connection-editor'
-            :class {network_status.wifi || network_status.wired ? 'active' : 'inactive'}
+            :class "revealer-preview ${network_status.wifi || network_status.wired ? 'active' : 'inactive'}"
       "󰇧")
     (network_children)))
 
 (defwidget network_children []
-  (box :class "reveal_children"
+  (box :class "reveal-children"
     :orientation "h"
     :space-evenly false
     :halign "center"
diff --git a/de/home/.config/eww/modules/bar/vpn.yuck b/de/home/.config/eww/modules/bar/vpn.yuck
index 1dd95cd..33f5561 100644
--- a/de/home/.config/eww/modules/bar/vpn.yuck
+++ b/de/home/.config/eww/modules/bar/vpn.yuck
@@ -5,12 +5,12 @@
     :revealvar reveal_vpn
     :revealvar-name "reveal_vpn"
     (button :onclick 'notify-send "test"'
-            :class {network_status.proton || network_status.homevpn ? 'active' : 'inactive'}
+            :class "revealer-preview ${network_status.proton || network_status.homevpn ? 'active' : 'inactive'}"
       {network_status.vpn ? "" : ""})
     (vpn_children)))
 
 (defwidget vpn_children []
-  (box :class "reveal_children"
+  (box :class "reveal-children"
     :orientation "h"
     :space-evenly false
     :halign "center"
diff --git a/de/home/.config/eww/style/bar/bluetooth.scss b/de/home/.config/eww/style/bar/bluetooth.scss
index 97d9c22..4f0b553 100644
--- a/de/home/.config/eww/style/bar/bluetooth.scss
+++ b/de/home/.config/eww/style/bar/bluetooth.scss
@@ -1,5 +1,5 @@
 .bluetooth {
   margin: 0px 5px;
-  $module-color: $color4;
+  $module-color: mix($color4,$color0,75%);
   @import "./revealer.scss";
 }
diff --git a/de/home/.config/eww/style/bar/networking.scss b/de/home/.config/eww/style/bar/networking.scss
index b365ee7..66fc364 100644
--- a/de/home/.config/eww/style/bar/networking.scss
+++ b/de/home/.config/eww/style/bar/networking.scss
@@ -1,9 +1,11 @@
 .networks {
   margin: 0px 5px;
-  $module-color: darker($color5);
+  $module-color: mix($color14,$color0,75%);
   @import "./revealer.scss";
 }
 
 .vpn {
-  margin: 0px 10px;
+  margin: 0px 5px;
+  $module-color: mix($color6,$color0,75%);
+  @import "./revealer.scss";
 }
diff --git a/de/home/.config/eww/style/bar/revealer.scss b/de/home/.config/eww/style/bar/revealer.scss
index 8f24d65..c4f78f6 100644
--- a/de/home/.config/eww/style/bar/revealer.scss
+++ b/de/home/.config/eww/style/bar/revealer.scss
@@ -17,6 +17,9 @@
 }
 .reveal-children>* {
   border-left: 2px solid $module-color;
+  &.active {
+    background-color: rgba($module-color,0.5);
+  }
 }
 
 //.revealer-on-hover>widget>box>box>* {
diff --git a/de/home/.config/eww/style/bar/volume.scss b/de/home/.config/eww/style/bar/volume.scss
index b22c9d6..d540fde 100644
--- a/de/home/.config/eww/style/bar/volume.scss
+++ b/de/home/.config/eww/style/bar/volume.scss
@@ -1,5 +1,5 @@
 .volume {
   margin: 0px 5px;
-  $module-color: darker($color3);
+  $module-color: mix($color9, $color0, 75%);
   @import "./revealer.scss";
 }