diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 0a2efef8a..5d5d34f26 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -612,7 +612,15 @@ const Player = ({ urlParams, queryParams }) => {
             />
             {
                 video.state.buffering ?
-                    <BufferingLoader className={styles['layer']} logo={player?.metaItem?.content?.logo} />
+                    <BufferingLoader className={classnames(styles['layer'], styles['buffering-layer'])} logo={player?.metaItem?.content?.logo} />
+                    :
+                    null
+            }
+            {
+                !video.state.loaded ?
+                    <div className={styles['layer']}>
+                        <img src={player?.metaItem?.content?.background} />
+                    </div>
                     :
                     null
             }
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 362b9029b..026837cbf 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -40,10 +40,15 @@ html:not(.active-slider-within) {
         bottom: 0;
         z-index: 0;
 
+        &.buffering-layer {
+            z-index: 1;
+        }
+
         &.nav-bar-layer {
             bottom: initial;
             background: transparent;
             overflow: visible;
+            z-index: 2;
 
             &::before {
                 position: absolute;
@@ -73,6 +78,7 @@ html:not(.active-slider-within) {
         &.control-bar-layer {
             top: initial;
             overflow: visible;
+            z-index: 2;
 
             &::before {
                 position: absolute;