diff --git a/app/src/components/ExpandingTextArea.tsx b/app/src/components/ExpandingTextArea.tsx
index 86a1ca4d..74beb98e 100644
--- a/app/src/components/ExpandingTextArea.tsx
+++ b/app/src/components/ExpandingTextArea.tsx
@@ -1,59 +1,96 @@
 import { useEffect, useRef } from "react";
 import styled from "styled-components";
+import { MentionsInput, Mention } from "react-mentions";
+import useMentionList from "@features/chats/hooks/useMentionList";
 
-const Textarea = styled.textarea`
-  outline: none;
-  border: none;
-
-  flex: 1;
-  align-self: center;
-
-  caret-color: var(--accent-color);
+const StyledMentionsInput = styled.div`
+  width: 100%;
+  max-width: 27rem;
   color: var(--color-text);
-
-  resize: none;
-  overflow: hidden;
-
-  font-size: 1rem;
-  line-height: 1.5;
-  padding: 0.25rem;
-
-  max-height: 300px;
 `;
 
 type PropsType = {
   input: string;
   setInput: (value: string) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onKeyDown?: (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => void;
 };
 
 function ExpandingTextArea({ input, setInput, onKeyDown }: PropsType) {
-  const ref = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const { filteredMembers } = useMentionList();
 
   function handleInput() {
-    if (ref.current) {
-      ref.current.style.height = "auto";
-      ref.current.style.height = `${ref.current.scrollHeight}px`;
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
     }
   }
+
   useEffect(() => {
-    if (ref.current) {
-      if (ref.current.value === "" || input === "") {
-        ref.current.style.height = "32px";
+    if (textareaRef.current) {
+      if (textareaRef.current.value === "" || input === "") {
+        textareaRef.current.style.height = "32px";
       }
     }
   }, [input]);
 
+  console.log(filteredMembers);
+
   return (
-    <Textarea
-      ref={ref}
-      value={input}
-      onChange={(e) => setInput(e.target.value)}
-      placeholder="Message"
-      rows={1}
-      onInput={handleInput}
-      onKeyDown={onKeyDown}
-    />
+    <StyledMentionsInput>
+      <MentionsInput
+        value={input}
+        onChange={(e: any) => setInput(e.target.value)}
+        onKeyDown={onKeyDown!}
+        onInput={handleInput}
+        placeholder="Message"
+        a11ySuggestionsListLabel="Suggested mentions"
+        style={{
+          input: {
+            overflow: "hidden",
+            border: "none",
+            forcedColorAdjust: "none",
+            color: "var(--color-text)",
+            outline: "none"
+          },
+          suggestions: {
+            list: {
+              backgroundColor: "var(--color-background)",
+              border: "none",
+              borderRadius: "0.5rem",
+              position: "absolute",
+              zIndex: 1,
+              bottom: "2rem",
+              width: "20rem",
+              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.2)"
+            },
+            item: {
+              padding: "0.5rem 1rem",
+              "&focused": {
+                backgroundColor: "var(--accent-color)",
+                color: "white"
+              }
+            }
+          }
+        }}
+      >
+        <Mention
+          trigger="@"
+          data={filteredMembers}
+          displayTransform={(display) => `@${display}`}
+          style={{
+            backgroundColor: "transparent",
+            color: "ButtonFace",
+            border: "none"
+          }}
+        />
+      </MentionsInput>
+    </StyledMentionsInput>
   );
 }
 
diff --git a/app/src/data/icons.tsx b/app/src/data/icons.tsx
index e377d491..3429c304 100644
--- a/app/src/data/icons.tsx
+++ b/app/src/data/icons.tsx
@@ -67,7 +67,8 @@ enum icons {
   Eye,
   Sun,
   Group,
-  CallAccept
+  CallAccept,
+  Mention,
 }
 
 type iconStrings = keyof typeof icons;
@@ -442,6 +443,9 @@ const iconImports: Record<iconStrings, IconConfig> = {
     importFn: () => import("@mui/icons-material/Visibility"),
     defaultProps: { fontSize: "small" },
   },
+  Mention:{
+    importFn: () => import ("@mui/icons-material/AlternateEmail"),
+  },
 };
 
 const iconCache = new Map<string, React.ReactElement>();
diff --git a/app/src/features/chats/ChatBody.tsx b/app/src/features/chats/ChatBody.tsx
index 9a09fb76..e493071a 100644
--- a/app/src/features/chats/ChatBody.tsx
+++ b/app/src/features/chats/ChatBody.tsx
@@ -8,12 +8,14 @@ import { getChatByID } from "./utils/helpers";
 import { useParams } from "react-router-dom";
 import { useAppSelector } from "@hooks/useGlobalState";
 import MessageProvider from "./contexts/MessageProvider";
+import { getIcon } from "@data/icons";
+import useTraversalMentions from "./hooks/useTraverseMentions";
+import Icon from "@components/Icon";
 
 const ScrollContainer = styled.div`
   width: 100%;
   height: 82dvh;
   overflow-y: auto;
-  position: relative;
   margin-top: 3rem;
   &::-webkit-scrollbar {
     width: 5px;
@@ -45,6 +47,9 @@ function ChatBody() {
   const { inView, ref } = useInView({ threshold: 0.01 });
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
+  const { handleNextMentionMessage, mentionMessages } = useTraversalMentions();
+
+
   useEffect(() => {
     if (inView && hasNextPage && chatId) {
       const container = scrollContainerRef.current;
@@ -103,6 +108,26 @@ function ChatBody() {
             </MessageProvider>
           );
         })}
+      <Icon onClick={handleNextMentionMessage} data-testid="mention-icon">
+        {mentionMessages.length > 0 &&
+          getIcon("Mention", {
+            sx: {
+              fontSize: "2.5rem",
+              color: "var(--accent-color)",
+              backgroundColor: `var(--color-background)`,
+              borderRadius: "50%",
+              position: "absolute",
+              bottom: "8rem",
+              right: "3%",
+              cursor: "pointer",
+              ":hover": {
+                backgroundColor: "var(--color-background-own-1)",
+                color: "white",
+                transition: "0.2s",
+              },
+            },
+          })}
+      </Icon>
     </ScrollContainer>
   );
 }
diff --git a/app/src/features/chats/ChatInputIcons.tsx b/app/src/features/chats/ChatInputIcons.tsx
index 85c5ca6e..f1ad0e04 100644
--- a/app/src/features/chats/ChatInputIcons.tsx
+++ b/app/src/features/chats/ChatInputIcons.tsx
@@ -3,7 +3,7 @@ import { getIcon } from "@data/icons";
 import styled from "styled-components";
 import MediaUploadComponent from "./media/MediaUploadComponent";
 import Icon from "@components/Icon";
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { ChatInputContext } from "./ChatBox";
 
 const InvisibleButton = styled.div`
@@ -27,7 +27,11 @@ function ChatInputIcons() {
     setIsEmojiSelectorOpen((show: boolean) => !show);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const handleKeyDown = (
+    e:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
     setIsEmojiSelectorOpen(false);
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
diff --git a/app/src/features/chats/ChatItem.tsx b/app/src/features/chats/ChatItem.tsx
index 246a515e..b1d51954 100644
--- a/app/src/features/chats/ChatItem.tsx
+++ b/app/src/features/chats/ChatItem.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import Avatar from "@components/Avatar";
 import { DetailedChatInterface } from "@state/messages/chats";
+import RenderWithMention from "@utils/renderWithMentions";
 
 const Container = styled.li<{ $active?: boolean }>`
   display: flex;
@@ -64,7 +65,8 @@ const ChatItem = ({
   const navigate = useNavigate();
 
   const timestamp = lastMessage?.timestamp || "No messages";
-  const lastMessageContent = lastMessage?.content || "No messages";
+  const lastMessageContent =
+    RenderWithMention(lastMessage?.content!, lastMessage?._id!) || "No messages";
 
   const { chatId } = useParams<{ chatId: string }>();
 
diff --git a/app/src/features/chats/Message.tsx b/app/src/features/chats/Message.tsx
index b2e9c72e..559dbd0b 100644
--- a/app/src/features/chats/Message.tsx
+++ b/app/src/features/chats/Message.tsx
@@ -7,7 +7,6 @@ import MessageContent from "./MessageContent";
 import useCheckBox from "@features/forward/hooks/useCheckBox";
 import MessageDetails from "./MessageDetails";
 
-import useScrollToLastMsg from "./hooks/useScrollToLastMsg";
 import useHover from "./hooks/useHover";
 import { useMessageContext } from "./contexts/MessageProvider";
 import React from "react";
@@ -75,7 +74,6 @@ const CheckBoxWrapper = styled.div`
 const Message = React.memo(() => {
   const { _id: id, chatId, isMine, chatType } = useMessageContext();
 
-  const { lastMessageRef } = useScrollToLastMsg();
   useScrollToSearchResultsMsg();
 
   const { isChecked, toggleCheckBox, showCheckBox } = useCheckBox({
@@ -94,7 +92,6 @@ const Message = React.memo(() => {
       )}
 
       <StyledMessage
-        ref={lastMessageRef}
         key={id}
         $isMine={chatType === "channel" ? false : isMine}
         data-message-id={id}
diff --git a/app/src/features/chats/SenderName.tsx b/app/src/features/chats/SenderName.tsx
index 236b277e..b5f66c86 100644
--- a/app/src/features/chats/SenderName.tsx
+++ b/app/src/features/chats/SenderName.tsx
@@ -2,7 +2,7 @@ import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
 import { useAppSelector } from "@hooks/useGlobalState";
-import { useChatMembers } from "./hooks/useChatMember";
+import { useChatMembers } from "./hooks/useChatMembers";
 
 import { useMessageContext } from "./contexts/MessageProvider";
 
diff --git a/app/src/features/chats/Topbar.tsx b/app/src/features/chats/Topbar.tsx
index fe6c4599..7baebe61 100644
--- a/app/src/features/chats/Topbar.tsx
+++ b/app/src/features/chats/Topbar.tsx
@@ -13,7 +13,7 @@ import { setChatIsBlocked } from "@state/messages/chats";
 
 import { useSocket } from "@hooks/useSocket";
 import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
-import { useChatMembers } from "./hooks/useChatMember";
+import { useChatMembers } from "./hooks/useChatMembers";
 import { useBlock } from "@features/privacy-settings/hooks/useBlock";
 import { useRightSideBarContext } from "@features/groups/contexts/RightSideBarProvider";
 
diff --git a/app/src/features/chats/hooks/useChatMember.ts b/app/src/features/chats/hooks/useChatMembers.ts
similarity index 99%
rename from app/src/features/chats/hooks/useChatMember.ts
rename to app/src/features/chats/hooks/useChatMembers.ts
index b763df6b..07dc1ed9 100644
--- a/app/src/features/chats/hooks/useChatMember.ts
+++ b/app/src/features/chats/hooks/useChatMembers.ts
@@ -12,4 +12,5 @@ export function useChatMembers(memberIDs?: ChatMember[]): Member[] {
       members.find((member) => member._id === filteredID._id)
     )
     .filter((member): member is Member => member !== undefined); // Ensure no undefined values
+    
 }
diff --git a/app/src/features/chats/hooks/useChats.ts b/app/src/features/chats/hooks/useChats.ts
index 2efbe381..335f5b0d 100644
--- a/app/src/features/chats/hooks/useChats.ts
+++ b/app/src/features/chats/hooks/useChats.ts
@@ -27,6 +27,7 @@ export function useChats() {
 
   useEffect(() => {
     const processMessages = async ({ chats, members }: ChatsState) => {
+      if (!chats) return;
       await Promise.all(
         chats.map(async (chat) => {
           if (chat.type === "private") {
diff --git a/app/src/features/chats/hooks/useFetchNextPage.ts b/app/src/features/chats/hooks/useFetchNextPage.ts
index c9b4885b..b54d6d0c 100644
--- a/app/src/features/chats/hooks/useFetchNextPage.ts
+++ b/app/src/features/chats/hooks/useFetchNextPage.ts
@@ -57,6 +57,11 @@ function useFetchNextPage() {
 
     if (data) {
       const lastFetchedPage = data.pages[data.pages.length - 1];
+      lastFetchedPage.messages.forEach((element: any) => {
+        element.isMention = false;
+        element.isSeen = false;
+      });
+
       if (lastFetchedPage && chatId) {
         processMessages(lastFetchedPage.messages).then(() => {
           dispatch(
diff --git a/app/src/features/chats/hooks/useMentionList.ts b/app/src/features/chats/hooks/useMentionList.ts
new file mode 100644
index 00000000..165aa557
--- /dev/null
+++ b/app/src/features/chats/hooks/useMentionList.ts
@@ -0,0 +1,20 @@
+import { useAppSelector } from "@hooks/useGlobalState";
+import { useParams } from "react-router-dom";
+import { getChatByID } from "../utils/helpers";
+import { useChatMembers } from "./useChatMembers";
+
+function useMentionList() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+
+  const chatMembers = useChatMembers(chat?.members);
+  const filteredMembers = chatMembers.map((member) => ({
+    id: member.username,
+    display: `${member.screenFirstName} ${member.screenLastName}`,
+  }));
+
+  return { filteredMembers };
+}
+
+export default useMentionList;
diff --git a/app/src/features/chats/hooks/useMessageSender.ts b/app/src/features/chats/hooks/useMessageSender.ts
index 80032b60..1407ae01 100644
--- a/app/src/features/chats/hooks/useMessageSender.ts
+++ b/app/src/features/chats/hooks/useMessageSender.ts
@@ -55,7 +55,9 @@ export const useMessageSender = () => {
         isReply,
         status: MessageStatus.sent,
         media: file,
-        threadMessages: []
+        threadMessages: [],
+        isMention: false,
+        isSeen: false,
       };
 
       const threadMessage = {
diff --git a/app/src/features/chats/hooks/useTraverseMentions.ts b/app/src/features/chats/hooks/useTraverseMentions.ts
new file mode 100644
index 00000000..6d82c138
--- /dev/null
+++ b/app/src/features/chats/hooks/useTraverseMentions.ts
@@ -0,0 +1,80 @@
+import { useParams } from "react-router-dom";
+import { useAppDispatch, useAppSelector } from "@hooks/useGlobalState";
+import { getChatByID } from "../utils/helpers";
+import { useEffect, useMemo, useState } from "react";
+import { MessageInterface } from "types/messages";
+import { setIsMention, setIsSeen } from "@state/messages/chats";
+
+function useTraversalMentions() {
+  const { chatId } = useParams<{ chatId: string }>();
+  const chats = useAppSelector((state) => state.chats.chats);
+  const chat = getChatByID({ chats: chats, chatID: chatId! });
+  const chatMessages = chat?.messages;
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+
+  const user = useAppSelector((state) => state.user.userInfo);
+  const dispatch = useAppDispatch();
+
+  const [mentionMessages, setMentionMessages] = useState<MessageInterface[]>(
+    []
+  );
+
+  const [currentMentionIndex, setCurrentMentionIndex] = useState(0);
+
+  const currentMentionMessage = useMemo(() => {
+    return mentionMessages[currentMentionIndex];
+  }, [mentionMessages, currentMentionIndex]);
+
+  useEffect(() => {
+    if (chatMessages) {
+      const mentions = chatMessages.filter(
+        (message) => message.isMention && !message.isSeen
+      );
+
+      const userMentions = mentions
+        .filter((mention) => {
+          const match = mentionRegex.exec(mention.content);
+          return match?.[1] === user.username;
+        })
+        .map((mention) => mention._id);
+
+      const filteredMentions = mentions.filter((mention) =>
+        userMentions.includes(mention._id)
+      );
+
+      setMentionMessages(filteredMentions);
+    }
+  }, [chatMessages]);
+
+  const handleNextMentionMessage = () => {
+    if (mentionMessages.length > 0) {
+      setCurrentMentionIndex(
+        (prevIndex) => (prevIndex + 1) % mentionMessages.length
+      );
+      document
+        .querySelector("[data-message-id='" + currentMentionMessage?._id + "']")
+        ?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+      const updatedMessages = [...mentionMessages];
+      updatedMessages.splice(currentMentionIndex, 1);
+      setIsMention({
+        chatId: chatId!,
+        isMention: false,
+        messageId: currentMentionMessage._id,
+      });
+      setMentionMessages(updatedMessages);
+      dispatch(
+        setIsSeen({
+          chatId: chatId!,
+          messageId: currentMentionMessage._id,
+          isSeen: true,
+        })
+      );
+    }
+  };
+  return { handleNextMentionMessage, mentionMessages };
+}
+
+export default useTraversalMentions;
diff --git a/app/src/features/chats/utils/helpers.ts b/app/src/features/chats/utils/helpers.ts
index 3cbb302f..cf4d9ba6 100644
--- a/app/src/features/chats/utils/helpers.ts
+++ b/app/src/features/chats/utils/helpers.ts
@@ -14,7 +14,7 @@ export function getChatByID({
 export function parseChatsToState(chatData?: any) {
   if (!chatData) return [];
   return chatData?.chats?.map((chat: any): DetailedChatInterface => {
-    const { isMuted, draft, chat: currChat } = chat;
+    const { chat: currChat } = chat;
     const {
       _id: chatId,
       isSeen,
@@ -62,7 +62,7 @@ export function parseChatsToState(chatData?: any) {
       isTyping: false,
       showCheckBox: false,
       selectedMessages: [],
-
+      isMention: false,
       encryptionKey,
       initializationVector,
       messagingPermission,
diff --git a/app/src/mocks/data/chats.ts b/app/src/mocks/data/chats.ts
index 73a4e4ff..7f9954b8 100644
--- a/app/src/mocks/data/chats.ts
+++ b/app/src/mocks/data/chats.ts
@@ -41,71 +41,71 @@ export type ChatDataType = {
   }[];
 };
 
-export const allChats: Chat[] = [
-  {
-    _id: "1",
-    isSeen: false,
-    members: ["1", "2"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "2",
-    isSeen: false,
-    members: ["2", "1"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "3",
-    isSeen: false,
-    members: ["3"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "4",
-    isSeen: false,
-    members: ["4"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "5",
-    isSeen: false,
-    members: ["5"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "6",
-    isSeen: false,
-    members: ["6"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "7",
-    isSeen: false,
-    members: ["7"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "8",
-    isSeen: false,
-    members: ["8"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-  {
-    _id: "9",
-    isSeen: false,
-    members: ["9"],
-    type: "private",
-    numberOfMembers: 1,
-  },
-];
+// export const allChats: Chat[] = [
+//   {
+//     _id: "1",
+//     isSeen: false,
+//     members: ["1", "2"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "2",
+//     isSeen: false,
+//     members: ["2", "1"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "3",
+//     isSeen: false,
+//     members: ["3"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "4",
+//     isSeen: false,
+//     members: ["4"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "5",
+//     isSeen: false,
+//     members: ["5"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "6",
+//     isSeen: false,
+//     members: ["6"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "7",
+//     isSeen: false,
+//     members: ["7"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "8",
+//     isSeen: false,
+//     members: ["8"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+//   {
+//     _id: "9",
+//     isSeen: false,
+//     members: ["9"],
+//     type: "private",
+//     numberOfMembers: 1,
+//   },
+// ];
 
 export const members: Member[] = [
   {
diff --git a/app/src/sockets/SocketProvider.tsx b/app/src/sockets/SocketProvider.tsx
index 3b760270..61f9d84e 100644
--- a/app/src/sockets/SocketProvider.tsx
+++ b/app/src/sockets/SocketProvider.tsx
@@ -65,7 +65,6 @@ function SocketProvider({ children }: SocketProviderProps) {
   const {
     callId,
     joinCall,
-    endCall,
     recieveICE,
     recieveAnswer,
     peerConnection,
@@ -295,7 +294,7 @@ function SocketProvider({ children }: SocketProviderProps) {
       sendOffer();
       handleIceCandidates();
     });
-    socket.on("SIGNAL-SERVER", async ({ type, voiceCallId, data }) => {
+    socket.on("SIGNAL-SERVER", async ({ type, data }) => {
       console.log(typeof data);
       if (type === "ANSWER") recieveAnswer(data);
       if (type === "ICE") recieveICE(data);
@@ -333,8 +332,6 @@ function SocketProvider({ children }: SocketProviderProps) {
             console.log("Failed to send", error);
           }
           if (success) {
-            console.log(recieved_message);
-            console.log("message sent successfully 2");
             const _id = recieved_message._id;
 
             if (!chat) return;
diff --git a/app/src/state/messages/chats.ts b/app/src/state/messages/chats.ts
index d1def1f8..faa45904 100644
--- a/app/src/state/messages/chats.ts
+++ b/app/src/state/messages/chats.ts
@@ -300,8 +300,40 @@ const chatsSlice = createSlice({
       if (chat) {
         chat.photo = photo;
       }
-    }
-  }
+    },
+
+    setIsMention: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isMention: boolean;
+      }>
+    ) => {
+      const { chatId, isMention, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isMention = isMention;
+      }
+    },
+
+    setIsSeen: (
+      state,
+      action: PayloadAction<{
+        chatId: string;
+        messageId: string;
+        isSeen: boolean;
+      }>
+    ) => {
+      const { chatId, isSeen, messageId } = action.payload;
+      const chat = getChatByID({ chats: state.chats, chatID: chatId });
+      const reqMessage = chat?.messages.find((msg) => msg._id === messageId);
+      if (reqMessage) {
+        reqMessage.isSeen = isSeen;
+      }
+    },
+  },
 });
 
 export const {
@@ -321,7 +353,9 @@ export const {
   setChatIsBlocked,
   setMemberIsBlocked,
   setName,
-  setPhoto
+  setPhoto,
+  setIsMention,
+  setIsSeen,
 } = chatsSlice.actions;
 export default chatsSlice.reducer;
 export type { DetailedChatInterface, ChatsState };
diff --git a/app/src/types/messages.ts b/app/src/types/messages.ts
index 8a4329a2..eade1604 100644
--- a/app/src/types/messages.ts
+++ b/app/src/types/messages.ts
@@ -37,6 +37,8 @@ export interface MessageInterface {
   //TODO: should use parentMessageId
   isReply: boolean;
   threadMessages: string[];
+  isMention: boolean;
+  isSeen: boolean;
 }
 
 export enum StickerTap {
diff --git a/app/src/utils/renderWithHighlight.tsx b/app/src/utils/renderWithHighlight.tsx
index 611f47f4..4c4a2d78 100644
--- a/app/src/utils/renderWithHighlight.tsx
+++ b/app/src/utils/renderWithHighlight.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import RenderWithMention from "./renderWithMentions";
 
 const HighlightedText = styled.span<{ $highlight?: boolean }>`
   background-color: ${(props) => (props.$highlight ? "yellow" : "transparent")};
@@ -12,21 +13,22 @@ function RenderWithHighlight(
   id?: string
 ) {
   if (!searchTerm) {
-    return content;
+    return RenderWithMention(content, id!);
   }
 
   const result = searchResults?.find((result) => result.messageId === id);
 
   if (!result) {
-    return content;
+    return RenderWithMention(content, id!);
   }
 
-  const before = content.slice(0, result.highlightIndex);
-  const highlighted = content.slice(
-    result.highlightIndex,
-    result.highlightIndex + searchTerm.length
-  );
-  const after = content.slice(result.highlightIndex + searchTerm.length);
+  const before = content.toString().slice(0, result.highlightIndex);
+  const highlighted = content
+    .toString()
+    .slice(result.highlightIndex, result.highlightIndex + searchTerm.length);
+  const after = content
+    .toString()
+    .slice(result.highlightIndex + searchTerm.length);
 
   return (
     <span>
diff --git a/app/src/utils/renderWithMentions.tsx b/app/src/utils/renderWithMentions.tsx
new file mode 100644
index 00000000..5c749cc2
--- /dev/null
+++ b/app/src/utils/renderWithMentions.tsx
@@ -0,0 +1,47 @@
+import { setIsMention } from "@state/messages/chats";
+import { useDispatch } from "react-redux";
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+
+const HighlightedMention = styled.span`
+  font-weight: bolder;
+  cursor: pointer;
+`;
+
+function RenderWithMention(content: string, messageId: string) {
+  const mentionRegex = /@\[[^\]]+\]\(([^)]+)\)/g;
+  const { chatId } = useParams<{ chatId: string }>();
+  const dispatch = useDispatch();
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  let hasMention = false;
+  while (content && (match = mentionRegex.exec(content)) !== null) {
+    hasMention = true;
+
+    if (match.index > lastIndex) {
+      parts.push(content.slice(lastIndex, match.index));
+    }
+
+    parts.push(
+      <HighlightedMention color="green" key={match[1]}>
+        @{match[1]}
+      </HighlightedMention>
+    );
+
+    lastIndex = mentionRegex.lastIndex;
+  }
+
+  if (hasMention) {
+    dispatch(setIsMention({ chatId: chatId!, isMention: true, messageId }));
+  }
+
+  if (content && lastIndex < content.length) {
+    parts.push(content.slice(lastIndex));
+  }
+
+  return <>{parts}</>;
+}
+
+export default RenderWithMention;