diff --git a/components/chart/chart.js b/components/chart/chart.js
index 201f0f8..cc03963 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -137,6 +137,7 @@ export default class CycleChart extends Component {
   }
 
   render() {
+    console.log(this.symptomRowSymptoms)
     return (
       <View
         onLayout={this.onLayout}
@@ -149,15 +150,54 @@ export default class CycleChart extends Component {
         }
 
         {this.state.chartHeight && this.state.chartLoaded &&
-          <View
-            style={[styles.yAxis, {
-              height: this.columnHeight,
-              marginTop: this.symptomRowHeight
-            }]}
-          >
-            {makeYAxisLabels(this.columnHeight)}
+          <View>
+            <View
+              style={[
+                styles.yAxis,
+                {
+                  height: this.symptomRowHeight,
+                }
+              ]}
+            >
+              {this.symptomRowSymptoms.map(symptomName => {
+                return <View key={symptomName} style={{flex: 1}}>
+                  <AppText>{symptomName[0]}</AppText>
+                </View>
+              })
+              }
+            </View>
+            <View
+              style={[styles.yAxis, {
+                height: this.columnHeight,
+              }]}
+            >
+              {makeYAxisLabels(this.columnHeight)}
+            </View>
+            <View style={[
+              styles.yAxis,
+              {
+                height: this.xAxisHeight
+              }
+            ]}>
+              <AppText style = {[
+                styles.column.label.number,
+                {
+                  textAlign: 'center',
+                  justifyContent: 'center',
+                  fontSize: Math.ceil(styles.column.label.number.fontSize / 2)
+                }
+              ]}>{'Cycle\nday'}</AppText>
+              <AppText style={[
+                styles.column.label.date,
+                {
+                  textAlign: 'center',
+                  justifyContent: 'center'
+                }
+              ]}>{'Date'}</AppText>
+            </View>
           </View>}
 
+
         {this.state.chartHeight && this.state.chartLoaded &&
           makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
         }
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 8441f9b..9d5901a 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -69,15 +69,15 @@ const styles = {
   ],
   yAxis: {
     width: 27,
-    borderRightWidth: 0.5,
+    borderRightWidth: 1,
     borderColor: 'lightgrey',
     borderStyle: 'solid'
   },
   yAxisLabel: {
     position: 'absolute',
-    left: 3,
+    right: 2,
     color: 'grey',
-    fontSize: 11,
+    fontSize: 9,
     textAlign: 'left'
   },
   horizontalGrid: {
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 12fa08c..3ede6c6 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -17,10 +17,10 @@ export function makeYAxisLabels(columnHeight) {
     let tickBold
     if (units === 0.1) {
       showTick =  (tick * 10 % 2) ? false : true
-      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold'}
+      tickBold = tick * 10 % 5 ? {} : {fontWeight: 'bold', fontSize: 11}
     } else {
       showTick =  (tick * 10 % 5) ? false : true
-      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold'}
+      tickBold = tick * 10 % 10 ? {} : {fontWeight: 'bold', fontSize: 11}
     }
     // this eyeballing is sadly necessary because RN does not
     // support percentage values for transforms, which we'd need