diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 0b62476..02e37c5 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -3,18 +3,47 @@ import {StyleSheet, View } from 'react-native';
 import ProfileModification from './components/ProfileModification';
 import ValidateButton from './components/ValidateButton';
 import { LinearGradient } from 'expo-linear-gradient';
+import RecipeSuggestion from './screens/RecipeSuggestion';
+import RecipeDetails from './screens/RecipeDetails';
 
 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 (
-    <View style={styles.container}>
-        <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-            <ProfileModification name="Johnny Silverhand" avatar="plus.png" diets={die} allergies={all}></ProfileModification>
-            <View style={{marginTop: 10}}/>
-            <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
-        </LinearGradient>
-    </View>
+    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion> */
+    <RecipeDetails ingredient={ingredient} 
+    ustensils={ustensils} 
+    steps={steps} 
+    title="Chocolat Cake" 
+    number="63"
+    duree="30 minutes"
+    ></RecipeDetails>
   );
 }
 
diff --git a/LeftOvers/package-lock.json b/LeftOvers/package-lock.json
index c75e7ca..31f60a2 100644
--- a/LeftOvers/package-lock.json
+++ b/LeftOvers/package-lock.json
@@ -18,6 +18,8 @@
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
         "react-native-dropdown-select-list": "^2.0.5",
+        "react-native-paper": "^5.11.1",
+        "react-native-safe-area-context": "^4.7.4",
         "react-native-splash-screen": "^3.3.0",
         "react-native-web": "~0.19.6",
         "typescript": "^5.1.3"
@@ -1970,6 +1972,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@callstack/react-theme-provider": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz",
+      "integrity": "sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==",
+      "dependencies": {
+        "deepmerge": "^3.2.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/@callstack/react-theme-provider/node_modules/deepmerge": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
+      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -7675,6 +7697,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -7688,6 +7719,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -10126,6 +10166,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -14805,6 +14858,31 @@
       "resolved": "https://registry.npmjs.org/react-native-dropdown-select-list/-/react-native-dropdown-select-list-2.0.5.tgz",
       "integrity": "sha512-TepbcagQVUMB6nLuIlVU2ghRpQHAECOeZWe8K04ymW6NqbKbxuczZSDFfdCiABiiQ2dFD+8Dz65y4K7/uUEqGg=="
     },
+    "node_modules/react-native-paper": {
+      "version": "5.11.1",
+      "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-5.11.1.tgz",
+      "integrity": "sha512-axqRTagGL8LtuYh172cx2Q2THOVJ3PTpPjCKhL5ECRdpJs2ceiboVecSiOIBuO3H7dVpaneptBA0vJr9HeVHwg==",
+      "dependencies": {
+        "@callstack/react-theme-provider": "^3.0.9",
+        "color": "^3.1.2",
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": "*",
+        "react-native-vector-icons": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.4.tgz",
+      "integrity": "sha512-3LR3DCq9pdzlbq6vsHGWBFehXAKDh2Ljug6jWhLWs1QFuJHM6AS2+mH2JfKlB2LqiSFZOBcZfHQFz0sGaA3uqg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-splash-screen": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
@@ -14813,6 +14891,72 @@
         "react-native": ">=0.57.0"
       }
     },
+    "node_modules/react-native-vector-icons": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-10.0.2.tgz",
+      "integrity": "sha512-ZwhUkJhIMkGL3cW7IT4sEEHu2AOzerqsRQ73UzXsB+ecBpVK5bRmp0XswiQleZKZalZfs/WIfWLXLfTQHcQo6A==",
+      "peer": true,
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "fa-upgrade.sh": "bin/fa-upgrade.sh",
+        "fa5-upgrade": "bin/fa5-upgrade.sh",
+        "fa6-upgrade": "bin/fa6-upgrade.sh",
+        "generate-icon": "bin/generate-icon.js"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/cliui": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+      "peer": true,
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "peer": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "peer": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/react-native-vector-icons/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -15534,6 +15678,19 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -16580,6 +16737,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
diff --git a/LeftOvers/package.json b/LeftOvers/package.json
index 0357d85..e3e3094 100644
--- a/LeftOvers/package.json
+++ b/LeftOvers/package.json
@@ -19,6 +19,8 @@
     "react-dom": "18.2.0",
     "react-native": "0.72.6",
     "react-native-dropdown-select-list": "^2.0.5",
+    "react-native-paper": "^5.11.1",
+    "react-native-safe-area-context": "^4.7.4",
     "react-native-splash-screen": "^3.3.0",
     "react-native-web": "~0.19.6",
     "typescript": "^5.1.3"
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 39e61f9..6e8fa0a 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -109,7 +109,7 @@ export default function IngredientSelection() {
                   <View style={{ height: 30 }}></View>
 
                   <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
+                    <FoodElementText title="test" />       
                     <Image source={brochette} style={{ width: 20, height: 20 }} />
                   </View>
                   <View style={{ height: 30 }}></View>
diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx
index 2b51f33..6412252 100644
--- a/LeftOvers/screens/RecipeDetails.tsx
+++ b/LeftOvers/screens/RecipeDetails.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { View, StyleSheet} from 'react-native';
+import { View, StyleSheet, Text} from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import TopBar from '../components/TopBar';
 import RecipeElementReduce from '../components/RecipeElementReduce';
+import AllergiesTab from '../components/AllergiesTab';
 
 
 export default function RecipeDetails(props) {
@@ -14,6 +15,31 @@ export default function RecipeDetails(props) {
                 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>
         </SafeAreaProvider>
       );
@@ -29,7 +55,8 @@ export default function RecipeDetails(props) {
         padding: 20,
       },
       element: {
-        marginTop: 20,
+        backgroundColor:'#F2F0E4', 
+        borderRadius: 30,
       },
       horizontalAlignement: {
         display: 'flex',
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index 25c9d82..6357bb3 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -11,6 +11,7 @@ import ParameterTopBar from '../components/ParameterTopBar';
 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';
 
 
 export default function RecipeSuggestion(props) {
@@ -114,9 +115,20 @@ export default function RecipeSuggestion(props) {
                         )} 
 
                         {visibleFilters &&(
-                           <View style={[styles.page, { justifyContent: 'space-between'}]}>
-                              <Text>HEHEHEHEHEHEHE</Text>
-                              <View>
+                           <View style={[styles.page, { justifyContent: 'space-between', alignContent: 'center'}]}>
+
+                            <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>
+                              
+                            </View>
+                              <View style={{zIndex: 1, position: 'absolute', marginTop: 300}} >
                                   <CustomButton title="Save"></CustomButton>
                               </View>
                           </View>