diff --git a/frontend/src/components/chat/ChatInterface.tsx b/frontend/src/components/chat/ChatInterface.tsx
index f6d7c12f65..c4fde682af 100644
--- a/frontend/src/components/chat/ChatInterface.tsx
+++ b/frontend/src/components/chat/ChatInterface.tsx
@@ -1,3 +1,4 @@
+// frontend/src/components/chat/ChatInterface.tsx
 import React, { useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { IoMdChatbubbles } from "react-icons/io";
@@ -8,6 +9,7 @@ import { FaRegThumbsDown, FaRegThumbsUp } from "react-icons/fa";
 import { useDisclosure } from "@nextui-org/react";
 import ChatInput from "./ChatInput";
 import Chat from "./Chat";
+import TypingIndicator from "./TypingIndicator";
 import { RootState } from "#/store";
 import AgentState from "#/types/AgentState";
 import { sendChatMessage } from "#/services/chatService";
@@ -127,19 +129,27 @@ function ChatInterface() {
 
       <div className="relative">
         <div className="absolute bottom-2 left-0 right-0 flex items-center justify-center">
-          {!hitBottom &&
-            ScrollButton({
-              onClick: scrollDomToBottom,
-              icon: <VscArrowDown className="inline mr-2 w-3 h-3" />,
-              label: t(I18nKey.CHAT_INTERFACE$TO_BOTTOM),
-            })}
-          {curAgentState === AgentState.AWAITING_USER_INPUT &&
-            hitBottom &&
-            ScrollButton({
-              onClick: handleSendContinueMsg,
-              icon: <RiArrowRightDoubleLine className="inline mr-2 w-3 h-3" />,
-              label: t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE),
-            })}
+          {!hitBottom && (
+            <ScrollButton
+              onClick={scrollDomToBottom}
+              icon={<VscArrowDown className="inline mr-2 w-3 h-3" />}
+              label={t(I18nKey.CHAT_INTERFACE$TO_BOTTOM)}
+            />
+          )}
+          {hitBottom && (
+            <>
+              {curAgentState === AgentState.AWAITING_USER_INPUT && (
+                <ScrollButton
+                  onClick={handleSendContinueMsg}
+                  icon={
+                    <RiArrowRightDoubleLine className="inline mr-2 w-3 h-3" />
+                  }
+                  label={t(I18nKey.CHAT_INTERFACE$INPUT_CONTINUE_MESSAGE)}
+                />
+              )}
+              {curAgentState === AgentState.RUNNING && <TypingIndicator />}
+            </>
+          )}
         </div>
 
         {feedbackShared !== messages.length && messages.length > 3 && (
diff --git a/frontend/src/components/chat/TypingIndicator.tsx b/frontend/src/components/chat/TypingIndicator.tsx
new file mode 100644
index 0000000000..528bc45c40
--- /dev/null
+++ b/frontend/src/components/chat/TypingIndicator.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+function TypingIndicator(): React.ReactElement {
+  return (
+    <div className="flex items-center space-x-1.5 bg-neutral-700 px-3 py-1.5 rounded-full">
+      <span
+        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
+        style={{ animationDelay: "0ms" }}
+      />
+      <span
+        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
+        style={{ animationDelay: "75ms" }}
+      />
+      <span
+        className="w-1.5 h-1.5 bg-gray-400 rounded-full animate-[bounce_0.5s_infinite] translate-y-[-2px]"
+        style={{ animationDelay: "150ms" }}
+      />
+    </div>
+  );
+}
+
+export default TypingIndicator;