diff --git a/src/components/JokeDetail.tsx b/src/components/JokeDetail.tsx
new file mode 100644
index 0000000..4cb4a48
--- /dev/null
+++ b/src/components/JokeDetail.tsx
@@ -0,0 +1,216 @@
+import {StyleSheet, Text, View, Image, Button, TouchableOpacity} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {darksalmonColor, whiteColor, greyColor, indigoColor, purpleColor} from "../assets/Theme";
+import React, {useState} from "react";
+
+type JokeItemProps = {
+    joke: SampleJoke;
+};
+
+export default function JokeDetail(props: JokeItemProps) {
+    const [showDescription, setShowDescription] = useState(false); // état local pour contrôler la visibilité de la description
+    const [showFavorite, setShowFavorite] = useState(false); // état local pour contrôler la visibilité du favori
+
+    const toggleDescription = () => {
+        setShowDescription(!showDescription);
+    };
+
+    const toggleFavorite = () => {
+        setShowFavorite(!showFavorite);
+    };
+
+    const eye = require("../assets/eye_icon.png")
+    const hideEye = require("../assets/eye_off_icon.png")
+    const heart = require("../assets/favorite_icon.png")
+    const heartPlain = require("../assets/plain_favorite_icon.png")
+
+    return(
+        <View style={styles.container}>
+            <Image source={{ uri: props.joke.image }} style={styles.image} />
+            <View style={styles.bottomContainer}>
+                <Text style={{color: indigoColor}}>{props.joke.type}</Text>
+            </View>
+            <Text style={styles.text}>Résumé de la blague</Text>
+            <View style={styles.row}>
+                <TouchableOpacity style={styles.favContainer} onPress={toggleFavorite}>
+                    <View>
+                        <Image
+                            source={showFavorite ? heartPlain : heart}
+                            style={styles.imageButton}
+                        />
+                    </View>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.Button} onPress={toggleDescription}>
+                    <View style={styles.chuteContainer}>
+                        <Image
+                            source={showDescription ? hideEye : eye}
+                            style={styles.imageButton}
+                        />
+                        <Text style={styles.TextButton} >LA CHUTE</Text>
+                    </View>
+                </TouchableOpacity>
+            </View>
+            {showDescription && <Text style={styles.text}>{props.joke.description()}</Text>}
+        </View>
+    );
+}
+const styles = StyleSheet.create({
+    image : {
+        margin : 5,
+        width: '90%',
+        height:200,
+        top : 5,
+        alignSelf : "center",
+        backgroundColor: "white",
+        borderRadius: 5,
+    },
+    Button:{
+        borderRadius : 5,
+        backgroundColor : darksalmonColor,
+        height:50,
+        width : 160,
+        flexDirection : "row"
+    },
+    imageButton : {
+        margin : 10,
+        width: 50,
+        height:50,
+        top : 5,
+        alignSelf : "center",
+        backgroundColor: "none",
+        tintColor : whiteColor
+    },
+    favContainer : {
+        margin : 20,
+        borderWidth : 3,
+        borderRadius : 15,
+        borderColor : whiteColor,
+        borderStyle : "solid"
+    },
+    TextButton : {
+        margin: 10,
+        textAlign : "center",
+        fontWeight: "700",
+        color : whiteColor,
+    },
+    chuteContainer :{
+        display : "flex",
+        flex : 1,
+        flexDirection: "row",
+        alignItems : "center"
+    },
+    container: {
+        marginHorizontal: "5%",
+        display: "flex",
+        marginBottom:7,
+        marginTop:7,
+        paddingVertical: 10,
+        backgroundColor: indigoColor,
+        justifyContent: 'space-between',
+        borderRadius: 20,
+        height: "auto",
+        borderColor: whiteColor,
+        borderStyle: "solid",
+        borderWidth: 1
+    },
+    row: {
+        display: "flex",
+        flexDirection:"row",
+        alignSelf: "flex-end",
+    },
+    color: {
+        flex: 0,
+        backgroundColor: darksalmonColor,
+        height: 150,
+        width:15,
+    },
+    columnContainer: {
+        flexDirection: "column",
+        marginLeft: 20,
+        marginRight: 20,
+        width: '60%',
+        flex: 2,
+        justifyContent: 'space-between',
+    },
+    text: {
+        color:greyColor,
+        paddingBottom: 7,
+        paddingTop: 7,
+        marginLeft: 19,
+        fontSize: 16,
+    },
+    bottomContainer: {
+        backgroundColor: whiteColor,
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        margin: 10,
+        marginLeft: 19,
+        marginTop: 20,
+        borderRadius: 20,
+        width : 120,
+        alignItems : 'center'
+    }
+})
+//
+// const styles = StyleSheet.create({
+//     container: {
+//         marginHorizontal: "5%",
+//         display: "flex",
+//         marginBottom:7,
+//         marginTop:7,
+//         paddingVertical: 10,
+//         backgroundColor: indigoColor,
+//         justifyContent: 'space-between',
+//         borderRadius: 20,
+//         height: 500,
+//         borderColor: whiteColor,
+//         borderStyle: "solid",
+//         borderWidth: 1
+//     },
+//     row: {
+//         display: "flex",
+//         flexDirection:"row",
+//         alignSelf: "flex-end",
+//     },
+//     color: {
+//         flex: 0,
+//         backgroundColor: darksalmonColor,
+//         height: 150,
+//         width:15,
+//     },
+//     image: {
+//         width: '90%',
+//         alignSelf: "center",
+//         marginTop: 10,
+//         borderRadius: 5,
+//         // height: 500,
+//         backgroundColor: "red",
+//         flex: 1
+//     },
+//     columnContainer: {
+//         flexDirection: "column",
+//         marginLeft: 20,
+//         marginRight: 20,
+//         width: '60%',
+//         flex: 2,
+//         justifyContent: 'space-between',
+//     },
+//     text: {
+//         color:greyColor,
+//         paddingBottom: 7,
+//         paddingTop: 7,
+//         marginLeft: 19,
+//         fontSize: 16,
+//     },
+//     bottomContainer: {
+//         backgroundColor: whiteColor,
+//         paddingVertical: 5,
+//         paddingHorizontal: 10,
+//         margin: 10,
+//         marginLeft: 19,
+//         marginTop: 20,
+//         borderRadius: 20,
+//         width : 120,
+//         alignItems : 'center'
+//     }
+// });
\ No newline at end of file
diff --git a/src/components/JokeItem.tsx b/src/components/JokeItem.tsx
index 01bbe27..f8a8be0 100644
--- a/src/components/JokeItem.tsx
+++ b/src/components/JokeItem.tsx
@@ -2,7 +2,6 @@ import {StyleSheet, Text, View, Image} from 'react-native';
 import {SampleJoke} from "../model/SampleJoke";
 import {CustomJoke} from "../model/CustomJoke";
 import {darksalmonColor, whiteColor, greyColor, indigoColor} from "../assets/Theme";
-import Categ from "./Categ";
 
 type JokeListItemProps = {
     joke: (CustomJoke | SampleJoke);
@@ -16,6 +15,9 @@ export default function JokeItem(prop: JokeListItemProps) {
             <View style={styles.columnContainer}>
                 <Text style={styles.text}>Résumé de la blague</Text>
                 <Text style={styles.text}>{prop.joke.description()}</Text>
+                <View style={styles.bottomContainer}>
+                    <Text style={{color:'white'}}>{prop.joke.type}</Text>
+                </View>
                 {/*<Categ category={prop.joke.type}/>*/}
             </View>
         </View>
@@ -64,8 +66,9 @@ const styles = StyleSheet.create({
         backgroundColor: greyColor,
         paddingVertical: 5,
         paddingHorizontal: 10,
+        margin: 10,
         borderRadius: 20,
-        width : 150,
+        width : 120,
         alignItems : 'center'
     }
 });
\ No newline at end of file
diff --git a/src/components/JokeItems.tsx b/src/components/JokeItems.tsx
index d25306c..1107069 100644
--- a/src/components/JokeItems.tsx
+++ b/src/components/JokeItems.tsx
@@ -1,20 +1,26 @@
-import {FlatList} from 'react-native';
+import {FlatList, Text, TouchableHighlight} from 'react-native';
 import {SampleJoke} from "../model/SampleJoke";
 import {CustomJoke} from "../model/CustomJoke";
 import JokeItem from "./JokeItem";
+import React from "react";
+import {useNavigation} from "@react-navigation/native";
 
 type JokeListItemProps = {
     jokes: (CustomJoke | SampleJoke)[];
 };
 
 export default function JokeItems(props: JokeListItemProps) {
+    const navigation = useNavigation()
     return (
         <FlatList
             data={props.jokes}
             keyExtractor={(item) => item.id.toString()}
             renderItem={
                 ({ item }: { item: CustomJoke | SampleJoke }) => (
-                    <JokeItem joke={item}/>
+                    // @ts-ignore
+                    <TouchableHighlight onPress={() => navigation.navigate("JokeDetails", {"idJoke": item.id})}>
+                        <JokeItem joke={item}/>
+                    </TouchableHighlight>
                 )
             }
         />
diff --git a/src/navigation/NavigationBar.tsx b/src/navigation/NavigationBar.tsx
index 11aa816..ccaac24 100644
--- a/src/navigation/NavigationBar.tsx
+++ b/src/navigation/NavigationBar.tsx
@@ -3,12 +3,12 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import {Image, View} from 'react-native';
 
 import HomeScreen from "../screens/HomeScreen";
-import Catalogue from "../screens/Catalogue";
 import Favorites from "../screens/Favorites";
 import Add from "../screens/AddScreen";
 import Settings from "../screens/Settings";
 
 import {darksalmonColor, greyColor, indigoColor} from "../assets/Theme";
+import StackNavigation from "./StackNavigation";
 
 
 export default function NavigationBar() {
@@ -26,7 +26,6 @@ export default function NavigationBar() {
                                           screenOptions={{
                                               headerStyle: {
                                                   backgroundColor: indigoColor,
-
                                               },
                                               headerTitleStyle: {
                                                   color:darksalmonColor,
@@ -53,8 +52,9 @@ export default function NavigationBar() {
                                                    />
                                                )
                                            }}/>
-                <BottomTabNavigator.Screen name="Catalogue" component={Catalogue}
+                <BottomTabNavigator.Screen name="Catalogue" component={StackNavigation}
                                            options={{
+                                               headerShown: false,
                                                tabBarIcon: ({focused}) => (
                                                    <Image
                                                        source={listIcon}
@@ -91,7 +91,7 @@ export default function NavigationBar() {
                                                    />
                                                )
                                            }}/>
-                <BottomTabNavigator.Screen name="Paramètres" component={Settings}
+                <BottomTabNavigator.Screen name="Parametres" component={Settings}
                                            options={{
                                                tabBarIcon: ({focused}) => (
                                                    <Image
diff --git a/src/navigation/StackNavigation.tsx b/src/navigation/StackNavigation.tsx
index ed2a613..518f5db 100644
--- a/src/navigation/StackNavigation.tsx
+++ b/src/navigation/StackNavigation.tsx
@@ -1,20 +1,26 @@
-// import {createStackNavigator} from "@react-navigation/stack";
-// import Accueil from "../screens/HomeScreen";
-// import Catalogue from "../screens/Catalogue";
-// import Add from "../screens/AddScreen";
-// import Favorites from "../screens/Favorites";
-// import Settings from "../screens/Settings";
-//
-//
-// export default function StackNavigation() {
-//     const Stack = createStackNavigator();
-//     return (
-//         <Stack.Navigator initialRouteName="Home">
-//             <Stack.Screen name="Accueil" component={Accueil}/>
-//             <Stack.Screen name="Catalogue" component={Catalogue}/>
-//             <Stack.Screen name="Ajouter" component={Add}/>
-//             <Stack.Screen name="Favoris" component={Favorites}/>
-//             <Stack.Screen name="Paramètres" component={Settings}/>
-//         </Stack.Navigator>
-//     )
-// }
\ No newline at end of file
+import {createStackNavigator} from "@react-navigation/stack";
+import Catalogue from "../screens/Catalogue";
+import JokeDetailsScreen from "../screens/JokeDetailsScreen";
+import {darksalmonColor, indigoColor} from "../assets/Theme";
+
+export default function StackNavigation() {
+    const Stack = createStackNavigator();
+    return (
+            <Stack.Navigator initialRouteName="catalogue" screenOptions={{
+                                                                headerStyle: {
+                                                                    backgroundColor: indigoColor,
+                                                                },
+                                                                headerTitleStyle: {
+                                                                    marginTop: 10,
+                                                                    color:darksalmonColor,
+                                                                    fontSize:24,
+                                                                    textAlign: "center",
+                                                                    paddingBottom:30,
+                                                                },
+                                                                headerTitleAlign: 'center'
+                                                            }}>
+                <Stack.Screen name="catalogue" component={Catalogue} />
+                <Stack.Screen name="JokeDetails" component={JokeDetailsScreen}/>
+            </Stack.Navigator>
+    )
+}
\ No newline at end of file
diff --git a/src/package-lock.json b/src/package-lock.json
index ae45776..481f9dc 100644
--- a/src/package-lock.json
+++ b/src/package-lock.json
@@ -9,14 +9,15 @@
       "version": "1.0.0",
       "dependencies": {
         "@react-navigation/bottom-tabs": "^6.5.11",
-        "@react-navigation/native": "^6.1.9",
+        "@react-navigation/native": "^6.1.10",
+        "@react-navigation/stack": "^6.3.21",
         "@reduxjs/toolkit": "^2.2.1",
         "@types/react": "~18.2.45",
         "expo": "~50.0.3",
         "expo-status-bar": "~1.11.1",
         "react": "18.2.0",
         "react-native": "0.73.2",
-        "react-native-gesture-handler": "^2.14.1",
+        "react-native-gesture-handler": "^2.15.0",
         "react-native-safe-area-context": "^4.9.0",
         "react-redux": "^9.1.0",
         "redux": "^5.0.1",
@@ -5918,9 +5919,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/@react-navigation/elements": {
-      "version": "1.3.21",
-      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz",
-      "integrity": "sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==",
+      "version": "1.3.22",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.22.tgz",
+      "integrity": "sha512-HYKucs0TwQT8zMvgoZbJsY/3sZfzeP8Dk9IDv4agst3zlA7ReTx4+SROCG6VGC7JKqBCyQykHIwkSwxhapoc+Q==",
       "peerDependencies": {
         "@react-navigation/native": "^6.0.0",
         "react": "*",
@@ -5929,9 +5930,9 @@
       }
     },
     "node_modules/@react-navigation/native": {
-      "version": "6.1.9",
-      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz",
-      "integrity": "sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==",
+      "version": "6.1.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.10.tgz",
+      "integrity": "sha512-jDG89TbZItY7W7rIcS1RqT63vWOPD4XuQLNKqZO0DY7mKnKh/CGBd0eg3nDMXUl143Qp//IxJKe2TfBQRDEU4A==",
       "dependencies": {
         "@react-navigation/core": "^6.4.10",
         "escape-string-regexp": "^4.0.0",
@@ -5962,6 +5963,24 @@
         "nanoid": "^3.1.23"
       }
     },
+    "node_modules/@react-navigation/stack": {
+      "version": "6.3.21",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.21.tgz",
+      "integrity": "sha512-oh059bD9w6Q7YbcK3POXRHK+bfoafPU9gvunD0MHJGmPVe9bazn5OMNzRYextvB6BfwQy+v3dy76Opf0vIGcNg==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.22",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz",
@@ -11512,9 +11531,9 @@
       }
     },
     "node_modules/react-native-gesture-handler": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz",
-      "integrity": "sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz",
+      "integrity": "sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==",
       "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "hoist-non-react-statics": "^3.3.0",
diff --git a/src/package.json b/src/package.json
index 60aea97..747d634 100644
--- a/src/package.json
+++ b/src/package.json
@@ -11,14 +11,15 @@
   },
   "dependencies": {
     "@react-navigation/bottom-tabs": "^6.5.11",
-    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native": "^6.1.10",
+    "@react-navigation/stack": "^6.3.21",
     "@reduxjs/toolkit": "^2.2.1",
     "@types/react": "~18.2.45",
     "expo": "~50.0.3",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-native": "0.73.2",
-    "react-native-gesture-handler": "^2.14.1",
+    "react-native-gesture-handler": "^2.15.0",
     "react-native-safe-area-context": "^4.9.0",
     "react-redux": "^9.1.0",
     "redux": "^5.0.1",
diff --git a/src/redux/actions/JokeAction.ts b/src/redux/actions/JokeAction.ts
index b2e0f21..8348049 100644
--- a/src/redux/actions/JokeAction.ts
+++ b/src/redux/actions/JokeAction.ts
@@ -4,6 +4,7 @@ import {SampleJoke} from "../../model/SampleJoke";
 export enum ActionType {
   FETCH_CATEGORIES = 'FETCH_CATEGORIES',
   FETCH_JOKES = 'FETCH_JOKES',
+  FETCH_JOKES_BY_ID = 'FETCH_JOKES_BY_ID'
 }
 
 type actionFetch = {
@@ -12,6 +13,9 @@ type actionFetch = {
 } | {
   type: ActionType.FETCH_JOKES;
   payload: SampleJoke[];
+} | {
+  type: ActionType.FETCH_JOKES_BY_ID;
+  payload: SampleJoke;
 }
 
 export type Action = actionFetch;
@@ -27,4 +31,11 @@ export const setJokesList = (jokesList: SampleJoke[]) => {
     type: ActionType.FETCH_JOKES,
     payload: jokesList,
   };
+}
+
+export const setJokeById = (joke: SampleJoke) => {
+  return {
+    type: ActionType.FETCH_JOKES_BY_ID,
+    payload: joke,
+  };
 }
\ No newline at end of file
diff --git a/src/redux/reducers/jokeReducer.ts b/src/redux/reducers/jokeReducer.ts
index 2e82085..a77bf14 100644
--- a/src/redux/reducers/jokeReducer.ts
+++ b/src/redux/reducers/jokeReducer.ts
@@ -7,15 +7,15 @@ import {Category} from "../../model/Category";
 interface State {
     categories: Category[];
     jokes: SampleJoke[];
-    favoriteJokes: SampleJoke[],
-    favoriteCategories: Category[],
+    favoriteJokes: SampleJoke[];
+    joke : SampleJoke;
 }
 
 const initialState = {
     categories: [],
     jokes: [],
     favoriteJokes: [],
-    favoriteCategories: [],
+    joke: new SampleJoke(1, "", "", "", ""),
 }
 
 const appReducer = (state: State = initialState, action: Action) => {
@@ -26,7 +26,9 @@ const appReducer = (state: State = initialState, action: Action) => {
         case ActionType.FETCH_CATEGORIES:
             // @ts-ignore
             return {...state, categories: action.payload};
-        //case ActionType....
+        case ActionType.FETCH_JOKES_BY_ID:
+            // @ts-ignore
+            return {...state, joke: action.payload}
         default:
             return state;
     }
diff --git a/src/redux/thunk/RecentsJokesThunk.ts b/src/redux/thunk/RecentsJokesThunk.ts
index e3e3af4..9a39349 100644
--- a/src/redux/thunk/RecentsJokesThunk.ts
+++ b/src/redux/thunk/RecentsJokesThunk.ts
@@ -1,5 +1,5 @@
 import {SampleJoke} from "../../model/SampleJoke";
-import {setCategoriesList, setJokesList} from "../actions/JokeAction";
+import {setCategoriesList, setJokeById, setJokesList} from "../actions/JokeAction";
 import {Category} from "../../model/Category";
 
 export const getList = <TList>(uri:string, constructor : (json:any) => TList, setList: (list: TList[]) => any) => {
@@ -18,6 +18,22 @@ export const getList = <TList>(uri:string, constructor : (json:any) => TList, se
     }
 }
 
+export const getItem = <TItem>(uri:string, constructor : (json:any) => TItem, setItem: (item: TItem) => any) => {
+    //In order to use await your callback must be asynchronous using async keyword.
+    return async dispatch => {
+        //Then perform your asynchronous operations.
+        try {
+            const promise = await fetch(uri);
+            //Then use the json method to get json data from api/
+            const Json = await promise.json();
+            const Item: TItem = constructor(Json);
+            dispatch(setItem(Item));
+        } catch (error) {
+            console.log('Error---------', error);
+        }
+    }
+}
+
 export const getLastSampleJokesList = () => {
     return getList('https://iut-weather-api.azurewebsites.net/jokes/lasts', (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (list) => setJokesList(list))
 }
@@ -27,5 +43,9 @@ export const getCategoriesList = () => {
 }
 
 export const getSampleJokesList = () => {
-    return getList('https://iut-weather-api.azurewebsites.net/jokes', (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (list) => setJokesList(list))
+    return getList('https://iut-weather-api.azurewebsites.net/jokes/samples', (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (list) => setJokesList(list))
+}
+
+export const getJokeById = (id) => {
+    return getItem<SampleJoke>('https://iut-weather-api.azurewebsites.net/jokes/samples/' + id , (elt) => new SampleJoke(elt["id"], elt["type"], elt["setup"], elt["image"]), (item) => setJokeById(item))
 }
\ No newline at end of file
diff --git a/src/screens/Catalogue.tsx b/src/screens/Catalogue.tsx
index 9ea393e..10a68d6 100644
--- a/src/screens/Catalogue.tsx
+++ b/src/screens/Catalogue.tsx
@@ -1,5 +1,3 @@
-import { customJokeStub } from '../data/stub/CustomJokeStub';
-import { sampleJokeStub } from '../data/stub/SampleJokeStub';
 import JokeItems from "../components/JokeItems";
 import '../types/extension';
 import {StyleSheet, View} from "react-native";
@@ -29,6 +27,7 @@ export default function Catalogue() {
 
 const styles = StyleSheet.create({
     container: {
-        backgroundColor: purpleColor
+        backgroundColor: purpleColor,
+        flex:1,
     }
 });
\ No newline at end of file
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index 399b902..76f0c5a 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -11,7 +11,7 @@ export default function Catalogue() {
     // @ts-ignore
     const allJokes = useSelector(state => state.appReducer.jokes);
     // @ts-ignore
-    const allcategories = useSelector(state => state.appReducer.categories)
+    const allCategories = useSelector(state => state.appReducer.categories)
     const dispatch = useDispatch();
 
     useEffect(() => {
@@ -28,7 +28,7 @@ export default function Catalogue() {
             <View style={styles.container}>
                 <View style={styles.top}>
                     <Image style={styles.cat} source={require('../assets/logo.png')}/>
-                    <Text style={styles.textAccueil}>Chat C'est Drôle</Text>
+                    <Text style={styles.textAccueil}>Chat C'est Drole</Text>
                 </View>
                 <View style={styles.Jokes}>
                     <Text style={styles.textLastJokes}>Dernières blagues</Text>
@@ -40,7 +40,7 @@ export default function Catalogue() {
                         <Image source={require("../assets/fire_icon.png")}/>
                     </View>
                     <View style={styles.horizChip}>
-                        <Categs categories={allcategories}/>
+                        <Categs categories={allCategories}/>
                     </View>
                 </View>
             </View>
@@ -95,5 +95,4 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         marginTop: 30,
     }
-
 });
\ No newline at end of file
diff --git a/src/screens/JokeDetailsScreen.tsx b/src/screens/JokeDetailsScreen.tsx
new file mode 100644
index 0000000..e368dbb
--- /dev/null
+++ b/src/screens/JokeDetailsScreen.tsx
@@ -0,0 +1,34 @@
+import '../types/extension';
+import {StyleSheet, View} from "react-native";
+import {purpleColor} from "../assets/Theme";
+import {useDispatch, useSelector} from "react-redux";
+import React, {useEffect} from "react";
+import { getJokeById } from "../redux/thunk/RecentsJokesThunk";
+import JokeDetail from "../components/JokeDetail";
+
+export default function JokeDetailsScreen({route}) {
+    const idJokeDetail = route.params.idJoke;
+    // @ts-ignore
+    const joke = useSelector(state => state.appReducer.joke);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        const loadJoke = async () => {
+            // @ts-ignore
+            await dispatch(getJokeById(idJokeDetail));
+        };
+        loadJoke();
+    }, [dispatch]);
+    return (
+        <View style={styles.container}>
+            <JokeDetail joke={joke}/>
+        </View>
+    )
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: purpleColor,
+        flex:1,
+    }
+});
\ No newline at end of file
diff --git a/src/yarn.lock b/src/yarn.lock
index 15d4749..6d982ee 100644
--- a/src/yarn.lock
+++ b/src/yarn.lock
@@ -2030,15 +2030,15 @@
     react-is "^16.13.0"
     use-latest-callback "^0.1.7"
 
-"@react-navigation/elements@^1.3.21":
-  version "1.3.21"
-  resolved "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz"
-  integrity sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==
+"@react-navigation/elements@^1.3.21", "@react-navigation/elements@^1.3.22":
+  version "1.3.22"
+  resolved "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.22.tgz"
+  integrity sha512-HYKucs0TwQT8zMvgoZbJsY/3sZfzeP8Dk9IDv4agst3zlA7ReTx4+SROCG6VGC7JKqBCyQykHIwkSwxhapoc+Q==
 
-"@react-navigation/native@^6.0.0", "@react-navigation/native@^6.1.9":
-  version "6.1.9"
-  resolved "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz"
-  integrity sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==
+"@react-navigation/native@^6.0.0", "@react-navigation/native@^6.1.10":
+  version "6.1.10"
+  resolved "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.10.tgz"
+  integrity sha512-jDG89TbZItY7W7rIcS1RqT63vWOPD4XuQLNKqZO0DY7mKnKh/CGBd0eg3nDMXUl143Qp//IxJKe2TfBQRDEU4A==
   dependencies:
     "@react-navigation/core" "^6.4.10"
     escape-string-regexp "^4.0.0"
@@ -2052,6 +2052,15 @@
   dependencies:
     nanoid "^3.1.23"
 
+"@react-navigation/stack@^6.3.21":
+  version "6.3.21"
+  resolved "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.21.tgz"
+  integrity sha512-oh059bD9w6Q7YbcK3POXRHK+bfoafPU9gvunD0MHJGmPVe9bazn5OMNzRYextvB6BfwQy+v3dy76Opf0vIGcNg==
+  dependencies:
+    "@react-navigation/elements" "^1.3.22"
+    color "^4.2.3"
+    warn-once "^0.1.0"
+
 "@reduxjs/toolkit@^2.2.1":
   version "2.2.1"
   resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz"
@@ -5335,10 +5344,10 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-native-gesture-handler@^2.14.1:
-  version "2.14.1"
-  resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz"
-  integrity sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==
+react-native-gesture-handler@^2.15.0, "react-native-gesture-handler@>= 1.0.0":
+  version "2.15.0"
+  resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz"
+  integrity sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"