diff --git a/src/components/CommonKit/Tabs/StyledBlueTab.tsx b/src/components/CommonKit/Tabs/StyledBlueTab.tsx
index 99228aee3d2e57890a614b9df5264e6cc01f7998..2cd74cecbe37b17649f9c800ef09c3ebe1c3e58b 100644
--- a/src/components/CommonKit/Tabs/StyledBlueTab.tsx
+++ b/src/components/CommonKit/Tabs/StyledBlueTab.tsx
@@ -8,10 +8,7 @@ const TabBase = withStyles({
     minHeight: '36px',
   },
   selected: {
-    background: 'var(--blueRadialGradient)',
-    backgroundClip: 'text',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    color: 'var(--blue)',
   },
 })(Tab)
 
diff --git a/src/components/CommonKit/Tabs/StyledTab.tsx b/src/components/CommonKit/Tabs/StyledTab.tsx
index 1d2dec1a707ee338fb958fa801f00b7fab655e32..850e305832af1d9b7379e826c55f158c13c059d1 100644
--- a/src/components/CommonKit/Tabs/StyledTab.tsx
+++ b/src/components/CommonKit/Tabs/StyledTab.tsx
@@ -9,37 +9,25 @@ const TabBase = withStyles({
     minHeight: '36px',
   },
   selected: {
-    background: 'var(--multiColorRadialGradient)',
-    backgroundClip: 'text',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    color: 'var(--multiColor)',
   },
 })(Tab)
 
 const TabElec = withStyles({
   selected: {
-    background: 'var(--elecColorRadialGradient)',
-    backgroundClip: 'text',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    color: 'var(--elecColor)',
   },
 })(TabBase)
 
 const TabWater = withStyles({
   selected: {
-    background: 'var(--waterColorRadialGradient)',
-    backgroundClip: 'text',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    color: 'var(--waterColor)',
   },
 })(TabBase)
 
 const TabGas = withStyles({
   selected: {
-    background: 'var(--gasColorRadialGradient)',
-    backgroundClip: 'text',
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
+    color: 'var(--gasColor)',
   },
 })(TabBase)