diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 84a376aaf..6c3627842 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -24,7 +24,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
 	return (
 		<div
 			ref={componentRef}
-			className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col"
+			className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
 		>
 			<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
 				Notifications
diff --git a/src/frontend/src/assets/froze-flow.png b/src/frontend/src/assets/froze-flow.png
new file mode 100644
index 000000000..893ce8f85
Binary files /dev/null and b/src/frontend/src/assets/froze-flow.png differ
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 9e59709fd..1bea659ca 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -30,8 +30,8 @@ export default function ChatInput({
 					setChatValue(e.target.value);
 				}}
 				className={classNames(
-					lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700",
-					"form-input block w-full  custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600  dark:text-white pr-10 sm:text-sm"
+					lockChat ? "bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300" : "bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-300",
+					"form-input block w-full  custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600  pr-10 sm:text-sm"
 				)}
 				placeholder={"Send a message..."}
 			/>
@@ -39,12 +39,12 @@ export default function ChatInput({
 				<button disabled={lockChat} onClick={() => sendMessage()}>
 					{lockChat ? (
 						<LockClosedIcon
-							className="h-5 w-5 text-gray-400  dark:hover:text-gray-300 animate-pulse"
+							className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
 							aria-hidden="true"
 						/>
 					) : (
 						<PaperAirplaneIcon
-							className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+							className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
 							aria-hidden="true"
 						/>
 					)}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
index d9a20579a..ed67a9af5 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
@@ -47,7 +47,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
 		URL.revokeObjectURL(url);
 	};
 	return (
-		<div className="codeblock relative font-sans text-[16px]">
+		<div className="codeblock font-sans text-[16px]">
 			<div className="flex items-center justify-between py-1.5 px-4">
 				<span className="text-xs lowercase text-white">{language}</span>
 
@@ -69,6 +69,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
 			</div>
 
 			<SyntaxHighlighter
+			className=" w-[570px]"
 				language={language}
 				style={oneDark}
 				customStyle={{ margin: 0 }}
diff --git a/src/frontend/src/modals/chatModal/chatMessage/components/aiLogo/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/components/aiLogo/index.tsx
new file mode 100644
index 000000000..21e10dfd4
--- /dev/null
+++ b/src/frontend/src/modals/chatModal/chatMessage/components/aiLogo/index.tsx
@@ -0,0 +1,42 @@
+export default function AiLogo() {
+    return (
+        <svg className="scale-150" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{"margin": "auto", "background": "none", "display": "block", "shapeRendering": "auto"}}  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></svg>
+    )
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index e836fd887..c3d8c9894 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -1,8 +1,9 @@
 import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
+import AiIconStill from "../../../assets/froze-flow.png"
 import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
@@ -13,8 +14,9 @@ import { CodeBlock } from "./codeBlock";
 var Convert = require("ansi-to-html");
 var convert = new Convert({ newline: true });
 
-export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
+export default function ChatMessage({ chat, lockChat }: { chat: ChatMessageType, lockChat: boolean }) {
 	const [message, setMessage] = useState("");
+	const imgRef = useRef(null);
 	useEffect(() => {
 		setMessage(chat.message);
 	}, [chat.message]);
@@ -24,22 +26,25 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 			className={classNames(
 				"w-full py-2 pl-2 flex",
 				chat.isSend
-					? "bg-white dark:bg-gray-800 "
-					: "bg-gray-200  dark:bg-gray-700"
+					? "bg-white dark:bg-gray-900 "
+					: "bg-gray-200  dark:bg-gray-800"
 			)}
 		>
 			<div
 				className={classNames(
-					"rounded-full w-8 h-8 flex items-center my-3 justify-center",
-					chat.isSend ? "bg-gray-900" : "bg-gray-200"
+					"rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center",
+					chat.isSend ? "bg-gray-900" : ""
 				)}
 			>
-				{!chat.isSend && <img className="scale-150" src={AiIcon} />}
+				{!chat.isSend && <div className="relative w-8 h-8">
+				<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-100" : "opacity-0")} src={AiIcon} />
+				<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-0" : "opacity-100")} src={AiIconStill} />
+					</div>}
 				{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
 			</div>
 			{!chat.isSend ? (
 				<div className="w-full text-start flex items-center">
-					<div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal">
+					<div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
 						{hidden && chat.thought && chat.thought !== "" && (
 							<div
 								onClick={() => setHidden((prev) => !prev)}
@@ -51,8 +56,8 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						{chat.thought && chat.thought !== "" && !hidden && (
 							<div
 								onClick={() => setHidden((prev) => !prev)}
-								className=" text-start inline-block rounded-md  h-full border border-gray-300
-								bg-gray-100 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+								className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
+								bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
 								dangerouslySetInnerHTML={{
 									__html: convert.toHtml(chat.thought),
 								}}
@@ -60,12 +65,12 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						)}
 						{chat.thought && chat.thought !== "" && !hidden && <br></br>}
 						<div className="w-full px-4 pb-3 pt-3 pr-8">
-							<div className="dark:text-white">
-								<div>
+							<div className="dark:text-white w-full">
+								<div className="w-full">
 									<ReactMarkdown
 										remarkPlugins={[remarkGfm, remarkMath]}
 										rehypePlugins={[rehypeMathjax]}
-										className="markdown prose"
+										className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
 										components={{
 											code({ node, inline, className, children, ...props }) {
 												if (children.length) {
@@ -128,7 +133,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
 						<ReactMarkdown
 							remarkPlugins={[remarkGfm, remarkMath]}
 							rehypePlugins={[rehypeMathjax]}
-							className="markdown prose"
+							className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
 						>
 							{message}
 						</ReactMarkdown>
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index dfa2dd602..51fd054ec 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
+import { ChatBubbleOvalLeftEllipsisIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FlowType, NodeType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
@@ -7,6 +7,7 @@ import { toNormalCase } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
 import { FaEraser } from "react-icons/fa";
+import { HiX } from "react-icons/hi";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType, ChatType } from "../../types/chat";
 import ChatInput from "./chatInput";
@@ -353,14 +354,20 @@ export default function ChatModal({
                 <div className="relative w-full p-4">
                   <button
                     onClick={() => clearChat()}
-                    className="absolute top-2 right-3 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-500 z-30"
+                    className="absolute top-2 right-10 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
                   >
                     <FaEraser className="w-4 h-4" />
                   </button>
+                  <button
+                    onClick={() => setModalOpen(false)}
+                    className="absolute top-1.5 right-2 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
+                  >
+                    <HiX className="w-5 h-5" />
+                  </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.length > 0 ? (
-                    chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
+                    chatHistory.map((c, i) => <ChatMessage lockChat={lockChat} chat={c} key={i} />)
                   ) : (
                     <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
                       <span>
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 2386bfeb4..844458b8a 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@@ -85,10 +85,10 @@ export default function ButtonBox({
 					)}
 				>
 						<div
-							className={`flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`}
+							className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
 						>
 							<div
-								className={`flex items-center justify-center ${smallCircle} bg-white rounded-full`}
+								className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
 							>
 								<div className={textColor}>{icon}</div>
 							</div>
@@ -96,7 +96,7 @@ export default function ButtonBox({
 						<div className="mt-auto mb-auto">
 						<h3
 							className={classNames(
-								"font-semibold text-white",
+								"font-semibold text-white dark:text-white/80",
 								titleFontSize,
 								marginTop
 							)}
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 1405a3c68..85f495678 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -16,7 +16,7 @@ import { error } from "console";
 import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
-import { classNames, toNormalCase } from "../../utils";
+import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
 
 export default function ImportModal() {
 	const [open, setOpen] = useState(true);
@@ -140,7 +140,7 @@ export default function ImportModal() {
 											<div className="flex h-full w-full justify-evenly items-center">
 												<ButtonBox
 													size="big"
-													bgColor="bg-emerald-500"
+													bgColor="bg-emerald-500 dark:bg-emerald-500/75"
 													description="Prebuilt Examples"
 													icon={
 														<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
@@ -149,12 +149,12 @@ export default function ImportModal() {
 														setShowExamples(true);
 														handleExamples();
 													}}
-													textColor="text-emerald-400"
+													textColor="text-emerald-500 dark:text-emerald-500/75"
 													title="Examples"
 												></ButtonBox>
 												<ButtonBox
 													size="big"
-													bgColor="bg-blue-500"
+													bgColor="bg-blue-500 dark:bg-blue-500/75"
 													description="Import from Local"
 													icon={
 														<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
@@ -163,8 +163,8 @@ export default function ImportModal() {
 														uploadFlow();
 														setModalOpen(false);
 													}}
-													textColor="text-blue-500"
-													title="Local file"
+													textColor="text-blue-500 dark:text-blue-500/75"
+													title="Local File"
 												></ButtonBox>
 											</div>
 										)}
@@ -181,7 +181,7 @@ export default function ImportModal() {
 														{" "}
 														<ButtonBox
 															size="small"
-															bgColor="bg-emerald-500"
+															bgColor="bg-emerald-500 dark:bg-emerald-500/75"
 															description={
 																example.description ?? "Prebuilt Examples"
 															}
@@ -192,8 +192,8 @@ export default function ImportModal() {
 																addFlow(example);
 																setModalOpen(false);
 															}}
-															textColor="text-emerald-400"
-															title={toNormalCase(example.name)}
+															textColor="text-emerald-500 dark:text-emerald-500/75"
+															title={example.name}
 														></ButtonBox>
 													</div>
 												);
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 06787743b..b5ed1a447 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -25,7 +25,7 @@ export default function TabsManagerComponent() {
 		useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
 	const { templates } = useContext(typesContext);
-	const AlertWidth = 256;
+	const AlertWidth = 384;
 	const { dark, setDark } = useContext(darkContext);
 	const { notificationCenter, setNotificationCenter } =
 		useContext(alertContext);
@@ -71,7 +71,7 @@ export default function TabsManagerComponent() {
 					</button>
 					<button
 						onClick={() => openPopUp(<ExportModal />)}
-						className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
+						className="flex items-center gap-1 pr-2 text-sm text-gray-600  border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
 					>
 						Export <ArrowDownTrayIcon className="h-5 w-5" />
 					</button>
@@ -98,7 +98,7 @@ export default function TabsManagerComponent() {
 								<>
 									<div
 										className="z-10 absolute"
-										style={{ top: top + 20, left: left - AlertWidth }}
+										style={{ top: top + 34, left: left - AlertWidth }}
 									>
 										<AlertDropdown />
 									</div>
diff --git a/src/frontend/src/png.d.ts b/src/frontend/src/png.d.ts
new file mode 100644
index 000000000..f02bea9ff
--- /dev/null
+++ b/src/frontend/src/png.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+	const content: any;
+	export default content;
+}
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 65579cdfe..3347ee018 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -316,6 +316,14 @@ export function toFirstUpperCase(str: string) {
 		.join("");
 }
 
+export function snakeToSpaces(str: string) {
+	let result = str
+		.split("_")
+		.join(" ");
+
+	return result
+}
+
 export function toNormalCase(str: string) {
 	let result = str
 		.split("_")
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 84571cb5f..7bb93d514 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -57,6 +57,11 @@ module.exports = {
           "font-family": "text-security-disc"
 
         },
+        '.stop': {
+          '-webkit-animation-play-state': 'paused',
+          '-moz-animation-play-state': 'paused',
+          'animation-play-state': 'paused',
+        },
         '.custom-scroll':{
           '&::-webkit-scrollbar': {
             'width': '8px',