diff --git a/components/cycle-day/symptoms/action-button-footer.js b/components/cycle-day/symptoms/action-button-footer.js
index be0cd6ae40b3fa2c12dbc5754ca3506dcc3ce93c..a1534964ea7cfeb0b7e651bdf5c590463b098acf 100644
--- a/components/cycle-day/symptoms/action-button-footer.js
+++ b/components/cycle-day/symptoms/action-button-footer.js
@@ -38,6 +38,11 @@ export default class ActionButtonFooter extends Component {
     return (
       <View style={styles.menu}>
         {buttons.map(({ title, action, disabledCondition, icon }, i) => {
+          const textStyle = disabledCondition ? styles.menuTextInActive : styles.menuText
+          const iconStyle = disabledCondition ?
+            Object.assign({}, iconStyles.menuIcon, iconStyles.menuIconInactive) :
+            iconStyles.menuIcon
+
           return (
             <TouchableOpacity
               onPress={action}
@@ -45,8 +50,8 @@ export default class ActionButtonFooter extends Component {
               disabled={disabledCondition}
               key={i.toString()}
             >
-              <Icon name={icon} {...iconStyles.menuIcon} />
-              <Text style={styles.menuText}>
+              <Icon name={icon} {...iconStyle} />
+              <Text style={textStyle}>
                 {title}
               </Text>
             </TouchableOpacity>
diff --git a/styles/index.js b/styles/index.js
index b1476b0931be3dcfedcbd84392d9cd52276217ca..c5605a1eb19a60f4654dda43f3c87ff365ba68e9 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -119,6 +119,9 @@ export default StyleSheet.create({
   menuText: {
     color: fontOnPrimaryColor
   },
+  menuTextInActive: {
+    color: 'lightgrey'
+  },
   headerCycleDay: {
     flexDirection: 'row',
     justifyContent: 'space-between'
@@ -177,5 +180,8 @@ export const iconStyles = {
   menuIcon: {
     size: 20,
     color: fontOnPrimaryColor
+  },
+  menuIconInactive: {
+    color: 'lightgrey'
   }
 }
\ No newline at end of file