diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx
index 4ea0616..a5018f3 100644
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@@ -22,33 +22,58 @@ export default function Screen() {
         }
     }, [resyncAllCalendars]);
 
-    const refreshControl = (
-        <RefreshControl
-            colors={[
-                colorMap.pink,
-                colorMap.green,
-                colorMap.orange,
-                colorMap.purple,
-                colorMap.teal,
-            ]}
-            tintColor={colorMap.pink}
-            progressBackgroundColor="white"
-            refreshing={isSyncing}
-            onRefresh={onRefresh}
-        />
-    );
-
     return (
-        <ScrollView
-            style={{flex: 1, height: "100%",}}
-            contentContainerStyle={{flex: 1, height: "100%"}}
-            refreshControl={refreshControl}
-            bounces={true}
-            showsVerticalScrollIndicator={false}
-        >
-            <View style={{flex: 1}}>
-                {isTablet ? <TabletCalendarPage/> : <CalendarPage/>}
+        <View style={{ flex: 1 }}>
+            <View style={{ flex: 1, zIndex: 0 }}>
+                {Device.deviceType === DeviceType.TABLET ? (
+                    <TabletCalendarPage />
+                ) : (
+                    <CalendarPage />
+                )}
             </View>
-        </ScrollView>
+
+            <ScrollView
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: isTablet ? "15%" : 0,
+                    height: isTablet ? "9%" : "4%",
+                    width: isTablet ? "62%" : "100%",
+                    zIndex: 50,
+                    backgroundColor: "transparent",
+                }}
+                contentContainerStyle={{
+                    flex: 1,
+                    justifyContent: "center",
+                    paddingRight: 200,
+                }}
+                refreshControl={
+                    <RefreshControl
+                        colors={[
+                            colorMap.pink,
+                            colorMap.green,
+                            colorMap.orange,
+                            colorMap.purple,
+                            colorMap.teal,
+                        ]}
+                        tintColor={colorMap.pink}
+                        progressBackgroundColor={"white"}
+                        refreshing={refreshing || isSyncing}
+                        onRefresh={onRefresh}
+                        style={{
+                            position: "absolute",
+                            left: "50%", // Position at screen center
+                            transform: [
+                                // Offset by half its own width
+                                { translateX: -20 }, // Assuming the refresh control is ~40px wide
+                            ],
+                        }}
+                    />
+                }
+                bounces={true}
+                showsVerticalScrollIndicator={false}
+                pointerEvents={refreshing || isSyncing ? "auto" : "none"}
+            />
+        </View>
     );
-}
\ No newline at end of file
+}
diff --git a/app/(unauth)/cal_sync.tsx b/app/(unauth)/cal_sync.tsx
index 4eb6cba..565a5dc 100644
--- a/app/(unauth)/cal_sync.tsx
+++ b/app/(unauth)/cal_sync.tsx
@@ -27,7 +27,7 @@ export default function Screen() {
             <View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%", alignItems: "center"}}>
                 <View gap-13 width={"100%"} marginB-20>
                 {householdName && <Text style={{fontSize: 25, fontFamily: 'Manrope_600SemiBold'}}>
-                        You Joined {householdName}
+                        You Joined The {householdName} Household
                     </Text>}
                     <Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}>
                         Let's get started!
diff --git a/components/pages/settings/SettingsPage.tsx b/components/pages/settings/SettingsPage.tsx
index cbe0b6c..711fb84 100644
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@@ -55,7 +55,7 @@ const SettingsPage = () => {
                     isntParent ? styles.disabledText : { color: "#07b9c8" },
                   ]}
                 >
-                  Manage My Profile
+                  User Profiles & Settings
                 </Text>
                 <ArrowRightIcon style={{ marginLeft: "auto" }} />
               </View>
diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx
index 1cf8822..76d253a 100644
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@@ -34,6 +34,7 @@ import KeyboardManager, {
 import { ScrollView } from "react-native-gesture-handler";
 import { useUploadProfilePicture } from "@/hooks/useUploadProfilePicture";
 import UserOptions from "./UserOptions";
+import { colorMap } from "@/constants/colorMap";
 
 type MyGroupProps = {
   onNewUserClick: boolean;
@@ -181,7 +182,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
                     />
                   ) : (
                     <View
-                      style={[styles.pfp, { backgroundColor: "#ea156d" }]}
+                      style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
                     />
                   )}
                   <View row marginL-10 centerV>
diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx
index cabb58c..87fc963 100644
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@@ -109,7 +109,7 @@ const MyProfile = () => {
 
   useEffect(() => {
     setHouseholdName(hhName);
-  }, [hhName])
+  }, [hhName]);
 
   const pickImage = async () => {
     const permissionResult =
@@ -262,40 +262,6 @@ const MyProfile = () => {
           />
         </View>
       </View>
-
-      <View style={styles.card}>
-        <Text style={styles.subTit}>Settings</Text>
-        <Text style={styles.jakarta12}>Time Zone</Text>
-        <View style={styles.viewPicker}>
-          <Picker
-            value={timeZone}
-            onChange={(item) => setTimeZone(item as string)}
-            showSearch
-            floatingPlaceholder
-            style={styles.inViewPicker}
-            trailingAccessory={
-              <View
-                style={{
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: "100%",
-                  marginTop: -38,
-                  paddingRight: 15,
-                }}
-              >
-                <Ionicons
-                  name={"chevron-down"}
-                  style={{ alignSelf: "center" }}
-                  size={20}
-                  color={"#000000"}
-                />
-              </View>
-            }
-          >
-            {timeZoneItems}
-          </Picker>
-        </View>
-      </View>
       <View style={styles.card}>
         <Text style={styles.cardTitle} marginB-14>
           Color Preference
@@ -337,15 +303,92 @@ const MyProfile = () => {
             </View>
           </TouchableOpacity>
         </View>
+        <View row spread marginT-10>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.navy}>
+              {selectedColor == colorMap.navy && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.red}>
+              {selectedColor == colorMap.red && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.gray)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.gray}>
+              {selectedColor == colorMap.gray && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.yellow)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.yellow}>
+              {selectedColor == colorMap.yellow && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.sky)}>
+            <View style={styles.colorBox} backgroundColor={colorMap.sky}>
+              {selectedColor == colorMap.sky && (
+                <AntDesign name="check" size={30} color="white" />
+              )}
+            </View>
+          </TouchableOpacity>
+        </View>
       </View>
-      <Button
-        size="large"
-        backgroundColor="#ff1637"
-        label="Delete Profile"
-        style={{ marginTop: 10 }}
-        labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
+      
+      <View style={styles.card}>
+        <Text style={styles.subTit}>Settings</Text>
+        <Text style={styles.jakarta12}>Time Zone</Text>
+        <View style={styles.viewPicker}>
+          <Picker
+            value={timeZone}
+            onChange={(item) => setTimeZone(item as string)}
+            showSearch
+            floatingPlaceholder
+            style={styles.inViewPicker}
+            trailingAccessory={
+              <View
+                style={{
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%",
+                  marginTop: -38,
+                  paddingRight: 15,
+                }}
+              >
+                <Ionicons
+                  name={"chevron-down"}
+                  style={{ alignSelf: "center" }}
+                  size={20}
+                  color={"#000000"}
+                />
+              </View>
+            }
+          >
+            {timeZoneItems}
+          </Picker>
+        </View>
+      </View>
+      <TouchableOpacity
         onPress={handleShowDeleteDialog}
-      />
+        style={{ marginTop: 10, alignSelf: "center" }}
+      >
+        <Text
+          style={{
+            color: "#ff1637",
+            fontFamily: "PlusJakartaSans_500Medium",
+            fontSize: 15,
+          }}
+        >
+          Delete Profile
+        </Text>
+      </TouchableOpacity>
       <DeleteProfileDialogs
         onFirstYes={() => {
           setShowDeleteDialog(false);
diff --git a/components/pages/settings/user_settings_views/UpdateUserDialog.tsx b/components/pages/settings/user_settings_views/UpdateUserDialog.tsx
index eaa8807..b6fe5fa 100644
--- a/components/pages/settings/user_settings_views/UpdateUserDialog.tsx
+++ b/components/pages/settings/user_settings_views/UpdateUserDialog.tsx
@@ -1,383 +1,462 @@
-import {Button, Colors, Dialog, Image, Picker, Text, TextField, View} from "react-native-ui-lib";
-import {UserProfile} from "@/hooks/firebase/types/profileTypes";
-import {Dimensions, ScrollView, StyleSheet, TouchableOpacity} from "react-native";
-import {colorMap} from "@/constants/colorMap";
+import {
+  Button,
+  Colors,
+  Dialog,
+  Image,
+  Picker,
+  Text,
+  TextField,
+  View,
+} from "react-native-ui-lib";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
+import {
+  Dimensions,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import { colorMap } from "@/constants/colorMap";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import {AntDesign} from "@expo/vector-icons";
-import React, {useState} from "react";
+import { AntDesign } from "@expo/vector-icons";
+import React, { useState } from "react";
 import * as Localization from "expo-localization";
 import * as ImagePicker from "expo-image-picker";
-import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
-import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture";
+import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
+import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
 import * as tz from "tzdata";
-import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
-import {useUpdateSubUser} from "@/hooks/firebase/useUpdateSubUser";
+import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
+import { useUpdateSubUser } from "@/hooks/firebase/useUpdateSubUser";
 
 type Props = {
-    open: boolean,
-    handleClose: Function,
-    profileData: UserProfile
-}
-const UpdateUserDialog = ({open, handleClose, profileData} : Props) => {
-    const [timeZone, setTimeZone] = useState<string>(
-        profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
-    );
-    const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
-    const [firstName, setFirstName] = useState<string>(
-        profileData?.firstName || ""
-    );
-    const [profileImage, setProfileImage] = useState<
-        string | ImagePicker.ImagePickerAsset | null
-    >(profileData?.pfp || null);
+  open: boolean;
+  handleClose: Function;
+  profileData: UserProfile;
+};
+const UpdateUserDialog = ({ open, handleClose, profileData }: Props) => {
+  const [timeZone, setTimeZone] = useState<string>(
+    profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
+  );
+  const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
+  const [firstName, setFirstName] = useState<string>(
+    profileData?.firstName || ""
+  );
+  const [profileImage, setProfileImage] = useState<
+    string | ImagePicker.ImagePickerAsset | null
+  >(profileData?.pfp || null);
 
-    const [selectedColor, setSelectedColor] = useState<string>(
-        profileData?.eventColor ?? colorMap.pink
-    );
+  const [selectedColor, setSelectedColor] = useState<string>(
+    profileData?.eventColor ?? colorMap.pink
+  );
 
-    const { mutateAsync: updateUserData } = useUpdateUserData();
-    const { mutateAsync: updateSubUser} = useUpdateSubUser();
-    const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
+  const { mutateAsync: updateUserData } = useUpdateUserData();
+  const { mutateAsync: updateSubUser } = useUpdateSubUser();
+  const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
 
-    const handleUpdateUserData = async () => {
-        await updateSubUser({ userProfile: {...profileData, firstName, lastName, timeZone, eventColor: selectedColor } });
-        handleClose();
-    };
+  const handleUpdateUserData = async () => {
+    await updateSubUser({
+      userProfile: {
+        ...profileData,
+        firstName,
+        lastName,
+        timeZone,
+        eventColor: selectedColor,
+      },
+    });
+    handleClose();
+  };
 
-    const pickImage = async () => {
-        const permissionResult =
-            await ImagePicker.requestMediaLibraryPermissionsAsync();
-        if (!permissionResult.granted) {
-            alert("Permission to access camera roll is required!");
-            return;
-        }
+  const pickImage = async () => {
+    const permissionResult =
+      await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!permissionResult.granted) {
+      alert("Permission to access camera roll is required!");
+      return;
+    }
 
-        const result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: ImagePicker.MediaTypeOptions.Images,
-            allowsEditing: true,
-            aspect: [1, 1],
-            quality: 1,
-        });
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
 
-        if (!result.canceled) {
-            setProfileImage(result.assets[0].uri);
-            await changeProfilePicture(result.assets[0]);
-        }
-    };
+    if (!result.canceled) {
+      setProfileImage(result.assets[0].uri);
+      await changeProfilePicture(result.assets[0]);
+    }
+  };
 
-    const handleClearImage = async () => {
-        await updateUserData({ newUserData: { pfp: null } });
-        setProfileImage(null);
-    };
+  const handleClearImage = async () => {
+    await updateUserData({ newUserData: { pfp: null } });
+    setProfileImage(null);
+  };
 
-    const pfpUri =
-        profileImage && typeof profileImage === "object" && "uri" in profileImage
-            ? profileImage.uri
-            : profileImage;
+  const pfpUri =
+    profileImage && typeof profileImage === "object" && "uri" in profileImage
+      ? profileImage.uri
+      : profileImage;
 
-    const handleChangeColor = (color: string) => {
-        setSelectedColor(color);
-    };
+  const handleChangeColor = (color: string) => {
+    setSelectedColor(color);
+  };
 
-    const {width} = Dimensions.get("screen");
-    return (
-        <Dialog
-            visible={open}
-            height={"90%"}
-            width={width}
-            panDirection={PanningDirectionsEnum.DOWN}
-            center
-            onDismiss={() => handleClose}
-            containerStyle={{
-                borderRadius: 10,
-                backgroundColor: "white",
-                alignSelf: "stretch",
-                padding: 0,
-                paddingTop: 4,
-                margin: 0
-            }}
+  const { width } = Dimensions.get("screen");
+  return (
+    <Dialog
+      visible={open}
+      height={"90%"}
+      width={width}
+      panDirection={PanningDirectionsEnum.DOWN}
+      center
+      onDismiss={() => handleClose}
+      containerStyle={{
+        borderRadius: 10,
+        backgroundColor: "white",
+        alignSelf: "stretch",
+        padding: 0,
+        paddingTop: 4,
+        margin: 0,
+      }}
+    >
+      <ScrollView style={{ flex: 1, display: "flex" }}>
+        <View style={styles.dialogContent}>
+          <View>
+            <Text style={styles.title}>Update Profile</Text>
+          </View>
+          <View row spread paddingH-15 centerV marginV-15>
+            <TouchableOpacity onPress={pickImage}>
+              {pfpUri ? (
+                <Image
+                  key={pfpUri}
+                  style={styles.pfp}
+                  source={pfpUri ? { uri: pfpUri } : null}
+                />
+              ) : (
+                <View
+                  center
+                  style={{
+                    aspectRatio: 1,
+                    width: 65.54,
+                    backgroundColor: profileData?.eventColor ?? colorMap.pink,
+                    borderRadius: 20,
+                  }}
+                >
+                  <Text style={styles.pfpTxt}>
+                    {profileData?.firstName?.at(0)}
+                    {profileData?.lastName?.at(0)}
+                  </Text>
+                </View>
+              )}
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={pickImage}>
+              <Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
+                {profileData?.pfp ? "Change" : "Add"} Photo
+              </Text>
+            </TouchableOpacity>
+
+            {profileData?.pfp && (
+              <TouchableOpacity onPress={handleClearImage}>
+                <Text style={styles.photoSet}>Remove Photo</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+          <View paddingH-15>
+            <Text text80 marginT-10 marginB-7 style={styles.label}>
+              First name
+            </Text>
+            <TextField
+              text70
+              placeholder="First name"
+              style={styles.txtBox}
+              value={firstName}
+              onChangeText={async (value) => {
+                setFirstName(value);
+              }}
+            />
+            <Text text80 marginT-10 marginB-7 style={styles.label}>
+              Last name
+            </Text>
+            <TextField
+              text70
+              placeholder="Last name"
+              style={styles.txtBox}
+              value={lastName}
+              onChangeText={async (value) => {
+                setLastName(value);
+              }}
+            />
+            <Text text80 marginT-10 marginB-7 style={styles.label}>
+              Email address
+            </Text>
+            <TextField
+              editable={false}
+              text70
+              placeholder="Email address"
+              value={profileData?.email?.toString()}
+              style={styles.txtBox}
+            />
+          </View>
+          <View paddingH-15 marginT-15>
+            <Text style={styles.subTit}>Settings</Text>
+            <Text style={styles.jakarta12}>Time Zone</Text>
+            <View style={styles.viewPicker}>
+              <Picker
+                value={timeZone}
+                onChange={(item) => setTimeZone(item as string)}
+                showSearch
+                floatingPlaceholder
+                style={styles.inViewPicker}
+                trailingAccessory={
+                  <View
+                    style={{
+                      justifyContent: "center",
+                      alignItems: "center",
+                      height: "100%",
+                      marginTop: -38,
+                      paddingRight: 15,
+                    }}
+                  >
+                    <Ionicons
+                      name={"chevron-down"}
+                      style={{ alignSelf: "center" }}
+                      size={20}
+                      color={"#000000"}
+                    />
+                  </View>
+                }
+              >
+                {timeZoneItems}
+              </Picker>
+            </View>
+          </View>
+          <View paddingH-15 marginT-15 style={{ display: "flex", flexGrow: 1 }}>
+            <Text style={styles.cardTitle} marginB-14>
+              Color Preference
+            </Text>
+            <View row spread>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.pink)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.pink}>
+                  {selectedColor == colorMap.pink && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.orange)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.orange}>
+                  {selectedColor == colorMap.orange && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.green)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.green}>
+                  {selectedColor == colorMap.green && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.teal)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.teal}>
+                  {selectedColor == colorMap.teal && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.purple)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.purple}>
+                  {selectedColor == colorMap.purple && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+            </View>
+            <View row spread marginT-10>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.navy)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.navy}>
+                  {selectedColor == colorMap.navy && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
+                <View style={styles.colorBox} backgroundColor={colorMap.red}>
+                  {selectedColor == colorMap.red && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.gray)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.gray}>
+                  {selectedColor == colorMap.gray && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => handleChangeColor(colorMap.yellow)}
+              >
+                <View style={styles.colorBox} backgroundColor={colorMap.yellow}>
+                  {selectedColor == colorMap.yellow && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity onPress={() => handleChangeColor(colorMap.sky)}>
+                <View style={styles.colorBox} backgroundColor={colorMap.sky}>
+                  {selectedColor == colorMap.sky && (
+                    <AntDesign name="check" size={30} color="white" />
+                  )}
+                </View>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+        <View
+          row
+          center
+          style={{
+            display: "flex",
+            gap: 10,
+            alignItems: "flex-end",
+            marginTop: 10,
+          }}
         >
-            <ScrollView style={{ flex: 1, display: 'flex' }}>
-                <View style={styles.dialogContent}>
-                    <View>
-                        <Text style={styles.title}>Update Profile</Text>
-                    </View>
-                    <View row spread paddingH-15 centerV marginV-15>
-                        <TouchableOpacity onPress={pickImage}>
-                            {pfpUri ? (
-                                <Image
-                                    key={pfpUri}
-                                    style={styles.pfp}
-                                    source={pfpUri ? { uri: pfpUri } : null}
-                                />
-                            ) : (
-                                <View
-                                    center
-                                    style={{
-                                        aspectRatio: 1,
-                                        width: 65.54,
-                                        backgroundColor: profileData?.eventColor ?? colorMap.pink,
-                                        borderRadius: 20,
-                                    }}
-                                >
-                                    <Text style={styles.pfpTxt}>
-                                        {profileData?.firstName?.at(0)}
-                                        {profileData?.lastName?.at(0)}
-                                    </Text>
-                                </View>
-                            )}
-                        </TouchableOpacity>
-
-                        <TouchableOpacity onPress={pickImage}>
-                            <Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
-                                {profileData?.pfp ? "Change" : "Add"} Photo
-                            </Text>
-                        </TouchableOpacity>
-
-                        {profileData?.pfp && (
-                            <TouchableOpacity onPress={handleClearImage}>
-                                <Text style={styles.photoSet}>Remove Photo</Text>
-                            </TouchableOpacity>
-                        )}
-                    </View>
-                    <View paddingH-15>
-                        <Text text80 marginT-10 marginB-7 style={styles.label}>
-                            First name
-                        </Text>
-                        <TextField
-                            text70
-                            placeholder="First name"
-                            style={styles.txtBox}
-                            value={firstName}
-                            onChangeText={async (value) => {
-                                setFirstName(value);
-                            }}
-                        />
-                        <Text text80 marginT-10 marginB-7 style={styles.label}>
-                            Last name
-                        </Text>
-                        <TextField
-                            text70
-                            placeholder="Last name"
-                            style={styles.txtBox}
-                            value={lastName}
-                            onChangeText={async (value) => {
-                                setLastName(value);
-                            }}
-                        />
-                        <Text text80 marginT-10 marginB-7 style={styles.label}>
-                            Email address
-                        </Text>
-                        <TextField
-                            editable={false}
-                            text70
-                            placeholder="Email address"
-                            value={profileData?.email?.toString()}
-                            style={styles.txtBox}
-                        />
-                    </View>
-                    <View paddingH-15 marginT-15>
-                        <Text style={styles.subTit}>Settings</Text>
-                        <Text style={styles.jakarta12}>Time Zone</Text>
-                        <View style={styles.viewPicker}>
-                            <Picker
-                                value={timeZone}
-                                onChange={(item) => setTimeZone(item as string)}
-                                showSearch
-                                floatingPlaceholder
-                                style={styles.inViewPicker}
-                                trailingAccessory={
-                                    <View
-                                        style={{
-                                            justifyContent: "center",
-                                            alignItems: "center",
-                                            height: "100%",
-                                            marginTop: -38,
-                                            paddingRight: 15,
-                                        }}
-                                    >
-                                        <Ionicons
-                                            name={"chevron-down"}
-                                            style={{ alignSelf: "center" }}
-                                            size={20}
-                                            color={"#000000"}
-                                        />
-                                    </View>
-                                }
-                            >
-                                {timeZoneItems}
-                            </Picker>
-                        </View>
-                    </View>
-                    <View paddingH-15 marginT-15 style={{ display: 'flex', flexGrow: 1}}>
-                        <Text style={styles.cardTitle} marginB-14>
-                            Color Preference
-                        </Text>
-                        <View row spread>
-                            <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
-                                <View style={styles.colorBox} backgroundColor={colorMap.pink}>
-                                    {selectedColor == colorMap.pink && (
-                                        <AntDesign name="check" size={30} color="white" />
-                                    )}
-                                </View>
-                            </TouchableOpacity>
-                            <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
-                                <View style={styles.colorBox} backgroundColor={colorMap.orange}>
-                                    {selectedColor == colorMap.orange && (
-                                        <AntDesign name="check" size={30} color="white" />
-                                    )}
-                                </View>
-                            </TouchableOpacity>
-                            <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
-                                <View style={styles.colorBox} backgroundColor={colorMap.green}>
-                                    {selectedColor == colorMap.green && (
-                                        <AntDesign name="check" size={30} color="white" />
-                                    )}
-                                </View>
-                            </TouchableOpacity>
-                            <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
-                                <View style={styles.colorBox} backgroundColor={colorMap.teal}>
-                                    {selectedColor == colorMap.teal && (
-                                        <AntDesign name="check" size={30} color="white" />
-                                    )}
-                                </View>
-                            </TouchableOpacity>
-                            <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
-                                <View style={styles.colorBox} backgroundColor={colorMap.purple}>
-                                    {selectedColor == colorMap.purple && (
-                                        <AntDesign name="check" size={30} color="white" />
-                                    )}
-                                </View>
-                            </TouchableOpacity>
-                        </View>
-                    </View>
-                </View>
-                <View row center style={{
-                    display: 'flex',
-                    gap: 10,
-                    alignItems: "flex-end",
-                    marginTop: 50
-                }}>
-                    <Button
-                        style={{
-                            backgroundColor: profileData.eventColor ?? colorMap.pink,
-                            justifyContent: "center",
-                        }}
-                        label="Save"
-                        onPress={handleUpdateUserData}
-                    />
-                    <Button
-                        style={{
-                            backgroundColor: "#9c978f",
-                            justifyContent: "center",
-                        }}
-                        label="Cancel"
-                        onPress={handleClose}
-                    />
-                </View>
-            </ScrollView>
-        </Dialog>
-    )
+          <Button
+            style={{
+              backgroundColor: profileData.eventColor ?? colorMap.pink,
+              justifyContent: "center",
+            }}
+            label="Save"
+            onPress={handleUpdateUserData}
+          />
+          <Button
+            style={{
+              backgroundColor: "#9c978f",
+              justifyContent: "center",
+            }}
+            label="Cancel"
+            onPress={handleClose}
+          />
+        </View>
+      </ScrollView>
+    </Dialog>
+  );
 };
 
 const timeZoneItems = Object.keys(tz.zones)
-    .sort()
-    .map((zone) => (
-        <Picker.Item
-            key={zone}
-            label={zone.replace("/", " / ").replace("_", " ")}
-            value={zone}
-        />
-    ));
+  .sort()
+  .map((zone) => (
+    <Picker.Item
+      key={zone}
+      label={zone.replace("/", " / ").replace("_", " ")}
+      value={zone}
+    />
+  ));
 
 const styles = StyleSheet.create({
-    dialogContent: {
-        paddingHorizontal: 10,
-        paddingTop: 10,
-        paddingBottom: 10,
-        flexGrow: 1
-    },
-    cardTitle: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 15,
-    },
-    colorBox: {
-        aspectRatio: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        width: 51,
-        borderRadius: 12,
-    },
-    card: {
-        marginVertical: 15,
-        backgroundColor: "white",
-        width: "100%",
-        borderRadius: 12,
-        paddingHorizontal: 20,
-        paddingVertical: 21,
-    },
-    pfpTxt: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 30,
-        color: "white",
-    },
-    pfp: {
-        aspectRatio: 1,
-        width: 65.54,
-        backgroundColor: "gray",
-        borderRadius: 20,
-    },
-    txtBox: {
-        backgroundColor: "#fafafa",
-        borderRadius: 50,
-        borderWidth: 2,
-        borderColor: "#cecece",
-        padding: 15,
-        height: 45,
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 13,
-    },
-    subTit: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 15,
-    },
-    title: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 20
-    },
-    label: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 12,
-        color: "#a1a1a1",
-    },
-    photoSet: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 13.07,
-    },
-    jakarta12: {
-        paddingVertical: 10,
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 12,
-        color: "#a1a1a1",
-    },
-    viewPicker: {
-        borderRadius: 50,
-        backgroundColor: Colors.grey80,
-        marginBottom: 16,
-        borderColor: Colors.grey50,
-        borderWidth: 1,
-        marginTop: 0,
-        height: 40,
-        zIndex: 10,
-    },
-    inViewPicker: {
-        borderRadius: 50,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        marginBottom: 16,
-        marginTop: -20,
-        height: 40,
-        zIndex: 10,
-    },
+  dialogContent: {
+    paddingHorizontal: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+    flexGrow: 1,
+  },
+  cardTitle: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  colorBox: {
+    aspectRatio: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    width: 51,
+    borderRadius: 12,
+  },
+  card: {
+    marginVertical: 15,
+    backgroundColor: "white",
+    width: "100%",
+    borderRadius: 12,
+    paddingHorizontal: 20,
+    paddingVertical: 21,
+  },
+  pfpTxt: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 30,
+    color: "white",
+  },
+  pfp: {
+    aspectRatio: 1,
+    width: 65.54,
+    backgroundColor: "gray",
+    borderRadius: 20,
+  },
+  txtBox: {
+    backgroundColor: "#fafafa",
+    borderRadius: 50,
+    borderWidth: 2,
+    borderColor: "#cecece",
+    padding: 15,
+    height: 45,
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+  },
+  subTit: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  title: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 20,
+  },
+  label: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 12,
+    color: "#a1a1a1",
+  },
+  photoSet: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13.07,
+  },
+  jakarta12: {
+    paddingVertical: 10,
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 12,
+    color: "#a1a1a1",
+  },
+  viewPicker: {
+    borderRadius: 50,
+    backgroundColor: Colors.grey80,
+    marginBottom: 16,
+    borderColor: Colors.grey50,
+    borderWidth: 1,
+    marginTop: 0,
+    height: 40,
+    zIndex: 10,
+  },
+  inViewPicker: {
+    borderRadius: 50,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    marginBottom: 16,
+    marginTop: -20,
+    height: 40,
+    zIndex: 10,
+  },
 });
 
-export default UpdateUserDialog;
\ No newline at end of file
+export default UpdateUserDialog;
diff --git a/components/pages/settings/user_settings_views/UserMenu.tsx b/components/pages/settings/user_settings_views/UserMenu.tsx
index 6de8310..5d270f2 100644
--- a/components/pages/settings/user_settings_views/UserMenu.tsx
+++ b/components/pages/settings/user_settings_views/UserMenu.tsx
@@ -11,7 +11,7 @@ import { PanningDirectionsEnum } from "react-native-ui-lib/src/components/pannin
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 import { StyleSheet } from "react-native";
-import { ProfileType } from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 
 const UserMenu = ({
   user,
@@ -22,10 +22,24 @@ const UserMenu = ({
   showQRCodeDialog: boolean;
   setShowQRCodeDialog: (value: string | boolean) => void;
 }) => {
+  const {user: currentUser} = useAuthContext();
+
   const handleShowQRCode = () => {
     setShowQRCodeDialog(user.uid!);
   };
 
+  const getQRCodeText = () => {
+    if (user.userType === ProfileType.FAMILY_DEVICE) {
+      return "Open Cally on the family device and scan the code to link it to your family group";
+    }
+    
+    if (currentUser?.uid === user.uid) {
+      return "To connect another device to your profile, open the Cally app on that device and scan this QR code.";
+    }
+    
+    return `To connect ${user.firstName}'s device to your Family Group, open the Cally app on their device and scan the QR code.`;
+  };
+
   return (
     <>
       <TouchableOpacity onPress={handleShowQRCode}>
@@ -45,9 +59,7 @@ const UserMenu = ({
             marginB-25
             style={{ fontSize: 18, fontFamily: "Manrope_500Medium" }}
           >
-            {user.userType !== ProfileType.FAMILY_DEVICE
-              ? `Open Cally on ${user.firstName}'s device and scan the code to link it to your family group`
-              : "Open Cally on the family device and scan the code to link it to your family group"}
+            {getQRCodeText()}
           </Text>
           <QRCode value={user.uid!} size={150} />
           <Button
diff --git a/constants/colorMap.ts b/constants/colorMap.ts
index f548ee8..f3d9128 100644
--- a/constants/colorMap.ts
+++ b/constants/colorMap.ts
@@ -4,4 +4,9 @@ export const colorMap = {
     green: "#46a80a",
     teal: "#05a8b6",
     purple: "#7305d4",
+    navy: '#002e42',
+    red: '#ff1637',
+    gray: '#607d8b',
+    yellow: '#ffc107',
+    sky: '#2196f3'
 };
\ No newline at end of file