diff --git a/ClientApp/.gitignore b/ClientApp/.gitignore
index b3e4a1294..f5f129f40 100644
--- a/ClientApp/.gitignore
+++ b/ClientApp/.gitignore
@@ -13,7 +13,7 @@ web-build/
 # macOS
 .DS_Store
 
-package-lock.json
+# package-lock.json
 # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
 # The following patterns were generated by expo-cli
 
diff --git a/ClientApp/app.json b/ClientApp/app.json
index f3ede3e15..ecaeaff8e 100644
--- a/ClientApp/app.json
+++ b/ClientApp/app.json
@@ -1,4 +1,3 @@
-
 {
   "expo": {
     "name": "ClientApp",
@@ -15,18 +14,20 @@
     },
     "ios": {
       "supportsTablet": true,
-      "googleServicesFile": "process.env.GOOGLE_SERVICE_INFO_PLIST ?? ./GoogleService-Info.plist",
+      "googleServicesFile": "./GoogleService-Info.plist",
       "bundleIdentifier": "com.nchelico.ClientApp",
-     "infoPlist": {
-      "ITSAppUsesNonExemptEncryption": false,
-      "NSCameraUsageDescription": "This app needs access to your camera to take photos.",
-      "NSMicrophoneUsageDescription": "This app needs access to your microphone for video recording.",
-      "NSPhotoLibraryUsageDescription": "This app needs access to your photo library to upload images.",
-      "NSPhotoLibraryAddUsageDescription": "This app needs permission to save photos to your gallery.",
-      "LSApplicationQueriesSchemes": [
-        "myapp"
-      ],
-       "UIBackgroundModes": ["remote-notification"]
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false,
+        "NSCameraUsageDescription": "This app needs access to your camera to take photos.",
+        "NSMicrophoneUsageDescription": "This app needs access to your microphone for video recording.",
+        "NSPhotoLibraryUsageDescription": "This app needs access to your photo library to upload images.",
+        "NSPhotoLibraryAddUsageDescription": "This app needs permission to save photos to your gallery.",
+        "LSApplicationQueriesSchemes": [
+          "myapp"
+        ],
+        "UIBackgroundModes": [
+          "remote-notification"
+        ]
       },
       "config": {
         "googleMapsApiKey":  "process.env.GOOGLE_MAPS_API_KEY"
@@ -45,9 +46,9 @@
         "android.permission.ACCESS_COARSE_LOCATION",
         "android.permission.ACCESS_FINE_LOCATION"
       ],
-      "googleServicesFile": "process.env.GOOGLE_SERVICES_JSON ?? ./google-services.json",
+      "googleServicesFile": "./google-services.json",
       "package": "com.sporta.clientApp",
-      "config" : {
+      "config": {
         "googleMaps": {
           "apiKey": "process.env.GOOGLE_MAPS_API_KEY"
         }
@@ -90,6 +91,8 @@
       "typedRoutes": true
     },
     "extra": {
+      "apiBaseUrl": "https://api.sportahub.app/api/",
+      "googlePlacesApiKey": "process.env.GOOGLE_MAPS_API_KEY",
       "router": {
         "origin": false
       },
@@ -98,7 +101,7 @@
       }
     },
     "owner": "sportaapp",
-   "runtimeVersion": "1.0.0",
+    "runtimeVersion": "1.0.0",
     "updates": {
       "url": "https://u.expo.dev/0a493fac-f7b6-4eee-a154-9cc7280a3dad"
     }
diff --git a/ClientApp/app/(tabs)/_layout.tsx b/ClientApp/app/(tabs)/_layout.tsx
index 2650d4e25..5dc34a4c3 100644
--- a/ClientApp/app/(tabs)/_layout.tsx
+++ b/ClientApp/app/(tabs)/_layout.tsx
@@ -56,17 +56,18 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="chats/index"
+        name="chats"
         options={{
           title: t('tab_layout.chats'),
+          headerShown: false,
           tabBarIcon: ({ color }) => (
             <FontAwesome size={24} name="comments" color={color} style={iconStyle} />
           ),
         }}
         listeners={{
-          tabPress: (e) => {
-            console.log('Chats tab pressed');
-          },
+          // tabPress: (e) => {
+          //   console.log('Chats tab pressed');
+          // },
         }}
       />
       <Tabs.Screen
diff --git a/ClientApp/app/(tabs)/chats/[id].tsx b/ClientApp/app/(tabs)/chats/[id].tsx
new file mode 100644
index 000000000..accfd4b3f
--- /dev/null
+++ b/ClientApp/app/(tabs)/chats/[id].tsx
@@ -0,0 +1,443 @@
+import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import { Button, Modal, StyleSheet, View, Text } from 'react-native';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faChevronDown, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
+import { Bubble, Composer, GiftedChat, IMessage, InputToolbar, InputToolbarProps, Send, SendProps, Time } from 'react-native-gifted-chat';
+import {useSelector} from "react-redux";
+import {getMessages, getChatroom, deleteChatroom, leaveChatroom} from "@/services/chatService";
+import { Client } from "@stomp/stompjs";
+import { getAccessToken, refreshAccessToken, startTokenRefresh } from "@/services/tokenService"
+import {message, chatroomProps, messageRequest} from "@/types/messaging";
+import { mvs } from '@/utils/helpers/uiScaler';
+import { set } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'react-native-paper';
+import themeColors from '@/utils/constants/colors';
+
+const ChatScreen = () => {
+  const { id, title } = useLocalSearchParams();
+  const router = useRouter();
+  const [messages, setMessages] = useState<IMessage[]>([]);
+  const [finalToken, setFinalToken] = useState<string>("");
+  const user = useSelector((state: {user: any}) => state.user);
+  const [connected, setConnected] = useState(false);
+  const clientRef = useRef<Client | null>(null);
+  const avatarPlaceholder = require('@/assets/images/avatar-placeholder.png');
+
+
+  const [chatroom, setChatroom] = useState<chatroomProps>();
+  // TODO This will be a duplicate of the chatroom state
+  const [chatroomInformation, setChatroomInformation] = useState<any>();
+
+  const navigation = useNavigation();
+  const [infoVisible, setInfoVisible] = useState(false);
+
+  const { t } = useTranslation();
+
+  // use effect to control the bottom tab bar visibility of the part "chat"
+  useEffect(() => {
+    // Hide tab bar when this screen is focused
+    const parent = navigation.getParent();
+    parent?.setOptions({
+      tabBarStyle: {
+        display: 'none'
+      }
+    });
+
+    // Restore it when unmounted
+    return () => {
+      parent?.setOptions({
+          tabBarStyle: {
+          paddingHorizontal: 10,
+          height: mvs(65),
+        },
+      });
+    };
+  }, []);
+
+  useEffect(() => {
+    if (title && typeof title === 'string') {
+      navigation.setOptions({
+        headerTitle: title,
+        headerRight: () => (
+          <Button onPress={() => setInfoVisible(true)} title="Info" />
+        ),
+      });
+    }
+  }, [title]);
+
+  useEffect(() => {
+    const response = async () => {
+      try {
+          const token = await getAccessToken();
+          if (token) {
+            setFinalToken(token);
+          }
+      } catch (error) {
+        console.error('Failed to get access token:', error);
+      }
+    };
+    const interval = setInterval(() => {
+      refreshAccessToken()
+      response();
+    }, 180000);
+
+    refreshAccessToken();
+    response();
+  }, []);
+
+  //TODO to be removed once client issue is fixed
+  useEffect(() => {
+    const fetchChatroom = async () => {
+      if (!finalToken) return;
+      try {
+        const response = await getChatroom(id.toString());
+        setChatroomInformation(response);
+        console.log("response of the chat: ", response);
+      } catch (e) {
+        console.error("Error in useEffect: ", e);
+      }
+    };
+
+    fetchChatroom();
+  }, [finalToken]);
+
+  const handleDeleteChat = async () => {
+    console.log("Delete chatroom");
+    try {
+      deleteChatroom(id.toString());
+      setInfoVisible(false);
+      router.back();
+    }catch (error) {
+      console.error("Error deleting chatroom: ", error);
+    }
+  }
+
+  const handleLeaveChat = async () => {
+    console.log("Leave chatroom");
+    try {
+      leaveChatroom(id.toString(), user.id);
+      setInfoVisible(false);
+      router.back();
+    }catch (error) {
+      console.error("Error deleting chatroom: ", error);
+    }
+  }
+  
+  useEffect(() => {
+    if (!finalToken) return;
+
+      const client = new Client({
+        brokerURL: "ws://api.sportahub.app/api/messaging-service/ws",
+        heartbeatIncoming: 0,
+        heartbeatOutgoing: 0,
+        connectHeaders: {
+          Authorization: "Bearer " + finalToken,
+        },
+
+        onWebSocketError: (error: any) => console.error("Websocket error:", error),
+        onConnect: () => {
+          setConnected(true);
+
+          client.subscribe(`/topic/chatroom/${id}`, (message: any) => {
+            console.log(JSON.parse(message.body));
+                setMessages((prev: IMessage[]) => [
+                  {
+                    _id: JSON.parse(message.body).messageId,
+                    text: JSON.parse(message.body).content,
+                    createdAt: new Date(JSON.parse(message.body).createdAt),
+                    user: {
+                      _id: JSON.parse(message.body).senderId,
+                      name: JSON.parse(message.body).sendName, // Replace with actual sender name if available
+                      avatar: JSON.parse(message.body).senderAvatar, // Replace with actual avatar URL if available
+                    },
+                  },
+                  ...prev,
+                ]);
+          },
+              {
+                "Authorization": "Bearer " + finalToken,
+              });
+        },
+        onDisconnect: () => setConnected(false),
+        debug: (msg: any) => console.log(msg),
+        onStompError: (frame: any) => console.error("Stomp error:", frame),
+
+      });
+
+      client.activate();
+      clientRef.current = client;
+
+    const fetchChatroom = async () => {
+
+      try {
+        const messagesData = await getMessages(id.toString());
+
+        // Ensure messagesData is mapped to IMessage structure
+        const formattedMessages = messagesData.map((message: any) => ({
+          _id: message.messageId,
+          text: message.content,
+          createdAt: new Date(message.createdAt),
+          user: {
+            _id: message.senderId,
+            name: message.senderName || "Unknown", // Replace with sender's name if available
+            avatar: message.senderAvatar || avatarPlaceholder, // Replace with avatar URL if available
+          },
+        }));
+
+        const chatroomData = await getChatroom(id.toString());
+
+        // console.log("chatroomData: ", chatroomData);
+
+        setChatroom(chatroomData);
+        setMessages(formattedMessages);
+      } catch (error) {
+        console.error("Failed to fetch messages", error);
+        throw error;
+      }
+    };
+      fetchChatroom();
+
+    return () => {
+        client.deactivate();
+    }
+  }, [finalToken]);
+
+  const onSend = useCallback((newMessages: IMessage[] = []) => {
+    let attachments: string[] = [];
+
+    if (!Array.isArray(newMessages)) return;
+    try {
+      const newMessage = newMessages[0];
+      if (newMessage.audio != undefined) {
+        attachments.push(newMessage.audio)
+      }
+      if (newMessage.video != undefined) {
+        attachments.push(newMessage.video)
+      }
+      if (chatroom != undefined) {
+        const newMessageRequest: messageRequest = {
+          chatroomId: chatroom.chatroomId,
+          attachments: attachments,
+          content: newMessage.text,
+          receivers: chatroom.members,
+          senderId: user.id,
+          // TODO joud use when supported
+          senderName: user.username,
+          // senderImage: user.avatar,
+        }
+        // TODO remove log
+        // @ts-ignore
+        clientRef.current.publish({
+          destination: "/app/message",
+          headers: {Authorization: "Bearer " + finalToken},
+          body: JSON.stringify(newMessageRequest),
+        })
+      }
+      } catch (error) {
+      console.error("Failed to publish messages", error);
+    }
+
+  }, [finalToken, chatroom]);
+
+
+  const renderInputToolbar = ( props: InputToolbarProps<IMessage> ) => (
+    <InputToolbar
+      {...props}
+      containerStyle={{
+        backgroundColor: themeColors.background.lightGrey,
+        borderTopWidth: 2,
+        paddingBottom: 15,
+        paddingLeft: 0,
+      }}
+      primaryStyle={{ alignItems: 'center' }}
+    />
+  );
+
+  const renderBubble = (props: any) => (
+    <Bubble
+      {...props}
+      wrapperStyle={{
+        left: {
+          backgroundColor: '#d4f5dd',
+        },
+        right: {
+          backgroundColor: '#34c759',
+        },
+      }}
+      textStyle={{
+        left: {
+          color: '#1a1a1a',
+        },
+        right: {
+          color: '#ffffff',
+        },
+      }}
+    />
+  );
+  
+  const renderTime = (props: any) => (
+    <Time
+      {...props}
+      timeTextStyle={{
+        left: { color: "#4b5563" },
+        right: { color: '4b5563' },
+      }}
+    />
+  );
+  
+  const renderComposer = (props: any) => (
+  <Composer
+    {...props}
+    textInputStyle={{
+      backgroundColor: themeColors.background.light,
+      color: themeColors.text.dark,
+      borderWidth: 0,
+      borderRadius: 15,
+      paddingTop: 8.5,
+      paddingHorizontal: 10,
+      marginLeft: 20,
+      marginRight: 5,
+      minHeight: 40,
+    }}
+  />
+  );
+
+  const renderSend = (props:any) => (
+    <Send
+      {...props}
+      disabled={!props.text}
+      containerStyle={{
+        width: 44,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 15,
+      }}
+    >
+      <IconButton icon='send' size={35} iconColor={themeColors.primary} />
+    </Send>
+  );
+
+  return (
+    <>
+    <GiftedChat
+      messages={messages}
+      onSend={(messages) => onSend(messages)}
+      user={{ _id: user.id }}
+      alwaysShowSend
+      renderInputToolbar={renderInputToolbar}
+      renderComposer={renderComposer}
+      renderSend={renderSend}
+      isScrollToBottomEnabled={true}
+      scrollToBottomComponent={() => (
+        <FontAwesomeIcon icon={faChevronDown} size={16} color="#007AFF" />
+      )}
+      renderBubble={renderBubble}
+      renderTime={renderTime}
+      renderUsernameOnMessage={true}
+      />
+
+    <Modal visible={infoVisible} transparent>
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalContent}>
+
+          {/* list of participants if it's a group chat*/}
+          {chatroomInformation?.members?.length > 2 && (
+            <View style={styles.participantTextRow}>
+              <Text style={styles.modalTitle}>Group Members</Text>
+              <Text style={styles.inlineName}>
+                {chatroomInformation.members
+                  .map((member: any) =>
+                    member.username === user.username ? 'You' : member.username
+                  )
+                  .join(', ')}
+              </Text>
+            </View>
+          )}
+
+          {/*delete or leave group*/}
+          {chatroomInformation?.createdBy === user.id ? (
+            <Button
+              title={t('chat.delete_chat')}
+              color="#e74c3c"
+              onPress={handleDeleteChat}
+            />
+          ) : (
+            <Button
+              title={t('chat.leave_chat')}
+              color="#f39c12"
+              onPress={() => handleLeaveChat()}
+            />
+          )}
+
+          <Button title={t('chat.close')} onPress={() => setInfoVisible(false)} />
+        </View>
+      </View>
+    </Modal>
+  </>
+  );
+};
+
+export default ChatScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  modalContent: {
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    padding: 24,
+    width: '100%',
+    maxWidth: 400,
+    alignItems: 'center',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  participantText: {
+    fontSize: 14,
+    color: '#333',
+    alignSelf: 'flex-start',
+    marginBottom: 4,
+    marginLeft: 4,
+  },
+  participantTextRow: {
+    marginTop: 10,
+    marginBottom: 20,
+    alignSelf: 'center',
+    alignContent: 'center',
+    justifyContent: 'center',
+  },
+  inlineName: {
+    fontSize: 15,
+    color: '#333',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sendButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    marginRight: 4,
+  },
+});
diff --git a/ClientApp/app/(tabs)/chats/_layout.tsx b/ClientApp/app/(tabs)/chats/_layout.tsx
new file mode 100644
index 000000000..55e97015c
--- /dev/null
+++ b/ClientApp/app/(tabs)/chats/_layout.tsx
@@ -0,0 +1,14 @@
+import { Stack } from 'expo-router';
+
+export default function ChatsLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="index" options={{ headerShown: false }} />
+      <Stack.Screen name="[id]" options={{ 
+        headerShown: true, 
+        headerBackTitle: 'Back', 
+        presentation: 'card',
+        }} />
+    </Stack>
+  );
+}
diff --git a/ClientApp/app/(tabs)/chats/index.tsx b/ClientApp/app/(tabs)/chats/index.tsx
index 75e92fb25..172118eb3 100644
--- a/ClientApp/app/(tabs)/chats/index.tsx
+++ b/ClientApp/app/(tabs)/chats/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
-
-
-const Chats = () => {
-
-
-  return (
-    <SafeAreaView>
-      <Text>Chats</Text>
-    </SafeAreaView>
-  );
+import ChatList from '@/components/chat/ChatList';
+import ChatListHeader from '@/components/chat/ChatListHeader';
+import { SafeAreaView } from 'react-native-safe-area-context';
+const Chats =() => {
+
+    return (
+        <SafeAreaView style={{ flex: 1 }}>
+            <ChatListHeader />
+            <ChatList />
+        </SafeAreaView>
+    )
 }
 
 export default Chats
\ No newline at end of file
diff --git a/ClientApp/app/(tabs)/profile/index.tsx b/ClientApp/app/(tabs)/profile/index.tsx
index c7509cf3f..f044e216e 100644
--- a/ClientApp/app/(tabs)/profile/index.tsx
+++ b/ClientApp/app/(tabs)/profile/index.tsx
@@ -116,6 +116,7 @@ const ProfilePage: React.FC = () => {
       </View>
 
         <ProfileSection
+          visitedId = ""
           user={user}
           isUserProfile={true}
           friendStatus={null}
diff --git a/ClientApp/app/_layout.tsx b/ClientApp/app/_layout.tsx
index 4f229db69..deb806971 100644
--- a/ClientApp/app/_layout.tsx
+++ b/ClientApp/app/_layout.tsx
@@ -1,7 +1,9 @@
 import { Stack } from 'expo-router';
 import { Provider } from 'react-redux';
 import { store } from '@/state/store';
+import "../global.css";
 import { setupAxiosInstance } from '@/services/axiosInstance';
+import { setupLocalAxiosInstance } from "@/services/axiosLocalInstance";
 import { NotificationProvider } from "@/context/NotificationContext";
 import * as Notifications from "expo-notifications"
 import 'react-native-get-random-values';
@@ -20,23 +22,25 @@ export default function RootLayout() {
     // Inject Redux dispatch into Axios
     const { dispatch } = store;
     setupAxiosInstance(dispatch);
+    setupLocalAxiosInstance(dispatch);
 
     return (
         <Provider store={store}>
-            <NotificationProvider>
-                <Stack initialRouteName="auth/login">
-                    <Stack.Screen name="auth/login" options={{ headerShown: false, gestureEnabled: false }} />
-                    <Stack.Screen name="auth/registerAccount" options={{ headerShown: false }} />
-                    <Stack.Screen name="auth/registerProfile" options={{ headerShown: false }} />
-                    <Stack.Screen name="auth/resetPassword" options={{ headerShown: true, headerBackVisible: true, headerBackTitle: 'Back', headerTitle: '' }} />
-                    <Stack.Screen name="(tabs)" options={{ headerShown: false, }} />
-                    <Stack.Screen name="editProfile/index" options={{ headerShown: false }} />
-                    <Stack.Screen name="editProfile/sportsSkills" options={{ headerShown: false}} />
-                    <Stack.Screen name="events" options={{ headerShown: false }} />
-                    <Stack.Screen name="userProfiles" options={{ headerShown: false }} />
-                    <Stack.Screen name="posts" options={{ headerShown: false }} />
-                </Stack>
-            </NotificationProvider>
+          <NotificationProvider>
+            <Stack initialRouteName="auth/login">
+                <Stack.Screen name="auth/login" options={{ headerShown: false, gestureEnabled: false }} />
+                <Stack.Screen name="auth/registerAccount" options={{ headerShown: false }} />
+                <Stack.Screen name="auth/registerProfile" options={{ headerShown: false }} />
+                <Stack.Screen name="auth/resetPassword" options={{ headerShown: true, headerBackVisible: true, headerBackTitle: 'Back', headerTitle: '' }} />
+                <Stack.Screen name="(tabs)" options={{ headerShown: false, }} />
+                <Stack.Screen name="editProfile/index" options={{ headerShown: false }} />
+                <Stack.Screen name="editProfile/sportsSkills" options={{ headerShown: false}} />
+                <Stack.Screen name="events" options={{ headerShown: false }} />
+                <Stack.Screen name="userProfiles" options={{ headerShown: false }} />
+                <Stack.Screen name="posts" options={{ headerShown: false }} />
+
+            </Stack>
+          </NotificationProvider>
         </Provider>
     );
 }
diff --git a/ClientApp/app/userProfiles/[id].tsx b/ClientApp/app/userProfiles/[id].tsx
index 16a599ba7..a852ba4e8 100644
--- a/ClientApp/app/userProfiles/[id].tsx
+++ b/ClientApp/app/userProfiles/[id].tsx
@@ -273,6 +273,7 @@ const ProfilePage: React.FC = () => {
   return (
     <SafeAreaView className="flex-1 bg-white pt-6">
       <ProfileSection
+        visitedId = {id}
         user={user}
         friendStatus={friendStatus}
         handleFriendRequest={handleFriendRequest}
diff --git a/ClientApp/components/Profile/ProfileSection.tsx b/ClientApp/components/Profile/ProfileSection.tsx
index 8564e3d0f..1fba78f48 100644
--- a/ClientApp/components/Profile/ProfileSection.tsx
+++ b/ClientApp/components/Profile/ProfileSection.tsx
@@ -11,9 +11,13 @@ import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityI
 import { hs, mhs, mvs, vs } from "@/utils/helpers/uiScaler";
 import FavoriteSportsBadges from "../FavoriteSportsBadges";
 import themeColors from "@/utils/constants/colors";
+import { createUserChatroom } from "@/services/chatService";
+import { useSelector } from "react-redux";
+import { useRouter } from "expo-router";
 import { useTranslation } from "react-i18next";
 
 interface ProfileRequest {
+  visitedId: string;
   user: any | null;
   friendStatus: string | null;
   handleFriendRequest: () => void | Promise<void> | null;
@@ -22,13 +26,16 @@ interface ProfileRequest {
 }
 
 const ProfileSection: React.FC<ProfileRequest> = ({
+  visitedId,
   user,
   friendStatus,
   handleFriendRequest,
   handleRemoveFriend,
   isUserProfile,
 }) => {
+  const router = useRouter();
   const [loading, setLoading] = useState<boolean>(false);
+  const loggedInUser = useSelector((state: { user: any }) => state.user);
   const { t } = useTranslation();
 
   if (loading) {
@@ -47,22 +54,54 @@ const ProfileSection: React.FC<ProfileRequest> = ({
     );
   }
 
+  const handlePressMessage = async () => {
+    // Handle press event
+    console.log("Message button pressed");
+    try{
+      const participants = [{ userId: visitedId, username: user.username, userImage: ''}];
+      const response = await createUserChatroom(loggedInUser.id , loggedInUser.username, '','',participants, [],false, false);
+
+      // const response = await createUserChatroom(loggedInUser.id, visitedId, user.username, [], false, false, loggedInUser.username, user.username);
+      router.push({
+        pathname: '/(tabs)/chats/[id]',
+        params: {
+          id: response.chatroomId,
+          title: user.username },
+      });
+
+    }catch(e){
+      console.log("Error in handlePress", e);
+    }
+  };
+
   return (
     <>
-      <ImageBackground
-        className="flex flex-1 items-start justify-end"
-        style={{ height: vs(320), marginTop: isUserProfile ? 16 : 0 }}
-        resizeMode="cover"
-        source={require("@/assets/images/testBackground.jpg")}
-        defaultSource={require("@/assets/images/Unknown.jpg")}
-      />
+      <View
+        style={{
+          alignItems: "center",
+          marginTop: isUserProfile ? 16 : 0,
+          marginHorizontal: mvs(50),
+        }}
+      >
+        <ImageBackground
+          style={{
+            height: vs(100),
+            width: vs(100),
+            borderRadius: vs(50),
+            overflow: "hidden",
+          }}
+          resizeMode="cover"
+          source={require("@/assets/images/Unknown.jpg")}
+          defaultSource={require("@/assets/images/Unknown.jpg")}
+        />
+      </View>
 
       <View
         style={{
           borderTopLeftRadius: 20,
           borderTopRightRadius: 20,
           paddingVertical: mvs(15),
-          marginTop: mhs(-200),
+          marginTop: mhs(16),
           borderColor: "#FFF",
           backgroundColor: "#FFF",
         }}
@@ -71,31 +110,41 @@ const ProfileSection: React.FC<ProfileRequest> = ({
           <View style={styles.container}>
             <View
               style={{
-                display:'flex',
-                flexDirection:'row',
-                gap:vs(8),
-                width:'86%',
-                alignItems:'baseline'
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                width: "100%",
               }}
             >
               <Text
                 testID="firstName"
-                style={{ fontSize: 26, fontWeight: 700, marginBottom: vs(4) }}
+                style={{ fontSize: 26, fontWeight: "700", marginBottom: vs(4), textAlign: "center" }}
               >
                 {user?.profile.firstName} {user?.profile.lastName}
               </Text>
-              <Text style={{fontSize:18, color:themeColors.border.dark}}>@{user?.username}</Text>
+              <Text style={{ fontSize: 18, color: themeColors.border.dark, textAlign: "center" }}>
+                @{user?.username}
+              </Text>
             </View>
             <View style={styles.headerContainer}>
               {!isUserProfile ? (
                 <>
                   {friendStatus === "ACCEPTED" ? (
                     <TouchableOpacity
-                      style={[styles.button, { backgroundColor: "#fff", borderColor: "#0C9E04" }]}
+                      style={[
+                        styles.button,
+                        { backgroundColor: "#fff", borderColor: "#0C9E04" },
+                      ]}
                       onPress={handleRemoveFriend}
                     >
-                      <Text style={{ color: "#0C9E04", fontWeight: "bold" }}>{t('profile_section.unfriend')}</Text>
-                      <MaterialCommunityIcons name="account-remove" size={22} color="#0C9E04" />
+                      <Text style={{ color: "#0C9E04", fontWeight: "bold" }}>
+                        {t("profile_section.unfriend")}
+                      </Text>
+                      <MaterialCommunityIcons
+                        name="account-remove"
+                        size={22}
+                        color="#0C9E04"
+                      />
                     </TouchableOpacity>
                   ) : (
                     <TouchableOpacity
@@ -114,7 +163,8 @@ const ProfileSection: React.FC<ProfileRequest> = ({
                       <Text
                         className="font-bold"
                         style={{
-                          color: friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
+                          color:
+                            friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
                         }}
                       >
                         {friendStatus === "PENDING" ? "Pending" : "Add"}
@@ -126,7 +176,9 @@ const ProfileSection: React.FC<ProfileRequest> = ({
                             : "account-plus"
                         }
                         size={22}
-                        color={friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04"}
+                        color={
+                          friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04"
+                        }
                       />
                     </TouchableOpacity>
                   )}
@@ -140,15 +192,18 @@ const ProfileSection: React.FC<ProfileRequest> = ({
                           friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
                       },
                     ]}
+                    onPress={handlePressMessage}
                   >
                     <Text
                       className="font-bold"
                       style={{
-                        color: friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff",
+                        color:
+                          friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff",
                       }}
                     >
-                      {t('profile_section.message')}
+                      {t("profile_section.message")}
                     </Text>
+
                     <MaterialCommunityIcons
                       name={
                         friendStatus === "UNKNOWN"
@@ -156,7 +211,9 @@ const ProfileSection: React.FC<ProfileRequest> = ({
                           : "chat"
                       }
                       size={22}
-                      color={friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff"}
+                      color={
+                        friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff"
+                      }
                     />
                   </TouchableOpacity>
                 </>
diff --git a/ClientApp/components/chat/ChatCard.tsx b/ClientApp/components/chat/ChatCard.tsx
new file mode 100644
index 000000000..0256127b9
--- /dev/null
+++ b/ClientApp/components/chat/ChatCard.tsx
@@ -0,0 +1,118 @@
+import { mvs } from '@/utils/helpers/uiScaler';
+import { useRouter } from 'expo-router';
+import React from 'react';
+import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
+import { format, isToday, isThisWeek, parseISO, differenceInCalendarDays } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+
+interface CardProps {
+  chatId: string;
+  cardTitle: string;
+  userImg: any;
+  messageTime: string;
+  messageText: string;
+  onLongPress?: () => void;
+  
+}
+
+const ChatCard: React.FC<CardProps> = ({ 
+  chatId, 
+  cardTitle, 
+  userImg, 
+  messageTime, 
+  messageText,
+  onLongPress
+}) => {
+    const router = useRouter();
+    const { t } = useTranslation();
+    
+
+    const formatChatTimestamp = (isoTimestamp: string): string => {
+      const date = parseISO(isoTimestamp);
+
+      if (isToday(date)) {
+        return format(date, 'hh:mm a'); // e.g. 04:26 AM
+      }
+
+      const daysDiff = differenceInCalendarDays(new Date(), date);
+      
+      if (daysDiff < 7) {
+        const weekday = format(date, 'EEEE'); // e.g. "Monday"
+        return t(`days.${weekday}`);      
+      }
+
+      return format(date, 'dd/MM/yyyy'); // e.g. 25/03/2025
+    };
+
+    return (
+    <TouchableOpacity 
+    style={styles.card}
+    onPress={() =>
+      router.push({
+        pathname: '/(tabs)/chats/[id]',
+        params: {
+          id: chatId,
+          title: cardTitle,
+        },
+      })
+    }
+    onLongPress={onLongPress}
+    >
+      <View style={styles.userInfo}>
+        <View style={styles.userImgWrapper}>
+          <Image source={userImg} style={styles.userImg} />
+        </View>
+        <View style={styles.textSection}>
+          <View style={styles.userInfoText}>
+            <Text style={styles.userName}>{cardTitle}</Text>
+            <Text style={styles.postTime}>{formatChatTimestamp(messageTime)}</Text>
+          </View>
+          <Text style={styles.messageText}>{messageText}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default ChatCard;
+
+const styles = StyleSheet.create({
+  card: {
+    width: '100%',
+    padding: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+  userInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userImgWrapper: {
+    paddingVertical: 10,
+  },
+  userImg: {
+    width: mvs(60),
+    height: mvs(60),
+    borderRadius: 25,
+  },
+  textSection: {
+    flex: 1,
+    marginLeft: 10,
+  },
+  userInfoText: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  userName: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  postTime: {
+    fontSize: 12,
+    color: '#666',
+  },
+  messageText: {
+    fontSize: 14,
+    color: '#333',
+  },
+});
diff --git a/ClientApp/components/chat/ChatList.tsx b/ClientApp/components/chat/ChatList.tsx
new file mode 100644
index 000000000..04a23db0d
--- /dev/null
+++ b/ClientApp/components/chat/ChatList.tsx
@@ -0,0 +1,94 @@
+import React, {useCallback, useState} from 'react';
+import ChatCard from '@/components/chat/ChatCard';
+import {Alert, FlatList} from 'react-native';
+import {useSelector} from "react-redux";
+import {deleteChatroom, getAllChatrooms} from "@/services/chatService";
+import { useFocusEffect } from '@react-navigation/native';
+import { message } from '@/types/messaging';
+
+interface CardProps {
+  chatroomId: string;
+  createdBy: string;
+  userImg: any;
+  createdAt: string;
+  chatroomName: string
+  messages: message[]
+}
+
+const Chats = () => {
+  const [chatrooms, setChatrooms] = useState<CardProps[]>([]);
+  const user = useSelector((state: {user: any}) => state.user);
+
+  const handleDelete = (chatroomId: string) => {
+    Alert.alert(
+      "Leave Chat",
+      "Do you want to leave this chat?",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Leave",
+          style: "destructive",
+          onPress: async () => {
+            // TODO JOUD handle selection between delete and leave endpoint calls
+            try {
+              await deleteChatroom(chatroomId);
+              setChatrooms(prev => prev.filter(c => c.chatroomId !== chatroomId));
+            } catch (e) {
+              console.error("Failed to delete chatroom:", e);
+              Alert.alert("Error", "Failed to delete chat. Please try again.");
+            }
+          }
+        }
+      ]
+    );
+  };
+
+  //TODO Joud find a balance between automatic updates and performance
+  useFocusEffect(
+    useCallback(() => {
+      const fetchChatrooms = async (user: any) => {
+        try {
+          const chatroomData = await getAllChatrooms(user.id);
+          const sortedChatrooms = chatroomData.sort((a: CardProps, b: CardProps) => {
+            const dateA = new Date(a.messages[0]?.createdAt.toString()).getTime();
+            const dateB = new Date(b.messages[0]?.createdAt.toString()).getTime();
+            return dateB - dateA; // most recent first
+          });
+          setChatrooms(sortedChatrooms);
+        } catch (error) {
+          console.error("Failed to fetch chatrooms:", error);
+          throw error;
+        }
+      };
+
+      const intervalId = setInterval(() => {
+        fetchChatrooms(user);
+      }, 3000);
+
+      fetchChatrooms(user); // Initial fetch
+
+      return () => {
+        clearInterval(intervalId); // Cleanup interval
+        setChatrooms([]); // Cleanup if needed
+      };
+    }, [user])
+  );
+  return (
+    <FlatList
+      data={chatrooms}
+      keyExtractor={(item) => item.chatroomId}
+      renderItem={({ item }) => (
+        <ChatCard
+          userImg={require('@/assets/images/avatar-placeholder.png')}
+          messageText={item?.messages[0]?.content || ""}
+          messageTime={item?.messages[0]?.createdAt?.toString() || item.createdAt.toString()}
+          cardTitle={item.chatroomName}
+          chatId={item.chatroomId}
+          onLongPress={() => handleDelete(item.chatroomId)}
+        />
+      )}
+    />
+  )
+}
+
+export default Chats
diff --git a/ClientApp/components/chat/ChatListHeader.tsx b/ClientApp/components/chat/ChatListHeader.tsx
new file mode 100644
index 000000000..1924a0e90
--- /dev/null
+++ b/ClientApp/components/chat/ChatListHeader.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { useState } from 'react';
+import NewChatModal from './NewChatModal';
+import ThemeColors from '@/utils/constants/colors';
+import { getFriendsOfUser, getUserProfile } from '@/services/userService';
+import { useSelector } from 'react-redux';
+import { setLoading } from '@/state/notifications/notificationSlice';
+
+
+const ChatListHeader: React.FC = () => {
+
+    const [modalVisible, setModalVisible] = useState(false);
+    const [friends, setFriends] = useState<any[]>([]);
+
+    const user = useSelector((state: { user: any }) => state.user);
+
+    const fetchFriends = async () => {
+        setLoading(true);
+        try {
+          const friendList = await getFriendsOfUser(user.id);
+          const friendsWithProfiles = await Promise.all(
+            friendList.map(async (friend: any) => {
+              const profile = await getUserProfile(friend.friendUserId);
+              return { ...friend, profile };
+            })
+          );
+          setFriends(friendsWithProfiles);
+        } catch (error) {
+          console.error("Failed to fetch friends:", error);
+          setFriends([]);
+        } finally {
+          setLoading(false);
+        }
+    };
+      
+    const handleNewChatPress = () => {
+        setModalVisible(true);
+        fetchFriends();
+    };
+
+
+    return (
+        <View style={styles.headerContainer}>
+            <View style={styles.spacer} />
+            <TouchableOpacity onPress={handleNewChatPress}>
+                <FontAwesome size={32} name="plus-square-o" color="#333" />
+            </TouchableOpacity> 
+            <NewChatModal
+                friends={friends}
+                visible={modalVisible}
+                onClose={() => setModalVisible(false)}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    headerContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: ThemeColors.background.lightGrey,
+        borderBottomWidth: 1,
+        borderBottomColor: '#ddd',
+    },
+    headerTitle: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#333',
+    },
+    spacer: {
+        flex: 1,
+    },
+});
+
+export default ChatListHeader;
diff --git a/ClientApp/components/chat/NewChatModal.tsx b/ClientApp/components/chat/NewChatModal.tsx
new file mode 100644
index 000000000..296f9d146
--- /dev/null
+++ b/ClientApp/components/chat/NewChatModal.tsx
@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import {Modal,View,Text,FlatList,TouchableOpacity,StyleSheet,Pressable,Image, TextInput} from 'react-native';
+import FontAwesome from '@expo/vector-icons/FontAwesome';
+import { hs, mhs, mvs, vs } from '@/utils/helpers/uiScaler';
+import { createUserChatroom } from '@/services/chatService';
+import { useSelector } from 'react-redux';
+import { router } from 'expo-router';
+import themeColors from '@/utils/constants/colors';
+import { useTranslation } from 'react-i18next';
+import { enUS, fr, ar } from 'date-fns/locale';
+
+interface NewChatModalProps {
+  friends: any [];
+  visible: boolean;
+  onClose: () => void;
+}
+
+const NewChatModal: React.FC<NewChatModalProps> = ({
+  friends,
+  visible,
+  onClose,
+}) => {
+    const [selected, setSelected] = useState<{ userId: string; username: string; userImage: string }[]>([]);
+    const LoggedUser = useSelector((state: { user: any }) => state.user);
+    const [chatTitle, setChatTitle] = useState('');
+    const user = useSelector((state: { user: any }) => state.user);
+    const { t } = useTranslation();
+    
+    const toggleSelect = (item: any) => {
+        const exists = selected.find((u) => u.userId === item.friendUserId);
+      
+        if (exists) {
+          setSelected((prev) => prev.filter((u) => u.userId !== item.friendUserId));
+        } else {
+          const newUser = {
+            userId: item.friendUserId,
+            username: item.friendUsername,
+            userImage: item.profile.profileImage || '', // use fallback if needed
+          };
+          setSelected((prev) => [...prev, newUser]);
+        }
+    };
+
+    const onCreateGroup = async (selectedFriends: any[], title: string) => {
+        let chatroomId = '';
+        console.log("Creating group with friends from onCreateGroup:", selectedFriends);
+        try {
+          // TODO the last "true" is done to help the read unread status
+            const response = await createUserChatroom(LoggedUser.id, LoggedUser.username, '', title, selectedFriends, [], false, true)
+            chatroomId = response.chatroomId;
+            
+            if (!chatroomId) {
+              console.error("No chatroomId returned from server.");
+              return;
+            }
+            
+            router.push({
+              pathname: '/(tabs)/chats/[id]',
+              params: { 
+                id: chatroomId, 
+                title: title || user.username },
+              });
+            }catch (error) {
+              console.error("Error creating group:", error);
+          }
+    };
+
+    const handleCreate = () => {
+      if (selected.length > 1 && chatTitle.trim() === '') {
+        alert('Please enter a group name.');
+        return;
+      }
+    
+      const titleToUse = selected.length > 1 ? chatTitle.trim() : 'Direct Chat';
+      
+      //TODO when creating this, it's taking the "Direct Chat" name only on the first routing
+      onCreateGroup(selected, titleToUse);
+      setChatTitle('');
+      setSelected([]);
+      onClose();
+    };
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent>
+      <View style={styles.overlay}>
+        <View style={styles.modalContent}>
+          <Text style={styles.title}>{t('chat.select_Friends')}</Text>
+          <FlatList
+            data={friends}
+            keyExtractor={(item) => item.friendUserId}
+            renderItem={({ item }) => {
+                const isSelected = selected.some((u) => u.userId === item.friendUserId);
+                return (
+                <Pressable
+                  style={[
+                    styles.friendItem,
+                    isSelected && styles.selectedFriend,
+                  ]}
+                  onPress={() => toggleSelect(item)}                  >
+                    <View style={styles.friendInfo}>
+                        <Image
+                            source={require("@/assets/images/avatar-placeholder.png")}
+                            style={[styles.participantAvatar]}
+                            testID="participant-avatar"
+                        />
+                        <Text style={styles.userInfo}>
+                            {item.friendUsername }
+                        </Text>
+                    </View>
+                </Pressable>
+              );
+            }}
+          />
+          {selected.length > 1 && (
+            <View style={{ marginBottom: 10 }}>
+              <Text style={{ fontSize: 16, marginBottom: 6 }}>{t('chat.Group_name')}</Text>
+              <View style={{
+                borderWidth: 1,
+                borderColor: '#ccc',
+                borderRadius: 8,
+                paddingHorizontal: 10,
+                paddingVertical: 6,
+              }}>
+                <TextInput
+                  placeholder={t('chat.enter_group_name_placeholder')}
+                  value={chatTitle}
+                  onChangeText={setChatTitle}
+                  style={{ fontSize: 14 }}
+                />
+              </View>
+            </View>
+          )}
+          <TouchableOpacity
+            style={styles.createBtn}
+            onPress={handleCreate}
+            disabled={selected.length === 0}
+          >
+            {/*TODO JOUD udpate the langague and check for name if the selected ones are more than 2 */}
+            <Text style={styles.createBtnText}>{t('chat.start_chat')}</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
+            <Text style={styles.closeBtnText}>{t('chat.cancel')}</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default NewChatModal;
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 20,
+    maxHeight: '80%',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 12,
+  },
+  friendItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 12,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    marginBottom: 10,
+    backgroundColor: '#f9f9f9',
+  },
+  pictureSection: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "flex-start",
+  },
+  selectedFriend: {
+    backgroundColor: '#dff2de',
+    borderColor: '#00b803',
+  },
+  friendName: {
+    fontSize: 16,
+    color: '#333',  
+},
+  createBtn: {
+    backgroundColor: themeColors.button.primaryBackground,
+    height: vs(50),
+    borderRadius: mhs(25),
+    alignItems: 'center',
+    justifyContent: "center",
+    marginBottom: vs(16),
+    shadowColor: '#475569',
+    shadowOffset: { width: 0, height: vs(2) },
+    shadowOpacity: 0.25,
+    shadowRadius: hs(4),
+    minHeight: 40
+  },
+  createBtnText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  closeBtn: {
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  closeBtnText: {
+    color: '#666',
+  },
+  participantAvatar: {
+      width: mhs(45),
+      height: mvs(45),
+      borderRadius: mhs(30),
+},
+infoSection: {
+    display: "flex",
+    flex: 3,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-start",
+    marginLeft: vs(16),
+  },
+  userInfo: {
+    fontSize: 14,
+    fontWeight: "bold",
+    marginBottom: hs(5),
+    color: "#333",
+  },
+  friendInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    marginRight: 12,
+  }
+});
diff --git a/ClientApp/ios/ClientApp.xcodeproj/project.pbxproj b/ClientApp/ios/ClientApp.xcodeproj/project.pbxproj
index f3314865f..4e2a24ec7 100644
--- a/ClientApp/ios/ClientApp.xcodeproj/project.pbxproj
+++ b/ClientApp/ios/ClientApp.xcodeproj/project.pbxproj
@@ -307,8 +307,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseInstallations/FirebaseInstallations_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseMessaging/FirebaseMessaging_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleDataTransport/GoogleDataTransport_Privacy.bundle",
-				"${PODS_ROOT}/GoogleMaps/Maps/Frameworks/GoogleMaps.xcframework/ios-arm64/GoogleMaps.framework/Resources/GoogleMaps.bundle",
-				"${PODS_ROOT}/GoogleMaps/Maps/Frameworks/GoogleMaps.xcframework/ios-arm64_x86_64-simulator/GoogleMaps.framework/Resources/GoogleMaps.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleMaps/GoogleMapsResources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleUtilities/GoogleUtilities_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/PromisesObjC/FBLPromises_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/PromisesSwift/Promises_Privacy.bundle",
@@ -361,7 +360,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseInstallations_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseMessaging_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleDataTransport_Privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleMaps.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleMapsResources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleUtilities_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FBLPromises_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Promises_Privacy.bundle",
diff --git a/ClientApp/ios/Podfile.lock b/ClientApp/ios/Podfile.lock
index 4bfa4a205..da575906c 100644
--- a/ClientApp/ios/Podfile.lock
+++ b/ClientApp/ios/Podfile.lock
@@ -350,7 +350,7 @@ PODS:
     - GoogleUtilities/Reachability (~> 8.0)
     - GoogleUtilities/UserDefaults (~> 8.0)
     - nanopb (~> 3.30910.0)
-  - FirebaseRemoteConfigInterop (11.10.0)
+  - FirebaseRemoteConfigInterop (11.11.0)
   - FirebaseSessions (11.10.0):
     - FirebaseCore (~> 11.10.0)
     - FirebaseCoreExtension (~> 11.10.0)
@@ -362,32 +362,15 @@ PODS:
     - PromisesSwift (~> 2.1)
   - fmt (9.1.0)
   - glog (0.3.5)
-  - Google-Maps-iOS-Utils (4.2.2):
-    - Google-Maps-iOS-Utils/Clustering (= 4.2.2)
-    - Google-Maps-iOS-Utils/Geometry (= 4.2.2)
-    - Google-Maps-iOS-Utils/GeometryUtils (= 4.2.2)
-    - Google-Maps-iOS-Utils/Heatmap (= 4.2.2)
-    - Google-Maps-iOS-Utils/QuadTree (= 4.2.2)
-    - GoogleMaps (~> 7.3)
-  - Google-Maps-iOS-Utils/Clustering (4.2.2):
-    - Google-Maps-iOS-Utils/QuadTree
-    - GoogleMaps (~> 7.3)
-  - Google-Maps-iOS-Utils/Geometry (4.2.2):
-    - GoogleMaps (~> 7.3)
-  - Google-Maps-iOS-Utils/GeometryUtils (4.2.2):
-    - GoogleMaps (~> 7.3)
-  - Google-Maps-iOS-Utils/Heatmap (4.2.2):
-    - Google-Maps-iOS-Utils/QuadTree
-    - GoogleMaps (~> 7.3)
-  - Google-Maps-iOS-Utils/QuadTree (4.2.2):
-    - GoogleMaps (~> 7.3)
+  - Google-Maps-iOS-Utils (5.0.0):
+    - GoogleMaps (~> 8.0)
   - GoogleDataTransport (10.1.0):
     - nanopb (~> 3.30910.0)
     - PromisesObjC (~> 2.4)
-  - GoogleMaps (7.4.0):
-    - GoogleMaps/Maps (= 7.4.0)
-  - GoogleMaps/Base (7.4.0)
-  - GoogleMaps/Maps (7.4.0):
+  - GoogleMaps (8.4.0):
+    - GoogleMaps/Maps (= 8.4.0)
+  - GoogleMaps/Base (8.4.0)
+  - GoogleMaps/Maps (8.4.0):
     - GoogleMaps/Base
   - GoogleUtilities/AppDelegateSwizzler (8.0.2):
     - GoogleUtilities/Environment
@@ -1664,11 +1647,11 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.11.0):
     - React-Core
-  - react-native-google-maps (1.18.0):
-    - Google-Maps-iOS-Utils (= 4.2.2)
-    - GoogleMaps (= 7.4.0)
+  - react-native-google-maps (1.20.1):
+    - Google-Maps-iOS-Utils (= 5.0.0)
+    - GoogleMaps (= 8.4.0)
     - React-Core
-  - react-native-maps (1.18.0):
+  - react-native-maps (1.20.1):
     - React-Core
   - react-native-pager-view (6.5.1):
     - DoubleConversion
@@ -2544,13 +2527,13 @@ SPEC CHECKSUMS:
   FirebaseCrashlytics: 84b073c997235740e6a951b7ee49608932877e5c
   FirebaseInstallations: 9980995bdd06ec8081dfb6ab364162bdd64245c3
   FirebaseMessaging: 2b9f56aa4ed286e1f0ce2ee1d413aabb8f9f5cb9
-  FirebaseRemoteConfigInterop: 7c9a9c65eff32cbb0f7bf8d18140612ad57dfcc6
+  FirebaseRemoteConfigInterop: 85bdce8babed7814816496bb6f082bc05b0a45e1
   FirebaseSessions: 9b3b30947b97a15370e0902ee7a90f50ef60ead6
   fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
   glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
-  Google-Maps-iOS-Utils: f77eab4c4326d7e6a277f8e23a0232402731913a
+  Google-Maps-iOS-Utils: 66d6de12be1ce6d3742a54661e7a79cb317a9321
   GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
-  GoogleMaps: 032f676450ba0779bd8ce16840690915f84e57ac
+  GoogleMaps: 8939898920281c649150e0af74aa291c60f2e77d
   GoogleUtilities: 26a3abef001b6533cf678d3eb38fd3f614b7872d
   hermes-engine: 1949ca944b195a8bde7cbf6316b9068e19cf53c6
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
@@ -2588,8 +2571,8 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: b8ec254319f3ab74325caddc8f0c1483bcef59ae
   react-native-date-picker: 4cb5304937dc370817a84f120271c565964a763a
   react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
-  react-native-google-maps: a3a01acdc5e15d1b74d600ba270c454bac6239b4
-  react-native-maps: 3b0c8378ff774053bdd8954c820e987fdd7b4d72
+  react-native-google-maps: c4f5c5b2dda17e7cb2cb2b37a81f140b039b3e7e
+  react-native-maps: 9febd31278b35cd21e4fad2cf6fa708993be5dab
   react-native-pager-view: 37b5ff5daefc40c2e756457b0d0b2483a8ed3b94
   react-native-safe-area-context: 8b8404e70b0cbf2a56428a17017c14c1dcc16448
   React-nativeconfig: 014403841159c621de6d2f888ad829aac530f93e
diff --git a/ClientApp/package.json b/ClientApp/package.json
index fdcdb1e32..c329ef7df 100644
--- a/ClientApp/package.json
+++ b/ClientApp/package.json
@@ -52,6 +52,9 @@
   "dependencies": {
     "@expo/config-plugins": "~9.0.0",
     "@expo/vector-icons": "^14.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-native-fontawesome": "^0.3.2",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/template": "^0.76.6",
@@ -62,6 +65,7 @@
     "@react-navigation/native": "^7.0.14",
     "@react-navigation/native-stack": "^7.2.0",
     "@reduxjs/toolkit": "^2.4.0",
+    "@stomp/stompjs": "^7.0.1",
     "@testing-library/react": "^16.0.1",
     "date-fns": "^2.30.0",
     "eas-cli": "^15.0.12",
@@ -73,6 +77,7 @@
     "expo-constants": "~17.0.8",
     "expo-dev-client": "~5.0.15",
     "expo-device": "~7.0.2",
+    "expo-file-system": "~18.0.12",
     "expo-font": "~13.0.2",
     "expo-image-picker": "~16.0.3",
     "expo-linking": "~7.0.5",
@@ -103,10 +108,12 @@
     "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "^1.11.0",
+    "react-native-gifted-chat": "^2.6.5",
     "react-native-google-places-autocomplete": "^2.5.7",
     "react-native-image-viewing": "^0.2.2",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-maps": "1.18.0",
+    "react-native-keyboard-controller": "^1.16.8",
+    "react-native-maps": "1.20.1",
     "react-native-mime-types": "^2.5.0",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-pager-view": "6.5.1",
@@ -116,14 +123,16 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
     "react-native-svg": "15.8.0",
+    "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^4.0.1",
     "react-native-toast-message": "^2.2.1",
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.19.10",
     "react-redux": "^9.1.2",
+    "react-stomp": "^5.1.0",
+    "sockjs-client": "^1.6.1",
     "tailwindcss": "^3.4.14",
-    "use-debounce": "^10.0.4",
-    "expo-file-system": "~18.0.12"
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/ClientApp/services/axiosLocalInstance.ts b/ClientApp/services/axiosLocalInstance.ts
new file mode 100644
index 000000000..f0924a39e
--- /dev/null
+++ b/ClientApp/services/axiosLocalInstance.ts
@@ -0,0 +1,155 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
+import { refreshAccessToken, getAuthHeaders } from './tokenService';
+import { API_ENDPOINTS } from '@/utils/api/endpoints';
+import { logoutUser } from './authService';
+import { ALERT_MESSAGES, consoleError } from '@/utils/api/errorHandlers';
+
+interface ErrorResponseData {
+    error?: string;
+    [key: string]: any; // To account for additional properties in the response
+}
+
+let axiosLocalInstance: AxiosInstance | null = null;
+
+export const getAxiosLocalInstance = (): AxiosInstance => {
+    if (!axiosLocalInstance) {
+        throw new Error('Axios instance not configured. Call setupAxiosInstance(dispatch) before using it.');
+    }
+    return axiosLocalInstance;
+};
+
+export const setupLocalAxiosInstance = (dispatch: any): AxiosInstance => {
+    if ((global as any).axiosLocalInstance) {
+        return (global as any).axiosLocalInstance;
+    }
+    const config: AxiosRequestConfig = {
+        baseURL: 'https://api-dev.sportahub.com/', // Fallback for baseURL
+        timeout: 5000,
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+        },
+    };
+
+    axiosLocalInstance = axios.create(config); // Assign to global variable
+
+    // Request interceptor
+    axiosLocalInstance.interceptors.request.use(
+        async (config) => {
+            try {
+                const AUTH_ENDPOINTS = [
+                    API_ENDPOINTS.LOGIN,
+                    API_ENDPOINTS.REFRESH_TOKEN,
+                    API_ENDPOINTS.REGISTER,
+                    API_ENDPOINTS.RESET_PASSWORD,
+                ];
+
+                // Skip adding Authorization header for auth-related endpoints
+                if (AUTH_ENDPOINTS.some((endpoint) => config.url?.includes(endpoint))) {
+                    return config;
+                }
+
+                const headers = await getAuthHeaders();
+                config.headers.Authorization = headers.Authorization;
+                return config;
+            } catch (error) {
+                console.error('Error attaching headers:', error);
+                throw error;
+            }
+        },
+        (error) => Promise.reject(error)
+    );
+
+    // Response interceptor
+    axiosLocalInstance.interceptors.response.use(
+        (response: AxiosResponse) => response, // Pass through successful responses
+        async (error: AxiosError<ErrorResponseData>) => {
+            const status = error.response?.status;
+            const errorData = error.response?.data;
+            console.log(axiosLocalInstance);
+
+            switch (status) {
+                case 400:
+                    consoleError(ALERT_MESSAGES.badRequest.title, ALERT_MESSAGES.badRequest.message, status);
+                    break;
+
+                case 401: {
+                    const retryCount = (error.config as any)?._retryCount || 0;
+                    const MAX_RETRY_LIMIT = 1;
+
+                    // Handle invalid credentials
+                    if (errorData?.error && errorData.error.includes('invalid_grant')) {
+                        consoleError(
+                            ALERT_MESSAGES.invalidCredentials.title,
+                            ALERT_MESSAGES.invalidCredentials.message,
+                            status
+                        );
+                        return Promise.reject(new Error(ALERT_MESSAGES.invalidCredentials.message));
+                    }
+
+                    // Retry logic for token expiration
+                    if (retryCount >= MAX_RETRY_LIMIT) {
+                        console.error('Retry limit exceeded.');
+                        await logoutUser(dispatch);
+                        return Promise.reject(error);
+                    }
+
+                    (error.config as any)._retryCount = retryCount + 1;
+
+                    try {
+                        await refreshAccessToken();
+                        const headers = await getAuthHeaders();
+                        if (!axiosLocalInstance) {
+                            throw new Error('Axios instance is not configured.');
+                        }
+                        const retryConfig = {
+                            ...error.config,
+                            headers: { ...error.config?.headers, ...headers },
+                        };
+                        return axiosLocalInstance.request(retryConfig);
+                    } catch (refreshError) {
+                        await logoutUser(dispatch);
+                        console.error('Token refresh failed:', refreshError);
+                        return Promise.reject(refreshError);
+                    }
+                }
+
+                case 403:
+                    consoleError(ALERT_MESSAGES.forbidden.title, ALERT_MESSAGES.forbidden.message, status);
+                    break;
+
+                case 404:
+                    consoleError(ALERT_MESSAGES.notFound.title, ALERT_MESSAGES.notFound.message, status);
+                    break;
+
+                case 409:
+                    consoleError(ALERT_MESSAGES.conflict.title, ALERT_MESSAGES.conflict.message, status);
+                    break;
+
+                case 500:
+                    consoleError(ALERT_MESSAGES.serverError.title, ALERT_MESSAGES.serverError.message, status);
+                    break;
+
+                case 503:
+                    consoleError(ALERT_MESSAGES.serviceUnavailable.title, ALERT_MESSAGES.serviceUnavailable.message, status);
+                    break;
+
+                default:
+                    consoleError(ALERT_MESSAGES.defaultError.title, ALERT_MESSAGES.defaultError.message);
+                    break;
+            }
+
+            // Handle network errors or cases without a response
+            if (!error.response) {
+                console.error('Network error or no response:', error.message);
+                return Promise.reject(new Error(ALERT_MESSAGES.networkError.message));
+            }
+
+            return Promise.reject(error);
+        }
+    );
+    (global as any).axiosInstance = axiosLocalInstance;
+    return axiosLocalInstance;
+};
+
+    
\ No newline at end of file
diff --git a/ClientApp/services/chatService.ts b/ClientApp/services/chatService.ts
new file mode 100644
index 000000000..c0d1e07a6
--- /dev/null
+++ b/ClientApp/services/chatService.ts
@@ -0,0 +1,127 @@
+import { getAxiosInstance } from '@/services/axiosInstance';
+import { API_ENDPOINTS } from '@/utils/api/endpoints';
+import {store} from "@/state/store";
+import { message } from '@/types/messaging';
+
+// API_ENDPOINTS.GET_CHATROOM
+export const getChatroom = async (chatroomId: string) => {
+  try {
+    const axiosLocalInstance = getAxiosInstance();
+    const response = await axiosLocalInstance.get(API_ENDPOINTS.GET_CHATROOM.replace("{chatroomId}", chatroomId));
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching chatroom:", error);
+    throw error;
+  }
+};
+
+// API_ENDPOINTS.GET_CHATROOMS
+export const getAllChatrooms = async (userId: string) => {
+
+  try {
+    const axiosLocalInstance = getAxiosInstance();
+    const response = await axiosLocalInstance.get(API_ENDPOINTS.GET_All_CHATROOMS.replace("{userId}", userId));
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching chatrooms:', error);
+    throw error;
+  }
+};
+
+// API_ENDPOINTS.GET_MESSAGES
+export const getMessages = async (chatroomId: string) => {
+
+  try {
+    const axiosLocalInstance = getAxiosInstance();
+    const response = await axiosLocalInstance.get(
+        API_ENDPOINTS.GET_MESSAGES.replace("{chatroomId}", chatroomId));
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching messages:', error);
+    throw error;
+  }
+};
+
+
+export const createUserChatroom = async (
+  creatorId: string,
+  creatorUsername: string,
+  creatorImage: string,
+  nameOfChatRoom: string,
+  participants: any [],           
+  messages: string[],
+  isEvent: boolean,
+  unread: boolean,          
+) => {
+  try {
+    const axiosLocalInstance = getAxiosInstance();
+
+    const members = [
+      {
+        userId: creatorId,
+        username: creatorUsername,
+        userImage: creatorImage,
+      },
+      ...participants.map((participant) => ({
+        userId: participant.userId,
+        username: participant.username,
+        userImage: "",
+        }))
+    ];
+
+    console.log("members: ", members);
+    console.log(
+      {
+      createdBy: creatorId,
+      chatroomName: nameOfChatRoom,
+      members: members,
+      messages: messages,
+      isEvent: isEvent,
+      unread: unread,
+    }
+  )
+    const response = await axiosLocalInstance.post(API_ENDPOINTS.CREATE_CHATROOM, {
+      createdBy: creatorId,
+      chatroomName: nameOfChatRoom,
+      members: members,
+      messages: messages,
+      isEvent: isEvent,
+      unread: unread,
+    });
+
+    console.log("createUserChatroom response:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error('Error creating chatroom:', error);
+    throw error;
+  }
+};
+
+
+// API_ENDPOINTS.DELETE_CHATROOM
+export const deleteChatroom = async (chatroomId: string) => {
+  try {
+    const axiosLocalInstance = getAxiosInstance();
+    console.log("deleteChatroom: ", chatroomId);
+    const response = await axiosLocalInstance.delete(API_ENDPOINTS.DELETE_CHATROOM.replace("{chatroomId}", chatroomId));
+    return response.data;
+  } catch (error) {
+    console.error('Error deleting chatroom:', error);
+    throw error;
+  }
+};
+
+export const leaveChatroom = async (chatroomId: string, userId: string) => {
+  try {
+    const axiosLocalInstance = getAxiosInstance();
+    const response = await axiosLocalInstance.post(
+        API_ENDPOINTS.LEAVE_CHATROOM
+            .replace("{chatroomId}", chatroomId)
+            .replace("{userId}", userId)
+    );
+    return response.data;
+  } catch (error) {
+    console.error('Error deleting chatroom:', error);
+    throw error;
+  }
+}
\ No newline at end of file
diff --git a/ClientApp/services/tokenService.ts b/ClientApp/services/tokenService.ts
index dea48c7ce..9dd4c27a7 100644
--- a/ClientApp/services/tokenService.ts
+++ b/ClientApp/services/tokenService.ts
@@ -82,7 +82,7 @@ export function stopTokenRefresh() {
 //#endregion
 
 //#region Helpers
-function decodeJWT(jwt: string): { exp: number } {
+export function decodeJWT(jwt: string): { exp: number } {
     try {
         const payload = JSON.parse(
             Buffer.from(
@@ -112,7 +112,7 @@ function joinToken(part1: string, part2: string): string {
     return part1 + part2;
 }
 
-async function getAccessToken() {
+export async function getAccessToken() {
     try {
     const part1 = await getFromSecureStore('accessTokenPart1');
     const part2 = await getFromSecureStore('accessTokenPart2');
diff --git a/ClientApp/types/messaging.ts b/ClientApp/types/messaging.ts
new file mode 100644
index 000000000..e2788ad83
--- /dev/null
+++ b/ClientApp/types/messaging.ts
@@ -0,0 +1,37 @@
+export interface message {
+    messageId: string;
+    chatroomId: string; //required
+    senderId: string; //required
+    receivers: member[]; //required
+    senderName: string;
+    content: string; //required
+    createdAt: Number | Date;
+    attachments: string[];
+    senderImage: string
+    }
+
+export interface chatroomProps {
+    chatroomId: string;
+    createdAt: Number | Date;
+    createdBy: string;
+    members: member[];
+    messages: message[];
+    isEvent: boolean;
+    unread: boolean;
+    }
+
+export interface messageRequest {
+    chatroomId: string;
+    senderId: string;
+    receivers: member[];
+    content: string;
+    attachments: string[];
+    senderName: string;
+    // senderImage: string;
+    }
+
+export interface member {
+    userId: string;
+    username: string;
+    userImage: string;
+}
diff --git a/ClientApp/utils/api/endpoints.tsx b/ClientApp/utils/api/endpoints.tsx
index d104a0f91..02caebe49 100644
--- a/ClientApp/utils/api/endpoints.tsx
+++ b/ClientApp/utils/api/endpoints.tsx
@@ -31,6 +31,7 @@ export const API_ENDPOINTS = {
   GET_ALL_FRIENDS: 'user-service/user/{userId}/friends',
   RESPOND_TO_FRIEND_REQUEST: 'user-service/user/{userId}/friend-requests/{requestId}',
   GET_PROFILE_BY_ID: 'user-service/user/{userId}/profile',
+
   GET_PUBLIC_PROFILE:  'user-service/user/{userId}/profile',
 
   GET_ALL_POSTS: "event-service/event/{eventId}/social/post",
@@ -38,4 +39,11 @@ export const API_ENDPOINTS = {
 
   UPLOAD_FILE: "storage-service/objects/upload",
   GET_FILE: "storage-service/objects/file{objectPath}",
+
+  GET_All_CHATROOMS: 'messaging-service/messaging/chatrooms/{userId}',
+  GET_MESSAGES: 'messaging-service/messaging/chatrooms/messages/{chatroomId}',
+  GET_CHATROOM: 'messaging-service/messaging/chatroom/{chatroomId}',
+  CREATE_CHATROOM: 'messaging-service/messaging/chatroom',
+  DELETE_CHATROOM: 'messaging-service/messaging/chatroom/{chatroomId}',
+  LEAVE_CHATROOM: 'messaging-service/messaging//chatroom/leave-chatroom/{chatroomId}/{userId}',
 };
diff --git a/ClientApp/utils/localization/en.json b/ClientApp/utils/localization/en.json
index 52e49cbdf..266e75e08 100644
--- a/ClientApp/utils/localization/en.json
+++ b/ClientApp/utils/localization/en.json
@@ -467,5 +467,24 @@
     "failed_to_load_user_data": "Failed to load user data.",
     "unfriend": "Unfriend",
     "message": "Message"
+  }, 
+  "chat" : {
+    "select_Friends" : "Select Friends",
+    "start_chat" : "Start Chat",
+    "cancel": "Cancel",
+    "Group_name" : "Group name",
+    "enter_group_name_placeholder" : "Enter group name",
+    "delete_chat" : "Delete Chat",
+    "leave_chat": "Leave Chat",
+    "close": "Close"
+  }, 
+  "days": {
+    "Monday": "Monday",
+    "Tuesday": "Tuesday",
+    "Wednesday": "Wednesday",
+    "Thursday": "Thursday",
+    "Friday": "Friday",
+    "Saturday": "Saturday",
+    "Sunday": "Sunday"
   }
 }
diff --git a/ClientApp/utils/localization/fr.json b/ClientApp/utils/localization/fr.json
index 50afb4ca9..a7fb03a31 100644
--- a/ClientApp/utils/localization/fr.json
+++ b/ClientApp/utils/localization/fr.json
@@ -406,6 +406,25 @@
     "select_cutoff_time": "Sélectionnez l'heure limite d'inscription",
     "enter_event_description": "Entrez la description de l'événement",
     "failed_to_load_details": "Échec du chargement des détails de l'événement"
+  }, 
+  "chat" : {
+    "select_Friends" : "Sélectionner des amis",
+    "start_chat" : "Démarrer la discussion",
+    "cancel": "Annuler",
+    "Group_name" : "Nom du groupe",
+    "enter_group_name_placeholder" : "Entrez le nom du groupe",
+    "delete_chat" : "Supprimer la discussion",
+    "leave_chat": "Quitter la discussion",
+    "close": "Fermer"
+  },
+  "days": {
+    "Monday": "Lundi",
+    "Tuesday": "Mardi",
+    "Wednesday": "Mercredi",
+    "Thursday": "Jeudi",
+    "Friday": "Vendredi",
+    "Saturday": "Samedi",
+    "Sunday": "Dimanche"
   },
   "event_list": {
     "loading_events": "Chargement des événements ...",