diff --git a/public/css/style.css b/public/css/style.css
index a9151b2..c7b2fb6 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -762,7 +762,7 @@ input:checked+.slider:before {
 
 .globe-body {
   height: 280px; /* Match chart-body height exactly */
-  padding: 12px 22px;
+  padding: 0; /* Remove padding to avoid ECharts coordinate mismatch */
   position: relative;
   overflow: hidden;
   cursor: grab;
diff --git a/public/js/app.js b/public/js/app.js
index e076dd8..ab929f7 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -231,6 +231,7 @@
     document.documentElement.classList.toggle('light-theme', theme === 'light');
     localStorage.setItem('theme', theme);
     updateThemeIcons(theme);
+    updateMap2DTheme(theme);
   }
 
   function applyTheme(theme) {
@@ -243,6 +244,7 @@
     dom.themeToggle.checked = isLight;
     document.documentElement.classList.toggle('light-theme', isLight);
     updateThemeIcons(actualTheme);
+    updateMap2DTheme(actualTheme);
   }
 
   function updateThemeIcons(theme) {
@@ -378,11 +380,15 @@
 
         myMap2D = echarts.init(dom.globeContainer);
         
+        const isLight = document.documentElement.classList.contains('light-theme');
+        
         const option = {
             backgroundColor: 'transparent',
             tooltip: {
                 show: true,
                 trigger: 'item',
+                confine: true,
+                transitionDuration: 0,
                 backgroundColor: 'rgba(10, 14, 26, 0.9)',
                 borderColor: 'var(--accent-indigo)',
                 textStyle: { color: '#fff', fontSize: 12 },
@@ -405,15 +411,15 @@
                 roam: true,
                 emphasis: {
                   label: { show: false },
-                  itemStyle: { areaColor: '#2d334d' }
+                  itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
                 },
                 itemStyle: {
-                    areaColor: '#1a1d2d',
-                    borderColor: '#2d334d',
+                    areaColor: isLight ? '#eef0f5' : '#1a1d2d',
+                    borderColor: isLight ? '#cbd5e1' : '#2d334d',
                     borderWidth: 1
                 },
                 select: {
-                  itemStyle: { areaColor: '#2d334d' }
+                  itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
                 }
             },
             series: [{
@@ -443,6 +449,22 @@
     }
   }
 
+  function updateMap2DTheme(theme) {
+    if (!myMap2D) return;
+    const isLight = theme === 'light';
+    myMap2D.setOption({
+        geo: {
+            itemStyle: {
+                areaColor: isLight ? '#eef0f5' : '#1a1d2d',
+                borderColor: isLight ? '#cbd5e1' : '#2d334d'
+            },
+            emphasis: {
+                itemStyle: { areaColor: isLight ? '#f0f2f5' : '#2d334d' }
+            }
+        }
+    });
+  }
+
   function updateMap2D(servers) {
     if (!myMap2D) return;