diff --git a/apps/web/src/components/features/chat/ChatHeaderTitle.tsx b/apps/web/src/components/features/chat/ChatHeaderTitle.tsx
index 9b7dfe2ce..62b3ffb0c 100644
--- a/apps/web/src/components/features/chat/ChatHeaderTitle.tsx
+++ b/apps/web/src/components/features/chat/ChatHeaderTitle.tsx
@@ -15,9 +15,10 @@ export const CHAT_HEADER_TITLE_ID = 'chat-header-title';
 export const ChatHeaderTitle: React.FC<{
   chatTitle: string;
   chatId: string;
-  isStreamFinished: boolean;
-}> = ({ chatTitle, chatId, isStreamFinished }) => {
+  isStreamingMessage: boolean;
+}> = ({ chatTitle, chatId, isStreamingMessage }) => {
   const { mutateAsync: updateChat } = useUpdateChat();
+  const isStreamFinished = !isStreamingMessage;
 
   if (!chatTitle) {
     return <div />; //we need to return something for alignment
@@ -26,8 +27,11 @@ export const ChatHeaderTitle: React.FC<{
   return (
     <AnimatePresence mode="wait" initial={isStreamFinished}>
       <motion.div
-        {...(!isStreamFinished ? animation : {})}
+        {...(isStreamFinished ? {} : animation)}
         key={chatTitle || 'initial'}
+        transition={{
+          duration: isStreamFinished ? 0 : 0.2,
+        }}
         className="flex w-full items-center overflow-hidden"
       >
         <EditableTitle
diff --git a/apps/web/src/context/Chats/useIsStreamingMessage.ts b/apps/web/src/context/Chats/useIsStreamingMessage.ts
index fae254d35..42b6ecfa3 100644
--- a/apps/web/src/context/Chats/useIsStreamingMessage.ts
+++ b/apps/web/src/context/Chats/useIsStreamingMessage.ts
@@ -22,9 +22,12 @@ export const useIsStreamingMessage = () => {
   const isStreamingMessage = useQueries({
     queries: stableQueries,
     combine: useCallback(
-      (result: { data: boolean | undefined }[]) => result.some((res) => res.data === false),
-      []
+      (result: { data: boolean | undefined }[]) => {
+        return result.some((res) => res.data === false);
+      },
+      [stableQueries]
     ),
   });
+
   return isStreamingMessage;
 };
diff --git a/apps/web/src/layouts/ChatLayout/ChatHeader.tsx b/apps/web/src/layouts/ChatLayout/ChatHeader.tsx
index 8d325f670..63ea181f9 100644
--- a/apps/web/src/layouts/ChatLayout/ChatHeader.tsx
+++ b/apps/web/src/layouts/ChatLayout/ChatHeader.tsx
@@ -7,14 +7,14 @@ import { useGetChatId } from '@/context/Chats/useGetChatId';
 export const ChatHeader: React.FC = React.memo(() => {
   const chatId = useGetChatId();
   const chatTitle = useGetActiveChatTitle();
-  const isStreamFinished = useIsStreamingMessage();
+  const isStreamingMessage = useIsStreamingMessage();
 
   return (
     <>
       <ChatHeaderTitle
         chatTitle={chatTitle || ''}
         chatId={chatId || ''}
-        isStreamFinished={isStreamFinished}
+        isStreamingMessage={isStreamingMessage}
       />
       <ChatHeaderOptions />
     </>