diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index a89c336..aa94045 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -1,9 +1,19 @@
 import React from "react";
-import {Drawer} from "expo-router/drawer";
-import {useSignOut} from "@/hooks/firebase/useSignOut";
-import {DrawerContentScrollView, DrawerNavigationOptions, DrawerNavigationProp} from "@react-navigation/drawer";
-import {Button, ButtonSize, Text, TouchableOpacity, View,} from "react-native-ui-lib";
-import {ImageBackground, StyleSheet} from "react-native";
+import { Drawer } from "expo-router/drawer";
+import { useSignOut } from "@/hooks/firebase/useSignOut";
+import {
+  DrawerContentScrollView,
+  DrawerNavigationOptions,
+  DrawerNavigationProp,
+} from "@react-navigation/drawer";
+import {
+  Button,
+  ButtonSize,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
+import { ImageBackground, StyleSheet } from "react-native";
 import DrawerButton from "@/components/shared/DrawerButton";
 import NavGroceryIcon from "@/assets/svgs/NavGroceryIcon";
 import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
@@ -11,165 +21,191 @@ import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
 import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";
-import {useSetAtom} from "jotai";
+import { useSetAtom } from "jotai";
 import {
-    isFamilyViewAtom,
-    settingsPageIndex,
-    toDosPageIndex,
-    userSettingsView,
+  isFamilyViewAtom,
+  settingsPageIndex,
+  toDosPageIndex,
+  userSettingsView,
 } from "@/components/pages/calendar/atoms";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import * as Device from "expo-device";
-import {DeviceType} from "expo-device";
+import { DeviceType } from "expo-device";
 import FeedbackNavIcon from "@/assets/svgs/FeedbackNavIcon";
 import DrawerIcon from "@/assets/svgs/DrawerIcon";
-import {RouteProp} from "@react-navigation/core";
+import { RouteProp } from "@react-navigation/core";
+import RefreshButton from "@/components/shared/RefreshButton";
+import { useCalSync } from "@/hooks/useCalSync";
 
 type DrawerParamList = {
-    index: undefined;
-    calendar: undefined;
-    todos: undefined;
+  index: undefined;
+  calendar: undefined;
+  todos: undefined;
 };
 
 type NavigationProp = DrawerNavigationProp<DrawerParamList>;
 
 interface ViewSwitchProps {
-    navigation: NavigationProp;
+  navigation: NavigationProp;
 }
 
 interface HeaderRightProps {
-    routeName: keyof DrawerParamList;
-    navigation: NavigationProp;
+  routeName: keyof DrawerParamList;
+  navigation: NavigationProp;
 }
 
-const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({navigation}) => (
-    <View marginR-16>
-        <ViewSwitch navigation={navigation}/>
-    </View>
+const MemoizedViewSwitch = React.memo<ViewSwitchProps>(({ navigation }) => (
+  <ViewSwitch navigation={navigation} />
 ));
 
-const HeaderRight = React.memo<HeaderRightProps>(({routeName, navigation}) => {
+const HeaderRight = React.memo<HeaderRightProps>(
+  ({ routeName, navigation }) => {
     const showViewSwitch = ["calendar", "todos", "index"].includes(routeName);
 
     if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
-        return null;
+      return null;
     }
 
-    return <MemoizedViewSwitch navigation={navigation}/>;
-});
+    return <MemoizedViewSwitch navigation={navigation} />;
+  }
+);
 export default function TabLayout() {
-    const {mutateAsync: signOut} = useSignOut();
-    const setIsFamilyView = useSetAtom(isFamilyViewAtom);
-    const setPageIndex = useSetAtom(settingsPageIndex);
-    const setUserView = useSetAtom(userSettingsView);
-    const setToDosIndex = useSetAtom(toDosPageIndex);
+  const { mutateAsync: signOut } = useSignOut();
+  const setIsFamilyView = useSetAtom(isFamilyViewAtom);
+  const setPageIndex = useSetAtom(settingsPageIndex);
+  const setUserView = useSetAtom(userSettingsView);
+  const setToDosIndex = useSetAtom(toDosPageIndex);
+  const { resyncAllCalendars, isSyncing } = useCalSync();
 
-    const screenOptions = ({
-                               navigation,
-                               route,
-                           }: {
-        navigation: DrawerNavigationProp<DrawerParamList>;
-        route: RouteProp<DrawerParamList>;
-    }): DrawerNavigationOptions => ({
-        headerShown: true,
-        headerTitleAlign: Device.deviceType === DeviceType.TABLET ? "left" : "center",
-        headerTitleStyle: {
-            fontFamily: "Manrope_600SemiBold",
-            fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
-        },
-        headerLeft: () => (
-            <TouchableOpacity
-                onPress={navigation.toggleDrawer}
-                style={{marginLeft: 16}}
+  const onRefresh = React.useCallback(async () => {
+    try {
+      await resyncAllCalendars();
+    } catch (error) {
+      console.error("Refresh failed:", error);
+    }
+  }, [resyncAllCalendars]);
+
+  const screenOptions = ({
+    navigation,
+    route,
+  }: {
+    navigation: DrawerNavigationProp<DrawerParamList>;
+    route: RouteProp<DrawerParamList>;
+  }): DrawerNavigationOptions => ({
+    headerShown: true,
+    headerTitleAlign:
+      Device.deviceType === DeviceType.TABLET ? "left" : "center",
+    headerTitleStyle: {
+      fontFamily: "Manrope_600SemiBold",
+      fontSize: Device.deviceType === DeviceType.TABLET ? 22 : 17,
+    },
+    headerLeft: () => (
+      <TouchableOpacity
+        onPress={navigation.toggleDrawer}
+        style={{ marginLeft: 16 }}
+      >
+        <DrawerIcon />
+      </TouchableOpacity>
+    ),
+    headerRight: () => {
+      const showViewSwitch = ["calendar", "todos", "index"].includes(
+        route.name
+      );
+      const isCalendarPage = ["calendar", "index"].includes(route.name);
+
+      if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
+        return isCalendarPage ? (
+          <View marginR-16>
+            <RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} />
+          </View>
+        ) : null;
+      }
+
+      return (
+        <View marginR-16 row centerV>
+          {isCalendarPage && (
+            <View marginR-16><RefreshButton onRefresh={onRefresh} isSyncing={isSyncing} /></View>
+          )}
+          <MemoizedViewSwitch navigation={navigation} />
+        </View>
+      );
+    },
+    drawerStyle: {
+      width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
+      backgroundColor: "#f9f8f7",
+      height: "100%",
+    },
+  });
+
+  return (
+    <Drawer
+      initialRouteName={"index"}
+      detachInactiveScreens
+      screenOptions={screenOptions}
+      drawerContent={(props) => {
+        return (
+          <DrawerContentScrollView {...props} style={{}}>
+            <View centerV marginH-30 marginT-20 marginB-20 row>
+              <ImageBackground
+                source={require("../../assets/images/splash.png")}
+                style={{
+                  backgroundColor: "transparent",
+                  height: 51.43,
+                  aspectRatio: 1,
+                  marginRight: 8,
+                }}
+              />
+              <Text style={styles.title}>Welcome to Cally</Text>
+            </View>
+            <View
+              style={{
+                flexDirection: "row",
+                paddingHorizontal: 30,
+              }}
             >
-                <DrawerIcon/>
-            </TouchableOpacity>
-        ),
-        headerRight: () => {
-            const showViewSwitch = ["calendar", "todos", "index"].includes(route.name);
-
-            if (Device.deviceType !== DeviceType.TABLET || !showViewSwitch) {
-                return null;
-            }
-
-            return <MemoizedViewSwitch navigation={navigation}/>;
-        },
-        drawerStyle: {
-            width: Device.deviceType === DeviceType.TABLET ? "30%" : "90%",
-            backgroundColor: "#f9f8f7",
-            height: "100%",
-        },
-    })
-
-    return (
-        <Drawer
-            initialRouteName={"index"}
-            detachInactiveScreens
-            screenOptions={screenOptions}
-            drawerContent={(props) => {
-                return (
-                    <DrawerContentScrollView {...props} style={{}}>
-                        <View centerV marginH-30 marginT-20 marginB-20 row>
-                            <ImageBackground
-                                source={require("../../assets/images/splash.png")}
-                                style={{
-                                    backgroundColor: "transparent",
-                                    height: 51.43,
-                                    aspectRatio: 1,
-                                    marginRight: 8,
-                                }}
-                            />
-                            <Text style={styles.title}>Welcome to Cally</Text>
-                        </View>
-                        <View
-                            style={{
-                                flexDirection: "row",
-                                paddingHorizontal: 30,
-                            }}
-                        >
-                            <View style={{flex: 1, paddingRight: 5}}>
-                                <DrawerButton
-                                    title={"Calendar"}
-                                    color="rgb(7, 184, 199)"
-                                    bgColor={"rgb(231, 248, 250)"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("calendar");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavCalendarIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#50be0c"
-                                    title={"Groceries"}
-                                    bgColor={"#eef9e7"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("grocery");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavGroceryIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#ea156d"
-                                    title={"Feedback"}
-                                    bgColor={"#fdedf4"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("feedback");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<FeedbackNavIcon/>}
-                                />
-                            </View>
-                            <View style={{flex: 1, paddingRight: 0}}>
-                                {/*<DrawerButton
+              <View style={{ flex: 1, paddingRight: 5 }}>
+                <DrawerButton
+                  title={"Calendar"}
+                  color="rgb(7, 184, 199)"
+                  bgColor={"rgb(231, 248, 250)"}
+                  pressFunc={() => {
+                    props.navigation.navigate("calendar");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavCalendarIcon />}
+                />
+                <DrawerButton
+                  color="#50be0c"
+                  title={"Groceries"}
+                  bgColor={"#eef9e7"}
+                  pressFunc={() => {
+                    props.navigation.navigate("grocery");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavGroceryIcon />}
+                />
+                <DrawerButton
+                  color="#ea156d"
+                  title={"Feedback"}
+                  bgColor={"#fdedf4"}
+                  pressFunc={() => {
+                    props.navigation.navigate("feedback");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<FeedbackNavIcon />}
+                />
+              </View>
+              <View style={{ flex: 1, paddingRight: 0 }}>
+                {/*<DrawerButton
                   color="#fd1775"
                   title={"My Reminders"}
                   bgColor={"#ffe8f2"}
@@ -182,184 +218,184 @@ export default function TabLayout() {
                     />
                   }
                 />*/}
-                                <DrawerButton
-                                    color="#8005eb"
-                                    title={"To Do's"}
-                                    bgColor={"#f3e6fd"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("todos");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavToDosIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#e0ca03"
-                                    title={"Brain Dump"}
-                                    bgColor={"#fffacb"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("brain_dump");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={<NavBrainDumpIcon/>}
-                                />
-                                <DrawerButton
-                                    color="#e0ca03"
-                                    title={"Notifications"}
-                                    bgColor={"#ffdda1"}
-                                    pressFunc={() => {
-                                        props.navigation.navigate("notifications");
-                                        setPageIndex(0);
-                                        setToDosIndex(0);
-                                        setUserView(true);
-                                        setIsFamilyView(false);
-                                    }}
-                                    icon={
-                                        <Ionicons
-                                            name="notifications-outline"
-                                            size={24}
-                                            color={"#ffa200"}
-                                        />
-                                    }
-                                />
-                            </View>
-                        </View>
-                        <Button
-                            onPress={() => {
-                                props.navigation.navigate("settings");
-                                setPageIndex(0);
-                                setToDosIndex(0);
-                                setUserView(true);
-                                setIsFamilyView(false);
-                            }}
-                            label={"Manage Settings"}
-                            labelStyle={styles.label}
-                            iconSource={() => (
-                                <View
-                                    backgroundColor="#ededed"
-                                    width={60}
-                                    height={60}
-                                    style={{borderRadius: 50}}
-                                    marginR-10
-                                    centerV
-                                    centerH
-                                >
-                                    <NavSettingsIcon/>
-                                </View>
-                            )}
-                            backgroundColor="white"
-                            color="#464039"
-                            paddingV-30
-                            marginH-30
-                            borderRadius={18.55}
-                            style={{elevation: 0}}
-                        />
+                <DrawerButton
+                  color="#8005eb"
+                  title={"To Do's"}
+                  bgColor={"#f3e6fd"}
+                  pressFunc={() => {
+                    props.navigation.navigate("todos");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavToDosIcon />}
+                />
+                <DrawerButton
+                  color="#e0ca03"
+                  title={"Brain Dump"}
+                  bgColor={"#fffacb"}
+                  pressFunc={() => {
+                    props.navigation.navigate("brain_dump");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={<NavBrainDumpIcon />}
+                />
+                <DrawerButton
+                  color="#e0ca03"
+                  title={"Notifications"}
+                  bgColor={"#ffdda1"}
+                  pressFunc={() => {
+                    props.navigation.navigate("notifications");
+                    setPageIndex(0);
+                    setToDosIndex(0);
+                    setUserView(true);
+                    setIsFamilyView(false);
+                  }}
+                  icon={
+                    <Ionicons
+                      name="notifications-outline"
+                      size={24}
+                      color={"#ffa200"}
+                    />
+                  }
+                />
+              </View>
+            </View>
+            <Button
+              onPress={() => {
+                props.navigation.navigate("settings");
+                setPageIndex(0);
+                setToDosIndex(0);
+                setUserView(true);
+                setIsFamilyView(false);
+              }}
+              label={"Manage Settings"}
+              labelStyle={styles.label}
+              iconSource={() => (
+                <View
+                  backgroundColor="#ededed"
+                  width={60}
+                  height={60}
+                  style={{ borderRadius: 50 }}
+                  marginR-10
+                  centerV
+                  centerH
+                >
+                  <NavSettingsIcon />
+                </View>
+              )}
+              backgroundColor="white"
+              color="#464039"
+              paddingV-30
+              marginH-30
+              borderRadius={18.55}
+              style={{ elevation: 0 }}
+            />
 
-                        <Button
-                            size={ButtonSize.large}
-                            marginH-10
-                            marginT-12
-                            paddingV-15
-                            style={{
-                                marginTop: 50,
-                                backgroundColor: "transparent",
-                                borderWidth: 1.3,
-                                borderColor: "#fd1775",
-                            }}
-                            label="Sign out of Cally"
-                            color="#fd1775"
-                            labelStyle={styles.signOut}
-                            onPress={() => signOut()}
-                        />
-                    </DrawerContentScrollView>
-                );
-            }}
-        >
-            <Drawer.Screen
-                name="index"
-                options={{
-                    drawerLabel: "Calendar",
-                    title:
-                        Device.deviceType === DeviceType.TABLET
-                            ? "Family Calendar"
-                            : "Calendar",
-                }}
+            <Button
+              size={ButtonSize.large}
+              marginH-10
+              marginT-12
+              paddingV-15
+              style={{
+                marginTop: 50,
+                backgroundColor: "transparent",
+                borderWidth: 1.3,
+                borderColor: "#fd1775",
+              }}
+              label="Sign out of Cally"
+              color="#fd1775"
+              labelStyle={styles.signOut}
+              onPress={() => signOut()}
             />
-            <Drawer.Screen
-                name="calendar"
-                options={{
-                    drawerLabel: "Calendar",
-                    title:
-                        Device.deviceType === DeviceType.TABLET
-                            ? "Family Calendar"
-                            : "Calendar",
-                    drawerItemStyle: {display: "none"},
-                }}
-            />
-            <Drawer.Screen
-                name="brain_dump"
-                options={{
-                    drawerLabel: "Brain Dump",
-                    title: "Brain Dump",
-                }}
-            />
-            <Drawer.Screen
-                name="settings"
-                options={{
-                    drawerLabel: "Settings",
-                    title: "Settings",
-                }}
-            />
-            <Drawer.Screen
-                name="grocery"
-                options={{
-                    drawerLabel: "Grocery",
-                    title: "Grocery",
-                }}
-            />
-            <Drawer.Screen
-                name="reminders"
-                options={{
-                    drawerLabel: "Reminders",
-                    title: "Reminders",
-                }}
-            />
-            <Drawer.Screen
-                name="todos"
-                options={{
-                    drawerLabel: "To-Do",
-                    title:
-                        Device.deviceType === DeviceType.TABLET
-                            ? "Family To Do's"
-                            : "To Do's",
-                }}
-            />
-            <Drawer.Screen
-                name="notifications"
-                options={{
-                    drawerLabel: "Notifications",
-                    title: "Notifications",
-                }}
-            />
-            <Drawer.Screen
-                name="feedback"
-                options={{drawerLabel: "Feedback", title: "Feedback"}}
-            />
-        </Drawer>
-    );
+          </DrawerContentScrollView>
+        );
+      }}
+    >
+      <Drawer.Screen
+        name="index"
+        options={{
+          drawerLabel: "Calendar",
+          title:
+            Device.deviceType === DeviceType.TABLET
+              ? "Family Calendar"
+              : "Calendar",
+        }}
+      />
+      <Drawer.Screen
+        name="calendar"
+        options={{
+          drawerLabel: "Calendar",
+          title:
+            Device.deviceType === DeviceType.TABLET
+              ? "Family Calendar"
+              : "Calendar",
+          drawerItemStyle: { display: "none" },
+        }}
+      />
+      <Drawer.Screen
+        name="brain_dump"
+        options={{
+          drawerLabel: "Brain Dump",
+          title: "Brain Dump",
+        }}
+      />
+      <Drawer.Screen
+        name="settings"
+        options={{
+          drawerLabel: "Settings",
+          title: "Settings",
+        }}
+      />
+      <Drawer.Screen
+        name="grocery"
+        options={{
+          drawerLabel: "Grocery",
+          title: "Grocery",
+        }}
+      />
+      <Drawer.Screen
+        name="reminders"
+        options={{
+          drawerLabel: "Reminders",
+          title: "Reminders",
+        }}
+      />
+      <Drawer.Screen
+        name="todos"
+        options={{
+          drawerLabel: "To-Do",
+          title:
+            Device.deviceType === DeviceType.TABLET
+              ? "Family To Do's"
+              : "To Do's",
+        }}
+      />
+      <Drawer.Screen
+        name="notifications"
+        options={{
+          drawerLabel: "Notifications",
+          title: "Notifications",
+        }}
+      />
+      <Drawer.Screen
+        name="feedback"
+        options={{ drawerLabel: "Feedback", title: "Feedback" }}
+      />
+    </Drawer>
+  );
 }
 
 const styles = StyleSheet.create({
-    signOut: {fontFamily: "Poppins_500Medium", fontSize: 15},
-    label: {fontFamily: "Poppins_400Medium", fontSize: 15},
-    title: {
-        fontSize: 26.13,
-        fontFamily: "Manrope_600SemiBold",
-        color: "#262627",
-    },
+  signOut: { fontFamily: "Poppins_500Medium", fontSize: 15 },
+  label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
+  title: {
+    fontSize: 26.13,
+    fontFamily: "Manrope_600SemiBold",
+    color: "#262627",
+  },
 });
diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx
index 0a5987a..b93837c 100644
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@@ -61,7 +61,6 @@ export default function Screen() {
                         justifyContent: "center",
                         paddingRight: 200,
                     }}
-                    refreshControl={refreshControl}
                     bounces={true}
                     showsVerticalScrollIndicator={false}
                     pointerEvents={isSyncing ? "auto" : "none"}
@@ -74,7 +73,6 @@ export default function Screen() {
         <ScrollView
             style={{flex: 1, height: "100%"}}
             contentContainerStyle={{flex: 1, height: "100%"}}
-            refreshControl={refreshControl}
             bounces={true}
             showsVerticalScrollIndicator={false}
         >
diff --git a/assets/svgs/CheckmarkIcon.tsx b/assets/svgs/CheckmarkIcon.tsx
new file mode 100644
index 0000000..db2d69e
--- /dev/null
+++ b/assets/svgs/CheckmarkIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const CheckmarkIcon = (props: SvgProps) => (
+  <Svg
+    width={13}
+    height={10}
+    viewBox="0 0 13 10"
+    fill={props.color || "white"}
+    {...props}
+  >
+    <Path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.95}
+      d="m1.48 5.489 3.2 3.178 7.2-7.15"
+    />
+  </Svg>
+)
+export default CheckmarkIcon
diff --git a/components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx b/components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
index f8340f1..8bdb044 100644
--- a/components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
+++ b/components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
@@ -15,7 +15,12 @@ import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 import { ScrollView } from "react-native-gesture-handler";
 
 const groupToDosByDate = (toDos: IToDo[]) => {
-  let sortedTodos = toDos.sort((a, b) => a.date - b.date);
+  let sortedTodos = toDos.sort((a, b) => {
+    const dateA = a.date === null ? new Date() : a.date;
+    const dateB = b.date === null ? new Date() : b.date;
+    return dateA - dateB;
+  });
+  
   return sortedTodos.reduce(
     (groups, toDo) => {
       let dateKey;
@@ -34,9 +39,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
         });
       };
 
-      if (toDo.date === null) {
-        dateKey = "No Date";
-      } else if (isToday(toDo.date)) {
+      if (toDo.date === null || isToday(toDo.date)) {
         dateKey = "Today";
       } else if (isTomorrow(toDo.date)) {
         dateKey = "Tomorrow";
@@ -228,42 +231,47 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
 
   return (
     <View
-      marginB-402
       marginT-10
-      paddingH-10
       backgroundColor="#f9f8f7"
-      style={{ minHeight: 800, borderRadius: 9.11 }}
+      style={{
+        minHeight: 600,
+        maxHeight: 600,
+        borderRadius: 9.11,
+        overflow: "hidden",
+      }}
       width={355}
     >
-      <ScrollView>
-        {noDateToDos.length > 0 && (
-          <View key="No Date">
-            <View row spread paddingH-19 marginB-12>
-              <Text
-                text70
-                style={{
-                  fontWeight: "bold",
-                }}
-              >
-                Unscheduled
-              </Text>
-              <AntDesign
-                name={expandNoDate ? "caretdown" : "caretright"}
-                size={24}
-                color="#fd1575"
-                onPress={() => {
-                  setExpandNoDate(!expandNoDate);
-                }}
-              />
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View paddingH-10 paddingB-90>
+          {noDateToDos.length > 0 && (
+            <View key="No Date">
+              <View row spread paddingH-19 marginB-12>
+                <Text
+                  text70
+                  style={{
+                    fontWeight: "bold",
+                  }}
+                >
+                  Unscheduled
+                </Text>
+                <AntDesign
+                  name={expandNoDate ? "caretdown" : "caretright"}
+                  size={24}
+                  color="#fd1575"
+                  onPress={() => {
+                    setExpandNoDate(!expandNoDate);
+                  }}
+                />
+              </View>
+              {expandNoDate &&
+                noDateToDos
+                  .sort((a, b) => Number(a.done) - Number(b.done))
+                  .map((item) => <ToDoItem key={item.id} item={item} />)}
             </View>
-            {expandNoDate &&
-              noDateToDos
-                .sort((a, b) => Number(a.done) - Number(b.done))
-                .map((item) => <ToDoItem key={item.id} item={item} />)}
-          </View>
-        )}
+          )}
 
-        {datedToDos.map(renderTodoGroup)}
+          {datedToDos.map(renderTodoGroup)}
+        </View>
       </ScrollView>
     </View>
   );
diff --git a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx b/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
index d85b2f1..160f79a 100644
--- a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
+++ b/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
@@ -8,6 +8,7 @@ import { ImageBackground, StyleSheet } from "react-native";
 import { colorMap } from "@/constants/colorMap";
 import { ScrollView } from "react-native-gesture-handler";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import AddChore from "../../todos/AddChore";
 
 const TabletChoresPage = () => {
     const {data: users} = useGetFamilyMembers();
@@ -98,6 +99,9 @@ const TabletChoresPage = () => {
           ))}
         </View>
       </ScrollView>
+      <View style={styles.addBtn}>
+        <AddChore />
+        </View>
     </TabletContainer>
   );
 };
@@ -113,6 +117,11 @@ const styles = StyleSheet.create({
         fontSize: 22.43,
         color: "#2c2c2c",
     },
+    addBtn: {
+      position: 'absolute',
+      bottom: 50,
+      right: 220
+    }
 });
 
 export default TabletChoresPage;
diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx
index c09e337..182454a 100644
--- a/components/pages/calendar/CalendarPage.tsx
+++ b/components/pages/calendar/CalendarPage.tsx
@@ -5,9 +5,9 @@ import { InnerCalendar } from "@/components/pages/calendar/InnerCalendar";
 export default function CalendarPage() {
   return (
     <View
-      style={{ flex: 1, height: "100%", padding: 10 }}
-      paddingH-22
-      paddingT-22
+      style={{ flex: 1, height: "100%", padding: 0 }}
+      paddingH-0
+      paddingT-0
     >
       {/*<HeaderTemplate
         message={"Let's get your week started !"}
diff --git a/components/pages/calendar/InnerCalendar.tsx b/components/pages/calendar/InnerCalendar.tsx
index 269682c..689f31d 100644
--- a/components/pages/calendar/InnerCalendar.tsx
+++ b/components/pages/calendar/InnerCalendar.tsx
@@ -25,9 +25,10 @@ export const InnerCalendar = () => {
     return (
         <>
             <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 10, overflow: "hidden"}}
+                style={{flex: 1, backgroundColor: "#fff", borderRadius: 0, marginBottom: 0, overflow: "hidden"}}
                 ref={calendarContainerRef}
                 onLayout={onLayout}
+                paddingB-15
             >
                 <CalendarHeader/>
                 {calendarHeight > 0 && (
diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx
index 4674bee..c438d76 100644
--- a/components/pages/calendar/ManuallyAddEventModal.tsx
+++ b/components/pages/calendar/ManuallyAddEventModal.tsx
@@ -40,6 +40,7 @@ import DeleteEventDialog from "./DeleteEventDialog";
 import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
 import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 import { addHours, startOfHour, startOfMinute } from "date-fns";
+import { useAuthContext } from "@/contexts/AuthContext";
 
 const daysOfWeek = [
   { label: "Monday", value: "monday" },
@@ -53,6 +54,7 @@ const daysOfWeek = [
 
 export const ManuallyAddEventModal = () => {
   const insets = useSafeAreaInsets();
+  const { user } = useAuthContext();
 
   const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(
     selectedNewEventDateAtom
@@ -115,7 +117,7 @@ export const ManuallyAddEventModal = () => {
     editEvent?.end ?? initialDate ?? new Date()
   );
   const [selectedAttendees, setSelectedAttendees] = useState<string[]>(
-    editEvent?.attendees ?? []
+    editEvent?.attendees ?? [user?.uid]
   );
   const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
 
@@ -162,7 +164,7 @@ export const ManuallyAddEventModal = () => {
 
     setStartDate(initialDate ?? new Date());
     setEndDate(editEvent?.end ?? initialDate ?? new Date());
-    setSelectedAttendees(editEvent?.attendees ?? []);
+    setSelectedAttendees(editEvent?.attendees ?? [user?.uid]);
     setLocation(editEvent?.location ?? "");
     setRepeatInterval([]);
   }, [editEvent, selectedNewEventDate]);
@@ -247,10 +249,10 @@ export const ManuallyAddEventModal = () => {
       Alert.alert("Alert", "Title field cannot be empty");
       return false;
     }
-    // if (!selectedAttendees || selectedAttendees?.length === 0) {
-    //   Alert.alert('Alert', 'Cannot have an event without any attendees');
-    //   return false;
-    // }
+    if (!selectedAttendees || selectedAttendees?.length === 0) {
+      Alert.alert('Alert', 'Cannot have an event without any attendees');
+      return false;
+    }
 
     return true;
   };
diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx
index e076216..354dd44 100644
--- a/components/pages/grocery/GroceryItem.tsx
+++ b/components/pages/grocery/GroceryItem.tsx
@@ -25,6 +25,7 @@ const GroceryItem = ({
   const { profileData } = useAuthContext();
   const { data: creator } = useGetUserById(item.creatorId);
   const isParent = profileData?.userType === ProfileType.PARENT;
+  const isCaregiver = profileData?.userType === ProfileType.CAREGIVER;
 
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
   const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
@@ -36,7 +37,7 @@ const GroceryItem = ({
   const closeEdit = () => setIsEditingTitle(false);
 
   const getInitials = (firstName: string, lastName: string) => {
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`;
+    return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
   };
 
   return (
@@ -81,7 +82,7 @@ const GroceryItem = ({
           />
         ) : (
           <View flex>
-            {isParent ? (
+            {(isParent || isCaregiver) && !item.bought ? (
               <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
                 <Text
                   text70T
@@ -98,7 +99,7 @@ const GroceryItem = ({
             ) : (
               <Text
                 text70T
-                style={[styles.title, { color: item.bought ? "red" : "black" }]}
+                style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
               >
                 {item.title}
               </Text>
@@ -108,7 +109,7 @@ const GroceryItem = ({
 
         {!item.approved ? (
           <View row centerV>
-            {isParent && (
+            {isParent || isCaregiver && (
               <>
                 <AntDesign
                   name="check"
@@ -132,7 +133,7 @@ const GroceryItem = ({
           </View>
         ) : (
           !isEditingTitle &&
-          isParent && (
+          (isParent || isCaregiver) && (
             <Checkbox
               value={item.bought}
               containerStyle={[styles.checkbox, { borderRadius: 50 }]}
@@ -180,7 +181,7 @@ const GroceryItem = ({
                   width: 24.64,
                   aspectRatio: 1,
                   marginRight: 8,
-                  backgroundColor: "#ccc",
+                  backgroundColor: creator?.eventColor || "gray",
                   borderRadius: 100,
                   justifyContent: "center",
                   alignItems: "center",
diff --git a/components/pages/grocery/GroceryList.tsx b/components/pages/grocery/GroceryList.tsx
index 04dd0e0..216f71b 100644
--- a/components/pages/grocery/GroceryList.tsx
+++ b/components/pages/grocery/GroceryList.tsx
@@ -62,7 +62,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
                     id: "",
                     title: title,
                     category: category,
-                    approved: profileData?.userType === ProfileType.PARENT,
+                    approved: profileData?.userType === ProfileType.PARENT || profileData?.userType === ProfileType.CAREGIVER,
                     recurring: false,
                     frequency: GroceryFrequency.Never,
                     bought: false,
diff --git a/components/pages/todos/AddChoreDialog.tsx b/components/pages/todos/AddChoreDialog.tsx
index e5149f9..582b721 100644
--- a/components/pages/todos/AddChoreDialog.tsx
+++ b/components/pages/todos/AddChoreDialog.tsx
@@ -18,7 +18,7 @@ import {Ionicons} from "@expo/vector-icons";
 import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
 import {Alert, Dimensions, KeyboardAvoidingView, StyleSheet} from "react-native";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
-import {IToDo} from "@/hooks/firebase/types/todoData";
+import {IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
 import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 import CalendarIcon from "@/assets/svgs/CalendarIcon";
@@ -39,7 +39,7 @@ const defaultTodo = {
     points: 10,
     date: new Date(),
     rotate: false,
-    repeatType: "Every week",
+    repeatType: REPEAT_TYPE.NONE,
     assignees: [],
     repeatDays: []
 };
@@ -138,6 +138,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                 padding: 0,
                 paddingTop: 4,
                 margin: 0,
+                maxWidth: 600
             }}
             visible={addChoreDialogProps.isVisible}
         >
@@ -260,7 +261,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
                             ))}
                         </Picker>
                     </View>
-                    {todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
+                    {todo.repeatType == REPEAT_TYPE.EVERY_WEEK && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
                                                                     repeatDays={todo.repeatDays ?? []}/>}
                 </View>
                 <View style={styles.divider}/>
diff --git a/components/pages/todos/ToDosList.tsx b/components/pages/todos/ToDosList.tsx
index 45bc481..19f1191 100644
--- a/components/pages/todos/ToDosList.tsx
+++ b/components/pages/todos/ToDosList.tsx
@@ -8,7 +8,7 @@ import {IToDo} from "@/hooks/firebase/types/todoData";
 import DropdownIcon from "@/assets/svgs/DropdownIcon";
 import {Dropdown} from "react-native-element-dropdown";
 import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
-import {useAuthContext} from "@/contexts/AuthContext";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
 import {StyleSheet} from "react-native";
 
 const FILTER_OPTIONS = {
@@ -17,7 +17,12 @@ const FILTER_OPTIONS = {
 };
 
 const groupToDosByDate = (toDos: IToDo[]) => {
-  let sortedTodos = toDos.sort((a, b) => a.date - b.date);
+  let sortedTodos = toDos.sort((a, b) => {
+    const dateA = a.date === null ? new Date() : a.date;
+    const dateB = b.date === null ? new Date() : b.date;
+    return dateA - dateB;
+  });
+
   return sortedTodos.reduce(
     (groups, toDo) => {
       let dateKey;
@@ -36,9 +41,15 @@ const groupToDosByDate = (toDos: IToDo[]) => {
         });
       };
 
-      if (toDo.date === null) {
-        dateKey = "No Date";
-      } else if (isToday(toDo.date)) {
+      const isOverdue = (date: Date) => {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        return date < today;
+      };
+      
+      if (isOverdue(toDo.date) && !toDo.done) {
+        dateKey = "Overdue";
+      } else if (toDo.date === null || isToday(toDo.date)) {
         dateKey = "Today";
       } else if (isTomorrow(toDo.date)) {
         dateKey = "Tomorrow";
@@ -48,7 +59,8 @@ const groupToDosByDate = (toDos: IToDo[]) => {
         dateKey = "Next 30 Days";
         subDateKey = format(toDo.date, "MMM d");
       } else {
-        return groups;
+        dateKey = "Later";
+        subDateKey = format(toDo.date, "MMM d, yyyy");
       }
 
       if (!groups[dateKey]) {
@@ -58,7 +70,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
         };
       }
 
-      if (dateKey === "Next 30 Days" && subDateKey) {
+      if ((dateKey === "Next 30 Days" || dateKey === "Later") && subDateKey) {
         if (!groups[dateKey].subgroups[subDateKey]) {
           groups[dateKey].subgroups[subDateKey] = [];
         }
@@ -80,12 +92,16 @@ const groupToDosByDate = (toDos: IToDo[]) => {
 
 const resolveFilterOptions = (members, user) => {
 
-    let options = members?.map((member) => {
+    let options = [];
+    members?.forEach((member) => {
         let label = member?.firstName;
         if (member.uid === user?.uid) {
             label = FILTER_OPTIONS.ME;
         }
-        return {value: member?.uid, label: label};
+
+        if (member.userType !== ProfileType.FAMILY_DEVICE) {
+         options.push({value: member?.uid, label: label});
+        }
     });
     options.push({value: FILTER_OPTIONS.EVERYONE, label: FILTER_OPTIONS.EVERYONE})
 
@@ -138,14 +154,17 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
   };
 
   const noDateToDos = groupedToDos["No Date"]?.items || [];
-  const datedToDos = Object.keys(groupedToDos).filter(
-    (key) => key !== "No Date"
-  );
+  const datedToDos = Object.keys(groupedToDos)
+  .filter((key) => key !== "No Date")
+  .sort((a, b) => {
+    const order = ["Overdue", "Today", "Tomorrow", "Next 7 Days", "Next 30 Days", "Later"];
+    return order.indexOf(a) - order.indexOf(b);
+  });
 
   const renderTodoGroup = (dateKey: string) => {
     const isExpanded = expandedGroups[dateKey] || false;
 
-    if (dateKey === "Next 30 Days") {
+    if (dateKey === "Next 30 Days" || dateKey === "Later") {
       const subgroups = Object.entries(groupedToDos[dateKey].subgroups).sort(
         ([dateA], [dateB]) => {
           const dateAObj = new Date(dateA);
diff --git a/components/shared/RefreshButton.tsx b/components/shared/RefreshButton.tsx
new file mode 100644
index 0000000..93f29c3
--- /dev/null
+++ b/components/shared/RefreshButton.tsx
@@ -0,0 +1,67 @@
+import React, { useRef, useEffect } from 'react';
+import { TouchableOpacity, Animated, Easing } from 'react-native';
+import { Feather } from '@expo/vector-icons'; 
+
+interface RefreshButtonProps {
+  onRefresh: () => Promise<void>;
+  isSyncing: boolean;
+  size?: number;
+  color?: string;
+}
+
+const RefreshButton = ({ 
+  onRefresh, 
+  isSyncing,
+  size = 24, 
+  color = "#83807F" 
+}: RefreshButtonProps) => {
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const rotationLoop = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (isSyncing) {
+      startContinuousRotation();
+    } else {
+      stopRotation();
+    }
+  }, [isSyncing]);
+
+  const startContinuousRotation = () => {
+    rotateAnim.setValue(0);
+    rotationLoop.current = Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    rotationLoop.current.start();
+  };
+
+  const stopRotation = () => {
+    rotationLoop.current?.stop();
+    rotateAnim.setValue(0);
+  };
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const handlePress = async () => {
+    if (!isSyncing) {
+      await onRefresh();
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress} disabled={isSyncing}>
+      <Animated.View style={{ transform: [{ rotate }] }}>
+        <Feather name="refresh-cw" size={size} color={color} />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+};
+
+export default RefreshButton;
\ No newline at end of file