diff --git a/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx b/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
index 748874e8a..cc69542cd 100644
--- a/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
+++ b/apps/web/src/layouts/ChatLayout/ChatContainer/ChatContent/ChatContent.tsx
@@ -4,17 +4,20 @@ import React, { useRef } from 'react';
 import { useMount } from '@/hooks';
 import { useAutoScroll } from '@/hooks/useAutoScroll';
 import { cn } from '@/lib/utils';
-import { useChatIndividualContextSelector } from '../../ChatContext';
+import { useChatIndividualContextSelector, type ChatIndividualState } from '../../ChatContext';
 import { ChatInput } from './ChatInput';
 import { ChatMessageBlock } from './ChatMessageBlock';
-import { ChatScrollToBottom } from './ChatScrollToBottom';
 import { CHAT_CONTAINER_ID } from '../ChatContainer';
+import { ChatScrollToBottom } from './ChatScrollToBottom';
 
 const autoClass = 'mx-auto max-w-[600px] w-full';
 
+const stableChatIdSelector = (state: ChatIndividualState) => state.chatId;
+const stableChatMessageIdsSelector = (state: ChatIndividualState) => state.chatMessageIds;
+
 export const ChatContent: React.FC = React.memo(() => {
-  const chatId = useChatIndividualContextSelector((state) => state.chatId);
-  const chatMessageIds = useChatIndividualContextSelector((state) => state.chatMessageIds);
+  const chatId = useChatIndividualContextSelector(stableChatIdSelector);
+  const chatMessageIds = useChatIndividualContextSelector(stableChatMessageIdsSelector);
   const containerRef = useRef<HTMLElement | null>(null);
 
   const { isAutoScrollEnabled, scrollToBottom, enableAutoScroll } = useAutoScroll(containerRef, {
@@ -31,8 +34,6 @@ export const ChatContent: React.FC = React.memo(() => {
     enableAutoScroll();
   });
 
-  console.log('hit chat content');
-
   return (
     <>
       <div className="mb-48 flex h-full w-full flex-col">
diff --git a/apps/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx b/apps/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx
index f254212b4..2fd951d01 100644
--- a/apps/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx
+++ b/apps/web/src/layouts/ChatLayout/ChatContext/ChatContext.tsx
@@ -1,5 +1,5 @@
-import { useQueries, useQuery } from '@tanstack/react-query';
-import React, { useMemo, type PropsWithChildren } from 'react';
+import { useQueries } from '@tanstack/react-query';
+import React, { type PropsWithChildren } from 'react';
 import { createContext, useContextSelector } from 'use-context-selector';
 import type { BusterChatMessage } from '@/api/asset_interfaces/chat';
 import { useGetChat } from '@/api/buster_rest/chats';
@@ -82,9 +82,9 @@ const useChatIndividualContext = ({
   };
 };
 
-const IndividualChatContext = createContext<ReturnType<typeof useChatIndividualContext>>(
-  {} as ReturnType<typeof useChatIndividualContext>
-);
+export type ChatIndividualState = ReturnType<typeof useChatIndividualContext>;
+
+const IndividualChatContext = createContext<ChatIndividualState>({} as ChatIndividualState);
 
 export const ChatContextProvider = ({ children }: PropsWithChildren) => {
   const chatId = useChatLayoutContextSelector((x) => x.chatId);
@@ -104,6 +104,5 @@ export const ChatContextProvider = ({ children }: PropsWithChildren) => {
 
 ChatContextProvider.displayName = 'ChatContextProvider';
 
-export const useChatIndividualContextSelector = <T,>(
-  selector: (state: ReturnType<typeof useChatIndividualContext>) => T
-) => useContextSelector(IndividualChatContext, selector);
+export const useChatIndividualContextSelector = <T,>(selector: (state: ChatIndividualState) => T) =>
+  useContextSelector(IndividualChatContext, selector);