diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx
index c13e298..a552a63 100644
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@@ -5,6 +5,7 @@ import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-n
 import {MaterialIcons} from "@expo/vector-icons";
 import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
 import {useGetEvents} from "@/hooks/firebase/useGetEvents";
+import { useAuthContext } from "@/contexts/AuthContext";
 
 const modeMap = new Map([
     [0, "day"],
@@ -18,6 +19,7 @@ const months = [
 ];
 
 export default function Screen() {
+    const { profileData } = useAuthContext();
     const [calendarHeight, setCalendarHeight] = useState(0);
     const [mode, setMode] = useState<"week" | "month" | "day">("week");
     const [selectedDate, setSelectedDate] = useState<Date>(new Date());
@@ -52,7 +54,7 @@ export default function Screen() {
     return (
         <View style={{flex: 1, height: "100%", padding: 10}}>
             <View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
-                <Text>Welcome Dalia</Text>
+                <Text>Welcome {profileData?.firstName}</Text>
                 <Text>Let's get your week started!</Text>
             </View>
 
diff --git a/app/(auth)/todos/index.tsx b/app/(auth)/todos/index.tsx
index af1215d..7ccb813 100644
--- a/app/(auth)/todos/index.tsx
+++ b/app/(auth)/todos/index.tsx
@@ -2,24 +2,18 @@ import AddChore from "@/components/pages/todos/AddChore";
 import ProgressCard from "@/components/pages/todos/ProgressCard";
 import ToDoItem from "@/components/pages/todos/ToDoItem";
 import ToDosList from "@/components/pages/todos/ToDosList";
+import ToDosPage from "@/components/pages/todos/ToDosPage";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
 import { AntDesign } from "@expo/vector-icons";
 import { ScrollView } from "react-native-gesture-handler";
-import { Button, ButtonSize, View } from "react-native-ui-lib";
+import { Button, ButtonSize, View, Text } from "react-native-ui-lib";
 
 export default function Screen() {
   return (
     <ToDosContextProvider>
-      <ScrollView>
-        <View backgroundColor="#f9f8f7">
-          <HeaderTemplate message="Here are your To Do's" isWelcome={true} />
-          <ProgressCard />
-          <ToDosList />
-        </View>
-      </ScrollView>
-      <AddChore />
+      <ToDosPage />
     </ToDosContextProvider>
   );
 }
diff --git a/components/pages/grocery/GroceryList.tsx b/components/pages/grocery/GroceryList.tsx
index 25106e7..6f1cd24 100644
--- a/components/pages/grocery/GroceryList.tsx
+++ b/components/pages/grocery/GroceryList.tsx
@@ -12,6 +12,7 @@ import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import CategoryDropdown from "./CategoryDropdown";
 import { MaterialIcons } from "@expo/vector-icons";
 import EditGroceryItem from "./EditGroceryItem";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 
 const GroceryList = () => {
   const {
@@ -21,6 +22,7 @@ const GroceryList = () => {
     setIsAddingGrocery,
     addGrocery,
   } = useGroceryContext();
+  const { profileData } = useAuthContext();
   const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
     groceries.filter((item) => item.approved === true)
   );
@@ -47,18 +49,18 @@ const GroceryList = () => {
   );
 
   useEffect(() => {
-    if(submit){
+    if (submit) {
       if (title?.length > 2 && title?.length <= 25) {
         addGrocery({
           id: 0,
           title: title,
           category: category,
-          approved: false,
+          approved: profileData?.userType === ProfileType.PARENT ? true : false,
           recurring: false,
           frequency: GroceryFrequency.Never,
           bought: false,
         });
-  
+
         setIsAddingGrocery(false);
         setSubmitted(false);
         setTitle("");
@@ -172,7 +174,7 @@ const GroceryList = () => {
             setCategory: setCategory,
             category: category,
             setTitle: setTitle,
-            setSubmit: setSubmitted
+            setSubmit: setSubmitted,
           }}
         />
       )}
diff --git a/components/pages/main/SignUpPage.tsx b/components/pages/main/SignUpPage.tsx
index d15459c..92e38da 100644
--- a/components/pages/main/SignUpPage.tsx
+++ b/components/pages/main/SignUpPage.tsx
@@ -1,145 +1,150 @@
-import React, {useState} from "react";
-import {Button, ButtonSize, Text, TextField, View,} from "react-native-ui-lib";
-import {useSignUp} from "@/hooks/firebase/useSignUp";
-import {ProfileType} from "@/contexts/AuthContext";
-import {StyleSheet} from "react-native";
-import {AntDesign} from "@expo/vector-icons";
+import React, { useState } from "react";
+import {
+  Button,
+  ButtonSize,
+  Checkbox,
+  Text,
+  TextField,
+  TouchableOpacity,
+  View,
+} from "react-native-ui-lib";
+import { useSignUp } from "@/hooks/firebase/useSignUp";
+import { ProfileType } from "@/contexts/AuthContext";
+import { StyleSheet } from "react-native";
+import { AntDesign } from "@expo/vector-icons";
 
 const SignUpPage = (props: { unsetRegister: () => any }) => {
-    const [email, setEmail] = useState<string>("");
-    const [firstName, setFirstName] = useState<string>("");
-    const [lastName, setLastName] = useState<string>("");
-    const [password, setPassword] = useState<string>("");
-    const [isParent, setIsParent] = useState<boolean>(true);
-    const [isChild, setIsChild] = useState<boolean>(false);
-    const [isCaregiver, setIsCaregiver] = useState<boolean>(false);
-    const [profileType, setProfileType] = useState<ProfileType>(
-        ProfileType.PARENT
-    );
-    const {mutateAsync: signUp} = useSignUp();
+  const [email, setEmail] = useState<string>("");
+  const [firstName, setFirstName] = useState<string>("");
+  const [lastName, setLastName] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
 
-    const handleSignUp = async () => {
-        await signUp({email, password, firstName, lastName});
-    };
+  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
+  const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
+  const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
+  const { mutateAsync: signUp } = useSignUp();
 
-    return (
-        <View padding-10>
-            <Text text30 center>
-                Get started with Kali
-            </Text>
-            <Text center>Please enter your details.</Text>
-            <TextField
-                marginT-60
-                placeholder="First name"
-                value={firstName}
-                onChangeText={setFirstName}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Last name"
-                value={lastName}
-                onChangeText={setLastName}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Email"
-                value={email}
-                onChangeText={setEmail}
-                style={styles.textfield}
-            />
-            <TextField
-                placeholder="Password"
-                value={password}
-                onChangeText={setPassword}
-                secureTextEntry
-                style={styles.textfield}
-            />
-            <Button
-                label="Register"
-                onPress={handleSignUp}
-                style={{marginBottom: 10, backgroundColor: "#fd1775"}}
-            />
-            <Button
-                label="Sign up with Google"
-                backgroundColor="white"
-                color="black"
-                iconSource={() => (
-                    <AntDesign
-                        name="google"
-                        size={24}
-                        color="black"
-                        style={{marginRight: 15}}
-                    />
-                )}
-            />
-            {/*<Text style={{ marginBottom: 10 }}>Choose Profile Type:</Text>
-            <Checkbox
-                label="Parent"
-                value={isParent}
-                onValueChange={(value) => {
-                    setIsParent(value);
-                    setProfileType(ProfileType.PARENT);
-                    if (value) {
-                        setIsChild(false);
-                        setIsCaregiver(false);
-                    }
-                }}
-                style={{ marginBottom: 10 }}
-            />
-            <Checkbox
-                label="Child"
-                value={isChild}
-                onValueChange={(value) => {
-                    setIsChild(value);
-                    setProfileType(ProfileType.CHILD);
-                    if (value) {
-                        setIsParent(false);
-                        setIsCaregiver(false);
-                    }
-                }}
-                style={{ marginBottom: 10 }}
-            />
-            <Checkbox
-                label="Caregiver"
-                value={isCaregiver}
-                onValueChange={(value) => {
-                    setIsCaregiver(value);
-                    setProfileType(ProfileType.CAREGIVER);
-                    if (value) {
-                        setIsParent(false);
-                        setIsChild(false);
-                    }
-                }}
-            />*/}
-            <View row centerH marginT-10 marginB-5 gap-5>
-                <Text text70 center>
-                    Already have an account?
-                </Text>
+  const handleSignUp = async () => {
+    await signUp({ email, password, firstName, lastName });
+  };
 
-
-                <Button
-                    label="Sign In"
-                    flexS
-                    margin-0
-                    link
-                    color="#fd1775"
-                    size={ButtonSize.small}
-                    text70
-                    onPress={props.unsetRegister}
-                />
-            </View>
+  return (
+    <View padding-10 height={"100%"} flexG>
+      <Text text30 center>
+        Get started with Kali
+      </Text>
+      <Text center>Please enter your details.</Text>
+      <TextField
+        marginT-60
+        placeholder="First name"
+        value={firstName}
+        onChangeText={setFirstName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Last name"
+        value={lastName}
+        onChangeText={setLastName}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Email"
+        value={email}
+        onChangeText={setEmail}
+        style={styles.textfield}
+      />
+      <TextField
+        placeholder="Password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry={!isPasswordVisible}
+        style={styles.textfield}
+        trailingAccessory={
+          <TouchableOpacity
+            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            <AntDesign
+              name={isPasswordVisible ? "eye" : "eyeo"}
+              size={24}
+              color="gray"
+            />
+          </TouchableOpacity>
+        }
+      />
+      <View gap-10 marginH-10>
+        <View row centerV>
+          <Checkbox
+            value={allowFaceID}
+            onValueChange={(value) => {
+              setAllowFaceID(value);
+            }}
+          />
+          <Text text90R marginL-10>
+            Allow FaceID for login in future
+          </Text>
         </View>
-    );
+        <View row centerV>
+          <Checkbox
+            value={acceptTerms}
+            onValueChange={(value) => setAcceptTerms(value)}
+          />
+          <View row>
+            <Text text90R marginL-10>
+              I accept the
+            </Text>
+            <TouchableOpacity>
+              <Text text90 style={{ textDecorationLine: "underline" }}>
+                {" "}
+                terms and conditions
+              </Text>
+            </TouchableOpacity>
+            <Text text90R> and </Text>
+            <TouchableOpacity>
+              <Text text90 style={{ textDecorationLine: "underline" }}>
+                {" "}
+                privacy policy
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+      <View style={styles.bottomView}>
+        <Button
+          label="Register"
+          onPress={handleSignUp}
+          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
+        />
+        <View row centerH marginT-10 marginB-5 gap-5>
+          <Text text70 center>
+            Already have an account?
+          </Text>
+
+          <Button
+            label="Sign In"
+            flexS
+            margin-0
+            link
+            color="#fd1775"
+            size={ButtonSize.small}
+            text70
+            onPress={props.unsetRegister}
+          />
+        </View>
+      </View>
+    </View>
+  );
 };
 
 export default SignUpPage;
 
 const styles = StyleSheet.create({
-    textfield: {
-        backgroundColor: "white",
-        marginVertical: 10,
-        padding: 30,
-        height: 45,
-        borderRadius: 50,
-    },
+  textfield: {
+    backgroundColor: "white",
+    marginVertical: 10,
+    padding: 30,
+    height: 45,
+    borderRadius: 50,
+  },
+  //mora da se izmeni kako treba
+  bottomView: { marginTop: 150 },
 });
diff --git a/components/pages/todos/ProgressCard.tsx b/components/pages/todos/ProgressCard.tsx
index 116dfd4..ed7a16d 100644
--- a/components/pages/todos/ProgressCard.tsx
+++ b/components/pages/todos/ProgressCard.tsx
@@ -4,13 +4,12 @@ import { Fontisto } from "@expo/vector-icons";
 import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
 import { useToDosContext } from "@/contexts/ToDosContext";
 
-const ProgressCard = () => {
+const ProgressCard = ({children}: {children?: React.ReactNode}) => {
   const { maxPoints } = useToDosContext();
   return (
     <View
       backgroundColor="white"
-      marginH-25
-      marginB-30
+      marginB-5
       padding-15
       style={{ borderRadius: 22 }}
     >
@@ -35,11 +34,7 @@ const ProgressCard = () => {
         <Text color={"#868686"}>{maxPoints}</Text>
       </View>
       <View centerV centerH>
-        <Button backgroundColor="transparent">
-          <Text style={{ textDecorationLine: "underline", color: "#05a8b6" }}>
-            View your full progress report here
-          </Text>
-        </Button>
+        {children}
       </View>
     </View>
   );
diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx
index 9207cc0..1d0e926 100644
--- a/components/pages/todos/ToDoItem.tsx
+++ b/components/pages/todos/ToDoItem.tsx
@@ -10,7 +10,6 @@ const ToDoItem = (props: { item: IToDo }) => {
       centerV
       paddingV-10
       paddingH-10
-      marginH-25
       marginV-10
       style={{
         borderRadius: 22,
diff --git a/components/pages/todos/ToDosPage.tsx b/components/pages/todos/ToDosPage.tsx
new file mode 100644
index 0000000..e3cc100
--- /dev/null
+++ b/components/pages/todos/ToDosPage.tsx
@@ -0,0 +1,76 @@
+import { View, Text, Button, ButtonSize } from "react-native-ui-lib";
+import React, { useState } from "react";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import AddChore from "./AddChore";
+import ProgressCard from "./ProgressCard";
+import ToDosList from "./ToDosList";
+import { ScrollView } from "react-native";
+import { StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
+import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
+import UserChoresProgress from "./user-chores/UserChoresProgress";
+
+const ToDosPage = () => {
+  const [pageIndex, setPageIndex] = useState<number>(0);
+  const { profileData } = useAuthContext();
+  const pageLink = (
+    <TouchableOpacity onPress={() => setPageIndex(1)}>
+      <Text color="#ea156d">View family progress</Text>
+    </TouchableOpacity>
+  );
+  return (
+    <View paddingH-25 backgroundColor="#f9f8f7" height={"100%"}>
+      {pageIndex == 0 && (
+        <View>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+          >
+            <View>
+              <HeaderTemplate
+                message="Here are your To Do's"
+                isWelcome={true}
+                link={profileData?.userType == ProfileType.PARENT && pageLink}
+              />
+              {profileData?.userType == ProfileType.CHILD && (
+                <View marginB-25>
+                  <ProgressCard
+                    children={
+                      <Button
+                        backgroundColor="transparent"
+                        onPress={() => setPageIndex(2)}
+                      >
+                        <Text
+                          style={{
+                            textDecorationLine: "underline",
+                            color: "#05a8b6",
+                          }}
+                        >
+                          View your full progress report here
+                        </Text>
+                      </Button>
+                    }
+                  />
+                </View>
+              )}
+              <ToDosList />
+            </View>
+          </ScrollView>
+          {profileData?.userType == ProfileType.PARENT && <AddChore />}
+        </View>
+      )}
+      {pageIndex == 1 && <FamilyChoresProgress setPageIndex={setPageIndex} />}
+      {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  linkBtn: {
+    backgroundColor: "transparent",
+    padding: 0,
+  },
+});
+
+export default ToDosPage;
diff --git a/components/pages/todos/family-chores/FamilyChart.tsx b/components/pages/todos/family-chores/FamilyChart.tsx
new file mode 100644
index 0000000..7737adc
--- /dev/null
+++ b/components/pages/todos/family-chores/FamilyChart.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { View } from "react-native";
+import { BarChart } from "react-native-gifted-charts";
+
+const FamilyChart = () => {
+  // Define the data for the bars
+  const data = [
+    {
+      value: 600, // Total value of the bar
+      stacks: [
+        { value: 290, color: "#e7d526" }, // First part of the bar
+        { value: 310, color: "#00a8b6" }, // Second part of the bar
+      ],
+      label: "M",
+    },
+    {
+      value: 400,
+      stacks: [
+        { value: 190, color: "#e7d526" },
+        { value: 210, color: "#00a8b6" },
+      ],
+      label: "Tu",
+    },
+    {
+      value: 400,
+      stacks: [
+        { value: 210, color: "#e7d526" },
+        { value: 190, color: "#00a8b6" },
+      ],
+      label: "W",
+    },
+    {
+      value: 800,
+      stacks: [
+        { value: 410, color: "#e7d526" },
+        { value: 390, color: "#00a8b6" },
+      ],
+      label: "Th",
+    },
+    {
+      value: 600,
+      stacks: [
+        { value: 220, color: "#e7d526" },
+        { value: 380, color: "#00a8b6" },
+      ],
+      label: "F",
+    },
+    {
+      value: 200,
+      stacks: [
+        { value: 160, color: "#e7d526" },
+        { value: 40, color: "#00a8b6" },
+      ],
+      label: "Sa",
+    },
+    {
+      value: 200,
+      stacks: [
+        { value: 160, color: "#e7d526" },
+        { value: 40, color: "#00a8b6" },
+      ],
+      label: "Su",
+    },
+  ];
+
+  return (
+    <BarChart
+      stackData={data}
+      width={250}
+      height={150} // Height of the chart
+      barWidth={20} // Width of each bar
+      noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
+      maxValue={1000} // Max value on the chart
+      stepValue={200} // Step size for horizontal lines
+      yAxisThickness={0} // Hide the Y-axis line
+      yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
+      hideRules={false} // Show the horizontal lines
+      rulesColor="#dadada" // Color for the horizontal lines
+      stackBorderTopLeftRadius={5} // Round the bars
+      stackBorderTopRightRadius={5} // Round the bars
+      spacing={16}
+      disableScroll
+    />
+  );
+};
+
+export default FamilyChart;
diff --git a/components/pages/todos/family-chores/FamilyChoresProgress.tsx b/components/pages/todos/family-chores/FamilyChoresProgress.tsx
new file mode 100644
index 0000000..dedbcc5
--- /dev/null
+++ b/components/pages/todos/family-chores/FamilyChoresProgress.tsx
@@ -0,0 +1,67 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+import { StyleSheet } from "react-native";
+import FamilyChart from "./FamilyChart";
+import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
+
+const FamilyChoresProgress = ({
+  setPageIndex,
+}: {
+  setPageIndex: (value: number) => void;
+}) => {
+  return (
+    <View marginT-20 marginH-5>
+      <TouchableOpacity onPress={() => setPageIndex(0)}>
+        <Text>Back to ToDos</Text>
+      </TouchableOpacity>
+      <View centerH>
+        <Text text50R>Family Chores Progress Report</Text>
+      </View>
+      <View row spread marginT-25 marginB-20>
+        <Text text70>Points earned this week</Text>
+        <View row>
+          <View style={styles.pfpSmall} backgroundColor="#05a8b6" />
+          <View style={styles.pfpSmall} backgroundColor="#ebd825" />
+        </View>
+      </View>
+      <View style={styles.card} paddingL-10>
+        <FamilyChart />
+      </View>
+      <Text text70 marginV-20>
+        Chore Tracker
+      </Text>
+      <View style={styles.card} marginB-20 row spread>
+        <View style={styles.pfpBig} backgroundColor="#05a8b6" />
+        <View width={"100%"} centerV centerH>
+          <Text> x/y chores completed</Text>
+        </View>
+      </View>
+      <View style={styles.card} row spread>
+        <View style={styles.pfpBig} backgroundColor="#ebd825" />
+        <View width={"100%"} centerV centerH>
+          <Text> x/y chores completed</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  pfpSmall: {
+    width: 30,
+    aspectRatio: 1,
+    borderRadius: 50,
+    marginHorizontal: 2,
+  },
+  pfpBig: {
+    width: 50,
+    aspectRatio: 1,
+    borderRadius: 50,
+  },
+  card: {
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 20,
+  },
+});
+
+export default FamilyChoresProgress;
diff --git a/components/pages/todos/user-chores/UserChart.tsx b/components/pages/todos/user-chores/UserChart.tsx
new file mode 100644
index 0000000..5ef602b
--- /dev/null
+++ b/components/pages/todos/user-chores/UserChart.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { View } from "react-native";
+import { BarChart } from "react-native-gifted-charts";
+
+const UserChart = () => {
+    const barColor = "#05a8b6"
+  const data = [
+    {
+      value: 290, // Direct value of the bar
+      frontColor: barColor, // Color of the bar
+      label: "M",
+    },
+    {
+      value: 190,
+      frontColor: barColor,
+      label: "Tu",
+    },
+    {
+      value: 210,
+      frontColor: barColor,
+      label: "W",
+    },
+    {
+      value: 410,
+      frontColor: barColor,
+      label: "Th",
+    },
+    {
+      value: 220,
+      frontColor: barColor,
+      label: "F",
+    },
+    {
+      value: 160,
+      frontColor: barColor,
+      label: "Sa",
+    },
+    {
+      value: 160,
+      frontColor: barColor,
+      label: "Su",
+    },
+  ];
+
+  return (
+    <BarChart
+      data={data}
+      width={255}
+      height={150} // Height of the chart
+      barWidth={20} // Width of each bar
+      noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
+      maxValue={1000} // Max value on the chart
+      stepValue={200} // Step size for horizontal lines
+      yAxisThickness={0} // Hide the Y-axis line
+      yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
+      hideRules={false} // Show the horizontal lines
+      rulesColor="#dadada" // Color for the horizontal lines
+      barBorderTopLeftRadius={5} // Round the bars
+      barBorderTopRightRadius={5} // Round the bars
+      spacing={16}
+      disableScroll
+    />
+  );
+};
+
+export default UserChart;
diff --git a/components/pages/todos/user-chores/UserChoresProgress.tsx b/components/pages/todos/user-chores/UserChoresProgress.tsx
new file mode 100644
index 0000000..1023d4f
--- /dev/null
+++ b/components/pages/todos/user-chores/UserChoresProgress.tsx
@@ -0,0 +1,152 @@
+import {
+  View,
+  Text,
+  ProgressBar,
+  Button,
+  ButtonSize,
+  Modal,
+  Dialog,
+} from "react-native-ui-lib";
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
+import UserChart from "./UserChart";
+import ProgressCard from "../ProgressCard";
+import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
+import { ScrollView } from "react-native-gesture-handler";
+import { PanViewDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
+
+const UserChoresProgress = ({
+  setPageIndex,
+}: {
+  setPageIndex: (value: number) => void;
+}) => {
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
+  return (
+    <View marginT-20 paddingB-20>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
+        <TouchableOpacity onPress={() => setPageIndex(0)}>
+          <Text>Back to ToDos</Text>
+        </TouchableOpacity>
+        <View centerH>
+          <Text text50R>Your To Dos Progress Report</Text>
+        </View>
+        <View row spread marginT-25 marginB-5>
+          <Text text70>Daily Goal</Text>
+        </View>
+        <ProgressCard />
+        <View row spread marginT-10 marginB-5>
+          <Text text70>Points Earned This Week</Text>
+        </View>
+        <View style={styles.card} paddingL-10>
+          <UserChart />
+        </View>
+        <View row spread marginT-20 marginB-8 centerV>
+          <Text text70>Total Reward Points</Text>
+          <Button
+            size={ButtonSize.small}
+            label="Spend my points"
+            color="#50be0c"
+            backgroundColor="#ebf2e4"
+            onPress={() => setModalVisible(true)}
+            iconSource={() => (
+              <AntDesign
+                name="gift"
+                size={20}
+                style={{ marginRight: 5 }}
+                color="#50be0c"
+              />
+            )}
+          />
+        </View>
+        <View style={styles.card}>
+          <View row centerV>
+            <Ionicons name="flower-outline" size={30} color="#8005eb" />
+            <Text text70 marginL-5>
+              You have 1200 points saved!
+            </Text>
+          </View>
+          <ProgressBar
+            progress={80}
+            progressColor="#ff9900"
+            style={{
+              height: 21,
+              backgroundColor: "#faeedb",
+              marginTop: 15,
+              marginBottom: 5,
+            }}
+          />
+          <View row spread>
+            <Text>0</Text>
+            <Text>5000</Text>
+          </View>
+        </View>
+      </ScrollView>
+      <Dialog
+        visible={modalVisible}
+        onDismiss={() => setModalVisible(false)}
+        children={
+          <View style={styles.card} paddingH-35 paddingT-35>
+            <Text text60 center marginB-35>
+              How would you like to spend your points?
+            </Text>
+            <Button
+              label="Skip a Chore Cor a Day - 150 pts"
+              text70
+              marginB-15
+              backgroundColor="#05a8b6"
+              size={ButtonSize.large}
+            />
+            <Button
+              label="Extra Screen Time - 100 pts"
+              text70
+              marginB-15
+              backgroundColor="#ea156c"
+              size={ButtonSize.large}
+            />
+            <Button
+              label="Movie Night - 50 pts"
+              text70
+              marginB-15
+              backgroundColor="#7305d4"
+              size={ButtonSize.large}
+            />
+            <Button
+              label="Ice Cream Treat - 25 pts"
+              text70
+              marginB-15
+              backgroundColor="#e28800"
+              size={ButtonSize.large}
+            />
+            <TouchableOpacity onPress={() => setModalVisible(false)}>
+                <Text text70 center color="#999999">Go back to my to dos</Text>
+            </TouchableOpacity>
+          </View>
+        }
+      />
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  pfpSmall: {
+    width: 30,
+    aspectRatio: 1,
+    borderRadius: 50,
+    marginHorizontal: 2,
+  },
+  pfpBig: {
+    width: 50,
+    aspectRatio: 1,
+    borderRadius: 50,
+  },
+  card: {
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 20,
+  },
+});
+
+export default UserChoresProgress;
diff --git a/components/shared/HeaderTemplate.tsx b/components/shared/HeaderTemplate.tsx
index 208afd7..a2e0648 100644
--- a/components/shared/HeaderTemplate.tsx
+++ b/components/shared/HeaderTemplate.tsx
@@ -2,7 +2,12 @@ import { View, Text } from "react-native-ui-lib";
 import React from "react";
 import { useAuthContext } from "@/contexts/AuthContext";
 
-const HeaderTemplate = (props: { message: string; isWelcome: boolean; children?: React.ReactNode }) => {
+const HeaderTemplate = (props: {
+  message: string;
+  isWelcome: boolean;
+  children?: React.ReactNode;
+  link?: React.ReactNode;
+}) => {
   const { user, profileData } = useAuthContext();
   return (
     <View row centerV padding-25>
@@ -14,9 +19,12 @@ const HeaderTemplate = (props: { message: string; isWelcome: boolean; children?:
         marginR-20
       />
       <View>
-        {props.isWelcome && <Text text70L>Welcome, {user?.email}!</Text>}
+        {props.isWelcome && (
+          <Text text70L>Welcome, {profileData?.firstName}!</Text>
+        )}
         <Text text70BL>{props.message}</Text>
         {props.children && <View>{props.children}</View>}
+        {props.link && <View>{props.link}</View>}
       </View>
     </View>
   );
diff --git a/package-lock.json b/package-lock.json
index f503413..be44d3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,12 +40,13 @@
         "react-native-big-calendar": "^4.14.0",
         "react-native-calendars": "^1.1306.0",
         "react-native-gesture-handler": "~2.16.1",
+        "react-native-gifted-charts": "^1.4.41",
         "react-native-linear-gradient": "^2.8.3",
         "react-native-onboarding-swiper": "^1.3.0",
         "react-native-reanimated": "~3.10.1",
         "react-native-safe-area-context": "4.10.5",
         "react-native-screens": "3.31.1",
-        "react-native-svg": "^15.6.0",
+        "react-native-svg": "^15.7.1",
         "react-native-ui-lib": "^7.27.0",
         "react-native-web": "~0.19.10",
         "react-query": "^3.39.3"
@@ -13065,6 +13066,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/gifted-charts-core": {
+      "version": "0.1.41",
+      "resolved": "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.41.tgz",
+      "integrity": "sha512-17xzJ0kJw+BVbxX7J1JmDHHJt/Yp1n+h0sTrC6eK4rQg9Hzw0EC/MJcv5fLJzg6dkVo+3wQ3anWXL5itapP+nQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -19684,6 +19695,30 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-gifted-charts": {
+      "version": "1.4.41",
+      "resolved": "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.41.tgz",
+      "integrity": "sha512-UQ3E6ork24VFVTOhgAAbGkGplYB89mRjNEEPJKRAzwSYoJ1Gjtt1pleuY7OKpMb5TQychreFBA2oVBrwTLdeKw==",
+      "license": "MIT",
+      "dependencies": {
+        "gifted-charts-core": "0.1.41"
+      },
+      "peerDependencies": {
+        "expo-linear-gradient": "*",
+        "react": "*",
+        "react-native": "*",
+        "react-native-linear-gradient": "*",
+        "react-native-svg": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo-linear-gradient": {
+          "optional": true
+        },
+        "react-native-linear-gradient": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-helmet-async": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz",
@@ -19786,9 +19821,9 @@
       }
     },
     "node_modules/react-native-svg": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.6.0.tgz",
-      "integrity": "sha512-TUtR+h+yi1ODsd8FHdom1TpjfWOmnaK5pri5rnSBXnMqpzq8o2zZfonHTjPX+nS3wb/Pu2XsoARgYaHNjVWXhQ==",
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.7.1.tgz",
+      "integrity": "sha512-Xc11L4t6/DtmUwrQqHR7S45Qy3cIWpcfGlmEatVeZ9c1N8eAK79heJmGRgCOVrXESrrLEHfP/AYGf0BGyrvV6A==",
       "license": "MIT",
       "dependencies": {
         "css-select": "^5.1.0",
diff --git a/package.json b/package.json
index cfc87d3..4957f7b 100644
--- a/package.json
+++ b/package.json
@@ -47,12 +47,13 @@
     "react-native-big-calendar": "^4.14.0",
     "react-native-calendars": "^1.1306.0",
     "react-native-gesture-handler": "~2.16.1",
+    "react-native-gifted-charts": "^1.4.41",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-onboarding-swiper": "^1.3.0",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
-    "react-native-svg": "^15.6.0",
+    "react-native-svg": "^15.7.1",
     "react-native-ui-lib": "^7.27.0",
     "react-native-web": "~0.19.10",
     "react-query": "^3.39.3"
diff --git a/yarn.lock b/yarn.lock
index 8680064..7783544 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5991,6 +5991,11 @@ getenv@^1.0.0:
   resolved "https://registry.npmjs.org/getenv/-/getenv-1.0.0.tgz"
   integrity sha512-7yetJWqbS9sbn0vIfliPsFgoXMKn/YMF+Wuiog97x+urnSRRRZ7xB+uVkwGKzRgq9CDFfMQnE9ruL5DHv9c6Xg==
 
+gifted-charts-core@0.1.41:
+  version "0.1.41"
+  resolved "https://registry.npmjs.org/gifted-charts-core/-/gifted-charts-core-0.1.41.tgz"
+  integrity sha512-17xzJ0kJw+BVbxX7J1JmDHHJt/Yp1n+h0sTrC6eK4rQg9Hzw0EC/MJcv5fLJzg6dkVo+3wQ3anWXL5itapP+nQ==
+
 glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -8974,6 +8979,13 @@ react-native-gesture-handler@*, "react-native-gesture-handler@>= 1.0.0", react-n
     lodash "^4.17.21"
     prop-types "^15.7.2"
 
+react-native-gifted-charts@^1.4.41:
+  version "1.4.41"
+  resolved "https://registry.npmjs.org/react-native-gifted-charts/-/react-native-gifted-charts-1.4.41.tgz"
+  integrity sha512-UQ3E6ork24VFVTOhgAAbGkGplYB89mRjNEEPJKRAzwSYoJ1Gjtt1pleuY7OKpMb5TQychreFBA2oVBrwTLdeKw==
+  dependencies:
+    gifted-charts-core "0.1.41"
+
 react-native-helmet-async@2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/react-native-helmet-async/-/react-native-helmet-async-2.0.4.tgz"
@@ -8983,7 +8995,7 @@ react-native-helmet-async@2.0.4:
     react-fast-compare "^3.2.2"
     shallowequal "^1.1.0"
 
-react-native-linear-gradient@^2.8.3:
+react-native-linear-gradient@*, react-native-linear-gradient@^2.8.3:
   version "2.8.3"
   resolved "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.8.3.tgz"
   integrity sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==
@@ -9032,10 +9044,10 @@ react-native-screens@*, "react-native-screens@>= 3.0.0", react-native-screens@3.
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
-react-native-svg@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.6.0.tgz"
-  integrity sha512-TUtR+h+yi1ODsd8FHdom1TpjfWOmnaK5pri5rnSBXnMqpzq8o2zZfonHTjPX+nS3wb/Pu2XsoARgYaHNjVWXhQ==
+react-native-svg@*, react-native-svg@^15.7.1:
+  version "15.7.1"
+  resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.7.1.tgz"
+  integrity sha512-Xc11L4t6/DtmUwrQqHR7S45Qy3cIWpcfGlmEatVeZ9c1N8eAK79heJmGRgCOVrXESrrLEHfP/AYGf0BGyrvV6A==
   dependencies:
     css-select "^5.1.0"
     css-tree "^1.1.3"