diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index d015a405df4..428dc6a3edd 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -352,6 +352,15 @@ export function ChatPage({
         }
         return;
       }
+      const shouldScrollToBottom =
+        visibleRange.get(existingChatSessionId) === undefined ||
+        visibleRange.get(existingChatSessionId)?.end == 0;
+      if (shouldScrollToBottom) {
+        hasBeenInitialized.current = false;
+      }
+      console.log("this i the current most visible range");
+      console.log(shouldScrollToBottom);
+      console.log(visibleRange.get(existingChatSessionId));
 
       clearSelectedDocuments();
       setIsFetchingChatMessages(true);
@@ -387,10 +396,13 @@ export function ChatPage({
 
       // go to bottom. If initial load, then do a scroll,
       // otherwise just appear at the bottom
-      if (!hasPerformedInitialScroll) {
-        clientScrollToBottom();
-      } else if (isChatSessionSwitch) {
-        clientScrollToBottom(true);
+      if (shouldScrollToBottom) {
+        initializeVisibleRange();
+        if (!hasPerformedInitialScroll) {
+          clientScrollToBottom();
+        } else if (isChatSessionSwitch) {
+          clientScrollToBottom(true);
+        }
       }
       setIsFetchingChatMessages(false);
 
@@ -537,17 +549,6 @@ export function ChatPage({
     new Map([[chatSessionIdRef.current, "input"]])
   );
 
-  const [scrollHeight, setScrollHeight] = useState<Map<number | null, number>>(
-    new Map([[chatSessionIdRef.current, 0]])
-  );
-  const currentScrollHeight = () => {
-    return scrollHeight.get(currentSessionId());
-  };
-
-  const retrieveCurrentScrollHeight = (): number | null => {
-    return scrollHeight.get(currentSessionId()) || null;
-  };
-
   const [regenerationState, setRegenerationState] = useState<
     Map<number | null, RegenerationState | null>
   >(new Map([[null, null]]));
@@ -780,6 +781,7 @@ export function ChatPage({
       }
     }, 100);
   };
+
   const clientScrollToBottom = (fast?: boolean) => {
     setTimeout(() => {
       if (!endDivRef.current || !scrollableDivRef.current) {
@@ -1547,7 +1549,6 @@ export function ChatPage({
   });
 
   const hasBeenInitialized = useRef(false);
-  // const [visibleRange, setVisibleRange] = useState({ start: 0, end: 40, mostVisibleMessageId: null as number | null });
   const [visibleRange, setVisibleRange] = useState<
     Map<
       number | null,
@@ -1574,6 +1575,7 @@ export function ChatPage({
     end: number;
     mostVisibleMessageId: number | null;
   }) => {
+    console.log("newRange", newRange);
     setVisibleRange((prevState) => {
       const newState = new Map(prevState);
       newState.set(currentSessionId(), newRange);
@@ -1581,15 +1583,15 @@ export function ChatPage({
     });
   };
 
-  useEffect(() => {
+  const initializeVisibleRange = () => {
     if (
       messageHistory.length > 0 &&
       (!visibleRange.get(currentSessionId()) ||
         visibleRange.get(currentSessionId())?.end == 0)
     ) {
       const newEnd = Math.max(messageHistory.length, 40);
-      const newStart = Math.max(0, newEnd - 40);
-      const newMostVisibleMessageId = messageHistory[newEnd - 1].messageId;
+      const newStart = Math.max(0, newEnd - 20);
+      const newMostVisibleMessageId = messageHistory[newEnd - 1]?.messageId;
 
       updateVisibleRangeForCurrentSession({
         start: newStart,
@@ -1597,8 +1599,11 @@ export function ChatPage({
         mostVisibleMessageId: newMostVisibleMessageId,
       });
       hasBeenInitialized.current = true;
-    } else {
     }
+  };
+
+  useEffect(() => {
+    initializeVisibleRange();
   }, [router, messageHistory, currentSessionId()]);
 
   const currentVisibleRange = visibleRange.get(currentSessionId()) || {
@@ -1607,7 +1612,7 @@ export function ChatPage({
     mostVisibleMessageId: null,
   };
 
-  const updateVisibleRange = () => {
+  const updateVisibleRangeBasedOnScroll = () => {
     if (!hasBeenInitialized.current) return;
     const scrollableDiv = scrollableDivRef.current;
     if (!scrollableDiv) return;
@@ -1629,7 +1634,7 @@ export function ChatPage({
     });
 
     if (mostVisibleMessageIndex !== -1) {
-      const bufferCount = 15;
+      const bufferCount = 24;
       const startIndex = Math.max(0, mostVisibleMessageIndex - bufferCount);
       const endIndex = Math.min(
         messageHistory.length,
@@ -1649,7 +1654,7 @@ export function ChatPage({
 
     if (scrollableDiv) {
       const handleScroll = () => {
-        updateVisibleRange();
+        updateVisibleRangeBasedOnScroll();
       };
 
       scrollableDiv.addEventListener("scroll", handleScroll);
@@ -1954,12 +1959,12 @@ export function ChatPage({
                                   currentVisibleRange.start,
                                   currentVisibleRange.end
                                 )
-                            ).map((message, i) => {
-                              const actualIndex = i + currentVisibleRange.start;
+                            ).map((message, fauxIndex) => {
+                              const i = fauxIndex + currentVisibleRange.start;
                               const messageMap = currentMessageMap(
                                 completeMessageDetail
                               );
-                              const messageReactComponentKey = `${actualIndex}-${currentSessionId()}`;
+                              const messageReactComponentKey = `${i}-${currentSessionId()}`;
                               const parentMessage = message.parentMessageId
                                 ? messageMap.get(message.parentMessageId)
                                 : null;