diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css
index a9e32ab3..2ebb10d6 100644
--- a/web/assets/css/styles.css
+++ b/web/assets/css/styles.css
@@ -1,6 +1,6 @@
 #chart-button {
   position: sticky;
-  transition: background-color 0.3s ease, width 0.8s ease, height 0.8s ease, transform 0.8s ease;
+  transition: background-color 0.3s ease, width 0.8s ease, height 0.8s ease, transform 0.5s ease;
   background-color: #00000096 !important;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;
   color: white !important;
@@ -26,11 +26,11 @@
   will-change: transform;
   text-align: center;
   transition: width 0.8s ease, height 0.8s ease, transform 0.3s ease;
-  transform: scale(0);
+  display: none;
 }
 
 #chart-button-container.active {
-  transform: scale(1);
+  display: block;
 }
 
 #mydivheader {
diff --git a/web/assets/js/script.js b/web/assets/js/script.js
index a851dcb3..0ed20643 100644
--- a/web/assets/js/script.js
+++ b/web/assets/js/script.js
@@ -675,6 +675,8 @@ window.showPerfMonitor = async function () {
   const chartButtonContainer = document.getElementById('chart-button-container')
 
   if (shouldShowPerfMonitor === true) {
+    $(chartButtonContainer).toggleClass('active')
+
     localStorage.setItem('hasUpdates', 'true')
     startInterval()
     await updateChartSize()
@@ -682,13 +684,13 @@ window.showPerfMonitor = async function () {
   } else {
     setTimeout(() => {
       stopInterval()
+      $(chartButtonContainer).toggleClass('active')
     }, 500)
     chartButton.classList.remove('small', 'medium', 'large')
     $(chartWrapper).fadeOut()
   }
 
   $(chartButton).toggleClass('active')
-  $(chartButtonContainer).toggleClass('active')
 }
 
 // when the close button is clicked