diff --git a/de/home/.config/eww/modules/bar/workspaces.yuck b/de/home/.config/eww/modules/bar/workspaces.yuck
index 6fce4b1..f3ccde1 100644
--- a/de/home/.config/eww/modules/bar/workspaces.yuck
+++ b/de/home/.config/eww/modules/bar/workspaces.yuck
@@ -8,7 +8,7 @@
   (eventbox
     :onhover "${EWW_CMD} update wsreveal=true"
     :onhoverlost "${EWW_CMD} update wsreveal=false"
-    (box :class "workspaces"
+    (box :class "workspaces ${((activeWorkspace > '30') ? 'profile-work' : ((activeWorkspace > '20') ? 'profile-school' : ((activeWorkspace > '10') ? 'profile-development' : ((activeWorkspace > '0') ? 'profile-personal' : ''))))}"
          :orientation "h"
          :space-evenly false
          :halign "start"
@@ -42,7 +42,7 @@
 
 (defwidget workspace [ws side ?lastws ?firstws]
   (button :onclick `swaymsg workspace "${ws.name}"`
-    :class '${side} ${ws.num == lastws ? "last-workspace" : (ws.num == firstws ? "first-workspace" : "middle-workspace")} ${}'
+    :class '${side} ${ws.num == lastws ? "last-workspace" : (ws.num == firstws ? "first-workspace" : "middle-workspace")} ${((ws.num > '30') ? 'profile-work' : ((ws.num > '20') ? 'profile-school' : ((ws.num > '10') ? 'profile-development' : ((ws.num > '0') ? 'profile-personal' : ''))))}'
     (box
       '${replace(ws.name,".*:","")}'
       (label
diff --git a/de/home/.config/eww/style/bar/workspaces.scss b/de/home/.config/eww/style/bar/workspaces.scss
index 11d255d..0b5b661 100644
--- a/de/home/.config/eww/style/bar/workspaces.scss
+++ b/de/home/.config/eww/style/bar/workspaces.scss
@@ -1,13 +1,12 @@
+$personal-color: $bar-bg-color;
+$development-color: mix($color9, $color12);
+$school-color: mix($color5, $color3);
+$work-color: mix($color5, $color4, 30%);
+
 .profile,
 .workspaces {
   border: 2px solid $bar-bg-color;
   font-weight: bold;
-}
-.profile {
-  margin-left: 10px;
-  border-right: 0px solid transparent;
-  border-radius: $bar-module-border-radius 0px 0px $bar-module-border-radius;
-  color: $bar-bg-color;
   &.profile-development,
   &.profile-school,
   &.profile-work {
@@ -17,18 +16,21 @@
     background-color: transparent;
   }
   &.profile-development {
-    background-color: mix($color9, $color12);
-    border-color: mix($color9, $color12);
+    border-color: $development-color;
   }
   &.profile-school {
-    background-color: mix($color5, $color3);
-    border-color: mix($color5, $color3);
+    border-color: $school-color;
   }
   &.profile-work {
-    background-color: mix($color5, $color4, 30%);
-    border-color: mix($color5, $color4, 30%);
+    border-color: $work-color;
   }
 }
+.profile {
+  margin-left: 10px;
+  border-right: 0px solid transparent;
+  border-radius: $bar-module-border-radius 0px 0px $bar-module-border-radius;
+  color: $bar-bg-color;
+}
 
 .workspaces {
   box.ws-center {
@@ -36,12 +38,21 @@
       background-color: $bar-bg-color;
       color: $bar-module-fg-color;
       border-radius: 0px $bar-module-bg-border-radius $bar-module-bg-border-radius 0px;
+      &.profile-personal {
+        background-color: $personal-color;
+      }
+      &.profile-development {
+        background-color: $development-color;
+      }
+      &.profile-school {
+        background-color: $school-color;
+      }
+      &.profile-work {
+        background-color: $work-color;
+      }
     }
     &.true>box>button {
-//      &.first-workspace,
-//      &.middle-workspace {
       border-radius: 0px;
-//      }
       &.last-workspace {
         border-radius: 0px $bar-module-bg-border-radius $bar-module-bg-border-radius 0px;
       }
@@ -86,9 +97,5 @@
       padding: 0px;
       font-size: 0.6em;
     }
-/*    &:hover {
-      text-shadow: $bar-bg-color;
-      color: darker($bar-bg-color);
-    }*/
   }
 }