diff --git a/assets/svg/audio-volume.svg b/assets/svg/audio-volume.svg
deleted file mode 100644
index e4df579..0000000
--- a/assets/svg/audio-volume.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
- <g transform="translate(0 -.00047914)" fill="#dedede">
-  <rect y="6" width="5" height="4" ry="1" fill-rule="evenodd"/>
-  <path d="m6 3-3 3v4l3 3z"/>
-  <g fill-rule="evenodd">
-   <path d="M 13.139,1.428 C 12.594,1 12,1.652 12.455,2.16 A 8,8 0 0 1 15,8 8,8 0 0 1 12.446,13.852 C 12,14.323 12.626,15 13.123,14.58 A 9,9 0 0 0 16,8 9,9 0 0 0 13.139,1.428 Z"/>
-   <path d="m10.775 2.889c-0.587-0.535-1.199 0.225-0.684 0.732a6 6 0 0 1 1.909 4.379 6 6 0 0 1-1.916 4.389c-0.469 0.446 0.173 1.146 0.68 0.728a7 7 0 0 0 2.236-5.117 7 7 0 0 0-2.225-5.111z"/>
-   <path d="M 8.41,4.35 C 7.89,3.856 7.255,4.57 7.727,5.08 A 4,4 0 0 1 9,8 4,4 0 0 1 7.723,10.926 c -0.473,0.43 0.14,1.152 0.68,0.73 A 5,5 0 0 0 10,8 5,5 0 0 0 8.41,4.35 Z"/>
-  </g>
- </g>
-</svg>
diff --git a/config/assets/icons/brightness.svg b/config/assets/icons/brightness.svg
index 564b35d..bcc61ef 100755
--- a/config/assets/icons/brightness.svg
+++ b/config/assets/icons/brightness.svg
@@ -1,141 +1,6 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="svg2"
-   width="16"
-   height="16"
-   viewBox="0 0 16 16"
-   sodipodi:docname="brightness-display-symbolic.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
-  <metadata
-     id="metadata8">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs6" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="941"
-     id="namedview4"
-     showgrid="true"
-     inkscape:zoom="14.75"
-     inkscape:cx="8.2021559"
-     inkscape:cy="9.6684194"
-     inkscape:window-x="0"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2"
-     inkscape:document-rotation="0">
-    <inkscape:grid
-       type="xygrid"
-       id="grid817"
-       spacingx="1"
-       spacingy="1" />
-  </sodipodi:namedview>
-  <ellipse
-     style="opacity:1;fill:#f5f5f5;stroke-width:0.747454;fill-opacity:1"
-     id="path831"
-     cx="8.0105047"
-     cy="8.0086908"
-     rx="4.0077391"
-     ry="4.0165114" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect833"
-     width="2"
-     height="3"
-     x="7"
-     y="0"
-     rx="1"
-     ry="1" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect837"
-     width="3"
-     height="2"
-     x="13"
-     y="7"
-     rx="1"
-     ry="1" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect841"
-     width="2"
-     height="3"
-     x="7"
-     y="13"
-     rx="1"
-     ry="1" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect845"
-     width="3"
-     height="2"
-     x="0"
-     y="7"
-     rx="1"
-     ry="1" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect853"
-     width="2"
-     height="3"
-     x="-1"
-     y="3.3137085"
-     rx="1"
-     ry="1"
-     transform="rotate(-45)" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect855"
-     width="3"
-     height="2"
-     x="5"
-     y="10.313708"
-     rx="1"
-     ry="1"
-     transform="rotate(-45)" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect857"
-     width="2"
-     height="3"
-     x="-1"
-     y="16.313709"
-     rx="1"
-     ry="1"
-     transform="rotate(-45)" />
-  <rect
-     style="opacity:1;fill:#f5f5f5;fill-opacity:1"
-     id="rect859"
-     width="3"
-     height="2"
-     x="-8"
-     y="10.313708"
-     rx="1"
-     ry="1"
-     transform="rotate(-45)" />
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <style id="current-color-scheme" type="text/css"/>
+ </defs>
+ <path d="m7.75 2v2.5h0.5v-2.5zm-3.8965 1.5-0.35352 0.35352 1.7676 1.7676 0.35352-0.35352zm8.1465 0-1.7676 1.7676 0.35352 0.35352 1.7676-1.7676zm-4 1.5a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3zm0.011719 0.98242a2.0292 2.0292 0 0 1 2.0293 2.0293 2.0292 2.0292 0 0 1-2.0293 2.0293 2.0292 2.0292 0 0 1-2.0293-2.0293 2.0292 2.0292 0 0 1 2.0293-2.0293zm-6.0117 1.7676v0.5h2.5v-0.5zm9.5 0v0.5h2.5v-0.5zm-6.2324 2.6289-1.7676 1.7676 0.35352 0.35352 1.7676-1.7676zm5.4648 0-0.35352 0.35352 1.7676 1.7676 0.35352-0.35352zm-2.9824 1.1211v2.5h0.5v-2.5z" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
 </svg>
diff --git a/config/assets/icons/brightness/brightness-0.svg b/config/assets/icons/brightness/brightness-0.svg
new file mode 100755
index 0000000..d6065c7
--- /dev/null
+++ b/config/assets/icons/brightness/brightness-0.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="22" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <style id="current-color-scheme" type="text/css">.ColorScheme-Text { color:#f2f2f2; } .ColorScheme-Highlight { color:#4285f4; }</style>
+ </defs>
+ <path d="m10.75 3.5a0.25 0.25 0 0 0-0.25 0.25v1.5c0 0.139 0.112 0.25 0.25 0.25h0.5a0.25 0.25 0 0 0 0.25-0.25v-1.5a0.25 0.25 0 0 0-0.25-0.25zm-4.699 1.947a0.25 0.25 0 0 0-0.178 0.073l-0.353 0.353a0.25 0.25 0 0 0 0 0.354l1.06 1.06a0.25 0.25 0 0 0 0.354 0l0.353-0.353a0.25 0.25 0 0 0 0-0.354l-1.06-1.06a0.246 0.246 0 0 0-0.176-0.073zm9.898 0a0.246 0.246 0 0 0-0.175 0.073l-1.06 1.06a0.25 0.25 0 0 0 0 0.354l0.353 0.353a0.25 0.25 0 0 0 0.353 0l1.06-1.06a0.25 0.25 0 0 0 0-0.354l-0.353-0.353a0.25 0.25 0 0 0-0.178-0.073zm-4.949 2.053a3.5 3.5 0 0 0-3.5 3.5 3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5 3.5 3.5 0 0 0-3.5-3.5zm0 1a2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5 2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5zm-7.25 2a0.25 0.25 0 0 0-0.25 0.25v0.5c0 0.139 0.112 0.25 0.25 0.25h1.5a0.25 0.25 0 0 0 0.25-0.25v-0.5a0.25 0.25 0 0 0-0.25-0.25zm13 0a0.25 0.25 0 0 0-0.25 0.25v0.5c0 0.139 0.112 0.25 0.25 0.25h1.5a0.25 0.25 0 0 0 0.25-0.25v-0.5a0.25 0.25 0 0 0-0.25-0.25zm-9.992 4.139a0.252 0.252 0 0 0-0.178 0.074l-1.06 1.06a0.25 0.25 0 0 0 0 0.354l0.353 0.353a0.25 0.25 0 0 0 0.354 0l1.06-1.06a0.25 0.25 0 0 0 0-0.354l-0.353-0.353a0.248 0.248 0 0 0-0.176-0.074zm8.484 0a0.248 0.248 0 0 0-0.175 0.074l-0.354 0.353a0.25 0.25 0 0 0 0 0.354l1.06 1.06a0.25 0.25 0 0 0 0.354 0l0.354-0.353a0.25 0.25 0 0 0 0-0.354l-1.06-1.06a0.252 0.252 0 0 0-0.179-0.074zm-4.492 1.861a0.25 0.25 0 0 0-0.25 0.25v1.5c0 0.139 0.112 0.25 0.25 0.25h0.5a0.25 0.25 0 0 0 0.25-0.25v-1.5a0.25 0.25 0 0 0-0.25-0.25z" class="ColorScheme-Text" fill="currentColor"/>
+</svg>
diff --git a/config/assets/icons/brightness/brightness-1.svg b/config/assets/icons/brightness/brightness-1.svg
new file mode 100755
index 0000000..e5b4101
--- /dev/null
+++ b/config/assets/icons/brightness/brightness-1.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-613 191)">
+  <path d="M620.25-190a.25.25 0 0 0-.25.25v1.5c0 .139.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25zm-4.699 1.947a.25.25 0 0 0-.178.073l-.353.353a.25.25 0 0 0 0 .354l1.06 1.06a.25.25 0 0 0 .354 0l.353-.353a.25.25 0 0 0 0-.354l-1.06-1.06a.246.246 0 0 0-.176-.073zm9.898 0a.246.246 0 0 0-.175.073l-1.06 1.06a.25.25 0 0 0 0 .354l.353.353a.25.25 0 0 0 .353 0l1.06-1.06a.25.25 0 0 0 0-.354l-.353-.353a.25.25 0 0 0-.178-.073zM620.5-186a3.5 3.5 0 0 0-3.5 3.5 3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5 3.5 3.5 0 0 0-3.5-3.5zm0 1a2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5 2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5zm-7.25 2a.25.25 0 0 0-.25.25v.5c0 .139.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zm13 0a.25.25 0 0 0-.25.25v.5c0 .139.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zm-9.992 4.139a.252.252 0 0 0-.178.074l-1.06 1.06a.25.25 0 0 0 0 .354l.353.353a.25.25 0 0 0 .354 0l1.06-1.06a.25.25 0 0 0 0-.354l-.353-.353a.248.248 0 0 0-.176-.074zm8.484 0a.248.248 0 0 0-.175.074l-.354.353a.25.25 0 0 0 0 .354l1.06 1.06a.25.25 0 0 0 .354 0l.354-.353a.25.25 0 0 0 0-.354l-1.06-1.06a.252.252 0 0 0-.179-.074zM620.25-177a.25.25 0 0 0-.25.25v1.5c0 .139.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25z" fill="#dedede" overflow="visible" style="isolation:auto;mix-blend-mode:normal"/>
+ </g>
+ <path d="m6 5.3418a3.5 3.5 0 0 0-2 3.1582 3.5 3.5 0 0 0 2 3.1582v-6.3164z" fill="#dedede" fill-rule="evenodd" style="paint-order:stroke fill markers"/>
+</svg>
diff --git a/config/assets/icons/brightness/brightness-2.svg b/config/assets/icons/brightness/brightness-2.svg
new file mode 100755
index 0000000..df7cfba
--- /dev/null
+++ b/config/assets/icons/brightness/brightness-2.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-613 191)">
+  <path d="M620.25-190a.25.25 0 0 0-.25.25v1.5c0 .139.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25zm-4.699 1.947a.25.25 0 0 0-.178.073l-.353.353a.25.25 0 0 0 0 .354l1.06 1.06a.25.25 0 0 0 .354 0l.353-.353a.25.25 0 0 0 0-.354l-1.06-1.06a.246.246 0 0 0-.176-.073zm9.898 0a.246.246 0 0 0-.175.073l-1.06 1.06a.25.25 0 0 0 0 .354l.353.353a.25.25 0 0 0 .353 0l1.06-1.06a.25.25 0 0 0 0-.354l-.353-.353a.25.25 0 0 0-.178-.073zM620.5-186a3.5 3.5 0 0 0-3.5 3.5 3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 3.5-3.5 3.5 3.5 0 0 0-3.5-3.5zm0 1a2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5 2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5zm-7.25 2a.25.25 0 0 0-.25.25v.5c0 .139.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zm13 0a.25.25 0 0 0-.25.25v.5c0 .139.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zm-9.992 4.139a.252.252 0 0 0-.178.074l-1.06 1.06a.25.25 0 0 0 0 .354l.353.353a.25.25 0 0 0 .354 0l1.06-1.06a.25.25 0 0 0 0-.354l-.353-.353a.248.248 0 0 0-.176-.074zm8.484 0a.248.248 0 0 0-.175.074l-.354.353a.25.25 0 0 0 0 .354l1.06 1.06a.25.25 0 0 0 .354 0l.354-.353a.25.25 0 0 0 0-.354l-1.06-1.06a.252.252 0 0 0-.179-.074zM620.25-177a.25.25 0 0 0-.25.25v1.5c0 .139.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0-.25-.25z" fill="#dedede" overflow="visible" style="isolation:auto;mix-blend-mode:normal"/>
+ </g>
+ <path d="m7.5 5a3.5 3.5 0 0 0-3.5 3.5 3.5 3.5 0 0 0 3.5 3.5 3.5 3.5 0 0 0 0.5-0.039062v-6.9199a3.5 3.5 0 0 0-0.5-0.041016z" fill="#dedede" fill-rule="evenodd" style="paint-order:stroke fill markers"/>
+</svg>
diff --git a/config/assets/icons/brightness/brightness-3.svg b/config/assets/icons/brightness/brightness-3.svg
new file mode 100755
index 0000000..c3b390b
--- /dev/null
+++ b/config/assets/icons/brightness/brightness-3.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(-613 191)">
+  <path d="m620.25-190c-0.13807 0-0.25 0.11193-0.25 0.25v1.5c0 0.139 0.112 0.25 0.25 0.25h0.5c0.13807 0 0.25-0.11193 0.25-0.25v-1.5c0-0.13807-0.11193-0.25-0.25-0.25zm-4.699 1.947c-0.0667-3.8e-4 -0.13078 0.0259-0.178 0.073l-0.353 0.353c-0.0979 0.0977-0.0979 0.25632 0 0.354l1.06 1.06c0.0977 0.0979 0.25632 0.0979 0.354 0l0.353-0.353c0.0979-0.0977 0.0979-0.25632 0-0.354l-1.06-1.06c-0.0465-0.047-0.10991-0.0733-0.176-0.073zm9.898 0c-0.0657-3e-5 -0.12877 0.0263-0.175 0.073l-1.06 1.06c-0.0979 0.0977-0.0979 0.25632 0 0.354l0.353 0.353c0.0976 0.0973 0.25543 0.0973 0.353 0l1.06-1.06c0.0979-0.0977 0.0979-0.25632 0-0.354l-0.353-0.353c-0.0472-0.0471-0.1113-0.0734-0.178-0.073zm-12.199 5.053c-0.13807 0-0.25 0.11193-0.25 0.25v0.5c0 0.139 0.112 0.25 0.25 0.25h1.5c0.13807 0 0.25-0.11193 0.25-0.25v-0.5c0-0.13807-0.11193-0.25-0.25-0.25zm13 0c-0.13807 0-0.25 0.11193-0.25 0.25v0.5c0 0.139 0.112 0.25 0.25 0.25h1.5c0.13807 0 0.25-0.11193 0.25-0.25v-0.5c0-0.13807-0.11193-0.25-0.25-0.25zm-9.992 4.139c-0.0668 1e-4 -0.13082 0.0267-0.178 0.074l-1.06 1.06c-0.0979 0.0977-0.0979 0.25632 0 0.354l0.353 0.353c0.0977 0.0979 0.25632 0.0979 0.354 0l1.06-1.06c0.0979-0.0977 0.0979-0.25632 0-0.354l-0.353-0.353c-0.0464-0.0472-0.10981-0.0738-0.176-0.074zm8.484 0c-0.0658 4.6e-4 -0.1288 0.0271-0.175 0.074l-0.354 0.353c-0.0979 0.0977-0.0979 0.25632 0 0.354l1.06 1.06c0.0977 0.0979 0.25632 0.0979 0.354 0l0.354-0.353c0.0979-0.0977 0.0979-0.25632 0-0.354l-1.06-1.06c-0.0474-0.0475-0.11186-0.0742-0.179-0.074zm-4.492 1.861c-0.13807 0-0.25 0.11193-0.25 0.25v1.5c0 0.139 0.112 0.25 0.25 0.25h0.5c0.13807 0 0.25-0.11193 0.25-0.25v-1.5c0-0.13807-0.11193-0.25-0.25-0.25z" color="#000000" fill="#dedede" overflow="visible" style="isolation:auto;mix-blend-mode:normal"/>
+ </g>
+ <circle cx="7.5" cy="8.5" r="3.5" fill="#dedede" fill-rule="evenodd" style="paint-order:stroke fill markers"/>
+</svg>
diff --git a/modules/osd.py b/modules/osd.py
index 66748a9..bf35df2 100644
--- a/modules/osd.py
+++ b/modules/osd.py
@@ -39,7 +39,7 @@ class AnimatedScale(Scale):
 
 class BrightnessOSDContainer(Box):
     def __init__(self, **kwargs):
-        super().__init__(**kwargs, orientation="v", spacing=12, name="osd")
+        super().__init__(**kwargs, orientation="v", spacing=3, name="osd")
         self.brightness_service = Brightness.get_initial()
         self.scale = AnimatedScale(
             marks=(ScaleMark(value=i) for i in range(0, 101, 10)),
@@ -51,7 +51,7 @@ class BrightnessOSDContainer(Box):
         )
         self.osd_window_image = Svg(
             get_relative_path("../config/assets/icons/brightness.svg"),
-            size=(64, 150),
+            size=(84, 150),
             name="osd-image",
             h_align="center",
             v_align="center",
@@ -72,8 +72,17 @@ class BrightnessOSDContainer(Box):
         if current_brightness != 0:
             self.scale.animate_value(normalized_brightness)
 
+    def get_svg(self, value):
+        b_level = 0 if value == 0 else min(int(math.ceil(value / 33)), 3)
+        return b_level
+
     def on_brightness_changed(self, _sender: any, value: float, *_args) -> None:
         normalized_brightness = self._normalize_brightness(value)
+        self.osd_window_image.set_from_file(
+            get_relative_path(
+                f"../config/assets/icons/brightness/brightness-{self.get_svg(normalized_brightness)}.svg"
+            )
+        )
         self.scale.animate_value(normalized_brightness)
 
     def _normalize_brightness(self, brightness: float) -> float:
diff --git a/styles/osd.css b/styles/osd.css
index a831755..d306b45 100644
--- a/styles/osd.css
+++ b/styles/osd.css
@@ -12,7 +12,7 @@
 
 #osd trough {
   background: var(--surface);
-  min-height: 30px;
+  min-height: 15px;
   margin-right: 4px;
   transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   border-radius: 16px;