diff --git a/components/pages/settings/SettingsPage.tsx b/components/pages/settings/SettingsPage.tsx
index 711fb84..234265b 100644
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@@ -43,7 +43,7 @@ const SettingsPage = () => {
       {pageIndex == 0 && (
         <View flexG centerH marginH-30 marginT-30>
           <Button
-            disabled={isntParent}
+            disabled={false}
             backgroundColor="white"
             style={styles.mainBtn}
             children={
@@ -63,7 +63,7 @@ const SettingsPage = () => {
             onPress={() => setPageIndex(1)}
           />
           <Button
-            disabled={isntParent}
+            disabled={false}
             backgroundColor="white"
             style={styles.mainBtn}
             children={
diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx
index 76d253a..649320e 100644
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@@ -169,20 +169,22 @@ const MyGroup: React.FC<MyGroupProps> = ({
                 >
                   {member.pfp ? (
                     <ImageBackground
-                    style={[
-                      styles.pfp,
-                      (member.eventColor && {
-                        borderWidth: 2,
-                        borderColor: member.eventColor,
-                      }) ||
-                        undefined,
-                    ]}
-                      borderRadius={10.56}
+                      style={[
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
                       source={{ uri: member.pfp || undefined }}
                     />
                   ) : (
                     <View
-                      style={[styles.pfp, { backgroundColor: member.eventColor || colorMap.pink }]}
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
                     />
                   )}
                   <View row marginL-10 centerV>
@@ -212,7 +214,7 @@ const MyGroup: React.FC<MyGroupProps> = ({
 
           {!!caregivers.length && (
             <View style={styles.card}>
-              <Text style={styles.subTit} marginB-10 marginT-15>
+              <Text style={styles.subTit} marginB-10>
                 Caregivers
               </Text>
               {caregivers?.map((member) => (
@@ -223,71 +225,104 @@ const MyGroup: React.FC<MyGroupProps> = ({
                   style={styles.familyCard}
                   row
                   centerV
-                  padding-10
+                  paddingT-10
                 >
-                  <Avatar
-                    source={{ uri: member?.pfp ?? undefined }}
-                    size={40}
-                    backgroundColor={Colors.grey60}
-                  />
-                  <View marginL-10>
-                    <Text text70M>
+                  {member.pfp ? (
+                    <ImageBackground
+                      style={[
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
+                      source={{ uri: member.pfp || undefined }}
+                    />
+                  ) : (
+                    <View
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
+                    />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>
                       {member.firstName} {member.lastName}
                     </Text>
-                    <Text text90 grey40>
-                      Caregiver
-                    </Text>
                   </View>
-
-                  <View flex-1 />
-
-                  <UserMenu
-                    setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                    showQRCodeDialog={showQRCodeDialog === member?.uid}
-                    user={member}
-                  />
+                  <View flexG />
+                  <View row centerV gap-10>
+                    <Text style={styles.userType}>Caregiver</Text>
+                    <UserMenu
+                      setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                      showQRCodeDialog={showQRCodeDialog === member?.uid}
+                      user={member}
+                    />
+                    {profileData?.userType === ProfileType.PARENT && (
+                      <UserOptions user={member} />
+                    )}
+                  </View>
                 </Card>
               ))}
             </View>
           )}
 
           {!!familyDevices.length && (
-            <>
-              <Text text70 marginB-10 marginT-15>
+            <View style={styles.card}>
+              <Text style={styles.subTit} marginB-10>
                 Family Devices
               </Text>
               {familyDevices?.map((member, index) => (
                 <Card
                   enableShadow={false}
                   elevation={0}
-                  key={`${member.firstName}_${member.lastName}_${index}`}
+                  key={`${member.firstName}_${index}`}
                   style={styles.familyCard}
                   row
                   centerV
-                  padding-10
+                  paddingT-10
                 >
-                  <Avatar
-                    source={{ uri: member?.pfp ?? undefined }}
-                    size={40}
-                    backgroundColor={Colors.grey60}
-                  />
-                  <View marginL-10>
-                    <Text text70M>{member.firstName}</Text>
-                    <Text text90 grey40>
-                      Family Device
-                    </Text>
+                  {member.pfp ? (
+                    <ImageBackground
+                      style={[
+                        styles.pfp,
+                        (member.eventColor && {
+                          borderWidth: 2,
+                          borderColor: member.eventColor,
+                        }) ||
+                          undefined,
+                      ]}
+                      imageStyle={{ borderRadius: 10.56 }}
+                      source={{ uri: member.pfp || undefined }}
+                    />
+                  ) : (
+                    <View
+                      style={[
+                        styles.pfp,
+                        { backgroundColor: member.eventColor || colorMap.pink },
+                      ]}
+                    />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>{member.firstName}</Text>
+                  </View>
+                  <View flexG />
+                  <View row centerV gap-10>
+                    <Text style={styles.userType}>Family Device</Text>
+                    <UserMenu
+                      setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                      showQRCodeDialog={showQRCodeDialog === member?.uid}
+                      user={member}
+                    />
+                    {profileData?.userType === ProfileType.PARENT && (
+                      <UserOptions user={member} />
+                    )}
                   </View>
-
-                  <View flex-1 />
-
-                  <UserMenu
-                    setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                    showQRCodeDialog={showQRCodeDialog === member?.uid}
-                    user={member}
-                  />
                 </Card>
               ))}
-            </>
+            </View>
           )}
         </View>
       </ScrollView>
@@ -630,7 +665,12 @@ const styles = StyleSheet.create({
     fontFamily: "PlusJakartaSans_500Medium",
     fontSize: 13,
   },
-  pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 },
+  pfp: {
+    aspectRatio: 1,
+    width: 37.03,
+    borderRadius: 10.56,
+    overflow: "hidden",
+  },
   userType: {
     fontFamily: "Manrope_500Medium",
     fontSize: 12,
diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx
index 6385b9b..1af0588 100644
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@@ -15,7 +15,7 @@ import Ionicons from "@expo/vector-icons/Ionicons";
 import * as tz from "tzdata";
 import * as Localization from "expo-localization";
 import debounce from "debounce";
-import { useAuthContext } from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
 import { colorMap } from "@/constants/colorMap";
@@ -24,9 +24,13 @@ import { AntDesign } from "@expo/vector-icons";
 import { useDeleteUser } from "@/hooks/firebase/useDeleteUser";
 import { useUpdateHouseholdName } from "@/hooks/firebase/useUpdateHouseholdName";
 import { useGetHouseholdName } from "@/hooks/firebase/useGetHouseholdName";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
+  const { data: familyMembers } = useGetFamilyMembers();
+  const [takenColors, setTakenColors] = useState<string[]>([]);
+
   const { data: hhName, refetch: refetchHHName } = useGetHouseholdName(
     profileData.familyId
   );
@@ -91,6 +95,15 @@ const MyProfile = () => {
     handleUpdateHouseholdName();
   }, [householdName]);
 
+  useEffect(() => {
+    if (familyMembers) {
+      const colors = familyMembers
+        .filter(member => member?.eventColor && member.uid !== user?.uid)
+        .map(member => member.eventColor!);
+      setTakenColors(colors);
+    }
+   }, [familyMembers]);
+
   useEffect(() => {
     if (profileData) {
       setFirstName(profileData.firstName || "");
@@ -214,18 +227,22 @@ const MyProfile = () => {
           )}
         </View>
         <View paddingH-15>
-          <Text text80 marginT-10 marginB-7 style={styles.label}>
-            Household
-          </Text>
-          <TextField
-            text70
-            placeholder="Household name"
-            style={styles.txtBox}
-            value={householdName}
-            onChangeText={async (value) => {
-              setHouseholdName(value);
-            }}
-          />
+          {profileData?.userType == ProfileType.PARENT && (
+            <>
+              <Text text80 marginT-10 marginB-7 style={styles.label}>
+                Household
+              </Text>
+              <TextField
+                text70
+                placeholder="Household name"
+                style={styles.txtBox}
+                value={householdName}
+                onChangeText={async (value) => {
+                  setHouseholdName(value);
+                }}
+              />
+            </>
+          )}
           <Text text80 marginT-10 marginB-7 style={styles.label}>
             First name
           </Text>
@@ -267,81 +284,81 @@ const MyProfile = () => {
           Color Preference
         </Text>
         <View row spread>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.pink}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.pink)} disabled={takenColors.includes(colorMap.pink)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.pink) ? 0.1 : 1}]} backgroundColor={colorMap.pink}>
               {selectedColor == colorMap.pink && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.orange}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.orange)} disabled={takenColors.includes(colorMap.orange)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.orange) ? 0.1 : 1}]} backgroundColor={colorMap.orange}>
               {selectedColor == colorMap.orange && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.green}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.green)} disabled={takenColors.includes(colorMap.green)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.green) ? 0.1 : 1}]} backgroundColor={colorMap.green}>
               {selectedColor == colorMap.green && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.teal}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.teal)} disabled={takenColors.includes(colorMap.teal)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.teal) ? 0.1 : 1}]} backgroundColor={colorMap.teal}>
               {selectedColor == colorMap.teal && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.purple}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.purple)}disabled={takenColors.includes(colorMap.purple)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.purple) ? 0.1 : 1}]} backgroundColor={colorMap.purple}>
               {selectedColor == colorMap.purple && (
-                  <AntDesign name="check" size={30} color="white" />
+                <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}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.navy)} disabled={takenColors.includes(colorMap.navy)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.navy) ? 0.1 : 1}]} backgroundColor={colorMap.navy}>
               {selectedColor == colorMap.navy && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.red}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.red)} disabled={takenColors.includes(colorMap.red)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.red) ? 0.1 : 1}]} backgroundColor={colorMap.red}>
               {selectedColor == colorMap.red && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.indigo}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.indigo)} disabled={takenColors.includes(colorMap.indigo)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.indigo) ? 0.1 : 1}]} backgroundColor={colorMap.indigo}>
               {selectedColor == colorMap.indigo && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.emerald}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.emerald)} disabled={takenColors.includes(colorMap.emerald)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.emerald) ? 0.1 : 1}]} backgroundColor={colorMap.emerald}>
               {selectedColor == colorMap.emerald && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)}>
-            <View style={styles.colorBox} backgroundColor={colorMap.violet}>
+          <TouchableOpacity onPress={() => handleChangeColor(colorMap.violet)} disabled={takenColors.includes(colorMap.violet)}>
+            <View style={[styles.colorBox, {opacity: takenColors.includes(colorMap.violet) ? 0.1 : 1}]} backgroundColor={colorMap.violet}>
               {selectedColor == colorMap.violet && (
-                  <AntDesign name="check" size={30} color="white" />
+                <AntDesign name="check" size={30} color="white" />
               )}
             </View>
           </TouchableOpacity>
         </View>
       </View>
-      
+
       <View style={styles.card}>
         <Text style={styles.subTit}>Settings</Text>
         <Text style={styles.jakarta12}>Time Zone</Text>
diff --git a/components/pages/todos/ToDosList.tsx b/components/pages/todos/ToDosList.tsx
index 19f1191..9c4be7e 100644
--- a/components/pages/todos/ToDosList.tsx
+++ b/components/pages/todos/ToDosList.tsx
@@ -7,9 +7,9 @@ import {AntDesign} from "@expo/vector-icons";
 import {IToDo} from "@/hooks/firebase/types/todoData";
 import DropdownIcon from "@/assets/svgs/DropdownIcon";
 import {Dropdown} from "react-native-element-dropdown";
-import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
 import {StyleSheet} from "react-native";
+import {UserProfile} from "@/hooks/firebase/types/profileTypes";
 
 const FILTER_OPTIONS = {
     ME: "Me",
@@ -108,13 +108,11 @@ const resolveFilterOptions = (members, user) => {
     return options;
 }
 
-const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
+const ToDosList = ({ isSettings, members }: { isSettings?: boolean, members?: Array<UserProfile> }) => {
   const { toDos } = useToDosContext();
 
   const [groupedToDos, setGroupedToDos] = useState([]);
   const { user } = useAuthContext()
-  const { data: members } = useGetFamilyMembers();
-
 
   const [expandedGroups, setExpandedGroups] = useState<{
     [key: string]: boolean;
@@ -130,7 +128,7 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
 
       let selectedOption = options?.find((option) => option.value === user?.uid);
       setSelectedFilter(selectedOption);
-  }, []);
+  }, [members]);
 
   useEffect(() => {
       if (toDos && selectedFilter) {
diff --git a/components/pages/todos/ToDosPage.tsx b/components/pages/todos/ToDosPage.tsx
index 6c88672..da997ff 100644
--- a/components/pages/todos/ToDosPage.tsx
+++ b/components/pages/todos/ToDosPage.tsx
@@ -11,11 +11,14 @@ import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
 import UserChoresProgress from "./user-chores/UserChoresProgress";
 import { useAtom } from "jotai";
 import { toDosPageIndex } from "../calendar/atoms";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 
 const ToDosPage = () => {
   const { profileData } = useAuthContext();
   const [pageIndex, setPageIndex] = useAtom(toDosPageIndex);
 
+    const { data: members } = useGetFamilyMembers();
+
   const { width, height } = Dimensions.get("screen");
   const pageLink = (
     <TouchableOpacity onPress={() => setPageIndex(1)}>
@@ -65,7 +68,7 @@ const ToDosPage = () => {
                     />
                   </View>
                 )}
-                <ToDosList />
+                <ToDosList members={members} />
               </View>
             </View>
           )}