diff --git a/LeftOvers/components/ListWithoutSelect.tsx b/LeftOvers/components/ListWithoutSelect.tsx
index ce43197..3885f1b 100644
--- a/LeftOvers/components/ListWithoutSelect.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@@ -5,7 +5,7 @@ import ColorContext from '../theme/ColorContext';
 
 type ListProps = {
     title: string
-    content: {title: string}[]
+    content: {value: string}[]
 }
 
 export default function ListWithoutSelect(props: ListProps) {
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
index 0afa801..5295cf2 100644
--- a/LeftOvers/components/ProfileDelete.tsx
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -6,8 +6,8 @@ import ColorContext from '../theme/ColorContext';
 type ProfileProps = {
   name: string
   avatar: string
-  diets: {title: string}[]
-  allergies: {title: string}[]
+  diets: {value: string}[]
+  allergies: {value: string}[]
 }
 
 export default function ProfileDelete(props: ProfileProps) {
@@ -84,7 +84,7 @@ export default function ProfileDelete(props: ProfileProps) {
     },
     filters: {
         fontSize: 20,
-        color: colors.cardElementBackground,
+        color: colors.cardElementBorder,
         flex: 1,
         padding: "2%",
         paddingLeft: 0,
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 9bfe6ca..cd1b0a5 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -21,7 +21,9 @@ export default function IngredientSelection(props) {
   const [selectedIngredients, setSelectedIngredients] = useState([]);
   const ingredientService = new IngredientService();
   const {colors} = useContext(ColorContext);
-
+  const [availableSize, setAvailableSize] = useState(0);
+  const [listVisibility, setListVisibility] = useState("none");
+  const [availableVisibility, setAvailableVisibility] = useState("none");
   const [searchQuery, setSearchQuery] = useState('');
 
   const filterIngredients = async (query) => {
@@ -67,10 +69,10 @@ const loadIngredients = async () => {
       <View style={styles.horizontalAlignment}>
         <FoodElementText title={value.name} />
         <Pressable onPress={() => SelectIngredient(value)}>
-          <Image source={plus} style={{ width: 20, height: 20 }} />
+          <Image source={plus} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
         </Pressable>
       </View>
-      <View style={{ height: 30 }}></View>
+      <View style={{ height: 20 }}></View>
     </>
   );
 
@@ -79,26 +81,65 @@ const loadIngredients = async () => {
       <View style={styles.horizontalAlignment}>
         <FoodElementText title={value.name} />
         <Pressable onPress={() => RemoveIngredient(value.id)}>
-          <Image source={moins} style={{ width: 20, height: 20 }} />
+          <Image source={moins} style={{ width: 20, height: 20, tintColor: colors.cardDetail }} />
         </Pressable>
       </View>
-      <View style={{ height: 30 }}></View>
+      <View style={{ height: 20 }}></View>
     </>
   );
 
   const SelectIngredient = (newIngredient: Ingredient) => {
     const exists = selectedIngredients.find((ingredient) => ingredient.id === newIngredient.id);
-
+    console.log("Test 1: ", selectedIngredients.length)
     if (!exists) {
       setSelectedIngredients([...selectedIngredients, newIngredient]);
     }
+    console.log("Test 2: ", selectedIngredients.length)
+    ChangeAvailableSize(false)
   };
 
   const RemoveIngredient = (idIngredient: number) => {
+    console.log("Test 1 Remove: ", selectedIngredients.length)
     const updatedIngredients = selectedIngredients.filter((ingredient) => ingredient.id !== idIngredient);
     setSelectedIngredients(updatedIngredients);
+    console.log("Test 2 Remove: ", selectedIngredients.length)
+    ChangeAvailableSize(true)
   };
 
+  const ChangeAvailableSize = (remove: boolean) => {
+    if(remove){
+        if (selectedIngredients.length == 1){
+          setAvailableSize(0)
+        }
+        else if (selectedIngredients.length == 2){
+          setAvailableSize(90)
+        }
+        else if (selectedIngredients.length == 3){
+          setAvailableSize(180)
+        }
+        else if (selectedIngredients.length == 4){
+          setAvailableSize(260)
+        }
+        else{
+          setAvailableSize(280)
+        }
+    }
+    else{
+        if (selectedIngredients.length == 0){
+          setAvailableSize(90)
+        }
+        else if (selectedIngredients.length == 1){
+          setAvailableSize(180)
+        }
+        else if (selectedIngredients.length == 2){
+          setAvailableSize(260)
+        }
+        else{
+          setAvailableSize(280)
+        }
+    }
+  }
+
   const handleLetterPress = async (letter: string) => {
     try {
       const ingredientsByLetter = await ingredientService.getIngredientByLetter(letter);
@@ -110,6 +151,24 @@ const loadIngredients = async () => {
     }
   };
 
+  const changeListVisibility = () => {
+    if(listVisibility == "none"){
+      setListVisibility("flex")
+    }
+    else{
+      setListVisibility("none")
+    }
+  };
+
+  const changeAvailableVisibility = () => {
+    if(availableVisibility == "none"){
+      setAvailableVisibility("flex")
+    }
+    else{
+      setAvailableVisibility("none")
+    }
+  };
+
   const styles = StyleSheet.create({
     linearGradient: {
           width: "100%",
@@ -140,46 +199,56 @@ const loadIngredients = async () => {
             <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.element}>
-                  <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
-                    {alphabetArray.map((source, index) => (
-                      <Pressable key={index} onPress={() => handleLetterPress(source)}>
-                        <Text style={{ color: colors.letterFilter }}>{source}</Text>
-                      </Pressable>
-                    ))}
-                  </View>
-                  <View>
-                        <Searchbar
-                            placeholder="Search"
-                            onChangeText={handleSearch}
-                            value={searchQuery}
-                            style={{margin: "3%",
-                                    backgroundColor: colors.cardBackground,
-                                    borderWidth : 1,
-                                    borderColor: colors.cardElementBorder,
-                                    borderRadius: 15,
-                            }}/>
+                  <View style={{justifyContent: "center"}}>
+                    <Pressable onPress={changeListVisibility} style={{alignItems: "center"}}>
+                      <Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
+                    </Pressable>
                   </View>
-                  <View style={{height: 280}}>
-                        <FlatList
-                            data={response ? response : []}
-                            renderItem={({ item }) => (
-                              <AvailableItem value={item} />
-                            )}
-                            keyExtractor={(item, index) => index.toString()}
-                            ListEmptyComponent={() => (
-                              isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
-                            )}
-                          style={{ flex: 1 }}
-                        />
-                        <View style={{ marginTop: '6%' }}></View>
+                  <View style={{display: listVisibility}}>
+                    <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
+                      {alphabetArray.map((source, index) => (
+                        <Pressable key={index} onPress={() => handleLetterPress(source)}>
+                          <Text style={{ color: colors.letterFilter }}>{source}</Text>
+                        </Pressable>
+                      ))}
+                    </View>
+                    <View>
+                          <Searchbar
+                              placeholder="Search"
+                              onChangeText={handleSearch}
+                              value={searchQuery}
+                              style={{margin: "3%",
+                                      backgroundColor: colors.cardBackground,
+                                      borderWidth : 1,
+                                      borderColor: colors.cardElementBorder,
+                                      borderRadius: 15,
+                              }}/>
+                    </View>
+                    <View style={{height: 280}}>
+                          <FlatList
+                              data={response ? response : []}
+                              renderItem={({ item }) => (
+                                <AvailableItem value={item} />
+                              )}
+                              keyExtractor={(item, index) => index.toString()}
+                              ListEmptyComponent={() => (
+                                isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
+                              )}
+                            style={{ flex: 1 }}
+                          />
+                          <View style={{ marginTop: '6%' }}></View>
+                    </View>
                   </View>
                 </View>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.element}>
-                    <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
-                      <Text style={{fontSize: 20, color: colors.cardElementBorder}}>Available</Text>
-                    </View>
-                    <View style={{flex: 1, maxHeight: 280}}>
+                    <Pressable onPress={changeAvailableVisibility}>
+                      <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginHorizontal: "5%", marginBottom: "4%"}]}>
+                        <Text style={{fontSize: 20, color: colors.cardElementBorder, flex: 1}}>Available</Text>
+                        <Image source={require("../assets/images/arrow.png")} style={{tintColor: colors.cardDetail}}/>
+                      </View>
+                    </Pressable>
+                    <View style={{height: availableSize, display: availableVisibility}}>
                       <FlatList
                               data={selectedIngredients}
                               renderItem={({ item }) => (
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 4123c9a..f9cd377 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -76,7 +76,7 @@ export default function Profiles({navigation, props}) {
     
         modal: {
             position: 'absolute',
-            top: '8%',
+            top: '0%',
             justifyContent: "center",
             alignItems: "center",
             width: "100%",