diff --git a/App.tsx b/App.tsx
index 413bf1b..99a4052 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,20 +1,19 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Button } from 'react-native';
+import React, { useState } from "react";
+import Navigation from './navigation/Navigation';
+
+import {
+  SafeAreaView,
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
 
 export default function App() {
+    //safearea
+    //mettre le navigateur ayant le princ
   return (
-    <View style={styles.container}>
-      <Text>Vroum Vroum i'm in my mom's car  </Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaProvider>
+      <Navigation/>
+    </SafeAreaProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
diff --git a/components/TabBarIcon.tsx b/components/TabBarIcon.tsx
new file mode 100644
index 0000000..2d8bab3
--- /dev/null
+++ b/components/TabBarIcon.tsx
@@ -0,0 +1,10 @@
+
+import { FontAwesome } from '@expo/vector-icons';
+
+
+export default function TabBarIcon(props: {
+    name: React.ComponentProps<typeof FontAwesome>['name'];
+    color: string;
+}) {
+    return <FontAwesome size={30} {...props} />;
+}
\ No newline at end of file
diff --git a/components/mainComponent.tsx b/components/mainComponent.tsx
new file mode 100644
index 0000000..99deaa0
--- /dev/null
+++ b/components/mainComponent.tsx
@@ -0,0 +1,40 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View, Button } from 'react-native';
+import React, { useState } from "react";
+
+export default function Main(props : mainProps){
+    const [count, setCount] = useState(0);
+    return (
+        <View style={styles.container}>
+            <View style={styles.border}>
+                <Text>Maman, prend la caméra ! !</Text>
+                <StatusBar style="auto" />
+                <Text>{count}</Text>
+                <Button onPress={()=> setCount(count+1)} title="+1"/>
+            </View>
+        </View>
+    );
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 5,
+        borderColor : "#ff00ff",
+    },
+    border: {
+        flex: 1,
+        backgroundColor: '#ff0000',
+        maxHeight : 100,
+        borderWidth : 15,
+        borderRadius : 15,
+        borderColor : '#00ffaa',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});
diff --git a/navigation/ListNavigator.tsx b/navigation/ListNavigator.tsx
new file mode 100644
index 0000000..b6efa6b
--- /dev/null
+++ b/navigation/ListNavigator.tsx
@@ -0,0 +1,21 @@
+
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import HomeScreen from '../screens/HomeScreen';
+import ListScreen from '../screens/ListScreen';
+import ListFav from '../screens/ListFav';
+
+
+
+
+export default function ListNavigator() {
+    const Stack = createStackNavigator();
+    return (
+        <Stack.Navigator initialRouteName="List">
+        <Stack.Screen name="List" component={ListScreen}/>
+        <Stack.Screen name="ListFav" component={ListFav}/>
+        </Stack.Navigator>
+    )
+}
\ No newline at end of file
diff --git a/navigation/Navigation.tsx b/navigation/Navigation.tsx
new file mode 100644
index 0000000..dae5f3a
--- /dev/null
+++ b/navigation/Navigation.tsx
@@ -0,0 +1,41 @@
+    import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View, Button } from 'react-native';
+import React, { useState } from "react";
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+import HomeScreen from '../screens/HomeScreen';
+import ListScreen from '../screens/ListScreen';
+import ListFav from '../screens/ListFav';
+
+import TabBarIcon from '../components/TabBarIcon';
+
+
+
+
+export default function Navigation() {
+    const BottomTabNavigator = createBottomTabNavigator();
+    return (
+        <NavigationContainer>
+            <BottomTabNavigator.Navigator initialRouteName="Home">
+                <BottomTabNavigator.Screen name="List" component={ListScreen}
+                                            options={{
+                                                title: 'List',
+                                                tabBarIcon: ({color}) => <TabBarIcon name="list" color={color}/>,
+                                            }}/>
+                <BottomTabNavigator.Screen name="Home" component={HomeScreen}
+                                            options={{
+                                                title: 'Home',
+                                                tabBarIcon: ({color}) => <TabBarIcon name="home" color={color}/>,
+                                            }}/>
+                <BottomTabNavigator.Screen name="ListFav" component={ListFav}
+                                            options={{
+                                                title: 'ListFav',
+                                                tabBarIcon: ({color}) => <TabBarIcon name="heart" color={color}/>,
+                                            }}/>
+            </BottomTabNavigator.Navigator>
+        </NavigationContainer>
+    )
+}
+
diff --git a/navigation/StackNavigation.tsx b/navigation/StackNavigation.tsx
new file mode 100644
index 0000000..21744cb
--- /dev/null
+++ b/navigation/StackNavigation.tsx
@@ -0,0 +1,23 @@
+
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import {createNativeStackNavigator} from '@react-navigation/native-stack';
+
+
+import HomeScreen from '../screens/HomeScreen';
+import ListScreen from '../screens/ListScreen';
+import ListFav from '../screens/ListFav';
+
+
+export default function StackNavigation() {
+    const Stack = createStackNavigator();
+    return (
+        <NavigationContainer>
+            <Stack.Navigator initialRouteName="Home">
+                <Stack.Screen name="Home" component={HomeScreen}/>
+                <Stack.Screen name="ListScreen" component={ListScreen}/>
+                <Stack.Screen name="ListFav" component={ListFav}/>
+            </Stack.Navigator>
+        </NavigationContainer>
+    )
+}
\ No newline at end of file
diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx
new file mode 100644
index 0000000..21f05fa
--- /dev/null
+++ b/screens/HomeScreen.tsx
@@ -0,0 +1,51 @@
+
+import { StyleSheet, Text, View, Button, TouchableNativeFeedback } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
+import StackNavigation from '../navigation/StackNavigation' 
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+export default function HomeScreen() {
+    return (
+        // <View>
+            //<TouchableNativeFeedback onPress={() => navigation.navigate("ListScreen")}>
+            //<Text>Click me !</Text>
+            //</TouchableNativeFeedback>
+            <View style={styles.container}>
+                <View style={styles.centered}>
+                    <Text style={styles.title}>Mes super Nounours !</Text>
+                </View>
+                <Text>Mon super texte ...</Text>
+                {/* <MyCustomComponent /> */}
+                <View style={styles.MidArea}>
+                    <Text style={styles.textStyle}>Nous sommes actuellement dans l'écran d'accueil !</Text>
+                </View>
+            </View>
+        //</View>
+    )
+};
+
+    const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "darksalmon",
+        alignItems: "center"
+    },
+    centered: {
+        alignItems: "center"
+    },
+    title: {
+        fontSize: 20
+    },
+    MidArea: {
+        justifyContent: "center",
+        backgroundColor: "white",
+        paddingTop: 50,
+        paddingBottom: 50,
+        margin: 40,
+    },
+    textStyle: {
+        textAlign: "center",
+        fontSize: 20,
+    }
+});
diff --git a/screens/ListFav.tsx b/screens/ListFav.tsx
new file mode 100644
index 0000000..1584855
--- /dev/null
+++ b/screens/ListFav.tsx
@@ -0,0 +1,31 @@
+import { StyleSheet, Text, View, Button } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from "react";
+
+
+export default function Main(){
+    const [count, setCount] = useState(0);
+    return (
+        <View style={styles.container}>
+            <Text>Maman, J4AI UNE LISTE DE FAVORIS ! !</Text>
+            <StatusBar style="auto" />
+            <Text>{count}</Text>
+            <Button onPress={()=> setCount(count+1)} title="+1"/>
+            <Button onPress={()=> setCount(count+2)} title="+2"/>
+            <Button onPress={()=> setCount(count+10)} title="+10"/>
+        </View>
+    );
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 5,
+        borderColor : "#cacaca",
+    },
+});
diff --git a/screens/ListScreen.tsx b/screens/ListScreen.tsx
new file mode 100644
index 0000000..bc68ccb
--- /dev/null
+++ b/screens/ListScreen.tsx
@@ -0,0 +1,42 @@
+
+import { StyleSheet, Text, View, Button } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import React, { useState } from "react";
+
+
+export default function Main(){
+    const [count, setCount] = useState(0);
+    return (
+        <View style={styles.container}>
+            <View style={styles.border}>
+                <Text>Maman, prend la caméra ! !</Text>
+                <StatusBar style="auto" />
+                <Text>{count}</Text>
+                <Button onPress={()=> setCount(count+1)} title="+1"/>
+            </View>
+        </View>
+    );
+}
+
+
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#ffffff',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 5,
+        borderColor : "#ff00ff",
+    },
+    border: {
+        flex: 1,
+        backgroundColor: '#ff0000',
+        maxHeight : 100,
+        borderWidth : 15,
+        borderRadius : 15,
+        borderColor : '#00ffaa',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+});