diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 6a09435ce..4904afa6a 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -85,6 +85,7 @@ const MetaItem = React.memo(({ className, type, name, poster, posterShape, playI
                     progress > 0 ?
                         <div className={styles['progress-bar-layer']}>
                             <div className={styles['progress-bar']} style={{ width: `${Math.max(0, Math.min(1, progress)) * 100}%` }} />
+                            <div className={styles['progress-bar-background']} />
                         </div>
                         :
                         null
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 74bf510c2..6164ee084 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -126,7 +126,6 @@
             right: 1rem;
             height: 0.45rem;
             border-radius: 0.45rem;
-            background-color: var(--overlay-color);
             overflow: hidden;
 
             .progress-bar {
@@ -134,6 +133,16 @@
                 height: 100%;
                 background-color: var(--primary-foreground-color);
             }
+            
+            .progress-bar-background {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: var(--primary-foreground-color);
+                opacity: 0.3;
+            }
         }
 
         .new-videos {