diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 30f8cdc..a5fe820 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -3,6 +3,8 @@ import {
   Text, View, TouchableOpacity
 } from 'react-native'
 import Svg,{ G, Rect, Line } from 'react-native-svg'
+import { LocalDate } from 'js-joda'
+import moment from 'moment'
 import styles from './styles'
 import config from '../../config'
 import { getOrCreateCycleDay } from '../../db'
@@ -87,13 +89,18 @@ export default class DayColumn extends Component {
     }
 
     const cycleDayNumber = this.getCycleDayNumber(dateString)
-    const shortDate = dateString.split('-').slice(1).join('-')
+    const dayDate = LocalDate.parse(dateString)
+    const shortDate = dayDate.dayOfMonth() === 1 ?
+      moment(dateString, "YYYY-MM-DD").format('MMM')
+      :
+      moment(dateString, "YYYY-MM-DD").format('Do')
+    const boldDateLabel = dayDate.dayOfMonth() === 1 ? {fontWeight: 'bold'} : {}
     const cycleDayLabel = (
       <Text style = {label.number}>
         {cycleDayNumber ? cycleDayNumber : ' '}
       </Text>)
     const dateLabel = (
-      <Text style = {label.date}>
+      <Text style = {[label.date, boldDateLabel]}>
         {shortDate}
       </Text>
     )
diff --git a/components/chart/styles.js b/components/chart/styles.js
index bdf0211..ef8d0ac 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -32,6 +32,7 @@ const styles = {
         color: 'grey',
         fontSize: 9,
         fontWeight: '100',
+        textAlign: 'center',
       },
       number: {
         color: primaryColor,