diff --git a/App.js b/App.js
index 9c82791..42659c7 100644
--- a/App.js
+++ b/App.js
@@ -9,6 +9,8 @@ import Login from "./Screens/Login";
 import Signup from "./Screens/Signup";
 import HomeTabScreen from "./components/HomeStackScreen";
 import Loading from "./Screens/Loading";
+import Overview from './Screens/MacroNutrients'
+
 //fix for "can't find variable: atob"
 import {decode, encode} from 'base-64'
 if (!global.btoa) { global.btoa = encode }
@@ -30,6 +32,7 @@ export default function App() {
             <Stack.Screen name = "Signup" component = {Signup} options = {options} />
             <Stack.Screen name = "Auth" component = {Auth} options = {options} />
             <Stack.Screen name = "Home" component = {HomeTabScreen} options = {options} />
+            <Stack.Screen name="NutritionalOverview" component={Overview} options={{ title: "" }}/>
           </Stack.Navigator>
         </NavigationContainer>
       </DiaryContext.Provider>
diff --git a/Classes/Diary.js b/Classes/Diary.js
index 29de747..11524e4 100644
--- a/Classes/Diary.js
+++ b/Classes/Diary.js
@@ -4,11 +4,11 @@ export default class Diary {
     diary;
     uuid;
     selectedDate;
+    calorieGoal;
     constructor(uuid){
         this.selectedDate = new Date()
         this.diary = [];
         this.uuid = uuid;
-        console.log("new diary")
     }
 
     getEntry(date){
diff --git a/Classes/DiaryEntry.js b/Classes/DiaryEntry.js
index e711af8..089e9a7 100644
--- a/Classes/DiaryEntry.js
+++ b/Classes/DiaryEntry.js
@@ -1,3 +1,4 @@
+import Food from './Food'
 export default class DiaryEntry {
     date;
     breakfast;
@@ -11,7 +12,6 @@ export default class DiaryEntry {
         this.lunch = [];
         this.dinner = [];
         this.snacks = [];
-        console.log("new entry" +" "  + date)
     }
 
     getBreakfast(){
@@ -50,4 +50,68 @@ export default class DiaryEntry {
     getDate(){
         return this.date;
     }
+
+    getCalorieTotal(){
+        let total = 0;
+        for(const element of this.breakfast){
+            total += element.getCalories();
+        }
+
+        for(const element of this.lunch){
+            total += element.getCalories();
+        }
+
+        for(const element of this.dinner){
+            total += element.getCalories();
+        }
+
+        for(const element of this.snacks){
+            total += element.getCalories();
+        }
+        return total;
+    }
+
+    getNutrientTotal(){
+        let totalCarb = 0;
+        let totalProtein = 0;
+        let totalFat = 0;
+        let totalSugar = 0;
+        let totalSodium = 0;
+        let totalFibre = 0;
+        
+        for(const element of this.breakfast){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+        for(const element of this.lunch){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+        for(const element of this.dinner){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+        for(const element of this.snacks){
+            totalCarb += element.getCarbs();
+            totalProtein += element.getProtein();
+            totalFat += element.getFat();
+            totalSugar += element.getSugar();
+            totalSodium += element.getSodium();
+            totalFibre += element.getFibre();
+        }
+
+        return new Food("","",this.getCalorieTotal(),totalCarb,totalProtein,totalFat,totalSugar,totalSodium,totalFibre,1,100)
+    }
 }
\ No newline at end of file
diff --git a/Classes/Food.js b/Classes/Food.js
index bf027a3..2b20533 100644
--- a/Classes/Food.js
+++ b/Classes/Food.js
@@ -28,7 +28,6 @@ export default class Food {
         this.servings = servings;
         this.servingSize = servingSize;
         this.servingSizeUnit = servingSizeUnit;
-        console.log(this);
     }
     
     getName(){
diff --git a/Screens/DiaryScreen.js b/Screens/DiaryScreen.js
index 1d8b311..c778f4a 100644
--- a/Screens/DiaryScreen.js
+++ b/Screens/DiaryScreen.js
@@ -34,6 +34,7 @@ const DiaryScreen = ({navigation}) => {
         
     }
     
+
     return(
      <ScrollView style={styles.default}>
         <View style={styles.dateContainter}>
@@ -45,6 +46,13 @@ const DiaryScreen = ({navigation}) => {
                 <Text style={styles.dateText}>{'   >'}</Text>
             </TouchableOpacity>
         </View>
+        <View style={{paddingBottom:10, flex:1, flexDirection:'row', justifyContent:'center'}}>
+            <Text style={styles.dateText}>{diary.calorieGoal - (entry.getCalorieTotal())} Calories Remaining</Text>
+            <TouchableOpacity onPress={() => navigation.navigate("NutritionalOverview", {food: entry.getNutrientTotal()}) }>
+                <Text style={{fontSize:25, color:COLORS.cream, paddingLeft:5}}>...</Text>
+            </TouchableOpacity>
+        </View>
+        
         <Text style={styles.mealLabel}>Breakfast</Text>
         <View style={{height:1, backgroundColor:'black'}}></View>
         <Pressable style={styles.button} title='breakfast' onPress={() => navigation.navigate("FoodSearch", {meal: entry.getBreakfast()}) }>
@@ -146,7 +154,8 @@ const styles = StyleSheet.create({
         flexDirection:'row'
     },
     dateText:{
-        fontSize:20
+        fontSize:20,
+        alignSelf:'center'
     },
     meal:{
         backgroundColor: "#fe7b5f", 
diff --git a/Screens/EntryDetails.js b/Screens/EntryDetails.js
index dedc4e1..5e1fc1a 100644
--- a/Screens/EntryDetails.js
+++ b/Screens/EntryDetails.js
@@ -2,6 +2,8 @@ import React,{useState} from 'react';
 import { View, Text, StyleSheet,Button, TouchableOpacity, ScrollView} from 'react-native';
 import { TextInput } from 'react-native-paper';
 import { StackActions, useNavigation} from '@react-navigation/native';
+import { COLORS } from '../constants/colors.js'
+
 
 
 
@@ -36,10 +38,10 @@ const FoodDetails = ({route}) => {
     }
   
     return(
-     <ScrollView style={{ backgroundColor: "#fe7b5f"}}>
-        <Text style={{ backgroundColor: "#fe7b5f", textAlign:"center", fontWeight:'bold', fontSize:20}}>{food.getName()}</Text>
-        <View style={{height:1, backgroundColor:'black'}}></View>
-        <View style={{backgroundColor: "#fe7b5f",height:'100%',width:'100%'}}>
+      <ScrollView style={{ backgroundColor: COLORS.green}}>
+      <Text style={{ backgroundColor: COLORS.green, textAlign:"center", fontWeight:'bold', fontSize:20}}>{food.description}</Text>
+      <View style={{height:1, backgroundColor:'black'}}></View>
+      <View style={{backgroundColor: COLORS.green,height:'100%',width:'100%'}}>
         <View style={styles.flexrow}>
             <Text style={styles.textLeft}>Number of Servings</Text>
             <TextInput  style={styles.textInputRight}  maxLength={2} placeholder={String(servings)} keyboardType='numeric' onChangeText={text => UpdateServings(text)}></TextInput>
@@ -96,43 +98,44 @@ const FoodDetails = ({route}) => {
 }
 
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      marginTop: 8,
-      backgroundColor: "#fe7b5f"
-     
-    },
- 
-  textRight:{
-     marginRight: '5%',
-     fontSize: 20
+  container: {
+    flex: 1,
+    marginTop: 8,
+    backgroundColor: COLORS.green
+   
   },
-  textInputRight:{
-    marginRight: '5%',
- },
 
-  textLeft:{
-      flex:1,
-      paddingLeft: "5%",
-      fontWeight:"bold",
-      fontSize: 20
-  },
+textRight:{
+   marginRight: '5%',
+   fontSize: 20
+},
+textInputRight: {
+  backgroundColor: COLORS.cream,
+  marginRight: '5%',
+},
 
-  flexrow:{
-    
-      flexDirection: 'row',
-      paddingTop:10,
-      paddingBottom: 10,
-      justifyContent: 'space-between'
-  },
-  tab:{
-    backgroundColor: "#58C5CC",
-    borderRadius: 100,
-    marginTop:30,
-    height: 30,
-    width: '40%',
-    
-    
+textLeft:{
+    flex:1,
+    paddingLeft: "5%",
+    fontWeight:"bold",
+    fontSize: 20
+},
+
+flexrow:{
+  
+    flexDirection: 'row',
+    paddingTop:10,
+    paddingBottom: 10
+},
+tab:{
+  backgroundColor: COLORS.blue,
+  borderRadius: 100,
+  marginTop:30,
+  height: 30,
+  width: '50%',
+  alignSelf:'center'
+  
+  
 }
     
   });
diff --git a/Screens/Home.js b/Screens/Home.js
index 1c489f0..984c844 100644
--- a/Screens/Home.js
+++ b/Screens/Home.js
@@ -17,6 +17,9 @@ export default function Home({ navigation }) {
 
   const [name, setName] = React.useState("");
   const [type, setType] = React.useState("Email");
+  const [calorieGoal, setCalorieGoal] = React.useState("2000");
+  const [caloriesConsumed, setCaloriesConsumed] = React.useState("0");
+  const [goal, setGoal] = React.useState("");
   const {diary, setDiary} = useContext(DiaryContext)
   useFocusEffect(React.useCallback(() => {
     getDb();
@@ -28,11 +31,13 @@ export default function Home({ navigation }) {
     let user = await getDoc(doc(db, "users", uid));
     console.log("User: " + user)
     let newDiary = await getDiary()
-    console.log(newDiary);
-    setDiary(newDiary);
+    
     setType(user.data().signinType || "Email");
     if (user.data().signinType == "Email") {
       setName(`${user.data()?.firstName} ${user.data()?.lastName}`);
+      setCalorieGoal(`${user.data()?.calorieGoal}`);
+      setGoal(`${user.data()?.goal}`);
+      newDiary.calorieGoal = `${user.data()?.calorieGoal}`
       //TODO: remove log
       console.log("set user name in if")
     } else {
@@ -40,6 +45,9 @@ export default function Home({ navigation }) {
       //TODO: remove log
       console.log("set user name in else")
     }
+    setDiary(newDiary);
+       //TODO: remove log
+    setCaloriesConsumed(newDiary.getEntry(new Date().toDateString()).getCalorieTotal())
   };
 
   const log = async () => {
@@ -63,6 +71,7 @@ export default function Home({ navigation }) {
     <View style={styles.container}>
         <Text style={styles.Home}>Home</Text>
         <Text style={styles.welcomingText}>Welcome {name}!</Text>
+        <Text style={styles.Home}>{calorieGoal - caloriesConsumed} calories remaining</Text>
         <View style={styles.space} /> 
         <Pressable style={styles.button} onPress={log}>
           <Text style={styles.buttonText}>Logout</Text>
diff --git a/Screens/MacroNutrients.js b/Screens/MacroNutrients.js
new file mode 100644
index 0000000..b05f6a1
--- /dev/null
+++ b/Screens/MacroNutrients.js
@@ -0,0 +1,96 @@
+
+import { View, Text, StyleSheet,ScrollView} from 'react-native';
+import { COLORS } from '../constants/colors.js'
+
+
+
+const MacroNutrients = ({route}) => {
+    const {food} = route.params
+   
+
+
+
+ 
+    return(
+     <ScrollView style={{ backgroundColor: COLORS.green}}>
+        <Text style={{ backgroundColor: COLORS.green, textAlign:"center", fontWeight:'bold', fontSize:20}}>Nutrient Overview</Text>
+        <View style={{height:1, backgroundColor:'black'}}></View>
+        <View style={{backgroundColor: COLORS.green,height:'100%',width:'100%'}}>
+        <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Calories</Text>
+            <Text style={styles.textRight}>{food.getCalories()}</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Protein</Text>
+            <Text style={styles.textRight}>{food.getProtein()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Fat</Text>
+            <Text style={styles.textRight}>{food.getFat()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Carbs</Text>
+            <Text style={styles.textRight}>{food.getCarbs()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Sugar</Text>
+            <Text style={styles.textRight}>{food.getSugar()}G</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Sodium</Text>
+            <Text style={styles.textRight}>{food.getSodium()}MG</Text>
+          </View>
+          <View style={styles.flexrow}>
+            <Text style={styles.textLeft}>Total Fiber</Text>
+            <Text style={styles.textRight}>{food.getFibre()}G</Text>
+          </View>
+          </View>
+     </ScrollView>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      marginTop: 8,
+      backgroundColor: COLORS.green
+     
+    },
+ 
+  textRight:{
+     marginRight: '5%',
+     fontSize: 20
+  },
+  textInputRight: {
+    backgroundColor: COLORS.cream,
+    marginRight: '5%',
+ },
+
+  textLeft:{
+      flex:1,
+      paddingLeft: "5%",
+      fontWeight:"bold",
+      fontSize: 20
+  },
+
+  flexrow:{
+    
+      flexDirection: 'row',
+      paddingTop:10,
+      paddingBottom: 10
+  },
+  tab:{
+    backgroundColor: COLORS.blue,
+    borderRadius: 100,
+    marginTop:30,
+    height: 30,
+    width: '50%',
+    alignSelf:'center'
+    
+    
+}
+    
+  });
+
+export default MacroNutrients
+
diff --git a/StackNavigator.js b/StackNavigator.js
index 8d1e292..b317dca 100644
--- a/StackNavigator.js
+++ b/StackNavigator.js
@@ -13,6 +13,7 @@ import DietaryRestrictionsSettings from './Screens/Settings/DietaryRestrictionsS
 import GoalsSettings from './Screens/Settings/GoalsSettings';
 import AccountSettings from './Screens/Settings/AccountSettings';
 import EntryDetails from './Screens/EntryDetails'
+import Overview from './Screens/MacroNutrients'
 
 
 const Stack = createNativeStackNavigator();
@@ -23,6 +24,7 @@ const StackNavigator = () => {
             <Stack.Screen name="Loading" component={Loading} options={options} />
             <Stack.Screen name="Home" component={HomeScreen} options={options}/>
             <Stack.Screen name="Diary" component={DiaryScreen}/>
+            <Stack.Screen name="NutritionalOverview" component={Overview}/>
             <Stack.Screen name="FoodSearch" component={FoodSearchScreen} options={{ title: "Food Search" }}/>
             <Stack.Screen name="FoodDetails" component={FoodDetails} options={{ title: "Nutritional Information" }} />
             <Stack.Screen name="EntryDetails" component={EntryDetails} options={{ title: "Nutritional Information" }} />
@@ -32,6 +34,8 @@ const StackNavigator = () => {
             <Stack.Screen name="DietaryRestrictionsSettings" component={DietaryRestrictionsSettings} options={{ title: "Settings" }}/>
             <Stack.Screen name="GoalsSettings" component={GoalsSettings} options={{ title: "Settings" }}/>
             <Stack.Screen name="AccountSettings" component={AccountSettings} options={{ title: "Settings" }}/>
+
+
         </Stack.Navigator>
     )
 }
diff --git a/util.js b/util.js
index a1de9b6..202260b 100644
--- a/util.js
+++ b/util.js
@@ -23,7 +23,7 @@ export function getNutrientValue(foods , nutrientName) {
   }
 
   export function jsonToFoodObject(jFood,servings){
-    console.log(servings + "servings");
+
     const cal = getNutrientValue(jFood, 'Energy');
     const carbs = getNutrientValue(jFood, 'Carbohydrate, by difference');
     const protein = getNutrientValue(jFood, 'Protein');
@@ -102,7 +102,6 @@ export function getNutrientValue(foods , nutrientName) {
     newEntry.lunch = lunch
     newEntry.dinner = dinner
     newEntry.snacks = snacks
-    console.log('snacks' + snacks)
     return newEntry
   }