diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index 4a113a1..976e590 100644
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@@ -71,6 +71,8 @@ export default {
       // if (data.matches) {
       //   console.log(data.matches)
       // }
+
+      document.getElementsByTagName('main')[0].style.background = 'rgba(0, 0, 0, .7)'
     })
 
     onBeforeUnmount(() => {
@@ -99,10 +101,6 @@ export default {
   overflow: hidden;
 }
 
-.wrapper {
-  background: rgba(0, 0, 0, .7);
-}
-
 .container-lg {
   padding: 2rem;
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4d82ee9..2a3514c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -96,6 +96,8 @@ export default {
     onBeforeMount(() => {
       loadRecentVisited()
       store.commit('resetPlayerDetails')
+
+      document.getElementsByTagName('main')[0].style.background = 'none'
     })
 
     return {recentVisited, GoToPlayer, removeRecentVisited}
@@ -103,7 +105,6 @@ export default {
 }
 </script>
 
-
 <style lang="scss" scoped>
 .fa {
   font-size: 5rem;
diff --git a/src/views/Match.vue b/src/views/Match.vue
index acff8f7..6c9e777 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -339,6 +339,8 @@ export default {
       const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight
       const scoreWrapper = document.getElementById('scoreWrapper')
       scoreWrapper.style.minHeight = height + 'px'
+
+      document.getElementsByTagName('main')[0].style.background = 'linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.85) 70%, rgba(0, 0, 0, .6) 100%)'
     })
 
     window.onresize = () => {
@@ -524,12 +526,6 @@ export default {
   z-index: 2;
   width: 100%;
   max-width: 100vw;
-  background: linear-gradient(90deg,
-      rgba(0, 0, 0, 0.6) 0%,
-      rgba(0, 0, 0, 0.85) 30%,
-      rgba(0, 0, 0, 0.85) 70%,
-      rgba(0, 0, 0, .6) 100%
-  );
 }
 
 @media (max-width: 991px) {
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 8a9b35e..5b33906 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -365,6 +365,8 @@ export default {
       scrollToPos(store.state.scroll_state)
 
       // console.log(store.state.playerDetails)
+
+      document.getElementsByTagName('main')[0].style.background = 'rgba(0, 0, 0, .7)'
     })
 
     onBeforeUnmount(() => {
@@ -415,8 +417,6 @@ export default {
 }
 
 .wrapper {
-  background: rgba(0, 0, 0, .7);
-
   .load-more {
     padding: 1rem 0;
   }