diff --git a/package-lock.json b/package-lock.json
index 93232be4..b1f5b69e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@mui/styled-engine-sc": "^6.0.0-alpha.1",
         "@mui/system": "^5.14.13",
         "@react-native-async-storage/async-storage": "^1.18.2",
-        "@react-native-community/datetimepicker": "7.2.0",
+        "@react-native-community/datetimepicker": "^7.2.0",
         "@react-navigation/bottom-tabs": "^6.5.9",
         "@react-navigation/material-bottom-tabs": "^6.2.17",
         "@react-navigation/native": "^6.1.8",
diff --git a/package.json b/package.json
index 5518a736..7ba5f154 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.1",
     "@mui/system": "^5.14.13",
     "@react-native-async-storage/async-storage": "^1.18.2",
-    "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-community/datetimepicker": "^7.2.0",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",
diff --git a/src/app/(tabs)/home/index.tsx b/src/app/(tabs)/home/index.tsx
index 7c224297..81ffc8db 100644
--- a/src/app/(tabs)/home/index.tsx
+++ b/src/app/(tabs)/home/index.tsx
@@ -68,7 +68,7 @@ function HomeScreen() {
         contentContainerStyle={{ paddingHorizontal: 8 }}
       >
         <View style={styles.headerContainer}>
-          <Text style={globalStyles.h2}>
+          <Text style={globalStyles.h1}>
             {username ? `Welcome, ${username}` : 'Welcome!'}
           </Text>
           <Pressable onPress={() => router.push('/settings')}>
@@ -86,7 +86,7 @@ function HomeScreen() {
             <View style={{ marginRight: 24 }}>
               {featuredStories.map(story => (
                 <PreviewCard
-                  key={story.title}
+                  key={story.id}
                   title={story.title}
                   image={story.featured_media}
                   author={story.author_name}
diff --git a/src/app/auth/onboarding/index.tsx b/src/app/auth/onboarding/index.tsx
index 5595e6cb..a514b849 100644
--- a/src/app/auth/onboarding/index.tsx
+++ b/src/app/auth/onboarding/index.tsx
@@ -1,4 +1,4 @@
-import { Redirect, router } from 'expo-router';
+import { Link, Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
 import {
   Alert,
@@ -9,16 +9,17 @@ import {
   Appearance,
 } from 'react-native';
 import { Icon } from 'react-native-elements';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
 
 import styles from './styles';
-import colors from '../../../styles/colors';
 import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserSelectorInput from '../../../components/UserSelectorInput/UserSelectorInput';
+import UserStringInput from '../../../components/UserStringInput/UserStringInput';
+import colors from '../../../styles/colors';
 import globalStyles from '../../../styles/globalStyles';
 import { useSession } from '../../../utils/AuthContext';
 import supabase from '../../../utils/supabase';
-import UserStringInput from '../../../components/UserStringInput/UserStringInput';
-import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 function OnboardingScreen() {
   const { session, user } = useSession();
@@ -149,95 +150,107 @@ function OnboardingScreen() {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <View>
-        <DateTimePickerModal
-          isVisible={showDatePicker}
-          mode="date"
-          onConfirm={onConfirmDate}
-          onCancel={() => setShowDatePicker(false)}
-          date={displayDate}
-          display="inline"
-          isDarkModeEnabled={isDark}
-          themeVariant={isDark ? 'dark' : 'light'}
-        />
-        <Text style={[globalStyles.h1, styles.h1]}>
-          Welcome, {user?.user_metadata.username}
-        </Text>
-        <Text style={[globalStyles.body1, styles.body1]}>
-          Input your profile information below.
-        </Text>
-        <View style={styles.info}>
-          <Icon type="material" name="info-outline" color="#797979" />
-          <Text style={[globalStyles.subtext, styles.subtext]}>
-            This information is only used for outreach efforts, and will not be
-            visible to other users on the app.
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.flex}>
+        <View>
+          <DateTimePickerModal
+            isVisible={showDatePicker}
+            mode="date"
+            onConfirm={onConfirmDate}
+            onCancel={() => setShowDatePicker(false)}
+            date={displayDate}
+            display="inline"
+            isDarkModeEnabled={isDark}
+            themeVariant={isDark ? 'dark' : 'light'}
+          />
+          <Text style={globalStyles.h1}>
+            Welcome, {user?.user_metadata.username}
           </Text>
-        </View>
-
-        <View style={styles.datePickerButton}>
-          <Pressable
-            onPress={() => {
-              setShowDatePicker(!showDatePicker);
-            }}
-          >
-            <View pointerEvents="none">
-              <UserStringInput
-                placeholderTextColor={colors.darkGrey}
-                placeholder="Select Date"
-                label="Birthday"
-                value={birthday}
+          <Text style={[globalStyles.body1, styles.body1]}>
+            Input your profile information below.
+          </Text>
+          <View style={styles.info}>
+            <Icon type="material" name="info-outline" color="#797979" />
+            <Text style={[globalStyles.subtext, styles.subtext]}>
+              This information is only used for outreach efforts, and will not
+              be visible to other users on the app.
+            </Text>
+          </View>
+          <View style={styles.inputContainer}>
+            <View>
+              <Pressable
+                onPress={() => {
+                  setShowDatePicker(!showDatePicker);
+                }}
               >
-                <Icon
-                  name="event"
-                  type="material"
-                  color={colors.darkGrey}
-                  style={styles.icon}
-                ></Icon>
-              </UserStringInput>
+                <View pointerEvents="none">
+                  <UserStringInput
+                    placeholderTextColor={colors.darkGrey}
+                    placeholder="Select Date"
+                    label="Birthday"
+                    value={birthday}
+                  >
+                    <Icon
+                      name="event"
+                      type="material"
+                      color={colors.darkGrey}
+                      style={styles.icon}
+                    />
+                  </UserStringInput>
+                </View>
+              </Pressable>
             </View>
-          </Pressable>
+            <UserSelectorInput
+              options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
+              label="Gender"
+              value={gender}
+              setValue={setGender}
+            />
+            <UserSelectorInput
+              options={['she/her', 'he/him', 'they/them', 'Other']}
+              label="Pronouns"
+              value={pronouns}
+              setValue={setPronouns}
+            />
+            <UserSelectorInput
+              options={[
+                'American Indian/Alaska Native',
+                'Asian',
+                'Black or African American',
+                'Native Hawaiian or other Pacific Islander',
+                'White',
+                'Prefer Not to Disclose',
+              ]}
+              label="Race/Ethnicity"
+              value={raceEthnicity}
+              setValue={setRaceEthnicity}
+            />
+          </View>
         </View>
 
-        <UserSelectorInput
-          options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
-          label="Gender"
-          value={gender}
-          setValue={setGender}
-        />
-        <UserSelectorInput
-          options={['she/her', 'he/him', 'they/them', 'Other']}
-          label="Pronouns"
-          value={pronouns}
-          setValue={setPronouns}
-        />
-        <UserSelectorInput
-          options={[
-            'American Indian/Alaska Native',
-            'Asian',
-            'Black or African American',
-            'Native Hawaiian or other Pacific Islander',
-            'White',
-            'Prefer Not to Disclose',
-          ]}
-          label="Race/Ethnicity"
-          value={raceEthnicity}
-          setValue={setRaceEthnicity}
-        />
-      </View>
-      <View>
-        <StyledButton
-          text={'Update Profile'}
-          onPress={updateProfileAndGoHome}
-          disabled={loading}
-        />
-        <StyledButton
-          text="Skip"
-          onPress={() => router.replace('/home')}
-          disabled={false}
-        />
-      </View>
-    </ScrollView>
+        <View>
+          <View style={styles.updateProfileButton}>
+            <StyledButton
+              text="Update profile"
+              onPress={updateProfileAndGoHome}
+              disabled={
+                loading ||
+                (birthday === '' &&
+                  gender === '' &&
+                  pronouns === '' &&
+                  raceEthnicity === '')
+              }
+            />
+          </View>
+          <Link
+            style={[globalStyles.bodyBoldUnderline, styles.skipButton]}
+            href="/(tabs)/home"
+          >
+            Skip For Now
+          </Link>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
diff --git a/src/app/auth/onboarding/styles.tsx b/src/app/auth/onboarding/styles.tsx
index 688d843b..6555413a 100644
--- a/src/app/auth/onboarding/styles.tsx
+++ b/src/app/auth/onboarding/styles.tsx
@@ -4,35 +4,41 @@ import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   container: {
-    flex: 1,
     backgroundColor: 'white',
+    flex: 1,
+  },
+  flex: {
+    flexGrow: 1,
+    justifyContent: 'space-between',
     paddingTop: 64,
-    paddingLeft: 44,
+    paddingBottom: 54,
+    paddingLeft: 43,
     paddingRight: 44,
   },
-  verticallySpaced: {
+  inputContainer: {
     flex: 1,
-    justifyContent: 'space-between',
-  },
-  datePickerButton: {
-    paddingBottom: 16,
+    gap: 16,
   },
   subtext: {
     color: colors.darkGrey,
     marginLeft: 8,
   },
-  h1: {
-    marginTop: 66,
-  },
   body1: {
     marginTop: 26,
   },
   info: {
     flexDirection: 'row',
     marginTop: 12,
-    marginBottom: 16,
     width: 250,
   },
+  updateProfileButton: {
+    marginBottom: 24,
+  },
+  skipButton: {
+    flex: 1,
+    alignSelf: 'center',
+    color: colors.darkGrey,
+  },
   icon: {
     paddingLeft: 8,
   },
diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx
index 41246d2c..52a044a3 100644
--- a/src/app/auth/signup/index.tsx
+++ b/src/app/auth/signup/index.tsx
@@ -257,12 +257,12 @@ function SignUpScreen() {
               onPress={signUpWithEmail}
             />
           </View>
-          <Text style={[globalStyles.body1, styles.redirectText]}>
-            Already have an account?{' '}
+          <View style={styles.redirectText}>
+            <Text style={globalStyles.body1}>Already have an account?</Text>
             <Link style={globalStyles.bodyBoldUnderline} href="/auth/login">
               Log In
             </Link>
-          </Text>
+          </View>
         </View>
       </ScrollView>
     </SafeAreaView>
diff --git a/src/app/auth/signup/styles.tsx b/src/app/auth/signup/styles.tsx
index 600bcb26..51de2d40 100644
--- a/src/app/auth/signup/styles.tsx
+++ b/src/app/auth/signup/styles.tsx
@@ -14,9 +14,11 @@ export default StyleSheet.create({
     textDecorationLine: 'underline',
   },
   redirectText: {
-    textAlign: 'center',
-    marginBottom: 64,
+    gap: 8,
+    flexDirection: 'row',
+    justifyContent: 'center',
     marginTop: 16,
+    marginBottom: 64,
   },
   title: {
     paddingTop: 64,
diff --git a/src/app/settings/index.tsx b/src/app/settings/index.tsx
index bd846b2b..40f501ad 100644
--- a/src/app/settings/index.tsx
+++ b/src/app/settings/index.tsx
@@ -57,7 +57,7 @@ function SettingsScreen() {
       const { data, error, status } = await supabase
         .from('profiles')
         .select(
-          `first_name, last_name, username, birthday, gender, race_ethnicity`,
+          `first_name, last_name, username, birthday, gender, race_ethnicity, pronouns`,
         )
         .eq('user_id', session?.user.id)
         .single();
@@ -81,7 +81,7 @@ function SettingsScreen() {
         }
 
         setGender(data.gender || gender);
-        // setPronouns(data.pronouns || pronouns);
+        setPronouns(data.pronouns || pronouns);
         setRaceEthnicity(data.race_ethnicity || raceEthnicity);
       }
     } catch (error) {
@@ -115,8 +115,6 @@ function SettingsScreen() {
 
       // Only update values that are not blank
       const updates = {
-        ...(firstName && { first_name: firstName }),
-        ...(lastName && { last_name: lastName }),
         ...(gender && { gender }),
         ...(pronouns && { pronouns }),
         ...(raceEthnicity && { race_ethnicity: raceEthnicity }),
@@ -189,7 +187,6 @@ function SettingsScreen() {
               {'<Back'}
             </Text>
           </Link>
-
           <View>
             <DateTimePickerModal
               isVisible={showDatePicker}
@@ -242,31 +239,33 @@ function SettingsScreen() {
             />
           </View>
 
-          <UserSelectorInput
-            options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
-            label="Gender"
-            value={gender}
-            setValue={wrapInDetectChange(setGender)}
-          />
-          <UserSelectorInput
-            options={['she/her', 'he/him', 'they/them', 'Other']}
-            label="Pronouns"
-            value={pronouns}
-            setValue={wrapInDetectChange(setPronouns)}
-          />
-          <UserSelectorInput
-            options={[
-              'American Indian/Alaska Native',
-              'Asian',
-              // 'Black or African American',
-              'Native Hawaiian or other Pacific Islander',
-              'White',
-              'Prefer Not to Disclose',
-            ]}
-            label="Race/Ethnicity"
-            value={raceEthnicity}
-            setValue={wrapInDetectChange(setRaceEthnicity)}
-          />
+          <View style={styles.selectors}>
+            <UserSelectorInput
+              options={['Female', 'Male', 'Prefer Not to Disclose', 'Other']}
+              label="Gender"
+              value={gender}
+              setValue={wrapInDetectChange(setGender)}
+            />
+            <UserSelectorInput
+              options={['she/her', 'he/him', 'they/them', 'Other']}
+              label="Pronouns"
+              value={pronouns}
+              setValue={wrapInDetectChange(setPronouns)}
+            />
+            <UserSelectorInput
+              options={[
+                'American Indian/Alaska Native',
+                'Asian',
+                'Black or African American',
+                'Native Hawaiian or other Pacific Islander',
+                'White',
+                'Prefer Not to Disclose',
+              ]}
+              label="Race/Ethnicity"
+              value={raceEthnicity}
+              setValue={wrapInDetectChange(setRaceEthnicity)}
+            />
+          </View>
           {birthdayChanged && (
             <View style={styles.info}>
               <Icon type="material" name="info-outline" color="#797979" />
diff --git a/src/app/settings/styles.tsx b/src/app/settings/styles.tsx
index 580f7838..944c1819 100644
--- a/src/app/settings/styles.tsx
+++ b/src/app/settings/styles.tsx
@@ -2,6 +2,10 @@ import { StyleSheet } from 'react-native';
 import colors from '../../styles/colors';
 
 export default StyleSheet.create({
+  selectors: {
+    flex: 1,
+    gap: 16,
+  },
   container: {
     flex: 1,
     backgroundColor: 'white',
diff --git a/src/components/UserSelectorInput/UserSelectorInput.tsx b/src/components/UserSelectorInput/UserSelectorInput.tsx
index dd5be4fc..a032b1ab 100644
--- a/src/components/UserSelectorInput/UserSelectorInput.tsx
+++ b/src/components/UserSelectorInput/UserSelectorInput.tsx
@@ -24,7 +24,7 @@ function UserSelectorInput({
   value,
 }: UserSelectorInputProps) {
   return (
-    <View style={styles.container}>
+    <View>
       <Text style={[globalStyles.subtext, styles.label]}>{label}</Text>
       <Dropdown
         mode="default"
@@ -43,7 +43,7 @@ function UserSelectorInput({
         maxHeight={400}
         labelField="label"
         valueField="value"
-        placeholder={'Select Option'}
+        placeholder="Select Option"
         value={value}
         renderItem={(item: Option, selected: boolean | undefined) => (
           <Text style={[globalStyles.body1, styles.itemContainer]}>
diff --git a/src/components/UserSelectorInput/styles.tsx b/src/components/UserSelectorInput/styles.tsx
index ad54c0ab..734f782b 100644
--- a/src/components/UserSelectorInput/styles.tsx
+++ b/src/components/UserSelectorInput/styles.tsx
@@ -10,17 +10,15 @@ export default StyleSheet.create({
     position: 'relative',
     zIndex: 1,
   },
-  container: {
-    marginBottom: 16,
-  },
   label: {
-    marginBottom: 10,
+    marginBottom: 8,
   },
   dropdown: {
-    height: 50,
+    height: 44,
     borderWidth: 1,
     borderRadius: 5,
     paddingHorizontal: 10,
+    paddingVertical: 10,
   },
   dropdownContainer: {
     borderRadius: 5,
diff --git a/src/components/UserStringInput/UserStringInput.tsx b/src/components/UserStringInput/UserStringInput.tsx
index f7cd12d6..6d2d586b 100644
--- a/src/components/UserStringInput/UserStringInput.tsx
+++ b/src/components/UserStringInput/UserStringInput.tsx
@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 import { View, Text, TextInput } from 'react-native';
 
 import styles from './styles';
-import globalStyles from '../../styles/globalStyles';
 import colors from '../../styles/colors';
+import globalStyles from '../../styles/globalStyles';
 
 type UserStringInputProps = {
   placeholder: string;
@@ -23,7 +23,7 @@ export default function UserStringInput({
   label,
   children,
   labelColor = '#000',
-  placeholderTextColor = '#000',
+  placeholderTextColor = colors.darkGrey,
   onChange = _ => {},
 }: UserStringInputProps) {
   return (