diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 35d27c5f4..8491f6873 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -31,7 +31,7 @@
                 "react-cookie": "^4.1.1",
                 "react-dom": "^18.2.0",
                 "react-error-boundary": "^4.0.2",
-                "react-icons": "^4.7.1",
+                "react-icons": "^4.8.0",
                 "react-laag": "^2.0.5",
                 "react-router-dom": "^6.8.1",
                 "react-scripts": "5.0.1",
@@ -15040,9 +15040,9 @@
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
         },
         "node_modules/react-icons": {
-            "version": "4.7.1",
-            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
-            "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+            "version": "4.8.0",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+            "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
             "peerDependencies": {
                 "react": "*"
             }
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 6eba117fc..feb11e814 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -26,7 +26,7 @@
         "react-cookie": "^4.1.1",
         "react-dom": "^18.2.0",
         "react-error-boundary": "^4.0.2",
-        "react-icons": "^4.7.1",
+        "react-icons": "^4.8.0",
         "react-laag": "^2.0.5",
         "react-router-dom": "^6.8.1",
         "react-scripts": "5.0.1",
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index c29c1c12c..0cec858a4 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -7,6 +7,7 @@ import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import { UserIcon } from "@heroicons/react/24/solid";
+import {AiFillRobot} from "react-icons/ai"
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
@@ -21,10 +22,10 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 		>
 			<div
 				className={classNames(
-					"rounded-full w-8 h-8 flex items-center my-3 justify-center bg-black"
+					"rounded-full w-8 h-8 flex items-center my-3 justify-center",chat.isSend?"bg-black":"bg-black"
 				)}
 			>
-				{!chat.isSend && <span>🦜</span>}
+				{!chat.isSend && <AiFillRobot className="text-white"/>}
 				{chat.isSend && <UserIcon className="text-white w-5 h-5" />}
 			</div>
 			{!chat.isSend ? (
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index b66acf612..56213b031 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -14,6 +14,8 @@ import { classNames, snakeToNormalCase } from "../../utils";
 import { sendAll } from "../../controllers/API";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
+import { FaEraser } from "react-icons/fa";
+
 const _ = require("lodash");
 
 export default function ChatModal({ flow }) {
@@ -110,7 +112,7 @@ export default function ChatModal({ flow }) {
 	}
 
 	function validateNodes() {
-		console.log(reactFlowInstance)
+		console.log(reactFlowInstance);
 		return reactFlowInstance
 			.getNodes()
 			.flatMap((n: NodeType) => validateNode(n));
@@ -198,7 +200,7 @@ export default function ChatModal({ flow }) {
 					leaveFrom="opacity-100"
 					leaveTo="opacity-0"
 				>
-					<div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
+					<div className="fixed inset-0 bg-black backdrop-blur-sm dark:bg-gray-600 dark:bg-opacity-80 bg-opacity-80 transition-opacity" />
 				</Transition.Child>
 
 				<div className="fixed inset-0 z-10 overflow-y-auto">
@@ -212,7 +214,13 @@ 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=" 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]">
+							<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[95%] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[690px]">
+								<div className="relative w-full">
+									<button onClick={()=>clearChat()} className="absolute top-2 right-2 hover:text-red-500">
+										
+										<FaEraser className="w-4 h-4"/>
+									</button>
+								</div>
 								<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} />