diff --git a/web/containers/ListContainer/index.tsx b/web/containers/ListContainer/index.tsx
new file mode 100644
index 000000000..fdf34b9ec
--- /dev/null
+++ b/web/containers/ListContainer/index.tsx
@@ -0,0 +1,29 @@
+import { ReactNode, useEffect, useRef } from 'react'
+
+type Props = {
+  children: ReactNode
+}
+
+const ListContainer: React.FC<Props> = ({ children }) => {
+  const listRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const scrollHeight = listRef.current?.scrollHeight ?? 0
+
+    listRef.current?.scrollTo({
+      top: scrollHeight,
+      behavior: 'smooth',
+    })
+  })
+
+  return (
+    <div
+      ref={listRef}
+      className="flex h-full w-full flex-col overflow-y-scroll"
+    >
+      {children}
+    </div>
+  )
+}
+
+export default ListContainer
diff --git a/web/screens/Chat/ChatBody/index.tsx b/web/screens/Chat/ChatBody/index.tsx
index ed950c699..5f89b76cd 100644
--- a/web/screens/Chat/ChatBody/index.tsx
+++ b/web/screens/Chat/ChatBody/index.tsx
@@ -1,8 +1,8 @@
-import ScrollToBottom from 'react-scroll-to-bottom'
-
 import { MessageStatus } from '@janhq/core'
 import { useAtomValue } from 'jotai'
 
+import ListContainer from '@/containers/ListContainer'
+
 import { loadModelErrorAtom } from '@/hooks/useActiveModel'
 
 import ChatItem from '../ChatItem'
@@ -26,7 +26,7 @@ const ChatBody: React.FC = () => {
   if (messages.length === 0) return <EmptyThread />
 
   return (
-    <ScrollToBottom className="flex h-full w-full flex-col">
+    <ListContainer>
       {messages.map((message, index) => (
         <div key={message.id}>
           {message.status !== MessageStatus.Error &&
@@ -43,7 +43,7 @@ const ChatBody: React.FC = () => {
         </div>
       ))}
       {loadModelError && <LoadModelError />}
-    </ScrollToBottom>
+    </ListContainer>
   )
 }