diff --git a/src/App/styles.less b/src/App/styles.less
index a413ed163..7e44a9643 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -63,6 +63,8 @@
     --overlay-color: rgba(255, 255, 255, 0.05);
     --modal-background-color: rgba(15, 13, 32, 1);
     --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37);
+    --warning-accent-color: rgba(255, 165, 0, 1);
+    --danger-accent-color: rgba(220, 38, 38, 1);  
     --border-radius: 0.75rem;
     --top-overlay-size: @top-overlay-size;
     --bottom-overlay-size: @bottom-overlay-size;
diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index 238b6ed86..66fab7006 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -8,7 +8,7 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame');
 const useLiveRef = require('stremio/common/useLiveRef');
 const styles = require('./styles');
 
-const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete }) => {
+const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, isVolumeSlider }) => {
     const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0);
     const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100);
     const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0);
@@ -99,14 +99,19 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
     const bufferedPosition = Math.max(0, Math.min(1, (bufferedRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current)));
     return (
         <div ref={sliderContainerRef} className={classnames(className, styles['slider-container'], { 'disabled': disabled })} onMouseDown={onMouseDown}>
-            <div className={styles['layer']}>
-                <div className={styles['track']} />
+           <div className={styles['layer']}>
+                <div className={classnames(styles['track'], { [styles['volume-track']]: isVolumeSlider })} />
             </div>
             <div className={styles['layer']}>
                 <div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
             </div>
             <div className={styles['layer']}>
-                <div className={styles['track-after']} style={{ width: `calc(100% * ${thumbPosition})` }} />
+                <div className={classnames(styles['track-after'], { [styles['volume-track-after']]: isVolumeSlider })} 
+                    style={isVolumeSlider 
+                        ? { '--progress-width': `calc(${thumbPosition} * 100%)` }
+                        : { width: `calc(${thumbPosition} * 100%)` }
+                    }
+                />
             </div>
             <div className={styles['layer']}>
                 <div className={styles['thumb']} style={{ marginLeft: `calc(100% * ${thumbPosition})` }} />
@@ -123,7 +128,8 @@ Slider.propTypes = {
     maximumValue: PropTypes.number,
     disabled: PropTypes.bool,
     onSlide: PropTypes.func,
-    onComplete: PropTypes.func
+    onComplete: PropTypes.func,
+    isVolumeSlider: PropTypes.bool
 };
 
 module.exports = Slider;
diff --git a/src/components/Slider/styles.less b/src/components/Slider/styles.less
index 66ad267c7..be85b671f 100644
--- a/src/components/Slider/styles.less
+++ b/src/components/Slider/styles.less
@@ -58,6 +58,37 @@ html.active-slider-within {
         background-color: var(--primary-foreground-color);
     }
 
+    .volume-track {
+        background: linear-gradient(to right, 
+            var(--primary-foreground-color) 0%, 
+            var(--primary-foreground-color) 50%, 
+            var(--warning-accent-color) 75%, 
+            var(--danger-accent-color) 100%) !important;
+        opacity: 0.3;
+        filter: brightness(1.2);
+    }
+    
+    .volume-track-after {
+        background: linear-gradient(to right, 
+            var(--primary-foreground-color) 0%, 
+            var(--primary-foreground-color) 50%, 
+            var(--warning-accent-color) 75%, 
+            var(--danger-accent-color) 100%) !important;
+            
+        width: 100%;
+        mask-image: linear-gradient(to right, 
+            black 0%, 
+            black calc(var(--progress-width) - 2px), 
+            transparent var(--progress-width)
+        );
+        
+        -webkit-mask-image: linear-gradient(to right, 
+            black 0%, 
+            black calc(var(--progress-width) - 2px), 
+            transparent var(--progress-width)
+        );
+    }
+
     .thumb {
         z-index: 3;
         flex: none;
diff --git a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
index 205b6f3af..47b6b829b 100644
--- a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
+++ b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js
@@ -54,6 +54,7 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => {
             disabled={disabled}
             onSlide={onSlide}
             onComplete={onComplete}
+            isVolumeSlider
         />
     );
 };