diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index eb900a5fe7d363a888afa9bd96e9457bce2ecdc1..845934e866f31189f663ba6bbdfe080c7654bff4 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -18,19 +18,19 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 
diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx
index acd82276b717ef77237fae00250e906da40b2152..db62f1cf289b8dd44496ef9225d6952b432edc40 100644
--- a/src/components/CommonKit/Card/StyledIconCard.tsx
+++ b/src/components/CommonKit/Card/StyledIconCard.tsx
@@ -23,19 +23,19 @@ const CardBase = withStyles({
 
 const CardElec = withStyles({
   root: {
-    border: '1px solid var(--elecColor)',
+    border: '1px solid var(--elecColor40)',
   },
 })(CardBase)
 
 const CardWater = withStyles({
   root: {
-    border: '1px solid var(--waterColor)',
+    border: '1px solid var(--waterColor40)',
   },
 })(CardBase)
 
 const CardGas = withStyles({
   root: {
-    border: '1px solid var(--gasColor)',
+    border: '1px solid var(--gasColor40)',
   },
 })(CardBase)
 
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index 3fd5c7ad2066febce2af07814c9633e94a268fc9..fc0a0c3ebe9edad67afe2a272ff2b174276c1937 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -71,16 +71,19 @@ $accordion-active-background: #34353a;
 $text-color: white;
 
 $elec-color: #d87b39;
+$elec-color-40: rgba(216, 123, 57, 0.4);
 $elec-off-color: #5d3d2a;
 $elec-compare-color: #e2bca1;
 $elec-compare-off-color: #795c47;
 
 $gas-color: #45d1b8;
+$gas-color-40: rgba(69, 209, 184, 0.4);
 $gas-off-color: #184940;
 $gas-compare-color: #a8f7e9;
 $gas-compare-off-color: #597773;
 
 $water-color: #3a98ec;
+$water-color-40: rgba(58, 152, 236, 0.4);
 $water-off-color: #20415e;
 $water-compare-color: #abd4fa;
 $water-compare-off-color: #4d5c6e;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 82021a3cd090809385ee1496276f845b01b5ad17..de482173597c003adbeffa5ee9a58d2858891970 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -34,10 +34,13 @@
   --blueRadialGradient: #{$blue-radial-gradient};
   --blueRadialGradientTrans: #{$blue-radial-gradient-transparent};
   --elecColor: #{$elec-color};
+  --elecColor40: #{$elec-color-40};
   --elecCompareColor: #{$elec-compare-color};
   --gasColor: #{$gas-color};
+  --gasColor40: #{$gas-color-40};
   --gasCompareColor: #{$gas-compare-color};
   --waterColor: #{$water-color};
+  --waterColor40: #{$water-color-40};
   --waterCompareColor: #{$water-compare-color};
   --multiColor: #{$multi-color};
   --multiCompareColor: #{$multi-compare-color};