diff --git a/packages/apollos-ui-connected/src/FeaturesFeedConnected/FeaturesFeedConnected.js b/packages/apollos-ui-connected/src/FeaturesFeedConnected/FeaturesFeedConnected.js
index 8b8d32aa7..09e47753f 100644
--- a/packages/apollos-ui-connected/src/FeaturesFeedConnected/FeaturesFeedConnected.js
+++ b/packages/apollos-ui-connected/src/FeaturesFeedConnected/FeaturesFeedConnected.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { Query } from '@apollo/client/react/components';
 import { get } from 'lodash';
 
-import { FeedView, named } from '@apollosproject/ui-kit';
+import { BackgroundView, FeedView, named } from '@apollosproject/ui-kit';
 
 import featuresFeedComponentMapper from './featuresFeedComponentMapper';
 import GET_FEATURE_FEED from './getFeatureFeed';
@@ -117,27 +117,29 @@ class FeaturesFeedConnected extends PureComponent {
     const featureFeedId =
       this.props.route?.params.id || this.props.featureFeedId;
     return (
-      <Query
-        query={GET_FEATURE_FEED}
-        variables={{ featureFeedId }}
-        fetchPolicy="cache-and-network"
-      >
-        {({ error, data, loading, refetch }) => {
-          const features = get(data, 'node.features', []);
-          this.refetchRef({ refetch, id: 'feed' });
-          return (
-            <FeedView
-              error={error}
-              content={features}
-              loadingStateData={this.loadingStateData}
-              renderItem={this.renderFeatures}
-              loading={loading}
-              refetch={this.refetch}
-              {...this.props.feedViewProps}
-            />
-          );
-        }}
-      </Query>
+      <BackgroundView avoidHeader>
+        <Query
+          query={GET_FEATURE_FEED}
+          variables={{ featureFeedId }}
+          fetchPolicy="cache-and-network"
+        >
+          {({ error, data, loading, refetch }) => {
+            const features = get(data, 'node.features', []);
+            this.refetchRef({ refetch, id: 'feed' });
+            return (
+              <FeedView
+                error={error}
+                content={features}
+                loadingStateData={this.loadingStateData}
+                renderItem={this.renderFeatures}
+                loading={loading}
+                refetch={this.refetch}
+                {...this.props.feedViewProps}
+              />
+            );
+          }}
+        </Query>
+      </BackgroundView>
     );
   }
 }
diff --git a/packages/apollos-ui-connected/src/FeaturesFeedConnected/__snapshots__/FeaturesFeedConnected.tests.js.snap b/packages/apollos-ui-connected/src/FeaturesFeedConnected/__snapshots__/FeaturesFeedConnected.tests.js.snap
index 629d4f3aa..e6e7d187a 100644
--- a/packages/apollos-ui-connected/src/FeaturesFeedConnected/__snapshots__/FeaturesFeedConnected.tests.js.snap
+++ b/packages/apollos-ui-connected/src/FeaturesFeedConnected/__snapshots__/FeaturesFeedConnected.tests.js.snap
@@ -8,41 +8,52 @@ exports[`FeaturesFeedConnected should render 1`] = `
     }
   }
 >
-  <RCTScrollView
-    data={Array []}
-    disableVirtualization={false}
-    getItem={[Function]}
-    getItemCount={[Function]}
-    horizontal={false}
-    initialNumToRender={10}
-    keyExtractor={[Function]}
-    loading={false}
-    maxToRenderPerBatch={10}
-    onContentSizeChange={[Function]}
-    onEndReachedThreshold={0.7}
-    onLayout={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onRefresh={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    refreshControl={
-      <RefreshControlMock
-        onRefresh={[Function]}
-        refreshing={false}
-      />
+  <View
+    avoidHeader={true}
+    style={
+      Object {
+        "backgroundColor": "rgb(249, 249, 251)",
+        "flex": 1,
+        "height": "100%",
+      }
     }
-    refreshing={false}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={50}
-    stickyHeaderIndices={Array []}
-    updateCellsBatchingPeriod={50}
-    viewabilityConfigCallbackPairs={Array []}
-    windowSize={21}
   >
-    <RCTRefreshControl />
-    <View />
-  </RCTScrollView>
+    <RCTScrollView
+      data={Array []}
+      disableVirtualization={false}
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={false}
+      initialNumToRender={10}
+      keyExtractor={[Function]}
+      loading={false}
+      maxToRenderPerBatch={10}
+      onContentSizeChange={[Function]}
+      onEndReachedThreshold={0.7}
+      onLayout={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onRefresh={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      refreshControl={
+        <RefreshControlMock
+          onRefresh={[Function]}
+          refreshing={false}
+        />
+      }
+      refreshing={false}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      updateCellsBatchingPeriod={50}
+      viewabilityConfigCallbackPairs={Array []}
+      windowSize={21}
+    >
+      <RCTRefreshControl />
+      <View />
+    </RCTScrollView>
+  </View>
 </View>
 `;
diff --git a/packages/apollos-ui-connected/src/LikedContentFeedConnected/LikedContentFeedConnected.js b/packages/apollos-ui-connected/src/LikedContentFeedConnected/LikedContentFeedConnected.js
index 9631a4b48..6d5f8d09c 100644
--- a/packages/apollos-ui-connected/src/LikedContentFeedConnected/LikedContentFeedConnected.js
+++ b/packages/apollos-ui-connected/src/LikedContentFeedConnected/LikedContentFeedConnected.js
@@ -60,7 +60,7 @@ class LikedContentFeedConnected extends PureComponent {
     const { Component, ContentCardComponent } = this.props;
 
     return (
-      <BackgroundView>
+      <BackgroundView avoidHeader>
         <Query
           query={GET_LIKED_CONTENT}
           fetchPolicy="cache-and-network"
diff --git a/packages/apollos-ui-connected/src/LikedContentFeedConnected/__snapshots__/LikedContentList.tests.js.snap b/packages/apollos-ui-connected/src/LikedContentFeedConnected/__snapshots__/LikedContentList.tests.js.snap
index 50f62b591..930385181 100644
--- a/packages/apollos-ui-connected/src/LikedContentFeedConnected/__snapshots__/LikedContentList.tests.js.snap
+++ b/packages/apollos-ui-connected/src/LikedContentFeedConnected/__snapshots__/LikedContentList.tests.js.snap
@@ -9,6 +9,7 @@ exports[`LikedContentFeedConnected component renders LikedContentFeedConnected 1
   }
 >
   <View
+    avoidHeader={true}
     style={
       Object {
         "backgroundColor": "rgb(249, 249, 251)",
diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/ChangePassword.js b/packages/apollos-ui-connected/src/UserSettingsConnected/ChangePassword.js
index 2bfd0b1e3..8b67d46f2 100644
--- a/packages/apollos-ui-connected/src/UserSettingsConnected/ChangePassword.js
+++ b/packages/apollos-ui-connected/src/UserSettingsConnected/ChangePassword.js
@@ -6,7 +6,13 @@ import { gql } from '@apollo/client';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 
-import { Button, TextInput, PaddedView, styled } from '@apollosproject/ui-kit';
+import {
+  BackgroundView,
+  Button,
+  TextInput,
+  PaddedView,
+  styled,
+} from '@apollosproject/ui-kit';
 
 import { SafeAreaView } from 'react-native-safe-area-context';
 import CHANGE_PASSWORD from './passwordChange';
@@ -30,34 +36,40 @@ class ChangePassword extends PureComponent {
   };
 
   renderForm = (props) => (
-    <FlexedKeyboardAvoidingView behavior="padding">
-      <PaddedView>
-        <TextInput
-          label="New Password"
-          type="password"
-          value={props.values?.password}
-          error={props.touched.password && props.errors.password}
-          onChangeText={(text) => props.setFieldValue('password', text)}
-        />
-        <TextInput
-          label="Confirm Password"
-          type="password"
-          value={props.values?.confirmPassword}
-          error={props.touched.confirmPassword && props.errors.confirmPassword}
-          onChangeText={(text) => props.setFieldValue('confirmPassword', text)}
-        />
-      </PaddedView>
-      <Footer>
+    <BackgroundView avoidHeader>
+      <FlexedKeyboardAvoidingView behavior="padding">
         <PaddedView>
-          <Button
-            disabled={props.isSubmitting}
-            onPress={props.handleSubmit}
-            title="Save"
-            loading={props.isSubmitting}
+          <TextInput
+            label="New Password"
+            type="password"
+            value={props.values?.password}
+            error={props.touched.password && props.errors.password}
+            onChangeText={(text) => props.setFieldValue('password', text)}
+          />
+          <TextInput
+            label="Confirm Password"
+            type="password"
+            value={props.values?.confirmPassword}
+            error={
+              props.touched.confirmPassword && props.errors.confirmPassword
+            }
+            onChangeText={(text) =>
+              props.setFieldValue('confirmPassword', text)
+            }
           />
         </PaddedView>
-      </Footer>
-    </FlexedKeyboardAvoidingView>
+        <Footer>
+          <PaddedView>
+            <Button
+              disabled={props.isSubmitting}
+              onPress={props.handleSubmit}
+              title="Save"
+              loading={props.isSubmitting}
+            />
+          </PaddedView>
+        </Footer>
+      </FlexedKeyboardAvoidingView>
+    </BackgroundView>
   );
 
   render() {
diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/PersonalDetails.js b/packages/apollos-ui-connected/src/UserSettingsConnected/PersonalDetails.js
index a8a69f694..3ac4afd9c 100644
--- a/packages/apollos-ui-connected/src/UserSettingsConnected/PersonalDetails.js
+++ b/packages/apollos-ui-connected/src/UserSettingsConnected/PersonalDetails.js
@@ -6,7 +6,13 @@ import { Query, Mutation } from '@apollo/client/react/components';
 import { Formik } from 'formik';
 import * as Yup from 'yup';
 
-import { TextInput, PaddedView, Button, styled } from '@apollosproject/ui-kit';
+import {
+  BackgroundView,
+  TextInput,
+  PaddedView,
+  Button,
+  styled,
+} from '@apollosproject/ui-kit';
 
 import { GET_USER_PROFILE } from '../UserAvatarHeaderConnected';
 import UPDATE_CURRENT_USER from './updateCurrentUser';
@@ -31,41 +37,43 @@ class PersonalDetails extends PureComponent {
 
   renderForm = (props) => (
     // have to add the offset to account for @react-navigation/native header
-    <FlexedKeyboardAvoidingView behavior="padding">
-      <PaddedView>
-        <TextInput
-          label="First Name"
-          type="text"
-          value={props.values.firstName}
-          error={props.touched.firstName && props.errors.firstName}
-          onChangeText={(text) => props.setFieldValue('firstName', text)}
-        />
-        <TextInput
-          label="Last Name"
-          type="text"
-          value={props.values.lastName}
-          error={props.touched.lastName && props.errors.lastName}
-          onChangeText={(text) => props.setFieldValue('lastName', text)}
-        />
-        <TextInput
-          label="Email"
-          type="email"
-          value={props.values.email}
-          error={props.touched.email && props.errors.email}
-          onChangeText={(text) => props.setFieldValue('email', text)}
-        />
-      </PaddedView>
-      <Footer>
+    <BackgroundView avoidHeader>
+      <FlexedKeyboardAvoidingView behavior="padding">
         <PaddedView>
-          <Button
-            disabled={props.isSubmitting}
-            onPress={props.handleSubmit}
-            title="Save"
-            loading={props.isSubmitting}
+          <TextInput
+            label="First Name"
+            type="text"
+            value={props.values.firstName}
+            error={props.touched.firstName && props.errors.firstName}
+            onChangeText={(text) => props.setFieldValue('firstName', text)}
+          />
+          <TextInput
+            label="Last Name"
+            type="text"
+            value={props.values.lastName}
+            error={props.touched.lastName && props.errors.lastName}
+            onChangeText={(text) => props.setFieldValue('lastName', text)}
+          />
+          <TextInput
+            label="Email"
+            type="email"
+            value={props.values.email}
+            error={props.touched.email && props.errors.email}
+            onChangeText={(text) => props.setFieldValue('email', text)}
           />
         </PaddedView>
-      </Footer>
-    </FlexedKeyboardAvoidingView>
+        <Footer>
+          <PaddedView>
+            <Button
+              disabled={props.isSubmitting}
+              onPress={props.handleSubmit}
+              title="Save"
+              loading={props.isSubmitting}
+            />
+          </PaddedView>
+        </Footer>
+      </FlexedKeyboardAvoidingView>
+    </BackgroundView>
   );
 
   render() {
diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/UserSettings.js b/packages/apollos-ui-connected/src/UserSettingsConnected/UserSettings.js
index 45cf7ecc0..70c847ea9 100644
--- a/packages/apollos-ui-connected/src/UserSettingsConnected/UserSettings.js
+++ b/packages/apollos-ui-connected/src/UserSettingsConnected/UserSettings.js
@@ -71,7 +71,7 @@ const UserSettings = () => {
     return null;
   }
   return (
-    <BackgroundView>
+    <BackgroundView avoidHeader>
       <ScrollView>
         <Container>
           <UserAvatarUpdate />
diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/ChangePassword.tests.js.snap b/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/ChangePassword.tests.js.snap
index b7cc6ab00..ba7347091 100644
--- a/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/ChangePassword.tests.js.snap
+++ b/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/ChangePassword.tests.js.snap
@@ -282,427 +282,438 @@ exports[`Change Password component renders a change password form 1`] = `
                     }
                   >
                     <View
-                      onLayout={[Function]}
+                      avoidHeader={true}
                       style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          Object {
-                            "paddingBottom": 0,
-                          },
-                        ]
+                        Object {
+                          "backgroundColor": "rgb(249, 249, 251)",
+                          "flex": 1,
+                          "height": "100%",
+                        }
                       }
                     >
                       <View
+                        onLayout={[Function]}
                         style={
-                          Object {
-                            "paddingHorizontal": 16,
-                            "paddingVertical": 16,
-                          }
+                          Array [
+                            Object {
+                              "flex": 1,
+                            },
+                            Object {
+                              "paddingBottom": 0,
+                            },
+                          ]
                         }
                       >
                         <View
-                          disabled={false}
                           style={
                             Object {
-                              "marginVertical": 16,
+                              "paddingHorizontal": 16,
+                              "paddingVertical": 16,
                             }
                           }
                         >
-                          <View>
-                            <View
-                              style={
-                                Object {
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                }
+                          <View
+                            disabled={false}
+                            style={
+                              Object {
+                                "marginVertical": 16,
                               }
-                            >
+                            }
+                          >
+                            <View>
                               <View
                                 style={
                                   Object {
-                                    "alignItems": "center",
+                                    "flexDirection": "row",
                                     "justifyContent": "center",
                                   }
                                 }
-                              />
-                              <View
-                                style={
-                                  Object {
-                                    "alignSelf": "flex-end",
-                                    "flex": 1,
-                                  }
-                                }
                               >
                                 <View
                                   style={
                                     Object {
-                                      "opacity": 0,
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
                                     }
                                   }
-                                >
-                                  <TextInput
-                                    allowFontScaling={true}
-                                    autoCapitalize="none"
-                                    autoCorrect={false}
-                                    editable={true}
-                                    onBlur={[Function]}
-                                    onChangeText={[Function]}
-                                    onFocus={[Function]}
-                                    placeholderTextColor="rgba(39, 39, 46, 0.6)"
-                                    rejectResponderTermination={true}
-                                    returnKeyType="done"
-                                    secureTextEntry={true}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "color": "#27272E",
-                                          "fontFamily": "InterUI-Bold",
-                                          "fontSize": 14,
-                                          "height": 38,
-                                          "paddingVertical": 0,
-                                        },
-                                        undefined,
-                                      ]
-                                    }
-                                    type="password"
-                                    underlineColorAndroid="transparent"
-                                    value=""
-                                  />
-                                </View>
+                                />
                                 <View
-                                  onLayout={[Function]}
-                                  pointerEvents="none"
                                   style={
                                     Object {
-                                      "justifyContent": "center",
-                                      "opacity": 1,
-                                      "position": "absolute",
-                                      "top": 0,
-                                      "transform": Array [
-                                        Object {
-                                          "scale": 1,
-                                        },
-                                        Object {
-                                          "translateX": 0,
-                                        },
-                                        Object {
-                                          "translateY": 0,
-                                        },
-                                      ],
+                                      "alignSelf": "flex-end",
+                                      "flex": 1,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={0}
+                                  <View
                                     style={
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "rgba(39, 39, 46, 0.6)",
-                                        "fontFamily": "InterUI-Medium",
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                        "paddingVertical": 4,
+                                        "opacity": 0,
                                       }
                                     }
                                   >
-                                    New Password
-                                  </Text>
+                                    <TextInput
+                                      allowFontScaling={true}
+                                      autoCapitalize="none"
+                                      autoCorrect={false}
+                                      editable={true}
+                                      onBlur={[Function]}
+                                      onChangeText={[Function]}
+                                      onFocus={[Function]}
+                                      placeholderTextColor="rgba(39, 39, 46, 0.6)"
+                                      rejectResponderTermination={true}
+                                      returnKeyType="done"
+                                      secureTextEntry={true}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "color": "#27272E",
+                                            "fontFamily": "InterUI-Bold",
+                                            "fontSize": 14,
+                                            "height": 38,
+                                            "paddingVertical": 0,
+                                          },
+                                          undefined,
+                                        ]
+                                      }
+                                      type="password"
+                                      underlineColorAndroid="transparent"
+                                      value=""
+                                    />
+                                  </View>
+                                  <View
+                                    onLayout={[Function]}
+                                    pointerEvents="none"
+                                    style={
+                                      Object {
+                                        "justifyContent": "center",
+                                        "opacity": 1,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": 1,
+                                          },
+                                          Object {
+                                            "translateX": 0,
+                                          },
+                                          Object {
+                                            "translateY": 0,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={0}
+                                      style={
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "rgba(39, 39, 46, 0.6)",
+                                          "fontFamily": "InterUI-Medium",
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                          "paddingVertical": 4,
+                                        }
+                                      }
+                                    >
+                                      New Password
+                                    </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                  }
-                                }
-                              />
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "bottom": 0,
-                                  "left": 0,
-                                  "right": 0,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "backgroundColor": "#A5A5A5",
-                                    "bottom": -0.5,
-                                    "height": 0.5,
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                               <View
                                 style={
                                   Object {
                                     "bottom": 0,
                                     "left": 0,
                                     "right": 0,
-                                    "transform": Array [
-                                      Object {
-                                        "scaleX": 0.0001,
-                                      },
-                                    ],
                                   }
                                 }
                               >
                                 <View
-                                  hasError={false}
                                   style={
                                     Object {
-                                      "backgroundColor": "#17B582",
-                                      "bottom": 0,
+                                      "backgroundColor": "#A5A5A5",
+                                      "bottom": -0.5,
                                       "height": 0.5,
                                     }
                                   }
                                 />
+                                <View
+                                  style={
+                                    Object {
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "right": 0,
+                                      "transform": Array [
+                                        Object {
+                                          "scaleX": 0.0001,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <View
+                                    hasError={false}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#17B582",
+                                        "bottom": 0,
+                                        "height": 0.5,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          disabled={false}
-                          style={
-                            Object {
-                              "marginVertical": 16,
-                            }
-                          }
-                        >
-                          <View>
-                            <View
-                              style={
-                                Object {
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                }
+                          <View
+                            disabled={false}
+                            style={
+                              Object {
+                                "marginVertical": 16,
                               }
-                            >
+                            }
+                          >
+                            <View>
                               <View
                                 style={
                                   Object {
-                                    "alignItems": "center",
+                                    "flexDirection": "row",
                                     "justifyContent": "center",
                                   }
                                 }
-                              />
-                              <View
-                                style={
-                                  Object {
-                                    "alignSelf": "flex-end",
-                                    "flex": 1,
-                                  }
-                                }
                               >
                                 <View
                                   style={
                                     Object {
-                                      "opacity": 0,
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
                                     }
                                   }
-                                >
-                                  <TextInput
-                                    allowFontScaling={true}
-                                    autoCapitalize="none"
-                                    autoCorrect={false}
-                                    editable={true}
-                                    onBlur={[Function]}
-                                    onChangeText={[Function]}
-                                    onFocus={[Function]}
-                                    placeholderTextColor="rgba(39, 39, 46, 0.6)"
-                                    rejectResponderTermination={true}
-                                    returnKeyType="done"
-                                    secureTextEntry={true}
-                                    style={
-                                      Array [
-                                        Object {
-                                          "color": "#27272E",
-                                          "fontFamily": "InterUI-Bold",
-                                          "fontSize": 14,
-                                          "height": 38,
-                                          "paddingVertical": 0,
-                                        },
-                                        undefined,
-                                      ]
-                                    }
-                                    type="password"
-                                    underlineColorAndroid="transparent"
-                                    value=""
-                                  />
-                                </View>
+                                />
                                 <View
-                                  onLayout={[Function]}
-                                  pointerEvents="none"
                                   style={
                                     Object {
-                                      "justifyContent": "center",
-                                      "opacity": 1,
-                                      "position": "absolute",
-                                      "top": 0,
-                                      "transform": Array [
-                                        Object {
-                                          "scale": 1,
-                                        },
-                                        Object {
-                                          "translateX": 0,
-                                        },
-                                        Object {
-                                          "translateY": 0,
-                                        },
-                                      ],
+                                      "alignSelf": "flex-end",
+                                      "flex": 1,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={0}
+                                  <View
+                                    style={
+                                      Object {
+                                        "opacity": 0,
+                                      }
+                                    }
+                                  >
+                                    <TextInput
+                                      allowFontScaling={true}
+                                      autoCapitalize="none"
+                                      autoCorrect={false}
+                                      editable={true}
+                                      onBlur={[Function]}
+                                      onChangeText={[Function]}
+                                      onFocus={[Function]}
+                                      placeholderTextColor="rgba(39, 39, 46, 0.6)"
+                                      rejectResponderTermination={true}
+                                      returnKeyType="done"
+                                      secureTextEntry={true}
+                                      style={
+                                        Array [
+                                          Object {
+                                            "color": "#27272E",
+                                            "fontFamily": "InterUI-Bold",
+                                            "fontSize": 14,
+                                            "height": 38,
+                                            "paddingVertical": 0,
+                                          },
+                                          undefined,
+                                        ]
+                                      }
+                                      type="password"
+                                      underlineColorAndroid="transparent"
+                                      value=""
+                                    />
+                                  </View>
+                                  <View
+                                    onLayout={[Function]}
+                                    pointerEvents="none"
                                     style={
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "rgba(39, 39, 46, 0.6)",
-                                        "fontFamily": "InterUI-Medium",
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                        "paddingVertical": 4,
+                                        "justifyContent": "center",
+                                        "opacity": 1,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": 1,
+                                          },
+                                          Object {
+                                            "translateX": 0,
+                                          },
+                                          Object {
+                                            "translateY": 0,
+                                          },
+                                        ],
                                       }
                                     }
                                   >
-                                    Confirm Password
-                                  </Text>
+                                    <Text
+                                      numberOfLines={0}
+                                      style={
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "rgba(39, 39, 46, 0.6)",
+                                          "fontFamily": "InterUI-Medium",
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                          "paddingVertical": 4,
+                                        }
+                                      }
+                                    >
+                                      Confirm Password
+                                    </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                  }
-                                }
-                              />
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "bottom": 0,
-                                  "left": 0,
-                                  "right": 0,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "backgroundColor": "#A5A5A5",
-                                    "bottom": -0.5,
-                                    "height": 0.5,
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                               <View
                                 style={
                                   Object {
                                     "bottom": 0,
                                     "left": 0,
                                     "right": 0,
-                                    "transform": Array [
-                                      Object {
-                                        "scaleX": 0.0001,
-                                      },
-                                    ],
                                   }
                                 }
                               >
                                 <View
-                                  hasError={false}
                                   style={
                                     Object {
-                                      "backgroundColor": "#17B582",
-                                      "bottom": 0,
+                                      "backgroundColor": "#A5A5A5",
+                                      "bottom": -0.5,
                                       "height": 0.5,
                                     }
                                   }
                                 />
+                                <View
+                                  style={
+                                    Object {
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "right": 0,
+                                      "transform": Array [
+                                        Object {
+                                          "scaleX": 0.0001,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <View
+                                    hasError={false}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#17B582",
+                                        "bottom": 0,
+                                        "height": 0.5,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          Object {
-                            "flex": 1,
-                            "justifyContent": "flex-end",
-                            "marginBottom": 80,
-                          }
-                        }
-                      >
                         <View
                           style={
                             Object {
-                              "paddingHorizontal": 16,
-                              "paddingVertical": 16,
+                              "flex": 1,
+                              "justifyContent": "flex-end",
+                              "marginBottom": 80,
                             }
                           }
                         >
                           <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               Object {
-                                "opacity": 1,
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
                               }
                             }
                           >
                             <View
-                              bordered={false}
-                              disabled={false}
-                              pill={false}
+                              accessible={true}
+                              focusable={true}
+                              onClick={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#17B582",
-                                  "borderColor": "#17B582",
-                                  "borderRadius": 16,
-                                  "borderWidth": 0.5,
-                                  "flexDirection": "row",
-                                  "height": 48,
-                                  "justifyContent": "center",
                                   "opacity": 1,
-                                  "overflow": "hidden",
-                                  "paddingHorizontal": 16,
-                                  "shadowColor": "rgba(0, 0, 0, 0.040000000000000036)",
-                                  "shadowOffset": Object {
-                                    "height": 2,
-                                    "width": 0,
-                                  },
-                                  "shadowOpacity": 1,
-                                  "shadowRadius": 8,
                                 }
                               }
                             >
-                              <Text
+                              <View
+                                bordered={false}
+                                disabled={false}
+                                pill={false}
                                 style={
                                   Object {
-                                    "color": "#F4F7F8",
-                                    "fontFamily": "InterUI-Bold",
-                                    "fontSize": 16,
-                                    "lineHeight": 24,
+                                    "alignItems": "center",
+                                    "backgroundColor": "#17B582",
+                                    "borderColor": "#17B582",
+                                    "borderRadius": 16,
+                                    "borderWidth": 0.5,
+                                    "flexDirection": "row",
+                                    "height": 48,
+                                    "justifyContent": "center",
+                                    "opacity": 1,
+                                    "overflow": "hidden",
+                                    "paddingHorizontal": 16,
+                                    "shadowColor": "rgba(0, 0, 0, 0.040000000000000036)",
+                                    "shadowOffset": Object {
+                                      "height": 2,
+                                      "width": 0,
+                                    },
+                                    "shadowOpacity": 1,
+                                    "shadowRadius": 8,
                                   }
                                 }
                               >
-                                Save
-                              </Text>
+                                <Text
+                                  style={
+                                    Object {
+                                      "color": "#F4F7F8",
+                                      "fontFamily": "InterUI-Bold",
+                                      "fontSize": 16,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                  Save
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
diff --git a/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/PersonDetails.tests.js.snap b/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/PersonDetails.tests.js.snap
index 57681d662..a7a283874 100644
--- a/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/PersonDetails.tests.js.snap
+++ b/packages/apollos-ui-connected/src/UserSettingsConnected/__snapshots__/PersonDetails.tests.js.snap
@@ -282,585 +282,596 @@ exports[`PersonalDetails component renders PersonalDetails when logged in 1`] =
                     }
                   >
                     <View
-                      onLayout={[Function]}
+                      avoidHeader={true}
                       style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          Object {
-                            "paddingBottom": 0,
-                          },
-                        ]
+                        Object {
+                          "backgroundColor": "rgb(249, 249, 251)",
+                          "flex": 1,
+                          "height": "100%",
+                        }
                       }
                     >
                       <View
+                        onLayout={[Function]}
                         style={
-                          Object {
-                            "paddingHorizontal": 16,
-                            "paddingVertical": 16,
-                          }
+                          Array [
+                            Object {
+                              "flex": 1,
+                            },
+                            Object {
+                              "paddingBottom": 0,
+                            },
+                          ]
                         }
                       >
                         <View
-                          disabled={false}
                           style={
                             Object {
-                              "marginVertical": 16,
+                              "paddingHorizontal": 16,
+                              "paddingVertical": 16,
                             }
                           }
                         >
-                          <View>
-                            <View
-                              style={
-                                Object {
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                }
+                          <View
+                            disabled={false}
+                            style={
+                              Object {
+                                "marginVertical": 16,
                               }
-                            >
+                            }
+                          >
+                            <View>
                               <View
                                 style={
                                   Object {
-                                    "alignItems": "center",
+                                    "flexDirection": "row",
                                     "justifyContent": "center",
                                   }
                                 }
-                              />
-                              <View
-                                style={
-                                  Object {
-                                    "alignSelf": "flex-end",
-                                    "flex": 1,
-                                  }
-                                }
                               >
                                 <View
                                   style={
                                     Object {
-                                      "opacity": 1,
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
                                     }
                                   }
-                                >
-                                  <TextInput
-                                    allowFontScaling={true}
-                                    editable={true}
-                                    onBlur={[Function]}
-                                    onChangeText={[Function]}
-                                    onFocus={[Function]}
-                                    placeholderTextColor="rgba(39, 39, 46, 0.6)"
-                                    rejectResponderTermination={true}
-                                    returnKeyType="done"
-                                    style={
-                                      Array [
-                                        Object {
-                                          "color": "#27272E",
-                                          "fontFamily": "InterUI-Bold",
-                                          "fontSize": 14,
-                                          "height": 38,
-                                          "paddingVertical": 0,
-                                        },
-                                        undefined,
-                                      ]
-                                    }
-                                    type="text"
-                                    underlineColorAndroid="transparent"
-                                    value="Isaac"
-                                  />
-                                </View>
+                                />
                                 <View
-                                  onLayout={[Function]}
-                                  pointerEvents="none"
                                   style={
                                     Object {
-                                      "justifyContent": "center",
-                                      "opacity": 0.8,
-                                      "position": "absolute",
-                                      "top": 0,
-                                      "transform": Array [
-                                        Object {
-                                          "scale": 0.8,
-                                        },
-                                        Object {
-                                          "translateX": 0,
-                                        },
-                                        Object {
-                                          "translateY": 0,
-                                        },
-                                      ],
+                                      "alignSelf": "flex-end",
+                                      "flex": 1,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={0}
+                                  <View
+                                    style={
+                                      Object {
+                                        "opacity": 1,
+                                      }
+                                    }
+                                  >
+                                    <TextInput
+                                      allowFontScaling={true}
+                                      editable={true}
+                                      onBlur={[Function]}
+                                      onChangeText={[Function]}
+                                      onFocus={[Function]}
+                                      placeholderTextColor="rgba(39, 39, 46, 0.6)"
+                                      rejectResponderTermination={true}
+                                      returnKeyType="done"
+                                      style={
+                                        Array [
+                                          Object {
+                                            "color": "#27272E",
+                                            "fontFamily": "InterUI-Bold",
+                                            "fontSize": 14,
+                                            "height": 38,
+                                            "paddingVertical": 0,
+                                          },
+                                          undefined,
+                                        ]
+                                      }
+                                      type="text"
+                                      underlineColorAndroid="transparent"
+                                      value="Isaac"
+                                    />
+                                  </View>
+                                  <View
+                                    onLayout={[Function]}
+                                    pointerEvents="none"
                                     style={
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "rgba(39, 39, 46, 0.6)",
-                                        "fontFamily": "InterUI-Medium",
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                        "paddingVertical": 4,
+                                        "justifyContent": "center",
+                                        "opacity": 0.8,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": 0.8,
+                                          },
+                                          Object {
+                                            "translateX": 0,
+                                          },
+                                          Object {
+                                            "translateY": 0,
+                                          },
+                                        ],
                                       }
                                     }
                                   >
-                                    First Name
-                                  </Text>
+                                    <Text
+                                      numberOfLines={0}
+                                      style={
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "rgba(39, 39, 46, 0.6)",
+                                          "fontFamily": "InterUI-Medium",
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                          "paddingVertical": 4,
+                                        }
+                                      }
+                                    >
+                                      First Name
+                                    </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                  }
-                                }
-                              />
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "bottom": 0,
-                                  "left": 0,
-                                  "right": 0,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "backgroundColor": "#A5A5A5",
-                                    "bottom": -0.5,
-                                    "height": 0.5,
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                               <View
                                 style={
                                   Object {
                                     "bottom": 0,
                                     "left": 0,
                                     "right": 0,
-                                    "transform": Array [
-                                      Object {
-                                        "scaleX": 1,
-                                      },
-                                    ],
                                   }
                                 }
                               >
                                 <View
-                                  hasError={false}
                                   style={
                                     Object {
-                                      "backgroundColor": "#17B582",
-                                      "bottom": 0,
+                                      "backgroundColor": "#A5A5A5",
+                                      "bottom": -0.5,
                                       "height": 0.5,
                                     }
                                   }
                                 />
+                                <View
+                                  style={
+                                    Object {
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "right": 0,
+                                      "transform": Array [
+                                        Object {
+                                          "scaleX": 1,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <View
+                                    hasError={false}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#17B582",
+                                        "bottom": 0,
+                                        "height": 0.5,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          disabled={false}
-                          style={
-                            Object {
-                              "marginVertical": 16,
-                            }
-                          }
-                        >
-                          <View>
-                            <View
-                              style={
-                                Object {
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                }
+                          <View
+                            disabled={false}
+                            style={
+                              Object {
+                                "marginVertical": 16,
                               }
-                            >
+                            }
+                          >
+                            <View>
                               <View
                                 style={
                                   Object {
-                                    "alignItems": "center",
+                                    "flexDirection": "row",
                                     "justifyContent": "center",
                                   }
                                 }
-                              />
-                              <View
-                                style={
-                                  Object {
-                                    "alignSelf": "flex-end",
-                                    "flex": 1,
-                                  }
-                                }
                               >
                                 <View
                                   style={
                                     Object {
-                                      "opacity": 1,
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
                                     }
                                   }
-                                >
-                                  <TextInput
-                                    allowFontScaling={true}
-                                    editable={true}
-                                    onBlur={[Function]}
-                                    onChangeText={[Function]}
-                                    onFocus={[Function]}
-                                    placeholderTextColor="rgba(39, 39, 46, 0.6)"
-                                    rejectResponderTermination={true}
-                                    returnKeyType="done"
-                                    style={
-                                      Array [
-                                        Object {
-                                          "color": "#27272E",
-                                          "fontFamily": "InterUI-Bold",
-                                          "fontSize": 14,
-                                          "height": 38,
-                                          "paddingVertical": 0,
-                                        },
-                                        undefined,
-                                      ]
-                                    }
-                                    type="text"
-                                    underlineColorAndroid="transparent"
-                                    value="Hardy"
-                                  />
-                                </View>
+                                />
                                 <View
-                                  onLayout={[Function]}
-                                  pointerEvents="none"
                                   style={
                                     Object {
-                                      "justifyContent": "center",
-                                      "opacity": 0.8,
-                                      "position": "absolute",
-                                      "top": 0,
-                                      "transform": Array [
-                                        Object {
-                                          "scale": 0.8,
-                                        },
-                                        Object {
-                                          "translateX": 0,
-                                        },
-                                        Object {
-                                          "translateY": 0,
-                                        },
-                                      ],
+                                      "alignSelf": "flex-end",
+                                      "flex": 1,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={0}
+                                  <View
+                                    style={
+                                      Object {
+                                        "opacity": 1,
+                                      }
+                                    }
+                                  >
+                                    <TextInput
+                                      allowFontScaling={true}
+                                      editable={true}
+                                      onBlur={[Function]}
+                                      onChangeText={[Function]}
+                                      onFocus={[Function]}
+                                      placeholderTextColor="rgba(39, 39, 46, 0.6)"
+                                      rejectResponderTermination={true}
+                                      returnKeyType="done"
+                                      style={
+                                        Array [
+                                          Object {
+                                            "color": "#27272E",
+                                            "fontFamily": "InterUI-Bold",
+                                            "fontSize": 14,
+                                            "height": 38,
+                                            "paddingVertical": 0,
+                                          },
+                                          undefined,
+                                        ]
+                                      }
+                                      type="text"
+                                      underlineColorAndroid="transparent"
+                                      value="Hardy"
+                                    />
+                                  </View>
+                                  <View
+                                    onLayout={[Function]}
+                                    pointerEvents="none"
                                     style={
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "rgba(39, 39, 46, 0.6)",
-                                        "fontFamily": "InterUI-Medium",
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                        "paddingVertical": 4,
+                                        "justifyContent": "center",
+                                        "opacity": 0.8,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": 0.8,
+                                          },
+                                          Object {
+                                            "translateX": 0,
+                                          },
+                                          Object {
+                                            "translateY": 0,
+                                          },
+                                        ],
                                       }
                                     }
                                   >
-                                    Last Name
-                                  </Text>
+                                    <Text
+                                      numberOfLines={0}
+                                      style={
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "rgba(39, 39, 46, 0.6)",
+                                          "fontFamily": "InterUI-Medium",
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                          "paddingVertical": 4,
+                                        }
+                                      }
+                                    >
+                                      Last Name
+                                    </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                  }
-                                }
-                              />
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "bottom": 0,
-                                  "left": 0,
-                                  "right": 0,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "backgroundColor": "#A5A5A5",
-                                    "bottom": -0.5,
-                                    "height": 0.5,
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                               <View
                                 style={
                                   Object {
                                     "bottom": 0,
                                     "left": 0,
                                     "right": 0,
-                                    "transform": Array [
-                                      Object {
-                                        "scaleX": 1,
-                                      },
-                                    ],
                                   }
                                 }
                               >
                                 <View
-                                  hasError={false}
                                   style={
                                     Object {
-                                      "backgroundColor": "#17B582",
-                                      "bottom": 0,
+                                      "backgroundColor": "#A5A5A5",
+                                      "bottom": -0.5,
                                       "height": 0.5,
                                     }
                                   }
                                 />
+                                <View
+                                  style={
+                                    Object {
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "right": 0,
+                                      "transform": Array [
+                                        Object {
+                                          "scaleX": 1,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <View
+                                    hasError={false}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#17B582",
+                                        "bottom": 0,
+                                        "height": 0.5,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
-                        </View>
-                        <View
-                          disabled={false}
-                          style={
-                            Object {
-                              "marginVertical": 16,
-                            }
-                          }
-                        >
-                          <View>
-                            <View
-                              style={
-                                Object {
-                                  "flexDirection": "row",
-                                  "justifyContent": "center",
-                                }
+                          <View
+                            disabled={false}
+                            style={
+                              Object {
+                                "marginVertical": 16,
                               }
-                            >
+                            }
+                          >
+                            <View>
                               <View
                                 style={
                                   Object {
-                                    "alignItems": "center",
+                                    "flexDirection": "row",
                                     "justifyContent": "center",
                                   }
                                 }
-                              />
-                              <View
-                                style={
-                                  Object {
-                                    "alignSelf": "flex-end",
-                                    "flex": 1,
-                                  }
-                                }
                               >
                                 <View
                                   style={
                                     Object {
-                                      "opacity": 1,
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
                                     }
                                   }
-                                >
-                                  <TextInput
-                                    allowFontScaling={true}
-                                    autoCapitalize="none"
-                                    autoCorrect={false}
-                                    editable={true}
-                                    keyboardType="email-address"
-                                    onBlur={[Function]}
-                                    onChangeText={[Function]}
-                                    onFocus={[Function]}
-                                    placeholderTextColor="rgba(39, 39, 46, 0.6)"
-                                    rejectResponderTermination={true}
-                                    returnKeyType="done"
-                                    style={
-                                      Array [
-                                        Object {
-                                          "color": "#27272E",
-                                          "fontFamily": "InterUI-Bold",
-                                          "fontSize": 14,
-                                          "height": 38,
-                                          "paddingVertical": 0,
-                                        },
-                                        undefined,
-                                      ]
-                                    }
-                                    type="email"
-                                    underlineColorAndroid="transparent"
-                                    value="isaac.hardy@newspring.cc"
-                                  />
-                                </View>
+                                />
                                 <View
-                                  onLayout={[Function]}
-                                  pointerEvents="none"
                                   style={
                                     Object {
-                                      "justifyContent": "center",
-                                      "opacity": 0.8,
-                                      "position": "absolute",
-                                      "top": 0,
-                                      "transform": Array [
-                                        Object {
-                                          "scale": 0.8,
-                                        },
-                                        Object {
-                                          "translateX": 0,
-                                        },
-                                        Object {
-                                          "translateY": 0,
-                                        },
-                                      ],
+                                      "alignSelf": "flex-end",
+                                      "flex": 1,
                                     }
                                   }
                                 >
-                                  <Text
-                                    numberOfLines={0}
+                                  <View
                                     style={
                                       Object {
-                                        "backgroundColor": "transparent",
-                                        "color": "rgba(39, 39, 46, 0.6)",
-                                        "fontFamily": "InterUI-Medium",
-                                        "fontSize": 14,
-                                        "lineHeight": 21,
-                                        "paddingVertical": 4,
+                                        "opacity": 1,
                                       }
                                     }
                                   >
-                                    Email
-                                  </Text>
+                                    <TextInput
+                                      allowFontScaling={true}
+                                      autoCapitalize="none"
+                                      autoCorrect={false}
+                                      editable={true}
+                                      keyboardType="email-address"
+                                      onBlur={[Function]}
+                                      onChangeText={[Function]}
+                                      onFocus={[Function]}
+                                      placeholderTextColor="rgba(39, 39, 46, 0.6)"
+                                      rejectResponderTermination={true}
+                                      returnKeyType="done"
+                                      style={
+                                        Array [
+                                          Object {
+                                            "color": "#27272E",
+                                            "fontFamily": "InterUI-Bold",
+                                            "fontSize": 14,
+                                            "height": 38,
+                                            "paddingVertical": 0,
+                                          },
+                                          undefined,
+                                        ]
+                                      }
+                                      type="email"
+                                      underlineColorAndroid="transparent"
+                                      value="isaac.hardy@newspring.cc"
+                                    />
+                                  </View>
+                                  <View
+                                    onLayout={[Function]}
+                                    pointerEvents="none"
+                                    style={
+                                      Object {
+                                        "justifyContent": "center",
+                                        "opacity": 0.8,
+                                        "position": "absolute",
+                                        "top": 0,
+                                        "transform": Array [
+                                          Object {
+                                            "scale": 0.8,
+                                          },
+                                          Object {
+                                            "translateX": 0,
+                                          },
+                                          Object {
+                                            "translateY": 0,
+                                          },
+                                        ],
+                                      }
+                                    }
+                                  >
+                                    <Text
+                                      numberOfLines={0}
+                                      style={
+                                        Object {
+                                          "backgroundColor": "transparent",
+                                          "color": "rgba(39, 39, 46, 0.6)",
+                                          "fontFamily": "InterUI-Medium",
+                                          "fontSize": 14,
+                                          "lineHeight": 21,
+                                          "paddingVertical": 4,
+                                        }
+                                      }
+                                    >
+                                      Email
+                                    </Text>
+                                  </View>
                                 </View>
-                              </View>
-                              <View
-                                style={
-                                  Object {
-                                    "alignItems": "center",
-                                    "justifyContent": "center",
-                                  }
-                                }
-                              />
-                            </View>
-                            <View
-                              style={
-                                Object {
-                                  "bottom": 0,
-                                  "left": 0,
-                                  "right": 0,
-                                }
-                              }
-                            >
-                              <View
-                                style={
-                                  Object {
-                                    "backgroundColor": "#A5A5A5",
-                                    "bottom": -0.5,
-                                    "height": 0.5,
+                                <View
+                                  style={
+                                    Object {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                    }
                                   }
-                                }
-                              />
+                                />
+                              </View>
                               <View
                                 style={
                                   Object {
                                     "bottom": 0,
                                     "left": 0,
                                     "right": 0,
-                                    "transform": Array [
-                                      Object {
-                                        "scaleX": 1,
-                                      },
-                                    ],
                                   }
                                 }
                               >
                                 <View
-                                  hasError={false}
                                   style={
                                     Object {
-                                      "backgroundColor": "#17B582",
-                                      "bottom": 0,
+                                      "backgroundColor": "#A5A5A5",
+                                      "bottom": -0.5,
                                       "height": 0.5,
                                     }
                                   }
                                 />
+                                <View
+                                  style={
+                                    Object {
+                                      "bottom": 0,
+                                      "left": 0,
+                                      "right": 0,
+                                      "transform": Array [
+                                        Object {
+                                          "scaleX": 1,
+                                        },
+                                      ],
+                                    }
+                                  }
+                                >
+                                  <View
+                                    hasError={false}
+                                    style={
+                                      Object {
+                                        "backgroundColor": "#17B582",
+                                        "bottom": 0,
+                                        "height": 0.5,
+                                      }
+                                    }
+                                  />
+                                </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                      <View
-                        style={
-                          Object {
-                            "flex": 1,
-                            "justifyContent": "flex-end",
-                            "marginBottom": 80,
-                          }
-                        }
-                      >
                         <View
                           style={
                             Object {
-                              "paddingHorizontal": 16,
-                              "paddingVertical": 16,
+                              "flex": 1,
+                              "justifyContent": "flex-end",
+                              "marginBottom": 80,
                             }
                           }
                         >
                           <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
                             style={
                               Object {
-                                "opacity": 1,
+                                "paddingHorizontal": 16,
+                                "paddingVertical": 16,
                               }
                             }
                           >
                             <View
-                              bordered={false}
-                              disabled={false}
-                              pill={false}
+                              accessible={true}
+                              focusable={true}
+                              onClick={[Function]}
+                              onResponderGrant={[Function]}
+                              onResponderMove={[Function]}
+                              onResponderRelease={[Function]}
+                              onResponderTerminate={[Function]}
+                              onResponderTerminationRequest={[Function]}
+                              onStartShouldSetResponder={[Function]}
                               style={
                                 Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "#17B582",
-                                  "borderColor": "#17B582",
-                                  "borderRadius": 16,
-                                  "borderWidth": 0.5,
-                                  "flexDirection": "row",
-                                  "height": 48,
-                                  "justifyContent": "center",
                                   "opacity": 1,
-                                  "overflow": "hidden",
-                                  "paddingHorizontal": 16,
-                                  "shadowColor": "rgba(0, 0, 0, 0.040000000000000036)",
-                                  "shadowOffset": Object {
-                                    "height": 2,
-                                    "width": 0,
-                                  },
-                                  "shadowOpacity": 1,
-                                  "shadowRadius": 8,
                                 }
                               }
                             >
-                              <Text
+                              <View
+                                bordered={false}
+                                disabled={false}
+                                pill={false}
                                 style={
                                   Object {
-                                    "color": "#F4F7F8",
-                                    "fontFamily": "InterUI-Bold",
-                                    "fontSize": 16,
-                                    "lineHeight": 24,
+                                    "alignItems": "center",
+                                    "backgroundColor": "#17B582",
+                                    "borderColor": "#17B582",
+                                    "borderRadius": 16,
+                                    "borderWidth": 0.5,
+                                    "flexDirection": "row",
+                                    "height": 48,
+                                    "justifyContent": "center",
+                                    "opacity": 1,
+                                    "overflow": "hidden",
+                                    "paddingHorizontal": 16,
+                                    "shadowColor": "rgba(0, 0, 0, 0.040000000000000036)",
+                                    "shadowOffset": Object {
+                                      "height": 2,
+                                      "width": 0,
+                                    },
+                                    "shadowOpacity": 1,
+                                    "shadowRadius": 8,
                                   }
                                 }
                               >
-                                Save
-                              </Text>
+                                <Text
+                                  style={
+                                    Object {
+                                      "color": "#F4F7F8",
+                                      "fontFamily": "InterUI-Bold",
+                                      "fontSize": 16,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                  Save
+                                </Text>
+                              </View>
                             </View>
                           </View>
                         </View>
diff --git a/packages/apollos-ui-kit/src/BackgroundView/index.js b/packages/apollos-ui-kit/src/BackgroundView/index.js
index e24a327e7..e89df4a49 100644
--- a/packages/apollos-ui-kit/src/BackgroundView/index.js
+++ b/packages/apollos-ui-kit/src/BackgroundView/index.js
@@ -1,15 +1,24 @@
 import PropTypes from 'prop-types';
 
-import { View } from 'react-native';
+import { Dimensions, Platform, View } from 'react-native';
 
 import styled from '../styled';
 
+const screenHeight = Dimensions.get('screen').height;
+const windowHeight = Dimensions.get('window').height;
+const navbarHeight = screenHeight - windowHeight;
+
 const BackgroundView = styled(
-  ({ theme, material = 'screen', flexed = true }) => ({
+  ({ theme, avoidHeader = false, material = 'screen', flexed = true }) => ({
     backgroundColor:
       theme?.colors?.background[material] || theme?.colors?.background?.screen,
     flex: flexed ? 1 : 0,
     height: flexed ? '100%' : undefined,
+    ...(avoidHeader
+      ? Platform.OS === 'android'
+        ? { paddingTop: navbarHeight + theme.sizing.baseUnit * 2 }
+        : {}
+      : {}),
   }),
   'ui-kit.BackgroundView'
 )(View);
diff --git a/packages/apollos-ui-notifications/src/NotificationSettingsConnected/NotificationSettings.js b/packages/apollos-ui-notifications/src/NotificationSettingsConnected/NotificationSettings.js
index 72924b806..417dc7c8a 100644
--- a/packages/apollos-ui-notifications/src/NotificationSettingsConnected/NotificationSettings.js
+++ b/packages/apollos-ui-notifications/src/NotificationSettingsConnected/NotificationSettings.js
@@ -6,7 +6,7 @@ const NotificationSettings = ({
   allNotificationsEnabled,
   toggleNotifications,
 }) => (
-  <BackgroundView>
+  <BackgroundView avoidHeader>
     <PaddedView>
       <Switch
         value={allNotificationsEnabled}
diff --git a/packages/apollos-ui-notifications/src/NotificationSettingsConnected/__snapshots__/NotificationSettings.tests.js.snap b/packages/apollos-ui-notifications/src/NotificationSettingsConnected/__snapshots__/NotificationSettings.tests.js.snap
index bd68897ce..665d5a0dc 100644
--- a/packages/apollos-ui-notifications/src/NotificationSettingsConnected/__snapshots__/NotificationSettings.tests.js.snap
+++ b/packages/apollos-ui-notifications/src/NotificationSettingsConnected/__snapshots__/NotificationSettings.tests.js.snap
@@ -26,6 +26,7 @@ exports[`The NotificationSettings toggle switch should render correctly 1`] = `
     }
   />
   <View
+    avoidHeader={true}
     style={
       Object {
         "backgroundColor": "rgb(249, 249, 251)",