diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 0b62476..0be1cc3 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -1,38 +1,13 @@
 import React from 'react';
-import {StyleSheet, View } from 'react-native';
-import ProfileModification from './components/ProfileModification';
-import ValidateButton from './components/ValidateButton';
-import { LinearGradient } from 'expo-linear-gradient';
+import {StyleSheet, View} from 'react-native';
+import ModifyProfile from './screens/ModifyProfile';
+import Profiles from './screens/Profiles';
+import RecipeSuggestion from './screens/RecipeSuggestion';
 
-export default function App() {
-  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 (
-    <View style={styles.container}>
-        <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-            <ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
-            <View style={{marginTop: 10}}/>
-            <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
-        </LinearGradient>
-    </View>
+export default function App(props) {
+  return(
+    //<ModifyProfile/>
+    <Profiles/>
+    //<RecipeSuggestion/>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  linearGradient: {
-    //height: 844,
-    //width: 390,
-    flex: 1,
-    padding: 10,
-    paddingTop: 0,
-    //backgroundColor: "#59BDCD",
-    //alignItems: 'center',
-    //justifyContent: 'flex-start',
-  },
-});
\ No newline at end of file
+}
\ No newline at end of file
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/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..e5fa336 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)}
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/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
new file mode 100644
index 0000000..6fd6f8c
--- /dev/null
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -0,0 +1,133 @@
+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 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>
+            <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
+        </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/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx
index f7391b3..cd0fd0f 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -1,9 +1,8 @@
 import React 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
@@ -24,12 +23,10 @@ export default function ProfileModification(props: ProfileProps) {
             <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 +34,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/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/package-lock.json b/LeftOvers/package-lock.json
index c75e7ca..7798ae6 100644
--- a/LeftOvers/package-lock.json
+++ b/LeftOvers/package-lock.json
@@ -18,6 +18,7 @@
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
         "react-native-dropdown-select-list": "^2.0.5",
+        "react-native-paper": "^5.11.1",
         "react-native-splash-screen": "^3.3.0",
         "react-native-web": "~0.19.6",
         "typescript": "^5.1.3"
@@ -1970,6 +1971,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -7675,6 +7696,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7688,6 +7718,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -10126,6 +10165,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -14805,6 +14857,32 @@
       "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
       "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
     },
+    "node_modules/react-native-paper": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.11.1.tgz",
+      "integrity": "sha512-axqRTagGL8LtuYh172cx2Q2THOVJ3PTpPjCKhL5ECRdpJs2ceiboVecSiOIBuO3H7dVpaneptBA0vJr9HeVHwg==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "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": "*"
+      }
+    },
     "node_modules/react-native-splash-screen": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
@@ -14813,6 +14891,72 @@
         "react-native": ">=0.57.0"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.2.tgz",
+      "integrity": "sha512-ZwhUkJhIMkGL3cW7IT4sEEHu2AOzerqsRQ73UzXsB+ecBpVK5bRmp0XswiQleZKZalZfs/WIfWLXLfTQHcQo6A==",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -15534,6 +15678,19 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -16580,6 +16737,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/LeftOvers/package.json b/LeftOvers/package.json
index 0357d85..64c0047 100644
--- a/LeftOvers/package.json
+++ b/LeftOvers/package.json
@@ -19,6 +19,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
     "react-native-dropdown-select-list": "^2.0.5",
+    "react-native-paper": "^5.11.1",
     "react-native-splash-screen": "^3.3.0",
     "react-native-web": "~0.19.6",
     "typescript": "^5.1.3"
diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx
new file mode 100644
index 0000000..212fc03
--- /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: 10}}/>
+                <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..6bb5ca2
--- /dev/null
+++ b/LeftOvers/screens/Profiles.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+import ProfileModification from '../components/ProfileModification';
+import ProfileDetails from '../components/ProfileDetails';
+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 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"}]
+
+  return (
+    <SafeAreaProvider>
+        <TopBar title="Profiles" isVisible="true"/>
+        <View style={styles.container}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
+                <View style={{marginTop: 10}}/>
+                <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDetails>
+                <View style={{marginTop: 10}}/>
+                <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie}></ProfileDetails>
+                <View style={{marginTop: 10}}/>
+                <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro}></ProfileDetails>
+                <View style={{marginTop: 10}}/>
+                <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor}></ProfileDetails>
+                <View style={{marginTop: 10}}/>
+            </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/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index 25c9d82..969469d 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -120,11 +120,7 @@ export default function RecipeSuggestion(props) {
                                   <CustomButton title="Save"></CustomButton>
                               </View>
                           </View>
-
-
                         )}
-
-
                     </Modal>
                 </Portal>
             </PaperProvider>
@@ -163,4 +159,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginTop: 10,
   }
-});
+});
\ No newline at end of file