diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js
index 429a37d6..eb16904c 100644
--- a/components/metrics/MetricCard.js
+++ b/components/metrics/MetricCard.js
@@ -29,9 +29,9 @@ const MetricCard = ({
                 : !reverseColors
                 ? styles.negative
                 : styles.positive
-            }`}
+            } ${change >= 0 ? styles.plusSign : ''}`}
           >
-            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+            {changeProps.x.interpolate(x => format(x))}
           </animated.span>
         )}
       </div>
diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
index 76a69609..a79385aa 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -37,3 +37,7 @@
 .change.negative {
   color: var(--red500);
 }
+
+.change.plusSign::before {
+  content: '+';
+}