diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts
index 0d61836b..62b7f21e 100644
--- a/src/app/@theme/styles/theme.corporate.ts
+++ b/src/app/@theme/styles/theme.corporate.ts
@@ -260,60 +260,59 @@ export const CORPORATE_THEME = {
     },
 
     visitors: {
-      tooltipBg: '#ffffff',
+      tooltipBg: theme.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: theme.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: theme.fgText,
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: theme.border4,
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: theme.fg,
+      yAxisSplitLine: theme.separator,
 
-      itemBorderColor: '#73a1ff',
+      itemBorderColor: theme.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
-      lineGradFrom: '#73a1ff',
-      lineGradTo: '#73a1ff',
+      lineGradFrom: '#ffffff',
+      lineGradTo: '#ffffff',
       lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(146, 181, 252, 1)',
-      areaGradTo: 'rgba(146, 181, 252, 1)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: theme.primary,
+      areaGradTo: theme.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: 'rgba(227, 236, 254, 1)',
-      innerAreaGradTo: 'rgba(227, 236, 254, 1)',
+      innerAreaGradFrom: theme.success,
+      innerAreaGradTo: theme.success,
     },
 
     visitorsLegend: {
-      firstIcon: '#e3ecfe',
-      secondIcon: '#719efc',
+      firstIcon: theme.success,
+      secondIcon: theme.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: '#94e2ed',
-      firstPieGradientRight: '#94e2ed',
+      firstPieGradientLeft: theme.success,
+      firstPieGradientRight: theme.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['65%', '90%'],
 
-      secondPieGradientLeft: '#719efc',
-      secondPieGradientRight: '#719efc',
-      secondPieShadowColor: '#b2cafb',
+      secondPieGradientLeft: theme.warning,
+      secondPieGradientRight: theme.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['63%', '92%'],
       shadowOffsetX: '-4',
       shadowOffsetY: '-4',
     },
 
     visitorsPieLegend: {
-      firstSection: '#719efc',
-      secondSection: '#99e5ee',
+      firstSection: theme.warning,
+      secondSection: theme.success,
     },
 
     earningPie: {
diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts
index 966049d7..7d3609d2 100644
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/src/app/@theme/styles/theme.cosmic.ts
@@ -260,59 +260,59 @@ export const COSMIC_THEME = {
     },
 
     visitors: {
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
+      tooltipBg: theme.bg,
+      tooltipLineColor: 'rgba(0, 0, 0, 0)',
       tooltipLineWidth: '1',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBorderColor: theme.border2,
+      tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
+      tooltipTextColor: theme.fgText,
       tooltipFontWeight: 'normal',
+      tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: theme.border4,
       axisFontSize: '16',
-      axisTextColor: '#a1a1e5',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: theme.fg,
+      yAxisSplitLine: theme.separator,
 
-      itemBorderColor: '#ffffff',
+      itemBorderColor: theme.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
-      lineShadow: 'rgba(14, 16, 48, 0.4)',
+      lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(188, 92, 255, 1)',
-      areaGradTo: 'rgba(188, 92, 255, 0.5)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: theme.primary,
+      areaGradTo: theme.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: 'rgba(59, 165, 243, 1)',
-      innerAreaGradTo: 'rgba(4, 133, 243 , 1)',
+      innerAreaGradFrom: theme.success,
+      innerAreaGradTo: theme.success,
     },
 
     visitorsLegend: {
-      firstIcon: 'linear-gradient(90deg, #0088ff 0%, #3dafff 100%)',
-      secondIcon: 'linear-gradient(90deg, #a454ff 0%, #7659ff 100%)',
+      firstIcon: theme.success,
+      secondIcon: theme.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: '#7bff24',
-      firstPieGradientRight: '#2ec7fe',
-      firstPieShadowColor: '#19977E',
+      firstPieGradientLeft: theme.success,
+      firstPieGradientRight: theme.successLight,
+      firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: '#ff894a',
-      secondPieGradientRight: '#ffcc10',
-      secondPieShadowColor: '#cf7c1c',
+      secondPieGradientLeft: theme.warning,
+      secondPieGradientRight: theme.warningLight,
+      secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '95%'],
       shadowOffsetX: '0',
       shadowOffsetY: '3',
     },
 
     visitorsPieLegend: {
-      firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
-      secondSection: 'linear-gradient(90deg, #00c7c7 0%, #00d977 100%)',
+      firstSection: theme.warning,
+      secondSection: theme.success,
     },
 
     earningPie: {
diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts
index b5dcc50e..5092c0de 100644
--- a/src/app/@theme/styles/theme.default.ts
+++ b/src/app/@theme/styles/theme.default.ts
@@ -260,51 +260,50 @@ export const DEFAULT_THEME = {
     },
 
     visitors: {
-      tooltipBg: '#ffffff',
+      tooltipBg: theme.bg,
       tooltipLineColor: 'rgba(0, 0, 0, 0)',
-      tooltipLineWidth: '0',
-      tooltipBorderColor: '#ebeef2',
+      tooltipLineWidth: '1',
+      tooltipBorderColor: theme.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 8px 24px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: theme.fgText,
+      tooltipFontWeight: 'normal',
       tooltipFontSize: '20',
 
-      axisLineColor: 'rgba(161, 161 ,229, 0.3)',
+      axisLineColor: theme.border4,
       axisFontSize: '16',
-      axisTextColor: '#b2bac2',
-      yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
+      axisTextColor: theme.fg,
+      yAxisSplitLine: theme.separator,
 
-      itemBorderColor: '#42db7d',
+      itemBorderColor: theme.primary,
       lineStyle: 'dotted',
       lineWidth: '6',
       lineGradFrom: '#ffffff',
       lineGradTo: '#ffffff',
-      lineShadow: 'rgba(14, 16, 48, 0)',
+      lineShadow: 'rgba(0, 0, 0, 0)',
 
-      areaGradFrom: 'rgba(188, 92, 255, 1)',
-      areaGradTo: 'rgba(188, 92, 255, 0.5)',
-      shadowLineDarkBg: '#a695ff',
+      areaGradFrom: theme.primary,
+      areaGradTo: theme.primaryLight,
 
       innerLineStyle: 'solid',
       innerLineWidth: '1',
 
-      innerAreaGradFrom: 'rgba(60, 221, 156, 1)',
-      innerAreaGradTo: 'rgba(60, 221, 156, 1)',
+      innerAreaGradFrom: theme.success,
+      innerAreaGradTo: theme.success,
     },
 
     visitorsLegend: {
-      firstIcon: 'linear-gradient(90deg, #3edd81 0%, #3bddad 100%)',
-      secondIcon: 'linear-gradient(90deg, #8d7fff 0%, #b17fff 100%)',
+      firstIcon: theme.success,
+      secondIcon: theme.primary,
     },
 
     visitorsPie: {
-      firstPieGradientLeft: '#8defbb',
-      firstPieGradientRight: '#8defbb',
+      firstPieGradientLeft: theme.success,
+      firstPieGradientRight: theme.success,
       firstPieShadowColor: 'rgba(0, 0, 0, 0)',
       firstPieRadius: ['70%', '90%'],
 
-      secondPieGradientLeft: '#ff894a',
-      secondPieGradientRight: '#ffcc10',
+      secondPieGradientLeft: theme.warning,
+      secondPieGradientRight: theme.warningLight,
       secondPieShadowColor: 'rgba(0, 0, 0, 0)',
       secondPieRadius: ['60%', '97%'],
       shadowOffsetX: '0',
@@ -312,8 +311,8 @@ export const DEFAULT_THEME = {
     },
 
     visitorsPieLegend: {
-      firstSection: 'linear-gradient(90deg, #ffcb17 0%, #ff874c 100%)',
-      secondSection: '#8defbb',
+      firstSection: theme.warning,
+      secondSection: theme.success,
     },
 
     earningPie: {