diff --git a/bob_party/src/components/Skin.tsx b/bob_party/src/components/Skin.tsx
index 25f0af7..a0e8a5c 100644
--- a/bob_party/src/components/Skin.tsx
+++ b/bob_party/src/components/Skin.tsx
@@ -11,16 +11,34 @@ import { useDispatch, useSelector } from "react-redux"
 import { loginUser } from "../redux/features/currentUserSlice"
 import { RootState } from "../redux/store"
 import { MANAGER_USER } from "../../App"
+import { useUserStore } from "../../userContext"
+
+
+
 
 export const SkinComponent :
+
+
+
 /* Parameters : 
     * skin : Skin to be displayed
     * state : Indicates from wich screen the component has been called
 */ 
-FC<{skin: Skin, state: String}> = 
-({skin, state}) => 
+FC<{nav : any, skin: Skin, state: String}> = 
+({nav, skin, state}) => 
 {
+
+    console.log(nav);
+
     const dispatch=useDispatch();
+
+    const setUser = useUserStore((state) => state.setUser);
+
+    function changerSkin(skin:Skin) {
+        MANAGER_USER.getCurrentUser()?.setCurrentSkin(skin);
+        setUser(MANAGER_USER.getCurrentUser());
+        MANAGER_USER.getsaverUser().updateUser(MANAGER_USER.getCurrentUser());
+    }
     
 
     /* The display of this component depends of the screen from where it has been called:
@@ -49,7 +67,7 @@ FC<{skin: Skin, state: String}> =
             )
         case 'liste':
             return(
-                <Pressable onPress={() => {MANAGER_USER.getCurrentUser().setCurrentSkin(skin)}} style={styles.imageWrapper}>
+                <Pressable onPress={() => {changerSkin(skin); nav.navigate('ProfileTab', {screen: 'Profile'})}} style={styles.imageWrapper}>
                     <Text style={styles.nomSkin}>{skin.getSkinName()}</Text>
                     <Image
                         style={styles.imageSkin}
diff --git a/bob_party/src/components/TopBar.tsx b/bob_party/src/components/TopBar.tsx
index 2d30ccc..c3dce68 100644
--- a/bob_party/src/components/TopBar.tsx
+++ b/bob_party/src/components/TopBar.tsx
@@ -12,6 +12,7 @@ import styles from './style/TopBar.style';
 import { useSelector } from "react-redux"
 import { RootState } from "../redux/store"
 import { MANAGER_USER } from "../../App"
+import { useUserStore } from "../../userContext"
 
 /* 
     Images required
@@ -31,6 +32,7 @@ FC<{nav: any, state?: string}> =
 ({nav, state}) => 
 {
 
+    
     /* The display of this component depends of the screen from where it has been called:
         * From the Settings (icon) : Name of the page + cross button
         * From other : skin + Title + parameters icon
@@ -49,10 +51,11 @@ FC<{nav: any, state?: string}> =
                 </View>
             )
         default:
+
             return (
                 <View style={styles.header}>
                     <Pressable onPress={() => nav.navigate('ProfileTab', {screen: 'Profile'})}>
-                            <SkinComponent skin={MANAGER_USER.getCurrentUser().getCurrentSkin()} state='icon' />
+                            <SkinComponent skin={MANAGER_USER.getCurrentUser().getCurrentSkin()} state='icon' nav={nav} />
                         </Pressable>
                         <Text style={styles.titre}>BOB PARTY</Text>
                         <Pressable onPress={() => nav.navigate('Settings')}>