diff --git a/src/App.css b/src/App.css
index 09c0030..4b4ffe3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1859,32 +1859,56 @@ table tbody tr:hover {
   }
 }
 
-/* Chart Export Button */
+/* Chart Export Button & Header */
+.exportable-chart-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.chart-header-with-export {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.chart-header-with-export h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.chart-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .exportable-chart {
   position: relative;
+  flex: 1;
+  min-height: 0;
 }
 
 .chart-export-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
   width: 32px;
   height: 32px;
+  min-width: 32px;
   border: none;
-  background: var(--bg-secondary);
+  background: var(--bg);
   border-radius: 6px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-secondary);
-  opacity: 0;
-  transition: opacity 0.15s ease, background 0.15s ease;
-}
-
-.exportable-chart:hover .chart-export-btn {
-  opacity: 1;
+  color: var(--text-muted);
+  transition: background 0.15s ease, color 0.15s ease;
 }
 
 .chart-export-btn:hover {
@@ -1892,6 +1916,10 @@ table tbody tr:hover {
   color: var(--text-primary);
 }
 
+.chart-export-btn.visible {
+  opacity: 1;
+}
+
 .chart-canvas-wrapper {
   width: 100%;
   height: 100%;