diff --git a/web/pages/chat.tsx b/web/pages/chat.tsx
index fe7d1bdff..1d3a1531b 100644
--- a/web/pages/chat.tsx
+++ b/web/pages/chat.tsx
@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { ColumnsType } from 'antd/es/table';
 import format from 'date-fns/format'
 
-import { CHAT_HISTORY, fetchData, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
+import { CHAT_HISTORY, fetchData, FETCH_INTERVAL, UPDATE_CHAT_MESSGAE_VIZ } from "../utils/apis";
 import { MessageType } from '../types/chat';
 import { isEmptyObject } from "../utils/format";
 
@@ -43,6 +43,7 @@ export default function Chat() {
   const [bulkOutcome, setBulkOutcome] = useState(null);
   const [bulkAction, setBulkAction] = useState('');
   let outcomeTimeout = null;
+  let chatReloadInterval = null;
 
   const getInfo = async () => {
     try {
@@ -59,8 +60,14 @@ export default function Chat() {
 
   useEffect(() => {
     getInfo();
+
+    chatReloadInterval = setInterval(() => {
+      getInfo();
+    }, FETCH_INTERVAL);
+
     return () => {
       clearTimeout(outcomeTimeout);
+      clearTimeout(chatReloadInterval);
     };
   }, []);
 
diff --git a/web/styles/chat.scss b/web/styles/chat.scss
index 57d1b9cc3..2d7ab68e1 100644
--- a/web/styles/chat.scss
+++ b/web/styles/chat.scss
@@ -34,6 +34,9 @@
         width: 3rem;
         padding: 0.25rem;
       }
+      p {
+        margin-bottom: 0;
+      }
     }
   }