diff --git a/app/_layout.tsx b/app/_layout.tsx
index 56b2272..a361ea0 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,118 +1,13 @@
 import "../global.css";
-import { GluestackUIProvider } from "@/app/components/ui/gluestack-ui-provider";
-import HomeScreen from "@/app/HomeScreen";
-import ProfileScreen from "@/app/ProfileScreen";
+import {GluestackUIProvider} from "@/app/components/ui/gluestack-ui-provider";
 import React from "react";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import {
-    AntDesign,
-    Entypo,
-    MaterialCommunityIcons,
-    MaterialIcons,
-} from "@expo/vector-icons";
+import NavBar from "@/app/components/NavBar";
 
 export default function RootLayout() {
-    const BottomTabNavigator = createBottomTabNavigator();
     return (
         <GluestackUIProvider>
-            <BottomTabNavigator.Navigator
-                initialRouteName="Home"
-                screenOptions={{
-                    headerShown: false,
-                    tabBarShowLabel: false,
-                    tabBarStyle: {
-                        height: 75,
-                        backgroundColor: "#f9f9f9",
-                    },
-                    tabBarActiveTintColor: "black",
-                    tabBarInactiveTintColor: "#8e8e93",
-                    tabBarItemStyle: {
-                        borderRadius: 50,
-                    },
-                }}
-            >
-                <BottomTabNavigator.Screen
-                    name="Home"
-                    component={HomeScreen}
-                    options={{
+           <NavBar/>
 
-
-                        tabBarIcon: ({ color, size, focused }) => (
-                            <MaterialIcons
-                                name="home"
-                                color={focused ? "black" : color}
-                                size={focused ? size + 4 : size}
-                            />
-
-                        ),
-                    }}
-                />
-
-                <BottomTabNavigator.Screen
-                    name="Exercice"
-                    component={ProfileScreen}
-                    options={{
-                        tabBarIcon: ({ color, size, focused }) => (
-                            <MaterialCommunityIcons
-                                name="dumbbell"
-                                size={focused ? size + 4 : size}
-                                color={focused ? "black" : color}
-                            />
-                        ),
-                    }}
-                />
-
-                <BottomTabNavigator.Screen
-                    name="Add"
-                    component={ProfileScreen}
-                    options={{
-                        tabBarIcon: ({ color, size, focused }) => (
-                            <Entypo
-                                name="plus"
-                                size={focused ? size + 6 : size}
-                                color='white'
-                            />
-                        ),
-                        tabBarItemStyle: {
-                            borderRadius: 50,
-                            backgroundColor: "orange",
-                        },
-                    }}
-                />
-
-                <BottomTabNavigator.Screen
-                    name="Help"
-                    component={ProfileScreen}
-                    options={{
-                        tabBarIcon: ({ color, size, focused }) => (
-                            <AntDesign
-                                name="question"
-                                size={focused ? size + 2 : size} // Augmente la taille si actif
-                                color={focused ? "black" : color}
-                            />
-                        ),
-                    }}
-                />
-
-                <BottomTabNavigator.Screen
-                    name="Settings"
-                    component={ProfileScreen}
-
-                    options={{
-
-
-                        tabBarIcon: ({ color, size, focused }) => (
-                            <MaterialIcons
-                                name="account-circle"
-                                size={focused ? size + 3 : size}
-                                color={focused ? "black" : color}
-                            />
-
-
-                        ),
-                    }}
-                />
-            </BottomTabNavigator.Navigator>
         </GluestackUIProvider>
     );
 }
diff --git a/app/components/ExerciceOverview.tsx b/app/components/ExerciceOverview.tsx
index 2ee989b..7de2292 100644
--- a/app/components/ExerciceOverview.tsx
+++ b/app/components/ExerciceOverview.tsx
@@ -19,7 +19,7 @@ export default function ExerciceOverview() {
 
     const image = {uri: exercise.imageUri};
     return (
-        <Box>
+        <Box className="h-1/4">
             <ImageBackground
                 source={image}
                 imageStyle={{ borderRadius: 15 }}
@@ -30,12 +30,14 @@ export default function ExerciceOverview() {
                 </HStack>
 
                 <HStack>
-                    <Text className="text-black">{exercise.name}</Text>
-                    <Text className="text-black">{exercise.sets} Sets</Text>
-                    <Text className="text-black">{exercise.difficulty} Difficulty</Text>
 
+                    <Box className="flex-1 items-start">
+                        <Text className="text-black">{exercise.name}</Text>
+                        <Text className="text-black">{exercise.sets} Sets</Text>
+                        <Text className="text-black">{exercise.difficulty} Difficulty</Text>
+                    </Box>
 
-                    <Button className="bg-transparent">
+                    <Button className="bg-transparent items-end ">
                         <AntDesign name="play" size={24} />
                     </Button>
                 </HStack>
diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
new file mode 100644
index 0000000..708619e
--- /dev/null
+++ b/app/components/NavBar.tsx
@@ -0,0 +1,109 @@
+import HomeScreen from "@/app/HomeScreen";
+import {AntDesign, Entypo, MaterialCommunityIcons, MaterialIcons} from "@expo/vector-icons";
+import ProfileScreen from "@/app/ProfileScreen";
+import React from "react";
+import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
+
+ export  default function NavBar() {
+    const BottomTabNavigator = createBottomTabNavigator();
+    return (
+        <BottomTabNavigator.Navigator
+            initialRouteName="Home"
+            screenOptions={{
+                headerShown: false,
+                tabBarShowLabel: false,
+                tabBarStyle: {
+                    height: 75,
+                    backgroundColor: "#f9f9f9",
+                },
+                tabBarActiveTintColor: "black",
+                tabBarInactiveTintColor: "#8e8e93",
+                tabBarItemStyle: {
+                    borderRadius: 50,
+                },
+            }}
+        >
+            <BottomTabNavigator.Screen
+                name="Home"
+                component={HomeScreen}
+                options={{
+
+
+                    tabBarIcon: ({ color, size, focused }) => (
+                        <MaterialIcons
+                            name="home"
+                            color={focused ? "black" : color}
+                            size={focused ? size + 4 : size}
+                        />
+
+                    ),
+                }}
+            />
+
+            <BottomTabNavigator.Screen
+                name="Exercice"
+                component={ProfileScreen}
+                options={{
+                    tabBarIcon: ({ color, size, focused }) => (
+                        <MaterialCommunityIcons
+                            name="dumbbell"
+                            size={focused ? size + 4 : size}
+                            color={focused ? "black" : color}
+                        />
+                    ),
+                }}
+            />
+
+            <BottomTabNavigator.Screen
+                name="Add"
+                component={ProfileScreen}
+                options={{
+                    tabBarIcon: ({ color, size, focused }) => (
+                        <Entypo
+                            name="plus"
+                            size={focused ? size + 6 : size}
+                            color='white'
+                        />
+                    ),
+                    tabBarItemStyle: {
+                        borderRadius: 50,
+                        backgroundColor: "orange",
+                    },
+                }}
+            />
+
+            <BottomTabNavigator.Screen
+                name="Help"
+                component={ProfileScreen}
+                options={{
+                    tabBarIcon: ({ color, size, focused }) => (
+                        <AntDesign
+                            name="question"
+                            size={focused ? size + 2 : size} // Augmente la taille si actif
+                            color={focused ? "black" : color}
+                        />
+                    ),
+                }}
+            />
+
+            <BottomTabNavigator.Screen
+                name="Settings"
+                component={ProfileScreen}
+
+                options={{
+
+
+                    tabBarIcon: ({ color, size, focused }) => (
+                        <MaterialIcons
+                            name="account-circle"
+                            size={focused ? size + 3 : size}
+                            color={focused ? "black" : color}
+                        />
+
+
+                    ),
+                }}
+            />
+        </BottomTabNavigator.Navigator>
+    );
+}
\ No newline at end of file