diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
index bfd510a30..2ac954c48 100644
--- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx
@@ -136,7 +136,7 @@ export default function BuildTrigger({
     >
      <div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
         <div
-          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
+          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
            bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
           onClick={() => {
             handleBuild(flow);
@@ -148,7 +148,7 @@ export default function BuildTrigger({
                 // Render your loading animation here when isBuilding is true
                 <Loading strokeWidth={1.5} style={{ color: "white" }} />
               ) : (
-                <Zap className="sh-6 w-6 fill-[#884cb1] stroke-1 stroke-[#884cb1]"/>
+                <Zap className="sh-6 w-6 fill-orange-400 stroke-1 stroke-orange-400"/>
               )}
             </div>
           </button>
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
index d87aafd02..e5d3bb300 100644
--- a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -1,5 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { MessagesSquare } from "lucide-react";
+
 import { alertContext } from "../../../contexts/alertContext";
 import { useContext } from "react";
 
@@ -31,15 +32,14 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
 
 <div className="absolute bottom-4 right-3">
         <div
-          className="
-          rounded-full shadow-md hover:shadow-sm shadow-[#00000063] hover:shadow-[#00000063]
-          flex justify-center items-center w-12 h-12 bg-blue-500 dark:border-gray-600 cursor-pointer"
+          className="flex justify-center align-center py-1 px-3 w-12 h-12 rounded-full shadow-md shadow-[#0000002a] hover:shadow-[#00000032]
+          bg-[#E2E7EE] dark:border-gray-600 cursor-pointer"
           onClick={handleClick}
         >
           <button>
             <div className="flex gap-3">
               <MessagesSquare
-                className="h-6 w-6  text-blue-100 fill-blue-100"
+                className="pth-6 w-6 fill-[#5c8be1] stroke-1 stroke-[#5c8be1]"
                 style={{ color: "white" }}
                 strokeWidth={1.5}
               />