diff --git a/api/ApiContext.tsx b/api/ApiContext.tsx
index 09b3bc9..5704499 100644
--- a/api/ApiContext.tsx
+++ b/api/ApiContext.tsx
@@ -6,7 +6,7 @@ import { getUserInfo } from './User';
 import { acceptFriendRequest } from './Friends';
 import { ExpectedExercise, getExercisePlan, Plan } from './Workouts'
 import { WorkoutTypeType } from './Workouts';
-import { getExercise, exerciseType } from './Exercise'
+import { getExercise, ExerciseType } from './Exercise'
 
 
 export interface ApiContextType {
@@ -17,7 +17,7 @@ export interface ApiContextType {
   updateUserData: () => Promise<String | null>;
   userData: UserType | null;
   exercisePlan: Plan | null;
-  exercises:Array<exerciseType>
+  exercises:Array<ExerciseType>
 }
 
 
@@ -28,7 +28,7 @@ export const ApiProvider = ({ children }: { children: ReactNode }) => {
   const [loggedIn, setLoggedIn] = useState<boolean>(false);
   const [userData, setUserData] = useState<UserType | null>(null);
   const [exercisePlan, setExercisePlan] = useState<Plan| null>(null);
-  const [exercises, setExercises] = useState<Array<exerciseType>>([]);
+  const [exercises, setExercises] = useState<Array<ExerciseType>>([]);
 
 
 
diff --git a/api/Exercise.tsx b/api/Exercise.tsx
index 495aa41..eef7a64 100644
--- a/api/Exercise.tsx
+++ b/api/Exercise.tsx
@@ -4,6 +4,8 @@ import { router } from 'expo-router';
 import { ApiContextType } from './ApiContext';
 import { workout_category } from './Workouts';
 import { ExpectedExercise } from './Workouts';
+
+
 export function string_to_date(input: string): Date | undefined {
   // Parse the input string into a Date object
   const date = new Date(input);
@@ -18,7 +20,7 @@ export function string_to_date(input: string): Date | undefined {
   return date;
 }
 
-export interface exerciseType{
+export interface ExerciseType{
   start: Date | undefined,
   workout_type: WorkoutTypeType
   end: Date | undefined,
@@ -58,7 +60,7 @@ export interface WorkoutTypeType {
   category: workout_category;
 }
 
-export const getNextExercises = (plan_data: Plan | null, ex_data: exerciseType[]): ExpectedExercise[] => {
+export const getNextExercises = (plan_data: Plan | null, ex_data: ExerciseType[]): ExpectedExercise[] => {
   console.log("plan data doesn't exist?");
   if (!plan_data) {
     return [];
@@ -232,10 +234,10 @@ export const getExercise = async(token:string) =>{
           return [];
       } 
         const data = await response.json();
-        let return_list:exerciseType[] = []
+        let return_list:ExerciseType[] = []
         for (let i=0;i<data.ex.length;i++){
           let ex =data.ex[i];
-          let return_item:exerciseType = {
+          let return_item:ExerciseType = {
             start:string_to_date(ex.start),
             end:string_to_date(ex.end),
             workout_type:{
@@ -273,10 +275,10 @@ export const startExerciseDirect = async(token:string,exp:ExpectedExercise) =>{
           return null;
       } 
         const data = await response.json();
-        let return_list:exerciseType[] = []
+        let return_list:ExerciseType[] = []
         for (let i=0;i<data.ex.length;i++){
           let ex =data.ex[i];
-          let return_item:exerciseType = {
+          let return_item:ExerciseType = {
             start:string_to_date(ex.start),
             end:string_to_date(ex.end),
             workout_type:{
diff --git a/api/Feed.tsx b/api/Feed.tsx
index 9c61dc2..71f025f 100644
--- a/api/Feed.tsx
+++ b/api/Feed.tsx
@@ -3,11 +3,11 @@ import { router } from 'expo-router';
 import React, { createContext, useContext, ReactNode, useState } from 'react';
 
 import { ApiContextType } from './ApiContext';
-import { expectedExercise, workoutTypeType } from './Workouts';
-import { exerciseType, string_to_date } from './Exercise';
+import { ExpectedExercise, WorkoutTypeType } from './Workouts';
+import { ExerciseType, string_to_date } from './Exercise';
 
 
-export interface feedType extends exerciseType{
+export interface FeedType extends ExerciseType{
   user:string,
 }
 
@@ -30,10 +30,10 @@ export const getFriendFeed = async(token:string) =>{
       }
         const data = await response.json();
         
-        let ret:feedType[] = []
+        let ret:FeedType[] = []
         for (let i=0;i<data.length;i++){
           let ex =data[i];
-          let return_item:feedType = {
+          let return_item:FeedType = {
             start:string_to_date(ex.start),
             end:string_to_date(ex.end),
             workout_type:{
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index c9eb11a..07c8ccc 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -2,11 +2,11 @@ import Ionicons from '@expo/vector-icons/Ionicons';
 import { Redirect, router, Stack, useRootNavigationState } from 'expo-router';
 import { Tabs } from 'expo-router/tabs';
 import React, { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS, useEffect, useState } from 'react';
-import { Modal,Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Modal,Text, TouchableOpacity, View } from 'react-native';
 import { useApiContext } from '../../api/ApiContext';
 import { useTheme } from '../utility/ThemeContext';
 import { StyleSheet } from 'react-native';
-import { endExercise, exerciseType, getNextExercises,startExerciseDirect } from '../../api/Exercise';
+import { endExercise, ExerciseType, getNextExercises,startExerciseDirect } from '../../api/Exercise';
 import { UserType } from '../../api/User';
 import { ExpectedExercise, Plan } from '../../api/Workouts';
 import { styles } from '../utility/style';
@@ -107,7 +107,7 @@ export default () => {
     });
     return(
       <TouchableOpacity onPress={() => onPress_func(expect_ex)} style={style.button}>
-          <Text style={style.buttonText}>{expect_ex.name+ "for "+returnNumberAsTime(expect_ex.time)}</Text>
+          <Text style={style.buttonText}>{expect_ex.name+ " for "+returnNumberAsTime(expect_ex.time)}</Text>
       </TouchableOpacity>
     )
   }
@@ -115,9 +115,9 @@ export default () => {
   
 
   function returnButtonSelector(user:UserType|null, plan:Plan|null){
-    if(user?.isWorking){
+    if(user?.isWorking) {
       return (
-          <View style={{top: -30}}>
+        <View style={{top: -30}}>
           <CountdownCircleTimer
             isPlaying
             duration={duration}
@@ -129,39 +129,35 @@ export default () => {
               setisPlaying(false);
               return { } // repeat animation in 1.5 seconds
             }}
-        
           >
             {({ remainingTime }) => (
               <TouchableOpacity
-              style={styles1.countdownTimer}
-              onPress={async () => {
-                await endExercise(authToken);
-                await updateUserData();
-              }}
-            >
-    
+                style={styles1.countdownTimer}
+                onPress={async () => {
+                  await endExercise(authToken);
+                  await updateUserData();
+                }}
+              >
                 <Ionicons name="checkmark-done-circle-outline" size={40} color="blue" />
-    
-
-          </TouchableOpacity>
+              </TouchableOpacity>
             )}
           </CountdownCircleTimer>
-          </View>
+        </View>
       );
     }
-    if(workoutOptions.length > 0){
-    return(
-      <TouchableOpacity style={styles1.button} onPress={()=>{
-        if(workoutOptions.length > 0){
-          setWrkSlctVisible(true);
-        }
-      }}>
-        
-        <Ionicons name="bicycle" size={40} color="#fff" />
-      </TouchableOpacity>
-    )
+
+    if(workoutOptions.length > 0) {
+      return (
+        <TouchableOpacity 
+          style={styles1.button} 
+          onPress={() => {if(workoutOptions.length > 0) setWrkSlctVisible(true)}}
+        >
+          <Ionicons name="bicycle" size={40} color="#fff" />
+        </TouchableOpacity>
+      )
     }
-    return(
+    
+    return (
       
       <TouchableOpacity style={styles1.button}>
         
@@ -175,20 +171,20 @@ export default () => {
   return (
     <>
     <Modal
-                        animationType="fade"
-                        transparent={true}
-                        visible={wrkSlct}
-                        onRequestClose={() => setWrkSlctVisible(false)}
-                    >
-                        <View style={styles.modalContainer}>
-                            <View style={styles.modalContent}>
-                                {workoutOptions.map((val,idx)=>{return renderExcerciseSelector(val)})}
-                                <TouchableOpacity onPress={() => setWrkSlctVisible(false)} style={styles.closeButton}>
-                                  <Ionicons name="close" size={20}  /> {/* Close icon */}
-                                  </TouchableOpacity>
-                            </View>
-                        </View>
-                    </Modal>
+      animationType="fade"
+      transparent={true}
+      visible={wrkSlct}
+      onRequestClose={() => setWrkSlctVisible(false)}
+    >
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          {workoutOptions.map((val,idx)=>{return renderExcerciseSelector(val)})}
+          <TouchableOpacity onPress={() => setWrkSlctVisible(false)} style={styles.closeButton}>
+            <Ionicons name="close" size={20}  /> {/* Close icon */}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
     <Tabs screenOptions={({ route }) => ({
       tabBarIcon: ({ focused, color, size }) => {
         let iconName;
@@ -208,27 +204,23 @@ export default () => {
       },
       tabBarActiveTintColor: theme.colors.primary,
       tabBarInactiveTintColor: 'gray',
-    })    
-  }
-    >
+    })}>
       
-
-      { /*Order of tabs*/ }
-      <Tabs.Screen name="home" options={{title: "Home"}}/>
-      <Tabs.Screen name="workout" options={{title: "Workout"}}/>
-      <Tabs.Screen name="feed" options={{title: "Feed"}}/>
-      <Tabs.Screen
-        name="exercise"
-        options={{
-          tabBarButton: () => (returnButtonSelector(userData,exercisePlan)
-          ),
-        }}
-      />
-      <Tabs.Screen name="friends" options={{title: "Friends"}}/>
-      <Tabs.Screen name="profile" options={{title: "Profile"}}/>
-      <Tabs.Screen name="plan" options={{title: "Plan"}}/>
-
-    </Tabs>
+    { /*Order of tabs*/ }
+    <Tabs.Screen name="home" options={{title: "Home"}}/>
+    <Tabs.Screen name="workout" options={{title: "Workout"}}/>
+    <Tabs.Screen name="feed" options={{title: "Feed"}}/>
+    <Tabs.Screen
+      name="exercise"
+      options={{
+        tabBarButton: () => (returnButtonSelector(userData,exercisePlan))
+      }}
+    />
+    <Tabs.Screen name="friends" options={{title: "Friends"}}/>
+    <Tabs.Screen name="profile" options={{title: "Profile"}}/>
+    <Tabs.Screen name="plan" options={{title: "Plan"}}/>
+
+  </Tabs>
   </>
   );
 }
diff --git a/app/(tabs)/feed.tsx b/app/(tabs)/feed.tsx
index bd7e538..ea9c999 100644
--- a/app/(tabs)/feed.tsx
+++ b/app/(tabs)/feed.tsx
@@ -3,12 +3,12 @@ import React, { useState, useEffect } from 'react';
 import { Text, StyleSheet, View, FlatList } from 'react-native';
 import { useApiContext } from '../../api/ApiContext';
 import { defaultPageTheme } from '../utility/style';
-import { feedType, getFriendFeed } from '../../api/Feed';
+import { FeedType, getFriendFeed } from '../../api/Feed';
 import { workout_category } from '../../api/Workouts';
 
 export default function FriendsPage() {
   const { authToken } = useApiContext();
-  const [friendFeed, setFriendFeed] = useState<feedType[]>([]);
+  const [friendFeed, setFriendFeed] = useState<FeedType[]>([]);
 
   useEffect(() => {
     const fetchFeed = async () => {
@@ -44,7 +44,7 @@ export default function FriendsPage() {
     }
   };
 
-  const renderFeedItem = ({item}:{item:feedType}) => {
+  const renderFeedItem = ({item}:{item:FeedType}) => {
     console.log("END TIME", item.end.toISOString());
     console.log(item.expectedTime);
     const actualDuration = (item.end && item.start) ? Math.floor((item.end.getTime() - item.start.getTime()) / 1000) : 0;
diff --git a/app/(tabs)/friends.tsx b/app/(tabs)/friends.tsx
index 70ea746..32f976f 100644
--- a/app/(tabs)/friends.tsx
+++ b/app/(tabs)/friends.tsx
@@ -70,8 +70,8 @@ export default function FriendsPage() {
               placeholder='Friend Name'
               value={friendName}
               onChangeText={setFriendName}
-              secure={false}
-              style = {styles.input}
+              //secureTextEntry={false}
+              //style = {styles.input}
             />
             <Button
                 onPress={async () => {let xd = await sendFriendRequest(authToken,friendName);await updateUserData();setErrorMessage(xd)}}
diff --git a/app/(tabs)/home.tsx b/app/(tabs)/home.tsx
index 26d574b..734b3fa 100644
--- a/app/(tabs)/home.tsx
+++ b/app/(tabs)/home.tsx
@@ -1,5 +1,5 @@
 import { Redirect } from 'expo-router';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Text, View, Image, ScrollView, Dimensions} from 'react-native';
 import { ButtonGroup } from 'react-native-elements';
 import { LineChart } from 'react-native-chart-kit';
@@ -24,7 +24,7 @@ const chartConfig = {
 
 const LineChartComponent = ({data, title}) => {
   return (
-    <View style={styles.chartContainer}>
+    <View key={0} style={styles.chartContainer}>
       <Text style={styles.text}>{title}</Text>
       <LineChart
         data={data}
@@ -42,10 +42,12 @@ const LineChartComponent = ({data, title}) => {
 /** Determines graph type */
 type GraphType = 'steps' | 'exercise' | 'weight' | undefined;
 /** Determines timeframe of the graph */
-type TimePeriod = 'day' | 'month';
-/** Determines the day of the week */
+type TimePeriod = 'Week' | 'Month' | 'Year'; 
+/** Determines the day of the week  [TimePeriod 'week'] */
 type Day = 'Sun' | 'Mon' | 'Tue' | 'Wed' | 'Thur' | 'Fri' | 'Sat' | undefined;
-/** Determines the month of the year */
+/** Determines how many weeks have passed [TimePeriod 'month'] */
+type Week = "3 weeks" | "2 weeks" | "1 week" | "This week" | undefined;
+/** Determines the month of the year [TimePeriod 'year'] */
 type Month = 'Jan' | 'Feb' | 'Mar' | 'Apr' | 'May' | 'Jun' |
              'Jul' | 'Aug' | 'Sep' | 'Oct' | 'Nov' | 'Dec' | undefined;
 
@@ -61,7 +63,14 @@ const dayString = (d:Day) => {
   else if (d === 'Sat') return 'Saturday';
   else return 'Error';
 }
-
+/** Converts Week type to string */
+const weekString = (w:Week) => {
+  if (w === '3 weeks') return '3 weeks ago';
+  else if (w === '2 weeks') return '2 weeks ago';
+  else if (w === '1 week') return '1 week ago';
+  else if (w === 'This week') return 'This week';
+  else return 'No week';
+}
 /** Converts Month type to string */
 const monthString = (m:Month) => {
   if (m === 'Jan') return 'January';
@@ -90,7 +99,6 @@ interface DayButtonProps {
   togglePopup: (boolean) => void;
   changeDay: (Day) => void;
 }
-
 const DayButton: React.FC<DayButtonProps> = ({togglePopup, changeDay}) => {
     // Chooses day to change and closes day popup
     const handleDayPopup = (d:Day) => {
@@ -111,6 +119,33 @@ const DayButton: React.FC<DayButtonProps> = ({togglePopup, changeDay}) => {
 }
 
 
+/** 
+ * Week Popup layout 
+ * 
+ * @param togglePopup - Toggles whether or not the popup is open/closed
+ * @param changeWeek  - Changes the week to edit
+ */
+interface WeekButtonProps {
+  togglePopup: (boolean) => void;
+  changeWeek: (Day) => void;
+}
+const WeekButton: React.FC<WeekButtonProps> = ({togglePopup, changeWeek}) => {
+  // Chooses day to change and closes day popup
+  const handleWeekPopup = (w:Week) => {
+    changeWeek(w);
+    togglePopup(false);
+  }
+return (
+  <>
+    <Button title='Sunday' onPress={() => handleWeekPopup('3 weeks')}/>
+    <Button title='Monday' onPress={() => handleWeekPopup('2 weeks')}/>
+    <Button title='Tuesday' onPress={() => handleWeekPopup('1 week')}/>
+    <Button title='Wednesday' onPress={() => handleWeekPopup('This week')}/>
+  </>
+);
+}
+
+
 /** 
  * Month Popup layout 
  * 
@@ -121,8 +156,6 @@ interface MonthButtonProps {
   togglePopup: (boolean) => void;
   changeMonth: (Month) => void;
 }
-
-/** Month Popup layout */
 const MonthButton: React.FC<MonthButtonProps> = ({togglePopup, changeMonth}) => {
   // Chooses day to change and closes day popup
   const handleMonthPopup = (m:Month) => {
@@ -151,20 +184,19 @@ const MonthButton: React.FC<MonthButtonProps> = ({togglePopup, changeMonth}) =>
 /**
  * Renders a button to change graph data via popup
  * 
- * @param graphType  - The type of graph we're updating [ @see GraphType ] 
- * @param graphData  - The graph data to edit 
- * @param timeframe  - The time period the graph is referencing [ @see TimePeriod ] 
- * @param changeData - React hook to update data
+ * @param graphType  - [ @see GraphType ] 
+ * @param graphData  - The graph to edit 
+ * @param changeData - React hook to update graph
+ * @param timeframe  - [ @see TimePeriod ] 
  */
 interface EditGraphPopupProps {
   graphType: GraphType;
   graphData: GraphData|undefined;
-  timeframe: TimePeriod;
   changeData: (GraphData) => void;
+  timeframe: TimePeriod;
 }
-
 const EditGraphPopup: React.FC<EditGraphPopupProps> = ({graphType, graphData,
-                                                        timeframe, changeData}) => {
+                                                        changeData, timeframe}) => {
   // Toggles popup windows
   const [popupVisible, setPopupVisible] = useState(false);
   const [timePopupVisible, setTimePopupVisible] = useState(false);
@@ -176,11 +208,13 @@ const EditGraphPopup: React.FC<EditGraphPopupProps> = ({graphType, graphData,
   const graphVar:string = (typeof graphType !== undefined) ? String(graphType) : 'Error';
   
   // Day/Month text formatting
-  const writeDayButtonText = () => {
-    if (timeframe === 'month')
-      return (timeToEdit === undefined) ? 'Choose a Month' : monthString(timeToEdit);
-    else
+  const writeTimeButtonText = () => {
+    if (timeframe === 'Week')
       return (timeToEdit === undefined) ? 'Choose a Day' : dayString(timeToEdit);
+    else if (timeframe === 'Month')
+      return (timeToEdit === undefined) ? 'Choose a Week' : weekString(timeToEdit);
+    else
+      return (timeToEdit === undefined) ? 'Choose a Month' : monthString(timeToEdit);
   }
 
   // Updates the list to write new data
@@ -198,27 +232,32 @@ const EditGraphPopup: React.FC<EditGraphPopupProps> = ({graphType, graphData,
 
   // Renders the component
   return(
-    <>
+    <View key={1}>
       <Button title='Manually Update Data' onPress={() => setPopupVisible(true)}/>
       <Popup visible={popupVisible} togglePopup={setPopupVisible}>
         <View style={{padding:10, rowGap:20}}>
           <View style={{marginBottom:30}}>
-            <Text style={styles.planPopupText}>{'Edit '+capitalize(graphVar)+' Data Point'}</Text>
+            <Text style={[styles.planPopupText, {textAlign:'center'}]}>{'Edit '+capitalize(graphVar)+' Data Point'}</Text>
           </View>
           <View style={{paddingVertical:5}}>
-            <Text style={{fontSize:16}}>{capitalize(timeframe) + ' to Edit:'}</Text>
-            <Button title={writeDayButtonText()} onPress={() => setTimePopupVisible(true)}/>
+            <Text style={{fontSize:16, textAlign:'center'}}>{capitalize(timeframe) + ' to Edit:'}</Text>
+            <Button title={writeTimeButtonText()} onPress={() => setTimePopupVisible(true)}/>
             <Popup visible={timePopupVisible} togglePopup={setTimePopupVisible}>
-              <Text style={[{marginBottom:30}, styles.planPopupText]}>Pick a Day:</Text>
+              <Text style={[styles.planPopupText,{marginBottom:30}, ]}>Pick a Time:</Text>
               <View style={{gap:10}}>
-                {timeframe === 'month' ? (
-                  <MonthButton 
-                    changeMonth={setTimeToEdit}
+                {(timeframe === 'Week') ? (
+                  <DayButton 
+                    changeDay={setTimeToEdit}
+                    togglePopup={setTimePopupVisible}
+                  />
+                ) : (timeframe === 'Month') ? (
+                  <WeekButton 
+                    changeWeek={setTimeToEdit}
                     togglePopup={setTimePopupVisible}
                   />
                 ) : (
-                  <DayButton 
-                    changeDay={setTimeToEdit}
+                  <MonthButton 
+                    changeMonth={setTimeToEdit}
                     togglePopup={setTimePopupVisible}
                   />
                 )} 
@@ -226,69 +265,156 @@ const EditGraphPopup: React.FC<EditGraphPopupProps> = ({graphType, graphData,
             </Popup>
           </View>
           <View>
-            <Text style={{fontSize:16}}>New data:</Text>
+            <Text style={{fontSize:16, textAlign:'center'}}>New data:</Text>
             <TextBox
               placeholder='Enter updated data'
               value={newData}
               onChangeText={setNewData}
-              field='number-pad'
+              field={'number-pad'}
               validate={ValidateNumber}
             />
           </View>
           <Button title='Sumbit Changes' onPress={editData}/>
         </View>
       </Popup>
-    </>
+    </View>
   );
 }
 
 
+/** Presents all graphs within a given time 
+ * 
+ * @param stepsTimeData       - The steps graph to edit 
+ * @param setStepsTimeData    - React Hook to update steps graph
+ * @param exerciseTimeData    - The exercise graph to edit 
+ * @param setExerciseTimeData - React Hook to update exercise graph
+ * @param weightTimeData      - The weight graph to edit 
+ * @param setWeightTimeData   - React Hook to update weight graph
+ * @param timeframe           - [ @see TimePeriod ] 
+*/
+interface GraphPageProps {
+  stepsTimeData: GraphData;
+  setStepsTimeData: (GraphData) => void;
+  exerciseTimeData: GraphData;
+  setExerciseTimeData: (GraphData) => void;
+  weightTimeData: GraphData;
+  setWeightTimeData: (GraphData) => void;
+  timeframe: TimePeriod;
+}
+const GraphPage:React.FC<GraphPageProps> = ({stepsTimeData, setStepsTimeData,
+                                             exerciseTimeData, setExerciseTimeData,
+                                             weightTimeData, setWeightTimeData, timeframe}) => {
+  return (
+    <>
+      <View style={{padding:20}}>
+        <LineChartComponent data={stepsTimeData} title="Steps per Day" />
+        <EditGraphPopup
+          graphType='steps'
+          graphData={stepsTimeData}
+          timeframe={timeframe}
+          changeData={setStepsTimeData}
+        />
+      </View>
+      <View style={{padding:20}}>
+        <LineChartComponent data={exerciseTimeData} title = "Exercise Minutes per Day" />
+        <EditGraphPopup
+          graphType='exercise'
+          graphData={exerciseTimeData}
+          timeframe={timeframe}
+          changeData={setExerciseTimeData}
+        />
+      </View>
+      <View style={{padding:20}}>
+        <LineChartComponent data={weightTimeData} title="Weight per Day"  />
+        <EditGraphPopup
+          graphType='weight'
+          graphData={weightTimeData}
+          timeframe={timeframe}
+          changeData={setWeightTimeData}
+        />
+      </View>
+    </>
+  )
+}
+
+
 /** Function to capitalize the first letter of a string */
 const capitalize = (str:string) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
 
-/** Hard coded data */
-const weightGraphData = {
+// Steps
+const stepsWeekGraphData = {
+  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  datasets: [{ data: [3000,1540,880,4430,3008,1000,2240] }]
+}; 
+const stepsMonthGraphData = {
+  labels: ['3 weeks', '2 weeks', '1 week', 'This week'],
+  datasets: [{ data: [2501,3102,4021,2754] }]
+}
+const stepsYearGraphData = {
   labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-  datasets: [{ data: [100,120,130,140,150,140,140,130,120,110,120,130]}]
+  datasets: [{ data: [4529,4419,3133,3572,4101,2333,3038,4678,2687,1479,4987,3021]}]
 };
 
-const exerciseGraphData = {
+// Exercise
+const exerciseWeekGraphData = {
   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   datasets: [{ data: [10,30,5,10,40,20,10] }]
 };
+const exerciseMonthGraphData = {
+  labels: ['3 weeks', '2 weeks', '1 week', 'This week'],
+  datasets: [{ data: [35,20,30,25] }]
+}
+const exerciseYearGraphData = {
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  datasets: [{ data: [40,40,35,30,20,25,30,40,50,60,45,30]}]
+};
 
-const stepsGraphDataLastWeek = {
-  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  datasets: [{ data: [3000,1540,880,4430,3008,1000,2240] }]
-}; 
-
-const exerciseGraphDataLastWeek = {
+// Weight
+const weightWeekGraphData = {
   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  datasets: [{ data: [20,40,10,5,50,10,20] }]
+  datasets: [{ data: [130,131,132,131,129,129,130] }]
+}
+const weightMonthGraphData = {
+  labels: ['3 weeks', '2 weeks', '1 week', 'This week'],
+  datasets: [{ data: [120,125,132,130] }]
+}
+const weightYearGraphData = {
+  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  datasets: [{ data: [100,120,130,140,150,140,140,130,120,110,120,130]}]
 };
 
 
-/** */
 export default function HomePage() {
   // Authentication
-  const { loggedIn, authToken, updateUserData, userData } = useApiContext();
-
-  // Graph data
-  const [stepsDataLastWeek, setStepsDataLastWeek] = useState<GraphData>(stepsGraphDataLastWeek);
-  const [exerciseDataLastWeek, setExerciseDataLastWeek] = useState<GraphData>(exerciseGraphDataLastWeek);
-  const [exerciseData, setExerciseData] = useState<GraphData>(exerciseGraphData);
-  const [weightData, setWeightData] = useState<GraphData>(weightGraphData);
-
-  // Steps
+  const { loggedIn, userData } = useApiContext();
+  
+  // Steps from Apple Health
   const {steps,dailySteps} = useHealthData();
   console.log(steps);
+
+  // Steps graph data
+  const [stepsWeekData, setStepsWeekData] = useState<GraphData>(dailySteps ? dailySteps : stepsWeekGraphData);
+  const [stepsMonthData, setStepsMonthData] = useState<GraphData>(stepsMonthGraphData);
+  const [stepsYearData, setStepsYearData] = useState<GraphData>(stepsYearGraphData);
+  // Weight graph data
+  const [weightWeekData, setWeightWeekData] = useState<GraphData>(weightWeekGraphData);
+  const [weightMonthData, setWeightMonthData] = useState<GraphData>(weightMonthGraphData);
+  const [weightYearData, setWeightYearData] = useState<GraphData>(weightYearGraphData);
+  // Step graph data
+  const [exerciseWeekData, setExerciseWeekData] = useState<GraphData>(exerciseWeekGraphData);
+  const [exerciseMonthData, setExerciseMonthData] = useState<GraphData>(exerciseMonthGraphData);
+  const [exerciseYearData, setExerciseYearData] = useState<GraphData>(exerciseYearGraphData);
+
+  // Determines data to pass through to pass through
   
   // Handles graph time range
-  const timeOptions = ['D', 'W', 'M', 'Y'];
+  const timeOptions = ['Week', 'Month', 'Year'];
   const [selectedTime, setSelectedTime] = useState(0);
+//timeOptions.lower
+  // Changes time
   const handleTimeChange = (timeIndex) => {
     setSelectedTime(timeIndex);
   }
@@ -300,58 +426,40 @@ export default function HomePage() {
   // Render component
   return (
     <View style = {styles.heading}>
-      <View style = {[styles.header, ]}>
-      <Text style = {styles.headerText} >Hello, {userData?.username ? userData.username : "USER"}</Text>
-      <Image source={require('assets/pfp.png')} style={styles.avatar}/>
+      <View style = {styles.header}>
+        <Text style = {styles.headerText} >Hello, {userData?.username ? userData.username : "USER"}</Text>
+        <Image source={require('assets/pfp.png')} style={styles.avatar}/>
       </View>
-
       <ButtonGroup 
         onPress = {handleTimeChange}
         selectedIndex = {selectedTime}
         buttons= {timeOptions}
         containerStyle = {styles.buttonGroupContainer}
+        selectedButtonStyle = {styles.buttonGroupContainer}
         textStyle = {styles.text}
       />
-        
       <ScrollView contentContainerStyle = {styles.charts}>
-        {selectedTime === 0 ? (
-          <>
-            <View style={{padding:20}}>
-              <LineChartComponent data={stepsDataLastWeek} title="Steps" />
-              <EditGraphPopup
-                graphType='steps'
-                graphData={stepsDataLastWeek}
-                timeframe={'day'}
-                changeData={setStepsDataLastWeek}
-              />
-            </View>
-            <View style={{padding:20}}>
-              <LineChartComponent data={exerciseData} title = "Exercise Minutes" />
-              <EditGraphPopup
-                graphType='exercise'
-                graphData={exerciseData}
-                timeframe={'day'}
-                changeData={setExerciseData}
-              />
-            </View>
-            <View style={{padding:20}}>
-              <LineChartComponent data={weightData} title="Weight"  />
-              <EditGraphPopup
-                graphType='weight'
-                graphData={weightData}
-                timeframe={'month'}
-                changeData={setWeightData}
-              />
-            </View>
-          </>
+        {(selectedTime === 0) ? (
+          <GraphPage
+            stepsTimeData={stepsWeekData}       setStepsTimeData={setStepsWeekData}
+            exerciseTimeData={exerciseWeekData} setExerciseTimeData={setExerciseWeekData}
+            weightTimeData={weightWeekData}     setWeightTimeData={setWeightWeekData}
+            timeframe='Week'
+          />
+        ) : (selectedTime === 1) ? (
+          <GraphPage
+            stepsTimeData={stepsMonthData}       setStepsTimeData={setStepsMonthData}
+            exerciseTimeData={exerciseMonthData} setExerciseTimeData={setExerciseMonthData}
+            weightTimeData={weightMonthData}     setWeightTimeData={setWeightMonthData}
+            timeframe='Month'
+          />
         ) : (
-
-        
-          <>
-            <LineChartComponent data={dailySteps ? dailySteps:stepsDataLastWeek} title="Steps" />
-            <LineChartComponent data={exerciseDataLastWeek} title = "Exercise Minutes" />
-            <LineChartComponent data={weightData} title="Weight"  />
-          </>
+          <GraphPage
+            stepsTimeData={stepsYearData}       setStepsTimeData={setStepsYearData}
+            exerciseTimeData={exerciseYearData} setExerciseTimeData={setExerciseYearData}
+            weightTimeData={weightYearData}     setWeightTimeData={setWeightYearData}
+            timeframe='Year'
+          />
         )}     
       </ScrollView>
     </View>
diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
index 8aaf707..6135af5 100644
--- a/app/(tabs)/profile.tsx
+++ b/app/(tabs)/profile.tsx
@@ -1,370 +1,216 @@
 import { Link, router } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import React, {useState, useEffect} from 'react';
-import { Image, Text, View, TouchableOpacity, ScrollView, Modal, Alert, TextInput } from 'react-native';
+import { Image, Text, View, TouchableOpacity, ScrollView, Modal, Dimensions } from 'react-native';
 
 import { Button } from '../components/button';
 import { defaultPageTheme, styles } from '../utility/style';
 import { ApiContext, useApiContext } from '../../api/ApiContext';
 import { UserType , getUserInfo, setUserInfo} from '../../api/User';
-import { Ionicons } from '@expo/vector-icons';
+import { TextBox } from '../components/textbox';
+import { Popup } from '../components/popup';
+import * as form from '../utility/formValidation';
+
+
+/** Custom type for data to update */
+type ProfileType = 'username' | 'email' | 'age' | 'weight' | 'height' | undefined;
+
+interface APIRequest {
+  authToken
+  updateUserData
+  userData
+}
+
+/** Helper function that automatically updates the user information */
+async function handleUpdate(dataType: ProfileType, togglePopup, value, validate, API: APIRequest) {
+  var updatedUserData: UserType;
+  if (validate(value) === '') { 
+    if (dataType === 'username') updatedUserData = {...API.userData, username: value};
+    else if (dataType === 'email') updatedUserData = {...API.userData, email: value};
+    else if (dataType === 'age') updatedUserData = {...API.userData, age: value};
+    else if (dataType === 'weight') updatedUserData = {...API.userData, weight: value};
+    else if (dataType === 'height') updatedUserData = {...API.userData, height: value};
+    else updatedUserData = {...API.userData};
 
-
-
-export default function ProfilePage() {
-    const {authToken,updateUserData,userData} = useApiContext();
-    console.log(authToken)
-    const [UsernamemodalVisible, setUsernameModalVisible] = useState(false);
-    const [EmailmodalVisible, setEmailModalVisible] = useState(false);
-    const [AgemodalVisible, setAgeModalVisible] = useState(false);
-    const [WeightmodalVisible, setWeightModalVisible] = useState(false);
-    const [HeightmodalVisible, setHeightModalVisible] = useState(false);
-    const [newUsername, setNewUsername] = useState('');
-    const [newEmail, setNewEmail] = useState('');
-    const [newAge, setNewAge] = useState('');
-    const [newWeight, setNewWeight] = useState('');
-    const [newHeight, setNewHeight] = useState('');
-
-    
-    const handleUsernameUpdate = async () => {
-      try {
-          const updatedUserData = { ...userData, username: newUsername };
-          const response = await setUserInfo(authToken, updatedUserData);
-          console.log(response)
-          if (response === "success!") {
-              // Update user data displayed on the profile page
-              updateUserData();
-              setUsernameModalVisible(false);
-          } else {
-              console.log(newUsername)
-              console.error('Failed to update username');
-              // Handle error
-          }
-      } catch (error) {
-          console.error('Error updating username:', error);
-          // Handle error
-      }
-  };
-
-
-  const handleEmailUpdate = async () => {
     try {
-        const updatedUserData = { ...userData, email: newEmail };
-        const response = await setUserInfo(authToken, updatedUserData);
-        console.log(response)
-        if (response === "success!") {
-            // Update user data displayed on the profile page
-            updateUserData();
-            setEmailModalVisible(false);
-        } else {
-          
-            console.error('Failed to update email');
-            // Handle error
-        }
-    } catch (error) {
-        console.error('Error updating email:', error);
+      const response = await setUserInfo(API.authToken, updatedUserData);
+      console.log(response);
+      if (response === "success!") {
+        // Update user data displayed on the profile page
+        API.updateUserData();
+        togglePopup(false);
+        return;
+      } else {
+        console.log(value);
+        console.error('Failed to update user data');
         // Handle error
-    }
-};
-
-const handleAgeUpdate = async () => {
-    try {
-        const updatedUserData = { ...userData, age: parseInt(newAge, 10) };
-        const response = await setUserInfo(authToken, updatedUserData);
-        console.log(response)
-        if (response === "success!") {
-            // Update user data displayed on the profile page
-            updateUserData();
-            setAgeModalVisible(false);
-        } else {
-            console.log(newAge)
-            console.error('Failed to update age');
-            // Handle error
-        }
-    } catch (error) {
-        console.error('Error updating age:', error);
-        // Handle error
-    }
-};
-const handleWeightUpdate = async () => {
-    try {
-        const updatedUserData = { ...userData, weight: parseInt(newWeight, 10) };
-        const response = await setUserInfo(authToken, updatedUserData);
-        console.log(response)
-        if (response === "success!") {
-            // Update user data displayed on the profile page
-            updateUserData();
-            setWeightModalVisible(false);
-        } else {
-            console.log(newWeight)
-            console.error('Failed to update weight');
-            // Handle error
-        }
+      }
     } catch (error) {
-        console.error('Error updating weight:', error);
-        // Handle error
+      console.error('Error updating user data:', error);
+      // Handle error
     }
-};
 
-const handleHeightUpdate = async () => {
-    try {
-        const updatedUserData = { ...userData, height: parseInt(newHeight, 10) };
-        const response = await setUserInfo(authToken, updatedUserData);
-        console.log(response)
-        if (response === "success!") {
-            // Update user data displayed on the profile page
-            updateUserData();
-            setHeightModalVisible(false);
-        } else {
-            console.log(newHeight)
-            console.error('Failed to update height');
-            // Handle error
-        }
-    } catch (error) {
-        console.error('Error updating height:', error);
-        // Handle error
-    }
-};
+    return;
+  }
+}
+
+
+/**
+ * Custom component to update user data via a popup component
+ * 
+ * @param dataType    - The current data we are changing
+ * @param togglePopup - Toggles whether or not the popup is open/closed
+ * @param visible     - Whether or not the current popup is visible
+ * @param updateValue - Updates the current value stored in the UserType
+ * @param value       - Variable to pass input text to
+ */
+interface EditDataFieldProps {
+  dataType: ProfileType;
+  togglePopup: (boolean) => void;
+  visible: boolean;
+  updateValue: (string) => void;
+  value: string;
+  API: APIRequest;
+  validate?: (string) => string;
+}
+
+const EditDataField: React.FC<EditDataFieldProps> = ({ dataType, togglePopup, visible,
+                                                       updateValue, value, API, validate }) => {
+  var dataText = (dataType !== undefined) ? dataType.toUpperCase() : "Error";
+  if (dataText === 'Weight') dataText += ' (lbs)';
+  else if (dataText === 'Height') dataText += ' (in)';
+  
+  var dataVar: string|undefined;
+  if (dataType === 'username') dataVar = API.userData?.username?.toString();
+  else if (dataType === 'email') dataVar = API.userData?.email?.toString();
+  else if (dataType === 'age') dataVar = API.userData?.age?.toString();
+  else if (dataType === 'weight') dataVar = API.userData?.weight?.toString();
+  else if (dataType === 'height') dataVar = API.userData?.height?.toString();
+  else dataVar = "Error";
 
+  return (
+    <View>
+      <View style = {styles.row}>
+        <Text style = {styles.text}>{dataText}</Text>
+        <TouchableOpacity onPress= {() => togglePopup(true)}>
+          <Text style = {[styles.text, {fontWeight: 'bold',color: '#00B5EE'}]}>Edit</Text>
+        </TouchableOpacity>
+      </View>
+      <Text style = {[styles.text, {marginTop: 5, fontWeight: 'bold'}]} >
+        {dataVar || 'NA'}
+      </Text>
+      
+      <Popup
+        visible={visible}
+        togglePopup={togglePopup}
+      >
+        <TextBox
+          placeholder={"Enter new " + dataType}
+          value={value}
+          onChangeText={updateValue}
+          validate={validate}
+        />
+        <Button
+          title={"Update"}
+          style={{/*maxWidth:Dimensions.get('window').width*.75,*/ alignSelf:'center'}}
+          onPress={() => handleUpdate(dataType, togglePopup, value, validate, API)}
+        />
+      </Popup>
+    </View>
+  )
+}
 
-    useEffect(() => {
-        const fetchData = async () => {
-          try {
-            const userInfo = await updateUserData();
-            if (userInfo) {
-              console.log("what")
-              console.log(userData); // Logging userData onto the console
-            }
-          } catch (error) {
-             console.error('Error fetching user info:', error);
-          }
-        };
-    
-        fetchData();
-      }, [authToken]);
 
-      
+export default function ProfilePage() {
+  /** Detemines API token to connect with the database */
+  const {authToken, updateUserData, userData} = useApiContext();
+  var API = {authToken, updateUserData, userData};
+  console.log(authToken)
+
+  const [usernameModalVisible, setUsernameModalVisible] = useState(false);
+  const [emailModalVisible, setEmailModalVisible] = useState(false);
+  const [ageModalVisible, setAgeModalVisible] = useState(false);
+  const [weightModalVisible, setWeightModalVisible] = useState(false);
+  const [heightModalVisible, setHeightModalVisible] = useState(false);
+  const [newUsername, setNewUsername] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [newAge, setNewAge] = useState('');
+  const [newWeight, setNewWeight] = useState('');
+  const [newHeight, setNewHeight] = useState('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const userInfo = await updateUserData();
+        if (userInfo) {
+          console.log("what");
+          console.log(userData); // Logging userData onto the console
+        }
+      } catch (error) {
+        console.error('Error fetching user info:', error);
+      }
+    };
+    fetchData();
+  }, [authToken]);
     
     
   return (
-      <View style = {styles.heading}>
-          <View style = {[styles.header, ]}>
-          <Text style = {styles.headerText} >Profile Settings</Text>
-          <TouchableOpacity>
-            <Image source={require('assets/pfp.png')} style={styles.avatar}/>
-          </TouchableOpacity>
+    <View style = {styles.heading}>
+      <View style = {[styles.header, ]}>
+        <Text style = {styles.headerText} >Profile Settings</Text>
+        <TouchableOpacity>
+          <Image source={require('assets/pfp.png')} style={styles.avatar}/>
+        </TouchableOpacity>
       </View>
       <ScrollView showsVerticalScrollIndicator = {false}>
-          <View style = {styles.content}>
-              <View style = {styles.row}>
-                  <Text style = {styles.text}>Username</Text>
-                  <TouchableOpacity onPress= {() => setUsernameModalVisible(true)}>
-                  <Text style = {[styles.text, {fontWeight: 'bold',color: '#00B5EE'}]}>Edit</Text>
-                  </TouchableOpacity>
-
-              </View>
-              <Text style = {[styles.text, {marginTop: 5, fontWeight: 'bold'}]} >
-                 {userData.username?.toString() || 'NA'}
-              </Text>
-              <Modal
-                        animationType="fade"
-                        transparent={true}
-                        visible={UsernamemodalVisible}
-                        onRequestClose={() => setUsernameModalVisible(false)}
-                    >
-                        <View style={styles.modalContainer}>
-                            <View style={styles.modalContent}>
-                                <TextInput
-                                    style={styles.input}
-                                    onChangeText={setNewUsername}
-                                    value={newUsername}
-                                    placeholder="Enter new username"
-                                    placeholderTextColor="#888"
-                                />
-                                <TouchableOpacity onPress={handleUsernameUpdate}>
-                                  <View style = {styles.settingsbutton}>
-                                    <Text style={[styles.settingsbuttonText, { fontWeight: 'bold' }]}>Update</Text>
-                                    </View>
-                                </TouchableOpacity>
-                                <TouchableOpacity onPress={() => setUsernameModalVisible(false)} style={styles.closeButton}>
-                                  <Ionicons name="close" size={20}  /> {/* Close icon */}
-                                  </TouchableOpacity>
-                            </View>
-                        </View>
-                    </Modal>
-     
-              
-            <View style = {{marginVertical: 10}}></View>
-
-              <View style = {styles.row}>
-                  <Text style = {styles.text}>Email</Text>
-                  <TouchableOpacity onPress= {() => setEmailModalVisible(true)}>
-                  <Text style = {[styles.text, {fontWeight: 'bold',color: '#00B5EE'}]}>Edit</Text>
-                  </TouchableOpacity>
-
-              </View>
-              <Text style = {[styles.text, {marginTop: 5, fontWeight: 'bold'}]} >
-                  {userData.email?.toString() || 'NA'}
-              </Text>
-
-              <Modal
-                        animationType="fade"
-                        transparent={true}
-                        visible={EmailmodalVisible}
-                        onRequestClose={() => setEmailModalVisible(false)}
-                    >
-                        <View style={styles.modalContainer}>
-                            <View style={styles.modalContent}>
-                                <TextInput
-                                    style={styles.input}
-                                    onChangeText={setNewEmail}
-                                    value={newEmail}
-                                    placeholder="Enter new email"
-                                    placeholderTextColor="#888"
-                                />
-                                <TouchableOpacity onPress={handleEmailUpdate}>
-                                  <View style = {styles.settingsbutton}>
-                                    <Text style={[styles.settingsbuttonText, { fontWeight: 'bold' }]}>Update</Text>
-                                    </View>
-                                </TouchableOpacity>
-                                <TouchableOpacity onPress={() => setEmailModalVisible(false)} style={styles.closeButton}>
-                                  <Ionicons name="close" size={20}  /> {/* Close icon */}
-                                  </TouchableOpacity>
-                            </View>
-                        </View>
-                    </Modal>
-
-              
-              
-               
-
-              
-
-              <View style = {{marginVertical: 10}}></View>
-
-              <View style = {styles.row}>
-                  <Text style = {styles.text}>Age</Text>
-                  <TouchableOpacity onPress= {() => setAgeModalVisible(true)}>
-                  <Text style = {[styles.text, {fontWeight: 'bold',color: '#00B5EE'}]}>Edit</Text>
-                  </TouchableOpacity>
-
-              </View>
-              <Text style = {[styles.text, {marginTop: 5, fontWeight: 'bold'}]} >
-                  {userData.age?.toString() || 'NA'}
-                </Text>
-
-                <Modal
-                        animationType="fade"
-                        transparent={true}
-                        visible={AgemodalVisible}
-                        onRequestClose={() => setAgeModalVisible(false)}
-                    >
-                        <View style={styles.modalContainer}>
-                            <View style={styles.modalContent}>
-                                <TextInput
-                                    style={styles.input}
-                                    onChangeText={setNewAge}
-                                    value={newAge}
-                                    placeholder="Enter new age"
-                                    placeholderTextColor="#888"
-                                />
-                                <TouchableOpacity onPress={handleAgeUpdate}>
-                                  <View style = {styles.settingsbutton}>
-                                    <Text style={[styles.settingsbuttonText, { fontWeight: 'bold' }]}>Update</Text>
-                                    </View>
-                                </TouchableOpacity>
-                                <TouchableOpacity onPress={() => setAgeModalVisible(false)} style={styles.closeButton}>
-                                  <Ionicons name="close" size={20}  /> {/* Close icon */}
-                                  </TouchableOpacity>
-                            </View>
-                        </View>
-                    </Modal>
-
-            <View style = {{marginVertical: 10}}></View>
-
-              <View style = {styles.row}>
-                  <Text style = {styles.text}>Weight</Text>
-                  <TouchableOpacity onPress= {() => setWeightModalVisible(true)}>
-                  <Text style = {[styles.text, {fontWeight: 'bold',color: '#00B5EE'}]}>Edit</Text>
-                  </TouchableOpacity>
-
-              </View>
-              <Text style = {[styles.text, {marginTop: 5, fontWeight: 'bold'}]} >
-                  {userData.weight?.toString() || ''}
-              </Text>
-
-              <Modal
-                        animationType="fade"
-                        transparent={true}
-                        visible={WeightmodalVisible}
-                        onRequestClose={() => setWeightModalVisible(false)}
-                    >
-                        <View style={styles.modalContainer}>
-                            <View style={styles.modalContent}>
-                                <TextInput
-                                    style={styles.input}
-                                    onChangeText={setNewWeight}
-                                    value={newWeight}
-                                    placeholder="Enter new weight"
-                                    placeholderTextColor="#888"
-                                />
-                                <TouchableOpacity onPress={handleWeightUpdate}>
-                                  <View style = {styles.settingsbutton}>
-                                    <Text style={[styles.settingsbuttonText, { fontWeight: 'bold' }]}>Update</Text>
-                                    </View>
-                                </TouchableOpacity>
-                                <TouchableOpacity onPress={() => setWeightModalVisible(false)} style={styles.closeButton}>
-                                  <Ionicons name="close" size={20}  /> {/* Close icon */}
-                                  </TouchableOpacity>
-                            </View>
-                        </View>
-                    </Modal>
-
-
-            <View style = {{marginVertical: 10}}></View>
-
-              <View style = {styles.row}>
-                  <Text style = {styles.text}>Height</Text>
-                  <TouchableOpacity onPress= {() => setHeightModalVisible(true)}>
-                  <Text style = {[styles.text, {fontWeight: 'bold',color: '#00B5EE'}]}>Edit</Text>
-                  </TouchableOpacity>
-
-              </View> 
-              <Text style = {[styles.text, {marginTop: 5, fontWeight: 'bold'}]} >
-                {userData?.height?.toString() || 'NA'}
-              </Text>
-              <Modal
-                        animationType="fade"
-                        transparent={true}
-                        visible={HeightmodalVisible}
-                        onRequestClose={() => setHeightModalVisible(false)}
-                    >
-                        <View style={styles.modalContainer}>
-                            <View style={styles.modalContent}>
-                                <TextInput
-                                    style={styles.input}
-                                    onChangeText={setNewHeight}
-                                    value={newHeight}
-                                    placeholder="Enter new height"
-                                    placeholderTextColor="#888"
-                                />
-                                <TouchableOpacity onPress={handleHeightUpdate}>
-                                  <View style = {styles.settingsbutton}>
-                                    <Text style={[styles.settingsbuttonText, { fontWeight: 'bold' }]}>Update</Text>
-                                    </View>
-                                </TouchableOpacity>
-                                <TouchableOpacity onPress={() => setWeightModalVisible(false)} style={styles.closeButton}>
-                                  <Ionicons name="close" size={20}  /> {/* Close icon */}
-                                  </TouchableOpacity>
-                            </View>
-                        </View>
-                    </Modal>
-
-
-
-          </View>
+        <View style = {styles.content}>
+          <EditDataField
+            dataType = 'username'
+            togglePopup = {setUsernameModalVisible}
+            visible = {usernameModalVisible}
+            updateValue = {setNewUsername}
+            value = {newUsername}
+            API = {API}
+            validate={form.ValidateUser}
+          />
+          <EditDataField
+            dataType = 'email'
+            togglePopup = {setEmailModalVisible}
+            visible = {emailModalVisible}
+            updateValue = {setNewEmail}
+            value = {newEmail}
+            API = {API}
+            validate={form.ValidateEmail}
+          />
+          <EditDataField
+            dataType = 'age'
+            togglePopup = {setAgeModalVisible}
+            visible = {ageModalVisible}
+            updateValue = {setNewAge}
+            value = {newAge}
+            API = {API}
+            validate={form.ValidateNumber}
+          />
+          <EditDataField
+            dataType = 'weight'
+            togglePopup = {setWeightModalVisible}
+            visible = {weightModalVisible}
+            updateValue = {setNewWeight}
+            value = {newWeight}
+            API = {API}
+            validate={form.ValidateNumber}
+          />
+          <EditDataField
+            dataType = 'height'
+            togglePopup = {setHeightModalVisible}
+            visible = {heightModalVisible}
+            updateValue = {setNewHeight}
+            value = {newHeight}
+            API = {API}
+            validate={form.ValidateNumber}
+          />
+        </View>
       </ScrollView>
     </View>
-
   )
 }
\ No newline at end of file
diff --git a/app/components/textbox.tsx b/app/components/textbox.tsx
index fbef40f..a371b5c 100644
--- a/app/components/textbox.tsx
+++ b/app/components/textbox.tsx
@@ -23,7 +23,7 @@ interface TextboxProps {
     field?: KeyboardTypeOptions;
     validate?: (string) => string;
     style?: StyleProp<ViewStyle>;
-    //[x: string]: any;
+    [x: string]: any;
 }
 
 export const TextBox: React.FC<TextboxProps> = ({ placeholder, value, 
@@ -47,6 +47,7 @@ export const TextBox: React.FC<TextboxProps> = ({ placeholder, value,
         <View style={styles.textboxContainer}>
             <View style={styles.textboxDefault}/>
             <View style={[{justifyContent: 'center'}, styles.textboxDefault]}>
+                
                 <TextInput
                     {...props}
                     onFocus={toggleFocus} // Become primary color
@@ -70,6 +71,9 @@ export const TextBox: React.FC<TextboxProps> = ({ placeholder, value,
                 <View style={[{
                     backgroundColor: '#ffffff',
                     borderRadius: 5,
+                    borderWidth:1,
+                    left:60,
+                    padding:5
                 }, styles.textboxDefault]}>
                     <Text style={{flexWrap:'wrap', fontSize:10}}>{error}</Text>
                 </View>
diff --git a/app/login.tsx b/app/login.tsx
index f3e1eba..7696d58 100644
--- a/app/login.tsx
+++ b/app/login.tsx
@@ -44,7 +44,7 @@ export default function LoginPage() {
         secureTextEntry={true} // Hides password input
       />
       <Button 
-        onPress={async () => {await loginUser(username,password);}}
+        onPress={async () => await loginUser(username,password)}
         title="Log In"
         style = {styles.setupbutton}
       />
diff --git a/app/submit_data.tsx b/app/submit_data.tsx
index c73f325..07f75bc 100644
--- a/app/submit_data.tsx
+++ b/app/submit_data.tsx
@@ -1,16 +1,14 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View,Image, LogBox, ImageBackground, TouchableOpacity , TextInput} from 'react-native';
-import registerRootComponent from 'expo/build/launch/registerRootComponent';
-import { createClient, Provider } from 'urql';
-import React, {useState, useEffect} from 'react';
-import { Link } from 'expo-router';
-import { Button } from './components/button';
 import { router } from 'expo-router';
-import { defaultPageTheme , styles} from './utility/style';
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from 'react';
+import { Text, View, Image } from 'react-native';
+
 import { useApiContext } from './../api/ApiContext';
-import { setUserInfo } from './../api/User';
+import { UserType, setUserInfo } from './../api/User';
+import { Button } from './components/button';
 import { TextBox } from './components/textbox';
-import { UserType } from './../api/User';
+import * as form from './utility/formValidation';
+import { defaultPageTheme , styles} from './utility/style';
 
 
 export default function Page() {
@@ -19,7 +17,6 @@ export default function Page() {
 
   return (
     <View style={defaultPageTheme().container}>
-      {/*<Image source={require('../../assets/ricehat.jpg')} style={{width: bidenSize, height: bidenSize}}/>*/}
       <Image source={require('./../assets/logo.png')} 
       style={{width: 120, height: 120}}/> 
       <Text style = {[styles.headerText, {fontSize: 20}]}>
@@ -28,70 +25,46 @@ export default function Page() {
       <Text style = {[styles.headerText, {fontSize: 15, fontWeight: 'normal', marginTop: 5}]}>
         Please import from Apple Health or fill out the following information:
       </Text>
-      
-  
-
-<TextInput
-  style = {[styles.input, {marginTop: 50}]}
-  placeholder="First Name"
-  value={userData.first_name?.toString() || ''}
-  onChangeText={(text) => setUserData({ ...userData, first_name: text })}
- 
-/>
-
-<TextInput
-  style = {styles.input}
-  placeholder="Last Name"
-  value={userData.last_name?.toString() || ''}
-  onChangeText={(text) => setUserData({ ...userData, last_name: text })}
-  
-/>
-
-<TextInput
-  style = {styles.input}
-  placeholder="Gender"
-  value={userData.gender?.toString() || ''}
-  onChangeText={(text) => setUserData({ ...userData, gender: text })}
-  
-/>
-
-<TextInput
-  style = {styles.input}
-  placeholder="Weight"
-  value={userData.weight?.toString() || ''}
-  onChangeText={(text) => {
-    let weight = parseInt(text, 10);
-    if (!isNaN(weight)) {
-      setUserData({ ...userData, weight });
-    } else{
-      weight=0;
-      setUserData({ ...userData, weight });
-    }
-  }}
-  
-/>
-
-<TextInput
-  style = {styles.input}
-  placeholder="Height"
-  value={userData.height?.toString() || ''}
-  onChangeText={(text) => {
-    let height = parseInt(text, 10);
-    if (!isNaN(height)) {
-      setUserData({ ...userData, height });
-    }else{
-      height=0;
-      setUserData({ ...userData, height });
-    }
-  }}
-
-/>
-        <Button onPress={async ()=>{await setUserInfo(authToken,userData);await updateUserData();router.navigate("/")}} title="Okay I'm done"></Button>
-        <Button title="Import!" style = {{marginTop: 5,}} />
+      <TextBox 
+        style={{marginTop:50}}
+        placeholder={'First Name'}
+        value={userData.first_name?.toString() || ''}
+        onChangeText={(text) => setUserData({ ...userData, first_name: text })}
+        validate={form.ValidateName}
+      />
+      <TextBox 
+        placeholder={'Last Name'}
+        value={userData.last_name?.toString() || ''}
+        onChangeText={(text) => setUserData({ ...userData, last_name: text })}
+        validate={form.ValidateName}
+      />
+      <TextBox 
+        placeholder={'Gender (Male/Female/Other)'}
+        value={userData.gender?.toString() || ''}
+        onChangeText={(text) => setUserData({ ...userData, gender: text })}
+        validate={form.ValidateGender}
+      />
+      <TextBox 
+        placeholder={'Weight (lbs)'}
+        value={userData.weight?.toString() || ''}
+        onChangeText={(text) => setUserData({ ...userData, weight: text })}
+        validate={form.ValidateNumber}
+      />
+      <TextBox 
+        placeholder={'Height (in)'}
+        value={userData.weight?.toString() || ''}
+        onChangeText={(text) => setUserData({ ...userData, height: text })}
+        validate={form.ValidateNumber}
+      />
+      <Button onPress={async ()=> {
+        /*if (form.ValidateFirstLogin()) {
+          await setUserInfo(authToken,userData);
+          await updateUserData();
+          router.navigate("/");
+        }*/}}
+        title="Okay I'm done"></Button>
+      <Button title="Import!" style = {{marginTop: 5,}} />
       <StatusBar style="auto" />
     </View>
-     
-
   );
-}
-
+}
\ No newline at end of file
diff --git a/app/utility/formValidation.tsx b/app/utility/formValidation.tsx
index 9373d82..87d39e1 100644
--- a/app/utility/formValidation.tsx
+++ b/app/utility/formValidation.tsx
@@ -1,8 +1,12 @@
+import { UserType } from '../../api/User';
+
 /** RegEx Constants */ 
 const userRegex:RegExp =/^[A-Za-z0-9_]{3,32}$/;
 const passRegex:RegExp = /^(?=.*[\d])(?=.*[!@#$%^&*_])(?=.*[A-Z])(?=.*[a-z])[\w!@#$%^&*]{8,32}$/;
 const emailRegex:RegExp = /^[\w!#$%&'*+/=?`{|}~^-]+(?:\.[\w!#$%&'*+/=?`{|}~^-]+)*@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}$/;
 const numberRegex:RegExp = /^\d+$/;
+const nameRegex:RegExp = /^[\p{L}]+$/u;
+const genderRegex:RegExp = /(?:m|M|male|Male|MALE|f|F|female|Female|FEMALE|o|O|other|Other|OTHER)$/;
 
 
 /** Error messages for invalid inputs */
@@ -16,52 +20,44 @@ const passInvalid:string = 'Your password must be between 8 ' +
 const passMatchInvalid:string = 'Both passwords must match.';
 const emailInvalid:string = 'Type in a valid email address.';
 const numberInvalid:string = 'The following value is not a valid number.';
+const nameInvalid:string = 'Please enter a valid name.';
+const genderInvalid:string = 'Please enter either a valid gender ' +
+                             ' (Male/Female/Other).';
 
 
 /** Performs form validation on a given string */
-function CheckValue(value:string, form:RegExp) {
-    return (value && form.test(value)) ? true : false;
-}
+function CheckValue(value:string, form:RegExp) { return (value && form.test(value)) ? true : false; }
 
 
-/** Determines if the username is valid */
-function IsValidUser(username:string) {
-    return CheckValue(username, userRegex);
-}
-/** Returns error message if the username is invalid */
-export function ValidateUser(username:string) {
-    return !IsValidUser(username) ? userInvalid : ''; 
-}
+/** Username */
+function IsValidUser(username:string) { return CheckValue(username, userRegex); }
+export function ValidateUser(username:string) { return !IsValidUser(username) ? userInvalid : ''; }
 
 
-/** Determines if the password is valid */
-function IsValidPass(password:string) {
-    return CheckValue(password, passRegex);
-}
-/** Returns error message if the username is invalid */
-export function ValidatePass(password:string) {
-    return !IsValidPass(password) ? passInvalid : ''; 
-}
+/** Password */
+function IsValidPass(password:string) { return CheckValue(password, passRegex); }
+export function ValidatePass(password:string) { return !IsValidPass(password) ? passInvalid : ''; }
 
 
-/** Determines if the password is valid */
-function IsValidEmail(email:string) {
-    return CheckValue(email, emailRegex);
-}
-/** Returns error message if the username is invalid */
-export function ValidateEmail(email:string) {
-    return !IsValidEmail(email) ? emailInvalid : ''; 
-}
+/** Email */
+function IsValidEmail(email:string) { return CheckValue(email, emailRegex); }
+export function ValidateEmail(email:string) { return !IsValidEmail(email) ? emailInvalid : ''; }
 
 
-/** Determines if the string is also a number */
-function IsValidNumber(num:string) {
-    return CheckValue(num, numberRegex);
-}
+/** Number */
+function IsValidNumber(num:string) { return CheckValue(num, numberRegex); }
 /** Returns error message if the string isn't a number */
-export function ValidateNumber(num:string) {
-    return !IsValidNumber(num) ? numberInvalid : '';
-}
+export function ValidateNumber(num:string) { return !IsValidNumber(num) ? numberInvalid : ''; }
+
+
+/** Name */
+function IsValidName(name:string) { return CheckValue(name, nameRegex); }
+export function ValidateName(name:string) { return !IsValidName(name) ? nameInvalid : ''; }
+
+
+/** Gender */
+function IsValidGender(gender:string) { return CheckValue(gender, genderRegex); }
+export function ValidateGender(gender:string) { return !IsValidGender(gender) ? genderInvalid : ''; }
 
 
 /** Validates the entire form */
@@ -73,4 +69,17 @@ export function ValidateForm(username, password, passConfirm?, email?) {
     else if (email !== undefined)
         if (!IsValidEmail(email)) return emailInvalid;
     return '';
-}
\ No newline at end of file
+}
+
+/*
+// TODO FIX!!!
+function verifyUserData(userData, type) {
+
+}
+
+export function ValidateFirstLogin(userData: UserType) {
+    if (!IsValidName(userData.first_name?) || !IsValidName(lname) || !IsValidGender(gender) ||
+        !IsValidNumber(weight) || !IsValidNumber(height)) return false;
+    else return true;
+}
+*/
\ No newline at end of file
diff --git a/app/utility/style.tsx b/app/utility/style.tsx
index 4de66c1..2e7a702 100644
--- a/app/utility/style.tsx
+++ b/app/utility/style.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { useTheme } from './ThemeContext';
 
 
@@ -30,41 +30,45 @@ export const styles = StyleSheet.create({
   textboxContainer: { 
     flexDirection: 'row', 
     alignItems:'center',
-    justifyContent:'space-evenly',
-    width:600, 
-    margin:5,
+    justifyContent:'center',
+    width:600,
   },
   textboxDefault: {
-    flex:1,
-    padding: paddingSmall
+    position:'relative',
+    alignSelf:'center',
+    justifyContent:'center',
+    width: 100,
+    paddingVertical: paddingMedium
   },
   textboxField: {
-    //backgroundColor: '#F0F0F0',
+    alignSelf:'center',
     borderWidth: 1,
     borderRadius: 10,
     paddingHorizontal: 15,
     paddingVertical: 5,
-    height: 30,
+    width:200,
     fontSize: fontLarge,
   },
   textboxErrorText: {
-    flexWrap:'wrap',
-    fontSize: fontSmall
+    flexWrap: 'wrap',
+    fontSize: fontSmall,
+    padding: 10,
   },
 
   /** Popup Component */
   popupBackground: {
     flex: 1,
-    alignContent: 'center',
+    alignItems:'center',
     justifyContent: 'center',
   },
   popupContainer: {
     alignItems: 'center',
     justifyContent: 'center',
     minHeight: 200,
-    minWidth: 150,
+    maxWidth: Dimensions.get('window').width *.8,
     margin: 50,
     padding: paddingMedium,
+    paddingHorizontal:paddingExtraLarge,
     borderRadius: 10,
   },
   popupClose: {
@@ -80,10 +84,12 @@ export const styles = StyleSheet.create({
 
   /** Button Component */
   buttonContainer:{
+    //alignContent: 'center',
     alignItems: 'center',
+    alignSelf: 'center',
     justifyContent: 'center',
     borderRadius: 9999, // perfectly round
-    paddingHorizontal: paddingExtraLarge,
+    paddingHorizontal: paddingLarge,
     paddingVertical: paddingSmall,
   },
   buttonText:{
@@ -97,9 +103,6 @@ export const styles = StyleSheet.create({
     fontWeight: 'bold'
   },
 
-  //textTitle
-  
-
   /** FIX PLEASE!!!!! */
   container: {
     flex: 1,
@@ -195,6 +198,7 @@ export const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     width: '30%'
   },
+  
   // wdym padding?
   padding: {
     flexDirection: 'row',
@@ -229,9 +233,8 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: 10,
-    marginBottom: 10,
-    borderRadius: 10,
+    marginVertical:5,
+    borderRadius: 5,
   },
   modalContainer: {
     flex: 1,