diff --git a/app.js b/app.js
index e2b2f8d..27bd43e 100644
--- a/app.js
+++ b/app.js
@@ -1256,13 +1256,15 @@ function setupHoverEvents(sunburstData) {
             chartEyeBtn.style.left = pendingButtonPosition.left;
             chartEyeBtn.style.top = pendingButtonPosition.top;
             chartEyeBtn.style.transform = pendingButtonPosition.transform;
-            chartEyeBtn.style.display = 'flex';
+            chartEyeBtn.style.opacity = '1';
+            chartEyeBtn.style.pointerEvents = 'auto';
         } else if (!isOverEyeButton) {
-            chartEyeBtn.style.display = 'none';
+            chartEyeBtn.style.opacity = '0';
+            chartEyeBtn.style.pointerEvents = 'none';
         }
     }
 
-    // Handle mouse movement on chart - show button while moving, hide after 1 second of inactivity
+    // Handle mouse movement on chart - show button while moving, hide after 0.5s of inactivity
     function onChartMouseMove() {
         isMouseMoving = true;
         updateButtonVisibility();
@@ -1272,11 +1274,11 @@ function setupHoverEvents(sunburstData) {
             clearTimeout(mouseMovingTimeout);
         }
 
-        // Set timeout to hide button after 1 second of no movement
+        // Set timeout to hide button after 0.5 second of no movement
         mouseMovingTimeout = setTimeout(() => {
             isMouseMoving = false;
             updateButtonVisibility();
-        }, 1000);
+        }, 500);
     }
 
     // Add mousemove listener to chart container
@@ -1339,7 +1341,8 @@ function setupHoverEvents(sunburstData) {
         } else {
             // Fallback: clear pending position if we can't get layout
             pendingButtonPosition = null;
-            chartEyeBtn.style.display = 'none';
+            chartEyeBtn.style.opacity = '0';
+            chartEyeBtn.style.pointerEvents = 'none';
         }
     }
 
@@ -1360,7 +1363,8 @@ function setupHoverEvents(sunburstData) {
         hideButtonTimeout = setTimeout(() => {
             // Double-check: don't hide if now over button or still over a chart sector
             if (!isOverEyeButton && !isOverChartSector && chartEyeBtn) {
-                chartEyeBtn.style.display = 'none';
+                chartEyeBtn.style.opacity = '0';
+                chartEyeBtn.style.pointerEvents = 'none';
                 currentHoveredSectorData = null;
                 currentHoveredSectorParams = null;
             }
@@ -1374,7 +1378,8 @@ function setupHoverEvents(sunburstData) {
             if (currentHoveredSectorData) {
                 openTransactionModal(currentHoveredSectorData);
                 // Hide button after opening modal
-                chartEyeBtn.style.display = 'none';
+                chartEyeBtn.style.opacity = '0';
+                chartEyeBtn.style.pointerEvents = 'none';
                 isOverEyeButton = false;
             }
         });
diff --git a/styles.css b/styles.css
index 88669a0..ced8b1b 100644
--- a/styles.css
+++ b/styles.css
@@ -355,9 +355,10 @@ body {
     align-items: center;
     justify-content: center;
     filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
-    transition: filter 0.15s;
+    transition: filter 0.15s, opacity 0.2s ease-out;
     color: #111;
     pointer-events: auto;
+    opacity: 0;
 }
 
 .chart-eye-btn:hover {