diff --git a/LeftOvers/assets/images/cook.png b/LeftOvers/assets/images/cook.png
new file mode 100644
index 0000000..92b4470
Binary files /dev/null and b/LeftOvers/assets/images/cook.png differ
diff --git a/LeftOvers/assets/images/cross.png b/LeftOvers/assets/images/cross.png
new file mode 100644
index 0000000..19e410a
Binary files /dev/null and b/LeftOvers/assets/images/cross.png differ
diff --git a/LeftOvers/assets/images/delete.png b/LeftOvers/assets/images/delete.png
new file mode 100644
index 0000000..3799147
Binary files /dev/null and b/LeftOvers/assets/images/delete.png differ
diff --git a/LeftOvers/assets/images/logo.png b/LeftOvers/assets/images/logo.png
new file mode 100644
index 0000000..1a29b13
Binary files /dev/null and b/LeftOvers/assets/images/logo.png differ
diff --git a/LeftOvers/assets/images/search.png b/LeftOvers/assets/images/search.png
new file mode 100644
index 0000000..5cdb198
Binary files /dev/null and b/LeftOvers/assets/images/search.png differ
diff --git a/LeftOvers/assets/images/validate.png b/LeftOvers/assets/images/validate.png
new file mode 100644
index 0000000..c174ff4
Binary files /dev/null and b/LeftOvers/assets/images/validate.png differ
diff --git a/LeftOvers/assets/images/warehouse.png b/LeftOvers/assets/images/warehouse.png
new file mode 100644
index 0000000..963141d
Binary files /dev/null and b/LeftOvers/assets/images/warehouse.png differ
diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index 1e3b028..1fe03c7 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -44,7 +44,6 @@ const styles = StyleSheet.create({
     color: 'black',
   },
   view: {
-
     alignItems: 'flex-start',
     justifyContent: 'center',
     marginRight: 5 // Centre le contenu horizontalement
diff --git a/LeftOvers/components/DietsTab.tsx b/LeftOvers/components/ListSelect.tsx
similarity index 86%
rename from LeftOvers/components/DietsTab.tsx
rename to LeftOvers/components/ListSelect.tsx
index 4caaac7..5b2a354 100644
--- a/LeftOvers/components/DietsTab.tsx
+++ b/LeftOvers/components/ListSelect.tsx
@@ -4,21 +4,13 @@ import ValidateButton from './ValidateButton';
 import HeaderFlatList from './HeaderFlatList';
 import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
 
-type DietsProps = {
+type ListProps = {
     title: string
     content : list<string>
 }
 
-export default function DietsTab(props: DietsProps) {
+export default function ListSelect(props: ListProps) {
   const [selected, setSelected] = React.useState([]);
-  const data = [
-        {key:'1', value:'Dairy free'},
-        {key:'2', value:'Gluten free'},
-        {key:'3', value:'Porkless'},
-        {key:'4', value:'Vegan'},
-        {key:'5', value:'Vegetatian'},
-        {key:'6', value:'Pescatarian'},
-  ]
   return (
     <MultipleSelectList
         setSelected={(val) => setSelected(val)}
@@ -31,6 +23,8 @@ export default function DietsTab(props: DietsProps) {
         dropdownStyles={styles.itemList}
         dropdownItemStyles={styles.itemCell}
         dropdownTextStyles={styles.itemText}
+        badgeStyles={styles.badges}
+        badgeTextStyles={styles.badgesText}
         placeholder={props.title}
         label={props.title}/>
   );
@@ -94,4 +88,12 @@ const styles = StyleSheet.create({
       paddingLeft: 10,
       color: "#3F3C42",
   },
+
+  badges: {
+      backgroundColor: "#59BDCD"
+  },
+  badgesText: {
+      fontSize: 15,
+      color: "#F2F0E4",
+  },
 });
\ No newline at end of file
diff --git a/LeftOvers/components/ListTab.tsx b/LeftOvers/components/ListTab.tsx
deleted file mode 100644
index 4d10c5e..0000000
--- a/LeftOvers/components/ListTab.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
-import ValidateButton from './ValidateButton';
-import HeaderFlatList from './HeaderFlatList';
-
-type ListProps = {
-    title: string
-    content : list<string>
-}
-
-type ItemProps = {value: string}
-
-const Item = ({value}: ItemProps) => (
-    <View style={styles.itemList}>
-        <Text style={styles.itemText}>{value}</Text>
-    </View>
-)
-
-export default function ListTab(props: ListProps) {
-  return (
-    <View style={styles.background}>
-        <View>
-            <FlatList data={props.content} renderItem={({item}) => <Item value={item.value}/>} ListHeaderComponent={<HeaderFlatList title={props.title}/>}/>
-        </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  background: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 15,
-    backgroundColor: '#E3DEC9',
-    marginBottom: 20,
-  },
-  titleBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "stretch",
-    backgroundColor: "#F2F0E4",
-    borderTopRightRadius: 15,
-    borderTopLeftRadius: 15,
-    borderWidth: 2,
-    borderColor: "#ACA279",
-    width: 250,
-  },
-  arrow: {
-    height: 20,
-    width: 20,
-    resizeMode: 'contain',
-    tintColor: "#3F3C42",
-    flex: 0.5,
-  },
-  title: {
-    fontSize: 15,
-    color: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'left',
-    textAlign: "left",
-    flex: 0.5,
-    padding: 5,
-  },
-
-  itemList: {
-      flexDirection: "row",
-      alignItems: "flex-start",
-      justifyContent: "stretch",
-      width: 330,
-  },
-  itemText: {
-      fontSize: 13,
-      textAlign: "left",
-      flex: 1,
-      padding: 5,
-      paddingLeft: 10,
-      color: "#3F3C42",
-  },
-});
\ No newline at end of file
diff --git a/LeftOvers/components/AllergiesTab.tsx b/LeftOvers/components/ListWithoutSelect.tsx
similarity index 86%
rename from LeftOvers/components/AllergiesTab.tsx
rename to LeftOvers/components/ListWithoutSelect.tsx
index 1e981df..d8c851c 100644
--- a/LeftOvers/components/AllergiesTab.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@@ -4,21 +4,13 @@ import ValidateButton from './ValidateButton';
 import HeaderFlatList from './HeaderFlatList';
 import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
 
-type AllergiesProps = {
+type ListProps = {
     title: string
     content : list<string>
 }
 
-export default function AllergiesTab(props: AllergiesProps) {
+export default function ListWithoutSelect(props: ListProps) {
   const [selected, setSelected] = React.useState([]);
-  const data = [
-        {key:'1', value:'Dairy free'},
-        {key:'2', value:'Gluten free'},
-        {key:'3', value:'Porkless'},
-        {key:'4', value:'Vegan'},
-        {key:'5', value:'Vegetatian'},
-        {key:'6', value:'Pescatarian'},
-  ]
   return (
     <MultipleSelectList
         data={props.content}
@@ -31,6 +23,7 @@ export default function AllergiesTab(props: AllergiesProps) {
         dropdownItemStyles={styles.itemCell}
         dropdownTextStyles={styles.itemText}
         checkBoxStyles={styles.box}
+        notFoundText="None"
         placeholder={props.title}
         label={props.title}/>
   );
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
new file mode 100644
index 0000000..9f8d002
--- /dev/null
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -0,0 +1,115 @@
+import {React, useState} from 'react';
+import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
+import ValidateButton from './ValidateButton';
+import ListWithoutSelect from './ListWithoutSelect';
+
+type ProfileProps = {
+  name: string
+  avatar: string
+  diets: list<string>
+  allergies: list<string>
+}
+
+export default function ProfileDelete(props: ProfileProps) {
+  const [display, setDisplay] = useState("flex")
+  const changeListVisibility = () => {
+    if (display == "none"){
+        setDisplay("flex")
+    }
+    else{
+        setDisplay("none")
+    }
+  };
+
+  return (
+    <View style={styles.background}>
+        <View style={styles.pseudoBar}>
+            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Text style={styles.text}>{props.name}</Text>
+        </View>
+        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+            <View style={styles.filterBar}>
+                <Text style={styles.filters}>Filters</Text>
+                <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+            </View>
+        </Pressable>
+        <View style={{display: display}}>
+            <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
+            <View style={{marginTop: 10}}/>
+            <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
+            <View style={{marginTop: 10}}/>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    //maxWidth: 370,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#F2F0E4',
+    padding: 10,
+    marginHorizontal: 10,
+  },
+  pseudoBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 0.7,
+    width: 330,
+    marginBottom: 10,
+  },
+  avatar: {
+    padding: 20,
+    resizeMode: 'contain',
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    borderRadius: 45,
+  },
+  text: {
+    fontSize: 20,
+    color: '#ACA279',
+    alignItems: 'center',
+    justifyContent: 'left',
+    flex: 0.8,
+    marginLeft: 20,
+    padding: 5,
+  },
+
+
+
+  filterBar: {
+      flexDirection: "row",
+      width: 300,
+      paddingTop: 10,
+      paddingBottom: 5,
+      alignItems: "flex-end",
+      justifyContent: "center",
+      flex: 0.2,
+  },
+  filters: {
+      flex: 0.5,
+      fontSize: 20,
+      color: '#ACA279',
+      flex: 1,
+      padding: 5,
+      paddingLeft: 0,
+      paddingBottom: 0,
+  },
+  nbSelected: {
+      fontSize: 11,
+      flex: 1,
+      color: "#3F3C42",
+      textAlign: "right",
+  },
+  arrow: {
+      height: 20,
+      width: 20,
+      resizeMode: 'contain',
+      tintColor: "#3F3C42",
+      flex: 0.1,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
new file mode 100644
index 0000000..deb63f7
--- /dev/null
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -0,0 +1,136 @@
+import {React, useState} from 'react';
+import {StyleSheet, Text, TextInput, View, Image, Pressable} from 'react-native';
+import ValidateButton from './ValidateButton';
+import ListWithoutSelect from './ListWithoutSelect';
+
+type ProfileProps = {
+  name: string
+  avatar: string
+  diets: list<string>
+  allergies: list<string>
+  onDeleteProfile: () => void
+}
+
+export default function ProfileDetails(props: ProfileProps) {
+  const [display, setDisplay] = useState("none")
+  const changeListVisibility = () => {
+    if (display == "none"){
+        setDisplay("flex")
+    }
+    else{
+        setDisplay("none")
+    }
+  };
+
+  return (
+    <View style={styles.background}>
+        <View style={styles.pseudoBar}>
+            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Text style={styles.text}>{props.name}</Text>
+            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+            <Pressable onPress={props.onDeleteProfile}>
+                <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
+            </Pressable>
+        </View>
+        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+            <View style={styles.filterBar}>
+                <Text style={styles.filters}>Filters</Text>
+                <Text style={styles.nbSelected}>3 selected</Text>
+                <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+            </View>
+        </Pressable>
+        <View style={{display: display}}>
+            <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
+            <View style={{marginTop: 10}}/>
+            <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
+            <View style={{marginTop: 10}}/>
+        </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    //maxWidth: 370,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#F2F0E4',
+    padding: 10,
+    marginHorizontal: 10,
+  },
+  pseudoBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 0.7,
+    width: 330,
+    marginBottom: 10,
+  },
+  avatar: {
+    padding: 20,
+    resizeMode: 'contain',
+    borderWidth: 2,
+    borderColor: "#ACA279",
+    borderRadius: 45,
+  },
+  text: {
+    fontSize: 20,
+    color: '#ACA279',
+    alignItems: 'center',
+    justifyContent: 'left',
+    flex: 0.8,
+    marginLeft: 20,
+    padding: 5,
+  },
+  modify: {
+      height: 20,
+      width: 20,
+      tintColor: "#ACA279",
+      resizeMode: 'contain',
+      flex: 0.05,
+      marginLeft: 15,
+  },
+  delete: {
+        height: 20,
+        width: 20,
+        tintColor: "#ACA279",
+        resizeMode: 'contain',
+        flex: 0.05,
+  },
+
+
+
+  filterBar: {
+      flexDirection: "row",
+      width: 300,
+      paddingTop: 10,
+      paddingBottom: 5,
+      alignItems: "flex-end",
+      justifyContent: "center",
+      flex: 0.2,
+  },
+  filters: {
+      flex: 0.5,
+      fontSize: 20,
+      color: '#ACA279',
+      flex: 1,
+      padding: 5,
+      paddingLeft: 0,
+      paddingBottom: 0,
+  },
+  nbSelected: {
+      fontSize: 11,
+      flex: 1,
+      color: "#3F3C42",
+      textAlign: "right",
+  },
+  arrow: {
+      height: 20,
+      width: 20,
+      resizeMode: 'contain',
+      tintColor: "#3F3C42",
+      flex: 0.1,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx
new file mode 100644
index 0000000..658820e
--- /dev/null
+++ b/LeftOvers/components/ProfileElement.tsx
@@ -0,0 +1,109 @@
+import {React, useState} from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+
+type Profile = {
+  name: string
+  avatar: string
+  isActive: string
+  disableSelection: boolean
+}
+
+export default function ProfileElement(props : Profile) {
+  const [waiting, setWaiting] = useState("none")
+  const [separator, setSeparator] = useState("none")
+  const changeStatus = () => {
+      if (props.disableSelection){
+          setWaiting("none")
+      }
+      else if (waiting == "flex"){
+          setWaiting("none")
+      }
+      else{
+          setWaiting("flex")
+      }
+      if (props.isActive == "flex" && waiting == "none"){
+          setSeparator("flex")
+      }
+      else{
+          setSeparator("none")
+      }
+      console.log(waiting, separator, props.name)
+  };
+  return (
+      <Pressable onPress={changeStatus} style={styles.button}>
+          <View style={{flexDirection: "column"}}>
+              <View style={styles.pseudoBar}>
+                  <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+                  <Text style={styles.text}>{props.name}</Text>
+              </View>
+              <View style={styles.pseudoBar}>
+                  <View style={[styles.active, {display: props.isActive}]}>
+                      <Text style={styles.textActive}>Activated</Text>
+                  </View>
+                  <View style={{flex: 0.3, display: separator}}/>
+                  <View style={[styles.waiting, {display: waiting}]}>
+                      <Text style={styles.textWaiting}>Waiting...</Text>
+                  </View>
+              </View>
+          </View>
+      </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    height: 80,
+    //width: "75%",
+    marginVertical: 15,
+  },
+  pseudoBar: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      //width: "120%",
+      width: 225,
+      marginHorizontal: 10,
+      marginBottom: 10,
+  },
+  avatar: {
+      padding: 20,
+      resizeMode: 'contain',
+      borderWidth: 2,
+      borderColor: "#ACA279",
+      borderRadius: 45,
+  },
+  text: {
+      fontSize: 15,
+      color: '#ACA279',
+      alignItems: 'center',
+      justifyContent: 'left',
+      flex: 0.8,
+      marginLeft: 20,
+      padding: 5,
+      width: "100%"
+  },
+
+  active: {
+    borderWidth: 1,
+    borderRadius: 20,
+    borderColor: "#59BDCD",
+    padding: 5,
+  },
+  textActive: {
+    fontSize: 10,
+    color: "#59BDCD",
+  },
+
+  waiting: {
+    borderWidth: 1,
+    borderRadius: 20,
+    borderColor: "#ACA279",
+    padding: 5,
+  },
+  textWaiting: {
+    fontSize: 10,
+    color: "#ACA279",
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx
index f7391b3..7f66760 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import {React, useState} from 'react';
 import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
 import ValidateButton from './ValidateButton';
-import ListTab from './ListTab';
-import DietsTab from './DietsTab';
-import AllergiesTab from './AllergiesTab';
+import ListSelect from './ListSelect';
+import ListWithoutSelect from './ListWithoutSelect';
 
 type ProfileProps = {
   name: string
@@ -13,23 +12,23 @@ type ProfileProps = {
 }
 
 export default function ProfileModification(props: ProfileProps) {
+  const [name, onChangeName] = useState(props.name);
+
   return (
     <View style={styles.background}>
         <View style={styles.pseudoBar}>
             <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
-            <TextInput style={styles.textInput} value={props.name}></TextInput>
+            <TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput>
             <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
         </View>
         <View style={styles.filterBar}>
             <Text style={styles.filters}>Filters</Text>
             <Text style={styles.nbSelected}>3 selected</Text>
         </View>
-        <DietsTab title="Diets" content={props.diets}></DietsTab>
+        <ListSelect title="Diets" content={props.diets}></ListSelect>
         <View style={{marginTop: 10}}/>
-        <AllergiesTab title="Allergies" content={props.allergies}></AllergiesTab>
+        <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
         <View style={{marginTop: 10}}/>
-        <ListTab title="Diets" content={props.diets}></ListTab>
-        <ListTab title="Allergies" content={props.allergies}></ListTab>
         <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
     </View>
   );
@@ -37,13 +36,14 @@ export default function ProfileModification(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    width: 370,
+    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
     padding: 10,
+    marginHorizontal: 10,
   },
   pseudoBar: {
     flexDirection: "row",
diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx
new file mode 100644
index 0000000..832e727
--- /dev/null
+++ b/LeftOvers/components/ProfileSelection.tsx
@@ -0,0 +1,63 @@
+import {React, useState} from 'react';
+import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
+import bracketLeft from '../assets/images/angle_bracket_left.png';
+import bracketRight from '../assets/images/angle_bracket_right.png';
+import ProfileElement from './ProfileElement'
+
+type ProfileSelectionProps = {
+  listProfile: Profile[]
+  disableSelection: boolean
+}
+
+type Profile = {
+    name: string
+    avatar: string
+    isActive: boolean
+}
+
+export default function ProfileSelection(props: ProfileSelectionProps) {
+  const [cpt, setCpt] = useState(0);
+  const decreaseCounter = () => {
+    if (cpt > 0) {
+      setCpt(cpt - 1);
+    }
+    else {
+      setCpt(props.listProfile.length - 1);
+    }
+  };
+  const increaseCounter = () => {
+    if (cpt < props.listProfile.length - 1) {
+      setCpt(cpt + 1);
+    }
+    else {
+      setCpt(0);
+    }
+  };
+
+  return (
+      <View style={styles.background}>
+          <Pressable onPress={decreaseCounter} style={{}}>
+             <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+          </Pressable>
+          <ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
+          <Pressable onPress={increaseCounter} style={{}}>
+             <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+          </Pressable>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  background: {
+    //height: 120,
+    height: 100,
+    borderRadius: 20,
+    marginHorizontal: 10,
+    borderWidth: 2,
+    borderColor: '#ACA279',
+    backgroundColor: '#E3DEC9',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/components/TopBar.tsx b/LeftOvers/components/TopBar.tsx
index fda32e4..5a7f0c0 100644
--- a/LeftOvers/components/TopBar.tsx
+++ b/LeftOvers/components/TopBar.tsx
@@ -4,16 +4,13 @@ import { Appbar } from 'react-native-paper';
 interface TopBarProps{
     title : string
     isVisible : boolean
-  }
+}
   
-  
-  export default function TopBar(props) {
-
+export default function TopBar(props) {
     const _goBack = () => console.log('Went back');
-
     const _handleSearch = () => console.log('Searching');
-
     const _handleMore = () => console.log('Shown more');
+
     return (
         <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
             <Appbar.BackAction onPress={_goBack} />
@@ -24,8 +21,6 @@ interface TopBarProps{
               <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
               </>
             )}
-
-            
       </Appbar.Header>
     );
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx
index de00a10..1ad4d82 100644
--- a/LeftOvers/components/ValidateButton.tsx
+++ b/LeftOvers/components/ValidateButton.tsx
@@ -21,6 +21,7 @@ export default function ValidateButton(props: ValidateButtonProps) {
             borderColor: props.colour,
             backgroundColor: props.backColour,
             alignItems: 'center',
+            justifyContent: "center",
             flexDirection: "row",
             padding: 5,
             paddingRight: 10,}}>
diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json
index 31f60a2..7798ae6 100644
--- a/LeftOvers/package-lock.json
+++ b/LeftOvers/package-lock.json
@@ -19,7 +19,6 @@
         "react-native": "0.72.6",
         "react-native-dropdown-select-list": "^2.0.5",
         "react-native-paper": "^5.11.1",
-        "react-native-safe-area-context": "^4.7.4",
         "react-native-splash-screen": "^3.3.0",
         "react-native-web": "~0.19.6",
         "typescript": "^5.1.3"
@@ -14878,6 +14877,7 @@
       "version": "4.7.4",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz",
       "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==",
+      "peer": true,
       "peerDependencies": {
         "react": "*",
         "react-native": "*"
diff --git a/LeftOvers/package.json b/LeftOvers/package.json
index e3e3094..64c0047 100644
--- a/LeftOvers/package.json
+++ b/LeftOvers/package.json
@@ -20,7 +20,6 @@
     "react-native": "0.72.6",
     "react-native-dropdown-select-list": "^2.0.5",
     "react-native-paper": "^5.11.1",
-    "react-native-safe-area-context": "^4.7.4",
     "react-native-splash-screen": "^3.3.0",
     "react-native-web": "~0.19.6",
     "typescript": "^5.1.3"
diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx
new file mode 100644
index 0000000..8d4b3e4
--- /dev/null
+++ b/LeftOvers/screens/CreateProfile.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import ProfileModification from '../components/ProfileModification';
+import ValidateButton from '../components/ValidateButton';
+import TopBar from '../components/TopBar';
+import { LinearGradient } from 'expo-linear-gradient';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function CreateProfile(props) {
+  const all = []
+  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
+  return (
+    <SafeAreaProvider>
+        <TopBar title="Create Profile" isVisible="true"/>
+        <View style={styles.container}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+                <View style={{marginTop: 20}}/>
+                <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
+                <View style={{marginTop: 20}}/>
+                <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+            </LinearGradient>
+        </View>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx
new file mode 100644
index 0000000..6a3f42b
--- /dev/null
+++ b/LeftOvers/screens/FiltersSelection.tsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+import ProfileModification from '../components/ProfileModification';
+import ValidateButton from '../components/ValidateButton';
+import TopBar from '../components/TopBar';
+import ListSelect from '../components/ListSelect';
+import ListWithoutSelect from '../components/ListWithoutSelect';
+import ProfileSelection from '../components/ProfileSelection';
+import {LinearGradient} from 'expo-linear-gradient';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+
+export default function FiltersSelection(props) {
+  const profiles = [
+        {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
+        {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
+        {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
+        {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
+  ]
+
+  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
+
+  const allProfiles = [{value: "Skimmed Milk"}, {value: "Nuts"}]
+  const dieProfiles = [{value: "Porkless"}, {value: "Pescatarian"}]
+
+  const dieAdd = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Vegan"}, {value: "Vegetarian"}]
+  const allAdd = []
+
+  return (
+    <SafeAreaProvider>
+        <TopBar title="Filters Selection" isVisible="true"/>
+        <View style={styles.container}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.profilesSelection}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Profiles</Text>
+                        <Text style={styles.nbSelected}>2 selected, 1 waiting</Text>
+                    </View>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileSelection listProfile={profiles} disableSelection={false}/>
+                    <View style={{marginTop: 20}}/>
+                    <ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
+                </View>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.background}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Filters from Profiles</Text>
+                    </View>
+                    <ListWithoutSelect title="Diets" content={dieProfiles}></ListWithoutSelect>
+                    <View style={{marginTop: 10}}/>
+                    <ListWithoutSelect title="Allergies" content={allProfiles}></ListWithoutSelect>
+                </View>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.background}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Additional Filters</Text>
+                        <Text style={styles.nbSelected}>3 selected</Text>
+                    </View>
+                    <ListSelect title="Diets" content={dieAdd}></ListSelect>
+                    <View style={{marginTop: 10}}/>
+                    <ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect>
+                    <View style={{marginTop: 10}}/>
+                    <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
+                </View>
+                <View style={{marginTop: 20}}/>
+                <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+            </LinearGradient>
+        </View>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+  },
+
+  background: {
+      //maxWidth: 370,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 20,
+      backgroundColor: '#F2F0E4',
+      padding: 10,
+      paddingBottom: 0,
+      marginHorizontal: 10,
+  },
+  filterBar: {
+        flexDirection: "row",
+        width: 300,
+        paddingTop: 10,
+        paddingBottom: 5,
+        alignItems: "flex-end",
+        justifyContent: "center",
+        flex: 0.2,
+  },
+  filters: {
+        flex: 0.8,
+        fontSize: 20,
+        color: '#ACA279',
+        flex: 1,
+        padding: 5,
+        paddingLeft: 0,
+        paddingBottom: 0,
+  },
+  nbSelected: {
+        fontSize: 11,
+        //flex: 0.2,
+        color: "#3F3C42",
+        textAlign: "right",
+  },
+
+  profilesSelection: {
+        //maxWidth: 370,
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#F2F0E4',
+        marginHorizontal: 10,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx
new file mode 100644
index 0000000..dcf7ce7
--- /dev/null
+++ b/LeftOvers/screens/HomePage.tsx
@@ -0,0 +1,209 @@
+import {React, useState} from 'react';
+import {StyleSheet, View, Text, Pressable, Image} from 'react-native';
+import ProfileModification from '../components/ProfileModification';
+import ValidateButton from '../components/ValidateButton';
+import TopBar from '../components/TopBar';
+import ListSelect from '../components/ListSelect';
+import ListWithoutSelect from '../components/ListWithoutSelect';
+import ProfileSelection from '../components/ProfileSelection';
+import FoodElementText from '../components/FoodElementText';
+import {LinearGradient} from 'expo-linear-gradient';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import bracketLeft from '../assets/images/angle_bracket_left.png';
+import bracketRight from '../assets/images/angle_bracket_right.png';
+
+export default function HomePage(props) {
+  const profiles = [
+        {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
+        {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
+        {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
+        {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
+  ]
+
+  const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
+
+  const [cpt, setCpt] = useState(0);
+  const decreaseCounter = () => {
+    if (cpt > 0) {
+      setCpt(cpt - 1);
+    }
+    else {
+      setCpt(ingredientList.length - 1);
+    }
+  };
+  const increaseCounter = () => {
+    if (cpt < ingredientList.length - 1) {
+      setCpt(cpt + 1);
+    }
+    else {
+      setCpt(0);
+    }
+  };
+
+  return (
+    <SafeAreaProvider>
+        <View style={styles.topBar}>
+            <Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginLeft: 10}}/>
+            <Text style={styles.appName}>LeftOvers</Text>
+            <Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginRight: 10}}/>
+        </View>
+        <View style={styles.container}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.welcome}>
+                    <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
+                        <View style={{flexDirection: "row"}}>
+                            <Text style={styles.text}>Welcome </Text>
+                            <Text style={styles.name}>Rayhân</Text>
+                            <Text style={styles.text}>,</Text>
+                        </View>
+                        <Text style={styles.text}>Glad to see you again!</Text>
+                    </View>
+                </View>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.profilesSelection}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Profiles</Text>
+                        <Text style={styles.nbSelected}>2 selected</Text>
+                    </View>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileSelection listProfile={profiles} disableSelection={true}/>
+                    <View style={{marginTop: 20}}/>
+                    <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                </View>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.profilesSelection}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Ingredient Stocks</Text>
+                    </View>
+                    <View style={{marginTop: 10}}/>
+                    <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                </View>
+                <View style={{marginTop: 20}}/>
+                <View style={styles.profilesSelection}>
+                     <View style={styles.filterBar}>
+                         <Text style={styles.filters}>Cooking</Text>
+                     </View>
+                     <View style={{marginTop: 10}}/>
+                     <View style={styles.ingredientSelection}>
+                         <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
+                         <View style={{flexDirection: "row", padding: 10, justifyContent: "center", alignItems: "center"}}>
+                             <Pressable onPress={decreaseCounter}>
+                                 <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+                             </Pressable>
+                             <FoodElementText title={ingredientList[cpt].title}/>
+                             <Pressable onPress={increaseCounter}>
+                                 <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+                             </Pressable>
+                         </View>
+                     </View>
+                     <View style={{marginTop: 15}}/>
+                     <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                     <View style={{marginTop: 10}}/>
+                     <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                </View>
+            </LinearGradient>
+        </View>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+  },
+
+  filterBar: {
+        flexDirection: "row",
+        width: 300,
+        paddingTop: 10,
+        paddingBottom: 5,
+        alignItems: "flex-end",
+        justifyContent: "center",
+        flex: 0.2,
+  },
+  filters: {
+        flex: 0.8,
+        fontSize: 20,
+        color: '#ACA279',
+        flex: 1,
+        padding: 5,
+        paddingLeft: 0,
+        paddingBottom: 0,
+  },
+  nbSelected: {
+        fontSize: 11,
+        color: "#3F3C42",
+        textAlign: "right",
+  },
+
+  profilesSelection: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#F2F0E4',
+        paddingTop: 5,
+        marginHorizontal: 10,
+  },
+  welcome: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#F2F0E4',
+        paddingVertical: 10,
+        paddingHorizontal: 25,
+        marginHorizontal: 10,
+  },
+  text: {
+        fontSize: 20,
+        color: '#ACA279',
+  },
+  name: {
+        fontSize: 20,
+        fontWeight: "bold",
+        color: '#59BDCD',
+        textAlign: "left",
+  },
+  ingredientSelection: {
+        flexDirection: 'column',
+        width: "90%",
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#E3DEC9',
+        borderWidth: 2,
+        borderColor: "#ACA279",
+        marginHorizontal: 10,
+        padding: 5
+  },
+
+  appName: {
+        fontSize: 20,
+        fontWeight: "bold",
+        color: '#3F3C42',
+        textAlign: "center",
+        flex: 0.8,
+  },
+  topBar: {
+        flexDirection: 'row',
+        width: "100%",
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#F2F0E4',
+        padding: 5,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 8500cc5..5ddc0bd 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, StyleSheet, Text, Image, Pressable,ScrollView} from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import TopBar from '../components/TopBar';
-import { Searchbar } from 'react-native-paper';
+import {Searchbar} from 'react-native-paper';
 import brochette from '../assets/images/brochette.png'; 
 import FoodElementText from '../components/FoodElementText';
 import CustomButton from '../components/CustomButton';
diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx
new file mode 100644
index 0000000..1a8b096
--- /dev/null
+++ b/LeftOvers/screens/ModifyProfile.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import ProfileModification from '../components/ProfileModification';
+import ValidateButton from '../components/ValidateButton';
+import TopBar from '../components/TopBar';
+import { LinearGradient } from 'expo-linear-gradient';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+export default function ModifyProfile(props) {
+  const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
+  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
+  return (
+    <SafeAreaProvider>
+        <TopBar title="Modify Profile" isVisible="true"/>
+        <View style={styles.container}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+                <View style={{marginTop: 20}}/>
+                <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
+                <View style={{marginTop: 10}}/>
+                <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+            </LinearGradient>
+        </View>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
new file mode 100644
index 0000000..0f2e83e
--- /dev/null
+++ b/LeftOvers/screens/Profiles.tsx
@@ -0,0 +1,193 @@
+import {React, useState} from 'react';
+import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
+import ProfileDetails from '../components/ProfileDetails';
+import ProfileDelete from '../components/ProfileDelete';
+import TopBar from '../components/TopBar';
+import {LinearGradient} from 'expo-linear-gradient';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+
+export default function ModifyProfile(props) {
+  const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
+  const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
+
+  const allJackie = [{value: "Tomato"}, {value: "Relic"}]
+  const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}]
+
+  const allGoro = []
+  const dieGoro = [{value: "Pescatarian"}]
+
+  const allViktor = [{value: "Pasta"}, {value: "Fish"}]
+  const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
+
+  const [visible, setVisible] = useState(false);
+  const [opacity, setOpacity] = useState(1);
+  const raisePopUp = () => {
+        setVisible(true)
+        setOpacity(0.4)
+  }
+  const erasePopUp = () => {
+        setVisible(false)
+        setOpacity(1)
+  }
+
+  return (
+    <SafeAreaProvider>
+        <View style={styles.container}>
+            <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
+                <TopBar title="Profiles" isVisible="true"/>
+                <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <View style={{marginTop: 10}}/>
+                    <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
+                    <View style={{marginTop: 10}}/>
+                    <View style={styles.modal}>
+                        <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
+                            <View style={styles.modal}>
+                                <View style={styles.viewModal}>
+                                    <View style={styles.profileValidation}>
+                                        <ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
+                                    </View>
+                                    <View style={styles.decisionBarVertical}>
+                                        <Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
+                                        <View style={styles.decisionBar}>
+                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
+                                                <View style={styles.yesButton}>
+                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <Text style={styles.yesText}>Yes</Text>
+                                                </View>
+                                            </Pressable>
+                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
+                                                <View style={styles.noButton}>
+                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <Text style={styles.noText}>No</Text>
+                                                </View>
+                                            </Pressable>
+                                        </View>
+                                    </View>
+                                </View>
+                            </View>
+                        </Modal>
+                    </View>
+                </LinearGradient>
+            </View>
+        </View>
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    height: "100%",
+    width: "100%",
+    flex: 1,
+    padding: 10,
+    paddingTop: 0,
+  },
+
+
+
+  modal: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        transform: [{ translateX: -207 }, { translateY: -140 }],
+  },
+  viewModal: {
+        flexDirection: "column",
+        padding: 10,
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: 200,
+  },
+
+
+  profileValidation: {
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingBottom: 20,
+  },
+  decisionBarVertical: {
+          flexDirection: "column",
+          width: "100%",
+          padding: 10,
+          height: "100%",
+          borderRadius: 15,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#F2F0E4",
+  },
+  validationQuestion: {
+        fontSize: 20,
+        color: '#ACA279',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0.3,
+        padding: 5,
+  },
+  decisionBar: {
+          flexDirection: "row",
+          flex: 0.7,
+          width: "100%",
+          height: "20%",
+          borderRadius: 15,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#F2F0E4",
+  },
+  yesButton: {
+          flexDirection: "row",
+          flex: 0.5,
+          padding: 10,
+          marginHorizontal: 10,
+          width: "90%",
+          borderRadius: 20,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#59BDCD",
+  },
+  yesText: {
+      fontSize: 20,
+      color: '#3F3C42',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: 0.7,
+      padding: 5,
+  },
+  noButton: {
+        flexDirection: "row",
+        flex: 0.5,
+        padding: 10,
+        marginHorizontal: 10,
+        width: "90%",
+        borderRadius: 20,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#8A0000",
+  },
+  noText: {
+        fontSize: 20,
+        color: '#F2F0E4',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0.7,
+        padding: 5,
+  },
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index 6357bb3..eebd752 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -132,11 +132,7 @@ export default function RecipeSuggestion(props) {
                                   <CustomButton title="Save"></CustomButton>
                               </View>
                           </View>
-
-
                         )}
-
-
                     </Modal>
                 </Portal>
             </PaperProvider>
@@ -175,4 +171,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginTop: 10,
   }
-});
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/home.tsx b/LeftOvers/screens/home.tsx
deleted file mode 100644
index e69de29..0000000