diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 0a3b7a1..3e99a61 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { StyleSheet, Image } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { BlurView } from 'expo-blur';
 
 import HomeStackScreen from './navigation/HomeStackScreen';
 import ProfilesStackScreen from './navigation/ProfileStackScreen';
@@ -10,10 +8,6 @@ import CookingStackScreen from './navigation/CookingStackScreen';
 import BottomBar from './navigation/BottomBar';
 import { ThemeProvider } from './theme/ThemeContext';
 
-import HomeIcon from './assets/images/home.png';
-import ProfileIcon from './assets/images/person_icon.png';
-import CookingIcon from './assets/images/cook.png';
-
 
 const Tab = createBottomTabNavigator();
 
diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index 1fe03c7..e1d3ea3 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
 import Separator from '../components/Separator';
-import plus from '../assets/images/plus.png'; 
-import moins from '../assets/images/minus.png'; 
 
 
 
 interface foodElementImageProps {
-  source : string
   title  : string
 }
 
@@ -18,7 +15,6 @@ export default function FoodElementText(props : any) {
       <View style={styles.container}>
         <View style={styles.view}>
             <Text style={styles.text}>{props.title}</Text>
-            <Separator/>
         </View>
       </View>
     </Pressable>
@@ -29,33 +25,26 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 270,
-    height: 60,
+    width: "80%",
     borderRadius: 5,
-    elevation: 3,
     backgroundColor: '#E3DEC9',
   },
   text: {
-    fontSize: 15,
-    lineHeight: 21,
+    fontSize: 10,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
-    padding : 7,
+    padding : "2%",
     color: 'black',
   },
   view: {
     alignItems: 'flex-start',
     justifyContent: 'center',
-    marginRight: 5 // Centre le contenu horizontalement
   },
   container: {
-    width :260,
-    height: 50,
+    width: "100%",
     borderRadius: 5,
-    elevation: 3,
-    borderWidth: 2,
-    borderColor: 'black',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: '#3F3C42',
+    flexDirection: 'column',
+    justifyContent: 'center',
   },
 });
diff --git a/LeftOvers/components/ListSelect.tsx b/LeftOvers/components/ListSelect.tsx
index 5b2a354..55d9704 100644
--- a/LeftOvers/components/ListSelect.tsx
+++ b/LeftOvers/components/ListSelect.tsx
@@ -25,6 +25,7 @@ export default function ListSelect(props: ListProps) {
         dropdownTextStyles={styles.itemText}
         badgeStyles={styles.badges}
         badgeTextStyles={styles.badgesText}
+        notFoundText="All Diets Already Selected"
         placeholder={props.title}
         label={props.title}/>
   );
@@ -35,7 +36,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "stretch",
-    minHeight: 25,
     backgroundColor: "#F2F0E4",
     borderTopRightRadius: 15,
     borderTopLeftRadius: 15,
@@ -43,13 +43,12 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderWidth: 2,
     borderColor: "#ACA279",
-    width: 330,
+    minWidth: "92%",
+    maxWidth: "92%",
     marginBottom: 0,
     overflow: "hidden",
   },
   arrow: {
-    height: 20,
-    width: 20,
     resizeMode: 'contain',
     tintColor: "#3F3C42",
     flex: 0.1,
@@ -63,34 +62,36 @@ const styles = StyleSheet.create({
   },
 
   itemList: {
-      //flexDirection: "row",
+      flexDirection: "row",
       alignItems: "flex-start",
-      //justifyContent: "stretch",
+      justifyContent: "stretch",
       borderWidth: 0,
       borderTopRightRadius: 0,
       borderTopLeftRadius: 0,
       borderBottomRightRadius: 15,
       borderBottomLeftRadius: 15,
       backgroundColor: "#E3DEC9",
-      width: 330,
+      minWidth: "92%",
+      maxWidth: "92%",
   },
   itemCell: {
-      maxHeight: 30,
-      flex: 1,
       padding: 0,
-      paddingLeft: 10,
+      paddingTop: "5%",
+      width: "100%",
+      minWidth: 250,
+      maxWidth: 250,
   },
   itemText: {
       fontSize: 13,
       textAlign: "left",
       flex: 1,
-      padding: 5,
-      paddingLeft: 10,
+      padding: "1%",
+      paddingLeft: "3%",
       color: "#3F3C42",
   },
 
   badges: {
-      backgroundColor: "#59BDCD"
+      backgroundColor: "#59BDCD",
   },
   badgesText: {
       fontSize: 15,
diff --git a/LeftOvers/components/ListWithoutSelect.tsx b/LeftOvers/components/ListWithoutSelect.tsx
index d8c851c..3ae3bc5 100644
--- a/LeftOvers/components/ListWithoutSelect.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native';
 import ValidateButton from './ValidateButton';
 import HeaderFlatList from './HeaderFlatList';
 import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
@@ -12,20 +12,20 @@ type ListProps = {
 export default function ListWithoutSelect(props: ListProps) {
   const [selected, setSelected] = React.useState([]);
   return (
-    <MultipleSelectList
-        data={props.content}
-        save="value"
-        search={false}
-        arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
-        boxStyles={styles.titleBar}
-        inputStyles={styles.title}
-        dropdownStyles={styles.itemList}
-        dropdownItemStyles={styles.itemCell}
-        dropdownTextStyles={styles.itemText}
-        checkBoxStyles={styles.box}
-        notFoundText="None"
-        placeholder={props.title}
-        label={props.title}/>
+        <MultipleSelectList
+            data={props.content}
+            save="value"
+            search={false}
+            arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
+            boxStyles={styles.titleBar}
+            inputStyles={styles.title}
+            dropdownStyles={styles.itemList}
+            dropdownItemStyles={styles.itemCell}
+            dropdownTextStyles={styles.itemText}
+            checkBoxStyles={styles.box}
+            notFoundText="None"
+            placeholder={props.title}
+            label={props.title}/>
   );
 }
 
@@ -34,7 +34,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "stretch",
-    minHeight: 25,
     backgroundColor: "#F2F0E4",
     borderTopRightRadius: 15,
     borderTopLeftRadius: 15,
@@ -42,13 +41,12 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderWidth: 2,
     borderColor: "#ACA279",
-    width: 330,
+    minWidth: "92%",
+    maxWidth: "92%",
     marginBottom: 0,
     overflow: "hidden",
   },
   arrow: {
-    height: 20,
-    width: 20,
     resizeMode: 'contain',
     tintColor: "#3F3C42",
     flex: 0.1,
@@ -62,22 +60,24 @@ const styles = StyleSheet.create({
   },
 
   itemList: {
-      //flexDirection: "row",
+      flexDirection: "row",
       alignItems: "flex-start",
-      //justifyContent: "stretch",
+      justifyContent: "stretch",
       borderWidth: 0,
       borderTopRightRadius: 0,
       borderTopLeftRadius: 0,
       borderBottomRightRadius: 15,
       borderBottomLeftRadius: 15,
       backgroundColor: "#E3DEC9",
-      width: 330,
+      minWidth: "92%",
+      maxWidth: "92%",
   },
   itemCell: {
-      maxHeight: 30,
-      flex: 1,
       padding: 0,
-      paddingLeft: 10,
+      paddingTop: "5%",
+      width: "100%",
+      minWidth: 250,
+      maxWidth: 250,
   },
   itemText: {
       fontSize: 13,
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
index 9f8d002..944f2b7 100644
--- a/LeftOvers/components/ProfileDelete.tsx
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -21,13 +21,24 @@ export default function ProfileDelete(props: ProfileProps) {
     }
   };
 
+  let imageSource
+  if (props.avatar == "plus.png"){
+     imageSource = require('../assets/images/plus.png')
+  }
+  else if (props.avatar == "plus_small.png"){
+     imageSource = require('../assets/images/plus_small.png')
+  }
+  else{
+     imageSource = require('../assets/images/logo.png')
+  }
+
   return (
     <View style={styles.background}>
         <View style={styles.pseudoBar}>
-            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Image source={imageSource} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
         </View>
-        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
                 <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
@@ -35,9 +46,8 @@ export default function ProfileDelete(props: ProfileProps) {
         </Pressable>
         <View style={{display: display}}>
             <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
             <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
         </View>
     </View>
   );
@@ -45,69 +55,61 @@ export default function ProfileDelete(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
+    height: "100%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.03,
   },
   text: {
+    flex: 1,
     fontSize: 20,
     color: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
-    flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    textAlign: 'left',
+    marginLeft: "10%",
+    padding: "2%",
+    height: "100%",
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "90%",
+      paddingTop: "3%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
+      padding: "2%",
       paddingLeft: 0,
       paddingBottom: 0,
   },
-  nbSelected: {
-      fontSize: 11,
-      flex: 1,
-      color: "#3F3C42",
-      textAlign: "right",
-  },
   arrow: {
-      height: 20,
-      width: 20,
+      height: "100%",
       resizeMode: 'contain',
       tintColor: "#3F3C42",
       flex: 0.1,
diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
index cd0aae5..4942d5a 100644
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -25,30 +25,42 @@ export default function ProfileDetails(props: ProfileProps) {
     }
   };
 
+  let imageSource
+
+  if (props.avatar == "plus.png"){
+     imageSource = require('../assets/images/plus.png')
+  }
+  else if (props.avatar == "plus_small.png"){
+     imageSource = require('../assets/images/plus_small.png')
+  }
+  else{
+      imageSource = require('../assets/images/logo.png')
+  }
+
   return (
     <View style={styles.background}>
         <View style={styles.pseudoBar}>
-            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Image source={imageSource} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
             <Pressable onPress={() => props.navigation.navigate('ProfileModification')}>
                 <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
             </Pressable>
-            <Pressable onPress={props.onDeleteProfile}>
+            <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
                 <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
             </Pressable>
         </View>
-        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
-                <Text style={styles.nbSelected}>3 selected</Text>
+                <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
                 <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
             </View>
         </Pressable>
-        <View style={{display: display}}>
+        <View style={{display: display, alignItems: "center", justifyContent: "center"}}>
             <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
             <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
         </View>
     </View>
   );
@@ -56,72 +68,71 @@ export default function ProfileDetails(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.03,
   },
   text: {
+    flex: 1,
     fontSize: 20,
     color: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
-    flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    textAlign: 'left',
+    marginLeft: "3%",
+    padding: "2%",
+    height: "100%",
   },
   modify: {
-      height: 20,
-      width: 20,
+      height: "100%",
       tintColor: "#ACA279",
       resizeMode: 'contain',
-      flex: 0.05,
-      marginLeft: 15,
+      flex: 0.1,
+      marginLeft: "3%",
   },
   delete: {
-        height: 20,
-        width: 20,
-        tintColor: "#ACA279",
-        resizeMode: 'contain',
-        flex: 0.05,
+      height: "100%",
+      width: "100%",
+      tintColor: "#ACA279",
+      resizeMode: 'contain',
+      flex: 1,
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "85%",
+      paddingTop: "3%",
+      paddingBottom: "1%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
+      flex: 1,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
+      padding: "2%",
       paddingLeft: 0,
       paddingBottom: 0,
   },
@@ -130,10 +141,10 @@ const styles = StyleSheet.create({
       flex: 1,
       color: "#3F3C42",
       textAlign: "right",
+      marginRight: "3%",
   },
   arrow: {
-      height: 20,
-      width: 20,
+      height: "100%",
       resizeMode: 'contain',
       tintColor: "#3F3C42",
       flex: 0.1,
diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx
index 658820e..f7c392d 100644
--- a/LeftOvers/components/ProfileElement.tsx
+++ b/LeftOvers/components/ProfileElement.tsx
@@ -21,19 +21,34 @@ export default function ProfileElement(props : Profile) {
       else{
           setWaiting("flex")
       }
-      if (props.isActive == "flex" && waiting == "none"){
+      if (props.disableSelection){
+          setSeparator("none")
+      }
+      else if (props.isActive == "flex" && waiting == "none"){
           setSeparator("flex")
       }
       else{
           setSeparator("none")
       }
       console.log(waiting, separator, props.name)
-  };
+  }
+
+  let imageSource
+  if (props.avatar == "plus.png"){
+      imageSource = require('../assets/images/plus.png')
+  }
+  else if (props.avatar == "plus_small.png"){
+      imageSource = require('../assets/images/plus_small.png')
+  }
+  else{
+      imageSource = require('../assets/images/logo.png')
+  }
+
   return (
       <Pressable onPress={changeStatus} style={styles.button}>
-          <View style={{flexDirection: "column"}}>
+          <View>
               <View style={styles.pseudoBar}>
-                  <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+                  <Image source={imageSource} style={styles.avatar}></Image>
                   <Text style={styles.text}>{props.name}</Text>
               </View>
               <View style={styles.pseudoBar}>
@@ -54,42 +69,42 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'flex-start',
-    height: 80,
-    //width: "75%",
-    marginVertical: 15,
+    height: "80%",
+    width: "78%",
+    marginVertical: "3%",
   },
   pseudoBar: {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      //width: "120%",
-      width: 225,
-      marginHorizontal: 10,
-      marginBottom: 10,
+      width: "100%",
+      marginHorizontal: "3%",
+      marginBottom: "3%",
   },
   avatar: {
-      padding: 20,
+      padding: "5%",
       resizeMode: 'contain',
       borderWidth: 2,
       borderColor: "#ACA279",
       borderRadius: 45,
+      height: "100%",
+      flex: 0.01,
   },
   text: {
       fontSize: 15,
       color: '#ACA279',
       alignItems: 'center',
-      justifyContent: 'left',
-      flex: 0.8,
-      marginLeft: 20,
-      padding: 5,
-      width: "100%"
+      textAlign: 'left',
+      flex: 0.9,
+      marginLeft: "10%",
+      padding: "2%",
   },
 
   active: {
     borderWidth: 1,
     borderRadius: 20,
     borderColor: "#59BDCD",
-    padding: 5,
+    padding: "1%",
   },
   textActive: {
     fontSize: 10,
@@ -100,7 +115,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 20,
     borderColor: "#ACA279",
-    padding: 5,
+    padding: "1%",
   },
   textWaiting: {
     fontSize: 10,
diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx
index 8188c8d..ebf9cf4 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -15,10 +15,21 @@ type ProfileProps = {
 export default function ProfileModification(props: ProfileProps) {
   const [name, onChangeName] = useState(props.name);
 
+  let imageSource
+  if (props.avatar == "plus.png"){
+      imageSource = require('../assets/images/plus.png')
+  }
+  else if (props.avatar == "plus_small.png"){
+      imageSource = require('../assets/images/plus_small.png')
+  }
+  else{
+      imageSource = require('../assets/images/logo.png')
+  }
+
   return (
     <View style={styles.background}>
         <View style={styles.pseudoBar}>
-            <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Image source={imageSource} style={styles.avatar}></Image>
             <TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput>
             <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
         </View>
@@ -27,9 +38,9 @@ export default function ProfileModification(props: ProfileProps) {
             <Text style={styles.nbSelected}>3 selected</Text>
         </View>
         <ListSelect title="Diets" content={props.diets}></ListSelect>
-        <View style={{marginTop: 10}}/>
+        <View style={{marginTop: "6%"}}/>
         <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-        <View style={{marginTop: 10}}/>
+        <View style={{marginTop: "3%"}}/>
         <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
     </View>
   );
@@ -37,77 +48,68 @@ export default function ProfileModification(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.04,
   },
   textInput: {
-    flex: 0.5,
     fontSize: 15,
     color: '#ACA279',
-    width : 150,
     borderRadius: 10,
     borderWidth: 2,
     borderStyle: 'dashed',
     borderColor: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
+    textAlign: 'left',
     flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    marginLeft: "7%",
+    padding: "2%",
   },
   modify: {
-      height: 20,
-      width: 20,
+      height: "100%",
       tintColor: "#ACA279",
       resizeMode: 'contain',
       flex: 0.1,
-      marginLeft: 5,
+      marginLeft: "3%",
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "85%",
+      paddingTop: "3%",
+      paddingBottom: "2%",
       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",
     }
diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx
index 832e727..60ee2c8 100644
--- a/LeftOvers/components/ProfileSelection.tsx
+++ b/LeftOvers/components/ProfileSelection.tsx
@@ -36,12 +36,12 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
 
   return (
       <View style={styles.background}>
-          <Pressable onPress={decreaseCounter} style={{}}>
-             <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+          <Pressable onPress={decreaseCounter}>
+             <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}}/>
           </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 onPress={increaseCounter}>
+             <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}}/>
           </Pressable>
       </View>
   );
@@ -49,10 +49,9 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //height: 120,
-    height: 100,
+    width: "92%",
+    height: 80,
     borderRadius: 20,
-    marginHorizontal: 10,
     borderWidth: 2,
     borderColor: '#ACA279',
     backgroundColor: '#E3DEC9',
diff --git a/LeftOvers/components/Separator.tsx b/LeftOvers/components/Separator.tsx
index dbeae6f..21a8db5 100644
--- a/LeftOvers/components/Separator.tsx
+++ b/LeftOvers/components/Separator.tsx
@@ -7,11 +7,11 @@ export default function Separator (){
   
   const styles = StyleSheet.create({
     separator: {
-      width: 200, // Largeur de la ligne
-      backgroundColor: 'black', // Couleur de la ligne
+      width: "90%",
+      backgroundColor: '#3F3C42',
       borderWidth : 1,
-      marginLeft : 10,
-      marginRight : 10,
+      marginLeft : "5%",
+      marginRight : "5%",
     },
   });
   
\ No newline at end of file
diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx
index a075fc4..fa517a6 100644
--- a/LeftOvers/components/ValidateButton.tsx
+++ b/LeftOvers/components/ValidateButton.tsx
@@ -11,6 +11,47 @@ type ValidateButtonProps = {
 }
 
 export default function ValidateButton(props: ValidateButtonProps) {
+  let imageSource
+  if (props.image == "cook.png"){
+    imageSource = require('../assets/images/cook.png')
+  }
+  else if (props.image == "cross.png"){
+      imageSource = require('../assets/images/cross.png')
+    }
+  else if (props.image == "delete.png"){
+      imageSource = require('../assets/images/delete.png')
+  }
+  else if (props.image == "modify.png"){
+      imageSource = require('../assets/images/modify.png')
+  }
+  else if (props.image == "parameter.png"){
+      imageSource = require('../assets/images/parameter.png')
+  }
+  else if (props.image == "plus.png"){
+      imageSource = require('../assets/images/plus.png')
+  }
+  else if (props.image == "plus_small.png"){
+      imageSource = require('../assets/images/plus_small.png')
+  }
+  else if (props.image == "save.png"){
+      imageSource = require('../assets/images/save.png')
+  }
+  else if (props.image == "search.png"){
+      imageSource = require('../assets/images/search.png')
+  }
+  else if (props.image == "update.png"){
+      imageSource = require('../assets/images/update.png')
+  }
+  else if (props.image == "validate.png"){
+      imageSource = require('../assets/images/validate.png')
+  }
+  else if (props.image == "warehouse.png"){
+      imageSource = require('../assets/images/warehouse.png')
+  }
+  else{
+      imageSource = require('../assets/images/logo.png')
+  }
+
   return (
     <Pressable 
         style={{
@@ -28,20 +69,20 @@ export default function ValidateButton(props: ValidateButtonProps) {
                 alignItems: 'center',
                 justifyContent: "center",
                 flexDirection: "row",
-                padding: 5,
-                paddingRight: 10,}}>
+                padding: "2%",
+                paddingRight: "3%",}}>
             <Image 
-                source={require('../assets/images/'+props.image)} 
+                source={imageSource} 
                 style={{
-                    height: 20,
-                    width: 20,
-                    marginLeft: 5,
-                    marginRight: 10,
-                    resizeMode: "center",
+                    height: "90%",
+                    width: "9%",
+                    marginLeft: "2%",
+                    marginRight: "3%",
+                    resizeMode: "contain",
                     tintColor: props.colour,}}>
             </Image>
             <Text style={{
-                fontSize: 20,
+                fontSize: 15,
                 color: props.colour,
             }}>{props.title}</Text>
         </View>
diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx
index 8d4b3e4..864cd33 100644
--- a/LeftOvers/screens/CreateProfile.tsx
+++ b/LeftOvers/screens/CreateProfile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -10,16 +10,17 @@ 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>
+    <SafeAreaProvider style={{flex: 1}}>
         <TopBar title="Create Profile" isVisible="true"/>
-        <View style={styles.container}>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+        <ScrollView>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
                 <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "3%"}}/>
                 <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+                <View style={{marginTop: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx
index 6a3f42b..642f92c 100644
--- a/LeftOvers/screens/FiltersSelection.tsx
+++ b/LeftOvers/screens/FiltersSelection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import {StyleSheet, View, Text, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -17,55 +17,72 @@ export default function FiltersSelection(props) {
         {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
   ]
 
+  let cptActive = 0
+  profiles.forEach(function (value) {
+    if(value.isActive=="flex"){
+        cptActive=cptActive+1
+    }
+  })
+
   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"}]
+  function isInProfileDiets(element, index, array) {
+       var retType = true
+       dieProfiles.forEach(function (diets) {
+          if(diets.value==element.value){
+              retType = false
+          }
+       })
+       return retType
+    }
+  const dieAdd = die.filter(isInProfileDiets);
   const allAdd = []
 
   return (
-    <SafeAreaProvider>
+    <SafeAreaProvider style={{flex: 1}}>
         <TopBar title="Filters Selection" isVisible="true"/>
-        <View style={styles.container}>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+        <ScrollView>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Profiles</Text>
-                        <Text style={styles.nbSelected}>2 selected, 1 waiting</Text>
+                        <Text style={styles.nbSelected}>{cptActive} selected, 1 waiting</Text>
                     </View>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ProfileSelection listProfile={profiles} disableSelection={false}/>
-                    <View style={{marginTop: 20}}/>
+                    <View style={{marginTop: "4%"}}/>
                     <ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "6%"}}/>
                 <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}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ListWithoutSelect title="Allergies" content={allProfiles}></ListWithoutSelect>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "6%"}}/>
                 <View style={styles.background}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Additional Filters</Text>
-                        <Text style={styles.nbSelected}>3 selected</Text>
+                        <Text style={styles.nbSelected}>{dieAdd.length} available</Text>
                     </View>
                     <ListSelect title="Diets" content={dieAdd}></ListSelect>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "6%"}}/>
                 <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+                <View style={{marginTop: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -83,53 +100,45 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
 
   background: {
-      //maxWidth: 370,
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: 20,
       backgroundColor: '#F2F0E4',
-      padding: 10,
-      paddingBottom: 0,
-      marginHorizontal: 10,
+      padding: "3%",
+      marginHorizontal: "3%",
   },
+
   filterBar: {
         flexDirection: "row",
-        width: 300,
-        paddingTop: 10,
-        paddingBottom: 5,
+        width: "85%",
+        paddingTop: "3%",
+        paddingBottom: "2%",
         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,
+        marginHorizontal: "3%",
+        paddingBottom: "3%",
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx
index e1f76e1..e18fe58 100644
--- a/LeftOvers/screens/HomePage.tsx
+++ b/LeftOvers/screens/HomePage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState } from 'react';
-import {StyleSheet, View, Text, Pressable, Image} from 'react-native';
+import {StyleSheet, View, Text, Pressable, Image, ScrollView, SafeAreaView} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -42,10 +42,15 @@ export default function HomePage({ navigation , props}) {
   };
 
   return (
-    <SafeAreaProvider>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
+            <View style={styles.topBar}>
+                <Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginLeft: "5%", resizeMode: "contain"}}/>
+                <Text style={styles.appName}>LeftOvers</Text>
+                <Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginRight: "5%", resizeMode: "contain"}}/>
+            </View>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <View style={styles.welcome}>
                     <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
                         <View style={{flexDirection: "row"}}>
@@ -56,113 +61,111 @@ export default function HomePage({ navigation , props}) {
                         <Text style={styles.text}>Glad to see you again!</Text>
                     </View>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <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}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ProfileSelection listProfile={profiles} disableSelection={true}/>
-                    <View style={{marginTop: 20}}/>
+                    <View style={{marginTop: "4%"}}/>
                     <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Ingredient Stocks</Text>
                     </View>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "4%"}}/>
                     <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <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" todo={ () => console.log('Chnge Selected Ingredient')}/>
-                     <View style={{marginTop: 10}}/>
-                     <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Cooking</Text>
+                    </View>
+                    <View style={{marginTop: "3%"}}/>
+                    <View style={styles.ingredientSelection}>
+                        <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
+                        <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
+                            <Pressable onPress={decreaseCounter}>
+                                <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                            </Pressable>
+                            <FoodElementText title={ingredientList[cpt].title}/>
+                            <Pressable onPress={increaseCounter}>
+                                <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                            </Pressable>
+                        </View>
+                    </View>
+                    <View style={{marginTop: "4%"}}/>
+                    <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
+                    <View style={{marginTop: "3%"}}/>
+                    <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
                 </View>
+                <View style={{marginBottom: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </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: {
+  container: {
+    width: "100%",
+    flex: 1,
+    backgroundColor: '#3F3C42',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  linearGradient: {
+    width: "100%",
+    flex: 1,
+    padding: "2%",
+    paddingTop: 0,
+  },
+  separator: {
+    marginTop: "6%"
+  },
+
+  filterBar: {
         flexDirection: "row",
-        width: 300,
-        paddingTop: 10,
-        paddingBottom: 5,
+        width: "85%",
+        paddingTop: "3%",
+        paddingBottom: "2%",
         alignItems: "flex-end",
         justifyContent: "center",
-        flex: 0.2,
-    },
-    filters: {
-        flex: 0.8,
+  },
+  filters: {
         fontSize: 20,
         color: '#ACA279',
         flex: 1,
-        padding: 5,
-        paddingLeft: 0,
-        paddingBottom: 0,
-    },
-    nbSelected: {
+  },
+  nbSelected: {
         fontSize: 11,
         color: "#3F3C42",
         textAlign: "right",
-    },
-    profilesSelection: {
-        flexDirection: 'column',
+  },
+
+  profilesSelection: {
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        paddingTop: 5,
-        marginHorizontal: 10,
-    },
-    welcome: {
-        flexDirection: 'column',
+        marginHorizontal: "3%",
+        paddingBottom: "3%",
+  },
+
+  welcome: {
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        paddingVertical: 10,
-        paddingHorizontal: 25,
-        marginHorizontal: 10,
-    },
-    text: {
+        paddingVertical: "3%",
+        paddingHorizontal: "7%",
+        marginHorizontal: "3%",
+  },
+  text: {
         fontSize: 20,
         color: '#ACA279',
     },
@@ -170,10 +173,9 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: "bold",
         color: '#59BDCD',
-        textAlign: "left",
-    },
-    ingredientSelection: {
-        flexDirection: 'column',
+  },
+
+  ingredientSelection: {
         width: "90%",
         alignItems: 'center',
         justifyContent: 'center',
@@ -181,7 +183,23 @@ const styles = StyleSheet.create({
         backgroundColor: '#E3DEC9',
         borderWidth: 2,
         borderColor: "#ACA279",
-        marginHorizontal: 10,
-        padding: 5
-    },
+        padding: "2%"
+  },
+
+  appName: {
+        fontSize: 20,
+        fontWeight: "bold",
+        color: '#3F3C42',
+        textAlign: "center",
+        flex: 0.8,
+  },
+  topBar: {
+        flexDirection: 'row',
+        width: "100%",
+        height: "11%",
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#F2F0E4',
+        paddingTop: "8%",
+  },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx
index b4cf97d..e78197c 100644
--- a/LeftOvers/screens/ModifyProfile.tsx
+++ b/LeftOvers/screens/ModifyProfile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -10,15 +10,16 @@ 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>
-        <View style={styles.container}>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView style={{minHeight: useWindowDimensions().height}}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
                 <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
-                <View style={{marginTop: 10}}/>
+                <View style={{marginTop: "3%"}}/>
                 <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+                <View style={{marginBottom: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -36,7 +37,7 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 4286cbe..2acef8f 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { 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 { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView } from 'react-native';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 
+import ProfileDetails from '../components/ProfileDetails';
+import ProfileDelete from '../components/ProfileDelete';
+
 export default function Profiles({props, navigation}) {
   const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
   const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
@@ -24,7 +24,7 @@ export default function Profiles({props, navigation}) {
   const [opacity, setOpacity] = useState(1);
   const raisePopUp = () => {
         setVisible(true)
-        setOpacity(0.4)
+        setOpacity(0.3)
   }
   const erasePopUp = () => {
         setVisible(false)
@@ -32,19 +32,18 @@ export default function Profiles({props, navigation}) {
   }
 
   return (
-    <SafeAreaProvider>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
             <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
-                <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                    <View style={{marginTop: 10}}/>
+                <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp} navigation={navigation}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
                     <View style={styles.modal}>
                         <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
                             <View style={styles.modal}>
@@ -57,13 +56,13 @@ export default function Profiles({props, navigation}) {
                                         <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}}/>
+                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
                                                     <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}}/>
+                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
                                                     <Text style={styles.noText}>No</Text>
                                                 </View>
                                             </Pressable>
@@ -73,9 +72,10 @@ export default function Profiles({props, navigation}) {
                             </View>
                         </Modal>
                     </View>
+                    <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
             </View>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -88,6 +88,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#3F3C42',
     alignItems: 'center',
     justifyContent: 'center',
+    marginBottom: 10,
   },
   linearGradient: {
     height: "100%",
@@ -96,39 +97,37 @@ const styles = StyleSheet.create({
     padding: 10,
     paddingTop: 0,
   },
-
-
+  separator: {
+    marginTop: "6%"
+  },
 
   modal: {
         position: 'absolute',
-        top: '50%',
-        left: '50%',
+        top: '8%',
         justifyContent: "center",
         alignItems: "center",
         width: "100%",
-        transform: [{ translateX: -207 }, { translateY: -140 }],
   },
   viewModal: {
         flexDirection: "column",
-        padding: 10,
+        padding: "3%",
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        height: 200,
+        flex: 1,
   },
 
-
   profileValidation: {
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
-        paddingBottom: 20,
+        marginBottom: "6%",
+        flex: 0.7,
   },
   decisionBarVertical: {
           flexDirection: "column",
-          width: "100%",
-          padding: 10,
-          height: "100%",
+          width: "90%",
+          padding: "3%",
           borderRadius: 15,
           alignItems: "center",
           justifyContent: "center",
@@ -140,23 +139,21 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0.3,
-        padding: 5,
+        marginBottom: "2%",
+        marginHorizontal: "2%",
   },
   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,
+          padding: "2%",
+          marginHorizontal: "5%",
           width: "90%",
           borderRadius: 20,
           alignItems: "center",
@@ -169,13 +166,13 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent: 'center',
       flex: 0.7,
-      padding: 5,
+      padding: "4%",
   },
   noButton: {
         flexDirection: "row",
         flex: 0.5,
-        padding: 10,
-        marginHorizontal: 10,
+        padding: "2%",
+        marginHorizontal: "5%",
         width: "90%",
         borderRadius: 20,
         alignItems: "center",
@@ -188,6 +185,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0.7,
-        padding: 5,
+        padding: "4%",
   },
 });
\ No newline at end of file