diff --git a/components/app.js b/components/app.js
index ba58437096a47e00b570711426339362f3cba2f4..7cd7d0565b8f3547e17d5dc33bebb5b84a41a399 100644
--- a/components/app.js
+++ b/components/app.js
@@ -9,9 +9,20 @@ import symptomViews from './cycle-day/symptoms'
 import Chart from './chart/chart'
 import Settings from './settings'
 import Stats from './stats'
-import {headerTitles as titles} from './labels'
+import {headerTitles, menuTitles} from './labels'
 import setupNotifications from '../lib/notifications'
 
+// design wants everyhting lowercased, but we don't
+// have CSS pseudo properties
+const headerTitlesLowerCase = Object.keys(headerTitles).reduce((acc, curr) => {
+  acc[curr] = headerTitles[curr].toLowerCase()
+  return acc
+}, {})
+const menuTitlesLowerCase = Object.keys(menuTitles).reduce((acc, curr) => {
+  acc[curr] = menuTitles[curr].toLowerCase()
+  return acc
+}, {})
+
 const isSymptomView = name => Object.keys(symptomViews).indexOf(name) > -1
 
 export default class App extends Component {
@@ -56,7 +67,8 @@ export default class App extends Component {
     return (
       <View style={{flex: 1}}>
 
-        {this.state.currentPage != 'CycleDay' && <Header title={titles[this.state.currentPage]} />}
+        {this.state.currentPage != 'CycleDay' &&
+          <Header title={headerTitlesLowerCase[this.state.currentPage]}/>}
 
         {React.createElement(page, {
           navigate: this.navigate,
@@ -64,7 +76,10 @@ export default class App extends Component {
         })}
 
         {!isSymptomView(this.state.currentPage) &&
-          <Menu navigate={this.navigate} />
+          <Menu
+            navigate={this.navigate}
+            titles={menuTitlesLowerCase}
+          />
         }
       </View>
     )
diff --git a/components/labels.js b/components/labels.js
index 5a044273b3abc99944aa8d42fc116f8cb5280dab..e728bd52df564ac89b2d338e4d3740bbfe5c049c 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -94,6 +94,14 @@ export const headerTitles = {
   PainEditView: 'Pain'
 }
 
+export const menuTitles = {
+  Home: 'Home',
+  Calendar: 'Calendar',
+  Chart: 'Chart',
+  Stats: 'Stats',
+  Settings: 'Settings',
+}
+
 export const stats = {
   cycleLengthTitle: 'Cycle length',
   cycleLengthExplainer: 'Basic statistics about the length of your cycles.',
diff --git a/components/menu.js b/components/menu.js
index 737203baf8c94e29834457cac0a7489f763408a7..8bdbb43213d5d96098a7b0dcd0a1a17b818df2e8 100644
--- a/components/menu.js
+++ b/components/menu.js
@@ -28,14 +28,15 @@ export default class Menu extends Component {
   }
 
   render() {
+    const t = this.props.titles
     return (
       <View style={styles.menu}>
         {[
-          { title: 'Home', icon: 'home', onPress: () => this.goTo('Home') },
-          { title: 'Calendar', icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
-          { title: 'Chart', icon: 'chart-line', onPress: () => this.goTo('Chart') },
-          { title: 'Stats', icon: 'chart-pie', onPress: () => this.goTo('Stats') },
-          { title: 'Settings', icon: 'settings', onPress: () => this.goTo('Settings') },
+          { title: t.Home, icon: 'home', onPress: () => this.goTo('Home') },
+          { title: t.Calendar, icon: 'calendar-range', onPress: () => this.goTo('Calendar') },
+          { title: t.Chart, icon: 'chart-line', onPress: () => this.goTo('Chart') },
+          { title: t.Stats, icon: 'chart-pie', onPress: () => this.goTo('Stats') },
+          { title: t.Settings, icon: 'settings', onPress: () => this.goTo('Settings') },
         ].map(this.makeMenuItem)}
       </View >
     )