diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
new file mode 100644
index 000000000..c29c1c12c
--- /dev/null
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -0,0 +1,69 @@
+import {
+	ChatBubbleLeftEllipsisIcon,
+	ChatBubbleOvalLeftEllipsisIcon,
+	PlusSmallIcon,
+} from "@heroicons/react/24/outline";
+import { useState } from "react";
+import { ChatMessageType } from "../../../types/chat";
+import { classNames } from "../../../utils";
+import { UserIcon } from "@heroicons/react/24/solid";
+var Convert = require("ansi-to-html");
+var convert = new Convert({ newline: true });
+
+export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
+	const [hidden, setHidden] = useState(true);
+	return (
+		<div
+			className={classNames(
+				"w-full py-2 pl-2 flex",
+				chat.isSend ? "bg-white" : "bg-gray-200"
+			)}
+		>
+			<div
+				className={classNames(
+					"rounded-full w-8 h-8 flex items-center my-3 justify-center bg-black"
+				)}
+			>
+				{!chat.isSend && <span>🦜</span>}
+				{chat.isSend && <UserIcon className="text-white w-5 h-5" />}
+			</div>
+			{!chat.isSend ? (
+				<div className="w-full text-start flex items-center">
+					<div
+						className=" relative text-start inline-block text-gray-600 text-sm font-normal"
+					>
+						{hidden && chat.thought && chat.thought !== "" && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className="absolute -top-1 -left-2 cursor-pointer"
+							>
+								<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
+							</div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && (
+							<div
+								onClick={() => setHidden((prev) => !prev)}
+								className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
+								dangerouslySetInnerHTML={{
+									__html: convert.toHtml(chat.thought),
+								}}
+							></div>
+						)}
+						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
+						<div
+							className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
+						>
+							{chat.message}
+						</div>
+					</div>
+				</div>
+			) : (
+				<div className="w-full flex items-center">
+					<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white dark:bg-gray-700">
+						{chat.message}
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index 99f1b4ee0..b66acf612 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -13,7 +13,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { classNames, snakeToNormalCase } from "../../utils";
 import { sendAll } from "../../controllers/API";
 import { typesContext } from "../../contexts/typesContext";
-import ChatMessage from "../../components/chatComponent/chatMessage";
+import ChatMessage from "./chatMessage";
 const _ = require("lodash");
 
 export default function ChatModal({ flow }) {
@@ -212,8 +212,8 @@ export default function ChatModal({ flow }) {
 							leaveFrom="opacity-100 translate-y-0 sm:scale-100"
 							leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 						>
-							<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3 overflow-scroll scrollbar-hide">
+							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
+								<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
 									{chatHistory.map((c, i) => (
 										<ChatMessage chat={c} key={i} />
 									))}