diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
new file mode 100644
index 0000000..2f5e5f8
--- /dev/null
+++ b/android/app/src/main/res/values/colors.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!--   color for the app bar and other primary UI elements -->
+    <color name="colorPrimary">#ff7e5f</color>
+
+    <!--   a darker variant of the primary color, used for
+           the status bar (on Android 5.0+) and contextual app bars -->
+    <color name="colorPrimaryDark">#c74e34</color>
+
+    <!--   a secondary color for controls like checkboxes and text fields -->
+    <color name="colorAccent">#351c4d</color>
+</resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 319eb0c..5536275 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="colorAccent">@color/colorAccent</item>
     </style>
 
 </resources>
diff --git a/components/cycle-day/cycle-day-overview.js b/components/cycle-day/cycle-day-overview.js
index c85a7e7..0c9b9d7 100644
--- a/components/cycle-day/cycle-day-overview.js
+++ b/components/cycle-day/cycle-day-overview.js
@@ -51,6 +51,7 @@ export default class CycleDayOverView extends Component {
     const cycleDay = this.state.cycleDay
     const getCycleDayNumber = cycleModule().getCycleDayNumber
     const cycleDayNumber = getCycleDayNumber(cycleDay.date)
+    const dateInFuture = LocalDate.now().isBefore(LocalDate.parse(this.state.cycleDay.date))
     return (
       <View style={{ flex: 1 }}>
         <Header
@@ -65,36 +66,42 @@ export default class CycleDayOverView extends Component {
               title='Bleeding'
               onPress={() => this.navigate('BleedingEditView')}
               data={getLabel('bleeding', cycleDay.bleeding)}
+              disabled={dateInFuture}
             />
             <SymptomBox
               title='Temperature'
               onPress={() => this.navigate('TemperatureEditView')}
               data={getLabel('temperature', cycleDay.temperature)}
+              disabled={dateInFuture}
             />
             <SymptomBox
               title='Mucus'
               onPress={() => this.navigate('MucusEditView')}
               data={getLabel('mucus', cycleDay.mucus)}
+              disabled={dateInFuture}
             />
             <SymptomBox
               title='Cervix'
               onPress={() => this.navigate('CervixEditView')}
               data={getLabel('cervix', cycleDay.cervix)}
-            />
-            <SymptomBox
-              title='Note'
-              onPress={() => this.navigate('NoteEditView')}
-              data={getLabel('note', cycleDay.note)}
+              disabled={dateInFuture}
             />
             <SymptomBox
               title='Desire'
               onPress={() => this.navigate('DesireEditView')}
               data={getLabel('desire', cycleDay.desire)}
+              disabled={dateInFuture}
             />
             <SymptomBox
               title='Sex'
               onPress={() => this.navigate('SexEditView')}
               data={getLabel('sex', cycleDay.sex)}
+              disabled={dateInFuture}
+            />
+            <SymptomBox
+              title='Note'
+              onPress={() => this.navigate('NoteEditView')}
+              data={getLabel('note', cycleDay.note)}
             />
             <SymptomBox
               title='Pain'
@@ -208,26 +215,26 @@ function getLabel(symptomName, symptom) {
   return label.slice(0, 42) + '...'
 }
 
+
 class SymptomBox extends Component {
   render() {
     const d = this.props.data
     const boxActive = d ? styles.symptomBoxActive : {}
     const iconActive = d ? iconStyles.symptomBoxActive : {}
-    const textStyle = d ? styles.symptomTextActive : {}
-
-    const symptomBoxStyle = Object.assign({}, styles.symptomBox, boxActive)
-    const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive)
+    const iconStyle = Object.assign({}, iconStyles.symptomBox, iconActive, disabledStyle)
+    const textActive = d ? styles.symptomTextActive : {}
+    const disabledStyle = this.props.disabled ? styles.symptomInFuture : {}
 
     return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <View style={symptomBoxStyle}>
+      <TouchableOpacity onPress={this.props.onPress} disabled={this.props.disabled}>
+        <View style={[styles.symptomBox, boxActive, disabledStyle]}>
           <Icon
             name='thermometer'
             {...iconStyle}
           />
-          <Text style={textStyle}>{this.props.title}</Text>
+          <Text style={[textActive, disabledStyle]}>{this.props.title}</Text>
         </View>
-        <View style={styles.symptomDataBox}>
+        <View style={[styles.symptomDataBox, disabledStyle]}>
           <Text style={styles.symptomDataText}>{this.props.data}</Text>
         </View>
       </TouchableOpacity>
diff --git a/components/cycle-day/symptoms/temperature.js b/components/cycle-day/symptoms/temperature.js
index 11ee7da..ae7d74e 100644
--- a/components/cycle-day/symptoms/temperature.js
+++ b/components/cycle-day/symptoms/temperature.js
@@ -33,7 +33,8 @@ export default class Temp extends Component {
       exclude: temp ? temp.exclude : false,
       time: temp ? temp.time : LocalTime.now().truncatedTo(minutes).toString(),
       isTimePickerVisible: false,
-      outOfRange: null
+      outOfRange: null,
+      note: temp ? temp.note : null
     }
 
     if (temp) {
@@ -54,7 +55,8 @@ export default class Temp extends Component {
     const dataToSave = {
       value: Number(this.state.temperature),
       exclude: this.state.exclude,
-      time: this.state.time
+      time: this.state.time,
+      note: this.state.note
     }
     saveSymptom('temperature', this.cycleDay, dataToSave)
     this.props.navigate('CycleDay', {cycleDay: this.cycleDay})
@@ -126,6 +128,21 @@ export default class Temp extends Component {
               }}
               onCancel={() => this.setState({ isTimePickerVisible: false })}
             />
+            <View style={styles.symptomViewRowInline}>
+              <Text style={styles.symptomDayView}>Note</Text>
+            </View>
+            <View>
+              <TextInput
+                style={styles.temperatureTextInput}
+                multiline={true}
+                autoFocus={this.state.focusTextArea}
+                placeholder="enter"
+                value={this.state.note}
+                onChangeText={(val) => {
+                  this.setState({ note: val })
+                }}
+              />
+            </View>
             <View style={styles.symptomViewRowInline}>
               <Text style={styles.symptomDayView}>Exclude</Text>
               <Switch
diff --git a/db/index.js b/db/index.js
index 5b9580d..1845674 100644
--- a/db/index.js
+++ b/db/index.js
@@ -15,6 +15,10 @@ const TemperatureSchema = {
       type: 'string',
       optional: true
     },
+    note: {
+      type: 'string',
+      optional: true
+    }
   }
 }
 
diff --git a/styles/index.js b/styles/index.js
index 406de7a..70d0293 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -61,6 +61,10 @@ export default StyleSheet.create({
   symptomTextActive: {
     color: fontOnPrimaryColor
   },
+  symptomInFuture: {
+    borderColor: 'lightgrey',
+    color: 'lightgrey'
+  },
   symptomDataBox: {
     borderColor: secondaryColor,
     borderStyle: 'solid',
@@ -132,7 +136,8 @@ export default StyleSheet.create({
   },
   temperatureTextInput: {
     fontSize: 20,
-    color: 'black'
+    color: 'black',
+    textAlign: 'center'
   },
   temperatureTextInputSuggestion: {
     color: '#939393'