diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index d59933d..44a747e 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -18,8 +18,8 @@ export default function App() {
         <ThemeProvider>
             <ColorProvider>
                 <NavigationContainer>
-                    <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
-                        <Tab.Screen name='PROFILES' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profiles' }} />
+                    <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/>}>
+                        <Tab.Screen name='PROFILES' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profiles' }}/>
                         <Tab.Screen name='HOME' component={HomeStackScreen} options={{ headerShown: false, title: 'Home' }}/>
                         <Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
                     </Tab.Navigator>
diff --git a/LeftOvers/Services/Recipes/RecipesServices.tsx b/LeftOvers/Services/Recipes/RecipesServices.tsx
index c86d71d..e5100ba 100644
--- a/LeftOvers/Services/Recipes/RecipesServices.tsx
+++ b/LeftOvers/Services/Recipes/RecipesServices.tsx
@@ -18,7 +18,7 @@ export default class RecipesService implements IRecipesService {
     async getRecipeById(id: number): Promise<Recipes | null>{
         try {
             const response = await axios.get(`${this.API_URL}/${id}`);
-            console.log(response);
+            //console.log(response.name);
             return response.data as Recipes;
         } catch (error) {
             throw new Error('Erreur lors de la récupération des ingrédients : ' + error.message);
diff --git a/LeftOvers/navigation/CookingStackScreen.tsx b/LeftOvers/navigation/CookingStackScreen.tsx
index 4a9e791..978c45e 100644
--- a/LeftOvers/navigation/CookingStackScreen.tsx
+++ b/LeftOvers/navigation/CookingStackScreen.tsx
@@ -4,6 +4,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import IngredientSelection from '../screens/IngredientSelection';
 import { HeaderTitle } from './Utils';
 import ThemeContext from '../theme/ThemeContext';
+import RecipeSuggestion from '../screens/RecipeSuggestion';
+import RecipeDetails from '../screens/RecipeDetails';
 
 const CookingStack = createNativeStackNavigator()
 
@@ -22,6 +24,26 @@ export default function CookingStackScreen() {
                     )
                 }}
             />
+            <CookingStack.Screen
+                name='RecipeSuggestion'
+                component={RecipeSuggestion}
+                options={{
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerTitle: () => (
+                        <HeaderTitle title='Recipe Suggestion'/>
+                    )
+                }}
+            />
+            <CookingStack.Screen
+                name='RecipeDetails'
+                component={RecipeDetails}
+                options={{
+                    headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
+                    headerTitle: () => (
+                        <HeaderTitle title='Recipe Details'/>
+                    )
+                }}
+            />
         </CookingStack.Navigator>
     )
 }
\ No newline at end of file
diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx
index 84a6802..4b481bc 100644
--- a/LeftOvers/screens/HomePage.tsx
+++ b/LeftOvers/screens/HomePage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import { StyleSheet, View, Text, Pressable, Image, ScrollView } from 'react-native';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
@@ -13,33 +13,51 @@ import Profil from '../Models/Profil';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import  EventEmitter  from './EventEmitter';
 
 export default function HomePage({ navigation, props }) {
     const colors = useContext(ColorContext).colors
     const profile_service = new ProfileService()
 
-    const profiles = [
+    const profilesHand = [
         {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
         {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
         {name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
         {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
     ]
 
-    const [existingProfiles, setExistingProfiles]: [Profil[], React.Dispatch<Profil[]>] = useState([])
-    const [data, setData] = useState([])
-    const loadProfiles = async () => {
-        setExistingProfiles(await profile_service.getProfiles())
-        // for (let current_profile of existingProfiles) {
-        //     let new_data = [{profile=current_profile, isActive="none"}]
-        //     data.push({profile, isActive="none"})
-        // }
+    const [profiles, setProfiles] = useState([{name: "None", avatar: "plus_small.png", isActive: "none"}]);
+    console.log(profiles, profiles.length)
+
+    const handleGetProfiles = async () => {
+        try {
+            const existingProfiles = await AsyncStorage.getItem('profiles');
+            return JSON.parse(existingProfiles) || [];
+        } catch (error) {
+            console.log(error);
+            return [];
+        }
     }
 
-    useEffect(() => {
-        loadProfiles()
-    }, [])
+    const fetchProfiles = async () => {
+        const existingProfiles = await handleGetProfiles();
+        setProfiles(existingProfiles);
+    };
 
+    const subscription = EventEmitter.addListener('profileAdded', async () => {
+        fetchProfiles();
+    });
 
+    useEffect(() => {
+        fetchProfiles();
+        console.log(profiles.length)
+        if(profiles.length == 0){
+            setProfiles([{name: "None", avatar: "plus_small.png", isActive: "none"}])
+            console.log("Je passe ici")
+        }
+        console.log(profiles)
+    }, []);
 
     const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
 
@@ -197,9 +215,9 @@ export default function HomePage({ navigation, props }) {
                             </View>
                         </View>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('IngredientSelection')}/>
+                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Chnge Selected Ingredient')}/>
                         <View style={{marginTop: "3%"}}/>
-                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('RecipeSuggestion')}/>
+                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
                     </View>
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 09c679d..52bfc5f 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -22,7 +22,7 @@ export default function IngredientSelection(props) {
   const [selectedIngredients, setSelectedIngredients] = useState([]);
   const ingredientService = new IngredientService();
   const [availableSize, setAvailableSize] = useState(0);
-  const [listVisibility, setListVisibility] = useState("none");
+  const [listVisibility, setListVisibility] = useState("flex");
   const [availableVisibility, setAvailableVisibility] = useState("none");
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -59,6 +59,7 @@ const loadIngredients = async () => {
   };
 
   useEffect(() => {
+    console.log("Je passe ici (Ingredient Selection)")
     loadIngredients();
   }, []);
 
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 325ec0f..656bbd4 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -47,14 +47,14 @@ export default function Profiles({navigation, props}) {
             await profile_service.delProfile(profiles[index].name)
             fetchProfiles();
             setSelectedProfileIndex(index);
-            erasePopUp(); 
+            erasePopUp();
         } catch (error) {
             console.error('Erreur lors de la suppression du profil :', error);
         }
     };
 
     const confirmDelete = () => {
-        erasePopUp(); 
+        erasePopUp();
     };
 
     const handleGetProfiles = async () => {
@@ -75,7 +75,7 @@ export default function Profiles({navigation, props}) {
     const subscription = EventEmitter.addListener('profileAdded', async () => {
         fetchProfiles();
     });
-    
+
     useEffect(() => {
         fetchProfiles();
     }, []);
@@ -104,7 +104,7 @@ export default function Profiles({navigation, props}) {
         separator: {
             marginTop: "6%"
         },
-    
+
         modal: {
             position: 'absolute',
             top: '0%',
@@ -120,7 +120,7 @@ export default function Profiles({navigation, props}) {
             width: "100%",
             flex: 1,
         },
-    
+
         profileValidation: {
             width: "100%",
             alignItems: "center",
@@ -253,7 +253,7 @@ export default function Profiles({navigation, props}) {
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
             </ScrollView>
-            
+
         </PaperProvider>
     </SafeAreaProvider>
     );
diff --git a/LeftOvers/screens/RecipeDetails.tsx b/LeftOvers/screens/RecipeDetails.tsx
index 74905c8..595e4ee 100644
--- a/LeftOvers/screens/RecipeDetails.tsx
+++ b/LeftOvers/screens/RecipeDetails.tsx
@@ -8,27 +8,36 @@ import Recipes from '../Models/Recipes';
 import { LinearGradient } from 'expo-linear-gradient';
 import ListWithoutSelect from '../components/ListWithoutSelect';
 import ColorContext from '../theme/ColorContext';
+import Ingredient from '../Models/Ingredient';
 
 
 export default function RecipeDetails(props) {
     const {colors} = useContext(ColorContext);
+    
+    const [isLoading, setIsLoading] = useState(true)
 
-    const [isLoading, setIsLoading] = useState(true);
-    const [response, setResponse] = useState<Recipes | undefined>(undefined);
+
+
+    const ingredientList = [new Ingredient(3, "Carrot"), new Ingredient(4, "Potato"), new Ingredient(5, "Peach")]
+
+    const [response, setResponse] = useState<Recipes>(new Recipes (120, "Carrot", "Delicious", 90, ["Fork", "Fish", "Knife"], ingredientList))
     const recipesService = new RecipesService();
 
     const loadRecipe = async () => {
       try {
-        const recipe = await recipesService.getRecipeById(props.id);
+        const recipe = await recipesService.getRecipeById(120);
+        console.log("Recipe.name: "+recipe.name)
         setResponse(recipe);
+        console.log("Response.name: "+response.name)
       } catch (error) {
         console.log(error);
-      } finally {
-        setIsLoading(false);
+      } finally{
+        setIsLoading(false)
       }
     };
 
     useEffect(() => {
+      console.log("Je passe ici (useEffect)")
       loadRecipe();
     }, []);
 
@@ -58,7 +67,7 @@ export default function RecipeDetails(props) {
                   alignItems: 'center',
                   justifyContent: 'center',
                   borderRadius: 20,
-                  backgroundColor: '#F2F0E4',
+                  backgroundColor: colors.cardBackground,
                   padding: "3%",
                   marginHorizontal: "3%",
                   borderWidth: 1,
@@ -75,12 +84,12 @@ export default function RecipeDetails(props) {
           },
           filters: {
                     fontSize: 20,
-                    color: '#ACA279',
+                    color: colors.cardElementBorder,
                     flex: 1,
           },
           nbSelected: {
                     fontSize: 11,
-                    color: "#3F3C42",
+                    color: colors.cardDetail,
                     textAlign: "right",
           },
     });
@@ -88,7 +97,7 @@ export default function RecipeDetails(props) {
     return (
         <SafeAreaProvider>
           <ScrollView>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+            <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}>
                     <RecipeElementReduce 
                         title={response.name}
diff --git a/LeftOvers/screens/RecipeSuggestion.tsx b/LeftOvers/screens/RecipeSuggestion.tsx
index 774a223..d6bfa1a 100644
--- a/LeftOvers/screens/RecipeSuggestion.tsx
+++ b/LeftOvers/screens/RecipeSuggestion.tsx
@@ -167,14 +167,6 @@ export default function RecipeSuggestion(props) {
                     duration="17 min"
                     navigateDetails={goDetails}/>
               <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."
-                    duration="1h and a half"
-                    navigateDetails={goDetails}/>
-              <View style={{marginHorizontal: 10}}/>
             </ScrollView>
             <View style={{marginBottom: "20%"}}/>
         </LinearGradient>