diff --git a/src/frontend/src/assets/Gooey Ring-5s-271px.svg b/src/frontend/src/assets/Gooey Ring-5s-271px.svg
new file mode 100644
index 0000000000..6c34334206
--- /dev/null
+++ b/src/frontend/src/assets/Gooey Ring-5s-271px.svg	
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="271px" height="271px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<defs>
+  <filter id="ldio-978hsxudfzl-filter" x="-100%" y="-100%" width="300%" height="300%" color-interpolation-filters="sRGB">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="3.6"></feGaussianBlur>
+    <feComponentTransfer result="cutoff">
+      <feFuncA type="table" tableValues="0 0 0 0 0 0 1 1 1 1 1"></feFuncA>
+    </feComponentTransfer>
+  </filter>
+</defs>
+<g filter="url(#ldio-978hsxudfzl-filter)"><g transform="translate(50 50)">
+<g>
+  <circle cx="8" cy="0" r="5" fill="#2edbb5">
+    <animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="5s" repeatCount="indefinite" begin="-0.2s"></animate>
+  </circle>
+  <animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="5s" repeatCount="indefinite" begin="0s"></animateTransform>
+</g>
+</g><g transform="translate(50 50)">
+<g>
+  <circle cx="8" cy="0" r="5" fill="#1d99ff">
+    <animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="2.5s" repeatCount="indefinite" begin="-0.15000000000000002s"></animate>
+  </circle>
+  <animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="2.5s" repeatCount="indefinite" begin="-0.05s"></animateTransform>
+</g>
+</g><g transform="translate(50 50)">
+<g>
+  <circle cx="8" cy="0" r="5" fill="#4f41ff">
+    <animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="1.6666666666666665s" repeatCount="indefinite" begin="-0.1s"></animate>
+  </circle>
+  <animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="1.6666666666666665s" repeatCount="indefinite" begin="-0.1s"></animateTransform>
+</g>
+</g><g transform="translate(50 50)">
+<g>
+  <circle cx="8" cy="0" r="5" fill="#8400ff">
+    <animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="1.25s" repeatCount="indefinite" begin="-0.05s"></animate>
+  </circle>
+  <animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="1.25s" repeatCount="indefinite" begin="-0.15000000000000002s"></animateTransform>
+</g>
+</g></g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 5997deebfb..0b251ee16d 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -15,9 +15,7 @@ export default function Chat({ flow }: ChatType) {
 	const [open, setOpen] = useState(false);
 	useEffect(() => {
 		const handleKeyDown = (event: KeyboardEvent) => {
-			console.log(event)
 		  if (event.key === "K" && event.shiftKey && (event.metaKey||event.ctrlKey)) {
-			console.log("dfdsfds")
 			setOpen(oldState=>!oldState);
 		  }
 		};
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 0cec858a40..d49d5244d2 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -25,8 +25,8 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 					"rounded-full w-8 h-8 flex items-center my-3 justify-center",chat.isSend?"bg-black":"bg-black"
 				)}
 			>
-				{!chat.isSend && <AiFillRobot className="text-white"/>}
-				{chat.isSend && <UserIcon className="text-white w-5 h-5" />}
+				{!chat.isSend && <object data={"../"}></object>}
+				{chat.isSend && <img src={"../../../assets/Gooey Ring-5s-271px.svg"}/>}
 			</div>
 			{!chat.isSend ? (
 				<div className="w-full text-start flex items-center">
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index cb9397b461..c1a0645ada 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -58,7 +58,7 @@ export default function ChatModal({ flow, open, setOpen }:{open:boolean,setOpen:
 	};
 
 	useEffect(() => {
-		const newWs = new WebSocket(`/chat/${flow.id}`);
+		const newWs = new WebSocket(`ws://backend:7860/chat/${flow.id}`);
 		newWs.onopen = () => {
 		  console.log('WebSocket connection established!');
 		};