diff --git a/src/components/WorkoutStat/index.jsx b/src/components/WorkoutStat/index.jsx
index 3ddd5105ed7..207ed4e0169 100644
--- a/src/components/WorkoutStat/index.jsx
+++ b/src/components/WorkoutStat/index.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { intComma } from 'src/utils/utils';
+import { MAIN_COLOR } from 'src/utils/const';
 
 
-const WorkoutStat = ({ value, description, pace, className, distance, onClick }) => (
-  <div className={`${className} pb2 w-100`} onClick={onClick}>
+const WorkoutStat = ({ value, description, pace, className, distance, onClick, color= MAIN_COLOR }) => (
+  <div className={`${className} pb2 w-100`} onClick={onClick} style={{'color': color}}>
     <span className={`f1 fw9 i`}>{intComma(value)}</span>
     <span className="f3 fw6 i">{description}</span>
     { pace && (<span className="f1 fw9 i">{ " " +pace}</span>)}
diff --git a/src/components/YearStat/index.jsx b/src/components/YearStat/index.jsx
index 411dbdb880b..1dc6b3532e1 100644
--- a/src/components/YearStat/index.jsx
+++ b/src/components/YearStat/index.jsx
@@ -3,7 +3,7 @@ import Stat from 'src/components/Stat';
 import WorkoutStat from 'src/components/WorkoutStat';
 import useActivities from 'src/hooks/useActivities';
 import useHover from 'src/hooks/useHover';
-import { formatPace } from 'src/utils/utils';
+import { formatPace, colorFromType } from 'src/utils/utils';
 import styles from './style.module.scss';
 
 const YearStat = ({ year, onClick }) => {
@@ -75,6 +75,7 @@ const YearStat = ({ year, onClick }) => {
             description={` ${type}`+"s"}
             // pace={formatPace(count[2] / count[1])}
             distance={(count[2] / 1000.0).toFixed(0)}
+            // color={colorFromType(type)}
           />
         ))}
         <Stat