diff --git a/ClientApp/.gitignore b/ClientApp/.gitignore
index 388c39a66..7a80b24f8 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/(tabs)/_layout.tsx b/ClientApp/app/(tabs)/_layout.tsx
index dcfac5a2c..87aef044f 100644
--- a/ClientApp/app/(tabs)/_layout.tsx
+++ b/ClientApp/app/(tabs)/_layout.tsx
@@ -50,17 +50,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 123333966..e6c37afa3 100644
--- a/ClientApp/app/_layout.tsx
+++ b/ClientApp/app/_layout.tsx
@@ -5,11 +5,13 @@ import "../global.css";
 import { setupAxiosInstance } from '@/services/axiosInstance';
 import 'react-native-get-random-values';
 import '@/utils/localization/i18n';
+import {setupLocalAxiosInstance} from "@/services/axiosLocalInstance";
 
 export default function RootLayout() {
     // Inject Redux dispatch into Axios
     const { dispatch } = store;
     setupAxiosInstance(dispatch);
+    setupLocalAxiosInstance(dispatch);
 
     return (
         <Provider store={store}>
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..5289f31f7 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,127 +54,177 @@ 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 (
     <>
+      <View
+      style={{
+        alignItems: "center",
+        marginTop: isUserProfile ? 16 : 0,
+        marginHorizontal: mvs(50),
+      }}
+      >
       <ImageBackground
-        className="flex flex-1 items-start justify-end"
-        style={{ height: vs(320), marginTop: isUserProfile ? 16 : 0 }}
+        style={{
+        height: vs(100),
+        width: vs(100),
+        borderRadius: vs(50),
+        overflow: "hidden",
+        }}
         resizeMode="cover"
-        source={require("@/assets/images/testBackground.jpg")}
+        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),
-          borderColor: "#FFF",
-          backgroundColor: "#FFF",
-        }}
+      style={{
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingVertical: mvs(15),
+        marginTop: mhs(16),
+        borderColor: "#FFF",
+        backgroundColor: "#FFF",
+      }}
       >
-        <View className="items-center flex flex-row gap-4">
-          <View style={styles.container}>
-            <View
-              style={{
-                display:'flex',
-                flexDirection:'row',
-                gap:vs(8),
-                width:'86%',
-                alignItems:'baseline'
-              }}
+      <View className="items-center flex flex-row gap-4">
+        <View style={styles.container}>
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            width: "100%",
+          }}
+        >
+          <Text
+            testID="firstName"
+            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, textAlign: "center" }}>
+            @{user?.username}
+          </Text>
+        </View>
+        <View style={styles.headerContainer}>
+          {!isUserProfile ? (
+          <>
+            {friendStatus === "ACCEPTED" ? (
+            <TouchableOpacity
+              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"
+              />
+            </TouchableOpacity>
+            ) : (
+            <TouchableOpacity
+              style={[
+              styles.button,
+              {
+                backgroundColor:
+                friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff",
+                borderColor:
+                friendStatus !== "UNKNOWN" ? "#0C9E04" : "#fff",
+              },
+              ]}
+              onPress={handleFriendRequest}
+              disabled={friendStatus !== "UNKNOWN"}
             >
               <Text
-                testID="firstName"
-                style={{ fontSize: 26, fontWeight: 700, marginBottom: vs(4) }}
+              className="font-bold"
+              style={{
+                color:
+                friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
+              }}
               >
-                {user?.profile.firstName} {user?.profile.lastName}
+              {friendStatus === "PENDING" ? "Pending" : "Add"}
               </Text>
-              <Text style={{fontSize:18, color:themeColors.border.dark}}>@{user?.username}</Text>
-            </View>
-            <View style={styles.headerContainer}>
-              {!isUserProfile ? (
-                <>
-                  {friendStatus === "ACCEPTED" ? (
-                    <TouchableOpacity
-                      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" />
-                    </TouchableOpacity>
-                  ) : (
-                    <TouchableOpacity
-                      style={[
-                        styles.button,
-                        {
-                          backgroundColor:
-                            friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff",
-                          borderColor:
-                            friendStatus !== "UNKNOWN" ? "#0C9E04" : "#fff",
-                        },
-                      ]}
-                      onPress={handleFriendRequest}
-                      disabled={friendStatus !== "UNKNOWN"}
-                    >
-                      <Text
-                        className="font-bold"
-                        style={{
-                          color: friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
-                        }}
-                      >
-                        {friendStatus === "PENDING" ? "Pending" : "Add"}
-                      </Text>
-                      <MaterialCommunityIcons
-                        name={
-                          friendStatus === "PENDING"
-                            ? "account-clock"
-                            : "account-plus"
-                        }
-                        size={22}
-                        color={friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04"}
-                      />
-                    </TouchableOpacity>
-                  )}
+              <MaterialCommunityIcons
+              name={
+                friendStatus === "PENDING"
+                ? "account-clock"
+                : "account-plus"
+              }
+              size={22}
+              color={
+                friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04"
+              }
+              />
+            </TouchableOpacity>
+            )}
 
-                  {/* Message button */}
-                  <TouchableOpacity
-                    style={[
-                      styles.button,
-                      {
-                        backgroundColor:
-                          friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
-                      },
-                    ]}
-                  >
-                    <Text
-                      className="font-bold"
-                      style={{
-                        color: friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff",
-                      }}
-                    >
-                      {t('profile_section.message')}
-                    </Text>
-                    <MaterialCommunityIcons
-                      name={
-                        friendStatus === "UNKNOWN"
-                          ? "chat-outline"
-                          : "chat"
-                      }
-                      size={22}
-                      color={friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff"}
-                    />
-                  </TouchableOpacity>
-                </>
-              ) : (
-                <FavoriteSportsBadges
-                  sports={user?.profile.sportsOfPreference}
-                />
-              )}
-            </View>
-          </View>
+            {/* Message button */}
+            <TouchableOpacity
+            style={[
+              styles.button,
+              {
+              backgroundColor:
+                friendStatus === "UNKNOWN" ? "#fff" : "#0C9E04",
+              },
+            ]}
+            onPress={handlePressMessage}
+            >
+            <Text
+              className="font-bold"
+              style={{
+              color:
+                friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff",
+              }}
+            >
+              {t("profile_section.message")}
+            </Text>
+
+            <MaterialCommunityIcons
+              name={
+              friendStatus === "UNKNOWN"
+                ? "chat-outline"
+                : "chat"
+              }
+              size={22}
+              color={
+              friendStatus === "UNKNOWN" ? "#0C9E04" : "#fff"
+              }
+            />
+            </TouchableOpacity>
+          </>
+          ) : (
+          <FavoriteSportsBadges
+            sports={user?.profile.sportsOfPreference}
+          />
+          )}
         </View>
+        </View>
+      </View>
       </View>
     </>
   );
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..2cafbf6ef
--- /dev/null
+++ b/ClientApp/components/chat/ChatList.tsx
@@ -0,0 +1,95 @@
+import React, {useCallback, useEffect, 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 {User} from "react-native-gifted-chat";
+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
\ No newline at end of file
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/package.json b/ClientApp/package.json
index 3abda6e8d..7ddfebdb4 100644
--- a/ClientApp/package.json
+++ b/ClientApp/package.json
@@ -52,12 +52,15 @@
   "dependencies": {
     "@expo/config-plugins": "~9.0.0",
     "@expo/vector-icons": "^14.0.3",
+    "@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-picker/picker": "^2.9.0",
     "@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",
@@ -66,7 +69,7 @@
     "expo-checkbox": "~4.0.0",
     "expo-clipboard": "~7.0.1",
     "expo-constants": "~17.0.5",
-    "expo-dev-client": "~5.0.11",
+    "expo-dev-client": "~5.0.12",
     "expo-font": "~13.0.2",
     "expo-image-picker": "~16.0.3",
     "expo-linking": "~7.0.5",
@@ -95,10 +98,11 @@
     "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-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",
@@ -108,11 +112,14 @@
     "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"
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 ...",