diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 31de7c7..3f470fe 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -23,9 +23,16 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
+import { useAtom } from "jotai";
+import {
+  settingsPageIndex,
+  userSettingsView,
+} from "@/components/pages/calendar/atoms";
 
 export default function TabLayout() {
   const { mutateAsync: signOut } = useSignOut();
+  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
+  const [userView, setUserView] = useAtom(userSettingsView);
 
   return (
     <Drawer
@@ -66,14 +73,22 @@ export default function TabLayout() {
                   title={"Calendar"}
                   color="rgb(7, 184, 199)"
                   bgColor={"rgb(231, 248, 250)"}
-                  pressFunc={() => props.navigation.navigate("calendar")}
+                  pressFunc={() => {
+                    props.navigation.navigate("calendar");
+                    setPageIndex(0);
+                    setUserView(true);
+                  }}
                   icon={<NavCalendarIcon />}
                 />
                 <DrawerButton
                   color="#50be0c"
                   title={"Groceries"}
                   bgColor={"#eef9e7"}
-                  pressFunc={() => props.navigation.navigate("grocery")}
+                  pressFunc={() => {
+                    props.navigation.navigate("grocery");
+                    setPageIndex(0);
+                    setUserView(true);
+                  }}
                   icon={<NavGroceryIcon />}
                 />
               </View>
@@ -95,21 +110,33 @@ export default function TabLayout() {
                   color="#8005eb"
                   title={"To Do's"}
                   bgColor={"#f3e6fd"}
-                  pressFunc={() => props.navigation.navigate("todos")}
+                  pressFunc={() => {
+                    props.navigation.navigate("todos");
+                    setPageIndex(0);
+                    setUserView(true);
+                  }}
                   icon={<NavToDosIcon />}
                 />
                 <DrawerButton
                   color="#e0ca03"
                   title={"Brain Dump"}
                   bgColor={"#fffacb"}
-                  pressFunc={() => props.navigation.navigate("brain_dump")}
+                  pressFunc={() => {
+                    props.navigation.navigate("brain_dump");
+                    setPageIndex(0);
+                    setUserView(true);
+                  }}
                   icon={<NavBrainDumpIcon />}
                 />
                 {/*<DrawerItem label="Logout" onPress={() => signOut()} />*/}
               </View>
             </View>
             <Button
-              onPress={() => props.navigation.navigate("settings")}
+              onPress={() => {
+                props.navigation.navigate("settings");
+                setPageIndex(0);
+                setUserView(true);
+              }}
               label={"Manage Settings"}
               labelStyle={styles.label}
               iconSource={() => (
diff --git a/components/pages/calendar/CalendarHeader.tsx b/components/pages/calendar/CalendarHeader.tsx
index e8830da..403e63f 100644
--- a/components/pages/calendar/CalendarHeader.tsx
+++ b/components/pages/calendar/CalendarHeader.tsx
@@ -1,125 +1,130 @@
-import React, {memo} from "react";
-import {Button, Picker, PickerModes, SegmentedControl, Text, View,} from "react-native-ui-lib";
-import {MaterialIcons} from "@expo/vector-icons";
-import {modeMap, months} from "./constants";
-import {StyleSheet} from "react-native";
-import {useAtom} from "jotai";
-import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
-import {isSameDay} from "date-fns";
-import {useAuthContext} from "@/contexts/AuthContext";
+import React, { memo } from "react";
+import {
+  Button,
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { MaterialIcons } from "@expo/vector-icons";
+import { modeMap, months } from "./constants";
+import { StyleSheet } from "react-native";
+import { useAtom } from "jotai";
+import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
+import { format, isSameDay } from "date-fns";
+import { useAuthContext } from "@/contexts/AuthContext";
 
 export const CalendarHeader = memo(() => {
-    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
-    const [mode, setMode] = useAtom(modeAtom);
-    const {profileData} = useAuthContext();
+  const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+  const [mode, setMode] = useAtom(modeAtom);
+  const { profileData } = useAuthContext();
 
-    const handleSegmentChange = (index: number) => {
-        const selectedMode = modeMap.get(index);
-        if (selectedMode) {
-            setTimeout(() => {
-                setMode(selectedMode as "day" | "week" | "month");
-            }, 150);
-        }
-    };
+  const handleSegmentChange = (index: number) => {
+    const selectedMode = modeMap.get(index);
+    if (selectedMode) {
+      setTimeout(() => {
+        setMode(selectedMode as "day" | "week" | "month");
+      }, 150);
+    }
+  };
 
-    const handleMonthChange = (month: string) => {
-        const currentDay = selectedDate.getDate();
-        const currentYear = selectedDate.getFullYear();
-        const newMonthIndex = months.indexOf(month);
+  const handleMonthChange = (month: string) => {
+    const currentDay = selectedDate.getDate();
+    const currentYear = selectedDate.getFullYear();
+    const newMonthIndex = months.indexOf(month);
 
-        const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
-        setSelectedDate(updatedDate);
-    };
+    const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
+    setSelectedDate(updatedDate);
+  };
 
-    const isSelectedDateToday = isSameDay(selectedDate, new Date());
+  const isSelectedDateToday = isSameDay(selectedDate, new Date());
 
-    return (
-        <View
-            style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                paddingHorizontal: 10,
-                paddingVertical: 8,
-                borderRadius: 20,
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                backgroundColor: "white",
-                marginBottom: 10,
-            }}
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        backgroundColor: "white",
+        marginBottom: 10,
+      }}
+    >
+      <View row centerV gap-3>
+        <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
+          {selectedDate.getFullYear()}
+        </Text>
+        <Picker
+          value={months[selectedDate.getMonth()]}
+          placeholder={"Select Month"}
+          style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
+          mode={PickerModes.SINGLE}
+          onChange={(itemValue) => handleMonthChange(itemValue as string)}
+          trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
+          topBarProps={{
+            title: selectedDate.getFullYear().toString(),
+            titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
+          }}
         >
-            <View row centerV gap-3>
-                <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
-                    {selectedDate.getFullYear()}
-                </Text>
-                <Picker
-                    value={months[selectedDate.getMonth()]}
-                    placeholder={"Select Month"}
-                    style={{fontFamily: "Manrope_500Medium", fontSize: 17, width: 85}}
-                    mode={PickerModes.SINGLE}
-                    onChange={(itemValue) => handleMonthChange(itemValue as string)}
-                    trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
-                    topBarProps={{
-                        title: selectedDate.getFullYear().toString(),
-                        titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
-                    }}
-                >
-                    {months.map((month) => (
-                        <Picker.Item key={month} label={month} value={month}/>
-                    ))}
-                </Picker>
-            </View>
+          {months.map((month) => (
+            <Picker.Item key={month} label={month} value={month} />
+          ))}
+        </Picker>
+      </View>
 
-            <View row centerV>
-                {!isSelectedDateToday && (
-                    <Button
-                        size={"xSmall"}
-                        marginR-0
-                        avoidInnerPadding
-                        style={{
-                            borderRadius: 50,
-                            backgroundColor: "white",
-                            borderWidth: 0.7,
-                            borderColor: "#dadce0",
-                            height: 30,
-                            paddingHorizontal: 10
-                        }}
-                        labelStyle={{
-                            fontSize: 12,
-                            color: "black",
-                            fontFamily: "Manrope_500Medium",
-                        }}
-                        label={new Date().toLocaleDateString("en-US", {
-                            timeZone: profileData?.timeZone || "",
-                        })}
-                        onPress={() => {
-                            setSelectedDate(new Date());
-                        }}
-                    />
-                )}
+      <View row centerV>
+        {!isSelectedDateToday && (
+          <Button
+            size={"xSmall"}
+            marginR-0
+            avoidInnerPadding
+            style={{
+              borderRadius: 50,
+              backgroundColor: "white",
+              borderWidth: 0.7,
+              borderColor: "#dadce0",
+              height: 30,
+              paddingHorizontal: 10,
+            }}
+            labelStyle={{
+              fontSize: 12,
+              color: "black",
+              fontFamily: "Manrope_500Medium",
+            }}
+            label={format(new Date(), "dd/MM/yyyy")}
+            onPress={() => {
+              setSelectedDate(new Date());
+            }}
+          />
+        )}
 
-                <View>
-                    <SegmentedControl
-                        segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
-                        backgroundColor="#ececec"
-                        inactiveColor="#919191"
-                        activeBackgroundColor="#ea156c"
-                        activeColor="white"
-                        outlineColor="white"
-                        outlineWidth={3}
-                        segmentLabelStyle={styles.segmentslblStyle}
-                        onChangeIndex={handleSegmentChange}
-                        initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
-                    />
-                </View>
-            </View>
+        <View>
+          <SegmentedControl
+            segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
+            backgroundColor="#ececec"
+            inactiveColor="#919191"
+            activeBackgroundColor="#ea156c"
+            activeColor="white"
+            outlineColor="white"
+            outlineWidth={3}
+            segmentLabelStyle={styles.segmentslblStyle}
+            onChangeIndex={handleSegmentChange}
+            initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
+          />
         </View>
-    );
+      </View>
+    </View>
+  );
 });
 
 const styles = StyleSheet.create({
-    segmentslblStyle: {
-        fontSize: 12,
-        fontFamily: "Manrope_600SemiBold",
-    },
+  segmentslblStyle: {
+    fontSize: 12,
+    fontFamily: "Manrope_600SemiBold",
+  },
 });
diff --git a/components/pages/calendar/EventCalendar.tsx b/components/pages/calendar/EventCalendar.tsx
index 62d60a4..43fc1c3 100644
--- a/components/pages/calendar/EventCalendar.tsx
+++ b/components/pages/calendar/EventCalendar.tsx
@@ -1,255 +1,276 @@
-import React, {useCallback, useEffect, useMemo, useState} from "react";
-import {Calendar} from "react-native-big-calendar";
-import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
-import {useAtom, useSetAtom} from "jotai";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Calendar } from "react-native-big-calendar";
+import { ActivityIndicator, StyleSheet, View, ViewStyle } from "react-native";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
+import { useAtom, useSetAtom } from "jotai";
 import {
-    editVisibleAtom,
-    eventForEditAtom,
-    modeAtom,
-    selectedDateAtom,
-    selectedNewEventDateAtom,
+  editVisibleAtom,
+  eventForEditAtom,
+  modeAtom,
+  selectedDateAtom,
+  selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {CalendarEvent} from "@/components/pages/calendar/interfaces";
-import {Text} from "react-native-ui-lib";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { CalendarEvent } from "@/components/pages/calendar/interfaces";
+import { Text } from "react-native-ui-lib";
 
 interface EventCalendarProps {
-    calendarHeight: number;
-    // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
-    calendarWidth: number;
+  calendarHeight: number;
+  // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
+  calendarWidth: number;
 }
 
 const getTotalMinutes = () => {
-    const date = new Date();
-    return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
+  const date = new Date();
+  return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
 };
 
 export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
-    ({calendarHeight}) => {
-        const {data: events, isLoading} = useGetEvents();
-        const {profileData} = useAuthContext();
-        const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
-        const [mode, setMode] = useAtom(modeAtom);
+  ({ calendarHeight }) => {
+    const { data: events, isLoading } = useGetEvents();
+    const { profileData } = useAuthContext();
+    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+    const [mode, setMode] = useAtom(modeAtom);
 
-        const setEditVisible = useSetAtom(editVisibleAtom);
-        const setEventForEdit = useSetAtom(eventForEditAtom);
-        const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
+    const setEditVisible = useSetAtom(editVisibleAtom);
+    const setEventForEdit = useSetAtom(eventForEditAtom);
+    const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
-        const [isRendering, setIsRendering] = useState(true);
-        const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
+    const [isRendering, setIsRendering] = useState(true);
+    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
-        const todaysDate = new Date()
+    const todaysDate = new Date();
 
-        useEffect(() => {
-            if (events && mode) {
-                setIsRendering(true);
-                const timeout = setTimeout(() => {
-                    setIsRendering(false);
-                }, 300);
-                return () => clearTimeout(timeout);
-            }
-        }, [events, mode]);
+    useEffect(() => {
+      if (events && mode) {
+        setIsRendering(true);
+        const timeout = setTimeout(() => {
+          setIsRendering(false);
+        }, 300);
+        return () => clearTimeout(timeout);
+      }
+    }, [events, mode]);
 
-        const handlePressEvent = useCallback(
-            (event: CalendarEvent) => {
-                if (mode === "day" || mode === "week") {
-                    setEditVisible(true);
-                    console.log({event});
-                    setEventForEdit(event);
-                } else {
-                    setMode("day");
-                    setSelectedDate(event.start);
-                }
-            },
-            [setEditVisible, setEventForEdit, mode]
-        );
-
-        const handlePressCell = useCallback(
-            (date: Date) => {
-                if (mode === "day" || mode === "week") {
-                    setSelectedNewEndDate(date);
-                } else {
-                    setMode("day");
-                    setSelectedDate(date);
-                }
-            },
-            [mode, setSelectedNewEndDate, setSelectedDate]
-        );
-
-        const handleSwipeEnd = useCallback(
-            (date: Date) => {
-                setSelectedDate(date);
-            },
-            [setSelectedDate]
-        );
-
-        const memoizedEventCellStyle = useCallback(
-            (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
-            []
-        );
-
-        const memoizedWeekStartsOn = useMemo(
-            () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
-            [profileData]
-        );
-
-        const isSameDate = useCallback((date1: Date, date2: Date) => {
-            return (
-                date1.getDate() === date2.getDate() &&
-                date1.getMonth() === date2.getMonth() &&
-                date1.getFullYear() === date2.getFullYear()
-            );
-        }, []);
-
-        const dayHeaderColor = useMemo(() => {
-            return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
-        }, [selectedDate, mode]);
-
-        const dateStyle = useMemo(() => {
-            if (mode === "week") return undefined
-            return isSameDate(todaysDate, selectedDate) && mode === "day"
-                ? styles.dayHeader
-                : styles.otherDayHeader;
-        }, [selectedDate, mode]);
-
-        const memoizedHeaderContentStyle = useMemo(() => {
-            if (mode === "day") {
-                return styles.dayModeHeader;
-            } else if (mode === "week") {
-                return styles.weekModeHeader;
-            } else if (mode === "month") {
-                return styles.monthModeHeader;
-            } else {
-                return {};
-            }
-        }, [mode]);
-
-        const memoizedEvents = useMemo(() => events ?? [], [events]);
-
-        const renderCustomDateForMonth = (date: Date) => {
-            const circleStyle = useMemo<ViewStyle>(
-                () => ({
-                    position: "absolute",
-                    width: 30,
-                    height: 30,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    borderRadius: 15,
-                }),
-                []
-            );
-
-            const defaultStyle = useMemo<ViewStyle>(
-                () => ({
-                    ...circleStyle,
-                }),
-                [circleStyle]
-            );
-
-            const currentDateStyle = useMemo<ViewStyle>(
-                () => ({
-                    ...circleStyle,
-                    backgroundColor: "#4184f2",
-                }),
-                [circleStyle]
-            );
-
-            const renderDate = useCallback(
-                (date: Date) => {
-                    const isCurrentDate = isSameDate(todaysDate, date);
-                    const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
-
-                    return (
-                        <View style={{alignItems: "center"}}>
-                            <View style={appliedStyle}>
-                                <Text style={{color: isCurrentDate ? "white" : "black"}}>
-                                    {date.getDate()}
-                                </Text>
-                            </View>
-                        </View>
-                    );
-                },
-                [todaysDate, currentDateStyle, defaultStyle] // dependencies
-            );
-
-            return renderDate(date);
-        };
-
-        useEffect(() => {
-            setOffsetMinutes(getTotalMinutes());
-        }, [events, mode]);
-
-        if (isLoading || isRendering) {
-            return (
-                <View style={styles.loadingContainer}>
-                    <ActivityIndicator size="large" color="#0000ff"/>
-                </View>
-            );
+    const handlePressEvent = useCallback(
+      (event: CalendarEvent) => {
+        if (mode === "day" || mode === "week") {
+          setEditVisible(true);
+          console.log({ event });
+          setEventForEdit(event);
+        } else {
+          setMode("day");
+          setSelectedDate(event.start);
         }
+      },
+      [setEditVisible, setEventForEdit, mode]
+    );
 
-        return (
-            <Calendar
-                bodyContainerStyle={styles.calHeader}
-                swipeEnabled
-                enableEnrichedEvents
-                mode={mode}
-                events={memoizedEvents}
-                eventCellStyle={memoizedEventCellStyle}
-                onPressEvent={handlePressEvent}
-                weekStartsOn={memoizedWeekStartsOn}
-                height={calendarHeight}
-                activeDate={todaysDate}
-                date={selectedDate}
-                onPressCell={handlePressCell}
-                headerContentStyle={memoizedHeaderContentStyle}
-                onSwipeEnd={handleSwipeEnd}
-                scrollOffsetMinutes={offsetMinutes}
-                dayHeaderStyle={dateStyle}
-                dayHeaderHighlightColor={dayHeaderColor}
-                renderCustomDateForMonth={renderCustomDateForMonth}
-                showAdjacentMonths
-            />
-        );
+    const handlePressCell = useCallback(
+      (date: Date) => {
+        if (mode === "day" || mode === "week") {
+          setSelectedNewEndDate(date);
+        } else {
+          setMode("day");
+          setSelectedDate(date);
+        }
+      },
+      [mode, setSelectedNewEndDate, setSelectedDate]
+    );
+
+    const handleSwipeEnd = useCallback(
+      (date: Date) => {
+        setSelectedDate(date);
+      },
+      [setSelectedDate]
+    );
+
+    const memoizedEventCellStyle = useCallback(
+      (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
+      []
+    );
+
+    const memoizedWeekStartsOn = useMemo(
+      () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
+      [profileData]
+    );
+
+    const isSameDate = useCallback((date1: Date, date2: Date) => {
+      return (
+        date1.getDate() === date2.getDate() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getFullYear() === date2.getFullYear()
+      );
+    }, []);
+
+    const dayHeaderColor = useMemo(() => {
+      return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
+    }, [selectedDate, mode]);
+
+    const dateStyle = useMemo(() => {
+      if (mode === "week") return undefined;
+      return isSameDate(todaysDate, selectedDate) && mode === "day"
+        ? styles.dayHeader
+        : styles.otherDayHeader;
+    }, [selectedDate, mode]);
+
+    const memoizedHeaderContentStyle = useMemo(() => {
+      if (mode === "day") {
+        return styles.dayModeHeader;
+      } else if (mode === "week") {
+        return styles.weekModeHeader;
+      } else if (mode === "month") {
+        return styles.monthModeHeader;
+      } else {
+        return {};
+      }
+    }, [mode]);
+
+    const memoizedEvents = useMemo(() => events ?? [], [events]);
+
+    const renderCustomDateForMonth = (date: Date) => {
+      const circleStyle = useMemo<ViewStyle>(
+        () => ({
+          position: "absolute",
+          width: 30,
+          height: 30,
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: 15,
+        }),
+        []
+      );
+
+      const defaultStyle = useMemo<ViewStyle>(
+        () => ({
+          ...circleStyle,
+        }),
+        [circleStyle]
+      );
+
+      const currentDateStyle = useMemo<ViewStyle>(
+        () => ({
+          ...circleStyle,
+          backgroundColor: "#4184f2",
+        }),
+        [circleStyle]
+      );
+
+      const renderDate = useCallback(
+        (date: Date) => {
+          const isCurrentDate = isSameDate(todaysDate, date);
+          const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
+
+          return (
+            <View style={{ alignItems: "center" }}>
+              <View style={appliedStyle}>
+                <Text style={{ color: isCurrentDate ? "white" : "black" }}>
+                  {date.getDate()}
+                </Text>
+              </View>
+            </View>
+          );
+        },
+        [todaysDate, currentDateStyle, defaultStyle] // dependencies
+      );
+
+      return renderDate(date);
+    };
+
+    useEffect(() => {
+      setOffsetMinutes(getTotalMinutes());
+    }, [events, mode]);
+
+    if (isLoading || isRendering) {
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#0000ff" />
+        </View>
+      );
     }
+
+    return (
+      <Calendar
+        bodyContainerStyle={styles.calHeader}
+        swipeEnabled
+        enableEnrichedEvents
+        mode={mode}
+        events={memoizedEvents}
+        eventCellStyle={memoizedEventCellStyle}
+        onPressEvent={handlePressEvent}
+        weekStartsOn={memoizedWeekStartsOn}
+        height={calendarHeight}
+        activeDate={todaysDate}
+        date={selectedDate}
+        onPressCell={handlePressCell}
+        headerContentStyle={memoizedHeaderContentStyle}
+        onSwipeEnd={handleSwipeEnd}
+        scrollOffsetMinutes={offsetMinutes}
+        theme={{
+          palette: {
+            nowIndicator: "#fd1575",
+            gray: {
+              "100": "#e8eaed",
+              "200": "#e8eaed",
+              "500": "#b7b7b7",
+              "800": "#919191",
+            },
+          },
+          typography: {
+            fontFamily: "PlusJakartaSans_500Medium",
+            sm: { fontFamily: "Manrope_600SemiBold", fontSize: 15 },
+            xl: {
+              fontFamily: "PlusJakartaSans_500Medium",
+              fontSize: 16,
+            },
+            moreLabel: {},
+            xs:{fontSize: 10}
+          },
+        }}
+        dayHeaderStyle={dateStyle}
+        dayHeaderHighlightColor={"white"}
+        renderCustomDateForMonth={renderCustomDateForMonth}
+        showAdjacentMonths
+      />
+    );
+  }
 );
 
 const styles = StyleSheet.create({
-    segmentslblStyle: {
-        fontSize: 12,
-        fontFamily: "Manrope_600SemiBold",
-    },
-    calHeader: {
-        borderWidth: 0,
-    },
-    dayModeHeader: {
-        alignSelf: "flex-start",
-        justifyContent: "space-between",
-        alignContent: "center",
-        width: 38,
-        right: 42,
-        height: 13,
-    },
-    weekModeHeader: {},
-    monthModeHeader: {},
-    loadingContainer: {
-        flex: 1,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    dayHeader: {
-        backgroundColor: "#4184f2",
-        aspectRatio: 1,
-        borderRadius: 100,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    otherDayHeader: {
-        backgroundColor: "transparent",
-        color: "#919191",
-        aspectRatio: 1,
-        borderRadius: 100,
-        alignItems: "center",
-        justifyContent: "center",
-    },
+  segmentslblStyle: {
+    fontSize: 12,
+    fontFamily: "Manrope_600SemiBold",
+  },
+  calHeader: {
+    borderWidth: 0,
+  },
+  dayModeHeader: {
+    alignSelf: "flex-start",
+    justifyContent: "space-between",
+    alignContent: "center",
+    width: 38,
+    right: 42,
+    height: 13,
+  },
+  weekModeHeader: {},
+  monthModeHeader: {},
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dayHeader: {
+    backgroundColor: "#4184f2",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  otherDayHeader: {
+    backgroundColor: "transparent",
+    color: "#919191",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
diff --git a/components/pages/calendar/atoms.ts b/components/pages/calendar/atoms.ts
index 6f64eab..894c2fa 100644
--- a/components/pages/calendar/atoms.ts
+++ b/components/pages/calendar/atoms.ts
@@ -1,9 +1,11 @@
-import { atom } from 'jotai';
-import {CalendarEvent} from "@/components/pages/calendar/interfaces";
+import { atom } from "jotai";
+import { CalendarEvent } from "@/components/pages/calendar/interfaces";
 
 export const editVisibleAtom = atom<boolean>(false);
 export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
 export const isFamilyViewAtom = atom<boolean>(false);
 export const modeAtom = atom<"week" | "month" | "day">("week");
 export const selectedDateAtom = atom<Date>(new Date());
-export const selectedNewEventDateAtom = atom<Date | undefined>(undefined);
\ No newline at end of file
+export const selectedNewEventDateAtom = atom<Date | undefined>(undefined);
+export const settingsPageIndex = atom<number>(0);
+export const userSettingsView = atom<boolean>(true);
diff --git a/components/pages/settings/CalendarSettingsPage.tsx b/components/pages/settings/CalendarSettingsPage.tsx
index a2e012b..87fd675 100644
--- a/components/pages/settings/CalendarSettingsPage.tsx
+++ b/components/pages/settings/CalendarSettingsPage.tsx
@@ -1,10 +1,10 @@
-import {AntDesign, Ionicons} from "@expo/vector-icons";
-import React, {useCallback, useEffect, useState} from "react";
-import {Button, Checkbox, Text, View} from "react-native-ui-lib";
-import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
-import {TouchableOpacity} from "react-native-gesture-handler";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import React, { useCallback, useEffect, useState } from "react";
+import { Button, Checkbox, Text, View } from "react-native-ui-lib";
+import { ActivityIndicator, ScrollView, StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import debounce from "debounce";
 import AppleIcon from "@/assets/svgs/AppleIcon";
 import GoogleIcon from "@/assets/svgs/GoogleIcon";
@@ -12,705 +12,805 @@ import OutlookIcon from "@/assets/svgs/OutlookIcon";
 import * as AuthSession from "expo-auth-session";
 import * as Google from "expo-auth-session/providers/google";
 import * as WebBrowser from "expo-web-browser";
-import {UserProfile} from "@firebase/auth";
-import {useFetchAndSaveGoogleEvents} from "@/hooks/useFetchAndSaveGoogleEvents";
-import {useFetchAndSaveOutlookEvents} from "@/hooks/useFetchAndSaveOutlookEvents";
-import {useFetchAndSaveAppleEvents} from "@/hooks/useFetchAndSaveAppleEvents";
-import * as AppleAuthentication from 'expo-apple-authentication';
+import { UserProfile } from "@firebase/auth";
+import { useFetchAndSaveGoogleEvents } from "@/hooks/useFetchAndSaveGoogleEvents";
+import { useFetchAndSaveOutlookEvents } from "@/hooks/useFetchAndSaveOutlookEvents";
+import { useFetchAndSaveAppleEvents } from "@/hooks/useFetchAndSaveAppleEvents";
+import * as AppleAuthentication from "expo-apple-authentication";
 import ExpoLocalization from "expo-localization/src/ExpoLocalization";
-import {colorMap} from "@/constants/colorMap";
+import { colorMap } from "@/constants/colorMap";
+import { useAtom } from "jotai";
+import { settingsPageIndex } from "../calendar/atoms";
 
 const googleConfig = {
-    androidClientId:
-        "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
-    iosClientId:
-        "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
-    webClientId:
-        "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
-    scopes: [
-        "email",
-        "profile",
-        "https://www.googleapis.com/auth/calendar.events.owned",
-    ],
+  androidClientId:
+    "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+  iosClientId:
+    "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+  webClientId:
+    "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+  scopes: [
+    "email",
+    "profile",
+    "https://www.googleapis.com/auth/calendar.events.owned",
+  ],
 };
 
 const microsoftConfig = {
-    clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af",
-    redirectUri: AuthSession.makeRedirectUri({path: "settings"}),
-    scopes: [
-        "openid",
-        "profile",
-        "email",
-        "offline_access",
-        "Calendars.ReadWrite",
-        "User.Read"
-    ],
-    authorizationEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
-    tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
+  clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af",
+  redirectUri: AuthSession.makeRedirectUri({ path: "settings" }),
+  scopes: [
+    "openid",
+    "profile",
+    "email",
+    "offline_access",
+    "Calendars.ReadWrite",
+    "User.Read",
+  ],
+  authorizationEndpoint:
+    "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
+  tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
 };
 
-const CalendarSettingsPage = (props: {
-    setSelectedPage: (page: number) => void;
-}) => {
-    const {profileData} = useAuthContext();
-    const [firstDayOfWeek, setFirstDayOfWeek] = useState<string>(profileData?.firstDayOfWeek ?? ExpoLocalization.getCalendars()[0].firstWeekday === 1 ? "Mondays" : "Sundays");
+const CalendarSettingsPage = () => {
+  const { profileData } = useAuthContext();
+  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
+  const [firstDayOfWeek, setFirstDayOfWeek] = useState<string>(
+    profileData?.firstDayOfWeek ??
+      ExpoLocalization.getCalendars()[0].firstWeekday === 1
+      ? "Mondays"
+      : "Sundays"
+  );
 
-    const [selectedColor, setSelectedColor] = useState<string>(
-        profileData?.eventColor ?? colorMap.pink
-    );
-    const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
-        profileData?.eventColor ?? colorMap.pink
-    );
+  const [selectedColor, setSelectedColor] = useState<string>(
+    profileData?.eventColor ?? colorMap.pink
+  );
+  const [previousSelectedColor, setPreviousSelectedColor] = useState<string>(
+    profileData?.eventColor ?? colorMap.pink
+  );
 
-    const {mutateAsync: updateUserData} = useUpdateUserData();
-    const {mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle} = useFetchAndSaveGoogleEvents();
-    const {mutateAsync: fetchAndSaveOutlookEvents, isLoading: isSyncingOutlook} = useFetchAndSaveOutlookEvents();
-    const {mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple} = useFetchAndSaveAppleEvents();
+  const { mutateAsync: updateUserData } = useUpdateUserData();
+  const { mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle } =
+    useFetchAndSaveGoogleEvents();
+  const {
+    mutateAsync: fetchAndSaveOutlookEvents,
+    isLoading: isSyncingOutlook,
+  } = useFetchAndSaveOutlookEvents();
+  const { mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple } =
+    useFetchAndSaveAppleEvents();
 
+  WebBrowser.maybeCompleteAuthSession();
+  const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);
 
-    WebBrowser.maybeCompleteAuthSession();
-    const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);
+  useEffect(() => {
+    signInWithGoogle();
+  }, [response]);
 
-    useEffect(() => {
-        signInWithGoogle();
-    }, [response]);
+  const signInWithGoogle = async () => {
+    try {
+      if (response?.type === "success") {
+        const accessToken = response.authentication?.accessToken;
 
-    const signInWithGoogle = async () => {
-        try {
-            if (response?.type === "success") {
-                const accessToken = response.authentication?.accessToken;
+        const userInfoResponse = await fetch(
+          "https://www.googleapis.com/oauth2/v3/userinfo",
+          {
+            headers: { Authorization: `Bearer ${accessToken}` },
+          }
+        );
 
-                const userInfoResponse = await fetch(
-                    "https://www.googleapis.com/oauth2/v3/userinfo",
-                    {
-                        headers: {Authorization: `Bearer ${accessToken}`},
-                    }
-                );
+        const userInfo = await userInfoResponse.json();
+        const googleMail = userInfo.email;
 
-                const userInfo = await userInfoResponse.json();
-                const googleMail = userInfo.email;
+        let googleAccounts = profileData?.googleAccounts;
+        const updatedGoogleAccounts = googleAccounts
+          ? { ...googleAccounts, [googleMail]: accessToken }
+          : { [googleMail]: accessToken };
 
-                let googleAccounts = profileData?.googleAccounts;
-                const updatedGoogleAccounts = googleAccounts ? {...googleAccounts, [googleMail]: accessToken} : {[googleMail]: accessToken};
+        await updateUserData({
+          newUserData: { googleAccounts: updatedGoogleAccounts },
+        });
 
-                await updateUserData({
-                    newUserData: {googleAccounts: updatedGoogleAccounts},
-                });
-
-                await fetchAndSaveGoogleEvents({token: accessToken, email: googleMail})
-            }
-        } catch (error) {
-            console.error("Error during Google sign-in:", error);
-        }
-    };
-
-    const handleMicrosoftSignIn = async () => {
-        try {
-            console.log("Starting Microsoft sign-in...");
-
-            const authRequest = new AuthSession.AuthRequest({
-                clientId: microsoftConfig.clientId,
-                scopes: microsoftConfig.scopes,
-                redirectUri: microsoftConfig.redirectUri,
-                responseType: AuthSession.ResponseType.Code,
-                usePKCE: true, // Enable PKCE
-            });
-
-            console.log("Auth request created:", authRequest);
-
-            const authResult = await authRequest.promptAsync({
-                authorizationEndpoint: microsoftConfig.authorizationEndpoint,
-            });
-
-            console.log("Auth result:", authResult);
-
-            if (authResult.type === "success" && authResult.params?.code) {
-                const code = authResult.params.code;
-                console.log("Authorization code received:", code);
-
-                // Exchange authorization code for tokens
-                const tokenResponse = await fetch(microsoftConfig.tokenEndpoint, {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/x-www-form-urlencoded",
-                    },
-                    body: `client_id=${
-                        microsoftConfig.clientId
-                    }&redirect_uri=${encodeURIComponent(
-                        microsoftConfig.redirectUri
-                    )}&grant_type=authorization_code&code=${code}&code_verifier=${
-                        authRequest.codeVerifier
-                    }&scope=${encodeURIComponent(
-                        "https://graph.microsoft.com/Calendars.ReadWrite offline_access User.Read"
-                    )}`,
-                });
-
-                console.log("Token response status:", tokenResponse.status);
-
-                if (!tokenResponse.ok) {
-                    const errorText = await tokenResponse.text();
-                    console.error("Token exchange failed:", errorText);
-                    return;
-                }
-
-                const tokenData = await tokenResponse.json();
-                console.log("Token data received:", tokenData);
-
-                if (tokenData?.access_token) {
-                    console.log("Access token received, fetching user info...");
-
-                    // Fetch user info from Microsoft Graph API to get the email
-                    const userInfoResponse = await fetch("https://graph.microsoft.com/v1.0/me", {
-                        headers: {
-                            Authorization: `Bearer ${tokenData.access_token}`,
-                        },
-                    });
-
-                    const userInfo = await userInfoResponse.json();
-                    console.log("User info received:", userInfo);
-
-                    if (userInfo.error) {
-                        console.error("Error fetching user info:", userInfo.error);
-                    } else {
-                        const outlookMail = userInfo.mail || userInfo.userPrincipalName;
-
-                        let microsoftAccounts = profileData?.microsoftAccounts;
-                        const updatedMicrosoftAccounts = microsoftAccounts ? {...microsoftAccounts, [outlookMail]: tokenData.access_token} : {[outlookMail]: tokenData.access_token};
-
-                        // Update user data with Microsoft token and email
-                        await updateUserData({
-                            newUserData: {microsoftAccounts: updatedMicrosoftAccounts},
-                        });
-
-                        await fetchAndSaveOutlookEvents(tokenData.access_token, outlookMail)
-                        console.log("User data updated successfully.");
-                    }
-                }
-            } else {
-                console.warn("Authentication was not successful:", authResult);
-            }
-        } catch (error) {
-            console.error("Error during Microsoft sign-in:", error);
-        }
-    };
-
-    const handleAppleSignIn = async () => {
-        try {
-            console.log("Starting Apple Sign-in...");
-
-            const credential = await AppleAuthentication.signInAsync({
-                requestedScopes: [
-                    AppleAuthentication.AppleAuthenticationScope.EMAIL,
-                    AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
-                ],
-            });
-
-            console.log("Apple sign-in result:", credential);
-
-            const appleToken = credential.identityToken;
-            const appleMail = credential.email;
-
-            if (appleToken) {
-                console.log("Apple ID token received. Fetch user info if needed...");
-
-                await updateUserData({
-                    newUserData: {appleToken, appleMail},
-                });
-
-                console.log("User data updated with Apple ID token.");
-                await fetchAndSaveAppleEvents({token: appleToken, email: appleMail!});
-            } else {
-                console.warn("Apple authentication was not successful or email was hidden.");
-            }
-        } catch (error) {
-            console.error("Error during Apple Sign-in:", error);
-        }
-    };
-
-    const debouncedUpdateUserData = useCallback(
-        debounce(async (color: string) => {
-            try {
-                await updateUserData({
-                    newUserData: {
-                        eventColor: color,
-                    },
-                });
-            } catch (error) {
-                console.error("Failed to update color:", error);
-                setSelectedColor(previousSelectedColor);
-            }
-        }, 500),
-        []
-    );
-
-    const debouncedUpdateFirstDayOfWeek = useCallback(
-        debounce(async (firstDayOfWeek: string) => {
-            try {
-                await updateUserData({
-                    newUserData: {
-                        firstDayOfWeek,
-                    },
-                });
-            } catch (error) {
-                console.error("Failed to update first day of week:", error);
-            }
-        }, 500),
-        []
-    );
-
-    const handleChangeFirstDayOfWeek = (firstDayOfWeek: string) => {
-        setFirstDayOfWeek(firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays");
-        debouncedUpdateFirstDayOfWeek(firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays");
+        await fetchAndSaveGoogleEvents({
+          token: accessToken,
+          email: googleMail,
+        });
+      }
+    } catch (error) {
+      console.error("Error during Google sign-in:", error);
     }
+  };
 
-    const handleChangeColor = (color: string) => {
-        setPreviousSelectedColor(selectedColor);
-        setSelectedColor(color);
-        debouncedUpdateUserData(color);
-    };
+  const handleMicrosoftSignIn = async () => {
+    try {
+      console.log("Starting Microsoft sign-in...");
 
-    const clearToken = async (provider: "google" | "outlook" | "apple", email: string) => {
-        const newUserData: Partial<UserProfile> = {};
-        if (provider === "google") {
-            let googleAccounts = profileData?.googleAccounts;
-            if (googleAccounts) {
-                googleAccounts[email] = null;
-                newUserData.googleAccounts = googleAccounts;
+      const authRequest = new AuthSession.AuthRequest({
+        clientId: microsoftConfig.clientId,
+        scopes: microsoftConfig.scopes,
+        redirectUri: microsoftConfig.redirectUri,
+        responseType: AuthSession.ResponseType.Code,
+        usePKCE: true, // Enable PKCE
+      });
+
+      console.log("Auth request created:", authRequest);
+
+      const authResult = await authRequest.promptAsync({
+        authorizationEndpoint: microsoftConfig.authorizationEndpoint,
+      });
+
+      console.log("Auth result:", authResult);
+
+      if (authResult.type === "success" && authResult.params?.code) {
+        const code = authResult.params.code;
+        console.log("Authorization code received:", code);
+
+        // Exchange authorization code for tokens
+        const tokenResponse = await fetch(microsoftConfig.tokenEndpoint, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+          body: `client_id=${
+            microsoftConfig.clientId
+          }&redirect_uri=${encodeURIComponent(
+            microsoftConfig.redirectUri
+          )}&grant_type=authorization_code&code=${code}&code_verifier=${
+            authRequest.codeVerifier
+          }&scope=${encodeURIComponent(
+            "https://graph.microsoft.com/Calendars.ReadWrite offline_access User.Read"
+          )}`,
+        });
+
+        console.log("Token response status:", tokenResponse.status);
+
+        if (!tokenResponse.ok) {
+          const errorText = await tokenResponse.text();
+          console.error("Token exchange failed:", errorText);
+          return;
+        }
+
+        const tokenData = await tokenResponse.json();
+        console.log("Token data received:", tokenData);
+
+        if (tokenData?.access_token) {
+          console.log("Access token received, fetching user info...");
+
+          // Fetch user info from Microsoft Graph API to get the email
+          const userInfoResponse = await fetch(
+            "https://graph.microsoft.com/v1.0/me",
+            {
+              headers: {
+                Authorization: `Bearer ${tokenData.access_token}`,
+              },
             }
-        } else if (provider === "outlook") {
+          );
+
+          const userInfo = await userInfoResponse.json();
+          console.log("User info received:", userInfo);
+
+          if (userInfo.error) {
+            console.error("Error fetching user info:", userInfo.error);
+          } else {
+            const outlookMail = userInfo.mail || userInfo.userPrincipalName;
+
             let microsoftAccounts = profileData?.microsoftAccounts;
-            if (microsoftAccounts) {
-                microsoftAccounts[email] = null;
-                newUserData.microsoftAccounts = microsoftAccounts;
-            }
-        } else if (provider === "apple") {
-            let appleAccounts = profileData?.appleAccounts;
-            if (appleAccounts) {
-                appleAccounts[email] = null;
-                newUserData.appleAccounts = appleAccounts;
-            }
+            const updatedMicrosoftAccounts = microsoftAccounts
+              ? { ...microsoftAccounts, [outlookMail]: tokenData.access_token }
+              : { [outlookMail]: tokenData.access_token };
+
+            // Update user data with Microsoft token and email
+            await updateUserData({
+              newUserData: { microsoftAccounts: updatedMicrosoftAccounts },
+            });
+
+            await fetchAndSaveOutlookEvents(
+              tokenData.access_token,
+              outlookMail
+            );
+            console.log("User data updated successfully.");
+          }
         }
-        await updateUserData({newUserData});
-    };
-
-    let isConnectedToGoogle = false;
-    if (profileData?.googleAccounts) {
-        Object.values(profileData?.googleAccounts).forEach((item) => {
-            if (item !== null) {
-                isConnectedToGoogle = true;
-                return;
-            }
-        });
+      } else {
+        console.warn("Authentication was not successful:", authResult);
+      }
+    } catch (error) {
+      console.error("Error during Microsoft sign-in:", error);
     }
+  };
 
-    let isConnectedToMicrosoft = false;
-    const microsoftAccounts  = profileData?.microsoftAccounts;
-    if (microsoftAccounts) {
-        Object.values(profileData?.microsoftAccounts).forEach((item) => {
-            if (item !== null) {
-                isConnectedToMicrosoft = true;
-                return;
-            }
+  const handleAppleSignIn = async () => {
+    try {
+      console.log("Starting Apple Sign-in...");
+
+      const credential = await AppleAuthentication.signInAsync({
+        requestedScopes: [
+          AppleAuthentication.AppleAuthenticationScope.EMAIL,
+          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+        ],
+      });
+
+      console.log("Apple sign-in result:", credential);
+
+      const appleToken = credential.identityToken;
+      const appleMail = credential.email;
+
+      if (appleToken) {
+        console.log("Apple ID token received. Fetch user info if needed...");
+
+        await updateUserData({
+          newUserData: { appleToken, appleMail },
         });
-    }
 
-    let isConnectedToApple = false;
-    if (profileData?.appleAccounts) {
-        Object.values(profileData?.appleAccounts).forEach((item) => {
-            if (item !== null) {
-                isConnectedToApple = true;
-                return;
-            }
+        console.log("User data updated with Apple ID token.");
+        await fetchAndSaveAppleEvents({ token: appleToken, email: appleMail! });
+      } else {
+        console.warn(
+          "Apple authentication was not successful or email was hidden."
+        );
+      }
+    } catch (error) {
+      console.error("Error during Apple Sign-in:", error);
+    }
+  };
+
+  const debouncedUpdateUserData = useCallback(
+    debounce(async (color: string) => {
+      try {
+        await updateUserData({
+          newUserData: {
+            eventColor: color,
+          },
         });
-    }
+      } catch (error) {
+        console.error("Failed to update color:", error);
+        setSelectedColor(previousSelectedColor);
+      }
+    }, 500),
+    []
+  );
 
-    return (
-        <ScrollView>
-            <View marginH-30 marginB-30>
-                <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
-                    <View row marginT-20 marginB-35 centerV>
-                        <Ionicons
-                            name="chevron-back"
-                            size={14}
-                            color="#979797"
-                            style={{paddingBottom: 3}}
-                        />
-                        <Text
-                            style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
-                            color="#979797"
-                        >
-                            Return to main settings
-                        </Text>
-                    </View>
-                </TouchableOpacity>
-                <Text style={styles.subTitle}>Calendar settings</Text>
-                <View style={styles.card}>
-                    <Text style={styles.cardTitle} marginB-14>
-                        Event 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 style={styles.card}>
-                    <Text style={styles.cardTitle}>Weekly Start Date</Text>
-                    <View row marginV-5 marginT-20>
-                        <Checkbox
-                            value={firstDayOfWeek === "Sundays"}
-                            style={styles.checkbox}
-                            color="#ea156d"
-                            onValueChange={() => handleChangeFirstDayOfWeek("Sundays")}
-                        />
-                        <View row marginL-8>
-                            <Text text70>Sundays</Text>
-                            <Text text70 color="gray">
-                                {" "}
-                                (default)
-                            </Text>
-                        </View>
-                    </View>
-                    <View row marginV-5>
-                        <Checkbox
-                            value={firstDayOfWeek === "Mondays"}
-                            style={styles.checkbox}
-                            color="#ea156d"
-                            onValueChange={() => handleChangeFirstDayOfWeek("Mondays")}
-                        />
-                        <Text text70 marginL-8>
-                            Mondays
-                        </Text>
-                    </View>
-                </View>
-                <Text style={styles.subTitle} marginT-30 marginB-25>
-                    Add Calendar
-                </Text>
+  const debouncedUpdateFirstDayOfWeek = useCallback(
+    debounce(async (firstDayOfWeek: string) => {
+      try {
+        await updateUserData({
+          newUserData: {
+            firstDayOfWeek,
+          },
+        });
+      } catch (error) {
+        console.error("Failed to update first day of week:", error);
+      }
+    }, 500),
+    []
+  );
 
-                <Button
-                    onPress={() => promptAsync()}
-                    label={"Connect Google"}
-                    labelStyle={styles.addCalLbl}
-                    labelProps={{
-                        numberOfLines: 2
-                    }}
-                    iconSource={() => (
-                        <View marginR-15>
-                            <GoogleIcon/>
-                        </View>
-                    )}
-                    style={styles.addCalBtn}
-                    color="black"
-                    text70BL
-                />
-                {profileData?.googleAccounts ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
-                    const googleToken = profileData?.googleAccounts?.[googleMail];
-                    return googleToken && <Button
-                        key={googleMail}
-                        onPress={() => clearToken("google", googleMail)}
-                        label={`Disconnect ${googleMail}`}
-                        labelStyle={styles.addCalLbl}
-                        labelProps={{
-                            numberOfLines: 2
-                        }}
-                        iconSource={() => (
-                            <View marginR-15>
-                                <GoogleIcon/>
-                            </View>
-                        )}
-                        style={styles.addCalBtn}
-                        color="black"
-                        text70BL
-                    />
-                }) : null}
-
-                <Button
-                    onPress={() => handleAppleSignIn()}
-                    label={"Connect Apple"}
-                    labelStyle={styles.addCalLbl}
-                    labelProps={{
-                        numberOfLines: 2
-                    }}
-                    iconSource={() => (
-                        <View marginR-15>
-                            <AppleIcon/>
-                        </View>
-                    )}
-                    style={styles.addCalBtn}
-                    color="black"
-                    text70BL
-                />
-                {profileData?.appleAccounts ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
-                    const appleToken = profileData?.appleAccounts?.[appleEmail];
-                    return appleToken && <Button
-                        key={appleEmail}
-                        onPress={() => clearToken("apple", appleEmail)}
-                        label={`Disconnect ${appleEmail}`}
-                        labelStyle={styles.addCalLbl}
-                        labelProps={{
-                            numberOfLines: 2
-                        }}
-                        iconSource={() => (
-                            <View marginR-15>
-                                <AppleIcon/>
-                            </View>
-                        )}
-                        style={styles.addCalBtn}
-                        color="black"
-                        text70BL
-                    />
-                }) : null}
-
-                <Button
-                    onPress={() => handleMicrosoftSignIn()}
-                    label={"Connect Outlook"}
-                    labelStyle={styles.addCalLbl}
-                    labelProps={{
-                        numberOfLines: 2
-                    }}
-                    iconSource={() => (
-                        <View marginR-15>
-                            <OutlookIcon/>
-                        </View>
-                    )}
-                    style={styles.addCalBtn}
-                    color="black"
-                    text70BL
-                />
-                {profileData?.microsoftAccounts ? Object.keys(profileData?.microsoftAccounts)?.map((microsoftEmail) => {
-                    const microsoftToken = profileData?.microsoftAccounts?.[microsoftEmail];
-                    return microsoftToken && <Button
-                        key={microsoftEmail}
-                        onPress={() => clearToken("outlook", microsoftEmail)}
-                        label={`Disconnect ${microsoftEmail}`}
-                        labelStyle={styles.addCalLbl}
-                        labelProps={{
-                            numberOfLines: 2
-                        }}
-                        iconSource={() => (
-                            <View marginR-15>
-                                <OutlookIcon/>
-                            </View>
-                        )}
-                        style={styles.addCalBtn}
-                        color="black"
-                        text70BL
-                    />
-                }) : null}
-
-                {(isConnectedToGoogle || isConnectedToMicrosoft || isConnectedToApple) && (
-                    <>
-                        <Text style={styles.subTitle} marginT-30 marginB-20>
-                            Connected Calendars
-                        </Text>
-
-                        <View style={styles.noPaddingCard}>
-                            <View style={{marginTop: 20}}>
-                                {profileData?.googleAccounts && Object.keys(profileData?.googleAccounts)?.map((googleEmail) => {
-                                    const googleToken = profileData?.googleAccounts?.[googleEmail];
-                                    return googleToken && (
-                                        <TouchableOpacity
-                                            onPress={() => fetchAndSaveGoogleEvents({token: googleToken, email: googleEmail})}
-                                        >
-                                            <View row paddingR-20 center>
-                                                <Button
-                                                    disabled={isSyncingGoogle}
-                                                    onPress={() => fetchAndSaveGoogleEvents({token: googleToken, email: googleEmail})}
-                                                    label={`Sync ${googleEmail}`}
-                                                    labelStyle={styles.addCalLbl}
-                                                    labelProps={{numberOfLines: 3}}
-                                                    iconSource={() => (
-                                                        <View marginR-15>
-                                                            <GoogleIcon/>
-                                                        </View>
-                                                    )}
-                                                    style={styles.addCalBtn}
-                                                    color="black"
-                                                    text70BL
-                                                />
-
-                                                {isSyncingGoogle ? (
-                                                    <ActivityIndicator/>
-                                                ) : (
-                                                    <Ionicons name={"refresh"} size={20} color={"#000000"}/>
-                                                )}
-                                            </View>
-                                        </TouchableOpacity>
-                                    )
-                                })}
-
-                                {profileData?.appleAccounts && Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
-                                    const appleToken = profileData?.appleAccounts?.[appleEmail];
-                                    return appleToken && (
-                                        <TouchableOpacity
-                                            onPress={() => fetchAndSaveAppleEvents({
-                                                email: appleEmail,
-                                                token: appleToken
-                                            })}>
-                                            <View row paddingR-20 center>
-                                                <Button
-                                                    disabled={isSyncingApple}
-                                                    onPress={() => fetchAndSaveAppleEvents({
-                                                        email: appleEmail,
-                                                        token: appleToken
-                                                    })}
-                                                    label={`Sync ${appleEmail}`}
-                                                    labelStyle={styles.addCalLbl}
-                                                    labelProps={{numberOfLines: 3}}
-                                                    iconSource={() => (
-                                                        <View marginR-15>
-                                                            <AppleIcon/>
-                                                        </View>
-                                                    )}
-                                                    style={styles.addCalBtn}
-                                                    color="black"
-                                                    text70BL
-                                                />
-                                                {isSyncingApple ? (
-                                                    <ActivityIndicator/>
-                                                ) : (
-                                                    <Ionicons name={"refresh"} size={20} color={"#000000"}/>
-                                                )}
-                                            </View>
-                                        </TouchableOpacity>
-                                    )
-                                })}
-
-                                {profileData?.microsoftAccounts && Object.keys(profileData?.microsoftAccounts)?.map((microsoftEmail) => {
-                                    const microsoftToken = profileData?.microsoftAccounts?.[microsoftEmail];
-                                    return microsoftToken && (
-                                        <TouchableOpacity
-                                            onPress={() => fetchAndSaveOutlookEvents({
-                                                token: microsoftToken,
-                                                email: microsoftEmail
-                                            })}
-                                        >
-                                            <View row paddingR-20 center>
-                                                <Button
-                                                    disabled={isSyncingOutlook}
-                                                    onPress={() => fetchAndSaveOutlookEvents({
-                                                        token: microsoftToken,
-                                                        email: microsoftEmail
-                                                    })}
-                                                    label={`Sync ${microsoftEmail}`}
-                                                    labelStyle={styles.addCalLbl}
-                                                    labelProps={{numberOfLines: 3}}
-                                                    iconSource={() => (
-                                                        <View marginR-15>
-                                                            <OutlookIcon/>
-                                                        </View>
-                                                    )}
-                                                    style={styles.addCalBtn}
-                                                    color="black"
-                                                    text70BL
-                                                />
-                                                {isSyncingOutlook ? (
-                                                    <ActivityIndicator/>
-                                                ) : (
-                                                    <Ionicons name={"refresh"} size={20} color={"#000000"}/>
-                                                )}
-                                            </View>
-                                        </TouchableOpacity>
-                                    )
-                                })}
-                            </View>
-                        </View>
-                    </>
-                )}
-            </View>
-        </ScrollView>
+  const handleChangeFirstDayOfWeek = (firstDayOfWeek: string) => {
+    setFirstDayOfWeek(firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays");
+    debouncedUpdateFirstDayOfWeek(
+      firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays"
     );
+  };
+
+  const handleChangeColor = (color: string) => {
+    setPreviousSelectedColor(selectedColor);
+    setSelectedColor(color);
+    debouncedUpdateUserData(color);
+  };
+
+  const clearToken = async (
+    provider: "google" | "outlook" | "apple",
+    email: string
+  ) => {
+    const newUserData: Partial<UserProfile> = {};
+    if (provider === "google") {
+      let googleAccounts = profileData?.googleAccounts;
+      if (googleAccounts) {
+        googleAccounts[email] = null;
+        newUserData.googleAccounts = googleAccounts;
+      }
+    } else if (provider === "outlook") {
+      let microsoftAccounts = profileData?.microsoftAccounts;
+      if (microsoftAccounts) {
+        microsoftAccounts[email] = null;
+        newUserData.microsoftAccounts = microsoftAccounts;
+      }
+    } else if (provider === "apple") {
+      let appleAccounts = profileData?.appleAccounts;
+      if (appleAccounts) {
+        appleAccounts[email] = null;
+        newUserData.appleAccounts = appleAccounts;
+      }
+    }
+    await updateUserData({ newUserData });
+  };
+
+  let isConnectedToGoogle = false;
+  if (profileData?.googleAccounts) {
+    Object.values(profileData?.googleAccounts).forEach((item) => {
+      if (item !== null) {
+        isConnectedToGoogle = true;
+        return;
+      }
+    });
+  }
+
+  let isConnectedToMicrosoft = false;
+  const microsoftAccounts = profileData?.microsoftAccounts;
+  if (microsoftAccounts) {
+    Object.values(profileData?.microsoftAccounts).forEach((item) => {
+      if (item !== null) {
+        isConnectedToMicrosoft = true;
+        return;
+      }
+    });
+  }
+
+  let isConnectedToApple = false;
+  if (profileData?.appleAccounts) {
+    Object.values(profileData?.appleAccounts).forEach((item) => {
+      if (item !== null) {
+        isConnectedToApple = true;
+        return;
+      }
+    });
+  }
+
+  return (
+    <ScrollView>
+      <TouchableOpacity onPress={() => setPageIndex(0)}>
+        <View row marginT-20 marginB-20 marginL-20 centerV>
+          <Ionicons
+            name="chevron-back"
+            size={14}
+            color="#979797"
+            style={{ paddingBottom: 3 }}
+          />
+          <Text
+            style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
+            color="#979797"
+          >
+            Return to main settings
+          </Text>
+        </View>
+      </TouchableOpacity>
+      <View marginH-30 marginB-30>
+        <Text style={styles.subTitle}>Calendar settings</Text>
+        <View style={styles.card}>
+          <Text style={styles.cardTitle} marginB-14>
+            Event 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 style={styles.card}>
+          <Text style={styles.cardTitle}>Weekly Start Date</Text>
+          <View row marginV-5 marginT-20>
+            <Checkbox
+              value={firstDayOfWeek === "Sundays"}
+              style={styles.checkbox}
+              color="#ea156d"
+              onValueChange={() => handleChangeFirstDayOfWeek("Sundays")}
+            />
+            <View row marginL-8>
+              <Text text70>Sundays</Text>
+              <Text text70 color="gray">
+                {" "}
+                (default)
+              </Text>
+            </View>
+          </View>
+          <View row marginV-5>
+            <Checkbox
+              value={firstDayOfWeek === "Mondays"}
+              style={styles.checkbox}
+              color="#ea156d"
+              onValueChange={() => handleChangeFirstDayOfWeek("Mondays")}
+            />
+            <Text text70 marginL-8>
+              Mondays
+            </Text>
+          </View>
+        </View>
+        <Text style={styles.subTitle} marginT-30 marginB-25>
+          Add Calendar
+        </Text>
+
+        <Button
+          onPress={() => promptAsync()}
+          label={"Connect Google"}
+          labelStyle={styles.addCalLbl}
+          labelProps={{
+            numberOfLines: 2,
+          }}
+          iconSource={() => (
+            <View marginR-15>
+              <GoogleIcon />
+            </View>
+          )}
+          style={styles.addCalBtn}
+          color="black"
+          text70BL
+        />
+        {profileData?.googleAccounts
+          ? Object.keys(profileData?.googleAccounts)?.map((googleMail) => {
+              const googleToken = profileData?.googleAccounts?.[googleMail];
+              return (
+                googleToken && (
+                  <Button
+                    key={googleMail}
+                    onPress={() => clearToken("google", googleMail)}
+                    label={`Disconnect ${googleMail}`}
+                    labelStyle={styles.addCalLbl}
+                    labelProps={{
+                      numberOfLines: 2,
+                    }}
+                    iconSource={() => (
+                      <View marginR-15>
+                        <GoogleIcon />
+                      </View>
+                    )}
+                    style={styles.addCalBtn}
+                    color="black"
+                    text70BL
+                  />
+                )
+              );
+            })
+          : null}
+
+        <Button
+          onPress={() => handleAppleSignIn()}
+          label={"Connect Apple"}
+          labelStyle={styles.addCalLbl}
+          labelProps={{
+            numberOfLines: 2,
+          }}
+          iconSource={() => (
+            <View marginR-15>
+              <AppleIcon />
+            </View>
+          )}
+          style={styles.addCalBtn}
+          color="black"
+          text70BL
+        />
+        {profileData?.appleAccounts
+          ? Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
+              const appleToken = profileData?.appleAccounts?.[appleEmail];
+              return (
+                appleToken && (
+                  <Button
+                    key={appleEmail}
+                    onPress={() => clearToken("apple", appleEmail)}
+                    label={`Disconnect ${appleEmail}`}
+                    labelStyle={styles.addCalLbl}
+                    labelProps={{
+                      numberOfLines: 2,
+                    }}
+                    iconSource={() => (
+                      <View marginR-15>
+                        <AppleIcon />
+                      </View>
+                    )}
+                    style={styles.addCalBtn}
+                    color="black"
+                    text70BL
+                  />
+                )
+              );
+            })
+          : null}
+
+        <Button
+          onPress={() => handleMicrosoftSignIn()}
+          label={"Connect Outlook"}
+          labelStyle={styles.addCalLbl}
+          labelProps={{
+            numberOfLines: 2,
+          }}
+          iconSource={() => (
+            <View marginR-15>
+              <OutlookIcon />
+            </View>
+          )}
+          style={styles.addCalBtn}
+          color="black"
+          text70BL
+        />
+        {profileData?.microsoftAccounts
+          ? Object.keys(profileData?.microsoftAccounts)?.map(
+              (microsoftEmail) => {
+                const microsoftToken =
+                  profileData?.microsoftAccounts?.[microsoftEmail];
+                return (
+                  microsoftToken && (
+                    <Button
+                      key={microsoftEmail}
+                      onPress={() => clearToken("outlook", microsoftEmail)}
+                      label={`Disconnect ${microsoftEmail}`}
+                      labelStyle={styles.addCalLbl}
+                      labelProps={{
+                        numberOfLines: 2,
+                      }}
+                      iconSource={() => (
+                        <View marginR-15>
+                          <OutlookIcon />
+                        </View>
+                      )}
+                      style={styles.addCalBtn}
+                      color="black"
+                      text70BL
+                    />
+                  )
+                );
+              }
+            )
+          : null}
+
+        {(isConnectedToGoogle ||
+          isConnectedToMicrosoft ||
+          isConnectedToApple) && (
+          <>
+            <Text style={styles.subTitle} marginT-30 marginB-20>
+              Connected Calendars
+            </Text>
+
+            <View style={styles.noPaddingCard}>
+              <View style={{ marginTop: 20 }}>
+                {profileData?.googleAccounts &&
+                  Object.keys(profileData?.googleAccounts)?.map(
+                    (googleEmail) => {
+                      const googleToken =
+                        profileData?.googleAccounts?.[googleEmail];
+                      return (
+                        googleToken && (
+                          <TouchableOpacity
+                            onPress={() =>
+                              fetchAndSaveGoogleEvents({
+                                token: googleToken,
+                                email: googleEmail,
+                              })
+                            }
+                          >
+                            <View row paddingR-20 center>
+                              <Button
+                                disabled={isSyncingGoogle}
+                                onPress={() =>
+                                  fetchAndSaveGoogleEvents({
+                                    token: googleToken,
+                                    email: googleEmail,
+                                  })
+                                }
+                                label={`Sync ${googleEmail}`}
+                                labelStyle={styles.addCalLbl}
+                                labelProps={{ numberOfLines: 3 }}
+                                iconSource={() => (
+                                  <View marginR-15>
+                                    <GoogleIcon />
+                                  </View>
+                                )}
+                                style={styles.addCalBtn}
+                                color="black"
+                                text70BL
+                              />
+
+                              {isSyncingGoogle ? (
+                                <ActivityIndicator />
+                              ) : (
+                                <Ionicons
+                                  name={"refresh"}
+                                  size={20}
+                                  color={"#000000"}
+                                />
+                              )}
+                            </View>
+                          </TouchableOpacity>
+                        )
+                      );
+                    }
+                  )}
+
+                {profileData?.appleAccounts &&
+                  Object.keys(profileData?.appleAccounts)?.map((appleEmail) => {
+                    const appleToken = profileData?.appleAccounts?.[appleEmail];
+                    return (
+                      appleToken && (
+                        <TouchableOpacity
+                          onPress={() =>
+                            fetchAndSaveAppleEvents({
+                              email: appleEmail,
+                              token: appleToken,
+                            })
+                          }
+                        >
+                          <View row paddingR-20 center>
+                            <Button
+                              disabled={isSyncingApple}
+                              onPress={() =>
+                                fetchAndSaveAppleEvents({
+                                  email: appleEmail,
+                                  token: appleToken,
+                                })
+                              }
+                              label={`Sync ${appleEmail}`}
+                              labelStyle={styles.addCalLbl}
+                              labelProps={{ numberOfLines: 3 }}
+                              iconSource={() => (
+                                <View marginR-15>
+                                  <AppleIcon />
+                                </View>
+                              )}
+                              style={styles.addCalBtn}
+                              color="black"
+                              text70BL
+                            />
+                            {isSyncingApple ? (
+                              <ActivityIndicator />
+                            ) : (
+                              <Ionicons
+                                name={"refresh"}
+                                size={20}
+                                color={"#000000"}
+                              />
+                            )}
+                          </View>
+                        </TouchableOpacity>
+                      )
+                    );
+                  })}
+
+                {profileData?.microsoftAccounts &&
+                  Object.keys(profileData?.microsoftAccounts)?.map(
+                    (microsoftEmail) => {
+                      const microsoftToken =
+                        profileData?.microsoftAccounts?.[microsoftEmail];
+                      return (
+                        microsoftToken && (
+                          <TouchableOpacity
+                            onPress={() =>
+                              fetchAndSaveOutlookEvents({
+                                token: microsoftToken,
+                                email: microsoftEmail,
+                              })
+                            }
+                          >
+                            <View row paddingR-20 center>
+                              <Button
+                                disabled={isSyncingOutlook}
+                                onPress={() =>
+                                  fetchAndSaveOutlookEvents({
+                                    token: microsoftToken,
+                                    email: microsoftEmail,
+                                  })
+                                }
+                                label={`Sync ${microsoftEmail}`}
+                                labelStyle={styles.addCalLbl}
+                                labelProps={{ numberOfLines: 3 }}
+                                iconSource={() => (
+                                  <View marginR-15>
+                                    <OutlookIcon />
+                                  </View>
+                                )}
+                                style={styles.addCalBtn}
+                                color="black"
+                                text70BL
+                              />
+                              {isSyncingOutlook ? (
+                                <ActivityIndicator />
+                              ) : (
+                                <Ionicons
+                                  name={"refresh"}
+                                  size={20}
+                                  color={"#000000"}
+                                />
+                              )}
+                            </View>
+                          </TouchableOpacity>
+                        )
+                      );
+                    }
+                  )}
+              </View>
+            </View>
+          </>
+        )}
+      </View>
+    </ScrollView>
+  );
 };
 
 const styles = StyleSheet.create({
-    addCalBtn: {
-        backgroundColor: "#ffffff",
-        marginBottom: 15,
-        justifyContent: "flex-start",
-        paddingLeft: 25,
-    },
-    backBtn: {
-        backgroundColor: "red",
-        marginLeft: -2,
-        justifyContent: "flex-start",
-    },
-    card: {
-        backgroundColor: "white",
-        width: "100%",
-        padding: 20,
-        paddingBottom: 30,
-        marginTop: 20,
-        borderRadius: 12,
-    },
-    noPaddingCard: {
-        backgroundColor: "white",
-        width: "100%",
-        marginTop: 20,
-        borderRadius: 12,
-    },
-    colorBox: {
-        aspectRatio: 1,
-        justifyContent: "center",
-        alignItems: "center",
-        width: 51,
-        borderRadius: 12,
-    },
-    checkbox: {
-        borderRadius: 50,
-    },
-    addCalLbl: {
-        fontSize: 16,
-        fontFamily: "PlusJakartaSan_500Medium",
-        flexWrap: "wrap",
-        width: "75%",
-        textAlign: "left",
-        lineHeight: 20,
-        overflow: "visible"
-    },
-    subTitle: {
-        fontFamily: "Manrope_600SemiBold",
-        fontSize: 18,
-    },
-    cardTitle: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 15,
-    },
+  addCalBtn: {
+    backgroundColor: "#ffffff",
+    marginBottom: 15,
+    justifyContent: "flex-start",
+    paddingLeft: 25,
+  },
+  backBtn: {
+    backgroundColor: "red",
+    marginLeft: -2,
+    justifyContent: "flex-start",
+  },
+  card: {
+    backgroundColor: "white",
+    width: "100%",
+    padding: 20,
+    paddingBottom: 30,
+    marginTop: 20,
+    borderRadius: 12,
+  },
+  noPaddingCard: {
+    backgroundColor: "white",
+    width: "100%",
+    marginTop: 20,
+    borderRadius: 12,
+  },
+  colorBox: {
+    aspectRatio: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    width: 51,
+    borderRadius: 12,
+  },
+  checkbox: {
+    borderRadius: 50,
+  },
+  addCalLbl: {
+    fontSize: 16,
+    fontFamily: "PlusJakartaSan_500Medium",
+    flexWrap: "wrap",
+    width: "75%",
+    textAlign: "left",
+    lineHeight: 20,
+    overflow: "visible",
+  },
+  subTitle: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 18,
+  },
+  cardTitle: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
 });
 
 export default CalendarSettingsPage;
diff --git a/components/pages/settings/ChoreRewardSettings.tsx b/components/pages/settings/ChoreRewardSettings.tsx
index 4330a87..0e0215e 100644
--- a/components/pages/settings/ChoreRewardSettings.tsx
+++ b/components/pages/settings/ChoreRewardSettings.tsx
@@ -4,30 +4,32 @@ import { Ionicons } from "@expo/vector-icons";
 import { ToDosContextProvider } from "@/contexts/ToDosContext";
 import ToDosList from "../todos/ToDosList";
 import { ScrollView } from "react-native-gesture-handler";
+import { settingsPageIndex } from "../calendar/atoms";
+import { useAtom } from "jotai";
+
+const ChoreRewardSettings = () => {
+  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
 
-const ChoreRewardSettings = (props: {
-  setSelectedPage: (page: number) => void;
-}) => {
   return (
     <ToDosContextProvider>
-      <View marginT-10 marginH-20>
+      <TouchableOpacity onPress={() => setPageIndex(0)}>
+        <View row marginT-20 marginB-20 marginL-20 centerV>
+          <Ionicons
+            name="chevron-back"
+            size={14}
+            color="#979797"
+            style={{ paddingBottom: 3 }}
+          />
+          <Text
+            style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
+            color="#979797"
+          >
+            Return to main settings
+          </Text>
+        </View>
+      </TouchableOpacity>
+      <View marginH-20>
         <ScrollView>
-          <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
-            <View row marginT-20 marginB-35 centerV>
-              <Ionicons
-                name="chevron-back"
-                size={14}
-                color="#979797"
-                style={{ paddingBottom: 3 }}
-              />
-              <Text
-                style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
-                color="#979797"
-              >
-                Return to main settings
-              </Text>
-            </View>
-          </TouchableOpacity>
           <Text text60R marginB-20>
             Chore Reward Settings
           </Text>
diff --git a/components/pages/settings/SettingsPage.tsx b/components/pages/settings/SettingsPage.tsx
index b90efe8..b999785 100644
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@@ -1,7 +1,7 @@
-import {Button, Text, View} from "react-native-ui-lib";
-import React, {useState} from "react";
-import {StyleSheet} from "react-native";
-import {Octicons} from "@expo/vector-icons";
+import { Button, Text, View } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+import { Octicons } from "@expo/vector-icons";
 import CalendarSettingsPage from "./CalendarSettingsPage";
 import ChoreRewardSettings from "./ChoreRewardSettings";
 import UserSettings from "./UserSettings";
@@ -9,120 +9,124 @@ import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import CalendarIcon from "@/assets/svgs/CalendarIcon";
 import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
 import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";
-import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import { settingsPageIndex } from "../calendar/atoms";
+import { useAtom } from "jotai";
 
 const pageIndex = {
-    main: 0,
-    user: 1,
-    calendar: 2,
-    chore: 3,
-    policy: 4,
+  main: 0,
+  user: 1,
+  calendar: 2,
+  chore: 3,
+  policy: 4,
 };
 
 const SettingsPage = () => {
-    const {profileData} = useAuthContext()
-    const isntParent = profileData?.userType !== ProfileType.PARENT
+  const { profileData } = useAuthContext();
+  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
+  const isntParent = profileData?.userType !== ProfileType.PARENT;
 
-    const [selectedPage, setSelectedPage] = useState<number>(0);
-    return (
-        <View flexG>
-            {selectedPage == 0 && (
-                <View flexG centerH marginH-30 marginT-30>
-                    <Button
-                        disabled={isntParent}
-                        backgroundColor="white"
-                        style={styles.mainBtn}
-                        children={
-                            <View row centerV width={"100%"}>
-                                <ProfileIcon style={{marginRight: 10}} color="#07b9c8"/>
-                                <Text style={[styles.label, isntParent && styles.disabledText]}>
-                                    Manage My Profile
-                                </Text>
-                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
-                            </View>
-                        }
-                        onPress={() => setSelectedPage(pageIndex.user)}
-                    />
-                    <Button
-                        disabled={isntParent}
-                        backgroundColor="white"
-                        style={styles.mainBtn}
-                        children={
-                            <View row centerV width={"100%"}>
-                                <CalendarIcon style={{marginRight: 10}}/>
-                                <Text style={[styles.label, isntParent && styles.disabledText]}>
-                                    Calendar Settings
-                                </Text>
-                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
-                            </View>
-                        }
-                        onPress={() => {
-                            setSelectedPage(pageIndex.calendar);
-                        }}
-                    />
-                    <Button
-                        disabled={isntParent}
-                        backgroundColor="white"
-                        style={styles.mainBtn}
-                        children={
-                            <View row centerV width={"100%"}>
-                                <Octicons
-                                    name="gear"
-                                    size={24}
-                                    color="#ff9900"
-                                    style={{marginRight: 10}}
-                                />
-                                <Text style={[styles.label, isntParent && styles.disabledText]}>
-                                    To-Do Reward Settings
-                                </Text>
-                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
-                            </View>
-                        }
-                        onPress={() => setSelectedPage(pageIndex.chore)}
-                    />
-                    <Button
-                        backgroundColor="white"
-                        style={styles.mainBtn}
-                        children={
-                            <View row centerV width={"100%"}>
-                                <PrivacyPolicyIcon style={{marginRight: 10}}/>
-                                <Text style={styles.label}>
-                                    Cally Privacy Policy
-                                </Text>
-                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
-                            </View>
-                        }
-                    />
-                </View>
-            )}
-            {selectedPage == pageIndex.calendar && (
-                <CalendarSettingsPage setSelectedPage={setSelectedPage}/>
-            )}
-            {selectedPage == pageIndex.chore && (
-                <ChoreRewardSettings setSelectedPage={setSelectedPage}/>
-            )}
-            {selectedPage == pageIndex.user && (
-                <UserSettings setSelectedPage={setSelectedPage}/>
-            )}
+  return (
+    <View flexG>
+      {pageIndex == 0 && (
+        <View flexG centerH marginH-30 marginT-30>
+          <Button
+            disabled={isntParent}
+            backgroundColor="white"
+            style={styles.mainBtn}
+            children={
+              <View row centerV width={"100%"}>
+                <ProfileIcon style={{ marginRight: 10 }} color="#07b9c8" />
+                <Text
+                  style={[
+                    styles.label,
+                    isntParent ? styles.disabledText : { color: "#07b9c8" },
+                  ]}
+                >
+                  Manage My Profile
+                </Text>
+                <ArrowRightIcon style={{ marginLeft: "auto" }} />
+              </View>
+            }
+            onPress={() => setPageIndex(1)}
+          />
+          <Button
+            disabled={isntParent}
+            backgroundColor="white"
+            style={styles.mainBtn}
+            children={
+              <View row centerV width={"100%"}>
+                <CalendarIcon style={{ marginRight: 10 }} />
+                <Text
+                  style={[
+                    styles.label,
+                    isntParent ? styles.disabledText : { color: "#FD1775" },
+                  ]}
+                >
+                  Calendar Settings
+                </Text>
+                <ArrowRightIcon style={{ marginLeft: "auto" }} />
+              </View>
+            }
+            onPress={() => {
+              setPageIndex(2);
+            }}
+          />
+          <Button
+            disabled={isntParent}
+            backgroundColor="white"
+            style={styles.mainBtn}
+            children={
+              <View row centerV width={"100%"}>
+                <Octicons
+                  name="gear"
+                  size={24}
+                  color="#ff9900"
+                  style={{ marginRight: 10 }}
+                />
+                <Text style={[styles.label, isntParent ? styles.disabledText : {color: "#ff9900"}]}>
+                  To-Do Reward Settings
+                </Text>
+                <ArrowRightIcon style={{ marginLeft: "auto" }} />
+              </View>
+            }
+            onPress={() => setPageIndex(3)}
+          />
+          <Button
+            backgroundColor="white"
+            style={styles.mainBtn}
+            children={
+              <View row centerV width={"100%"}>
+                <PrivacyPolicyIcon style={{ marginRight: 10 }} />
+                <Text style={[styles.label]} color={"#6C645B"}>Cally Privacy Policy</Text>
+                <ArrowRightIcon style={{ marginLeft: "auto" }} />
+              </View>
+            }
+          />
         </View>
-    );
+      )}
+      {pageIndex == 2 && <CalendarSettingsPage />}
+      {pageIndex == 3 && <ChoreRewardSettings />}
+      {pageIndex == 1 && <UserSettings />}
+    </View>
+  );
 };
 
 export default SettingsPage;
 
 const styles = StyleSheet.create({
-    mainBtn: {
-        width: 311,
-        justifyContent: "flex-start",
-        marginBottom: 20,
-        height: 57.61,
-    },
-    label: {
-        fontFamily: "Poppins_400Regular",
-        fontSize: 14.71,
-        textAlignVertical: "center",
-    },
-    disabledText: {
-        color: '#A9A9A9', // Example of a gray color for disabled text
-    },
-});
\ No newline at end of file
+  mainBtn: {
+    width: 311,
+    justifyContent: "flex-start",
+    marginBottom: 20,
+    height: 57.61,
+  },
+  label: {
+    fontFamily: "Poppins_400Regular",
+    fontSize: 14.71,
+    textAlignVertical: "center",
+  },
+  disabledText: {
+    color: "#A9A9A9", // Example of a gray color for disabled text
+  },
+});
diff --git a/components/pages/settings/UserSettings.tsx b/components/pages/settings/UserSettings.tsx
index b1008d0..a017924 100644
--- a/components/pages/settings/UserSettings.tsx
+++ b/components/pages/settings/UserSettings.tsx
@@ -4,70 +4,86 @@ import { Ionicons } from "@expo/vector-icons";
 import { ScrollView, StyleSheet } from "react-native";
 import MyProfile from "./user_settings_views/MyProfile";
 import MyGroup from "./user_settings_views/MyGroup";
+import { useAtom } from "jotai";
+import { settingsPageIndex, userSettingsView } from "../calendar/atoms";
+import { AuthContextProvider } from "@/contexts/AuthContext";
 
-const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
-  const [selectedView, setSelectedView] = useState<boolean>(true);
+const UserSettings = () => {
+  const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
+  const [userView, setUserView] = useAtom(userSettingsView);
   return (
-    <View flexG>
-      <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
-        <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
-        <View row marginT-20 marginB-35 centerV>
-            <Ionicons name="chevron-back" size={14} color="#979797" style={{paddingBottom: 3}} />
-            <Text
-              style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
-              color="#979797"
-            >
-              Return to main settings
+    <AuthContextProvider>
+      <View flexG>
+        <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
+          <TouchableOpacity
+            onPress={() => {
+              setPageIndex(0);
+              setUserView(true);
+            }}
+          >
+            <View row marginT-20 marginB-20 marginL-20 centerV>
+              <Ionicons
+                name="chevron-back"
+                size={14}
+                color="#979797"
+                style={{ paddingBottom: 3 }}
+              />
+              <Text
+                style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
+                color="#979797"
+              >
+                Return to main settings
+              </Text>
+            </View>
+          </TouchableOpacity>
+          <View marginH-26 flexG style={{ minHeight: "90%" }}>
+            <Text text60R marginB-25>
+              User Management
             </Text>
+            <View style={styles.buttonSwitch} spread row>
+              <TouchableOpacity
+                onPress={() => setUserView(true)}
+                centerV
+                centerH
+                style={userView == true ? styles.btnSelected : styles.btnNot}
+              >
+                <View>
+                  <Text
+                    style={styles.btnTxt}
+                    color={userView ? "white" : "black"}
+                  >
+                    My Profile
+                  </Text>
+                </View>
+              </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => setUserView(false)}
+                centerV
+                centerH
+                style={userView == false ? styles.btnSelected : styles.btnNot}
+              >
+                <View>
+                  <Text
+                    style={styles.btnTxt}
+                    color={!userView ? "white" : "black"}
+                  >
+                    My Group
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            {userView && <MyProfile />}
+            {!userView && <MyGroup />}
           </View>
-        </TouchableOpacity>
-        <View marginH-20 flexG style={{ minHeight: "90%" }}>
-          <Text text60R marginB-25>
-            User Management
-          </Text>
-          <View style={styles.buttonSwitch} spread row>
-            <TouchableOpacity
-              onPress={() => setSelectedView(true)}
-              centerV
-              centerH
-              style={selectedView == true ? styles.btnSelected : styles.btnNot}
-            >
-              <View>
-                <Text
-                  style={styles.btnTxt}
-                  color={selectedView ? "white" : "black"}
-                >
-                  My Profile
-                </Text>
-              </View>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setSelectedView(false)}
-              centerV
-              centerH
-              style={selectedView == false ? styles.btnSelected : styles.btnNot}
-            >
-              <View>
-                <Text
-                  style={styles.btnTxt}
-                  color={!selectedView ? "white" : "black"}
-                >
-                  My Group
-                </Text>
-              </View>
-            </TouchableOpacity>
-          </View>
-          {selectedView && <MyProfile />}
-          {!selectedView && <MyGroup />}
-        </View>
-      </ScrollView>
+        </ScrollView>
 
-      {!selectedView && (
-        <View>
-          <Text>selview</Text>
-        </View>
-      )}
-    </View>
+        {!userView && (
+          <View>
+            <Text>selview</Text>
+          </View>
+        )}
+      </View>
+    </AuthContextProvider>
   );
 };
 
diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx
index fc313a7..c0e9055 100644
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@@ -1,561 +1,589 @@
 import {
-    Avatar,
-    Button,
-    Card,
-    Colors,
-    Dialog,
-    FloatingButton,
-    KeyboardAwareScrollView,
-    PanningProvider,
-    Picker,
-    Text,
-    TextField,
-    TextFieldRef,
-    TouchableOpacity,
-    View,
+  Avatar,
+  Button,
+  Card,
+  Colors,
+  Dialog,
+  FloatingButton,
+  KeyboardAwareScrollView,
+  PanningProvider,
+  Picker,
+  Text,
+  TextField,
+  TextFieldRef,
+  TouchableOpacity,
+  View,
 } from "react-native-ui-lib";
-import React, {useEffect, useRef, useState} from "react";
-import {ScrollView, StyleSheet} from "react-native";
-import {PickerSingleValue} from "react-native-ui-lib/src/components/picker/types";
-import {useCreateSubUser} from "@/hooks/firebase/useCreateSubUser";
-import {ProfileType} from "@/contexts/AuthContext";
-import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
+import React, { useEffect, useRef, useState } from "react";
+import { ImageBackground, ScrollView, StyleSheet } from "react-native";
+import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types";
+import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import UserMenu from "@/components/pages/settings/user_settings_views/UserMenu";
-import {uuidv4} from "@firebase/util";
+import { uuidv4 } from "@firebase/util";
 import QRIcon from "@/assets/svgs/QRIcon";
 import EmailIcon from "@/assets/svgs/EmailIcon";
 import CircledXIcon from "@/assets/svgs/CircledXIcon";
 import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import Ionicons from "@expo/vector-icons/Ionicons";
-import {PreviousNextView} from "react-native-keyboard-manager";
+import { PreviousNextView } from "react-native-keyboard-manager";
 
 const MyGroup = () => {
-    const [showAddUserDialog, setShowAddUserDialog] = useState(false);
-    const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
-    const [selectedStatus, setSelectedStatus] = useState<
-        string | PickerSingleValue
-    >(ProfileType.CHILD);
-    const [firstName, setFirstName] = useState("");
-    const [lastName, setLastName] = useState("");
-    const [email, setEmail] = useState("");
+  const [showAddUserDialog, setShowAddUserDialog] = useState(false);
+  const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
+  const [selectedStatus, setSelectedStatus] = useState<
+    string | PickerSingleValue
+  >(ProfileType.CHILD);
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
 
-    const lNameRef = useRef<TextFieldRef>(null);
-    const emailRef = useRef<TextFieldRef>(null);
+  const lNameRef = useRef<TextFieldRef>(null);
+  const emailRef = useRef<TextFieldRef>(null);
 
-    const [showQRCodeDialog, setShowQRCodeDialog] = useState<string | boolean>(false);
+  const [showQRCodeDialog, setShowQRCodeDialog] = useState<string | boolean>(
+    false
+  );
 
-    const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser();
-    const {data: familyMembers} = useGetFamilyMembers(true);
+  const { mutateAsync: createSubUser, isLoading, isError } = useCreateSubUser();
+  const { data: familyMembers } = useGetFamilyMembers(true);
+  const { user } = useAuthContext();
 
-    const parents =
-        familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? [];
-    const children =
-        familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? [];
-    const caregivers =
-        familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? [];
-    const familyDevices =
-        familyMembers?.filter((x) => x.userType === ProfileType.FAMILY_DEVICE) ??
-        [];
+  const parents =
+    familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? [];
+  const children =
+    familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? [];
+  const caregivers =
+    familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? [];
+  const familyDevices =
+    familyMembers?.filter((x) => x.userType === ProfileType.FAMILY_DEVICE) ??
+    [];
 
-    const handleCreateSubUser = async () => {
-        if (
-            !firstName ||
-            (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName)
-        ) {
-            console.error("First name and last name are required");
-            return;
-        }
+  const handleCreateSubUser = async () => {
+    if (
+      !firstName ||
+      (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName)
+    ) {
+      console.error("First name and last name are required");
+      return;
+    }
 
-        // if (selectedStatus !== ProfileType.FAMILY_DEVICE && !email) {
-        //     console.error("Email is required for non-family device users");
-        //     return;
-        // }
+    // if (selectedStatus !== ProfileType.FAMILY_DEVICE && !email) {
+    //     console.error("Email is required for non-family device users");
+    //     return;
+    // }
 
-        if (email && !email.includes("@")) {
-            console.error("Invalid email address");
-            return;
-        }
+    if (email && !email.includes("@")) {
+      console.error("Invalid email address");
+      return;
+    }
 
-        const res = await createSubUser({
-            firstName,
-            lastName: selectedStatus === ProfileType.FAMILY_DEVICE ? "" : lastName,
-            email: email || `placeholder_${uuidv4().split("-")[0]}@family.device`,
-            password: uuidv4(),
-            userType: selectedStatus as ProfileType,
-        });
-        console.log(res);
+    const res = await createSubUser({
+      firstName,
+      lastName: selectedStatus === ProfileType.FAMILY_DEVICE ? "" : lastName,
+      email: email || `placeholder_${uuidv4().split("-")[0]}@family.device`,
+      password: uuidv4(),
+      userType: selectedStatus as ProfileType,
+    });
+    console.log(res);
 
-        if (!isError) {
-            setShowNewUserInfoDialog(false);
+    if (!isError) {
+      setShowNewUserInfoDialog(false);
 
-            if (res?.data?.userId) {
-                setTimeout(() => {
-                    setShowQRCodeDialog(res.data.userId);
-                }, 500);
-            }
-        }
-    };
+      if (res?.data?.userId) {
+        setTimeout(() => {
+          setShowQRCodeDialog(res.data.userId);
+        }, 500);
+      }
+    }
+  };
 
-    useEffect(() => {
-        setFirstName("");
-        setLastName("");
-        setEmail("");
-    }, [])
+  useEffect(() => {
+    setFirstName("");
+    setLastName("");
+    setEmail("");
+  }, []);
 
+  // @ts-ignore
+  return (
+    <View style={{ flex: 1, minHeight: 500 }}>
+      <View>
+        <ScrollView style={styles.card}>
+          {!parents.length && !children.length && !caregivers.length && (
+            <Text text70 marginV-10>
+              {isLoading ? "Loading...." : "No user devices added"}
+            </Text>
+          )}
 
-    // @ts-ignore
-    return (
-        <View style={{flex: 1, minHeight: 500}}>
-            <View>
-                <ScrollView style={styles.card}>
-                    {!parents.length && !children.length && !caregivers.length && (
-                        <Text text70 marginV-10>
-                            {isLoading ? "Loading...." : "No user devices added"}
-                        </Text>
-                    )}
-
-                    {(!!parents.length || !!children.length) && (
-                        <>
-                            <Text style={styles.subTit} marginV-10>
-                                Family
-                            </Text>
-                            {[...parents, ...children]?.map((member, index) => (
-                                <Card
-                                    enableShadow={false}
-                                    elevation={0}
-                                    key={`${member.firstName}_${member.lastName}_${index}`}
-                                    style={styles.familyCard}
-                                    row
-                                    centerV
-                                    padding-10
-                                >
-                                    <Avatar
-                                        source={{uri: "https://via.placeholder.com/60"}}
-                                        size={40}
-                                        backgroundColor={Colors.grey60}
-                                    />
-                                    <View marginL-10>
-                                        <Text text70M>
-                                            {member.firstName} {member.lastName}
-                                        </Text>
-                                        <Text text90 grey40>
-                                            {member.userType === ProfileType.PARENT
-                                                ? "Admin (You)"
-                                                : "Child"}
-                                        </Text>
-                                    </View>
-
-                                    <View flex-1/>
-
-                                    <UserMenu
-                                        setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                                        showQRCodeDialog={showQRCodeDialog === member?.uid}
-                                        userId={member?.uid!}
-                                    />
-                                </Card>
-                            ))}
-                        </>
-                    )}
-
-                    {!!caregivers.length && (
-                        <>
-                            <Text text70 marginB-10 marginT-15>
-                                Caregivers
-                            </Text>
-                            {caregivers?.map((member) => (
-                                <Card
-                                    enableShadow={false}
-                                    elevation={0}
-                                    key={`${member.firstName}_${member.lastName}`}
-                                    style={styles.familyCard}
-                                    row
-                                    centerV
-                                    padding-10
-                                >
-                                    <Avatar
-                                        source={{uri: member?.pfp ?? undefined}}
-                                        size={40}
-                                        backgroundColor={Colors.grey60}
-                                    />
-                                    <View marginL-10>
-                                        <Text text70M>
-                                            {member.firstName} {member.lastName}
-                                        </Text>
-                                        <Text text90 grey40>
-                                            Caregiver
-                                        </Text>
-                                    </View>
-
-                                    <View flex-1/>
-
-                                    <UserMenu
-                                        setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                                        showQRCodeDialog={showQRCodeDialog === member?.uid}
-                                        userId={member?.uid!}
-                                    />
-                                </Card>
-                            ))}
-                        </>
-                    )}
-
-                    {!!familyDevices.length && (
-                        <>
-                            <Text text70 marginB-10 marginT-15>
-                                Family Devices
-                            </Text>
-                            {familyDevices?.map((member, index) => (
-                                <Card
-                                    enableShadow={false}
-                                    elevation={0}
-                                    key={`${member.firstName}_${member.lastName}_${index}`}
-                                    style={styles.familyCard}
-                                    row
-                                    centerV
-                                    padding-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>
-                                    </View>
-
-                                    <View flex-1/>
-
-                                    <UserMenu
-                                        setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
-                                        showQRCodeDialog={showQRCodeDialog === member?.uid}
-                                        userId={member?.uid!}
-                                    />
-                                </Card>
-                            ))}
-                        </>
-                    )}
-                </ScrollView>
-            </View>
-
-            <FloatingButton
-                fullWidth
-                hideBackgroundOverlay
-                visible
-                button={{
-                    label: "+ Add a user device",
-                    onPress: () => setShowNewUserInfoDialog(true),
-                    style: styles.bottomButton,
-                }}
-            />
-
-            <Dialog
-                visible={showAddUserDialog}
-                onDismiss={() => setShowAddUserDialog(false)}
-                panDirection={PanningProvider.Directions.DOWN}
-            >
+          {(!!parents.length || !!children.length) && (
+            <>
+              <Text style={styles.subTit} marginB-10>
+                Family
+              </Text>
+              {[...parents, ...children]?.map((member, index) => (
                 <Card
-                    paddingH-25
-                    paddingT-40
-                    paddingB-20
-                    gap-10
-                    centerH
-                    borderRadius={20}
+                  enableShadow={false}
+                  elevation={0}
+                  key={`${member.firstName}_${member.lastName}_${index}`}
+                  style={styles.familyCard}
+                  row
+                  centerV
+                  paddingT-10
                 >
-                    <Text style={styles.dialogTitle} marginB-35>
-                        Add a new user device
+                  {member.pfp ? (
+                    <ImageBackground
+                      style={styles.pfp}
+                      borderRadius={10.56}
+                      source={{ uri: member.pfp || undefined }}
+                    />
+                  ) : (
+                    <View style={[styles.pfp, {backgroundColor: "#ea156d"}]} />
+                  )}
+                  <View row marginL-10 centerV>
+                    <Text style={styles.name}>
+                      {member.firstName} {member.lastName}
                     </Text>
-
-                    <Button backgroundColor={"#FD1775"} style={styles.dialogBtn}>
-                        <QRIcon/>
-                        <Text style={styles.dialogBtnLbl} marginL-7>
-                            Show a QR Code
-                        </Text>
-                    </Button>
-                    <Button
-                        style={styles.dialogBtn}
-                        backgroundColor={"#05A8B6"}
-                        onPress={() => {
-                            setShowAddUserDialog(false);
-                            setTimeout(() => {
-                                setShowNewUserInfoDialog(true);
-                            }, 500);
-                        }}
-                    >
-                        <EmailIcon/>
-                        <Text style={styles.dialogBtnLbl} marginL-7>
-                            Enter email address
-                        </Text>
-                    </Button>
-
-                    <TouchableOpacity
-                        onPress={() => setShowAddUserDialog(false)}
-                        center
-                        marginT-30
-                    >
-                        <Text style={styles.dialogBackBtn}>Return to user settings</Text>
-                    </TouchableOpacity>
+                  </View>
+                  <View flexG />
+                  <View row centerV gap-10>
+                    <Text style={styles.userType}>
+                      {member.userType === ProfileType.PARENT
+                        ? `Admin${
+                            member.uid === user?.uid ? " (You)" : ""
+                          }`
+                        : "Child"}
+                    </Text>
+                    <UserMenu
+                      setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                      showQRCodeDialog={showQRCodeDialog === member?.uid}
+                      userId={member?.uid!}
+                    />
+                  </View>
                 </Card>
-            </Dialog>
+              ))}
+            </>
+          )}
 
-            <Dialog
-                panDirection={PanningProvider.Directions.DOWN}
-                visible={showNewUserInfoDialog}
-                onDismiss={() => setShowNewUserInfoDialog(false)}
-            >
-                <PreviousNextView>
-                    <KeyboardAwareScrollView>
-                        <Card padding-25 style={styles.dialogCard}>
-                            <View row spread>
-                                <Text style={{fontFamily: "Manrope_500Medium", fontSize: 16}}>
-                                    New User Information
-                                </Text>
-                                <TouchableOpacity onPress={() => {
-                                    setShowNewUserInfoDialog(false)
-                                }}>
-                                    <CircledXIcon/>
-                                </TouchableOpacity>
-                            </View>
-                            <View style={styles.divider} spread/>
+          {!!caregivers.length && (
+            <>
+              <Text style={styles.subTit} marginB-10 marginT-15>
+                Caregivers
+              </Text>
+              {caregivers?.map((member) => (
+                <Card
+                  enableShadow={false}
+                  elevation={0}
+                  key={`${member.firstName}_${member.lastName}`}
+                  style={styles.familyCard}
+                  row
+                  centerV
+                  padding-10
+                >
+                  <Avatar
+                    source={{ uri: member?.pfp ?? undefined }}
+                    size={40}
+                    backgroundColor={Colors.grey60}
+                  />
+                  <View marginL-10>
+                    <Text text70M>
+                      {member.firstName} {member.lastName}
+                    </Text>
+                    <Text text90 grey40>
+                      Caregiver
+                    </Text>
+                  </View>
 
-                            <View row centerV gap-20 marginV-20>
-                                <View
-                                    height={65.54}
-                                    width={65.54}
-                                    children={
-                                        <ProfileIcon color={"#d6d6d6"} width={37} height={37}/>
-                                    }
-                                    backgroundColor={Colors.grey60}
-                                    style={{borderRadius: 25}}
-                                    center
-                                />
-                                <TouchableOpacity onPress={() => {
-                                }}>
-                                    <Text color="#50be0c" style={styles.jakarta13} marginL-15>
-                                        Upload User Profile Photo
-                                    </Text>
-                                </TouchableOpacity>
-                            </View>
+                  <View flex-1 />
 
-                            <Text style={styles.jakarta12}>Member Status</Text>
-                            <View style={styles.viewPicker}>
-                                <Picker
-                                    editable={!isLoading}
-                                    value={selectedStatus}
-                                    onChange={(item) => setSelectedStatus(item)}
-                                    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>
-                                    }
-                                >
-                                    <Picker.Item label="Child" value={ProfileType.CHILD}/>
-                                    <Picker.Item label="Parent" value={ProfileType.PARENT}/>
-                                    <Picker.Item label="Caregiver" value={ProfileType.CAREGIVER}/>
-                                    <Picker.Item
-                                        label="Family Device"
-                                        value={ProfileType.FAMILY_DEVICE}
-                                    />
-                                </Picker>
-                            </View>
+                  <UserMenu
+                    setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                    showQRCodeDialog={showQRCodeDialog === member?.uid}
+                    userId={member?.uid!}
+                  />
+                </Card>
+              ))}
+            </>
+          )}
 
-                            <Text style={styles.jakarta12}>
-                                {selectedStatus === ProfileType.FAMILY_DEVICE
-                                    ? "Device Name"
-                                    : "First Name"}
-                            </Text>
-                            <TextField
-                                editable={!isLoading}
-                                placeholder={
-                                    selectedStatus === ProfileType.FAMILY_DEVICE
-                                        ? "Device name"
-                                        : "First name"
-                                }
-                                value={firstName}
-                                onChangeText={setFirstName}
-                                style={styles.inputField}
-                                onSubmitEditing={() => {
-                                    lNameRef.current?.focus()
-                                }}
-                                blurOnSubmit={false}
-                                returnKeyType="next"
-                            />
+          {!!familyDevices.length && (
+            <>
+              <Text text70 marginB-10 marginT-15>
+                Family Devices
+              </Text>
+              {familyDevices?.map((member, index) => (
+                <Card
+                  enableShadow={false}
+                  elevation={0}
+                  key={`${member.firstName}_${member.lastName}_${index}`}
+                  style={styles.familyCard}
+                  row
+                  centerV
+                  padding-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>
+                  </View>
 
-                            {selectedStatus !== ProfileType.FAMILY_DEVICE && (
-                                <>
-                                    <Text style={styles.jakarta12}>Last Name</Text>
-                                    <TextField
-                                        ref={lNameRef}
-                                        editable={!isLoading}
-                                        placeholder="Last name"
-                                        value={lastName}
-                                        onChangeText={setLastName}
-                                        style={styles.inputField}
-                                        onSubmitEditing={() => {
-                                            emailRef.current?.focus()
-                                        }}
-                                        blurOnSubmit={false}
-                                        returnKeyType="next"
+                  <View flex-1 />
 
-                                    />
-                                </>
-                            )}
+                  <UserMenu
+                    setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
+                    showQRCodeDialog={showQRCodeDialog === member?.uid}
+                    userId={member?.uid!}
+                  />
+                </Card>
+              ))}
+            </>
+          )}
+        </ScrollView>
+      </View>
 
-                            {selectedStatus !== ProfileType.FAMILY_DEVICE && (
-                                <>
-                                    <Text style={styles.jakarta12}>Email Address (Optional)</Text>
-                                    <TextField
-                                        ref={emailRef}
-                                        editable={!isLoading}
-                                        placeholder="Email address"
-                                        value={email}
-                                        onChangeText={setEmail}
-                                        keyboardType="email-address"
-                                        autoCapitalize="none"
-                                        style={styles.inputField}
-                                        returnKeyType="done"
-                                    />
-                                </>
-                            )}
+      <FloatingButton
+        fullWidth
+        hideBackgroundOverlay
+        visible
+        button={{
+          label: "+ Add a user device",
+          onPress: () => setShowNewUserInfoDialog(true),
+          style: styles.bottomButton,
+        }}
+      />
 
-                            <Button
-                                disabled={
-                                    !firstName ||
-                                    (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName) ||
-                                    isLoading
-                                }
-                                label={isLoading ? "Adding..." : "Add group member"}
-                                backgroundColor="#fd1775"
-                                labelStyle={{
-                                    fontFamily: "PlusJakartaSans_500Medium",
-                                    fontSize: 15,
-                                    marginLeft: 7,
-                                }}
-                                style={{marginTop: 20, backgroundColor: "#fd1775"}}
-                                iconSource={() => <NavToDosIcon width={22} color={"white"}/>}
-                                onPress={handleCreateSubUser}
-                            />
-                        </Card>
-                    </KeyboardAwareScrollView>
-                </PreviousNextView>
-            </Dialog>
-        </View>
-    );
+      <Dialog
+        visible={showAddUserDialog}
+        onDismiss={() => setShowAddUserDialog(false)}
+        panDirection={PanningProvider.Directions.DOWN}
+      >
+        <Card
+          paddingH-25
+          paddingT-40
+          paddingB-20
+          gap-10
+          centerH
+          borderRadius={20}
+        >
+          <Text style={styles.dialogTitle} marginB-35>
+            Add a new user device
+          </Text>
+
+          <Button backgroundColor={"#FD1775"} style={styles.dialogBtn}>
+            <QRIcon />
+            <Text style={styles.dialogBtnLbl} marginL-7>
+              Show a QR Code
+            </Text>
+          </Button>
+          <Button
+            style={styles.dialogBtn}
+            backgroundColor={"#05A8B6"}
+            onPress={() => {
+              setShowAddUserDialog(false);
+              setTimeout(() => {
+                setShowNewUserInfoDialog(true);
+              }, 500);
+            }}
+          >
+            <EmailIcon />
+            <Text style={styles.dialogBtnLbl} marginL-7>
+              Enter email address
+            </Text>
+          </Button>
+
+          <TouchableOpacity
+            onPress={() => setShowAddUserDialog(false)}
+            center
+            marginT-30
+          >
+            <Text style={styles.dialogBackBtn}>Return to user settings</Text>
+          </TouchableOpacity>
+        </Card>
+      </Dialog>
+
+      <Dialog
+        panDirection={PanningProvider.Directions.DOWN}
+        visible={showNewUserInfoDialog}
+        onDismiss={() => setShowNewUserInfoDialog(false)}
+      >
+        <PreviousNextView>
+          <KeyboardAwareScrollView>
+            <Card padding-25 style={styles.dialogCard}>
+              <View row spread>
+                <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 16 }}>
+                  New User Information
+                </Text>
+                <TouchableOpacity
+                  onPress={() => {
+                    setShowNewUserInfoDialog(false);
+                  }}
+                >
+                  <CircledXIcon />
+                </TouchableOpacity>
+              </View>
+              <View style={styles.divider} spread />
+
+              <View row centerV gap-20 marginV-20>
+                <View
+                  height={65.54}
+                  width={65.54}
+                  children={
+                    <ProfileIcon color={"#d6d6d6"} width={37} height={37} />
+                  }
+                  backgroundColor={Colors.grey60}
+                  style={{ borderRadius: 25 }}
+                  center
+                />
+                <TouchableOpacity onPress={() => {}}>
+                  <Text color="#50be0c" style={styles.jakarta13} marginL-15>
+                    Upload User Profile Photo
+                  </Text>
+                </TouchableOpacity>
+              </View>
+
+              <Text style={styles.jakarta12}>Member Status</Text>
+              <View style={styles.viewPicker}>
+                <Picker
+                  editable={!isLoading}
+                  value={selectedStatus}
+                  onChange={(item) => setSelectedStatus(item)}
+                  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>
+                  }
+                >
+                  <Picker.Item label="Child" value={ProfileType.CHILD} />
+                  <Picker.Item label="Parent" value={ProfileType.PARENT} />
+                  <Picker.Item
+                    label="Caregiver"
+                    value={ProfileType.CAREGIVER}
+                  />
+                  <Picker.Item
+                    label="Family Device"
+                    value={ProfileType.FAMILY_DEVICE}
+                  />
+                </Picker>
+              </View>
+
+              <Text style={styles.jakarta12}>
+                {selectedStatus === ProfileType.FAMILY_DEVICE
+                  ? "Device Name"
+                  : "First Name"}
+              </Text>
+              <TextField
+                editable={!isLoading}
+                placeholder={
+                  selectedStatus === ProfileType.FAMILY_DEVICE
+                    ? "Device name"
+                    : "First name"
+                }
+                value={firstName}
+                onChangeText={setFirstName}
+                style={styles.inputField}
+                onSubmitEditing={() => {
+                  lNameRef.current?.focus();
+                }}
+                blurOnSubmit={false}
+                returnKeyType="next"
+              />
+
+              {selectedStatus !== ProfileType.FAMILY_DEVICE && (
+                <>
+                  <Text style={styles.jakarta12}>Last Name</Text>
+                  <TextField
+                    ref={lNameRef}
+                    editable={!isLoading}
+                    placeholder="Last name"
+                    value={lastName}
+                    onChangeText={setLastName}
+                    style={styles.inputField}
+                    onSubmitEditing={() => {
+                      emailRef.current?.focus();
+                    }}
+                    blurOnSubmit={false}
+                    returnKeyType="next"
+                  />
+                </>
+              )}
+
+              {selectedStatus !== ProfileType.FAMILY_DEVICE && (
+                <>
+                  <Text style={styles.jakarta12}>Email Address (Optional)</Text>
+                  <TextField
+                    ref={emailRef}
+                    editable={!isLoading}
+                    placeholder="Email address"
+                    value={email}
+                    onChangeText={setEmail}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                    style={styles.inputField}
+                    returnKeyType="done"
+                  />
+                </>
+              )}
+
+              <Button
+                disabled={
+                  !firstName ||
+                  (selectedStatus !== ProfileType.FAMILY_DEVICE && !lastName) ||
+                  isLoading
+                }
+                label={isLoading ? "Adding..." : "Add group member"}
+                backgroundColor="#fd1775"
+                labelStyle={{
+                  fontFamily: "PlusJakartaSans_500Medium",
+                  fontSize: 15,
+                  marginLeft: 7,
+                }}
+                style={{ marginTop: 20, backgroundColor: "#fd1775" }}
+                iconSource={() => <NavToDosIcon width={22} color={"white"} />}
+                onPress={handleCreateSubUser}
+              />
+            </Card>
+          </KeyboardAwareScrollView>
+        </PreviousNextView>
+      </Dialog>
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    dialogBtn: {
-        height: 47,
-        width: 279,
-    },
-    dialogTitle: {fontFamily: "Manrope_600SemiBold", fontSize: 22},
-    dialogBackBtn: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 15,
-        color: "#a7a7a7",
-    },
-    card: {
-        marginVertical: 15,
-        backgroundColor: "white",
-        width: "100%",
-        borderRadius: 15,
-        padding: 20,
-    },
-    bottomButton: {
-        position: "absolute",
-        bottom: 80,
-        width: "100%",
-    },
-    familyCard: {
-        marginBottom: 10,
-        borderRadius: 10,
-        backgroundColor: Colors.white,
-        width: "100%",
-    },
-    inputField: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 13,
-        color: "#565656",
-        borderRadius: 50,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        backgroundColor: Colors.grey80,
-        marginBottom: 16,
-        borderColor: Colors.grey50,
-        borderWidth: 1,
-        height: 40,
-    },
-    picker: {
-        borderRadius: 50,
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        backgroundColor: Colors.grey80,
-        marginBottom: 16,
-        borderColor: Colors.grey50,
-        borderWidth: 1,
-        marginTop: -20,
-        height: 40,
-        zIndex: 10,
-    },
-    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,
-    },
-    label: {
-        marginBottom: 5,
-        fontSize: 12,
-        color: Colors.grey40,
-    },
-    dialogCard: {
-        borderRadius: 10,
-        gap: 10,
-    },
-    subTit: {
-        fontFamily: "Manrope_500Medium",
-        fontSize: 15,
-    },
-    dialogBtnLbl: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 15,
-        color: "white",
-    },
-    divider: {height: 0.7, backgroundColor: "#e6e6e6", width: "100%"},
-    jakarta12: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 12,
-        color: "#a1a1a1",
-    },
-    jakarta13: {
-        fontFamily: "PlusJakartaSans_500Medium",
-        fontSize: 13,
-    },
+  dialogBtn: {
+    height: 47,
+    width: 279,
+  },
+  dialogTitle: { fontFamily: "Manrope_600SemiBold", fontSize: 22 },
+  dialogBackBtn: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 15,
+    color: "#a7a7a7",
+  },
+  card: {
+    marginVertical: 15,
+    backgroundColor: "white",
+    width: "100%",
+    borderRadius: 12,
+    paddingHorizontal: 21,
+    paddingVertical: 20,
+  },
+  bottomButton: {
+    position: "absolute",
+    bottom: 80,
+    width: "100%",
+  },
+  familyCard: {
+    marginBottom: 10,
+    borderRadius: 10,
+    backgroundColor: Colors.white,
+    width: "100%",
+  },
+  inputField: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+    color: "#565656",
+    borderRadius: 50,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: Colors.grey80,
+    marginBottom: 16,
+    borderColor: Colors.grey50,
+    borderWidth: 1,
+    height: 40,
+  },
+  picker: {
+    borderRadius: 50,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: Colors.grey80,
+    marginBottom: 16,
+    borderColor: Colors.grey50,
+    borderWidth: 1,
+    marginTop: -20,
+    height: 40,
+    zIndex: 10,
+  },
+  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,
+  },
+  label: {
+    marginBottom: 5,
+    fontSize: 12,
+    color: Colors.grey40,
+  },
+  dialogCard: {
+    borderRadius: 10,
+    gap: 10,
+  },
+  subTit: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  dialogBtnLbl: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 15,
+    color: "white",
+  },
+  divider: { height: 0.7, backgroundColor: "#e6e6e6", width: "100%" },
+  jakarta12: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 12,
+    color: "#a1a1a1",
+  },
+  jakarta13: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13,
+  },
+  pfp: { aspectRatio: 1, width: 37.03, borderRadius: 10.56 },
+  userType: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 12,
+    color: "#858585",
+  },
+  name: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 16,
+  },
 });
 
 export default MyGroup;