diff --git a/components/home.js b/components/home.js
index f6d9362a378babd7706cb601dfb39ac6cf764890..ad4edb5bfa9bb07c689156d8308490f5dcb37b1f 100644
--- a/components/home.js
+++ b/components/home.js
@@ -32,8 +32,10 @@ const HomeElement = ({ children, onPress, buttonColor, buttonLabel  }) => {
       onPress={ onPress }
       style={ styles.homeElement }
     >
-      {children[0]}
-      {children[1]}
+      <View style={styles.homeIconAndText}>
+        {children[0]}
+        {children[1]}
+      </View>
 
       <View style={{paddingLeft: 15}}>
         {children[2]}
@@ -108,11 +110,9 @@ export default class Home extends Component {
               buttonColor={ periodColor }
               buttonLabel={ labels.trackPeriod }
             >
-              <View>
-                <DripHomeIcon name="drop" size={100} color={periodColor} />
-              </View>
+              <DripHomeIcon name="drop" size={100} color={periodColor} />
 
-              <IconText wrapperStyles={{top: 45, ...styles.wrapperIcon}}>
+              <IconText wrapperStyles={{top: '50%', ...styles.wrapperIcon}}>
                 {this.state.bleedingPredictionRange}
               </IconText>
 
diff --git a/styles/index.js b/styles/index.js
index 130de97eaa46286a515309c566f38abe5b593769..5fba45aa890acb1863facff6748bac6d50a9ebad 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -125,7 +125,6 @@ export default StyleSheet.create({
     marginBottom: defaultBottomMargin,
   },
   homeElement: {
-    alignItems: 'center',
     marginBottom: 40,
     flexDirection: 'row',
   },
@@ -133,6 +132,9 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  homeIconAndText: {
+    justifyContent: 'center'
+  },
   wrapperIcon: {
     width: 80,
     position: 'absolute'