diff --git a/JokesApp/components/HorizontalListJokeComponent.tsx b/JokesApp/components/HorizontalListJokeComponent.tsx
new file mode 100644
index 0000000..b1667b3
--- /dev/null
+++ b/JokesApp/components/HorizontalListJokeComponent.tsx
@@ -0,0 +1,77 @@
+import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
+import React from "react";
+import {Joke} from "../model/Joke";
+import * as url from "url";
+import {greyColor, indigo, purpleColor} from "../Theme";
+
+type JokeListItemProps = {
+    item: Joke;
+}
+
+
+export function HorizontalListJokeComponent(props: JokeListItemProps) {
+    return (
+        <View style={styles.listItem}>
+            <View style={styles.rectangle}></View>
+            <Image style={styles.imageSettings} source={{
+                uri: props.item.image}}/>
+            <View style={styles.contentList}>
+                <Text style={styles.titleResume}>Résumé de la blague</Text>
+                <Text style={styles.contentSummary}>{props.item.summary()}</Text>
+
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+
+    titleResume: {
+        fontSize: 15,
+        fontWeight: 'bold',
+        marginBottom: 20,
+        color: "white",
+        textAlign: 'center',
+    },
+    listItem: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        backgroundColor: indigo,
+        margin: 10,
+        height: 270,
+        width: 250,
+        borderRadius: 5,
+    },
+    imageSettings: {
+        width: '75%',
+        height: 150,
+        position: 'absolute',
+        margin: 5,
+    },
+    contentList :{
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        margin: 30,
+    },
+    chip: {
+        borderRadius: 16,
+        backgroundColor: greyColor,
+        padding: 5,
+        marginTop: 5,
+        alignSelf: 'center',
+    },
+    rectangle: {
+        borderRadius: 4,
+        flexShrink: 0,
+        width: "100%",
+        height: "20%",
+        backgroundColor: 'darksalmon',
+    },
+    contentSummary: {
+        textAlign: 'center',
+        color: "white",
+    }
+
+});
+
diff --git a/JokesApp/components/ListAllCategories.tsx b/JokesApp/components/ListAllCategories.tsx
new file mode 100644
index 0000000..f59534f
--- /dev/null
+++ b/JokesApp/components/ListAllCategories.tsx
@@ -0,0 +1,37 @@
+import {Joke} from "../model/Joke";
+import {Image, StyleSheet, Text, View} from "react-native";
+import React from "react";
+import {indigo} from "../Theme";
+
+type JokeListItemProps = {
+    item: Joke;
+}
+export function ListAllCategories(props: JokeListItemProps) {
+
+    return (
+        <View style={styles.listItem}>
+                <View style={styles.chip}>
+                    <Text>{props.item.type()}</Text>
+                </View>
+        </View>
+    );
+}
+
+
+
+const styles = StyleSheet.create({
+    listItem: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        margin: 10,
+    },
+    chip: {
+        borderRadius: 16,
+        backgroundColor: 'rgba(140, 140, 161, 1)',
+        padding: 5,
+        marginTop: 5,
+        alignSelf: 'flex-start',
+    },
+
+
+});
\ No newline at end of file
diff --git a/JokesApp/components/ListeJokeComponent.tsx b/JokesApp/components/ListeJokeComponent.tsx
index eac89bf..d12d624 100644
--- a/JokesApp/components/ListeJokeComponent.tsx
+++ b/JokesApp/components/ListeJokeComponent.tsx
@@ -2,6 +2,7 @@ import {Image, ImageBackground, StyleSheet, Text, View} from "react-native";
 import React from "react";
 import {Joke} from "../model/Joke";
 import * as url from "url";
+import {indigo} from "../Theme";
 
 type JokeListItemProps = {
     item: Joke;
@@ -36,7 +37,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         margin: 10,
-        backgroundColor : "rgba(14, 14, 44, 1)",
+        backgroundColor : indigo,
     },
     imageSettings: {
         width: '40%',
diff --git a/JokesApp/navigation/Navigation.tsx b/JokesApp/navigation/Navigation.tsx
index 4681ec8..36b294a 100644
--- a/JokesApp/navigation/Navigation.tsx
+++ b/JokesApp/navigation/Navigation.tsx
@@ -4,6 +4,9 @@ import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import {ListJokeScreen} from "../screens/ListJokeScreen";
 import {Image, StyleSheet, View} from "react-native";
 import {darksalmonColor, greyColor, indigo, purpleColor} from "../Theme";
+import {AccueilScreen} from "../screens/AccueilScreen";
+import {AddJokeScreen} from "../screens/AddJokeScreen";
+import {SettingsScreen} from "../screens/SettingsScreen";
 const homeIcon = require("../assets/home_icon.png");
 const listIcon = require("../assets/list_icon.png");
 const addIcon = require("../assets/add_icon.png");
@@ -27,7 +30,7 @@ export function Navigation(){
                 tabBarShowLabel: false,
                 tabBarStyle: styles.top,
             }}  >
-                <BottomTabNavigator.Screen name="Accueil" component={ListJokeScreen}
+                <BottomTabNavigator.Screen name="Accueil" component={AccueilScreen}
                                            options={{
                                                tabBarIcon: ({focused}) => (
                                                    <Image
@@ -44,9 +47,8 @@ export function Navigation(){
                                                    />
                                                )
                                            }}/>
-                <BottomTabNavigator.Screen name="Ajouter" component={ListJokeScreen}
+                <BottomTabNavigator.Screen name="Ajouter" component={AddJokeScreen}
                                            options={{
-                                               tabBarShowLabel: false,
                                                tabBarIcon: ({focused}) => (
                                                    <View style={styles.addJoke}>
                                                        <Image source={addIcon}
@@ -64,7 +66,7 @@ export function Navigation(){
                                                    />
                                                )
                                            }}/>
-                <BottomTabNavigator.Screen name="Paramètres" component={ListJokeScreen}
+                <BottomTabNavigator.Screen name="Paramètres" component={SettingsScreen}
                                            options={{
                                                tabBarIcon: ({focused}) => (
                                                    <Image source={setIcon}
diff --git a/JokesApp/screens/AccueilScreen.tsx b/JokesApp/screens/AccueilScreen.tsx
new file mode 100644
index 0000000..193209c
--- /dev/null
+++ b/JokesApp/screens/AccueilScreen.tsx
@@ -0,0 +1,83 @@
+import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
+import {indigo, purpleColor} from "../Theme";
+import {JokeListItems} from "../components/ListeJokeComponent";
+import {Joke} from "../model/Joke";
+import {JokeFactory} from "../model/JokeFactory";
+import {JokeStub} from "../model/JokeStub";
+import {ListJokeScreen} from "./ListJokeScreen";
+import React from "react";
+import {HorizontalListJokeComponent} from "../components/HorizontalListJokeComponent";
+import {ListAllCategories} from "../components/ListAllCategories";
+
+const DATACUSTOM = JokeFactory.createCustomJokes(JokeStub.customJokes)
+const DATASAMPLE = JokeFactory.createSampleJokes(JokeStub.sampleJokes)
+
+//@ts-ignore
+let DataGen = DATACUSTOM.concat(DATASAMPLE);
+let FilterData = DataGen.filter((joke) => joke.type() !== joke.type() )
+export function AccueilScreen() {
+    return (
+        <SafeAreaView style={styles.container}>
+
+            <View>
+                <Image source={require('../assets/logo.png')} style={styles.imgStyle}/>
+                <Text style={styles.title}>Chat C'est Drôle</Text>
+                <Text style={styles.titleAccueil}>Dernieres Blagues</Text>
+            </View>
+            <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
+                data={DataGen}
+                renderItem={HorizontalListJokeComponent}
+                keyExtractor={(item: Joke) => item.summary()}
+            />
+            <View style={styles.categories}>
+                <Text style={styles.titleAccueil} >Top Categories</Text>
+                <Image source={require("../assets/fire_icon.png")}/>
+            </View>
+            <FlatList showsHorizontalScrollIndicator={false} horizontal={true}
+                      data={FilterData}
+                      renderItem={ListAllCategories}
+                      keyExtractor={(item: Joke) => item.summary()}
+            />
+        </SafeAreaView>
+    );
+}
+const styles = StyleSheet.create({
+
+title: {
+    fontSize: 24,
+    color: 'darksalmon',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    marginVertical: 20,
+},
+titleResume: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginBottom: 20,
+},
+container: {
+    flex: 1,
+    backgroundColor: purpleColor,
+
+},
+top: {
+    backgroundColor : indigo,
+},
+
+imgStyle: {
+    alignSelf: 'center',
+    margin: 5,
+},
+titleAccueil: {
+    fontSize: 20,
+    color: 'white',
+    fontWeight: 'bold',
+    margin: 10,
+},
+categories: {
+    flexDirection: 'row',
+    alignItems: 'center',
+}
+
+
+});
diff --git a/JokesApp/screens/AddJokeScreen.tsx b/JokesApp/screens/AddJokeScreen.tsx
new file mode 100644
index 0000000..beed738
--- /dev/null
+++ b/JokesApp/screens/AddJokeScreen.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
+import {indigo, purpleColor} from "../Theme";
+
+export function AddJokeScreen() {
+    return (
+        <View style={styles.font}>
+            <Text style={styles.text}>Ajouter une blague</Text>
+            <Text style={styles.text}>In Work</Text>
+        </View>
+    );
+}
+
+
+
+
+const styles = StyleSheet.create({
+    font: {
+        backgroundColor: indigo,
+        width: '100%',
+        height: '100%',
+    },
+    text: {
+        fontSize: 24,
+        color: 'darksalmon',
+        textAlign: 'center',
+        fontWeight: 'bold',
+        marginVertical: 20,
+    }
+
+
+});
diff --git a/JokesApp/screens/SettingsScreen.tsx b/JokesApp/screens/SettingsScreen.tsx
new file mode 100644
index 0000000..d2dd723
--- /dev/null
+++ b/JokesApp/screens/SettingsScreen.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import {FlatList, Image, SafeAreaView, ScrollView, SectionListComponent, StyleSheet, Text, View} from "react-native";
+import {indigo, purpleColor} from "../Theme";
+
+export function SettingsScreen() {
+    return (
+        <View style={styles.font}>
+            <Text style={styles.text}>Settings Page</Text>
+            <Text style={styles.text}>In Work</Text>
+        </View>
+    );
+}
+
+
+
+
+const styles = StyleSheet.create({
+    font: {
+        backgroundColor: indigo,
+        width: '100%',
+        height: '100%',
+    },
+    text: {
+        fontSize: 24,
+        color: 'darksalmon',
+        textAlign: 'center',
+        fontWeight: 'bold',
+        marginVertical: 20,
+    }
+
+
+});
\ No newline at end of file