diff --git a/modules/home/ags/style/main.scss b/modules/home/ags/style/main.scss
index 04b0cc4..e11c71f 100644
--- a/modules/home/ags/style/main.scss
+++ b/modules/home/ags/style/main.scss
@@ -1,4 +1,4 @@
 @import "bar.scss";
-@import "workspaces.scss";
-@import "slider.scss";
 @import "screen-corners.scss";
+@import "workspaces.scss";
+@import "volume.scss";
diff --git a/modules/home/ags/style/slider.scss b/modules/home/ags/style/slider.scss
deleted file mode 100644
index 14b9b8e..0000000
--- a/modules/home/ags/style/slider.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.slider {
-  min-width: 200px;
-}
diff --git a/modules/home/ags/style/volume.scss b/modules/home/ags/style/volume.scss
new file mode 100644
index 0000000..f785379
--- /dev/null
+++ b/modules/home/ags/style/volume.scss
@@ -0,0 +1,18 @@
+.slider {
+  min-width: 10em;
+
+  slider {
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  trough {
+    min-height: 1em;
+    background-color: #{"@scrollbar_outline_color"};
+
+    &,
+    highlight {
+      border-radius: 2em;
+    }
+  }
+}
diff --git a/modules/home/ags/style/workspaces.scss b/modules/home/ags/style/workspaces.scss
index dd8b9da..2abbfbc 100644
--- a/modules/home/ags/style/workspaces.scss
+++ b/modules/home/ags/style/workspaces.scss
@@ -3,11 +3,11 @@
     min-width: 0em;
     min-height: 0.5em;
     border-radius: 2em;
-    color: #{"@view_color"};
+    background-color: #{"@scrollbar_outline_color"};
 
     &.active {
       min-width: 1em;
-      background-color: #{"@view_fg_color"};
+      background-color: #{"@accent_color"};
     }
   }
 }
diff --git a/modules/home/ags/widget/Bar.ts b/modules/home/ags/widget/Bar.ts
index 5b71a98..e58775d 100644
--- a/modules/home/ags/widget/Bar.ts
+++ b/modules/home/ags/widget/Bar.ts
@@ -1,6 +1,6 @@
 import Workspaces from "./Workspaces";
 import Clock from "./Clock";
-import VolumeSlider from "./VolumeSlider";
+import Volume from "./Volume";
 import PowerMenu from "./PowerMenu";
 
 export const Start = () =>
@@ -22,7 +22,7 @@ export const End = () =>
     hexpand: true,
     hpack: "end",
     spacing: 10,
-    children: [VolumeSlider(), PowerMenu()],
+    children: [Volume(), PowerMenu()],
   });
 
 export const Bar = (monitor = 0) =>
diff --git a/modules/home/ags/widget/Volume.ts b/modules/home/ags/widget/Volume.ts
new file mode 100644
index 0000000..872eb54
--- /dev/null
+++ b/modules/home/ags/widget/Volume.ts
@@ -0,0 +1,35 @@
+const audio = await Service.import("audio");
+
+export enum Type {
+  Speaker = "speaker",
+  Microphone = "microphone",
+}
+
+export const VolumeSlider = (type = Type.Speaker) =>
+  Widget.Slider({
+    className: "slider",
+    hexpand: true,
+    drawValue: false,
+
+    onChange: ({ value }) => (audio[type].volume = value),
+    value: audio[type].bind("volume"),
+  });
+
+function getIcon(volume: number) {
+  const icons = ["muted", "low", "medium", "high", "overamplified"];
+  const i = Math.ceil(volume * (icons.length - 1));
+  return `audio-volume-${icons[i]}-symbolic`;
+}
+
+export const VolumeIcon = (type = Type.Speaker) =>
+  Widget.Icon({
+    icon: audio[type].bind("volume").as((v) => getIcon(v)),
+  });
+
+export const Volume = (type = Type.Speaker) =>
+  Widget.Box({
+    className: "volume-slider",
+    children: [VolumeIcon(type), VolumeSlider(type)],
+  });
+
+export default Volume;
diff --git a/modules/home/ags/widget/VolumeSlider.ts b/modules/home/ags/widget/VolumeSlider.ts
deleted file mode 100644
index a4c20ce..0000000
--- a/modules/home/ags/widget/VolumeSlider.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-const audio = await Service.import("audio");
-
-export const VolumeSlider = (type: "speaker" | "microphone" = "speaker") =>
-  Widget.Box({
-    className: "volume-slider",
-    children: [
-      Widget.Label({
-        label: audio[type]
-          .bind("volume")
-          .transform((v) => Math.round(v * 100).toString()),
-      }),
-      Widget.Slider({
-        className: "slider",
-        hexpand: true,
-        drawValue: false,
-
-        onChange: ({ value }) => (audio[type].volume = value),
-        value: audio[type].bind("volume"),
-      }),
-    ],
-  });
-
-export default VolumeSlider;