diff --git a/README.md b/README.md
index 0dc9fff..b108ecc 100644
--- a/README.md
+++ b/README.md
@@ -163,6 +163,9 @@ In addition to colors, `config.css` provides variables that control other style
 --not-playing: var(--tau-love);
 --network: var(--tau-text);
 --weather: var(--tau-text);
+--volume-start: var(--tau-strong);
+--volume-end: var(--tau-accent);
+--volume-inner: var(--tau-accent);
 --bg-focused: var(--tau-highlight-high) / 0.4;
 --bg-unfocused: var(--tau-overlay) / 0.5;
 ```
@@ -202,6 +205,9 @@ In addition to colors, `config.css` provides variables that control other style
 --tiling-direction: var(--rp-rose);
 --network: var(--rp-text);
 --weather: var(--rp-text);
+--volume-start: var(--rp-love);
+--volume-end: var(--rp-foam);
+--volume-inner: var(--rp-foam);
 --bg-focused: var(--rp-subtle) / 0.4;
 --bg-unfocused: var(--rp-base) / 0.5;
 ```
@@ -234,6 +240,9 @@ In addition to colors, `config.css` provides variables that control other style
 --tiling-direction: var(--rp-moon-rose);
 --network: var(--rp-moon-text);
 --weather: var(--rp-moon-text);
+--volume-start: var(--rp-moon-love);
+--volume-end: var(--rp-moon-foam);
+--volume-inner: var(--rp-moon-foam);
 --bg-focused: var(--rp-moon-subtle) / 0.4;
 --bg-unfocused: var(--rp-moon-base) / 0.5;
 ```
@@ -266,6 +275,9 @@ In addition to colors, `config.css` provides variables that control other style
 --tiling-direction: var(--rp-dawn-rose);
 --network: var(--rp-dawn-text);
 --weather: var(--rp-dawn-text);
+--volume-start: var(--rp-dawn-love);
+--volume-end: var(--rp-dawn-foam);
+--volume-inner: var(--rp-dawn-foam);
 --bg-focused: var(--rp-dawn-overlay) / 0.4;
 --bg-unfocused: var(--rp-dawn-text) / 0.5;
 ```
diff --git a/package.json b/package.json
index a24fbff..d4b237c 100644
--- a/package.json
+++ b/package.json
@@ -12,32 +12,33 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
+    "@eslint/js": "^9.34.0",
+    "@lucide/svelte": "^0.541.0",
     "@sveltejs/adapter-auto": "^6.1.0",
     "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.31.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.2",
+    "@tabler/icons-svelte": "^3.34.1",
+    "@tauri-apps/api": "^2.7.0",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.34.0",
-    "@eslint/js": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
+    "fs-extra": "^11.3.1",
     "globals": "^16.3.0",
+    "json5": "^2.2.3",
+    "jsonschema": "^1.5.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "svelte": "^5.38.6",
-    "@lucide/svelte": "^0.541.0",
-    "@tabler/icons-svelte": "^3.34.1",
     "svelte-check": "^4.3.1",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.41.0",
+    "typescript-eslint": "^8.44.0",
     "vite": "^7.1.3",
-    "json5": "^2.2.3",
-    "jsonschema": "^1.5.0",
-    "@tauri-apps/api": "^2.7.0",
-    "fs-extra": "^11.3.1"
+    "svelte-range-slider-pips": "https://github.com/blaiyz/svelte-range-slider-pips/tarball/main"
   },
   "type": "module",
   "dependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fcdaba..0d08c14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,6 +81,9 @@ importers:
       svelte-check:
         specifier: ^4.3.1
         version: 4.3.1(picomatch@4.0.3)(svelte@5.38.6)(typescript@5.9.2)
+      svelte-range-slider-pips:
+        specifier: https://github.com/blaiyz/svelte-range-slider-pips/tarball/main
+        version: https://github.com/blaiyz/svelte-range-slider-pips/tarball/main(svelte@5.38.6)
       tailwindcss:
         specifier: ^3.4.17
         version: 3.4.17
@@ -88,8 +91,8 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
       typescript-eslint:
-        specifier: ^8.41.0
-        version: 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+        specifier: ^8.44.0
+        version: 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
       vite:
         specifier: ^7.1.3
         version: 7.1.3(jiti@1.21.7)(yaml@2.8.1)
@@ -262,6 +265,12 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
+  '@eslint-community/eslint-utils@4.9.0':
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
   '@eslint-community/regexpp@4.12.1':
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -533,63 +542,63 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@typescript-eslint/eslint-plugin@8.41.0':
-    resolution: {integrity: sha512-8fz6oa6wEKZrhXWro/S3n2eRJqlRcIa6SlDh59FXJ5Wp5XRZ8B9ixpJDcjadHq47hMx0u+HW6SNa6LjJQ6NLtw==}
+  '@typescript-eslint/eslint-plugin@8.44.0':
+    resolution: {integrity: sha512-EGDAOGX+uwwekcS0iyxVDmRV9HX6FLSM5kzrAToLTsr9OWCIKG/y3lQheCq18yZ5Xh78rRKJiEpP0ZaCs4ryOQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.41.0
+      '@typescript-eslint/parser': ^8.44.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.41.0':
-    resolution: {integrity: sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==}
+  '@typescript-eslint/parser@8.44.0':
+    resolution: {integrity: sha512-VGMpFQGUQWYT9LfnPcX8ouFojyrZ/2w3K5BucvxL/spdNehccKhB4jUyB1yBCXpr2XFm0jkECxgrpXBW2ipoAw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.41.0':
-    resolution: {integrity: sha512-b8V9SdGBQzQdjJ/IO3eDifGpDBJfvrNTp2QD9P2BeqWTGrRibgfgIlBSw6z3b6R7dPzg752tOs4u/7yCLxksSQ==}
+  '@typescript-eslint/project-service@8.44.0':
+    resolution: {integrity: sha512-ZeaGNraRsq10GuEohKTo4295Z/SuGcSq2LzfGlqiuEvfArzo/VRrT0ZaJsVPuKZ55lVbNk8U6FcL+ZMH8CoyVA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.41.0':
-    resolution: {integrity: sha512-n6m05bXn/Cd6DZDGyrpXrELCPVaTnLdPToyhBoFkLIMznRUQUEQdSp96s/pcWSQdqOhrgR1mzJ+yItK7T+WPMQ==}
+  '@typescript-eslint/scope-manager@8.44.0':
+    resolution: {integrity: sha512-87Jv3E+al8wpD+rIdVJm/ItDBe/Im09zXIjFoipOjr5gHUhJmTzfFLuTJ/nPTMc2Srsroy4IBXwcTCHyRR7KzA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.41.0':
-    resolution: {integrity: sha512-TDhxYFPUYRFxFhuU5hTIJk+auzM/wKvWgoNYOPcOf6i4ReYlOoYN8q1dV5kOTjNQNJgzWN3TUUQMtlLOcUgdUw==}
+  '@typescript-eslint/tsconfig-utils@8.44.0':
+    resolution: {integrity: sha512-x5Y0+AuEPqAInc6yd0n5DAcvtoQ/vyaGwuX5HE9n6qAefk1GaedqrLQF8kQGylLUb9pnZyLf+iEiL9fr8APDtQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.41.0':
-    resolution: {integrity: sha512-63qt1h91vg3KsjVVonFJWjgSK7pZHSQFKH6uwqxAH9bBrsyRhO6ONoKyXxyVBzG1lJnFAJcKAcxLS54N1ee1OQ==}
+  '@typescript-eslint/type-utils@8.44.0':
+    resolution: {integrity: sha512-9cwsoSxJ8Sak67Be/hD2RNt/fsqmWnNE1iHohG8lxqLSNY8xNfyY7wloo5zpW3Nu9hxVgURevqfcH6vvKCt6yg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.41.0':
-    resolution: {integrity: sha512-9EwxsWdVqh42afLbHP90n2VdHaWU/oWgbH2P0CfcNfdKL7CuKpwMQGjwev56vWu9cSKU7FWSu6r9zck6CVfnag==}
+  '@typescript-eslint/types@8.44.0':
+    resolution: {integrity: sha512-ZSl2efn44VsYM0MfDQe68RKzBz75NPgLQXuGypmym6QVOWL5kegTZuZ02xRAT9T+onqvM6T8CdQk0OwYMB6ZvA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.41.0':
-    resolution: {integrity: sha512-D43UwUYJmGhuwHfY7MtNKRZMmfd8+p/eNSfFe6tH5mbVDto+VQCayeAt35rOx3Cs6wxD16DQtIKw/YXxt5E0UQ==}
+  '@typescript-eslint/typescript-estree@8.44.0':
+    resolution: {integrity: sha512-lqNj6SgnGcQZwL4/SBJ3xdPEfcBuhCG8zdcwCPgYcmiPLgokiNDKlbPzCwEwu7m279J/lBYWtDYL+87OEfn8Jw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.41.0':
-    resolution: {integrity: sha512-udbCVstxZ5jiPIXrdH+BZWnPatjlYwJuJkDA4Tbo3WyYLh8NvB+h/bKeSZHDOFKfphsZYJQqaFtLeXEqurQn1A==}
+  '@typescript-eslint/utils@8.44.0':
+    resolution: {integrity: sha512-nktOlVcg3ALo0mYlV+L7sWUD58KG4CMj1rb2HUVOO4aL3K/6wcD+NERqd0rrA5Vg06b42YhF6cFxeixsp9Riqg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.41.0':
-    resolution: {integrity: sha512-+GeGMebMCy0elMNg67LRNoVnUFPIm37iu5CmHESVx56/9Jsfdpsvbv605DQ81Pi/x11IdKUsS5nzgTYbCQU9fg==}
+  '@typescript-eslint/visitor-keys@8.44.0':
+    resolution: {integrity: sha512-zaz9u8EJ4GBmnehlrpoKvj/E3dNbuQ7q0ucyZImm3cLqJ8INTc970B1qEqDX/Rzq65r3TvVTN7kHWPBoyW7DWw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   acorn-jsx@5.3.2:
@@ -734,6 +743,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -1385,6 +1403,12 @@ packages:
       svelte:
         optional: true
 
+  svelte-range-slider-pips@https://github.com/blaiyz/svelte-range-slider-pips/tarball/main:
+    resolution: {tarball: https://github.com/blaiyz/svelte-range-slider-pips/tarball/main}
+    version: 4.0.7
+    peerDependencies:
+      svelte: ^4.2.7 || ^5.0.0
+
   svelte@5.38.6:
     resolution: {integrity: sha512-ltBPlkvqk3bgCK7/N323atUpP3O3Y+DrGV4dcULrsSn4fZaaNnOmdplNznwfdWclAgvSr5rxjtzn/zJhRm6TKg==}
     engines: {node: '>=18'}
@@ -1429,8 +1453,8 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  typescript-eslint@8.41.0:
-    resolution: {integrity: sha512-n66rzs5OBXW3SFSnZHr2T685q1i4ODm2nulFJhMZBotaTavsS8TrI3d7bDlRSs9yWo7HmyWrN9qDu14Qv7Y0Dw==}
+  typescript-eslint@8.44.0:
+    resolution: {integrity: sha512-ib7mCkYuIzYonCq9XWF5XNw+fkj2zg629PSa9KNIQ47RXFF763S5BIX4wqz1+FLPogTZoiw8KmCiRPRa8bL3qw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -1631,6 +1655,11 @@ snapshots:
       eslint: 9.34.0(jiti@1.21.7)
       eslint-visitor-keys: 3.4.3
 
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.34.0(jiti@1.21.7))':
+    dependencies:
+      eslint: 9.34.0(jiti@1.21.7)
+      eslint-visitor-keys: 3.4.3
+
   '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint/config-array@0.21.0':
@@ -1873,14 +1902,14 @@ snapshots:
 
   '@types/json-schema@7.0.15': {}
 
-  '@typescript-eslint/eslint-plugin@8.41.0(@typescript-eslint/parser@8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/scope-manager': 8.41.0
-      '@typescript-eslint/type-utils': 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.41.0
+      '@typescript-eslint/parser': 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/type-utils': 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.44.0
       eslint: 9.34.0(jiti@1.21.7)
       graphemer: 1.4.0
       ignore: 7.0.5
@@ -1890,57 +1919,57 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.41.0
-      '@typescript-eslint/types': 8.41.0
-      '@typescript-eslint/typescript-estree': 8.41.0(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.41.0
-      debug: 4.4.1
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/visitor-keys': 8.44.0
+      debug: 4.4.3
       eslint: 9.34.0(jiti@1.21.7)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.41.0(typescript@5.9.2)':
+  '@typescript-eslint/project-service@8.44.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.41.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.41.0
-      debug: 4.4.1
+      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
+      debug: 4.4.3
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.41.0':
+  '@typescript-eslint/scope-manager@8.44.0':
     dependencies:
-      '@typescript-eslint/types': 8.41.0
-      '@typescript-eslint/visitor-keys': 8.41.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/visitor-keys': 8.44.0
 
-  '@typescript-eslint/tsconfig-utils@8.41.0(typescript@5.9.2)':
+  '@typescript-eslint/tsconfig-utils@8.44.0(typescript@5.9.2)':
     dependencies:
       typescript: 5.9.2
 
-  '@typescript-eslint/type-utils@8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/types': 8.41.0
-      '@typescript-eslint/typescript-estree': 8.41.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
-      debug: 4.4.1
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      debug: 4.4.3
       eslint: 9.34.0(jiti@1.21.7)
       ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.41.0': {}
+  '@typescript-eslint/types@8.44.0': {}
 
-  '@typescript-eslint/typescript-estree@8.41.0(typescript@5.9.2)':
+  '@typescript-eslint/typescript-estree@8.44.0(typescript@5.9.2)':
     dependencies:
-      '@typescript-eslint/project-service': 8.41.0(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.41.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.41.0
-      '@typescript-eslint/visitor-keys': 8.41.0
-      debug: 4.4.1
+      '@typescript-eslint/project-service': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/visitor-keys': 8.44.0
+      debug: 4.4.3
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
@@ -1950,20 +1979,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/utils@8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.34.0(jiti@1.21.7))
-      '@typescript-eslint/scope-manager': 8.41.0
-      '@typescript-eslint/types': 8.41.0
-      '@typescript-eslint/typescript-estree': 8.41.0(typescript@5.9.2)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.34.0(jiti@1.21.7))
+      '@typescript-eslint/scope-manager': 8.44.0
+      '@typescript-eslint/types': 8.44.0
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
       eslint: 9.34.0(jiti@1.21.7)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.41.0':
+  '@typescript-eslint/visitor-keys@8.44.0':
     dependencies:
-      '@typescript-eslint/types': 8.41.0
+      '@typescript-eslint/types': 8.44.0
       eslint-visitor-keys: 4.2.1
 
   acorn-jsx@5.3.2(acorn@8.15.0):
@@ -2091,6 +2120,10 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
@@ -2724,6 +2757,10 @@ snapshots:
     optionalDependencies:
       svelte: 5.38.6
 
+  svelte-range-slider-pips@https://github.com/blaiyz/svelte-range-slider-pips/tarball/main(svelte@5.38.6):
+    dependencies:
+      svelte: 5.38.6
+
   svelte@5.38.6:
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -2799,12 +2836,12 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  typescript-eslint@8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2):
+  typescript-eslint@8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.41.0(@typescript-eslint/parser@8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/typescript-estree': 8.41.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.41.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.44.0(@typescript-eslint/parser@8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.44.0(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.44.0(eslint@9.34.0(jiti@1.21.7))(typescript@5.9.2)
       eslint: 9.34.0(jiti@1.21.7)
       typescript: 5.9.2
     transitivePeerDependencies:
diff --git a/src/app.css b/src/app.css
index 30f9443..1000bd5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,7 +11,7 @@
 @tailwind components;
 @tailwind utilities;
 
-@layer base {
+@layer custom-base {
   body {
     overflow: hidden;
     font-size: var(--font-size);
diff --git a/src/components/NowPlaying.svelte b/src/components/NowPlaying.svelte
index 84cc32e..ab0f90f 100644
--- a/src/components/NowPlaying.svelte
+++ b/src/components/NowPlaying.svelte
@@ -53,17 +53,17 @@
   {#if isOnPrimaryMonitor() && media && shownSession}
     <div
       transition:fly={{ y: 20, duration: config.transitionDuration }}
-      class="flex items-center gap-3 mr-2"
+      class="flex items-stretch"
     >
       <button
-        class="transition hover:text-zb-accent hover:scale-125"
+        class="transition px-2 hover:text-zb-accent hover:scale-125"
         aria-label="Previous"
         onclick={() => media.previous()}
       >
         <SkipBack />
       </button>
       <button
-        class="relative gap-x-2 overflow-hidden inline-flex items-center justify-center group transition hover:text-zb-accent"
+        class="relative px-1 gap-x-2 overflow-hidden inline-flex items-center justify-center group transition hover:text-zb-accent"
         aria-label="Toggle"
         onclick={() => media.togglePlayPause()}
       >
@@ -102,7 +102,7 @@
         </SmoothDiv>
       </button>
       <button
-        class="transition hover:text-zb-accent hover:scale-125"
+        class="transition px-2 hover:text-zb-accent hover:scale-125"
         aria-label="Next"
         onclick={() => media.next()}
       >
diff --git a/src/components/RightGroup.svelte b/src/components/RightGroup.svelte
index ca3f3d9..c116a1e 100644
--- a/src/components/RightGroup.svelte
+++ b/src/components/RightGroup.svelte
@@ -5,6 +5,7 @@
   import PointFilled from "@tabler/icons-svelte/icons/point-filled";
   import NowPlaying from "./NowPlaying.svelte";
   import SmoothDiv from "./SmoothDiv.svelte";
+  import VolumeControl from "./VolumeControl/VolumeControl.svelte";
 
   let date = $derived(providers.date);
   let weather = $derived(providers.weather);
@@ -15,12 +16,24 @@
     const shortDay = days[date.getDay()];
     return shortDay + " " + date.toLocaleDateString();
   };
+
+  const timeOptions: Intl.DateTimeFormatOptions = {
+    hour: "numeric",
+    minute: "2-digit"
+  };
 </script>
 
 <div class="flex flex-row items-center h-full">
   <NowPlaying />
+  {#if isOnPrimaryMonitor()}
+    <VolumeControl />
+  {/if}
   {#if weather}
-    <div class="truncate flex items-center mr-2">
+    <div
+      class="truncate flex items-center pr-2 {!isOnPrimaryMonitor()
+        ? 'pl-2'
+        : ''}"
+    >
       <span class="text-2xl">
         {#if weather.status === "clear_day"}
           <i class="nf nf-weather-day_sunny"></i>
@@ -53,10 +66,13 @@
   {/if}
   {#if !isOnPrimaryMonitor() || !config.taskbarIntegration.enabled}
     <PointFilled class="mr-2" />
-    <SmoothDiv outerClass="flex h-full overflow-hidden">
-      <button onclick={() => (fullDate = !fullDate)}>
+    <SmoothDiv outerClass="flex items-stretch h-full overflow-hidden">
+      <button
+        class="hover:text-zb-accent"
+        onclick={() => (fullDate = !fullDate)}
+      >
         <p class="whitespace-nowrap">
-          {date?.formatted}
+          {date?.new.toLocaleTimeString(undefined, timeOptions)}
           {#if fullDate}
             -
             {date && getDate(date?.new)}
diff --git a/src/components/VolumeControl/VolumeControl.css b/src/components/VolumeControl/VolumeControl.css
new file mode 100644
index 0000000..1c528fd
--- /dev/null
+++ b/src/components/VolumeControl/VolumeControl.css
@@ -0,0 +1,84 @@
+#VolumeSlider {
+  @apply transition-colors;
+  --pip-height: 0.4rem;
+  --track-width: 0.4rem;
+  --handle-rotate: 0deg;
+
+  --range-slider: hsl(var(--border));
+  --range-inactive: hsl(var(--volume-end));
+  --range-range: hsl(var(--volume-end));
+  --range-low: hsl(var(--volume-start));
+
+  --range-handle-inactive: hsl(var(--volume-inner));
+  --range-handle: hsl(var(--volume-inner));
+  --range-handle-focus: hsl(var(--volume-inner));
+  --range-handle-border: transparent;
+
+  --range-pip: hsl(var(--text));
+  --range-pip-in-range: hsl(var(--volume-end));
+  --range-pip-active: hsl(var(--volume-end));
+  --range-pip-hover: hsl(var(--volume-end));
+}
+
+#VolumeSlider.rangeSlider.rsPips {
+  margin-bottom: 0;
+}
+
+#VolumeSlider.rangeSlider {
+  margin: 0;
+  margin-inline: 0.5rem;
+  @apply transition-[margin];
+}
+
+#VolumeSlider.rangeSlider:hover,
+#VolumeSlider.rangeSlider:active {
+  margin-inline: 1.2rem;
+}
+
+#VolumeSlider .rangeBar {
+  @apply bg-gradient-to-r from-[var(--range-low)] to-[var(--range)];
+}
+
+#VolumeSlider .rangePips .rsPip {
+  height: var(--pip-height);
+  width: 0.1rem;
+}
+
+#VolumeSlider.rangeSlider .rangeHandle {
+  width: 0;
+  height: 0;
+  background: none;
+  display: grid;
+  grid-template: 1fr / 1fr;
+  align-items: center;
+  overflow: hidden;
+  @apply transition-[width,height];
+}
+
+#VolumeSlider.rangeSlider:hover .rangeHandle,
+#VolumeSlider.rangeSlider:active .rangeHandle {
+  width: 2.2rem;
+  height: 1.2rem;
+}
+
+#VolumeSlider.rangeSlider .rangeFloat {
+  opacity: 0;
+  background: transparent;
+  translate: none;
+  grid-area: 1 / 1;
+  position: static;
+  padding: 0;
+}
+
+#VolumeSlider.rangeSlider:hover .rangeFloat,
+#VolumeSlider.rangeSlider:active .rangeFloat {
+  opacity: 1;
+}
+
+#VolumeSlider.rangeSlider .rangeNub {
+  transform: none;
+  border-width: 0.2rem;
+  color: var(--range-handle);
+  border-color: var(--range-handle);
+  background-color: color-mix(in srgb, currentColor 50%, hsl(var(--bg)));
+}
diff --git a/src/components/VolumeControl/VolumeControl.svelte b/src/components/VolumeControl/VolumeControl.svelte
new file mode 100644
index 0000000..c209660
--- /dev/null
+++ b/src/components/VolumeControl/VolumeControl.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { providers } from "$lib/providers.svelte";
+  import VolumeX from "@lucide/svelte/icons/volume-x";
+  import Volume from "@lucide/svelte/icons/volume";
+  import Volume1 from "@lucide/svelte/icons/volume-1";
+  import Volume2 from "@lucide/svelte/icons/volume-2";
+  import VolumeOff from "@lucide/svelte/icons/volume-off";
+  import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+  import RangeSlider from "svelte-range-slider-pips";
+  import SmoothDiv from "../SmoothDiv.svelte";
+  import "./VolumeControl.css";
+
+  let audio = $derived(providers.audio);
+  let device = $derived(audio?.defaultPlaybackDevice);
+  let volume = $derived(device?.volume ?? 0);
+  let muted = $derived(device?.isMuted ?? false);
+  let sliderOpen = $state(false);
+  let values = $derived([volume]);
+
+  const onMouseWheel = (e: WheelEvent) => {
+    if (!device) return;
+    e.preventDefault();
+    const increment = 5;
+    let newVolume = volume + (e.deltaY < 0 ? increment : -increment);
+    newVolume = Math.max(0, Math.min(100, newVolume));
+    audio?.setVolume(newVolume);
+  };
+</script>
+
+{#if device}
+  <div class="flex items-stretch h-full mr-1" onwheel={onMouseWheel}>
+    <div class="h-full overflow-hidden flex items-center">
+      <SmoothDiv outerClass="flex justify-end">
+        {#if sliderOpen}
+          <RangeSlider
+            id="VolumeSlider"
+            class="w-24 mr-2"
+            float
+            min={0}
+            max={100}
+            range="min"
+            step={1}
+            pips
+            pipstep={10}
+            bind:values
+            on:change={(e) => audio?.setVolume(e.detail.value)}
+          />
+        {/if}
+      </SmoothDiv>
+    </div>
+    <button
+      class="transition px-1 text-lg hover:text-zb-accent hover:scale-125 {sliderOpen
+        ? 'rotate-180'
+        : ''}"
+      aria-label="Open volume slider"
+      onclick={() => (sliderOpen = !sliderOpen)}><ChevronLeft /></button
+    >
+    <button
+      class="transition px-1 mr-1 text-lg stroke-2 hover:text-zb-accent hover:scale-125"
+      aria-label="Mute"
+      onclick={() => audio?.setMute(!muted)}
+    >
+      {#if device}
+        {#if muted || volume === 0}
+          <VolumeX />
+        {:else if volume <= 33}
+          <Volume />
+        {:else if volume > 33 && volume <= 66}
+          <Volume1 />
+        {:else}
+          <Volume2 />
+        {/if}
+      {:else}
+        <VolumeOff />
+      {/if}
+    </button>
+  </div>
+{/if}
diff --git a/src/lib/providers.svelte.ts b/src/lib/providers.svelte.ts
index 8d70977..40b1298 100644
--- a/src/lib/providers.svelte.ts
+++ b/src/lib/providers.svelte.ts
@@ -8,12 +8,13 @@ import { configLoaded, type Config } from "./config.svelte";
 const providerConfig = {
   battery: { type: "battery", refreshInterval: 1000 * 60 * 1 }, // 1 minute
   cpu: { type: "cpu", refreshInterval: 2000 },
-  date: { type: "date", formatting: "HH:mm" },
+  date: { type: "date" },
   glazewm: { type: "glazewm" },
   memory: { type: "memory", refreshInterval: 5000 },
   network: { type: "network", refreshInterval: 2000 },
   weather: { type: "weather", refreshInterval: 1000 * 60 * 15 }, // 15 minutes
-  media: { type: "media" }
+  media: { type: "media" },
+  audio: { type: "audio" }
 } satisfies ProviderGroupConfig;
 
 const providers: ProviderGroup<typeof providerConfig>["outputMap"] = $state({
@@ -24,7 +25,8 @@ const providers: ProviderGroup<typeof providerConfig>["outputMap"] = $state({
   memory: null,
   network: null,
   weather: null,
-  media: null
+  media: null,
+  audio: null
 });
 
 async function initProviders() {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c830f2d..69d42a3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -122,7 +122,7 @@
       <Group
         rightCurve={!config.attachSides}
         outerClass="h-full justify-self-end"
-        innerClass="h-full px-4 flex items-center {isOnPrimaryMonitor()
+        innerClass="h-full pl-2 pr-4 flex items-center {isOnPrimaryMonitor()
           ? 'pr-zrby'
           : ''}"
       >
diff --git a/static/config.css b/static/config.css
index 493656f..615be97 100644
--- a/static/config.css
+++ b/static/config.css
@@ -53,6 +53,9 @@
   --not-playing: var(--tau-love);
   --network: var(--tau-text);
   --weather: var(--tau-text);
+  --volume-start: var(--tau-strong);
+  --volume-end: var(--tau-accent);
+  --volume-inner: var(--tau-accent);
   --bg-focused: var(--tau-highlight-high) / 0.4;
   --bg-unfocused: var(--tau-overlay) / 0.5;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index a52d046..0442ee5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,7 +36,12 @@ export default {
           accent: "hsl( var(--accent) )",
           "tiling-direction": "hsl( var(--tiling-direction) )",
           network: "hsl( var(--network) )",
-          weather: "hsl( var(--weather) )"
+          weather: "hsl( var(--weather) )",
+          volume: {
+            start: "hsl( var(--volume-start) )",
+            end: "hsl( var(--volume-end) )",
+            inner: "hsl( var(--volume-inner) )"
+          }
         },
         blend: generateBlends()
       },