diff --git a/modules/bar/workspaces/index.ts b/modules/bar/workspaces/index.ts
index 8e0116c..44ce11f 100644
--- a/modules/bar/workspaces/index.ts
+++ b/modules/bar/workspaces/index.ts
@@ -195,9 +195,9 @@ const Workspaces = (monitor = -1, ws = 8) => {
                                                     ? numbered_active_indicator
                                                     : "";
 
-                                                return `workspace-number ${numActiveInd}`;
+                                                return `workspace-number can_${numbered_active_indicator} ${numActiveInd}`;
                                             }
-                                            return "";
+                                            return "default";
                                         },
                                     ),
                                     label: Utils.merge(
diff --git a/options.ts b/options.ts
index 41370ee..e9b3296 100644
--- a/options.ts
+++ b/options.ts
@@ -140,6 +140,8 @@ const options = mkOptions(OPTIONS, {
                 y_margins: opt("0.4em"),
                 radius: opt("0.3em"),
                 opacity: opt(100),
+                background_opacity: opt(100),
+                background_hover_opacity: opt(100),
                 background: opt(colors.base2),
                 hover: opt(colors.surface1),
                 text: opt(colors.lavender),
@@ -151,7 +153,7 @@ const options = mkOptions(OPTIONS, {
                 },
                 workspaces: {
                     background: opt(colors.base2),
-                    hover: opt(colors.surface1),
+                    hover: opt(colors.pink),
                     available: opt(colors.sky),
                     occupied: opt(colors.flamingo),
                     active: opt(colors.pink),
diff --git a/scss/style/bar/bar.scss b/scss/style/bar/bar.scss
index ec95db2..5397f89 100644
--- a/scss/style/bar/bar.scss
+++ b/scss/style/bar/bar.scss
@@ -19,103 +19,105 @@
   }
 }
 
+$bar-button-background-opacity-ratio: $bar-buttons-background_opacity / 100;
+$transparency-value: 1 - $bar-button-background-opacity-ratio;
+
+$bar-button-background-hover-opacity-ratio: $bar-buttons-background_hover_opacity / 100;
+$transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
+
 .bar_item_box_visible {
-  background-color: $bar-buttons-background;
+  background-color: transparentize($bar-buttons-background, $transparency-value);
   border-radius: $bar-buttons-radius;
   padding: 0.2rem 0.9rem;
   margin: $bar-buttons-y_margins $bar-buttons-spacing;
   opacity: $bar-buttons-opacity/100;
 
   &:hover {
-    background: $bar-buttons-hover;
+    background: transparentize($bar-buttons-hover, $transparency-value-hover);
   }
 
   &.battery {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-battery-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value-hover);
     }
   }
 
   &.bluetooth {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-bluetooth-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value-hover);
     }
   }
 
   &.clock {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-clock-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value-hover);
     }
   }
 
   &.media {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-media-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value-hover);
     }
   }
 
   &.dashboard {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-dashboard-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-dashboard-hover), $transparency-value-hover);
     }
   }
 
   &.network {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-network-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value-hover);
     }
   }
 
   &.notifications {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-notifications-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value-hover);
     }
   }
 
   &.systray {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-systray-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-systray-hover), $transparency-value-hover);
     }
   }
 
   &.volume {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-volume-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value-hover);
     }
   }
 
   &.windowtitle {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background);
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-windowtitle-background), $transparency-value);
 
     &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover);
+      background: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value-hover);
     }
   }
 
   &.workspaces {
-    background-color: if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background);
-
-    &:hover {
-      background: if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-workspaces-hover);
-    }
+    background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
   }
 }
 
diff --git a/scss/style/bar/workspace.scss b/scss/style/bar/workspace.scss
index 7fd4786..451e744 100644
--- a/scss/style/bar/workspace.scss
+++ b/scss/style/bar/workspace.scss
@@ -42,6 +42,7 @@
     }
 
     &.underline {
+      border-top: 0.1em solid transparent;
       border-bottom: 0.1em solid $bar-buttons-workspaces-numbered_active_underline_color;
     }
 
@@ -53,3 +54,24 @@
     }
   }
 }
+
+.workspace-button {
+  &:hover label {
+    color: $bar-buttons-workspaces-hover;
+
+    &.default {
+      background-color: $bar-buttons-workspaces-hover;
+    }
+  }
+
+  &:hover .can_underline {
+    border-top: 0.1em solid transparent;
+    border-bottom: 0.1em solid if($bar-buttons-monochrome, $bar-buttons-workspaces-hover, $bar-buttons-workspaces-hover);
+  }
+
+  &:hover .can_highlight {
+    background-color: $bar-buttons-workspaces-hover;
+    color: $bar-buttons-workspaces-numbered_active_highlighted_text_color;
+    border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
+  }
+}
diff --git a/widget/settings/pages/theme/bar/index.ts b/widget/settings/pages/theme/bar/index.ts
index 2913adf..d80efd3 100644
--- a/widget/settings/pages/theme/bar/index.ts
+++ b/widget/settings/pages/theme/bar/index.ts
@@ -16,6 +16,8 @@ export const BarTheme = () => {
                 Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
                 Option({ opt: options.theme.bar.opacity, title: 'Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
                 Option({ opt: options.theme.bar.buttons.opacity, title: 'Button Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
+                Option({ opt: options.theme.bar.buttons.background_opacity, title: 'Button Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
+                Option({ opt: options.theme.bar.buttons.background_hover_opacity, title: 'Button Background Hover Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
                 Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean', disabledBinding: options.theme.matugen }),
                 Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),
@@ -29,6 +31,7 @@ export const BarTheme = () => {
 
                 Header('Workspaces'),
                 Option({ opt: options.theme.bar.buttons.workspaces.background, title: 'Background', type: 'color' }),
+                Option({ opt: options.theme.bar.buttons.workspaces.hover, title: 'Workspace Hover Color', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.workspaces.available, title: 'Workspace Available Color', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.workspaces.occupied, title: 'Workspace Occupied Color', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.workspaces.active, title: 'Workspace Active Color', type: 'color' }),