diff --git a/components/AddMeal.js b/components/AddMeal.js
index 4e4caef6..4cd619b2 100644
--- a/components/AddMeal.js
+++ b/components/AddMeal.js
@@ -1,37 +1,66 @@
 // CreateMealScreen.js
-import React, { useState } from 'react';
-import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import MealHeader from './MealHeader';
-import IngredientItem from './IngredientItem';
-import DirectionsBox from './DirectionsBox';
-import CreateButton from './CreateButton'; // Reused from previous examples
-import InputField from './InputField'; // Reused from previous examples
-
-const CreateMealScreen = () => {
-  // You would manage your ingredients and their amounts/calories here
-  const [ingredients, setIngredients] = useState([
-    { name: 'Steak', amount: '10 oz', calories: '847' },
-    // ...other ingredients
-  ]);
+import React, { useState, useEffect } from "react";
+import {
+  ScrollView,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from "react-native";
+import MealHeader from "./MealHeader";
+import IngredientItem from "./IngredientItem";
+import DirectionsBox from "./DirectionsBox";
+import CreateButton from "./CreateButton"; // Reused from previous examples
+import InputField from "./InputField"; // Reused from previous examples
+import CommentBox from "./CommentBox";
 
+const CreateMealScreen = ({ route }) => {
+  const { userID } = route.params;
+  const { savedMeals } = route.params;
+  const { setSavedMeals } = route.params;
+  const [mealName, setMealName] = useState("");
+  const [mealIngredients, setMealIngredients] = useState("");
+  const [mealServing, setMealServings] = useState("");
+  const [mealInstructions, setMealInstructions] = useState("");
+
+  const handleAdd = () => {
+    console.log(mealName);
+    const addMeal = {
+      mealName,
+      mealIngredients,
+      mealServing,
+      mealInstructions,
+    };
+
+    setSavedMeals((savedMeals) => [...savedMeals, addMeal]);
+
+    console.log(addMeal);
+
+    setMealName("");
+    setMealIngredients("");
+    setMealServings("");
+    setMealInstructions("");
+  };
   return (
     <ScrollView style={styles.container}>
-      <MealHeader onClose={() => console.log('Close pressed')} />
-      <InputField placeholder="Meal Name" />
-      {ingredients.map((ingredient, index) => (
-        <IngredientItem key={index} ingredient={ingredient.name} />
-      ))}
-      {/* Add New Ingredient Button */}
-      <TouchableOpacity style={styles.addButton}>
-        <Text style={styles.addButtonText}>Add New +</Text>
-      </TouchableOpacity>
-      {/* Total Calories */}
-      <View style={styles.totalCalories}>
-        <Text>Total Calories:</Text>
-        <Text>1004</Text>
-      </View>
-      <DirectionsBox />
-      <CreateButton onPress={() => console.log('Create Meal')} />
+      <MealHeader onClose={() => console.log("Close pressed")} />
+      <InputField
+        value={mealName}
+        placeholder="Meal Name"
+        onChangeText={setMealName}
+      />
+
+      <DirectionsBox
+        value={mealIngredients}
+        onChangeText={setMealIngredients}
+      />
+      <InputField
+        value={mealServing}
+        placeholder="Servings"
+        onChangeText={setMealServings}
+      />
+      <CommentBox value={mealInstructions} onChangeText={setMealInstructions} />
+      <CreateButton onPress={() => handleAdd()} label={"Create Meal"} />
     </ScrollView>
   );
 };
@@ -42,19 +71,19 @@ const styles = StyleSheet.create({
     padding: 10,
   },
   addButton: {
-    alignItems: 'center',
+    alignItems: "center",
     padding: 10,
   },
   addButtonText: {
     fontSize: 18,
-    color: 'blue',
+    color: "blue",
   },
   totalCalories: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
     padding: 10,
   },
 });
 
-export default CreateMealScreen;
\ No newline at end of file
+export default CreateMealScreen;
diff --git a/components/AddTask.js b/components/AddTask.js
index 66b99199..8b7ad710 100644
--- a/components/AddTask.js
+++ b/components/AddTask.js
@@ -1,27 +1,26 @@
 // CreateTaskScreen.js
-import React from 'react';
-import { useState } from 'react';
-import { ScrollView, StyleSheet, Alert  } from 'react-native';
-import Header from './Header';
-import InputField from './InputField';
-import DateTimePicker from './DateTimePicker';
-import TypeSelector from './TypeSelector';
-import CommentBox from './CommentBox';
-import CreateButton from './CreateButton';
-import { saveTaskForUser } from '../services/AuthAPI';
+import React from "react";
+import { useState } from "react";
+import { ScrollView, StyleSheet, Alert } from "react-native";
+import Header from "./Header";
+import InputField from "./InputField";
+import DateTimePicker from "./DateTimePicker";
+import TypeSelector from "./TypeSelector";
+import CommentBox from "./CommentBox";
+import CreateButton from "./CreateButton";
+import { saveTaskForUser } from "../services/AuthAPI";
 
-const CreateTaskScreen = ({route}) => {
+const CreateTaskScreen = ({ route }) => {
   const { userID } = route.params;
-  const [taskName, setTaskName] = useState('');
-  const [location, setLocation] = useState('');
-  const [taskType, setTaskType] = useState('');
-  const [comment, setComment] = useState('');
+  const [taskName, setTaskName] = useState("");
+  const [location, setLocation] = useState("");
+  const [taskType, setTaskType] = useState("");
+  const [comment, setComment] = useState("");
   const [date, setDate] = useState(new Date());
 
   const handleCreateTask = async () => {
-
     const user = userID;
-  
+
     const taskData = {
       name: taskName,
       date: date.toISOString(),
@@ -29,25 +28,28 @@ const CreateTaskScreen = ({route}) => {
       type: taskType,
       comment: comment,
     };
-  
+
     try {
       await saveTaskForUser(user, taskData);
-      Alert.alert('Task Created', 'Your task has been successfully created!');
+      Alert.alert("Task Created", "Your task has been successfully created!");
       // Reset task creation form or navigate the user away
     } catch (error) {
-      Alert.alert('Error', 'There was an error creating your task. Please try again.');
+      Alert.alert(
+        "Error",
+        "There was an error creating your task. Please try again."
+      );
       console.error(error);
     }
   };
   return (
     <ScrollView style={styles.container}>
-      <Header onClose={() => console.log('Close pressed')} />
+      <Header onClose={() => console.log("Close pressed")} />
       <InputField placeholder="Name" onChangeText={setTaskName} />
       <DateTimePicker onConfirm={setDate} />
       <InputField placeholder="Location" onChangeText={setLocation} />
       <TypeSelector onSelect={setTaskType} />
-      <CommentBox onCommentChange={setComment} />
-      <CreateButton onPress={handleCreateTask} />
+      <CommentBox onChangeText={setComment} />
+      <CreateButton onPress={handleCreateTask} label={"Create Task"} />
     </ScrollView>
   );
 };
diff --git a/components/AddWorkout.js b/components/AddWorkout.js
index 994087ed..b73b752e 100644
--- a/components/AddWorkout.js
+++ b/components/AddWorkout.js
@@ -1,35 +1,82 @@
 // CreateWorkoutScreen.js
-import React, { useState } from 'react';
-import { ScrollView, View, StyleSheet } from 'react-native';
-import WorkoutHeader from './WorkoutHeader';
-import InputField from './InputField'; // Reused from Create Task
-import ExerciseItem from './ExerciseItem';
-import DaySelector from './DateTimePicker';
-import CommentBox from './CommentBox'; // Reused from Create Task
-import CreateButton from './CreateButton'; // Reused from Create Task
-
-const CreateWorkoutScreen = () => {
-  const [selectedDays, setSelectedDays] = useState([]);
-
-  const toggleDay = (day) => {
-    setSelectedDays((currentDays) =>
-      currentDays.includes(day)
-        ? currentDays.filter((d) => d !== day)
-        : [...currentDays, day]
-    );
+import React, { useState, useEffect } from "react";
+import { ScrollView, View, StyleSheet, TextInput } from "react-native";
+import WorkoutHeader from "./WorkoutHeader";
+import InputField from "./InputField"; // Reused from Create Task
+import ExerciseItem from "./ExerciseItem";
+import DaySelector from "./DateTimePicker";
+import CommentBox from "./CommentBox"; // Reused from Create Task
+import CreateButton from "./CreateButton"; // Reused from Create Task
+
+const AddWorkout = ({ route }) => {
+  //const [selectedDays, setSelectedDays] = useState([]);
+  const { userID } = route.params;
+  const { savedWorkouts } = route.params;
+  const { setSavedWorkouts } = route.params;
+  const [workoutName, setWorkoutName] = useState("");
+  const [workoutType, setWorkoutType] = useState("");
+  const [workoutMuscle, setWorkoutMuscle] = useState("");
+  const [workoutEquipment, setWorkoutEquipment] = useState("");
+  const [workoutDifficulty, setWorkoutDifficulty] = useState("");
+  const [workoutInstructions, setWorkoutInstructions] = useState("");
+
+  const handleAdd = () => {
+    //console.log(workoutName);
+    const addWorkout = {
+      workoutName,
+      workoutType,
+      workoutMuscle,
+      workoutEquipment,
+      workoutDifficulty,
+      workoutInstructions,
+    };
+
+    setSavedWorkouts((savedWorkouts) => [...savedWorkouts, addWorkout]);
+
+    console.log(addWorkout);
+
+    setWorkoutName("");
+    setWorkoutType("");
+    setWorkoutMuscle("");
+    setWorkoutEquipment("");
+    setWorkoutDifficulty("");
+    setWorkoutInstructions("");
   };
 
   return (
     <ScrollView style={styles.container}>
-      <WorkoutHeader onClose={() => console.log('Close pressed')} />
-      <InputField placeholder="Workout Name" />
-      {/* Repeat ExerciseItem for each exercise */}
-      <ExerciseItem />
-      <ExerciseItem />
-      {/* ... */}
-      <DaySelector selectedDays={selectedDays} onDayToggle={toggleDay} />
-      <CommentBox />
-      <CreateButton onPress={() => console.log('Create Workout')} />
+      <WorkoutHeader onClose={() => console.log("Close pressed")} />
+      <InputField
+        value={workoutName}
+        placeholder="Workout Name"
+        onChangeText={setWorkoutName}
+      />
+      <InputField
+        value={workoutType}
+        placeholder="Type"
+        onChangeText={setWorkoutType}
+      />
+      <InputField
+        value={workoutMuscle}
+        placeholder="Muscle"
+        onChangeText={setWorkoutMuscle}
+      />
+      <InputField
+        value={workoutEquipment}
+        placeholder="Equipment"
+        onChangeText={setWorkoutEquipment}
+      />
+      <InputField
+        value={workoutDifficulty}
+        placeholder="Difficulty"
+        onChangeText={setWorkoutDifficulty}
+      />
+
+      <CommentBox
+        value={workoutInstructions}
+        onChangeText={setWorkoutInstructions}
+      />
+      <CreateButton onPress={() => handleAdd()} label={"Create Workout"} />
     </ScrollView>
   );
 };
@@ -41,4 +88,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default CreateWorkoutScreen;
+export default AddWorkout;
diff --git a/components/CommentBox.js b/components/CommentBox.js
index 9b4085f3..bf0c4d17 100644
--- a/components/CommentBox.js
+++ b/components/CommentBox.js
@@ -1,15 +1,17 @@
 // components/CommentBox.js
-import React from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
 
-const CommentBox = ({ onCommentChange }) => {
+const CommentBox = ({ onChangeText, value, placeholder, keyboardType }) => {
   return (
     <View style={styles.container}>
       <TextInput
+        value={value}
         style={styles.commentInput}
         multiline
-        placeholder="Comments"
-        onChangeText={onCommentChange}
+        placeholder="Instructions"
+        onChangeText={onChangeText}
+        keyboardType={keyboardType}
       />
     </View>
   );
@@ -21,10 +23,10 @@ const styles = StyleSheet.create({
   },
   commentInput: {
     borderWidth: 1,
-    borderColor: 'grey',
+    borderColor: "grey",
     borderRadius: 5,
     height: 100,
-    textAlignVertical: 'top',
+    textAlignVertical: "top",
     padding: 10,
   },
 });
diff --git a/components/CreateButton.js b/components/CreateButton.js
index 73ae836b..d0c0155a 100644
--- a/components/CreateButton.js
+++ b/components/CreateButton.js
@@ -1,26 +1,26 @@
 // components/CreateButton.js
-import React from 'react';
-import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet } from "react-native";
 
-const CreateButton = ({ onPress }) => {
+const CreateButton = ({ onPress, label }) => {
   return (
     <TouchableOpacity style={styles.button} onPress={onPress}>
-      <Text style={styles.buttonText}>Create Task</Text>
+      <Text style={styles.buttonText}>{label}</Text>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: 'pink',
+    backgroundColor: "pink",
     padding: 10,
     borderRadius: 5,
-    alignItems: 'center',
+    alignItems: "center",
     marginVertical: 10,
   },
   buttonText: {
-    color: 'white',
-    fontWeight: 'bold',
+    color: "white",
+    fontWeight: "bold",
   },
 });
 
diff --git a/components/DirectionsBox.js b/components/DirectionsBox.js
index 328117a1..7b3aa57a 100644
--- a/components/DirectionsBox.js
+++ b/components/DirectionsBox.js
@@ -1,15 +1,17 @@
 // components/DirectionsBox.js
-import React from 'react';
-import { View, TextInput, StyleSheet } from 'react-native';
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
 
-const DirectionsBox = ({ onDirectionsChange }) => {
+const DirectionsBox = ({ onChangeText, value, placeholder, keyboardType }) => {
   return (
     <View style={styles.container}>
       <TextInput
+        value={value}
         style={styles.directionsInput}
         multiline
-        placeholder="Directions"
-        onChangeText={onDirectionsChange}
+        placeholder="Ingredients"
+        onChangeText={onChangeText}
+        keyboardType={keyboardType}
       />
     </View>
   );
@@ -21,10 +23,10 @@ const styles = StyleSheet.create({
   },
   directionsInput: {
     borderWidth: 1,
-    borderColor: 'grey',
+    borderColor: "grey",
     borderRadius: 5,
     height: 100,
-    textAlignVertical: 'top',
+    textAlignVertical: "top",
     padding: 10,
   },
 });
diff --git a/components/InputField.js b/components/InputField.js
index f543bba9..855026ff 100644
--- a/components/InputField.js
+++ b/components/InputField.js
@@ -1,10 +1,11 @@
 // components/InputField.js
-import React from 'react';
-import { TextInput, StyleSheet } from 'react-native';
+import React from "react";
+import { TextInput, StyleSheet } from "react-native";
 
-const InputField = ({ placeholder, onChangeText }) => {
+const InputField = ({ placeholder, onChangeText, value }) => {
   return (
     <TextInput
+      value={value}
       style={styles.input}
       placeholder={placeholder}
       onChangeText={onChangeText} // Using the onChangeText prop cause certain fields werent ggetting passed through for creating a task
@@ -15,7 +16,7 @@ const InputField = ({ placeholder, onChangeText }) => {
 const styles = StyleSheet.create({
   input: {
     borderWidth: 1,
-    borderColor: 'grey',
+    borderColor: "grey",
     borderRadius: 5,
     padding: 10,
     marginVertical: 5,
diff --git a/components/MealCard.js b/components/MealCard.js
index 028c74a5..3a4108a3 100644
--- a/components/MealCard.js
+++ b/components/MealCard.js
@@ -2,77 +2,59 @@ import React, { useState } from "react";
 import { View, Text, TextInput, Pressable, StyleSheet } from "react-native";
 
 const mealStyles = StyleSheet.create({
-    card: {
-      backgroundColor: "white",
-      borderColor: "black",
-      padding: 16,
-      borderRadius: 8,
-      margin: 8,
-      elevation: 3,
-      shadowColor: "#000",
-      shadowOffset: { width: 1, height: 1 },
-      shadowOpacity: 0.3,
-      shadowRadius: 2,
-    },
-    text: {
-      fontSize: 16,
-      marginBottom: 8,
-    },
-  });
+  card: {
+    backgroundColor: "white",
+    borderColor: "black",
+    padding: 16,
+    borderRadius: 8,
+    margin: 8,
+    elevation: 3,
+    shadowColor: "#000",
+    shadowOffset: { width: 1, height: 1 },
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
+  },
+  text: {
+    fontSize: 16,
+    marginBottom: 8,
+  },
+  button: {
+    padding: 10,
+    marginTop: 10,
+    borderRadius: 5,
+    backgroundColor: "#ededed",
+    alignItems: "center",
+  },
+  buttonText: {
+    fontWeight: "bold",
+  },
+});
 
 const MealCard = ({ meal, index, deleteMeal, editMeal }) => {
   const [cardMeal, setCardMeal] = useState(meal);
 
   const [editMode, setEditMode] = useState(false);
-
-  const [name, setName] = useState(meal.name);
-  const [calories, setCalories] = useState(meal.calories);
-  const [servingSize, setServingSize] = useState(meal.servingSize);
-  const [fatTotal, setFatTotal] = useState(meal.fatTotal);
-  const [fatSaturated, setFatSaturated] = useState(meal.fatSaturated);
-  const [protein, setProtein] = useState(meal.protein);
-  const [sodium, setSodium] = useState(meal.sodium);
-  const [potassium, setPotassium] = useState(meal.potassium);
-  const [cholesterol, setCholesterol] = useState(meal.cholesterol);
-  const [carbohydratesTotal, setCarbohydratesTotal] = useState(
-    meal.carbohydratesTotal
+  const [editableMeal, setEditableMeal] = useState({ ...meal });
+  const [mealName, setMealName] = useState(meal.mealName);
+  const [mealIngredients, setMealIngredients] = useState(meal.mealIngredients);
+  const [mealServing, setMealServing] = useState(meal.mealServing);
+  const [mealInstructions, setMealInstructions] = useState(
+    meal.mealInstructions
   );
-  const [fiber, setFiber] = useState(meal.fiber);
-  const [sugar, setSugar] = useState(meal.sugar);
 
   // Function to handle canceling the edit operation
   const onCancel = () => {
-    setName(meal.name);
-    setCalories(meal.calories);
-    setServingSize(meal.servingSize);
-    setFatTotal(meal.fatTotal);
-    setFatSaturated(meal.fatSaturated);
-    setProtein(meal.protein);
-    setSodium(meal.sodium);
-    setPotassium(meal.potassium);
-    setCholesterol(meal.cholesterol);
-    setCarbohydratesTotal(meal.carbohydratesTotal);
-    setFiber(meal.fiber);
-    setSugar(meal.sugar);
-
+    setEditableMeal({ ...meal });
     setEditMode(false);
   };
 
   // Function to handle saving the edited meal
   const onSave = () => {
     const newMeal = {
-      name,
-      calories,
-      servingSize,
-      fatTotal,
-      fatSaturated,
-      protein,
-      sodium,
-      potassium,
-      cholesterol,
-      carbohydratesTotal,
-      fiber,
-      sugar,
+      mealName,
+      mealIngredients,
+      mealServing,
+      mealInstructions,
     };
 
     setCardMeal(newMeal);
@@ -86,17 +68,24 @@ const MealCard = ({ meal, index, deleteMeal, editMeal }) => {
         // Edit mode UI with TextInputs for meal properties
         <View>
           <TextInput
-            value={name}
-            onChangeText={setName}
+            value={mealName}
+            onChangeText={setMealName}
+            style={mealStyles.text}
+          />
+          <TextInput
+            value={String(mealIngredients)}
+            onChangeText={setMealIngredients}
             style={mealStyles.text}
-            placeholder="Name"
           />
           <TextInput
-            value={String(calories)}
-            onChangeText={(text) => setCalories(text)}
+            value={mealServing}
+            onChangeText={setMealServing}
+            style={mealStyles.text}
+          />
+          <TextInput
+            value={mealInstructions}
+            onChangeText={setMealInstructions}
             style={mealStyles.text}
-            placeholder="Calories"
-            keyboardType="numeric"
           />
           {/* ... other TextInputs for editing meal properties */}
           <View>
@@ -111,14 +100,26 @@ const MealCard = ({ meal, index, deleteMeal, editMeal }) => {
       ) : (
         // Display mode UI with Text for meal properties
         <View>
-          <Text style={mealStyles.text}>Name: {cardMeal.name}</Text>
-          <Text style={mealStyles.text}>Calories: {cardMeal.calories}</Text>
-          {/* ... other Text components for displaying meal properties */}
+          <Text style={mealStyles.text}>Name: {meal.mealName}</Text>
+          <Text style={mealStyles.text}>
+            Ingredients: {meal.mealIngredients}
+          </Text>
+          <Text style={mealStyles.text}>Serving size: {meal.mealServing}</Text>
+          <Text style={mealStyles.text}>
+            Instructions: {meal.mealInstructions}
+          </Text>
+
           <View>
-            <Pressable style={mealStyles.button} onPress={() => setEditMode(true)}>
+            <Pressable
+              style={mealStyles.button}
+              onPress={() => setEditMode(true)}
+            >
               <Text>Edit</Text>
             </Pressable>
-            <Pressable style={mealStyles.button} onPress={() => deleteMeal(index)}>
+            <Pressable
+              style={mealStyles.button}
+              onPress={() => deleteMeal(index)}
+            >
               <Text>Delete</Text>
             </Pressable>
           </View>
diff --git a/components/SavedWorkouts.js b/components/SavedWorkouts.js
index e2bc7540..67fce99a 100644
--- a/components/SavedWorkouts.js
+++ b/components/SavedWorkouts.js
@@ -1,11 +1,11 @@
 // SavedWorkouts.js
-import React, { useEffect } from 'react';
-import { ScrollView } from 'react-native';
-import WorkoutCard from './WorkoutCard';
+import React, { useEffect } from "react";
+import { ScrollView } from "react-native";
+import WorkoutCard from "./WorkoutCard";
 
 const SavedWorkouts = ({ workouts, setSavedWorkouts }) => {
   useEffect(() => {
-    // Code to run when workouts change, if necessary
+    //debugger; // Code to run when savedWorkouts change, if necessary
   }, [workouts]);
   const deleteWorkout = (index) => {
     const newWorkouts = [...workouts];
diff --git a/components/WorkoutCard.js b/components/WorkoutCard.js
index a1b09b5b..14f49951 100644
--- a/components/WorkoutCard.js
+++ b/components/WorkoutCard.js
@@ -22,17 +22,30 @@ const workoutStyles = StyleSheet.create({
     padding: 10,
     marginTop: 10,
     borderRadius: 5,
-    backgroundColor: '#ededed',
-    alignItems: 'center',
+    backgroundColor: "#ededed",
+    alignItems: "center",
   },
   buttonText: {
-    fontWeight: 'bold',
+    fontWeight: "bold",
   },
 });
 
-const WorkoutCard = ({ workout, index, deleteWorkout, editWorkout }) => {
+const WorkoutCard = ({ workout, index, deleteWorkout, EditWorkout }) => {
+  const [cardWorkout, setCardWorkout] = useState(workout);
   const [editMode, setEditMode] = useState(false);
   const [editableWorkout, setEditableWorkout] = useState({ ...workout });
+  const [workoutName, setWorkoutName] = useState(workout.workoutName);
+  const [workoutType, setWorkoutType] = useState(workout.workoutType);
+  const [workoutMuscle, setWorkoutMuscle] = useState(workout.workoutMuscle);
+  const [workoutEquipment, setWorkoutEquipment] = useState(
+    workout.workoutEquipment
+  );
+  const [workoutDifficulty, setWorkoutDifficulty] = useState(
+    workout.workoutDifficulty
+  );
+  const [workoutInstructions, setWorkoutInstructions] = useState(
+    workout.workoutInstructions
+  );
 
   const onCancel = () => {
     setEditableWorkout({ ...workout });
@@ -40,8 +53,18 @@ const WorkoutCard = ({ workout, index, deleteWorkout, editWorkout }) => {
   };
 
   const onSave = () => {
+    const newWorkout = {
+      workoutName,
+      workoutType,
+      workoutMuscle,
+      workoutEquipment,
+      workoutDifficulty,
+      workoutInstructions,
+    };
+    //debugger;
+    setCardWorkout(newWorkout);
+    EditWorkout(newWorkout, index);
     setEditMode(false);
-    editWorkout(editableWorkout, index);
   };
 
   return (
@@ -49,26 +72,70 @@ const WorkoutCard = ({ workout, index, deleteWorkout, editWorkout }) => {
       {editMode ? (
         <View>
           <TextInput
-            value={editableWorkout.name}
-            onChangeText={(text) => setEditableWorkout({ ...editableWorkout, name: text })}
+            value={workoutName}
+            onChangeText={setWorkoutName}
+            style={workoutStyles.text}
+          />
+          <TextInput
+            value={workoutType}
+            onChangeText={setWorkoutType}
+            style={workoutStyles.text}
+          />
+          <TextInput
+            value={workoutMuscle}
+            onChangeText={setWorkoutMuscle}
+            style={workoutStyles.text}
+          />
+          <TextInput
+            value={workoutEquipment}
+            onChangeText={setWorkoutEquipment}
+            style={workoutStyles.text}
+          />
+          <TextInput
+            value={workoutDifficulty}
+            onChangeText={setWorkoutDifficulty}
             style={workoutStyles.text}
           />
-          {/* Repeat TextInput for other fields */}
-          <Pressable style={workoutStyles.button} onPress={onCancel}>
+          <TextInput
+            value={workoutInstructions}
+            onChangeText={setWorkoutInstructions}
+            style={workoutStyles.text}
+          />
+
+          <Pressable style={workoutStyles.button} onPress={() => onCancel()}>
             <Text style={workoutStyles.buttonText}>Cancel</Text>
           </Pressable>
-          <Pressable style={workoutStyles.button} onPress={onSave}>
+          <Pressable style={workoutStyles.button} onPress={() => onSave()}>
             <Text style={workoutStyles.buttonText}>Save</Text>
           </Pressable>
         </View>
       ) : (
         <View>
-          <Text style={workoutStyles.text}>Name: {workout.name}</Text>
-          {/* Repeat Text for other fields */}
-          <Pressable style={workoutStyles.button} onPress={() => setEditMode(true)}>
+          <Text style={workoutStyles.text}>Name: {workout.workoutName}</Text>
+          <Text style={workoutStyles.text}>Type: {workout.workoutType}</Text>
+          <Text style={workoutStyles.text}>
+            Muscle: {workout.workoutMuscle}
+          </Text>
+          <Text style={workoutStyles.text}>
+            Equipment: {workout.workoutEquipment}
+          </Text>
+          <Text style={workoutStyles.text}>
+            Difficulty: {workout.workoutDifficulty}
+          </Text>
+          <Text style={workoutStyles.text}>
+            Instructions: {workout.workoutInstructions}
+          </Text>
+
+          <Pressable
+            style={workoutStyles.button}
+            onPress={() => setEditMode(true)}
+          >
             <Text style={workoutStyles.buttonText}>Edit</Text>
           </Pressable>
-          <Pressable style={workoutStyles.button} onPress={() => deleteWorkout(index)}>
+          <Pressable
+            style={workoutStyles.button}
+            onPress={() => deleteWorkout(index)}
+          >
             <Text style={workoutStyles.buttonText}>Delete</Text>
           </Pressable>
         </View>
@@ -76,5 +143,35 @@ const WorkoutCard = ({ workout, index, deleteWorkout, editWorkout }) => {
     </View>
   );
 };
+const SavedWorkouts = ({ workouts, setSavedWorkouts }) => {
+  useEffect(() => {}, [workouts]);
+  const deleteWorkout = (index) => {
+    const newWorkouts = [...workouts];
+    newWorkouts.splice(index, 1);
+    setSavedWorkouts(newWorkouts);
+  };
+  const EditWorkout = (cardWorkout, index) => {
+    const newWorkouts = [...workouts];
+    newWorkouts[index] = cardWorkout;
+    setSavedWorkouts(newWorkouts);
+  };
+
+  return (
+    <ScrollView style={{ flex: 1 }}>
+      {workouts != null &&
+        workouts.length > 0 &&
+        workouts.map((workout, index) => {
+          return (
+            <WorkoutCard
+              index={index}
+              workout={workout}
+              EditWorkout={EditWorkout}
+              deleteWorkout={deleteWorkout}
+            />
+          );
+        })}
+    </ScrollView>
+  );
+};
 
 export default WorkoutCard;
diff --git a/navigators/TabNavigation.js b/navigators/TabNavigation.js
index 1a576e05..d98693bd 100644
--- a/navigators/TabNavigation.js
+++ b/navigators/TabNavigation.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { useActionSheet } from "@expo/react-native-action-sheet";
@@ -17,9 +17,13 @@ const Tab = createBottomTabNavigator();
 
 const TabNavigator = ({ route }) => {
   const { userID } = route.params;
+  const [savedWorkouts, setSavedWorkouts] = useState([]);
+  const [savedMeals, setSavedMeals] = useState([]);
   const { showActionSheetWithOptions } = useActionSheet();
   const navigation = useNavigation();
-
+  useEffect(() => {
+    //debugger; // Code to run when savedWorkouts change, if neces
+  }, [savedWorkouts]);
   const openActionSheet = () => {
     const options = ["Create Task", "Create Workout", "Create Meal", "Cancel"];
     const cancelButtonIndex = 3;
@@ -112,8 +116,34 @@ const TabNavigator = ({ route }) => {
           ),
         }}
       />
-      <Tab.Screen name="Your Workouts" component={WorkoutScreen} />
-      <Tab.Screen name="Your Cookbook" component={CookbookScreen} />
+      <Tab.Screen
+        name="Your Workouts"
+        children={() => (
+          <WorkoutScreen
+            savedWorkouts={savedWorkouts}
+            setSavedWorkouts={setSavedWorkouts}
+          />
+        )}
+        initialParams={{
+          userID: userID,
+
+          setSavedWorkouts: setSavedWorkouts,
+        }}
+      />
+      <Tab.Screen
+        name="Your Cookbook"
+        children={() => (
+          <CookbookScreen
+            savedMeals={savedMeals}
+            setSavedMeals={setSavedMeals}
+          />
+        )}
+        initialParams={{
+          userID: userID,
+
+          setSavedMeals: setSavedMeals,
+        }}
+      />
       {/* Hidden screens for action sheet options */}
       <Tab.Screen
         name="Task"
@@ -125,13 +155,21 @@ const TabNavigator = ({ route }) => {
         name="Workout"
         component={AddWorkout}
         options={{ tabBarButton: () => null }}
-        initialParams={{ userID: userID }} // Pass the user id to the workout screen
+        initialParams={{
+          userID: userID,
+          savedWorkouts: savedWorkouts,
+          setSavedWorkouts: setSavedWorkouts,
+        }} // Pass the user id to the workout screen
       />
       <Tab.Screen
         name="Meal"
         component={AddMeal}
         options={{ tabBarButton: () => null }}
-        initialParams={{ userID: userID }} // Pass the user id to the meal screen
+        initialParams={{
+          userID: userID,
+          savedMeals: savedMeals,
+          setSavedMeals: setSavedMeals,
+        }} // Pass the user id to the meal screen
       />
     </Tab.Navigator>
   );
diff --git a/screens/AddScreen.js b/screens/AddScreen.js
index 01e7dc6c..24e9a968 100644
--- a/screens/AddScreen.js
+++ b/screens/AddScreen.js
@@ -1,14 +1,13 @@
 // AddScreen.js
-import React from 'react';
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
-import AddTask from '../components/AddTask';
-import AddWorkout from '../components/AddWorkout';
-import AddMeal from '../components/AddMeal';
+import React from "react";
+import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
+import AddTask from "../components/AddTask";
+import AddWorkout from "../components/AddWorkout";
+import AddMeal from "../components/AddMeal";
 
 const Tab = createMaterialTopTabNavigator();
 
 const AddScreen = () => {
-  
   return (
     <Tab.Navigator>
       <Tab.Screen name="Create Task" component={AddTask} />
diff --git a/screens/CookbookScreen.js b/screens/CookbookScreen.js
index 85449e23..450a29bd 100644
--- a/screens/CookbookScreen.js
+++ b/screens/CookbookScreen.js
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-import BrowseMeals from '../components/BrowseMeals';
-import SavedMeals from '../components/SavedMeals';
+import BrowseMeals from "../components/BrowseMeals";
+import SavedMeals from "../components/SavedMeals";
 
 const Tab = createMaterialTopTabNavigator();
 
@@ -21,10 +21,11 @@ const CookbookScreen = ({ savedMeals, setSavedMeals }) => {
       {/* Tab Screen for displaying saved meals */}
       <Tab.Screen
         name="Saved Meals"
+        children={() => (
+          <SavedMeals meals={savedMeals} setSavedMeals={setSavedMeals} />
+        )}
         options={{ tabBarLabel: "Saved" }}
-      >
-        {() => <SavedMeals meals={savedMeals} setSavedMeals={setSavedMeals} />}
-      </Tab.Screen>
+      />
     </Tab.Navigator>
   );
 };
diff --git a/screens/WorkoutScreen.js b/screens/WorkoutScreen.js
index fd51732c..f4712322 100644
--- a/screens/WorkoutScreen.js
+++ b/screens/WorkoutScreen.js
@@ -1,14 +1,14 @@
 // WorkoutScreen.js
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
 import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
-import BrowseWorkouts from '../components/BrowseWorkouts';
-import SavedWorkouts from '../components/SavedWorkouts';
+import BrowseWorkouts from "../components/BrowseWorkouts";
+import SavedWorkouts from "../components/SavedWorkouts";
 
 const Tab = createMaterialTopTabNavigator();
 
 const WorkoutScreen = ({ savedWorkouts, setSavedWorkouts }) => {
   useEffect(() => {
-    // Code to run when savedWorkouts change, if necessary
+    // debugger; // Code to run when savedWorkouts change, if necessary
   }, [savedWorkouts]);
 
   return (
@@ -21,7 +21,10 @@ const WorkoutScreen = ({ savedWorkouts, setSavedWorkouts }) => {
       <Tab.Screen
         name="Saved Workouts"
         children={() => (
-          <SavedWorkouts workouts={savedWorkouts} setSavedWorkouts={setSavedWorkouts} />
+          <SavedWorkouts
+            workouts={savedWorkouts}
+            setSavedWorkouts={setSavedWorkouts}
+          />
         )}
         options={{ tabBarLabel: "Saved" }}
       />