diff --git a/src/chat/components/ChatItem/index.tsx b/src/chat/components/ChatItem/index.tsx
index e93e97e35..c0ee6f68b 100644
--- a/src/chat/components/ChatItem/index.tsx
+++ b/src/chat/components/ChatItem/index.tsx
@@ -6,6 +6,8 @@ import useChatInfo from '~/chat/hooks/useChatInfo';
 
 import { ChatItemLeft, Title, Avatar, ChatItemContainer, UnreadCount } from './styles';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
+import useChannelSubscription from '~/social/hooks/useChannelSubscription';
+import useChannel from '~/chat/hooks/useChannel';
 
 function getNormalizedUnreadCount(channelUnreadCount: number) {
   // Within this range the unread counter will show an actuall number
@@ -24,16 +26,22 @@ function getNormalizedUnreadCount(channelUnreadCount: number) {
 }
 
 interface ChatItemProps {
-  channel?: Amity.Channel;
+  channelId: string;
   isSelected: boolean;
   onSelect: ({ channelId, type }: { channelId: string; type: string }) => void;
 }
 
-const ChatItem = ({ channel, isSelected, onSelect }: ChatItemProps) => {
-  const { chatName, chatAvatar } = useChatInfo({ channel: channel || null });
+const ChatItem = ({ channelId, isSelected, onSelect }: ChatItemProps) => {
+  const channel = useChannel(channelId);
+  const { chatName, chatAvatar } = useChatInfo({ channel });
 
   const normalizedUnreadCount = getNormalizedUnreadCount(channel?.unreadCount || 0);
 
+  useChannelSubscription({
+    channelId: channel?.channelId,
+    shouldSubscribe: () => !!channel?.channelId,
+  });
+
   return (
     <ChatItemContainer
       data-qa-anchor="chat-item"
diff --git a/src/chat/components/RecentChat/index.tsx b/src/chat/components/RecentChat/index.tsx
index 40dae455b..36e824642 100644
--- a/src/chat/components/RecentChat/index.tsx
+++ b/src/chat/components/RecentChat/index.tsx
@@ -62,7 +62,7 @@ const RecentChat = ({
               channels.map((channel) => (
                 <ChatItem
                   key={channel.channelId}
-                  channel={channel}
+                  channelId={channel.channelId}
                   isSelected={selectedChannelId === channel.channelId}
                   onSelect={(data) => {
                     onChannelSelect?.(data);