diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts
index 9067f4e5..c97a86a1 100644
--- a/src/app/@theme/styles/theme.corporate.ts
+++ b/src/app/@theme/styles/theme.corporate.ts
@@ -109,10 +109,10 @@ export const CORPORATE_THEME = {
     },
 
     bubbleMap: {
-      titleColor: '#484848',
-      areaColor: '#dddddd',
-      areaHoverColor: '#cccccc',
-      areaBorderColor: '#ebeef2',
+      titleColor: theme.fgText,
+      areaColor: theme.bg4,
+      areaHoverColor: theme.fgHighlight,
+      areaBorderColor: theme.border5,
     },
 
     profitBarAnimationEchart: {
diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts
index 29f0c462..ee2d850a 100644
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/src/app/@theme/styles/theme.cosmic.ts
@@ -109,10 +109,10 @@ export const COSMIC_THEME = {
     },
 
     bubbleMap: {
-      titleColor: '#ffffff',
-      areaColor: '#2c2961',
-      areaHoverColor: '#a1a1e5',
-      areaBorderColor: '#654ddb',
+      titleColor: theme.fgText,
+      areaColor: theme.bg4,
+      areaHoverColor: theme.fgHighlight,
+      areaBorderColor: theme.border5,
     },
 
     profitBarAnimationEchart: {
diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts
index 59591eec..04719671 100644
--- a/src/app/@theme/styles/theme.default.ts
+++ b/src/app/@theme/styles/theme.default.ts
@@ -109,10 +109,10 @@ export const DEFAULT_THEME = {
     },
 
     bubbleMap: {
-      titleColor: '#484848',
-      areaColor: '#dddddd',
-      areaHoverColor: '#cccccc',
-      areaBorderColor: '#ebeef2',
+      titleColor: theme.fgText,
+      areaColor: theme.bg4,
+      areaHoverColor: theme.fgHighlight,
+      areaBorderColor: theme.border5,
     },
 
     profitBarAnimationEchart: {