diff --git a/components/chart/chart.js b/components/chart/chart.js
index 3d37139fe70f73563103cd98535cca3ba2b08eda..32983c1c8003de4fc7a11fe234ab29c294d06df8 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -79,6 +79,12 @@ export default class CycleChart extends Component {
               Q13.5 6.8 15 3z" />
           : null}
 
+        {cycleDay && cycleDay.mucus ?
+          <Circle
+            {...styles.mucusIcon}
+            fill={styles.mucusIconShades[cycleDay.mucus.computedNfp]}
+          /> : null}
+
         {y ? this.drawDotAndLines(y, cycleDay.temperature.exclude, index) : null}
       </G>
     )
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 9fa26339aa0df870d6afad558b5539d4ad32c2c6..4e06b73203cb7216cf57d899195b132e4d1ec49c 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -45,9 +45,21 @@ const styles = {
   bleedingIcon: {
     fill: '#fb2e01',
     scale: 0.6,
-    x: 7,
+    x: 6,
     y: 3
   },
+  mucusIcon: {
+    cx: config.columnWidth / 2,
+    cy: 50,
+    r: 10
+  },
+  mucusIconShades: [
+    '#cc99cc',
+    '#bf7fbf',
+    '#b266b2',
+    '#a64ca6',
+    '#993299'
+  ],
   yAxis: {
     height: config.chartHeight,
     width: config.columnWidth,