diff --git a/services/web-ui/src/core/query/cache-keys.constants.ts b/services/web-ui/src/core/query/cache-keys.constants.ts
index ecc5e11d..0bab293b 100644
--- a/services/web-ui/src/core/query/cache-keys.constants.ts
+++ b/services/web-ui/src/core/query/cache-keys.constants.ts
@@ -1,5 +1,6 @@
 export enum CacheKeysConstants {
   BlogPosts = "blogPosts",
+  Chats = "chats",
   CurrentOrganization = "CurrentOrganization",
   CurrentOrganizationMembers = "CurrentOrganizationMembers",
   CurrentProfile = "currentProfile",
diff --git a/services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx b/services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx
index 95048c43..59d12876 100644
--- a/services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx
+++ b/services/web-ui/src/features/chat/pages/ChatListPage/ChatListPage.container.tsx
@@ -4,7 +4,7 @@ import { Typography } from "@mui/material";
 
 import { chatsApi } from "src/apis";
 import { useTranslation } from "src/core/i18n";
-import { useQuery } from "src/core/query";
+import { CacheKeysConstants, useQuery } from "src/core/query";
 import { ErrorView } from "src/views/ErrorView";
 
 import { ChatListPageComponent } from "./ChatListPage.component";
@@ -15,7 +15,7 @@ export function ChatListPageContainer(): ReactElement {
   const { t } = useTranslation("connections");
 
   const { error, data, isPending } = useQuery({
-    queryKey: ["chats"],
+    queryKey: [CacheKeysConstants.Chats],
     queryFn: () => chatsApi.getConversations(),
   });
 
diff --git a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
index 240c93ee..4b59c4a0 100644
--- a/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
+++ b/services/web-ui/src/features/chat/pages/ChatPage/ChatPage.container.tsx
@@ -8,7 +8,7 @@ import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
 import { NotificationEventsConstants } from "src/core/notifications";
 import { useHandleNotification } from "src/core/notifications";
-import { useQuery } from "src/core/query";
+import { CacheKeysConstants, useQuery, useQueryClient } from "src/core/query";
 import { ErrorView } from "src/views/ErrorView";
 
 import { ChatPageNav } from "./ChatPage.nav";
@@ -25,10 +25,19 @@ export function ChatPageContainer(): ReactElement {
     queryFn: () => chatsApi.getChatMessages({ conversationId: id }),
   });
 
+  const queryClient = useQueryClient();
+
+  function handleRefresh(): void {
+    refetch();
+    queryClient.invalidateQueries({
+      queryKey: [CacheKeysConstants.Chats],
+    });
+  }
+
   useHandleNotification({
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     onCondition: (event: any) => String(event.data.senderId) === id,
-    onNotification: () => refetch(),
+    onNotification: handleRefresh,
     type: NotificationEventsConstants.NewChatMessage,
   });
 
@@ -55,7 +64,7 @@ export function ChatPageContainer(): ReactElement {
           <ChatPageSkeleton />
         </Box>
 
-        <ChatTextField conversationId={id} onSentMessage={refetch} />
+        <ChatTextField conversationId={id} onSentMessage={handleRefresh} />
       </ChatPageNav>
     );
   }
@@ -67,7 +76,7 @@ export function ChatPageContainer(): ReactElement {
           <Typography color="textSecondary">{t("no-messages")}</Typography>
         </Box>
 
-        <ChatTextField conversationId={id} onSentMessage={refetch} />
+        <ChatTextField conversationId={id} onSentMessage={handleRefresh} />
       </ChatPageNav>
     );
   }
@@ -78,7 +87,7 @@ export function ChatPageContainer(): ReactElement {
         <ChatMessageList messages={data} />
       </Box>
 
-      <ChatTextField conversationId={id} onSentMessage={refetch} />
+      <ChatTextField conversationId={id} onSentMessage={handleRefresh} />
     </ChatPageNav>
   );
 }