diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx
index 132d682..84a6c29 100644
--- a/src/FLAD/App.tsx
+++ b/src/FLAD/App.tsx
@@ -1,9 +1,7 @@
-import { StyleSheet } from 'react-native';
 import { Provider } from 'react-redux';
 import store from './redux/store';
 import AuthNavigation from './navigation/AuthNavigation';
 import * as SplashScreen from 'expo-splash-screen';
-import SpotifyService from './services/spotify/spotify.service';
 
 SplashScreen.preventAutoHideAsync();
 
@@ -15,11 +13,3 @@ export default function App() {
     </Provider>
   );
 }
-
-const styles = StyleSheet.create({
-  mainSafeArea: {
-    flex: 1,
-    backgroundColor: "#141414",
-  }
-});
-export const theService = new SpotifyService('BQC0rAGJvxTt4-24P-nda6qP9iXYCql2eApnUAoEbZZkKemJ11cU3Nx-I_tKVX0FwEgFbIbSIuaVvxOapRVJq2z1Htyy3XQ5jIYNsrhrnp3KTCfppamAjxgDTf6khBrNGTxe6CNKBsMhc5IRnphey5Td2zJPvGMwnFFfMQdCtVAVsCNK7kPKlCAaf_kRMAoPn30Qk4RD45XmwtZIwQg7X0J4beGuHSiBf0MRjhsnFEW89GxVm8YuIVwgrDbF3izfPR0AlqS4IMJT5m4pEA72lYEwp1JnSDVsafILzmksaqG-11H3WAsWIENrOIu_j7qNgbvYwmUWXOrYmeWBkQ');
diff --git a/src/FLAD/Model/Artist.tsx b/src/FLAD/Model/Artist.tsx
index 35c3a3e..dac88f0 100644
--- a/src/FLAD/Model/Artist.tsx
+++ b/src/FLAD/Model/Artist.tsx
@@ -1,12 +1,17 @@
 export default class Artist {
     private id: string;
     private name: string;
-    private url: string; // Image.source
+    private _url: string; // Image.source
 
     constructor(id: string, name: string, url: string) {
         this.id = id;
         this.name = name;
-        this.url = url;
+        this._url = url;
     }
 
+    get url(): string {
+        return this.url;
+    }
+    
+
 }
\ No newline at end of file
diff --git a/src/FLAD/components/Friend.tsx b/src/FLAD/components/Friend.tsx
new file mode 100644
index 0000000..80e1d65
--- /dev/null
+++ b/src/FLAD/components/Friend.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image } from 'react-native';
+import { color } from 'react-native-reanimated';
+import { useSelector } from 'react-redux';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import normalize from './Normalize';
+
+type FriendProps = {
+    image: string;
+    name: string;
+    lastMessage: string;
+}
+
+export default function Friend(friend: FriendProps) {
+    // @ts-ignore
+    const isDark = useSelector(state => state.userReducer.dark);
+
+    const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
+
+    const source = typeof friend.image === 'string' ? { uri: friend.image } : friend.image;
+
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 9,
+        },
+        image: {
+            marginLeft: 15,
+            marginRight: 12,
+            width: 55,
+            height: 55,
+            borderRadius: 180
+        },
+        name: {
+            fontWeight: "500",
+            color: style.Text,
+            fontSize: normalize(16)
+        },
+        lastMessageContainer: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            maxWidth: '90%'
+        },
+        lastMessage: {
+            fontSize: normalize(18),
+            color: '#989898',
+            flexShrink: 1
+        },
+        time: {
+            fontSize: normalize(18),
+            color: '#989898'
+        },
+        profilContainer: {
+            marginTop: 5,
+            flex: 1,
+            marginLeft: 5,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+        },
+        button: {
+            width: normalize(13),
+            height: normalize(13),
+            marginRight: 42
+        }
+    })
+
+    return (
+        <View style={styles.container}>
+            <Image style={styles.image} source={source} />
+            <View style={styles.profilContainer}>
+                <Text style={styles.name} numberOfLines={1}>{friend.name}</Text>
+                <View style={styles.lastMessageContainer}>
+                    <Text style={styles.lastMessage} numberOfLines={1}>{friend.lastMessage}</Text>
+                    <Text style={styles.time}> · 1sem</Text>
+                </View>
+            </View>
+            <Image style={styles.button} source={require('../assets/icons/icons/buttonProfil.png')} />
+        </View>
+    )
+}
diff --git a/src/FLAD/components/Genre.tsx b/src/FLAD/components/Genre.tsx
index f87efac..6bf423a 100644
--- a/src/FLAD/components/Genre.tsx
+++ b/src/FLAD/components/Genre.tsx
@@ -5,14 +5,14 @@ import { Artist } from "./Artist";
 
 export const ArtistLayout = () => {
   const MUSIC_LIST: Music[] = [
-    new Music("La pharmacie", "Jul", require("../assets/images/jul.png")),
-    new Music("Deux frères", "PNL", require("../assets/images/pnl.png")),
-    new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"),
-    new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"),
-    new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"),
-    new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"),
-    new Music("Blanka", "PNL", require("../assets/images/pnl.png")),
-    new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png"),
+    new Music("La pharmacie", "Jul", require("../assets/images/jul.png"),"",""),
+    new Music("Deux frères", "PNL", require("../assets/images/pnl.png"),"",""),
+    new Music("Bambina", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""),
+    new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png","",""),
+    new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg","",""),
+    new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png","",""),
+    new Music("Blanka", "PNL", require("../assets/images/pnl.png"),"",""),
+    new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","",""),
   ]
   const [artists, setArtists] = useState<Music[]>(MUSIC_LIST);
 
@@ -23,7 +23,7 @@ export const ArtistLayout = () => {
           artist={artist}
           key={artist.title}
           onPress={() => {
-            const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png");
+            const tmppArtist = new Music("Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png","","");
 
             artists.push(tmppArtist);
             setArtists([...artists]);
diff --git a/src/FLAD/components/Messaging.tsx b/src/FLAD/components/Messaging.tsx
new file mode 100644
index 0000000..566b5dd
--- /dev/null
+++ b/src/FLAD/components/Messaging.tsx
@@ -0,0 +1,3 @@
+export default function Messaging() {
+    
+}
\ No newline at end of file
diff --git a/src/FLAD/components/Onboarding.tsx b/src/FLAD/components/Onboarding.tsx
index 4ecdf07..71225a5 100644
--- a/src/FLAD/components/Onboarding.tsx
+++ b/src/FLAD/components/Onboarding.tsx
@@ -66,7 +66,6 @@ export default function Onboarding() {
             right: 10
         },
         modalContent: {
-
             flex: 1,
             justifyContent: 'center',
             alignItems: 'center',
@@ -77,8 +76,7 @@ export default function Onboarding() {
             alignItems: 'center'
         },
         backgroundImage: {
-            flex: 1,
-            width: '100%',
+            width: '103%',
             height: '100%',
         },
         imageButton: {
@@ -164,7 +162,7 @@ export default function Onboarding() {
                 <Paginator data={slides} scrollX={scrollX} />
                 <NextButton scrollTo={scrollTo} percentage={(currentIndex + 1) * (100 / slides.length)} />
             </View>
-            <Modal animationType="slide" visible={isModalVisible} transparent={true} presentationStyle={'pageSheet'}>
+            <Modal animationType="slide" visible={isModalVisible} presentationStyle={'pageSheet'}>
                 <View style={styles.modalContent}>
                     <ImageBackground source={require("../assets/images/Background_Start_Page.png")} style={styles.backgroundImage}>
                         <View style={styles.modalView}>
@@ -186,11 +184,19 @@ export default function Onboarding() {
                                 }}>
                                 <Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
                             </TouchableOpacity>
-                            <TouchableOpacity style={styles.buttonInscription} onPress={() => { handleModal(); navigation.navigate('Register'); }}>
+                            <TouchableOpacity
+                                style={styles.buttonInscription}
+                                // @ts-ignore
+                                onPress={() => { handleModal(); navigation.navigate('Register'); }}
+                            >
                                 <Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
                             </TouchableOpacity>
                             <Image source={require("../assets/images/Flady.gif")} style={styles.mascot} />
-                            <TouchableOpacity style={styles.button2Connection} onPress={() => { handleModal(); navigation.navigate('Login'); }}>
+                            <TouchableOpacity
+                                style={styles.button2Connection}
+                                // @ts-ignore
+                                onPress={() => { handleModal(); navigation.navigate('Login'); }}
+                            >
                                 <Text style={styles.text}>SE CONNECTER</Text>
                             </TouchableOpacity>
                         </View>
diff --git a/src/FLAD/components/Paginator.tsx b/src/FLAD/components/Paginator.tsx
index 8252a6e..c622b68 100644
--- a/src/FLAD/components/Paginator.tsx
+++ b/src/FLAD/components/Paginator.tsx
@@ -3,6 +3,7 @@ import { View, StyleSheet, Animated, useWindowDimensions } from 'react-native';
 
 import normalize from '../components/Normalize';
 
+// @ts-ignore
 export default function Paginator({ data, scrollX }) {
     const { width } = useWindowDimensions();
 
diff --git a/src/FLAD/navigation/AuthNavigation.tsx b/src/FLAD/navigation/AuthNavigation.tsx
index d9b5b4d..e8c2e32 100644
--- a/src/FLAD/navigation/AuthNavigation.tsx
+++ b/src/FLAD/navigation/AuthNavigation.tsx
@@ -1,5 +1,5 @@
 import Navigation from './Navigation';
-import { AsyncStorage } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import StartNavigation from './StartNavigation';
 import { useDispatch, useSelector } from 'react-redux';
@@ -7,7 +7,7 @@ import { useEffect, useState } from 'react';
 import * as SplashScreen from 'expo-splash-screen';
 import { ChangeMode, getRefreshToken } from '../redux/thunk/authThunk';
 import * as Location from 'expo-location';
-import { theService } from '../App';
+import SpotifyService from '../services/spotify/spotify.service';
 import { getCurrentUserMusic } from '../redux/thunk/spotThunk';
 import Music from '../Model/Music';
 
@@ -38,8 +38,9 @@ export default function AuthNavigation() {
       const currentValue = await AsyncStorage.getItem('dark');
       if (currentValue !== null) {
         const newValue = JSON.stringify(JSON.parse(currentValue));
+        //@ts-ignore
         dispatch(ChangeMode(JSON.parse(newValue)))
-      }
+      } 
     } catch (error) {
       console.log(`Une erreur s'est produite lors de la mise à jour de la valeur booléenne pour la clé 'dark': `, error);
     }
@@ -94,8 +95,11 @@ export default function AuthNavigation() {
       {isLogin ? (
         <Navigation />
       ) :
-        <StartNavigation />
+        <Navigation />
       }
     </SafeAreaProvider>
   )
 }
+
+const theService = new SpotifyService('BQC0rAGJvxTt4-24P-nda6qP9iXYCql2eApnUAoEbZZkKemJ11cU3Nx-I_tKVX0FwEgFbIbSIuaVvxOapRVJq2z1Htyy3XQ5jIYNsrhrnp3KTCfppamAjxgDTf6khBrNGTxe6CNKBsMhc5IRnphey5Td2zJPvGMwnFFfMQdCtVAVsCNK7kPKlCAaf_kRMAoPn30Qk4RD45XmwtZIwQg7X0J4beGuHSiBf0MRjhsnFEW89GxVm8YuIVwgrDbF3izfPR0AlqS4IMJT5m4pEA72lYEwp1JnSDVsafILzmksaqG-11H3WAsWIENrOIu_j7qNgbvYwmUWXOrYmeWBkQ');
+
diff --git a/src/FLAD/navigation/MessagingNavigation.tsx b/src/FLAD/navigation/MessagingNavigation.tsx
new file mode 100644
index 0000000..09ac13d
--- /dev/null
+++ b/src/FLAD/navigation/MessagingNavigation.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import Conversation from '../screens/Conversation'
+import Chat from '../screens/Chat';
+
+export default function MessagingNavigation() {
+  const Stack = createStackNavigator();
+
+  return (
+    <Stack.Navigator initialRouteName="Conversation" screenOptions={{ gestureEnabled: true, headerShown: false, cardOverlayEnabled: true, cardStyle: { backgroundColor: "transparent" } }}>
+      <Stack.Screen
+        name="Conversation"
+        component={Conversation}
+      />
+      <Stack.Screen
+        name="Chat"
+        component={Chat}
+        options = {{
+          headerShown: true
+        }}
+      />
+    </Stack.Navigator>
+  )
+}
\ No newline at end of file
diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx
index ebe334f..f5cc659 100644
--- a/src/FLAD/navigation/Navigation.tsx
+++ b/src/FLAD/navigation/Navigation.tsx
@@ -9,7 +9,7 @@ import normalize from '../components/Normalize';
 // @ts-ignore
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import SpotNavigation from './SpotNavigation';
-import Login from '../screens/login';
+import MessagingNavigation from './MessagingNavigation';
 import { useDispatch, useSelector } from 'react-redux';
 import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
 import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
@@ -66,12 +66,12 @@ export default function Navigation() {
             headerShown: false,
             tabBarIcon: ({ color }) => <View style={styles.IconContainer}><TabBarIcon name="heart" color={color} /></View>,
           }} />
-        <BottomTabNavigator.Screen name="Messages" component={Login}
+        <BottomTabNavigator.Screen name="Messages" component={MessagingNavigation}
           options={{
             headerShown: false,
             tabBarIcon: ({ color }) => <View style={styles.IconContainer}><TabBarIcon name="comment" color={color} /></View>,
           }} />
-        <BottomTabNavigator.Screen name="Setting" component={SettingNavigation}
+        <BottomTabNavigator.Screen name="Settings" component={SettingNavigation}
           options={{
             headerShown: false,
             tabBarIcon: ({ color }) => <View style={styles.IconContainer}><TabBarIcon name="cog" color={color} /></View>,
diff --git a/src/FLAD/navigation/SpotNavigation.tsx b/src/FLAD/navigation/SpotNavigation.tsx
index 6a62c06..4b46b08 100644
--- a/src/FLAD/navigation/SpotNavigation.tsx
+++ b/src/FLAD/navigation/SpotNavigation.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
-import SpotPage from '../screens/spot'
+import SpotPage from '../screens/Spot'
 import MusicDetail from '../screens/MusicDetail';
 
 
@@ -16,7 +16,7 @@ export default function SpotNavigation() {
     }}
     >
       <Stack.Screen
-        name="Spots"
+        name="SpotsPage"
         component={SpotPage}
       />
       <Stack.Screen
diff --git a/src/FLAD/package.json b/src/FLAD/package.json
index 390d6c6..f036a5a 100644
--- a/src/FLAD/package.json
+++ b/src/FLAD/package.json
@@ -32,11 +32,13 @@
     "expo-secure-store": "~12.0.0",
     "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
+    "expo-web-browser": "~12.0.0",
     "lottie-react-native": "5.1.4",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-native": "0.70.5",
     "react-native-gesture-handler": "~2.8.0",
+    "react-native-gifted-chat": "^2.0.1",
     "react-native-modal": "^13.0.1",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
@@ -47,8 +49,7 @@
     "react-native-web": "~0.18.9",
     "react-navigation-shared-element": "^3.1.3",
     "react-redux": "^8.0.5",
-    "redux": "^4.2.1",
-    "expo-web-browser": "~12.0.0"
+    "redux": "^4.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/src/FLAD/redux/actions/appActions.ts b/src/FLAD/redux/actions/appActions.ts
index 243cb74..40e617b 100644
--- a/src/FLAD/redux/actions/appActions.ts
+++ b/src/FLAD/redux/actions/appActions.ts
@@ -1,15 +1,15 @@
 import Music from "../../Model/Music";
 import { favoritesTypes } from "../types/favoritesTypes";
 
-export const getFavoritesMusic = (favoritesMusic: Music[]) => {
+export const getFavoritesMusic = (music: Music[]) => {
   return {
     type: favoritesTypes.GET_FAVORITE_MUSICS,
-    playload: favoritesMusic,
+    payload: music,
   };
 }
-export const addFavoritesMusic = (favoritesMusic: Music) => {
+export const addFavoritesMusic = (music: Music) => {
   return {
     type: favoritesTypes.ADD_FAVORITE_MUSICS,
-    playload: favoritesMusic,
+    payload: music,
   };
 }
diff --git a/src/FLAD/redux/actions/spotActions.tsx b/src/FLAD/redux/actions/spotActions.tsx
index 2785034..2bbdf45 100644
--- a/src/FLAD/redux/actions/spotActions.tsx
+++ b/src/FLAD/redux/actions/spotActions.tsx
@@ -6,13 +6,13 @@ import { spotTypes } from "../types/spotTypes";
 export const setSpotList = (spotList: Spot[]) => {
   return {
     type: spotTypes.FETCH_SPOT,
-    playload: spotList,
+    payload: spotList,
   };
 }
 
 export const setUserCurrentMusic = (currentMusic: Music) => {
   return {
     type: spotifyTypes.GET_USER_CURRENT_MUSIC,
-    playload: currentMusic,
+    payload: currentMusic,
   };
 }
\ No newline at end of file
diff --git a/src/FLAD/redux/actions/userActions.tsx b/src/FLAD/redux/actions/userActions.tsx
index b5ea11e..605e8be 100644
--- a/src/FLAD/redux/actions/userActions.tsx
+++ b/src/FLAD/redux/actions/userActions.tsx
@@ -17,20 +17,20 @@ export const setLoginState = (userJson: any) => {
   const user = new User(userJson.data.idFlad, userJson.data.idSpotify, userJson.data.email, new Date(), userJson.data.name, require('../../assets/images/jul.png'));
   return {
     type: userTypes.LOGIN,
-    playload: user
+    payload: user
   };
 }
 
 export const restoreToken = (token: string) => {
   return {
     type: userTypes.RESTORE_TOKEN,
-    playload: token
+    payload: token
   };
 }
 export const userSignUp = (user: User) => {
   return {
     type: userTypes.LOGIN,
-    playload: user
+    payload: user
   };
 }
 
@@ -43,7 +43,7 @@ export const UserLogout = () => {
 export const userChangeMode = (value: boolean) => {
   return {
     type: userTypes.CHANGE_MODE,
-    playload: value
+    payload: value
   };
 }
 
diff --git a/src/FLAD/redux/reducers/appReducer.tsx b/src/FLAD/redux/reducers/appReducer.tsx
index bf53a69..41faf1c 100644
--- a/src/FLAD/redux/reducers/appReducer.tsx
+++ b/src/FLAD/redux/reducers/appReducer.tsx
@@ -4,11 +4,13 @@ import { discoveriesTypes } from "../types/discoverieTypes";
 import { favoritesTypes } from "../types/favoritesTypes";
 import { spotifyTypes } from "../types/spotifyTypes";
 import { spotTypes } from "../types/spotTypes";
+
 let tmpMusic: Music[] = [
   new Music("03o8WSqd2K5rkGvn9IsLy2", "Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg", "https://p.scdn.co/mp3-preview/c55f95de81b8c3d0df04148da1b03bd38db56e8f?cid=774b29d4f13844c495f206cafdad9c86"),
   new Music("6DPrYPPGYK218iVIZDix3i", "Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png", "https://p.scdn.co/mp3-preview/a9f9cb19ac1fe6db0d06b67decf8edbb25895a33?cid=774b29d4f13844c495f206cafdad9c86"),
   new Music("5GFHFEASZeJF0gyWuDDjGE", "Kratos", "PNL", "https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png", "https://p.scdn.co/mp3-preview/9e854f4905c1228482e390169eb76d8520076b8f?cid=774b29d4f13844c495f206cafdad9c86"),
 ];
+
 const initialState = {
   spot: [] as Spot[],
   favoriteMusic: tmpMusic,
@@ -18,9 +20,9 @@ const initialState = {
 const appReducer = (state = initialState, action: any) => {
   switch (action.type) {
     case favoritesTypes.GET_FAVORITE_MUSICS:
-      return { ...state, favoriteMusic: action.playload };
+      return { ...state, favoriteMusic: action.payload };
     case favoritesTypes.ADD_FAVORITE_MUSICS:
-      return { ...state, favoriteMusic: [action.playload, ...state.favoriteMusic] };
+      return { ...state, favoriteMusic: [action.payload, ...state.favoriteMusic] };
     case favoritesTypes.REMOVE_FAVORITE_MUSICS:
       return { ...state, favoriteMusic: state.favoriteMusic };
     case spotTypes.FETCH_SPOT:
@@ -28,7 +30,7 @@ const appReducer = (state = initialState, action: any) => {
     case discoveriesTypes.FETCH_DISCOVERIES:
       return;
     case spotifyTypes.GET_USER_CURRENT_MUSIC:
-      return { ...state, userCurrentMusic: action.playload };
+      return { ...state, userCurrentMusic: action.payload };
     default:
       return state;
   }
diff --git a/src/FLAD/redux/reducers/userReducer.tsx b/src/FLAD/redux/reducers/userReducer.tsx
index 0ee619e..f177d98 100644
--- a/src/FLAD/redux/reducers/userReducer.tsx
+++ b/src/FLAD/redux/reducers/userReducer.tsx
@@ -17,10 +17,10 @@ const initialState = {
 const userReducer = (state = initialState, action: any) => {
   switch (action.type) {
     case userTypes.RESTORE_TOKEN:
-      const resp = (action.playload == "" ? false : true)
+      const resp = (action.payload == "" ? false : true)
       return {
         ...state,
-        userFladToken: action.playload,
+        userFladToken: action.payload,
         loading: true,
         isLogedIn: resp,
       };
@@ -28,7 +28,7 @@ const userReducer = (state = initialState, action: any) => {
       AsyncStorage.setItem('dark', JSON.stringify(false)).then(() => { });
       return {
         ...state,
-        user: action.playload,
+        user: action.payload,
         failedLogin: false,
         isLogedIn: true,
         dark: false
@@ -37,7 +37,7 @@ const userReducer = (state = initialState, action: any) => {
       AsyncStorage.setItem('dark', JSON.stringify(false)).then(() => { });
       return {
         ...state,
-        user: action.playload,
+        user: action.payload,
         failedSignup: false,
         isLogedIn: true,
         dark: false
@@ -52,14 +52,14 @@ const userReducer = (state = initialState, action: any) => {
     case userTypes.SAVE_SPOTIFY:
       return {
         ...state,
-        userSpotifyToken: action.playload,
+        userSpotifyToken: action.payload,
       };
     case userTypes.CHANGE_ERROR_LOGIN:
       return { ...state, failedLogin: true }
     case userTypes.CHANGE_ERROR_SIGNUP:
       return { ...state, failedSignup: true }
     case userTypes.CHANGE_MODE:
-      return { ...state, dark: action.playload }
+      return { ...state, dark: action.payload }
     default:
       return state;
   }
diff --git a/src/FLAD/redux/thunk/authThunk.tsx b/src/FLAD/redux/thunk/authThunk.tsx
index 13432d8..4780249 100644
--- a/src/FLAD/redux/thunk/authThunk.tsx
+++ b/src/FLAD/redux/thunk/authThunk.tsx
@@ -124,6 +124,7 @@ export const ChangeMode = (value: boolean) => {
 export const ChangeImageUserCurrent = (value: ImagePicker) => {
   //@ts-ignore
   return async dispatch => {
+    //@ts-ignore
     dispatch(userChangeImage(value));
   }
 }
\ No newline at end of file
diff --git a/src/FLAD/screens/Chat.tsx b/src/FLAD/screens/Chat.tsx
new file mode 100644
index 0000000..053a21f
--- /dev/null
+++ b/src/FLAD/screens/Chat.tsx
@@ -0,0 +1,22 @@
+import { useNavigation } from "@react-navigation/native";
+import React, { useEffect } from "react";
+import { GiftedChat } from "react-native-gifted-chat";
+
+export default function Chat() {
+
+    const navigation = useNavigation();
+
+    useEffect(() => {
+        navigation.getParent()?.setOptions({
+          tabBarStyle: {
+            display: "none"
+          }
+        });
+        return () => navigation.getParent()?.setOptions({
+          tabBarStyle: undefined
+        });
+      }, [navigation]);
+    return (
+        <GiftedChat />
+    )
+}
\ No newline at end of file
diff --git a/src/FLAD/screens/Conversation.tsx b/src/FLAD/screens/Conversation.tsx
new file mode 100644
index 0000000..dd979c5
--- /dev/null
+++ b/src/FLAD/screens/Conversation.tsx
@@ -0,0 +1,67 @@
+import { useNavigation } from "@react-navigation/native";
+import { SafeAreaView, StyleSheet, Text, View, FlatList, TouchableOpacity } from "react-native";
+import { useSelector } from "react-redux";
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import Friend from "../components/Friend";
+import normalize from '../components/Normalize';
+
+export default function ConversationList() {
+
+    // @ts-ignore
+    const isDark = useSelector(state => state.userReducer.dark);
+
+    const navigation = useNavigation();
+
+    const friends = [
+        { id: 1, name: "Lucas", lastMessage: "J'en ai marre de provot", source: require('../assets/images/jul.png') },
+        { id: 2, name: "Louison", lastMessage: "Tu vien piscine ?", source: require('../assets/images/jul.png') },
+        { id: 3, name: "Dave", lastMessage: "Ok c noté !", source: require('../assets/images/pnl.png') },
+        { id: 4, name: "Valentin", lastMessage: "Haha react native c incroyable !!!", source: require('../assets/images/jul.png') },
+    ];
+
+    const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
+
+    const styles = StyleSheet.create({
+        mainSafeArea: {
+            flex: 1,
+            backgroundColor: style.body,
+        },
+        titleContainer: {
+            marginTop: 30,
+            marginLeft: 20,
+        },
+        title: {
+            fontSize: normalize(28),
+            fontWeight: 'bold',
+            color: style.Text,
+        },
+        description: {
+            marginTop: 10,
+            fontSize: normalize(20),
+            color: '#787878',
+            marginBottom: 20
+        }
+    })
+
+    return (
+        <SafeAreaView style={styles.mainSafeArea}>
+            <View style={styles.titleContainer}>
+                <Text style={styles.title}>Messages</Text>
+                <Text style={styles.description}>Retrouvez ici tous vos amis!</Text>
+            </View>
+            <FlatList
+                style={{ marginTop: 10 }}
+                data={friends}
+                keyExtractor={(item) => item.id.toString()}
+                renderItem={({ item }) => (
+                    <TouchableOpacity
+                        // @ts-ignore
+                        onPress={() => navigation.navigate('Chat')}>
+                        <Friend image={item.source} name={item.name} lastMessage={item.lastMessage} />
+                    </TouchableOpacity>
+                )}
+            />
+        </SafeAreaView>
+    )
+}
\ No newline at end of file
diff --git a/src/FLAD/screens/Favorite.tsx b/src/FLAD/screens/Favorite.tsx
index 77f92eb..a553cf9 100644
--- a/src/FLAD/screens/Favorite.tsx
+++ b/src/FLAD/screens/Favorite.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
+import { Image, StyleSheet, Text, View, FlatList, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'
@@ -11,7 +11,8 @@ import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
 import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
 
 export default function FavoritePage() {
-    //Dark Mode
+
+    // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
     const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
 
@@ -25,6 +26,7 @@ export default function FavoritePage() {
         { id: 4, source: require('../assets/images/FLADYCry.png') },
     ];
     const navigueToDetail = (music: any) => {
+        // @ts-ignore
         navigation.navigate("MusicDetail", { "music": music })
     };
     const styles = StyleSheet.create({
@@ -79,38 +81,39 @@ export default function FavoritePage() {
                 <Text style={styles.title}>Favoris</Text>
                 <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
             </View>
-            <ScrollView>
-                <View>
-                    <FlatList style={{ marginBottom: 30 }}
-                        data={favoritesMusic}
-                        renderItem={({ item }) => (
-                            <TouchableHighlight onPress={() => { navigueToDetail(item) }}>
-                                <SharedElement id={item.id}>
-
-                                    <CardMusic image={item.image} title={item.title} description={item.bio} id={item.id} />
-                                </SharedElement>
-                            </TouchableHighlight>
-                        )}
-                        keyExtractor={(item: Music) => item.title}
-                    />
-                </View>
-                <Text style={[styles.title, { marginLeft: 20 }]}>What's your mood?</Text>
-                <FlatList
-                    style={{ marginTop: 10 }}
-                    data={images}
-                    keyExtractor={(item) => item.id.toString()}
-                    horizontal
-                    showsHorizontalScrollIndicator={false}
-                    renderItem={({ item }) => (
-                        <FladyComponent image={item.source} />
-                    )}
-                />
-                <TouchableOpacity style={[styles.button, styles.shadow]}
-                    // @ts-ignore
-                    onPress={() => navigation.navigate('Genre')}>
-                    <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage} />
-                </TouchableOpacity>
-            </ScrollView>
+            <FlatList
+                data={favoritesMusic}
+                renderItem={({ item }) => (
+                    <TouchableHighlight onPress={() => { navigueToDetail(item) }}>
+                        <SharedElement id={item.id}>
+                            <CardMusic image={item.image} title={item.title} description={item.bio} id={item.id} />
+                        </SharedElement>
+                    </TouchableHighlight>
+                )}
+                keyExtractor={(item: Music) => item.title}
+                ListFooterComponent={
+                    <>
+                        <Text style={[styles.title, { marginLeft: 20 }]}>What's your mood?</Text>
+                        <FlatList
+                            style={{ marginTop: 10 }}
+                            data={images}
+                            keyExtractor={(item) => item.id.toString()}
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                            renderItem={({ item }) => (
+                                <FladyComponent image={item.source} />
+                            )}
+                        />
+                        <TouchableOpacity
+                            style={[styles.button, styles.shadow]}
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('Genre')}>
+                            <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage} />
+                        </TouchableOpacity>
+                    </>
+                }
+                nestedScrollEnabled={true}
+            />
         </SafeAreaView>
     );
 };
\ No newline at end of file
diff --git a/src/FLAD/screens/MusicDetail.tsx b/src/FLAD/screens/MusicDetail.tsx
index cd43325..22ceac4 100644
--- a/src/FLAD/screens/MusicDetail.tsx
+++ b/src/FLAD/screens/MusicDetail.tsx
@@ -180,7 +180,9 @@ const MusicDetail = ({ route }) => {
                     {simularMusic.length !== 0 && (
                         <HorizontalFlatList title={'Similar'} data={simularMusic}>
                             {(props) => (
-                                <Pressable onLongPress={() => { navigator.navigate("MusicDetail", { "music": props }) }} >
+                                <Pressable
+                                    // @ts-ignore
+                                    onLongPress={() => { navigator.navigate("MusicDetail", { "music": props }) }} >
                                     <LittleCard image={props.image} title={props.title} />
                                 </Pressable>
                             )}
diff --git a/src/FLAD/screens/Register.tsx b/src/FLAD/screens/Register.tsx
index 7909966..ef087f5 100644
--- a/src/FLAD/screens/Register.tsx
+++ b/src/FLAD/screens/Register.tsx
@@ -36,6 +36,7 @@ export default function InscriptionPage() {
   const [sound, setSound] = useState<Audio.Sound>();
   const navigation = useNavigation();
   const [spotifyToken, setSpotifyToken] = useState('');
+  // @ts-ignore
   const failedSignup = useSelector(state => state.userReducer.failedSignup);
 
   async function playSound() {
diff --git a/src/FLAD/screens/Setting.tsx b/src/FLAD/screens/Setting.tsx
index 601a041..1c152ad 100644
--- a/src/FLAD/screens/Setting.tsx
+++ b/src/FLAD/screens/Setting.tsx
@@ -27,9 +27,10 @@ export default function Setting() {
         textInputRef.current?.focus();
     };
 
+    // @ts-ignore
     const currentMusic = useSelector(state => state.appReducer.userCurrentMusic);
 
-    //Dark Mode
+    // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
 
     const style = isDark ? GraphicalCharterDark : GraphicalCharterLight;
@@ -40,6 +41,7 @@ export default function Setting() {
             if (currentValue !== null) {
                 const newValue = JSON.stringify(!JSON.parse(currentValue));
                 await AsyncStorage.setItem('dark', newValue);
+                // @ts-ignore
                 dispatch(ChangeMode(JSON.parse(newValue)))
             }
         } catch (error) {
@@ -263,7 +265,11 @@ export default function Setting() {
                                 <Path d="M9.5 13.0625C10.2874 13.0625 11.0425 12.7497 11.5992 12.193C12.156 11.6362 12.4688 10.8811 12.4688 10.0938V4.15625C12.4688 3.36889 12.156 2.61378 11.5992 2.05703C11.0425 1.50028 10.2874 1.1875 9.5 1.1875C8.71264 1.1875 7.95753 1.50028 7.40078 2.05703C6.84403 2.61378 6.53125 3.36889 6.53125 4.15625V10.0938C6.53125 10.8811 6.84403 11.6362 7.40078 12.193C7.95753 12.7497 8.71264 13.0625 9.5 13.0625Z" fill="#828288" />
                             </Svg>
                         </View>
-                        <TouchableOpacity onPress={() => navigation.navigate('SettingProfil')}>
+
+                        <TouchableOpacity 
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('SettingProfil')}
+                            >
                             <View style={styles.profil}>
                                 <Image source={require('../assets/icons/icons/IconProfil.png')} style={styles.imageProfil} />
                                 <View style={styles.profilContainer}>
@@ -326,7 +332,7 @@ export default function Setting() {
                         </View>
 
                         <View style={styles.musicActually}>
-                            <CardMusic image={currentMusic.image} title={currentMusic.title} description="PNL" id='1' />
+                            <CardMusic image="{currentMusic.image}" title="{currentMusic.title}" description="PNL" id='1' />
                             <Image source={require("../assets/images/FladyShadow.png")} style={styles.mascot} />
                         </View>
 
diff --git a/src/FLAD/screens/SettingProfil.tsx b/src/FLAD/screens/SettingProfil.tsx
index 927ebbe..81d75e8 100644
--- a/src/FLAD/screens/SettingProfil.tsx
+++ b/src/FLAD/screens/SettingProfil.tsx
@@ -31,7 +31,7 @@ export default function SettingProfil() {
 
     useEffect(() => {
         console.log(UserCurrent.image);
-      });
+    });
 
     const handleModal = () => setIsModalVisible(() => !isModalVisible);
 
@@ -262,7 +262,9 @@ export default function SettingProfil() {
             <SafeAreaView style={styles.mainSafeArea}>
                 <ScrollView>
                     <View style={styles.container}>
-                        <TouchableOpacity onPress={() => navigation.navigate('Setting')}>
+                        <TouchableOpacity
+                            // @ts-ignore
+                            onPress={() => navigation.navigate('Setting')}>
                             <View style={styles.exit}>
                                 <Image style={styles.buttonSetting} source={require('../assets/icons/icons/buttonProfil_Inverse.png')} />
                                 <Text style={styles.textExit}>Exit</Text>
diff --git a/src/FLAD/screens/spot.tsx b/src/FLAD/screens/spot.tsx
index 3a08562..c2cc953 100644
--- a/src/FLAD/screens/spot.tsx
+++ b/src/FLAD/screens/spot.tsx
@@ -57,6 +57,7 @@ export default function SpotPage() {
   const { width: wWidht } = Dimensions.get("window");
   const hapti = (card: Spot) => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
+    // @ts-ignore
     navigator.navigate("DetailsSpot", { "music": card.music })
   };
   return (