diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css
index 393a3a61..a9e32ab3 100644
--- a/web/assets/css/styles.css
+++ b/web/assets/css/styles.css
@@ -26,6 +26,11 @@
   will-change: transform;
   text-align: center;
   transition: width 0.8s ease, height 0.8s ease, transform 0.3s ease;
+  transform: scale(0);
+}
+
+#chart-button-container.active {
+  transform: scale(1);
 }
 
 #mydivheader {
diff --git a/web/assets/js/script.js b/web/assets/js/script.js
index 52e64210..a851dcb3 100644
--- a/web/assets/js/script.js
+++ b/web/assets/js/script.js
@@ -672,6 +672,7 @@ window.showPerfMonitor = async function () {
   localStorage.setItem('shouldShowPerfMonitor', shouldShowPerfMonitor)
   const chartButton = document.getElementById('chart-button')
   const chartWrapper = document.getElementById('chart-wrapper')
+  const chartButtonContainer = document.getElementById('chart-button-container')
 
   if (shouldShowPerfMonitor === true) {
     localStorage.setItem('hasUpdates', 'true')
@@ -687,6 +688,7 @@ window.showPerfMonitor = async function () {
   }
 
   $(chartButton).toggleClass('active')
+  $(chartButtonContainer).toggleClass('active')
 }
 
 // when the close button is clicked