diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 8a8b1b2..7ddde4d 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -1,69 +1,25 @@
 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, SafeAreaView, ScrollView, Text} from 'react-native';
+import HomePage from './screens/HomePage';
+import Profiles from './screens/Profiles';
+import ModifyProfile from './screens/ModifyProfile';
+import CreateProfile from './screens/CreateProfile';
+import FiltersSelection from './screens/FiltersSelection';
 import RecipeSuggestion from './screens/RecipeSuggestion';
 import RecipeDetails from './screens/RecipeDetails';
 import IngredientSelection from './screens/IngredientSelection';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {LinearGradient} from 'expo-linear-gradient';
 
-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"}]
-  const ingredient = [{value: "Chocolate"}, {value: "Skimmed Milk"}, {value: "Eggs"}, , {value: "Farine"}]
-  const ustensils = [{value: "Bol"}, {value: "Fouet"}, {value: "Casserole"}]
-  const steps = [{value: "Chauffer chocolat"}, 
-  {value: "1. Casser oeuf"}, 
-  {value: "2. Melanger la farine, le lait et les oeufs"},
-  {value: "3. Battre fort"},
-  {value: "4. Voler la montre de Louison"},
-  {value: "5. Melanger avec le chocolat"},
-  {value: "6. Mettre au four"},
-]
-  
-  function generateList() {
-    const list = [];
-    list.push("Meat");
-    list.push("Meat");
-    list.push("Meat");
-    list.push("Meat");
-    list.push("Teat");
-    list.push("Meat");
-    list.push("Meat");
-    list.push("Meat");
-    return list;
-}
-
-const ingredients = generateList();
-  
-  return (
-    <IngredientSelection listIngredient={ingredients}></IngredientSelection>
-    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion>*/
-    /*<RecipeDetails ingredient={ingredient} 
-    ustensils={ustensils} 
-    steps={steps} 
-    title="Chocolat Cake" 
-    number="63"
-    duree="30 minutes"
-    ></RecipeDetails>*/
+export default function App(props) {
+  return(
+    //<HomePage/>
+    //<Profiles/>
+    //<ModifyProfile/>
+    //<CreateProfile/>
+    //<FiltersSelection/>
+    //<RecipeSuggestion/>
+    //<RecipeDetails/>
+    <IngredientSelection/>
   );
-}
-
-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/components/CustomButton.tsx b/LeftOvers/components/CustomButton.tsx
index 60528ad..1a0a2bf 100644
--- a/LeftOvers/components/CustomButton.tsx
+++ b/LeftOvers/components/CustomButton.tsx
@@ -23,25 +23,22 @@ const styles = StyleSheet.create({
     width : 150,
     height: 40,
     borderRadius: 4,
-    elevation: 3,
-    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    backgroundColor: '#F2F0E4',
   },
   text: {
     fontSize: 15,
-    lineHeight: 21,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
-    color: 'white',
+    color: '#ACA279',
   },
   view: {
     width : 145,
     height: 35,
     borderRadius: 4,
-    elevation: 3,
     borderWidth: 1,
-    borderColor: 'grey',
-    alignItems: 'center', // Centre le contenu verticalement
-    justifyContent: 'center', // Centre le contenu horizontalement
+    borderColor: '#ACA279',
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: "1%",
   },
 });
 
diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index 1fe03c7..81b8b69 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -1,18 +1,14 @@
 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'; 
+import plus from '../assets/images/plus.png';
+import moins from '../assets/images/minus.png';
 
-
-
-interface foodElementImageProps {
-  source : string
+interface foodElementTextProps {
   title  : string
 }
 
-
-export default function FoodElementText(props : any) {
+export default function FoodElementText(props : foodElementTextProps) {
   return (
     <Pressable style={styles.button}>
       <View style={styles.container}>
@@ -29,33 +25,31 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 270,
-    height: 60,
+    width : "80%",
     borderRadius: 5,
-    elevation: 3,
     backgroundColor: '#E3DEC9',
+    marginHorizontal: "3%",
   },
   text: {
     fontSize: 15,
-    lineHeight: 21,
+    lineHeight: 20,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
-    padding : 7,
-    color: 'black',
+    padding : "3%",
+    color: '#3F3C42',
   },
   view: {
     alignItems: 'flex-start',
     justifyContent: 'center',
-    marginRight: 5 // Centre le contenu horizontalement
+    marginRight: "3%",
+    width: "100%"
   },
   container: {
-    width :260,
+    width: "100%",
     height: 50,
     borderRadius: 5,
-    elevation: 3,
     borderWidth: 2,
-    borderColor: 'black',
+    borderColor: '#3F3C42',
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
-});
+});
\ No newline at end of file
diff --git a/LeftOvers/components/FoodElementTextSimple.tsx b/LeftOvers/components/FoodElementTextSimple.tsx
new file mode 100644
index 0000000..e527d1f
--- /dev/null
+++ b/LeftOvers/components/FoodElementTextSimple.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import Separator from '../components/Separator';
+
+
+
+interface foodElementTextProps {
+  title: string
+}
+
+
+export default function FoodElementTextSimple(props: foodElementTextProps) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.container}>
+        <View style={styles.view}>
+            <Text style={styles.text}>{props.title}</Text>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: "80%",
+    borderRadius: 5,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    padding : "2%",
+    color: 'black',
+  },
+  view: {
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  container: {
+    width: "100%",
+    borderRadius: 5,
+    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/ParameterTopBar.tsx b/LeftOvers/components/ParameterTopBar.tsx
index 6f84163..603ddb7 100644
--- a/LeftOvers/components/ParameterTopBar.tsx
+++ b/LeftOvers/components/ParameterTopBar.tsx
@@ -1,27 +1,19 @@
 import React from 'react';
 import { Appbar } from 'react-native-paper';
 
-interface TopBarProps{
-    source : string
-    firstImage  : string
-    lastImage : string
-  }
+interface ParameterTopBarProps{
+    onEventIngredient: () => void
+    onEventFilter: () => void
+    colorIngredients: string
+    colorFilters: string
+}
   
   
-  export default function ParameterTopBar(props : any) {
-
-    const goFilter = () =>{
-        props.onEventFilter('Hello');
-    }
-
-    const goIngredients = () =>{
-        props.onEventIngredient('Hello');
-    }
-
+  export default function ParameterTopBar(props : ParameterTopBarProps) {
     return (
-        <Appbar.Header  style={{backgroundColor: '#F2F0E4', justifyContent: 'center'}} >
-            <Appbar.Action icon="magnify" onPress={goIngredients} />
-            <Appbar.Action icon="dots-vertical" onPress={goFilter} />
-      </Appbar.Header>
+        <Appbar.Header style={{backgroundColor: '#F2F0E4', height: "10%", justifyContent: "center", borderTopLeftRadius: 20, borderTopRightRadius: 20,}}>
+            <Appbar.Action icon="magnify" onPress={props.onEventIngredient} color={props.colorIngredients}/>
+            <Appbar.Action icon="dots-vertical" onPress={props.onEventFilter} color={props.colorFilters}/>
+        </Appbar.Header>
     );
   }
\ No newline at end of file
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 deb63f7..ff07507 100644
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -22,28 +22,40 @@ 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>
             <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
-            <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>
   );
@@ -51,72 +63,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,
   },
@@ -125,10 +136,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 7f66760..0f959ed 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -14,10 +14,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>
@@ -26,9 +37,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>
   );
@@ -36,77 +47,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..1399b03 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", tintColor: "#3F3C42", }}/>
           </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", tintColor: "#3F3C42", }}/>
           </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/RecipeElement.tsx b/LeftOvers/components/RecipeElement.tsx
index efd854c..e839ece 100644
--- a/LeftOvers/components/RecipeElement.tsx
+++ b/LeftOvers/components/RecipeElement.tsx
@@ -6,63 +6,40 @@ import Union_right from '../assets/images/Union_right.png';
 import background from '../assets/images/Background.png'; 
 
 interface recipeElementProps {
-  number : number
-  title  : string
-  description : string
-  imageList : string[]
-  image : string
+  number: string
+  title: string
+  textList: string[]
+  description: string
 }
 
-export default function RecipeElement(props : any) {
-
-  const totalContentCount = props.imageList.length + 11;
-  const dynamicHeight = totalContentCount * 40;
-  const scrollViewHeight = 100;
-
-
-
+export default function RecipeElement(props: recipeElementProps) {
   return (
-    <Pressable style={[styles.button, { height: dynamicHeight }]}>
-      <View style={[styles.view, { height: dynamicHeight - 10}]}>
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
         <Text style={styles.text}>{props.number}</Text>
         <Text style={styles.title}>{props.title}</Text>
-        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
-          <View style={styles.horizontalAlignement}>
-            <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
+        <Image source={props.image ? props.image : brochette} style={{width: 100, resizeMode: "contain"}}/>
+        <View style={styles.horizontalAlignment}>
+            <Image source={Union_left} style={{width: "25%", marginRight: "3%", resizeMode: "contain"}} />
             <Text style={styles.text}>Ingredients</Text>
-            <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
-          </View>
-        
-        <View style={styles.horizontalAlignement}>
-          {props.imageList.length > 0 && props.imageList.map((source, index) => (
-          <Image key={index} source={source} style={{ width: 40, height: 40 }} />
-          ))}
+            <Image source={Union_right} style={{ width: "25%", marginLeft: "3%", resizeMode: "contain"}} />
+        </View>
+        <View style={styles.horizontalAlignment}>
+            {props.textList.length > 0 && props.textList.map((source, index) => (
+                <Text key={index} style={styles.smallText}>- {source.title} -</Text>
+            ))}
         </View>
-
-        
-        {props.imageList.length <= 0 ? (
-          <View style={styles.horizontalAlignement}>
-                  {props.textList.length > 0 && props.textList.map((source, index) => (
-                    <Text key={index} style={styles.smallText}>{source}</Text>
-                  ))}
-          </View>
-          ) : null}
-
-
         <View style={styles.scrollViewContainer}>
-          <SafeAreaView>
-            <View style={styles.horizontalAlignement}>
-              <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
-              <Text style={styles.text}>Description</Text>
-              <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
+            <View style={styles.horizontalAlignment}>
+                <Image source={Union_left} style={{width: "27%", marginRight: "3%", resizeMode: "contain"}}/>
+                <Text style={styles.text}>Description</Text>
+                <Image source={Union_right} style={{width: "27%", marginLeft: "3%", resizeMode: "contain"}}/>
             </View>
-            <ScrollView style={{ marginTop: 5, height: scrollViewHeight }}>
-              <Text style={styles.smallText}>{props.description}</Text>
+            <ScrollView style={{marginTop: "3%", overflow: "hidden"}}>
+                <Text style={styles.smallText}>{props.description}</Text>
             </ScrollView>
-          </SafeAreaView>
         </View>
-
-        <Image source={background} style={{width: 210, height: 20, marginTop: dynamicHeight - 50, position: 'absolute'}}></Image>
+        <Image source={background} style={{width: "80%", resizeMode: "contain"}}></Image>
       </View>
     </Pressable>
   ); 
@@ -73,54 +50,47 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 300,
+    width: 300,
+    height: "90%",
     borderRadius: 40,
-    elevation: 3,
     backgroundColor: '#E3DEC9',
   },
   text: {
-    fontSize: 14,
-    lineHeight: 21,
+    fontSize: 15,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
     color: '#756C28',
-    marginTop: 10,
+    marginTop: "4%",
   },
   smallText: {
     fontSize: 12,
-    lineHeight: 21,
-    fontWeight: 'bold',
-    letterSpacing: 0.25,
     color: '#71662A',
     textAlign: "center",
-    margin : 5
+    margin : "2%"
   },
   title:{
     fontSize: 18,
-    lineHeight: 21,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
     color: '#524B1A',
   },
   view: {
-    width : 290,
+    width : "95%",
+    height: "96.5%",
     borderRadius: 40,
-    elevation: 3,
     borderWidth: 2,
-    borderColor: 'grey',
-    alignItems: 'center', // Centre le contenu verticalement
-    display: "flex",
-    flexWrap: "wrap",
+    padding: "5%",
+    borderColor: '#73692A',
+    alignItems: 'center',
+    justifyContent: "center",
   },
-  horizontalAlignement: {
+  horizontalAlignment: {
     display: "flex",
     flexDirection : 'row',
     alignItems: 'center', 
     justifyContent: 'space-between',
-    marginTop : 5,
+    marginTop : "2%",
     flexWrap: 'wrap',
   },
   scrollViewContainer: {
-    flex: 1, // Assurez-vous que le reste du contenu occupe l'espace restant
+    flex: 1,
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/components/RecipeElementReduce.tsx b/LeftOvers/components/RecipeElementReduce.tsx
index e61a9bc..b952ff9 100644
--- a/LeftOvers/components/RecipeElementReduce.tsx
+++ b/LeftOvers/components/RecipeElementReduce.tsx
@@ -8,24 +8,21 @@ interface recipeElementReduceProps {
   number : number
   title  : string
   image : string
-  duree : string
+  duration : string
 }
 
-
-
-export default function RecipeElementReduce(props : any) {
+export default function RecipeElementReduce(props: recipeElementReduceProps) {
   return (
-    <Pressable style={styles.button}>
+    <View style={styles.button}>
       <View style={styles.view}>
         <Text style={styles.text}>{props.number}</Text>
         <Text style={styles.title}>{props.title}</Text>
-        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
-        <View style={{marginTop: 200, position: 'absolute'}}>
-            <Image source={background} style={{width: 210, height: 20}}></Image>
-            <Text style={styles.smallText}>{props.duree}</Text>
-        </View>
+        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100, resizeMode: "contain", zIndex: 2}}/>
+        <View style={{marginBottom: "20%"}}/>
+        <Image source={background} style={{width: "80%", resizeMode: "contain", position: "absolute", zIndex: 1, top: "90%"}}></Image>
+        <Text style={styles.smallText}>{props.duration}</Text>
       </View>
-    </Pressable>
+    </View>
   ); 
 }
 
@@ -37,48 +34,39 @@ const styles = StyleSheet.create({
     width : 250,
     height: 250,
     borderRadius: 40,
-    elevation: 3,
     backgroundColor: '#E3DEC9',
   },
   text: {
-    fontSize: 14,
-    lineHeight: 21,
+    fontSize: 15,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
     color: '#756C28',
-    marginTop: 10,
+    marginTop: "4%",
+    zIndex: 2
   },
   smallText: {
-    position: 'absolute', 
-    textAlign: 'center', 
-    left: 0, 
-    right: 0, 
-    marginHorizontal: 'auto', 
-    color: '#E3DEC9',
-
+      position: "absolute",
+      fontSize: 12,
+      color: '#F2F0E4',
+      textAlign: "center",
+      margin : "2%",
+      zIndex: 2,
+      fontWeight: "bold",
+      top: "89.25%"
   },
   title:{
-    fontSize: 18,
-    lineHeight: 21,
-    fontWeight: 'bold',
-    letterSpacing: 0.25,
-    color: '#524B1A',
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: '#524B1A',
+      zIndex: 2
   },
   view: {
-    width : 240,
-    height: 240,
-    borderRadius: 40,
-    elevation: 3,
-    borderWidth: 2,
-    borderColor: 'grey',
-    alignItems: 'center', // Centre le contenu verticalement
-    display: "flex",
-    flexWrap: "wrap",
+      width : "95%",
+      height: "95%",
+      borderRadius: 40,
+      borderWidth: 2,
+      padding: "5%",
+      borderColor: '#73692A',
+      alignItems: 'center',
+      justifyContent: "center",
   },
-  horizontalAlignement: {
-    display: "flex",
-    flexDirection : 'row',
-    alignItems: 'center', 
-    marginTop: 10,
-  }
 });
\ No newline at end of file
diff --git a/LeftOvers/components/SelectedIngredient.tsx b/LeftOvers/components/SelectedIngredient.tsx
index 26e690c..8dd1681 100644
--- a/LeftOvers/components/SelectedIngredient.tsx
+++ b/LeftOvers/components/SelectedIngredient.tsx
@@ -1,58 +1,51 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, Pressable, Image, Text } from 'react-native';
+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 parameter from '../assets/images/parameter.png';
 import FoodElementText from './FoodElementText';
 
 interface SelectedIngredientProps {
-  listeIngredient: string[];
-  listeImage: string[];
-  onEvent: (value: string) => void;
+  ingredientList: string[]
+  onEvent: () => void
 }
 
 export default function SelectedIngredient(props: SelectedIngredientProps) {
   const [cpt, setCpt] = useState(0);
 
   const decreaseCounter = () => {
-    if (cpt > 0) {
+    if(cpt > 0){
       setCpt(cpt - 1);
-    } else {
-      setCpt(props.listeIngredient.length - 1);
+    }
+    else{
+      setCpt(props.ingredientList.length - 1);
     }
   };
-
   const increaseCounter = () => {
-    if (cpt < props.listeIngredient.length - 1) {
+    if(cpt < props.ingredientList.length - 1){
       setCpt(cpt + 1);
-    } else {
+    }
+    else{
       setCpt(0);
     }
   };
 
-  const handlePress = () => {
-    // Supposons que vous voulez envoyer la valeur 'Hello' au parent
-    props.onEvent('Hello');
-  };
-
   return (
     <View style={styles.view}>
-      <View id="Top" style={styles.horizontalAlignement}>
+      <View style={styles.horizontalAlignment}>
         <Text style={styles.text}>Selected ingredients</Text>
-        <Pressable onPress={handlePress}>
-          <Image source={parameter} style={{ width: 15, height: 15 }} />
+        <Pressable onPress={props.onEvent}>
+          <Image source={parameter} style={{tintColor: "#3F3C42", resizeMode: "contain", flex: 1, marginRight: "8%"}}/>
         </Pressable>
       </View>
 
-      <View id="IngredientList" style={styles.horizontalAlignement}>
-        <Pressable onPress={decreaseCounter} id="GoLeft" style={{}}>
-          <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+      <View style={styles.horizontalAlignment}>
+        <Pressable onPress={decreaseCounter}>
+          <Image source={bracketLeft} style={{width: 40, height: 40, tintColor: "#3F3C42", resizeMode: "contain"}}/>
         </Pressable>
-
-        <FoodElementText title={props.listeIngredient[cpt]} />
-
-        <Pressable onPress={increaseCounter} id="GoRight" style={{}}>
-          <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+        <FoodElementText title={props.ingredientList[cpt].title}/>
+        <Pressable onPress={increaseCounter}>
+          <Image source={bracketRight} style={{width: 40, height: 40, tintColor: "#3F3C42", resizeMode: "contain"}}/>
         </Pressable>
       </View>
     </View>
@@ -61,30 +54,26 @@ export default function SelectedIngredient(props: SelectedIngredientProps) {
 
 const styles = StyleSheet.create({
   view: {
-    width: 350,
-    height: 110,
+    width: "90%",
+    paddingBottom: "5%",
     borderRadius: 15,
-    elevation: 3,
-    borderWidth: 1,
-    borderColor: 'black',
-    display: 'flex',
-    flexWrap: 'wrap',
+    borderColor: '#3F3C42',
     backgroundColor: '#E3DEC9',
+    alignItems: "center",
+    justifyContent: "center",
   },
-  horizontalAlignement: {
-    display: 'flex',
-    height: 30,
-    width: 350,
+  horizontalAlignment: {
+    width: "90%",
     flexDirection: 'row',
-    justifyContent: 'space-around',
+    justifyContent: 'space-evenly',
     alignItems: 'center',
-    marginTop: 10,
+    marginTop: "3%",
   },
   text: {
-    fontSize: 14,
-    lineHeight: 21,
+    fontSize: 15,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
-    color: 'black',
+    color: '#3F3C42',
+    flex: 1,
+    marginLeft: "8%",
   },
 });
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/TopBar.tsx b/LeftOvers/components/TopBar.tsx
index 5a7f0c0..7c8d240 100644
--- a/LeftOvers/components/TopBar.tsx
+++ b/LeftOvers/components/TopBar.tsx
@@ -13,12 +13,11 @@ export default function TopBar(props) {
 
     return (
         <Appbar.Header  style={{backgroundColor: '#F2F0E4'}} >
-            <Appbar.BackAction onPress={_goBack} />
-            <Appbar.Content title={props.title} />
-
+            <Appbar.BackAction onPress={_goBack} color={"#3F3C42"}/>
+            <Appbar.Content title={props.title} color={"#3F3C42"}/>
             {props.isVisible &&(
-              <><Appbar.Action icon="magnify" onPress={_handleSearch} />
-              <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
+              <><Appbar.Action icon="magnify" onPress={_handleSearch} color={"#3F3C42"}/>
+              <Appbar.Action icon="dots-vertical" onPress={_handleMore} color={"#3F3C42"}/>
               </>
             )}
       </Appbar.Header>
diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx
index 1ad4d82..4639b98 100644
--- a/LeftOvers/components/ValidateButton.tsx
+++ b/LeftOvers/components/ValidateButton.tsx
@@ -10,6 +10,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={{
         alignItems: 'center',
@@ -23,18 +64,18 @@ export default function ValidateButton(props: ValidateButtonProps) {
             alignItems: 'center',
             justifyContent: "center",
             flexDirection: "row",
-            padding: 5,
-            paddingRight: 10,}}>
-            <Image source={require('../assets/images/'+props.image)} style={{
-                height: 20,
-                width: 20,
-                marginLeft: 5,
-                marginRight: 10,
-                resizeMode: "center",
+            padding: "2%",
+            paddingRight: "3%",}}>
+            <Image source={imageSource} style={{
+                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 dcf7ce7..5a13583 100644
--- a/LeftOvers/screens/HomePage.tsx
+++ b/LeftOvers/screens/HomePage.tsx
@@ -1,5 +1,5 @@
 import {React, 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';
@@ -41,15 +41,15 @@ export default function HomePage(props) {
   };
 
   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}>
+    <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"}}>
@@ -60,57 +60,57 @@ export default function HomePage(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"/>
                 </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"/>
                 </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"/>
-                     <View style={{marginTop: 10}}/>
-                     <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                    <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"/>
+                    <View style={{marginTop: "3%"}}/>
+                    <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
                 </View>
+                <View style={{marginBottom: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    height: "100%",
     width: "100%",
     flex: 1,
     backgroundColor: '#3F3C42',
@@ -118,30 +118,27 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   linearGradient: {
-    height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    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,
         fontSize: 20,
         color: '#ACA279',
         flex: 1,
-        padding: 5,
-        paddingLeft: 0,
-        paddingBottom: 0,
   },
   nbSelected: {
         fontSize: 11,
@@ -150,23 +147,22 @@ const styles = StyleSheet.create({
   },
 
   profilesSelection: {
-        flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        paddingTop: 5,
-        marginHorizontal: 10,
+        marginHorizontal: "3%",
+        paddingBottom: "3%",
   },
+
   welcome: {
-        flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        paddingVertical: 10,
-        paddingHorizontal: 25,
-        marginHorizontal: 10,
+        paddingVertical: "3%",
+        paddingHorizontal: "7%",
+        marginHorizontal: "3%",
   },
   text: {
         fontSize: 20,
@@ -176,10 +172,9 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: "bold",
         color: '#59BDCD',
-        textAlign: "left",
   },
+
   ingredientSelection: {
-        flexDirection: 'column',
         width: "90%",
         alignItems: 'center',
         justifyContent: 'center',
@@ -187,8 +182,7 @@ const styles = StyleSheet.create({
         backgroundColor: '#E3DEC9',
         borderWidth: 2,
         borderColor: "#ACA279",
-        marginHorizontal: 10,
-        padding: 5
+        padding: "2%"
   },
 
   appName: {
@@ -201,9 +195,10 @@ const styles = StyleSheet.create({
   topBar: {
         flexDirection: 'row',
         width: "100%",
+        height: "11%",
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: '#F2F0E4',
-        padding: 5,
+        paddingTop: "8%",
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 5ddc0bd..e49b9ed 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -1,128 +1,133 @@
 import React from 'react';
-import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
+import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import TopBar from '../components/TopBar';
 import {Searchbar} from 'react-native-paper';
-import brochette from '../assets/images/brochette.png'; 
+import {LinearGradient} from 'expo-linear-gradient';
+import brochette from '../assets/images/brochette.png';
 import FoodElementText from '../components/FoodElementText';
 import CustomButton from '../components/CustomButton';
-import plus from '../assets/images/plus.png';
-import moins from '../assets/images/minus.png';
+import plus from '../assets/images/plus_small.png';
+import minus from '../assets/images/minus.png';
 import meat from '../assets/images/meat_icon.png';
 import vegetable from '../assets/images/vegetable_icon.png';
 import fruit from '../assets/images/fruit_icon.png';
 
 
 export default function IngredientSelection(props) {
-
   const [searchQuery, setSearchQuery] = React.useState('');
-
   const onChangeSearch = query => setSearchQuery(query);
+  const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
+  const availableList = [{title: "Tomato"}, {title: "Lemon"}, {title: "Strawberry"}, {title: "Rice"}, {title: "Flour"}]
 
   type ItemProps = {value: string}
 
-  const AvailaibleItem = ({value}: ItemProps) => (
-    <><View style={styles.horizontalAlignement}>
-      <FoodElementText title={value} />
-      <Pressable>
-        <Image source={plus} style={{ width: 20, height: 20 }} />
-      </Pressable>
-    </View><View style={{ height: 30 }}></View></>   
-)
+  const AvailableItem = ({value}: any) => (
+    <>
+        <View style={styles.horizontalAlignment}>
+            <FoodElementText title={value.title}/>
+            <Pressable>
+                <Image source={plus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
+            </Pressable>
+        </View>
+        <View style={{height: 20}}/>
+    </>
+  )
 
-const ChooseItem = ({value}: ItemProps) => (
-  <><View style={styles.horizontalAlignement}>
-    <FoodElementText title={value} />
-    <Pressable>
-      <Image source={moins} style={{ width: 20, height: 20 }} />
-    </Pressable>
-  </View><View style={{ height: 30 }}></View></>   
-)
+  const ChooseItem = ({value}: any) => (
+    <>
+        <View style={styles.horizontalAlignment}>
+            <FoodElementText title={value.title}/>
+            <Pressable>
+                <Image source={minus} style={{width: 20, height: 20, resizeMode: "contain", marginRight: "3%"}}/>
+            </Pressable>
+        </View>
+        <View style={{height: 20}}/>
+    </>
+  )
 
   return (
-    <SafeAreaProvider>
-          <TopBar title="Ingredient selection" />
-          <View style={styles.page}>
-
-            <View style={styles.element}>
-              <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
-                <Pressable>
-                    <Image source={meat} style={{ width: 30, height: 30 }} />
-                </Pressable>
-                <Pressable>
-                    <Image source={vegetable} style={{ width: 30, height: 30 }} />
-                </Pressable>
-                <Pressable>
-                    <Image source={fruit} style={{ width: 30, height: 30 }} />
-                </Pressable>
-              </View>
-              <View>
-              <Searchbar
-                  placeholder="Search"
-                  onChangeText={onChangeSearch}
-                  value={searchQuery} 
-                  style={{margin: 10, 
-                          backgroundColor: '#F2F0E4', 
-                          borderWidth : 1,
-                          borderColor: "#ACA279", 
-                          borderRadius: 15,
-                          height: 50,
-                          }}/>
-              </View>
-              <View style={{ flex: 1}} >
-                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
-                      {props.listIngredient.map((source, index) => (
-                        <AvailaibleItem key={index} value={source}></AvailaibleItem>
-                      ))}
-                </ScrollView>
-              </View>
-              <View style={{ height: 20 }}></View>
-            </View>
-
-            <View style={[styles.element, {marginTop:  40}]}>
-                <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
-                  <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+    <SafeAreaProvider style={{flex: 1}}>
+        <TopBar title="Ingredient selection"/>
+        <ScrollView>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
+                <View style={styles.element}>
+                    <View style={[styles.horizontalAlignment, {justifyContent: 'center'}]}>
+                        <Pressable>
+                            <Image source={meat} style={{width: 30, height: 30, resizeMode: "contain"}}/>
+                        </Pressable>
+                        <View style={{marginHorizontal: "1%"}}/>
+                        <Pressable>
+                            <Image source={vegetable} style={{width: 30, height: 30, resizeMode: "contain"}}/>
+                        </Pressable>
+                        <View style={{marginHorizontal: "1%"}}/>
+                        <Pressable>
+                            <Image source={fruit} style={{width: 30, height: 30, resizeMode: "contain"}}/>
+                        </Pressable>
+                    </View>
+                    <View>
+                        <Searchbar
+                            placeholder="Search"
+                            onChangeText={onChangeSearch}
+                            value={searchQuery}
+                            style={{margin: "3%",
+                                    backgroundColor: '#F2F0E4',
+                                    borderWidth : 1,
+                                    borderColor: "#ACA279",
+                                    borderRadius: 15,
+                            }}/>
+                    </View>
+                    <View style={{flex: 1}}>
+                        <ScrollView>
+                            {ingredientList.map((title, index) => (
+                                <AvailableItem key={index} value={title}></AvailableItem>
+                            ))}
+                        </ScrollView>
+                    </View>
                 </View>
-                
-                <View style={{ height: 5 }}></View>
-
-                <View style={{ flex: 1}} > 
-                <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                      {props.listIngredient.map((source, index) => (
-                        <ChooseItem key={index} value={source}></ChooseItem>
-                      ))}
-                </ScrollView>
-              </View>
-              <View style={{ height: 20 }}></View>
-            </View>
-
-            <View style={{ height: 15 }}></View>
-            <CustomButton title="Find a recipe"/>                
-          </View>
-        </SafeAreaProvider>
+                <View style={{marginTop: "6%"}}/>
+                <View style={styles.element}>
+                    <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
+                      <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+                    </View>
+                    <View style={{flex: 1}}>
+                        <ScrollView>
+                            {availableList.map((title, index) => (
+                                <ChooseItem key={index} value={title}></ChooseItem>
+                            ))}
+                        </ScrollView>
+                    </View>
+                </View>
+                <View style={{marginTop: "8%"}}></View>
+                <CustomButton title="Find a recipe"/>
+                <View style={{marginBottom: "20%"}}></View>
+            </LinearGradient>
+        </ScrollView>
+    </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
-  page: {
-    flex: 1,
-    backgroundColor: '#59BDCD',
-    alignItems: 'center',
-    display: 'flex',
-    flexWrap: 'wrap',
-    padding: 20,
+  linearGradient: {
+        width: "100%",
+        flex: 1,
+        padding: "3%",
+        paddingTop: 0,
+        alignItems: "center",
+        justifyContent: "flex-start",
   },
+
   element: {
-    backgroundColor:'#F2F0E4', 
+    width: "100%",
+    backgroundColor:'#F2F0E4',
     borderRadius: 30,
   },
-  horizontalAlignement: {
-    display: 'flex',
-    height: 30,
-    width: 350,
+  horizontalAlignment: {
+    width: "100%",
     flexDirection: 'row',
     justifyContent: 'space-around',
     alignItems: 'center',
-    marginTop: 15,
+    marginTop: "3%",
   }
-});
+});
\ No newline at end of file
diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx
index 1a8b096..85c55e3 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,16 +10,17 @@ 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>
+    <SafeAreaProvider style={{flex: 1}}>
         <TopBar title="Modify Profile" isVisible="true"/>
-        <View style={styles.container}>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+        <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>
   );
 }
@@ -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/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 0f2e83e..34d8e6b 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -1,12 +1,12 @@
 import {React, useState} from 'react';
-import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
+import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions} 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) {
+export default function Profiles(props) {
   const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
   const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
 
@@ -23,7 +23,7 @@ export default function ModifyProfile(props) {
   const [opacity, setOpacity] = useState(1);
   const raisePopUp = () => {
         setVisible(true)
-        setOpacity(0.4)
+        setOpacity(0.3)
   }
   const erasePopUp = () => {
         setVisible(false)
@@ -31,20 +31,19 @@ export default function ModifyProfile(props) {
   }
 
   return (
-    <SafeAreaProvider>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
             <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}}/>
+                <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}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <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}>
@@ -57,13 +56,13 @@ export default function ModifyProfile(props) {
                                         <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 ModifyProfile(props) {
                             </View>
                         </Modal>
                     </View>
+                    <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
             </View>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -88,47 +88,46 @@ const styles = StyleSheet.create({
     backgroundColor: '#3F3C42',
     alignItems: 'center',
     justifyContent: 'center',
+    marginBottom: 10,
   },
   linearGradient: {
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     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
diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx
index 6412252..33a44f2 100644
--- a/LeftOvers/screens/RecipeDetails.tsx
+++ b/LeftOvers/screens/RecipeDetails.tsx
@@ -1,71 +1,93 @@
 import React from 'react';
-import { View, StyleSheet, Text} from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
+import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native';
+import {SafeAreaProvider } from 'react-native-safe-area-context';
+import {LinearGradient} from 'expo-linear-gradient';
 import TopBar from '../components/TopBar';
 import RecipeElementReduce from '../components/RecipeElementReduce';
-import AllergiesTab from '../components/AllergiesTab';
-
+import ListWithoutSelect from '../components/ListWithoutSelect';
+import ValidateButton from '../components/ValidateButton';
 
 export default function RecipeDetails(props) {
+    const ing = [{value: "Chocolate"}, {value: "Milk"}, {value: "Eggs"}, {value: "Flour"}]
+    const ute = [{value: "Spoon (3cl)"}, {value: "Whisk"}, {value: "Oven"}]
+    const ste = [
+        {value: "1. Break the eggs and whisk them. Add the flour."},
+        {value: "2. Melt the chocolate in the microwave. Add it to the eggs."},
+        {value: "3. Put the cake in the oven. 40 minutes, 180 degrees."},
+        {value: "4. Clean the utensils."}
+    ]
+
     return (
         <SafeAreaProvider>
           <TopBar title="Recipe Detail"/>
-          <View style={styles.page}>
-            <RecipeElementReduce 
-                title={props.title} 
-                number={props.number}
-                duree={props.duree}/>
-
-            <View style={{height: 20}}></View>
-
-            <View style={styles.element}>
-              <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
-                    <Text style={{fontSize: 20, color: '#ACA279'}}>Preparation</Text>
-              </View>
-              <View style={{margin: 20}}>
-                <AllergiesTab title="Ingredient" content={props.ingredient}></AllergiesTab>
-                <View style={{height: 5}}></View>
-                <AllergiesTab title="Ustensils" content={props.ustensils}></AllergiesTab>
-              </View>
-            </View >
-
-            <View style={{height: 20}}></View>
-                
-            <View style={styles.element}>
-              <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
-                  <Text style={{fontSize: 20, color: '#ACA279'}}>Cooking</Text>
-              </View>
-              <View style={{margin: 20}}>
-                <AllergiesTab title="Steps" content={props.steps}></AllergiesTab>
-              </View>
-            </View>
-            
-          </View>
+          <ScrollView>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}>
+                    <RecipeElementReduce title="Meat Stick" number="63" duration="15 minutes"/>
+                </View>
+                <View style={styles.separator}/>
+                <View style={styles.background}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Preparation</Text>
+                    </View>
+                    <ListWithoutSelect title="Ingredients" content={ing}></ListWithoutSelect>
+                    <View style={{marginTop: "3%"}}/>
+                    <ListWithoutSelect title="Utensils" content={ute}></ListWithoutSelect>
+                    <View style={{marginTop: "3%"}}/>
+                </View>
+                <View style={styles.separator}/>
+                <View style={styles.background}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Cooking</Text>
+                    </View>
+                    <ListWithoutSelect title="Steps" content={ste}></ListWithoutSelect>
+                    <View style={{marginTop: "3%"}}/>
+                </View>
+                <View style={{marginBottom: "20%"}}/>
+            </LinearGradient>
+          </ScrollView>
         </SafeAreaProvider>
       );
     }
     
     const styles = StyleSheet.create({
-      page: {
-        flex: 1,
-        backgroundColor: '#59BDCD',
-        alignItems: 'center',
-        display: 'flex',
-        flexWrap: 'wrap',
-        padding: 20,
+      linearGradient: {
+            width: "100%",
+            flex: 1,
+            alignItems: "center",
+            justifyContent: "flex-start"
+      },
+      separator: {
+            marginTop: "6%",
+      },
+
+      background: {
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 20,
+              backgroundColor: '#F2F0E4',
+              padding: "3%",
+              marginHorizontal: "3%",
+      },
+
+      filterBar: {
+                flexDirection: "row",
+                width: "85%",
+                paddingTop: "3%",
+                paddingBottom: "2%",
+                alignItems: "flex-end",
+                justifyContent: "center",
+      },
+      filters: {
+                fontSize: 20,
+                color: '#ACA279',
+                flex: 1,
       },
-      element: {
-        backgroundColor:'#F2F0E4', 
-        borderRadius: 30,
+      nbSelected: {
+                fontSize: 11,
+                color: "#3F3C42",
+                textAlign: "right",
       },
-      horizontalAlignement: {
-        display: 'flex',
-        height: 30,
-        width: 350,
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        marginTop: 10,
-      }
     });
     
\ No newline at end of file
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index eebd752..9d1d25b 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -1,174 +1,240 @@
 import React, { useState } from 'react';
-import { View, StyleSheet, Text, Image, Pressable} from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { Modal, Portal, PaperProvider} from 'react-native-paper';
+import {View, StyleSheet, Text, Image, Pressable, useWindowDimensions, ScrollView} from 'react-native';
+import {SafeAreaProvider } from 'react-native-safe-area-context';
+import {Modal, Portal, PaperProvider} from 'react-native-paper';
+import {LinearGradient} from 'expo-linear-gradient';
 import TopBar from '../components/TopBar';
 import RecipeElement from '../components/RecipeElement';
 import SelectedIngredient from '../components/SelectedIngredient';
+import FoodElementTextSimple from '../components/FoodElementTextSimple';
 import FoodElementText from '../components/FoodElementText';
 import brochette from '../assets/images/brochette.png'; 
 import ParameterTopBar from '../components/ParameterTopBar';
+import ListSelect from '../components/ListSelect';
+import ListWithoutSelect from '../components/ListWithoutSelect';
+import ValidateButton from '../components/ValidateButton';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 import CustomButton from '../components/CustomButton';
-import DietsTab from '../components/DietsTab';
+import plus from '../assets/images/plus_small.png';
+import minus from '../assets/images/minus.png';
 
 
 export default function RecipeSuggestion(props) {
-
-  const imageList = [];
   const [visible, setVisible] = React.useState(false);
   const [visibleFilters, setVisibleFilters] = React.useState(false);
   const [visibleIngredients, setVisibleIngredients] = React.useState(true);
   const [minCpt, setMinCpt] = useState(0);
   const [maxCpt, setMaxCpt] = useState(4);
-  const listeIngredient = props.list;
-  const limitedList = listeIngredient.slice(minCpt, maxCpt);
-  const showModal = () => setVisible(true);
-  const hideModal = () => setVisible(false);
+  const ingredientList = [{title: "Steak"}, {title: "Sheep Ribs"}, {title: "Rabbit Thigh"}, {title: "Ham"}, {title: "Cream (Liquid)"}, {title: "Pepper Bell"}]
+  const ingredientListV2 = [{title: "Smoked Salmon"}, {title: "Tomato"}, {title: "Carrot"}]
+  const limitedList = ingredientList.slice(minCpt, maxCpt);
+  const [colorIngredients, setColorIngredients] = useState("#59BDCD");
+  const [colorFilters, setColorFilters] = useState("#3F3C42");
+
+  const die = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Gluten free"}, {value: "Porkless"}]
+  const all = []
+
   const containerStyle = {
-    backgroundColor: 'white',
-    height: 450,
-    width: 380,
+    //minHeight: useWindowDimensions().height/2,
+    //width: useWindowDimensions().width,
+    height: "75%",
+    width: "100%",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
   };
   
-  const handleChildEvent = (value) => {
-   setVisible(!visible)
-  };
-
-  const handleChildEventGoFilters = (value) => {
+  const handleChildEvent = () => {
+    setVisible(!visible)
+  }
+  const handleChildEventGoFilters = () => {
     setVisibleIngredients(false);
     setVisibleFilters(true);
+    setColorFilters("#59BDCD")
+    setColorIngredients("#3F3C42")
   }
-
-  const handleChildEventGoIngredients = (value) => {
+  const handleChildEventGoIngredients = () => {
       setVisibleFilters(false);
       setVisibleIngredients(true);
-      console.log("jai change pour iingredient");
+      setColorFilters("#3F3C42")
+      setColorIngredients("#59BDCD")
   }
 
   const decreaseCounter = () => {
     if (minCpt > 0) {
       setMinCpt(minCpt - 4);
       setMaxCpt(maxCpt - 4)
-    } 
-  };
-
+    }
+    else{
+        setMaxCpt(ingredientList.length+ingredientList.length%4)
+        var cpt=ingredientList.length-(ingredientList.length%4)
+        setMinCpt(cpt)
+    }
+  }
   const increaseCounter = () => {
-    if (maxCpt < listeIngredient.length) {
+    if (maxCpt < ingredientList.length) {
       setMinCpt(minCpt + 4);
       setMaxCpt(maxCpt + 4)
-    } 
-  };
+    }
+    else{
+        setMinCpt(0)
+        setMaxCpt(4)
+    }
+  }
 
   const imageElements = limitedList.map((source, index) => (
-      <View style={[styles.horizontalAlignement, { marginBottom: 10 }]}>
-        <FoodElementText key={index} title={source} />
-        <Image source={brochette} style={{ width: 20, height: 20 }} />
-        <Image source={brochette} style={{ width: 20, height: 20 }} />
+      <View style={[styles.horizontalAlignment, {marginVertical: "3%"}]}>
+        <FoodElementTextSimple title={source.title}/>
+        <Image source={plus} style={{width: 20, resizeMode: "contain"}}/>
+        <Image source={minus} style={{width: 20, resizeMode: "contain"}}/>
       </View>
   ));
 
   return (
-    <SafeAreaProvider>
+    <SafeAreaProvider style={{flex: 1}}>
+    <PaperProvider>
       <TopBar title="Recipes" isVisible="true"/>
-      <View style={styles.page}>
-        <SelectedIngredient 
-          listeIngredient={props.list} 
-          listeImage={imageList} 
-          onEvent={handleChildEvent} 
-        />
-        <View style={{ marginTop: 100 }}>
-          <RecipeElement
-            number="13"
-            title="Pizza with Pineapples"
-            imageList={imageList}
-            textList={props.list}
-            description="delicious plate that will please you"
-            style={styles.element}
-          />
-        </View>
-      </View>
-      <View style={styles.modal}>
-            <PaperProvider>
-                <Portal>
-                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
-                        <ParameterTopBar  onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients}></ParameterTopBar>
-
-                        {visibleIngredients && (
-                        <View style={[styles.page, { justifyContent: 'space-between' }]}>   
-                                    {imageElements}
-                                    <View id="IngredientList" style={[styles.horizontalAlignement, {marginTop: 10}]}>
-                                        <Pressable onPress={decreaseCounter} id="GoLeft" >
-                                          <Image source={bracketLeft} style={{ width: 20, height: 20 }} />
-                                        </Pressable>
-
-                                        <Pressable onPress={increaseCounter} id="GoRight">
-                                          <Image source={bracketRight} style={{ width: 20, height: 20 }} />
-                                        </Pressable>
-                                      </View>
-
-                                      <View>
-                                          <CustomButton title="Save"></CustomButton>
-                                      </View>
+      <ScrollView>
+        <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+            <View style={{marginTop: "6%"}}/>
+            <SelectedIngredient
+              ingredientList={ingredientList}
+              onEvent={handleChildEvent}/>
+            <ScrollView style={{marginTop: "6%"}} horizontal={true}>
+              <View style={{marginHorizontal: 10}}/>
+              <RecipeElement
+                    number="63"
+                    title="Meat Stick"
+                    textList={ingredientList}
+                    description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook."/>
+              <View style={{marginHorizontal: 10}}/>
+              <RecipeElement
+                    number="03"
+                    title="Vichyssoise"
+                    textList={ingredientListV2}
+                    description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."/>
+              <View style={{marginHorizontal: 10}}/>
+            </ScrollView>
+            <View style={{marginBottom: "20%"}}/>
+        </LinearGradient>
+      </ScrollView>
+      <Portal>
+            <Modal visible={visible} onDismiss={handleChildEvent} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-end"}}>
+                <ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients} colorFilters={colorFilters} colorIngredients={colorIngredients}/>
+                {visibleIngredients &&(
+                    <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
+                        {imageElements}
+                        <View style={[styles.horizontalAlignment, {marginTop: "6%"}]}>
+                             <Pressable onPress={decreaseCounter}>
+                                  <Image source={bracketLeft} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
+                             </Pressable>
+                             <CustomButton title="Save"></CustomButton>
+                             <Pressable onPress={increaseCounter}>
+                                  <Image source={bracketRight} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
+                             </Pressable>
                         </View>
-                        )} 
-
-                        {visibleFilters &&(
-                           <View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}>
+                    </LinearGradient>
 
-                            <View style={{backgroundColor: '#F2F0E4', zIndex: 2}}>
-                              <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 20}]}>
-                                  <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
-                              </View>
-                              <View style={{alignContent: 'center', justifyContent: 'space-between', margin: 10}}>
-                                <DietsTab title="Diets" content={props.diets}></DietsTab>
-                                <View style={{height: 5}}></View>
-                                <DietsTab title="Allergy" content={props.allergy}></DietsTab>
-                              </View>
-                              
+                )}
+                {visibleFilters &&(
+                    <ScrollView>
+                    <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
+                        <View style={{marginTop: "10%"}}/>
+                        <View style={styles.background}>
+                            <View style={styles.filterBar}>
+                                <Text style={styles.filters}>Additional Filters</Text>
+                                <Text style={styles.nbSelected}>{die.length} selected</Text>
                             </View>
-                              <View style={{zIndex: 1, position: 'absolute', marginTop: 300}} >
-                                  <CustomButton title="Save"></CustomButton>
-                              </View>
-                          </View>
-                        )}
-                    </Modal>
-                </Portal>
-            </PaperProvider>
-        </View>
+                            <ListWithoutSelect title="Diets" content={die}></ListWithoutSelect>
+                            <View style={{marginTop: "3%"}}/>
+                            <ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
+                            <View style={{marginTop: "3%"}}/>
+                            <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
+                        </View>
+                        <View style={{marginTop: "6%"}}/>
+                        <View>
+                            <CustomButton title="Save"></CustomButton>
+                        </View>
+                        <View style={{marginTop: "43%"}}/>
+                    </LinearGradient>
+                    </ScrollView>
+                )}
+            </Modal>
+      </Portal>
+    </PaperProvider>
     </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
-  page: {
-    flex: 1,
-    backgroundColor: '#59BDCD',
-    alignItems: 'center',
-    display: 'flex',
-    flexWrap: 'wrap',
-    padding: 20,
+  linearGradient: {
+      width: "100%",
+      flex: 1,
+      //padding: "2%",
+      paddingTop: 0,
+      alignItems: "center",
+      justifyContent: "center"
+  },
+
+  background: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#F2F0E4',
+        padding: "3%",
+        marginHorizontal: "3%",
+  },
+
+  filterBar: {
+          flexDirection: "row",
+          width: "85%",
+          paddingTop: "3%",
+          paddingBottom: "2%",
+          alignItems: "flex-end",
+          justifyContent: "center",
   },
-  element: {
-    marginTop: 20,
+  filters: {
+          fontSize: 20,
+          color: '#ACA279',
+          flex: 1,
   },
-  backdrop: {
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  nbSelected: {
+          fontSize: 11,
+          color: "#3F3C42",
+          textAlign: "right",
   },
+
+  page: {
+      flex: 1,
+      backgroundColor: '#59BDCD',
+      alignItems: 'center',
+      paddingHorizontal: "3%",
+  },
+
   modal :{
     position: 'absolute',
-    top: '50%', // Centre verticalement
-    left: '50%', // Centre horizontalement
-    transform: [{ translateX: -185 }, { translateY: -90 }], // Ajustez en fonction de la moitié de la hauteur et de la largeur
+    top: '50%',
+    height: "50%",
+    width: "100%",
+    borderWidth: 1,
+    borderColor: "red",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
   },
-  horizontalAlignement: {
+  horizontalAlignment: {
     display: 'flex',
-    height: 30,
-    width: 350,
+    height: "10%",
+    width: "100%",
     flexDirection: 'row',
-    justifyContent: 'space-around',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    marginTop: 10,
-  }
+  },
+
+  recipes: {
+        flexDirection: "row",
+        overflow: "scroll",
+        alignItems: "flex-start",
+        justifyContent: "center",
+  },
 });
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0e6371f
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}