diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index 976e590..1e7a9a0 100644
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@@ -72,7 +72,7 @@ export default {
       //   console.log(data.matches)
       // }
 
-      document.getElementsByTagName('main')[0].style.background = 'rgba(0, 0, 0, .7)'
+      document.getElementById('app').style.background = 'rgba(0, 0, 0, .7)'
     })
 
     onBeforeUnmount(() => {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2a3514c..1c947ff 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -97,7 +97,7 @@ export default {
       loadRecentVisited()
       store.commit('resetPlayerDetails')
 
-      document.getElementsByTagName('main')[0].style.background = 'none'
+      document.getElementById('app').style.background = 'none'
     })
 
     return {recentVisited, GoToPlayer, removeRecentVisited}
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 6c9e777..a05949e 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -340,7 +340,7 @@ export default {
       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%)'
+      document.getElementById('app').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 = () => {
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 5b33906..a00dbee 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -366,7 +366,7 @@ export default {
 
       // console.log(store.state.playerDetails)
 
-      document.getElementsByTagName('main')[0].style.background = 'rgba(0, 0, 0, .7)'
+      document.getElementById('app').style.background = 'rgba(0, 0, 0, .7)'
     })
 
     onBeforeUnmount(() => {