diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 02e37c5..8a8b1b2 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -5,6 +5,7 @@ import ValidateButton from './components/ValidateButton';
 import { LinearGradient } from 'expo-linear-gradient';
 import RecipeSuggestion from './screens/RecipeSuggestion';
 import RecipeDetails from './screens/RecipeDetails';
+import IngredientSelection from './screens/IngredientSelection';
 
 export default function App() {
   const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
@@ -36,14 +37,15 @@ export default function App() {
 const ingredients = generateList();
   
   return (
-    /*<RecipeSuggestion list={ingredients} diets={die} allergy={all}></RecipeSuggestion> */
-    <RecipeDetails ingredient={ingredient} 
+    <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>
+    ></RecipeDetails>*/
   );
 }
 
diff --git a/LeftOvers/naviguation/parameter.png b/LeftOvers/naviguation/parameter.png
deleted file mode 100644
index 08425b4..0000000
Binary files a/LeftOvers/naviguation/parameter.png and /dev/null differ
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 6e8fa0a..0dd8546 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -6,14 +6,36 @@ import { Searchbar } from 'react-native-paper';
 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';
 
 
-export default function IngredientSelection() {
+export default function IngredientSelection(props) {
 
   const [searchQuery, setSearchQuery] = React.useState('');
 
   const onChangeSearch = query => setSearchQuery(query);
 
+  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 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></>   
+)
+
   return (
     <SafeAreaProvider>
           <TopBar title="Ingredient selection" />
@@ -49,70 +71,26 @@ export default function IngredientSelection() {
               </View>
               <View style={{ flex: 1}} >
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-  
-                  
+                      {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>
                 </View>
                 
                 <View style={{ height: 5 }}></View>
 
-                <View style={{ flex: 1}} >
+                <View style={{ flex: 1}} > 
                 <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
-
-                  <View style={styles.horizontalAlignement}>
-                    <FoodElementText title="test" />       
-                    <Image source={brochette} style={{ width: 20, height: 20 }} />
-                  </View>
-                  <View style={{ height: 30 }}></View>
+                      {props.listIngredient.map((source, index) => (
+                        <ChooseItem key={index} value={source}></ChooseItem>
+                      ))}
                 </ScrollView>
               </View>
               <View style={{ height: 20 }}></View>
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index 6357bb3..4c88f18 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -12,6 +12,8 @@ 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.png';
+import moins from '../assets/images/minus.png';
 
 
 export default function RecipeSuggestion(props) {
@@ -44,7 +46,6 @@ export default function RecipeSuggestion(props) {
   const handleChildEventGoIngredients = (value) => {
       setVisibleFilters(false);
       setVisibleIngredients(true);
-      console.log("jai change pour iingredient");
   }
 
   const decreaseCounter = () => {
@@ -64,8 +65,14 @@ export default function RecipeSuggestion(props) {
   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 }} />
+        <Pressable>
+          <Image source={plus} style={{ width: 20, height: 20 }} />
+        </Pressable>
+        
+        <Pressable>
+          <Image source={moins} style={{ width: 20, height: 20 }} />
+        </Pressable>
+        
       </View>
   ));
 
@@ -132,11 +139,7 @@ export default function RecipeSuggestion(props) {
                                   <CustomButton title="Save"></CustomButton>
                               </View>
                           </View>
-
-
                         )}
-
-
                     </Modal>
                 </Portal>
             </PaperProvider>