diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 714d3b4..36768ba 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -43,7 +43,7 @@ export default function TabLayout() {
         return (
           <DrawerContentScrollView {...props} style={{ height: "100%" }}>
             <View centerH centerV margin-30>
-              <Text text40>Welcome to Cally</Text>
+              <Text style={styles.title}>Welcome to Cally</Text>
             </View>
             <View
               style={{
@@ -101,7 +101,7 @@ export default function TabLayout() {
             <Button
               onPress={() => props.navigation.navigate("settings")}
               label={"Manage Settings"}
-              labelStyle={{fontFamily: "Manrope_500Medium"}}
+              labelStyle={styles.label}
               iconSource={() => (
                 <View
                   backgroundColor="#ededed"
@@ -120,8 +120,8 @@ export default function TabLayout() {
               paddingV-30
               marginH-30
               marginB-10
-              borderRadius={15}
-              style={{ elevation: 1 }}
+              borderRadius={18.55}
+              style={{ elevation: 0 }}
             />
 
             <Button
@@ -136,7 +136,7 @@ export default function TabLayout() {
               }}
               label="Sign out of Cally"
               color="#fd1775"
-              labelStyle={{fontFamily: 'Manrope_700Bold'}}
+              labelStyle={styles.signOut}
               onPress={() => signOut()}
             />
           </DrawerContentScrollView>
@@ -196,3 +196,13 @@ export default function TabLayout() {
     </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"
+  }
+});
diff --git a/app/_layout.tsx b/app/_layout.tsx
index b4e3938..42e1941 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -10,6 +10,42 @@ import {
   Manrope_700Bold,
   Manrope_800ExtraBold,
 } from "@expo-google-fonts/manrope";
+import {
+  PlusJakartaSans_200ExtraLight,
+  PlusJakartaSans_300Light,
+  PlusJakartaSans_400Regular,
+  PlusJakartaSans_500Medium,
+  PlusJakartaSans_600SemiBold,
+  PlusJakartaSans_700Bold,
+  PlusJakartaSans_800ExtraBold,
+  PlusJakartaSans_200ExtraLight_Italic,
+  PlusJakartaSans_300Light_Italic,
+  PlusJakartaSans_400Regular_Italic,
+  PlusJakartaSans_500Medium_Italic,
+  PlusJakartaSans_600SemiBold_Italic,
+  PlusJakartaSans_700Bold_Italic,
+  PlusJakartaSans_800ExtraBold_Italic,
+} from "@expo-google-fonts/plus-jakarta-sans";
+import {
+  Poppins_100Thin,
+  Poppins_100Thin_Italic,
+  Poppins_200ExtraLight,
+  Poppins_200ExtraLight_Italic,
+  Poppins_300Light,
+  Poppins_300Light_Italic,
+  Poppins_400Regular,
+  Poppins_400Regular_Italic,
+  Poppins_500Medium,
+  Poppins_500Medium_Italic,
+  Poppins_600SemiBold,
+  Poppins_600SemiBold_Italic,
+  Poppins_700Bold,
+  Poppins_700Bold_Italic,
+  Poppins_800ExtraBold,
+  Poppins_800ExtraBold_Italic,
+  Poppins_900Black,
+  Poppins_900Black_Italic,
+} from "@expo-google-fonts/poppins";
 import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import "react-native-reanimated";
@@ -30,9 +66,9 @@ SplashScreen.preventAutoHideAsync();
 const queryClient = new QueryClient();
 
 if (__DEV__) {
-    functions().useEmulator('localhost', 5001);
-    firestore().useEmulator("localhost", 5471);
-    auth().useEmulator("http://localhost:9099");
+  functions().useEmulator("localhost", 5001);
+  firestore().useEmulator("localhost", 5471);
+  auth().useEmulator("http://localhost:9099");
 }
 
 type TextStyleBase =
@@ -136,6 +172,38 @@ export default function RootLayout() {
     Manrope_600SemiBold,
     Manrope_700Bold,
     Manrope_800ExtraBold,
+    PlusJakartaSans_200ExtraLight,
+    PlusJakartaSans_300Light,
+    PlusJakartaSans_400Regular,
+    PlusJakartaSans_500Medium,
+    PlusJakartaSans_600SemiBold,
+    PlusJakartaSans_700Bold,
+    PlusJakartaSans_800ExtraBold,
+    PlusJakartaSans_200ExtraLight_Italic,
+    PlusJakartaSans_300Light_Italic,
+    PlusJakartaSans_400Regular_Italic,
+    PlusJakartaSans_500Medium_Italic,
+    PlusJakartaSans_600SemiBold_Italic,
+    PlusJakartaSans_700Bold_Italic,
+    PlusJakartaSans_800ExtraBold_Italic,
+    Poppins_100Thin,
+    Poppins_100Thin_Italic,
+    Poppins_200ExtraLight,
+    Poppins_200ExtraLight_Italic,
+    Poppins_300Light,
+    Poppins_300Light_Italic,
+    Poppins_400Regular,
+    Poppins_400Regular_Italic,
+    Poppins_500Medium,
+    Poppins_500Medium_Italic,
+    Poppins_600SemiBold,
+    Poppins_600SemiBold_Italic,
+    Poppins_700Bold,
+    Poppins_700Bold_Italic,
+    Poppins_800ExtraBold,
+    Poppins_800ExtraBold_Italic,
+    Poppins_900Black,
+    Poppins_900Black_Italic,
   });
 
   useEffect(() => {
diff --git a/assets/images/child-picture.png b/assets/images/child-picture.png
index 5669ec4..736f283 100644
Binary files a/assets/images/child-picture.png and b/assets/images/child-picture.png differ
diff --git a/assets/images/child1-picture.png b/assets/images/child1-picture.png
index 09a5ba1..22fa145 100644
Binary files a/assets/images/child1-picture.png and b/assets/images/child1-picture.png differ
diff --git a/assets/svgs/AddImageIcon.tsx b/assets/svgs/AddImageIcon.tsx
new file mode 100644
index 0000000..72002ee
--- /dev/null
+++ b/assets/svgs/AddImageIcon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import Svg, { Path, SvgProps } from "react-native-svg"
+const AddImageIcon: React.FC<SvgProps> = (props) => (
+  <Svg
+    width={props.width || 28}
+    height={props.width || 28}
+    viewBox="0 0 28 28"
+    fill="none"
+    {...props}
+  >
+    <Path
+      stroke={props.color || "#FD1775"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.936}
+      d="M16.833 20.433 14.34 17.96c-1.146-1.137-1.719-1.705-2.379-1.918a2.903 2.903 0 0 0-1.785 0c-.66.213-1.233.781-2.379 1.918L1.99 23.808m14.843-3.375.496-.492c1.17-1.16 1.755-1.74 2.426-1.952a2.903 2.903 0 0 1 1.811.02c.666.228 1.238.821 2.381 2.008l1.214 1.232m-8.328-.816 5.743 5.844M1.99 23.807c.044.379.121.676.255.939.279.546.723.99 1.27 1.269.62.316 1.434.316 3.06.316h13.94c.901 0 1.553 0 2.061-.054M1.99 23.807c-.061-.515-.061-1.183-.061-2.122V7.745c0-1.626 0-2.439.316-3.06.279-.547.723-.99 1.27-1.27.62-.316 1.434-.316 3.06-.316h5.518m10.483 23.178c.408-.043.723-.121 1-.262.546-.279.99-.723 1.268-1.27.317-.62.317-1.434.317-3.06v-5.518m-2.904-5.808V6.003m0 0V1.647m0 4.356h4.356m-4.356 0H17.9"
+    />
+  </Svg>
+)
+export default AddImageIcon
diff --git a/assets/svgs/AddPersonIcon.tsx b/assets/svgs/AddPersonIcon.tsx
new file mode 100644
index 0000000..ddbab98
--- /dev/null
+++ b/assets/svgs/AddPersonIcon.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+import Svg, { SvgProps, Path } from "react-native-svg"
+const AddPersonIcon = (props: SvgProps) => (
+  <Svg
+    width={props. width || 23}
+    height={props. width || 23}
+    viewBox="0 0 23 23"
+    fill="none"
+    {...props}
+  >
+    <Path
+      fill={props.color || "#8A8A8A"}
+      fillRule="evenodd"
+      d="M22.089 19.5a1 1 0 0 1-1 .998h-1v1.05a1 1 0 0 1-2 0v-1.05h-1a1 1 0 0 1-1-.998 1 1 0 0 1 1-.998h1v-.945a1 1 0 0 1 2 0v.945h1a1 1 0 0 1 1 .998Zm-11.377-9.045a7.844 7.844 0 0 0-.654-.033c-.203 0-.402.014-.601.03a2.997 2.997 0 0 1-2.368-2.924 3 3 0 0 1 6 0 2.999 2.999 0 0 1-2.377 2.927Zm-8.605 7.05c-.014.005-.004 0-.018.006V3.53c0-.55.448-.99 1-.99h6.847a4.994 4.994 0 0 0-4.847 4.984c0 1.441.622 2.73 1.602 3.642-2.478 1.147-4.27 3.516-4.584 6.338ZM14.992 6.52a4.955 4.955 0 0 0-4.837-3.98h6.934a1 1 0 0 1 1 .997v8.979a1 1 0 0 0 2 0V2.54a1.997 1.997 0 0 0-2-1.995h-16c-1.105 0-2 .893-2 1.995v15.962c0 1.102.895 1.996 2 1.996h10a1 1 0 0 0 1-.998 1 1 0 0 0-1-.998H4.064s-.006-.065-.006-.106c0-6.084 7.386-6.888 9.24-5.168 1.074.995 2.465-.59 1.387-1.354a7.933 7.933 0 0 0-1.221-.712c1.214-1.115 1.889-2.785 1.528-4.641Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+)
+export default AddPersonIcon
diff --git a/assets/svgs/MenuIcon.tsx b/assets/svgs/MenuIcon.tsx
index 2d3fc37..ad114a9 100644
--- a/assets/svgs/MenuIcon.tsx
+++ b/assets/svgs/MenuIcon.tsx
@@ -9,6 +9,7 @@ const MenuIcon: React.FC<MenuIconProps> = (props) => (
   <Svg
     width={24}
     height={16}
+    viewBox="0 0 24 16"
     fill="none"
     {...props}
   >
diff --git a/assets/svgs/NavCalendarIcon.tsx b/assets/svgs/NavCalendarIcon.tsx
index 19ea7d8..5744643 100644
--- a/assets/svgs/NavCalendarIcon.tsx
+++ b/assets/svgs/NavCalendarIcon.tsx
@@ -4,11 +4,12 @@ const NavCalendarIcon: React.FC<SvgProps> = (props) => (
   <Svg
     width={28}
     height={28}
+    viewBox="0 0 28 28"
     fill="none"
     {...props}
   >
     <Path
-      stroke="#07B8C7"
+      stroke={props.color || "#07B8C7"}
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={2.124}
diff --git a/assets/svgs/NavToDosIcon.tsx b/assets/svgs/NavToDosIcon.tsx
index 2cbb70a..9592aa3 100644
--- a/assets/svgs/NavToDosIcon.tsx
+++ b/assets/svgs/NavToDosIcon.tsx
@@ -2,14 +2,15 @@ import * as React from "react"
 import Svg, { Path, SvgProps } from "react-native-svg"
 const NavToDosIcon: React.FC<SvgProps> = (props) => (
   <Svg
-    width={30}
-    height={30}
+    width={props.width || 30}
+    height={props.width || 30}
+    viewBox="0 0 30 30"
     fill="none"
     {...props}
   >
     <Path
-      fill="#8005EB"
-      stroke="#8005EB"
+      fill={props.color || "#8005EB"}
+      stroke={props.color || "#8005EB"}
       strokeWidth={0.5}
       d="M15.038 29.649c-7.953 0-14.4-6.447-14.4-14.4s6.447-14.4 14.4-14.4 14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4Zm0-1.44c7.157 0 12.96-5.802 12.96-12.96 0-7.158-5.803-12.96-12.96-12.96-7.158 0-12.96 5.802-12.96 12.96 0 7.158 5.802 12.96 12.96 12.96Zm4.53-17.07a.72.72 0 1 1 1.019 1.019l-7.2 7.2a.72.72 0 0 1-1.018 0l-2.88-2.88a.72.72 0 1 1 1.018-1.018l2.37 2.37 6.692-6.69Z"
     />
diff --git a/assets/svgs/ProfileIcon.tsx b/assets/svgs/ProfileIcon.tsx
index 7ba0c76..22889cb 100644
--- a/assets/svgs/ProfileIcon.tsx
+++ b/assets/svgs/ProfileIcon.tsx
@@ -2,8 +2,9 @@ import * as React from "react"
 import Svg, { Path, SvgProps } from "react-native-svg"
 const ProfileIcon: React.FC<SvgProps> = (props) => (
   <Svg
-    width={21}
-    height={21}
+    width={22}
+    height={22}
+    viewBox="0 0 21 21"
     fill="none"
     {...props}
   >
diff --git a/assets/svgs/RemindersIcon.tsx b/assets/svgs/RemindersIcon.tsx
new file mode 100644
index 0000000..1652edd
--- /dev/null
+++ b/assets/svgs/RemindersIcon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import Svg, { SvgProps, Path } from "react-native-svg";
+const RemindersIcon = (props: SvgProps) => (
+  <Svg
+    width={props.width || 22}
+    height={props.width || 22}
+    viewBox="0 0 22 22"
+    fill="none"
+    {...props}
+  >
+    <Path
+      fill={props.color || "#919191"}
+      fillRule="evenodd"
+      stroke={props.color || "#919191"}
+      strokeWidth={0.4}
+      d="M3.974 3.96C7.964-.023 14.45.02 18.464 4.034c4.016 4.016 4.057 10.506.067 14.495-3.99 3.99-10.48 3.95-14.495-.067a10.315 10.315 0 0 1-2.94-8.705.788.788 0 1 1 1.561.214 8.738 8.738 0 0 0 2.494 7.376c3.41 3.411 8.902 3.43 12.265.067C20.78 14.05 20.76 8.56 17.35 5.148c-3.41-3.41-8.897-3.43-12.26-.072l.786.004a.788.788 0 1 1-.008 1.576L3.19 6.643a.788.788 0 0 1-.785-.784l-.013-2.677a.788.788 0 1 1 1.577-.007l.004.786Zm7.276 2.293c.435 0 .788.353.788.789v3.878l2.398 2.398a.788.788 0 1 1-1.115 1.115l-2.86-2.86V7.043c0-.436.354-.789.789-.789Z"
+      clipRule="evenodd"
+    />
+  </Svg>
+);
+export default RemindersIcon;
diff --git a/components/pages/brain_dump/BrainDumpPage.tsx b/components/pages/brain_dump/BrainDumpPage.tsx
index 071854e..bab2448 100644
--- a/components/pages/brain_dump/BrainDumpPage.tsx
+++ b/components/pages/brain_dump/BrainDumpPage.tsx
@@ -63,7 +63,7 @@ const BrainDumpPage = () => {
       >
         <View row centerV centerH>
           <MaterialIcons name="add" size={22} color={"white"} />
-          <Text white tex30 style={{ fontSize: 17 }}>
+          <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
             New
           </Text>
         </View>
diff --git a/components/pages/brain_dump/DumpItem.tsx b/components/pages/brain_dump/DumpItem.tsx
index a1bdda2..9c08bbb 100644
--- a/components/pages/brain_dump/DumpItem.tsx
+++ b/components/pages/brain_dump/DumpItem.tsx
@@ -13,13 +13,14 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
         <View
           backgroundColor="white"
           marginV-5
-          padding-15
-          style={{ borderRadius: 20, elevation: 2 }}
+          paddingH-13
+          paddingV-10
+          style={{ borderRadius: 15, elevation: 2 }}
         >
-          <Text text70B style={{fontSize: 17, fontFamily: 'Manrope_700Bold'}} marginB-8>
+          <Text text70B style={{fontSize: 15, fontFamily: 'Manrope_600SemiBold'}} marginB-8>
             {props.item.title}
           </Text>
-          <Text text70 style={{fontSize: 15, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text>
+          <Text text70 style={{fontSize: 13, fontFamily: "Manrope_400Regular", color: '#5c5c5c'}}>{props.item.description}</Text>
         </View>
       </TouchableWithoutFeedback>
       <MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
diff --git a/components/pages/brain_dump/MoveBrainDump.tsx b/components/pages/brain_dump/MoveBrainDump.tsx
index 87c725f..ad11ac8 100644
--- a/components/pages/brain_dump/MoveBrainDump.tsx
+++ b/components/pages/brain_dump/MoveBrainDump.tsx
@@ -1,14 +1,23 @@
 import React, { useEffect, useState } from "react";
-import { Button, Dialog, View, Text, TextField } from "react-native-ui-lib";
+import {
+  Button,
+  Dialog,
+  View,
+  Text,
+  TextField,
+  TouchableOpacity,
+} from "react-native-ui-lib";
 import { StyleSheet } from "react-native";
 import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
 import { IBrainDump, useBrainDumpContext } from "@/contexts/DumpContext";
-import { Entypo, EvilIcons, Feather, Octicons } from "@expo/vector-icons";
-import { TouchableOpacity } from "react-native-gesture-handler";
 import PenIcon from "@/assets/svgs/PenIcon";
 import BinIcon from "@/assets/svgs/BinIcon";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import CloseXIcon from "@/assets/svgs/CloseXIcon";
+import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
+import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
+import RemindersIcon from "@/assets/svgs/RemindersIcon";
+import MenuIcon from "@/assets/svgs/MenuIcon";
 
 const MoveBrainDump = (props: {
   item: IBrainDump;
@@ -63,6 +72,7 @@ const MoveBrainDump = (props: {
             iconSource={() => <PenIcon />}
             onPress={() => {
               console.log("selview");
+              props.setIsVisible(false);
             }}
           />
           <Button
@@ -80,13 +90,10 @@ const MoveBrainDump = (props: {
         <Text text60R>{props.item.title} </Text>
       </View>
       <View style={styles.divider} />
-      <View row marginH-20>
-        <Entypo
-          name="text"
-          size={24}
-          color="black"
-          style={{ marginBottom: "auto" }}
-        />
+      <View row marginL-10 gap-5>
+        <View paddingT-8>
+          <MenuIcon width={20} height={12} />
+        </View>
         <TextField
           textAlignVertical="top"
           multiline
@@ -99,6 +106,38 @@ const MoveBrainDump = (props: {
         />
       </View>
       <View style={styles.divider} />
+      <View gap-20 paddingH-10>
+        <TouchableOpacity>
+          <View row centerV>
+            <NavToDosIcon
+              width={22}
+              color={"#919191"}
+              style={styles.optionsIcon}
+            />
+            <Text style={styles.optionsReg}>Move to</Text>
+            <Text style={styles.optionsBold}> my to do's</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity>
+          <View row centerV>
+            <NavCalendarIcon
+              width={22}
+              height={22}
+              color={"#919191"}
+              style={styles.optionsIcon}
+            />
+            <Text style={styles.optionsReg}>Move to</Text>
+            <Text style={styles.optionsBold}> my calendar</Text>
+          </View>
+        </TouchableOpacity>
+        <TouchableOpacity>
+          <View row centerV>
+            <RemindersIcon width={22} style={styles.optionsIcon} />
+            <Text style={styles.optionsReg}>Move to</Text>
+            <Text style={styles.optionsBold}> my reminders</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
     </Dialog>
   );
 };
@@ -129,6 +168,17 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     marginTop: 25,
   },
+  optionsReg: {
+    fontSize: 16,
+    fontFamily: "PlusJakartaSans_400Regular",
+  },
+  optionsBold: {
+    fontSize: 16,
+    fontFamily: "PlusJakartaSans_600SemiBold",
+  },
+  optionsIcon: {
+    marginRight: 10,
+  },
 });
 
 export default MoveBrainDump;
diff --git a/components/pages/calendar/AddEventDialog.tsx b/components/pages/calendar/AddEventDialog.tsx
index 0ef37a6..4e92c30 100644
--- a/components/pages/calendar/AddEventDialog.tsx
+++ b/components/pages/calendar/AddEventDialog.tsx
@@ -14,11 +14,14 @@ import {
   Text,
   View,
 } from "react-native-ui-lib";
-import { TouchableOpacity } from "react-native";
+import { StyleSheet, TouchableOpacity } from "react-native";
 import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
 import AddChoreDialog from "../todos/AddChoreDialog";
 import { ToDosContextProvider } from "@/contexts/ToDosContext";
 import UploadImageDialog from "./UploadImageDialog";
+import CameraIcon from "@/assets/svgs/CameraIcon";
+import CalendarIcon from "@/assets/svgs/CalendarIcon";
+import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 
 export const AddEventDialog = () => {
   const [show, setShow] = useState(false);
@@ -60,9 +63,9 @@ export const AddEventDialog = () => {
         >
           <View row centerV centerH>
             <MaterialIcons name="add" size={22} color={"white"} />
-            <Text white tex30 style={{ fontSize: 17 }}>
-              New
-            </Text>
+            <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
+            New
+          </Text>
           </View>
         </Button>
 
@@ -72,16 +75,10 @@ export const AddEventDialog = () => {
           panDirection={PanningProvider.Directions.DOWN}
           center
         >
-          <Card
-            style={{
-              paddingHorizontal: 40,
-              paddingTop: 40,
-              paddingBottom: 20,
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Text text50R>Create a new event</Text>
+          <Card style={styles.dialogCard}>
+            <Text text60 style={styles.modalTitle}>
+              Create a new event
+            </Text>
 
             <View
               style={{ marginTop: 20, alignItems: "center", width: "100%" }}
@@ -95,14 +92,10 @@ export const AddEventDialog = () => {
                   paddingVertical: 13,
                 }}
                 label="Scan Image"
+                labelStyle={styles.btnLabel}
                 onPress={handleScanImageDialog}
                 iconSource={() => (
-                  <Feather
-                    name="camera"
-                    size={21}
-                    style={{ marginRight: 7 }}
-                    color="white"
-                  />
+                  <CameraIcon color="white" style={styles.btnIcon} />
                 )}
               />
 
@@ -115,14 +108,10 @@ export const AddEventDialog = () => {
                   paddingVertical: 13,
                 }}
                 label="Create Event"
+                labelStyle={styles.btnLabel}
                 onPress={handleOpenManualInputModal}
                 iconSource={() => (
-                  <MaterialCommunityIcons
-                    name="calendar-text-outline"
-                    size={22}
-                    style={{ marginRight: 5 }}
-                    color="white"
-                  />
+                  <CalendarIcon color={"white"} style={styles.btnIcon} />
                 )}
               />
 
@@ -135,20 +124,20 @@ export const AddEventDialog = () => {
                   paddingVertical: 13,
                 }}
                 label="Add To Do"
+                labelStyle={styles.btnLabel}
                 onPress={() => setChoreDialogVisible(true)}
                 iconSource={() => (
-                  <AntDesign
-                    name="checkcircleo"
-                    size={20}
-                    style={{ marginRight: 7 }}
-                    color="white"
+                  <NavToDosIcon
+                    color={"white"}
+                    width={23}
+                    style={styles.btnIcon}
                   />
                 )}
               />
             </View>
 
             <TouchableOpacity onPress={() => setShow(false)}>
-              <Text style={{ marginTop: 20, color: "#999999" }} text70>
+              <Text style={styles.bottomText} text70>
                 Go back to calendar
               </Text>
             </TouchableOpacity>
@@ -170,3 +159,30 @@ export const AddEventDialog = () => {
     </ToDosContextProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  modalTitle: {
+    fontSize: 22,
+    fontFamily: "Manrope_600SemiBold",
+    marginBottom: 16,
+  },
+  bottomText: {
+    marginTop: 20,
+    color: "#999999",
+    fontSize: 13.53,
+    fontFamily: "Poppins_500Medium",
+  },
+  dialogCard: {
+    paddingHorizontal: 40,
+    paddingTop: 35,
+    paddingBottom: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 20,
+  },
+  btnLabel: {
+    fontSize: 15,
+    fontFamily: "PlusJakartaSans_500Medium",
+  },
+  btnIcon: { marginRight: 10 },
+});
diff --git a/components/pages/calendar/CalendarPage.tsx b/components/pages/calendar/CalendarPage.tsx
index b928bfa..8c953fc 100644
--- a/components/pages/calendar/CalendarPage.tsx
+++ b/components/pages/calendar/CalendarPage.tsx
@@ -1,186 +1,201 @@
-import React, {useRef, useState} from "react";
-import {LayoutChangeEvent, StyleSheet} from "react-native";
-import {Calendar} from "react-native-big-calendar";
-import {Picker, PickerModes, SegmentedControl, View} from "react-native-ui-lib";
-import {MaterialIcons} from "@expo/vector-icons";
-import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
+import React, { useRef, useState } from "react";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
+import { Calendar } from "react-native-big-calendar";
+import {
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  View,
+} from "react-native-ui-lib";
+import { MaterialIcons } from "@expo/vector-icons";
+import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
 import HeaderTemplate from "@/components/shared/HeaderTemplate";
 import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
-import {ManuallyAddEventModal} from "@/components/pages/calendar/ManuallyAddEventModal";
-import {CalendarEvent} from "@/contexts/CalendarContext";
-import {useSettingsContext} from "@/contexts/SettingsContext";
+import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
+import { CalendarEvent } from "@/contexts/CalendarContext";
+import { useSettingsContext } from "@/contexts/SettingsContext";
 import EditEventDialog from "./EditEventDialog";
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
+import { Text } from "react-native-ui-lib";
 
 const modeMap = new Map([
-    [0, "day"],
-    [1, "week"],
-    [2, "month"],
+  [0, "day"],
+  [1, "week"],
+  [2, "month"],
 ]);
 
 const months = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 export default function CalendarPage() {
-    const {calendarColor} = useSettingsContext();
-    const [editVisible, setEditVisible] = useState<boolean>(false);
-    const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();
+  const { calendarColor } = useSettingsContext();
+  const [editVisible, setEditVisible] = useState<boolean>(false);
+  const [eventForEdit, setEventForEdit] = useState<CalendarEvent>();
 
-    const styles = StyleSheet.create({
-        segmentslblStyle: {
-            fontSize: 14,
-            fontFamily: 'Manrope',
-            fontWeight: 'bold'
-        },
-        calHeader: {
-            borderWidth: 0,
-        },
-        dayModeHeader: {
-            alignSelf: 'flex-start',
-            justifyContent: 'space-between',
-            alignContent: 'center',
-            width: 38,
-            right: 42,
-        }
-    });
+  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,
+    },
+  });
 
-    const [isFamilyView, setIsFamilyView] = useState<boolean>(false);
-    const [calendarHeight, setCalendarHeight] = useState(0);
-    const [mode, setMode] = useState<"week" | "month" | "day">("week");
-    const [selectedDate, setSelectedDate] = useState<Date>(new Date());
-    const [selectedNewEventDate, setSelectedNewEndDate] = useState<
-        Date | undefined
-    >(undefined);
+  const [isFamilyView, setIsFamilyView] = useState<boolean>(false);
+  const [calendarHeight, setCalendarHeight] = useState(0);
+  const [mode, setMode] = useState<"week" | "month" | "day">("week");
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [selectedNewEventDate, setSelectedNewEndDate] = useState<
+    Date | undefined
+  >(undefined);
 
-    const calendarContainerRef = useRef(null);
-    const {data: events} = useGetEvents(isFamilyView)
+  const calendarContainerRef = useRef(null);
+  const { data: events } = useGetEvents(isFamilyView);
 
-    const onLayout = (event: LayoutChangeEvent) => {
-        const {height} = event.nativeEvent.layout;
-        setCalendarHeight(height);
-    };
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setCalendarHeight(height);
+  };
 
-    const handleSegmentChange = (index: number) => {
-        const selectedMode = modeMap.get(index);
-        if (selectedMode) {
-            setMode(selectedMode as "day" | "week" | "month");
-        }
-    };
+  const handleSegmentChange = (index: number) => {
+    const selectedMode = modeMap.get(index);
+    if (selectedMode) {
+      setMode(selectedMode as "day" | "week" | "month");
+    }
+  };
 
-    const handleMonthChange = (month: string) => {
-        const currentDay = selectedDate.getDate();
-        const currentYear = selectedDate.getFullYear();
+  const handleMonthChange = (month: string) => {
+    const currentDay = selectedDate.getDate();
+    const currentYear = selectedDate.getFullYear();
 
-        const newMonthIndex = months.indexOf(month);
+    const newMonthIndex = months.indexOf(month);
 
-        const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
+    const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
 
-        setSelectedDate(updatedDate);
-    };
+    setSelectedDate(updatedDate);
+  };
 
-    return (
-        <View style={{flex: 1, height: "100%", padding: 10}} paddingH-22 paddingT-10>
-            <HeaderTemplate
-                message={"Let's get your week started!"}
-                isWelcome={true}
-            />
+  return (
+    <View
+      style={{ flex: 1, height: "100%", padding: 10 }}
+      paddingH-22
+      paddingT-0
+    >
+      <HeaderTemplate
+        message={"Let's get your week started!"}
+        isWelcome={true}
+      />
 
-            <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
-                ref={calendarContainerRef}
-                onLayout={onLayout}
+      <View
+        style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
+        ref={calendarContainerRef}
+        onLayout={onLayout}
+      >
+        <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()]} // Get the month from the date
+              placeholder={"Select Month"}
+              style={{fontFamily: 'Manrope_500Medium', fontSize: 17}}
+              mode={PickerModes.SINGLE}
+              onChange={(itemValue) => handleMonthChange(itemValue as string)}
+              trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
             >
-                <View
-                    style={{
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                        alignItems: "center",
-                        paddingHorizontal: 10,
-                        paddingVertical: 8,
-                        borderRadius: 20,
-                        borderBottomLeftRadius: 0,
-                        borderBottomRightRadius: 0,
-                        backgroundColor: "white",
-                        marginBottom: 10,
-                    }}
-                >
-                    <Picker
-                        value={months[selectedDate.getMonth()]} // Get the month from the date
-                        placeholder={"Select Month"}
-                        mode={PickerModes.SINGLE}
-                        onChange={(itemValue) => handleMonthChange(itemValue as string)}
-                        trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
-                    >
-                        {months.map((month) => (
-                            <Picker.Item key={month} label={month} value={month}/>
-                        ))}
-                    </Picker>
+              {months.map((month) => (
+                <Picker.Item key={month} label={month} value={month} />
+              ))}
+            </Picker>
+          </View>
 
-                    <View>
-                        <SegmentedControl
-                            segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
-                            backgroundColor="#ececec"
-                            inactiveColor="#919191"
-                            activeBackgroundColor="#ea156c"
-                            activeColor="white"
-                            outlineColor="white"
-                            outlineWidth={3}
-                            style={{backgroundColor: "green"}}
-                            segmentLabelStyle={styles.segmentslblStyle}
-                            onChangeIndex={handleSegmentChange}
-                            initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
-                        />
-                    </View>
-                </View>
-
-                {calendarHeight > 0 && (
-                    <Calendar
-                        bodyContainerStyle={styles.calHeader}
-                        mode={mode}
-                        events={isFamilyView ? events ?? [] : events ?? []}
-                        eventCellStyle={(event) => ({backgroundColor: event.eventColor})}
-                        onPressEvent={(event) => {
-                            setEditVisible(true);
-                            setEventForEdit(event);
-                        }}
-                        height={calendarHeight}
-                        activeDate={selectedDate}
-                        date={selectedDate}
-                        onPressCell={setSelectedNewEndDate}
-                        headerContentStyle={mode === 'day' ? styles.dayModeHeader : {}}
-                    />
-                )}
-            </View>
-            <CalendarViewSwitch viewSwitch={setIsFamilyView}/>
-            <AddEventDialog/>
-            {eventForEdit && (
-                <EditEventDialog
-                    isVisible={editVisible}
-                    setIsVisible={() => {
-                        setEditVisible(!editVisible);
-                    }}
-                    event={eventForEdit}
-                />
-            )}
-
-            <ManuallyAddEventModal
-                key={`${selectedNewEventDate}`}
-                initialDate={selectedNewEventDate}
-                show={!!selectedNewEventDate}
-                close={() => setSelectedNewEndDate(undefined)}
+          <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>
-    );
+
+        {calendarHeight > 0 && (
+          <Calendar
+            bodyContainerStyle={styles.calHeader}
+            mode={mode}
+            events={isFamilyView ? events ?? [] : events ?? []}
+            eventCellStyle={(event) => ({ backgroundColor: event.eventColor })}
+            onPressEvent={(event) => {
+              setEditVisible(true);
+              setEventForEdit(event);
+            }}
+            height={calendarHeight}
+            activeDate={selectedDate}
+            date={selectedDate}
+            onPressCell={setSelectedNewEndDate}
+            headerContentStyle={mode === "day" ? styles.dayModeHeader : {}}
+            onSwipeEnd={(date) => {
+              setSelectedDate(date);
+            }}
+          />
+        )}
+      </View>
+      <CalendarViewSwitch viewSwitch={setIsFamilyView} />
+      <AddEventDialog />
+      {eventForEdit && (
+        <EditEventDialog
+          isVisible={editVisible}
+          setIsVisible={() => {
+            setEditVisible(!editVisible);
+          }}
+          event={eventForEdit}
+        />
+      )}
+
+      <ManuallyAddEventModal
+        key={`${selectedNewEventDate}`}
+        initialDate={selectedNewEventDate}
+        show={!!selectedNewEventDate}
+        close={() => setSelectedNewEndDate(undefined)}
+      />
+    </View>
+  );
 }
diff --git a/components/pages/calendar/CalendarViewSwitch.tsx b/components/pages/calendar/CalendarViewSwitch.tsx
index 48b7fd2..2bbc376 100644
--- a/components/pages/calendar/CalendarViewSwitch.tsx
+++ b/components/pages/calendar/CalendarViewSwitch.tsx
@@ -44,7 +44,7 @@ const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => {
           paddingH-15
           style={calView ? styles.switchBtnActive : styles.switchBtn}
         >
-          <Text color={calView ? "white" : "#a1a1a1"} text70R>
+          <Text color={calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
             Family View
           </Text>
         </View>
@@ -63,7 +63,7 @@ const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => {
           paddingH-15
           style={!calView ? styles.switchBtnActive : styles.switchBtn}
         >
-          <Text color={!calView ? "white" : "#a1a1a1"} text70R>
+          <Text color={!calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
             My View
           </Text>
         </View>
@@ -83,4 +83,8 @@ const styles = StyleSheet.create({
     backgroundColor: "white",
     borderRadius: 50,
   },
+  switchTxt:{
+    fontSize: 16,
+    fontFamily: 'Manrope_600SemiBold'
+  }
 });
diff --git a/components/pages/calendar/ManuallyAddEventModal.tsx b/components/pages/calendar/ManuallyAddEventModal.tsx
index 0bf4825..ab2b19e 100644
--- a/components/pages/calendar/ManuallyAddEventModal.tsx
+++ b/components/pages/calendar/ManuallyAddEventModal.tsx
@@ -30,11 +30,12 @@ import { addHours, setDate } from "date-fns";
 import DropModalIcon from "@/assets/svgs/DropModalIcon";
 import { CalendarEvent, useCalendarContext } from "@/contexts/CalendarContext";
 import { repeatOptions } from "@/contexts/ToDosContext";
-import { StyleSheet } from "react-native";
+import { ImageBackground, StyleSheet } from "react-native";
 import ClockIcon from "@/assets/svgs/ClockIcon";
 import LockIcon from "@/assets/svgs/LockIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
 import CameraIcon from "@/assets/svgs/CameraIcon";
+import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
 
 const daysOfWeek = [
   { label: "Monday", value: "monday" },
@@ -69,7 +70,9 @@ export const ManuallyAddEventModal = ({
     return date;
   });
   const [endTime, setEndTime] = useState(() => {
-    const date = initialDate ? addHours(initialDate, 1) : addHours(new Date(), 1);
+    const date = initialDate
+      ? addHours(initialDate, 1)
+      : addHours(new Date(), 1);
     date.setSeconds(0, 0);
     return date;
   });
@@ -82,7 +85,7 @@ export const ManuallyAddEventModal = ({
   const { mutateAsync: createEvent, isLoading, isError } = useCreateEvent();
 
   const formatDateTime = (date?: Date | string) => {
-    if(!date) return undefined
+    if (!date) return undefined;
     return new Date(date).toLocaleDateString("en-US", {
       weekday: "long",
       month: "short",
@@ -193,13 +196,27 @@ export const ManuallyAddEventModal = ({
           }}
         >
           <TouchableOpacity onPress={close}>
-            <Text style={{ color: "#05a8b6" }} text70>
+            <Text
+              style={{
+                color: "#05a8b6",
+                fontFamily: "PlusJakartaSans_400Regular",
+                fontSize: 16,
+              }}
+              text70
+            >
               Cancel
             </Text>
           </TouchableOpacity>
           <DropModalIcon onPress={close} />
           <TouchableOpacity onPress={handleSave}>
-            <Text style={{ color: "#05a8b6" }} text70>
+            <Text
+              style={{
+                color: "#05a8b6",
+                fontFamily: "PlusJakartaSans_400Regular",
+                fontSize: 16,
+              }}
+              text70
+            >
               Save
             </Text>
           </TouchableOpacity>
@@ -212,16 +229,22 @@ export const ManuallyAddEventModal = ({
               setTitle(text);
             }}
             placeholderTextColor="#2d2d30"
-            text60R
-            marginT-15
-            marginL-30
+            style={{ fontFamily: "Manrope_500Medium", fontSize: 22 }}
+            paddingT-15
+            paddingL-30
           />
           <View style={styles.divider} marginT-8 />
           <View marginL-30 centerV>
             <View row spread marginB-10 centerV>
               <View row>
                 <AntDesign name="clockcircleo" size={24} color="#919191" />
-                <Text text70 marginL-10>
+                <Text
+                  style={{
+                    fontFamily: "PlusJakartaSans_500Medium",
+                    fontSize: 16,
+                  }}
+                  marginL-10
+                >
                   All day
                 </Text>
               </View>
@@ -244,60 +267,82 @@ export const ManuallyAddEventModal = ({
                     setStartDate(date);
                   }}
                   maximumDate={endDate}
-                  text70
+                  style={{
+                    fontFamily: "PlusJakartaSans_500Medium",
+                    fontSize: 16,
+                  }}
                   marginL-8
                 />
               </View>
               <DateTimePicker
-                  value={startTime}
-                  onChange={(date) => setStartTime(date)}
-                  maximumDate={endTime}
-                  minuteInterval={5}
-                  dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
-                      { hour: "numeric",
-                                minute: "numeric"
-                              })}
-                  mode="time"
-                  text70
-                  marginR-30
+                value={startTime}
+                onChange={(date) => setStartTime(date)}
+                maximumDate={endTime}
+                minuteInterval={5}
+                dateTimeFormatter={(date, mode) =>
+                  date.toLocaleTimeString("en-us", {
+                    hour: "numeric",
+                    minute: "numeric",
+                  })
+                }
+                mode="time"
+                style={{
+                  fontFamily: "PlusJakartaSans_500Medium",
+                  fontSize: 16,
+                }}
+                marginR-30
               />
             </View>
 
-            {!isAllDay && <View row marginB-10 spread>
-              <View row centerV>
-                <Feather name="calendar" size={25} color="#919191" />
+            {!isAllDay && (
+              <View row marginB-10 spread>
+                <View row centerV>
+                  <Feather name="calendar" size={25} color="#919191" />
+                  <DateTimePicker
+                    value={endDate}
+                    minimumDate={startDate}
+                    text70
+                    marginL-8
+                    onChange={(date) => {
+                      setEndDate(date);
+                    }}
+                    style={{
+                      fontFamily: "PlusJakartaSans_500Medium",
+                      fontSize: 16,
+                    }}
+                  />
+                </View>
                 <DateTimePicker
-                  value={endDate}
-                  minimumDate={startDate}
-                  text70
-                  marginL-8
-                  onChange={(date) => {
-                    setEndDate(date);
-                  }}
-                />
-              </View>
-              <DateTimePicker
                   value={endTime}
                   onChange={(date) => setEndTime(date)}
                   minimumDate={startTime}
                   minuteInterval={5}
-                  dateTimeFormatter={(date, mode) => date.toLocaleTimeString("en-us",
-                      { hour: "numeric",
-                                minute: "numeric"
-                              })}
+                  dateTimeFormatter={(date, mode) =>
+                    date.toLocaleTimeString("en-us", {
+                      hour: "numeric",
+                      minute: "numeric",
+                    })
+                  }
                   mode="time"
-                  text70
+                  style={{
+                    fontFamily: "PlusJakartaSans_500Medium",
+                    fontSize: 16,
+                  }}
                   marginR-30
-              />
-            </View>}
+                />
+              </View>
+            )}
           </View>
-          
+
           <View style={styles.divider} />
 
           <View marginH-30 marginB-10 row centerV>
             <Ionicons name="person-circle-outline" size={28} color="#919191" />
-            <Text text70R marginL-10>
-              Assignees
+            <Text
+              style={{ fontFamily: "Manrope_600SemiBold", fontSize: 18 }}
+              marginL-10
+            >
+              Attendees
             </Text>
             <Button
               size={ButtonSize.small}
@@ -313,35 +358,25 @@ export const ManuallyAddEventModal = ({
                 borderWidth: 1,
               }}
               color="#ea156c"
-              label="Assign"
+              label="Add"
+              labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
             />
           </View>
-          <View row marginH-13 marginT-13>
-            <View
-              marginL-30
-              style={{
-                aspectRatio: 1,
-                width: 50,
-                backgroundColor: "red",
-                borderRadius: 50,
-              }}
-            />
-            <View
-              marginL-30
-              style={{
-                aspectRatio: 1,
-                width: 50,
-                backgroundColor: "red",
-                borderRadius: 50,
-              }}
-            />
+          <View marginL-35>
+            <AssigneesDisplay />
           </View>
           <View style={styles.divider} />
           <View marginH-30 marginB-0 row spread centerV>
             <View row centerV>
               <ClockIcon />
-              <Text text70 marginL-10>
-                Reminder
+              <Text
+                style={{
+                  fontFamily: "Manrope_600SemiBold",
+                  fontSize: 18,
+                }}
+                marginL-10
+              >
+                Reminders
               </Text>
             </View>
             <View>
@@ -358,6 +393,7 @@ export const ManuallyAddEventModal = ({
                   borderColor: "#ea156c",
                   borderWidth: 1,
                 }}
+                labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
                 color="#ea156c"
                 label="Set Reminder"
               />
@@ -367,7 +403,13 @@ export const ManuallyAddEventModal = ({
           <View marginH-30 marginB-0 row spread centerV>
             <View row>
               <LockIcon />
-              <Text text70 marginL-10>
+              <Text
+                style={{
+                  fontFamily: "PlusJakartaSans_500Medium",
+                  fontSize: 16,
+                }}
+                marginL-10
+              >
                 Mark as Private
               </Text>
             </View>
@@ -385,7 +427,13 @@ export const ManuallyAddEventModal = ({
           <View marginH-30 marginB-0 row spread centerV>
             <View row centerV>
               <MenuIcon />
-              <Text text70 marginL-10>
+              <Text
+                style={{
+                  fontFamily: "PlusJakartaSans_500Medium",
+                  fontSize: 16,
+                }}
+                marginL-10
+              >
                 Add Details
               </Text>
             </View>
@@ -397,6 +445,8 @@ export const ManuallyAddEventModal = ({
           marginB-15
           label="Create event from image"
           text70
+          style={{ height: 47 }}
+          labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
           backgroundColor="#05a8b6"
           iconSource={() => (
             <View marginR-5>
diff --git a/components/pages/calendar/UploadImageDialog.tsx b/components/pages/calendar/UploadImageDialog.tsx
index 7646cb6..f3ea7ff 100644
--- a/components/pages/calendar/UploadImageDialog.tsx
+++ b/components/pages/calendar/UploadImageDialog.tsx
@@ -11,6 +11,8 @@ import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
 import { StyleSheet } from "react-native";
 import { Feather, MaterialIcons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
+import AddImageIcon from "@/assets/svgs/AddImageIcon";
+import CameraIcon from "@/assets/svgs/CameraIcon";
 
 interface IUploadDialogProps {
   show: boolean;
@@ -51,19 +53,9 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
       panDirection={PanningProvider.Directions.DOWN}
       center
     >
-      <Card
-        style={{
-          paddingHorizontal: 40,
-          paddingTop: 20,
-          paddingBottom: 10,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
+      <Card style={styles.modalCard}>
         <View centerH>
-          <Text text60 marginB-20>
-            Upload an Image
-          </Text>
+          <Text style={styles.modalTitle}>Upload an Image</Text>
           {!selectedImage && (
             <TouchableOpacity onPress={handleImagePick}>
               <View
@@ -73,12 +65,8 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
                 gap-8
                 marginB-20
               >
-                <MaterialIcons
-                  name="add-photo-alternate"
-                  size={30}
-                  color="#fd1775"
-                />
-                <Text color="#fd1775" text70>
+                <AddImageIcon />
+                <Text style={styles.uploadTxt}>
                   Click here to upload an image
                 </Text>
               </View>
@@ -102,38 +90,31 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
                     setImageTitle("");
                   }}
                 >
-                  <Feather
-                    name="trash"
-                    size={22}
-                    color="#919191"
-                  />
+                  <Feather name="trash" size={22} color="#919191" />
                 </TouchableOpacity>
               </View>
               <Button
                 style={{
                   marginBottom: 10,
-                  marginTop: 20,
+                  marginTop: 35,
                   backgroundColor: "#ea156c",
                   justifyContent: "center",
-                  paddingVertical: 13,
+                  paddingVertical: 15,
+                  width: 285,
                   alignItems: "center",
                 }}
                 label="Upload Image"
                 onPress={() => {}}
+                labelStyle={styles.btnLbl}
                 iconSource={() => (
-                  <Feather
-                    name="camera"
-                    size={21}
-                    style={{ marginRight: 7 }}
-                    color="white"
-                  />
+                  <CameraIcon color="white" style={{marginRight: 10}}/>
                 )}
               />
             </>
           )}
 
           <TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
-            <Text text80 color="#999999">
+            <Text style={styles.bottomText}>
               Go back
             </Text>
           </TouchableOpacity>
@@ -148,6 +129,7 @@ export default UploadImageDialog;
 const styles = StyleSheet.create({
   uploadImgBox: {
     backgroundColor: "#ffe8f2",
+    padding: 35,
     width: "100%",
     aspectRatio: 1.8,
     borderRadius: 20,
@@ -155,10 +137,20 @@ const styles = StyleSheet.create({
     borderColor: "#fd1775",
     borderStyle: "dashed",
   },
+  btnLbl: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 15,
+  },
+  uploadTxt: {
+    color: "#b11d5a",
+    fontSize: 15,
+    fontFamily: "PlusJakartaSans_400Regular",
+    marginTop: 12
+  },
   selectedImage: {
-    width: 60,
+    width: 38.69,
     aspectRatio: 1,
-    borderRadius: 10,
+    borderRadius: 5,
   },
   imageContainer: {
     alignItems: "center",
@@ -166,13 +158,33 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: "#d9d9d9",
     padding: 10,
-    borderRadius: 13,
+    borderRadius: 10,
   },
   imageInfo: {
     marginLeft: 10,
   },
   imageTitle: {
-    fontSize: 16,
-    color: "#333",
+    fontSize: 15,
+    color: "#262627",
+    fontFamily: "PlusJakartaSans_400Regular"
+  },
+  modalCard: {
+    paddingHorizontal: 25,
+    paddingTop: 30,
+    paddingBottom: 17,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 20,
+  },
+  modalTitle: {
+    fontSize: 22,
+    fontFamily: "Manrope_600SemiBold",
+    marginBottom: 20,
+  },
+  bottomText: {
+    marginTop: 20,
+    color: "#999999",
+    fontSize: 13.53,
+    fontFamily: "Poppins_500Medium",
   },
 });
diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx
index 1e45dc3..e19fc48 100644
--- a/components/pages/grocery/GroceryItem.tsx
+++ b/components/pages/grocery/GroceryItem.tsx
@@ -1,13 +1,13 @@
-import {Checkbox, Text, TouchableOpacity, View,} from "react-native-ui-lib";
-import React, {useEffect, useState} from "react";
-import {AntDesign} from "@expo/vector-icons";
-import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext";
+import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
+import React, { useEffect, useState } from "react";
+import { AntDesign } from "@expo/vector-icons";
+import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
 import EditGroceryFrequency from "./EditGroceryFrequency";
 import EditGroceryItem from "./EditGroceryItem";
-import {StyleSheet} from "react-native";
-import {IGrocery} from "@/hooks/firebase/types/groceryData";
+import { ImageBackground, StyleSheet } from "react-native";
+import { IGrocery } from "@/hooks/firebase/types/groceryData";
 import firestore from "@react-native-firebase/firestore";
-import {UserProfile} from "@/hooks/firebase/types/profileTypes";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 
 const GroceryItem = ({
   item,
@@ -27,11 +27,11 @@ const GroceryItem = ({
   const [itemCreator, setItemCreator] = useState<UserProfile>(null);
 
   const handleTitleChange = (newTitle: string) => {
-    updateGroceryItem({id: item?.id, title: newTitle});
+    updateGroceryItem({ id: item?.id, title: newTitle });
   };
 
   const handleCategoryChange = (newCategory: GroceryCategory) => {
-    updateGroceryItem({id: item?.id, category: newCategory});
+    updateGroceryItem({ id: item?.id, category: newCategory });
   };
 
   useEffect(() => {
@@ -43,25 +43,24 @@ const GroceryItem = ({
   const getItemCreator = async (uid: string | undefined) => {
     if (uid) {
       const documentSnapshot = await firestore()
-          .collection("Profiles")
-          .doc(uid)
-          .get();
+        .collection("Profiles")
+        .doc(uid)
+        .get();
 
       if (documentSnapshot.exists) {
-        setItemCreator(documentSnapshot.data() as UserProfile)
+        setItemCreator(documentSnapshot.data() as UserProfile);
       }
     }
-  }
+  };
 
   return (
     <View
       key={item.id}
-      style={{ borderRadius: 18, marginVertical: 5 }}
+      style={{ borderRadius: 17, marginVertical: 5 }}
       backgroundColor="white"
       centerV
-      paddingV-12
-      paddingR-12
-      paddingL-12
+      paddingH-13
+      paddingV-10
     >
       <View row spread>
         <EditGroceryFrequency
@@ -75,7 +74,9 @@ const GroceryItem = ({
         {!isEditingTitle ? (
           <View>
             <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
-              <Text text70T black style={{fontWeight: "400"}}>{item.title}</Text>
+              <Text text70T black style={styles.title}>
+                {item.title}
+              </Text>
             </TouchableOpacity>
           </View>
         ) : (
@@ -98,7 +99,7 @@ const GroceryItem = ({
               size={24}
               style={{
                 color: item.approved ? "green" : "#aaaaaa",
-                marginRight: 15
+                marginRight: 15,
               }}
               onPress={() => {
                 handleItemApproved(item.id, { approved: true });
@@ -127,19 +128,21 @@ const GroceryItem = ({
       {!item.approved && (
         <View>
           <View centerH>
-            <View height={1} backgroundColor="#e7e7e7" width={"90%"} />
+            <View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
           </View>
-          <View paddingL-0 paddingT-10 flexS row centerV>
-            <View
+          <View paddingL-0 paddingT-12 flexS row centerV>
+            <ImageBackground
               style={{
-                width: 25,
+                width: 22.36,
                 aspectRatio: 1,
                 borderRadius: 50,
                 backgroundColor: "red",
                 marginRight: 10,
+                overflow: 'hidden'
               }}
-            ></View>
-            <Text color="#858585" text70>
+              source={require('../../../assets/images/child-picture.png')}
+            />
+            <Text color="#858585" style={styles.authorTxt}>
               Requested by {itemCreator?.firstName}
             </Text>
           </View>
@@ -150,14 +153,19 @@ const GroceryItem = ({
 };
 
 const styles = StyleSheet.create({
+  authorTxt: { fontFamily: "Manrope_500Medium", fontSize: 12 },
   checkbox: {
     borderRadius: 50,
-    borderWidth: 1,
+    borderWidth: 0.7,
     color: "#bfbfbf",
     borderColor: "#bfbfbf",
-    width: 28,
+    width: 24.64,
     aspectRatio: 1,
   },
+  title: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
 });
 
 export default GroceryItem;
diff --git a/components/pages/grocery/GroceryList.tsx b/components/pages/grocery/GroceryList.tsx
index 1743c4d..e6fc88c 100644
--- a/components/pages/grocery/GroceryList.tsx
+++ b/components/pages/grocery/GroceryList.tsx
@@ -12,6 +12,7 @@ import { AntDesign, MaterialIcons } from "@expo/vector-icons";
 import EditGroceryItem from "./EditGroceryItem";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
 import { IGrocery } from "@/hooks/firebase/types/groceryData";
+import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 
 const GroceryList = () => {
   const {
@@ -88,32 +89,20 @@ const GroceryList = () => {
         <View row centerV>
           <View
             backgroundColor="#e2eed8"
-            paddingH-5
+            paddingH-15
             paddingV-8
             marginR-5
             centerV
             style={{ borderRadius: 50 }}
           >
-            <Text
-              text70BL
-              color="#46a80a"
-              style={{ fontFamily: "Manrope_700Bold" }}
-            >
+            <Text text70BL color="#46a80a" style={styles.counterText}>
               {approvedGroceries?.length} list{" "}
               {approvedGroceries?.length === 1 ? (
-                <Text
-                  text70BL
-                  color="#46a80a"
-                  style={{ fontFamily: "Manrope_700Bold" }}
-                >
+                <Text text70BL color="#46a80a" style={styles.counterText}>
                   item
                 </Text>
               ) : (
-                <Text
-                  text70BL
-                  color="#46a80a"
-                  style={{ fontFamily: "Manrope_700Bold" }}
-                >
+                <Text text70BL color="#46a80a" style={styles.counterText}>
                   items
                 </Text>
               )}
@@ -126,16 +115,12 @@ const GroceryList = () => {
             marginR-15
             style={{ borderRadius: 50 }}
           >
-            <Text
-              text70
-              style={{ fontFamily: "Manrope_700Bold" }}
-              color="#e28800"
-            >
+            <Text text70 style={styles.counterText} color="#e28800">
               {pendingGroceries?.length} pending
             </Text>
           </View>
           <TouchableOpacity>
-            <MaterialIcons name="person-add-alt" size={24} color="gray" />
+            <AddPersonIcon width={24}/>
           </TouchableOpacity>
         </View>
       </HeaderTemplate>
@@ -143,7 +128,7 @@ const GroceryList = () => {
       {/* Pending Approval Section */}
       <View row spread marginT-40 marginB-10 centerV>
         <View row centerV>
-          <Text text70BL>Pending Approval</Text>
+          <Text style={styles.subHeader}>Pending Approval</Text>
           {pendingVisible && (
             <AntDesign
               name="down"
@@ -176,7 +161,7 @@ const GroceryList = () => {
             borderRadius: 50,
           }}
         >
-          <Text text70 center color="#e28800">
+          <Text style={styles.counterNr} center color="#e28800">
             {pendingGroceries?.length.toString()}
           </Text>
         </View>
@@ -203,6 +188,7 @@ const GroceryList = () => {
       {/* Approved Section */}
       <View row spread marginT-40 marginB-0 centerV>
         <View row centerV>
+          <Text style={styles.subHeader}>Shopping List</Text>
           {approvedVisible && (
             <AntDesign
               name="down"
@@ -225,7 +211,6 @@ const GroceryList = () => {
               }}
             />
           )}
-          <Text text70BL>Shopping List</Text>
         </View>
         <View
           centerV
@@ -236,7 +221,7 @@ const GroceryList = () => {
             borderRadius: 50,
           }}
         >
-          <Text text70 center color="#46a80a">
+          <Text style={styles.counterNr} center color="#46a80a">
             {approvedGroceries?.length.toString()}
           </Text>
         </View>
@@ -296,6 +281,18 @@ const styles = StyleSheet.create({
     fontFamily: "Manrope_400Regular",
     fontSize: 14,
   },
+  counterText: {
+    fontSize: 14,
+    fontFamily: "PlusJakartaSans_600SemiBold",
+  },
+  subHeader: {
+    fontSize: 15,
+    fontFamily: "Manrope_700Bold",
+  },
+  counterNr: {
+    fontFamily: "PlusJakartaSans_600SemiBold",
+    fontSize: 14
+  }
 });
 
 export default GroceryList;
diff --git a/components/pages/settings/CalendarSettingsPage.tsx b/components/pages/settings/CalendarSettingsPage.tsx
index c75128e..6a55b25 100644
--- a/components/pages/settings/CalendarSettingsPage.tsx
+++ b/components/pages/settings/CalendarSettingsPage.tsx
@@ -1,5 +1,5 @@
 import { AntDesign, Ionicons } from "@expo/vector-icons";
-import React, {useCallback, useEffect, useState} from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Button, Checkbox, Text, View } from "react-native-ui-lib";
 import { ScrollView, StyleSheet } from "react-native";
 import { colorMap } from "@/contexts/SettingsContext";
@@ -18,10 +18,17 @@ import * as Google from "expo-auth-session/providers/google";
 import * as WebBrowser from "expo-web-browser";
 
 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 = {
@@ -55,7 +62,7 @@ const CalendarSettingsPage = (props: {
   const { mutateAsync: createEventFromProvider } = useCreateEventFromProvider();
   const { mutateAsync: updateUserData } = useUpdateUserData();
 
-  WebBrowser.maybeCompleteAuthSession()
+  WebBrowser.maybeCompleteAuthSession();
   const [request, response, promptAsync] = Google.useAuthRequest(googleConfig);
 
   useEffect(() => {
@@ -103,9 +110,11 @@ const CalendarSettingsPage = (props: {
   const signInWithGoogle = async () => {
     try {
       // Attempt to retrieve user information from AsyncStorage
-      if (response?.type === 'success') {
-        console.log(response.authentication)
-        await updateUserData({newUserData: {googleToken: response.authentication?.accessToken}})
+      if (response?.type === "success") {
+        console.log(response.authentication);
+        await updateUserData({
+          newUserData: { googleToken: response.authentication?.accessToken },
+        });
       }
     } catch (error) {
       // Handle any errors that occur during AsyncStorage retrieval or other operations
@@ -206,15 +215,23 @@ const CalendarSettingsPage = (props: {
       <View marginH-30>
         <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
           <View row marginT-20 marginB-35 centerV>
-            <Ionicons name="chevron-back" size={22} color="#979797" />
-            <Text text70 color="#979797">
+            <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>Calendar settings</Text>
+        <Text style={styles.subTitle}>Calendar settings</Text>
         <View style={styles.card}>
-          <Text text70 marginB-14>
+          <Text style={styles.cardTitle} marginB-14>
             Event Color Preference
           </Text>
           <View row spread>
@@ -260,7 +277,7 @@ const CalendarSettingsPage = (props: {
           </View>
         </View>
         <View style={styles.card}>
-          <Text text70>Weekly Start Date</Text>
+          <Text style={styles.cardTitle}>Weekly Start Date</Text>
           <View row marginV-5 marginT-20>
             <Checkbox
               value={startDate}
@@ -288,13 +305,14 @@ const CalendarSettingsPage = (props: {
             </Text>
           </View>
         </View>
-        <Text text60R marginT-30 marginB-25>
+        <Text style={styles.subTitle} marginT-30 marginB-25>
           Add Calendar
         </Text>
 
         <Button
-            onPress={() => promptAsync()}
+          onPress={() => promptAsync()}
           label="Connect Google"
+          labelStyle={styles.addCalLbl}
           iconSource={() => (
             <View marginR-15>
               <GoogleIcon />
@@ -306,6 +324,7 @@ const CalendarSettingsPage = (props: {
         />
         <Button
           label="Connect Apple"
+          labelStyle={styles.addCalLbl}
           iconSource={() => (
             <View marginR-15>
               <AppleIcon />
@@ -318,6 +337,7 @@ const CalendarSettingsPage = (props: {
         <Button
           onPress={handleMicrosoftSignIn}
           label="Connect Outlook"
+          labelStyle={styles.addCalLbl}
           iconSource={() => (
             <View marginR-15>
               <OutlookIcon />
@@ -328,34 +348,36 @@ const CalendarSettingsPage = (props: {
           text70BL
         />
 
-        <Text text60R marginT-30 marginB-20>
+        <Text style={styles.subTitle} marginT-30 marginB-20>
           Connected Calendars
         </Text>
         <View style={styles.card}>
           <View style={{ marginTop: 20 }}>
             <Button
-                onPress={fetchAndSaveGoogleEvents}
-                label="Sync Google"
-                iconSource={() => (
-                    <View marginR-15>
-                      <GoogleIcon />
-                    </View>
-                )}
-                style={styles.addCalBtn}
-                color="black"
-                text70BL
+              onPress={fetchAndSaveGoogleEvents}
+              label="Sync Google"
+              labelStyle={styles.addCalLbl}
+              iconSource={() => (
+                <View marginR-15>
+                  <GoogleIcon />
+                </View>
+              )}
+              style={styles.addCalBtn}
+              color="black"
+              text70BL
             />
             <Button
-                onPress={fetchAndSaveMicrosoftEvents}
-                label="Sync Outlook"
-                iconSource={() => (
-                    <View marginR-15>
-                      <OutlookIcon />
-                    </View>
-                )}
-                style={styles.addCalBtn}
-                color="black"
-                text70BL
+              onPress={fetchAndSaveMicrosoftEvents}
+              label="Sync Outlook"
+              labelStyle={styles.addCalLbl}
+              iconSource={() => (
+                <View marginR-15>
+                  <OutlookIcon />
+                </View>
+              )}
+              style={styles.addCalBtn}
+              color="black"
+              text70BL
             />
           </View>
         </View>
@@ -382,18 +404,30 @@ const styles = StyleSheet.create({
     padding: 20,
     paddingBottom: 30,
     marginTop: 20,
-    borderRadius: 20,
+    borderRadius: 12,
   },
   colorBox: {
     aspectRatio: 1,
     justifyContent: "center",
     alignItems: "center",
-    width: 50,
+    width: 51,
     borderRadius: 12,
   },
   checkbox: {
     borderRadius: 50,
   },
+  addCalLbl: {
+    fontSize: 16,
+    fontFamily: "PlusJakartaSan_500Medium",
+  },
+  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 7e98a62..4330a87 100644
--- a/components/pages/settings/ChoreRewardSettings.tsx
+++ b/components/pages/settings/ChoreRewardSettings.tsx
@@ -13,9 +13,17 @@ const ChoreRewardSettings = (props: {
       <View marginT-10 marginH-20>
         <ScrollView>
           <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
-            <View row marginT-20 marginL-5 marginB-35 centerV>
-              <Ionicons name="chevron-back" size={22} color="#979797" />
-              <Text text70 color="#979797">
+            <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>
@@ -23,7 +31,7 @@ const ChoreRewardSettings = (props: {
           <Text text60R marginB-20>
             Chore Reward Settings
           </Text>
-          <ToDosList isSettings/>
+          <ToDosList isSettings />
         </ScrollView>
       </View>
     </ToDosContextProvider>
diff --git a/components/pages/settings/SettingsPage.tsx b/components/pages/settings/SettingsPage.tsx
index 33e81e4..60531d0 100644
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@@ -10,14 +10,6 @@ import ProfileIcon from "@/assets/svgs/ProfileIcon";
 import CalendarIcon from "@/assets/svgs/CalendarIcon";
 import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
 
-const styles = StyleSheet.create({
-  mainBtn: {
-    width: "100%",
-    justifyContent: "flex-start",
-    marginBottom: 20,
-    height: 60,
-  },
-});
 const pageIndex = {
   main: 0,
   user: 1,
@@ -35,6 +27,7 @@ const SettingsPage = () => {
               backgroundColor="white"
               style={styles.mainBtn}
               label="Manage My Profile"
+              labelStyle={styles.label}
               color="#07b8c7"
               iconSource={() => (
                 <ProfileIcon style={{marginRight: 10}} color="#07b9c8" />
@@ -45,6 +38,7 @@ const SettingsPage = () => {
               backgroundColor="white"
               style={styles.mainBtn}
               label="Calendar Settings"
+              labelStyle={styles.label}
               color="#fd1775"
               iconSource={() => (
                 <CalendarIcon style={{marginRight: 10}}/>
@@ -57,6 +51,7 @@ const SettingsPage = () => {
               backgroundColor="white"
               style={styles.mainBtn}
               label="To-Do Reward Settings"
+              labelStyle={styles.label}
               color="#ff9900"
               iconSource={() => (
                 <Octicons
@@ -72,6 +67,7 @@ const SettingsPage = () => {
               backgroundColor="white"
               style={styles.mainBtn}
               label="Cally Privacy Policy"
+              labelStyle={styles.label}
               iconSource={() => (
                 <PrivacyPolicyIcon style={{marginRight: 10}}/>
               )}
@@ -93,3 +89,17 @@ const SettingsPage = () => {
 };
 
 export default SettingsPage;
+
+const styles = StyleSheet.create({
+  mainBtn: {
+    width: "100%",
+    justifyContent: "flex-start",
+    marginBottom: 20,
+    height: 60,
+  },
+  label:{
+    fontFamily: "Poppins_400Regular",
+    fontSize: 14.71,
+    textAlignVertical: 'center'
+  }
+});
diff --git a/components/pages/settings/UserSettings.tsx b/components/pages/settings/UserSettings.tsx
index 056cf18..b1008d0 100644
--- a/components/pages/settings/UserSettings.tsx
+++ b/components/pages/settings/UserSettings.tsx
@@ -11,9 +11,12 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
     <View flexG>
       <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
         <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
-          <View row marginT-20 marginL-20 marginB-35 centerV>
-            <Ionicons name="chevron-back" size={22} color="#979797" />
-            <Text text70 color="#979797">
+        <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>
@@ -30,7 +33,10 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
               style={selectedView == true ? styles.btnSelected : styles.btnNot}
             >
               <View>
-                <Text text70 color={selectedView ? "white" : "black"}>
+                <Text
+                  style={styles.btnTxt}
+                  color={selectedView ? "white" : "black"}
+                >
                   My Profile
                 </Text>
               </View>
@@ -42,7 +48,10 @@ const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
               style={selectedView == false ? styles.btnSelected : styles.btnNot}
             >
               <View>
-                <Text text70 color={!selectedView ? "white" : "black"}>
+                <Text
+                  style={styles.btnTxt}
+                  color={!selectedView ? "white" : "black"}
+                >
                   My Group
                 </Text>
               </View>
@@ -75,11 +84,16 @@ const styles = StyleSheet.create({
     width: "50%",
     borderRadius: 50,
   },
+  btnTxt: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
   btnNot: {
     height: "100%",
     width: "50%",
     borderRadius: 50,
   },
+  title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
 });
 
 export default UserSettings;
diff --git a/components/pages/settings/user_settings_views/MyGroup.tsx b/components/pages/settings/user_settings_views/MyGroup.tsx
index f6ce778..20b202f 100644
--- a/components/pages/settings/user_settings_views/MyGroup.tsx
+++ b/components/pages/settings/user_settings_views/MyGroup.tsx
@@ -95,7 +95,7 @@ const MyGroup = () => {
 
                     {(!!parents.length || !!children.length) && (
                         <>
-                            <Text text70 marginV-10>
+                            <Text style={styles.subTit} marginV-10>
                                 Family
                             </Text>
                             {[...parents, ...children]?.map((member, index) => (
@@ -383,6 +383,10 @@ const styles = StyleSheet.create({
         borderRadius: 10,
         gap: 10,
     },
+    subTit: {
+        fontFamily: "Manrope_500Medium",
+        fontSize: 15,
+      },
 });
 
 export default MyGroup;
diff --git a/components/pages/settings/user_settings_views/MyProfile.tsx b/components/pages/settings/user_settings_views/MyProfile.tsx
index d939d46..609f50f 100644
--- a/components/pages/settings/user_settings_views/MyProfile.tsx
+++ b/components/pages/settings/user_settings_views/MyProfile.tsx
@@ -1,102 +1,122 @@
-import {Text, TextField, View} from "react-native-ui-lib";
-import React, {useState} from "react";
-import {StyleSheet} from "react-native";
-import {ScrollView} from "react-native-gesture-handler";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
+import { Text, TextField, View } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { ImageBackground, StyleSheet } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 
 const MyProfile = () => {
-    const {user, profileData} = useAuthContext();
+  const { user, profileData } = useAuthContext();
 
-    const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
-    const [firstName, setFirstName] = useState<string>(
-        profileData?.firstName || ""
-    );
+  const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
+  const [firstName, setFirstName] = useState<string>(
+    profileData?.firstName || ""
+  );
 
-    const {mutateAsync: updateUserData} = useUpdateUserData();
-    return (
-        <ScrollView style={{paddingBottom: 100, flex: 1}}>
-            <View style={styles.card}>
-                <Text text70>Your Profile</Text>
-                <View row spread paddingH-15 centerV marginV-15>
-                    <View style={styles.pfp}></View>
-                    <Text text80 color="#50be0c">
-                        Change Photo
-                    </Text>
-                    <Text text80>Remove Photo</Text>
-                </View>
-                <View paddingH-15>
-                    <Text text80 marginT-10 marginB-7 color="#a1a1a1">
-                        First name
-                    </Text>
-                    <TextField
-                        text70
-                        placeholder="First name"
-                        style={styles.txtBox}
-                        value={firstName}
-                        onChangeText={async (value) => {
-                            setFirstName(value);
-                            await updateUserData({newUserData: {firstName: value}});
-                        }}
-                    />
-                    <Text text80 marginT-10 marginB-7 color="#a1a1a1">
-                        Last name
-                    </Text>
-                    <TextField
-                        text70
-                        placeholder="Last name"
-                        style={styles.txtBox}
-                        value={lastName}
-                        onChangeText={async (value) => {
-                            setLastName(value);
-                            await updateUserData({newUserData: {lastName: value}});
-                        }}
-                    />
-                    <Text text80 marginT-10 marginB-7 color="#a1a1a1">
-                        Email address
-                    </Text>
-                    <TextField
-                        text70
-                        placeholder="Email address"
-                        value={user?.email?.toString()}
-                        style={styles.txtBox}
-                    />
-                </View>
-            </View>
+  const { mutateAsync: updateUserData } = useUpdateUserData();
+  return (
+    <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
+      <View style={styles.card}>
+        <Text style={styles.subTit}>Your Profile</Text>
+        <View row spread paddingH-15 centerV marginV-15>
+          <ImageBackground
+            style={styles.pfp}
+            source={require("../../../../assets/images/profile-picture.png")}
+          />
 
-            <View style={styles.card}>
-                <Text text70>Settings</Text>
-                <Text text80 marginT-20 marginB-7 color="#a1a1a1">
-                    Time Zone
-                </Text>
-                <TextField text70 placeholder="Time Zone" style={styles.txtBox}/>
-            </View>
-        </ScrollView>
-    );
+          <Text style={styles.photoSet} color="#50be0c">
+            Change Photo
+          </Text>
+          <Text style={styles.photoSet}>Remove Photo</Text>
+        </View>
+        <View paddingH-15>
+          <Text text80 marginT-10 marginB-7 style={styles.label}>
+            First name
+          </Text>
+          <TextField
+            text70
+            placeholder="First name"
+            style={styles.txtBox}
+            value={firstName}
+            onChangeText={async (value) => {
+              setFirstName(value);
+              await updateUserData({ newUserData: { firstName: value } });
+            }}
+          />
+          <Text text80 marginT-10 marginB-7 style={styles.label}>
+            Last name
+          </Text>
+          <TextField
+            text70
+            placeholder="Last name"
+            style={styles.txtBox}
+            value={lastName}
+            onChangeText={async (value) => {
+              setLastName(value);
+              await updateUserData({ newUserData: { lastName: value } });
+            }}
+          />
+          <Text text80 marginT-10 marginB-7 style={styles.label}>
+            Email address
+          </Text>
+          <TextField
+            text70
+            placeholder="Email address"
+            value={user?.email?.toString()}
+            style={styles.txtBox}
+          />
+        </View>
+      </View>
+
+      <View style={styles.card}>
+        <Text style={styles.subTit}>Settings</Text>
+        <Text text80 marginT-20 marginB-7 style={styles.label}>
+          Time Zone
+        </Text>
+        <TextField text70 placeholder="Time Zone" style={styles.txtBox} />
+      </View>
+    </ScrollView>
+  );
 };
 
 const styles = StyleSheet.create({
-    card: {
-        marginVertical: 15,
-        backgroundColor: "white",
-        width: "100%",
-        borderRadius: 15,
-        padding: 20,
-    },
-    pfp: {
-        aspectRatio: 1,
-        width: 60,
-        backgroundColor: "green",
-        borderRadius: 20,
-    },
-    txtBox: {
-        backgroundColor: "#fafafa",
-        borderRadius: 50,
-        borderWidth: 2,
-        borderColor: "#cecece",
-        padding: 15,
-        height: 45,
-    },
+  card: {
+    marginVertical: 15,
+    backgroundColor: "white",
+    width: "100%",
+    borderRadius: 12,
+    paddingHorizontal: 20,
+    paddingVertical: 21,
+  },
+  pfp: {
+    aspectRatio: 1,
+    width: 65.54,
+    backgroundColor: "green",
+    borderRadius: 20,
+  },
+  txtBox: {
+    backgroundColor: "#fafafa",
+    borderRadius: 50,
+    borderWidth: 2,
+    borderColor: "#cecece",
+    padding: 15,
+    height: 45,
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13
+  },
+  subTit: {
+    fontFamily: "Manrope_500Medium",
+    fontSize: 15,
+  },
+  label: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 12,
+    color: "#a1a1a1"
+  },
+  photoSet:{
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 13.07
+  }
 });
 
 export default MyProfile;
diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx
index b4c5948..a9acc5d 100644
--- a/components/pages/todos/ToDoItem.tsx
+++ b/components/pages/todos/ToDoItem.tsx
@@ -34,11 +34,11 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
   return (
     <View
       centerV
-      paddingV-15
-      paddingH-15
+      paddingV-10
+      paddingH-13
       marginV-10
       style={{
-        borderRadius: 22,
+        borderRadius: 17,
         backgroundColor: props.item.done ? "#e0e0e0" : "white",
         opacity: props.item.done ? 0.3 : 1,
       }}
@@ -49,8 +49,8 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
             text70
             style={{
               textDecorationLine: props.item.done ? "line-through" : "none",
-              fontFamily: "Manrope_600SemiBold",
-              fontSize: 18,
+              fontFamily: "Manrope_500Medium",
+              fontSize: 15,
             }}
             onPress={() => {
               if (props.isSettings) {
@@ -77,17 +77,17 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         )}
         <Checkbox
           value={props.item.done}
-          containerStyle={{borderWidth: 1, borderRadius: 50, borderColor: 'gray', height: 28, width: 28}}
+          containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}}
           color="#fd1575"
           onValueChange={(value) => {
             updateToDo({ id: props.item.id, done: !props.item.done });
           }}
         />
       </View>
-      <View centerH paddingV-5>
+      <View centerH paddingV-0>
         <View
           centerV
-          height={2}
+          height={0.7}
           width={"100%"}
           style={{
             backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
@@ -106,7 +106,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
           >
             <View centerV row gap-3>
               <Ionicons name="gift-outline" size={20} color="#46a80a" />
-              <Text color="#46a80a" style={{ fontSize: 16 }}>
+              <Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
                 {props.item.points} points
               </Text>
             </View>
@@ -117,7 +117,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
         <ImageBackground
           source={require("../../../assets/images/child-picture.png")}
           style={{
-            height: 28,
+            height: 24.64,
             aspectRatio: 1,
             borderRadius: 22,
             overflow: "hidden",
diff --git a/components/shared/AssigneesDisplay.tsx b/components/shared/AssigneesDisplay.tsx
new file mode 100644
index 0000000..82c028c
--- /dev/null
+++ b/components/shared/AssigneesDisplay.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { ImageBackground, StyleSheet } from "react-native";
+import { View } from "react-native-ui-lib";
+import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
+
+const AssigneesDisplay = () => {
+  return (
+    <View row marginH-13 marginT-13 gap-20>
+      <ImageBackground
+        source={require("../../assets/images/child-picture.png")}
+        style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
+        children={<RemoveAssigneeBtn />}
+      />
+      <ImageBackground
+        source={require("../../assets/images/child1-picture.png")}
+        style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
+        children={<RemoveAssigneeBtn />}
+      />
+    </View>
+  );
+};
+
+export default AssigneesDisplay;
diff --git a/components/shared/DrawerButton.tsx b/components/shared/DrawerButton.tsx
index ee3a760..5f556f3 100644
--- a/components/shared/DrawerButton.tsx
+++ b/components/shared/DrawerButton.tsx
@@ -30,7 +30,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
       )}
       style={{
         aspectRatio: 1,
-        borderRadius: 15,
+        borderRadius: 18.55,
         marginBottom: 12,
         flexDirection: "column",
         justifyContent: "space-between",
@@ -47,5 +47,5 @@ const styles = StyleSheet.create({
     aspectRatio: 1,
     borderRadius: 50,
   },
-  labelStyle: { fontSize: 14, fontFamily: "Manrope_600SemiBold" },
+  labelStyle: { fontSize: 15, fontFamily: "Poppins_400Regular" },
 });
diff --git a/components/shared/HeaderTemplate.tsx b/components/shared/HeaderTemplate.tsx
index f13be99..ff37cc7 100644
--- a/components/shared/HeaderTemplate.tsx
+++ b/components/shared/HeaderTemplate.tsx
@@ -11,7 +11,7 @@ const HeaderTemplate = (props: {
 }) => {
   const { user, profileData } = useAuthContext();
 
-  const headerHeight:number = 80;
+  const headerHeight:number = 72;
   return (
     <View row centerV marginV-15>
       <ImageBackground
@@ -26,9 +26,9 @@ const HeaderTemplate = (props: {
       />
       <View gap-3>
         {props.isWelcome && (
-          <Text text70L style={{fontSize: 17, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
+          <Text text70L style={{fontSize: 19, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
         )}
-        <Text text70B style={{ fontSize: 18, fontFamily: "Manrope_700Bold" }}>
+        <Text text70B style={{ fontSize: 18 , fontFamily: "Manrope_600SemiBold" }}>
           {props.message}
         </Text>
         {props.children && <View>{props.children}</View>}
diff --git a/components/shared/RemoveAssigneeBtn.tsx b/components/shared/RemoveAssigneeBtn.tsx
new file mode 100644
index 0000000..9416009
--- /dev/null
+++ b/components/shared/RemoveAssigneeBtn.tsx
@@ -0,0 +1,27 @@
+import { Text, StyleSheet } from "react-native";
+import React from "react";
+import CloseXIcon from "@/assets/svgs/CloseXIcon";
+import { View } from "react-native-ui-lib";
+
+const RemoveAssigneeBtn = () => {
+  return (
+    <View style={styles.removeBtn} center>
+      <CloseXIcon />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  removeBtn: {
+    aspectRatio: 1,
+    width: 20,
+    backgroundColor: "#f0efef",
+    right: 0,
+    borderRadius: 50,
+    position: "absolute",
+    borderWidth: 1,
+    borderColor: "#7f7f7f",
+  },
+});
+
+export default RemoveAssigneeBtn;
diff --git a/package.json b/package.json
index 10d3e6f..17b0b52 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
   },
   "dependencies": {
     "@expo-google-fonts/manrope": "^0.2.3",
+    "@expo-google-fonts/plus-jakarta-sans": "^0.2.3",
+    "@expo-google-fonts/poppins": "^0.2.3",
     "@expo/vector-icons": "^14.0.2",
     "@react-native-community/blur": "^4.4.0",
     "@react-native-community/datetimepicker": "^8.2.0",
diff --git a/yarn.lock b/yarn.lock
index 81c7b9f..bbbd3ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -853,6 +853,16 @@
   resolved "https://registry.yarnpkg.com/@expo-google-fonts/manrope/-/manrope-0.2.3.tgz#7ae7eec06232a9efdae460ac05b99bac3075e101"
   integrity sha512-2M9hzi5ku97ZbheGMyzqIdiIEmve0/ihBk9nVWRy2lVIchWqR2k2yIQPS7jKC/Az/e43tW3POLNeU6gQJQL9hw==
 
+"@expo-google-fonts/plus-jakarta-sans@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@expo-google-fonts/plus-jakarta-sans/-/plus-jakarta-sans-0.2.3.tgz#d13debe67e40b2059797e5bbb8e1f32c13312ab5"
+  integrity sha512-7vukKMax5xrMlrf0DCzOpqqCQwxYaUXH4BmVxbal5Xrys1LIQmaqoiPftd7RtTSRbwPEhU/GYqIGrkuCAydRrQ==
+
+"@expo-google-fonts/poppins@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@expo-google-fonts/poppins/-/poppins-0.2.3.tgz#807fc1bf58948c32ddfb9c67f7329ff16cc78d14"
+  integrity sha512-PXkur1ZY/puy1PwVFYPJx8qiI3dtBzC2ig1bo53swCt7/sI7krCGYRO6hLBNp15M0kcNh2J4cCR9ZQyFxsving==
+
 "@expo/bunyan@^4.0.0":
   version "4.0.1"
   resolved "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.1.tgz"