diff --git a/bob_party/src/components/TopBar.tsx b/bob_party/src/components/TopBar.tsx
new file mode 100644
index 0000000..869443f
--- /dev/null
+++ b/bob_party/src/components/TopBar.tsx
@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react"
+import { Pressable, Image, ImageStyle, Text, View, Alert, ImageSourcePropType, TextStyle } from "react-native"
+import { Skin } from "../core/Skin"
+import React from "react"
+import { SkinComponent } from "./skinAvatar"
+import MainTabNavigator from "../navigation/AppNavigator"
+import { BottomTabNavigationProp } from "@react-navigation/bottom-tabs"
+
+
+export const TopBar : FC<{skin: Skin, styleAvatar: ImageStyle, title: String, rightIcon: ImageSourcePropType, styleIcon: ImageStyle,nav: any, styleTitle: TextStyle, styleHeader : any}> = ({skin, styleAvatar, title, rightIcon,styleIcon, nav, styleTitle, styleHeader}) => 
+{
+    return (
+    <View style={styleHeader}>
+        <Pressable onPress={() => nav.navigate('ProfileTab')}>
+                <SkinComponent skin={skin} children={styleAvatar} />
+            </Pressable>
+            <Text style={styleTitle}>{title}</Text>
+            <Pressable onPress={() => nav.navigate('Settings')}>
+                <Image source={rightIcon} style={styleIcon}/>
+            </Pressable>
+    </View>
+    )
+}
\ No newline at end of file
diff --git a/bob_party/src/screens/Home.tsx b/bob_party/src/screens/Home.tsx
index 2d38c1e..421e742 100644
--- a/bob_party/src/screens/Home.tsx
+++ b/bob_party/src/screens/Home.tsx
@@ -1,9 +1,11 @@
 import { StatusBar } from 'expo-status-bar'
 import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
-import React from 'react';
+import React, { Children } from 'react';
 import { SkinComponent } from '../components/skinAvatar';
 import { User } from '../core/user';
 import { Skin } from '../core/skin';
+import { TopBar } from '../components/TopBar';
+
 
 
 const avatar = require('../../assets/Icons/BobClassic.png');
@@ -17,18 +19,14 @@ function Home(props: { navigation: any; }) {
     const { navigation } = props
     return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Pressable onPress={() => navigation.navigate('ProfileTab')}>
-        <SkinComponent skin={skinTest} children={styles.avatar} />
-        </Pressable>
-        <Text style={styles.titre}>BOB PARTY</Text>
-        <Pressable onPress={() => navigation.navigate('Settings')}>
-          <Image
-          style={styles.engrenage}
-          source={engrenage}
-          />
-        </Pressable>
-      </View>
+        <TopBar
+          skin={skinTest} 
+          styleAvatar={styles.avatar} 
+          title="BOB PARTY" 
+          rightIcon={engrenage} 
+          styleIcon={styles.engrenage} 
+          nav={navigation} styleTitle={styles.titre} styleHeader={styles.header}
+        />
       <View style={styles.body}>
         <Button 
         title='Jouer Seul'