diff --git a/bob_party/src/components/skinAvatar.tsx b/bob_party/src/components/skinAvatar.tsx
index fb6ce0d..2e1eb8a 100644
--- a/bob_party/src/components/skinAvatar.tsx
+++ b/bob_party/src/components/skinAvatar.tsx
@@ -4,7 +4,6 @@ import { Skin } from "../core/Skin"
 import React from "react"
 
 export const SkinComponent : FC<{skin: Skin, children: ImageStyle}> = ({skin, children}) => {
-
     return (
     <View>
         <Image source={ skin.getSkinSource()} style={children}/>
diff --git a/bob_party/src/screens/Chat.tsx b/bob_party/src/screens/Chat.tsx
index 407c844..9263cdc 100644
--- a/bob_party/src/screens/Chat.tsx
+++ b/bob_party/src/screens/Chat.tsx
@@ -1,32 +1,28 @@
 import { StatusBar } from 'expo-status-bar'
 import { StyleSheet, View, Text, Alert, Pressable, Image} from 'react-native'
 import React from 'react';
+import { Skin } from '../core/skin';
+import { TopBar } from '../components/TopBar';
 
 const avatar = require('../../assets/Icons/BobClassic.png');
+const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
 const engrenage = require('../../assets/Icons/UnSelected/Cogs.png');
 const gamepad = require('../../assets/Icons/UnSelected/Gamepad.png');
 const message = require('../../assets/Icons/Selected/SChat.png');
 const store = require('../../assets/Icons/UnSelected/Store.png');
 
-function Store(props: { navigation: any; }) {
+function Chat(props: { navigation: any; }) {
     const { navigation } = props
     return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Pressable onPress={() => navigation.navigate('ProfileTab')}>
-          <Image
-          style={styles.avatar}
-          source={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}>
         <Text style={styles.text}>couille</Text>
       </View>
@@ -153,4 +149,4 @@ const styles = StyleSheet.create({
 
 });
 
-export default Store
\ No newline at end of file
+export default Chat
\ No newline at end of file
diff --git a/bob_party/src/screens/Profile.tsx b/bob_party/src/screens/Profile.tsx
index 4cd0da9..28e8a00 100644
--- a/bob_party/src/screens/Profile.tsx
+++ b/bob_party/src/screens/Profile.tsx
@@ -1,32 +1,32 @@
 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');
+const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
 const engrenage = require('../../assets/Icons/UnSelected/Cogs.png');
 const gamepad = require('../../assets/Icons/UnSelected/Gamepad.png');
 const message = require('../../assets/Icons/UnSelected/Chat.png');
 const store = require('../../assets/Icons/UnSelected/Store.png');
 
-function Store(props: { navigation: any; }) {
+function Profile(props: { navigation: any; }) {
     const { navigation } = props
     return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Pressable>
-          <Image
-          style={styles.avatar}
-          source={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}>
         <Text style={styles.text}>couille</Text>
       </View>
@@ -153,4 +153,4 @@ const styles = StyleSheet.create({
 
 });
 
-export default Store
\ No newline at end of file
+export default Profile
\ No newline at end of file
diff --git a/bob_party/src/screens/Store.tsx b/bob_party/src/screens/Store.tsx
index deaf7d7..83859ee 100644
--- a/bob_party/src/screens/Store.tsx
+++ b/bob_party/src/screens/Store.tsx
@@ -1,32 +1,32 @@
 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');
+const skinTest= new Skin("Bob",require('../../assets/Icons/BobClassic.png'));
 const engrenage = require('../../assets/Icons/UnSelected/Cogs.png');
 const gamepad = require('../../assets/Icons/UnSelected/Gamepad.png');
 const message = require('../../assets/Icons/UnSelected/Chat.png');
 const store = require('../../assets/Icons/Selected/SStore.png');
 
+
 function Store(props: { navigation: any; }) {
     const { navigation } = props
     return (
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Pressable onPress={() => navigation.navigate('ProfileTab')}>
-          <Image
-          style={styles.avatar}
-          source={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}>
         <Text style={styles.text}>couille</Text>
       </View>