diff --git a/css/centered-box.css b/css/centered-box.css
index fddbdd6..68787c1 100644
--- a/css/centered-box.css
+++ b/css/centered-box.css
@@ -10,4 +10,16 @@
 	top: 50%;
 	-webkit-transform: translate(-50%, -50%);
 	transform: translate(-50%, -50%);
+}
+
+#centeredBox {
+	opacity: 1;
+	z-index: 2;
+    transition: opacity var(--transition-speed),
+    			z-index var(--transition-speed);
+}
+
+#centeredBox.hiddenBox {
+	opacity: 0 !important;
+	z-index: 0 !important;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 842ab84..ef41809 100644
--- a/index.html
+++ b/index.html
@@ -231,6 +231,7 @@
 	<script src="js/weather-screen.js"></script>
 	<script src="js/weather-settings.js"></script>
 	<script src="js/web-menu.js"></script>
+	<script src="js/centered-box.js"></script>
 	<script src="js/mobile-swipe-event.js"></script>
 	<script src="js/mobile-swipe-callback.js"></script>
 </body>
diff --git a/js/centered-box.js b/js/centered-box.js
new file mode 100644
index 0000000..04877db
--- /dev/null
+++ b/js/centered-box.js
@@ -0,0 +1,6 @@
+var centeredBox = document.getElementById("centeredBox");
+
+const toggleCenteredBox = () => {
+    centeredBox.classList.toggle('hiddenBox');
+    console.log('toggle center box');
+}
diff --git a/js/weather-screen.js b/js/weather-screen.js
index ff819be..1055f6c 100644
--- a/js/weather-screen.js
+++ b/js/weather-screen.js
@@ -255,5 +255,8 @@ const toggleWeatherScreen = () => {
     	showWeatherScreen();  	
     }
 
+    // Toggle center box
+    toggleCenteredBox();
+
 	console.log('toggle weather screen');
 }
\ No newline at end of file
diff --git a/js/web-menu.js b/js/web-menu.js
index 9c13d2b..e6674b4 100644
--- a/js/web-menu.js
+++ b/js/web-menu.js
@@ -215,6 +215,10 @@ const toggleWebMenu = () => {
     	// Show Web menu
     	showWebMenu();
     }
+
+    // Toggle center box
+    toggleCenteredBox();
+    
 	console.log('toggle web menu');
 }