diff --git a/de/home/.config/eww/eww.scss b/de/home/.config/eww/eww.scss
index 78242ff..754267e 100644
--- a/de/home/.config/eww/eww.scss
+++ b/de/home/.config/eww/eww.scss
@@ -3,9 +3,12 @@
   font-family: FontAwesome, Overpass;
 }
 
+$bar-module-width: 25px;
+
 @import "./style/colors.scss";
 // Global Styles
 .bar {
+  font-size: 0.95em;
   padding: 0px;
   margin: 0px 15px;
   >box>button {
@@ -14,22 +17,27 @@
     }
   }
 
+//bar groups
 .leftgroup,
 .centergroup,
 .rightgroup {
   background-color: rgba($color0,0.85);
   border-radius: 8px;
 }
+
+//group modules
 .leftgroup>*,
 .centergroup>*,
 .rightgroup>* {
-  margin: 0px 5px;
-  min-width: 25px;
+  margin: 3px 5px;
+  min-width: $bar-module-width;
 }
+
+//value bars
 scale trough,
 progressbar>trough {
   background-color: $color9;
-  min-width: 100px;
+  min-width: 50px;
   min-height: 10px;
   border-radius: 4px;
 }
@@ -39,10 +47,13 @@ progressbar>trough>progress {
   border-radius: 4px;
   min-height: 10px;
 }
+
+//value graphs
 circular-progress {
   color: $color9;
   background-color: $color2;
 }
+
 .revealer-on-hover {
   background-color: rgba($color8,0.5);
   border: 2px solid rgba($color0,0.5);
@@ -54,7 +65,7 @@ circular-progress {
 .reveal_children>*,
 .reveal_children>widget>image {
   padding: 5px;
-  min-width: 25px;
+  min-width: $bar-module-width;
   &:hover {
     background-color: rgba($color1,0.5);
   }
@@ -94,7 +105,7 @@ label {
   color: $color0;
 //  margin: 10px 0px;
   padding: 5px;
-  min-width: 25px;
+  min-width: $bar-module-width;
 }
 .workspaces button:hover {
   background-color: rgba($color1,0.5);